/* Tradveller webinar lander · "The Tape" (v4)
   A trading desk on white paper. The chart is the hero; numbers are set huge and condensed.
   Colour has one job each: green = went up, red = went down, yellow = look here / act.
   No cards: sections are open, separated by space and hairlines only. Previous look: data/site.v3-notebook.css */
:root {
  --bg: #fff;
  --tint: #f5f6f7;
  --ink: #0b0d10;
  --ink-2: #33383f;
  --mute: #6a7079;
  --line: #e6e8eb;
  --up: #0a9b5c;      /* lines, big numbers */
  --up-ink: #077a48;  /* small green text (4.9:1) */
  --dn: #d7263d;      /* lines, big numbers */
  --dn-ink: #c41f33;  /* small red text (5.1:1) */
  --hl: #ffe14d;      /* highlighter */
  --cta: #ffd400;
  --disp: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.up { color: var(--up-ink); }
.dn, .neg { color: var(--dn-ink); }
mark { color: inherit; background: linear-gradient(transparent 8%, var(--hl) 8%, var(--hl) 94%, transparent 94%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
s { text-decoration-color: var(--dn); text-decoration-thickness: 3px; }

/* ---------- type ---------- */
.kicker { font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec .kicker::before { content: ""; width: 26px; height: 2px; background: var(--ink); flex: none; }
.kicker mark { padding: 3px 7px; background: var(--hl); }
.h-hero, .h-sec { font-family: var(--disp); font-weight: 900; font-stretch: 84%; letter-spacing: -.022em; line-height: .96; text-wrap: balance; }
.h-hero { font-size: clamp(38px, 10.4vw, 76px); }
.h-sec { font-size: clamp(36px, 8.6vw, 72px); max-width: 15ch; }
.h-hero em, .h-sec em { font-style: normal; color: var(--dn); }
.lead { margin-top: 16px; font-size: 18.5px; color: var(--ink-2); max-width: 36em; }
.small, .micro { font-size: 14px; color: var(--mute); }
.micro b { color: var(--ink); }
.rk { display: block; font: 700 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.mono { font-family: var(--mono); }
.desk-only { display: none; }
.ph-only { display: inline; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--cta); color: var(--ink); font: 800 19px/1.1 var(--disp); font-stretch: 96%; letter-spacing: -.005em; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #ffdd2e; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-xl { min-height: 66px; font-size: 22px; padding: 0 34px; }
.btn-ghost { background: #fff; box-shadow: none; border: 2px solid var(--ink); min-height: 50px; font-size: 16.5px; padding: 0 18px; }
.btn-ghost:hover { background: var(--tint); }
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-wa { background: #25d366; }
.btn-wa:hover { background: #3be07a; }
.spin { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(11, 13, 16, .25); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
.busy .spin { display: inline-block; }
.busy .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- header: ticker tape + bar ---------- */
.bar { position: relative; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); }
.ticker { background: var(--ink); color: #d9dde2; overflow: hidden; height: 30px; font: 600 12px/30px var(--mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.ticker-run { display: flex; width: max-content; animation: tape 38s linear infinite; }
.ticker-set { display: flex; }
.ticker-set > span { padding: 0 22px; border-right: 1px solid #2a2f36; }
.ticker b { font-weight: 800; }
.ticker .up { color: #36d68f; }
.ticker .dn { color: #ff5a6e; }
.ticker .hl { color: var(--hl); }
@keyframes tape { to { transform: translateX(-50%); } }
.bar-in { display: flex; align-items: center; justify-content: space-between; height: 46px; }
.brand { font: 900 21px/1 var(--disp); font-stretch: 90%; letter-spacing: -.02em; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--mono); color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dn); box-shadow: 0 0 0 0 rgba(215, 38, 61, .5); animation: pulse 1.8s infinite; flex: none; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(215, 38, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 38, 61, 0); } }

/* ---------- hero ---------- */
.hero { padding: 14px 0 8px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { display: contents; }
.hero .kicker { order: 1; margin-bottom: 10px; }
.h-hero { order: 2; }
.stage { order: 7; margin-top: 28px !important; }
.hero .speaker-line { order: 6; margin-top: 18px; }
.sub { order: 3; margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.event-line { order: 4; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 2px 7px; font: 600 14px/1.4 var(--body); color: var(--ink-2); }
.event-line b { color: var(--ink); font-weight: 800; }
.event-line .sep { color: #b6bbc2; }
.hero-cta { order: 5; margin-top: 12px; }
.hero-cta .btn { width: 100%; }
.hero-cta .micro { margin-top: 12px; text-align: center; }
.closed-note { display: none; margin-top: 12px; padding: 12px 0; border-top: 2px solid var(--ink); font-weight: 600; }
body.ended .closed-note { display: block; }
body.ended .inline-form, body.ended #bring { display: none; }

.stage { --aw: 112px; position: relative; margin-top: 12px; padding-right: calc(var(--aw) * .8); }
.stage-head { font: 700 12px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.stage-head b { color: var(--ink); }
.chart { position: relative; width: 100%; }
.hero-chart { height: 150px; }
.hero-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.anson-point { position: absolute; right: -20px; bottom: 18px; width: var(--aw); pointer-events: none; -webkit-mask-image: linear-gradient(#000 78%, transparent 99%); mask-image: linear-gradient(#000 78%, transparent 99%); }
.stage-cap { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.stage-cap b { color: var(--ink); }
.stage-cap a { font-size: 13px; color: var(--mute); }
.stage-foot { margin-top: 4px; font: 500 10.5px/1.4 var(--mono); color: var(--mute); }
.stage-foot a { color: var(--ink-2); }

/* chart marks (hero + tester share these) */
.chart .g { stroke: #eef0f2; stroke-width: 1; }
.chart .g.base { stroke: #b9bec5; stroke-dasharray: 3 4; }
.chart .ax { font: 500 10px var(--mono); fill: var(--mute); }
.area-up { fill: url(#gUp); }
.ln-up { fill: none; stroke: var(--up); stroke-width: 2.4; stroke-linejoin: round; }
.ln-dn { fill: none; stroke: var(--dn); stroke-width: 2.8; stroke-linejoin: round; }
.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.7s .25s var(--ease) forwards; }
.js .ln-dn.draw { animation-delay: .55s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.worst, .tag, .lbl { opacity: 0; animation: fade .5s 2.1s forwards; }
.static .draw { animation: none; stroke-dashoffset: 0; }
.static .worst, .static .tag, .static .lbl { animation: none; opacity: 1; }
@keyframes fade { to { opacity: 1; } }
.worst .dash { stroke: var(--dn); stroke-width: 1.2; stroke-dasharray: 3 3; }
.worst .drop { stroke: var(--dn); stroke-width: 1.6; }
.dot-dn { fill: var(--dn); stroke: #fff; stroke-width: 2; }
.worst-l { font: 800 12px var(--disp); font-stretch: 90%; fill: var(--dn-ink); }
.tag path { stroke: none; }
.tag.up path { fill: var(--up); }
.tag.dn path { fill: var(--dn); }
.tag text { font: 800 11.5px var(--mono); fill: #fff; }
.lbl { font: 700 11px var(--body); }
.lbl.up { fill: var(--up-ink); }
.lbl.dn { fill: var(--dn-ink); }

.hero-after { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; padding-bottom: 10px; }
.speaker-line { display: flex; align-items: center; gap: 12px; }
.speaker-line p { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; color: var(--mute); }
.speaker-line b { color: var(--ink); font-size: 15.5px; }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #e6e8eb center / cover no-repeat; }
.case2 { display: block; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); text-decoration: none; }
.case2 u { text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--ink); font-weight: 600; }

/* ---------- sections ---------- */
.sec { padding: 64px 0; }
.sec-tight { padding-top: 24px; }
.sec-tint { background: var(--tint); }
.sec-cta { margin-top: 34px; }
.rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.in { opacity: 1; transform: none; }

/* tester */
.tester { margin-top: 30px; }
.seg { display: flex; gap: 26px; }
.seg button { border: 0; background: none; padding: 0 0 6px; cursor: pointer; font: 900 clamp(24px, 6.4vw, 34px)/1 var(--disp); font-stretch: 80%; color: #c3c8ce; border-bottom: 4px solid transparent; transition: color .2s, border-color .2s; }
.seg button:hover { color: var(--ink-2); }
.seg button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--hl); }
.seg-hint { margin-top: 8px; font: 500 12px var(--mono); color: var(--mute); }
.t-read { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; align-items: end; }
.t-big { display: block; font: 900 clamp(46px, 14vw, 104px)/.9 var(--disp); font-stretch: 72%; letter-spacing: -.02em; color: var(--up); font-variant-numeric: tabular-nums; }
.t-big.neg, .t-big.dn { color: var(--dn); }
.t-big.t-small { font-size: clamp(24px, 6vw, 40px); color: var(--ink); }
.t-trades { margin-top: 12px; font: 600 14px var(--mono); color: var(--ink-2); }
.t-trades b { color: var(--ink); }
.t-chart { margin-top: 16px; }
.t-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.t-dd { fill: var(--dn); fill-opacity: .1; }
.t-base { stroke: #b9bec5; stroke-dasharray: 3 4; }
.t-hold { fill: none; stroke: var(--up); stroke-width: 2.2; }
.t-eq { fill: none; stroke: var(--ink); stroke-width: 2.6; transition: stroke .3s; }
.t-eq.neg { stroke: var(--dn); }
.t-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 500 12.5px var(--mono); color: var(--ink-2); }
.t-key i { display: inline-block; width: 16px; height: 3px; margin-right: 7px; vertical-align: middle; }
.k-eq { background: var(--dn); }
.k-hold { background: var(--up); }
.k-dd { height: 10px !important; background: rgba(215, 38, 61, .14); }
.slip { margin-top: 26px; border-top: 2px solid var(--ink); }
.slip-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 11px 6px; border-bottom: 1px solid var(--line); font: 600 15px var(--mono); font-variant-numeric: tabular-nums; transition: background .2s; }
.slip-row span:not(:first-child) { text-align: right; }
.slip-row.head { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.slip-row.on { background: #fff6c4; font-weight: 800; }
.slip-row.hold { border-top: 1px solid var(--ink); }
.t-cap { margin-top: 26px; font-size: 13px; color: var(--mute); max-width: 52em; }

.takeaways { margin-top: 40px; display: grid; gap: 22px; }
.takeaways li { display: grid; grid-template-columns: 54px 1fr; align-items: baseline; }
.tk-n { font: 900 52px/.8 var(--disp); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.takeaways p { font-size: 19px; line-height: 1.4; color: var(--ink-2); }
.takeaways b { color: var(--ink); }

/* self-check */
.checks { margin-top: 26px; border-top: 2px solid var(--ink); }
.checks li { border-bottom: 1px solid var(--line); }
.checks button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 700 clamp(17px, 4.4vw, 21px)/1.3 var(--disp); font-stretch: 94%; }
.checks button::before { content: ""; flex: none; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 7px; transition: background .15s; }
.checks button[aria-pressed="true"]::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l4 4 7-8' fill='none' stroke='%23ffe14d' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; }
.check-result p { margin-top: 20px; padding-left: 14px; border-left: 4px solid var(--hl); font-size: 18px; color: var(--ink-2); }
.check-result b { color: var(--ink); }

/* the 4 numbers + 3 steps */
.four, .steps { margin-top: 28px; border-top: 2px solid var(--ink); }
.four li, .steps li { display: grid; grid-template-columns: 54px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.f-n { font: 900 46px/.8 var(--disp); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.four h3 { font: 900 clamp(22px, 5.4vw, 30px)/1.1 var(--disp); font-stretch: 88%; }
.four p, .steps p { margin-top: 4px; font-size: 17px; color: var(--ink-2); }
.steps p b { color: var(--ink); }
.four .locked h3, .four .locked p { color: var(--mute); }
.four .locked .blur { display: inline; margin: 0; }
.four-line { margin-top: 18px; font: 700 19px/1.35 var(--disp); font-stretch: 94%; }
.three { margin: 10px 0 4px; counter-reset: th; }
.three li { counter-increment: th; padding: 4px 0; font: 700 18px/1.35 var(--disp); font-stretch: 94%; }
.three li::before { content: counter(th) ". "; color: var(--dn); }
.final-date { margin-bottom: 12px; font: 800 20px/1.3 var(--disp); font-stretch: 94%; }

/* rewrites */
.rewrites { margin-top: 30px; border-top: 2px solid var(--ink); }
.rw { padding: 20px 0; border-bottom: 1px solid var(--line); }
.rw-old { font-size: 17px; color: var(--mute); }
.rw-new { margin-top: 6px; font: 800 clamp(22px, 5vw, 32px)/1.15 var(--disp); font-stretch: 90%; letter-spacing: -.01em; }
.rw-new::before { content: "→ "; color: var(--up); }

/* story */
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.beat > div { min-width: 0; }
.beats { margin-top: 30px; display: grid; gap: 30px; }
.beat { display: grid; grid-template-columns: 56px 1fr; }
.b-n { font: 900 22px/1.4 var(--mono); color: #c3c8ce; }
.beat h3 { font: 900 clamp(28px, 6.4vw, 44px)/1 var(--disp); font-stretch: 84%; letter-spacing: -.02em; }
.beat p { margin-top: 8px; font-size: 18px; color: var(--ink-2); }
.beat.lost h3 { color: var(--dn); font-size: clamp(44px, 12vw, 88px); }
.beat.lost .b-n { color: var(--dn); }
.notebook { position: relative; margin-top: 16px; max-width: 340px; padding: 4px 0 18px 26px; font: 500 12.5px/30px var(--mono); white-space: nowrap; color: var(--ink-2); background: linear-gradient(90deg, transparent 13px, rgba(215, 38, 61, .55) 13px, rgba(215, 38, 61, .55) 14.5px, transparent 14.5px), repeating-linear-gradient(transparent 0 29px, #dfe3e8 29px 30px); transform: rotate(-1deg); }
.notebook .ill { position: absolute; right: 0; bottom: 0; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.notebook-photo { margin-top: 16px; width: min(340px, 100%); transform: rotate(-1deg); border-radius: 4px; }
.story-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.anson-away { width: 100%; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.creds { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; font-size: 14.5px; color: var(--mute); line-height: 1.35; }
.creds b { font: 900 24px/1.05 var(--disp); font-stretch: 86%; color: var(--ink); margin-bottom: 4px; }
.paths { margin-top: 56px; display: grid; gap: 34px; border-top: 2px solid var(--ink); padding-top: 26px; }
.p-k { display: block; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.p-line { display: flex; align-items: center; gap: 12px; margin-top: 6px; font: 900 clamp(30px, 8vw, 58px)/1.1 var(--disp); font-stretch: 84%; letter-spacing: -.02em; }
.p-line mark { padding: 0 .14em; }
.path.bad .p-line { color: #9aa0a8; }
.p-gap { flex: 1; display: flex; align-items: center; gap: 8px; font-style: normal; font-size: .55em; color: var(--dn); min-width: 50px; }
.p-gap::before, .p-gap::after { content: ""; flex: 1; border-top: 3px dashed var(--dn); }
.p-to { flex: 1; min-width: 22px; max-width: 120px; height: 3px; background: var(--ink); position: relative; }
.p-to::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left: 9px solid var(--ink); border-right: 0; }
.p-out { margin-top: 6px; font-size: 17px; color: var(--ink-2); }
.path.bad .p-out { color: var(--dn-ink); font-weight: 600; }

/* run sheet */
.runsheet { margin-top: 30px; border-top: 2px solid var(--ink); }
.run { border-bottom: 1px solid var(--line); }
.run > button { width: 100%; display: grid; grid-template-columns: 38px 1fr auto 20px; gap: 12px; align-items: center; padding: 17px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.run > button::after { content: "+"; font: 400 24px/1 var(--body); color: var(--mute); transition: transform .25s var(--ease); justify-self: end; }
.run.open > button::after { transform: rotate(45deg); color: var(--ink); }
.run .n { font: 700 13px var(--mono); color: var(--mute); }
.run .t { font: 800 clamp(18px, 4.4vw, 24px)/1.2 var(--disp); font-stretch: 92%; letter-spacing: -.01em; }
.run .tag { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--up-ink); white-space: nowrap; }
.run .tag.live { color: var(--dn-ink); }
.run .tag.paid { color: var(--mute); }
.run .more { display: none; padding: 0 32px 18px 50px; font-size: 16.5px; color: var(--ink-2); }
.run.open .more { display: block; }
.run.open .t { text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 6px; text-underline-offset: -1px; text-decoration-skip-ink: none; }
@media (max-width: 719px) {
  .run > button { grid-template-columns: 38px 1fr 20px; row-gap: 6px; }
  .run .tag { grid-column: 2; grid-row: 2; }
  .run > button::after { grid-column: 3; grid-row: 1; }
  .run .more { padding-left: 50px; padding-right: 0; }
}
.blur { margin-top: 8px; font-family: var(--mono); filter: blur(4px); user-select: none; }
.ledger { margin-top: 48px; display: grid; gap: 30px; }
.ledger h3 { font: 900 24px/1.1 var(--disp); font-stretch: 88%; margin-bottom: 12px; }
.ledger li { position: relative; padding: 7px 0 7px 30px; font-size: 18px; border-bottom: 1px solid var(--line); }
.ledger li::before { content: "✓"; position: absolute; left: 2px; font-weight: 800; color: var(--up); }
.ledger .never li::before { content: "✕"; color: var(--dn); }
.ledger .never li { color: var(--mute); }

/* bring */
.bring-grid { display: grid; gap: 30px; }
.composer { display: flex; flex-direction: column; gap: 12px; }
.cm-quote { display: flex; gap: 12px; align-items: center; font: 700 18px/1.35 var(--disp); font-stretch: 94%; }
.composer label { margin-top: 10px; font: 700 12px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.composer label span { color: var(--mute); }
.input.line-input { width: 100%; height: 54px; border: 0; border-bottom: 2.5px solid var(--ink); border-radius: 0; background: transparent; padding: 0 2px; font: 700 21px var(--disp); color: var(--ink); }
.line-input::placeholder { color: #a7adb5; font-weight: 500; }
.line-input:focus { outline: none; border-bottom-color: var(--up); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.cm-chips button { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 13px var(--mono); color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 4px; }
.cm-chips button:hover { color: var(--ink); text-decoration-style: solid; }

/* final */
.h-final { font-size: clamp(42px, 11vw, 104px); max-width: 12ch; }
.versus { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.versus > div { padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 4px; }
.versus > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.versus b { font: 900 clamp(64px, 20vw, 168px)/.86 var(--disp); font-stretch: 70%; letter-spacing: -.03em; color: var(--up); }
.versus b.dn { color: var(--dn); }
.versus span:last-child { font-size: 15px; color: var(--ink-2); }
.final-row { margin-top: 30px; display: grid; grid-template-columns: 1fr; align-items: end; gap: 8px; }
.final-row .anson-you { display: none; }
.final-cta { padding-bottom: 20px; }
.final-cta .btn { width: 100%; }
.cd-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.cd-digits { font: 800 30px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cd-digits i { font-style: normal; font-size: .5em; color: var(--mute); margin-left: 2px; }
.final-cta .micro { margin-top: 14px; }
.fit-line { margin-top: 6px; font-size: 14px; color: var(--mute); }
.anson-you { width: 100%; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

/* faq */
.faq-wrap { max-width: 860px; }
.faq { margin-top: 26px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 800 19px/1.3 var(--disp); font-stretch: 94%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--body); color: var(--mute); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 20px; font-size: 16.5px; color: var(--ink-2); max-width: 44em; }

footer { padding: 34px 0 120px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
footer p + p { margin-top: 10px; }

/* ---------- sticky bar ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11, 13, 16, .06); transform: translateY(110%); transition: transform .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
.sticky.on { transform: none; }
.sticky-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-when { display: flex; flex-direction: column; font: 600 12px/1.35 var(--mono); color: var(--mute); min-width: 0; }
.sticky-when b { display: block; color: var(--ink); font-size: 13px; white-space: nowrap; }
.sticky-when .dot { margin-right: 7px; vertical-align: 1px; }
.sticky .btn { min-height: 50px; font-size: 17px; padding: 0 20px; flex: none; }

/* ---------- registration sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet-wrap.open { display: block; }
.scrim { position: absolute; inset: 0; background: rgba(11, 13, 16, .55); opacity: 0; transition: opacity .25s; }
.sheet-wrap.show .scrim { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 94vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .32s var(--ease), opacity .25s; outline: none; }
.sheet-wrap.show .sheet { transform: none; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: #d5d9de; margin: 2px auto 10px; }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sheet-top .kicker { margin-bottom: 6px; color: var(--up-ink); }
.sheet h2 { font: 900 30px/1 var(--disp); font-stretch: 86%; letter-spacing: -.02em; }
.x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); display: grid; place-items: center; cursor: pointer; flex: none; }
.slip-ticket { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slip-ticket b { display: block; font-size: 15.5px; }
.slip-ticket .mono { font-size: 12px; color: var(--mute); }
.slip-strategy { display: none; margin-top: 10px; font: 600 13px var(--mono); color: var(--up-ink); }
.slip-strategy.on { display: block; }
.form { display: grid; gap: 14px; margin-top: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 700; }
.field .hint { font-weight: 500; color: var(--mute); }
.input { width: 100%; height: 54px; padding: 0 14px; border: 1.5px solid #cfd4da; border-radius: 10px; background: #fff; font: 500 17px var(--body); color: var(--ink); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.input:focus, .cc:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hl); }
.phone { display: flex; gap: 8px; }
.cc { width: 112px; flex: none; height: 54px; padding: 0 10px; border: 1.5px solid #cfd4da; border-radius: 10px; background: #fff; font: 600 16px var(--body); }
.field.ok .input { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath d='M1.5 7.5l5 5 10-11' fill='none' stroke='%230a9b5c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field.bad .input, .field.bad .cc { border-color: var(--dn); }
.err { display: none; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--dn-ink); }
.field.bad .err { display: block; }
.consent { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.form-msg { display: none; padding: 12px 14px; border-left: 3px solid var(--dn); background: #fdecee; font-size: 14.5px; color: var(--dn-ink); }
.form-msg.on { display: block; }
.form .btn { width: 100%; }
.safe { text-align: center; font-size: 13px; color: var(--mute); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.logged { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; background: rgba(255, 255, 255, .96); border-radius: inherit; }
.logged.on { display: grid; }
.logged span { font: 900 40px/1 var(--disp); font-stretch: 84%; color: var(--up); animation: pop .35s var(--ease); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.inline-form { margin-top: 6px; }

/* ---------- confirmation page ---------- */
.ty { padding: 30px 0 0; }
.ty-wrap { max-width: 760px; }
.ok-badge { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--up-ink); }
.ok-badge i { width: 28px; height: 28px; border-radius: 50%; background: var(--up); display: grid; place-items: center; animation: pop .4s .1s var(--ease) both; }
.ok-badge i::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.dk-name { margin-top: 14px; font: 900 clamp(40px, 10vw, 76px)/.95 var(--disp); font-stretch: 84%; letter-spacing: -.025em; }
.dk-code { margin-top: 10px; font: 600 12.5px var(--mono); color: var(--mute); }
.dk-rows { margin-top: 24px; border-top: 2px solid var(--ink); }
.dk-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.dk-row b { font-weight: 700; }
.dk-row small { display: block; font-size: 13.5px; color: var(--mute); }
.dk-link .st { font-weight: 700; color: var(--up-ink); }
.dk-link .st.on { color: var(--up-ink); }
.ty .cd-line { margin: 22px 0 0; }
.ty-intro { margin-top: 56px; }
.ty-intro .h-sec { font-size: clamp(34px, 8vw, 58px); max-width: 14ch; }
.ty-intro > p { margin-top: 12px; font-size: 17.5px; color: var(--ink-2); }
.tasks { margin-top: 28px; border-top: 2px solid var(--ink); }
.task { padding: 24px 0; border-bottom: 1px solid var(--line); }
.task-h { display: grid; grid-template-columns: 52px 1fr; align-items: center; }
.task-b { padding-left: 52px; }
@media (max-width: 420px) { .task-b { padding-left: 0; } }
.tick { font: 900 46px/.85 var(--disp); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.task.done .tick { -webkit-text-stroke: 0; color: var(--up); }
.task.done .tick span { display: none; }
.task.done .tick::after { content: "✓"; }
.task h2 { font: 900 clamp(22px, 5.4vw, 30px)/1.1 var(--disp); font-stretch: 88%; letter-spacing: -.01em; }
.task-b > p { margin-top: 6px; font-size: 16.5px; color: var(--ink-2); }
.task-b .btn { margin-top: 14px; }
.task-b .btn-wa { width: 100%; }
.task-b .small { margin-top: 10px; }
.task.first h2 { font-size: clamp(26px, 6.4vw, 36px); }
.bonus { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--hl); font-size: 15px; color: var(--ink-2); }
.preview-tag { display: block; margin-bottom: 4px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cal-btns, .picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cal-btns .btn { margin-top: 0; }
.pick { min-height: 44px; padding: 0 16px; border: 1.5px solid #cfd4da; border-radius: 999px; background: #fff; font: 600 15px var(--body); cursor: pointer; }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.strategy-in { margin-top: 12px; }
.sent { display: none; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--up-ink); }
.task.done .sent { display: block; }
.homework { margin-top: 56px; }
.homework h2 { font: 900 clamp(28px, 7vw, 44px)/1 var(--disp); font-stretch: 86%; letter-spacing: -.02em; }
.homework > p { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.homework ol { margin-top: 12px; counter-reset: hw; border-top: 2px solid var(--ink); }
.homework li { counter-increment: hw; padding: 11px 0; border-bottom: 1px solid var(--line); font: 600 16px var(--mono); }
.homework li::before { content: counter(hw) ". "; color: var(--mute); }
.sealed { margin-top: 48px; }
.seal { padding: 14px 0; border-bottom: 1px solid var(--line); }
.seal:first-child { border-top: 2px solid var(--ink); }
.seal p { margin-top: 4px; font: 700 17px/1.35 var(--disp); font-stretch: 94%; }
.redact { display: inline-block; background: var(--ink); color: transparent; border-radius: 2px; user-select: none; }

/* ---------- tablet / desktop ---------- */
@media (min-width: 720px) {
  .desk-only { display: inline; }
  .ph-only { display: none; }
  .hero-cta .btn { width: auto; min-width: 320px; }
  .hero-cta .micro { text-align: left; }
  .stage { --aw: 190px; }
  .hero-chart { height: 280px; }
  .stage-head { font-size: 12px; }
  .takeaways { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .four { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .takeaways li { grid-template-columns: 1fr; gap: 8px; }
  .ledger { grid-template-columns: 1fr 1fr; gap: 56px; }
  .paths { grid-template-columns: 1fr 1fr; gap: 56px; }
  .final-cta .btn { width: auto; }
  .final-row { grid-template-columns: 1fr 300px; }
  .final-row .anson-you { display: block; }
  .sheet-wrap .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 500px; border-radius: 16px; transform: translate(-50%, -46%); opacity: 0; padding: 22px 26px 26px; }
  .sheet-wrap.show .sheet { transform: translate(-50%, -50%); opacity: 1; }
  .grab { display: none; }
  .sec { padding: 96px 0; }
  .sec-tight { padding-top: 32px; }
  .run .more { padding-left: 50px; }
}
@media (min-width: 1000px) {
  .hero { padding: 40px 0 18px; }
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
  .hero-copy { display: block; }
  .h-hero { font-size: clamp(42px, 3.9vw, 58px); }
  .stage { margin-top: 0; --aw: 230px; padding-right: calc(var(--aw) * .86); }
  .anson-point { right: -44px; }
  .hero-chart { height: 400px; }
  .hero-after { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; }
  .case2 { border: 0; padding: 0; max-width: 520px; text-align: right; }
  .story-grid { grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: end; }
  .story-side { grid-template-columns: 1fr; }
  .creds { padding-bottom: 0; }
  .bring-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .final-row { grid-template-columns: 1fr 380px; }
  .h-sec { max-width: 16ch; }
}

/* ===================== v5 · colour bands (no cards: colour runs edge to edge) ===================== */
/* hero sits on faint chart paper */
.hero { position: relative; background:
  radial-gradient(60% 50% at 78% 40%, rgba(10, 155, 92, .08), transparent 70%),
  linear-gradient(#eef1f4 1px, transparent 1px) 0 0 / 100% 44px,
  linear-gradient(90deg, #eef1f4 1px, transparent 1px) 0 0 / 44px 100%; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.hero > .wrap { position: relative; z-index: 1; }

/* terminal: dark band for the tester and the close */
.sec-dark { --line: #23282f; background: #0b0d10; color: #eef1f4;
  background-image: radial-gradient(70% 60% at 85% 0%, rgba(54, 214, 143, .10), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(255, 90, 110, .08), transparent 70%); }
.sec-dark .kicker { color: #aab1ba; }
.sec-dark.sec .kicker::before { background: var(--hl); }
.sec-dark .h-sec em { color: #ff5a6e; }
.sec-dark mark { color: var(--ink); }
.sec-dark .lead, .sec-dark .takeaways p, .sec-dark .micro, .sec-dark .fit-line, .sec-dark .versus span:last-child { color: #aab1ba; }
.sec-dark .takeaways b, .sec-dark .micro b { color: #fff; }
.sec-dark .up { color: #36d68f; }
.sec-dark .dn, .sec-dark .neg { color: #ff5a6e; }
.sec-dark .rk { color: #8a929c; }
.sec-dark .seg button { color: #4a525d; }
.sec-dark .seg button:hover { color: #aab1ba; }
.sec-dark .seg button[aria-pressed="true"] { color: #fff; }
.sec-dark .t-big { color: #36d68f; text-shadow: 0 0 28px rgba(54, 214, 143, .35); }
.sec-dark .t-big.neg, .sec-dark .t-big.dn { color: #ff5a6e; text-shadow: 0 0 28px rgba(255, 90, 110, .35); }
.sec-dark .t-trades { color: #aab1ba; }
.sec-dark .t-trades b { color: #fff; }
.sec-dark .t-hold { stroke: #36d68f; filter: drop-shadow(0 0 4px rgba(54, 214, 143, .5)); }
.sec-dark .t-eq { stroke: #fff; }
.sec-dark .t-eq.neg { stroke: #ff5a6e; filter: drop-shadow(0 0 5px rgba(255, 90, 110, .55)); }
.sec-dark .t-dd { fill: #ff5a6e; fill-opacity: .14; }
.sec-dark .t-base { stroke: #3a414b; }
.sec-dark .t-key { color: #aab1ba; }
.sec-dark .k-eq { background: #ff5a6e; }
.sec-dark .k-hold { background: #36d68f; }
.sec-dark .k-dd { background: rgba(255, 90, 110, .25); }
.sec-dark .slip { border-top-color: #fff; }
.sec-dark .slip-row.on { background: rgba(255, 225, 77, .12); color: #fff; }
.sec-dark .slip-row.hold { border-top-color: #5a626d; }
.sec-dark .t-cap { color: #7d8590; }
.sec-dark .tk-n { -webkit-text-stroke-color: var(--hl); }
.sec-dark .btn { box-shadow: 0 4px 0 #6b5a00; }
.sec-dark .versus { border-top-color: #fff; }
.sec-dark .versus b.up { color: #36d68f; text-shadow: 0 0 40px rgba(54, 214, 143, .4); }
.sec-dark .versus b.dn { color: #ff5a6e; text-shadow: 0 0 40px rgba(255, 90, 110, .4); }
.sec-dark .final-date { color: #fff; }
.sec-dark .cd-digits b { color: var(--hl); }
.sec-dark .cd-digits i { color: #8a929c; }
.sec-dark .closed-note { border-top-color: #fff; }

/* sun: the honest self-check */
.sec-sun { --line: #f0e2a0; background: #fff6cf; }
.sec-sun .check-result p { border-left-color: var(--ink); }

/* mint: the 4 numbers + trust ledger */
.sec-mint { --line: #cfe9db; background: #eaf7f0; }
.sec-mint .four .locked h3, .sec-mint .four .locked p { color: #5f7a6b; }

/* highlighter: bring your strategy */
.sec-hl { background: var(--hl); }
.sec-hl mark { background: var(--ink); color: var(--hl); }
.sec-hl .lead, .sec-hl .small { color: #3b3410; }
.sec-hl .btn { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000; }
.sec-hl .btn:hover { background: #22262c; }
.sec-hl .line-input::placeholder { color: #7a6a1c; }
.sec-hl .cm-chips button { color: #2b2508; }

/* ===================== confirmation page v2 ===================== */
.ty-hero { background: #0b0d10; color: #eef1f4; padding: 34px 0 30px;
  background-image: radial-gradient(70% 70% at 90% 0%, rgba(54, 214, 143, .16), transparent 70%); }
.ty-hero .ok-badge { color: #36d68f; }
.ty-hero .dk-name { color: #fff; margin-top: 12px; }
.ty-when { margin-top: 18px; display: grid; gap: 4px; }
.ty-when b { font: 900 clamp(34px, 9vw, 60px)/.95 var(--disp); font-stretch: 78%; letter-spacing: -.02em; color: var(--hl); }
.ty-when > span { font-size: 15.5px; color: #aab1ba; }
.ty-hero .cd-line { margin: 18px 0 0; }
.ty-hero .cd-digits { color: #fff; }
.ty-hero .rk { color: #8a929c; }
.ty-hero .dk-code { color: #8a929c; margin-top: 14px; }
.ty-link { margin-top: 14px; font-size: 14.5px; color: #aab1ba; }
.ty-link .st { color: #36d68f; font-weight: 700; }
.ty-link small { display: block; font-size: 13.5px; }

.prog { margin-top: 24px; padding-top: 18px; border-top: 1px solid #23282f; }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #aab1ba; }
.prog-top b { font-size: 15px; color: #fff; }
.prog-bar { display: flex; gap: 6px; margin-top: 10px; }
.prog-bar i { flex: 1; height: 8px; border-radius: 4px; background: #2a3038; transition: background .4s; }
.prog-bar i.on { background: #36d68f; box-shadow: 0 0 12px rgba(54, 214, 143, .5); }
.prog-msg { margin-top: 10px; font-size: 14.5px; color: #36d68f; font-weight: 600; }

.ty-step1 { background: #e7f8ee; padding: 40px 0 44px; }
.ty-step1 .kicker { color: var(--up-ink); }
.ty-step1 .h-sec { font-size: clamp(34px, 8.4vw, 56px); max-width: 13ch; }
.ty-step1 .wrap > p.s1-lead { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.chat { margin-top: 20px; padding: 14px 14px 12px; border-radius: 18px; background-color: #efe7dd; background-image: radial-gradient(#e2d7c9 1.2px, transparent 1.3px); background-size: 18px 18px; }
.chat-to { display: flex; align-items: center; gap: 10px; font: 600 13px var(--body); color: #5b5146; }
.chat-to i { width: 30px; height: 30px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff; font: 800 13px var(--disp); font-style: normal; }
.bubble { position: relative; margin: 12px 0 0 auto; max-width: 88%; padding: 10px 12px 20px; border-radius: 12px 4px 12px 12px; background: #d9fdd3; font-size: 15.5px; line-height: 1.4; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.bubble::after { content: "✓✓"; position: absolute; right: 10px; bottom: 3px; font: 700 10px var(--body); color: #8aa49a; letter-spacing: -2px; }
.ty-step1.done .bubble::after { color: #53bdeb; }
.chat-note { margin-top: 8px; text-align: right; font: 600 11.5px var(--mono); color: #7a6f63; }
.ty-step1 .btn-wa { width: 100%; margin-top: 16px; min-height: 62px; font-size: 20px; }
.ty-step1 .small { margin-top: 10px; }
.ty-step1 .bonus { margin-top: 24px; border-left-color: var(--up); }
.ty-step1 .sent { font-size: 16px; }

.ty-step1.done .sent { display: block; }
.ty-step1.done .small { display: none; }
.ty-step1.done .btn-wa { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.ty-quick { padding: 44px 0 10px; }
.ty-quick .h-sec { font-size: clamp(30px, 7.4vw, 48px); max-width: 14ch; }
.ty-quick .wrap > p.q-lead { margin-top: 8px; color: var(--mute); font-size: 16px; }
.ty-quick .tasks { margin-top: 20px; }
.task.done .task-h { cursor: pointer; }
.task.done:not(.open) .task-b > :not(.sent) { display: none; }
.task.done h2 { color: var(--mute); }
.task.done:not(.open) h2::after { content: " · change"; font: 600 12px var(--mono); color: var(--mute); }

.ty-wait { margin-top: 44px; background: #0b0d10; color: #eef1f4; padding: 44px 0 50px; }
.ty-wait .homework { margin-top: 0; }
.ty-wait .homework h2 { color: #fff; }
.ty-wait .homework > p { color: #aab1ba; }
.ty-wait .homework ol { border-top-color: #fff; }
.ty-wait .homework li { border-bottom-color: #23282f; color: #fff; }
.ty-wait .homework li::before { color: var(--hl); }
.ty-wait .sealed { margin-top: 40px; }
.ty-wait .seal { border-bottom-color: #23282f; }
.ty-wait .seal:first-child { border-top-color: var(--hl); }
.ty-wait .seal .rk { color: var(--hl); }
.ty-wait .seal p { color: #fff; }
.ty-wait .redact { background: #3a414b; }
.ty-page footer { border-top: 0; padding-top: 30px; }

/* ===================== v6 · price-line edges, desktop layouts, small rewards ===================== */
/* Every section after the hero starts with a jagged price line in its own colour, cutting into the one above. */
main > .sec { position: relative; --band: #fff; }
main > .sec::before { content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 22px; background: var(--band); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22'%3E%3Cpath d='M0 22V15l12 3 14-9 12 5 16-11 13 13 15-7 12 4 18-12 12 9 14-4 13 8 15-10 12 6 16-3 14 9 13-6 19 5V22Z'/%3E%3C/svg%3E") 0 0 / 240px 22px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22'%3E%3Cpath d='M0 22V15l12 3 14-9 12 5 16-11 13 13 15-7 12 4 18-12 12 9 14-4 13 8 15-10 12 6 16-3 14 9 13-6 19 5V22Z'/%3E%3C/svg%3E") 0 0 / 240px 22px repeat-x; }
main > .sec-dark { --band: #0b0d10; }
main > .sec-sun { --band: #fff6cf; }
main > .sec-mint { --band: #eaf7f0; }
main > .sec-hl { --band: var(--hl); }

/* self-check score */
.check-score { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 0 !important; border: 0 !important; }
.check-score b { font: 900 64px/.9 var(--disp); font-stretch: 72%; color: var(--ink); }
.check-score span { font: 700 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6d6220; }

/* Anson with the mic in the yellow band (desktop only: phones already see him three times) */
.anson-mic { display: none; }

/* confirmation: all steps done */
.prog.all .prog-msg { font: 900 22px/1.15 var(--disp); font-stretch: 88%; color: var(--hl); }
.prog.all .prog-bar i { animation: glow 1.2s ease-out 1; }
@keyframes glow { 50% { box-shadow: 0 0 22px rgba(54, 214, 143, .9); } }

@media (min-width: 720px) {
  .checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; border-top: 0; }
  .steps li { grid-template-columns: 1fr; gap: 10px; border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 18px; }
  .steps .f-n { font-size: 72px; }
  .steps p { font-size: 19px; }
}
@media (min-width: 1000px) {
  .tester { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .tester .seg { grid-column: 1 / -1; }
  .tester .t-chart { grid-column: 1; grid-row: 2 / 6; margin-top: 26px; }
  .tester .t-key { grid-column: 1; grid-row: 6; }
  .tester .t-read { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 18px; }
  .tester .t-big { font-size: 88px; }
  .tester .t-trades { grid-column: 2; grid-row: 3; }
  .tester .slip { grid-column: 2; grid-row: 4; }
  .tester .slip-row { font-size: 13.5px; }
  .anson-mic { display: block; width: 260px; margin-top: 18px; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  .bring-grid { align-items: end; }
  .composer { padding-bottom: 40px; }
  .final-row { margin-top: 0; }
  .run .t { font-size: 22px; }
}

/* ===================== asset slots: placeholder until the real file is set in config.assets ===================== */
.asset { margin: 0; }
.asset figcaption { margin-top: 8px; font: 600 12.5px var(--mono); color: var(--mute); }
.asset figcaption b { color: var(--ink); }
.ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px 18px; text-align: center; border: 2px dashed #b9bec5; border-radius: 14px;
  background: repeating-linear-gradient(135deg, #f5f6f7 0 12px, #eef0f2 12px 24px); color: var(--ink-2); }
.ph i { font-style: normal; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 20px; }
.ph b { font: 900 20px/1.1 var(--disp); font-stretch: 88%; color: var(--ink); }
.ph span { font-size: 14px; max-width: 26em; }
.ph em { position: absolute; top: 10px; left: 10px; font: 700 10.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: var(--hl); color: var(--ink); }
.asset-media { width: 100%; display: block; border-radius: 12px; }
.asset-video { margin: 28px 0 8px; max-width: 760px; }
.asset-video .ph { aspect-ratio: 16 / 9; }
.sec-dark .ph { border-color: #3a414b; background: repeating-linear-gradient(135deg, #11151a 0 12px, #161b21 12px 24px); color: #aab1ba; }
.sec-dark .ph i { background: var(--hl); color: var(--ink); }
.sec-dark .ph b { color: #fff; }
.sec-dark .asset figcaption { color: #8a929c; }
.sec-dark .asset figcaption b { color: #fff; }
.sec-dark .asset-media { box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.peek { margin-top: 32px; display: grid; gap: 22px; }
.peek .ph { aspect-ratio: 16 / 10; }
.peek .asset-media { border: 1px solid var(--line); }
.asset-doc { float: left; width: 84px; margin: 2px 14px 6px 0; }
.asset-doc .ph { aspect-ratio: 3 / 4; padding: 8px; gap: 4px; border-radius: 6px; }
.asset-doc .ph i { width: 30px; height: 30px; font-size: 14px; }
.asset-doc .ph b { font-size: 12px; }
.asset-doc .ph em { position: static; font-size: 8.5px; padding: 2px 4px; }
.asset-doc .asset-media { border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.bonus::after { content: ""; display: block; clear: both; }
@media (min-width: 720px) {
  .peek { grid-template-columns: 1fr 1fr; }
  .asset-doc { width: 110px; }
}

/* ===================== v8 · conversion top fold (dark terminal) ===================== */
.bar { background: #0b0d10; border-bottom-color: #1c2128; }
.bar .brand { color: #fff; }
.bar .live-pill { color: #aab1ba; }

.hero.hero-dark { color: #eef1f4; padding: 16px 0 22px;
  background:
    radial-gradient(55% 45% at 82% 38%, rgba(54, 214, 143, .14), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(255, 225, 77, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 100%,
    #0b0d10; }
.hero.hero-dark::after { display: none; }

/* who + for whom */
.host { order: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.host .avatar { width: 38px; height: 38px; box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px #36d68f; }
.host p { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; color: #8a929c; }
.host b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: #fff; }
.hero-dark .kicker { order: 2; margin-bottom: 12px; }

/* the headline is the whole job of the first screen */
.hero-dark .h-hero { order: 3; color: #fff; font-size: clamp(34px, 9.4vw, 70px); line-height: .98; letter-spacing: -.025em; }
.hero-dark .h-hero em { color: var(--ink); padding: 0 .12em; margin-left: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--hl), var(--hl)) 0 60% / 100% 88% no-repeat; }
.js .hero-dark .h-hero em { animation: sweep .9s .35s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes sweep { 0% { background-size: 0% 88%; color: #fff; } 55% { color: #fff; } 100% { background-size: 100% 88%; color: var(--ink); } }
.hero-dark .sub { order: 4; margin-top: 12px; font-size: 16.5px; line-height: 1.45; color: #b7bec7; max-width: 34em; }
.hero-dark .sub span { color: #fff; font-weight: 600; }

/* the offer, in one strip, right above the button */
.hero-dark .hero-cta { order: 5; margin-top: 16px; }
.slot { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.slot .event-line { order: 0; margin: 0; display: block; font: 800 18px/1.25 var(--disp); font-stretch: 94%; color: #fff; }
.slot .event-line b { color: var(--hl); font-weight: 900; }
.slot-meta { font: 600 12.5px var(--mono); color: #8a929c; }
.btn-hero { position: relative; overflow: hidden; min-height: 62px; font-size: 21px; box-shadow: 0 4px 0 #6b5a00, 0 10px 40px rgba(255, 212, 0, .25); }
.btn-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: shine 4.5s 2s infinite; }
@keyframes shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.hero-dark .micro { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center; text-align: center; color: #8a929c; font-size: 13.5px; }
.hero-dark .micro b { color: #fff; }
.cd-pill { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--mono); color: var(--hl); }
.cd-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 0 3px rgba(255, 90, 110, .25); }
.hero-dark .closed-note { border-top-color: #fff; color: #fff; }

/* chart on dark */
.hero-dark .stage { order: 7; margin-top: 30px !important; }
.hero-dark .stage-head { color: #8a929c; }
.hero-dark .stage-head b { color: var(--hl); }
.hero-dark .chart .g { stroke: rgba(255, 255, 255, .06); }
.hero-dark .chart .g.base { stroke: #3a414b; }
.hero-dark .chart .ax { fill: #6b7380; }
.hero-dark .ln-up { stroke: #36d68f; filter: drop-shadow(0 0 4px rgba(54, 214, 143, .55)); }
.hero-dark .ln-dn { stroke: #ff5a6e; filter: drop-shadow(0 0 5px rgba(255, 90, 110, .6)); }
.hero-dark .lbl.up { fill: #36d68f; }
.hero-dark .lbl.dn, .hero-dark .worst-l { fill: #ff5a6e; }
.hero-dark .dot-dn { stroke: #0b0d10; }
.hero-dark .worst .dash, .hero-dark .worst .drop { stroke: #ff5a6e; }
.hero-dark .stage-cap { color: #aab1ba; }
.hero-dark .stage-cap b { color: #fff; }
.hero-dark .stage-cap .dn { color: #ff5a6e; }
.hero-dark .stage-cap a { color: #8a929c; }
.hero-dark .hero-after { padding-top: 6px; }
.hero-dark .case2 { border-color: #23282f; color: #aab1ba; }
.hero-dark .case2 b { color: #fff; }
.hero-dark .case2 .up { color: #36d68f; }
.hero-dark .case2 u { color: #fff; }

/* ===================== tester: light, built to fill a desktop screen ===================== */
@media (max-width: 719px) {
  .slip-row .ab { display: none; }
  .slip-row { font-size: 13.5px; padding: 10px 4px; }
  .sec { padding: 54px 0; }
  .sec-tight { padding-top: 20px; }
  .h-sec { font-size: clamp(32px, 9vw, 44px); }
  .lead { font-size: 17px; }
  .t-read .rk { min-height: 2.6em; }
  .takeaways { gap: 16px; margin-top: 30px; }
  .takeaways p { font-size: 17px; }
  .story-side { grid-template-columns: 120px 1fr; }
}
@media (min-width: 720px) {
  .hero-dark .micro { justify-content: flex-start; text-align: left; }
}
@media (min-width: 1000px) {
  .hero.hero-dark { padding: 34px 0 26px; }
  .hero-dark .hero-grid { align-items: center; gap: 40px; }
  .hero-dark .h-hero { font-size: clamp(48px, 4.5vw, 66px); }
  .hero-dark .stage { margin-top: 0 !important; --aw: 250px; }
  .hero-dark .hero-chart { height: 420px; }
  .hero-dark .anson-point { right: -60px; }

  #one-setting > .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 56px; }
  #one-setting > .wrap > * { grid-column: 1 / -1; }
  #one-setting > .wrap > .kicker, #one-setting > .wrap > .h-sec, #one-setting > .wrap > .lead { grid-column: 1; }
  #one-setting .asset-video { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
  #one-setting .h-sec { max-width: 13ch; }

  .tester { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "seg read" "trades read" "chart chart" "key key" "slip slip"; column-gap: 48px; align-items: end; }
  .tester .seg { grid-area: seg; }
  .tester .t-trades { grid-area: trades; margin-top: 14px; }
  .tester .t-read { grid-area: read; grid-template-columns: 1fr 1fr; margin: 0; justify-self: end; gap: 40px; }
  .tester .t-big { font-size: 96px; }
  .tester .t-chart { grid-area: chart; margin-top: 24px; }
  .tester .t-chart svg { height: 320px; }
  .tester .t-chart path, .tester .t-chart line { vector-effect: non-scaling-stroke; }
  .tester .t-key { grid-area: key; }
  /* the table turns into 4 columns: one per chart, read left to right */
  .tester .slip { grid-area: slip; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); margin-top: 22px; }
  .tester .slip-row.head { display: none; }
  .tester .slip-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-bottom: 0; border-right: 1px solid var(--line); font-size: 15px; }
  .tester .slip-row:last-child { border-right: 0; }
  .tester .slip-row.hold { border-top: 0; background: #f2fbf6; }
  .tester .slip-row span:not(:first-child) { text-align: left; }
  .tester .slip-row span:first-child { font: 900 20px var(--disp); font-stretch: 88%; }
  .tester .slip-row span:nth-child(2)::before { content: "RM10,000 became "; display: block; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
  .tester .slip-row span:nth-child(3)::before { content: "Biggest drop "; display: block; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
}

/* ===================== v9 · the headline leads the first screen ===================== */
.js .hero-dark .h-hero { animation: rise .7s .05s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero-dark .h-hero { text-wrap: balance; }

/* phones + tablets: kicker → headline → offer → button; the host line moves under the button */
@media (max-width: 999px) {
  .hero-dark .kicker { order: 1; margin-bottom: 14px; }
  .hero-dark .h-hero { order: 2; font-size: clamp(39px, 10.8vw, 64px); line-height: .96; }
  .hero-dark .sub { order: 3; margin-top: 14px; }
  .hero-dark .hero-cta { order: 4; margin-top: 18px; }
  .host { order: 5; margin: 18px 0 0; justify-content: center; }
  .hero-dark .stage { order: 6; }
}

/* desktop: one centred column, headline set huge, chart + Anson underneath as the proof */
@media (min-width: 1000px) {
  .hero.hero-dark { padding: 48px 0 30px; }
  .hero-dark .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .hero-dark .hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1060px; }
  .hero-dark .host { margin-bottom: 18px; }
  .hero-dark .kicker { justify-content: center; margin-bottom: 18px; }
  .hero-dark .h-hero { font-size: clamp(64px, 6.4vw, 96px); line-height: .93; max-width: 15ch; }
  .hero-dark .sub { margin-top: 20px; font-size: 19px; max-width: 40em; }
  .hero-dark .hero-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
  .hero-dark .slot { align-items: center; }
  .hero-dark .slot .event-line { font-size: 21px; }
  .btn-hero { min-width: 380px; min-height: 68px; font-size: 23px; }
  .hero-dark .micro { justify-content: center; text-align: center; }
  .hero-dark .stage { margin-top: 60px !important; width: 100%; max-width: 1040px; --aw: 270px; }
  .hero-dark .hero-chart { height: 380px; }
  .hero-dark .stage-head { text-align: left; }
  .hero-dark .stage-cap { max-width: 44em; }
  .hero-dark .anson-point { right: -30px; bottom: 30px; }
  .hero-dark .hero-after { justify-content: center; }
  .hero-dark .case2 { text-align: center; max-width: 640px; }
}

/* ===================== v10 · ticket form ===================== */
.sheet { padding-top: 12px; }
.sheet .x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.sheet-top { display: block; padding-right: 48px; }
.sheet-top .kicker { color: var(--up-ink); margin-bottom: 4px; }
.sheet h2 { font-size: 30px; }

.tix { position: relative; margin: 14px 0 6px; border-radius: 16px; overflow: hidden; color: #eef1f4; background: #0b0d10;
  background-image: radial-gradient(80% 90% at 100% 0%, rgba(54, 214, 143, .22), transparent 60%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: auto, 100% 22px;
  box-shadow: 0 14px 30px rgba(11, 13, 16, .25); }
.tix-main { position: relative; padding: 14px 16px 6px; }
.tix-top { display: flex; justify-content: space-between; font: 700 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--hl); }
.tix-top span:last-child { color: #8a929c; }
.tix-for { margin-top: 10px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8a929c; }
.tix-name { font: 900 38px/1 var(--disp); font-stretch: 82%; letter-spacing: -.02em; color: #fff; min-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 110px; }
.tix-candles { position: absolute; right: 12px; bottom: 6px; width: 110px; height: 30px; opacity: .9; }
.tix-candles .u { fill: #36d68f; stroke: #36d68f; }
.tix-candles .d { fill: #ff5a6e; stroke: #ff5a6e; }
.tix-candles line { stroke-width: 1; }
/* perforation with notches */
.tix-stub { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 12px 16px 14px; background: var(--hl); color: var(--ink); }
.tix-stub::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; border-top: 2px dashed rgba(11, 13, 16, .55); }
.tix-stub::after { content: ""; position: absolute; top: -9px; left: -9px; right: -9px; height: 18px; background: radial-gradient(circle at 9px 9px, #fff 8.5px, transparent 9px) left / 50% 100% no-repeat, radial-gradient(circle at calc(100% - 9px) 9px, #fff 8.5px, transparent 9px) right / 50% 100% no-repeat; }
.tix-stub > div > span { display: block; font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(11, 13, 16, .6); }
.tix-stub b { display: block; margin-top: 2px; font: 900 15px/1.15 var(--disp); font-stretch: 90%; }

.dots { display: flex; gap: 6px; margin: 14px 0 2px; }
.dots i { flex: 1; height: 5px; border-radius: 3px; background: #e3e6ea; transition: background .3s; }
.dots i.on { background: var(--ink); }

.stepper .field { display: none; }
.stepper[data-step="0"] [data-f="name"], .stepper[data-step="1"] [data-f="whatsapp"], .stepper[data-step="2"] [data-f="email"] { display: block; animation: stepin .32s var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateX(18px); } }
.stepper .field label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 900 22px/1.15 var(--disp); font-stretch: 90%; margin-bottom: 10px; }
.stepper .field label { flex-wrap: wrap; }
.stepper .field .hint { font: 500 13px var(--body); color: var(--mute); }
.stepper .input, .stepper .cc { height: 60px; font-size: 19px; border-width: 2px; border-radius: 12px; }
.stepper:not([data-step="2"]) .consent, .stepper:not([data-step="2"]) #submit { display: none; }
.stepper[data-step="2"] #step-next { display: none; }
.step-nav { display: flex; gap: 10px; }
.step-nav .btn { flex: 1; width: auto; }
.back { flex: none; width: 58px; min-height: 58px; border: 2px solid #d5d9de; border-radius: 12px; background: #fff; font: 700 20px var(--body); cursor: pointer; }
.back:hover { border-color: var(--ink); }
.stepper[data-step="0"] .back { display: none; }
.inline-form .stepper .field label { color: #fff; }
.inline-form .consent, .inline-form .safe { color: #8a929c; }

/* ===================== v10 · story as a price chart ===================== */
.story2 .story-grid { align-items: start; }
.tl { position: relative; margin-top: 34px; gap: 0; }
.tl::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(#d5d9de 0 6px, transparent 6px 10px); }
.tl .beat { grid-template-columns: 44px 1fr; gap: 12px; padding: 0 0 34px; }
.tl .beat:last-child { padding-bottom: 0; }
.candle { position: relative; z-index: 1; justify-self: center; width: 16px; margin-top: 4px; border-radius: 3px; }
.candle::before { content: ""; position: absolute; left: 7px; width: 2px; top: -8px; bottom: -8px; background: inherit; }
.b-up .candle { height: 30px; background: var(--up); }
.b-crash .candle { height: 110px; background: var(--dn); box-shadow: 0 0 24px rgba(215, 38, 61, .35); }
.b-key .candle { height: 40px; background: var(--hl); box-shadow: 0 0 0 2px var(--ink); }
.tl .b-n { display: block; margin-bottom: 6px; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.b-crash .b-n { color: var(--dn-ink); }
.b-crash h3 { color: var(--dn); font-size: clamp(56px, 15vw, 120px); line-height: .9; letter-spacing: -.03em; }
.b-crash h3::after { content: " ▼"; font-size: .4em; vertical-align: middle; }
.b-key h3 { font-size: clamp(30px, 7vw, 48px); }
.three { margin: 14px 0; display: grid; gap: 10px; }
.three li { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 0; font: 800 19px/1.25 var(--disp); font-stretch: 94%; }
.three li::before { content: none; }
.three b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--hl); font: 900 18px var(--disp); }
.b-key mark { font-weight: 700; }
.portrait { position: relative; margin: 0; }
.portrait .anson-away { width: 100%; max-width: 420px; margin: 0 auto; filter: grayscale(1) contrast(1.05); }
.portrait .creds { position: relative; margin-top: -40px; padding: 16px 18px; background: var(--ink); color: #aab1ba; border-radius: 14px; }
.portrait .creds b { color: #fff; }
.story2 .story-side { display: block; }
.lanes { margin-top: 60px; display: grid; gap: 14px; }
.lane { padding: 20px 18px; border-radius: 16px; }
.lane.bad { background: #fdecee; }
.lane.good { background: #e7f8ee; }
.lane-k { font: 800 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lane.bad .lane-k { color: var(--dn-ink); }
.lane.good .lane-k { color: var(--up-ink); }
.lane-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.node { flex: none; padding: 10px 14px; border-radius: 999px; background: #fff; font: 900 clamp(18px, 4.6vw, 26px)/1 var(--disp); font-stretch: 88%; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.lane.bad .node { color: #8f969f; }
.node.test { background: var(--ink); color: var(--hl); }
.lane .gap { flex: 1; height: 0; border-top: 3px dashed var(--dn); position: relative; }
.lane .gap::after { content: "✕"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--dn); color: #fff; display: grid; place-items: center; font: 800 13px var(--body); font-style: normal; }
.lane .to { flex: 1; min-width: 14px; height: 3px; background: var(--ink); position: relative; }
.lane .to::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left: 9px solid var(--ink); border-right: 0; }
.lane-out { margin-top: 12px; font-size: 16.5px; color: var(--ink-2); }
.lane.bad .lane-out { color: var(--dn-ink); font-weight: 600; }

/* ===================== v10 · the 2 hours, as a broadcast rundown ===================== */
.onair { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; padding: 12px 0; border-top: 1px solid #23282f; border-bottom: 1px solid #23282f; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a929c; }
.onair .rec { color: #ff5a6e; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.onair .tc { font-size: 15px; color: #fff; }
.onair .mix { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.onair .mix i { width: 10px; height: 10px; border-radius: 2px; }
.m-demo { background: #36d68f; } .m-live { background: #ff5a6e; } .m-show { background: var(--hl); }
.rundown-sec .runsheet { margin-top: 8px; border-top: 0; counter-reset: none; }
.rundown-sec .run { border-bottom: 1px solid #23282f; position: relative; }
.rundown-sec .run::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .2s; }
.rundown-sec .run.open::before, .rundown-sec .run:hover::before { background: var(--hl); }
.rundown-sec .run > button { padding: 18px 0 18px 14px; grid-template-columns: 54px 1fr 20px; row-gap: 8px; }
.rundown-sec .run .n { font: 900 34px/1 var(--disp); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.2px #5a626d; }
.rundown-sec .run.open .n, .rundown-sec .run:hover .n { -webkit-text-stroke-color: var(--hl); }
.rundown-sec .run .t { color: #fff; font-size: clamp(18px, 4.6vw, 23px); }
.rundown-sec .run.open .t { text-decoration: none; }
.rundown-sec .run .tag { grid-column: 2; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #1a1f25; color: #aab1ba; }
.rundown-sec .run .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5a626d; }
.rundown-sec .run .tag.demo { color: #36d68f; } .rundown-sec .run .tag.demo::before { background: #36d68f; box-shadow: 0 0 8px #36d68f; }
.rundown-sec .run .tag.live { color: #ff5a6e; background: rgba(255, 90, 110, .12); } .rundown-sec .run .tag.live::before { background: #ff5a6e; animation: blink 1.6s steps(2, start) infinite; }
.rundown-sec .run .tag.shown { color: var(--hl); } .rundown-sec .run .tag.shown::before { background: var(--hl); }
.rundown-sec .run .tag.paid { color: #6b7380; }
.rundown-sec .run > button::after { grid-column: 3; grid-row: 1; color: #6b7380; }
.rundown-sec .run.open > button::after { color: var(--hl); }
.rundown-sec .run .more { padding: 0 20px 20px 68px; color: #aab1ba; font-size: 16px; }
.rundown-sec .blur { color: #fff; }

/* ===================== v10 · bring your strategy: a live chat ===================== */
.livechat { border-radius: 18px; background: #0b0d10; color: #eef1f4; padding: 14px; box-shadow: 0 18px 40px rgba(11, 13, 16, .3); }
.lc-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; border-bottom: 1px solid #23282f; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #aab1ba; }
.lc-top > span:first-child { display: flex; align-items: center; gap: 8px; }
.lc-ex { padding: 2px 6px; border-radius: 4px; background: #23282f; color: #8a929c; }
.lc-msgs { display: grid; gap: 8px; padding-top: 12px; }
.lc-msgs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-msgs p { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #1a1f25; font: 600 14.5px/1.35 var(--mono); color: #eef1f4; }
.lc-host { align-items: flex-start !important; flex-wrap: nowrap !important; }
.lc-host .avatar { width: 34px; height: 34px; }
.lc-host p { background: #2a2410; font-family: var(--body); font-weight: 500; color: #fff3b8; }
.lc-host b { display: block; font: 800 12px var(--mono); color: var(--hl); letter-spacing: .05em; }
.lc-pick p { background: rgba(54, 214, 143, .14); box-shadow: inset 0 0 0 1.5px #36d68f; }
.lc-tag { font: 800 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #36d68f; }
.lc-tag::before { content: "✓ "; }
.lc-you p { background: transparent; border: 1.5px dashed #5a626d; color: #8a929c; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--hl); animation: blink 1s steps(2, start) infinite; }
.js .composer .lc-msgs li { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s var(--ease); }
.js .composer.in .lc-msgs li { opacity: 1; transform: none; }
.js .composer.in .lc-msgs li:nth-child(2) { transition-delay: .5s; }
.js .composer.in .lc-msgs li:nth-child(3) { transition-delay: 1s; }
.js .composer.in .lc-msgs li:nth-child(4) { transition-delay: 1.5s; }
.js .composer.in .lc-msgs li:nth-child(5) { transition-delay: 2s; }
.js .composer .lc-tag { opacity: 0; transition: opacity .4s 2.6s; }
.js .composer.in .lc-tag { opacity: 1; }
.composer > .btn { margin-top: 10px; }

@media (min-width: 720px) {
  .lanes { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rundown-sec .runsheet { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .tix-name { font-size: 44px; }
}
@media (min-width: 1000px) {
  .story2 .story-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; }
  .story2 .story-side { position: sticky; top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .composer .lc-msgs li, .js .composer .lc-tag { opacity: 1; transform: none; transition: none; }
  .onair .rec, .caret, .rundown-sec .run .tag.live::before, .stepper .field { animation: none !important; }
}

/* ===================== v11 · hero: the real chart is the whole background ===================== */
.hero-x { position: relative; overflow: hidden; }
.hero-x .hero-bg { position: absolute; inset: 0 0 0 0; height: auto; z-index: 0; opacity: .55;
  -webkit-mask: radial-gradient(ellipse 70% 42% at 50% 34%, transparent 35%, #000 85%); mask: radial-gradient(ellipse 70% 42% at 50% 34%, transparent 35%, #000 85%); }
.hero-x .hero-bg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-x .hero-bg .lbl, .hero-x .hero-bg .worst-l { display: none; }
.hero-x > .wrap { position: relative; z-index: 1; }
.hero-x .ln-up { stroke-width: 2.6; }
.hero-x .ln-dn { stroke-width: 3; }
.hero-x .tag text { font-size: 12px; }

/* proof strip */
.proof { margin-top: 30px; padding-top: 18px; border-top: 1px solid #23282f; }
.proof-k { font: 700 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #8a929c; }
.proof-k b { color: var(--hl); }
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.pf { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; border-left: 1px solid #23282f; }
.pf:first-child { padding-left: 0; border-left: 0; }
.pf span { font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a929c; }
.pf b { font: 900 clamp(26px, 7.6vw, 64px)/.95 var(--disp); font-stretch: 72%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf b.dn { color: #ff5a6e; text-shadow: 0 0 30px rgba(255, 90, 110, .45); }
.pf b.up { color: #36d68f; text-shadow: 0 0 30px rgba(54, 214, 143, .45); }
.pf small { font-size: 12px; color: #8a929c; }
.proof-cap { margin-top: 14px; font-size: 13.5px; color: #8a929c; max-width: 42em; }
.proof-cap a { color: #aab1ba; }
.proof .anson-point { display: none; }

/* ===================== habit wall (replaces the tap-to-tick list) ===================== */
.wall { overflow: hidden; display: flex; margin-top: 28px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall + .wall { margin-top: 12px; }
.wall-row { display: flex; gap: 12px; padding-right: 12px; flex: none; animation: wall 36s linear infinite; }
.wall-rev .wall-row { animation-direction: reverse; animation-duration: 42s; }
.wall-row li { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; background: #fff; box-shadow: 0 2px 0 rgba(11, 13, 16, .08); font: 800 clamp(17px, 4.4vw, 22px)/1.2 var(--disp); font-stretch: 92%; white-space: nowrap; }
.wall-row li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dn); color: #fff; font: 800 12px var(--body); font-style: normal; }
@keyframes wall { to { transform: translateX(-100%); } }
.wall:hover .wall-row { animation-play-state: paused; }
.wall-out { margin-top: 30px; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.wall-out b { color: var(--ink); }
.wall-out .up { font-weight: 800; }

/* ===================== story: one annotated (illustrated) chart ===================== */
.story-head { display: grid; gap: 30px; }
.story3 .notebook { margin-top: 22px; }
.trader { margin: 0; position: relative; max-width: 420px; }
.trader .anson-away { width: 100%; filter: grayscale(1) contrast(1.05); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.trader .creds { position: relative; margin-top: -70px; padding: 16px 18px; border-radius: 14px; background: var(--ink); color: #aab1ba; }
.trader .creds b { color: #fff; }
.arc { margin-top: 56px; }
.arc-chart { position: relative; height: 180px; }
.arc-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.arc-line { fill: none; stroke: url(#arcG); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.js .arc .arc-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .arc.in .arc-line { animation: draw 2.4s .2s var(--ease) forwards; }
.mk { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--disp); color: #fff; box-shadow: 0 0 0 4px #fff; }
.m1, .m4 { background: var(--up); } .m2 { background: var(--dn); } .m3 { background: #6a7079; }
.m4 { background: var(--hl); color: var(--ink); }
.arc-ill { position: absolute; right: 0; top: 0; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.arc-beats { display: grid; gap: 0; margin-top: 18px; border-top: 2px solid var(--ink); }
.ab { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ab-n { display: inline-flex; align-items: center; gap: 8px; font: 800 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.ab-n::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--up); }
.ab2 .ab-n::before { background: var(--dn); } .ab3 .ab-n::before { background: #6a7079; } .ab4 .ab-n::before { background: var(--hl); box-shadow: 0 0 0 1.5px var(--ink); }
.ab h3 { margin-top: 6px; font: 900 clamp(24px, 6vw, 32px)/1.08 var(--disp); font-stretch: 86%; letter-spacing: -.015em; }
.ab2 h3 { color: var(--dn); }
.ab p { margin-top: 6px; font-size: 16.5px; color: var(--ink-2); }
.ab .three { margin: 12px 0 0; }
.ab .three li { font-size: 17px; }
.arc-out { margin-top: 24px; font-size: 18px; color: var(--ink-2); max-width: 46em; }
.arc-out mark { font-weight: 700; color: var(--ink); }

/* ===================== 2 hours: session screen ===================== */
.monitor { display: none; }
.mon-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #23282f; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a929c; }
.mon-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2f353d; }
.mon-bar > i:first-child { background: #ff5a6e; } .mon-bar > i:nth-child(2) { background: var(--hl); } .mon-bar > i:nth-child(3) { background: #36d68f; }
.mon-title { margin-left: 10px; }
.mon-rec { margin-left: auto; color: #ff5a6e; animation: blink 1.6s steps(2, start) infinite; }
.mon-screen { position: relative; padding: 30px 30px 34px; min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(80% 70% at 100% 0%, rgba(54, 214, 143, .12), transparent 70%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 32px; }
.mon-screen.swap > * { animation: monin .45s var(--ease) both; }
.mon-screen.swap .mon-t { animation-delay: .05s; } .mon-screen.swap .mon-d { animation-delay: .1s; }
@keyframes monin { from { opacity: 0; transform: translateY(10px); } }
.mon-meta { display: flex; align-items: center; gap: 10px; }
.mon-n { font: 900 64px/.8 var(--disp); font-stretch: 72%; color: var(--hl); }
.mon-of { font: 700 12px var(--mono); color: #6b7380; text-transform: uppercase; }
.mon-tag { margin-left: auto; }
.mon-t { margin-top: 18px; font: 900 32px/1.08 var(--disp); font-stretch: 86%; letter-spacing: -.015em; color: #fff; }
.mon-d { margin-top: 12px; font-size: 17px; color: #aab1ba; max-width: 34em; }
.mon-prog { display: flex; gap: 5px; padding: 12px 14px 14px; }
.mon-prog i { flex: 1; height: 4px; border-radius: 2px; background: #2a3038; transition: background .3s; }
.mon-prog i.on { background: var(--hl); }
.rundown-sec .run.cur::before { background: var(--hl); }
.rundown-sec .run.cur .n { -webkit-text-stroke-color: var(--hl); }

/* ===================== bring: the pick turns into a live test ===================== */
.lc-test { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #111a15; box-shadow: inset 0 0 0 1px #1f4d36; }
.lc-test-k { display: flex; align-items: center; gap: 8px; font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #36d68f; }
.lc-test-k .dot { background: #36d68f; }
.lc-test-t { margin-top: 4px; font: 700 14.5px var(--mono); color: #fff; }
.lc-bar { margin-top: 10px; height: 6px; border-radius: 3px; background: #23282f; overflow: hidden; }
.lc-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #36d68f, var(--hl)); transform-origin: left; }
.lc-test-r { margin-top: 8px; font-size: 13.5px; color: #aab1ba; }
.lc-test-r b { color: var(--hl); }
.js .composer .lc-test { opacity: 0; transform: translateY(10px); transition: opacity .4s 3.2s, transform .4s 3.2s; }
.js .composer.in .lc-test { opacity: 1; transform: none; }
.js .composer .lc-bar i { transform: scaleX(0); transition: transform 2s 3.6s cubic-bezier(.4, 0, .2, 1); }
.js .composer.in .lc-bar i { transform: scaleX(1); }
.js .composer .lc-test-r { opacity: 0; transition: opacity .4s 5.7s; }
.js .composer.in .lc-test-r { opacity: 1; }

/* ===================== final: two ways to find out ===================== */
.vs { margin-top: 26px; display: grid; gap: 12px; }
.vs-col { position: relative; padding: 22px 20px; border-radius: 18px; }
.vs-col.bad { background: rgba(255, 90, 110, .08); box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .3); }
.vs-col.good { background: rgba(54, 214, 143, .1); box-shadow: inset 0 0 0 1.5px rgba(54, 214, 143, .6), 0 0 60px rgba(54, 214, 143, .12); }
.vs-k { font: 800 12px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.bad .vs-k { color: #ff8a98; } .good .vs-k { color: #36d68f; }
.vs-big { display: block; margin-top: 8px; font: 900 clamp(64px, 18vw, 120px)/.85 var(--disp); font-stretch: 70%; letter-spacing: -.03em; }
.bad .vs-big { color: #ff5a6e; } .good .vs-big { color: #36d68f; text-shadow: 0 0 40px rgba(54, 214, 143, .4); }
.vs-sub { display: block; margin-top: 4px; font-size: 15px; color: #aab1ba; }
.vs dl { margin: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.vs dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vs dt { font-size: 14.5px; color: #8a929c; }
.vs dd { margin: 0; font: 800 16px var(--disp); font-stretch: 94%; color: #fff; text-align: right; }
.vs-mid { justify-self: center; font: 900 18px var(--disp); color: #6b7380; text-transform: uppercase; }
.vs-badge { display: inline-block; margin-top: 14px; padding: 6px 10px; border-radius: 8px; background: var(--hl); color: var(--ink); font: 800 13px var(--body); }
.vs-badge span { color: var(--ink); }
#final .final-row { margin-top: 34px; }

@media (min-width: 720px) {
  .vs { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 18px; }
  .vs-mid { align-self: center; }
  .arc-beats { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 22px; margin-top: 22px; }
  .ab { padding: 16px 0 0; border-bottom: 0; border-top: 2px solid var(--ink); }
  .ab2 { border-top-color: var(--dn); }
  .arc-chart { height: 220px; }
}
@media (min-width: 1000px) {
  .hero-x .hero-bg { opacity: .7; -webkit-mask: radial-gradient(ellipse 46% 55% at 50% 36%, transparent 40%, #000 82%); mask: radial-gradient(ellipse 46% 55% at 50% 36%, transparent 40%, #000 82%); }
  .proof { position: relative; margin-top: 50px; padding-right: 260px; }
  .proof .anson-point { display: block; position: absolute; right: -20px; bottom: -26px; width: 250px; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .story-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; align-items: end; }
  .rundown { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; margin-top: 8px; }
  .monitor { display: block; position: sticky; top: 30px; border-radius: 18px; overflow: hidden; background: #070809; box-shadow: 0 0 0 1px #23282f, 0 30px 80px rgba(0, 0, 0, .55); }
  .rundown-sec .runsheet { display: block; margin-top: 0; }
  .rundown-sec .run > button { padding: 14px 0 14px 14px; }
  .rundown-sec .run .t { font-size: 18px; }
  .rundown-sec .run .n { font-size: 28px; }
  .rundown-sec .run .more { display: none !important; }
  .rundown-sec .run > button::after { display: none; }
  .composer .livechat { padding: 18px; }
  .lc-msgs p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-row { animation: none; flex-wrap: wrap; }
  .wall { -webkit-mask: none; mask: none; }
  .wall:not(:first-of-type), .wall-row[aria-hidden="true"] { display: none; }
  .js .arc .arc-line { stroke-dashoffset: 0; animation: none; }
  .js .composer .lc-test, .js .composer .lc-bar i, .js .composer .lc-test-r { opacity: 1; transform: none; transition: none; }
  .mon-screen.swap > *, .mon-rec { animation: none; }
}

/* v11b · phones: keep the background lines out of the proof numbers */
@media (max-width: 999px) {
  .hero-x .hero-bg { bottom: auto; height: 560px; opacity: .45; -webkit-mask: linear-gradient(90deg, transparent 30%, #000 90%); mask: linear-gradient(90deg, transparent 30%, #000 90%); }
  .hero-x .hero-bg .tag, .hero-x .hero-bg .worst, .hero-x .hero-bg .ax { display: none; }
}
@media (min-width: 1000px) {
  #final .final-row { align-items: center; grid-template-columns: 1fr 320px; }
}

/* ===================== v12 · how it works: idea → test → truth ===================== */
.how-grid { display: grid; gap: 30px; }
.how-steps { margin-top: 26px; display: grid; gap: 14px; }
.how-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.how-steps b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--hl); font: 900 18px var(--disp); }
.how-steps p { font-size: 17.5px; color: var(--ink-2); padding-top: 7px; }
.how-steps strong { color: var(--ink); }
.desk-cta { display: none; }
.app { border-radius: 20px; background: #0b0d10; color: #eef1f4; overflow: hidden; box-shadow: 0 24px 60px rgba(11, 13, 16, .28); }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #23282f; font: 700 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #8a929c; }
.app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5a6e; }
.app-bar i:nth-child(2) { background: var(--hl); } .app-bar i:nth-child(3) { background: #36d68f; }
.app-bar span { margin-left: 8px; }
.app-bar em { margin-left: auto; font-style: normal; padding: 2px 6px; border-radius: 4px; background: #23282f; }
.app-body { padding: 18px 16px 6px; }
.app-k { display: flex; align-items: center; gap: 8px; margin-top: 16px; font: 800 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8a929c; }
.app-k:first-child { margin-top: 0; }
.app-k span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #23282f; color: #fff; font-size: 11px; }
.app-prompt { margin-top: 8px; padding: 14px; border-radius: 12px; background: #161a1f; box-shadow: inset 0 0 0 1px #2a3038; font-size: 16.5px; line-height: 1.45; color: #fff; min-height: 76px; }
.app-run { margin-top: 8px; }
.app-run small { display: block; margin-top: 8px; font: 600 12px var(--mono); color: #8a929c; }
.app-res { margin-top: 8px; display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 8px; }
.app-res div { padding: 12px; border-radius: 12px; background: #161a1f; }
.app-res small { display: block; font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8a929c; }
.app-res b { display: block; margin-top: 4px; font: 900 clamp(24px, 7vw, 34px)/1 var(--disp); font-stretch: 74%; color: #fff; }
.app-res b.dn { color: #ff5a6e; text-shadow: 0 0 24px rgba(255, 90, 110, .4); }
.app-verdict { margin: 12px 0 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 90, 110, .12); color: #ff8a98; font-weight: 700; font-size: 14.5px; }
.app-note { padding: 10px 16px 14px; font-size: 12px; color: #6b7380; }
.app .caret { display: none; }
.app .lc-bar i { transform: scaleX(1); }
/* the sequence (JS adds .wait, then .typed-done, then .ran) */
.app.wait .caret { display: inline-block; }
.app.wait.typed-done .caret { display: none; }
.app.wait .lc-bar i { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.4, 0, .2, 1); }
.app.wait.typed-done .lc-bar i { transform: scaleX(1); }
.app.wait .app-res div, .app.wait .app-verdict { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.app.wait.ran .app-res div, .app.wait.ran .app-verdict { opacity: 1; transform: none; }
.app.wait.ran .app-res div:nth-child(2) { transition-delay: .15s; } .app.wait.ran .app-res div:nth-child(3) { transition-delay: .3s; } .app.wait.ran .app-verdict { transition-delay: .55s; }

/* ===================== v12 · the 2 hours: everything visible, on one rail ===================== */
.ag-top { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 12px 0; border-top: 1px solid #23282f; border-bottom: 1px solid #23282f; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #aab1ba; }
.ag-top .rec { color: #ff5a6e; animation: blink 1.6s steps(2, start) infinite; }
.agenda { margin-top: 26px; display: grid; }
.ag { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding-bottom: 26px; }
.ag::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--hl), rgba(255, 225, 77, .25)); }
.ag:last-child::before { display: none; }
.ag-n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0b0d10; box-shadow: inset 0 0 0 2px var(--hl); color: var(--hl); font: 900 17px var(--disp); }
.ag h3 { margin-top: 8px; font: 800 clamp(19px, 4.8vw, 23px)/1.22 var(--disp); font-stretch: 92%; color: #fff; }
.ag p { margin-top: 6px; font-size: 15.5px; color: #aab1ba; }
.ag .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #1a1f25; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #aab1ba; }
.ag .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5a626d; }
.ag .tag.demo { color: #36d68f; } .ag .tag.demo::before { background: #36d68f; box-shadow: 0 0 8px #36d68f; }
.ag .tag.shown { color: var(--hl); } .ag .tag.shown::before { background: var(--hl); }
.ag .tag.live { color: #ff5a6e; background: rgba(255, 90, 110, .14); } .ag .tag.live::before { background: #ff5a6e; }
.ag.live .ag-n { background: #ff5a6e; box-shadow: 0 0 0 4px rgba(255, 90, 110, .25), 0 0 24px rgba(255, 90, 110, .5); color: #fff; }
.ag.live > div { padding: 12px 14px; margin: -4px 0 0 -14px; border-radius: 14px; background: rgba(255, 90, 110, .08); box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .35); }
.ag.paid .ag-n { box-shadow: inset 0 0 0 2px #3a414b; color: #6b7380; }
.ag.paid h3 { color: #aab1ba; }
.ag .blur { display: inline; margin: 0; color: #fff; }

@media (min-width: 720px) {
  .agenda { grid-template-columns: 1fr 1fr; column-gap: 48px; grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
  .ag:nth-child(4)::before { display: none; }
}
@media (min-width: 1000px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .desk-cta { display: block; }
  .ph-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ag-top .rec { animation: none; } }

/* ===================== v13 · top fold: Concept B, Anson portrait (picked 31 Oct 2026) ===================== */
.hero.heroB { position: relative; padding: 0 0 26px; color: #fff; background: #0b0d10; }
.hero.heroB::after { display: none; }
.heroB-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.B-photo { position: relative; height: 252px; margin: 0 -20px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 42%, rgba(54, 214, 143, .24), transparent 70%); }
.B-img { position: absolute; left: 50%; top: 4px; width: 236px; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(#000 58%, transparent 94%); mask-image: linear-gradient(#000 58%, transparent 94%); }
.chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 10px;
  background: rgba(20, 24, 29, .88); box-shadow: 0 0 0 1px #2a3038; font: 700 12px var(--mono); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chip-live { left: 20px; top: 16px; }
.chip-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b52; box-shadow: 0 0 0 3px rgba(255, 59, 82, .25); animation: pulse 1.8s infinite; }
.chip-dd { right: 20px; top: 112px; color: #ff5a6e; }
.chip-dd b { font: 900 22px/1 var(--disp); font-stretch: 76%; }
.heroB .h-hero { position: relative; margin-top: -30px; color: #fff; font-size: clamp(38px, 10.6vw, 66px); line-height: .96; letter-spacing: -.025em; text-wrap: balance; }
.heroB .h-hero em { color: var(--ink); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--hl), var(--hl)) 0 60% / 100% 88% no-repeat; }
.js .heroB .h-hero em { animation: sweep .9s .35s cubic-bezier(.6, 0, .2, 1) both; }
.heroB .sub { margin-top: 14px; font-size: 16.5px; line-height: 1.45; color: #aab1ba; max-width: 34em; }
.heroB .sub span { color: #fff; font-weight: 600; }
.heroB .hero-cta { margin-top: 20px; }
.heroB .btn-hero { width: 100%; }
.B-micro { display: block; margin-top: 12px; text-align: center; font-size: 13.5px; line-height: 1.45; color: #8a929c; }
.B-micro b { color: var(--hl); font-weight: 800; }
.heroB .closed-note { border-top-color: #fff; color: #fff; }
.heroB ~ * .proof, .heroB .proof { margin-top: 26px; }

/* phones: no ticker tape above the photo; the first screen is face → headline → button */
@media (max-width: 719px) {
  .ticker { display: none; }
}
@media (min-width: 720px) {
  .heroB .btn-hero { width: auto; min-width: 360px; }
  .B-micro { text-align: left; }
}
@media (min-width: 1000px) {
  .hero.heroB { padding: 20px 0 30px; }
  .heroB-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: center; }
  .B-photo { order: 2; height: 600px; margin: 0; }
  .B-img { width: 450px; top: 24px; }
  .B-text { order: 1; }
  .heroB .h-hero { margin-top: 0; font-size: clamp(54px, 4.8vw, 70px); }
  .chip-live { left: 30px; top: 40px; }
  .chip-dd { right: 10px; top: 270px; padding: 10px 14px; }
  .chip-dd b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .heroB .h-hero em, .chip-live i { animation: none; }
}

/* v14 · headline: easier to read, key words pop */
.heroB .h-hero { font-weight: 850; font-stretch: 92%; letter-spacing: -.012em; line-height: 1.02; }
.heroB .h-hero b { font-weight: 900; }
.heroB .h-hero .kw-g { color: #36d68f; white-space: nowrap; }
.heroB .h-hero .kw-u { background: linear-gradient(var(--hl), var(--hl)) 0 92% / 100% .12em no-repeat; padding-bottom: .02em; }
.heroB .h-hero em { display: inline; margin-top: .1em; }
.heroB .h-hero .kw-r { color: var(--dn); }
@media (max-width: 999px) {
  .heroB .h-hero { font-size: clamp(36px, 10vw, 60px); }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-run { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .draw { animation: none; stroke-dashoffset: 0; }
  .worst, .tag, .lbl { animation: none; opacity: 1; }
  .dot { animation: none; }
  .js .hero-dark .h-hero, .js .hero-dark .h-hero em, .btn-hero::after { animation: none; }
  .logged span, .ok-badge i { animation: none; }
}

.sec-hl .h-sec { line-height: 1.04; }

/* narrow phones: keep the top bar on one line */
.bar .live-pill { white-space: nowrap; }
@media (max-width: 380px) { .bar .brand { font-size: 18px; } .bar .live-pill { font-size: 11px; gap: 6px; } }