@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');
:root{
  /* Base palette — sampled directly from the Snowball brand PDF (uploads/snowball.pdf) */
  --color-cream-50:#F8F4EE;   /* page */
  --color-cream-100:#ECE7DB;  /* card / panel on page */
  --color-cobalt-500:#3245EA; /* THE blue — logo, inverse surfaces, headings */
  --color-cobalt-700:#1F2FE0; /* deeper blue — press states only, never a surface */
  --color-cobalt-ink:#4B4E82; /* body copy on light */
  --color-cobalt-muted:#7A7FB0;
  --color-cobalt-pale:#B7BBEF;
  --color-coral-400:#FF6F91;  /* THE accent — FILL AND MARK ONLY: spark dot, kickers, rules, marks */
  --color-coral-600:#E1284F;  /* accent press state on light */
  --color-line-on-light:rgba(50,69,234,0.18);
  --color-line-on-dark:rgba(248,244,238,0.22);

  /* Semantic aliases */
  --surface-page:var(--color-cream-50);
  --surface-page-alt:var(--color-cream-100);
  --surface-inverse:var(--color-cobalt-500);
  --surface-inverse-alt:var(--color-cobalt-700);
  --text-primary:var(--color-cobalt-500);
  --text-primary-inverse:var(--color-cream-50);
  --text-muted:var(--color-cobalt-ink);
  --text-muted-inverse:var(--color-cobalt-pale);
  --text-faint:var(--color-cobalt-muted);
  --accent:var(--color-coral-400);          /* fill / mark only */
  --accent-press:var(--color-coral-600);
  --accent-inverse:var(--color-coral-400);  /* same coral works on cobalt */
  /* CORAL IS NEVER A SURFACE. It is a mid-tone that fails contrast against every
     brand text colour (cream 2.4:1, ink 2.9:1, cobalt 2.5:1), and darkening it into a
     panel colour loses the electric quality that makes it the accent. Panels are cream
     or cobalt — only. Coral appears as the spark dot, kicker text, rules and small marks. */
  --border-subtle:var(--color-line-on-light);
  --border-subtle-inverse:var(--color-line-on-dark);

  /* Legacy aliases — kept so older cards keep resolving */
  --color-cobalt-600:var(--color-cobalt-500);
  --color-coral-500:var(--color-coral-400);
  --color-coral-300:var(--color-coral-400);
}
/* @import MUST come first — a parser drops any @import that follows another rule. */


/* Display / logo face: CORBEN (SIL Open Font License, files in assets/fonts/).
   A rounded slab serif — friendly, warm, with heavy bracketed serifs and tall x-height.
   Only two weights exist (400, 700). The brand uses REGULAR 400 for display and logo;
   700 is reserved for small labels and kickers.
   Body face: ROBOTO (variable, supplied by the founder, Apache 2.0). */
@font-face{font-family:'Corben';src:url('../fonts/Corben-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Corben';src:url('../fonts/Corben-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Variable.woff2') format('woff2');font-weight:100 900;font-stretch:75% 125%;font-style:normal;font-display:swap}

:root{
  /* Corben — logo, headings, big numbers */
  --font-display:'Corben', Georgia, 'Times New Roman', serif;
  /* Labels and kickers also Corben, small and bold with wide tracking */
  --font-label:'Corben', Georgia, 'Times New Roman', serif;
  /* Roboto — ALL body copy. A neutral grotesque: it stays quiet so Corben's slab
     headlines carry the voice. Variable file, so any weight 100–900 is available,
     but body copy stays at 400 with 500/600 for emphasis inside a paragraph. */
  --font-body:'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* THE highlight — Instrument Serif italic, and the only one.
     Sits inline at 1.06em on the same baseline, no rotation, so it emphasises a
     word without changing voice. There is deliberately no second highlight face. */
  --font-highlight:'Instrument Serif', Georgia, 'Times New Roman', serif;
  /* Legacy alias */
  --font-highlight-quiet:var(--font-highlight);

  /* Weights — split by ROLE, not by size:
       400 (Regular) = logo + all headlines. The light slab is the brand voice.
       700 (Bold)    = ALL numerals (stats, prices, step numbers) + small labels/kickers.
     Numbers are the proof in this brand, so they carry the weight the headlines don't. */
  --weight-display:400;   /* logo, headlines */
  --weight-number:700;    /* every numeral */
  --weight-label:700;     /* labels, kickers */

  /* Tracking — Corben's slabs already fill the line, so headlines need LESS negative
     tracking than a grotesque would. Do not go below -0.02em. */
  --tracking-display:-0.015em;
  --tracking-logo:-0.02em;

  /* Scale (deck-authored, 1920x1080 canvas) */
  --text-hero:124px;
  --text-title:64px;
  --text-display:100px;
  --text-h1:54px;
  --text-h2:46px;
  --text-h3:26px;
  --text-subtitle:34px;
  --text-body:24px;
  --text-label:24px;
  --text-num:44px;
  --text-highlight:42px;
  --text-highlight-quiet:1.06em;

  /* Logo geometry — dots on the golden ratio (1 : 1.618 : 2.618) */
  /* Logo geometry, measured from the brand guide and expressed as a fraction of the
     WORDMARK'S font size — set --logo-size and every part follows.
       dot 1 = 0.21em  (coral spark)   dot 2 = 0.34em (x1.618)   dot 3 = 0.55em (x1.618)
       dot gap = 0.20em (constant)     word gap = 0.40em (= 2x dot gap)
     dot 3 equals Corben's x-height. The dots are CENTRE-aligned with the wordmark's
     x-height — never sat on the baseline; align-items:center lands exactly there. */
  --logo-size:40px;
  --logo-dot-1:calc(var(--logo-size) * 0.21);
  --logo-dot-2:calc(var(--logo-size) * 0.34);
  --logo-dot-3:calc(var(--logo-size) * 0.55);
  --logo-dot-gap:calc(var(--logo-size) * 0.20);
  --logo-word-gap:calc(var(--logo-size) * 0.40);

  /* Legacy alias */
  --font-mono-label:var(--font-label);
}
:root{
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --space-xl:48px;
  --space-2xl:64px;
  --space-3xl:80px;

  --canvas-pad-x:120px;
  --canvas-pad-top:110px;
  --canvas-pad-bottom:100px;

  /* Radii — the brand PDF is built on generously rounded panels, not sharp boxes */
  --radius-xs:6px;   /* measurement chips, tiny tags */
  --radius-sm:12px;  /* inputs, small tiles */
  --radius-md:24px;  /* nested panels inside a card */
  --radius-lg:40px;  /* the default card / panel radius */
  --radius-xl:56px;  /* full-bleed hero panels */
  --radius-pill:100px;
  --radius-none:0px;

  --border-hairline:1px solid var(--border-subtle);
  --border-dotted:1px dotted var(--border-subtle);
  --border-strong:3px solid var(--text-primary);
}

html{scroll-behavior:smooth}
body{margin:0;background:#F8F4EE;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-primary);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
button{font-family:inherit}
input,textarea,select{font-family:var(--font-body)}
@keyframes snUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes snFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes snPage{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:560px){#sbLabels span:nth-child(2){display:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

img{max-width:100%}
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:640px){
  header nav{font-size:14px}
  header nav a{padding:12px 18px!important}
}
.s0:hover{background:var(--surface-inverse-alt);color:var(--text-primary-inverse)}
.s1:active{background:#1F2FE0;transform:translateY(1px)}
.s2:hover{background:var(--surface-page-alt)}
.s3:active{transform:translateY(1px)}
.s4:focus{border-bottom:1px solid var(--text-primary)}
.s5:focus{border:1px solid var(--text-primary)}
.s6:hover{background:var(--surface-inverse-alt)}