/* ============================================================
   Orca Crypto design system
   Brand: red #9E171C, ink #0A0A0B
   ============================================================ */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/outfit-latin-300.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-300.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/outfit-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/outfit-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/outfit-latin-ext-800.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/oswald-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/oswald-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/oswald-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/oswald-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/oswald-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/oswald-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/oswald-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/oswald-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --red:#9E171C;
  --red-2:#C21F27;
  --red-3:#E23A42;
  --red-soft:#FBEEEE;
  --red-line:#F0D7D8;

  --ink:#0A0A0B;
  --ink-2:#17171A;
  --ink-3:#2A2A2F;
  --body:#3A3A40;
  --muted:#5F5F68;
  --faint:#6E6E76;

  --paper:#FFFFFF;
  --paper-2:#FAF9F8;
  --paper-3:#F4F2F0;
  --line:#E7E4E1;
  --line-2:#D8D4D0;

  --hdr-bg:rgba(255,255,255,.88);  /* the sticky header is a translucent sheet
                                      of the page colour, never plain white */
  --surface:#FFFFFF;     /* cards, inputs, anything that reads as a sheet */
  --surface-2:#FAF9F8;
  --panel:#0A0A0B;       /* blocks that are dark in both themes */
  --panel-2:#17171A;
  --red-ink:#9E171C;     /* brand red used as text, which has to lift on dark */
  --red-ink-2:#C21F27;
  --ok-soft:#E9F7EF;   --ok-line:#CFE6D8;   --ok-ink:#0C6B45;
  --live-ink:#A8410F;
  --warn-soft:#FEF7EC; --warn-line:#F2DFBE;
  --bad-soft:#FDECEC;  --bad-line:#F3D4D4;

  --accent:#9E171C;
  --accent-ink:#9E171C;
  --accent-soft:rgba(158,23,28,.07);
  --accent-dk:#F0616A;
  --accent-dk-soft:rgba(240,97,106,.14);

  --ok:#0F7B4F;
  --warn:#9A6206;
  --bad:#A81C1C;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 1px 2px rgba(10,10,11,.05), 0 1px 1px rgba(10,10,11,.03);
  --shadow-2:0 4px 16px -4px rgba(10,10,11,.10), 0 2px 6px -2px rgba(10,10,11,.06);
  --shadow-3:0 18px 48px -12px rgba(10,10,11,.20), 0 8px 20px -8px rgba(10,10,11,.10);

  --wrap:1220px;
  --nav-h:74px;

  --f-display:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-head:'Oswald', 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ---------------------------------------------------------------- dark mode
   Only the tokens change. Everything downstream is already written against
   them, so the two themes cannot drift apart.

   --panel stays dark in both, because the hero, the footer and the result
   panels are dark bands by design rather than by accident of the theme.
   --accent already ships in two forms per page: one that clears contrast on
   white and one that clears it on near black, so dark mode swaps to the
   second rather than inventing a colour. */
:root{color-scheme:light}


:root[data-theme="dark"]{
  color-scheme:dark;
  --hdr-bg:rgba(13,13,17,.86); --paper:#0D0D11; --paper-2:#131318; --paper-3:#1A1A21;
  --surface:#16161C; --surface-2:#1C1C23;
  --panel:#08080B; --panel-2:#16161C;
  --line:#26262F; --line-2:#33333E;
  --ink:#F3F3F7; --ink-2:#E2E2E9; --ink-3:#CDCDD6;
  --body:#B4B4BF; --muted:#A2A2AC; --faint:#8B8B98;
  --red-ink:#F0616A; --red-ink-2:#FF8C93;
  --red-soft:rgba(240,97,106,.13); --red-line:rgba(240,97,106,.26);
  --accent:var(--accent-dk); --accent-ink:var(--accent-dk);
  --accent-soft:var(--accent-dk-soft);
  --ok:#3DD68C; --warn:#E8B45C; --bad:#FF8C93;
  /* The roadmap "live" chip. This was only ever set in the system dark block,
     so anyone who reached dark by the toggle kept the light value on it. */
  --live-ink:#F08A5A;
  --ok-soft:rgba(61,214,140,.11); --ok-line:rgba(61,214,140,.30); --ok-ink:#3DD68C;
  --warn-soft:rgba(232,180,92,.11); --warn-line:rgba(232,180,92,.30);
  --bad-soft:rgba(255,140,147,.11); --bad-line:rgba(255,140,147,.30);
  --shadow-1:0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.30);
  --shadow-2:0 4px 16px -4px rgba(0,0,0,.60), 0 2px 6px -2px rgba(0,0,0,.45);
  --shadow-3:0 18px 48px -12px rgba(0,0,0,.72), 0 8px 20px -8px rgba(0,0,0,.55);
}


*,*::before,*::after{box-sizing:border-box}
/* long unbreakable strings (wallet addresses, hashes, urls) must never push
   the page wider than the phone it is being read on. */
p,li,td,th,dd,dt,figcaption,blockquote,summary,.excerpt,.note,.card p,.gl-list a,
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
/* only genuinely unbreakable strings get split anywhere */
code,.addr,.hashy{overflow-wrap:anywhere}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 18px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} }

body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--f-body); font-size:17px; line-height:1.68;
  font-feature-settings:'kern' 1,'liga' 1,'cv05' 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--red-ink); text-decoration:none}
a:hover{color:var(--red-ink-2)}
:focus-visible{outline:3px solid var(--red-3); outline-offset:3px; border-radius:4px}

/* Headings are Oswald, uppercase. Oswald is condensed with a tall cap height, so
   the negative tracking of the old stack is replaced with a little positive
   tracking, which is what uppercase needs to stay readable. */
h1,h2,h3,h4,h5,h6,.grp-h{font-family:var(--f-head); color:var(--ink); margin:0; line-height:1.14;
  letter-spacing:.012em; font-weight:600; text-transform:uppercase}
h1{font-size:clamp(2.2rem,4.5vw,3.55rem); font-weight:700; letter-spacing:.006em; line-height:1.07}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem); font-weight:700; letter-spacing:.01em; line-height:1.1}
h3{font-size:clamp(1.14rem,1.75vw,1.38rem); font-weight:600; letter-spacing:.018em}
h4{font-size:1.02rem; font-weight:600; letter-spacing:.022em}
.eyebrow,.kicker{font-family:var(--f-head)}
p{margin:0 0 1.15em}
/* headings need air before the copy that follows them */
h1+p,h2+p,h3+p,h4+p,h5+p,
h1+ul,h2+ul,h3+ul,h4+ul,
h1+ol,h2+ol,h3+ol,h4+ol,
h2+.tbl-wrap,h3+.tbl-wrap,h2+.note,h3+.note{margin-top:1.15rem}
h2+.steps,h3+.steps,h2+.rm,h2+.grid,h2+.donut,h2+.mkt-head,
h2+.pills,h2+.ca-box,h2+.logo-row{margin-top:1.6rem}
strong{color:var(--ink-2); font-weight:650}
code{font-family:var(--f-mono); font-size:.86em; background:var(--paper-3); border:1px solid var(--line); padding:.14em .42em; border-radius:var(--r-xs); color:var(--ink-2)}
hr{border:0; border-top:1px solid var(--line); margin:2.6rem 0}
::selection{background:var(--red); color:#fff}

.wrap{width:100%; max-width:1250px; margin-inline:auto; padding-inline:clamp(18px,3.4vw,56px)}
.wrap-full{width:100%; padding-inline:clamp(18px,3.4vw,72px)}
.wrap-n{width:100%; max-width:calc(880px + 2*clamp(18px,3.4vw,72px)); margin-inline:auto; padding-inline:clamp(18px,3.4vw,72px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--panel);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0;color:#fff}

/* ---------- reading progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--red),var(--accent));transition:width .1s linear}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:var(--hdr-bg);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line)}
/* The nav is centred on the viewport, not between the brand and the actions,
   because those two are very different widths. Taking it out of the flow is the
   only way to get a true centre; the widths below keep it from ever overlapping. */
.hdr-in{display:flex;align-items:center;gap:20px;height:var(--nav-h);width:100%;position:relative}
.brand{display:flex;align-items:center;flex:0 0 auto;padding:6px 0}
.brand img{height:34px;width:auto}
/* The wordmark is black artwork. Rather than filtering it, which would wreck the
   red in the mark, the white file is shipped alongside and one is shown. */
.brand .b-light{display:block}
.brand .b-dark{display:none}
:root[data-theme="dark"] .brand .b-light{display:none}
:root[data-theme="dark"] .brand .b-dark{display:block}
@media (max-width:420px){ .brand img{height:28px} }

.nav-wrap{position:absolute;left:50%;transform:translateX(-50%);min-width:0}
.nav{display:flex;align-items:center;gap:2px;flex:0 0 auto;justify-content:flex-end}
.nav>li{list-style:none;position:relative}
.navlink{display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap;
  font-family:var(--f-display);font-weight:500;font-size:.955rem;color:var(--ink-2);letter-spacing:-.008em;
  background:none;border:0;cursor:pointer;font-family:var(--f-display);transition:background .15s,color .15s}
.navlink:hover,.navlink[aria-expanded="true"]{background:var(--paper-3);color:var(--ink)}
.chev{width:10px;height:6px;flex:0 0 auto;opacity:.48;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s}
.navlink:hover .chev{opacity:.75}
.navlink[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:.9}

.mega{position:absolute;top:calc(100% + 10px);left:-14px;width:max-content;
  min-width:min(600px,calc(100vw - 48px));max-width:calc(100vw - 48px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:18px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:110}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
/* the panels near the end of the nav would hang off the right edge if they
   opened leftward, so they hang from their right edge instead. */
.nav>li:nth-last-child(-n+4) .mega{left:auto;right:-14px}
/* A tinted rail for the section itself, then two short columns of plain links.
   The rail is a fixed width so every panel opens at the same shape. */
.mega-grid{display:grid;grid-template-columns:216px repeat(2,minmax(150px,1fr));gap:4px 16px;align-items:start}
.mega-lead{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 15px 15px;align-self:stretch;display:flex;flex-direction:column}
.mega-lead .grp-h{margin:0 0 7px}
.mega-lead p{font-size:.815rem;line-height:1.45;color:var(--ink-2);margin:0 0 13px;text-wrap:pretty}
.mega-lead .btn{width:100%;justify-content:center;margin-top:auto}
.mega-extra{display:block;text-align:center;margin-top:9px;font-size:.8rem;
  font-weight:550;color:var(--red-ink);padding:2px}
.mega-extra:hover{text-decoration:underline}
.mega-col{padding-top:2px}
.grp-h,.mega-col .grp-h{display:block;font-family:var(--f-display);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint);margin:6px 0 8px;font-weight:600}
.mega-col .grp-h{margin-top:4px}
/* The plain link styling has to stay off the rail's button and its secondary
   link, or the soft pink hover lands underneath white button text and the label
   disappears. :where keeps the exclusion at zero specificity so the button's own
   rules still win normally. */
.mega a:where(:not(.btn,.mega-extra)){display:block;padding:6px 9px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:.9rem;font-weight:450;line-height:1.35;white-space:nowrap;
  transition:background .13s,color .13s}
.mega a:where(:not(.btn,.mega-extra)):hover{background:var(--red-soft);color:var(--red-ink)}
.mega .mega-lead .btn{white-space:nowrap;color:#fff}
.mega .mega-lead .btn:hover,.mega .mega-lead .btn:focus-visible{
  background:var(--panel);border-color:var(--panel);color:#fff}
.mega a.has-mark{display:flex;align-items:center;gap:9px}
.mega-logo{width:20px;height:20px;object-fit:contain;flex:0 0 auto;border:0;background:none}
.side a.has-mark{display:flex;align-items:center;gap:10px}
.side .mega-logo{width:18px;height:18px}

/* The theme control shows the state you would switch to, not the one you are
   in, because a moon on a dark page reads as a status light rather than a
   button. */
.theme-btn .t-moon{display:none}
:root[data-theme="dark"] .theme-btn .t-sun{display:none}
:root[data-theme="dark"] .theme-btn .t-moon{display:block}
/* Brand marks arrive as supplied and are never redrawn or recoloured. The ones
   that ship as black artwork simply vanish on a dark page, so those, and only
   those, get a light plate behind them. Which ones is measured from the files at
   build time rather than kept as a list. */
/* Partner and brand marks all take the plate together in dark mode, whether or
   not the measurement flagged them. A row where some logos sit on a white plate
   and others float on the card reads as a bug, and a grey wordmark like Brave's
   is legible on its own and still looks wrong beside a plated neighbour.
   Small inline marks keep the measured behaviour, because a white plate behind
   every chain icon would be far heavier than the problem it solves. */
.plate{border-radius:8px}
:root[data-theme="dark"] .plate,
:root[data-theme="dark"] .brand-mark img,
:root[data-theme="dark"] .logo-chip img,
:root[data-theme="dark"] .plogo img{background:#F4F4F6;padding:5px 9px;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10)}
:root[data-theme="dark"] .card-logo.plate{padding:6px 8px}

/* An element that carries its own brand colour ships two of them: one that
   clears contrast on the light theme and one that clears it on the dark. Setting
   --accent inline would beat any theme rule, so the inline style supplies the
   two candidates and the theme chooses. */
[style*="--c-lt"]{--accent:var(--c-lt);--accent-ink:var(--c-lt);--c:var(--c-lt);
  --accent-soft:color-mix(in srgb,var(--c-lt) 7%,transparent)}
:root[data-theme="dark"] [style*="--c-lt"]{--accent:var(--c-dk);--accent-ink:var(--c-dk);
  --c:var(--c-dk);--accent-soft:color-mix(in srgb,var(--c-dk) 18%,transparent)}

.hdr-act{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2);transition:.15s}
.icon-btn svg{width:17px;height:17px;flex:0 0 auto}
.icon-btn.burger svg{width:19px;height:19px}
.icon-btn:hover{border-color:var(--line-2);background:var(--paper-2)}
.burger{display:none}
@media (max-width:1080px){
  .nav{display:none} .burger{display:grid}
}
/* mid desktop: the nav plus the actions were wider than the padded box,
   which pushed the right hand controls past the padding edge. */
@media (min-width:1081px){
  .hdr-in{gap:12px}
  .nav{gap:0}
  .navlink{padding:9px 8px;font-size:.9rem;gap:4px}
  .hdr-act{gap:7px}
  .hdr-act .btn{padding:9px 14px}
  .hdr-act .icon-btn[href="/glossary/"]{display:none}
  .mega{min-width:min(552px,calc(100vw - 48px));padding:16px}
  .mega-grid{grid-template-columns:198px repeat(2,minmax(140px,1fr));gap:4px 12px}
  .mega a:where(:not(.btn)){font-size:.875rem;padding:5px 8px}
}
/* Seven panels plus the glossary link is a wide nav, and at the narrow end of
   the desktop range it reached into the actions block. The range where the
   links tighten now runs to 1279 rather than 1200, which is where the two
   stopped colliding. */
@media (min-width:1081px) and (max-width:1359px){
  .navlink{padding:9px 5px;font-size:.86rem;gap:3px}
  .lang-code{display:none}
  /* At the narrow end of the desktop range the widest panel reached the very
     left edge of the window. A tighter rail and wrapping link text pull it back
     inside the gutter. */
  /* A max-content width ignores every wrapping opportunity, so the widest panel
     stayed 598px however much the links were allowed to wrap. Below 1280 the
     panel takes a fixed width instead and the link text wraps inside it. */
  .mega{width:min(500px,calc(100vw - 48px));min-width:0}
  .mega-grid{grid-template-columns:166px repeat(2,minmax(108px,1fr))}
  .mega a:where(:not(.btn)){white-space:normal}
}
@media (min-width:1081px) and (max-width:1199px){
  .navlink{padding:9px 3px;font-size:.825rem}
  .hdr-in{gap:8px}
  .hdr-act{gap:5px}
  .icon-btn{width:36px;height:36px}
  .hdr-act .btn{padding:8px 11px;font-size:.83rem}
}
/* The nav is centred on the viewport, so the space it can use is bounded by
   whichever side is wider, which is always the actions. Spacing therefore opens
   up in steps tied to the widths where the actions block actually changes size
   (the Book a session button returns at 1411, the language code at 1521). */
/* The nav gained a seventh panel, so each step where the links breathe out
   again has to start later than it used to. These boundaries are the widths
   where the nav and the actions block measured clear of each other. */
@media (min-width:1360px){
  .hdr-in{gap:16px}
  .nav{gap:2px}
  .navlink{padding:9px 11px;font-size:.905rem;gap:5px}
  .hdr-act{gap:8px}
}
@media (min-width:1620px){
  .hdr-in{gap:20px}
  .nav{gap:4px}
  .navlink{padding:10px 14px;font-size:.93rem}
  .hdr-act{gap:10px}
}
@media (min-width:1900px){
  .nav{gap:6px}
  .navlink{padding:10px 17px;font-size:.95rem}
}
@media (max-width:430px){
  .hdr-in{gap:10px}
  .hdr-act{gap:6px}
  .hdr-act .icon-btn[href="/glossary/"]{display:none}
}

/* mobile drawer.
   The drawer itself is a fixed, viewport sized clipper that never moves, so the
   panel parked off canvas at translateX(100%) cannot widen the document. */
.drawer{position:fixed;inset:var(--nav-h) 0 0;z-index:99;overflow-x:hidden;overflow-y:auto;
  visibility:hidden;pointer-events:none;background:var(--surface);
  opacity:0;transition:opacity .01s .28s,visibility .01s .28s}
.drawer[data-open="true"]{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .01s,visibility .01s}
.drawer-panel{min-height:100%;padding:22px 0 60px;background:var(--surface);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  padding:2px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.drawer-t{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.15em;
  font-size:.7rem;color:var(--faint)}
.drawer-x{width:42px;height:42px}
.drawer-x svg{width:19px;height:19px}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{padding:15px 4px;font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .2s}
.drawer details[open] summary::after{transform:rotate(-135deg)}
.drawer .dl{padding:0 0 14px}
.drawer .dl a{display:block;padding:8px 12px;color:var(--body);border-radius:var(--r-sm);font-size:.94rem}
.drawer .dl a:hover{background:var(--red-soft);color:var(--red-ink)}
.drawer .dl-h{display:block;font-family:var(--f-display);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);font-weight:600;margin:12px 0 3px;padding:0 12px}
.drawer .dl-h:first-child{margin-top:2px}
.drawer .dl a.dl-lead{color:var(--red-ink)}
.drawer .dl a.dl-lead strong{font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:.97rem;letter-spacing:-.01em;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .16s,color .16s,border-color .16s;
  text-align:center;line-height:1.2;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px -6px rgba(158,23,28,.55)}
.btn-dark{background:var(--panel);color:#fff}
.btn-ocx{background:#0E7C66;color:#fff;box-shadow:0 6px 18px -6px rgba(14,124,102,.55)}
.btn-ocx .tick{font-family:var(--f-mono);opacity:.85}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-onDark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(8px)}
/* One hover for every button, whatever its resting colour or the page accent:
   black ground, white text. Page accents used to bleed into the hover state and
   produce white text on a pale tint. */
.btn:hover,.btn:focus-visible,
.btn-primary:hover,.btn-dark:hover,.btn-ghost:hover,.btn-onDark:hover{
  background:var(--panel);color:#fff;border-color:var(--panel);
  transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(10,10,11,.42)}
.btn:hover svg,.btn-primary:hover svg{color:#fff}
/* On a dark surface a black hover would vanish, so it inverts the other way:
   white ground, black text. */
.hero .btn:hover,.hero .btn:focus-visible,
.sec-ink .btn:hover,.sec-ink .btn:focus-visible,
.cta .btn:hover,.cta .btn:focus-visible,
.card-ink .btn:hover,.card-ink .btn:focus-visible,
.ftr .btn:hover,.ftr .btn:focus-visible,
.rankbox .btn:hover,.rankbox .btn:focus-visible,
.sim-final .btn:hover,.sim-final .btn:focus-visible,
.btn-onDark:hover,.btn-onDark:focus-visible{
  /* Literal, not tokens. This is an inversion against a dark surface, and any
     scope that redefines --surface or --ink turns it into white on white. */
  background:#FFFFFF;color:#0A0A0B;border-color:#fff;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.55)}
.hero .btn:hover svg,.sec-ink .btn:hover svg,.cta .btn:hover svg,
.card-ink .btn:hover svg,.ftr .btn:hover svg,.rankbox .btn:hover svg,
.sim-final .btn:hover svg,.btn-onDark:hover svg{color:var(--ink)}
.btn-sm{padding:9px 17px;font-size:.9rem}
.btn-lg{padding:15px 30px;font-size:1.04rem}
.btn-block{display:flex;width:100%}
@media (max-width:900px){ .hdr-act .btn{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;background:var(--panel);color:#fff;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 115% at 50% 45%,rgba(10,10,11,.38) 0%,rgba(10,10,11,.16) 50%,transparent 86%),
             linear-gradient(180deg,rgba(10,10,11,.16) 0%,transparent 30%,rgba(10,10,11,.22) 100%)}
/* Hero copy is centred. Left aligned it left the whole right half of a wide
   screen empty, which read as dead space rather than as breathing room. */
.hero-in{position:relative;z-index:2;padding:clamp(64px,10vw,124px) 0 clamp(60px,8vw,100px);
  text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-lg .hero-in{padding:clamp(66px,8vw,110px) 0 clamp(64px,7vw,96px)}
.hero h1{color:#fff;max-width:26ch;margin-inline:auto}
.hero-lg h1{max-width:24ch}
.hero p.lede{font-size:clamp(1.06rem,1.65vw,1.32rem);color:rgba(255,255,255,.80);max-width:62ch;
  margin:1.15rem auto 0;line-height:1.6}
.hero .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1rem;justify-content:center}
.hero .plogo{justify-content:center}
.hero .hstats,.hero .excerpt,.hero .ca-box{text-align:left;width:100%}

.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;
  font-size:.735rem;text-transform:uppercase;letter-spacing:.17em;color:var(--accent-dk);
  background:var(--accent-dk-soft);border:1px solid color-mix(in srgb,var(--accent-dk) 34%,transparent);
  padding:7px 15px;border-radius:999px;margin-bottom:1.35rem;backdrop-filter:blur(8px)}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-dk);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-dk) 30%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.kicker-light{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent);backdrop-filter:none}
.kicker-light .dot{background:var(--accent)}

.hero-logo{height:44px;width:auto;margin-bottom:26px;filter:brightness(0) invert(1);opacity:.92}

/* breadcrumbs */
.crumbs{position:relative;z-index:2;font-size:.83rem;color:rgba(255,255,255,.55);padding-top:22px;
  font-family:var(--f-display);font-weight:450;text-align:center}
.crumbs a{color:rgba(255,255,255,.72)}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.4}

/* ---------- hero stats ---------- */
.hstats{display:flex;flex-wrap:wrap;gap:1px;margin:3.2rem auto 0;width:100%;max-width:900px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);overflow:hidden}
.hstats>div{background:rgba(10,10,11,.55);padding:20px 18px;backdrop-filter:blur(10px);flex:1 1 120px;
  min-width:0;text-align:center}
.hstats b{display:block;font-family:var(--f-display);font-size:1.75rem;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.05}
.hstats span{display:block;font-size:.775rem;color:rgba(255,255,255,.62);margin-top:5px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}

/* ---------- sections ---------- */
.sec{padding:clamp(60px,8vw,108px) 0}
.sec-tight{padding:clamp(44px,5vw,68px) 0}
/* The alternating band. In the light theme it is a brand red field carrying a
   white version of the same node and edge motif the heroes use; the canvas is
   injected at runtime so no page template has to know about it. Cards, notes and
   tables keep their own surfaces and sit on top of it. Dark mode leaves the band
   alone, because a red field against a near black page is a different design and
   was not what was asked for. */
.sec-alt{background:var(--paper-2);border-block:1px solid var(--line)}

/* ---- updates feed -------------------------------------------------------
   One card per release. The accent comes from the entry's tag through the
   two candidate custom properties, so it inverts with the theme like
   everything else that carries a per item colour. */
/* Capped and centred: at the full 1250px wrap the text stopped at 74ch and
   left half the card empty. */
.upd-list{display:flex;flex-direction:column;gap:18px;margin-top:1.6rem;
  max-width:920px;margin-left:auto;margin-right:auto}
.upd{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:26px 28px 24px}
.upd::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.upd-meta{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.upd-tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:5px 12px}
.upd-meta time{font-size:.84rem;color:var(--faint);font-variant-numeric:tabular-nums}
.upd h3{margin:0 0 .5rem;font-size:1.28rem;line-height:1.25}
.upd h3 a{color:var(--ink);text-decoration:none}
.upd h3 a:hover{color:var(--accent);text-decoration:underline}
.upd p{margin:0 0 1rem;color:var(--body)}
@media (max-width:640px){.upd{padding:22px 20px 20px}}

:root:not([data-theme="dark"]) .sec-alt{
  background:var(--red);border-block-color:color-mix(in srgb,#000 22%,var(--red));
  position:relative;isolation:isolate;
  /* The band redefines the palette for everything inside it rather than trying
     to name every element that might carry text. One scope, and every heading,
     lede, eyebrow, link and rule that already reads from a token follows. */
  --ink:#FFFFFF; --ink-2:#FFFFFF; --ink-3:rgba(255,255,255,.92);
  --body:rgba(255,255,255,.90); --muted:rgba(255,255,255,.82);
  --faint:rgba(255,255,255,.74);
  --accent:#FFFFFF; --accent-ink:#FFFFFF; --red-ink:#FFFFFF; --red-ink-2:#FFFFFF;
  --accent-soft:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.26); --line-2:rgba(255,255,255,.36);
  --surface:#FFFFFF; --surface-2:#FFFFFF;
  color:#fff}
/* The canvas is the one child that must not be pulled into the content layer. */
:root:not([data-theme="dark"]) .sec-alt>*:not(.band-net){position:relative;z-index:1}
/* A canvas is a replaced element, so inset:0 alone leaves it at its intrinsic
   300 by 150. It needs an explicit size to fill the band. */
.band-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.5}
/* Light is the default, so the band shows unless dark was actually chosen. */
.band-net{display:none}
:root:not([data-theme="dark"]) .band-net{display:block}

/* Anything that reads as its own sheet sits on white and takes the ordinary
   palette back. Several of these carried no background of their own, which was
   fine on an off white band and unreadable on a red one, so they get one here. */
/* Every component that paints its own light surface, listed from the stylesheet
   rather than from memory, so a component added later is easy to add here too. */
:root:not([data-theme="dark"]) .sec-alt
  :where(.card,.rel a,.tool,.note,.tbl-wrap,.faq,.vs-col,.tier,.gl-item,.sheet,
  .trainer,.picker,.quiz,.form,.side,.split-box,.rm,.glide,.gterm,.refcard,.mkt,
  .pat,.rank,.qopt,.qwhy,.qr-rank,.sim,.sim-fix,.screen,.sr-item,.sl-item,.sl-list,
  .tr-after,.tr-opt,.pk-opt,.sheet-chk,.tc-flags,.tc-links,.ex-links,.split-media,
  .gl-group,.cta,.gfilter,.tchip){
  --ink:#0A0A0B; --ink-2:#17171A; --ink-3:#2A2A2F;
  --body:#3A3A40; --muted:#5F5F68; --faint:#6E6E76;
  --red-ink:#9E171C; --red-ink-2:#C21F27;
  --line:#E7E4E1; --line-2:#D8D4D0;
  --surface:#FFFFFF; --surface-2:#FAF9F8;
  --accent:var(--c-lt,var(--accent-base,#9E171C));
  --accent-ink:var(--c-lt,var(--accent-base,#9E171C));
  color:var(--body)}
/* No button overrides here on purpose. Every variant declares its own colour,
   and a direct declaration always beats an inherited one, so the container
   restore above can never reach them. Forcing white here broke the hover
   inversion, which paints white text onto a white ground. */
:root:not([data-theme="dark"]) .sec-alt .cta :where(h2,h3,p,li){color:#fff}
/* The one exception to the restore: a chip whose selected state is a dark fill.
   Narrow on purpose. The earlier version of this covered every button and broke
   the hover inversion, which paints white text onto a white ground. */
:root:not([data-theme="dark"]) .sec-alt :where(.gfilter.is-on,.tchip[aria-current="page"],.qopt-k){color:#fff}
/* Only components that had no surface of their own. Anything that already
   paints and pads itself, a pricing tier or a glossary item, is left alone:
   overriding its padding here is how a badge ended up on top of a heading. */
:root:not([data-theme="dark"]) .sec-alt
  :where(.tbl-wrap,.faq,.vs-col,.quiz,.side,.split-box,.rm,.gl-group){
  background:var(--surface);border-radius:var(--r-lg);padding:6px 20px;
  box-shadow:0 1px 2px rgba(10,10,11,.06), 0 10px 30px -16px rgba(10,10,11,.30)}
:root:not([data-theme="dark"]) .sec-alt :where(.tbl-wrap){padding:0;overflow:hidden}
:root:not([data-theme="dark"]) .sec-alt :where(.note,.note-key,.note-tip,.note-warn,.note-danger){
  background:var(--surface);border-color:var(--line-2)}
:root:not([data-theme="dark"]) .sec-alt :where(.card,.rel a,.tool,.note){
  --accent-soft:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Buttons and pills that sit on the red itself invert. */
:root:not([data-theme="dark"]) .sec-alt>.wrap>.pills .pill,
:root:not([data-theme="dark"]) .sec-alt>.wrap>.prose>.pills .pill,
:root:not([data-theme="dark"]) .sec-alt .sec-head~.pills .pill{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;
  --ink:#fff;--body:#fff}
:root:not([data-theme="dark"]) .sec-alt>.wrap>.pills .pill:hover{
  background:#fff;border-color:#fff;color:var(--red)}
:root:not([data-theme="dark"]) .sec-alt>.wrap>.btnrow .btn-ghost{
  border-color:rgba(255,255,255,.45);color:#fff}
:root:not([data-theme="dark"]) .sec-alt>.wrap>.btnrow .btn-ghost:hover{
  background:#fff;color:var(--red);border-color:#fff}
:root:not([data-theme="dark"]) .sec-alt>.wrap>.btnrow .btn-primary{
  background:#fff;color:var(--red);border-color:#fff}
:root:not([data-theme="dark"]) .sec-alt>.wrap>.btnrow .btn-primary:hover{
  background:var(--panel);color:#fff;border-color:var(--panel)}

.sec-ink{background:var(--panel);color:rgba(255,255,255,.78)}
.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink .eyebrow,.cta .eyebrow{color:var(--accent-dk)}
.sec-ink .eyebrow::after,.cta .eyebrow::after{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-dk) 45%,transparent),transparent)}
.sec-ink a:not(.btn),.cta a:not(.btn),.hero a:not(.btn):not(.crumbs a){color:var(--accent-dk)}
.sec-ink a:not(.btn):hover,.cta a:not(.btn):hover{color:#fff}
.card-ink .card-num{color:var(--accent-dk)}
.card-ink .arrow-l{color:var(--accent-dk)}
.card-ink::before{background:linear-gradient(90deg,var(--accent-dk),color-mix(in srgb,var(--accent-dk) 30%,transparent))}
.hero .kicker-light{color:var(--accent-dk);background:var(--accent-dk-soft)}
.ftr a:hover{color:#fff}
.hstats b{color:#fff}
 /* Section heads are centred for the same reason the heroes are: left aligned and
    capped at 70ch, they left the right half of a wide screen empty. */
.sec-head{max-width:none;margin-bottom:3rem;margin-inline:auto;text-align:center}
.sec-head .eyebrow{justify-content:center}
.cta{text-align:center}
.cta .btnrow,.cta .pills{justify-content:center;margin-top:2.6rem}
.cta .btn-primary,.hero .btn-primary,.sec-ink .btn-primary{box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
.cta p{margin-bottom:0}
.cta h2+p{margin-top:1.2rem}
/* Button and pill rows that sit directly in a full width section follow the
   centred heading above them. Rows inside a split column, a card, or article
   prose keep their own alignment, because there they sit beside other content. */
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem;justify-content:center}
.grid+.btnrow,.tbl-wrap+.btnrow,.steps+.btnrow,.logo-row+.btnrow,
.grid+.btn,.tbl-wrap+.btn,.logo-row+.btn,.grid+p,.logo-row+p{margin-top:3rem}
.grid+p+.btn,.logo-row+p+.btn{margin-top:1.6rem}
.sec>.wrap>.btnrow,.sec>.wrap>.pills{justify-content:center}
.split .btnrow,.prose .btnrow,.card .btnrow,
.split .pills,.prose .pills{justify-content:flex-start}
/* a CTA band is a centred block wherever it sits, including inside the reading
   column, where the prose rule above would otherwise pull its buttons left */
.cta .btnrow,.cta .pills,.prose .cta .btnrow,.prose .cta .pills,
.split .cta .btnrow,.card .cta .btnrow{justify-content:center}
.prose .cta p,.prose .cta h2{margin-inline:auto}
.crumb-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center}
/* Loose copy and single buttons sitting straight in a section follow the centred
   head above them, the same as the button rows do. */
 /* Sections centre their contents. Everything that is read at length, or that
    lives in its own box, opts back out below. Inverting it this way is why no
    module gets left stranded on the left again. */
.sec>.wrap,.sec>.wrap-n{text-align:center}
.sec>.wrap>p,.sec>.wrap-n>p{margin-inline:auto;max-width:74ch}
.sec>.wrap>.btn,.sec>.wrap-n>.btn{display:flex;width:fit-content;margin-inline:auto}
.sec>.wrap .pills,.sec>.wrap .btnrow,.sec>.wrap .logo-row{justify-content:center}
.sec>.wrap .gl-group>p,.sec>.wrap .gl-group>h3{margin-inline:auto;max-width:70ch}

/* things that are read, or that sit in their own box, stay left aligned */
.sec .card,.sec .tbl-wrap,.sec .steps,.sec .note,.sec .faq,.sec .excerpt,
.sec .vs-col,.sec .rm,.sec .prose,.sec .split,.sec .form,.sec .tier,
.sec .dn-key,.sec .refcard,.sec .side,.sec .toc,.sec .tool,.sec .sheet{text-align:left}
.sec .split .pills,.sec .split .btnrow,.prose .pills,.prose .btnrow{justify-content:flex-start}
.sec .split p,.sec .split .sec-head{margin-inline:0;max-width:none}
.sec .card p,.sec .card h3,.sec .card h4{max-width:none}
.cta h2,.cta p{margin-inline:auto}
.cta p{max-width:64ch}
.sec-head .eyebrow::after{display:none}
/* inside a two column split the head shares the row, so it stays left aligned */
.split .sec-head,.prose .sec-head{margin-inline:0;text-align:left}
.split .sec-head .eyebrow,.prose .sec-head .eyebrow{justify-content:flex-start}
.split .sec-head .eyebrow::after,.prose .sec-head .eyebrow::after{display:block}
.sec-head p{font-size:1.09rem;color:var(--muted);margin-top:1.15rem;max-width:74ch;margin-inline:auto}
.sec-head h2{margin-bottom:0}
.sec-ink .sec-head p{color:rgba(255,255,255,.66)}
.sec-head.center{margin-inline:auto;text-align:center}

.eyebrow{font-family:var(--f-display);font-size:.735rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.17em;color:var(--accent);margin-bottom:.85rem;display:flex;align-items:center;gap:11px}
.eyebrow::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),transparent);max-width:80px}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}

/* ---------- cards ---------- */
/* flex, not grid: a lone item on the last row grows to the full box width
   instead of leaving an empty column beside it. */
.grid{display:flex;flex-wrap:wrap;gap:22px;align-items:stretch}
.grid>*{min-width:0}
.g2>*{flex:1 1 300px}
.g3>*{flex:1 1 268px}
.g4>*{flex:1 1 212px}
.g5>*{flex:1 1 174px}

/* Cards used to be an outline and nothing else, which left them flat against the
   page. They now sit on a soft two layer shadow, carry a short accent tab at the
   top that sweeps the full width on hover, and lift further when you point at
   them. The shadow does most of the work: it is what separates the card from the
   background rather than relying on a hairline border. */
.card{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px;
  box-shadow:0 1px 2px rgba(10,10,11,.05), 0 6px 18px -8px rgba(10,10,11,.10);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,border-color .22s;
  overflow:hidden;display:flex;flex-direction:column}
/* the call to action sits on the card floor, so every card in a row lines its
   link up on the same baseline however long the copy above it runs */
.card>.arrow-l,.card>.cta-l{margin-top:auto;padding-top:18px}
.card>p:last-of-type{margin-bottom:0}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));
  transform:scaleX(.16);transform-origin:left;transition:transform .34s cubic-bezier(.4,0,.2,1)}
.card:hover,.card:focus-within{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(10,10,11,.05), 0 22px 44px -18px rgba(10,10,11,.28);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-2))}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .card{transition:box-shadow .2s,border-color .2s}
  .card:hover,.card:focus-within{transform:none}
}
.card h3{margin-bottom:.6rem;font-size:1.2rem}
.card h4{margin-bottom:.45rem}
.card h3{margin-bottom:.6rem}
.card h3+p,.card h4+p{margin-top:0}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0}
.card p+p{margin-top:.7rem}
a.card{display:flex;flex-direction:column;color:inherit}
a.card h3,a.card h4{transition:color .16s}
a.card:hover h3,a.card:hover h4{color:var(--accent)}
.card-flat{box-shadow:0 1px 2px rgba(10,10,11,.04)}
.card-flat::before{display:none}
.card-flat:hover{transform:none;box-shadow:0 1px 2px rgba(10,10,11,.05), 0 10px 24px -12px rgba(10,10,11,.18)}
.card-ink{background:var(--panel-2);border-color:rgba(255,255,255,.13);color:rgba(255,255,255,.72);
  box-shadow:0 2px 6px rgba(0,0,0,.28), 0 14px 32px -14px rgba(0,0,0,.5)}
.card-ink:hover,.card-ink:focus-within{border-color:rgba(255,255,255,.26);
  box-shadow:0 3px 8px rgba(0,0,0,.34), 0 26px 52px -20px rgba(0,0,0,.62)}
.card-ink h3,.card-ink h4{color:#fff}
.card-ink p{color:rgba(255,255,255,.64)}

.card-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s}
.card:hover .card-ico{transform:scale(1.06);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.card-ico svg{width:22px;height:22px}

.card-num{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:12px;display:block}

.arrow-l{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:600;
  font-size:.9rem;color:var(--accent);margin-top:14px}
.card>.arrow-l,.card>.cta-l{margin-top:auto;padding-top:18px}
.arrow-l svg{width:15px;height:15px;transition:transform .2s}
a.card:hover .arrow-l svg,.arrow-l:hover svg{transform:translateX(4px)}

/* ---------- prose ---------- */
.prose{font-size:1.055rem;line-height:1.76;color:var(--body);max-width:none;min-width:0}
/* pages with no sidebar still get a capped, centred reading column */
.prose-solo{max-width:1250px;margin-inline:auto;padding:clamp(38px,5vw,60px) 0 clamp(60px,8vw,96px)}
.prose > h2{margin:3.1rem 0 1.45rem;padding-top:.4rem;scroll-margin-top:100px}
.prose > h2:first-child{margin-top:0}
.prose > h3{margin:2.3rem 0 1.05rem;scroll-margin-top:100px}
.prose > h4{margin:1.6rem 0 .55rem}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.35em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--accent);font-weight:600}
/* Only real inline links in the reading column get the underline and the accent
   tint on hover. Buttons, pills, cards and chips that happen to sit inside prose
   are components with their own colours: letting this rule reach them puts the
   page accent behind a button and gives you white text on a pale tint. */
.prose a:where(:not(.btn,.pill,.card,.gl-item,.has-mark,.logo-chip,.arrow-l,.ca-btn)){
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 32%,transparent);
  transition:border-color .15s,background .15s}
.prose a:where(:not(.btn,.pill,.card,.gl-item,.has-mark,.logo-chip,.arrow-l,.ca-btn)):hover{
  border-bottom-color:var(--accent);background:var(--accent-soft)}
.prose blockquote{margin:1.9rem 0;padding:4px 0 4px 26px;border-left:3px solid var(--accent);
  font-family:var(--f-display);font-size:1.24rem;line-height:1.48;color:var(--ink-2);font-weight:400;letter-spacing:-.015em}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{border-radius:var(--r-md);border:1px solid var(--line);margin:1.6rem 0}
.lead{font-size:1.22rem;line-height:1.6;color:var(--ink-3);font-weight:400;letter-spacing:-.012em}

/* excerpt / answer box */
.excerpt{background:linear-gradient(180deg,var(--accent-soft),transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-left:4px solid var(--accent);
  border-radius:var(--r-md);padding:22px 26px;margin:0 0 2.2rem}
.excerpt p{margin:0;font-size:1.075rem;line-height:1.62;color:var(--ink-2)}
.excerpt .lbl{font-family:var(--f-display);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:var(--accent);display:block;margin-bottom:9px}

/* callouts */
.note{border-radius:var(--r-md);padding:18px 22px;margin:1.7rem 0;border:1px solid var(--line);
  background:var(--paper-2);font-size:.985rem;line-height:1.62}
.note p:last-child{margin-bottom:0}
.note .nt{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:650;
  font-size:.87rem;color:var(--ink);margin-bottom:7px;letter-spacing:-.008em}
.note .nt svg{width:17px;height:17px;flex:0 0 auto}
.note-tip{background:var(--ok-soft);border-color:var(--ok-line)} .note-tip .nt{color:var(--ok)}
.note-warn{background:var(--warn-soft);border-color:var(--warn-line)} .note-warn .nt{color:var(--warn)}
.note-danger{background:var(--bad-soft);border-color:var(--bad-line)} .note-danger .nt{color:var(--bad)}
.note-key{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.note-key .nt{color:var(--accent)}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.9rem 0}
.prose > h2 + .steps,.prose > h3 + .steps,
.prose > h2 + ul,.prose > h3 + ul,
.prose > h2 + ol,.prose > h3 + ol{margin-top:1.5rem}
.steps>li{counter-increment:s;position:relative;padding:0 0 30px 62px;margin:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-display);
  font-weight:700;font-size:1rem;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
.steps>li::after{content:'';position:absolute;left:18.5px;top:42px;bottom:6px;width:1.5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 38%,transparent),var(--line))}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h3{margin-bottom:.6rem;font-size:1.06rem;font-weight:600;letter-spacing:.02em}
.steps li>h3+p,.steps li>h3+*{margin-top:0}
.steps p:last-child{margin-bottom:0}
.steps .sub{font-size:.955rem;color:var(--muted)}

/* A stand in for a project whose official logo we do not hold. Deliberately a
   plain initial, never a drawn approximation of somebody's mark. */
.mono-tile{display:grid;place-items:center;width:var(--bs);height:var(--bs);flex:0 0 auto;
  border-radius:13px;background:color-mix(in srgb,var(--accent) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
  font-family:var(--f-head);font-size:calc(var(--bs) * .42);line-height:1;color:var(--accent);
  margin-bottom:16px}
.plogo .mono-tile{margin-bottom:0}

/* A card whose logo is a wordmark carries no title, because the mark already is
   the name. The mark gets a fixed band so every card in the row lines its copy
   up on the same baseline whatever shape the logo is. */
.brand-mark{height:44px;display:flex;align-items:center;margin-bottom:18px}
/* the height comes from the generator, sized per logo so they read alike */
.brand-mark img{max-width:100%;width:auto;object-fit:contain;
  object-position:left center;transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
/* an icon only mark cannot identify anything by itself, so it keeps its name */
.brand-mark-icon{gap:13px}
.brand-mark-icon img{flex:0 0 auto}
.brand-name{font-family:var(--f-head);text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.01em;color:var(--ink);line-height:1}
.plogo-wide .brand-name{font-size:1.05rem;margin-left:2px}
.refcard-top .brand-name{margin-left:12px}
.card-brand:hover .brand-mark img{transform:scale(1.04)}
@media (max-width:520px){
  .brand-mark{height:40px}
}

/* ---------- the learning hub ---------- */
/* A hub that knows what you have read. Progress lives in this browser only, so
   every one of these states is painted by the script after load. */
.resume{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap;
  background:var(--panel);color:#fff;border-radius:var(--r-xl);padding:clamp(22px,3.4vw,34px);
  text-align:left;box-shadow:var(--shadow-3)}
.resume-ring{flex:0 0 auto;color:#fff;line-height:0}
.ring-p{stroke:#3DD68C;transition:stroke-dashoffset .6s cubic-bezier(.3,.8,.3,1)}
.ring-t{fill:#fff;font-family:var(--f-head);font-size:15px;letter-spacing:.02em}
.resume-t{flex:1 1 280px;min-width:0}
.resume-l{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:rgba(255,255,255,.55);margin-bottom:.3rem}
.resume-t b{display:block;font-family:var(--f-head);text-transform:uppercase;font-size:1.5rem;
  line-height:1.12;color:#fff}
.resume-t>span:last-of-type{display:block;color:rgba(255,255,255,.7);font-size:.92rem;
  margin-top:.5rem;max-width:60ch}
.resume-act{display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.resume-act .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

/* track cards */
.track{position:relative}
.grid.g2 .track{flex:1 1 min(440px,100%)}
.track-meta{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.78rem;
  color:var(--faint);margin-top:1rem}
.track-meta i{width:3px;height:3px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.track-bar{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden;
  margin:.7rem 0 .5rem}
.track-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);
  transition:width .6s cubic-bezier(.3,.8,.3,1)}
.track-done{display:block;font-family:var(--f-mono);font-size:.76rem;color:var(--faint)}
.track[data-state="done"] .track-done{color:var(--ok-ink)}
.track[data-state="done"] .track-bar i{background:#1E9E63}

/* the full guide list */
.gfilters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:2rem}
.gfilter{background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;
  font-family:var(--f-display);font-weight:500;font-size:.87rem;color:var(--body);cursor:pointer;
  transition:.15s}
.gfilter:hover{border-color:var(--panel);color:var(--ink)}
.gfilter.is-on{background:var(--panel);border-color:var(--panel);color:#fff}
.glist{display:flex;flex-direction:column;gap:10px;text-align:left}
.glide{display:flex;align-items:flex-start;gap:18px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:18px 22px;color:inherit;
  box-shadow:0 1px 2px rgba(10,10,11,.04);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s,border-color .18s}
.glide:hover{transform:translateX(4px);border-color:var(--red-ink);
  box-shadow:0 2px 4px rgba(10,10,11,.05),0 14px 30px -14px rgba(10,10,11,.22)}
.glide[hidden]{display:none!important}
.glide-n{flex:0 0 auto;font-family:var(--f-head);font-size:1.05rem;color:var(--faint);
  min-width:30px;padding-top:2px}
.glide-b{flex:1 1 auto;min-width:0}
.glide-b b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.04rem;
  color:var(--ink);line-height:1.35}
.glide:hover .glide-b b{color:var(--red-ink)}
.glide-d{display:block;color:var(--muted);font-size:.92rem;line-height:1.55;margin-top:.25rem}
.glide-m{display:flex;flex-wrap:wrap;gap:8px;margin-top:.7rem}
.glide-m>span{font-family:var(--f-mono);font-size:.72rem;padding:3px 9px;border-radius:999px;
  background:var(--paper-3);color:var(--muted)}
.glide-lv{background:var(--red-soft)!important;color:var(--red-ink)!important}
.glide-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);
  margin-top:2px;position:relative;transition:.16s}
.glide[data-read="1"] .glide-tick{background:#1E9E63;border-color:#1E9E63}
.glide[data-read="1"] .glide-tick::after{content:'';position:absolute;left:8px;top:4px;width:6px;
  height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.glide[data-read="1"] .glide-n{color:var(--ok-ink)}
.glist-none{text-align:center;color:var(--muted);padding:2rem 0}

/* glossary teaser */
.gterms{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:2rem}
.gterm{display:block;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:14px 18px;max-width:290px;text-align:left;color:inherit;
  box-shadow:0 1px 2px rgba(10,10,11,.04);transition:.18s}
.gterm:hover{border-color:var(--red-ink);transform:translateY(-3px);
  box-shadow:0 12px 26px -12px rgba(10,10,11,.24)}
.gterm b{display:block;font-family:var(--f-head);text-transform:uppercase;font-size:.92rem;
  color:var(--ink)}
.gterm span{display:block;color:var(--muted);font-size:.85rem;line-height:1.5;margin-top:.25rem}

/* the mark as read control at the end of a guide */
.readmark{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2.6rem 0 0;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.readmark-n{font-size:.8rem;color:var(--faint)}
[data-readmark][aria-pressed="true"]{background:#1E9E63;border-color:#1E9E63;color:#fff}
[data-readmark][aria-pressed="true"]:hover{background:var(--panel);border-color:var(--panel);color:#fff}
@media (max-width:600px){
  .resume{text-align:center;justify-content:center}
  .resume-t>span:last-of-type,.resume-t{text-align:center}
  .resume-act{width:100%}
  .glide{gap:12px;padding:15px 16px}
  .glide-d{display:none}
}

/* ---------- quizzes, ranks and badges ---------- */
.rankbox{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;justify-content:center;
  background:var(--panel);color:#fff;border-radius:var(--r-xl);padding:clamp(22px,3.4vw,36px);
  text-align:left;box-shadow:var(--shadow-3)}
.rankbox-mk{color:#fff;flex:0 0 auto;line-height:0}
.rankbox-t{flex:1 1 260px;min-width:0}
.rankbox-l{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:rgba(255,255,255,.55);margin-bottom:.25rem}
.rankbox-t b{display:block;font-family:var(--f-head);text-transform:uppercase;font-size:1.9rem;
  line-height:1.05;color:#fff}
.rankbox-t>span{display:block;color:rgba(255,255,255,.7);font-size:.9rem;margin:.4rem 0 .9rem;max-width:52ch}
.rankbar{height:6px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;max-width:420px}
.rankbar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--red-3),#3DD68C);transition:width .5s cubic-bezier(.3,.8,.3,1)}
.rankbox-n{display:block;margin-top:.6rem;font-family:var(--f-mono);font-size:.8rem;
  color:rgba(255,255,255,.6)}
.rankbox-n b{display:inline;font-size:.95rem;color:#fff;font-family:var(--f-mono)}
.rankbox-act{display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.rankbox-act .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

.ranks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.rank{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 20px;transition:border-color .16s,background .16s}
.rank[data-you="1"]{border-color:var(--red-ink);background:var(--red-soft);
  box-shadow:0 0 0 1px var(--red) inset}
.rank-mk{color:var(--red-ink);flex:0 0 auto;line-height:0}
.rank-mk svg{width:44px;height:44px}
.rank-b{min-width:0}
.rank-b b{display:block;font-family:var(--f-head);text-transform:uppercase;font-size:1.05rem;color:var(--ink)}
.rank-b i{display:block;font-style:normal;font-family:var(--f-mono);font-size:.76rem;color:var(--faint);
  margin:.1rem 0 .35rem}
.rank-b span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55}

.quizcard{position:relative}
.qc-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);margin-bottom:1rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.card:hover .qc-icon{transform:scale(1.06)}
.qc-icon svg{width:21px;height:21px}
.qc-best{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.76rem;
  color:var(--ok-ink);margin-top:.7rem}

/* the quiz itself */
.quiz{max-width:640px;margin-inline:auto;text-align:left}
.qprog{display:flex;align-items:center;gap:14px;margin-bottom:1.9rem}
.qprog-bar{flex:1 1 auto;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.qprog-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent);
  transition:width .4s cubic-bezier(.3,.8,.3,1)}
.qprog-t{font-family:var(--f-mono);font-size:.82rem;color:var(--muted);flex:0 0 auto}
.qprog-t b{color:var(--ink);font-family:var(--f-mono)}

.qcard{animation:qin .3s cubic-bezier(.2,.7,.3,1)}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qcard{animation:none}}
.q-n{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:var(--faint);margin-bottom:.6rem}
.q-t{font-size:1.32rem;line-height:1.3;margin-bottom:1.5rem}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px 17px;cursor:pointer;
  font-family:var(--f-body);font-size:.965rem;line-height:1.5;color:var(--body);
  transition:border-color .14s,background .14s,transform .14s}
.qopt:hover{border-color:var(--panel);background:var(--paper-2);transform:translateX(2px)}
.qopt-k{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--paper-3);
  display:grid;place-items:center;font-family:var(--f-head);font-size:.76rem;color:var(--muted);
  margin-top:1px;transition:.14s}
.qopt:hover .qopt-k{background:var(--panel);color:#fff}
.qcard[data-done] .qopt{pointer-events:none}
.qcard[data-done] .qopt:not([data-right]):not([data-chosen]){opacity:.45}
.qopt[data-right]{border-color:#1E9E63;background:rgba(30,158,99,.07)}
.qopt[data-right] .qopt-k{background:#1E9E63;color:#fff}
.qopt[data-chosen][data-wrong]{border-color:var(--red-ink);background:var(--red-soft)}
.qopt[data-chosen][data-wrong] .qopt-k{background:var(--red);color:#fff}

.qwhy{margin-top:1.5rem;padding:18px 20px;border-radius:var(--r-md);background:var(--paper-2);
  border:1px solid var(--line)}
.qwhy-h{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.11em;
  font-size:.68rem;margin-bottom:.5rem;color:var(--muted)}
.qwhy[data-ok="1"] .qwhy-h{color:var(--ok-ink)}
.qwhy[data-ok="0"] .qwhy-h{color:var(--red-ink)}
.qwhy p{font-size:.93rem;line-height:1.65;margin-bottom:1.1rem}
.qnext{width:100%;justify-content:center}

.qresult{text-align:center}
.qr-badge{color:var(--accent);margin-bottom:1rem;line-height:0}
.badgemark{position:relative;display:inline-grid;place-items:center;width:var(--bs);height:var(--bs)}
.badgemark svg:first-child{position:absolute;inset:0}
.badgemark svg:last-child{width:calc(var(--bs) * .38);height:calc(var(--bs) * .38)}
.qresult[data-pass="0"] .qr-badge{color:var(--faint)}
.qr-l{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.13em;
  font-size:.68rem;color:var(--faint);margin-bottom:.4rem}
.qr-score{font-size:clamp(1.9rem,5vw,2.6rem);margin-bottom:.7rem}
.qr-score b{font-family:var(--f-head);color:var(--accent)}
.qr-msg{color:var(--muted);max-width:50ch;margin-inline:auto;margin-bottom:1.9rem}
.qr-rank{display:flex;align-items:center;gap:16px;justify-content:center;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 22px;margin-bottom:1.8rem;
  text-align:left;flex-wrap:wrap}
.qr-rank-mk{color:var(--red-ink);line-height:0;flex:0 0 auto}
.qr-rank-t{font-family:var(--f-display);font-size:.78rem;color:var(--faint);
  text-transform:uppercase;letter-spacing:.11em}
.qr-rank-t b{display:block;font-family:var(--f-head);font-size:1.35rem;color:var(--ink);
  text-transform:uppercase;letter-spacing:.01em;margin:.15rem 0}
.qr-rank-t i{font-style:normal;font-family:var(--f-mono);font-size:.76rem;color:var(--muted);
  text-transform:none;letter-spacing:0}
.qr-share{margin-bottom:1.8rem}
.qr-share-l{display:block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;color:var(--faint);margin-bottom:.8rem}
.qr-share-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){
  .rankbox{text-align:center}
  .rankbox-t>span{margin-inline:auto}
  .rankbar{margin-inline:auto}
  .rank{gap:13px;padding:14px}
  .rank-mk svg{width:36px;height:36px}
  .qr-share-b .btn,.qresult .btnrow .btn{width:100%}
}

/* ---------- phishing simulator ---------- */
/* The mock screens are deliberately styled to feel like the real thing, because
   recognising the real thing is the skill. Nothing in here is an input, and the
   simulation flag sits on every stage so no screenshot can be mistaken for one. */
.simbar{position:sticky;top:calc(var(--nav-h) + 12px);z-index:40;margin:2.4rem 0 2rem}
.simbar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  background:var(--panel);color:#fff;border-radius:999px;padding:13px 26px;box-shadow:var(--shadow-3)}
.simbar-t{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;
  color:rgba(255,255,255,.6)}
.simbar-s{font-family:var(--f-mono);font-size:.92rem;color:rgba(255,255,255,.85)}
.simbar-s b{color:#fff;font-size:1.15rem}
.simbar-track{flex:1 1 120px;max-width:220px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);
  overflow:hidden;min-width:80px}
.simbar-track i{display:block;height:100%;width:0;border-radius:3px;background:#3DD68C;transition:width .4s}
.simbar-note{font-size:.8rem;color:rgba(255,255,255,.58)}

.sims{display:flex;flex-direction:column;gap:26px}
.sim{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,3vw,34px);text-align:left;scroll-margin-top:calc(var(--nav-h) + 90px)}
.sim[data-state="right"]{border-color:#1E9E63;box-shadow:0 0 0 1px #1E9E63 inset}
.sim[data-state="wrong"]{border-color:var(--red-ink);box-shadow:0 0 0 1px var(--red) inset}
.sim-head{max-width:62ch;margin-inline:auto;text-align:center}
.sim-n{display:inline-block;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.68rem;color:var(--faint);margin-bottom:.5rem}
.sim-head h3{font-size:1.3rem;margin-bottom:.5rem}
.sim-setup{color:var(--muted);font-size:.94rem;margin-bottom:0}

.sim-stage{position:relative;margin:1.8rem auto 0;max-width:520px}
/* The label lives inside the mock screen rather than floating above it, so it
   cannot be scrolled under the sticky bar and cannot be cropped out of a
   screenshot of the screen. */
.sc-sim{background:var(--red);color:#fff;font-family:var(--f-head);text-transform:uppercase;
  letter-spacing:.09em;font-size:.6rem;line-height:1.45;padding:7px 14px;text-align:center}

/* the mock screens */
.screen{border-radius:var(--r-md);overflow:hidden;background:var(--surface);border:1px solid var(--line-2);
  box-shadow:0 14px 34px -16px rgba(10,10,11,.34);font-size:.9rem}
.sc-bar{display:flex;align-items:center;gap:12px;background:var(--paper-3);
  border-bottom:1px solid var(--line);padding:9px 13px}
.sc-dots{display:flex;gap:5px;flex:0 0 auto}
.sc-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.sc-url{flex:1 1 auto;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;font-family:var(--f-mono);font-size:.76rem;color:var(--body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-url svg{color:var(--muted);flex:0 0 auto}
.sc-body{padding:22px}
.sc-brand{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  color:var(--muted);margin-bottom:1rem}
.sc-head{font-family:var(--f-head);text-transform:uppercase;font-size:1.1rem;color:var(--ink);
  letter-spacing:.02em;margin-bottom:.3rem}
.sc-sub{color:var(--muted);font-size:.85rem;margin-bottom:1.1rem;word-break:break-word}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-top:1px solid var(--line);font-size:.86rem}
.sc-row span{color:var(--muted);flex:0 0 auto}
.sc-row b{font-family:var(--f-mono);color:var(--ink);text-align:right;word-break:break-all;font-weight:500}
.sc-warn b{color:var(--red-ink)}
.sc-btn{display:block;margin-top:1.3rem;background:var(--panel);color:#fff;text-align:center;
  border-radius:999px;padding:11px;font-family:var(--f-display);font-weight:600;font-size:.92rem}
.sc-btn-w{background:var(--red)}
.sc-seedgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:.4rem 0 0}
.sc-seed{display:block;height:34px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper-2);
  position:relative}
.sc-seed i{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-style:normal;
  font-family:var(--f-mono);font-size:.7rem;color:var(--faint)}
.screen-wallet{max-width:380px;margin-inline:auto}
.sc-wtop{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;font-size:.9rem}
.sc-wmark{width:26px;height:26px;border-radius:50%;background:var(--panel);color:#fff;display:grid;
  place-items:center;font-family:var(--f-head);font-size:.8rem;flex:0 0 auto}
.screen-chat .sc-ctop{display:flex;align-items:center;gap:11px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--paper-2)}
.sc-avatar{width:34px;height:34px;border-radius:50%;background:var(--line-2);color:var(--ink);display:grid;
  place-items:center;font-family:var(--f-head);font-size:.9rem;flex:0 0 auto}
.sc-who{display:flex;flex-direction:column;min-width:0}
.sc-who b{font-family:var(--f-display);font-size:.9rem;display:flex;align-items:center;gap:7px}
.sc-who i{font-style:normal;font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.sc-badge{background:#1466A8;color:#fff;font-size:.6rem;padding:2px 7px;border-radius:999px;
  font-family:var(--f-display);font-weight:600;letter-spacing:.04em}
.sc-msg{background:var(--paper-3);border-radius:14px 14px 14px 4px;padding:11px 14px;margin-bottom:9px;
  font-size:.87rem;line-height:1.5;color:var(--body);max-width:92%}
.sc-msg:last-child{margin-bottom:0}

.sim-ask{margin-top:1.8rem;text-align:center}
.sim-q{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;
  color:var(--faint);margin-bottom:1rem}
.sim-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sim-b[data-picked]{pointer-events:none}
.sim-b[data-picked="1"]{background:var(--panel);color:#fff;border-color:var(--panel)}
.sim[data-state] .sim-b:not([data-picked]){opacity:.42;pointer-events:none}

.sim-reveal{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line);text-align:left;
  max-width:64ch;margin-inline:auto}
.sim-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-display);
  font-size:1.02rem;margin-bottom:1.2rem}
.sim-mark{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-size:.8rem;font-weight:700;background:var(--muted)}
.sim[data-state="right"] .sim-mark{background:#1E9E63}
.sim[data-state="wrong"] .sim-mark{background:var(--red)}
.sim-you{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.sim-reveal h4{font-size:.75rem;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.12em;
  color:var(--faint);margin:0 0 .7rem}
.sim-tells{margin:0 0 1.4rem;padding-left:1.15rem}
.sim-tells li{margin-bottom:.6rem;font-size:.93rem;line-height:1.62}
.sim-fix{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:15px 18px;margin-bottom:1.2rem}
.sim-fix b{display:block;font-size:.72rem;font-family:var(--f-head);text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);margin-bottom:.4rem}
.sim-fix p{margin:0;font-size:.92rem;line-height:1.6}
.sim-more{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:600;
  font-size:.9rem;border-bottom:0!important}
.sim-more svg{width:15px;height:15px}

.sim-final{margin-top:2.4rem;background:var(--panel);color:#fff;border-radius:var(--r-xl);
  padding:clamp(26px,4vw,44px);text-align:center}
.sim-final h3{color:#fff;font-size:1.6rem;margin-bottom:.7rem}
.sim-final p{color:rgba(255,255,255,.76);max-width:56ch;margin-inline:auto}
@media (max-width:560px){
  .simbar-in{padding:11px 16px;gap:10px}
  .simbar-note{display:none}
  .sim-btns .btn{width:100%}
}

/* ---------- video ---------- */
/* Nothing is requested from YouTube until the button is pressed, so opening a
   page with a video on it sets no third party cookie and runs no third party JS. */
.vid{margin:2.4rem 0;max-width:820px;margin-inline:auto}
.vid-btn{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:var(--panel);
  box-shadow:var(--shadow-2);transition:box-shadow .2s,transform .2s}
.vid-btn:hover{box-shadow:0 18px 40px -14px rgba(10,10,11,.45);transform:translateY(-2px)}
.vid-thumb{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .2s,transform .35s cubic-bezier(.2,.7,.3,1)}
.vid-btn:hover .vid-thumb{transform:scale(1.02);opacity:.88}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vid-play svg{width:78px;height:55px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.vid-play-bg{fill:rgba(10,10,11,.72);transition:fill .18s}
.vid-btn:hover .vid-play-bg{fill:var(--red)}
/* with no thumbnail (blocked, or a video with none) the panel still reads as a
   video: dark ground, play mark, title */
.vid-btn{background:linear-gradient(160deg,var(--panel-2),var(--panel))}
.vid-label{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;text-align:left;
  font-family:var(--f-display);font-weight:600;font-size:1rem;color:#fff;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(10,10,11,.82));pointer-events:none}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-lg);display:block;
  background:var(--panel);box-shadow:var(--shadow-2)}
.vid figcaption{margin-top:.9rem;font-size:.87rem;color:var(--muted);text-align:center}
@media (max-width:620px){
  .vid-play svg{width:60px;height:42px}
  .vid-label{font-size:.9rem;padding:36px 15px 13px}
}

/* ---------- Jupiter swap embed ---------- */
/* The plugin reads these at mount. They take raw RGB triplets, no rgb() wrapper,
   which is why they are written as bare numbers. */
/* The plugin ships a dark UI: its own text colours assume a dark ground, so a
   white background left every label invisible and put black text on the red
   button. It gets the site's near black instead, which is a surface the rest of
   the site already uses, with the brand red and white on top of it. */
:root{
  --jupiter-plugin-primary:158,23,28;
  --jupiter-plugin-primaryText:255,255,255;
  --jupiter-plugin-background:10,10,11;
  --jupiter-plugin-module:23,23,26;
  --jupiter-plugin-interactive:40,40,46;
  --jupiter-plugin-warning:245,183,66;
}
.swapwrap{max-width:560px;margin-inline:auto;text-align:center}
.swap-head{margin-bottom:1.5rem}
.swap-badge{display:inline-flex;align-items:center;gap:9px;background:var(--paper-3);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 9px;
  font-family:var(--f-display);font-size:.8rem;font-weight:600;color:var(--body);
  letter-spacing:.02em;margin-bottom:1.1rem}
.swap-logo{width:22px;height:22px;object-fit:contain;border:0;background:none;border-radius:5px;flex:0 0 auto}
.swap-head h3{font-size:1.5rem;margin:0 0 .55rem}
.swap-head p{color:var(--muted);font-size:.92rem;max-width:46ch;margin-inline:auto;margin-bottom:0}
.swap-shell{background:var(--panel);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-xl);
  padding:14px;box-shadow:0 20px 50px -22px rgba(10,10,11,.55);min-height:150px}
/* the height is held while the widget loads so the page does not jump,
   then released so the box hugs whatever the plugin actually renders */
.swap-slot{width:100%;min-height:520px;border-radius:var(--r-lg);overflow:hidden}
.swap-slot[data-ready="1"]{min-height:0}
.swap-slot iframe{border:0;width:100%}
.swap-load{display:flex;align-items:center;justify-content:center;gap:11px;padding:38px 0 6px;
  color:rgba(255,255,255,.62);font-size:.9rem}
/* a class that sets display beats the browser default for [hidden], so say it here */
.swap-load[hidden]{display:none}
.swap-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  border-top-color:#E23A42;animation:swapspin .8s linear infinite;flex:0 0 auto}
@keyframes swapspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.swap-spin{animation-duration:2.4s}}
.swap-slot[data-ready="1"]+.swap-load{display:none}
.swap-fallback{padding:26px 22px;text-align:center}
.swap-fallback p{color:rgba(255,255,255,.72);font-size:.94rem;max-width:44ch;margin:0 auto 1.4rem}
.swap-fallback b{color:#fff}
.swap-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.5rem}
.swap-foot .btn svg{opacity:.6}
@media (max-width:560px){
  .swap-shell{padding:9px;border-radius:var(--r-lg)}
  .swap-slot{min-height:560px}
}

/* ---------- contract address, click to copy ---------- */
.ca-box{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin:1.8rem 0}
@media (max-width:620px){
  .ca-box{gap:12px;padding:16px}
  .ca-box .ca-btn{width:100%;justify-content:center}
}
.ca-label{font-family:var(--f-head);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;color:var(--faint);flex:0 0 auto}
.ca-val{font-family:var(--f-mono);font-size:.9rem;color:var(--ink);background:none;border:0;padding:0;
  overflow-wrap:anywhere;flex:1 1 260px;min-width:0;line-height:1.5;user-select:all}
.ca-btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--panel);background:var(--panel);color:#fff;
  font-family:var(--f-head);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.ca-btn:hover{background:var(--surface);color:var(--ink);transform:translateY(-2px)}
.ca-btn[data-copied="true"]{background:#0E7C66;border-color:#0E7C66;color:#fff}
.ca-ico{display:inline-flex}
.ca-sm{padding:11px 14px;gap:10px;margin:1rem 0}
.ca-sm .ca-val{font-size:.82rem}
.ca-sm .ca-btn{padding:8px 14px;font-size:.72rem}
.sec-ink .ca-box,.hero .ca-box{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.sec-ink .ca-val,.hero .ca-val{color:#fff}
.sec-ink .ca-btn,.hero .ca-btn{background:var(--surface);color:var(--ink);border-color:#fff}
/* The hero copy control is a compact pill, not a full width bar. .ca-val carries
   flex:1 1 260px so it grows and defeats width:fit-content, which is why the
   hero variant pins it to its content instead. Declared after .ca-sm so the
   padding, gap and margin here are the ones that stick. */
/* The hero contract pill carries the full address, because a truncated one is
   not something anybody can verify. Brand red with white text, sized to its
   content: .ca-val carries flex:1 1 260px, so the hero variant pins it instead,
   otherwise it grows and defeats width:fit-content. */
.hero .ca-hero{width:fit-content;max-width:100%;margin:1.9rem auto 0;
  gap:14px;padding:8px 8px 8px 20px;border-radius:999px;
  background:var(--red);border-color:var(--red-ink);
  box-shadow:0 10px 30px -12px rgba(158,23,28,.65)}
.hero .ca-hero .ca-val{flex:0 0 auto;font-size:.85rem;overflow-wrap:normal;
  white-space:nowrap;color:#fff}
.hero .ca-hero .ca-label{color:rgba(255,255,255,.72)}
.hero .ca-hero .ca-btn{padding:8px 16px;font-size:.72rem;
  background:var(--surface);border-color:#fff;color:var(--red-ink)}
.hero .ca-hero .ca-btn:hover{background:var(--panel);border-color:var(--panel);color:#fff}
.hero .ca-hero .ca-btn[data-copied="true"]{background:var(--panel);border-color:var(--panel);color:#fff}
@media (max-width:820px){
  .hero .ca-hero{gap:10px;padding:12px 14px;border-radius:var(--r-lg)}
  .hero .ca-hero .ca-val{white-space:normal;overflow-wrap:anywhere;flex:1 1 100%;
    font-size:.76rem;text-align:center}
  .hero .ca-hero .ca-label{flex:1 1 100%;text-align:center}
  .hero .ca-hero .ca-btn{flex:1 1 100%;justify-content:center}
}
.sec-ink .ca-btn:hover,.hero .ca-btn:hover{background:transparent;color:#fff;border-color:#fff}

/* ---------- donut ---------- */
.donut{display:flex;align-items:center;gap:clamp(24px,4vw,54px);flex-wrap:wrap;margin:2rem 0 2.4rem}
.donut svg{width:clamp(230px,30vw,300px);height:auto;flex:0 0 auto;overflow:visible}
.dn-seg{transition:opacity .16s}
.donut svg:hover .dn-seg{opacity:.45}
.donut svg .dn-seg:hover{opacity:1}
.dn-pct{font-family:var(--f-head);font-size:14px;font-weight:500;fill:var(--muted);letter-spacing:.04em}
.dn-hero{font-family:var(--f-head);font-size:44px;font-weight:600;fill:var(--ink-2);letter-spacing:.01em}
.dn-sub{font-family:var(--f-head);font-size:11px;font-weight:600;fill:var(--faint);letter-spacing:.16em}
.dn-key{list-style:none;margin:0;padding:0;flex:1 1 240px;min-width:0}
.dn-key li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.dn-key li:last-child{border-bottom:0}
.dn-key i{width:12px;height:12px;border-radius:3px;flex:0 0 auto;transform:translateY(1px)}
.dn-k-l{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  font-size:.9rem;color:var(--ink);flex:1 1 auto}
.dn-k-v{font-family:var(--f-mono);font-size:.86rem;color:var(--muted);white-space:nowrap}

/* ---------- roadmap ---------- */
.rm{list-style:none;margin:1.9rem 0 2.4rem;padding:0;position:relative}
.rm::before{content:'';position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line);border-radius:2px}
.rm-item{position:relative;padding:0 0 30px 46px}
.rm-item:last-child{padding-bottom:0}
.rm-dot{position:absolute;left:5px;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2);z-index:1}
.rm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.rm-n{font-family:var(--f-mono);font-size:.74rem;color:var(--faint);letter-spacing:.04em}
.rm-when{font-family:var(--f-head);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted)}
.rm-chip{font-family:var(--f-head);font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;padding:3px 10px;border-radius:999px;
  background:var(--paper-3);color:var(--faint);border:1px solid var(--line)}
.rm-item h3{margin-bottom:.5rem}
.rm-item p{color:var(--muted);margin:0}
.rm-live{margin-top:.7rem !important;font-family:var(--f-mono);font-size:.84rem;color:var(--ink)}
.rm-live[hidden]{display:none}

/* delivered */
.rm-item[data-status="done"] .rm-dot{background:#0E7C66;border-color:#0E7C66;
  box-shadow:0 0 0 4px rgba(14,124,102,.13)}
.rm-item[data-status="done"] .rm-chip{background:rgba(14,124,102,.14);color:var(--ok-ink);
  border-color:rgba(14,124,102,.30)}
/* the phase happening now */
.rm-item[data-status="live"] .rm-dot{background:var(--surface);border-color:#EB6834;
  box-shadow:0 0 0 4px rgba(235,104,52,.15)}
.rm-item[data-status="live"] .rm-dot::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid #EB6834;animation:rmPulse 2s cubic-bezier(.4,0,.6,1) infinite}
.rm-item[data-status="live"] .rm-chip{background:rgba(235,104,52,.09);color:var(--live-ink);
  border-color:rgba(235,104,52,.32)}
.rm-item[data-status="live"] h3{color:var(--ink)}
@keyframes rmPulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .rm-item[data-status="live"] .rm-dot::after{animation:none} }
/* still ahead */
.rm-item[data-status="dated"] h3,.rm-item[data-status="planned"] h3{color:var(--ink-2)}
.rm-item[data-status="onchain"] .rm-chip{background:var(--paper-3)}

/* ---------- live data badge ---------- */
.mkt-head{display:flex;align-items:center;gap:12px;margin:1.9rem 0 -1.2rem}
.live-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 11px;border-radius:999px;
  background:rgba(16,168,138,.12);border:1px solid rgba(16,168,138,.32);color:var(--ok-ink);
  font-family:var(--f-head);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.live-dot{width:8px;height:8px;border-radius:50%;background:#10A88A;flex:0 0 auto;position:relative}
.live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:#10A88A;
  animation:livePulse 1.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes livePulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.live-src{font-family:var(--f-mono);font-size:.72rem;color:var(--faint)}
.sec-ink .live-badge,.hero .live-badge{background:rgba(61,214,140,.14);border-color:rgba(61,214,140,.34);color:#3DD68C}
.live-badge[data-live="off"]{background:var(--paper-3);border-color:var(--line);color:var(--faint)}
.live-badge[data-live="off"] .live-dot{background:var(--faint)}
.live-badge[data-live="off"] .live-dot::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){ .live-dot::after{animation:none;display:none} }

/* ---------- project logo lockups ---------- */

/* ================= tools ================= */
/* comparison pages */
.cmp-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  margin-bottom:1.9rem}
.cmp-pick{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:22px 24px;text-align:left;display:flex;flex-direction:column}
.cmp-pick .grp-h{margin:0 0 9px;color:var(--accent)}
.cmp-pick p{font-size:.97rem;line-height:1.6;color:var(--body);margin:0 0 14px}
.cmp-pick .arrow-l{margin-top:auto}
.cmp-tbl td:first-child,.cmp-tbl th:first-child{font-weight:600;color:var(--ink-2);
  white-space:nowrap}
.cmp-tbl th:not(:first-child){font-family:var(--f-head);font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}

.tchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
@media (min-width:1080px){.shell .tchips{display:none}}
.tchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:.83rem;font-weight:500;color:var(--ink-2);
  transition:border-color .14s,background .14s,color .14s}
.tchip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tchip[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tchip-i{display:grid;place-items:center;width:19px;height:19px;flex:0 0 auto;opacity:.72}
.tchip-i svg{width:15px;height:15px}
.tchip[aria-current="page"] .tchip-i{opacity:1}

.tool{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,10,11,.05), 0 10px 28px -14px rgba(10,10,11,.14)}
.tool-head{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.tool-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tool-form{padding:22px 22px 20px;display:flex;flex-direction:column;gap:15px}
.tool-out{padding:22px;background:var(--panel);color:#fff;display:flex;flex-direction:column;gap:2px}

.fld{display:flex;flex-direction:column;gap:5px}
.fld>label{font-size:.83rem;font-weight:600;color:var(--ink-2);font-family:var(--f-display)}
.fld small{font-size:.755rem;color:var(--muted);line-height:1.4}
.fld .in{position:relative;display:flex;align-items:center}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;
  transition:border-color .14s,box-shadow .14s}
.fld textarea{resize:vertical;min-height:110px;line-height:1.5;font-size:.92rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.fld select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.af{position:absolute;font-style:normal;font-size:.9rem;color:var(--muted);pointer-events:none;
  font-family:var(--f-mono)}
.af-pre{left:12px}
.af-suf{right:12px}
.in.has-pre input{padding-left:27px}
.in.has-suf input{padding-right:30px}
.tool-reset{align-self:flex-start;margin-top:2px}

.out{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.out:last-of-type{border-bottom:0}
.out>span{font-size:.82rem;color:#B9B9C0}
.out>b{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:#fff;
  text-align:right;font-variant-numeric:tabular-nums}
.out>small{grid-column:1/-1;font-size:.735rem;color:#84848C;line-height:1.4;margin-top:-2px}
/* The headline result is not always a number. A verdict sentence squeezed into
   a right hand column shoved the label into three lines, so the hero stacks:
   label above, answer below, both free to use the full width. */
.out-hero{display:block;border-bottom:1px solid rgba(255,255,255,.16);
  padding-bottom:14px;margin-bottom:4px}
.out-hero>span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
  font-family:var(--f-display);font-weight:600;color:#9A9AA2;margin-bottom:4px}
.out-hero>b{display:block;text-align:left;font-family:var(--f-head);font-size:2.1rem;
  line-height:1.06;letter-spacing:.01em;text-wrap:balance}
.out-hero>small{margin-top:5px}
.out[data-state="good"]>b{color:#5BD99A}
.out[data-state="warn"]>b{color:#FFC46B}
.out[data-state="bad"]>b{color:#FF8C93}
.tool-warn{margin-top:12px;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,140,147,.13);border:1px solid rgba(255,140,147,.30);
  font-size:.82rem;line-height:1.45;color:#FFD9DB}
.tool-foot{margin:0;padding:13px 20px;border-top:1px solid var(--line);background:var(--paper-2);
  font-size:.775rem;color:var(--muted);line-height:1.5}
.quickset{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.quickset>span{font-size:.8rem;color:var(--muted);margin-right:2px}
.quickset .pill{cursor:pointer;border:1px solid var(--line-2);background:var(--surface)}
.quickset .pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tool-age{font-size:.775rem;color:var(--muted);font-family:var(--f-mono)}

@media (max-width:820px){
  .tool-body{grid-template-columns:1fr}
  .tool-out{border-top:1px solid var(--line)}
  .out-hero>b{font-size:1.8rem}
}

/* explorer, token check, fear and greed, trainer, picker, slang */
.ex-links,.tc-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:16px 22px;border-top:1px solid var(--line);background:var(--paper-2)}
.ex-links .grp-h,.tc-links>b{margin:0 6px 0 0;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint);font-family:var(--f-display);font-weight:600}
.tc-detail{border-top:1px solid var(--line)}
.tc-flags{padding:16px 22px;background:var(--bad-soft)}
.tc-flags>b{display:block;font-family:var(--f-display);font-size:.83rem;margin-bottom:7px;color:var(--bad)}
.tc-flags ul{margin:0;padding-left:19px}
.tc-flags li{font-size:.87rem;line-height:1.5;color:var(--body);margin:3px 0}

.fg-dial{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px;border-top:1px solid var(--line)}
.fg-dial svg{width:150px;height:150px}
.fg-n{font-family:var(--f-head);font-size:38px;font-weight:700;fill:var(--ink)}
.fg-scale{display:flex;justify-content:space-between;width:190px;font-size:.72rem;color:var(--faint);
  font-family:var(--f-mono);font-style:normal}
.fg-scale i{font-style:normal}

.trainer{padding:22px;border-top:1px solid var(--line)}
.tr-fig{max-width:520px;margin:0 auto 18px}
.tr-fig svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-md)}
.tr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;max-width:640px;margin:0 auto}
.tr-opt{font:inherit;font-size:.9rem;font-weight:500;padding:11px 14px;cursor:pointer;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);
  transition:border-color .14s,background .14s}
.tr-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.tr-opt:disabled{cursor:default;opacity:.72}
.tr-opt[data-r="y"]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink);opacity:1;font-weight:600}
.tr-opt[data-r="n"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);opacity:1}
.tr-after{max-width:640px;margin:18px auto 0;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2)}
.tr-after>b{font-family:var(--f-head);font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em}
.tr-kind{display:inline-block;margin-left:9px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent);font-weight:600;font-family:var(--f-display)}
.tr-after p{margin:7px 0 13px;font-size:.92rem;line-height:1.55;color:var(--body)}
.tr-act{display:flex;flex-wrap:wrap;gap:8px}

.picker{padding:26px 22px;border-top:1px solid var(--line)}
.pk-step{font-family:var(--f-mono);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);text-align:center}
.pk-q{font-family:var(--f-head);font-size:1.5rem;text-transform:uppercase;letter-spacing:.01em;
  text-align:center;margin:8px 0 20px;text-wrap:balance}
.pk-opts{display:flex;flex-direction:column;gap:9px;max-width:520px;margin:0 auto}
.pk-opt{font:inherit;font-size:.94rem;font-weight:500;padding:14px 16px;cursor:pointer;text-align:left;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);
  transition:border-color .14s,background .14s,transform .14s}
.pk-opt:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateX(3px)}
.pk-done{max-width:560px;margin:0 auto;text-align:center}
.pk-done>b{display:block;font-family:var(--f-head);font-size:1.8rem;text-transform:uppercase}
.pk-done>p{margin:8px 0 16px;font-size:.95rem;line-height:1.55;color:var(--body)}
.pk-gb{display:grid;gap:9px;text-align:left;margin-bottom:16px}
.pk-gb span{padding:11px 13px;border-radius:var(--r-sm);font-size:.87rem;line-height:1.5}
.pk-gb .y{background:var(--ok-soft);color:var(--ok-ink)}
.pk-gb .n{background:var(--bad-soft);color:var(--bad)}
.pk-done .tr-act{justify-content:center}

.slang-out{border-top:1px solid var(--line)}
.sl-text{padding:20px 22px;font-size:1rem;line-height:1.75;color:var(--ink-2)}
mark.sl{background:var(--accent-soft);color:var(--accent);border-bottom:2px solid var(--accent);
  padding:1px 2px;border-radius:3px;position:relative;cursor:help;font-weight:500}
.sl-pop{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);
  width:min(280px,74vw);background:var(--panel);color:#fff;padding:11px 13px;border-radius:var(--r-sm);
  font-size:.81rem;line-height:1.45;font-weight:400;box-shadow:var(--shadow-3);z-index:60;
  opacity:0;visibility:hidden;transition:.16s;pointer-events:none}
.sl-pop b{display:block;font-family:var(--f-display);font-size:.88rem;margin-bottom:3px}
.sl-pop i{display:block;margin-top:6px;font-style:normal;font-size:.74rem;color:#9A9AA2}
mark.sl:hover .sl-pop,mark.sl:focus .sl-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sl-list{padding:18px 22px;border-top:1px solid var(--line);background:var(--paper-2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.sl-list .grp-h{grid-column:1/-1;margin:0 0 2px}
.sl-item{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);transition:border-color .14s}
.sl-item:hover{border-color:var(--accent)}
.sl-item b{display:block;font-family:var(--f-display);font-size:.88rem;color:var(--ink)}
.sl-item span{display:block;font-size:.79rem;color:var(--muted);line-height:1.45;margin-top:2px}

/* the printable backup sheet */
.sheetwrap{display:grid;gap:22px}
.sheet{border:2px solid var(--ink);border-radius:var(--r-md);padding:24px 26px;background:var(--surface);
  break-inside:avoid}
.sheet header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:18px}
.sheet header b{font-family:var(--f-head);font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em}
.sheet header span{font-size:.88rem;color:var(--body)}
.sheet .sheet-c{margin-left:auto;font-family:var(--f-mono);font-size:.76rem;color:var(--muted)}
.sheet-words{list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 26px}
.sheet-words li{display:flex;align-items:flex-end;gap:10px;padding:11px 0 5px}
.sheet-words i{font-style:normal;font-family:var(--f-mono);font-size:.8rem;color:var(--muted);
  width:22px;flex:0 0 auto;text-align:right}
.sheet-words span{flex:1;border-bottom:1.5px solid var(--ink-3);height:20px}
.sheet-chk{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 16px;
  background:var(--paper-2)}
.sheet-chk b{display:block;font-family:var(--f-display);font-size:.85rem;margin-bottom:6px}
.sheet-chk ul{margin:0;padding-left:19px}
.sheet-chk li{font-size:.82rem;line-height:1.55;color:var(--body)}
.sheet footer{margin-top:14px;font-size:.78rem;color:var(--muted);line-height:1.5;
  border-top:1px solid var(--line);padding-top:10px}

@media print{
  .hdr,.ftr,.side,.side-m,.toc,.tchips,.tool,.sec-head,.hero,.crumbs,.srch,.drawer,
  .cta,.tick-strip,.rel,.faq,.prose,.steps,.grid,.note,.pills{display:none !important}
  .sheetwrap{display:block}
  .sheet{page-break-after:always;border-width:1px;box-shadow:none;margin:0 0 20px}
  body{background:var(--surface)}
}

.plogo{display:flex;align-items:center;gap:14px;margin:0 0 1.4rem}
.plogo img{width:52px;height:52px;object-fit:contain;flex:0 0 auto;border:0;background:none}
.plogo-wide img{width:auto;max-width:190px}
.hero .plogo img{width:64px;height:64px}
.hero .plogo{margin-bottom:1.1rem}
.card-logo{width:40px;height:40px;object-fit:contain;margin-bottom:14px;display:block;border:0;background:none}
/* A wordmark is allowed to run wider than the square slot; its inline height is
   set from the file's own proportions so every mark reads as the same weight. */
.card-logo.logo-fit{width:auto;height:auto;max-height:44px;object-fit:contain}
.plogo img.logo-fit{width:auto;height:auto;max-height:56px;max-width:230px}
.hero .plogo img.logo-fit{max-height:68px;max-width:280px}
.tbl-logo{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin-right:9px;border:0}

/* tables */
.tbl-wrap{overflow-x:auto;margin:1.8rem 0;border:1px solid var(--line);border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.945rem;min-width:660px;table-layout:auto}
table td:first-child,table th:first-child{white-space:nowrap}
table td:first-child a{white-space:normal}
th,td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
  hyphens:none;word-break:normal}
th{font-family:var(--f-display);font-weight:650;color:var(--ink);background:var(--paper-2);
  font-size:.79rem;text-transform:uppercase;letter-spacing:.075em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper-2)}
td strong{color:var(--ink-2)}

/* pills / tags */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0}
.pill svg{width:13px;height:13px;opacity:.55;margin-left:2px;flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  background:var(--paper-3);border:1px solid var(--line);font-size:.845rem;font-weight:500;color:var(--ink-3);
  font-family:var(--f-display);transition:.15s}
a.pill:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.pill-accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent)}
.pill img{width:16px;height:16px;object-fit:contain;border-radius:3px}

/* logo lockups */
.logo-chip{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 20px;min-height:64px}
.logo-chip img{max-height:34px;width:auto;object-fit:contain}
/* One even band of partner marks. Grid rather than flex so every cell is the same
   width and the last row lines up with the ones above it instead of centring a
   short remainder. Marks are small and quiet: they are proof, not decoration. */
.logo-row{display:flex;flex-wrap:wrap;gap:8px 4px;margin:2.2rem 0;align-items:center;width:100%}
.logo-row>*{flex:1 1 118px;min-width:0;border:0;background:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;padding:14px 10px;
  border-radius:var(--r-md);transition:background .2s,transform .2s}
.logo-row img{max-height:26px;max-width:100%;width:auto;object-fit:contain;display:block}
.logo-row a:hover{background:var(--paper-2);transform:translateY(-2px)}
.sec-ink .logo-row a:hover,.cta .logo-row a:hover{background:rgba(255,255,255,.06)}
@media (max-width:760px){
  .logo-row{gap:4px 2px;margin:1.7rem 0}
  .logo-row>*{flex:1 1 96px;padding:11px 8px}
  .logo-row img{max-height:21px}
}
@media (max-width:420px){
  .logo-row>*{flex:1 1 40%}
  .logo-row img{max-height:20px}
}
.brandmark{display:flex;align-items:center;gap:16px;margin-bottom:1.4rem}
.brandmark img{max-height:52px;width:auto;object-fit:contain}
.brandmark-lg img{max-height:74px}

/* chain badge with token color */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  font-family:var(--f-display);font-weight:600;font-size:.865rem;
  background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.chip .sw{width:9px;height:9px;border-radius:50%;background:var(--c)}

/* ---------- live market ---------- */
.ticker{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden;padding:12px 0;
  position:relative;width:100%;margin:0}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 62s linear infinite}
/* the mark sits tighter to its ticker than the rest of the row, so the pair
   reads as one unit rather than three evenly spaced things */
.tk-logo{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 auto;
  background:none;border:0;margin-right:-2px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:9px;padding:0 24px;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.09);font-size:.875rem}
.tk .s{font-family:var(--f-head);font-weight:600;color:var(--ink);letter-spacing:.05em;text-transform:uppercase}
.tk .p{font-family:var(--f-mono);color:var(--muted);font-size:.845rem}
.tk .c{font-family:var(--f-mono);font-size:.79rem;font-weight:500}
.up{color:#3DD68C} .down{color:#FF6B6B} .flat{color:rgba(255,255,255,.5)}

.mkt{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1.9rem 0}
.mkt>div{background:var(--surface);padding:19px 20px;flex:1 1 176px;min-width:0;text-align:center}
.mkt .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);
  font-weight:600;margin-bottom:7px;font-family:var(--f-display)}
.mkt .v{font-family:var(--f-display);font-size:clamp(1.02rem,.86rem + .58vw,1.5rem);font-weight:700;
  color:var(--ink);letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.mkt .v sub{font-size:.62em;font-weight:600;vertical-align:-.22em;padding:0 .5px;letter-spacing:0}
.mkt .k{overflow-wrap:break-word}
.mkt .d{font-family:var(--f-mono);font-size:.83rem;margin-top:5px}
.mkt .up{color:#0F7B4F} .mkt .down{color:#C0392B}
.skel{display:inline-block;min-width:64px;height:1em;border-radius:5px;
  background:linear-gradient(90deg,var(--paper-3) 25%,var(--line) 50%,var(--paper-3) 75%);
  background-size:200% 100%;animation:shim 1.4s infinite;vertical-align:middle}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.mkt-note{font-size:.79rem;color:var(--faint);margin-top:-.9rem;margin-bottom:2rem}

/* market table */
.mtable td.num,.mtable th.num{text-align:right;font-family:var(--f-mono);font-size:.9rem;white-space:nowrap}
.mtable .nm{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:600;color:var(--ink)}
.mtable .nm .sw{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.sw-logo{width:22px;height:22px;object-fit:contain;flex:0 0 auto;border:0;background:none;border-radius:4px}
.chip .sw-logo{width:18px;height:18px;margin-right:-2px}
.mtable .tick{color:var(--faint);font-weight:500;font-size:.85rem;text-transform:uppercase}

/* ---------- sidebar layout ---------- */
/* The copy column grows to fill whatever the sidebar and contents column leave,
   capped at 1250px so long lines never run the full width of a big monitor.
   Growing to fill is what removes the dead band on pages that have no table of
   contents on the right. */
 /* Two columns, not three. At a 1250px page a separate table of contents column
    squeezed the reading column to about 600px, so the contents moved into the
    sidebar instead and the copy got the space back. */
.shell,.shell-toc{display:grid;grid-template-columns:248px minmax(0,1fr);gap:48px;align-items:start;
  padding:clamp(38px,5vw,60px) 0 clamp(60px,8vw,96px)}
@media (max-width:940px){ .shell,.shell-toc{grid-template-columns:minmax(0,1fr);gap:0} .side{display:none} }

.side{position:sticky;top:calc(var(--nav-h) + 26px);max-height:calc(100vh - var(--nav-h) - 50px);
  overflow-y:auto;padding-right:10px;scrollbar-width:thin}
.side::-webkit-scrollbar{width:5px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.side .grp-h{display:block;font-family:var(--f-display);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);margin:24px 0 9px;padding-left:13px}
.side .grp-h:first-child{margin-top:0}
.side a{display:block;padding:7px 13px;border-radius:var(--r-sm);color:var(--body);font-size:.925rem;
  line-height:1.4;border-left:2px solid transparent;transition:.14s}
.side a:hover{background:var(--paper-3);color:var(--ink)}
.side a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600;
  border-left-color:var(--accent)}

.toc{position:sticky;top:calc(var(--nav-h) + 26px);font-size:.855rem}
/* the contents list now sits inside the sticky sidebar, so it stops being
   sticky itself and takes a rule above it to separate it from the section links */
.side .toc{position:static;width:auto;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.toc .grp-h{display:block;font-family:var(--f-display);font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--faint);margin:0 0 11px}
.toc a{display:block;padding:5px 0 5px 13px;color:var(--muted);border-left:2px solid var(--line);line-height:1.4}
.toc a:hover{color:var(--ink);border-left-color:var(--line-2)}
.toc a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* mobile section nav */
.side-m{display:none;margin:0 0 26px}
@media (max-width:940px){ .side-m{display:block} }
.side-m details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2)}
.side-m summary{padding:14px 18px;font-family:var(--f-display);font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.side-m summary::-webkit-details-marker{display:none}
.side-m summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--faint);
  border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .2s}
.side-m details[open] summary::after{transform:rotate(-135deg)}
.side-m .dl{padding:4px 10px 14px;max-height:340px;overflow-y:auto}
.side-m .dl a{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--body);font-size:.93rem}
.side-m .dl a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* ---------- CTA band ---------- */
 /* The band is capped and centred rather than running the full width of the page.
    At 1700px wide a 690px block of copy left an acre of empty animation on either
    side, which read as a mistake rather than as breathing room. */
.cta{position:relative;background:var(--panel);color:#fff;border-radius:var(--r-xl);
  padding:clamp(38px,4.4vw,56px) clamp(28px,4vw,64px);overflow:hidden;isolation:isolate;
  margin-inline:auto;width:100%;max-width:1120px}
.cta canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.6}
.cta::after{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 100% at 85% 15%,transparent 20%,rgba(10,10,11,.8) 100%)}
.cta-in{position:relative;z-index:2;max-width:56ch;margin-inline:auto}
/* CTA headings are sized to sit on a single line. The script measures each one
   and steps the size down until it fits, so a long heading shrinks rather than
   wrapping. Below the floor it is allowed to wrap again, because a one line
   heading at eleven pixels helps nobody. */
.cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
/* Section and CTA headings are shrunk to a single line by the script. The floor
   and the narrow breakpoint let them wrap again rather than shrink to nothing. */
.cta h2,.sec-head h2{white-space:nowrap;max-width:100%;text-wrap:nowrap}
.cta h2[data-wrap="1"],.sec-head h2[data-wrap="1"]{white-space:normal;text-wrap:balance}
@media (max-width:620px){
  .cta h2,.sec-head h2{white-space:normal;text-wrap:balance}
}
/* No paragraph should end on a single word. The script also joins the last two
   words with a hard space, which covers browsers without text-wrap: pretty. */
p,.lede,.sim-setup,.qr-msg,.rank-b span{text-wrap:pretty}
.cta p{color:rgba(255,255,255,.76);margin:1rem 0 0;font-size:1.05rem}
.cta .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* referral CTA card */
.refcard{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-2);margin:2rem 0}
.refcard-top{background:var(--paper-2);border-bottom:1px solid var(--line);padding:30px;
  display:flex;align-items:center;justify-content:center;min-height:120px}
.refcard-top img{max-height:56px;width:auto;object-fit:contain}
.refcard-body{padding:28px}
.refcard-body h2{margin-bottom:.5rem;font-size:1.32rem;font-weight:650;letter-spacing:-.018em}
.refcard-body p{color:var(--muted);font-size:.97rem}
.refdisc{font-size:.79rem;color:var(--faint);margin-top:16px;line-height:1.55}

/* two-col feature */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(30px,4vw,64px);align-items:center}
.split>*{min-width:0}
.split-media{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}

/* faq */
.faq{border-top:1px solid var(--line);margin-top:2.6rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 40px 20px 0;font-family:var(--f-display);font-weight:600;font-size:1.06rem;
  color:var(--ink);cursor:pointer;list-style:none;position:relative;line-height:1.4;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:26px;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 40px 22px 0;color:var(--body);font-size:1rem;line-height:1.7}
.faq .ans p:last-child{margin-bottom:0}

/* forms */
.form{display:grid;gap:17px}
.field label{display:block;font-family:var(--f-display);font-weight:600;font-size:.885rem;
  color:var(--ink-2);margin-bottom:7px}
.field .hint{font-size:.8rem;color:var(--faint);font-weight:400;margin-left:6px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],select,textarea{
  width:100%;padding:12px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s}
textarea{min-height:142px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:42px}
.form-row{display:flex;flex-wrap:wrap;gap:17px}
.form-row>*{flex:1 1 220px;min-width:0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--muted);line-height:1.5}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--red-ink);flex:0 0 auto}

/* pricing */
.tiers{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.tiers>*{flex:1 1 290px;min-width:0}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:44px 32px 40px;position:relative;
  transition:transform .22s,box-shadow .22s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.tier-feat{border-color:var(--red-ink);border-width:2px;box-shadow:0 18px 44px -16px rgba(158,23,28,.28)}
.tier-tag{position:absolute;top:-13px;left:32px;background:var(--red);color:#fff;font-family:var(--f-display);
  font-weight:700;font-size:.71rem;text-transform:uppercase;letter-spacing:.13em;padding:6px 15px;border-radius:999px}
.tier h3{font-size:1.32rem;margin-bottom:.35rem}
.tier .who{color:var(--muted);font-size:.925rem;margin-bottom:1.5rem;min-height:2.9em}
.tier .price{font-family:var(--f-display);font-size:3rem;font-weight:700;color:var(--ink);
  letter-spacing:-.045em;line-height:1;margin-bottom:.3rem}
.tier .price sup{font-size:1.25rem;font-weight:600;vertical-align:super;margin-right:2px}
.tier .per{font-size:.86rem;color:var(--faint);margin-bottom:1.7rem}
.tier ul{list-style:none;padding:0;margin:0 0 1.9rem;flex:1 1 auto}
.tier li{position:relative;padding-left:29px;margin-bottom:12px;font-size:.945rem;line-height:1.55;color:var(--body)}
.tier li::before{content:'';position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E171C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center}

/* glossary index */
.az{display:flex;flex-wrap:wrap;gap:6px;margin:1.6rem 0 2.4rem}
.az a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--ink-2);background:var(--surface);transition:.14s}
.az a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px)}
.az span{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--faint);background:var(--paper-2);opacity:.45}
.gl-group{margin-bottom:2.6rem;scroll-margin-top:110px}
.gl-group h3{font-size:1.75rem;color:var(--accent);margin-bottom:1rem;font-weight:700}
.gl-list{display:flex;flex-wrap:wrap;gap:12px}
.gl-list>*{flex:1 1 258px;min-width:0}
.gl-item{display:block;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:.16s}
.gl-item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.gl-item b{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1rem;margin-bottom:3px}
.gl-item span{display:block;font-size:.845rem;color:var(--muted);line-height:1.45}
.gl-item:hover b{color:var(--accent)}

/* search */
.searchbox{position:relative;margin-bottom:1.1rem}
.searchbox input{width:100%;display:block;padding-left:50px;padding-right:18px;height:58px;
  font-size:1.05rem;border-radius:999px;-webkit-appearance:none;appearance:none}
.searchbox input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.searchbox svg{pointer-events:none}
.searchbox svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--faint)}
#searchResults{margin-top:12px}
.sr-item{display:block;padding:13px 17px;border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:8px;background:var(--surface);transition:.14s}
.sr-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.sr-item b{display:block;font-family:var(--f-display);color:var(--ink);font-size:1rem;margin-bottom:2px}
.sr-item span{font-size:.86rem;color:var(--muted)}
.sr-item em{font-style:normal;font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:600}

/* ---------- site search overlay ---------- */
.srch{position:fixed;inset:0;z-index:130;background:rgba(10,10,11,.55);backdrop-filter:blur(6px);
  display:grid;place-items:start center;padding:clamp(60px,11vh,140px) 18px 24px;
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.srch[data-open="true"]{opacity:1;visibility:visible}
.srch-panel{width:100%;max-width:660px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -20px rgba(10,10,11,.5);padding:18px;transform:translateY(-10px);
  transition:transform .2s cubic-bezier(.4,0,.2,1)}
.srch[data-open="true"] .srch-panel{transform:none}
.srch .searchbox{margin-bottom:0}
.srch .searchbox input{padding-right:52px}
.srch-x{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:grid;place-items:center;border:0;background:none;color:var(--faint);cursor:pointer;border-radius:999px}
.srch-x:hover{background:var(--paper-3);color:var(--ink)}
.srch-hint{font-size:.78rem;color:var(--faint);margin:12px 4px 2px}
.srch-hint kbd{font-family:var(--f-mono);font-size:.72rem;background:var(--paper-3);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
#searchResults{margin-top:12px;max-height:min(56vh,460px);overflow-y:auto}
#searchResults:empty{margin-top:0}

/* pattern diagram */
.pat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin:1.7rem 0}
.pat svg{width:100%;height:auto;display:block;border-radius:var(--r-sm);background:var(--surface)}
.pat figcaption{font-size:.86rem;color:var(--muted);margin-top:13px;text-align:center;line-height:1.55}

/* comparison */
.vs{display:flex;flex-wrap:wrap;gap:22px;margin:2rem 0;align-items:stretch}
.vs>*{flex:1 1 280px;min-width:0}
.vs-col{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.vs-col header{padding:19px 24px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.vs-col header h3{margin:0;font-size:1.12rem;font-weight:600;letter-spacing:-.012em}
.vs-col header p{margin:5px 0 0;font-size:.86rem;color:var(--muted)}
.vs-col ul{list-style:none;margin:0;padding:19px 24px}
.vs-col li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.94rem;line-height:1.55}
.vs-col li:last-child{margin-bottom:0}
.vs-col li::before{position:absolute;left:0;top:1px;font-weight:700;font-size:1rem}
.vs-col li.y::before{content:'+';color:var(--ok)}
.vs-col li.n::before{content:'−';color:var(--bad)}

/* footer */
.ftr{background:var(--panel);color:rgba(255,255,255,.62);padding:66px 0 0;margin-top:0}
/* flex so the link columns share the row evenly and the last one has no
   empty column beside it, and so nothing overflows on a narrow phone. */
.ftr-grid{display:flex;flex-wrap:wrap;gap:44px 40px;padding-bottom:48px;align-items:flex-start}
.ftr-grid>*{flex:1 1 150px;min-width:0}
.ftr-grid>*:first-child{flex:0 1 min(250px,100%)}
.ftr-grid ul{columns:150px auto;column-gap:34px}
.ftr-grid li{break-inside:avoid;margin-bottom:8px}
@media (max-width:620px){
  .ftr-grid{gap:34px 28px}
  .ftr-orphan{flex:1 1 100%}
  .ftr-orphan ul{columns:2;column-gap:28px}
  .ftr-orphan ul li{break-inside:avoid}
}
.ftr-logo{display:inline-block;margin-bottom:18px;transition:opacity .16s}
.ftr-logo:hover{opacity:.75}
.ftr-logo img{height:38px;width:auto;display:block}
.ftr p{font-size:.92rem;line-height:1.65;max-width:42ch}
.ftr .grp-h{display:block;font-family:var(--f-display);font-size:.71rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:#fff;margin:0 0 15px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr a{color:rgba(255,255,255,.62);font-size:.915rem;transition:color .14s}
.ftr a:hover{color:#fff}
.ftr-more{margin-top:14px;font-size:.9rem}
.ftr-more a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.ftr-more a:hover{border-bottom-color:#fff}
.ftr-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ftr-social a{width:42px;height:42px;display:inline-grid;place-items:center;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(255,255,255,.82);
  transition:.16s}
.ftr-social a:hover{background:var(--surface);border-color:#fff;color:var(--ink);transform:translateY(-2px)}
.ftr-social svg{width:17px;height:17px;flex:0 0 auto}
/* icon only pills used in page copy */
.social-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.1rem}
.social-row a{width:46px;height:46px;display:inline-grid;place-items:center;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:.16s}
.social-row a:hover{background:var(--panel);border-color:var(--panel);color:#fff;transform:translateY(-2px)}
.social-row svg{width:19px;height:19px}
.ftr-btm{border-top:1px solid rgba(255,255,255,.11);padding:24px 0;display:flex;flex-wrap:wrap;
  gap:14px 22px;justify-content:space-between;align-items:center;font-size:.85rem}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr-usa{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--f-display);font-weight:500;letter-spacing:.005em;color:rgba(255,255,255,.78)}
.ftr-usa img{width:26px;height:auto;display:block;flex:0 0 auto;border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22)}
@media (max-width:760px){
  .ftr-btm{justify-content:center;text-align:center}
  .ftr-btm nav{justify-content:center;width:100%}
  .ftr-copy,.ftr-usa{width:100%;justify-content:center}
}
.ftr-risk{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-md);
  padding:20px 26px;margin:0 0 26px;font-size:.86rem;line-height:1.62;color:rgba(255,255,255,.58);max-width:none}
.ftr-risk b{color:rgba(255,255,255,.86);font-weight:600}

/* misc */
.meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:.83rem;color:var(--faint);
  margin-bottom:1.9rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{width:14px;height:14px}
.rel{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.5rem;align-items:stretch}
.rel>*{flex:1 1 240px;min-width:0}
.rel a{display:block;padding:17px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:.16s}
.rel a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.rel b{display:block;font-family:var(--f-display);font-weight:600;color:var(--ink);margin-bottom:3px;font-size:.99rem}
.rel span{font-size:.85rem;color:var(--muted);line-height:1.45;display:block}
.rel a:hover b{color:var(--accent)}

.anchor-h{scroll-margin-top:105px}
.mt0{margin-top:0!important} .mb0{margin-bottom:0!important}
.tc{text-align:center}
.stack{display:flex;flex-direction:column;gap:12px}
.hide-sm{display:initial}
@media (max-width:640px){ .hide-sm{display:none} }
/* the Book a session button returns only once the centred nav has room for it */
@media (max-width:1759px){ .hide-md{display:none} }
/* the flag alone carries the language control until there is room for the code */
@media (max-width:1819px){ .lang-code{display:none} }
.nowrap{white-space:nowrap}
.dim{color:var(--muted)}
.small{font-size:.87rem}

/* ---------- language switcher ---------- */
.flag{border-radius:2.5px;display:block;flex:0 0 auto}
.langwrap{position:relative;flex:0 0 auto}
.lang-btn{display:flex;align-items:center;gap:7px;height:40px;padding:0 11px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:.82rem;color:var(--ink-2);transition:.15s}
.lang-btn:hover{border-color:var(--line-2);background:var(--paper-2)}
.lang-btn .chev{width:9px;height:5.5px;color:var(--faint);opacity:.7}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}
.lang-code{letter-spacing:.05em}
@media (max-width:600px){ .lang-code{display:none} .lang-btn{padding:0 9px;gap:5px} }

.lang-menu{position:absolute;top:calc(100% + 9px);right:0;width:420px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  padding:14px;z-index:115;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s}
.lang-menu[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.lang-head{font-family:var(--f-display);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--faint);padding:2px 8px 10px}
.lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  max-height:min(58vh,420px);overflow-y:auto}
.lang-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:.88rem;line-height:1.25;transition:background .13s}
.lang-opt:hover{background:var(--red-soft);color:var(--red)}
.lang-opt[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.lo-n{font-family:var(--f-display);font-weight:500}
.lo-e{color:var(--faint);font-size:.74rem;margin-left:auto;white-space:nowrap}
.lang-opt:hover .lo-e{color:var(--red-2);opacity:.8}
.lang-foot{font-size:.73rem;color:var(--faint);line-height:1.5;margin:11px 8px 2px;padding-top:10px;
  border-top:1px solid var(--line)}
@media (max-width:560px){
  .lang-grid{grid-template-columns:1fr}
  .lo-e{display:none}
  .lang-menu{position:fixed;top:calc(var(--nav-h) + 8px);left:12px;right:12px;
    width:auto;max-width:none;padding:12px}
  .lang-grid{max-height:min(62vh,440px)}
}