/* Responsive layouts, with static diagrams as the reduced-motion fallback. */
.menu-toggle{display:none}
@media(max-width:900px){
 :root{--margin:24px;--hero:40px;--chapter:32px}
 .nav{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:16px;padding-block:16px;min-height:80px;align-items:center}
 .nav .wordmark{width:112px;height:29px}.nav .wordmark img{transform:scale(.140515)}
 .nav>a:last-child{font-size:12px;gap:8px;grid-column:2;grid-row:1}
 .menu-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;grid-column:3;grid-row:1;font:12px/18px var(--mono)}
 .menu-toggle span{font-size:20px}.menu-open .menu-toggle span{transform:rotate(45deg)}
 .nav nav{display:none;grid-column:1/-1;grid-row:2;border-top:1px solid var(--rule);padding-top:8px;gap:24px;justify-content:space-between}
 .nav.menu-open nav{display:flex}.nav nav a{display:flex;align-items:center;min-height:44px}.nav nav>span{display:none}
 .hero{padding-block:80px 48px;gap:24px;min-height:calc(100svh - 80px);justify-content:center}
 .hero h1{max-width:100%;font-size:40px;line-height:44px;text-wrap:balance}
 .typed-shell{height:auto;min-height:0}.hero .typed{width:auto;max-width:320px;overflow:visible}
 .typed p{font-size:20px;line-height:30px;white-space:normal;text-wrap:balance}
 .hero-deck{font:16px/24px var(--body);max-width:480px;margin-top:8px;text-wrap:pretty}
 .hero .scroll-cue{top:0;margin-top:48px;max-width:280px;font-size:9px;line-height:16px}
 .chapter{padding-block:64px;gap:32px}.eyebrow{font-size:10px;line-height:16px;gap:12px}
 .stack-scene{height:auto;min-height:0;overflow:visible;padding:64px 24px;display:block}
 .stack-kicker{position:static;padding:0;text-align:left;font-size:10px}
 .stack-title{position:static!important;padding:0;margin:24px auto 40px!important;text-align:left;max-width:560px}
 .stack-title h2{font-size:32px;line-height:38px;max-width:15ch}
 .xp{position:static;width:100%;height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:560px;margin:auto}
 .xp-stack{display:contents;perspective:none}
 .xp-plate{position:relative;left:auto;top:auto;width:100%;height:128px;transform:none;will-change:auto;box-shadow:none;margin-bottom:16px}
 .xp-checkout{grid-row:2}.xp-rules{grid-row:4}.xp-payment{grid-row:6}.xp-coins{grid-row:8;height:96px;margin-bottom:0}
 .xp-label{position:static;transform:none;max-width:none;width:100%;padding:0;background:none;border:0;border-radius:0;font:500 11px/16px var(--mono);letter-spacing:.08em}
 .xp-label:nth-of-type(2){grid-row:1}.xp-label:nth-of-type(3){grid-row:3}.xp-label:nth-of-type(4){grid-row:5}.xp-label:nth-of-type(5){grid-row:7}
 .xp-label:before{display:none}.xp-label small{display:block;font:14px/20px var(--body);margin-top:8px;max-width:42ch}
 .xp-pulse{display:none}.xp-ui{padding:16px;gap:8px}.xp-logic{font:11px/16px var(--mono);padding:16px;gap:8px}
 .xp-grid{inset:16px 16px 40px}.xp-grid i:nth-child(13){background:var(--emerald)}
 .xp-coins-inner span:nth-child(3){color:var(--accent)}.xp-coins-inner span:nth-child(3) i{border-color:var(--accent)}
 .flow-pin{padding-block:48px;gap:0}.flow-heading{display:block}.flow-heading .caption{display:none}.flow-heading .eyebrow{font-size:10px}
 .flow-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;min-height:0;padding:48px 0;border-bottom:1px solid var(--rule)}
 .flow-stage:last-child{border-bottom:0;padding-bottom:16px}.flow-copy{gap:16px}.flow-copy h2{font-size:32px;line-height:38px}
 .flow-copy>p:last-child{font:16px/24px var(--body);max-width:560px}.flow-art{max-width:440px;width:100%}.flow-index{display:none}
 .enrollment{padding:8px 0}.enrollment-parties{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr)}
 .merchant-document,.enrollment-program{padding:16px 8px;gap:12px}.merchant-document .micro,.enrollment-program .micro{font-size:10px;letter-spacing:.04em}
 .enrollment-link{margin:0 4px}.document-id{font-size:10px}.program-mark{width:64px;height:64px}.enrollment-terms{margin-top:32px;padding-top:16px}
 .risk-paths{gap:24px}.risk-policy{padding-bottom:24px}.risk-paths .risk-heading>span{font-size:20px;line-height:28px}.risk-paths .risk-stamp{font-size:9px}
 .policy-route{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:12px;margin-top:16px}.policy-link svg{width:32px}
 .risk-paths .policy-end>span{font:14px/20px var(--body)}.policy-source small{overflow-wrap:normal}.risk-paths .reserve-units i{width:20px}
 .money-art{gap:16px}.money-token{left:50%;padding:8px 12px}.flow-art-note{margin-top:24px}.rights-slip{margin-top:24px;padding-block:16px;flex-direction:column;gap:8px}
 .claim-receipt{width:100%;max-width:360px;padding:24px}.claim-receipt .review-check{padding-block:12px}.claim-receipt .review-check span{font-size:12px}.claim-receipt .review-label{font-size:10px}
 .refund-accounts{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:12px}.refund-accounts strong{font-size:48px}.claim-total .micro{font-size:10px}
 .blisk-section>h2{font-size:32px;line-height:38px}.blisk-section>.deck{font:16px/24px var(--body)}
 .blisk-study{grid-template-columns:minmax(0,1fr);padding-block:8px;gap:24px;min-height:0}
 .blisk-inputs ul{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
 .blisk-inputs li{font:14px/20px var(--body);height:auto;min-height:80px;padding:16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
 .blisk-convergence{height:48px;margin:0;position:relative}.blisk-convergence svg{display:none}.blisk-convergence:after{content:'';display:block;width:1px;height:48px;background:var(--accent);margin:auto}
 .blisk-key-area{top:0;gap:16px}.blisk-key{width:112px;height:112px}.blisk-key-area .micro{font-size:9px}
 .blisk-result{grid-column:auto;padding:0;border:0;align-items:center;text-align:center}.blisk-result h3{font-size:28px;line-height:36px}.blisk-result h3 br{display:none}
 .blisk-bottom{display:none}.blisk-section .research{display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--rule);padding-top:32px}.research-intro h3{font-size:24px;line-height:32px}.research .caption{font-size:12px;line-height:18px}
 #compare{padding-block:64px;gap:32px}#compare h2{font-size:32px;line-height:38px}
 #compare table,#compare thead,#compare tbody{display:block;width:100%}
 #compare thead tr{display:grid;grid-template-columns:1fr 1fr}#compare thead th{display:block;width:auto!important;padding:16px!important;min-width:0}
 #compare thead th:first-child{display:none}#compare thead th strong{font-size:20px;line-height:28px}#compare thead .micro{font-size:9px;line-height:16px;margin-bottom:12px}
 #compare .compare-visual{width:100%;height:48px;margin-top:16px}.compare-visual i{width:12px;height:20px}.cleard-visual i:nth-last-child(2),.cleard-visual i:last-child{margin-left:8px}
 #compare tbody tr{display:grid;grid-template-columns:1fr 1fr;padding:0;border-top:1px solid var(--rule)}
 #compare tbody th{grid-column:1/-1;margin:0;padding:16px 0 8px!important;font:500 16px/24px var(--display);color:var(--ink)}
 #compare tbody td{font:14px/20px var(--body);padding:0 12px 16px 0!important;margin:0!important;border:0;background:none!important}
 #compare tbody td:last-child{padding-left:16px!important}#compare td::before{display:none}
 #compare #comparison-rows .privacy-row{background:color-mix(in srgb,var(--secondary) 10%,transparent)}
 #compare #comparison-rows .privacy-row>th,#compare #comparison-rows .privacy-row>td{background:none!important}
 .ambition-panel{position:relative;min-height:440px;padding:64px 24px}.ambition-inner{gap:24px}.ambition-panel h2{font-size:40px;line-height:46px;max-width:15ch;text-wrap:balance}
 .ambition-panel.forest h2{font-size:32px;line-height:38px}.ambition-panel p:not(.micro){font-size:16px;line-height:24px}.ambition-panel.dark,.ambition-panel.forest{border-radius:24px 24px 0 0}
 .partner{padding-block:80px 32px;gap:40px}.partner .prompt{flex-direction:column;gap:16px}.partner .prompt>span{font-size:32px;line-height:40px}
 .partner .prompt textarea{font-size:32px;line-height:40px;min-height:64px;padding:8px 12px}.partner form{gap:24px}.prompt-continue{width:100%;border-bottom:1px solid var(--rule);padding:12px 0}
 footer{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;text-align:left;font-size:10px}footer>*{min-width:0}footer>p{grid-column:1/-1;margin:16px 0 0;text-align:left}
 #motion-toggle{display:none}footer>a{grid-column:1/-1}.reply input{font-size:16px}
}
@media(max-width:360px){
 .nav{gap:8px}.nav .wordmark{width:96px;height:24px}.nav .wordmark img{transform:scale(.12044)}.nav>a:last-child{font-size:11px}
 .hero h1{font-size:32px;line-height:38px}.hero{padding-top:64px}.policy-route{gap:8px}
 .merchant-document .micro,.enrollment-program .micro{font-size:9px}.document-id{font-size:9px}
 #compare thead th{padding:12px!important}#compare thead th strong{font-size:18px;line-height:24px}
}

/* Same scroll narrative as desktop, composed for touch screens. */
@media(max-width:900px){
 .motion-enabled .stack-scene{height:100svh;min-height:600px;padding:24px;display:flex;justify-content:center}
 .motion-enabled .stack-kicker{position:absolute;top:24px;left:24px}
 .motion-enabled .stack-title{position:absolute!important;top:50%;left:24px;right:24px;margin:0!important;padding:0;text-align:center;max-width:none}
 .motion-enabled .stack-title h2{max-width:none}
 .motion-enabled .xp{display:block;position:relative;left:0;width:100%;height:480px;max-width:560px;margin:0}
 .motion-enabled .xp-stack{display:block;position:absolute;inset:0;perspective:1200px}
 .motion-enabled .xp-plate{position:absolute;left:50%;top:50%;width:min(340px,84vw);height:150px;margin:0;box-shadow:0 26px 50px -30px rgb(22 21 19 / 28%);will-change:transform}
 .motion-enabled .xp-label{position:absolute;top:auto;bottom:-20px;left:0;right:0;width:100%;max-width:none;padding:0;text-align:center;display:block;background:none;border:0}
 .motion-enabled .xp-label small{display:block;max-width:36ch;margin:8px auto 0;font-size:12px;line-height:18px}
 .motion-enabled .xp-pulse{display:block}
 .motion-enabled .xp-grid i:nth-child(13){background:rgb(22 21 19 / 7%)}
 .motion-enabled .xp-coins-inner span:nth-child(3){color:var(--muted)}
 .motion-enabled .xp-coins-inner span:nth-child(3) i{border-color:var(--secondary)}
 .motion-enabled .flow-pin{padding-block:24px;gap:16px;overflow:hidden}
 .motion-enabled .flow-stage{padding:8px 0 0!important;gap:16px;border:0;grid-template-rows:auto 1fr;align-items:start;min-height:0}
 .motion-enabled .flow-copy{gap:12px}.motion-enabled .flow-copy h2{font-size:28px;line-height:32px}
 .motion-enabled .flow-copy>p:last-child{font-size:14px;line-height:20px}
 .motion-enabled .flow-art{align-self:center;justify-self:center;max-width:360px}
 .motion-enabled .flow-index{display:flex;gap:10px}.motion-enabled .flow-index li{font-size:10px;line-height:16px;padding:12px 0}.motion-enabled .flow-index span{display:none}
 .motion-enabled .claim-receipt{padding:16px 20px}.motion-enabled .claim-receipt .review-check{padding-block:10px}
 .motion-enabled .ambition-panel{position:sticky;top:0;min-height:100svh}
 #motion-toggle{display:flex}
}
@media(max-width:900px) and (max-height:740px){
 .motion-enabled .flow-art{zoom:.82}
 .motion-enabled .flow-pin{padding-block:16px;gap:8px}
 .motion-enabled .flow-copy h2{font-size:26px;line-height:30px}
 .motion-enabled .xp{height:400px;transform:scale(.9)}
}

/* Final composition: keep the phone narrative together and make progress legible. */
@media(max-width:900px){
 .motion-enabled .flow-stage{grid-template-rows:auto auto;align-content:center;gap:32px}
 .motion-enabled .flow-copy{gap:16px;align-self:end}
 .motion-enabled .flow-copy h2{font-size:30px;line-height:34px;text-wrap:balance}
 .motion-enabled .flow-copy>p:last-child{font-size:16px;line-height:24px}
 .motion-enabled .flow-art{align-self:start;margin:0 auto}
 .motion-enabled .flow-index li{font-size:10px;white-space:nowrap;letter-spacing:-.02em}
 .motion-enabled .xp-label{min-height:70px;bottom:-30px}
 .motion-enabled .xp-label small{color:var(--secondary)}
}
@media(max-width:900px) and (max-height:740px){
 .motion-enabled .flow-stage{gap:20px}
 .motion-enabled .flow-copy{gap:12px}
 .motion-enabled .flow-copy h2{font-size:26px;line-height:30px}
 .motion-enabled .flow-copy>p:last-child{font-size:14px;line-height:20px}
}

@media(max-width:900px) and (max-height:740px){
 .motion-enabled .flow-stage{align-content:safe center}
 .motion-enabled .claim-receipt{padding:12px 16px}
 .motion-enabled .receipt-heading h3{margin:4px 0 8px}
 .motion-enabled .receipt-meta{padding-bottom:8px;margin-bottom:8px}
 .motion-enabled .claim-receipt .review-check{padding-block:6px}
 .motion-enabled .claim-receipt .manual-route{margin-top:8px}
 .motion-enabled .receipt-footer{margin-top:8px;padding-top:8px}
}
