/* ============================================================
   recess — landing styles
   derived from brand/recess-design-system.html (v1, 2026-06-11)
   paper, ink, coral, charcoal — and nothing else.
   ============================================================ */

:root{
  --cream:#fbf6f1; --paper:#fdfbf7; --card:#ffffff;
  --keycap:#d7d3d2; --keycap-hi:#dcd8d5; --keycap-sh:#aba7a4;
  --hair:#e9e2d9; --line:#d8d1c8; --line2:#bdb5ac;
  --sub:#7a736b; --ink:#1b1814; --charcoal:#2b2b2b;
  --coral:#f45436; --coral-hero:#f85e41; --coral-deep:#c93a20; --coral-tint:#fdf0e9;
  --amber:#f9ae00;
  --lcd:#2b2b2b; --lcd-deep:#1f1f1f; --lcd-text:#e8e6e3; --lcd-dim:#9b9893; --lcd-coral:#ff8a70;
  --q:'Inter',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* web-scale extension (documented in brand/BRAND.md addendum) */
  --display-hero:clamp(48px,7vw,92px);
  --display-section:clamp(34px,5vw,64px);
  --display-feature:clamp(26px,3.4vw,44px);
  --body:17px;
  --body-sm:14.5px;
  --sect-pad:clamp(84px,11vw,150px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{background:var(--cream);color:var(--ink);font-family:var(--q);font-weight:400;}
body{overflow-x:clip;line-height:1.5;-webkit-font-smoothing:antialiased;}
::selection{background:var(--coral);color:#fff;}
a{color:inherit;}
img{display:block;max-width:100%;}

.wrap{max-width:1140px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 18px;}}

/* ============ shared type ============ */
.lab{font-family:var(--q);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:lowercase;color:var(--sub);}
.lede{font-size:var(--body);color:var(--sub);line-height:1.7;}
.fn{font-family:var(--q);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:lowercase;color:var(--sub);line-height:1.8;}
.seclab{display:flex;align-items:center;gap:12px;font-family:var(--q);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:lowercase;color:var(--sub);margin-bottom:22px;}
.seclab::after{content:"";flex:1;height:1px;background:var(--hair);}
.seclab b{color:var(--ink);font-weight:600;}
.sechead{font-family:var(--q);font-weight:200;text-transform:lowercase;font-size:var(--display-section);letter-spacing:-.015em;line-height:1.08;margin-bottom:18px;}
.secnote{font-size:var(--body);color:var(--sub);line-height:1.7;max-width:58ch;}
section{padding:var(--sect-pad) 0 0;}

/* ============ primary key + links (verbatim system) ============ */
.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--q);font-weight:500;text-transform:lowercase;font-size:14px;background:var(--coral);color:#fff;border:none;border-radius:8px;height:46px;padding:0 26px;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.24);cursor:pointer;text-decoration:none;text-align:center;transition:transform .1s ease;}
.key:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.24);}
.key.hero-key{height:52px;font-size:15px;padding:0 32px;}
.key.dark{background:var(--charcoal);}
.linkrow{display:flex;gap:18px;font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:lowercase;color:var(--sub);flex-wrap:wrap;}
.linkrow a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;}

/* ============ lcd window (verbatim system) ============ */
.lcd{background:var(--lcd);border:1px solid var(--lcd-deep);border-radius:6px;box-shadow:inset 0 2px 7px rgba(0,0,0,.45);padding:13px 14px;}
.lcd-col{display:flex;flex-direction:column;gap:6px;}
.lcd-line{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--lcd-dim);line-height:1.65;}
.lcd-line b{color:var(--lcd-text);font-weight:500;}
.lcd-line .am{color:var(--amber);}
.lcd-line .co{color:var(--lcd-coral);}
.segs{display:flex;gap:3px;}
.segs i{flex:1;height:8px;background:#3d3d3d;}
.segs i.on{background:var(--amber);}
.blink{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.pxbox{display:flex;justify-content:center;flex-shrink:0;}
.pxbox svg{display:block;image-rendering:pixelated;}

/* ============ cards / option rows / receipts (verbatim system) ============ */
.optg{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden;}
.opt{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-top:1px solid var(--hair);font-size:15px;line-height:1.45;}
.opt:first-child{border-top:none;}
.opt .tick{flex:none;width:14px;height:14px;border:1px solid var(--line2);border-radius:4px;margin-top:2px;background:#fff;display:grid;place-items:center;}
.opt .tick.rd{border-radius:50%;}
.opt small{display:block;font-size:12px;color:var(--sub);margin-top:2px;line-height:1.5;}
.opt.sel{background:var(--coral-tint);}
.opt.sel .tick{background:var(--coral);border-color:var(--coral);}
.opt.sel .tick.rd{background:radial-gradient(circle,var(--coral) 0 3.5px,#fff 4px);border-color:var(--coral);}
.receipt{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:11px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:2;color:var(--ink);}
.receipt .dim{color:var(--sub);}
.receipt .co{color:var(--coral-deep);}
.mini{border-top:1px solid var(--hair);}
.mr{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--hair);padding:9px 0;font-size:14px;}
.mr .k{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:lowercase;color:var(--sub);padding-top:2px;white-space:nowrap;}
.mr .v{text-align:right;line-height:1.45;}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.keycap{background:linear-gradient(180deg,var(--keycap-hi),#d2cecb);border:1px solid #bfbbb8;border-bottom:3px solid var(--keycap-sh);border-radius:6px;padding:11px 0 9px;text-align:center;font-family:var(--q);font-weight:400;font-size:17px;color:#56524e;}
.keycap small{display:block;font-family:var(--q);font-weight:500;font-size:8px;letter-spacing:.2em;text-transform:lowercase;color:#8d8985;margin-top:3px;}
.keycap.on{background:var(--coral);border-color:var(--coral-deep);border-bottom-color:#a32f17;color:#fff;}
.keycap.on small{color:rgba(255,255,255,.85);}
.caps.big .keycap{font-size:30px;padding:28px 0 22px;border-radius:8px;border-bottom-width:4px;}
.caps.big .keycap small{font-size:9px;margin-top:5px;}
.bubble{background:#fff;border:1px solid var(--hair);border-radius:10px;box-shadow:0 3px 8px rgba(27,24,20,.07);padding:10px 13px;position:relative;font-size:13px;line-height:1.55;color:var(--ink);font-weight:500;}
.bubble .who{font-family:var(--q);font-weight:500;font-size:8.5px;letter-spacing:.16em;text-transform:lowercase;color:var(--coral);margin-bottom:3px;}
.stamp{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ink);border-radius:4px;background:#fff;padding:3px 9px;font-family:var(--q);font-weight:500;font-size:8.5px;letter-spacing:.2em;text-transform:lowercase;}
.stamp::before{content:"";width:6px;height:6px;background:var(--coral);}
.prog{display:flex;align-items:center;gap:9px;}
.prog .pseg{display:flex;gap:4px;flex:1;}
.prog .pseg i{flex:1;height:3px;background:var(--hair);border-radius:2px;}
.prog .pseg i.on{background:var(--coral);}
.prog .pnum{font-family:var(--q);font-weight:500;font-size:8.5px;letter-spacing:.14em;color:var(--sub);}

/* ============ nav ============ */
.nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--hair);}
.nav-inner{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px;}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;}
.wordmark .mark{width:34px;height:34px;background:var(--charcoal);border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.35);flex-shrink:0;}
.wordmark span{font-family:var(--q);font-weight:300;text-transform:lowercase;font-size:21px;letter-spacing:-.01em;}
.nav-links{display:flex;gap:20px;margin-left:auto;}
.nav-links a{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:lowercase;color:var(--sub);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;}
.nav-links a:hover{border-bottom-color:var(--line);}
.nav-cta{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:lowercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:1px;white-space:nowrap;}
@media(max-width:760px){.nav-links{display:none;}.nav-cta{margin-left:auto;}}

/* ============ hero ============ */
.hero{padding:calc(var(--sect-pad)*.55) 0 calc(var(--sect-pad)*.5);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:56px;align-items:center;}
.hero h1{font-family:var(--q);font-weight:200;text-transform:lowercase;font-size:var(--display-hero);line-height:1.02;letter-spacing:-.025em;margin:20px 0 26px;}
.hero h1 b{font-weight:200;color:var(--coral);}
.hero .lede{max-width:46ch;margin-bottom:34px;font-size:clamp(16px,1.5vw,19px);}
.hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:18px;}
.hero .key.hero-key{height:58px;font-size:16px;padding:0 38px;border-radius:10px;}
.hero-yard{position:relative;display:flex;flex-direction:column;gap:18px;}
.lcd.yard{padding:24px 26px 22px;display:flex;flex-direction:column;gap:16px;}
.yard-top{display:flex;justify-content:space-between;align-items:baseline;}
.ylab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--lcd-dim);text-transform:lowercase;}
.ylab .am{color:var(--amber);}
.yard-stage{display:flex;justify-content:center;padding:18px 0 10px;}
.yard-lines{display:flex;flex-direction:column;gap:8px;}
.yard-lines .lcd-line{font-size:12px;}
.yard-segs i{height:10px;}
.hero-bubble{position:absolute;right:-16px;top:-58px;max-width:200px;font-size:13px;}
.hero-rating{display:flex;align-items:center;gap:14px;border-top:1px solid var(--hair);padding-top:18px;}
.hero-rating .rnum{font-family:var(--q);font-weight:200;font-size:40px;line-height:1;letter-spacing:-.02em;}
.hero-rating .rnum i{font-style:normal;color:var(--coral);font-size:22px;vertical-align:5px;margin-left:2px;}
.hero-rating .rtxt{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:lowercase;color:var(--sub);line-height:1.8;}
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:44px;}
  .hero-bubble{position:static;max-width:none;}
}

/* ============ problem stat band ============ */
.problem-band{border:1px solid var(--lcd-deep);border-radius:10px;background:var(--lcd);box-shadow:inset 0 2px 7px rgba(0,0,0,.45);padding:clamp(34px,5vw,64px) clamp(26px,4vw,56px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 64px;align-items:center;}
.problem-band .pstat{font-family:var(--mono);font-weight:400;font-size:clamp(72px,11vw,150px);line-height:1;letter-spacing:-.02em;color:var(--amber);white-space:nowrap;}
.problem-band .pstat small{font-size:.24em;letter-spacing:.12em;color:var(--lcd-dim);margin-left:14px;}
.problem-band .plines{display:flex;flex-direction:column;gap:10px;min-width:0;}
.problem-band .lcd-line{font-size:13px;}
.problem-copy{max-width:58ch;margin-top:30px;font-size:clamp(17px,1.8vw,21px);color:var(--ink);line-height:1.6;}
@media(max-width:760px){.problem-band{grid-template-columns:1fr;}}

/* ============ steps ============ */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.step-card{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:28px 26px 28px;display:flex;flex-direction:column;gap:14px;}
.step-card .snum{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:lowercase;color:var(--coral-deep);}
.step-card h3{font-family:var(--q);font-weight:300;text-transform:lowercase;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.01em;line-height:1.2;}
.step-card p{font-size:var(--body-sm);color:var(--sub);line-height:1.65;}
.step-card .step-ui{margin-top:auto;padding-top:18px;}
.step-card .lcd{padding:16px;}
.step-card .opt{font-size:14px;}
.step-card .receipt{font-size:11px;}
@media(max-width:880px){.step-grid{grid-template-columns:1fr;max-width:520px;}}

/* ============ interactive demo ============ */
.demo-rig{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;margin-top:48px;}
.demo-lcd{padding:24px 26px 22px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;}
.demo-stage{display:flex;align-items:flex-end;justify-content:center;gap:40px;padding:16px 0 8px;}
.demo-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.demo-key{height:58px;font-size:16px;padding:0 34px;border-radius:10px;}
.demo-key[disabled]{background:var(--charcoal);cursor:default;}
.demo-key.done{background:var(--charcoal);}
@media(max-width:880px){.demo-rig{grid-template-columns:1fr;gap:28px;}}

/* ============ boxes shelf ============ */
.shelf-track{margin-top:48px;background:var(--lcd);border-top:1px solid var(--lcd-deep);border-bottom:1px solid var(--lcd-deep);box-shadow:inset 0 2px 7px rgba(0,0,0,.45);overflow:hidden;padding:34px 0;}
.shelf-row{display:flex;gap:18px;width:max-content;animation:shelf 36s linear infinite;}
.shelf-track:hover .shelf-row{animation-play-state:paused;}
@keyframes shelf{to{transform:translateX(-50%);}}
.shelf-item{display:flex;flex-direction:column;align-items:center;gap:12px;border:1px solid #3d3d3d;border-radius:6px;padding:22px 26px 16px;min-width:170px;}
.shelf-item .pxbox{height:78px;display:flex;align-items:center;}
.shelf-item .sl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--lcd-text);text-align:center;line-height:1.7;}
.shelf-item .sl small{display:block;color:var(--lcd-dim);font-size:9px;}
.shelf .fn{margin-top:16px;}
@media(prefers-reduced-motion:reduce){.shelf-row{animation:none;}.shelf-track{overflow-x:auto;}}

/* ============ feature deep dives ============ */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--hair);}
.feature:first-of-type{border-top:none;padding-top:30px;}
.feature .fcopy .lab{color:var(--coral-deep);margin-bottom:10px;display:block;}
.feature h3{font-family:var(--q);font-weight:300;text-transform:lowercase;font-size:var(--display-feature);letter-spacing:-.01em;line-height:1.18;margin-bottom:12px;}
.feature .lede{font-size:var(--body);max-width:46ch;}
.feature .fn{margin-top:14px;}
.feature .fmock{display:flex;flex-direction:column;gap:12px;max-width:440px;justify-self:center;width:100%;}
.feature.flip .fmock{order:-1;justify-self:start;}
.feature .lcd.tall{padding:30px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;}
@media(max-width:880px){
  .feature{grid-template-columns:1fr;gap:28px;padding:38px 0;}
  .feature.flip .fmock{order:0;}
  .feature .fmock{justify-self:start;}
}

/* ============ results stats ============ */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.stat-card{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:34px 30px 28px;}
.stat-card .big{font-family:var(--q);font-weight:200;font-size:clamp(56px,6.5vw,84px);line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px;}
.stat-card.payoff .big{color:var(--coral);}
.stat-card .slab{font-family:var(--q);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:lowercase;color:var(--sub);margin-bottom:8px;}
.stat-card p{font-size:var(--body-sm);color:var(--sub);line-height:1.65;}
.stats-fn{margin-top:16px;}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr;}}

/* ============ reviews ============ */
.quote-marquee{overflow:hidden;margin-top:40px;}
.quote-marquee + .quote-marquee{margin-top:16px;}
.quote-row{display:flex;gap:16px;width:max-content;animation:qrow 60s linear infinite;}
.quote-row.rtl{animation-direction:reverse;animation-duration:48s;}
.quote-marquee:hover .quote-row{animation-play-state:paused;}
@keyframes qrow{to{transform:translateX(-50%);}}
.quote{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:22px 24px 18px;display:flex;flex-direction:column;gap:14px;width:340px;flex-shrink:0;}
.quote blockquote{font-size:15px;line-height:1.65;color:var(--ink);}
.quote .stars{color:var(--coral);font-size:12px;letter-spacing:.3em;}
.quote figcaption{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hair);padding-top:13px;margin-top:auto;font-family:var(--q);font-weight:500;font-size:13px;}
.quote figcaption img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.quote figcaption small{font-family:var(--q);font-weight:500;font-size:9.5px;letter-spacing:.12em;text-transform:lowercase;color:var(--sub);margin-left:auto;}
@media(prefers-reduced-motion:reduce){.quote-row{animation:none;}.quote-marquee{overflow-x:auto;}}

/* ============ comparison ============ */
.table-wrap{margin-top:34px;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:560px;}
th,td{padding:16px 18px;text-align:center;border-top:1px solid var(--hair);font-size:14.5px;line-height:1.5;}
thead th{border-top:none;font-family:var(--q);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:lowercase;color:var(--sub);padding-top:16px;}
tbody td:first-child,thead th:first-child{text-align:left;color:var(--ink);}
tbody td:first-child{font-size:14.5px;}
td.x{color:var(--line2);font-family:var(--mono);}
td.ok{color:var(--ink);font-family:var(--mono);}
.hl{background:var(--coral-tint);}
thead th.hl{color:var(--coral-deep);font-weight:600;}
td.hl.ok{color:var(--coral-deep);font-weight:500;}
tr.meta td{font-size:13px;color:var(--sub);}
tr.meta td.hl{color:var(--coral-deep);}
tr.cta-row td{border-top:1px solid var(--hair);padding:16px;}
tr.cta-row .key{height:40px;font-size:12.5px;padding:0 18px;}
.compare-cta{display:none;margin-top:18px;}
.compare-cta .key{width:100%;}
@media(max-width:560px){
  table{min-width:0;}
  thead th:nth-child(2),tbody td:nth-child(2){display:none;}
  tr.cta-row{display:none;}
  th,td{padding:12px 10px;font-size:11.5px;}
  tbody td:first-child{font-size:11.5px;}
  .compare-cta{display:block;}
}

/* ============ faq ============ */
.faq-list{margin-top:30px;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;}
.faq-list details{border-top:1px solid var(--hair);}
.faq-list details:first-child{border-top:none;}
.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;padding:18px 22px;font-family:var(--q);font-weight:400;font-size:17px;line-height:1.45;transition:color .15s ease;}
.faq-list summary:hover{color:var(--coral-deep);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::before{content:"+";font-family:var(--mono);color:var(--coral);font-size:14px;flex-shrink:0;}
.faq-list details[open] summary::before{content:"−";}
.faq-list details p{padding:0 22px 20px 50px;font-size:15px;color:var(--sub);line-height:1.75;max-width:72ch;}

/* ============ final cta ============ */
.final{padding:80px 0 20px;}
.final-panel{background:var(--coral-hero);border-radius:18px;box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.18);padding:clamp(64px,9vw,110px) 28px clamp(56px,8vw,96px);text-align:center;color:#fff;}
.final-panel .lab{color:rgba(255,255,255,.75);display:block;margin-bottom:16px;}
.final-panel h2{font-family:var(--q);font-weight:200;text-transform:lowercase;font-size:clamp(44px,6.5vw,84px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px;}
.final-panel p{font-size:var(--body);color:rgba(255,255,255,.88);line-height:1.7;max-width:46ch;margin:0 auto 30px;}
.final-panel .fn{color:rgba(255,255,255,.7);margin-top:16px;}
.final-counter{max-width:480px;margin:34px auto 0;text-align:left;}
.final-counter .lcd-line{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;}

/* ============ footer ============ */
.footer{border-top:1px solid var(--line);margin-top:70px;padding:44px 0 54px;}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;}
.footer-brand p{font-size:13.5px;color:var(--sub);line-height:1.7;margin:14px 0 10px;max-width:30ch;}
.footer-brand small{font-family:var(--q);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:lowercase;color:var(--sub);}
.footer-col strong{display:block;font-family:var(--q);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:lowercase;color:var(--ink);margin-bottom:12px;}
.footer-col a{display:block;font-size:13.5px;color:var(--sub);text-decoration:none;padding:4px 0;}
.footer-col a:hover{color:var(--ink);}
.footer-fine{border-top:1px solid var(--hair);margin-top:36px;padding-top:18px;font-size:11.5px;color:var(--sub);line-height:1.7;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}

/* ============ motion (web-scale extension) ============ */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.js .rv.in{opacity:1;transform:none;}
.js .rv[data-d="1"]{transition-delay:.08s;}
.js .rv[data-d="2"]{transition-delay:.16s;}
.js .rv[data-d="3"]{transition-delay:.24s;}
.reduced .rv{opacity:1 !important;transform:none !important;transition:none !important;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1 !important;transform:none !important;transition:none !important;}}

/* confetti squares */
.cf{position:absolute;width:7px;height:7px;pointer-events:none;animation:cf 1.2s ease-out forwards;z-index:3;}
@keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0;}}

/* ============ sticky cta bar ============ */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--cream);border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:16px;transform:translateY(110%);transition:transform .3s ease;}
.ctabar.on{transform:none;}
.ctabar .ctxt{font-family:var(--q);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:lowercase;color:var(--sub);}
.ctabar .key{height:44px;font-size:14px;padding:0 22px;flex-shrink:0;}
@media(max-width:560px){.ctabar .ctxt{display:none;}.ctabar .key{width:100%;max-width:420px;}}
@media(prefers-reduced-motion:reduce){.ctabar{transition:none;}}

/* ============================================================
   fold-in (2026-06-11): charcoal yard hero + coral problem splash
   (was v4 override layer; wins the cascade by source order)
   ============================================================ */

/* ============ nav — charcoal, merges with the hero ============ */
.nav{
  background:var(--charcoal);
  border-bottom:1px solid var(--lcd-deep);
}
.nav .wordmark span{color:var(--lcd-text);}
/* app icon (pixel coin clock) replaces the dotmini tile */
.wordmark .mark-img{display:block;width:34px;height:34px;flex-shrink:0;border-radius:8px;}
.nav .wordmark .mark-img{box-shadow:0 0 0 1px var(--lcd-dim);}
.nav-links a{color:var(--lcd-dim);}
.nav-links a:hover{border-bottom-color:var(--lcd-dim);}
.nav-cta{color:var(--lcd-text);border-bottom-color:var(--lcd-text);}

/* ============ hero — full-bleed giant LCD ============ */
.hero{
  background:var(--charcoal);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.45);
  border-bottom:1px solid var(--lcd-deep);
  padding:calc(var(--sect-pad)*.62) 0 calc(var(--sect-pad)*.58);
}

/* left column — statement type on the screen */
.hero-microlab{
  font-family:var(--mono);
  color:var(--lcd-dim);
  letter-spacing:.18em;
  text-transform:lowercase;
  font-weight:400;
}
.hero h1{color:var(--lcd-text);}
.hero h1 b{color:var(--amber);}           /* legal: we're on the LCD */
.hero .lede{color:var(--lcd-dim);font-size:18px;}
.hero .lede .hero-key-phrase{color:var(--lcd-coral);}
.hero .linkrow{color:var(--lcd-dim);}
.hero .linkrow a{border-bottom-color:var(--lcd-dim);}
.hero .fn{color:var(--lcd-dim);}

/* coral key pops hard on charcoal — left unchanged (still coral) */

/* blinking mono status line, bottom-left of the hero */
.hero-status{
  margin-top:22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--lcd-dim);
}

/* right column — dot lives directly on the hero screen, frameless */
.hero-yard .lcd.yard{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  gap:18px;
}
.hero-yard .lcd.yard .ylab{color:var(--lcd-dim);}
.hero-yard .lcd.yard .yard-lines .lcd-line{font-size:13px;}
.hero-yard .lcd.yard .yard-segs i{height:12px;}

/* white paper bubble floating over the LCD — keep, slightly tighter */
.hero-bubble{max-width:188px;font-size:12.5px;}

/* hero rating — instrument-screen treatment */
.hero-rating{border-top-color:var(--lcd-dim);}
.hero-rating .rnum{color:var(--lcd-text);}
.hero-rating .rnum i{color:var(--coral);}
.hero-rating .rtxt{color:var(--lcd-dim);}

/* ============ problem — CORAL SPLASH (full-bleed peak field) ============ */
/* beat 2 of charcoal → coral → cream. white type per the final-panel
   peak palette; no amber here (amber stays on charcoal LCDs only). */
.problem{
  background:var(--coral-hero);
  box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.18);
  padding-top:calc(var(--sect-pad)*.85);
  padding-bottom:calc(var(--sect-pad)*.7);
}
.problem .seclab{color:rgba(255,255,255,.75);}
.problem .seclab b{color:#fff;}
.problem .seclab::after{background:rgba(255,255,255,.35);}
.problem-band{
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
  gap:24px 64px;
}
/* giant white numerals on coral — the splash */
.problem-band .pstat{
  font-family:var(--mono);
  font-size:clamp(78px,12vw,170px);
  color:#fff;
}
.problem-band .pstat small{color:rgba(255,255,255,.7);}
.problem-band .plines{display:flex;flex-direction:column;gap:12px;min-width:0;}
.problem-band .pline{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}
.problem-band .pline b{color:#fff;font-weight:600;}
.problem-copy{color:rgba(255,255,255,.95);font-size:21px;}

/* ============ steps — cream as-is, chip + border polish ============ */
.step-card{border-color:var(--line2);}
.step-card .snum{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  background:var(--charcoal);
  color:#fff;
  border-radius:4px;
  padding:5px 9px;
  letter-spacing:.16em;
  box-shadow:inset 0 -2px 0 0 rgba(0,0,0,.35);
}