/* 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}}

/* ── comparison pages (/free-jackbox-alternative/, /airconsole-alternative/) ── */
.cmp-list{margin:.6rem 0 0;padding-left:1.2rem;max-width:var(--measure);line-height:1.55}
.cmp-list li{margin:.35rem 0}
.cmp-wrap{overflow-x:auto;margin-top:.8rem}
.cmp{width:100%;border-collapse:collapse;font-family:var(--read);font-size:.95rem;line-height:1.45}
.cmp th,.cmp td{border:2px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top}
.cmp thead th,.cmp tr:first-child th{background:var(--bg-2);color:var(--ink)}
.cmp tbody th,.cmp tr th[scope="row"]{background:var(--panel-solid);color:var(--ink);font-weight:700;white-space:nowrap}
.cmp-note{max-width:var(--measure);margin-top:.8rem;font-size:.9rem;color:var(--mute)}