/* pocketatlas-app.com — one stylesheet for the landing page, the privacy
   policy and the 404. Built to design_handoff_website (final), README order:
   tokens · fonts · base · shared parts · landing · privacy · 404 · motion.
   Mobile first; the only media query on width is (min-width: 900px). */

/* ── 1 · Fonts: the app's own Baloo 2 and Nunito (OFL), subset, self-hosted ── */
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo2-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/nunito.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/nunito-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

/* ── 2 · Tokens. Daylight in :root, Dusk under prefers-color-scheme ── */
:root{
  color-scheme:light dark;
  --paper:#FBEFE7;--paperRaised:#FFFAF6;--paperSunken:#F2DFD3;
  --ink:#2C2140;--inkSoft:#5F5266;--inkFaint:#6A5C71;
  --accent:#6B4C93;--onAccent:#FFFFFF;--pinkInk:#E8697D;--onBright:#241B33;
  --gold:#F5B942;--tealInk:#3FA6A0;
  --rim:rgba(44,33,64,.1);--rimFaint:rgba(44,33,64,.1);--shadow:rgba(44,33,64,.16);
  --welcomeStage:#6B4C93;--welcomeStage2:#5A3E80;
  --onStage:#FFFFFF;--onStageDim:rgba(255,255,255,.72);
  --stageRoute:rgba(247,237,230,.55);--stickerEdge:#FFF6EC;
  --common:#908198;--rare:#3FA6A0;--epic:#E8697D;--legendary:#F5B942;
  --trail:rgba(107,76,147,.22);
  --focus:var(--ink);
  /* the handoff's components carry these per-scheme values; named here so
     nothing below is a literal that fails to switch */
  --stickerFill:#E9D8CC;--stickerGlyph:#7A6C80;
  --artTower:#5A3E80;--artTorii:#3A2A57;--artStairs:#5A3E80;
  --bubbleMix:16%;
  --plate:#FFFAF6;--plateEdge:0 6px 20px rgba(44,33,64,.12);--plateText:#6E6075;
  --plateLine:rgba(44,33,64,.16);--plateDash:rgba(44,33,64,.34);--plateDashGlyph:rgba(44,33,64,.34);
  --plateGold:#F5B942;--plateGoldEdge:#FFFFFF;--plateGoldShadow:rgba(44,33,64,.22);
  --rarityDots:rgba(44,33,64,.22);
  /* country tiles: CountryTint.swift, hash → hue, HSB s .35 b .55 */
  --cFR:#728C5B;--cGR:#5B8C5E;--cIT:#5B878C;--cJP:#5B708C;--cPT:#8C7F5B;--cES:#8B8C5B;
  --fd:"Baloo 2",system-ui,sans-serif;--fb:Nunito,system-ui,sans-serif;--fm:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1.4);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#241B33;--paperRaised:#2F2445;--paperSunken:#1C1528;
  --ink:#F7EDE6;--inkSoft:#B7A9C4;--inkFaint:#B7A9C4;
  --accent:#B49CD3;--onAccent:#241B33;--pinkInk:#FF8095;
  --gold:#FFC85C;--tealInk:#4FC3BC;
  --rim:#7A68A0;--rimFaint:rgba(247,237,230,.13);--shadow:rgba(10,6,18,.5);
  --welcomeStage:#3A2A57;--welcomeStage2:#2F2248;
  --onStage:#F7EDE6;--onStageDim:rgba(247,237,230,.68);
  --common:#B7A9C4;--rare:#4FC3BC;--epic:#FF8095;--legendary:#FFC85C;
  --trail:rgba(180,156,211,.24);
  --focus:var(--gold);
  --artTower:#5A4880;--artTorii:#5A4880;--artStairs:#2F2248;
  --bubbleMix:14%;
  --plate:#241B33;--plateEdge:0 0 0 1px #7A68A0;--plateText:rgba(247,237,230,.6);
  --plateLine:rgba(247,237,230,.18);--plateDash:rgba(247,237,230,.34);--plateDashGlyph:rgba(247,237,230,.32);
  --plateGoldEdge:#FFFAF6;--plateGoldShadow:rgba(0,0,0,.35);
  --rarityDots:rgba(247,237,230,.24);
}}

/* ── 3 · Base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
/* The handoff's map-paper dot grid is off (Solen, 6 Oct): plain paper. */
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul,ol{margin:0}
a{color:var(--accent);text-decoration:none}
img{display:block}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--paperRaised);color:var(--accent);font:800 15px/1 var(--fb);padding:14px 18px;border-radius:999px;box-shadow:0 4px 14px var(--shadow)}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the page: map paper, one route trail behind everything, margin bubbles */
.page{position:relative;overflow:clip;min-height:100vh}
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.trail path{fill:none;stroke:var(--trail);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 13}
.trail .td{display:none}
.bub{position:absolute;border-radius:50%;z-index:0;pointer-events:none;
  background:color-mix(in oklch,var(--c) var(--bubbleMix),transparent);border:2px solid color-mix(in oklch,var(--c) 22%,transparent)}
.bub.r0{--c:var(--common)}.bub.r1{--c:var(--rare)}.bub.r2{--c:var(--epic)}.bub.r3{--c:var(--legendary)}
.b1{top:8%;right:-50px;width:110px;height:110px}
.b2{top:30%;left:-40px;width:80px;height:80px}
.b3{top:52%;right:-40px;width:90px;height:90px}
.b4{top:76%;left:-40px;width:100px;height:100px}
.b5,.b6,.b7{display:none}

.wrap{width:100%;max-width:592px;margin-inline:auto;padding-inline:16px}
.sec{position:relative;z-index:1}

/* ── 4 · Shared parts ── */
/* top bar */
.top{position:relative;z-index:1;height:60px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font:800 24px/1 var(--fd)}
.icon{display:block;flex:none;width:32px;height:32px;border-radius:7.2px}
.top .grow{flex:1}
.top nav{display:none}
.top .solo{font:800 15px/1 var(--fb);color:var(--accent);padding:14px 4px}

/* app icon (inline SVG), switches with the scheme */
.ai-bg{fill:#3FA6A0}.ai-sh{fill:rgba(20,40,40,.18)}.ai-p1{fill:#FBEFE7}.ai-p2{fill:#EAD6C8}.ai-rt{stroke:#E8697D}.ai-pin{fill:#6B4C93;stroke:#FBEFE7}
@media (prefers-color-scheme:dark){.ai-bg{fill:#162A2F}.ai-sh{fill:rgba(0,0,0,.35)}.ai-p1{fill:#F2E4DA}.ai-p2{fill:#D9C4B6}.ai-rt{stroke:#FF8095}.ai-pin{fill:#8F6CC0;stroke:#F2E4DA}}

/* section title + dotted-route underline */
.sh{display:flex;flex-direction:column;gap:10px}
.sh h2{font:800 27px/1.14 var(--fd);color:var(--ink);text-wrap:balance}
.sh .ul{display:block;width:104px;height:6px;background:radial-gradient(circle,var(--accent) 2.5px,transparent 3px) 0 50%/13px 6px repeat-x;transform-origin:0 50%}

/* card */
.card{background:var(--paperRaised);border-radius:20px;box-shadow:0 4px 14px var(--shadow)}

/* stage */
.stage{position:relative;overflow:hidden;background:var(--welcomeStage);border-radius:22px}
.stage::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:var(--welcomeStage2)}
.roads{position:absolute;left:0;top:0;width:100%;height:100%}
.roads g{fill:none;stroke:rgba(255,255,255,.055);stroke-linecap:round}
.droute{fill:none;stroke:var(--stageRoute);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 13}

/* stage art: the onboarding's own markup, a 390-wide canvas scaled by --s */
.art{position:absolute;overflow:visible;width:calc(390px * var(--s));height:calc(var(--ch) * var(--s))}
.art>.in{position:absolute;left:0;top:0;width:390px;height:var(--ch);transform:scale(var(--s));transform-origin:0 0}
.art--c{left:calc(50% - 195px * var(--s));top:calc(50% - var(--ch) * var(--s) / 2)}

/* button: PAButton secondary */
.btn{height:52px;padding:0 24px;border-radius:999px;background:var(--accent);color:var(--onAccent);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 15px/1 var(--fb);align-self:flex-start}
.btn svg{display:block;flex:none}
.btn path{fill:none;stroke:var(--onAccent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* alpha request: the button opens a field, built from the site's own parts —
   the pill button, the chip's raised fill and rim, the mono label */
.ask{display:flex;flex-direction:column;gap:12px}
.ask>summary{list-style:none;cursor:pointer;width:max-content;max-width:100%}
.ask>summary::-webkit-details-marker{display:none}
.ask[open]>summary{display:none}
.askf{display:flex;flex-direction:column;gap:12px}
.askrow{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
.askrow input{flex:1 1 220px;min-width:0;height:52px;padding:0 20px;border-radius:999px;
  background:var(--paperRaised);border:1px solid var(--rim);color:var(--ink);font:400 16px/1 var(--fb)}
.askrow input::placeholder{color:var(--inkFaint)}
/* The field's focus ring sits on its edge rather than 3 px outside it, so it
   doesn't crowd the label and the note. Same colour and weight as every
   other focus ring on the site. */
.askrow input:focus-visible{outline:2.5px solid var(--focus);outline-offset:-1px}
.askrow .btn{flex:none;border:0;cursor:pointer}
.askf.is-busy .btn{opacity:.6;cursor:progress}
.askf.is-sent .askrow,.askf.is-sent label{display:none}
.askf.is-sent .note{font:800 15px/1.4 var(--fb);color:var(--ink)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.chip{height:32px;padding:0 14px;border-radius:999px;background:var(--paperRaised);border:1px solid var(--rim);
  display:inline-flex;align-items:center;white-space:nowrap;font:700 11px/1 var(--fm);letter-spacing:.12em;color:var(--ink)}

/* mono labels */
.eyebrow{font:700 12px/1 var(--fm);letter-spacing:.14em;color:var(--inkFaint)}
.mono11{font:700 11px/1 var(--fm);letter-spacing:.14em;color:var(--inkFaint)}
.counter{font:800 10.5px/1 var(--fb);letter-spacing:.18em;color:var(--inkFaint)}

/* action area (State A) */
.act{display:flex;flex-direction:column;gap:8px}
.act .coming{font:800 20px/1.15 var(--fd);color:var(--ink)}
.act .go{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.act .note{font:400 13px/1.45 var(--fb);color:var(--inkFaint)}

/* PermissionRow */
.pr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;align-content:start}
.tile{width:40px;height:40px;border-radius:13px;background:var(--paperSunken);display:flex;align-items:center;justify-content:center}
.tile svg{display:block;flex:none}
.tile path,.g20 path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr .t{font:800 16px/1.2 var(--fd);color:var(--ink)}
.pr .b{font:400 13px/1.45 var(--fb);color:var(--inkSoft);margin-top:3px;text-wrap:pretty}

/* sticker (passport row) */
.stk{margin:0;display:flex;flex-direction:column;gap:10px;width:120px;flex:none}
.stk .face{width:120px;height:120px;border-radius:18px;border:5px solid var(--r);background:var(--stickerFill);position:relative;overflow:hidden;box-shadow:0 6px 14px var(--shadow);rotate:var(--tilt,0deg)}
.stk .face svg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%)}
.stk .face path{fill:none;stroke:var(--stickerGlyph);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stk .num{position:absolute;left:7px;bottom:8px;height:22px;padding:0 9px;border-radius:999px;background:var(--r);font:700 10px/22px var(--fm);letter-spacing:.08em;color:var(--onBright)}
.stk .edge{position:absolute;right:8px;bottom:9px;width:18px;height:18px;border-radius:50%;background:var(--stickerEdge);border:1px solid rgba(44,33,64,.14)}
.stk .ff{position:absolute;right:-1px;top:-1px;width:22px;height:22px;background:linear-gradient(225deg,var(--gold) 50%,transparent 50%)}
.stk figcaption{display:flex;flex-direction:column;gap:4px}
.stk .n{font:800 14px/1.15 var(--fd);color:var(--ink)}
.stk .r{font:700 10px/1 var(--fm);letter-spacing:.1em;color:var(--inkFaint)}
.rC{--r:var(--common)}.rR{--r:var(--rare)}.rE{--r:var(--epic)}.rL{--r:var(--legendary)}

/* footer */
.foot{position:relative;z-index:1;background:var(--paperSunken)}
.foot .wrap{padding-top:36px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}
.foot .col1{display:flex;flex-direction:column;gap:10px}
.foot .fb{display:flex;align-items:center;gap:10px;font:800 18px/1 var(--fd);color:var(--ink)}
.foot .fb .icon{width:24px;height:24px;border-radius:5.4px}
.foot .small{font:400 13px/1.6 var(--fb);color:var(--inkFaint)}
.foot .col2{display:flex;flex-direction:column;gap:12px;font:400 13px/1.6 var(--fb);color:var(--inkFaint)}
.foot .h{font:800 13px/1.4 var(--fb);color:var(--ink)}
.foot .col3{font:400 13px/1.6 var(--fb);color:var(--inkFaint);text-wrap:pretty}
.foot .col3 .h{margin-bottom:4px}
.foot a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.foot a.fb{color:var(--ink);text-decoration:none}

/* ── 5 · Landing ── */
/* 1 hero */
.hero{display:flex;flex-direction:column;gap:32px}
.hero-vis{display:contents}
.hero .stage{order:0;width:100%;height:340px;container:hstage/inline-size}
.hero .copy{order:1;display:flex;flex-direction:column;gap:20px;min-width:0}
.hero .shot{order:2;align-self:center}
.hero h1{font:800 34px/1.05 var(--fd);color:var(--ink);text-wrap:balance}
.hero .lede{font:400 16px/1.5 var(--fb);color:var(--inkSoft);max-width:440px;text-wrap:pretty}
.hero .act{margin-top:8px}
.art--hero{--s:.763;--ch:435px;left:calc(50% - 195px * var(--s));top:4px}
.shot img{width:232px;height:auto;aspect-ratio:232/504;border-radius:32px;box-shadow:0 0 0 1px var(--rim),0 4px 14px var(--shadow);rotate:-2deg}

/* 2 four stops */
.how{padding-top:64px;display:flex;flex-direction:column;gap:28px}
.stops{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0;list-style:none}
.stop{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.stop .stage{border-radius:0;height:168px;container-type:inline-size}
.stop .txt{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px}
.stop h3{font:800 20px/1.15 var(--fd);color:var(--ink)}
.stop p{font:400 14px/1.5 var(--fb);color:var(--inkSoft);text-wrap:pretty}
.a-w{--ch:435px;--hs:.349}.a-1{--ch:420px;--hs:.362}.a-2{--ch:212px;--hs:.717}.a-3{--ch:242px;--hs:.628}
.stop .art{--s:min(var(--hs),var(--ws,1))}

/* 3 passport */
.passport{padding-top:64px;display:flex;flex-direction:column;gap:32px}
.pl{display:flex;flex-direction:column;gap:28px;min-width:0}
.body17{font:400 16px/1.5 var(--fb);color:var(--inkSoft);text-wrap:pretty}
.pl>.body17{max-width:620px}
.stks{display:grid;grid-template-columns:120px 120px;gap:20px 28px;justify-content:center;padding:0;list-style:none}
.points{display:flex;flex-direction:column;gap:16px;padding:0;list-style:none}
.points .tile{background:var(--paperRaised)}
.rarity{padding:18px 16px;display:flex;flex-direction:column;gap:16px}
.rarity .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rarity .hd span:last-child{font:400 13px/1.4 var(--fb);color:var(--inkSoft)}
.rb{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:8px;padding:0;list-style:none}
.rb::before{content:"";position:absolute;left:38px;right:12%;bottom:48px;height:5px;background:radial-gradient(circle,var(--rarityDots) 2.3px,transparent 2.7px) 0 50%/13px 5px repeat-x}
.rb li{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.rb .bub2{width:var(--d);height:var(--d);border-radius:50%;background:color-mix(in oklch,var(--r) 24%,var(--paperRaised));border:3px solid var(--r);display:flex;align-items:center;justify-content:center;font:700 var(--f)/1 var(--fm);color:var(--ink)}
.rb .rL .bub2{box-shadow:0 0 0 6px color-mix(in oklch,var(--r) 18%,transparent)}
.rb .rC{--d:76px;--f:15px}.rb .rR{--d:60px;--f:12px}.rb .rE{--d:44px;--f:10px}.rb .rL{--d:30px;--f:10px}
.rb .cap{text-align:center}
.rb .cap b{display:block;font:800 14px/1.15 var(--fd);color:var(--ink)}
.rb .cap span{display:block;font:400 12px/1.3 var(--fb);color:var(--inkSoft)}
.pr-col{display:flex;flex-direction:column;gap:16px}
.plate{width:100%;background:var(--plate);border-radius:26px;padding:24px 18px;box-shadow:var(--plateEdge)}
.plate .k{font:800 9px/1 var(--fb);letter-spacing:.18em;color:var(--plateText);margin-bottom:12px}
.plate .t{font:800 25px/1 var(--fd);color:var(--ink);margin-bottom:22px}
.slots{display:flex;justify-content:space-between;align-items:flex-start;height:96px;border-bottom:1px solid var(--plateLine);margin-bottom:16px;padding:0;list-style:none}
.slot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paperSunken);border:1.5px dashed var(--plateDash)}
.slot svg{fill:none;stroke:var(--plateDashGlyph);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.slot.got{background:var(--plateGold);border:3px solid var(--plateGoldEdge);box-shadow:0 4px 10px var(--plateGoldShadow)}
.slot.got svg{stroke:#241B33}
.plate .of{font:700 26px/1 var(--fm);color:var(--ink);margin-bottom:12px}
.plate .note{font:400 12.5px/1.55 var(--fb);color:var(--plateText);text-wrap:pretty}
.pages{width:100%;aspect-ratio:358/232;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--rim),0 4px 14px var(--shadow)}
.pages img{width:100%;height:100%;object-fit:cover}

/* 4 walks */
.walks{padding-top:64px;display:flex;flex-direction:column;gap:28px}
.wl{display:flex;flex-direction:column;gap:22px;min-width:0}
.wl>.body17{max-width:520px}
.fig{max-width:452px;border-radius:24px;padding:0 6px}
.fig .row{display:flex;height:68px;padding:14px 0}
.fig .hr{height:1px;background:var(--rimFaint);margin:0 12px}
.fig .c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.fig .c+.c{border-left:1px solid var(--rimFaint)}
.fig .v{font:700 19px/1 var(--fm);color:var(--ink);white-space:nowrap}
.fig .u{font:400 11px/1 var(--fb);color:var(--inkSoft);min-height:11px}
.fine{font:400 13px/1.45 var(--fb);color:var(--inkFaint);max-width:440px;text-wrap:pretty}
.route{position:relative;width:100%;max-width:440px;height:150px;border-radius:20px;overflow:hidden;
  background:var(--paperRaised) radial-gradient(circle,var(--rimFaint) 1px,transparent 1.4px) 0 0/13px 13px;box-shadow:0 4px 14px var(--shadow)}
.route svg{position:absolute;inset:0;width:100%;height:100%}
.route .rd{display:none}
.route path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 13}
.route .ms,.route .pin{position:absolute;left:0;top:0;offset-path:path("M24 120 C 71.6 30, 121.72 142.5, 179 82.5 S 272.08 18, 334 54");offset-rotate:0deg}
.route .ms{width:30px;height:30px;border-radius:9px;border:3px solid var(--r);background:var(--stickerFill)}
.route .m1{offset-distance:25%;rotate:-6deg}.route .m2{offset-distance:50%;rotate:6deg}.route .m3{offset-distance:74%;rotate:-6deg}
.route .pin{width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid var(--stickerEdge);box-shadow:0 3px 8px var(--shadow);offset-distance:88%}
.route .tm{position:absolute;font:700 10px/1 var(--fm);letter-spacing:.12em;color:var(--inkFaint)}
.route .t1{left:14px;top:12px}.route .t2{right:14px;bottom:12px}
.fan{position:relative}
.fan .sc{display:block;border-radius:16px;box-shadow:0 0 0 1px var(--rimFaint),0 18px 40px var(--shadow);overflow:hidden}
.fan .sc img{width:100%;height:100%}
.fan .s916{display:none}
.fan .s45{width:100%;aspect-ratio:4/5;rotate:-1.5deg;border-radius:17.9px}

/* 5 countries */
.where{padding-top:64px;display:flex;flex-direction:column;gap:24px}
.where .hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.where .hd p{font:400 15px/1.5 var(--fb);color:var(--inkSoft);max-width:440px;text-wrap:pretty}
.cc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;list-style:none}
.cc li{padding:14px;display:flex;align-items:center;gap:12px;min-width:0}
.cc .code{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font:800 15px/1 var(--fd);color:var(--ink);
  background:color-mix(in srgb,var(--h) 35%,var(--paperRaised))}
.cc .nm{font:800 18px/1.1 var(--fd);color:var(--ink)}

/* 6 yours, not ours */
.yours{padding-top:64px;display:flex;flex-direction:column;gap:28px}
.yours .card{padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;list-style:none;margin:0}
.more{font:800 15px/1 var(--fb);color:var(--accent);padding:14.5px 0;margin:-2.5px 0;align-self:flex-start}

/* 7 questions */
.qs{padding-top:48px;display:flex;flex-direction:column;gap:28px}
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.faq .card{overflow:hidden;min-width:0}
.faq .card:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0}
.faq .card+.card{border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid var(--rimFaint);clip-path:inset(0 -40px -40px -40px)}
.faq details+details{border-top:1px solid var(--rimFaint)}
.faq summary{min-height:56px;padding:14px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;transition:background .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1;font:800 15px/1.3 var(--fb);color:var(--ink)}
.faq summary svg{display:block;flex:none;transition:rotate .2s}
.faq summary path{fill:none;stroke:var(--inkFaint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faq details[open] summary svg{rotate:90deg}
.faq .ans{background:var(--paperSunken);padding:14px 20px 18px;font:400 14px/1.55 var(--fb);color:var(--inkSoft);text-wrap:pretty}

/* 8 closing */
.close{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:28px}
.strip{width:100%;height:180px}
.strip svg.r{position:absolute;left:0;top:0;width:100%;height:100%}
.strip .rd{display:none}
.strip .head{position:absolute;left:20px;top:24px;right:110px;font:800 27px/1.14 var(--fd);color:var(--onStage);text-wrap:balance}
.strip .wd{position:absolute;right:-4px;top:58px;width:78px;height:96px}
.strip .wd svg{display:block;overflow:visible;width:100%;height:100%;animation:wbob 3.6s ease-in-out infinite}
.strip .sh2{position:absolute;right:-13.76px;top:149.26px;width:71.76px;height:9.75px;border-radius:50%;background:rgba(8,4,14,.35)}
.strip .mini{display:none}

/* ── 6 · Privacy page ── */
.prog{display:none}
.ph{padding-top:4px}
.ph .stage{width:100%;height:400px}
.ph .txt{position:absolute;left:20px;right:20px;bottom:24px;display:flex;flex-direction:column;gap:12px}
.ph .eyebrow{color:var(--onStageDim)}
.ph h1{font:800 34px/1.05 var(--fd);color:var(--onStage)}
.ph .who{font:400 15px/1.55 var(--fb);color:var(--onStageDim);max-width:420px}
.ph .who a{color:var(--onStage);text-decoration:underline;text-underline-offset:2px}
.art--ph{--s:.84;--ch:212px;left:calc(50% - 195px * var(--s));top:6px}
.short{padding-top:32px;display:flex;flex-direction:column;gap:20px}
.short h2{font:800 20px/1.15 var(--fd);color:var(--ink)}
.short .card{display:grid;grid-template-columns:minmax(0,1fr);padding:0;margin:0;list-style:none}
.short .card>li{padding:16px 18px}
.short .card>li+li{border-top:1px solid var(--rimFaint)}
.short .lead{max-width:720px;margin-top:18px;font:400 16px/1.6 var(--fb);color:var(--inkSoft);text-wrap:pretty}
.pbody{padding-top:20px;padding-bottom:40px;display:flex;flex-direction:column;gap:12px}
.toc{min-width:0}
.toc-m{background:var(--paperRaised);border-radius:20px;box-shadow:0 4px 14px var(--shadow)}
.toc-d{display:none}
.toc summary{min-height:56px;padding:0 20px;display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary .l{flex:1;font:800 15px/1 var(--fb);color:var(--ink)}
.toc summary .n{font:700 11px/1 var(--fm);color:var(--inkFaint)}
.toc summary svg{transition:rotate .2s}
.toc summary path{fill:none;stroke:var(--inkFaint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toc details[open] summary svg{rotate:90deg}
.toc ol{list-style:none;margin:0;padding:0 14px 14px}
.toc a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px;align-items:baseline;padding:7px 8px;border-radius:12px;transition:background .2s}
.toc a .n{font:700 11px/1 var(--fm);color:var(--inkFaint)}
.toc a .l{font:700 13.5px/1.3 var(--fb);color:var(--inkSoft)}
.toc a[aria-current]{background:var(--paperSunken)}
.toc a[aria-current] .n{color:var(--accent)}
.toc a[aria-current] .l{font-weight:800;color:var(--ink)}
.secs{display:flex;flex-direction:column;gap:12px;min-width:0}
.ps{padding:20px;scroll-margin-top:16px}
.ps .hd{display:flex;align-items:center;gap:14px}
.ps .no{width:40px;height:40px;border-radius:13px;background:var(--paperSunken);display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--fm);color:var(--accent);flex:none}
.ps h2{font:800 20px/1.15 var(--fd);color:var(--ink)}
.insh{margin-top:16px;background:var(--paperSunken);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.insh .k{font:700 10px/1 var(--fm);letter-spacing:.14em;color:var(--inkFaint)}
.insh .v{font:700 15px/1.45 var(--fb);color:var(--ink);text-wrap:pretty}
.prose{margin-top:18px;font:400 17px/1.6 var(--fb);color:var(--inkSoft)}
.prose>*+*{margin-top:.9em}
.prose ul{padding-left:1.2em}
.prose li+li{margin-top:.45em}
.prose strong{font-weight:800;color:var(--ink)}
.prose a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.prose code{font:600 .88em/1 var(--fm);background:var(--paperSunken);border-radius:6px;padding:2px 6px}
.ps.dark{position:relative;overflow:hidden;background:var(--welcomeStage);padding:32px;box-shadow:none}
.ps.dark::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:var(--welcomeStage2)}
.ps.dark>*{position:relative}
.ps.dark .no{background:rgba(255,255,255,.14);color:var(--onStage)}
.ps.dark h2{font:800 30px/1.1 var(--fd);color:var(--onStage)}
.dont{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dont li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;background:rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;font:700 15px/1.45 var(--fb);color:var(--onStage)}
.dont li>span:first-child{padding-top:1px}
.dont path{fill:none;stroke:var(--onStageDim);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dont b{font-weight:800}
.log{margin-top:20px;position:relative;padding-left:22px;display:flex;flex-direction:column;gap:14px;list-style:none}
.log::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:3px;background:radial-gradient(circle,var(--accent) 1.4px,transparent 1.6px) 0 0/3px 9px}
.log li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start;position:relative}
.log li::before{content:"";position:absolute;left:-22px;top:4.75px;width:13px;height:13px;border-radius:50%;background:var(--paperRaised);border:2.5px solid var(--accent)}
.log li:first-child::before{background:var(--accent)}
.log .d{font:700 11px/1 var(--fm);color:var(--inkFaint);padding-top:5.75px}
.log .w{font:400 15px/1.5 var(--fb);color:var(--inkSoft)}
.totop{height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rim);background:var(--paperRaised);display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--fb);color:var(--accent);align-self:flex-start}
.totop path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── 7 · 404 ── */
.nf{padding-bottom:64px;display:flex;flex-direction:column;gap:24px}
.nf .stage{width:100%;height:320px}
.nf svg.r{position:absolute;inset:0;width:100%;height:100%}
.nf .rd{display:none}
.nf .wd{position:absolute;left:calc(45% + 10px);top:120px;width:84px;height:103px}
.nf .wd svg{display:block;overflow:visible;width:100%;height:100%;animation:wbob 3.6s ease-in-out infinite}
.nf .sh2{position:absolute;left:calc(45% + 14px);top:218.28px;width:77.28px;height:10.5px;border-radius:50%;background:rgba(8,4,14,.35)}
.nf .copy{display:flex;flex-direction:column;gap:12px}
.nf h1{font:800 34px/1.05 var(--fd);color:var(--ink)}
.nf p{font:400 16px/1.6 var(--fb);color:var(--inkSoft)}
.nf p a{font-weight:800}

/* ── 8 · ≥ 900: the 1280 layout ── */
@media (min-width:900px){
  .trail .tm{display:none}.trail .td{display:inline}
  .b1{top:3%;right:-60px;width:180px;height:180px}
  .b2{top:16%;left:-40px;width:120px;height:120px}
  .b3{top:31%;right:-30px;width:90px;height:90px}
  .b4{top:44%;left:-70px;width:200px;height:200px}
  .b5{display:block;top:58%;right:-50px;width:140px;height:140px}
  .b6{display:block;top:72%;left:-30px;width:100px;height:100px}
  .b7{display:block;top:86%;right:-60px;width:160px;height:160px}
  .wrap{max-width:1280px;padding-inline:72px}
  .top{height:72px}
  .top .solo{display:none}
  .top nav{display:flex;align-items:center;gap:4px}
  .top nav a{height:44px;padding:0 14px;border-radius:999px;display:flex;align-items:center;font:800 15px/1 var(--fb);color:var(--ink);transition:background .2s}
  .top nav a.pv{color:var(--accent)}
  .sh h2{font-size:34px;line-height:1.05}
  .sh .ul{width:130px}
  .body17{font-size:17px;line-height:1.6}

  .hero{padding-top:4px;display:grid;grid-template-columns:minmax(0,1fr) min(620px,55%);gap:40px;align-items:center}
  .hero .copy{gap:22px}
  .hero h1{font-size:52px}
  .hero .lede{font-size:17px;line-height:1.6}
  .hero .act{margin-top:8px}
  .hero-vis{display:block;position:relative;order:1;container:hero/inline-size}
  .hero .stage{height:560px}
  .hero .copy{order:0}
  .art--hero{--s:.86;left:4px;top:94px}
  .hero .shot{position:absolute;right:32px;top:24px}
  .shot img{width:224px;border-radius:31px;rotate:3deg}

  .how{padding-top:104px;gap:32px}
  .stops{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .stop .stage{height:180px}
  .a-w{--hs:.377}.a-1{--hs:.39}.a-2{--hs:.774}.a-3{--hs:.678}

  .passport{padding-top:104px;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:48px;align-items:start}
  .pl{gap:32px}
  .stks{display:flex;gap:20px;justify-content:flex-start}
  .points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .rarity{padding:22px 24px 20px}
  .rb::before{left:56px;bottom:52px}
  .rb .rC{--d:112px;--f:22px}.rb .rR{--d:84px;--f:17px}.rb .rE{--d:60px;--f:12px}.rb .rL{--d:40px;--f:10px}
  .plate{width:390px}
  .pages{width:390px;aspect-ratio:390/252}

  .walks{padding-top:104px;display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:40px;align-items:start}
  .wl{gap:28px}
  .route{width:440px}
  .route .rm{display:none}.route .rd{display:block}
  .route .ms,.route .pin{offset-path:path("M24 120 C 88 30, 149.6 142.5, 220 82.5 S 334.4 18, 416 54")}
  .fan{width:540px;height:660px}
  .fan .sc{position:absolute;width:320px}
  .fan .s916{display:block;right:0;top:0;aspect-ratio:320/569;rotate:4deg}
  .fan .s45{left:0;top:260px;aspect-ratio:320/400;rotate:-5deg;border-radius:16px}

  .where{padding-top:104px;gap:28px}
  .cc{grid-template-columns:repeat(6,minmax(0,1fr))}

  .yours{padding-top:104px;gap:32px}
  .yours .card{padding:28px;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}

  .qs{padding-top:88px;gap:32px}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .faq .card:first-child,.faq .card+.card{border-radius:20px;border-top:0;clip-path:none}

  .close{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:center}
  .strip{height:220px}
  .strip .rm{display:none}.strip .rd{display:inline}
  .strip .head{left:40px;top:44px;right:auto;width:360px;font-size:34px;line-height:1.05}
  .strip .wd{right:14px;top:70px;width:96px;height:118px}
  .strip .sh2{right:17.68px;top:182.32px;width:88.32px;height:12px}
  .strip .mini{display:block;position:absolute;width:120px;height:120px}
  .strip .mini .stk{transform:scale(.42);transform-origin:0 0}
  .strip .mi1{left:60%;top:30px;rotate:-8deg}
  .strip .mi2{left:72%;top:118px;rotate:6deg}

  .foot .wrap{padding-top:48px;padding-bottom:48px;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:40px}

  /* privacy */
  .ph .stage{height:300px}
  .ph .txt{left:44px;right:auto;top:0;bottom:0;justify-content:center}
  .ph h1{font-size:52px}
  .ph .who{font-size:17px}
  .art--ph{--s:1.2;left:auto;right:32px;top:20px}
  .short{padding-top:28px}
  .short h2{font-size:24px}
  .short .card{grid-template-columns:repeat(5,minmax(0,1fr))}
  .short .card>li{padding:22px 20px}
  .short .card>li+li{border-top:0;border-left:1px solid var(--rimFaint)}
  .short .pr{grid-template-columns:minmax(0,1fr)}
  .short .lead{font-size:17px}
  .pbody{padding-top:32px;padding-bottom:64px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
  .toc{position:sticky;top:20px}
  .toc-m{display:none}
  .toc-d{display:block;padding:18px 14px}
  .toc .hdr{display:flex;align-items:center;justify-content:space-between;padding:0 8px 10px}
  .toc .hdr span:first-child{font:800 10.5px/1 var(--fb);letter-spacing:.18em;color:var(--inkFaint)}
  .toc .hdr span:last-child{font:700 11px/1 var(--fm);color:var(--inkFaint)}
  .toc-d ol{padding:0}
  .secs{gap:16px}
  .ps{padding:28px}
  .ps h2{font-size:24px}
  .dont{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* 404 */
  .nf .stage{height:380px}
  .nf{gap:32px;padding-top:4px}
  .nf .rm{display:none}.nf .rd{display:inline}
  .nf .wd{left:calc(45% + 9.8px);top:130px;width:110px;height:135px}
  .nf .sh2{left:calc(45% + 13.8px);top:258.7px;width:101.2px;height:13.75px}
  .nf h1{font-size:52px}
  .nf p{font-size:17px}
}

/* the hero visual between 900 and ~1200: the 620 stage narrows, so the art
   and the screenshot step down instead of overlapping */
@container hero (max-width:579px){.art--hero{--s:.72}.hero .shot img{width:190px;border-radius:26px}}
@container hero (max-width:499px){.art--hero{--s:.6}.hero .shot img{width:170px;border-radius:23px}}
@container hero (max-width:439px){.art--hero{--s:.54}.hero .shot img{width:160px;border-radius:22px}}
/* phone hero stage at 320 */
@container hstage (max-width:305px){.art--hero{--s:.718}}

/* step-card art fits the narrower of its two limits: (stage − 16) / crop
   height, and (card − 16) / 390. Width buckets for the second. */
@container (max-width:343px){.stop .art{--ws:.836}}
@container (max-width:327px){.stop .art{--ws:.795}}
@container (max-width:311px){.stop .art{--ws:.754}}
@container (max-width:295px){.stop .art{--ws:.713}}
@container (max-width:279px){.stop .art{--ws:.672}}
@container (max-width:271px){.stop .art{--ws:.651}}
@container (max-width:263px){.stop .art{--ws:.631}}
@container (max-width:255px){.stop .art{--ws:.610}}
@container (max-width:247px){.stop .art{--ws:.590}}
@container (max-width:239px){.stop .art{--ws:.569}}
@container (max-width:231px){.stop .art{--ws:.549}}
@container (max-width:223px){.stop .art{--ws:.528}}
@container (max-width:215px){.stop .art{--ws:.508}}
@container (max-width:207px){.stop .art{--ws:.487}}
@container (max-width:199px){.stop .art{--ws:.467}}
@container (max-width:191px){.stop .art{--ws:.446}}
@container (max-width:183px){.stop .art{--ws:.426}}
@container (max-width:175px){.stop .art{--ws:.405}}

/* ── 9 · Hover, pointer devices only ── */
@media (hover:hover){
  .hv{transition:translate .25s var(--ease),rotate .25s var(--ease),scale .25s var(--ease)}
  .btn:hover{translate:0 -2px;scale:1.03}
  .chip:nth-child(odd):hover{rotate:-3deg;scale:1.06}
  .chip:nth-child(even):hover{rotate:3deg;scale:1.06}
  .top nav a:hover,.faq summary:hover,.toc a:hover{background:var(--paperSunken)}
  .stop:nth-child(odd):hover{translate:0 -6px;rotate:-1deg}
  .stop:nth-child(even):hover{translate:0 -6px;rotate:1deg}
  .stks li:nth-child(odd) .face:hover{rotate:5deg;scale:1.07;translate:0 -4px}
  .stks li:nth-child(even) .face:hover{rotate:-4deg;scale:1.07;translate:0 -4px}
  .pr .tile:hover{rotate:-8deg;scale:1.1}
  .rb .bub2:hover{scale:1.12;rotate:-6deg}
  .fan .sc:hover{rotate:0deg;translate:0 -6px}
  .cc li:nth-child(odd):hover{translate:0 -4px;rotate:-1.5deg}
  .cc li:nth-child(even):hover{translate:0 -4px;rotate:1.5deg}
  .totop:hover{translate:0 -2px}
}

/* ── 10 · Motion ── */
@keyframes wbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes wrise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes wpop{0%{opacity:0;scale:.6}70%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}
@keyframes wspin{0%{opacity:0;scale:.4;rotate:-25deg}70%{opacity:1;scale:1.1;rotate:6deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes wtiltL{from{opacity:0;translate:-24px 40px;rotate:-7deg}}
@keyframes wtiltR{from{opacity:0;translate:24px 40px;rotate:7deg}}
@keyframes wdrop{from{opacity:0;translate:0 -40px;scale:1.15}to{opacity:1;translate:0 0;scale:1}}
@keyframes wwalk{from{translate:-260px 0}to{translate:0 0}}
@keyframes wmarch{to{stroke-dashoffset:-26}}
@keyframes wtrail{to{stroke-dashoffset:-1300}}
@keyframes wdrift{from{translate:0 0}to{translate:18px -26px}}
@keyframes wline{from{scale:0 1}to{scale:1 1}}
@keyframes wpath{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes wprog{from{scale:0 1}to{scale:1 1}}

/* always-on and on-load motion */
.droute,.route path{animation:wmarch 1.4s linear infinite}
.bub{animation:wdrift var(--dd) ease-in-out var(--dl) infinite alternate}
.b1{--dd:9s;--dl:0s}.b2{--dd:10.3s;--dl:.7s}.b3{--dd:11.6s;--dl:1.4s}.b4{--dd:12.9s;--dl:2.1s}.b5{--dd:14.2s;--dl:2.8s}.b6{--dd:15.5s;--dl:3.5s}.b7{--dd:16.8s;--dl:4.2s}
.rise{animation:wrise .7s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.hero .shot{animation:wrise .9s cubic-bezier(.2,.7,.2,1) .45s both}
.hs1{animation:wdrop .8s cubic-bezier(.2,.8,.2,1.15) .25s both,wfloat 3.6s ease-in-out 1.3s infinite}
.hs2{animation:wdrop .8s cubic-bezier(.2,.8,.2,1.15) .4s both,wfloat 4.3s ease-in-out 1.45s infinite}
.hs3{animation:wdrop .8s cubic-bezier(.2,.8,.2,1.15) .55s both,wfloat 5s ease-in-out 1.6s infinite}
.strip .mi1{animation:wfloat 3.8s ease-in-out infinite}
.strip .mi2{animation:wfloat 4.6s ease-in-out infinite}

/* scroll-driven: only where supported; elsewhere everything sits in its final state */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .trail path{animation:wtrail linear both;animation-timeline:scroll(root)}
    .rv{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .sh{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .sh .ul{animation:wline linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
    .stks .face{animation:wspin linear both;animation-timeline:view();animation-range:entry calc(var(--i)*12%) entry calc(40% + var(--i)*12%)}
    .points>li{animation:wrise linear both;animation-timeline:view();animation-range:entry calc(var(--i)*10%) entry calc(40% + var(--i)*10%)}
    .rb .bub2{animation:wpop linear both,wfloat calc(3.4s + var(--i)*.6s) ease-in-out calc(var(--i)*.3s) infinite;animation-timeline:view(),auto;animation-range:entry calc(10% + var(--i)*10%) entry calc(45% + var(--i)*10%),normal}
    .slot.got{animation:wspin linear both;animation-timeline:view();animation-range:entry calc(30% + var(--k)*12%) cover calc(45% + var(--k)*12%)}
    .pages{animation:wrise linear both;animation-timeline:view();animation-range:entry 10% entry 50%}
    .fig{animation:wpop linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .route .ms{animation:wspin linear both;animation-timeline:view();animation-range:entry calc(30% + var(--i)*12%) cover calc(50% + var(--i)*10%)}
    .route{view-timeline:--route block}
    .route .pin{animation:wpath linear both;animation-timeline:--route;animation-range:entry 10% exit 30%}
    .fan .sc{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .cc li{animation:wpop linear both;animation-timeline:view();animation-range:entry calc(var(--i)*6%) entry calc(30% + var(--i)*6%)}
    .yours .card>li{animation:wrise linear both;animation-timeline:view();animation-range:entry calc(var(--m)*10%) entry calc(40% + var(--m)*10%)}
    .faq .card{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .faq .card+.card{animation-range:entry 10% entry 55%}
    .strip{view-timeline:--strip block}
    .strip .wd{animation:wwalk linear both;animation-timeline:--strip;animation-range:entry 10% cover 55%}
    .prog{display:block;position:sticky;top:0;z-index:5;height:3px;background:var(--rimFaint)}
    .prog i{display:block;height:3px;background:var(--accent);transform-origin:0 50%;animation:wprog linear both;animation-timeline:scroll(root)}
    .short .card{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .ps{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    .dont li{animation:wpop linear both;animation-timeline:view();animation-range:entry calc(var(--j)*8%) entry calc(30% + var(--j)*8%)}
    /* phone: the four stops rise in one by one. The handoff stacked them
       (sticky, 14 px apart), but on a real phone the earlier cards' art
       peeked out in slivers and read as broken (Solen, 6 Oct). */
    .stop{animation:wrise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @media (min-width:900px){
      .stop{position:static;animation:wtiltL linear both;animation-timeline:view();animation-range:entry calc(var(--i)*10%) entry calc(45% + var(--i)*10%)}
      .stop:nth-child(even){animation-name:wtiltR}
      .fan .s916{animation:wtiltR linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
      .fan .s45{animation:wtiltL linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
    }
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── 11 · Print (privacy) ── */
@media print{
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .trail,.bub,.prog,.toc,.totop,.ph .art,.ph .stage::before,.roads,.top nav,.top .solo,.skip,.foot{display:none!important}
  .card,.ps,.ps.dark,.ph .stage,.short .card{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
  .ph .stage{height:auto}.ph .txt{position:static}
  .ph h1,.ph .who,.ph .who a,.ph .eyebrow,.ps.dark h2,.dont li,.prose,.prose strong,h1,h2,h3{color:#000!important}
  .ps.dark::before{display:none}
  .dont li{background:none}
  .prose{font-size:11pt;line-height:1.5}
  h1,h2,h3,.ps .hd{break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"}
  .pbody{display:block}.secs{gap:18pt}
}