/* ==========================================================================
   Pixelvoid Games — design system
   Style:      Retro-futurism, adapted for long-form readability
   Display:    Russo One      Body: Chakra Petch
   Palette:    neon violet + rose CTA on deep void, cyan tech accent
   Contrast:   every text/background pair verified >= 4.5:1 (see tools/check_contrast.py)
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
:root {
  /* surfaces (dark is the canonical theme) */
  --void:        #08080F;
  --bg:          #0B0B16;
  --surface:     #12122A;
  --surface-2:   #191938;
  --line:        #2A2A50;
  --line-soft:   #20203F;

  /* brand */
  --violet:      #8B5CF6;
  --violet-2:    #A78BFA;
  --violet-dim:  #6D3FE0;
  --rose:        #F43F5E;   /* accent/glow only — too light for white text */
  --rose-2:      #FB7185;   /* text accent on dark surfaces (6.8:1) */
  /* Button fills carry white text, so they use darker shades that clear 4.5:1.
     Verified by tools/check_contrast.py — do not swap these for --rose/--violet. */
  --rose-btn:    #E11D48;   /* white on this: 4.70:1 */
  --rose-btn-h:  #C2183C;   /* white on this: 6.02:1 */
  --violet-btn:  #7C3AED;   /* white on this: 5.70:1 */
  --violet-btn-h:#6D28D9;   /* white on this: 7.10:1 */
  --cyan:        #22D3EE;
  --lime:        #A3E635;
  --amber:       #FBBF24;

  /* text — contrast-checked against --bg / --surface */
  --text:        #EEF0FB;   /* 17.2:1 on --bg */
  --text-2:      #C3C8E6;   /* 11.9:1 on --bg */
  --muted:       #9AA0C4;   /*  7.6:1 on --bg */
  --muted-2:     #7E85AD;   /*  5.4:1 on --bg / 5.1:1 on --surface — lightest allowed */

  /* type scale (fluid) */
  --fs-hero:  clamp(1.95rem, 1.35rem + 2.5vw, 3.5rem);
  --fs-h1:    clamp(1.72rem, 1.2rem + 2.2vw, 2.95rem);
  --fs-h2:    clamp(1.35rem, 1.08rem + 1.1vw, 1.95rem);
  --fs-h3:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-body:  clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;

  /* rhythm */
  --gap:      1.25rem;
  --pad-sec:  clamp(3rem, 2rem + 4vw, 5.5rem);
  --radius:   14px;
  --radius-s: 9px;
  --maxw:     1200px;
  --measure:  68ch;          /* line-length cap for prose */

  /* elevation + glow */
  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  --sh-2: 0 10px 34px rgba(0,0,0,.5);
  --glow-violet: 0 0 0 1px rgba(139,92,246,.5), 0 6px 26px rgba(139,92,246,.32);
  --glow-rose:   0 0 0 1px rgba(244,63,94,.5),  0 6px 26px rgba(244,63,94,.34);

  /* motion */
  --t-fast: 140ms;
  --t:      220ms;
  --ease:   cubic-bezier(.22,.7,.3,1);

  /* z-scale */
  --z-nav: 30;
  --z-menu: 40;
  --z-skip: 60;

  color-scheme: dark;
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Chakra Petch', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* belt-and-braces: nothing may scroll the page sideways */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--violet-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
button { font: inherit; color: inherit; }
ul, ol { padding-left: 1.15rem; }
strong, b { font-weight: 700; color: var(--text); }

h1, h2, h3, h4, .display {
  font-family: 'Russo One', 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  color: #fff;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.28; }

/* ---- a11y --------------------------------------------------------------- */
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: var(--z-skip);
  background: var(--rose-btn); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s); font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, .55rem + 2vw, 2rem); }
.section { padding-block: var(--pad-sec); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section--alt { background: linear-gradient(180deg, var(--void), var(--bg)); }

/* scanline + grid texture, the retro-futurism signature. Purely decorative. */
.scanlines::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.gridlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(139,92,246,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(115% 85% at 50% 0%, #000 20%, transparent 78%);
}

/* ---- header ------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(8,8,15,.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.header > .container { display: flex; align-items: center; gap: 1rem; min-height: 68px; }

.logo {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  margin-right: auto; min-height: 44px;   /* WCAG 2.5.5 target size */
}
.logo:focus-visible { outline-offset: 4px; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-text {
  font-family: 'Russo One', sans-serif; font-size: 1.14rem; color: #fff;
  letter-spacing: .3px; line-height: 1; white-space: nowrap;
}
.logo-text em { color: var(--violet-2); font-style: normal; }

.nav { display: none; gap: .35rem; align-items: center; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  color: var(--text-2); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .55rem .8rem; border-radius: var(--radius-s);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover { background: var(--surface-2); color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: rgba(139,92,246,.16); }

.burger {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.burger:hover { background: var(--line); }
@media (min-width: 900px) { .burger { display: none; } }
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top:  6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: sticky; top: 68px; z-index: var(--z-menu);
  display: none; flex-direction: column; gap: 2px;
  background: var(--void); border-bottom: 1px solid var(--line);
  padding: .7rem clamp(1rem, .55rem + 2vw, 2rem) 1rem;
}
.mobile-menu.open { display: flex; }
@media (min-width: 900px) { .mobile-menu, .mobile-menu.open { display: none; } }
.mobile-menu a {
  color: var(--text-2); text-decoration: none; font-weight: 600;
  padding: .8rem .5rem; border-radius: var(--radius-s); min-height: 44px; display: flex; align-items: center;
}
.mobile-menu a:hover { background: var(--surface-2); color: #fff; }
.mobile-menu .mm-label {
  font-family: 'Russo One', sans-serif; font-size: var(--fs-micro); color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .12em; padding: .9rem .5rem .25rem;
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .72rem 1.3rem;
  font-family: 'Russo One', sans-serif; font-size: .95rem; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--radius-s);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease), color var(--t-fast) var(--ease);
}
.btn svg { flex: none; }
.btn--primary { background: var(--rose-btn); color: #fff; box-shadow: var(--glow-rose); }
.btn--primary:hover { background: var(--rose-btn-h); color: #fff; box-shadow: 0 0 0 1px rgba(244,63,94,.85), 0 8px 32px rgba(244,63,94,.5); }
.btn--violet { background: var(--violet-btn); color: #fff; box-shadow: var(--glow-violet); }
.btn--violet:hover { background: var(--violet-btn-h); color: #fff; box-shadow: 0 0 0 1px rgba(139,92,246,.85), 0 8px 32px rgba(139,92,246,.48); }
.btn--ghost { background: rgba(255,255,255,.05); color: #fff; border-color: var(--line); }
.btn--ghost:hover { background: rgba(255,255,255,.11); color: #fff; border-color: var(--violet); }
.btn--sm { min-height: 44px; padding: .5rem .9rem; font-size: .86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- kickers, badges, pills -------------------------------------------- */
.kicker {
  display: inline-block; font-family: 'Russo One', sans-serif;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .16em;
  color: var(--violet-2); margin-bottom: .8rem;
}
.kicker--rose { color: var(--rose-2); }
.kicker--cyan { color: var(--cyan); }
.kicker--lime { color: var(--lime); }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  padding: .3rem .6rem; border-radius: 999px;
  background: rgba(139,92,246,.16); color: var(--violet-2);
  border: 1px solid rgba(139,92,246,.3);
}
.badge--rose { background: rgba(244,63,94,.15); color: var(--rose-2); border-color: rgba(244,63,94,.32); }
.badge--cyan { background: rgba(34,211,238,.13); color: var(--cyan); border-color: rgba(34,211,238,.3); }
.badge--amber{ background: rgba(251,191,36,.13); color: var(--amber); border-color: rgba(251,191,36,.3); }

/* pixel corner treatment — the one overt "pixel" flourish, used sparingly */
.pixel-cut {
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px,
             100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
             calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--void); }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 18% 0%,  rgba(139,92,246,.30), transparent 62%),
    radial-gradient(60% 50% at 88% 12%, rgba(244,63,94,.20),  transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(34,211,238,.10), transparent 65%);
}
.hero > .container { position: relative; padding-block: clamp(3rem, 2rem + 6vw, 6.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { font-size: var(--fs-hero); margin-bottom: 1rem; }
.hero h1 .accent {
  color: var(--violet-2);
  text-shadow: 0 0 22px rgba(139,92,246,.55);
}
.hero-lede { font-size: clamp(1.02rem, .98rem + .45vw, 1.22rem); color: var(--text-2); max-width: 56ch; margin-bottom: 1.6rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2rem; }
.hero-stat dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .2rem; }
.hero-stat dd { font-family: 'Russo One', sans-serif; font-size: 1.55rem; color: #fff; }
.hero-stat dd small { display: block; font-family: 'Chakra Petch', sans-serif; font-size: var(--fs-micro); color: var(--muted); font-weight: 400; letter-spacing: 0; }

/* ---- hero portfolio panel ---------------------------------------------- */
.folio {
  background: rgba(18,18,42,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
}
.folio-label {
  font-family: 'Russo One', sans-serif; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  margin-bottom: .9rem;
}
.folio-grid {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  margin-bottom: 1.25rem;
}
.folio-item {
  display: block; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--line); min-height: 44px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.folio-item:hover { border-color: var(--violet); transform: translateY(-2px); }
.folio-item img { width: 100%; height: auto; display: block; }

.folio-facts { display: grid; gap: .7rem; margin-bottom: 1.25rem; }
.folio-facts > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line-soft);
}
.folio-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.folio-facts dt {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); white-space: nowrap;
}
.folio-facts dd { font-size: var(--fs-small); color: var(--text); font-weight: 700; text-align: right; }
.folio .btn { width: 100%; }

/* ---- page hero (interior pages) ---------------------------------------- */
.page-hero { position: relative; overflow: hidden; background: var(--void); border-bottom: 1px solid var(--line-soft); }
.page-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(65% 60% at 12% 0%, rgba(139,92,246,.26), transparent 62%),
    radial-gradient(55% 55% at 92% 8%, rgba(244,63,94,.15), transparent 60%);
}
.page-hero > .container { position: relative; padding-block: clamp(1.6rem, 1.2rem + 2.4vw, 3.1rem); }
.page-hero h1 { margin-bottom: .85rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.page-hero-icon { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--line); flex: none; }
.page-hero-lede { color: var(--text-2); max-width: var(--measure); font-size: clamp(1rem, .97rem + .3vw, 1.12rem); }

/* ---- breadcrumbs -------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; }
.breadcrumbs a {
  color: var(--muted); text-decoration: none;
  /* Padding lifts the hit area past the 24px WCAG 2.2 AA minimum without
     changing the visual density of the trail. */
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 .3rem;
}
.breadcrumbs a:hover { color: var(--violet-2); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-2); }
.breadcrumbs .sep { color: var(--muted-2); }

/* ---- trademark notice --------------------------------------------------- */
.tm-notice {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.26);
  border-radius: var(--radius-s); padding: .85rem 1rem;
  font-size: var(--fs-small); color: var(--text-2); line-height: 1.55;
}
.tm-notice svg { flex: none; color: var(--amber); margin-top: .15rem; }
.tm-notice strong { color: var(--amber); }

/* ---- cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.25rem;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--link { cursor: pointer; text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--violet); background: var(--surface-2); box-shadow: var(--sh-2); color: inherit; }
.card--link:hover .card-title { color: var(--violet-2); }
.card-title { font-family: 'Russo One', sans-serif; font-size: 1.05rem; color: #fff; margin-bottom: .45rem; transition: color var(--t-fast) var(--ease); }
.card-text { color: var(--muted); font-size: var(--fs-small); }
.card-more {
  margin-top: auto; padding-top: .9rem; font-weight: 700; font-size: var(--fs-small);
  color: var(--violet-2); display: inline-flex; align-items: center; gap: .35rem;
}
.card--link:hover .card-more { color: var(--rose-2); }
.card-more svg { transition: transform var(--t-fast) var(--ease); }
.card--link:hover .card-more svg { transform: translateX(3px); }

/* game card */
.game-card {
  position: relative; display: flex; flex-direction: column; gap: .9rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.1rem; text-decoration: none; color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.game-card:hover { border-color: var(--violet); box-shadow: var(--sh-2); color: inherit; }
.game-card-head { display: flex; gap: .85rem; align-items: center; }
.game-card-icon { width: 60px; height: 60px; border-radius: 14px; border: 1px solid var(--line); flex: none; }
.game-card-name { font-family: 'Russo One', sans-serif; font-size: 1rem; color: #fff; line-height: 1.25; }
.game-card:hover .game-card-name { color: var(--violet-2); }
.game-card-genre { font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: .25rem; }
.game-card-text { font-size: var(--fs-small); color: var(--muted); flex: 1; }
.game-card-shot { border-radius: var(--radius-s); border: 1px solid var(--line-soft); width: 100%; }
.game-card-foot { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: var(--fs-micro); color: var(--muted); }

.rating { display: inline-flex; align-items: center; gap: .3rem; color: var(--amber); font-weight: 700; }
.rating svg { flex: none; }
.rating span { color: var(--muted); font-weight: 400; }

.store-dots { display: inline-flex; gap: .4rem; align-items: center; color: var(--muted); }
.store-dots svg { flex: none; }

/* ---- facts panel (AI-extractable key/value block) ---------------------- */
dl.facts {
  display: grid; gap: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.fact { padding: .95rem 1.1rem; border-top: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.fact dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .25rem; }
.fact dd { font-weight: 700; color: var(--text); font-size: .98rem; }
.fact dd .src { display: block; font-weight: 400; font-size: var(--fs-micro); color: var(--muted-2); margin-top: .15rem; }

/* ---- prose -------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.7rem; }
.prose p { color: var(--text-2); }
.prose li { color: var(--text-2); }
.prose li + li { margin-top: .45rem; }
.prose a { font-weight: 600; }

.layout-2col { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: start; }
/* A grid track sizes to its widest child's min-content, so a wide table inside
   .table-wrap still stretched the column past the viewport even though the
   wrapper scrolls. min-width:0 lets the track shrink and hands the overflow to
   the wrapper, which is what should absorb it. */
.layout-2col > * { min-width: 0; }
@media (min-width: 1000px) { .layout-2col { grid-template-columns: minmax(0,1fr) 320px; } }

.aside-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.15rem;
}
@media (min-width: 1000px) { .aside-sticky { position: sticky; top: 88px; } }
.aside-card h2, .aside-card h3 { font-size: 1rem; margin-bottom: .8rem; }
.aside-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.aside-list a {
  display: block; padding: .6rem .55rem; border-radius: var(--radius-s);
  color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: 600;
  min-height: 44px; display: flex; align-items: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.aside-list a:hover { background: var(--surface-2); color: #fff; }
.aside-list a[aria-current="page"] { background: rgba(139,92,246,.16); color: #fff; }

/* ---- check list --------------------------------------------------------- */
.check-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-2); }
.check-list .ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: rgba(163,230,53,.15); color: var(--lime); margin-top: .18rem; }

/* keyed tips: term + explanation */
.tips { display: grid; gap: 1rem; }
.tip { background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--violet); border-radius: var(--radius-s); padding: .95rem 1.1rem; }
.tip dt { font-family: 'Russo One', sans-serif; color: #fff; font-size: .98rem; margin-bottom: .3rem; }
.tip dd { color: var(--muted); font-size: var(--fs-small); }

/* numbered steps (HowTo) */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 3.1rem;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  font-family: 'Russo One', sans-serif; font-size: .82rem;
  background: rgba(139,92,246,.14); color: var(--violet-2);
  border: 1px solid rgba(139,92,246,.3); border-radius: 8px;
}
.steps h3 { font-size: 1.02rem; margin-bottom: .3rem; margin-top: .25rem; }
.steps p { color: var(--muted); font-size: var(--fs-small); }

/* ---- video -------------------------------------------------------------- */
.video-wrap {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #000;
  box-shadow: 0 0 0 1px rgba(139,92,246,.22), 0 20px 60px rgba(0,0,0,.6);
}
.video-wrap video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 1.1rem; font-size: var(--fs-small); color: var(--muted); }
.video-meta b { color: var(--text-2); }

/* screenshot strip — scrolls inside itself, never the page */
.shots {
  display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .6rem;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.shots img {
  flex: none; scroll-snap-align: start; border-radius: var(--radius-s);
  border: 1px solid var(--line-soft); max-height: 380px; width: auto;
}
.shots::-webkit-scrollbar { height: 8px; }
.shots::-webkit-scrollbar-track { background: var(--surface); border-radius: 4px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ---- FAQ (accordion, details/summary — works with JS off) -------------- */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-s);
  transition: border-color var(--t-fast) var(--ease);
}
.faq details[open] { border-color: rgba(139,92,246,.45); }
.faq summary {
  cursor: pointer; list-style: none; padding: .95rem 1.1rem;
  font-family: 'Russo One', sans-serif; font-size: .98rem; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--violet-2); border-bottom: 2px solid var(--violet-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { color: var(--violet-2); }
.faq .faq-body { padding: 0 1.1rem 1.1rem; color: var(--text-2); font-size: .98rem; }

/* ---- filters (catalogue) ----------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter {
  min-height: 44px; padding: .55rem 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-2); font-weight: 600; font-size: .9rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter:hover { background: var(--surface-2); color: #fff; }
.filter[aria-pressed="true"] { background: var(--violet-btn); border-color: var(--violet); color: #fff; }

/* ---- section heading --------------------------------------------------- */
.sec-head { margin-bottom: 2rem; max-width: 62ch; }
.sec-head p { color: var(--muted); margin-top: .7rem; }
.sec-head--center { margin-inline: auto; text-align: center; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--violet-dim), #2A1263 55%, var(--void));
  border-block: 1px solid var(--line);
}
.cta-band > .container { position: relative; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.cta-band h2 { margin-bottom: .8rem; }
.cta-band p { color: #DCD9F5; max-width: 54ch; margin-inline: auto; margin-bottom: 1.6rem; }
.cta-band .btn-row { justify-content: center; }

/* ---- footer ------------------------------------------------------------- */
.footer { background: var(--void); border-top: 1px solid var(--line-soft); padding-block: clamp(2.5rem,2rem+2vw,3.5rem) 2rem; font-size: var(--fs-small); }
.footer-grid { display: grid; gap: 2rem; margin-bottom: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.footer h2 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--muted-2); margin-bottom: .9rem; font-family: 'Russo One', sans-serif; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.footer li a {
  color: var(--text-2); text-decoration: none; display: flex; align-items: center;
  min-height: 44px; padding: .3rem 0;
}
.footer li a:hover { color: var(--violet-2); text-decoration: underline; }
.footer address { color: var(--muted); font-style: normal; line-height: 1.7; }
.footer address a {
  color: var(--violet-2);
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 1.5rem; display: grid; gap: 1rem; color: var(--muted-2); }
.footer-disclaimer { color: var(--muted); max-width: 92ch; line-height: 1.6; }
.footer-disclaimer strong { color: var(--text-2); }

/* ---- reveal animation ---------------------------------------------------
   Deliberately fail-safe: .reveal is VISIBLE by default. JavaScript adds .pre
   (opacity 0) only to elements that start below the fold, then swaps it for .in
   as they scroll in. So if JS is disabled, blocked, errors, or the browser never
   fires IntersectionObserver, content is still shown — a decorative animation
   can never hide real content. */
.reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(14px); }
.reveal.in  { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.pre { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- utilities ---------------------------------------------------------- */
.stack-sm > * + * { margin-top: .6rem; }
.stack > * + *    { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.src-note { font-size: var(--fs-micro); color: var(--muted-2); }
.src-note a { color: var(--muted); }

/* wide content must scroll in its own box, never the page */
.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); }
th { font-family: 'Russo One', sans-serif; color: #fff; font-weight: 400; white-space: nowrap; }
td { color: var(--text-2); }

/* ---- spec tables --------------------------------------------------------
   The product pages are spec sheets: a two-column key/value table is the format
   both people and answer engines read fastest. Wide tables scroll inside their
   own box so the page body never scrolls horizontally.                      */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

table.facts { border-collapse: collapse; width: 100%; min-width: 320px; }
table.facts caption {
  caption-side: bottom; text-align: left; padding: .8rem 1.05rem 1rem;
  font-size: var(--fs-micro); color: var(--muted-2); line-height: 1.55;
}
table.facts th, table.facts td {
  padding: .78rem 1.05rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.facts tbody tr:last-child th,
table.facts tbody tr:last-child td { border-bottom: 0; }
table.facts tbody th[scope="row"] {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600;
  color: var(--muted); white-space: normal; width: 42%; min-width: 150px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em;
  padding-top: .95rem;
}
table.facts td { color: var(--text); font-weight: 600; }
table.facts tbody tr:nth-child(even) { background: rgba(255, 255, 255, .017); }
table.facts thead th {
  font-family: 'Russo One', sans-serif; font-weight: 400; color: #fff;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
/* the compatibility matrix: ticks read better centred under their column */
.facts--matrix tbody th[scope="row"] {
  width: auto; text-transform: none; letter-spacing: 0; font-size: var(--fs-small);
  color: var(--text);
}
.facts--matrix td { text-align: center; color: var(--muted); }
.facts--matrix td svg { color: var(--lime); }
.facts--matrix thead th:not(:first-child) { text-align: center; }

.reviewed {
  margin-top: 1.1rem; font-size: var(--fs-micro); color: var(--muted-2);
  letter-spacing: .04em;
}

/* WCAG 2.5.8 minimum target size. Links inside flowing sentences are exempt and
   are left alone; these four are standalone targets that happened to inherit
   the line-height of small text, so they get an explicit box instead. */
table.facts th a,
.video-meta a,
dl.facts dd a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.ticks li > a { min-height: 24px; display: inline-flex; align-items: center; }

/* ---- ratings ------------------------------------------------------------
   Two stores, two numbers, each labelled with its source, locale, sample size
   and read date. An unattributed average would not be checkable.           */
.rating-cards { display: grid; gap: .7rem; }
.rating-card {
  display: grid; gap: .25rem; padding: .85rem .95rem;
  background: var(--void); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
}
.rating-store {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-micro); color: var(--muted); font-weight: 600;
}
.rating-card strong {
  font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 1.55rem;
  color: #fff; line-height: 1;
}
.rating-card strong span { font-size: .9rem; color: var(--muted); }
.rating-meta { font-size: var(--fs-micro); color: var(--muted-2); line-height: 1.5; }
.rating-note {
  margin-top: .7rem; font-size: var(--fs-micro); color: var(--muted-2); line-height: 1.55;
}

/* ---- tick lists ---------------------------------------------------------
   Feature and compatibility lists. The SVG is the marker, so the native list
   bullet is suppressed and the icon column is fixed — text wraps under text,
   never under the icon.                                                     */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ticks li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .65rem;
  align-items: start; color: var(--text-2); font-size: var(--fs-small);
  line-height: 1.6;
}
.ticks li > svg { margin-top: .34rem; color: var(--lime); }
.ticks li > a { color: var(--text-2); font-weight: 600; }
.ticks li > a:hover { color: #fff; }
.aside-card .ticks li > svg { color: var(--violet-2); }
.ticks + .card-text, .ticks + p { margin-top: 1rem; }
@media (min-width: 720px) {
  .ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.6rem; }
}

/* ---- release notes + inline notices ------------------------------------- */
.notes {
  margin-top: 1.1rem; padding: 1.15rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.notes h3 { font-size: 1rem; margin-bottom: .8rem; }
.note-src { margin-top: .8rem; font-size: var(--fs-micro); color: var(--muted-2); line-height: 1.55; }
.inline-note {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
  padding: .8rem .95rem; border-radius: var(--radius-s);
  background: rgba(34, 211, 238, .07); border: 1px solid rgba(34, 211, 238, .28);
  font-size: var(--fs-small); color: var(--text-2); line-height: 1.6;
}
.inline-note svg { flex: none; margin-top: .15rem; color: var(--cyan); }

/* ---- product page hero --------------------------------------------------- */
.ph-grid { display: grid; gap: 1.3rem; align-items: start; }
@media (min-width: 720px) { .ph-grid { grid-template-columns: 104px minmax(0, 1fr); gap: 1.8rem; } }
.ph-icon {
  width: 84px; height: 84px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface);
}
@media (min-width: 720px) { .ph-icon { width: 104px; height: 104px; border-radius: 24px; } }
.ph-meta {
  margin-top: 1.05rem; font-size: var(--fs-micro); color: var(--muted-2);
  letter-spacing: .04em;
}
.video-wrap--wide { max-width: 900px; margin-inline: auto; }

.addr-label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-2);
}

/* ---- print -------------------------------------------------------------- */
@media print {
  .header, .mobile-menu, .footer, .cta-band, .burger, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}