/* ============================================================
   TP CONTEXT - PUBLIC HOME v2.2
   Result-first commercial homepage
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL DENSITY
   ------------------------------------------------------------ */

@media (min-width: 1200px) {

  body {
    zoom: .84 !important;
  }
}


/* Product-shell empty plan badge */
.tp-shell-plan[hidden] {
  display: none !important;
}


/* Old inline plan wall no longer belongs on Home */
.tp-home-v22-legacy-plans {
  display: none !important;
}


/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

#publicHome .public-hero {
  position: relative;

  min-height: 670px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    94px
    clamp(32px, 7vw, 116px);

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 17%,
      rgba(74, 189, 239, .145),
      transparent 33rem
    ),
    radial-gradient(
      circle at 88% 100%,
      rgba(73, 125, 255, .085),
      transparent 31rem
    ),
    linear-gradient(
      145deg,
      #0c1721,
      #091319 60%,
      #0b1a21
    );

  isolation: isolate;
}

#publicHome .public-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .26;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      #000 20%,
      #000 77%,
      transparent 100%
    );

  animation:
    tpV22Grid
    22s linear infinite;
}

#publicHome .public-hero::after {
  content: "";

  position: absolute;

  z-index: 1;

  left: -25%;
  right: -25%;

  top: 40%;

  height: 1px;

  opacity: .35;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(99, 199, 242, .85),
      transparent
    );

  animation:
    tpV22Scan
    7.5s ease-in-out infinite;
}

#publicHome .public-hero-copy {
  position: relative;

  z-index: 5;

  width: 100%;
  max-width: 1050px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;

  align-items: center;
}

#publicHome .public-hero .eyebrow {
  margin-bottom: 20px;

  color:
    #65c6f0;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .23em;

  text-shadow:
    0 0 25px
    rgba(101, 198, 240, .32);
}

#publicHome .public-hero h2 {
  max-width: 1050px;

  margin:
    0 auto
    25px;

  font-family:
    "Segoe UI Variable Display",
    "Segoe UI",
    Inter,
    system-ui,
    sans-serif;

  font-size:
    clamp(55px, 6.2vw, 96px);

  font-weight: 850;

  line-height: .96;

  letter-spacing: -.065em;

  text-align: center;

  text-wrap: balance;

  background:
    linear-gradient(
      112deg,
      #ffffff 4%,
      #e2f6ff 39%,
      #65c6ef 64%,
      #c4dcff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  filter:
    drop-shadow(
      0 15px 37px
      rgba(0,0,0,.23)
    );
}

#publicHome .public-hero-lead {
  max-width: 770px;

  margin:
    0 auto
    29px;

  color:
    #adbcc5;

  font-size: 17px;

  line-height: 1.72;

  text-align: center;

  text-wrap: balance;
}

#publicHome .public-hero-actions {
  justify-content: center;
}

#publicHome .public-how-link {
  margin:
    16px auto
    0;
}

#publicHome .public-trust-row {
  justify-content: center;

  margin-top: 30px;
}


/* ------------------------------------------------------------
   HERO PRODUCT SIGNALS
   ------------------------------------------------------------ */

.tp-v22-hero-motion {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;
}

.tp-v22-signal {
  position: absolute;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(100, 198, 240, .18);

  border-radius: 999px;

  color:
    rgba(145, 214, 244, .67);

  background:
    rgba(6, 17, 20, .60);

  backdrop-filter:
    blur(9px);

  box-shadow:
    0 10px 38px
    rgba(0,0,0,.18);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .12em;

  animation:
    tpV22Float
    6s ease-in-out infinite;
}

.tp-v22-signal-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #65c6ef;

  box-shadow:
    0 0 11px
    rgba(101,198,239,.7);
}

.tp-v22-signal-a {
  top: 22%;
  left: 7%;
}

.tp-v22-signal-b {
  top: 27%;
  right: 7%;

  animation-delay: -1.5s;
}

.tp-v22-signal-c {
  left: 10%;
  bottom: 19%;

  animation-delay: -3s;
}

.tp-v22-signal-d {
  right: 9%;
  bottom: 20%;

  animation-delay: -4.5s;
}


/* ------------------------------------------------------------
   3 STEP FLOW
   ------------------------------------------------------------ */

.tp-v22-flow {
  max-width: 1100px;

  margin:
    -28px auto
    85px;

  position: relative;

  z-index: 7;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 1px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 18px;

  background:
    rgba(255,255,255,.06);

  box-shadow:
    0 22px 70px
    rgba(0,0,0,.19);
}

.tp-v22-flow-step {
  position: relative;

  padding:
    19px 22px;

  display: flex;
  align-items: center;

  gap: 13px;

  background:
    rgba(10,17,22,.96);
}

.tp-v22-flow-step b {
  width: 29px;
  height: 29px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color:
    #67c5ed;

  background:
    rgba(101,198,239,.09);

  font-size: 10px;
}

.tp-v22-flow-step strong {
  display: block;

  color:
    #eaf0f2;

  font-size: 12px;
}

.tp-v22-flow-step span {
  display: block;

  margin-top: 3px;

  color:
    #74838d;

  font-size: 10px;
}


/* ------------------------------------------------------------
   SECTION BASICS
   ------------------------------------------------------------ */

.tp-v22-section {
  max-width: 1180px;

  margin:
    105px auto;

  position: relative;
}

.tp-v22-section-head {
  max-width: 790px;

  margin-bottom: 34px;
}

.tp-v22-section-head.is-centered {
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.tp-v22-kicker {
  color:
    #64c5ee;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .19em;
}

.tp-v22-section h3 {
  margin:
    11px 0
    13px;

  color:
    #f2f7f8;

  font-size:
    clamp(34px,4.2vw,55px);

  line-height: 1.02;

  letter-spacing: -.05em;

  text-wrap: balance;
}

.tp-v22-section-head p {
  margin: 0;

  color:
    #82919a;

  font-size: 14px;

  line-height: 1.7;
}


/* ------------------------------------------------------------
   ALERT STORY - MOVING PRODUCT DEMO
   ------------------------------------------------------------ */

.tp-v22-alert-stage {
  display: grid;

  grid-template-columns:
    .9fr 1.3fr;

  gap: 16px;
}

.tp-v22-live-monitor {
  min-height: 430px;

  padding: 26px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(97,196,238,.07),
      transparent 20rem
    ),
    #0c151c;

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.21);
}

.tp-v22-monitor-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.tp-v22-monitor-market span,
.tp-v22-monitor-market strong {
  display: block;
}

.tp-v22-monitor-market span {
  color:
    #6c7982;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .14em;
}

.tp-v22-monitor-market strong {
  margin-top: 4px;

  color:
    #f1f5f7;

  font-size: 20px;
}

.tp-v22-live-pill {
  padding:
    7px 10px;

  border:
    1px solid
    rgba(101,198,239,.23);

  border-radius: 999px;

  color:
    #70c5ea;

  background:
    rgba(101,198,239,.075);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .10em;
}

.tp-v22-monitor-rule-list {
  margin-top: 35px;
}

.tp-v22-monitor-rule {
  display: grid;

  grid-template-columns:
    26px 1fr auto;

  align-items: center;

  gap: 11px;

  min-height: 52px;

  padding:
    0 11px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}

.tp-v22-monitor-rule i {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color:
    #77858e;

  background:
    rgba(255,255,255,.04);

  font-style: normal;

  font-size: 9px;
}

.tp-v22-monitor-rule strong {
  color:
    #bec9ce;

  font-size: 11px;
  font-weight: 650;
}

.tp-v22-monitor-rule span {
  color:
    #65727b;

  font-size: 9px;
}

.tp-v22-monitor-rule.is-done i {
  color:
    #67c3ea;

  background:
    rgba(101,198,239,.085);
}

.tp-v22-monitor-rule.is-done span {
  color:
    #62b7db;
}

.tp-v22-monitor-rule.is-active {
  background:
    linear-gradient(
      90deg,
      rgba(101,198,239,.06),
      transparent
    );
}

.tp-v22-monitor-footer {
  margin-top: 26px;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 13px;

  color:
    #87949c;

  background:
    rgba(255,255,255,.025);

  font-size: 10px;
}


/* Alerts */

.tp-v22-alert-stack {
  display: grid;

  gap: 12px;
}

.tp-v22-alert {
  position: relative;

  min-height: 126px;

  padding:
    21px 22px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 19px;

  background:
    #0d151c;

  opacity: .53;

  transform:
    scale(.985);

  transition:
    opacity .45s ease,
    transform .45s ease,
    border-color .45s ease,
    background .45s ease;
}

.tp-v22-alert.is-active {
  opacity: 1;

  transform:
    scale(1);

  border-color:
    rgba(101,198,239,.22);

  background:
    linear-gradient(
      110deg,
      rgba(101,198,239,.075),
      #0e171e 55%
    );

  box-shadow:
    0 22px 65px
    rgba(0,0,0,.19);
}

.tp-v22-alert-top {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 14px;
}

.tp-v22-alert-kind {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .13em;
}

.tp-v22-alert-kind i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    currentColor;
}

.tp-v22-alert-forming
.tp-v22-alert-kind {
  color:
    #f1c66e;
}

.tp-v22-alert-confirmed
.tp-v22-alert-kind {
  color:
    #65c5ee;
}

.tp-v22-alert-invalidated
.tp-v22-alert-kind {
  color:
    #ef8484;
}

.tp-v22-alert-time {
  color:
    #64717a;

  font-size: 9px;
}

.tp-v22-alert h4 {
  margin:
    12px 0
    6px;

  color:
    #edf2f4;

  font-size: 15px;
}

.tp-v22-alert p {
  margin: 0;

  color:
    #84929b;

  font-size: 11px;

  line-height: 1.55;
}


/* ------------------------------------------------------------
   RULES / STRATEGY OWNERSHIP
   ------------------------------------------------------------ */

.tp-v22-rules-layout {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 16px;
}

.tp-v22-rule-builder {
  padding: 27px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 23px;

  background:
    #0d151c;
}

.tp-v22-rule-builder-head {
  display: flex;

  justify-content: space-between;

  margin-bottom: 21px;

  color:
    #75838c;

  font-size: 9px;

  letter-spacing: .13em;
}

.tp-v22-rule-chip {
  margin-top: 9px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 50px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);
}

.tp-v22-rule-chip strong {
  color:
    #cbd4d8;

  font-size: 11px;
}

.tp-v22-rule-chip span {
  color:
    #66bbdf;

  font-size: 9px;
}

.tp-v22-ownership {
  padding:
    34px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  border:
    1px solid
    rgba(101,198,239,.14);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(101,198,239,.08),
      transparent 18rem
    ),
    #0d171b;
}

.tp-v22-ownership strong {
  color:
    #64c5ee;

  font-size: 11px;

  letter-spacing: .14em;
}

.tp-v22-ownership h4 {
  margin:
    14px 0
    14px;

  color:
    #f0f5f6;

  font-size:
    clamp(28px,3vw,40px);

  line-height: 1.04;

  letter-spacing: -.04em;
}

.tp-v22-ownership p {
  margin: 0;

  color:
    #84939b;

  font-size: 13px;

  line-height: 1.7;
}


/* ------------------------------------------------------------
   WHAT TP IS / IS NOT
   ------------------------------------------------------------ */

.tp-v22-boundaries {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;
}

.tp-v22-boundary {
  padding: 28px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 22px;

  background:
    #0d151c;
}

.tp-v22-boundary.is-positive {
  border-color:
    rgba(101,198,239,.15);
}

.tp-v22-boundary.is-negative {
  border-color:
    rgba(239,132,132,.11);
}

.tp-v22-boundary h4 {
  margin:
    0 0
    19px;

  color:
    #eef3f5;

  font-size: 20px;
}

.tp-v22-boundary ul {
  list-style: none;

  padding: 0;
  margin: 0;
}

.tp-v22-boundary li {
  position: relative;

  padding:
    9px 0
    9px 24px;

  color:
    #a7b3ba;

  font-size: 12px;

  line-height: 1.45;
}

.tp-v22-boundary li::before {
  position: absolute;

  left: 0;
}

.tp-v22-boundary.is-positive
li::before {
  content: "✓";

  color:
    #68c3ea;
}

.tp-v22-boundary.is-negative
li::before {
  content: "—";

  color:
    #ef8c8c;
}


/* ------------------------------------------------------------
   TRANSPARENCY
   ------------------------------------------------------------ */

.tp-v22-transparency {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 12px;
}

.tp-v22-trust-card {
  padding:
    22px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 17px;

  background:
    rgba(255,255,255,.018);
}

.tp-v22-trust-card span {
  display: block;

  margin-bottom: 9px;

  color:
    #65737c;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;
}

.tp-v22-trust-card strong {
  color:
    #dce4e7;

  font-size: 13px;
}

.tp-v22-trust-card p {
  margin:
    8px 0
    0;

  color:
    #74828b;

  font-size: 10px;

  line-height: 1.55;
}


/* ------------------------------------------------------------
   RISK NOTICE
   ------------------------------------------------------------ */

.tp-v22-risk {
  margin-top: 15px;

  padding:
    17px 19px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius: 13px;

  color:
    #75828a;

  background:
    rgba(255,255,255,.018);

  font-size: 10px;

  line-height: 1.6;
}


/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */

.tp-v22-faq-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 11px;
}

.tp-v22-faq-grid details {
  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius: 15px;

  background:
    rgba(255,255,255,.018);
}

.tp-v22-faq-grid summary {
  position: relative;

  padding:
    19px 47px
    19px 19px;

  cursor: pointer;

  list-style: none;

  color:
    #d6dee2;

  font-size: 12px;

  font-weight: 700;
}

.tp-v22-faq-grid summary::-webkit-details-marker {
  display: none;
}

.tp-v22-faq-grid summary::after {
  content: "+";

  position: absolute;

  top: 50%;
  right: 18px;

  transform:
    translateY(-50%);

  color:
    #67c3ea;

  font-size: 20px;

  font-weight: 400;
}

.tp-v22-faq-grid details[open]
summary::after {
  content: "–";
}

.tp-v22-faq-grid details p {
  margin:
    -3px 19px
    19px;

  color:
    #78868f;

  font-size: 11px;

  line-height: 1.65;
}


/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */

.tp-v22-final-cta {
  padding:
    52px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  border:
    1px solid
    rgba(101,198,239,.17);

  border-radius: 27px;

  background:
    radial-gradient(
      circle at 0 100%,
      rgba(101,198,239,.11),
      transparent 25rem
    ),
    #0d171b;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.22);
}

.tp-v22-final-cta h3 {
  max-width: 750px;

  margin-bottom: 0;
}

.tp-v22-final-actions {
  flex: 0 0 auto;

  display: flex;

  gap: 10px;
}

.tp-v22-final-actions button,
.tp-v22-final-actions a {
  min-height: 44px;

  padding:
    0 17px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 11px;

  cursor: pointer;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;
}

.tp-v22-final-primary {
  color:
    #060e12 !important;

  border-color:
    transparent !important;

  background:
    #65c6ef;
}

.tp-v22-final-secondary {
  color:
    #d3dbdf;

  background:
    rgba(255,255,255,.035);
}


/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */

.tp-v22-reveal {
  opacity: 0;

  transform:
    translateY(27px);

  transition:
    opacity .72s ease,
    transform .72s
    cubic-bezier(.2,.8,.2,1);
}

.tp-v22-reveal.is-visible {
  opacity: 1;

  transform: none;
}


/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

@keyframes tpV22Grid {

  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      55px 55px,
      55px 55px;
  }
}

@keyframes tpV22Scan {

  0%,
  100% {
    transform:
      translateY(-190px);

    opacity: 0;
  }

  50% {
    transform:
      translateY(150px);

    opacity: .42;
  }
}

@keyframes tpV22Float {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-12px);
  }
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1050px) {

  .tp-v22-alert-stage,
  .tp-v22-rules-layout {
    grid-template-columns: 1fr;
  }

  .tp-v22-transparency {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 720px) {

  body {
    zoom: 1 !important;
  }

  #publicHome .public-hero {
    min-height: auto;

    padding:
      64px 20px;
  }

  #publicHome .public-hero h2 {
    font-size:
      clamp(42px,13vw,64px);
  }

  #publicHome .public-hero-lead {
    font-size: 14px;
  }

  .tp-v22-signal {
    display: none;
  }

  .tp-v22-flow {
    margin-top: 12px;

    grid-template-columns: 1fr;
  }

  .tp-v22-section {
    margin:
      70px auto;
  }

  .tp-v22-boundaries,
  .tp-v22-transparency,
  .tp-v22-faq-grid {
    grid-template-columns: 1fr;
  }

  .tp-v22-final-cta {
    padding:
      31px 22px;

    align-items: stretch;

    flex-direction: column;
  }

  .tp-v22-final-actions {
    flex-direction: column;
  }
}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;
  }

  .tp-v22-reveal {
    opacity: 1;

    transform: none;
  }
}

/* ============================================================
   TP_PUBLIC_HOME_V23_POLISH
   Homepage v2.3 polish
   ============================================================ */

#publicHowNavBtn,
#publicPlansNavBtn {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .025em !important;
  border-radius: 11px !important;
}

#publicHowNavBtn:hover,
#publicPlansNavBtn:hover {
  background:
    rgba(255,255,255,.055);
}

#tpHeroChartRoot
.tp-v23-chart-guide {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

#tpHeroChartRoot
.tp-v23-chart-guide span {
  min-height: 25px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border:
    1px solid
    rgba(94,189,230,.14);
  border-radius: 999px;
  background:
    rgba(8,18,23,.76);
  box-shadow:
    0 7px 22px
    rgba(0,0,0,.17);
  backdrop-filter: blur(8px);
  color: #bfd0d8;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
}

#tpHeroChartRoot
.tp-v23-chart-guide span:last-child {
  color: #73c8ed;
  border-color:
    rgba(94,189,230,.28);
  background:
    rgba(94,189,230,.075);
}

@media (max-width: 720px) {

  #publicHowNavBtn,
  #publicPlansNavBtn {
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  #tpHeroChartRoot
  .tp-v23-chart-guide {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 4px;
  }

  #tpHeroChartRoot
  .tp-v23-chart-guide span {
    min-height: 22px;
    padding: 0 7px;
    font-size: 8px;
  }
}