/* Game Zone AI landing page (the customer-value redesign, step 4). Mobile first, the prototype's look: one promise,
   one button, the best price as the app shows it (live from /api/pulse, else a labeled example), three steps with
   small loops, Check any bet, the house's cut, pricing and straight answers.
   Motion plays once when a picture comes into view (tap it to see it again) and is off for reduced motion: every
   picture's resting state is its finished state. */

.home { --ink: #03140c; --text2: #c3ccd5; --muted: #8a95a1; --soft: #a9b4bf; --pink: #ff8a8a; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.home .g { color: var(--green); }
.home .c { color: var(--cyan); }
.home .r { color: var(--pink); }

/* ---- Entrances ------------------------------------------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.7s var(--ease) both; animation-delay: var(--d, 0ms); }

/* ---- Hero ------------------------------------------------------------------------------------------------------ */
.hero { position: relative; padding: 22px 0 8px; }
.hero::before {
  content: ""; position: absolute; inset: -80px 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 70% at 50% 0%, rgba(46, 242, 160, 0.16), rgba(5, 7, 10, 0) 65%);
}
.hero-grid { display: grid; gap: 30px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero h1 { font-size: clamp(46px, 14.6vw, 76px); line-height: 0.9; letter-spacing: 0.004em; text-wrap: balance; }
.hero h1 .now { color: var(--green); text-shadow: 0 0 28px rgba(46, 242, 160, 0.45); white-space: nowrap; }
.lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text2); max-width: 560px; text-wrap: pretty; }
.cta-row { display: flex; flex-direction: column; gap: 10px; }
.cta-row .btn { width: 100%; }
.arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.micro { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.live-proof { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); }
.live-proof b { color: var(--text); font-weight: 600; margin-right: 6px; }
.live-proof .dot { margin: 0 10px 1px 2px; vertical-align: middle; }
.hero-guard { display: none; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 600px; }

/* The phone: on a phone it's just the best-price card; from 960px it's the app's Tonight screen in a frame. */
.hero-stage { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone { width: 100%; max-width: 480px; }
.phone-screen { display: flex; flex-direction: column; gap: 14px; }
.ph-top, .ph-head, .ph-more { display: none; }
.stage-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ---- The best-price card (the app's hero card) ------------------------------------------------------------------ */
.best {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(46, 242, 160, 0.1), rgba(46, 242, 160, 0.02) 55%), #0b1014;
  border: 1px solid rgba(46, 242, 160, 0.35);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(46, 242, 160, 0.15);
}
.best-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.best-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tag-example { color: #05070a; background: var(--amber); }
.tag-live { color: var(--green); background: rgba(46, 242, 160, 0.12); border: 1px solid rgba(46, 242, 160, 0.35); }
.tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: breathe 2.4s ease-in-out 2; }
.tag-pricey { color: var(--pink); background: rgba(255, 93, 93, 0.14); letter-spacing: 0.02em; text-transform: none; font-size: 12.5px; font-weight: 600; }
.tag-pricey::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.best-bet { display: flex; align-items: center; gap: 12px; min-width: 0; }
.badges { display: flex; flex: none; }
.badge {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c, #1b222c); border: 2.5px solid var(--r, rgba(255, 255, 255, 0.22)); color: var(--i, #f3f6f8);
  font: 800 15px/1 var(--display); letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.badge + .badge { margin-left: -10px; }
.best-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.best-name b { font: 800 26px/1 var(--display); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.best-name i { font-style: normal; font-size: 13px; color: var(--soft); }
.best-nums { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.num { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.num-r { align-items: flex-end; text-align: right; }
.num i { font-style: normal; font-size: 12px; color: var(--muted); }
.num b { font: 900 clamp(36px, 11.2vw, 44px)/0.95 var(--display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.best-pays { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text2); }
.best-foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 13px; color: var(--soft); }
.best-foot b { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.chance { color: var(--cyan); }
.best-foot .chance b, .chance b { color: var(--cyan); font-weight: 700; }

/* The value meter: a typical bet on the left, fair where the red ends, this bet's dot out to its value. */
.meter { position: relative; height: 40px; }
.m-track { position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.m-cost { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fair); background: linear-gradient(90deg, rgba(255, 93, 93, 0.6), rgba(255, 93, 93, 0.1)); }
.m-fill { position: absolute; left: var(--fair); top: 0; bottom: 0; width: calc(var(--val) - var(--fair)); background: var(--green); }
.m-typ { position: absolute; left: var(--typ); top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pink); border: 2px solid #0b1014; }
.m-val { position: absolute; left: var(--val); top: 3px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--green); border: 3px solid #0b1014; box-shadow: 0 0 14px rgba(46, 242, 160, 0.8); }
.m-lbl { position: absolute; top: 24px; font-size: 12px; white-space: nowrap; color: var(--soft); }
.m-lbl-typ { left: 0; }
.m-lbl-typ b { color: var(--pink); font-weight: 600; }
.m-lbl-val { right: 0; color: var(--green); font-weight: 600; }
.meter.low .m-fill { display: none; } /* this bet is below fair (a live board's thin price never shows here) */
@keyframes meterDot { 0%, 20% { left: var(--fair); } 100% { left: var(--val); } }
@keyframes meterFill { 0%, 20% { width: 0; } 100% { width: calc(var(--val) - var(--fair)); } }
.best .m-val { animation: meterDot 1.6s cubic-bezier(0.3, 0.8, 0.2, 1) 0.7s both; }
.best .m-fill { animation: meterFill 1.6s cubic-bezier(0.3, 0.8, 0.2, 1) 0.7s both; }

/* Live numbers settling in (the same moves under new names, so they start again) */
@keyframes meterDotB { 0%, 20% { left: var(--fair); } 100% { left: var(--val); } }
@keyframes meterFillB { 0%, 20% { width: 0; } 100% { width: calc(var(--val) - var(--fair)); } }
.best.swap [data-f] { animation: rise 0.5s var(--ease) both; }
.best.swap .m-val { animation: meterDotB 1.4s cubic-bezier(0.3, 0.8, 0.2, 1) 0.2s both; }
.best.swap .m-fill { animation: meterFillB 1.4s cubic-bezier(0.3, 0.8, 0.2, 1) 0.2s both; }

/* ---- Sections ------------------------------------------------------------------------------------------------- */
.section { padding-top: 64px; padding-bottom: 8px; }
.sec-head { display: flex; flex-direction: column; gap: 0; margin-bottom: 22px; }
.sec-head.center { align-items: center; text-align: center; }
.section h2 { font-size: clamp(36px, 10.4vw, 64px); line-height: 0.95; text-wrap: balance; }
.section p { color: var(--text2); }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; margin-bottom: 14px; }
.eyebrow.cyan { color: var(--cyan); }
.eyebrow.red { color: var(--pink); }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.sec-lede { margin: 14px 0 0; font-size: 17px; line-height: 1.55; max-width: 680px; color: var(--text2); }
.sec-head.center .sec-lede { margin-left: auto; margin-right: auto; }
.home .hl { color: var(--text); font-weight: 600; background: linear-gradient(transparent 62%, rgba(46, 242, 160, 0.22) 62%); }

/* ---- The rematch: the house against you (the brand story) -------------------------------------------------------- */
.tape { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--stroke); }
.tape-head, .tape-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.tape-head { padding: 14px 16px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--stroke); }
.tape-house, .tape-you { font: 800 17px/1.05 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.tape-house { color: var(--pink); }
.tape-you { color: var(--green); text-align: right; }
/* "vs" only shows from 900px; below that it stays in the table for screen readers as the middle column's header */
.tape-vs { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tape-row { row-gap: 6px; padding: 14px 16px; border-top: 1px solid var(--stroke); }
.tape-head + .tape-row { border-top: 0; }
.tape-k { grid-column: 1 / -1; grid-row: 1; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.tape-l { grid-row: 2; font-size: 14.5px; line-height: 1.4; color: var(--soft); }
.tape-r { grid-row: 2; font-size: 14.5px; line-height: 1.4; color: var(--text); font-weight: 600; text-align: right; }

/* ---- What they'll never say ----------------------------------------------------------------------------------------- */
.never { margin-top: 72px; padding: 56px 0; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke);
  background: radial-gradient(80% 120% at 50% 0%, rgba(46, 242, 160, 0.08), rgba(5, 7, 10, 0) 70%); }
.never-inner { text-align: center; }
.never .eyebrow { justify-content: center; }
.never-big { margin: 0 auto; max-width: 900px; font: 900 clamp(40px, 11vw, 88px)/0.92 var(--display); text-transform: uppercase; text-wrap: balance; }
.never-sub { margin: 18px auto 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: var(--text2); }
.never-sub b { font-weight: 700; }

/* ---- How it works: three steps -------------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--stroke); min-width: 0; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-n { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--green); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.step h3 { font: 700 18px/1.25 var(--body); text-transform: none; letter-spacing: 0; }
.step p { margin: 0; font-size: 15px; line-height: 1.5; }
.step-vis { min-height: 104px; display: flex; flex-direction: column; justify-content: center; gap: 8px; cursor: default; }
.fine.center { margin-top: 18px; }

.vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); font-size: 14.5px; }
.vrow span { color: var(--soft); min-width: 0; }
.vrow b { color: var(--text); font-weight: 600; }
.vrow .mono { color: var(--text); font-size: 13.5px; }
.vrow em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--green); white-space: nowrap; }
.vrow.hot { background: rgba(46, 242, 160, 0.07); border-color: rgba(46, 242, 160, 0.25); }

.v-save { align-items: stretch; }
.save { position: relative; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15.5px; font-weight: 700; background: rgba(155, 140, 255, 0.18); color: #d6d0ff; overflow: hidden; }
.save-a, .save-b { position: absolute; display: inline-flex; align-items: center; gap: 8px; }
.save-a { opacity: 0; }
.save svg, .clv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.save-note { font-size: 13px; color: var(--muted); text-align: center; }

.v-won { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); align-items: flex-start; gap: 6px; }
.won { font: 900 32px/1 var(--display); color: var(--green); letter-spacing: 0.01em; }
.clv { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #bffbe3; }
.clv svg { stroke: var(--green); }
.clv-sub { font-size: 13px; color: var(--muted); }

/* The loops: each plays once as it comes into view (home.js adds .play), and again when tapped. */
@keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes saveBg { 0%, 45% { background: var(--green); color: var(--ink); } 60%, 100% { background: rgba(155, 140, 255, 0.18); color: #d6d0ff; } }
@keyframes saveOut { 0%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes saveIn { 0%, 48% { opacity: 0; transform: scale(0.9); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes tapDot { 0%, 30% { opacity: 0; transform: scale(0.4); } 36% { opacity: 0.9; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.play .vrow { animation: rowIn 0.6s var(--ease) both; }
.play .vrow + .vrow { animation-delay: 0.25s; }
.play .save { animation: saveBg 3s ease-out both; }
.play .save-a { animation: saveOut 3s ease-out both; }
.play .save-b { animation: saveIn 3s ease-out both; }
.save::after { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(3, 20, 12, 0.35); opacity: 0; pointer-events: none; }
.play .save::after { animation: tapDot 3s ease-out both; }
.play .won { animation: pop 0.7s var(--ease) 0.2s both; }
.play .clv { animation: slideIn 0.6s var(--ease) 1.1s both; }
.play .clv-sub { animation: slideIn 0.6s var(--ease) 1.4s both; }

/* ---- Check any bet ---------------------------------------------------------------------------------------------- */
.check { display: grid; gap: 22px; }
.check-copy p { margin: 16px 0 0; font-size: 17px; line-height: 1.55; }
.check-copy .fine { font-size: 14px; color: var(--muted); }
.verdict {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; min-width: 0;
  background: linear-gradient(180deg, rgba(91, 227, 255, 0.06), rgba(91, 227, 255, 0) 45%), #0b1014;
  border: 1px solid rgba(91, 227, 255, 0.22); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.v-bet { display: flex; flex-direction: column; gap: 2px; }
.v-bet b { font: 800 24px/1 var(--display); letter-spacing: 0.01em; }
.v-bet i { font-style: normal; font-size: 13px; color: var(--soft); }
.v-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 600; }
.v-head b { font-weight: 600; }
.v-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); min-width: 0; }
.tile i { font-style: normal; font-size: 12px; color: var(--muted); }
.tile b { font: 900 clamp(28px, 8.4vw, 34px)/1 var(--display); letter-spacing: 0.01em; }
.tile em { font-style: normal; font-size: 12.5px; color: var(--soft); }
.tile-cost b { color: var(--pink); }
.v-bars { display: flex; flex-direction: column; gap: 8px; }
.vb { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.vb-k { color: var(--soft); white-space: nowrap; }
.vb-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text2); white-space: nowrap; }
.vb-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.vb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: var(--text3); }
.vb-fill.red { background: var(--red); }
.vb-fill.pink { background: rgba(255, 138, 138, 0.55); }
.v-line { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text2); }
.v-line b { color: var(--text); font-weight: 600; }
.v-line b.g { color: var(--green); }
.v-chance { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.v-note { color: var(--muted); font-size: 13px; }
@keyframes grow { from { width: 0; } to { width: var(--w); } }
.play .vb-fill { animation: grow 1s var(--ease) both; }
.play .vb + .vb .vb-fill { animation-delay: 0.2s; }
.play .vb + .vb + .vb .vb-fill { animation-delay: 0.4s; }

/* ---- Why it works: the house's cut -------------------------------------------------------------------------- */
.why { display: grid; gap: 22px; }
.why-copy p { margin: 16px 0 0; font-size: 17px; line-height: 1.55; }
.cut { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--stroke); min-width: 0; }
.cut-title { margin: 0; font: 800 20px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.cut-bar { position: relative; height: 46px; margin-top: 22px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.cut-a, .cut-b { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cut-a { left: 0; background: #3c6e8f; border-radius: 10px 0 0 10px; }
.cut-b { left: 50%; background: #4d6577; border-radius: 0 10px 10px 0; }
.cut-a em, .cut-b em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #eaf2f8; white-space: nowrap; }
.cut-over { position: absolute; top: 0; bottom: 0; left: var(--cut); right: 0; border-radius: 0 10px 10px 0; background: repeating-linear-gradient(135deg, rgba(255, 93, 93, 0.95) 0 5px, rgba(255, 93, 93, 0.6) 5px 10px); }
.cut-mark { position: absolute; left: var(--cut); top: -22px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text); font-style: normal; }
.cut-mark em { position: absolute; right: 6px; top: -2px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); }
.cut-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--soft); }
.cut-cap b { font-weight: 700; }
.cut-loss { margin: 4px 0 0; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.cut-loss b { font: 900 36px/1 var(--display); flex: none; }
.cut-loss span { font-size: 13.5px; line-height: 1.45; color: var(--soft); }
@keyframes growA { from { width: 0; } to { width: 50%; } }
@keyframes fadeCut { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.play .cut-a { animation: growA 0.9s var(--ease) both; }
.play .cut-b { animation: growA 0.9s var(--ease) 0.5s both; }
.play .cut-over { animation: fadeCut 2s ease-out both; }
.play .cut-mark { animation: fadeCut 1.6s ease-out both; }

.proof { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: rgba(91, 227, 255, 0.05); border: 1px solid rgba(91, 227, 255, 0.2); }
.proof svg { width: 22px; height: 22px; flex: none; fill: var(--cyan); margin-top: 1px; }
.proof b { font-size: 16px; font-weight: 700; }
.proof p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }

/* ---- Pricing ---------------------------------------------------------------------------------------------------- */
.pricing .sec-head h2 { max-width: 900px; font-size: clamp(34px, 9.4vw, 60px); }
.launch { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto 20px; padding: 14px 16px; border-radius: 16px; background: var(--green-bg); border: 1px solid var(--green-line); color: var(--text); font-size: 15px; }
.bill { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 5px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--stroke); }
.bill-opt { border: 0; background: none; cursor: pointer; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text2); display: inline-flex; align-items: center; gap: 8px; }
.bill-opt.on { background: var(--text); color: #05070a; }
.save-tag { font-size: 11.5px; font-weight: 700; color: #0a6b45; }
.bill-opt:not(.on) .save-tag { color: var(--green); }
.plans { display: grid; gap: 14px; max-width: 880px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--stroke); }
.plan h3 { font: 800 30px/1 var(--display); }
.plan.pro { background: linear-gradient(180deg, rgba(46, 242, 160, 0.09), rgba(46, 242, 160, 0.02) 50%), #0b1014; border-color: rgba(46, 242, 160, 0.35); box-shadow: 0 0 60px rgba(46, 242, 160, 0.1); }
.plan-tag { position: absolute; top: 22px; right: 20px; padding: 4px 10px; border-radius: 999px; background: var(--green); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.price b { font: 900 52px/1 var(--display); }
.price span { color: var(--muted); font-size: 15px; }
.trial { margin: -6px 0 0; font-size: 14px; color: var(--green); font-weight: 600; }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.feat li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--text2); }
.feat li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.feat b { color: var(--text); }

/* ---- FAQ -------------------------------------------------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 16px; background: var(--surface); border: 1px solid var(--stroke); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-size: 16.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { margin: 0; padding: 0 18px 18px; font-size: 15.5px; line-height: 1.6; }
.faq details a { color: var(--green); }

/* ---- Final ------------------------------------------------------------------------------------------------------ */
.final { padding: 72px 0 64px; }
.final-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.final-mark { width: 64px; height: 64px; }
.final h2 { font-size: clamp(38px, 10.6vw, 72px); line-height: 0.95; text-wrap: balance; }
.final .btn { width: 100%; max-width: 420px; }

/* ---- Sticky button on phones -------------------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px;
  border-radius: 18px; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, var(--green), #2bd9c9);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(46, 242, 160, 0.3);
  transform: translateY(140%); transition: transform 0.35s var(--ease);
}
.sticky-cta.show { transform: none; }
.sticky-cta span:first-child { display: flex; flex-direction: column; }
.sticky-cta b { font-size: 16px; }
.sticky-cta i { font-style: normal; font-size: 12.5px; opacity: 0.75; }
.sticky-go { width: 38px; height: 38px; border-radius: 50%; background: rgba(3, 20, 12, 0.12); display: inline-flex; align-items: center; justify-content: center; }
.sticky-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 899px) { html { scroll-padding-bottom: 96px; } }

/* ---- Wider screens ------------------------------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .cta-row { flex-direction: row; align-items: center; gap: 16px; }
  .cta-row .btn { width: auto; }
  .micro { text-align: left; }
  .final .micro { text-align: center; }
  .plans { grid-template-columns: 1fr 1fr; }
  .section { padding-top: 88px; }
}
@media (min-width: 900px) {
  .sticky-cta { display: none; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .check { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 56px; }
  .why { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; column-gap: 56px; row-gap: 22px; }
  .why .cut { grid-column: 2; grid-row: 1 / span 2; }
  .why .proof { grid-column: 1; grid-row: 2; align-self: start; }
  .hero-guard { display: block; }
  .tape-head, .tape-row { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; }
  .tape-head { padding: 18px 24px; }
  .tape-row { padding: 18px 24px; }
  .tape-house, .tape-you { font-size: 24px; }
  .tape-vs { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    display: block; text-align: center; font: 900 20px/1 var(--display); color: var(--muted); text-transform: uppercase; }
  .tape-k { grid-column: 2; grid-row: 1; }
  .tape-l, .tape-r { grid-row: 1; font-size: 16px; }
  .tape-l { grid-column: 1; }
  .tape-r { grid-column: 3; }
  .never { margin-top: 96px; padding: 80px 0; }
}
@media (min-width: 960px) {
  .hero { padding: 36px 0 24px; }
  .hero::before { height: 900px; background: radial-gradient(60% 70% at 18% 20%, rgba(46, 242, 160, 0.14), rgba(5, 7, 10, 0) 70%), radial-gradient(50% 60% at 85% 40%, rgba(91, 227, 255, 0.09), rgba(5, 7, 10, 0) 70%); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 48px; }
  .hero-copy { gap: 24px; }
  .hero h1 { font-size: clamp(76px, 7.6vw, 112px); line-height: 0.86; }
  .lede { font-size: 20px; }

  /* The app's Tonight screen in a phone frame */
  .phone {
    width: 330px; min-height: 640px; max-width: none; padding: 12px; border-radius: 48px; background: #11161d;
    border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(46, 242, 160, 0.12);
    transform: rotate(-2deg);
  }
  .phone-screen {
    min-height: 614px; border-radius: 38px; overflow: hidden; padding: 22px 16px; gap: 12px;
    background: radial-gradient(120% 30% at 50% 0%, rgba(46, 242, 160, 0.12), rgba(5, 7, 10, 0) 70%), #05070a;
  }
  .ph-top { display: flex; align-items: center; justify-content: space-between; }
  .ph-brand { font: 900 17px/1 var(--display); letter-spacing: 0.02em; }
  .ph-brand b { color: var(--green); font-weight: 900; }
  .ph-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; border: 1px solid rgba(255, 181, 71, 0.4); color: var(--amber); font-size: 11.5px; font-weight: 600; }
  .ph-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .ph-pill.live { border-color: rgba(46, 242, 160, 0.3); color: var(--green); }
  .ph-pill.live i { animation: breathe 2.4s ease-in-out 2; }
  .ph-head { display: flex; flex-direction: column; gap: 4px; }
  .ph-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ph-title { font: 900 27px/0.95 var(--display); text-transform: uppercase; white-space: nowrap; }
  .phone .best { gap: 10px; padding: 14px; border-radius: 20px; box-shadow: none; }
  .phone .best-kicker { font-size: 10.5px; }
  .phone .tag { font-size: 9.5px; padding: 2px 7px; }
  .phone .badge { width: 36px; height: 36px; font-size: 12.5px; border-width: 2px; }
  .phone .best-name b { font-size: 21px; }
  .phone .best-name i { font-size: 11.5px; }
  .phone .num i { font-size: 10.5px; }
  .phone .num b { font-size: 34px; }
  .phone .meter { height: 34px; }
  .phone .m-lbl { font-size: 10.5px; top: 22px; }
  .phone .best-pays { font-size: 12px; }
  .phone .best-foot { font-size: 11.5px; }
  .ph-more { display: flex; flex-direction: column; gap: 8px; }
  .ph-more-head { margin: 2px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .ph-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .ph-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); font-size: 12.5px; color: var(--soft); }
  .ph-rows li b { color: var(--text); font-weight: 600; }
  .ph-rows li em { font-style: normal; font-weight: 700; font-size: 12px; color: var(--green); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
  .ph-rows li em svg { width: 11px; height: 11px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
  .stage-note { max-width: 300px; }
  .final .btn { width: auto; }
}
@media (min-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* ---- Reduced motion: every picture shows its finished state (site.css stops the animations) -------------------- */
@media (prefers-reduced-motion: reduce) {
  .phone { transform: none; }
  .sticky-cta { transition: none; }
}