/* ===========================================================================
   LawPocket — shared design system
   Navy / teal / amber. Fraunces (display) + Inter (UI).
   =========================================================================== */
:root{
  --navy:#0b2540; --navy-2:#0f2f52; --navy-3:#123a63;
  --teal:#1f8a8a; --teal-d:#156d6d; --teal-l:#5fd0c0;
  --amber:#f3a712; --amber-d:#d8930a;
  --ink:#15202b; --muted:#5a6b7b; --line:#e4e9ef; --line-2:#eef2f7;
  --bg:#ffffff; --bg-soft:#f6f8fb; --bg-soft-2:#eef3f9;
  --ok:#178a4c;
  --radius:16px; --radius-s:11px; --radius-xs:8px;
  --shadow:0 14px 38px rgba(11,37,64,.12);
  --shadow-s:0 4px 16px rgba(11,37,64,.08);
  --shadow-xs:0 1px 3px rgba(11,37,64,.07);
  --maxw:1140px; --maxw-narrow:820px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden; max-width:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,'Times New Roman',serif; line-height:1.14; margin:0 0 .5em; letter-spacing:-.011em; font-weight:600}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.7vw,2.5rem)}
h3{font-size:1.2rem; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0}
h4{font-size:1.02rem; font-family:'Inter',sans-serif; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--teal-d); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.narrow{max-width:var(--maxw-narrow); margin-left:auto; margin-right:auto}
.eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-d)}
.muted{color:var(--muted)}
.center{text-align:center}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1rem; padding:14px 22px;
  border-radius:999px; border:1px solid transparent; cursor:pointer; min-height:48px; line-height:1.1;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #9bd4d4; outline-offset:2px}
.btn-primary{background:var(--amber); color:#3a2600; box-shadow:0 6px 18px rgba(243,167,18,.35)}
.btn-primary:hover{background:var(--amber-d)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-2)}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line); box-shadow:var(--shadow-s)}
.btn-ghost:hover{border-color:#cdd9e6}
.btn-wa{background:#25D366; color:#06310f}
.btn-wa:hover{background:#1eb558}
.btn-lg{padding:16px 28px; font-size:1.08rem; min-height:54px}
.btn-block{width:100%; justify-content:center}

/* Header */
header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.24rem; color:var(--navy); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .logo{width:34px; height:34px; flex:none}
.nav-links{display:flex; align-items:center; gap:1.4rem}
.nav-links a{color:var(--ink); font-weight:500; font-size:.96rem}
.nav-links a.active{color:var(--teal-d); font-weight:600}
.nav-cta{display:flex; align-items:center; gap:.6rem}
.menu-btn{display:none; background:none; border:0; padding:8px; cursor:pointer}

/* Hero */
.hero{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%); color:#eaf1f8; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-12%; top:-30%; width:60%; height:160%; background:radial-gradient(circle at center,rgba(31,138,138,.33),transparent 60%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding-top:62px; padding-bottom:70px; position:relative; z-index:1}
.hero-grid>*{min-width:0}
.hero h1{color:#fff}
.hero .lead{font-size:1.18rem; color:#c3d2e2; max-width:40ch}
.trust-row{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin:22px 0 26px; padding:0; list-style:none}
.trust-row li{display:flex; align-items:center; gap:.45rem; font-size:.93rem; color:#dbe6f2}
.trust-row svg{flex:none; color:var(--teal-l)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem}
.hero-note{margin-top:14px; font-size:.86rem; color:#9fb3c8}
.hero-visual{position:relative}
.hero-visual img{width:100%; border-radius:18px; box-shadow:var(--shadow)}

/* Page hero (inner pages) */
.page-hero{background:linear-gradient(165deg,var(--navy),var(--navy-2)); color:#eaf1f8; padding:54px 0 60px; position:relative; overflow:hidden}
.page-hero::after{content:""; position:absolute; right:-10%; top:-40%; width:50%; height:180%; background:radial-gradient(circle,rgba(31,138,138,.30),transparent 60%); pointer-events:none}
.page-hero .wrap{position:relative; z-index:1}
.page-hero h1{color:#fff; max-width:20ch}
.page-hero p{color:#c3d2e2; font-size:1.12rem; max-width:62ch; margin:0}
.breadcrumb{font-size:.85rem; color:#9fb3c8; margin-bottom:14px}
.breadcrumb a{color:#bcd0e6}

/* Card preview (hero side) */
.match-card{background:#fff; color:var(--ink); border-radius:18px; box-shadow:var(--shadow); padding:22px; border:1px solid rgba(255,255,255,.5)}
.match-card h3{display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem}
.match-card .dot{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(23,138,76,.15)}
.mini-steps{list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.7rem}
.mini-steps li{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem}
.mini-steps .n{flex:none; width:26px; height:26px; border-radius:50%; background:var(--bg-soft); color:var(--teal-d); font-weight:700; display:grid; place-items:center; font-size:.85rem; border:1px solid var(--line)}

/* Sections */
section{padding:72px 0}
.section-sm{padding:52px 0}
.sec-head{max-width:64ch; margin:0 auto 40px; text-align:center}
.sec-head p{font-size:1.08rem}
.soft{background:var(--bg-soft)}

/* Generic grids */
.grid{display:grid; gap:20px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-s)}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(31,138,138,.10); color:var(--teal-d); margin-bottom:14px}
.card h3{margin-bottom:.35rem}
.card p{margin:0; color:var(--muted); font-size:.98rem}

/* Steps (how it works) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.step{position:relative; padding-top:8px}
.step .num{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--amber); font-weight:600; line-height:1}
.step h3{margin:.4rem 0 .3rem}
.step p{color:var(--muted); margin:0}

/* Animated "how it works" visual */
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; max-width:920px; margin:0 auto}
.flow-node{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 18px; text-align:center; box-shadow:var(--shadow-s); opacity:0; transform:translateY(12px); animation:flowIn .6s ease forwards}
.flow-node:nth-child(1){animation-delay:.05s}
.flow-node:nth-child(3){animation-delay:.45s}
.flow-node:nth-child(5){animation-delay:.85s}
.flow-node .badge{width:54px; height:54px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:linear-gradient(150deg,var(--teal),var(--teal-d)); color:#fff}
.flow-node b{display:block; margin-bottom:.2rem}
.flow-node span{color:var(--muted); font-size:.9rem}
.flow-arrow{color:var(--teal); opacity:.0; animation:flowIn .5s ease forwards}
.flow-arrow:nth-child(2){animation-delay:.3s}
.flow-arrow:nth-child(4){animation-delay:.7s}
@keyframes flowIn{to{opacity:1; transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,138,138,.4)}50%{box-shadow:0 0 0 10px rgba(31,138,138,0)}}
.flow-node:nth-child(5) .badge{animation:pulse 2s ease-in-out infinite}

/* Practice areas */
.areas{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.area{display:flex; gap:.85rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); padding:18px; box-shadow:var(--shadow-s); transition:border-color .2s,box-shadow .2s,transform .1s; cursor:pointer; width:100%; text-align:left; font:inherit; color:inherit; text-decoration:none}
.area:hover{border-color:#bfe0df; box-shadow:var(--shadow); transform:translateY(-2px); text-decoration:none}
.area .ic{flex:none; color:var(--teal-d)}
.area b{display:block; font-size:1.02rem; color:var(--ink)}
.area span{color:var(--muted); font-size:.92rem}

/* Guides */
.guides{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.guide{display:flex; gap:1rem; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-s)}
.guide .g-ic{flex:none; width:44px; height:44px; border-radius:11px; background:rgba(243,167,18,.14); color:var(--amber-d); display:grid; place-items:center}
.guide .g-txt{flex:1}
.guide .g-txt b{display:block; font-size:1.05rem; margin-bottom:.15rem}
.guide .g-txt span{color:var(--muted); font-size:.92rem}
.guide .btn{flex:none}

/* Trust band */
.band{background:var(--navy); color:#dbe6f2}
.band h3{color:#fff}
.band .ic{background:rgba(95,208,192,.14); color:var(--teal-l); width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}
.band p{color:#aebfd0; margin:0; font-size:.96rem}
.langs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:8px}
.langs span{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:4px 12px; border-radius:999px; font-size:.9rem}

/* Stat strip */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center}
.stat b{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--navy); display:block}
.stat span{color:var(--muted); font-size:.95rem}

/* Pricing */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.price{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-s); display:flex; flex-direction:column}
.price.featured{border-color:var(--teal); box-shadow:var(--shadow); position:relative}
.price.featured::before{content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:999px}
.price h3{font-size:1.15rem}
.price .amount{font-family:'Fraunces',serif; font-size:2.4rem; color:var(--navy); margin:.2rem 0}
.price .amount small{font-family:'Inter',sans-serif; font-size:.95rem; color:var(--muted); font-weight:500}
.price ul{list-style:none; padding:0; margin:14px 0 22px; display:grid; gap:.6rem; flex:1}
.price li{display:flex; gap:.55rem; align-items:flex-start; font-size:.96rem}
.price li svg{flex:none; color:var(--ok); margin-top:3px}
.price .note{font-size:.82rem; color:var(--muted); margin-top:10px}

/* Lawyers / standards */
.std{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.std .card{display:flex; gap:1rem; align-items:flex-start}
.std .ic{margin-bottom:0}
.profile-slot{border:1.5px dashed #cdd9e6; border-radius:var(--radius); padding:24px; text-align:center; color:var(--muted); background:var(--bg-soft)}
.profile-slot .av{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(150deg,var(--bg-soft-2),#dde6f0);display:grid;place-items:center;color:#9fb0c2}

/* Forms */
form.lead{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:1rem; padding:13px 14px; border:1px solid #cdd6e0; border-radius:var(--radius-s); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,138,138,.18)}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.err{color:#c0392b; font-size:.84rem; margin-top:5px; display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0392b}
.field.invalid .err{display:block}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--muted)}
.consent input{width:18px; height:18px; margin-top:3px; flex:none}
.form-foot{margin-top:8px; font-size:.82rem; color:var(--muted)}
.form-status{display:none; padding:14px 16px; border-radius:var(--radius-s); font-size:.95rem; margin-bottom:14px}
.form-status.ok{display:block; background:#e9f7ef; border:1px solid #b7e3c8; color:#0c6b38}
.form-status.bad{display:block; background:#fdecea; border:1px solid #f5c6c2; color:#a13127}
.form-success{display:none; text-align:center; padding:18px 6px}
.form-success svg{color:var(--ok)}
.form-success h3{margin:.6rem 0 .3rem}
.ask-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
.ask-copy ul{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem}
.ask-copy li{display:flex; gap:.6rem; align-items:flex-start}
.ask-copy li svg{flex:none; color:var(--ok); margin-top:3px}

/* FAQ */
.faq{max-width:800px; margin:0 auto}
details{border:1px solid var(--line); border-radius:var(--radius-s); padding:0 18px; margin-bottom:12px; background:#fff; box-shadow:var(--shadow-s)}
details summary{cursor:pointer; font-weight:600; padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary .chev{flex:none; transition:transform .2s; color:var(--teal-d)}
details[open] summary .chev{transform:rotate(180deg)}
details .body{margin:0 0 18px; color:var(--muted)}

/* Prose (about/legal pages) */
.prose{max-width:var(--maxw-narrow); margin:0 auto}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.2em; color:var(--muted)}
.prose li{margin-bottom:.5em}
.prose .lead{font-size:1.15rem; color:var(--ink)}

/* Video / 3D embeds */
.media-frame{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); background:var(--navy)}
.media-frame video{display:block; width:100%; height:auto}
model-viewer{width:100%; height:420px; background:transparent}

/* Hero product visual */
.hero-visual .shot{width:100%; border-radius:20px; box-shadow:var(--shadow); display:block}
.hero-visual .floatcard{position:absolute; left:-6%; bottom:-6%; background:rgba(255,255,255,.96); color:var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px; max-width:80%; backdrop-filter:blur(6px)}
.hero-visual .floatcard b{display:block; font-size:.95rem}
.hero-visual .floatcard .row{display:flex; gap:.5rem; align-items:center; margin-top:6px; font-size:.85rem; color:var(--muted)}
.hero-visual .floatcard .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
@media (max-width:920px){ .hero-visual .floatcard{position:static; max-width:none; margin-top:14px} }

/* CSS 3D phone (how it works) */
.scene3d{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.stage{perspective:1400px; display:flex; justify-content:center; padding:20px 0}
.phone3d{width:240px; height:490px; border-radius:36px; background:linear-gradient(160deg,#0e2c4d,#0b2540); border:3px solid #1d3a5c;
  box-shadow:0 40px 80px rgba(11,37,64,.45);
  position:relative; transform-style:preserve-3d; animation:spin3d 14s ease-in-out infinite; padding:14px}
.phone3d::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:70px; height:7px; border-radius:99px; background:#1d3a5c}
.phone-screen{height:100%; border-radius:24px; background:linear-gradient(170deg,#10355c,#0c2742); overflow:hidden; position:relative; padding:22px 16px; transform:translateZ(12px)}
.phone-screen .pill{display:inline-flex; align-items:center; gap:6px; background:rgba(95,208,192,.16); color:#7fe0d2; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:99px}
.phone-screen h4{color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; margin:12px 0 4px; letter-spacing:-.01em}
.phone-screen .sub{color:#9fc0d8; font-size:.72rem; margin:0 0 14px}
.bubble{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:9px 11px; margin-bottom:8px; color:#dce8f4; font-size:.72rem; opacity:0; transform:translateY(8px); animation:bubbleIn .5s ease forwards}
.bubble:nth-child(4){animation-delay:.4s}
.bubble:nth-child(5){animation-delay:.9s}
.bubble.me{background:linear-gradient(150deg,#1f8a8a,#156d6d); border-color:transparent; color:#fff; margin-left:24px}
.bubble.match{display:flex; gap:8px; align-items:center; background:rgba(243,167,18,.14); border-color:rgba(243,167,18,.3); color:#ffd98a}
.bubble.match .av{width:22px;height:22px;border-radius:50%;background:#f3a712;flex:none}
.phone-screen .cta{position:absolute; left:16px; right:16px; bottom:18px; background:#f3a712; color:#3a2600; text-align:center; font-weight:700; font-size:.78rem; padding:10px; border-radius:99px}
@keyframes spin3d{0%,100%{transform:rotateY(-18deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(18deg) rotateX(-2deg) translateY(-10px)}}
@keyframes bubbleIn{to{opacity:1; transform:none}}
@media (max-width:820px){ .scene3d{grid-template-columns:1fr; gap:28px} }
@media (prefers-reduced-motion:reduce){ .phone3d{animation:none; transform:rotateY(-10deg)} .bubble{opacity:1; transform:none} }

/* CTA strip */
.cta-strip{background:linear-gradient(120deg,var(--teal-d),var(--navy)); color:#fff; border-radius:22px; padding:46px; text-align:center; box-shadow:var(--shadow)}
.cta-strip h2{color:#fff}
.cta-strip p{color:#d6e6e6; max-width:56ch; margin:0 auto 22px}

/* Disclaimer bar */
.disclaimer{background:#fff8e9; border-top:1px solid #f1e2bf; border-bottom:1px solid #f1e2bf}
.disclaimer .wrap{padding:16px 20px; display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; color:#6b5618}
.disclaimer svg{flex:none; color:#c79a16; margin-top:1px}

/* Footer */
footer.site{background:var(--navy); color:#aebfd0; padding:48px 0 30px; font-size:.92rem}
.foot-grid{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start}
footer.site a{color:#cfe0f0}
.foot-brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; font-size:1.1rem; margin-bottom:.5rem}
.foot-cols{display:flex; gap:48px; flex-wrap:wrap}
.foot-cols b{color:#fff; display:block; margin-bottom:.6rem; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase}
.foot-cols a{display:block; margin-bottom:.45rem}
.foot-legal{border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:18px; font-size:.82rem; color:#8aa0b8; line-height:1.6}

/* Floating WhatsApp */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:70; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.wa-float:hover{text-decoration:none; transform:scale(1.05)}
.wa-float svg{width:30px; height:30px; color:#fff}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Responsive */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:34px; padding-top:46px; padding-bottom:54px}
  .ask-grid{grid-template-columns:1fr; gap:28px}
  .cols-3,.cols-4,.steps,.areas,.price-grid,.stats{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr; gap:8px}
  .flow-arrow{transform:rotate(90deg); margin:2px auto}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:flex-start; background:#fff; padding:14px 20px; gap:1rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav-cta .btn-ghost{display:none}
  section{padding:54px 0}
  .cols-2,.cols-3,.cols-4,.steps,.areas,.guides,.price-grid,.stats,.std{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .cta-strip{padding:32px 22px}
  .guide{flex-direction:column; align-items:flex-start; gap:.8rem}
  .guide .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
  .reveal{opacity:1; transform:none}
  .flow-node{opacity:1; transform:none}
}