/* MindTracks Creator sales page (/creator/). Layout and skin copied from the approved TMM "all-in-one launch" page
   (totalmoneymagnetism.com/sixsteps-allinone/, css/tmm-allinone.css): navy #0b1020 / #17365d, gold #e7a625, Lato + Georgia.
   Additions for this page and the readability floor are at the end. */
:root {
  --base: #0b1020;
  --base-2: #0f1730;
  --surface: #141e3a;
  --surface-2: #1a2648;
  --navy: #17365d;
  --line: rgba(255, 255, 255, .09);
  --text: #f3f5fa;
  --muted: #a6b0c5;
  --accent: #e7a625;
  --accent-hi: #f2b53a;
  --accent-ink: #1b1300;
  --warn: #ef6a5a;
  --paper: #f8f5ee;
  --paper-2: #efe7d6;
  --paper-ink: #1d1b16;
  --f-body: Lato, Arial, Helvetica, sans-serif;
  --f-hand: Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --col: 660px;
  --wide: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 74px; }
body { margin: 0; background: var(--base); color: var(--muted); font: 17px/1.65 var(--f-body); overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
p { margin: 0 0 1em; }
b, strong { color: var(--text); font-weight: 700; }
s { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; color: var(--text); font-weight: 900; letter-spacing: -.01em; }

.wrap { max-width: calc(var(--wide) + 48px); margin: 0 auto; padding: 0 24px; }
.col { max-width: calc(var(--col) + 48px); margin: 0 auto; padding: 0 24px; }
.c { text-align: center; }
.sec { padding: 104px 0; position: relative; }
.sec.alt { background: var(--base-2); }
.sec.glow { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(231, 166, 37, .10), transparent 70%), var(--base); }

/* ---------- section anatomy: eyebrow, two-line headline, lead, kicker ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.h2 { font-size: 42px; line-height: 1.12; }
.h2 .two { display: block; color: var(--muted); font-weight: 700; }
.h2 .two.gold, .gold { color: var(--accent); }
.lead { max-width: 640px; margin: 18px auto 0; font-size: 18px; }
.kicker { max-width: 640px; margin: 48px auto 0; text-align: center; font-size: 19px; color: var(--muted); }
.kicker b { color: var(--text); }
.src { margin: 14px auto 0; max-width: 640px; text-align: center; font-size: 13px; color: #7f89a0; }
.head { text-align: center; margin-bottom: 52px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 26px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 17px; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 34px rgba(231, 166, 37, .32); transition: background .15s ease, box-shadow .15s ease, translate .15s ease; }
.btn:hover { background: var(--accent-hi); translate: 0 -1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 40px rgba(231, 166, 37, .45); }
.btn .arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); }
.btn .arr svg { width: 18px; height: 18px; }
.btn-lg { font-size: 19px; padding: 10px 10px 10px 30px; }
.btn-lg .arr { width: 44px; height: 44px; }
.btn-ghost { display: inline-flex; align-items: center; padding: 15px 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: var(--text); font-weight: 700; text-decoration: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark { background: var(--accent-ink); color: var(--accent); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.btn-dark .arr { background: var(--accent); color: var(--accent-ink); }
.btn-dark:hover { background: #2a1f04; }
.btn:focus-visible, .btn-ghost:focus-visible, .nav a:focus-visible, summary:focus-visible, .vposter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.under { margin: 12px 0 0; font-size: 14px; color: #8c96ad; }
.cta-row { margin-top: 40px; text-align: center; }

/* ---------- 1. sticky header ---------- */
.top { position: sticky; top: 0; z-index: 60; background: rgba(11, 16, 32, .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.top .logo img { display: block; width: 200px; }
.nav { display: flex; gap: 24px; margin: 0 auto; }
.nav a { color: #c6cddc; font-size: 15px; font-weight: 700; text-decoration: none; }
.nav a:hover { color: var(--accent); }
.top .btn { font-size: 15px; padding: 5px 5px 5px 18px; box-shadow: none; white-space: nowrap; }
.top .btn .arr { width: 30px; height: 30px; }
.top .btn .arr svg { width: 15px; height: 15px; }

/* ---------- 2. hero ---------- */
.hero { position: relative; overflow: hidden; padding: 78px 0 92px; text-align: center; background: var(--base) url(/creator/img/hero-bg.jpg) center top / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--base)); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 54px; line-height: 1.07; max-width: 900px; margin: 0 auto; }
.hero h1 .l1 { display: block; color: var(--accent); }
.hero .sub { max-width: 680px; margin: 22px auto 0; font-size: 19px; color: #c3cad9; }
.stages { margin: 22px 0 0; color: var(--text); font-size: 13px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.stages i { color: var(--accent); font-style: normal; margin: 0 8px; }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(11, 16, 32, .55); font-size: 14px; color: var(--muted); }
.chip svg { width: 15px; height: 15px; color: var(--accent); }
.chip b { color: var(--text); }

/* sales video: poster first, the real player loads on click (never autoplays with sound) */
.player { position: relative; max-width: 820px; margin: 44px auto 0; border-radius: 18px; padding: 8px; background: linear-gradient(180deg, rgba(231, 166, 37, .35), rgba(23, 54, 93, .5)); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 80px rgba(231, 166, 37, .16); }
.player .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vposter { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; background: radial-gradient(ellipse 70% 80% at 30% 40%, rgba(231, 166, 37, .28), transparent 60%), linear-gradient(135deg, #17365d, #0b1020 70%); cursor: pointer; border: 0; width: 100%; padding: 0; font: inherit; text-align: left; }
.vposter img { position: absolute; right: 2%; bottom: 0; height: 96%; width: auto; }
.vposter .vt { position: absolute; left: 7%; top: 50%; translate: 0 -50%; max-width: 52%; }
.vposter .vt small { display: block; color: var(--accent); font-size: 13px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.vposter .vt strong { display: block; font-size: 30px; line-height: 1.15; font-weight: 900; }
.vposter .play { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 16px; }
.vposter .play span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); }
.vposter .play svg { width: 16px; height: 16px; margin-left: 3px; }
.vposter:hover .play { background: var(--accent-hi); }
.vnote { margin: 14px auto 0; max-width: 640px; font-size: 14px; color: #8c96ad; }

/* ---------- 3. ticker ---------- */
.ticker-clip { position: relative; z-index: 3; overflow: hidden; margin: -30px 0 -24px; padding: 24px 0; }
.ticker { position: relative; margin: 0 -20px; rotate: -1.4deg; background: var(--accent); color: var(--accent-ink); overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.ticker-in { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker ul { display: flex; margin: 0; padding: 15px 0; list-style: none; }
.ticker li { padding: 0 28px; font-weight: 900; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: "\2022"; margin-left: 56px; }
@keyframes tick { to { translate: -50% 0; } }

/* ---------- paper props ---------- */
.paper { background: var(--paper); color: var(--paper-ink); box-shadow: 0 22px 40px rgba(0, 0, 0, .55); }
.paper b, .paper strong { color: var(--paper-ink); }
.stamp { display: inline-block; padding: 6px 14px; rotate: -9deg; font: 700 13px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #c8402f; border: 2.5px solid currentColor; border-radius: 4px; background: var(--paper); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); z-index: 2; }
.stamp.good { color: #2f7a3a; }
.dossier .stamp, .receipt .stamp { background: transparent; box-shadow: none; }
.hand { font-family: var(--f-hand); font-style: italic; }

/* ---------- 4. problem ---------- */
.prob { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 980px; margin: 0 auto; }
.draft-wrap { position: relative; padding: 10px 10px 40px; }
.draft { position: relative; rotate: -2.2deg; border-radius: 10px; overflow: hidden; }
.draft .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-2); font: 12px/1 var(--f-mono); color: #6b6455; }
.draft .bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfc6b4; }
.draft .bar span { margin-left: 8px; }
.draft .body { padding: 22px 26px 28px; }
.draft h4 { margin: 0 0 12px; font: 700 24px/1.2 var(--f-hand); font-style: italic; }
.draft ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.9; }
.draft ol li.x { text-decoration: line-through; text-decoration-color: rgba(29, 27, 22, .5); color: #6b6455; }
.draft ol li.blank { color: #b4ab98; }
.draft .meta { margin-top: 12px; font: 12px/1.4 var(--f-mono); color: #8b8372; }
.draft-wrap .stamp { position: absolute; right: -4px; bottom: 34px; font-size: 12px; }
.plan-label { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #7f89a0; }
.plan { margin: 0 0 26px; color: var(--text); font-size: 20px; font-weight: 900; }
.plan i { color: var(--accent); font-style: normal; margin: 0 6px; }
.qs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.qs li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: var(--surface); font-size: 15px; color: #cdd3e0; }
.qs li:nth-child(even) { margin-left: 22px; }
.alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1040px; margin: 70px auto 0; }
.alt { padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.alt:nth-child(1) { rotate: -1deg; } .alt:nth-child(2) { rotate: .8deg; translate: 0 10px; } .alt:nth-child(3) { rotate: -.6deg; }
.alt .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--text); margin-bottom: 16px; }
.alt .ic svg { width: 21px; height: 21px; }
.alt h3 { font-size: 19px; margin-bottom: 6px; }
.alt .tell { margin: 0 0 12px; font: 13px/1.5 var(--f-mono); color: var(--warn); }
.alt p { font-size: 15px; }
.xtag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(239, 106, 90, .12); color: var(--warn); font-size: 13px; font-weight: 700; }
.xtag svg { width: 11px; height: 11px; }

/* ---------- 5. look inside (real pages) ---------- */
.drift { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.drift + .drift { margin-top: 20px; }
.drift-in { display: flex; gap: 20px; width: max-content; animation: tick 70s linear infinite; }
.drift.rev .drift-in { animation-direction: reverse; }
.pg { width: 190px; flex: none; margin: 0; }
.pg img { display: block; width: 190px; aspect-ratio: 1100 / 1424; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); background: var(--paper); }
.pg figcaption { margin-top: 8px; text-align: center; font-size: 12px; color: #7f89a0; }

/* ---------- 6. the other 80% ---------- */
.split { display: flex; max-width: 860px; height: 62px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.split .a { flex: 0 0 20%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 18px; }
.split .b { flex: 1; display: grid; place-items: center; color: var(--warn); font-weight: 900; font-size: 18px; background: repeating-linear-gradient(135deg, rgba(239, 106, 90, .24) 0 10px, rgba(239, 106, 90, .08) 10px 20px); }
.split-lab { display: flex; max-width: 860px; margin: 10px auto 0; font-size: 13px; font-weight: 700; }
.split-lab span:first-child { flex: 0 0 20%; color: var(--accent); }
.split-lab span:last-child { flex: 1; color: var(--warn); text-align: center; }
.notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px; max-width: 1040px; margin: 60px auto 0; }
.note { width: 230px; min-height: 182px; border-radius: 3px; }
.note:nth-child(odd) { rotate: -2deg; } .note:nth-child(even) { rotate: 1.6deg; translate: 0 8px; }
.note .strip { padding: 8px 14px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; background: #f3d27e; color: #5a4300; }
.note:nth-child(3n+2) .strip { background: #f2b0a4; color: #5f1d14; }
.note:nth-child(3n) .strip { background: #b9cfe6; color: #13304f; }
.note h3 { padding: 16px 14px 6px; font: italic 700 24px/1.08 var(--f-hand); color: var(--paper-ink); overflow-wrap: anywhere; }
.note p { padding: 0 14px 16px; margin: 0; font-size: 14px; line-height: 1.45; color: #57503f; }

/* ---------- 7. cost of waiting ---------- */
.routes { position: relative; max-width: 1000px; margin: 0 auto; padding: 34px 30px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.chart { position: relative; aspect-ratio: 1000 / 380; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ms { position: absolute; translate: -50% 0; width: 150px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ms b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ms.up b { color: var(--accent); } .ms.dn b { color: var(--warn); }
.ms.start { translate: 0 0; text-align: left; color: var(--text); font-weight: 700; }
.endbadge { position: absolute; translate: -100% -50%; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.endbadge.up { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 26px rgba(231, 166, 37, .45); }
.endbadge.dn { border: 1px solid var(--warn); color: var(--warn); background: var(--base); }
.tl { display: none; }
.wait { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; max-width: 900px; margin: 90px auto 0; }
.wait h3 { font-size: 34px; line-height: 1.15; margin-bottom: 16px; }
.wait h3 span { color: var(--warn); }
.receipt-wrap { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); justify-self: center; }
.receipt { position: relative; width: 320px; padding: 24px 22px 22px; background: var(--paper); color: var(--paper-ink); font: 13px/1.6 var(--f-mono); rotate: 1.8deg; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 12px 8px repeat-x, linear-gradient(-135deg, var(--paper) 50%, transparent 50%) 0 0 / 12px 8px repeat-x; }
.receipt .rh { text-align: center; font-weight: 700; letter-spacing: .12em; }
.receipt .rs { text-align: center; font-size: 11px; color: #7a7262; margin-bottom: 14px; }
.receipt .row { display: flex; align-items: baseline; gap: 6px; }
.receipt .row::before { content: ""; order: 2; flex: 1; border-bottom: 1px dotted currentColor; opacity: .45; }
.receipt .row span:last-child { order: 3; font-weight: 700; }
.receipt .tot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(29, 27, 22, .4); font-weight: 700; }
.receipt .stamp { position: absolute; left: 50%; top: 62%; translate: -50% -50%; font-size: 15px; rotate: -12deg; }
.receipt .rfoot { margin-top: 14px; font-size: 10.5px; line-height: 1.4; color: #7a7262; }
.bridge { margin-top: 80px; text-align: center; }
.bridge small { display: block; color: var(--muted); font-size: 15px; }
.bridge a { display: inline-block; margin-top: 4px; color: var(--accent); font-size: 26px; font-weight: 900; text-decoration: none; }
.bridge .chev { display: block; margin: 6px auto 0; width: 22px; color: var(--accent); }

/* ---------- 8. reveal ---------- */
.reveal-h { font-size: 56px; line-height: 1.05; }
.callback { margin: 12px 0 0; color: var(--text); font-size: 19px; font-weight: 700; }
.def { max-width: 680px; margin: 22px auto 0; font-size: 18px; }
.isnot { margin: 34px auto 0; text-align: center; }
.isnot > span { display: block; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.slot { position: relative; display: inline-block; min-height: 1.6em; font-size: 23px; font-weight: 900; color: var(--text); }
.slot .it { display: inline-flex; align-items: center; gap: 10px; }
.slot .it svg { width: 18px; height: 18px; flex: none; }
.slot .no { color: #8c96ad; } .slot .no svg { color: var(--warn); }
.slot .yes svg { color: var(--accent); }
.slot .no { display: none; }
html.js .slot .it { display: none; }
html.js .slot .it.on { display: inline-flex; animation: slotin .35s ease; }
@keyframes slotin { from { opacity: 0; translate: 0 10px; } }
.pack-show { position: relative; max-width: 760px; margin: 50px auto 0; padding: 40px 30px 30px; border-radius: 22px; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(231, 166, 37, .2), transparent 70%), var(--surface); border: 1px solid var(--line); }
.pack-show .pill { position: absolute; top: -15px; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--base); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pack-show img { width: 560px; }
.pack-show .cap { margin: 6px 0 0; font: italic 20px/1.3 var(--f-hand); color: var(--accent); }
.built { margin-top: 90px; }
.built .small { display: block; text-align: center; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.built h3 { margin-top: 8px; text-align: center; font-size: 30px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.card .ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(231, 166, 37, .12); color: var(--accent); margin-bottom: 16px; }
.card .ic svg { width: 24px; height: 24px; }
.card h4 { margin: 0 0 6px; color: var(--text); font-size: 19px; font-weight: 900; }
.card p { margin: 0; font-size: 15.5px; }

/* ---------- 9. mechanism ---------- */
.vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; }
.vs-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.vs-card.old { opacity: .9; background: #10172d; }
.vs-card .vh { padding: 18px 24px; border-bottom: 1px solid var(--line); }
.vs-card .vh h3 { font-size: 19px; }
.vs-card .vh p { margin: 2px 0 0; font-size: 14px; }
.vs-card.new .vh { background: var(--accent); }
.vs-card.new .vh h3, .vs-card.new .vh p { color: var(--accent-ink); }
.steps { position: relative; margin: 0; padding: 22px 24px 8px 52px; list-style: none; }
.steps::before { content: ""; position: absolute; left: 31px; top: 34px; bottom: 34px; border-left: 2px dotted rgba(255, 255, 255, .22); }
.vs-card.new .steps::before { border-left: 2px solid var(--accent); }
.steps li { position: relative; margin-bottom: 18px; font-size: 14.5px; line-height: 1.45; }
.steps li::before { content: ""; position: absolute; left: -27px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #5f6a85; background: var(--base); }
.vs-card.new .steps li::before { border-color: var(--accent); background: var(--accent); }
.steps b { display: block; font-size: 15.5px; }
.vs-card .end { margin: 0 24px 22px; }
.oktag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(231, 166, 37, .14); color: var(--accent); font-size: 13px; font-weight: 700; }
.oktag svg, .xtag svg { width: 12px; height: 12px; }
.vsb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--base); border: 1px solid var(--line); color: var(--text); font-weight: 900; font-size: 14px; z-index: 2; }
.shipped { margin-top: 70px; text-align: center; }
.shipped h3 { font-size: 26px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 860px; margin: 26px auto 0; }
.stat { padding: 24px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.stat strong { display: block; color: var(--accent); font-size: 38px; line-height: 1.1; font-weight: 900; }
.stat span { display: block; margin-top: 6px; font-size: 14px; }

/* ---------- 10. outcomes bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bx { grid-column: span 2; display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.bx.w3 { grid-column: span 3; }
.bx h3 { font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.bx p { font-size: 15px; margin: 0 0 18px; }
.bx .viz { margin-top: auto; }
.meters { display: grid; gap: 9px; }
.meter { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.meter i { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--c, var(--accent)); }
.meter.bef { color: var(--warn); } .meter.bef i::after { --c: var(--warn); }
.meter.aft { color: var(--accent); }
.bignum { display: flex; align-items: baseline; gap: 10px; }
.bignum strong { color: var(--accent); font-size: 64px; line-height: 1; font-weight: 900; }
.bignum span { font-size: 14px; line-height: 1.35; }
.swap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 20px; font-weight: 900; }
.swap s { color: var(--warn); }
.swap svg { width: 20px; height: 20px; color: var(--muted); }
.swap span:last-child { color: var(--accent); }
.fmt { display: flex; flex-wrap: wrap; gap: 8px; }
.fmt span { padding: 5px 11px; border: 1px solid rgba(231, 166, 37, .4); border-radius: 8px; color: var(--accent); font: 700 12px/1.2 var(--f-mono); }
.also { margin-top: 56px; text-align: center; }
.also h3 { font-size: 22px; margin-bottom: 18px; }
.tickcloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.tickcloud li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; color: #cdd3e0; }
.tickcloud svg { width: 13px; height: 13px; color: var(--accent); }

/* ---------- 11. modules ---------- */
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1000px; margin: 0 auto; }
.tracks { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.tracks .th { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.tracks .th span:last-child { color: #7f89a0; letter-spacing: .04em; text-transform: none; font-weight: 700; }
.trk { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.trk:last-child { border-bottom: 0; }
.trk .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(231, 166, 37, .5); color: var(--accent); font-weight: 900; font-size: 14px; }
.trk.on { background: rgba(231, 166, 37, .08); }
.trk.on .n { background: var(--accent); color: var(--accent-ink); }
.trk b { display: block; font-size: 15px; }
.trk small { font-size: 12.5px; color: #8c96ad; }
.trk .len { font: 700 13px/1 var(--f-mono); color: var(--muted); }
.trk.on .len { color: var(--accent); }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1000px; margin: 60px auto 0; padding: 0; list-style: none; counter-reset: f; }
.flow li { position: relative; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 14px; line-height: 1.45; counter-increment: f; }
.flow li::before { content: counter(f); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: rgba(231, 166, 37, .14); color: var(--accent); font-weight: 900; font-size: 13px; }
.flow b { display: block; font-size: 15px; margin-bottom: 2px; }
.flow-h { margin: 60px 0 0; text-align: center; font-size: 22px; }
.flow-h + .flow { margin-top: 22px; }
.shelf { position: relative; display: flex; justify-content: center; gap: 10px; padding: 26px 20px 0; }
.shelf .bk { width: 54px; border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; justify-content: center; padding: 10px 0; writing-mode: vertical-rl; rotate: 180deg; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .85); box-shadow: inset -6px 0 0 rgba(0, 0, 0, .18); }
.shelf::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 10px; border-radius: 3px; background: #2b3a5c; }
.shelf-wrap { position: relative; padding: 10px 10px 50px; }
.shelf-wrap .stamp { position: absolute; right: 10%; top: 40%; font-size: 14px; }
.inchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.inchips span { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; color: #cdd3e0; }
.ticks { margin: 0 0 18px; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16px; }
.ticks li svg { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; color: var(--accent); }
.accent-line { color: var(--accent); font-weight: 900; font-size: 18px; }

/* ---------- 12. three steps + offer banner ---------- */
.three { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1000px; margin: 0 auto; text-align: center; }
.three::before { content: ""; position: absolute; top: 46px; left: 18%; right: 18%; border-top: 2px dashed rgba(231, 166, 37, .35); }
.three .num { position: relative; display: inline-block; padding: 0 16px; background: var(--base-2); color: transparent; -webkit-text-stroke: 2px var(--accent); font-size: 92px; line-height: 1; font-weight: 900; }
.tchip { display: inline-block; margin: 14px 0 10px; padding: 4px 12px; border-radius: 999px; background: rgba(231, 166, 37, .14); color: var(--accent); font-size: 12.5px; font-weight: 900; }
.three h3 { font-size: 21px; margin-bottom: 8px; }
.three p { font-size: 15.5px; }
.banner { position: relative; display: grid; grid-template-columns: 1fr 260px; gap: 30px; align-items: center; max-width: 1000px; margin: 110px auto 0; padding: 42px 48px; border-radius: 26px; background: linear-gradient(135deg, #f2b53a, var(--accent) 60%, #d99512); color: var(--accent-ink); box-shadow: 0 30px 80px rgba(231, 166, 37, .25); }
.banner h3 { color: var(--accent-ink); font-size: 34px; line-height: 1.12; }
.banner p { margin: 10px 0 22px; font-size: 17px; color: #3a2b05; }
.banner .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 14px; font-weight: 700; color: #3a2b05; }
.banner .meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.banner .pack { margin: -110px 0 -20px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); rotate: 3deg; }
.banner s { opacity: .7; }

/* ---------- 13. wall of love ---------- */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; height: 760px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask: linear-gradient(transparent, #000 10%, #000 88%, transparent); }
.wcol-in { display: flex; flex-direction: column; gap: 18px; animation: up 80s linear infinite; }
.wcol:nth-child(2) .wcol-in { animation-duration: 64s; animation-direction: reverse; }
.wcol:nth-child(3) .wcol-in { animation-duration: 92s; }
.wall:hover .wcol-in { animation-play-state: paused; }
@keyframes up { to { translate: 0 -50%; } }
.tm { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.tm p { font-size: 15px; line-height: 1.6; color: #d3d8e4; }
.tm .who { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.tm .who img, .tm .who .ini { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.tm .who .ini { display: grid; place-items: center; background: var(--navy); color: var(--accent); font-weight: 900; font-size: 15px; }
.tm .who span { font-size: 13.5px; line-height: 1.35; }
.tm .who b { display: block; font-size: 15px; }
.experts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; margin: 70px auto 0; }
.ex { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(23, 54, 93, .5), var(--surface)); }
.ex blockquote { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: #d3d8e4; }
.ex blockquote p { margin: 0 0 .6em; }
.ex .who { display: flex; align-items: center; gap: 12px; }
.ex .who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ex .who span { font-size: 13.5px; line-height: 1.35; }
.ex .who b { display: block; font-size: 15.5px; }
.ex-h { margin: 70px 0 0; text-align: center; font-size: 26px; }
.ex-h + .experts { margin-top: 26px; }

/* ---------- 15. case file ---------- */
.dossier-wrap { position: relative; max-width: 660px; margin: 0 auto; padding-top: 30px; }
.dossier { position: relative; padding: 36px 40px 30px; border-radius: 4px 12px 12px 12px; rotate: -.8deg; font-size: 16px; line-height: 1.6; }
.dossier .tab { position: absolute; top: -28px; left: 0; padding: 6px 18px; border-radius: 8px 8px 0 0; background: var(--paper-2); font: 700 12px/1.4 var(--f-mono); letter-spacing: .1em; }
.dossier .clip { position: absolute; top: -18px; right: 46px; width: 18px; height: 56px; border: 3px solid #9aa3b5; border-radius: 10px; }
.dossier .beat { margin-bottom: 16px; }
.dossier .beat code { display: block; margin-bottom: 2px; font: 700 12.5px/1.4 var(--f-mono); color: #9a6a00; }
.dossier .chips { justify-content: flex-start; margin-top: 18px; }
.dossier .chips span { padding: 4px 11px; border: 1.5px solid var(--paper-ink); border-radius: 999px; font: 700 12.5px/1.4 var(--f-mono); }
.dossier .filed { margin-top: 18px; font-size: 13px; color: #6b6455; }
.dossier .stamp { position: absolute; right: 26px; bottom: 26px; color: #2f7a3a; font-size: 14px; }

/* ---------- 17. routes table ---------- */
.tbl-wrap { max-width: 1000px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.tbl th, .tbl td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { padding-top: 22px; color: var(--text); font-size: 16px; }
.tbl thead th small { display: block; color: #7f89a0; font-weight: 400; font-size: 13px; }
.tbl th[scope=row] { width: 26%; color: var(--text); font-weight: 700; }
.tbl .us { background: rgba(231, 166, 37, .07); border-left: 1px solid rgba(231, 166, 37, .35); border-right: 1px solid rgba(231, 166, 37, .35); }
.tbl thead .us { position: relative; }
.tbl .best { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tbl .cost { color: var(--text); font-size: 20px; font-weight: 900; }
.tbl .us .cost { color: var(--accent); }
.st { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); }
.st svg { width: 18px; height: 18px; flex: none; }
.st.y svg { color: var(--accent); } .st.p svg { color: #c9b07a; } .st.n { color: #8c96ad; } .st.n svg { color: var(--warn); }
.tbl td small { display: block; margin-top: 3px; color: #8c96ad; font-size: 12.5px; line-height: 1.4; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl .verdict td { font-size: 13.5px; }
.legend { display: flex; justify-content: center; gap: 20px; margin-top: 18px; font-size: 13px; }
.swipe { display: none; }

/* ---------- 18. offer stack ---------- */
.core { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.crow { display: grid; grid-template-columns: 60px 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.crow .no { color: transparent; -webkit-text-stroke: 1.5px var(--accent); font-size: 34px; font-weight: 900; }
.crow h3 { font-size: 18px; }
.crow p { margin: 2px 0 0; font-size: 14.5px; }
.vpill { padding: 5px 12px; border-radius: 999px; background: rgba(231, 166, 37, .14); color: var(--accent); font-size: 13.5px; font-weight: 900; white-space: nowrap; }
.plus { margin: 34px 0 16px; text-align: center; }
.plus span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%; border: 1px solid var(--line); color: var(--accent); font-size: 20px; font-weight: 900; }
.plus h3 { font-size: 24px; }
.bonuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.bonus { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.bonus img { display: block; width: 150px; margin: 0 auto 14px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.bonus .lab { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.bonus h3 { margin: 4px 0 6px; font-size: 18px; line-height: 1.25; }
.bonus p { font-size: 14.5px; margin-bottom: 14px; }
.bonus .vpill { align-self: flex-start; margin-top: auto; }
.math { margin: 70px 0 0; text-align: center; }
.math small { display: block; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.math h3 { margin-top: 8px; font-size: 32px; }
.math p { margin: 8px 0 0; }
.math .chev { display: block; width: 22px; margin: 14px auto 0; color: var(--accent); }
.pcard { position: relative; max-width: 470px; margin: 100px auto 0; padding: 140px 34px 32px; border: 1px solid rgba(231, 166, 37, .35); border-radius: 26px; text-align: center; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(231, 166, 37, .16), transparent 70%), var(--surface); box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 70px rgba(231, 166, 37, .12); }
.pcard .pack { position: absolute; top: -70px; left: 50%; translate: -50% 0; width: 270px; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .5)); }
.pcard .spec { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pcard .tv { margin: 0; font-size: 15px; }
.pcard .tv s { color: var(--warn); font-weight: 700; }
.pcard .today { margin: 6px 0 0; color: var(--text); font-weight: 900; }
.pcard .amt { margin: 0; color: var(--accent); font-size: 84px; line-height: 1; font-weight: 900; letter-spacing: -.02em; }
.pcard .terms { margin: 10px 0 22px; font-size: 14.5px; }
.pcard .btn { display: flex; justify-content: space-between; width: 100%; }
.pcard .fine { margin: 16px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.pcard .fine svg { width: 14px; height: 14px; color: var(--accent); vertical-align: -2px; margin-right: 5px; }

/* ---------- 19. guarantee certificate ---------- */
.cert { max-width: 640px; margin: 0 auto; padding: 12px; border-radius: 6px; rotate: -.6deg; }
.cert-in { position: relative; border: 2px solid var(--paper-ink); outline: 1px solid var(--paper-ink); outline-offset: -7px; padding: 46px 50px 40px; text-align: center; }
.cert .ctop { font: 700 11px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: #7a7262; }
.cert h3 { margin: 12px 0 14px; font: italic 700 32px/1.15 var(--f-hand); color: var(--paper-ink); }
.cert p { font-size: 16px; color: #3c372c; }
.cert ul { display: inline-grid; gap: 6px; margin: 4px 0 22px; padding: 0; list-style: none; text-align: left; font-size: 15px; }
.cert ul svg { width: 15px; height: 15px; color: #9a6a00; vertical-align: -2px; margin-right: 8px; }
.cert .sig { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; text-align: left; }
.cert .sig img { display: block; width: 170px; mix-blend-mode: multiply; }
.cert .sig small { display: block; font-size: 12.5px; color: #6b6455; border-top: 1px solid #b9b09c; padding-top: 4px; }
.seal { flex: none; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; rotate: -10deg; text-align: center; background: radial-gradient(circle at 35% 30%, #f2c35a, #b9800f); color: var(--accent-ink); box-shadow: 0 0 0 4px rgba(185, 128, 15, .3), 0 8px 18px rgba(0, 0, 0, .25); }
.seal b { display: block; color: var(--accent-ink); font-size: 34px; line-height: 1; }
.seal span { font-size: 11px; font-weight: 900; letter-spacing: .18em; }

/* ---------- 20. FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; color: var(--text); font-weight: 700; font-size: 16.5px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(231, 166, 37, .14); color: var(--accent); font-size: 20px; font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; background: var(--accent); color: var(--accent-ink); }
.faq details[open] { border-color: rgba(231, 166, 37, .35); }
.faq .a { padding: 0 22px 18px; font-size: 15.5px; }
.faq .a p:last-child { margin: 0; }
.support { margin-top: 24px; text-align: center; font-size: 15px; }

/* ---------- 22. close ---------- */
.close { padding: 120px 0 110px; text-align: center; background: radial-gradient(ellipse 55% 60% at 50% 40%, rgba(231, 166, 37, .14), transparent 70%), var(--base); }
.close h2 { font-size: 56px; line-height: 1.08; }
.close h2 span { display: block; color: var(--accent); }
.close .need { max-width: 640px; margin: 26px auto 0; font-size: 19px; }
.close .recap { max-width: 640px; margin: 14px auto 32px; font-size: 15.5px; }
.close .last { margin: 26px 0 0; color: var(--text); font-size: 17px; }

/* ---------- 23. footer ---------- */
.foot { padding: 46px 0 40px; border-top: 1px solid var(--line); background: #080c18; font-size: 13.5px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 30px; align-items: center; }
.foot img { width: 210px; display: block; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a { color: #a6b0c5; text-decoration: none; }
.foot nav a:hover { color: var(--accent); }
.foot .cb { margin: 24px 0 0; color: #7f89a0; font-size: 12.5px; line-height: 1.6; }
.foot .copy { margin: 10px 0 0; color: #7f89a0; }

/* ---------- motion ---------- */
html.js .fx { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; }
html.js .fx.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-in, .drift-in, .wcol-in { animation: none !important; }
  .ticker-in, .drift-in { flex-wrap: wrap; width: auto; justify-content: center; }
  .wall { height: auto; -webkit-mask: none; mask: none; }
  [aria-hidden="true"].dup { display: none !important; }
  html.js .fx { opacity: 1; translate: none; transition: none; }
  html.js .slot .it.on { animation: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .top .btn { margin-left: auto; }
  .prob, .wait, .mod-grid { grid-template-columns: 1fr; gap: 40px; }
  .alts, .cards3, .bonuses { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .alt:nth-child(n) { rotate: 0deg; translate: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bx, .bx.w3 { grid-column: span 1; }
  .bx:last-child { grid-column: span 2; }
  .flow { grid-template-columns: 1fr 1fr; }
  .experts { grid-template-columns: 1fr; }
  .wall { grid-template-columns: 1fr 1fr; }
  .wcol:nth-child(3) { display: none; }
  .banner { grid-template-columns: 1fr; text-align: center; padding: 120px 30px 40px; }
  .banner .pack { position: absolute; top: -70px; left: 50%; translate: -50% 0; width: 240px; margin: 0; }
  .banner .meta { justify-content: center; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .wrap, .col { padding: 0 16px; }
  .sec { padding: 76px 0; }
  .top-in { height: 58px; gap: 12px; }
  .top .logo img { width: 150px; }
  .top .btn { font-size: 14px; padding: 4px 4px 4px 14px; }
  .h2 { font-size: 30px; }
  .lead { font-size: 16.5px; }
  .hero { padding: 50px 0 74px; }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 17px; }
  .stages { font-size: 11px; letter-spacing: .12em; }
  .stages i { margin: 0 4px; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: space-between; }
  .btn-ghost { justify-content: center; }
  .player { padding: 5px; border-radius: 14px; }
  .vposter .vt { left: 6%; max-width: 62%; }
  .vposter .vt small { font-size: 10px; margin-bottom: 4px; }
  .vposter .vt strong { font-size: 17px; }
  .vposter .play { margin-top: 10px; padding: 5px 12px 5px 5px; font-size: 13px; }
  .vposter .play span { width: 28px; height: 28px; }
  .ticker li { font-size: 13px; padding: 0 18px; }
  .ticker li::after { margin-left: 36px; }
  .note { width: calc(50% - 8px); min-height: 0; }
  .notes { gap: 18px 14px; }
  .note h3 { font-size: 21px; padding: 12px 10px 4px; }
  .note p { font-size: 13px; padding: 0 10px 12px; }
  .note .strip { font-size: 9.5px; padding: 6px 10px; }
  .split .a, .split .b { font-size: 14px; }
  .split .a { flex-basis: 26%; } .split-lab span:first-child { flex-basis: 26%; }
  .chart { display: none; }
  .routes { padding: 24px 20px; }
  .tl { display: grid; gap: 26px; }
  .tl h4 { margin: 0 0 12px; font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .tl .up h4 { color: var(--accent); } .tl .dn h4 { color: var(--warn); }
  .tl ol { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; }
  .tl ol::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; border-left: 2px solid var(--accent); }
  .tl .dn ol::before { border-left: 2px dashed var(--warn); }
  .tl li { position: relative; margin-bottom: 12px; font-size: 14.5px; }
  .tl li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  .tl .dn li::before { background: var(--base); border: 2px solid var(--warn); width: 8px; height: 8px; }
  .tl li b { color: var(--text); }
  .receipt { width: 290px; }
  .wait h3 { font-size: 28px; }
  .reveal-h { font-size: 40px; }
  .slot { font-size: 19px; }
  .built h3 { font-size: 24px; }
  .vs { grid-template-columns: 1fr; gap: 0; }
  .vsb { position: relative; left: auto; top: auto; translate: none; margin: -14px auto; }
  .stats { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bx:last-child { grid-column: span 1; }
  .flow { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr; gap: 34px; }
  .three::before { display: none; }
  .three .num { font-size: 72px; }
  .banner { padding: 110px 22px 32px; }
  .banner h3 { font-size: 26px; }
  .banner .pack { width: 210px; top: -60px; }
  .wall { grid-template-columns: 1fr; height: 640px; }
  .wcol:nth-child(2) { display: none; }
  .dossier { padding: 32px 22px 80px; }
  .cert-in { padding: 34px 20px 28px; }
  .cert h3 { font-size: 25px; }
  .cert .sig { flex-direction: column; align-items: center; text-align: center; }
  .swipe { display: block; margin: 0 0 10px; text-align: center; font-size: 13px; color: #8c96ad; }
  .tbl th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 140px; }
  .crow { grid-template-columns: 40px 1fr; }
  .crow .vpill { grid-column: 2; justify-self: start; }
  .crow .no { font-size: 26px; }
  .math h3 { font-size: 25px; }
  .pcard { padding: 124px 20px 26px; }
  .pcard .pack { width: 230px; top: -56px; }
  .pcard .amt { font-size: 68px; }
  .close { padding: 86px 0 80px; }
  .close h2 { font-size: 36px; }
  .close .need { font-size: 17px; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

/* ================= MindTracks Creator additions ================= */
.top .logo img { width: 150px; }

/* hero: the Track Studio screen in place of the sales video */
.player .frame.studio-frame { aspect-ratio: auto; background: #0d1428; }
.studio { text-align: left; color: var(--text); }
.studio .sbar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.studio .sbar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3a5c; }
.studio .sbar b { margin-left: 10px; color: var(--text); }
.studio .sbar span { margin-left: auto; color: var(--accent); font-weight: 700; }
.studio .sbody { display: grid; grid-template-columns: 1.2fr 1fr; }
.studio .script { padding: 20px 24px; border-right: 1px solid var(--line); }
.studio .script small { display: block; margin-bottom: 10px; color: #8c96ad; font-size: 16px; font-weight: 700; }
.studio .script p { margin: 0 0 10px; padding: 4px 0 4px 15px; border-left: 3px solid transparent; font: italic 18px/1.55 var(--f-hand); color: #8c96ad; }
.studio .script p.on { border-left-color: var(--accent); background: rgba(231, 166, 37, .08); color: var(--text); }
.studio .set { display: grid; gap: 10px; align-content: start; padding: 20px; }
.studio .set div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 16px; }
.studio .set span { color: #8c96ad; }
.studio .set b { color: var(--text); text-align: right; }
.studio .set .g b { color: var(--accent); }
.studio .sfoot { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 46px; min-width: 0; }
.wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(231, 166, 37, .3); }
.wave i.p { background: var(--accent); }
.time { font: 700 16px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.sbtn { padding: 9px 18px; border-radius: 999px; font-size: 16px; font-weight: 900; white-space: nowrap; }
.sbtn.ghost { border: 1px solid rgba(255, 255, 255, .22); color: var(--text); }
.sbtn.go { background: var(--accent); color: var(--accent-ink); }

/* example covers (drift rows, banner fan) */
.cv { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 210px; aspect-ratio: 210 / 272; padding: 16px 15px; border-radius: 6px; background: var(--bg, linear-gradient(160deg, #17365d, #0b1020 75%)); color: var(--ink, var(--text)); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.cv::before { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 14px, var(--ring, rgba(231, 166, 37, .22)) 14px 16px); pointer-events: none; }
.cv > * { position: relative; }
.cv .br { font-size: 16px; line-height: 1.3; font-weight: 700; opacity: .9; }
.cv .tt { font: italic 700 25px/1.12 var(--f-hand); color: var(--tc, var(--accent)); }
.cv .kd { font-size: 16px; font-weight: 700; }
.cv.t2 { --bg: var(--paper); --ink: var(--paper-ink); --tc: #17365d; --ring: rgba(23, 54, 93, .14); }
.cv.t3 { --bg: #f3d27e; --ink: #3b2c00; --tc: #3b2c00; --ring: rgba(90, 67, 0, .16); }
.cv.t4 { --bg: #f2b0a4; --ink: #4a160f; --tc: #4a160f; --ring: rgba(95, 29, 20, .14); }
.cv.t5 { --bg: #b9cfe6; --ink: #13304f; --tc: #13304f; --ring: rgba(19, 48, 79, .15); }
.cv.t6 { --bg: linear-gradient(160deg, #f2b53a, #d99512); --ink: var(--accent-ink); --tc: var(--accent-ink); --ring: rgba(27, 19, 0, .14); }
.pg { width: 210px; }

/* creator dashboard in the reveal box */
.dash { max-width: 620px; margin: 0 auto; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--base-2); overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.dash .dh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 18px; font-weight: 900; }
.dash .dh span { padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 16px; }
.dash .row { display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dash .row:last-child { border-bottom: 0; }
.dash .mini { width: 50px; height: 50px; border-radius: 6px; background: var(--bg, linear-gradient(160deg, #17365d, #0b1020)); border: 1px solid var(--line); }
.dash .mini.t2 { --bg: var(--paper); } .dash .mini.t3 { --bg: #f3d27e; } .dash .mini.t4 { --bg: #f2b0a4; } .dash .mini.t5 { --bg: #b9cfe6; }
.dash .row b { display: block; color: var(--text); font-size: 17px; }
.dash .row small { color: #8c96ad; font-size: 16px; }
.dash .tagl { padding: 5px 12px; border-radius: 999px; background: rgba(231, 166, 37, .14); color: var(--accent); font-size: 16px; font-weight: 700; white-space: nowrap; }
.pack-show .dash + .cap { margin-top: 18px; }

/* bento pictures */
.linkbox { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--base-2); }
.linkbox code { display: block; color: var(--accent); font: 700 16px/1.4 var(--f-mono); overflow-wrap: anywhere; }
.streak { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 8px; }
.streak i { width: 15px; height: 15px; border-radius: 4px; background: var(--accent); }
.streak i.o { background: rgba(255, 255, 255, .08); }
.linkbox small { color: var(--text); font-size: 16px; font-weight: 700; }
.bump { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px dashed var(--warn); border-radius: 12px; background: rgba(239, 106, 90, .06); }
.bump .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); }
.bump .box svg { width: 15px; height: 15px; }
.bump p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.45; }
.bump p b { color: var(--accent); }

/* banner: fanned covers instead of a product photo */
.fan { position: relative; height: 250px; margin: -100px 0 -20px; }
.fan .cv { position: absolute; top: 0; left: 50%; width: 160px; padding: 12px; }
.fan .cv .tt { font-size: 21px; }
.fan .cv:nth-child(1) { translate: -95% 18px; rotate: -9deg; }
.fan .cv:nth-child(2) { translate: -50% 0; rotate: 0deg; z-index: 2; }
.fan .cv:nth-child(3) { translate: -5% 18px; rotate: 9deg; }
.pcard { padding-top: 40px; }
.bonus .bico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 14px; border-radius: 16px; background: rgba(231, 166, 37, .12); color: var(--accent); }
.bonus .bico svg { width: 30px; height: 30px; }

/* idea cards (no quotation marks: these are ideas, not reviews) */
.tm .role { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tm .role .ini { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--accent); }
.tm .role .ini svg { width: 20px; height: 20px; }
.tm .role b { color: var(--text); font-size: 18px; }
.tm p { margin: 0; }
.cert .sig .hand { display: block; font-size: 30px; color: var(--paper-ink); }

/* founding spot form */
.join { position: relative; max-width: 580px; margin: 44px auto 0; padding: 34px 32px; border: 1px solid rgba(231, 166, 37, .35); border-radius: 22px; text-align: left; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(231, 166, 37, .12), transparent 70%), var(--surface); box-shadow: 0 30px 90px rgba(0, 0, 0, .5); }
.join h3 { font-size: 28px; line-height: 1.2; margin-bottom: 10px; }
.join p { font-size: 18px; }
.join label { display: block; margin: 16px 0 6px; color: var(--text); font-size: 16px; font-weight: 700; }
.join input, .join select { width: 100%; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: var(--base); color: var(--text); font: 17px/1.3 var(--f-body); }
.join input:focus, .join select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join button.btn { width: 100%; margin-top: 24px; justify-content: space-between; border: 0; cursor: pointer; font-family: var(--f-body); }
.join .msg { margin: 0 0 6px; padding: 16px 18px; border-radius: 12px; background: rgba(231, 166, 37, .12); color: var(--text); }
.join .msg.err { background: rgba(239, 106, 90, .12); }
.join .after { margin: 14px 0 0; font-size: 16px; color: #a6b0c5; text-align: center; }

/* ================= readability floor: nothing a visitor reads under 16px; body copy 18px (17px on phones) ================= */
body { font-size: 18px; }
.eyebrow { font-size: 16px; letter-spacing: .1em; padding: 7px 16px; }
.lead, .kicker { font-size: 20px; }
.src, .under, .vnote, .legend, .swipe, .support { font-size: 16px; }
.nav a, .top .btn { font-size: 16px; }
.btn { font-size: 18px; }
.hero .sub { font-size: 21px; max-width: 760px; }
.stages { font-size: 16px; letter-spacing: .14em; }
.chip { font-size: 16px; }
.ticker li { font-size: 16px; }
.draft .bar, .draft .meta { font-size: 16px; }
.draft ol { font-size: 18px; }
.stamp, .draft-wrap .stamp { font-size: 16px; }
.plan-label { font-size: 16px; letter-spacing: .1em; }
.qs li { font-size: 17px; }
.alt .tell { font-size: 16px; }
.alt p, .card p, .bx p, .crow p, .bonus p, .three p, .tm p, .dossier, .faq .a, .ticks li, .steps li { font-size: 18px; line-height: 1.55; }
.xtag, .oktag, .vpill, .tchip, .bonus .lab, .math small, .built .small, .tracks .th, .best, .inchips span, .tickcloud li, .fmt span { font-size: 16px; }
.pg figcaption, .split-lab { font-size: 16px; }
.note { width: 262px; }
.note .strip { font-size: 16px; letter-spacing: .06em; }
.note p { font-size: 18px; line-height: 1.45; }
.ms { width: 190px; font-size: 16px; }
.ms b { font-size: 16px; letter-spacing: .08em; }
.endbadge { font-size: 16px; }
.receipt { width: 390px; font-size: 16px; }
.receipt .rs, .receipt .rfoot { font-size: 16px; }
.bridge small, .isnot > span { font-size: 16px; }
.callback { font-size: 21px; }
.def { font-size: 20px; }
.pack-show .pill { font-size: 16px; }
.card h4 { font-size: 21px; }
.vs-card .vh p, .vsb, .stat span, .bignum span { font-size: 16px; }
.steps b { font-size: 18px; }
.trk b { font-size: 17px; }
.trk small, .trk .len, .trk .n { font-size: 16px; }
.flow li { font-size: 17px; }
.flow b { font-size: 18px; }
.flow li::before { font-size: 16px; }
.banner p { font-size: 19px; }
.banner .meta, .tm .who span, .dossier .beat code, .dossier .chips span, .dossier .filed, .dossier .tab { font-size: 16px; }
.tbl { font-size: 17px; }
.tbl thead th small, .tbl td small, .tbl .verdict td { font-size: 16px; }
.pcard .tv, .pcard .terms, .pcard .fine, .pcard .spec { font-size: 16px; }
.cert .ctop, .cert .sig small, .seal span { font-size: 16px; }
.cert p { font-size: 18px; }
.cert ul { font-size: 17px; }
.faq summary { font-size: 18px; }
.close .recap, .close .last { font-size: 18px; }
.foot, .foot nav a, .foot .copy { font-size: 16px; }

@media (max-width: 980px) {
  .banner .fan { display: none; }
  .banner { padding: 42px 30px; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .top .logo img { width: 118px; }
  .top .btn { font-size: 16px; }
  .eyebrow { letter-spacing: .06em; }
  .lead, .kicker { font-size: 18px; }
  .hero .sub { font-size: 18px; }
  .stages { letter-spacing: .06em; }
  .stages i { margin: 0 3px; }
  .studio .sbody { grid-template-columns: 1fr; }
  .studio .script { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; }
  .studio .script p:not(.on), .studio .script small { display: none; }
  .studio .script p.on { margin: 0; }
  .studio .set { padding: 14px 16px; gap: 8px; }
  .studio .sbar span, .studio .sbar i { display: none; }
  .studio .sbar b { margin-left: 0; }
  .studio .sfoot { flex-wrap: wrap; gap: 10px 12px; }
  .wave { flex-basis: 100%; height: 38px; }
  .sbtn.go { margin-left: auto; }
  .alt p, .card p, .bx p, .crow p, .bonus p, .three p, .tm p, .dossier, .faq .a, .ticks li, .steps li { font-size: 17px; }
  .note { width: 100%; max-width: 360px; }
  .note h3 { font-size: 24px; padding: 14px 14px 6px; }
  .note p { font-size: 17px; padding: 0 14px 14px; }
  .note .strip { font-size: 16px; padding: 7px 14px; }
  .split .a, .split .b { font-size: 16px; }
  .tl h4 { font-size: 16px; }
  .tl li { font-size: 17px; }
  .receipt { width: 100%; max-width: 330px; }
  .receipt-wrap { justify-self: stretch; display: flex; justify-content: center; }
  .def { font-size: 18px; }
  .dash .row { grid-template-columns: 44px 1fr; }
  .dash .mini { width: 44px; height: 44px; }
  .dash .tagl { grid-column: 2; justify-self: start; white-space: normal; }
  .slot { font-size: 20px; }
  .cv, .pg { width: 180px; }
  .cv .tt { font-size: 22px; }
  .join { padding: 26px 20px; }
  .join h3 { font-size: 24px; }
  .join p { font-size: 17px; }
  .tbl { font-size: 16px; }
  .close h2 { font-size: 36px; }
}

/* fixes after the first readability check */
.draft ol li.blank { color: #6f6858; }
.draft .meta { color: #6b6455; }
.src { font-size: 18px; }
.shelf .bk { width: 60px; font-size: 16px; }
@media (max-width: 700px) { .src { font-size: 17px; } }
.mod-grid > * { min-width: 0; }
@media (max-width: 700px) {
  .shelf { gap: 8px; padding: 26px 0 0; }
  .shelf .bk { width: 50px; }
  .mod-grid .h2 { font-size: 30px !important; }
}