/* Mintbrooks — "The Approval Path" · v2
   Direction: warm editorial credit DOSSIER — broadsheet, not brochure.
   Asymmetric, left-aligned, a monospace data-voice against a soft serif.
   Mobile-first. Emerald = the one safe action (the green light). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --paper:#FAF5EA; --paper-2:#F1E8D6; --card:#FFFEF9; --ink:#171310;
  --ink-soft:#4F463B; --ink-mute:#6E6456;
  --emerald:#0A7D52; --emerald-dp:#055C3C;
  --amber:#B0610F; --amber-2:#E0A040;
  --line:rgba(23,19,16,.13); --line-2:rgba(23,19,16,.22);
  --disp:'Fraunces',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --shadow:0 30px 60px -34px rgba(70,46,12,.5);
  --shadow-sm:0 14px 30px -20px rgba(70,46,12,.45);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
body::before { /* paper grain */
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { position:relative; z-index:1; }
.bleed { width:min(100% - 36px, 1080px); margin-inline:auto; }   /* full editorial width */
.measure { max-width:600px; }                                     /* reading column */

/* type primitives */
.mono { font-family:var(--mono); }
.kicker {
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber);
}
.disp { font-family:var(--disp); font-weight:500; line-height:.96; letter-spacing:-.018em; font-optical-sizing:auto; }
h1.disp { font-size:clamp(38px,10.5vw,82px); font-weight:600; }
h2.disp { font-size:clamp(28px,7vw,50px); }
.disp .it { font-style:italic; font-weight:400; }
.lede { font-size:clamp(17px,4.6vw,21px); color:var(--ink-soft); line-height:1.5; }

/* ── masthead ───────────────────────────────────────── */
.mast { padding:54px 0 0; }
.mast-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.mast-row b { color:var(--ink); font-weight:600; }
.rule { height:1px; background:var(--line-2); margin-top:14px; }

/* prototype switch */
.proto-bar { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; gap:3px; padding:3px; border-radius:10px;
  background:rgba(255,254,249,.9); backdrop-filter:blur(12px); border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.02em; }
.proto-bar a { text-decoration:none; color:var(--ink-mute); padding:7px 13px; border-radius:8px; }
.proto-bar a.on { background:var(--ink); color:var(--paper); }

/* ── hero (asymmetric, left) ────────────────────────── */
.hero { padding:36px 0 0; }
.hero .kicker { display:block; margin-bottom:18px; }
.hero h1 { margin-bottom:20px; }
.hero h1 .it { color:var(--emerald-dp); }
.hero .lede { margin-bottom:6px; }

/* ── the engine ─────────────────────────────────────── */
.engine { background:var(--card); border:1px solid var(--line-2); border-radius:18px;
  box-shadow:var(--shadow); margin-top:34px; overflow:hidden; }
.engine-inner { padding:24px 20px; }
.step { padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
.step:first-child { padding-top:0; margin-top:0; border-top:0; }
.step-k { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.step-k .ix { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--amber); }
.step-k .lbl { font-family:var(--disp); font-size:clamp(19px,5.3vw,23px); font-weight:600; letter-spacing:-.01em; }
.step-hint { font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); margin-bottom:18px; letter-spacing:.01em; }

/* score readout — odometer feel */
.readout { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.readout .n { font-family:var(--mono); font-size:clamp(44px,13vw,58px); font-weight:600; line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.readout .b { font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-soft); letter-spacing:.02em; }
.track-wrap { position:relative; padding:16px 0 4px; }
.pop-band { position:absolute; top:16px; height:10px; border-radius:5px; background:rgba(224,160,64,.32); border:1px solid rgba(176,97,15,.4); z-index:0; }
.pop-label { position:absolute; top:-10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--amber); font-weight:500; transform:translateX(-50%); white-space:nowrap; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:5px; background:var(--paper-2); position:relative; z-index:1; cursor:grab; touch-action:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:38px; height:38px; border-radius:50%; background:var(--ink); border:5px solid var(--card); box-shadow:0 7px 16px -5px rgba(23,19,16,.55); }
input[type=range]::-moz-range-thumb{ width:38px; height:38px; border-radius:50%; background:var(--ink); border:5px solid var(--card); }
.scale-ends{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--ink-mute); margin-top:6px; }
.reassure{ font-size:15.5px; color:var(--ink-soft); line-height:1.5; margin-top:18px; padding-left:15px; border-left:2px solid var(--amber-2); }

/* toggle pills — big tap targets */
.pills{ display:flex; gap:10px; }
.pill{ flex:1; text-align:center; padding:18px 14px; border-radius:13px; cursor:pointer; min-height:56px;
  border:1.5px solid var(--line-2); background:var(--paper); font-weight:600; font-size:16px; color:var(--ink-soft); transition:all .16s; -webkit-tap-highlight-color:transparent; }
.pill:active{ transform:scale(.98); }
.pill.sel{ border-color:var(--emerald); background:rgba(10,125,82,.08); color:var(--emerald-dp); box-shadow:0 0 0 3px rgba(10,125,82,.13); }

/* reveal */
.reveal{ max-height:0; opacity:0; overflow:hidden; transition:max-height .55s cubic-bezier(.2,.7,.2,1), opacity .45s; }
.reveal.show{ max-height:680px; opacity:1; margin-top:22px; }
.reveal-card{ background:var(--ink); color:var(--paper); border-radius:15px; padding:26px 22px; position:relative; overflow:hidden; }
.reveal-card::before{ content:''; position:absolute; top:0; left:22px; right:22px; height:2px; background:var(--emerald); transform:scaleX(0); transform-origin:left; transition:transform .55s ease .12s; }
.reveal.show .reveal-card::before{ transform:scaleX(1); }
.rc-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-2); font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.rc-dot{ width:8px; height:8px; border-radius:50%; background:var(--emerald); animation:pulse 2s infinite; }
.rc-h{ font-family:var(--disp); font-size:clamp(23px,6.4vw,28px); font-weight:600; line-height:1.05; margin-bottom:12px; }
.rc-body{ font-size:16px; color:rgba(250,245,234,.78); line-height:1.55; margin-bottom:22px; }
.rc-body strong{ color:var(--paper); font-weight:600; }
.cta-green{ display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; text-align:center;
  background:var(--emerald); color:#fff; font-weight:700; font-size:16px; padding:17px 22px; border-radius:13px; min-height:56px; position:relative; transition:all .18s; }
.cta-green:active{ transform:scale(.99); }
.cta-green::after{ content:''; position:absolute; inset:-4px; border-radius:16px; border:1.5px solid rgba(10,125,82,.45); animation:ring 2.6s ease-out infinite; pointer-events:none; }
.cta-sub{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); margin-top:13px; line-height:1.5; }
.cta-sub .tick{ color:var(--emerald); font-weight:700; }
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(10,125,82,.6)}60%{box-shadow:0 0 0 7px rgba(10,125,82,0)}}
@keyframes ring{0%{transform:scale(.92);opacity:.6}70%,100%{transform:scale(1.05);opacity:0}}

/* ── reframe ────────────────────────────────────────── */
.reframe{ margin-top:64px; padding:64px 0; background:var(--paper-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.reframe h2{ margin-bottom:18px; }
.reframe h2 .it{ color:var(--emerald-dp); }
.reframe p{ color:var(--ink-soft); font-size:18px; max-width:520px; }
.startline{ max-width:600px; margin-top:40px; height:60px; position:relative; }
.startline .track{ position:absolute; top:50%; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 16px); }
.startline .fill{ position:absolute; top:50%; left:0; height:2px; width:13%; background:var(--emerald); }
.startline .marker{ position:absolute; top:50%; left:13%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:var(--emerald); border:4px solid var(--paper-2); }
.startline .you{ position:absolute; top:calc(50% - 32px); left:13%; transform:translateX(-50%); font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--emerald-dp); white-space:nowrap; }
.startline .goal{ position:absolute; top:calc(50% + 14px); right:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); }

/* ── sections / options ─────────────────────────────── */
.section{ padding:64px 0; }
.section .kicker{ display:block; margin-bottom:12px; }
.section h2{ margin-bottom:10px; }
.section .sub{ color:var(--ink-soft); max-width:560px; margin-bottom:36px; font-size:17px; }
.cards3{ display:grid; grid-template-columns:1fr; gap:14px; }
.opt{ background:var(--card); border:1px solid var(--line-2); border-radius:15px; padding:24px 22px; position:relative; }
.opt.best{ border-color:var(--emerald); box-shadow:0 0 0 3px rgba(10,125,82,.12); }
.opt.best::before{ content:'Most likely yes'; position:absolute; top:-11px; left:20px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; background:var(--emerald); color:#fff; padding:4px 11px; border-radius:99px; }
.opt .meta{ font-family:var(--mono); font-size:11.5px; color:var(--amber); font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin-bottom:11px; }
.opt h3{ font-family:var(--disp); font-size:23px; font-weight:600; margin-bottom:9px; }
.opt p{ font-size:15.5px; color:var(--ink-soft); line-height:1.55; }

/* library (hub) */
.lib{ display:grid; grid-template-columns:1fr; gap:12px; }
.lib a{ text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line-2); border-radius:13px; padding:22px; display:flex; flex-direction:column; gap:5px; transition:transform .15s,box-shadow .15s; }
.lib a:active{ transform:scale(.99); }
.lib h4{ font-family:var(--disp); font-size:20px; font-weight:600; }
.lib h4 .arr{ color:var(--emerald); }
.lib p{ font-size:14.5px; color:var(--ink-soft); }

footer{ padding:48px 0 70px; color:var(--ink-mute); font-family:var(--mono); font-size:11.5px; letter-spacing:.01em; }
.disc{ max-width:600px; margin-bottom:14px; line-height:1.7; }

/* load stagger */
.rise{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{animation-delay:.04s}.d2{animation-delay:.15s}.d3{animation-delay:.27s}.d4{animation-delay:.4s}
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .rise{animation:none;opacity:1;transform:none} .cta-green::after,.rc-dot{animation:none} }

/* ── desktop: editorial asymmetry ───────────────────── */
@media (min-width:860px){
  .hero{ padding:56px 0 0; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
  .hero-copy{ padding-top:26px; }
  .hero .lede{ max-width:430px; }
  .engine{ margin-top:0; }
  .engine-inner{ padding:32px 34px; }
  .reframe h2,.reframe p,.section .sub{ } /* left-aligned by default — editorial */
  .cards3{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .lib{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .startline{ height:64px; }
}
@media (min-width:560px) and (max-width:859px){
  .cards3{ grid-template-columns:repeat(3,1fr); }
  .lib{ grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════════════════
   v3 — selling the dream: the issued card, the climb, the unlock
   ════════════════════════════════════════════════════════ */

/* the "issued card" — the dream made tangible, inside the reveal */
.dreamcard{ position:relative; width:100%; max-width:300px; aspect-ratio:1.586/1; border-radius:14px;
  background:linear-gradient(135deg,#0E9460 0%,#066B45 55%,#0A3327 100%); overflow:hidden;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18); margin-bottom:22px;
  padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; }
.dreamcard .dc-shine{ position:absolute; top:-60%; left:-30%; width:60%; height:220%; transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:shine 4.5s ease-in-out infinite; }
@keyframes shine{ 0%,100%{left:-40%} 50%{left:120%} }
.dc-top{ display:flex; justify-content:space-between; align-items:center; }
.dc-brand{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.92); font-weight:600; }
.dc-net{ font-size:13px; color:rgba(255,255,255,.6); letter-spacing:-3px; }
.dc-chip{ width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#F4D38A,#C99A3E);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); position:relative; }
.dc-chip::after{ content:''; position:absolute; inset:6px 8px; border:1px solid rgba(0,0,0,.25); border-radius:2px; }
.dc-num{ font-family:var(--mono); font-size:15px; letter-spacing:.12em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.dc-bot{ display:flex; justify-content:space-between; align-items:flex-end; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:rgba(255,255,255,.7); }
.dc-ok{ color:#CFF5E3; font-weight:600; }

/* ── the climb: animated score-journey viz ──────────── */
.climb{ padding:64px 0; }
.climb .kicker{ display:block; margin-bottom:12px; }
.climb h2{ margin-bottom:8px; }
.climb .sub{ color:var(--ink-soft); max-width:520px; margin-bottom:34px; font-size:17px; }
.chart{ position:relative; width:100%; border:1px solid var(--line-2); border-radius:16px; background:var(--card);
  padding:22px 20px 16px; box-shadow:var(--shadow-sm); }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.chart .gl{ stroke:var(--line); stroke-width:1; }
.chart .area{ fill:url(#g-area); opacity:0; transition:opacity 1.2s ease .5s; }
.chart .path{ fill:none; stroke:var(--emerald); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s cubic-bezier(.4,.6,.2,1); }
.chart.in .path{ stroke-dashoffset:0; } .chart.in .area{ opacity:1; }
.chart .dot{ fill:var(--card); stroke:var(--emerald); stroke-width:3; opacity:0; transition:opacity .4s; }
.chart.in .dot{ opacity:1; } .chart.in .dot.d2{ transition-delay:.9s } .chart.in .dot.d3{ transition-delay:1.5s }
.chart .ann{ font-family:var(--mono); font-size:11px; fill:var(--ink-mute); }
.chart .ann b{ fill:var(--ink); font-weight:600; }
.chart .thresh{ stroke:var(--amber-2); stroke-width:1.5; stroke-dasharray:4 4; }
.chart .thresh-t{ font-family:var(--mono); font-size:10px; fill:var(--amber); }

/* ── what a yes unlocks: aspirational scene tiles ───── */
.unlocks{ padding:64px 0; background:var(--paper-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.unlocks .kicker{ display:block; margin-bottom:12px; }
.unlocks h2{ margin-bottom:34px; }
.scenes{ display:grid; grid-template-columns:1fr; gap:14px; }
.scene{ position:relative; border-radius:16px; overflow:hidden; min-height:188px; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  box-shadow:var(--shadow-sm); }
.scene .ico{ position:absolute; top:20px; right:20px; opacity:.85; }
.scene h3{ font-family:var(--disp); font-size:25px; font-weight:600; line-height:1.04; margin-bottom:7px; position:relative; }
.scene p{ font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.85); position:relative; max-width:30ch; }
.scene.s1{ background:linear-gradient(150deg,#0E9460,#0A3327); }
.scene.s2{ background:linear-gradient(150deg,#C2761B,#5A2E0C); }
.scene.s3{ background:linear-gradient(150deg,#2B2620,#171310); }
.scene::after{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }
@media (min-width:760px){ .scenes{ grid-template-columns:repeat(3,1fr); gap:16px; } .scene{ min-height:230px; } }

/* ════ v4 — the Yendo offer (clarity) + the $17 product pitch ════ */

/* Yendo explainer — make the offer unmistakable */
.yendo{ padding:64px 0; }
.yendo .kicker{ display:block; margin-bottom:12px; }
.yendo h2{ margin-bottom:14px; }
.yendo .lead{ font-size:18px; color:var(--ink-soft); max-width:600px; line-height:1.55; margin-bottom:34px; }
.yendo .lead strong{ color:var(--ink); font-weight:600; }
.ygrid{ display:grid; grid-template-columns:1fr; gap:16px; }
.howto{ background:var(--card); border:1px solid var(--line-2); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm); }
.howto .h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:18px; }
.htstep{ display:flex; gap:15px; padding:14px 0; border-top:1px solid var(--line); }
.htstep:first-of-type{ border-top:0; padding-top:0; }
.htstep .num{ font-family:var(--mono); font-size:15px; font-weight:600; color:var(--emerald); flex-shrink:0; width:24px; }
.htstep .t b{ font-family:var(--disp); font-weight:600; font-size:18px; display:block; margin-bottom:3px; }
.htstep .t span{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.gets{ background:var(--ink); color:var(--paper); border-radius:16px; padding:26px 24px; }
.gets .h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); margin-bottom:16px; }
.gets ul{ list-style:none; }
.gets li{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; font-size:15.5px; color:rgba(250,245,234,.9); border-top:1px solid rgba(250,245,234,.1); }
.gets li:first-child{ border-top:0; }
.gets li .ck{ color:var(--emerald); font-weight:800; flex-shrink:0; }
.yendo .cta-wrap{ margin-top:28px; }
.yendo .cta-green{ display:inline-flex; max-width:max-content; }
.yendo .fine{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); margin-top:12px; }
@media (min-width:820px){ .ygrid{ grid-template-columns:1.15fr .85fr; gap:20px; } }

/* $17 product pitch */
.product{ padding:60px 0; }
.product-card{ background:linear-gradient(160deg,#221C16,#171310); color:var(--paper); border-radius:20px; padding:34px 28px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.product-card::after{ content:''; position:absolute; top:-40%; right:-10%; width:55%; height:180%; background:radial-gradient(circle,rgba(10,125,82,.28),transparent 70%); }
.pc-k{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); margin-bottom:14px; position:relative; }
.pc-h{ font-family:var(--disp); font-size:clamp(26px,6.5vw,34px); font-weight:600; line-height:1.05; margin-bottom:12px; position:relative; max-width:18ch; }
.pc-body{ font-size:16px; color:rgba(250,245,234,.78); line-height:1.58; margin-bottom:22px; position:relative; max-width:54ch; }
.pc-body strong{ color:var(--paper); font-weight:600; }
.pc-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; position:relative; }
.pc-price{ font-family:var(--disp); font-size:38px; font-weight:600; line-height:1; }
.pc-price small{ font-family:var(--mono); font-size:12px; font-weight:500; color:rgba(250,245,234,.6); letter-spacing:.04em; display:block; margin-top:4px; }
.pc-anchor{ font-family:var(--mono); font-size:12.5px; color:rgba(250,245,234,.55); line-height:1.5; max-width:24ch; }
@media (min-width:680px){ .product-card{ padding:40px 38px; } }

/* ════ v5 — go bold: full-bleed, oversized, the showcases ════ */
.fb{ width:100vw; margin-left:calc(50% - 50vw); }   /* break the column — edge to edge */
.mega{ font-family:var(--disp); font-weight:600; line-height:.92; letter-spacing:-.025em; font-size:clamp(46px,12vw,104px); }

/* ── YENDO — full-bleed dark showcase, pulled high ──── */
.yhero{ position:relative; color:var(--paper); padding:84px 0 90px; overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, #134B36 0%, #171310 55%); }
.yhero::after{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.yhero .bleed{ position:relative; z-index:1; }
.yhero .ek{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-2); display:block; margin-bottom:20px; }
.yhero .mega{ margin-bottom:18px; }
.yhero .mega .it{ font-style:italic; font-weight:400; color:#7FE3B4; }
.yhero .yintro{ font-size:clamp(18px,3.4vw,23px); color:rgba(250,245,234,.82); max-width:660px; line-height:1.5; margin-bottom:54px; }
.yhero .yintro strong{ color:#fff; font-weight:600; }
.yh-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
.dreamcard.lg{ max-width:none; width:100%; aspect-ratio:1.586/1; border-radius:20px; padding:26px 28px; }
.dreamcard.lg .dc-brand{ font-size:14px } .dreamcard.lg .dc-num{ font-size:20px; letter-spacing:.16em } .dreamcard.lg .dc-chip{ width:50px; height:38px } .dreamcard.lg .dc-bot{ font-size:11px }
.yh-steps{ display:flex; flex-direction:column; gap:0; }
.yh-step{ display:flex; gap:18px; padding:22px 0; border-top:1px solid rgba(250,245,234,.14); }
.yh-step:first-child{ border-top:0; padding-top:0 }
.yh-step .yn{ font-family:var(--mono); font-size:clamp(28px,7vw,40px); font-weight:600; color:#7FE3B4; line-height:1; flex-shrink:0; opacity:.9 }
.yh-step b{ font-family:var(--disp); font-size:clamp(20px,4.6vw,25px); font-weight:600; display:block; margin-bottom:5px }
.yh-step span{ font-size:16px; color:rgba(250,245,234,.7); line-height:1.5 }
.yh-gets{ display:flex; flex-wrap:wrap; gap:10px; margin:46px 0 38px; }
.yh-gets .tag{ font-family:var(--mono); font-size:13px; padding:10px 15px; border-radius:999px; background:rgba(127,227,180,.1); border:1px solid rgba(127,227,180,.28); color:#CFF5E3; }
.yh-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; }
.cta-green.big{ font-size:18px; padding:21px 32px; }
.yh-fine{ font-family:var(--mono); font-size:13px; color:rgba(250,245,234,.5); }
@media (min-width:880px){
  .yh-grid{ grid-template-columns:.9fr 1.1fr; gap:64px; }
  .yhero{ padding:104px 0 110px; }
}

/* ── PRODUCT — full sales showcase w/ 90-day grid + contents ─ */
.pshow{ padding:96px 0; }
.pshow .ek{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:16px; }
.pshow .mega{ margin-bottom:16px; }
.pshow .pintro{ font-size:clamp(18px,3.4vw,22px); color:var(--ink-soft); max-width:620px; line-height:1.5; margin-bottom:56px; }
.pshow .pintro strong{ color:var(--ink); font-weight:600; }
.ps-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; margin-bottom:56px; }
/* the 90-day grid graphic */
.ninety{ background:var(--ink); border-radius:20px; padding:30px 28px; color:var(--paper); box-shadow:var(--shadow); }
.ninety .nt{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); margin-bottom:6px; }
.ninety .nh{ font-family:var(--disp); font-size:24px; font-weight:600; margin-bottom:20px; }
.daygrid{ display:grid; grid-template-columns:repeat(15,1fr); gap:6px; }
.daygrid .dc{ aspect-ratio:1; border-radius:3px; background:rgba(250,245,234,.12); }
.daygrid .dc.on{ background:#0E9460; } .daygrid .dc.mk{ background:#E0A040; box-shadow:0 0 0 2px rgba(224,160,64,.3); }
.ninety .nlegend{ display:flex; gap:18px; margin-top:18px; font-family:var(--mono); font-size:11.5px; color:rgba(250,245,234,.6); flex-wrap:wrap; }
.ninety .nlegend i{ width:11px; height:11px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:-1px; }
/* value stack */
.vstack{ display:flex; flex-direction:column; gap:2px; }
.vrow{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.vrow:last-child{ border-bottom:0 }
.vrow .vi{ width:42px; height:42px; border-radius:11px; background:rgba(10,125,82,.1); border:1px solid rgba(10,125,82,.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vrow .vt b{ font-family:var(--disp); font-size:19px; font-weight:600; display:block; margin-bottom:3px }
.vrow .vt span{ font-size:15px; color:var(--ink-soft); line-height:1.5 }
.vrow .vv{ margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink-mute); white-space:nowrap; align-self:center }
/* price bar */
.pbar{ display:grid; grid-template-columns:1fr; gap:22px; align-items:center; background:linear-gradient(160deg,#221C16,#171310); color:var(--paper); border-radius:20px; padding:32px 30px; position:relative; overflow:hidden; }
.pbar::after{ content:''; position:absolute; top:-50%; right:-10%; width:50%; height:200%; background:radial-gradient(circle,rgba(10,125,82,.3),transparent 70%); }
.pbar .pp{ position:relative }
.pbar .pp .big{ font-family:var(--disp); font-size:54px; font-weight:600; line-height:1 }
.pbar .pp .sm{ font-family:var(--mono); font-size:12.5px; color:rgba(250,245,234,.6); margin-top:6px }
.pbar .pg{ position:relative; font-size:14.5px; color:rgba(250,245,234,.8); line-height:1.5 }
.pbar .pg .badge{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:#7FE3B4; display:inline-flex; align-items:center; gap:7px; margin-bottom:8px; text-transform:uppercase }
.pbar .cta-green.big{ position:relative }
@media (min-width:880px){
  .ps-grid{ grid-template-columns:1fr 1fr; gap:44px; }
  .pbar{ grid-template-columns:auto 1fr auto; gap:40px; padding:34px 40px; }
}