@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_SemiBold_Italic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Galano Grotesque"; src:url("../fonts/Rene_Bieder_-_Galano_Grotesque_Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --zip-royal:#1c419c; --zip-yellow:#ffd748; --zip-white:#ffffff; --zip-charcoal:#1a1a1a;
  --blue-900:#0d1f4e; --blue-700:#1c419c; --blue-500:#2d6be4; --blue-400:#4f86ea; --blue-300:#6b8fd6;
  --blue-200:#a9bee9; --blue-100:#d0dcf5; --blue-050:#eef3fc;
  --orange-700:#c9501f; --orange-500:#f07030; --pink-500:#f0305a; --red-500:#f0305a;
  --yellow-500:#ffd748; --yellow-400:#ffe27a; --yellow-200:#fff1b8;
  --ink-1000:#0a0a0a; --ink-900:#1a1a1a; --ink-800:#2a2a2e; --ink-700:#3a3a40; --ink-600:#5b5d66;
  --ink-500:#7a7d88; --ink-400:#9da0aa; --ink-300:#c5c7cf; --ink-200:#e3e5ea; --ink-100:#f1f2f5; --ink-050:#f8f9fb;
  --grad-zipify:linear-gradient(135deg,#000000 0%,#0a3a79 100%);
  --grad-ocu:linear-gradient(135deg,#f07030 0%,#f0305a 100%);
  --grad-blue-text-accent:linear-gradient(135deg,#2d6be4 0%,#1c419c 100%);
  --grad-yellow-text-accent:linear-gradient(135deg,#ffde59 0%,#ff914d 100%);
  --grad-plus:linear-gradient(135deg,#ffd748 11%,#fd3e5d 100%);
  --grad-banner:linear-gradient(116.84deg,#1d5fb6 16.8%,#0a3a79 83.2%);
  /* Home's two dark grounds (spec §3.4): the hero and closing CTA band, and the
     trust strip between them. Neither matches an existing blue or ink step. */
  --ground-dark:#0b1020; --ground-trust:#0e0f1c;
  --bg:var(--zip-white); --bg-subtle:var(--ink-050); --surface:#ffffff; --border:var(--ink-200);
  --fg:var(--ink-900); --fg-2:var(--ink-600); --fg-3:var(--ink-400);
  --fg-on-dark:#f9f9f9; --fg-on-dark-2:rgba(255,255,255,.65); --fg-on-dark-3:rgba(255,255,255,.40);
  --accent:var(--blue-700); --accent-dark:var(--zip-yellow); --focus-ring:0 0 0 3px rgba(28,65,156,.12);
  --font-display:"Galano Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-body:"Galano Grotesque","Helvetica Neue",Arial,sans-serif;
  /* The design system's third family slot. It resolves to the same face as the
     other two, but the blog's quote cards ask for it by name (that is the one
     place the system permits italic), so the name has to exist or those rules
     fall back to the browser default. */
  --font-caption:"Galano Grotesque","Helvetica Neue",Arial,sans-serif;
  --fs-hero:60px; --fs-h1:clamp(36px,4.4vw,60px); --fs-h2:clamp(28px,3.2vw,44px); --fs-h3:clamp(22px,2.4vw,30px);
  --fs-h4:20px; --fs-body-1:18px; --fs-body-2:16px; --fs-caption:13px; --fs-eyebrow:12px;
  --ls-tight:-0.02em; --ls-display:-0.015em; --ls-eyebrow:0.12em; --ls-button:0.06em;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:56px; --sp-10:72px; --sp-11:96px; --sp-12:128px;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-2xl:40px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(13,31,78,.06),0 1px 1px rgba(13,31,78,.04);
  --sh-2:0 4px 12px rgba(13,31,78,.08),0 2px 4px rgba(13,31,78,.04);
  --sh-3:0 12px 28px rgba(13,31,78,.10),0 4px 8px rgba(13,31,78,.06);
  --sh-4:0 24px 60px rgba(13,31,78,.18),0 8px 16px rgba(13,31,78,.10);
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms;
  --zp-header-h:72px;
}