/* ==========================================================================
   TNL — section styles. Loaded after base.css.
   ========================================================================== */

/* --- top bar + language toggle ------------------------------------------ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(6, 10, 19, 0);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.topbar.is-stuck {
  background: rgba(6, 10, 19, .82);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hair);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}

.brand { display: flex; align-items: center; gap: 11px; }
/* The real mark, white on this dark page. Height is fixed and width follows,
   so the intrinsic 512x167 in the markup still reserves the right box and the
   header does not shift as the image decodes. */
.brand__logo { display: block; height: 24px; width: auto; }
@media (max-width: 560px) { .brand__logo { height: 21px; } }
/* Kept for any surface still drawing the pre-logo placeholder. */
.brand__tile {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo));
  color: #14100a;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand__name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-hi);
}
.brand__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
@media (max-width: 560px) { .brand__sub { display: none; } }

.langs { display: flex; align-items: center; border: 1px solid var(--hair); border-radius: var(--radius); }
.lang {
  display: flex;
  align-items: center;
  min-height: 38px;          /* tap target — 33px was under the comfortable minimum */
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--fg-dim);
  transition: color .2s ease, background .2s ease;
}
.lang[aria-pressed="true"] { color: var(--ink-950); background: var(--gold); }
.lang:not([aria-pressed="true"]):hover { color: var(--fg); }

.topbar__cta { display: none; }
@media (min-width: 720px) {
  .topbar__cta { display: inline-flex; padding: 11px 22px; font-size: 13px; }
}

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(108px, 15vw, 150px) clamp(56px, 8vw, 88px);
}
.hero__glow {
  top: -22%; left: 50%;
  width: min(1100px, 130vw);
  height: 760px;
  transform: translateX(-50%);
}
.hero__chart {
  position: absolute;
  inset: auto 0 0 0;
  height: min(46%, 400px);
  opacity: .34;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 55%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000 88%, transparent);
}
.hero__chart svg { width: 100%; height: 100%; }
.hero__in { position: relative; text-align: center; }

.hero .eyebrow { display: inline-block; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-soft);
}
.hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(214, 178, 102, .6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 178, 102, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(214, 178, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 178, 102, 0); }
}

.hero__h1 { margin-top: 30px; }
.hero__num {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.02em;
}

/* the three red negatives under the headline */
.negs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin-top: 26px;
}
.neg {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--down-hi);
  white-space: nowrap;
}
.neg::before { content: "✕"; margin-right: 8px; color: var(--down); font-size: 13px; }

.hero__lede { margin: 26px auto 0; max-width: 640px; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}

/* stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(12, 19, 34, .55);
  backdrop-filter: blur(6px);
}
.stat { padding: 20px 12px; border-left: 1px solid var(--hair); }
.stat:first-child { border-left: 0; }
.stat__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.stat__v {
  margin-top: 7px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-hi);
}
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}

/* --- two-curve comparison ----------------------------------------------- */
.curves { margin-top: 44px; }
.curve { padding: 24px; }
.curve__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.curve__title { margin-top: 14px; }
.curve__svg { margin-top: 20px; width: 100%; height: auto; }
.curve__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
}
.curve--down .curve__foot { color: var(--down-hi); }
.curve--up   .curve__foot { color: var(--up-hi); }

.disclaimer-note {
  margin-top: 26px;
  padding: 16px 18px;
  border-left: 2px solid var(--gold-line);
  background: rgba(255, 255, 255, .02);
}

/* ── AI read-out: what you hand in, what comes back ─────────────────────
   Replaced a drag-to-compare slider that labelled six steps but owned only
   two images, so four of the six showed nothing new. Static and stacked
   beats clever here: most of this page's traffic is a thumb on a phone,
   where a horizontal drag fights the page scroll. */
.scan {
  margin-top: 40px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.05fr);
  align-items: start;
}
.scan__panel {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 15px 16px 13px;
}
.scan__cap,
.find__k,
.scan__more,
.scan__arrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-mut);
}
.scan__cap { margin-bottom: 10px; }
.scan__rows { font-family: var(--mono); font-size: 12px; color: var(--paper-ink); }
.scan__row {
  display: grid;
  grid-template-columns: 42px 1fr 34px auto;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--paper-line);
}
.scan__row:first-child { border-top: 0; }
.scan__row .scan__neg { color: var(--down); text-align: right; }
.scan__row .scan__pos { color: var(--up); text-align: right; }
.scan__more { padding-top: 9px; letter-spacing: .1em; text-transform: none; }

.scan__arrow { display: grid; place-items: center; gap: 4px; padding-top: 26px; }
.scan__arrow-g { font-size: 18px; color: var(--gold-lo); transform: rotate(-90deg); }

.finds { display: grid; gap: 10px; }
.find {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 15px;
}
.find__h {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--paper-ink);
  margin: 4px 0 6px;
}
.find__n { font-family: var(--mono); font-size: 12px; color: var(--down); }

.scan__rule {
  margin-top: 18px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-ink);
}

@media (max-width: 860px) {
  .scan { grid-template-columns: 1fr; gap: 12px; }
  .scan__arrow { padding-top: 0; }
  .scan__arrow-g { transform: none; }
}

/* --- agenda timeline ---------------------------------------------------- */
.agenda { margin-top: 44px; }
.block {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 340px;
  gap: 34px;
  padding-block: 40px;
  border-top: 1px solid var(--hair);
  align-items: start;
}
.block:first-child { border-top: 0; padding-top: 8px; }
.block__time {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--gold);
  padding-top: 4px;
}
.block__keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
@media (max-width: 980px) {
  .block { grid-template-columns: 100px minmax(0, 1fr); }
  .block__viz { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* mock data panel shown beside each agenda block */
.viz { padding: 16px; }
.viz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.viz__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-2);
}
.viz__row + .viz__row { border-top: 1px solid var(--hair-soft); }
.viz__label { flex: 1; }
.viz__meter {
  width: 62px; height: 3px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  overflow: hidden;
}
.viz__meter i { display: block; height: 100%; background: var(--fg-dim); }
.viz__row.is-pass .viz__meter i { background: var(--up); }
.viz__num { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.viz__mark { width: 14px; text-align: center; color: var(--down); }
.viz__row.is-pass .viz__mark { color: var(--up); }
.viz__row.is-pass { color: var(--fg-hi); }

.viz__note {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg-mut);
}
.viz__note b { color: var(--gold); font-weight: 400; }

.rulecard { padding: 13px; border: 1px solid var(--hair); border-radius: var(--radius); background: rgba(255, 255, 255, .02); }
.rulecard + .rulecard { margin-top: 9px; }
.rulecard__k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); }
.rulecard__v { margin-top: 5px; font-size: 13px; color: var(--fg-hi); }

/* --- the 10-second decision game ---------------------------------------- */
.game { margin-top: 40px; }
.game__stage { position: relative; padding: 0; overflow: hidden; }
.game__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.game__status { color: var(--gold); }
.game__canvas { position: relative; aspect-ratio: 16 / 6; background: var(--ink-950); }
.game__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.game__prompt {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  background: rgba(6, 10, 19, .8);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.game__prompt.is-on { opacity: 1; visibility: visible; }
.game__choices { display: flex; justify-content: center; gap: 10px; }
.game__choice {
  padding: 11px 22px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fg);
  transition: border-color .15s ease, background .15s ease;
}
.game__choice:hover { border-color: var(--gold); background: var(--gold-soft); }
.game__timer {
  width: 120px; height: 2px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.game__timer i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; }

.game__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-top: 1px solid var(--hair);
}
.game__verdict { display: none; margin-top: 26px; }
.game__verdict.is-on { display: block; }
.game__verdict-hd {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.35;
  color: var(--gold-hi);
}
.game__lines { margin-top: 18px; max-width: 640px; }
.game__lines p { color: var(--fg-2); font-size: 15px; line-height: 1.9; }
.game__lines p + p { margin-top: 10px; }

/* --- persona cards ------------------------------------------------------ */
.personas { margin-top: 40px; }
.persona { display: flex; flex-direction: column; }
.persona__tag {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
}
.persona__viz {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
}
.persona__viz svg { width: 100%; height: auto; }
.persona__viz-cap {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* --fg-dim lands at ~4.47:1 here: the card's gold wash lifts the painted
     backdrop just enough to miss AA. One step brighter clears it with room. */
  color: var(--fg-mut);
  text-align: center;
}
.persona__body { flex: 1; }
.persona__pick {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--gold);
  text-align: left;
  transition: color .2s ease;
}
.persona__pick:hover { color: var(--gold-hi); }

/* --- disqualifiers ------------------------------------------------------ */
.nots { margin-top: 40px; }
.not { display: flex; gap: 16px; padding: 24px; }
.not__x {
  flex: none;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--down);
  line-height: 1.6;
}

/* --- close + form ------------------------------------------------------- */
.close { text-align: center; }
.close__h {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fg-hi);
}

.form-wrap { max-width: 480px; margin: 40px auto 0; padding: 30px; text-align: left; }
.field + .field { margin-top: 16px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field input, .field select {
  width: 100%;
  padding: 13px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  color: var(--fg-hi);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder { color: var(--fg-dim); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(214, 178, 102, .05);
}
.field input:user-invalid { border-color: var(--down); }
.field__err {
  display: none;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--down-hi);
}
.field.is-bad .field__err { display: block; }
.field.is-bad input { border-color: var(--down); }

.form-wrap .btn { margin-top: 22px; }
.form-note { margin-top: 14px; text-align: center; }
.form-ok {
  display: none;
  padding: 26px;
  text-align: center;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-soft);
}
.form-ok.is-on { display: block; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { margin-top: 36px; max-width: 820px; }
.qa { border-top: 1px solid var(--hair); }
.qa:last-child { border-bottom: 1px solid var(--hair); }
.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--fg-hi);
}
.qa__i {
  flex: none;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--gold);
  transition: transform .25s ease;
}
.qa[open] .qa__i { transform: rotate(45deg); }
.qa__a { padding-bottom: 24px; max-width: 680px; }
.qa__q::-webkit-details-marker { display: none; }

/* --- footer ------------------------------------------------------------- */
.foot { padding-block: 48px; border-top: 1px solid var(--hair); background: #03050b; }
.foot__risk {
  padding: 20px;
  color: var(--fg-mut);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .015);
}
.foot__legal { margin-top: 28px; }
.foot__legal p + p { margin-top: 12px; }
.foot__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}

/* --- sticky mobile CTA -------------------------------------------------- */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 10, 19, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hair);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.dock.is-on { transform: none; }
@media (min-width: 720px) { .dock { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 719px) { body.has-dock { padding-bottom: 78px; } }