/* seo-page.css — the arcade's static pages (/games/<id>/, /games/, /nl/), written by scripts/seo-pages.js.
   The front page's look on a page of its own: the arcade's tokens (the same names as style.css, so the
   player's chosen look from skins.js lays straight over them), warm beige or warm ink by light and dark,
   VT323 and Silkscreen for headings and labels, a rounded, readable face for the long words, hard pixel
   edges and block shadows. Not used by the app itself. */
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/silkscreen-400.woff2) format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/vt323-400.woff2) format("woff2")}

/* ── tokens: Pixel dark, then Pixel light (as style.css) ── */
:root{
  --bg:#0b0a0d;--bg-2:#16131a;--panel-solid:#1d1922;--line:rgba(184,175,164,.20);--line-hot:rgba(245,158,11,.45);
  --ink:#f5f1ea;--ink-dim:#c9c0b4;--ink-faint:#978e83;--brand:#f59e0b;--brand-2:#a78bfa;--brand-ink:#f5b13d;--on-brand:#0b0a0d;
  --brand-rgb:245,158,11;--grid-rgb:222,215,204;
  --p1:#48c8dd;--p2:#e05b7a;--p3:#9ec95a;--p4:#e39a48;
  --r-sm:0px;--r:0px;--r-lg:0px;
  --shadow:4px 4px 0 rgba(0,0,0,.45);--block:6px 6px 0 rgba(0,0,0,.45);
  --logo-glow:1;--logo-glow-color:#f59e0b;--logo-bulb:#d9a441;--logo-glass-hi:#fffdf6;--logo-glass-lo:#f8e3b6;--logo-face:#8a6a3b;
  --pix:"Silkscreen","VT323",ui-monospace,monospace;
  --head:"VT323","Silkscreen",ui-monospace,monospace;
  --read:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --cta-bg:#f6a623;--cta-hi:#ffc65c;--cta-ink:#2a1804;--cta-edge:#7a4307;--cta-shadow:rgba(122,67,7,.38);
  --tv-body:#c98a4b;--tv-hi:#e4ac6c;--tv-lo:#9c602f;--tv-edge:#3a2416;--tv-shadow:rgba(58,36,22,.32);
  --u:4px;--max:72rem;--measure:66ch;
  /* reading colours from the ink of the look in use (also a skins.js one): about 9:1 and 6:1 on page and card */
  --text:color-mix(in srgb,var(--ink) 86%,var(--bg));--mute:color-mix(in srgb,var(--ink) 78%,var(--bg));
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ece5d8;--bg-2:#ded5c4;--panel-solid:#f6f1e8;--line:rgba(90,74,54,.24);--line-hot:rgba(180,83,9,.45);
  --ink:#2b2536;--ink-dim:#4f4659;--ink-faint:#605769;--brand:#b45309;--brand-2:#7c3aed;--brand-ink:#8a5200;--on-brand:#fff;
  --brand-rgb:180,83,9;--grid-rgb:90,74,54;
  --p1:#0f6f7a;--p2:#b03050;--p3:#4a6b1e;--p4:#8c5210;
  --shadow:4px 4px 0 rgba(90,74,54,.30);--block:6px 6px 0 rgba(90,74,54,.30);
  --logo-glow:0;--logo-bulb:#a86f18;--logo-glass-hi:#fffaec;--logo-glass-lo:#f2d79c;--logo-face:#6b4d22;
  --tv-shadow:rgba(90,58,30,.28);
  color-scheme:light;
}
/* without the script (or before it runs): the system's choice */
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --bg:#ece5d8;--bg-2:#ded5c4;--panel-solid:#f6f1e8;--line:rgba(90,74,54,.24);--line-hot:rgba(180,83,9,.45);
  --ink:#2b2536;--ink-dim:#4f4659;--ink-faint:#605769;--brand:#b45309;--brand-ink:#8a5200;--on-brand:#fff;--brand-rgb:180,83,9;--grid-rgb:90,74,54;
  --shadow:4px 4px 0 rgba(90,74,54,.30);--block:6px 6px 0 rgba(90,74,54,.30);--logo-glow:0;--logo-bulb:#a86f18;color-scheme:light}}
/* a chosen look (skins.js) brings its own face: headings in it, and the long words too, unless it is a monospace one */
html[data-skin]{--head:var(--display);--pix:var(--display);--read:var(--font);--cta-bg:var(--brand);--cta-ink:var(--on-brand);--cta-shadow:rgba(var(--brand-rgb),.35);
  --tv-body:var(--panel-solid);--tv-hi:var(--panel-solid);--tv-lo:var(--line);--tv-edge:var(--line)}
html[data-skin="neon"]{--read:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.65 var(--read);overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 40% at 15% 0%,rgba(var(--brand-rgb),.09),transparent 70%),radial-gradient(ellipse 60% 35% at 90% 6%,rgba(167,139,250,.07),transparent 70%);
  background-repeat:no-repeat}
img,video{max-width:100%}
/* links in the ink colour, marked by a thick amber underline */
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-color:var(--brand)}
a:hover{color:var(--brand-ink);text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
b,strong{font-weight:700;color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3{font-family:var(--head);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
html[data-skin] h1,html[data-skin] h2{font-weight:700;letter-spacing:-.02em}

/* ── the bar ── */
.top{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.4rem;max-width:var(--max);margin:0 auto;
  padding:max(1rem,env(safe-area-inset-top,0px)) max(1.25rem,env(safe-area-inset-right,0px)) .5rem max(1.25rem,env(safe-area-inset-left,0px))}
.brand{display:inline-flex;align-items:flex-end;gap:.55rem;color:var(--ink);text-decoration:none}
.brand .hl-lockup{display:block;height:2.4rem;width:auto;color:var(--ink)}
.brand-tag{font-family:var(--pix);font-size:.6rem;letter-spacing:.2em;padding:.35em .55em .3em;border:2px solid var(--line);margin-bottom:.15rem;color:var(--ink)}
html[data-skin] .brand-tag{border-radius:999px}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.1rem;font-family:var(--pix);font-size:.68rem;letter-spacing:.04em}
.top nav a{color:var(--text);text-decoration:none;padding:.5rem 0}
.top nav a:hover{color:var(--ink)}
.go{display:inline-flex;align-items:center;padding:.6rem .95rem !important;color:var(--cta-ink) !important;background:var(--cta-bg);text-decoration:none;
  box-shadow:0 calc(-1*var(--u)/2) 0 0 var(--cta-edge),0 calc(var(--u)/2) 0 0 var(--cta-edge),calc(-1*var(--u)/2) 0 0 0 var(--cta-edge),calc(var(--u)/2) 0 0 0 var(--cta-edge),3px 4px 0 2px var(--cta-shadow)}
.go:hover{background:#ffb436}
html[data-skin] .go{border-radius:var(--r);box-shadow:var(--block)}

/* ── the page ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 max(1.25rem,env(safe-area-inset-right,0px)) 2rem max(1.25rem,env(safe-area-inset-left,0px))}
.crumbs{margin:.6rem 0 1.4rem;font-size:.95rem;color:var(--mute)}
.crumbs a{color:var(--text);text-decoration:none}.crumbs a:hover{text-decoration:underline}
p{margin:0 0 1rem;max-width:var(--measure)}
.lead{font-size:1.22rem;line-height:1.6;color:var(--text)}
.more{margin-top:1.4rem;font-family:var(--pix);font-size:.8rem;letter-spacing:.03em}

/* section headings: big VT323 with a little amber bar under them */
.block{margin-top:clamp(3rem,7vw,5rem)}
.block > h2,.block > div > h2{font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;margin-bottom:1.1rem}
.block > h2::after,.block > div > h2::after{content:"";display:block;width:2.4rem;height:4px;margin-top:.55rem;background:var(--brand);box-shadow:6px 0 0 rgba(var(--brand-rgb),.45),12px 0 0 rgba(var(--brand-rgb),.2)}
.block h2 .count{font-family:var(--pix);font-size:.36em;vertical-align:.35em;margin-left:.3rem;padding:.25em .5em .2em;border:2px solid var(--line);color:var(--mute)}

/* ── a game's hero: the clip in a wooden set, the facts and the big button beside it ── */
.g-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:.4rem}
.g-media{position:relative;aspect-ratio:16/9;background:#0d0b12;border:calc(var(--u)*2.5) solid var(--tv-body);
  box-shadow:0 0 0 var(--u) var(--tv-edge),inset 0 0 0 var(--u) var(--tv-edge),calc(var(--u)*2) calc(var(--u)*3) 0 var(--u) var(--tv-shadow)}
.g-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.12) 0 15%,transparent 15%),repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
.g-clip{display:block;width:100%;height:100%;object-fit:cover;background:#0d0b12}
.g-media.no-poster{display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(var(--brand-rgb),.25),transparent 60%),repeating-conic-gradient(rgba(255,255,255,.04) 0 25%,transparent 0 50%) 0 0/24px 24px,#14111a}
.g-ico{position:absolute;left:-.9rem;bottom:-1.1rem;z-index:1;width:4.2rem;height:4.2rem;padding:.35rem;background:var(--panel-solid);image-rendering:pixelated;
  box-shadow:0 0 0 3px var(--tv-edge),4px 5px 0 3px var(--tv-shadow)}
.g-media.no-poster .g-ico{position:static;width:40%;height:auto;aspect-ratio:1;padding:0;background:none;box-shadow:none}
html[data-skin] .g-media{border-radius:var(--r-lg);border-color:var(--panel-solid);box-shadow:0 0 0 1px var(--line),var(--block)}
html[data-skin] .g-ico{border-radius:var(--r);box-shadow:var(--block)}
.shelf{margin:0 0 .5rem;font-family:var(--pix);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.shelf a{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.shelf a::before{background:var(--brand) !important}
.shelf a::before{content:"";width:1.4rem;height:2px;background:currentColor}
.g-head h1,.page-head h1{font-size:clamp(2.7rem,5.6vw,4.6rem);line-height:.92;margin:0 0 .9rem}
h1 small{display:block;margin-top:.3rem;font-family:var(--pix);font-size:.24em;letter-spacing:.06em;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 0;padding:0;list-style:none}
.chips li{padding:.42rem .65rem .36rem;font-family:var(--pix);font-size:.62rem;line-height:1.35;letter-spacing:.03em;color:var(--text);background:var(--panel-solid);border:2px solid var(--line)}
.chips .chip-players{color:var(--cta-ink);background:var(--cta-bg);border-color:var(--cta-edge)}
html[data-skin] .chips li{border-radius:999px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;margin:1.6rem 0 0}
.cta span{font-size:.98rem;color:var(--mute)}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.4rem;font-family:var(--pix);font-size:clamp(.9rem,1.5vw,1.1rem);line-height:1.2;color:var(--cta-ink);background:var(--cta-bg);text-decoration:none;
  box-shadow:0 calc(-1*var(--u)) 0 0 var(--cta-edge),0 var(--u) 0 0 var(--cta-edge),calc(-1*var(--u)) 0 0 0 var(--cta-edge),var(--u) 0 0 0 var(--cta-edge),
    inset 0 var(--u) 0 0 var(--cta-hi),calc(var(--u)*2) calc(var(--u)*3) 0 0 var(--cta-shadow),calc(var(--u)*3) calc(var(--u)*2) 0 0 var(--cta-shadow);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background-color .2s}
.btn::before{content:"";width:0;height:0;border-left:.62em solid currentColor;border-top:.4em solid transparent;border-bottom:.4em solid transparent}
.btn:hover{color:var(--cta-ink);background:#ffb436;transform:translate(-2px,-2px)}
.btn:active{transform:translate(2px,2px)}
html[data-skin] .btn{border-radius:var(--r-lg);box-shadow:var(--block)}
html[data-skin] .btn:hover{background:var(--cta-bg);filter:brightness(1.07)}

/* ── facts: small cards ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.8rem;margin:0}
.facts > div{padding:1rem 1.1rem;background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow)}
.facts dt{margin-bottom:.35rem;font-family:var(--pix);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.facts dd{margin:0;font-size:1.05rem;line-height:1.58;color:var(--text)}
html[data-skin] .facts > div{border-radius:var(--r-lg)}

/* ── three steps, with their drawings ── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2rem);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;display:grid;align-content:start;gap:.8rem;padding:1.2rem 1.2rem 1.3rem;background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow)}
.step-art{display:block;width:4.5rem;height:auto;image-rendering:pixelated;padding:.5rem;background:rgba(var(--brand-rgb),.1)}
.step-n{position:absolute;left:.7rem;top:.7rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;font-family:var(--pix);font-size:.8rem;color:var(--cta-ink);background:var(--cta-bg);box-shadow:2px 2px 0 var(--cta-shadow)}
.step-t{min-width:0;font-size:1.05rem;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.steps li:not(:last-child)::after{content:"";position:absolute;top:2.6rem;right:calc(-1 * clamp(1rem,3vw,2rem) / 2 - 6px);width:12px;height:12px;
  background:var(--brand);clip-path:polygon(0 0,100% 50%,0 100%)}
html[data-skin] .steps li{border-radius:var(--r-lg)}html[data-skin] .step-art{border-radius:var(--r)}html[data-skin] .step-n{border-radius:999px}

/* ── a block with a drawing beside it ── */
.together{display:flex;align-items:flex-start;gap:clamp(1rem,3vw,2rem);padding:clamp(1.2rem,3vw,2rem);background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow)}
.together > div > :last-child{margin-bottom:0}
.together-bulb,.together-art{flex:none;width:clamp(3.5rem,8vw,5rem);height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 14px rgba(255,190,90,.45))}
.together-art{filter:none}
html[data-skin] .together{border-radius:var(--r-lg)}

/* ── game cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin:0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none;background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s}
.card:hover,.card:focus-visible{color:var(--ink);transform:translate(-3px,-3px);border-color:var(--line-hot);box-shadow:var(--block)}
.card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#14111a;border-bottom:2px solid var(--line)}
.card-media img:first-child:not(.card-ico){display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-media img:first-child:not(.card-ico){transform:scale(1.05)}
.card-media.no-poster{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(var(--brand-rgb),.25),transparent 65%),repeating-conic-gradient(rgba(255,255,255,.045) 0 25%,transparent 0 50%) 0 0/20px 20px,#14111a}
.card-ico{position:absolute;left:.5rem;bottom:.5rem;width:2.5rem;height:2.5rem;padding:.25rem;background:var(--panel-solid);image-rendering:pixelated;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.no-poster .card-ico{position:static;width:3.6rem;height:3.6rem;padding:0;background:none;box-shadow:none}
.card-body{display:grid;gap:.25rem;padding:.8rem .9rem 1rem}
.card-body b{font-family:var(--pix);font-weight:400;font-size:.82rem;line-height:1.3}
.card-body span{font-size:1rem;line-height:1.5;color:var(--text)}
.card-body i{font-style:normal;font-family:var(--head);font-size:1.12rem;color:var(--mute)}
html[data-skin] .card{border-radius:var(--r-lg);overflow:hidden}html[data-skin] .card-ico{border-radius:var(--r)}
html[data-skin] .card-body b{font-weight:600}

/* ── list and Dutch pages: their opening ── */
.page-head{position:relative;margin-top:.6rem}
.head-art,.hero-bulb{display:block;width:5rem;height:auto;margin-bottom:1rem;image-rendering:pixelated}
.hero-bulb{width:4rem;filter:drop-shadow(0 0 18px rgba(255,190,90,.55))}
.quote{color:var(--text)}
.quote-line{display:block;margin-bottom:.5rem;font-family:var(--head);font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;color:var(--ink)}
html[data-skin] .quote-line{font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2}
.shelf-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.shelf-nav a{padding:.5rem .8rem .45rem;font-family:var(--pix);font-size:.64rem;letter-spacing:.03em;color:var(--text);text-decoration:none;background:var(--panel-solid);border:2px solid var(--line)}
.shelf-nav a:hover{color:var(--ink);border-color:var(--line-hot)}
html[data-skin] .shelf-nav a{border-radius:999px}
.icon-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0;padding:0;list-style:none}
.icon-row a{display:block;padding:.4rem;background:var(--panel-solid);border:2px solid var(--line)}
.icon-row a:hover{border-color:var(--line-hot)}
.icon-row img{display:block;image-rendering:pixelated}

/* the Dutch page's opening: the words, and the card games round a television */
.nl-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.quote{position:relative;padding:1.4rem 1.5rem 1.2rem;background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow);max-width:none}
.quote::before{content:"\201C";position:absolute;left:.7rem;top:-1.1rem;font-family:var(--head);font-size:4.4rem;line-height:1;color:var(--brand)}
html[data-skin] .quote{border-radius:var(--r-lg)}
.nl-art{position:relative;aspect-ratio:1/1;max-width:26rem;width:100%;justify-self:center}
.nl-art::before{content:"";position:absolute;inset:6%;background:radial-gradient(closest-side,rgba(255,186,84,.35),transparent)}
.nl-tv{position:absolute;left:22%;top:26%;width:56%;height:auto;image-rendering:pixelated;filter:drop-shadow(6px 8px 0 rgba(0,0,0,.2))}
.nl-ico{position:absolute;width:15%;height:auto;padding:2.2%;background:var(--panel-solid);image-rendering:pixelated;box-shadow:0 0 0 3px var(--tv-edge),4px 5px 0 3px var(--tv-shadow)}
.nl-ico-0{left:6%;top:8%;transform:rotate(-8deg)}.nl-ico-1{left:42%;top:0;transform:rotate(4deg)}.nl-ico-2{right:6%;top:10%;transform:rotate(9deg)}
.nl-ico-3{left:2%;bottom:16%;transform:rotate(7deg)}.nl-ico-4{left:42%;bottom:4%;transform:rotate(-5deg)}.nl-ico-5{right:2%;bottom:14%;transform:rotate(-9deg)}
html[data-skin] .nl-ico{border-radius:var(--r);box-shadow:var(--block)}
@media (prefers-reduced-motion:no-preference){.can-move .nl-ico{animation:nl-bob 4.4s ease-in-out infinite}.can-move .nl-ico-1,.can-move .nl-ico-4{animation-delay:-1.5s}.can-move .nl-ico-2,.can-move .nl-ico-5{animation-delay:-3s}}
@keyframes nl-bob{50%{translate:0 -6%}}
@media (max-width:52rem){.nl-hero{grid-template-columns:minmax(0,1fr)}.nl-art{max-width:18rem}}

/* ── questions: an accordion ── */
.faq{display:grid;gap:.6rem;max-width:52rem}
.faq details{background:var(--panel-solid);border:2px solid var(--line);box-shadow:var(--shadow)}
.faq details[open]{border-color:var(--line-hot)}
.faq summary{position:relative;display:block;padding:1rem 3.2rem 1rem 1.1rem;cursor:pointer;list-style:none;font-weight:700;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.1rem;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--brand),var(--brand)) center/100% 4px no-repeat,linear-gradient(var(--brand),var(--brand)) center/4px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--brand-ink)}
.faq details p{margin:0;padding:0 1.1rem 1.1rem;color:var(--text)}
html[data-skin] .faq details{border-radius:var(--r-lg)}

/* ── the foot ── */
.foot{margin-top:clamp(3.5rem,8vw,6rem);border-top:2px dashed var(--line)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;max-width:var(--max);margin:0 auto;
  padding:1.6rem max(1.25rem,env(safe-area-inset-right,0px)) max(2rem,env(safe-area-inset-bottom,0px)) max(1.25rem,env(safe-area-inset-left,0px))}
.foot-bulb{width:2rem;height:auto}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;font-family:var(--pix);font-size:.66rem;letter-spacing:.03em}
.foot-nav a{color:var(--text);text-decoration:none;padding:.4rem 0}
.foot-nav a:hover{color:var(--ink)}
.foot p{flex:1 1 16rem;margin:0;text-align:right;font-size:.95rem;color:var(--mute)}

/* ── motion (seo-page.js marks the blocks below the fold; never under reduced motion) ── */
.can-move .rv{opacity:0;transform:translateY(16px)}
.can-move .rv.rv-in{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}

/* ── sizes ── */
@media (max-width:52rem){
  .g-hero{grid-template-columns:minmax(0,1fr)}
  .g-media{max-width:40rem}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .steps li:not(:last-child)::after{top:auto;bottom:-14px;right:auto;left:2.6rem;transform:rotate(90deg)}
  .foot p{text-align:left}
}
@media (max-width:30rem){
  .top nav{gap:.2rem .9rem;font-size:.6rem}
  .brand .hl-lockup{height:1.9rem}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .card-body{padding:.6rem .65rem .75rem}
  .card-body b{font-size:.7rem}
  .card-body span{display:none}
  .together{flex-direction:column}
  .g-ico{left:-.4rem;width:3.4rem;height:3.4rem}
}
@media (min-width:112.5em){html{font-size:clamp(100%,.95vw,150%)}:root{--max:84rem}}
.nl-hero h1{font-size:clamp(2.5rem,4.6vw,3.9rem);margin-bottom:1.9rem}
@media (max-width:30rem){body{font-size:1.06rem}}