/*
 * D3GENS — shared design foundation  (v1.1 DEVELOPER — fluid refactor)
 *
 * Linked on every v1.1 page via <link rel="stylesheet" href="/global.css">.
 * Place the <link> as the LAST stylesheet in <head> so these rules override
 * any per-page inline <style> that still holds the old hardcoded palette.
 *
 * Contains: design tokens (+light theme), body palette, backdrop layers
 * (.bg-base / .bg-grid), promo strip, top nav + mobile drawer, motion
 * primitives. The ambient particle/floater layer is injected by
 * /ambient-bg.js — deliberately not here.
 *
 * ─────────── FLUID REFACTOR CONVENTIONS (developer build) ───────────
 *
 * 1. ROOT FONT SIZE IS FLUID
 *    `html { font-size: clamp(13.5px, 0.28vw + 13px, 18px); }`
 *    — every `rem` now scales smoothly with viewport width:
 *        320px viewport  → ~13.9px root  (phones: tighter)
 *        1024px viewport → ~15.9px root  (tablets/laptops)
 *        1920px viewport → ~18px root    (desktops: comfy)
 *        3840px viewport → 18px root     (4K: clamped — no gigantism)
 *    This replaces the old 120%/150% page-level zoom hacks.
 *
 * 2. UNIT USAGE RULES
 *    - spacing / padding / margin / gap      → rem  (or clamp() for hero-scale)
 *    - font-size                             → rem  (inherits root fluidity)
 *    - widths / max-widths on containers     → min(Xrem, 92vw)  (fluid + capped)
 *    - component-scale sizing (logos, icons) → rem  (scales with root)
 *    - hairlines / borders / small radii     → px  (1-2px stays crisp)
 *    - media query breakpoints               → em  (respects user zoom)
 *
 * 3. WHY `em` IN MEDIA QUERIES
 *    Media queries evaluated in em honour the user's browser zoom. A user
 *    who zooms to 150% trips the breakpoint at a "smaller" viewport, which
 *    is what they want. 900px → 56.25em, 960px → 60em, 640px → 40em.
 *
 * 4. NAMING
 *    Legacy aliases (`--purple2`, `--surface`, `--border`, `--text-muted`)
 *    are preserved so pre-rebuild inline rules keep rendering.
 */

/* ───────── FLUID ROOT SCALING (mobile-focused) ─────────
   Cap at 16px so desktop matches the pre-refactor Live baseline exactly.
   Below ~1071px viewport, the root shrinks smoothly down to ~13.5px at
   phone widths — every `rem` tracks. Result:
     - 320px  → 13.9px root  (iPhone SE — things ~87% of desktop size)
     - 390px  → 14.1px root  (iPhone 14)
     - 428px  → 14.2px root  (iPhone 14 Pro Max)
     - 1071px → 16px root    (desktop baseline reached)
     - wider  → 16px root    (identical to Live — desktop unchanged) */
html{
  font-size:clamp(13.5px, 0.28vw + 13px, 16px);
}

/* ───────── DESIGN TOKENS ───────── */

:root{
  --bg:#0a0614;
  --bg-2:#0f0a22;
  --ink:#ece6ff;
  --ink-2:#b5aed1;
  --ink-3:#6f6890;
  --line:rgba(136,107,255,.18);
  --line-2:rgba(136,107,255,.32);
  --purple:#886bff;
  --purple-2:#a892ff;
  --purple-deep:#4b36a3;
  --purple2:#5b3ecb;           /* legacy alias preserved for pre-rebuild pages */
  --gold:#f5c518;
  --orange:#ff9500;
  --green:#22d3ae;
  --beam:linear-gradient(90deg,var(--purple),var(--gold));
  --cta:linear-gradient(135deg,var(--gold),var(--orange));
  /* legacy aliases so non-rebuilt rules keep rendering */
  --surface:rgba(14,10,38,0.88);
  --border:var(--line);
  --text-muted:var(--ink-2);
}

html[data-theme="light"]{
  --bg:#f3efe4;
  --bg-2:#ebe5d4;
  --ink:#16102a;
  --ink-2:#4c4468;
  --ink-3:#8c8399;
  --line:rgba(75,54,163,.22);
  --line-2:rgba(75,54,163,.45);
  --purple:#5a3df0;
}

/* ───────── BODY PALETTE ─────────
   Only the palette-bearing properties are overridden; page-level body
   rules (font-family, min-height, overflow-x, cursor) stay inline. */
body{
  background:var(--bg);
  color:var(--ink);
  transition:background .35s ease, color .35s ease;
}

/* ───────── GLOBAL BACKDROP  (z-index -3 / -2) ─────────
   Ambient particles + floaters sit at z-index -1 above these.
   Using vw/vh for glow radii so they stay proportional on every screen. */

.bg-base{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(68vw 56vh at 75% -10%,rgba(136,107,255,.25),transparent 60%),
    radial-gradient(56vw 46vh at 0% 110%,rgba(245,197,24,.08),transparent 60%),
    var(--bg);
  transition:background .35s ease;
}
html[data-theme="light"] .bg-base{
  background:
    radial-gradient(68vw 56vh at 75% -10%,rgba(136,107,255,.18),transparent 60%),
    radial-gradient(56vw 46vh at 0% 110%,rgba(208,74,42,.08),transparent 60%),
    var(--bg);
}

.bg-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(160,135,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,135,255,.13) 1px,transparent 1px);
  /* 56px at 16px base = 3.5rem — grid density now scales with root font-size */
  background-size:3.5rem 3.5rem;
  mask-image:radial-gradient(ellipse at 50% 40%,#000 42%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 42%,transparent 88%);
}
html[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(rgba(75,54,163,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(75,54,163,.14) 1px,transparent 1px);
}

/* ───────── MOTION PRIMITIVES ───────── */

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ───────── TOP PROMO STRIP ───────── */

.promo-strip{
  position:relative;z-index:20;
  background:linear-gradient(90deg,rgba(136,107,255,.12),rgba(245,197,24,.08),rgba(136,107,255,.12));
  border-bottom:1px solid rgba(136,107,255,.2);
  /* vertical: stays compact; horizontal: breathes on wide viewports */
  padding:0.75rem clamp(1rem, 2.5vw, 2rem);
  text-align:center;
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.72rem, 0.35vw + 0.6rem, 0.85rem);
  letter-spacing:.14em;color:#fff;text-transform:uppercase;
  overflow:hidden;
}
.promo-strip .p-accent{color:var(--gold);}
.promo-strip::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(245,197,24,.55) 50%,transparent 70%);
  transform:translateX(-100%);pointer-events:none;
  mix-blend-mode:screen;opacity:0;
}
.promo-strip.ps-attention::before{animation:ps-shimmer 1.6s ease-out 1 forwards;}
.promo-strip.ps-attention{animation:ps-sweep-glow 1.8s ease-out 1 forwards;}
@keyframes ps-shimmer{
  0%{transform:translateX(-100%);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}
@keyframes ps-sweep-glow{
  0%{box-shadow:0 0 0 rgba(245,197,24,0);border-bottom-color:rgba(136,107,255,.2)}
  40%{box-shadow:0 0 1.4rem rgba(245,197,24,.35);border-bottom-color:rgba(245,197,24,.65)}
  100%{box-shadow:0 0 0 rgba(245,197,24,0);border-bottom-color:rgba(136,107,255,.2)}
}

/* ───────── TOP NAV (desktop + dropdowns) ─────────
   Horizontal padding uses clamp() so the nav hugs edges on phones and
   gets comfortable gutters on wide desktops. Height uses clamp() so it
   compresses slightly on narrow viewports without going tiny. */

header{position:relative;z-index:20;padding:0 clamp(1rem, 2.5vw, 2rem);}
nav{
  display:flex;align-items:center;justify-content:space-between;
  height:clamp(3.5rem, 4vw + 2rem, 4.5rem);
  border-bottom:1px solid var(--border);
  position:relative;
}

.logo-title{display:flex;align-items:center;gap:0.875rem;text-decoration:none;}
.nav-logo{
  width:clamp(2.25rem, 2.2vw + 1.5rem, 2.625rem);
  height:clamp(2.25rem, 2.2vw + 1.5rem, 2.625rem);
  border-radius:0.625rem;border:1px solid rgba(136,107,255,.5);
  overflow:hidden;flex-shrink:0;
}
.nav-logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(0.625rem - 1px);}
.nav-brand{
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:clamp(1rem, 0.6vw + 0.85rem, 1.375rem);
  letter-spacing:.1em;
  background:linear-gradient(135deg,#c4b5fd,#886bff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.nav-links{list-style:none;display:flex;gap:clamp(1rem, 1.6vw, 1.75rem);align-items:center;margin:0;padding:0;}
.nav-links > li{position:relative;}
.nav-links a,.nav-links .nl-parent{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.8rem, 0.5vw + 0.65rem, 1.125rem);
  color:#c4b5fd;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s;display:inline-flex;align-items:center;gap:0.375rem;
}
.nav-links a:hover,.nav-links .nl-parent:hover{color:var(--purple);}
.nav-links a.active,.nav-links .nl-parent.active{color:#fff;}

.nl-parent .caret{font-size:1.1em;color:var(--gold);transition:transform .3s;margin-left:0.125rem;}
.has-dd:hover .nl-parent .caret,.has-dd:focus-within .nl-parent .caret{transform:rotate(180deg);}

.dd{
  position:absolute;top:calc(100% + 0.875rem);left:-1.125rem;
  min-width:15rem;
  background:linear-gradient(160deg,rgba(22,16,55,.98),rgba(8,5,24,.98));
  border:1px solid var(--border);border-radius:0.75rem;padding:0.625rem;
  opacity:0;visibility:hidden;transform:translateY(-0.375rem);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:50;
  box-shadow:0 1.25rem 3rem rgba(0,0,0,.6);
}
.dd::before{content:'';position:absolute;top:-0.875rem;left:0;right:0;height:0.875rem;}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0);}
.dd a{
  display:block;padding:0.625rem 0.875rem;border-radius:0.5rem;
  color:rgba(224,234,255,.8);
  font-family:'Share Tech Mono',monospace;font-size:0.8125rem;
  letter-spacing:.14em;text-transform:uppercase;transition:all .2s;
}
.dd a:hover{background:rgba(136,107,255,.1);color:#fff;}
.dd a.dd-active{background:rgba(245,197,24,.08);color:var(--gold);}
.dd .dd-sub{display:block;font-family:'Rajdhani',sans-serif;font-size:0.75rem;letter-spacing:.02em;text-transform:none;color:#c4b5fd;margin-top:0.1875rem;}

.nav-cta{display:flex;gap:0.625rem;align-items:center;}
.nav-cta a{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.65rem, 0.25vw + 0.58rem, 0.75rem);
  letter-spacing:.14em;text-transform:uppercase;
  padding:0.55rem 1.125rem;border-radius:0.5rem;
  text-decoration:none;transition:all .2s;
}
.nav-cta .secondary{color:#fff;border:1px solid rgba(136,107,255,.4);}
.nav-cta .secondary:hover{border-color:var(--purple);background:rgba(136,107,255,.08);}
.nav-cta .primary{background:linear-gradient(135deg,var(--gold),var(--orange));color:#0a0614;font-weight:700;}
.nav-cta .primary:hover{transform:translateY(-1px);box-shadow:0 0.375rem 1.25rem rgba(245,197,24,.35);}

/* ───────── MOBILE HAMBURGER + DRAWER ───────── */

.hamburger{
  display:none;
  width:2.75rem;height:2.75rem;                     /* 44px tap-target floor via rem */
  border:1px solid var(--border);border-radius:0.625rem;
  background:rgba(14,10,38,.6);
  flex-direction:column;align-items:center;justify-content:center;gap:0.3125rem;
  padding:0;cursor:none;
}
.hamburger span{display:block;width:1.25rem;height:2px;background:#fff;border-radius:2px;transition:all .3s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg);}

.drawer-backdrop{position:fixed;inset:0;background:rgba(5,8,16,.7);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .3s;z-index:150;}
.drawer-backdrop.show{opacity:1;visibility:visible;}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;
  /* cap drawer width so it never exceeds 22.5rem (~360px) even on large phones */
  width:min(86vw, 22.5rem);
  background:linear-gradient(180deg,#0a0720,#05070f);
  border-left:1px solid var(--border);
  padding:1.5rem 1.375rem 2rem;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:200;
  overflow-y:auto;display:flex;flex-direction:column;gap:0.25rem;
}
.mobile-drawer.open{transform:translateX(0);}
.mobile-drawer .md-close{
  align-self:flex-end;background:none;border:none;color:var(--text-muted);
  font-size:2rem;line-height:1;padding:0.5rem 0.875rem;
  min-width:3rem;min-height:3rem;cursor:pointer;
}

.md-group{border-bottom:1px solid var(--border);}
.md-group:last-of-type{border-bottom:none;}
.md-group > a,.md-group > button{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;
  padding:1.125rem 0.375rem;
  font-family:'Share Tech Mono',monospace;font-size:0.8125rem;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:none;border:none;text-decoration:none;min-height:2.75rem;
}
.md-group > button .caret{color:var(--gold);transition:transform .3s;font-size:0.625rem;}
.md-group[data-open="true"] > button .caret{transform:rotate(180deg);}
.md-sub{max-height:0;overflow:hidden;transition:max-height .35s ease;padding-left:0.5rem;}
.md-group[data-open="true"] .md-sub{max-height:16.25rem;padding-bottom:0.5rem;}
.md-sub a{
  display:block;padding:0.8125rem 0.875rem;
  font-family:'Rajdhani',sans-serif;font-size:1rem;
  color:rgba(224,234,255,.8);text-decoration:none;
  border-left:2px solid var(--border);margin-bottom:0.25rem;min-height:2.75rem;
}
.md-sub a:hover,.md-sub a.dd-active{color:var(--gold);border-left-color:var(--gold);}
.md-cta{margin-top:1.375rem;display:flex;flex-direction:column;gap:0.625rem;}
.md-cta a{
  padding:0.875rem;border-radius:0.625rem;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:0.75rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.md-cta .secondary{color:#fff;border:1px solid rgba(136,107,255,.4);}
.md-cta .primary{background:linear-gradient(135deg,var(--gold),var(--orange));color:#0a0614;font-weight:700;}

/* ───────── NAV RESPONSIVE ─────────
   900px → 56.25em at 16px base. Using em so zoom users trip it correctly. */

@media (max-width:56.25em){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .hamburger{display:flex;}
}

/* ───────── SITE FOOTER ─────────
   Injected on every page by /site-footer.js. Grid becomes auto-fit fluid
   instead of the old 1.4fr/1fr×4 fixed track list — means columns collapse
   naturally at any in-between viewport width (not just at 960/640 break). */
.site-footer{
  /* margin-top fluid: 1.5rem on phones → 5rem on desktop
     was a fixed 5rem which added 80px of black between content and footer on mobile */
  position:relative;z-index:20;margin-top:clamp(1.5rem, 4vw, 5rem);
  background:rgba(5,3,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(136,107,255,.2);
  padding:clamp(2rem, 4vw + 1rem, 4rem) clamp(1.25rem, 5vw, 5rem) 1.75rem;
  font-family:'Rajdhani',sans-serif;color:rgba(224,234,255,.78);
}
.site-footer .sf-inner{
  /* 1400px cap → 87.5rem; shrinks fluidly below that */
  max-width:min(87.5rem, 100%);
  margin:0 auto;
}
.site-footer .sf-grid{
  display:grid;
  /* Desktop: 5 cols (brand wider). Below ~62rem: auto-fit takes over. */
  grid-template-columns:1.4fr repeat(4, minmax(0, 1fr));
  gap:clamp(1.5rem, 2.5vw, 2.5rem);
}

.sf-brand-wordmark{
  font-family:'Orbitron',monospace;font-weight:900;
  font-size:clamp(1.1rem, 0.5vw + 0.95rem, 1.375rem);
  letter-spacing:.12em;
  background:linear-gradient(135deg,#f5c518,#ff9500);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:0.625rem;
}
.sf-brand-tagline{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
  color:rgba(224,234,255,.7);line-height:1.5;
  margin-bottom:1.125rem;max-width:32ch;
}
.sf-socials{display:flex;gap:0.625rem;flex-wrap:wrap;}
.sf-social{
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid rgba(245,197,24,.3);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(224,234,255,.7);text-decoration:none;
  transition:transform .2s,color .2s,border-color .2s,background .2s;
}
.sf-social:hover{background:rgba(245,197,24,.12);border-color:#f5c518;color:#f5c518;transform:translateY(-0.125rem);}
/* Brand-colored variants — icon tint via currentColor. Ring border inherits until hover. */
.sf-social-kick{color:#53fc18;border-color:rgba(83,252,24,.35);}
.sf-social-kick:hover{color:#7fff4f;border-color:#53fc18;background:rgba(83,252,24,.1);}
.sf-social-x{color:#fff;border-color:rgba(255,255,255,.35);}
.sf-social-x:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1);}
.sf-social-discord{color:#a892ff;border-color:rgba(168,146,255,.4);}
.sf-social-discord:hover{color:#c4b5fd;border-color:#a892ff;background:rgba(168,146,255,.12);}
.sf-social-youtube{color:#ff4d4d;border-color:rgba(255,77,77,.35);}
.sf-social-youtube:hover{color:#ff6a6a;border-color:#ff4d4d;background:rgba(255,77,77,.12);}
.sf-social svg{display:block;}

.sf-col{display:flex;flex-direction:column;gap:0.625rem;min-width:0;}
.sf-col h4{
  font-family:'Share Tech Mono',monospace;font-size:0.625rem;
  color:rgba(224,234,255,.5);letter-spacing:.22em;text-transform:uppercase;
  font-weight:400;margin:0 0 0.125rem 0;
}
.sf-col a{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(0.8125rem, 0.2vw + 0.75rem, 0.9375rem);
  color:rgba(224,234,255,.78);text-decoration:none;transition:color .15s;
}
.sf-col a:hover{color:#f5c518;}

.sf-divider{border-top:1px dashed rgba(136,107,255,.2);margin:2.5rem 0 1.5rem;}

.sf-compliance{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.sf-responsible{
  display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;
  max-width:min(48.75rem, 100%);
  font-family:'Share Tech Mono',monospace;font-size:0.6875rem;
  color:rgba(180,160,255,.55);line-height:1.55;letter-spacing:.04em;
}
.sf-age-badge{
  width:2.375rem;height:2.375rem;border-radius:50%;
  border:2px solid #ff4d6d;display:flex;align-items:center;justify-content:center;
  color:#ff4d6d;font-family:'Orbitron',monospace;font-weight:900;
  font-size:0.75rem;letter-spacing:.02em;flex-shrink:0;
}
.sf-responsible a{color:#f5c518;text-decoration:underline;text-underline-offset:2px;}
.sf-responsible a:hover{color:#ff9500;}
.sf-copy{
  font-family:'Share Tech Mono',monospace;font-size:0.625rem;
  color:rgba(180,160,255,.55);letter-spacing:.16em;text-transform:uppercase;
}

.sf-disclosure{
  margin-top:1rem;font-family:'Share Tech Mono',monospace;font-size:0.625rem;
  color:rgba(180,160,255,.55);line-height:1.55;letter-spacing:.04em;
  max-width:min(68.75rem, 100%);
}
.sf-disclosure .sf-gold{color:#f5c518;letter-spacing:.12em;font-weight:700;}

/* Light-theme support */
html[data-theme="light"] .site-footer{background:rgba(243,239,228,.92);border-top-color:rgba(75,54,163,.2);color:rgba(22,16,42,.8);}
html[data-theme="light"] .sf-col a{color:rgba(22,16,42,.78);}
html[data-theme="light"] .sf-brand-tagline{color:rgba(22,16,42,.65);}
html[data-theme="light"] .sf-responsible,html[data-theme="light"] .sf-copy,html[data-theme="light"] .sf-disclosure{color:rgba(22,16,42,.6);}

/* Breakpoints in em (960px = 60em, 640px = 40em).
   UPDATE: at ≤40em (phones) we keep a 2-col grid for the 4 link-columns so
   the footer doesn't balloon to 40% of page height. Brand spans full width. */
@media (max-width:60em){
  .site-footer .sf-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .site-footer .sf-brand{grid-column:1 / -1;}
}
@media (max-width:40em){
  /* Phones: tight 2x2 of content columns, brand row trimmed.
     Brand block becomes a 2-col sub-grid: wordmark+tagline left, socials top-right. */
  .site-footer{padding:1.75rem 1.125rem 1.25rem;margin-top:clamp(1rem,3vw,3rem);}
  .site-footer .sf-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:0.875rem 1.25rem;}
  .site-footer .sf-brand{
    grid-column:1 / -1;
    margin-bottom:0.25rem;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"mark socials" "tagline tagline";
    column-gap:0.75rem;
    row-gap:0.125rem;
    align-items:start;
  }
  .sf-brand-wordmark{grid-area:mark;margin-bottom:0;align-self:center;}
  .sf-brand-tagline{grid-area:tagline;margin-bottom:0.5rem;font-size:0.8125rem;max-width:none;}
  .sf-socials{grid-area:socials;gap:0.375rem;align-self:center;flex-wrap:nowrap;}
  .sf-social{width:2rem;height:2rem;}
  .sf-social svg{width:0.875rem;height:0.875rem;}
  .sf-col{gap:0.4375rem;}
  .sf-col h4{font-size:0.5625rem;letter-spacing:.2em;margin-bottom:0.1875rem;}
  .sf-col a{font-size:0.8125rem;line-height:1.2;}
  .sf-divider{margin:1.25rem 0 0.75rem;}
  .sf-compliance{flex-direction:column;align-items:flex-start;gap:0.625rem;}
  .sf-copy{margin-top:0.25rem;}
  .sf-responsible{font-size:0.625rem;gap:0.625rem;}
  .sf-age-badge{width:2rem;height:2rem;font-size:0.6875rem;}
  .sf-disclosure{margin-top:0.625rem;font-size:0.5625rem;line-height:1.5;}
}
/* Very narrow phones (<=22em ≈ 352px): only now collapse to 1 col */
@media (max-width:22em){
  .site-footer .sf-grid{grid-template-columns:1fr;gap:1.5rem;}
}
