/* Inter, self-hosted rather than loaded from Google's CDN: it removes a
   render-blocking request to a third party from every page, and it keeps
   visitors' IP addresses out of a US ad network's logs, which matters for a
   Dutch site whose audience is mostly in the EU.

   One variable file per subset, weight axis only — the design uses 400 to 700
   upright and no italics, and every visible <em> is set to font-style:normal.
   Splitting latin from latin-ext means English, German, Dutch and French pages
   fetch 47KB; Polish pages fetch the second file only when a page actually
   contains ł, ą or ż. Files come from @fontsource-variable/inter (a
   devDependency, so `npm run build` never needs it) — see the README to
   refresh them. */
@font-face{
  font-family:Inter;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Inter;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#050505;
  --panel:#0e0e0e;
  --panel2:#151515;
  --text:#f5f3ef;
  --muted:#96938f;
  --line:#262626;
  --nav-text:#d7d4cf;
  --button-bg:#f5f3ef;
  --button-text:#0a0a0a;
  --mobile-menu-bg:#0c0c0c;
  --check-bg:#191919;
  --check-text:#ffffff;
  --qr-border:#2b2b2b;
  --surface-radial:rgba(42,42,42,.55);
  --asset-filter:none;
  --mono-logo-filter:brightness(0) invert(1);
  --device-shadow:rgba(0,0,0,.82);
  --orange-glow:.22;
  --orange:#ff7a1a;
  --max:1480px;
}

html[data-theme="dark"]{color-scheme:dark}

html[data-theme="grey"]{
  color-scheme:light;
  --bg:#d7d3cc;
  --panel:#e4e0d9;
  --panel2:#ece8e1;
  --text:#1c1b18;
  --muted:#69655f;
  --line:#bbb6ae;
  --nav-text:#3f3c37;
  --button-bg:#24211d;
  --button-text:#ffffff;
  --mobile-menu-bg:#e8e4dd;
  --check-bg:#c9c4bc;
  --check-text:#1b1916;
  --qr-border:#bdb8b0;
  --surface-radial:rgba(255,255,255,.38);
  --asset-filter:brightness(0) saturate(100%);
  --mono-logo-filter:none;
  --device-shadow:rgba(47,42,36,.25);
  --orange-glow:.12;
}

html[data-theme="white"]{
  color-scheme:light;
  --bg:#f8f6f1;
  --panel:#ffffff;
  --panel2:#f1eee8;
  --text:#1b1a17;
  --muted:#706c65;
  --line:#dcd7ce;
  --nav-text:#45413b;
  --button-bg:#24211d;
  --button-text:#ffffff;
  --mobile-menu-bg:#ffffff;
  --check-bg:#ebe7df;
  --check-text:#1b1916;
  --qr-border:#d8d3ca;
  --surface-radial:rgba(216,210,201,.42);
  --asset-filter:brightness(0) saturate(100%);
  --mono-logo-filter:none;
  --device-shadow:rgba(47,42,36,.20);
  --orange-glow:.10;
}


*{box-sizing:border-box}
/* text-size-adjust stops iOS Safari inflating body text when a phone is turned
   to landscape, which it does by a percentage and only to some blocks, so the
   type hierarchy comes apart. The page is already fluid, so it has nothing to
   fix here. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 76% 10%,var(--surface-radial) 0,transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  transition:background-color .28s ease,color .28s ease;
}
img{max-width:100%}
.feature-strip,.partner,.download,.site-footer,.qr-card,.site-theme-switcher{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.section-shell{width:min(calc(100% - 80px),var(--max));margin:auto}

.site-header{
  height:96px;
  width:min(calc(100% - 80px),var(--max));
  margin:auto;
  display:flex;
  align-items:center;
  gap:40px;
  position:relative;
  z-index:20;
}
.brand img,.footer-brand img{display:block;width:180px;height:auto;filter:var(--asset-filter);transition:filter .25s ease}
.main-nav{display:flex;gap:34px;margin-left:auto}
.site-theme-switcher{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  transition:background-color .25s ease,border-color .25s ease;
}
.site-theme-switcher button{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font:600 11px/1 Inter,Arial,sans-serif;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.site-theme-switcher button:hover{color:var(--text)}
.site-theme-switcher button[aria-pressed="true"]{
  background:var(--panel2);
  color:var(--text);
  box-shadow:0 1px 0 color-mix(in srgb,var(--text) 10%,transparent);
}
.site-theme-switcher button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-swatch{width:12px;height:12px;border-radius:50%;border:1px solid rgba(127,127,127,.42);flex:0 0 auto}
.theme-swatch-dark{background:#0a0a0a}
.theme-swatch-grey{background:#d7d3cc}
.theme-swatch-white{background:#fff}
.main-nav a,.site-footer a{color:var(--nav-text);text-decoration:none;font-size:14px}
.main-nav a{white-space:nowrap}
.main-nav a:hover,.site-footer a:hover{color:var(--text)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;border-radius:8px;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.03em;text-decoration:none}
.button-light{background:var(--button-bg);color:var(--button-text)}
.header-cta{border-radius:14px;white-space:nowrap}
.menu-toggle{display:none;background:none;color:var(--text);border:0;font-size:26px}

.hero{
  min-height:790px;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
  padding:35px 0 65px;
}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.hero h1,.section-heading h2,.partner h2,.download h2{font-size:clamp(64px,7vw,118px);line-height:.92;letter-spacing:-.055em;font-weight:400;margin:0}
.lead{max-width:540px;color:var(--muted);font-size:18px}
.store-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:38px}
.store-badge{display:inline-flex;align-items:center;justify-content:center;height:52px;text-decoration:none;border-radius:8px;transition:transform .2s ease,opacity .2s ease}
.store-badge:hover{transform:translateY(-2px);opacity:.92}
.store-badge:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.store-badge img{display:block;width:auto;height:100%;object-fit:contain}
.store-badge:first-child{height:52px}
.store-badge:last-child{height:52px}

.hero-visual,.partner-visual{position:relative;isolation:isolate}
.hero-visual{height:700px;display:flex;align-items:center;justify-content:center}
.visual-glow{position:absolute;z-index:-1;pointer-events:none}
.visual-glow-hero{inset:16% 3% 6% 12%;background:radial-gradient(circle,rgba(255,122,26,var(--orange-glow)),transparent 66%);filter:blur(30px)}
.hero-device-image{display:block;width:min(100%,820px);height:auto;filter:drop-shadow(0 42px 55px var(--device-shadow));transform:translate(3%,3%) scale(1.03)}

.feature-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:48px max(40px,calc((100vw - var(--max))/2))}
.feature-strip article{text-align:center;padding:10px 25px;border-right:1px solid var(--line)}
.feature-strip article:last-child{border-right:0}
.feature-icon{display:block;width:52px;height:52px;object-fit:contain;margin:0 auto;opacity:.96;filter:var(--asset-filter);transition:filter .25s ease}
.feature-strip h3{font-size:15px;margin:18px 0 8px}
.feature-strip p{margin:0;color:var(--muted);font-size:13px}

.themes{padding:130px 0;display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:center}
.section-heading h2,.partner h2,.download h2{font-size:clamp(50px,5.5vw,88px)}
.section-heading>p:last-child{color:var(--muted);max-width:430px;font-size:17px}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}
.theme-grid figure{margin:0;text-align:center}
.phone{background:linear-gradient(135deg,#ff9b4d,#9b3500);border-radius:44px;padding:7px;box-shadow:0 35px 80px #000,0 0 0 1px #ff8a32;overflow:hidden}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:37px}
.theme-phone{position:relative;width:100%;aspect-ratio:588/1280;border-radius:30px;padding:5px}
.theme-phone img{border-radius:25px}
.theme-grid figure:nth-child(2){transform:translateY(-35px)}
.theme-grid figcaption{margin-top:18px;letter-spacing:.18em;text-transform:uppercase;color:var(--nav-text)}

.partner{
  padding:120px 0 105px;
  display:grid;
  grid-template-columns:.76fr 1.24fr;
  gap:50px;
  align-items:center;
  border-top:1px solid var(--line);
}
.check-list{padding:0;list-style:none;margin:34px 0}
.check-list li{margin:18px 0;color:var(--nav-text)}
.check-list li:before{content:'✓';display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--check-bg);margin-right:14px;color:var(--check-text)}
.partner-visual{min-height:650px;display:flex;align-items:center;justify-content:center}
.visual-glow-partner{inset:17% 5% 9%;background:radial-gradient(circle,rgba(255,122,26,var(--orange-glow)),transparent 68%);filter:blur(34px)}
.partner-device-image{display:block;width:min(100%,840px);height:auto;filter:drop-shadow(0 42px 60px var(--device-shadow));transform:translateX(2%)}

.download{padding:100px 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;border-top:1px solid var(--line)}
.qr-card{justify-self:end;display:flex;align-items:center;gap:30px;border:1px solid var(--qr-border);background:color-mix(in srgb,var(--panel) 72%,transparent);border-radius:22px;padding:28px;max-width:520px}
/* height:auto is load-bearing. The width and height attributes on an img are
   presentational hints, so setting only width here left the height hint at 348px
   and squashed a square QR code into 142x348 — which a phone camera will not
   read. Every other image rule in this file pairs its width with height:auto or
   sets height and width:auto; this one did not. */
.qr-card img{width:175px;height:auto;border-radius:12px}
.qr-card h3{font-size:28px;margin:0 0 8px}
.qr-card p{color:var(--muted)}

.site-footer{padding:65px 0 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:44px;position:relative}
.site-footer h4{text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted)}
.site-footer a{display:block;margin:11px 0}
.footer-brand p{letter-spacing:.25em;text-transform:uppercase;color:var(--muted);font-size:10px}
.footer-brand .footer-origin{margin-top:15px;letter-spacing:.18em}
.footer-brand .footer-origin:before{content:"";display:inline-block;width:20px;height:1px;margin-right:9px;vertical-align:middle;background:var(--orange)}
.lang-tag{margin-left:7px;padding:1px 5px;border:1px solid var(--line);border-radius:4px;font-size:9px;letter-spacing:.08em;color:var(--muted);vertical-align:1px}
.lang-switcher{display:flex;flex-wrap:wrap;gap:0 15px;margin-top:24px;padding-top:19px;border-top:1px solid var(--line)}
.lang-switcher a{display:inline-block;margin:3px 0;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);transition:color .2s ease}
.lang-switcher a:hover{color:var(--text)}
.lang-switcher a[aria-current=true]{color:var(--text)}
.copyright{grid-column:1/-1;color:var(--muted);font-size:12px;margin-top:30px}
.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1050px){
  .main-nav{display:none}
  .site-theme-switcher{margin-left:auto}
  .menu-toggle{display:block;margin-left:0}
  .main-nav.open{display:flex;position:absolute;top:80px;left:0;right:0;background:var(--mobile-menu-bg);border:1px solid var(--line);padding:25px;flex-direction:column;box-shadow:0 18px 50px var(--device-shadow)}
  .header-cta{display:none}
  .hero,.themes,.partner,.download{grid-template-columns:1fr}
  .hero{padding-top:80px}
  .hero-visual{height:auto;min-height:620px;margin-top:20px}
  .hero-device-image{width:min(100%,790px);transform:none}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .feature-strip article{border-bottom:1px solid var(--line)}
  .theme-grid{max-width:820px}
  .partner{gap:15px}
  .partner-visual{min-height:600px;margin-top:0}
  .partner-device-image{width:min(100%,820px);transform:none}
  .qr-card{justify-self:start}
  .site-footer{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:680px){
  .section-shell,.site-header{width:min(calc(100% - 36px),var(--max))}
  .site-header{height:78px}
  .brand img{width:145px}
  .site-theme-switcher{gap:2px;padding:3px}
  .site-theme-switcher button{padding:7px;min-width:32px;justify-content:center}
  .theme-label{display:none}
  .hero h1{font-size:70px}
  .hero{min-height:auto;padding-top:55px}
  .hero-visual{min-height:390px;margin-top:25px}
  .hero-device-image{width:120%;max-width:none;transform:translateX(1%)}
  .feature-strip{grid-template-columns:1fr;padding:30px 18px}
  .feature-strip article{border-right:0}
  .themes,.partner,.download{padding:85px 0}
  .theme-grid{gap:8px}
  .theme-phone{border-radius:16px;padding:3px}
  .theme-phone img{border-radius:13px}
  .theme-grid figcaption{font-size:11px}
  .partner-visual{min-height:390px;margin-top:25px}
  .partner-device-image{width:118%;max-width:none}
  .download{gap:45px}
  .qr-card{display:block}
  .qr-card img{width:145px}
  .site-footer{grid-template-columns:1fr}
  .copyright{grid-column:1}
  .store-badge,.store-badge:first-child,.store-badge:last-child{height:48px}
}

/* Combined Dark, Grey and Light theme showcase */
.theme-showcase{
  position:relative;
  isolation:isolate;
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual-glow-themes{
  inset:14% 3% 8%;
  background:radial-gradient(circle,rgba(255,122,26,var(--orange-glow)),transparent 69%);
  filter:blur(36px);
}
.theme-showcase-image{
  display:block;
  width:min(100%,940px);
  height:auto;
  filter:drop-shadow(0 38px 58px var(--device-shadow));
}

@media(max-width:1050px){
  .theme-showcase{min-height:520px;margin-top:28px}
  .theme-showcase-image{width:min(100%,900px)}
}

@media(max-width:680px){
  .theme-showcase{min-height:300px;margin-top:24px}
  .theme-showcase-image{width:112%;max-width:none}
}

/* Expanded product sections */
.wide-heading{
  display:grid;
  grid-template-columns:1.05fr .7fr;
  align-items:end;
  gap:70px;
  margin-bottom:60px;
}
.wide-heading h2,.insights h2,.collection-tools h2,.audience h2,.faq h2,.final-cta h2{
  font-size:clamp(48px,5.6vw,92px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:400;
  margin:0;
}
.wide-heading>p,.faq-intro>p:last-child,.centered-heading>p:last-child{
  color:var(--muted);
  font-size:17px;
  max-width:500px;
  margin:0;
}
.how{padding:130px 0 115px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps-grid-4{grid-template-columns:repeat(4,1fr)}
.steps-grid-4 .step-card h3{font-size:24px}
.step-card{
  min-height:390px;
  position:relative;
  padding:34px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 86%,transparent),color-mix(in srgb,var(--panel) 72%,transparent));
  overflow:hidden;
}
.step-card:after{
  content:"";
  position:absolute;
  inset:auto -15% -48% 20%;
  height:70%;
  background:radial-gradient(circle,rgba(255,122,26,.16),transparent 68%);
  pointer-events:none;
}
.step-number{display:block;color:var(--muted);font-size:12px;letter-spacing:.22em;margin-bottom:74px}
.step-card img{width:58px;height:58px;object-fit:contain;filter:var(--asset-filter);margin-bottom:30px}
.step-card h3{font-size:28px;letter-spacing:-.035em;margin:0 0 12px}
.step-card p{color:var(--muted);font-size:15px;max-width:350px;margin:0}

.proof-band{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0 max(40px,calc((100vw - var(--max))/2));
}
.proof-band div{padding:42px 30px;border-right:1px solid var(--line);display:flex;align-items:baseline;gap:12px}
.proof-band div:last-child{border-right:0}
.proof-band strong{font-size:34px;letter-spacing:-.04em;font-weight:500}
.proof-band span{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

.games{padding:120px 0}
.game-row{
  list-style:none;
  margin:0;
  padding:12px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(44px,5.6vw,88px);
}
.game-row li{display:flex;align-items:center;justify-content:center}
.game-row a{display:block;line-height:0;transition:transform .25s ease,opacity .25s ease}
.game-row a:hover{transform:translateY(-2px);opacity:.82}
.game-row a:focus-visible{outline:2px solid var(--orange);outline-offset:10px;border-radius:4px}
.game-row img{
  display:block;
  width:auto;
  height:var(--logo-height);
  object-fit:contain;
}
/* Heights are set per logo: matching them by pixel height alone leaves the wider
   lockups looking heavier than the stacked ones. */
.game-row [data-game="pokemon"] img{--logo-height:clamp(46px,5.1vw,72px)}
.game-row [data-game="one-piece"] img{--logo-height:clamp(34px,3.8vw,53px)}
.game-row [data-game="lorcana"] img{--logo-height:clamp(46px,5.1vw,72px)}
.game-row [data-game="dragon-ball"] img{--logo-height:clamp(32px,3.6vw,50px)}
/* Supplied as near-black artwork, so it needs flipping on dark backgrounds. */
.mono-logo img,img.mono-logo{filter:var(--mono-logo-filter)}
.games-note{margin:52px 0 0;text-align:center;color:var(--muted);font-size:14px}

.insights{
  padding:135px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:90px;
  align-items:center;
}
.insights-copy .lead{margin-top:24px}
.insight-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 26px}
.insight-tabs button{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  padding:11px 16px;
  border-radius:999px;
  font:600 12px/1 Inter,Arial,sans-serif;
  cursor:pointer;
}
.insight-tabs button[aria-selected="true"]{background:var(--button-bg);color:var(--button-text);border-color:var(--button-bg)}
.insight-tabs button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.insight-descriptions h3{font-size:22px;margin:0 0 8px}
.insight-descriptions p{color:var(--muted);max-width:500px;margin:0}
.insight-console{position:relative}
.pulse-device-image{
  margin:0 auto;
  display:block;
  width:min(100%, 760px);
  height:auto;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.28));
}

.collection-tools{padding:125px 0;border-top:1px solid var(--line)}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-card{
  min-height:250px;
  border:1px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  padding:30px;
  position:relative;
  overflow:hidden;
}
.tool-card:after{content:"";position:absolute;width:190px;height:190px;right:-80px;bottom:-100px;background:radial-gradient(circle,rgba(255,122,26,.13),transparent 70%)}
.tool-card-large{grid-column:span 2;min-height:360px;padding:38px}
.tool-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.tool-card h3{font-size:27px;letter-spacing:-.035em;margin:18px 0 10px}
.tool-card p{color:var(--muted);max-width:440px;margin:0}
.tool-icon{width:45px;height:45px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;font-size:23px;color:var(--text)}
.mini-portfolio{
  margin-top:42px;
  max-width:520px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:23px;
  background:var(--panel2);
  display:grid;
  gap:7px;
}
.mini-portfolio span,.mini-portfolio em{font-size:12px;color:var(--muted);font-style:normal}
.mini-portfolio strong{font-size:42px;letter-spacing:-.055em}

.audience{padding:125px 0;border-top:1px solid var(--line)}
.centered-heading{text-align:center;max-width:800px;margin:0 auto 58px}
.centered-heading>p:last-child{margin:20px auto 0}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.audience-card{min-height:360px;padding:32px;border:1px solid var(--line);border-radius:22px;background:var(--panel);display:flex;flex-direction:column}
.audience-card>span{font-size:11px;color:var(--muted);letter-spacing:.2em}
.audience-card h3{font-size:29px;line-height:1.05;letter-spacing:-.04em;margin:90px 0 14px}
.audience-card p{color:var(--muted);margin:0 0 30px}
.audience-card a{margin-top:auto;color:var(--text);text-decoration:none;font-size:13px;font-weight:600}
.audience-card a:hover{color:var(--orange)}

/* Marks features that need a Pro subscription, so the site never implies
   the whole thing is free. */
.pro-tag{
  display:inline-block;
  margin-left:11px;
  padding:3px 9px 4px;
  border:1px solid color-mix(in srgb,var(--orange) 45%,var(--line));
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  vertical-align:middle;
}
h2 .pro-tag{transform:translateY(-3px)}
.prose h3 .pro-tag{margin-left:9px}
.source-list{list-style:none;margin:0;padding:0}
.source-list li{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:baseline}
.source-list li:last-child{border-bottom:1px solid var(--line)}
.source-list strong{font-weight:500;font-size:17px;letter-spacing:-.02em}
.source-list p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}

.spotlight{padding:118px 0;border-top:1px solid var(--line)}
.spotlight .tool-grid{margin-top:52px}
.spotlight .tool-card{min-height:0;display:flex;flex-direction:column}
/* The price sits on the card floor so the three cards line up despite
   uneven description lengths. */
.tool-card .spot-price{margin-top:auto;padding-top:26px;color:var(--muted);font-size:13px}
.spot-price strong{display:block;margin-bottom:3px;color:var(--text);font-size:21px;font-weight:500;letter-spacing:-.02em}
.spotlight-note{margin:40px auto 0;max-width:740px;text-align:center;color:var(--muted);font-size:14px}
.spotlight-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}

.faq{padding:125px 0;display:grid;grid-template-columns:.66fr 1.34fr;gap:100px;border-top:1px solid var(--line)}
.faq-intro>p:last-child{margin-top:25px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:27px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:19px;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:28px;font-weight:300;color:var(--muted);transition:transform .25s ease}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{color:var(--muted);margin:0;padding:0 50px 28px 0;max-width:720px}

.final-cta{
  min-height:390px;
  margin-top:10px;
  margin-bottom:100px;
  border-radius:30px;
  padding:56px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  background:
    radial-gradient(circle at 80% 45%,rgba(255,122,26,.22),transparent 34%),
    linear-gradient(145deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
}
.final-cta:after{
  content:"";
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  width:240px;
  aspect-ratio:640/630;
  background:url(assets/scadex-mark.webp) no-repeat center/contain;
  filter:var(--asset-filter);
  opacity:.07;
  pointer-events:none;
}
.final-cta>*{position:relative;z-index:1}
.final-cta-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.text-link{color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.text-link span{margin-left:7px}
.text-link:hover{color:var(--orange)}

@media(max-width:1250px){
  .main-nav{gap:20px}
  .main-nav a{font-size:12px}
  .site-theme-switcher .theme-label{display:none}
}

/* Last stretch before the nav collapses into the hamburger at 1050px. */
@media(max-width:1160px){
  .main-nav{gap:14px}
}

@media(max-width:1250px){
  .steps-grid-4{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:1050px){
  .wide-heading,.insights,.faq{grid-template-columns:1fr;gap:45px}
  .steps-grid,.audience-grid{grid-template-columns:1fr}
  .step-card{min-height:310px}
  .step-number{margin-bottom:40px}
  .proof-band{grid-template-columns:repeat(2,1fr)}
  .proof-band div:nth-child(2){border-right:0}
  .proof-band div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .tool-card-large{grid-column:span 2}
  .audience-card{min-height:280px}
  .audience-card h3{margin-top:55px}
  .faq{padding-top:100px}
  .final-cta{align-items:flex-start;flex-direction:column;justify-content:flex-end}
  /* Content stacks and bottom-aligns here, so the mark moves clear of it. */
  .final-cta:after{width:210px;right:26px;top:26px;transform:none}
}

@media(max-width:680px){
  .how,.insights,.collection-tools,.audience,.faq,.spotlight{padding:84px 0}
  .wide-heading{margin-bottom:40px}
  .steps-grid{gap:12px}
  .step-card{min-height:285px;padding:26px}
  .proof-band{grid-template-columns:1fr;padding:0 18px}
  .proof-band div{border-right:0;border-bottom:1px solid var(--line);padding:28px 10px}
  .proof-band div:nth-child(2){border-bottom:1px solid var(--line)}
  .proof-band div:last-child{border-bottom:0}
  .insights{gap:38px}
  .tool-grid{grid-template-columns:1fr}
  .tool-card-large{grid-column:auto;min-height:330px}
  .tool-card{min-height:220px;padding:26px}
  .mini-portfolio strong{font-size:34px}
  .audience-grid{gap:12px}
  .audience-card{min-height:270px;padding:26px}
  .faq-list summary{font-size:16px;padding:22px 0}
  .faq-list details p{padding-right:0}
  .final-cta{min-height:410px;margin-bottom:70px;padding:30px;border-radius:24px}
  .final-cta:after{width:145px;right:18px;top:18px}
  .final-cta-actions{align-items:flex-start;flex-direction:column;gap:18px}
}

@media (max-width: 900px){
  .pulse-device-image{width:100%}
}

/* Refined visual hierarchy — compact product-site scale */
:root{
  --max:1240px;
}

body{font-size:15px}
.section-shell{width:min(calc(100% - 64px),var(--max))}

.site-header{
  width:min(calc(100% - 64px),var(--max));
  height:82px;
  gap:28px;
}
.brand img,.footer-brand img{width:154px}
.main-nav{gap:24px}
.main-nav a,.site-footer a{font-size:13px}
.button{padding:14px 20px;font-size:12px}
.header-cta{border-radius:11px}

.hero{
  min-height:650px;
  grid-template-columns:.88fr 1.12fr;
  padding:34px 0 58px;
}
.hero h1{
  font-size:clamp(58px,6.1vw,88px);
  line-height:.94;
  letter-spacing:-.05em;
}
.eyebrow{font-size:10px;letter-spacing:.24em;margin-bottom:17px}
.lead{max-width:480px;font-size:16px;line-height:1.65}
.store-row{margin-top:30px}
.store-badge,.store-badge:first-child,.store-badge:last-child{height:46px}
.hero-visual{height:570px}
.hero-device-image{width:min(100%,690px);transform:translate(2%,2%)}

.feature-strip{
  padding:30px max(32px,calc((100vw - var(--max))/2));
}
.feature-strip article{padding:5px 20px}
.feature-icon{width:38px;height:38px}
.feature-strip h3{font-size:14px;margin:13px 0 6px}
.feature-strip p{font-size:12px;line-height:1.55}

.wide-heading{
  grid-template-columns:1fr .72fr;
  gap:56px;
  margin-bottom:42px;
}
.wide-heading h2,.insights h2,.collection-tools h2,.audience h2,.faq h2,.final-cta h2,
.section-heading h2,.partner h2,.download h2{
  font-size:clamp(42px,4.7vw,66px);
  line-height:.98;
  letter-spacing:-.045em;
}
.wide-heading>p,.faq-intro>p:last-child,.centered-heading>p:last-child,
.section-heading>p:last-child{font-size:15px;line-height:1.7}

.how{padding:92px 0 84px}
.steps-grid{gap:14px}
.step-card{min-height:275px;padding:28px;border-radius:20px}
.step-number{margin-bottom:38px}
.step-card img{width:44px;height:44px;margin-bottom:22px}
.step-card h3{font-size:23px;margin-bottom:9px}
.step-card p{font-size:14px;line-height:1.6}

.proof-band{padding:0 max(32px,calc((100vw - var(--max))/2))}
.proof-band div{padding:28px 22px;gap:9px}
.proof-band strong{font-size:28px}
.proof-band span{font-size:10px;letter-spacing:.12em}

.games{padding:90px 0}
.games-note{margin-top:44px;font-size:13px}

.insights{
  padding:96px 0;
  grid-template-columns:.78fr 1.22fr;
  gap:64px;
}
.insights-copy .lead{margin-top:19px}
.insight-tabs{margin:28px 0 22px}
.insight-descriptions h3{font-size:20px}
.insight-descriptions p{font-size:14px;line-height:1.65}
.pulse-device-image{width:min(100%,650px)}
.collection-tools{padding:90px 0}
.tool-grid{gap:13px}
.tool-card{min-height:210px;padding:25px;border-radius:19px}
.tool-card-large{min-height:300px;padding:30px}
.tool-card h3{font-size:23px;margin:14px 0 8px}
.tool-card p{font-size:14px;line-height:1.6}
.tool-icon{width:40px;height:40px;font-size:20px}
.mini-portfolio{margin-top:30px;max-width:470px;padding:19px}
.mini-portfolio strong{font-size:36px}

.themes{
  padding:92px 0;
  grid-template-columns:.78fr 1.22fr;
  gap:48px;
}
.theme-showcase{min-height:455px}
.theme-showcase-image{width:min(100%,780px)}

.audience{padding:90px 0}
.centered-heading{max-width:680px;margin-bottom:42px}
.audience-grid{gap:13px}
.audience-card{min-height:285px;padding:26px;border-radius:19px}
.audience-card h3{font-size:24px;margin:58px 0 11px}
.audience-card p{font-size:14px;line-height:1.6}

.partner{
  padding:92px 0 84px;
  grid-template-columns:.82fr 1.18fr;
  gap:42px;
}
.partner .lead{font-size:15px}
.check-list{margin:27px 0}
.check-list li{margin:14px 0;font-size:14px}
.check-list li:before{width:21px;height:21px;margin-right:11px}
.partner-visual{min-height:505px}
.partner-device-image{width:min(100%,690px)}

.spotlight{padding:90px 0}
.spotlight .tool-grid{margin-top:40px}

.faq{padding:90px 0;grid-template-columns:.72fr 1.28fr;gap:72px}
.faq-list summary{padding:22px 0;font-size:17px}
.faq-list details p{font-size:14px;line-height:1.65;padding-bottom:23px}

.final-cta{
  min-height:290px;
  margin-bottom:78px;
  border-radius:25px;
  padding:44px;
}

.download{padding:82px 0;gap:55px}
.qr-card{gap:24px;border-radius:19px;padding:22px;max-width:450px}
.qr-card img{width:142px}
.qr-card h3{font-size:23px}
.qr-card p{font-size:14px}
.site-footer{padding:52px 0 26px;gap:38px}

section[id]{scroll-margin-top:92px}

/* Several device and showcase images are deliberately wider than their column
   so they bleed to the edge of the screen. Clipping here keeps that effect but
   stops the bleed from making the whole page draggable sideways on phones.
   `clip` rather than `hidden` so no scroll container is created. */
main{overflow-x:clip}

/* A grid item's automatic minimum size is its min-content width, so a single
   long word — or two words joined by a non-breaking space — widens the whole
   track past the viewport instead of wrapping. Translated headings run into
   this where the English ones fit, so cap the minimum and let a word that
   still cannot fit break rather than escape the screen. */
.wide-heading>*,.page-hero>*,.section-heading>*,.centered-heading>*,
.hero>*,.partner>*,.insights>*,.faq>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}

@media(max-width:1050px){
  .section-shell,.site-header{width:min(calc(100% - 48px),var(--max))}
  .hero{min-height:auto;padding-top:58px}
  .hero-visual{min-height:500px;height:auto}
  .hero-device-image{width:min(100%,700px)}
  /* Columns are re-collapsed here, not only in the earlier max-width:1050px
     blocks: the refined rules above restate grid-template-columns with no media
     query, which beats those earlier collapses at equal specificity and would
     otherwise keep all of these two-column down to 320px. */
  .hero,.themes,.partner,.wide-heading,.insights,.faq{grid-template-columns:1fr}
  .wide-heading,.insights,.faq{gap:36px}
  .partner-visual{min-height:480px}
  .theme-showcase{min-height:430px}
}

@media(max-width:680px){
  .section-shell,.site-header{width:min(calc(100% - 32px),var(--max))}
  .site-header{height:72px}
  .brand img{width:132px}
  .hero{padding-top:42px;padding-bottom:44px}
  .hero h1{font-size:clamp(50px,16vw,62px)}
  .lead{font-size:15px}
  .hero-visual{min-height:330px;margin-top:16px}
  .hero-device-image{width:112%}
  .feature-strip{padding:22px 16px}
  .feature-strip article{padding:19px 8px}
  .wide-heading h2,.insights h2,.collection-tools h2,.audience h2,.faq h2,.final-cta h2,
  .section-heading h2,.partner h2,.download h2{font-size:clamp(38px,12vw,50px)}
  .how,.insights,.collection-tools,.audience,.faq,.themes,.partner,.download,.games{padding:68px 0}
  .wide-heading{margin-bottom:32px}
  .step-card{min-height:235px;padding:23px}
  .step-number{margin-bottom:27px}
  .proof-band div{padding:22px 6px}
  .proof-band strong{font-size:25px}
  .insights{gap:30px}
  .theme-showcase{min-height:260px}
  .theme-showcase-image{width:106%}
  .tool-card,.tool-card-large{min-height:200px;padding:23px}
  .audience-card{min-height:230px;padding:23px}
  .audience-card h3{margin-top:38px}
  .game-row{gap:36px 44px;padding:4px 0}
  .games-note{margin-top:36px}
  .partner-visual{min-height:320px;margin-top:12px}
  .partner-device-image{width:108%}
  .final-cta{min-height:315px;padding:26px;margin-bottom:58px}
  .qr-card{padding:18px}
  .site-footer{padding-top:42px}
}

/* ---------------------------------------------------------------
   Subpages: game landing pages, partners, about, legal and 404
   --------------------------------------------------------------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  padding:28px 0 0;
  font-size:12px;
  color:var(--muted);
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb i{font-style:normal;opacity:.45}
.breadcrumb [aria-current]{color:var(--text)}

.page-hero{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:64px;
  align-items:center;
  padding:44px 0 88px;
}
.page-hero h1{
  font-size:clamp(40px,4.8vw,72px);
  line-height:.99;
  letter-spacing:-.05em;
  font-weight:400;
  margin:0 0 20px;
}
.page-hero .lead{margin:0}
.page-hero .store-row{margin-top:32px}
.page-hero-logo{display:block;width:auto;height:58px;margin-bottom:30px}
/* Legal pages have no hero visual, so the heading takes the full width and the
   prose section supplies the bottom spacing. */
.page-hero-narrow{grid-template-columns:1fr;padding-bottom:0}
.page-hero-visual{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-hero-visual img{
  display:block;
  width:min(100%,520px);
  height:auto;
  filter:drop-shadow(0 34px 62px var(--device-shadow));
}

.page-section{padding:88px 0;border-top:1px solid var(--line)}
.page-section-plain{padding:88px 0}

.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.link-card{
  display:flex;
  flex-direction:column;
  min-height:186px;
  padding:27px;
  border:1px solid var(--line);
  border-radius:20px;
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  text-decoration:none;
  color:var(--text);
  transition:border-color .25s ease,transform .25s ease;
}
.link-card:hover{border-color:color-mix(in srgb,var(--orange) 50%,var(--line));transform:translateY(-2px)}
.link-card h3{font-size:21px;letter-spacing:-.03em;margin:0 0 9px}
.link-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 22px}
.link-card em{margin-top:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--orange)}

.prose{max-width:760px;padding:10px 0 96px}
.prose>p:first-of-type{margin-top:26px}
.prose h2{font-size:clamp(23px,2.3vw,31px);letter-spacing:-.03em;font-weight:500;margin:50px 0 13px}
.prose h3{font-size:18px;font-weight:600;margin:28px 0 9px}
.prose p,.prose li{color:var(--muted);font-size:15px;line-height:1.75}
.prose ul{margin:13px 0;padding-left:19px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--orange)}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--orange)}
.prose .page-updated{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0}
.prose ol{margin:13px 0;padding-left:22px}
.prose-table-wrap{margin:26px 0;overflow-x:auto}
.prose-table{width:100%;border-collapse:collapse;font-size:14px}
.prose-table th,.prose-table td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.prose-table thead th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);border-bottom-color:var(--text)}
.prose-table tbody th{font-weight:500;color:var(--text);padding-right:24px}
.prose-table td{color:var(--muted)}
.prose-callout{margin:30px 0;padding:22px 24px;border:1px solid var(--line);border-left:2px solid var(--orange);border-radius:3px;background:var(--card)}
.prose-callout p{margin:0}
.prose-callout p+p{margin-top:11px}
@media(max-width:620px){
  .prose-table th,.prose-table td{padding:11px 12px 11px 0}
  .prose-callout{padding:18px 19px}
}

/* A four-column comparison table is the widest thing in the prose, and on a
   phone it stops working as a grid: every column ends up one word per line, and
   in Polish and German it does not fit at all. Below 480px each row becomes a
   block instead, with the column name from data-label sitting above its value,
   so the comparison is read down the screen rather than dragged sideways.

   The row header stays the heading of its block. The original header row is
   hidden because every label is repeated inside the rows.
   Guide.astro writes the data-label attributes. */
@media(max-width:480px){
  .prose-table-wrap{overflow-x:visible}
  .prose-table,.prose-table tbody,.prose-table tr,.prose-table th,.prose-table td{display:block}
  .prose-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prose-table tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .prose-table tr:last-child{border-bottom:0}
  .prose-table th,.prose-table td{padding:0;border-bottom:0}
  .prose-table tbody th{font-size:16px;font-weight:600;padding:0 0 10px}
  .prose-table td{padding:7px 0 0}
  .prose-table td:before{
    content:attr(data-label);
    display:block;
    margin-bottom:1px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--muted);
    opacity:.75;
  }
}

.error-page{
  min-height:54vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:70px 0 104px;
}
.error-page h1{font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.06em;font-weight:400;margin:0 0 18px}
.error-page .link-grid{margin-top:48px}

@media(max-width:1050px){
  .page-hero{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .page-hero-visual img{width:min(100%,460px)}
  .link-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:680px){
  /* Restated after the three-column rule in the max-width:1050px block above,
     which also matches phone widths and would otherwise win by source order. */
  .site-footer{grid-template-columns:1fr}
  .page-hero{padding:30px 0 52px}
  .page-hero-logo{height:44px;margin-bottom:24px}
  .page-section,.page-section-plain{padding:62px 0}
  .link-grid{grid-template-columns:1fr}
  .source-list li{grid-template-columns:1fr;gap:7px;padding:18px 0}
  .prose{padding-bottom:70px}
  .prose h2{margin-top:40px}
}

/* ---------------------------------------------------------------
   Reduced motion

   .reveal starts at opacity 0 and is only shown by an
   IntersectionObserver, so it cannot simply be switched off: the copy
   is made visible immediately instead, and everything else drops its
   transition rather than animating.
   --------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------------------------------------------------------------
   Touch sizing

   Every rule below trades vertical space for hit area on small
   screens. A 14px link is a 20px-tall target, which is half of what
   a fingertip needs, so the padding replaces the margin rather than
   adding to it and the visual rhythm stays roughly as it was.

   The breakpoint matches the one where .menu-toggle appears: below
   1050px the site is in its compact layout, which is also where the
   visitor is most likely to be on a touchscreen. A landscape tablet
   at 1024px is a touch device and needs the same sizing as a phone.

   Checked by scripts/responsive.mjs, which reports any link, button
   or summary shorter than 40px outside of prose.
   --------------------------------------------------------------- */
@media(max-width:1050px){
  /* The dropdown spaced its items with gap, which leaves dead strips between
     20px-tall links. Padding instead makes the targets contiguous. */
  .main-nav.open{gap:0}
  .main-nav.open a{padding:12px 0}
  .site-footer a{margin:1px 0;padding:11px 0}
  .lang-switcher a{margin:0;padding:11px 0}
  .lang-switcher{gap:0 18px}
  .breadcrumb a,.breadcrumb span{padding:11px 0}
  .breadcrumb{padding-top:18px}
  .text-link{display:inline-block;padding:11px 0}
  .insight-tabs button{padding:13px 15px}
  .audience-card a{display:inline-block;padding:11px 0}
  .game-row a{display:flex;align-items:center;min-height:44px}
  .site-theme-switcher button{min-width:40px;padding:14px 9px}
  .menu-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
  .brand{display:flex;align-items:center;min-height:44px}

  /* 11px is the floor on a phone. The uppercase labels stay labels —
     they are only lifted off 10px, not turned into body text. */
  .footer-brand p,.footer-origin{font-size:11.5px}
  .site-footer h4{font-size:11px}
  .proof-band span{font-size:11px}
  .eyebrow,.pro-tag{font-size:11px}
  .lang-tag{font-size:10px}
  .feature-strip p{font-size:13px}
}