/* ============================================================================
   site.css - Pixel Font Generator . "Arcade CRT" theme
   ----------------------------------------------------------------------------
   The single design system for the whole site. Owns the tokens, the reset,
   typography, every shared component and both colour modes.

   Load order on every page:
     1. assets/css/site.css   (this file - tokens + shell)
     2. style.css             (generator tool only, consumes these tokens)

   Colour modes
     html[data-theme="light"|"dark"]  set by the inline no-flash script
     prefers-color-scheme             backstop when JavaScript is unavailable
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 . FONTS - self hosted Poppins, latin subset (display + body)
   --------------------------------------------------------------------------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.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:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.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:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.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:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.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:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/poppins-800.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;}

/* ---------------------------------------------------------------------------
   2 . TOKENS
   --------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  /* Brand ramp - the supplied #A6192E, extended into a usable scale */
  --brand-950:#4E0813; --brand-900:#6D0C1B; --brand-800:#8B1425;
  --brand:#A6192E;     --brand-600:#BC2A41; --brand-500:#D14257;
  --brand-400:#E2707E; --brand-300:#EFA3AC; --brand-200:#F7CBD1;
  --brand-100:#FBE4E8; --brand-050:#FDF3F5;

  /* Supporting hues - accents for tags, states, pixel accents */
  --cyan-800:#0A5566; --cyan-700:#0E7189; --cyan-500:#18A0BF;
  --cyan-100:#D5F0F6; --cyan-050:#EEFAFC;
  --amber-800:#77500A; --amber-700:#96660B; --amber-500:#C68A17;
  --amber-100:#FAEDD3; --amber-050:#FDF8EE;
  --violet-700:#5B3AA6; --violet-500:#7C5AD6; --violet-100:#E8E1F8;

  /* Ink */
  --ink-950:#0B0D10; --ink-900:#141820; --ink-800:#212934;
  --ink-700:#33404E; --ink-strong:#33404E;
  --ink-600:#4C5A69; --ink-500:#5D6B7A; --ink-body:#5D6B7A;
  --ink-400:#5F6B77; --ink-300:#7C8792; /* --brand silver #BAC1C1 area */

  /* Surfaces */
  --canvas:#F2F4F5;
  --surface:#FFFFFF;
  --surface-2:#FAFBFB;
  --surface-3:#EDF0F1;
  --line:#E1E6E8;
  --line-2:#C4CCD0;
  --silver:#BAC1C1;
  --overlay:rgba(11,13,16,.52);
  --header-line:#D8DFE2;
  --footer-bg:#0B0D10;
  --footer-text:#B7C1CB;
  --footer-mute:#98A4B0;

  /* Semantic aliases used by components */
  --text:var(--ink-900);
  --text-soft:var(--ink-600);
  --text-mute:var(--ink-400);
  --heading:var(--ink-950);

  /* Preview surface - stays light in both modes so glyph art reads cleanly */
  --paper:#FFFFFF;
  --paper-2:#F7F8F8;
  --paper-line:#E2E6E7;
  --paper-ink:#141B22;

  /* Signature gradients */
  --grad-brand:linear-gradient(135deg,#BC2A41 0%,#A6192E 45%,#6D0C1B 100%);
  --grad-crt:linear-gradient(135deg,#141820 0%,#22161c 55%,#2a0f16 100%);
  --grad-sheen:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0));

  /* Elevation */
  --sh-xs:0 1px 2px rgba(11,13,16,.05);
  --sh-sm:0 2px 6px -2px rgba(11,13,16,.10),0 6px 18px -12px rgba(11,13,16,.18);
  --sh-md:0 6px 16px -8px rgba(11,13,16,.16),0 18px 42px -22px rgba(11,13,16,.26);
  --sh-lg:0 10px 24px -12px rgba(11,13,16,.18),0 34px 70px -32px rgba(11,13,16,.32);
  --sh-brand:0 12px 28px -14px rgba(166,25,46,.55);
  --sh-ring:0 0 0 1px var(--line);

  /* Radii - kept modest; pixel motif supplies the sharp corners */
  --r-2xl:24px; --r-xl:18px; --r-lg:14px; --r-md:10px; --r-sm:7px; --r-pill:999px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:.16s; --t:.26s; --t-slow:.55s;

  /* Type & layout */
  --font:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1220px;
  --header-h:76px;

  --keyword:var(--brand);
}

/* Dark mode - explicit choice, leans into the CRT identity */
html[data-theme="dark"]{
  color-scheme:dark;
  --brand:#F0576F; --brand-600:#E8455F; --brand-500:#F0576F;
  --brand-400:#F5808F; --brand-300:#F8A3AE; --brand-200:#5B1E28;
  --brand-100:#3A141C; --brand-050:#2A1017;
  --brand-800:#F5808F; --brand-900:#F8A3AE; --brand-950:#FBC6CD;

  --cyan-500:#43C8E0; --cyan-700:#43C8E0; --cyan-800:#74DCEE; --cyan-100:#0C333B; --cyan-050:#0A272D;
  --amber-500:#E9AE43; --amber-700:#F0B65B; --amber-800:#F6CE8A; --amber-100:#3B2C11; --amber-050:#2C210D;
  --violet-500:#9E80EE; --violet-700:#B49CF3; --violet-100:#241a3d;

  --ink-950:#F3F6F8; --ink-900:#E8EDF1; --ink-800:#D5DEE4;
  --ink-strong:#B9C4CD; --ink-700:#B9C4CD; --ink-600:#A7B4BF;
  --ink-500:#97A5B1; --ink-body:#97A5B1;
  --ink-400:#8794A0; --ink-300:#6E7B87;

  --canvas:#090B0E;
  --surface:#12161C;
  --surface-2:#171C23;
  --surface-3:#1E252D;
  --line:#242C35;
  --line-2:#39434E;
  --silver:#4a5560;
  --overlay:rgba(0,0,0,.68);
  --header-line:#2A333E;
  --footer-bg:#05070A;
  --footer-text:#B7C1CB;
  --footer-mute:#93A0AC;

  --text:var(--ink-900);
  --text-soft:var(--ink-600);
  --text-mute:var(--ink-400);
  --heading:#FFFFFF;

  --grad-brand:linear-gradient(135deg,#C4304A 0%,#9E1730 48%,#5E0A18 100%);

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 2px 6px -2px rgba(0,0,0,.5),0 6px 18px -12px rgba(0,0,0,.6);
  --sh-md:0 6px 16px -8px rgba(0,0,0,.55),0 18px 42px -22px rgba(0,0,0,.7);
  --sh-lg:0 10px 24px -12px rgba(0,0,0,.6),0 34px 70px -32px rgba(0,0,0,.75);
  --sh-brand:0 12px 28px -14px rgba(240,87,111,.5);
  --sh-ring:0 0 0 1px var(--line);
}

@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;
    --brand:#F0576F;--brand-600:#E8455F;--brand-500:#F0576F;--brand-400:#F5808F;--brand-300:#F8A3AE;
    --brand-200:#5B1E28;--brand-100:#3A141C;--brand-050:#2A1017;
    --brand-800:#F5808F;--brand-900:#F8A3AE;--brand-950:#FBC6CD;
    --cyan-500:#43C8E0;--cyan-700:#43C8E0;--cyan-800:#74DCEE;--cyan-100:#0C333B;--cyan-050:#0A272D;
    --amber-500:#E9AE43;--amber-700:#F0B65B;--amber-800:#F6CE8A;--amber-100:#3B2C11;--amber-050:#2C210D;
    --violet-500:#9E80EE;--violet-700:#B49CF3;--violet-100:#241a3d;
    --ink-950:#F3F6F8;--ink-900:#E8EDF1;--ink-800:#D5DEE4;--ink-strong:#B9C4CD;--ink-700:#B9C4CD;
    --ink-600:#A7B4BF;--ink-500:#97A5B1;--ink-body:#97A5B1;--ink-400:#8794A0;--ink-300:#6E7B87;
    --canvas:#090B0E;--surface:#12161C;--surface-2:#171C23;--surface-3:#1E252D;--line:#242C35;--line-2:#39434E;
    --overlay:rgba(0,0,0,.68);--header-line:#2A333E;--footer-bg:#05070A;--footer-mute:#93A0AC;
    --text:var(--ink-900);--text-soft:var(--ink-600);--text-mute:var(--ink-400);--heading:#fff;
    --grad-brand:linear-gradient(135deg,#C4304A 0%,#9E1730 48%,#5E0A18 100%);
    --sh-brand:0 12px 28px -14px rgba(240,87,111,.5);
  }
}

/* ---------------------------------------------------------------------------
   3 . RESET
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  background:var(--canvas);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{line-height:1.18;color:var(--heading);font-weight:800;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:#8B1425;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;transition:top var(--t) var(--ease)}
.skip-link:focus{top:12px}
.hl{color:var(--brand)}
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------------------
   4 . HEADER / NAV
   --------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--header-line);transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease)}
.site-header.scrolled{background:color-mix(in srgb,var(--surface) 97%,transparent);border-bottom-color:var(--line-2);box-shadow:var(--sh-sm)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.site-header{background:var(--surface)}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,24px);height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark{display:inline-grid;place-items:center;width:42px;height:42px;flex:none}
.brand-mark svg{width:42px;height:42px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:1.06rem;font-weight:800;color:var(--heading);letter-spacing:-.02em}
.brand-text span{font-size:.7rem;color:var(--text-mute);font-weight:500;letter-spacing:.04em;text-transform:uppercase}

.nav-links{list-style:none;display:flex;align-items:center;gap:2px;padding:0;margin-inline:auto}
.nav-links a{position:relative;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;color:var(--text-soft);font-weight:600;font-size:.9rem;line-height:1.2;white-space:nowrap;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--heading);background:var(--surface-3)}
.nav-links a.active::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav-links a::after{transition:none}}
.nav-ico{display:inline-grid;place-items:center;width:24px;height:24px;flex:none}
.nav-ico svg{width:24px;height:24px}
.ic-bg{fill:var(--brand-100)}
.ic-fg{fill:var(--brand)}
.ic-cut{fill:var(--surface)}
.nav-links a[data-tone="cyan"] .ic-bg{fill:var(--cyan-100)}.nav-links a[data-tone="cyan"] .ic-fg{fill:var(--cyan-700)}
.nav-links a[data-tone="amber"] .ic-bg{fill:var(--amber-100)}.nav-links a[data-tone="amber"] .ic-fg{fill:var(--amber-700)}
.nav-links a[data-tone="violet"] .ic-bg{fill:var(--violet-100)}.nav-links a[data-tone="violet"] .ic-fg{fill:var(--violet-500)}

.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-2);background:var(--surface);border-radius:11px;cursor:pointer;color:var(--text-soft);transition:border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease)}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);background:var(--surface-3);transform:translateY(-1px)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-slow) var(--spring)}
.theme-toggle:hover svg{transform:rotate(18deg)}
@media (prefers-reduced-motion:reduce){.theme-toggle svg,.theme-toggle:hover svg{transition:none;transform:none}}
.theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--line-2);background:var(--surface);border-radius:11px;cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.burger:hover{border-color:var(--brand);background:var(--surface-3)}
.burger span{display:block;width:18px;height:2px;background:var(--heading);margin-inline:auto;border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-scrim{position:fixed;inset:0;background:var(--overlay);z-index:95;opacity:0;transition:opacity var(--t) var(--ease)}
.nav-scrim.show{opacity:1}
.nav-drawer{display:contents}
.drawer-head,.drawer-close,.drawer-note,.drawer-foot,.drawer-title{display:none}

.head-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.head-progress i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .1s linear}

@media (max-width:1140px){
  .burger{display:flex}
  /* Closed drawer is hidden, not just parked off-screen, so its links stay
     out of the tab order and it cannot widen the page. */
  .nav-drawer{display:block;position:fixed;top:0;right:0;height:100dvh;width:min(340px,86vw);background:var(--surface);z-index:96;transform:translateX(105%);visibility:hidden;transition:transform var(--t) var(--ease),visibility 0s linear var(--t);box-shadow:var(--sh-lg);overflow-y:auto;overscroll-behavior:contain;padding:20px}
  .nav-drawer.open{transform:none;visibility:visible;transition:transform var(--t) var(--ease),visibility 0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .drawer-title{display:block;font-weight:800;font-size:1.1rem;color:var(--heading)}
  .drawer-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:var(--surface);border-radius:10px;cursor:pointer;color:var(--text-soft)}
  .drawer-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav-links{flex-direction:column;align-items:stretch;gap:4px;margin-inline:0}
  .nav-links a{padding:12px 14px;font-size:1rem}
  .nav-links a::after{display:none}
  .drawer-note{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.82rem;color:var(--text-mute)}
  .drawer-foot{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;color:var(--text-mute)}
}

/* ---------------------------------------------------------------------------
   5 . BUTTONS
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:12px;font-weight:700;font-size:.94rem;cursor:pointer;border:1px solid transparent;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);white-space:nowrap;text-align:center}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-solid{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(166,25,46,.65)}
.btn-line{background:var(--surface);color:var(--heading);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-ghost{background:var(--surface-3);color:var(--heading)}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-1px)}
.btn-lg{padding:15px 26px;font-size:1rem;border-radius:14px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-line{box-shadow:var(--sh-xs)}
.btn:active{transform:translateY(0) scale(.985)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transition:none;transform:none}}

/* ---------------------------------------------------------------------------
   6 . SECTIONS + SHARED PIECES
   --------------------------------------------------------------------------- */
.sct{padding:clamp(52px,7vw,92px) 0}
.sct-alt{background:var(--surface)}
.sec-head{max-width:720px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.sec-head p{color:var(--text-soft);margin-top:12px;font-size:1.03rem}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);background:var(--brand-100);color:var(--brand-800);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.eyebrow-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Card grid pieces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-xs);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
@media (prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
/* Eight cards on a strict 4 x 2 grid, stepping down cleanly on smaller screens */
.feature-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-grid-4 .feature-card{padding:22px}
@media (max-width:1080px){.feature-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.feature-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.feature-grid-4{grid-template-columns:1fr}}
.feature-card .f-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--brand-100);margin-bottom:16px}
.feature-card .f-ico svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feature-card[data-tone="cyan"] .f-ico{background:var(--cyan-100)}.feature-card[data-tone="cyan"] .f-ico svg{stroke:var(--cyan-700)}
.feature-card[data-tone="amber"] .f-ico{background:var(--amber-100)}.feature-card[data-tone="amber"] .f-ico svg{stroke:var(--amber-700)}
.feature-card[data-tone="violet"] .f-ico{background:var(--violet-100)}.feature-card[data-tone="violet"] .f-ico svg{stroke:var(--violet-500)}
.feature-card h3{font-size:1.14rem;margin-bottom:8px}
.feature-card p{color:var(--text-soft);font-size:.95rem}

/* Numbered steps */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step-card{position:relative;overflow:hidden}
.step-num{font-family:var(--mono);font-size:2.6rem;font-weight:700;color:var(--brand-400);line-height:1;margin-bottom:12px}
.step-card h3{font-size:1.1rem;margin-bottom:8px}
.step-card p{color:var(--text-soft);font-size:.94rem}

/* About split */
.about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.about-split img{border-radius:var(--r-xl);box-shadow:var(--sh-md);width:100%}
.about-copy h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:16px}
.about-copy p{color:var(--text-soft);margin-bottom:14px}
.about-list{list-style:none;padding:0;display:grid;gap:12px;margin-top:8px}
.about-list li{display:flex;gap:11px;align-items:flex-start;color:var(--text-soft)}
.about-list svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
@media (max-width:820px){.about-split{grid-template-columns:1fr}.about-split .about-media{order:-1}}

/* Chart / reference table */
.ref-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);background:var(--surface)}
.ref-table{width:100%;border-collapse:collapse;min-width:520px}
.ref-table th,.ref-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.ref-table th{background:var(--surface-3);font-weight:700;color:var(--heading);position:sticky;top:0}
.ref-table td:first-child{font-weight:700;color:var(--heading);font-family:var(--mono)}
.ref-table tr:last-child td{border-bottom:0}
.ref-table .tag-cell span{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700}
.tag-normal{background:var(--cyan-100);color:var(--cyan-800)}
.tag-mid{background:var(--amber-100);color:var(--amber-800)}
.tag-hi{background:var(--brand-100);color:var(--brand-800)}

/* FAQ - two balanced columns, six questions each */
.faq-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);max-width:1080px;margin-inline:auto;align-items:start}
@media (max-width:860px){.faq-columns{grid-template-columns:1fr}}
.faq-list{display:grid;gap:12px;align-content:start}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease)}
.faq-item:hover{border-color:var(--line-2)}
.faq-item[open]{border-color:var(--brand-300);box-shadow:var(--sh-sm)}
.faq-item summary{list-style:none;cursor:pointer;padding:17px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;font-weight:700;font-size:.97rem;line-height:1.45;color:var(--heading);border-radius:var(--r-lg);transition:color var(--t) var(--ease)}
.faq-item summary:hover{color:var(--brand)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary .q-ico{flex:none;width:26px;height:26px;margin-top:1px;display:grid;place-items:center;border-radius:8px;background:var(--brand-100);color:var(--brand);transition:transform var(--t-slow) var(--spring),background var(--t) var(--ease)}
.faq-item summary .q-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.faq-item[open] summary .q-ico{transform:rotate(135deg);background:var(--brand-200)}
html[data-theme="dark"] .faq-item[open] summary .q-ico{background:var(--brand-100)}
.faq-panel{overflow:hidden;transition:height var(--t-slow) var(--ease)}
.faq-item .faq-body{padding:0 18px 18px;color:var(--text-soft);font-size:.94rem;line-height:1.72}
.faq-item .faq-body a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.faq-panel{transition:none}.faq-item summary .q-ico{transition:none}}

/* Reviews - a continuously drifting carousel with its own controls */
.review-carousel{position:relative}
.rc-viewport{overflow:hidden;padding:6px 0 12px}
/* Soften both edges so cards enter and leave instead of being chopped off */
@media (min-width:721px){
  .rc-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
}
.rc-track{--rc-card:372px;display:flex;align-items:stretch;gap:20px;will-change:transform;cursor:grab;touch-action:pan-y}
.rc-track.is-dragging{cursor:grabbing;user-select:none}
.rc-track .review-card{flex:0 0 var(--rc-card);max-width:84vw;margin:0}
@media (max-width:1180px){.rc-track{--rc-card:340px}}
@media (max-width:760px){.rc-track{--rc-card:300px;gap:16px}}
/* The drift already supplies the motion, so cards do not also lift */
.rc-track .review-card:hover{transform:none;box-shadow:var(--sh-xs);border-color:var(--line-2)}

.rc-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px}
.rc-btn{display:inline-grid;grid-auto-flow:column;place-items:center;gap:8px;min-width:46px;height:46px;padding:0 14px;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;color:var(--text-soft);font-weight:700;font-size:.86rem;cursor:pointer;transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)}
.rc-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--surface-3);transform:translateY(-2px)}
.rc-btn:active{transform:translateY(0) scale(.97)}
.rc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rc-play .ico-play{display:none;fill:currentColor;stroke:none}
.rc-play.is-paused .ico-play{display:block}
.rc-play.is-paused .ico-pause{display:none}
@media (prefers-reduced-motion:reduce){.rc-btn,.rc-btn:hover,.rc-btn:active{transition:none;transform:none}}

.review-card{display:flex;flex-direction:column}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.review-card .stars{display:flex;gap:2px}
.review-card .stars span{display:inline-flex}
.review-card .stars svg{width:17px;height:17px;fill:var(--line-2);stroke:none;transition:fill var(--t) var(--ease)}
.review-card .stars span.is-on svg{fill:var(--amber-500)}
.review-tag{flex:none;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-800);background:var(--brand-100);padding:3px 10px;border-radius:var(--r-pill)}
.review-card p{color:var(--text-soft);font-size:.94rem;line-height:1.68;margin-bottom:18px;flex:1}
.review-who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line)}
.review-who .av{width:40px;height:40px;flex:none;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem}
.review-who b{display:block;font-size:.9rem;color:var(--heading)}
.review-who>div{min-width:0}
.review-who>div span{display:block;font-size:.79rem;color:var(--text-soft)}
.review-date{margin-left:auto;flex:none;font-size:.74rem;color:var(--text-mute);font-weight:600;white-space:nowrap}

/* CTA band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--grad-crt);color:#fff;border-radius:var(--r-2xl);padding:clamp(28px,4vw,48px);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;opacity:.6;pointer-events:none}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);position:relative}
.cta-band p{color:rgba(255,255,255,.82);margin-top:8px;max-width:52ch;position:relative}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.cta-band .btn-line{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.cta-band .btn-line:hover{background:rgba(255,255,255,.18);color:#fff}

/* ---------------------------------------------------------------------------
   7 . BLOG CARDS + PAGINATION
   --------------------------------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.blog-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.blog-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid,.blog-grid-3{grid-template-columns:1fr}}
.b-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xs);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.b-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.b-card .b-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)}
.b-card .b-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.b-body h3{transition:color var(--t) var(--ease)}
.b-card:hover .b-media img{transform:scale(1.05)}
.b-tag{position:absolute;top:12px;left:12px;padding:4px 11px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);font-size:.72rem;font-weight:700;color:var(--brand-800);border:1px solid var(--line)}
.b-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.b-meta{display:flex;gap:12px;font-size:.76rem;color:var(--text-mute);font-weight:600}
.b-body h3{font-size:1.08rem;line-height:1.32}
.b-card:hover .b-body h3{color:var(--brand)}
.b-body p{color:var(--text-soft);font-size:.9rem;flex:1}
.b-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.86rem;color:var(--brand);margin-top:4px}
.b-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.b-card:hover .b-more svg{transform:translateX(4px)}

.blog-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:36px}
.pg-status{font-size:.85rem;color:var(--text-mute);font-weight:600}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pager button{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;font-weight:700;font-size:.9rem;color:var(--text-soft);cursor:pointer;transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)}
.pager button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.pager button.is-current{background:var(--grad-brand);color:#fff;border-color:transparent}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ---------------------------------------------------------------------------
   8 . PAGE HERO + BREADCRUMBS (interior pages)
   --------------------------------------------------------------------------- */
.page-hero{background:var(--grad-crt);color:#fff;padding:clamp(46px,7vw,80px) 0 clamp(40px,6vw,64px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.1rem);margin-bottom:14px}
.page-hero p{color:rgba(255,255,255,.82);max-width:62ch;font-size:1.05rem}
.crumbs{font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:18px;font-weight:600}
.crumbs a{color:rgba(255,255,255,.9)}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin-inline:7px;opacity:.6}

/* ---------------------------------------------------------------------------
   9 . PROSE (legal + guide bodies)
   --------------------------------------------------------------------------- */
.prose{color:var(--text-soft);font-size:1.02rem;line-height:1.75;max-width:72ch}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--heading);margin-top:1.9em;scroll-margin-top:90px}
.prose h3{font-size:1.18rem;color:var(--heading);margin-top:1.5em}
.prose p{margin-top:1em}
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{padding-left:1.4em;margin-top:1em}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--brand)}
.prose strong{color:var(--heading)}
.prose blockquote{border-left:3px solid var(--brand);padding:4px 0 4px 18px;color:var(--text-soft);font-style:italic;background:var(--surface-2)}
.prose code{font-family:var(--mono);background:var(--surface-3);padding:2px 7px;border-radius:6px;font-size:.9em;color:var(--brand-800)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1.2em}
.prose th,.prose td{padding:10px 13px;border:1px solid var(--line);text-align:left}
.prose th{background:var(--surface-3);font-weight:700;color:var(--heading)}
.prose .callout{background:var(--brand-050);border:1px solid var(--brand-200);border-left:4px solid var(--brand);border-radius:var(--r-md);padding:16px 20px;color:var(--text-soft)}
.prose .callout strong{color:var(--brand-800)}

/* Guide layout with sidebar */
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,52px);align-items:start}
@media (max-width:960px){.guide-layout{grid-template-columns:1fr}}
.guide-head h1{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:14px}
.guide-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--text-mute);font-size:.85rem;font-weight:600;margin-bottom:22px}
.guide-meta .g-tag{padding:4px 12px;border-radius:var(--r-pill);background:var(--brand-100);color:var(--brand-800)}
.guide-hero-img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-md);margin-bottom:8px;aspect-ratio:16/9;object-fit:cover}
.sidebar{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:18px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.side-card h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);margin-bottom:14px}
.side-toc ol{list-style:none;padding:0;counter-reset:toc;display:grid;gap:2px}
.side-toc li{counter-increment:toc}
.side-toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--text-soft);font-size:.88rem;font-weight:500;border-left:2px solid transparent;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.side-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);color:var(--brand-300);margin-right:9px;font-size:.8rem}
.side-toc a:hover,.side-toc a.active{background:var(--surface-3);color:var(--brand);border-left-color:var(--brand)}
.side-links{list-style:none;padding:0;display:grid;gap:4px}
.side-links a{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:9px;color:var(--text-soft);font-size:.88rem;font-weight:600;transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.side-links a:hover{background:var(--surface-3);color:var(--brand)}
.side-links a svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.side-cta{background:var(--grad-crt);color:#fff;text-align:center}
.side-cta h4{color:rgba(255,255,255,.7)}
.side-cta p{color:rgba(255,255,255,.85);font-size:.9rem;margin-bottom:14px}

/* Prev/next + related */
.guide-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
@media (max-width:640px){.guide-nav{grid-template-columns:1fr}}
.guide-nav a{display:flex;flex-direction:column;gap:5px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.guide-nav a:hover{border-color:var(--brand);transform:translateY(-2px)}
.guide-nav span{font-size:.76rem;color:var(--text-mute);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.guide-nav b{color:var(--heading);font-size:.98rem}
.guide-nav .gn-next{text-align:right}
.related-head{margin:56px 0 24px;text-align:center}
.related-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}

/* ---------------------------------------------------------------------------
   10 . FOOTER
   --------------------------------------------------------------------------- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding-top:clamp(48px,6vw,72px)}
html[data-theme="dark"] .site-footer{border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .brand-text b{color:#fff}
.footer-brand .brand-text span{color:var(--footer-mute)}
.footer-brand>p{margin-top:16px;font-size:.9rem;line-height:1.7;color:var(--footer-text);max-width:42ch}
.footer-privacy{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.82rem;color:var(--footer-mute)}
.footer-privacy svg{width:16px;height:16px;fill:none;stroke:var(--brand-400);stroke-width:1.8}
.footer-col h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;display:grid;gap:9px}
.footer-col a{display:flex;align-items:center;gap:7px;color:var(--footer-text);font-size:.89rem;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.footer-col a:hover{color:#fff}
.footer-link-arrow{width:14px;height:14px;flex:none;fill:none;stroke:var(--brand-400);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-4px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.footer-col a:hover .footer-link-arrow{opacity:1;transform:none}
.footer-note{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;font-size:.82rem;color:var(--footer-mute);line-height:1.7}
.footer-note strong{color:var(--footer-text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 30px;border-top:1px solid rgba(255,255,255,.09);font-size:.82rem;color:var(--footer-mute)}
.footer-keyword-link{color:var(--brand-400)}
.footer-badges{display:flex;gap:14px;flex-wrap:wrap}
.footer-badge{display:flex;align-items:center;gap:6px;font-size:.78rem}
.footer-badge svg{width:15px;height:15px;fill:none;stroke:var(--brand-400);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------------------
   11 . MISC
   --------------------------------------------------------------------------- */
.back-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:14px;background:var(--grad-brand);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-brand);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);z-index:80}
.back-top.show{opacity:1;transform:none;pointer-events:auto}
.back-top:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(166,25,46,.7)}
.back-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.noscript-note{background:var(--brand-050);border:1px solid var(--brand-200);color:var(--brand-900);padding:16px 20px;border-radius:var(--r-lg);margin-bottom:24px}
.legal-updated{color:var(--text-mute);font-size:.88rem;margin-bottom:8px}
.notfound-code{font-family:var(--font-mono,monospace);font-weight:800;font-size:clamp(4.5rem,16vw,9rem);line-height:1;letter-spacing:.05em;color:var(--brand-600);text-shadow:4px 4px 0 var(--brand-100);margin-bottom:8px}
[data-theme="dark"] .notfound-code{text-shadow:4px 4px 0 rgba(166,25,46,.28)}

@media (max-width:1140px){:root{--header-h:70px}}