/* Landing (paid social). Mobile first; desktop gets a two-column hero. */
.hd { position: sticky; top: 0; z-index: 30; background: rgba(14,15,18,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(42,47,55,0.6); }
.hd .wrap { display: flex; align-items: center; gap: 24px; height: 56px; }
.wordmark { font: 700 19px var(--sans); letter-spacing: -0.03em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.wordmark::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.hd nav { display: none; gap: 22px; font-size: 14px; color: var(--soft); } .hd nav a { text-decoration: none; } .hd nav a:hover { color: var(--text); }
.hd-in { margin-left: auto; font-size: 14px; color: var(--soft); text-decoration: none; }
@media (min-width: 860px) { .hd nav { display: flex; } }

/* hero */
.hero { display: grid; gap: 18px; padding-top: 22px; padding-bottom: 30px; }
@media (min-width: 980px) { .hero { grid-template-columns: 1fr 1fr; grid-template-areas: 'copy stage' 'probe stage'; column-gap: 44px; padding-top: 56px; align-items: start; } .hero-copy { grid-area: copy; } .stage { grid-area: stage; position: sticky; top: 76px; } .probe { grid-area: probe; } }
.hero h1 { font: 700 clamp(30px, 7.6vw, 52px)/1.06 var(--sans); letter-spacing: -0.035em; margin: 12px 0 8px; text-wrap: balance; }
.ask { font: 600 clamp(20px, 4.6vw, 26px)/1.2 var(--sans); color: var(--staff); letter-spacing: -0.02em; }
.stage { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); }
.callbar { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.callbar .who { display: inline-flex; align-items: center; gap: 6px; } .callbar small { color: var(--faint); font-size: 11px; }
.callbar .dot { width: 9px; height: 9px; border-radius: 50%; } .dot.m { background: #d1478f; } .dot.a { background: #4f6bff; }
.callbar .who.talk .dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.12); animation: rec 0.9s ease-in-out infinite; }
.callbar .tc { margin-left: auto; color: var(--red); font-size: 12px; }
.screen { position: relative; background: #fff; aspect-ratio: 16 / 9; }
.screen video { width: 100%; height: 100%; object-fit: cover; }
.unmute { position: absolute; right: 10px; bottom: 10px; border: 0; border-radius: 999px; padding: 7px 12px; font: 600 12px var(--sans); background: rgba(14,15,18,0.82); color: #fff; cursor: pointer; }
.cap { min-height: 104px; padding: 12px 14px 14px; font: 500 17px/1.42 var(--sans); }
.cap b { display: block; font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; }
.cap b.mei { color: #ff7ab8; } .cap b.arjun { color: #8fa2ff; }
.cap .w { opacity: 0.32; transition: opacity .18s; } .cap .w.on { opacity: 1; }

/* the probe */
.probe { display: grid; gap: 10px; }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; width: 100%; padding: 14px 14px; border-radius: 14px; border: 1px solid var(--line2);
  background: var(--card); color: var(--text); font: 500 16px/1.35 var(--sans); cursor: pointer; transition: border-color .15s, background .15s, opacity .2s; }
.opt:hover { border-color: var(--soft); }
.opt .k { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line2); display: grid; place-items: center; font: 600 13px var(--mono); color: var(--soft); }
.opts.done .opt { cursor: default; opacity: 0.55; } .opts.done .opt.pick { opacity: 1; border-color: var(--text); }
.opts.done .opt .lv { display: block; margin-top: 6px; } .opt .lv { display: none; }
.result { display: grid; gap: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; animation: up .35s ease both; }
@keyframes up { from { opacity: 0; transform: translateY(8px); } }
.verdict h3 { font: 700 21px/1.25 var(--sans); letter-spacing: -0.02em; margin: 6px 0 4px; } .verdict p { color: var(--soft); font-size: 16px; }
.answer-v { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.answer-v .screen { aspect-ratio: 16 / 9; } .answer-v .cap { min-height: 90px; }
.rungs { display: grid; gap: 6px; }
.rung { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 15px; }
.rung b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 3px; }
.rung.you { border-color: var(--text); } .rung.you::after { content: 'your pick'; grid-column: 2; font: 500 11px var(--mono); color: var(--faint); }
.gate { background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.gate h3 { font: 700 20px/1.25 var(--sans); letter-spacing: -0.02em; } .gate p { color: var(--soft); font-size: 15px; }
.gate form { display: grid; gap: 8px; }
.gate input { width: 100%; min-height: 50px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--text); padding: 0 14px; font: 400 17px var(--sans); }
.gate input:focus { outline: 2px solid var(--staff); outline-offset: 1px; }
.gate small { color: var(--faint); font-size: 12px; }
.gate .ok b { color: var(--staff); }

/* sections */
section h2 { font: 700 clamp(26px, 5.6vw, 40px)/1.1 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.what, .ladder-s, .ep, .made, .price, .faq { padding-top: 64px; }
.tiles { display: grid; gap: 12px; margin-top: 22px; } @media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.tile h3 { font: 600 19px/1.25 var(--sans); letter-spacing: -0.02em; } .tile p { color: var(--soft); font-size: 15px; }
.mini-call { margin-top: auto; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.mini-call img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
.mini-ladder { margin-top: auto; display: grid; gap: 5px; font-size: 14px; }
.mini-ladder div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--bg2); }
.mini-ladder div.on { outline: 1px solid rgba(255,176,32,0.5); } .mini-ladder b { font: 600 11px var(--mono); text-transform: uppercase; padding-top: 2px; }
.mini-chat { margin-top: auto; display: grid; gap: 6px; font-size: 14px; }
.mini-chat p { padding: 9px 11px; border-radius: 11px; max-width: 92%; } .mini-chat .mei { background: var(--bg2); } .mini-chat .you { background: rgba(108,149,255,0.16); justify-self: end; }
.mini-chat b { display: block; font: 600 10px var(--mono); color: #ff7ab8; text-transform: uppercase; }
.lead { color: var(--soft); max-width: 620px; margin-top: 10px; }
.ladder { display: grid; gap: 10px; margin-top: 20px; overflow-x: auto; grid-auto-flow: column; grid-auto-columns: min(86%, 360px); scroll-snap-type: x mandatory; padding-bottom: 8px; }
@media (min-width: 980px) { .ladder { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; } }
.lad { scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.lad h3 { font: 600 18px var(--sans); } .lad div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.lad div b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.ep-card { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (min-width: 900px) { .ep-card { grid-template-columns: 1.3fr 1fr; } }
.ep-board { position: relative; background: #fff; min-height: 220px; } .ep-board img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 70%; }
.hand { position: absolute; left: 12px; bottom: 10px; font: 400 18px var(--hand); color: #c0392b; transform: rotate(-2deg); }
.ep-info { padding: 18px; display: grid; gap: 10px; align-content: start; }
.ep-info h3 { font: 700 26px var(--sans); letter-spacing: -0.03em; } .src { color: var(--soft); font-size: 14px; } .src a { color: var(--soft); }
.chapters { list-style: none; display: grid; gap: 2px; font-size: 15px; margin: 4px 0 6px; }
.chapters li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.chapters time { font: 500 12px var(--mono); color: var(--faint); padding-top: 3px; } .chapters .dd { color: var(--staff); }
.roadmap { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg2); }
.roadmap summary { cursor: pointer; list-style: none; display: grid; gap: 2px; } .roadmap summary::-webkit-details-marker { display: none; }
.roadmap summary span { color: var(--soft); font-size: 14px; } .roadmap summary b::after { content: ' +'; color: var(--faint); }
.roadmap ol { list-style: none; display: grid; gap: 6px; margin-top: 12px; font-size: 15px; color: var(--soft); }
.roadmap li span { color: var(--faint); font: 500 12px var(--mono); margin-left: 6px; }
.made-grid { display: grid; gap: 14px; margin-top: 18px; } @media (min-width: 900px) { .made-grid { grid-template-columns: repeat(3, 1fr); } }
.made-grid p { color: var(--soft); font-size: 16px; } .made-grid b { color: var(--text); display: block; margin-bottom: 4px; }
.plans { display: grid; gap: 12px; margin-top: 20px; } @media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; max-width: 820px; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.plan.pro { border-color: var(--staff); box-shadow: 0 0 0 1px rgba(255,176,32,0.25), 0 30px 60px -30px rgba(255,176,32,0.25); }
.amt { font: 700 44px var(--sans); letter-spacing: -0.04em; } .amt small { font: 500 16px var(--sans); color: var(--soft); }
.plan > p { color: var(--soft); font-size: 15px; } .plan ul { list-style: none; display: grid; gap: 7px; margin: 6px 0 10px; font-size: 15px; }
.plan li::before { content: '✓  '; color: var(--staff); }
.monthly { text-align: center; color: var(--soft); font-size: 14px; }
.terms { color: var(--faint); font-size: 14px; margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--line); max-width: 760px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font: 600 18px var(--sans); position: relative; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 16px; color: var(--faint); font-size: 22px; } .faq details[open] summary::after { content: '–'; }
.faq p { color: var(--soft); padding: 0 0 18px; }
.ft { padding: 60px 20px 130px; display: grid; gap: 8px; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); margin-top: 60px; }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + var(--safe)); background: linear-gradient(to top, var(--bg) 70%, transparent);
  transform: translateY(110%); transition: transform .25s ease; }
.sticky.on { transform: none; } @media (min-width: 980px) { .sticky { display: none; } }
.result[hidden] { display: none; }
/* phones: crop into the part of the board being discussed instead of shrinking the whole board */
@media (max-width: 700px) { .hero .screen { aspect-ratio: 4 / 3; } .hero .screen video { object-position: 82% 55%; } }

.sub-h { color: var(--soft); font-size: 16px; margin-top: 8px; }
.disc { padding: 0 14px 12px; font: 500 12px var(--mono); color: var(--faint); }
.unmute { left: 10px; right: auto; top: 10px; bottom: auto; }
.cap .w { opacity: 0.6; } .cap .w.on { opacity: 1; }
@media (max-width: 700px) { .hero .screen { aspect-ratio: 1 / 1; } .hero .screen video { object-position: 78% 50%; transform: scale(1.35); transform-origin: 70% 50%; } }
.strip { padding-top: 48px; } .strip ol { list-style: none; display: grid; gap: 10px; counter-reset: s; }
@media (min-width: 900px) { .strip ol { grid-template-columns: repeat(3, 1fr); } }
.strip li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--soft); font-size: 16px; }
.strip li::before { content: '0' counter(s); display: block; font: 500 12px var(--mono); color: var(--faint); margin-bottom: 4px; } .strip b { color: var(--text); }
.ladder { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; } @media (min-width: 980px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
.made-p { color: var(--soft); max-width: 760px; margin-top: 10px; font-size: 17px; } .made-p b { color: var(--text); }
.avail { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 12px; color: var(--soft); font-size: 15px; } .avail b { color: var(--text); }
.plan li.beta { color: var(--faint); } .plan li.beta::before { content: '◷  '; color: var(--faint); }
.picked { font-size: 15px; color: var(--soft); } .picked b { color: var(--text); }
.more { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.more summary { cursor: pointer; font-weight: 600; list-style: none; } .more summary::-webkit-details-marker { display: none; } .more summary::after { content: ' +'; color: var(--faint); }
.more[open] summary::after { content: ' –'; } .more .rungs { margin-top: 10px; }

/* v5: category first */
.cat { color: var(--staff); }
.hero h1 { font-size: clamp(32px, 7.4vw, 56px); margin-top: 12px; }
.hero h1 em { font-style: normal; color: var(--soft); }
.sub-h { font-size: 17px; line-height: 1.5; max-width: 600px; }
.try { margin-top: 20px; border-left: 2px solid var(--red); padding: 2px 0 2px 14px; }
.try .hook { font: 700 clamp(20px, 4.8vw, 26px)/1.2 var(--sans); letter-spacing: -0.02em; margin: 8px 0 4px; }
.try .ask { font-size: clamp(18px, 4.2vw, 22px); }
.shift { padding-top: 56px; }
.cols2 { display: grid; gap: 12px; margin-top: 18px; } @media (min-width: 860px) { .cols2 { grid-template-columns: 1fr 1.3fr; } }
.col { border-radius: 16px; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); }
.col ul { list-style: none; display: grid; gap: 8px; margin: 10px 0; font-size: 16px; }
.col.old li { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(255,77,46,0.6); }
.col.new { border-color: rgba(255,176,32,0.45); } .col.new li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.col.new li small { font: 500 12px var(--mono); color: var(--faint); } .col.new li.live b::after { content: ' · watch now'; color: var(--staff); font: 500 12px var(--mono); }
.col p { color: var(--faint); font-size: 13px; }
.screen { overflow: hidden; }