/* ==========================================================================
   EEAT Media — stylesheet
   Built on the Stripe design system documented in the brand guidelines.

   Three layers, in order:
     1. Core scales   — raw palette values, verbatim from the guidelines
     2. Semantic      — role tokens, remapped by .mode-light / .mode-dark
     3. Primitives    — type, layout, components (reference ONLY layer 2)

   Layer 3 never reads a core token directly. That is what lets a dark
   section work without a single component override.
   ========================================================================== */


/* ==========================================================================
   1. CORE SCALES
   ========================================================================== */
:root {
  /* Brand — light */
  --core-brand-25:  #F5F5FF;
  --core-brand-50:  #E8E9FF;
  --core-brand-75:  #E2E4FF;
  --core-brand-100: #D6D9FC;
  --core-brand-200: #B9B9F9;
  --core-brand-300: #9A9AFE;
  --core-brand-400: #7F7DFC;
  --core-brand-500: #665EFD;
  --core-brand-600: #533AFD;
  --core-brand-700: #4032C8;
  --core-brand-800: #2E2B8C;
  --core-brand-900: #1C1E54;

  /* Brand — dark */
  --core-brandDark-200: #A8BFFF;
  --core-brandDark-300: #92ADFF;
  --core-brandDark-400: #7389FF;
  --core-brandDark-500: #5D64FE;
  --core-brandDark-700: #362BAA;
  --core-brandDark-800: #2C2484;

  /* Neutral — light (blue-tinted; never pure or warm grey) */
  --core-neutral-0:   #FFFFFF;
  --core-neutral-25:  #F8FAFD;
  --core-neutral-50:  #E5EDF5;
  --core-neutral-100: #D4DEE9;
  --core-neutral-200: #BAC8DA;
  --core-neutral-300: #95A4BA;
  --core-neutral-400: #7D8BA4;
  --core-neutral-500: #64748D;
  --core-neutral-600: #50617A;
  --core-neutral-700: #3C4F69;
  --core-neutral-800: #273951;
  --core-neutral-900: #1A2C44;
  --core-neutral-990: #061B31;

  /* Neutral — dark */
  --core-neutralDark-25:  #F2F7FE;
  --core-neutralDark-200: #C0CEE6;
  --core-neutralDark-300: #A3B5D6;
  --core-neutralDark-400: #839BC8;
  --core-neutralDark-500: #6480B2;
  --core-neutralDark-700: #273F73;
  --core-neutralDark-800: #23356E;
  --core-neutralDark-900: #182659;
  --core-neutralDark-950: #122054;
  --core-neutralDark-990: #0D1738;

  /* Accents — artwork only, never text or buttons */
  --core-orange-350:  #FF6118;
  --core-magenta-350: #F44BCC;
  --core-ruby-400:    #EA2261;
  --core-lemon:       #FFCC55;
  --core-orchid:      #F363F3;
  --core-violet:      #7232F1;

  /* Status */
  --core-success-400: #00B261;
  --core-success-600: #006F3A;
  --core-success-100: #B6F2C7;
  --core-error-500:   #D8351E;
  --core-error-100:   #FEB9AC;

  /* Hero wave — sampled from the live palette texture */
  --wave-1: #F868AA;  /* hot pink    */
  --wave-2: #FA9EA0;  /* coral       */
  --wave-3: #FCA168;  /* tangerine   */
  --wave-4: #FCAE27;  /* gold        */
  --wave-5: #FCD1A4;  /* peach       */
  --wave-6: #F2A5D9;  /* blush       */
  --wave-7: #DB61D1;  /* orchid      */
  --wave-8: #B89CF6;  /* lavender    */

  /* Spacing — 4px base */
  --sp-50: 4px;   --sp-100: 8px;  --sp-150: 12px; --sp-200: 16px;
  --sp-250: 20px; --sp-300: 24px; --sp-400: 32px; --sp-500: 40px;
  --sp-600: 48px; --sp-700: 56px; --sp-800: 64px; --sp-900: 72px;
  --sp-1000: 80px; --sp-1200: 96px; --sp-1600: 128px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;   /* all buttons */
  --radius-md: 6px;   /* cards       */
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-round: 99999px;

  /* Elevation — two-layer, blue-tinted. Never black. */
  --shadow-xs: 0 2px 10px rgba(0,55,112,.06),    0 1px 4px rgba(0,59,137,.04);
  --shadow-sm: 0 5px 14px rgba(0,55,112,.08),    0 2px 8px rgba(0,59,137,.05);
  --shadow-md: 0 6px 22px rgba(0,55,112,.10),    0 4px 8px rgba(0,59,137,.02);
  --shadow-lg: 0 15px 40px -2px rgba(0,55,112,.10),  0 5px 20px -2px rgba(0,59,137,.04);
  --shadow-xl: 0 20px 80px -16px rgba(0,55,112,.14), 0 10px 60px -16px rgba(0,59,137,.06);

  /* Layout */
  --content-max: 1264px;
  --gutter: 16px;

  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight: the system defines normal as 300 and bold as 400.
     Nothing on the site is heavier than 400. */
  --fw-normal: 300;
  --fw-bold: 400;
}


/* ==========================================================================
   2. SEMANTIC TOKENS
   ========================================================================== */

/* Light is the default for the whole document. */
:root,
.mode-light {
  --text-solid:              var(--core-neutral-990);
  --text-soft:               var(--core-neutral-600);
  --text-subdued:            var(--core-neutral-500);
  --text-quiet:              var(--core-neutral-400);
  --text-inverse:            var(--core-neutral-0);

  --surface-bg:              var(--core-neutral-0);
  --surface-bg-subdued:      var(--core-neutral-25);
  --surface-border:          var(--core-neutral-50);
  --surface-border-strong:   var(--core-neutral-100);

  --action-bg-solid:         var(--core-brand-600);
  --action-bg-solidHover:    var(--core-brand-700);
  --action-bg-quiet:         var(--core-brand-50);
  --action-bg-quietHover:    var(--core-brand-100);
  --action-text-solid:       var(--core-brand-600);
  --action-text-solidHover:  var(--core-brand-800);
  --action-text-onSolid:     var(--core-neutral-0);
  --action-border-subdued:   var(--core-brand-200);

  --icon-solid:              var(--core-neutral-800);
  --input-border:            var(--core-neutral-100);
  --input-text:              var(--core-neutral-800);
  --input-placeholder:       var(--core-neutral-400);

  --focus-ring:              var(--core-brand-600);
  --shadow-ambient:          var(--shadow-md);
}

/* Midnight sections. Same component CSS, different resolution. */
.mode-dark {
  --text-solid:              var(--core-neutral-0);
  --text-soft:               var(--core-neutralDark-300);
  --text-subdued:            var(--core-neutralDark-400);
  --text-quiet:              var(--core-neutralDark-500);
  --text-inverse:            var(--core-neutral-990);

  --surface-bg:              var(--core-neutralDark-990);
  --surface-bg-subdued:      var(--core-neutralDark-950);
  --surface-border:          var(--core-neutralDark-900);
  --surface-border-strong:   var(--core-neutralDark-800);

  --action-bg-solid:         var(--core-brand-600);
  --action-bg-solidHover:    var(--core-brandDark-500);
  --action-bg-quiet:         var(--core-brandDark-800);
  --action-bg-quietHover:    var(--core-brandDark-700);
  --action-text-solid:       var(--core-brandDark-400);
  --action-text-solidHover:  var(--core-brandDark-200);
  --action-text-onSolid:     var(--core-neutral-0);
  --action-border-subdued:   var(--core-brand-600);

  --icon-solid:              var(--core-neutralDark-300);
  --input-border:            #445566;
  --input-text:              var(--core-neutral-0);
  --input-placeholder:       var(--core-neutralDark-500);

  --focus-ring:              var(--core-brandDark-300);
  --shadow-ambient:          0 6px 22px rgba(13,23,56,.15), 0 4px 8px rgba(13,23,56,.20);
}


/* ==========================================================================
   3. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-soft);
  background: var(--core-neutral-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-normal);
  color: var(--text-solid);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--action-text-solid);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
a:hover { color: var(--action-text-solidHover); }

/* Focus: 3px purple outer ring with 1px offset, both modes. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sp-150) var(--sp-300);
  background: var(--core-neutral-0);
  color: var(--core-brand-600);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-200); top: var(--sp-200); }

.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;
}


/* ==========================================================================
   4. TYPE SCALE
   Values land exactly on the guideline's three breakpoints (<640, >=640,
   >=940) rather than being approximated with clamp().
   ========================================================================== */

.h-xxl, .h-xl, .h-lg, .h-md, .h-sm { font-weight: var(--fw-normal); color: var(--text-solid); }
.h-xs, .h-xxs { font-weight: var(--fw-bold); color: var(--text-solid); line-height: 1.2; letter-spacing: 0; }

.h-xxl { font-size: 34px; line-height: 1.03; letter-spacing: -0.02em; }
.h-xl  { font-size: 28px; line-height: 1.07; letter-spacing: -0.01em; }
.h-lg  { font-size: 22px; line-height: 1.20; letter-spacing: -0.01em; }
.h-md  { font-size: 20px; line-height: 1.20; letter-spacing: -0.01em; }
.h-sm  { font-size: 18px; line-height: 1.25; letter-spacing: 0; }
.h-xs  { font-size: 16px; }
.h-xxs { font-size: 14px; }

.t-xxl { font-size: 28px; line-height: 1.07; letter-spacing: -0.01em; font-weight: var(--fw-normal); color: var(--text-solid); }
.t-xl  { font-size: 18px; line-height: 1.4; }
.t-lg  { font-size: 16px; line-height: 1.35; }
.t-md  { font-size: 16px; line-height: 1.4; }
.t-sm  { font-size: 14px; line-height: 1.4; }
.t-xs  { font-size: 12px; line-height: 1.45; }

.quote { font-size: 18px; line-height: 1.4; font-weight: var(--fw-normal); color: var(--text-solid); }

@media (min-width: 640px) {
  .h-xxl { font-size: 48px; line-height: 1.03; letter-spacing: -0.02em; }
  .h-xl  { font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
  .h-lg  { font-size: 28px; line-height: 1.07; }
  .h-md  { font-size: 22px; line-height: 1.10; }
  .h-sm  { font-size: 20px; line-height: 1.12; letter-spacing: -0.01em; }
  .t-xxl { font-size: 34px; line-height: 1.03; letter-spacing: -0.02em; }
  .t-lg  { font-size: 18px; line-height: 1.4; }
  .quote { font-size: 18px; }
}

@media (min-width: 940px) {
  .h-xxl { font-size: 56px; line-height: 1.03; letter-spacing: -0.025em; }
  .h-xl  { font-size: 48px; line-height: 1.03; letter-spacing: -0.02em; }
  .h-lg  { font-size: 32px; line-height: 1.10; letter-spacing: -0.02em; }
  .h-md  { font-size: 26px; line-height: 1.12; }
  .h-sm  { font-size: 22px; line-height: 1.10; }
  .t-xxl { font-size: 48px; line-height: 1.0; letter-spacing: -0.02em; }
  .t-xl  { font-size: 20px; letter-spacing: -0.01em; }
  .t-xs  { font-size: 14px; line-height: 1.4; }
  .quote { font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; }
}

/* Colour roles for type */
.text-soft    { color: var(--text-soft); }
.text-subdued { color: var(--text-subdued); }
.text-quiet   { color: var(--text-quiet); }
.text-solid   { color: var(--text-solid); }

/* Tabular numerals with tight tracking, for stats. */
.tabular { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* The section-heading device: Ink statement + Slate lead sentence, same size. */
.lead-inline { color: var(--text-subdued); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  background: var(--surface-bg);
  color: var(--text-soft);
  padding-block: var(--sp-700);
  position: relative;
}
@media (min-width: 640px) { .section { padding-block: var(--sp-800); } }
@media (min-width: 940px) { .section { padding-block: var(--sp-1200); } }

.section-head { max-width: 760px; margin-bottom: var(--sp-500); }
.section-head > * + * { margin-top: var(--sp-200); }
@media (min-width: 940px) { .section-head { margin-bottom: var(--sp-800); } }

.eyebrow {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-subdued);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-150);
}

.stack > * + *      { margin-top: var(--sp-200); }
.stack-lg > * + *   { margin-top: var(--sp-400); }
.stack-xl > * + *   { margin-top: var(--sp-600); }

.grid { display: grid; gap: var(--sp-300); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--sp-500); }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-800); align-items: start; }
  .split-wide { grid-template-columns: 1.15fr .85fr; }
}


/* ==========================================================================
   6. BUTTONS AND LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-50);
  height: 44px;
  padding-inline: var(--sp-300);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
@media (min-width: 940px) { .btn { height: 48px; } }

.btn-compact { height: 40px; padding-inline: var(--sp-250); font-size: 15px; }
@media (min-width: 940px) { .btn-compact { height: 40px; } }

.btn-chevron { font-size: 1.1em; line-height: 0; transform: translateY(-1px); }

.btn-primary {
  background: var(--action-bg-solid);
  color: var(--action-text-onSolid);
}
.btn-primary:hover { background: var(--action-bg-solidHover); color: var(--action-text-onSolid); }

.btn-secondary {
  background: transparent;
  color: var(--action-text-solid);
  border: 1px solid var(--action-border-subdued);
}
.btn-secondary:hover { border-color: var(--action-bg-solid); color: var(--action-text-solid); }

.btn-quiet {
  background: var(--action-bg-quiet);
  color: var(--action-text-solid);
  border: 1px solid transparent;
}
.btn-quiet:hover { background: var(--action-bg-quietHover); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-150); }

/* Callout link with trailing chevron — the standard link affordance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  font-weight: var(--fw-bold);
}
.link-arrow::after { content: '›'; font-size: 1.15em; line-height: 0; transform: translateY(-1px); transition: transform .15s ease; }
.link-arrow:hover::after { transform: translate(2px, -1px); }


/* ==========================================================================
   7. NAVIGATION
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
}
.nav-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 66px;
  display: flex;
  align-items: center;
  gap: var(--sp-300);
}

.nav-logo { display: inline-flex; align-items: center; gap: var(--sp-100); flex-shrink: 0; }
.nav-logo-mark { width: 28px; height: 28px; display: block; }
.nav-logo-mark svg { width: 28px; height: 28px; }
.nav-logo-text {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-solid);   /* Ink on light, White on dark — never purple */
}
.nav-logo-text-light { font-weight: var(--fw-normal); color: var(--text-subdued); margin-left: 3px; }

.nav-links { display: none; align-items: center; gap: var(--sp-50); margin-left: auto; }
@media (min-width: 940px) { .nav-links { display: flex; } }

.nav-link {
  padding: var(--sp-100) var(--sp-150);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: var(--fw-normal);
  color: var(--text-solid);
  transition: background-color .15s ease;
}
.nav-link:hover { background: var(--core-neutral-25); color: var(--text-solid); }
.nav-link.is-active { font-weight: var(--fw-bold); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-150); margin-left: auto; }
@media (min-width: 940px) { .nav-actions { margin-left: var(--sp-200); } }
.nav-actions .btn { display: none; }
@media (min-width: 640px) { .nav-actions .btn { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px; height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (min-width: 940px) { .nav-toggle { display: none; } }
.nav-toggle-bar { display: block; height: 1.5px; background: var(--icon-solid); border-radius: 2px; }

.mobile-nav-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(6,27,49,.45);
}
.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: min(360px, 88vw);
  background: var(--surface-bg);
  border-left: 1px solid var(--surface-border);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-700) var(--sp-300) var(--sp-400);
  overflow-y: auto;
}
.mobile-nav[hidden], .mobile-nav-scrim[hidden] { display: none; }
.mobile-nav-heading {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-quiet);
  margin: var(--sp-300) 0 var(--sp-100);
}
.mobile-nav-heading:first-child { margin-top: 0; }
.mobile-nav-link {
  display: block;
  padding: var(--sp-150) 0;
  font-size: 16px;
  font-weight: var(--fw-normal);
  color: var(--text-solid);
  border-bottom: 1px solid var(--surface-border);
}
.mobile-nav-cta { width: 100%; margin-top: var(--sp-400); }


/* ==========================================================================
   8. HERO — CSS approximation of the WebGL wave
   The live hero is a WebGL ribbon driven by a palette texture. This rebuilds
   the same colour story with layered blurred radial gradients on a slow
   drift, and freezes to a static composition under reduced-motion.
   ========================================================================== */
.hero {
  position: relative;
  background: var(--core-neutral-0);
  overflow: hidden;
  padding-block: var(--sp-700) var(--sp-800);
}
@media (min-width: 940px) { .hero { padding-block: var(--sp-1000) var(--sp-1200); } }

.hero-wave {
  position: absolute;
  inset: -25% -22% auto auto;
  width: min(880px, 78%);
  height: 135%;
  pointer-events: none;
  z-index: 0;
  filter: blur(58px);
  opacity: .55;
  background:
    radial-gradient(34% 26% at 72% 28%, var(--wave-1) 0%, transparent 70%),
    radial-gradient(30% 22% at 84% 42%, var(--wave-7) 0%, transparent 68%),
    radial-gradient(38% 30% at 62% 50%, var(--wave-3) 0%, transparent 70%),
    radial-gradient(26% 20% at 76% 60%, var(--wave-4) 0%, transparent 68%),
    radial-gradient(32% 26% at 88% 72%, var(--wave-8) 0%, transparent 70%),
    radial-gradient(30% 24% at 64% 76%, var(--wave-6) 0%, transparent 68%),
    radial-gradient(26% 22% at 80% 18%, var(--wave-2) 0%, transparent 68%),
    radial-gradient(42% 36% at 70% 54%, var(--wave-5) 0%, transparent 74%);
  animation: waveDrift 26s ease-in-out infinite alternate;
}
/* Fade the artwork out toward white on every edge that meets content,
   per the "fade every accent glow toward white/Hairline" rule. */
.hero-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, #FFFFFF 26%, rgba(255,255,255,.72) 46%, rgba(255,255,255,0) 76%),
    linear-gradient(to top, #FFFFFF 2%, rgba(255,255,255,0) 30%);
}

/* On narrow screens the wave sits behind the headline, so pull it back
   further still and let it read as a tint rather than artwork. */
@media (max-width: 939px) {
  .hero-wave { opacity: .38; width: 96%; inset: -18% -30% auto auto; }
}

@keyframes waveDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wave { animation: none; }
}

.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 660px; }
.hero-copy > * + * { margin-top: var(--sp-300); }
.hero-title { max-width: 16ch; }
.hero-sub { max-width: 54ch; color: var(--text-subdued); }
.hero-actions { margin-top: var(--sp-400); }


/* ==========================================================================
   9. CARDS, BENTO AND CHARMS
   ========================================================================== */
.card {
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--sp-300);
  position: relative;
  overflow: hidden;
}
.card > * + * { margin-top: var(--sp-150); }
.card-title { color: var(--text-solid); }

.card-link {
  display: block;
  font-weight: var(--fw-normal);
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-link:hover { box-shadow: var(--shadow-md); color: inherit; }

/* Bento card: 1px radial gradient border ring, plus one accent glow. */
.bento {
  position: relative;
  border: 0;
  border-radius: var(--radius-md);
  padding: 1px;
  background: radial-gradient(circle at 30% 0%, var(--core-brand-400), var(--core-magenta-350) 33%, var(--core-neutral-50) 66%);
}
.bento-inner {
  position: relative;
  height: 100%;
  background: var(--surface-bg);
  border-radius: 5px;
  padding: var(--sp-300);
  overflow: hidden;
  z-index: 0;
}
.bento-inner > * + * { margin-top: var(--sp-150); }

/* Accent blob: a corner glow, not a wash. Kept small, low-opacity and
   pushed mostly outside the card so it never sits behind copy. */
.bento-inner::before {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -52px;
  width: 146px;
  height: 146px;
  border-radius: var(--radius-round);
  background: var(--bento-blob, var(--core-brand-400));
  filter: blur(38px);
  opacity: .26;
  z-index: -1;
  pointer-events: none;
}
.accent-orange  { --bento-blob: var(--core-orange-350); }
.accent-magenta { --bento-blob: var(--core-magenta-350); }
.accent-ruby    { --bento-blob: var(--core-ruby-400); }
.accent-lemon   { --bento-blob: var(--core-lemon); }
.accent-purple  { --bento-blob: var(--core-brand-400); }

/* Charm icon: rounded square, three-stop diagonal gradient, white glyph. */
.charm {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-image: linear-gradient(135deg, var(--core-brand-400), var(--core-brand-600) 50%, var(--core-brand-700));
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.charm-glyph { width: 20px; height: 20px; }
.accent-orange  .charm { background-image: linear-gradient(135deg, #FE8C2D, #FD6252 50%, #FD5D7C); }
.accent-magenta .charm { background-image: linear-gradient(135deg, #F98BF9, #F96BEE 50%, #B262F9); }
.accent-lemon   .charm { background-image: linear-gradient(135deg, #FFD552, #FFAF2D 50%, #FF9014); }
.accent-ruby    .charm { background-image: linear-gradient(135deg, #FD7184, #EA2261 50%, #B51145); }


/* ==========================================================================
   10. STATS BAND — Midnight with the "night" sky gradient
   ========================================================================== */
.stats-band {
  position: relative;
  background: var(--core-neutralDark-990);
  overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 118%,
    #FCFDFE 0%, #6763E4 14%, #453BB3 30%, #29227D 48%, #1E2064 66%, #141E4B 82%);
  opacity: .9;
  pointer-events: none;
}
.stats-band > * { position: relative; z-index: 1; }
.stat-value { color: var(--text-solid); }
.stat-label { color: var(--text-quiet); }


/* ==========================================================================
   11. LISTS, FAQ, TABLES
   ========================================================================== */
.ticks > li {
  position: relative;
  padding-left: 26px;
  margin-top: var(--sp-150);
  color: var(--text-soft);
}
.ticks > li::before {
  content: '';
  position: absolute;
  left: 2px; top: .45em;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--action-text-solid);
  border-bottom: 1.5px solid var(--action-text-solid);
  transform: rotate(-45deg);
}

.crosses > li { position: relative; padding-left: 26px; margin-top: var(--sp-150); color: var(--text-soft); }
.crosses > li::before {
  content: '';
  position: absolute;
  left: 4px; top: .5em;
  width: 11px; height: 11px;
  background:
    linear-gradient(45deg, transparent 44%, var(--text-quiet) 44%, var(--text-quiet) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--text-quiet) 44%, var(--text-quiet) 56%, transparent 56%);
}

.steps { counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  margin-top: var(--sp-400);
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  background: var(--action-bg-quiet);
  color: var(--action-text-solid);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.faq-item { border-bottom: 1px solid var(--surface-border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-200);
  padding: var(--sp-300) 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--text-solid);
  text-align: left;
  cursor: pointer;
}
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--action-text-solid);
  transition: transform .18s ease;
}
.faq-icon::before { left: 0; top: 6px; width: 14px; height: 1.5px; }
.faq-icon::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); }
.faq-a { padding-bottom: var(--sp-300); max-width: 68ch; color: var(--text-soft); }
.faq-a[hidden] { display: none; }


/* ==========================================================================
   12. FORMS
   ========================================================================== */
.field { display: block; margin-bottom: var(--sp-300); }
.field-label {
  display: block;
  margin-bottom: var(--sp-100);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text-solid);
}
.field-hint { display: block; margin-top: var(--sp-50); font-size: 12px; color: var(--text-quiet); }

.input, .textarea, .select {
  width: 100%;
  padding: 11px var(--sp-150);
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-normal);
  line-height: 1.4;
  color: var(--input-text);
  background: var(--surface-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--core-brand-500); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--core-brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 25%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--core-error-500); }

.field-error {
  display: block;
  margin-top: var(--sp-50);
  font-size: 14px;
  color: var(--core-error-500);
}

/* Honeypot — visually and semantically removed, but still focusable-free
   for real users. Bots that fill every input get caught. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.alert {
  padding: var(--sp-200);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--sp-300);
  font-size: 14px;
}
.alert-error   { border-color: var(--core-error-100); background: #FFF5F3; color: #8F2113; }
.alert-success { border-color: var(--core-success-100); background: #F1FCF5; color: var(--core-success-600); }


/* ==========================================================================
   13. MISC BLOCKS
   ========================================================================== */
.panel {
  background: var(--surface-bg-subdued);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--sp-400);
}

.divider { height: 1px; background: var(--surface-border); border: 0; margin: 0; }

.meta-line { font-size: 12px; color: var(--text-quiet); }

.cta-band { background: var(--core-neutral-25); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-100); font-size: 14px; margin-bottom: var(--sp-300); }
.breadcrumb li { color: var(--text-quiet); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--sp-100); color: var(--text-quiet); }
.breadcrumb a { font-weight: var(--fw-normal); color: var(--text-subdued); }
.breadcrumb a:hover { color: var(--action-text-solid); }

/* Reveal-on-scroll; harmless if JS never runs. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   14. FOOTER — Paper band
   ========================================================================== */
.footer {
  background: var(--core-neutral-25);
  border-top: 1px solid var(--surface-border);
  padding-block: var(--sp-700) var(--sp-400);
}
.footer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--sp-500);
}
@media (min-width: 640px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-600); } }

.footer-blurb { margin-top: var(--sp-200); max-width: 34ch; font-size: 14px; color: var(--text-soft); }
.footer-heading { font-size: 14px; font-weight: var(--fw-bold); color: var(--text-solid); margin-bottom: var(--sp-150); }
.footer-list li + li { margin-top: var(--sp-100); }
.footer-list a { font-size: 14px; font-weight: var(--fw-normal); color: var(--text-soft); }
.footer-list a:hover { color: var(--action-text-solid); }
.footer-contact { margin-bottom: var(--sp-300); }
.footer-contact li { font-size: 14px; color: var(--text-soft); }

.footer-bottom {
  max-width: var(--content-max);
  margin: var(--sp-600) auto 0;
  padding: var(--sp-300) var(--gutter) 0;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-150) var(--sp-400);
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-quiet);
}
.footer-note { max-width: 52ch; }