/* ==========================================================================
   Unemployable Property — site tokens
   Authored fresh from brand/design-system.json (tokens object).
   Load order on every page:  tokens.css  ->  components.css
   Nothing below may be overridden with a raw value in page markup.
   Breakpoints are 640 / 768 / 1024 only.
   ========================================================================== */

/* BEGIN GENERATED :root — do not edit; run scripts/sync.py */
:root {
  /* -- Colours -- */
  --uep-green: #069550;
  --uep-green-dark: #058046;
  --uep-green-darker: #046137;
  --uep-green-light: #0ab361;
  --uep-green-tint: #e6f6ee;
  --uep-gold: #fbbf24;
  --uep-gold-dark: #d99b0a;
  --uep-gold-legacy: #ffcc00;
  --uep-ink: #0c1320;
  --uep-navy: #2c3345;
  --uep-navy-deep: #171c28;
  --uep-slate: #4b5563;
  --uep-muted: #8c8c8c;
  --uep-line: #e5e7eb;
  --uep-surface: #ffffff;
  --uep-surface-alt: #fbfbfb;
  --uep-surface-warm: #f6f4ef;
  --uep-on-dark: #ffffff;
  --uep-on-dark-muted: #cdd3de;
  --uep-on-dark-faint: #8892a6;
  --uep-on-dark-divider: #e8ecf2;
  --uep-pink: #b23d6a;
  --uep-danger: #c8322e;

  /* -- Overlays -- */
  --uep-overlay: rgba(12, 19, 32, 0.72);
  --uep-overlay-soft: rgba(12, 19, 32, 0.45);
  --uep-overlay-ink-95: rgba(12, 19, 32, 0.95);
  --uep-overlay-ink-55: rgba(12, 19, 32, 0.55);
  --uep-overlay-ink-35: rgba(12, 19, 32, 0.35);
  --uep-overlay-gold-28: rgba(251, 191, 36, 0.28);
  --uep-overlay-white-02: rgba(255, 255, 255, 0.02);
  --uep-overlay-white-04: rgba(255, 255, 255, 0.04);
  --uep-overlay-white-06: rgba(255, 255, 255, 0.06);
  --uep-overlay-white-08: rgba(255, 255, 255, 0.08);
  --uep-overlay-white-10: rgba(255, 255, 255, 0.10);
  --uep-overlay-white-15: rgba(255, 255, 255, 0.15);
  --uep-overlay-white-18: rgba(255, 255, 255, 0.18);
  --uep-overlay-white-90: rgba(255, 255, 255, 0.90);
  --uep-overlay-white-96: rgba(255, 255, 255, 0.96);
  --uep-overlay-green-glow: rgba(6, 149, 80, 0.30);
  --uep-overlay-gold-glow: rgba(251, 191, 36, 0.14);

  /* -- Font families -- */
  --font-headline: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* -- Font sizes -- */
  --fs-overline: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h6: 1.125rem;
  --fs-h5: 1.25rem;
  --fs-h4: 1.5rem;
  --fs-h3: 1.875rem;
  --fs-h2: 2.25rem;
  --fs-h1: 2.75rem;
  --fs-display: 3.5rem;

  /* -- Line heights -- */
  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* -- Font weights -- */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-sbd: 600;
  --fw-bld: 700;
  --fw-blk: 800;

  /* -- Tracking -- */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-xwide: 0.14em;

  /* -- Spacing (8pt rhythm) -- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* -- Layout widths -- */
  --max-w-narrow: 720px;
  --max-w-body: 960px;
  --max-w-wide: 1200px;
  --max-w-xwide: 1360px;

  /* -- Radius -- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -- Shadow -- */
  --shadow-sm: 0 1px 2px rgba(12,19,32,0.06);
  --shadow-md: 0 6px 18px rgba(12,19,32,0.08);
  --shadow-lg: 0 18px 44px rgba(12,19,32,0.12);
  --shadow-xl: 0 32px 80px rgba(12,19,32,0.18);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.08);

  /* -- Motion -- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;
}
@media (min-width: 768px) {
  :root {
    --fs-h3: 2.25rem;
    --fs-h2: 3rem;
    --fs-h1: 3.75rem;
    --fs-display: 4.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-h1: 4.25rem;
    --fs-display: 5.5rem;
  }
}
/* END GENERATED :root */

/* -- Local extensions: hand-authored, NOT in design-system.json --
   This block sits OUTSIDE the generated region on purpose, so
   scripts/sync.py can regenerate the tokens above without ever
   clobbering it. Add project-specific custom properties here; add
   design-system tokens to brand/design-system.json instead. */
:root {
  /* Coloured glows. Separate from the neutral drop shadows above because they
     tint with a brand colour rather than ink. */
  /* -- Breakpoints: 640 / 768 / 1024 only. --
     Deliberately NOT declared as custom properties: a custom property cannot
     be used in an @media prelude, so `@media (min-width: var(--bp-md))` would
     silently never match. Write the three literals.

     --fs-tiny, --fs-base and --uep-canvas are deliberately NOT defined here.
     Legacy markup under /pages references them, but /pages loads
     brand/tokens.css + shared/components.css and never this file, so an alias
     would fix nothing there while quietly legitimising the names in site/.
     Use --fs-overline, --fs-body and --uep-surface-alt instead. */

  --tracking-slight: 0.01em;

  /* Two overlay steps the design system does not carry, both added for the
     home marquee and both measured off the reference rather than picked:
       -ink-10    the base-tier legibility wash fades to 0.1 at its bottom
                  stop (0.3 above 768px, which --uep-overlay-ink-35 covers).
                  Without this the phone tier runs 3.5x denser than the
                  reference over the smallest rendering of the collage.
       -white-25  the tile hairline. Composited over --uep-ink this lands at
                  about rgb(73,78,88); the reference border is a flat
                  rgb(68,68,68), which -white-15 undershoots by enough that
                  tile edges stop separating from the ground.
     If either earns a second use, promote it into brand/design-system.json
     rather than growing this block. */
  --uep-overlay-ink-10: rgba(12, 19, 32, 0.10);
  --uep-overlay-white-25: rgba(255, 255, 255, 0.25);

  /* Focus-ring colour, resolved by INHERITANCE rather than by a pile of
     descendant selectors. See the :focus-visible block below for why the
     value has to follow the GROUND an element sits on and not the element. */
  --uep-ring: var(--uep-ink);

  --shadow-glow-green: 0 10px 24px rgba(6, 149, 80, 0.28);
  --shadow-glow-green-hover: 0 14px 30px rgba(6, 149, 80, 0.38);
  --shadow-glow-gold: 0 10px 24px rgba(251, 191, 36, 0.35);
  --shadow-glow-ink: 0 10px 24px rgba(12, 19, 32, 0.18);
  --shadow-glow-ink-deep: 0 20px 44px rgba(12, 19, 32, 0.35);
  --shadow-focus-green: 0 0 0 4px rgba(6, 149, 80, 0.15);
}

/* ==========================================================================
   Base element resets
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-9);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--uep-ink);
  background: var(--uep-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, NOT hidden. overflow-x: hidden forces the computed overflow-y to
     auto, which turns <body> into a scroll container and silently disables
     position: sticky for EVERY descendant on the page — no error, no warning,
     the element just scrolls away. overflow-x: clip suppresses the same
     horizontal overflow without creating a scroll container, so sticky keeps
     working. If this ever reverts to hidden, the sticky router card on the
     home hero dies with it. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: var(--fw-bld);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--uep-ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-sbd); }
h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-sbd);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p { margin: 0 0 var(--space-4); }

/* --uep-green is 3.87:1 on white — below AA for normal text. Body links use
   --uep-green-darker (7.58:1 on white, 7.33:1 on --uep-surface-alt). */
a {
  color: var(--uep-green-darker);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--uep-green-dark); }

img, video, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--uep-line);
  margin: var(--space-7) 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus ring. The previous gold ring measured 1.67:1 on white, 1.49:1 on the
   green tint and 1.00:1 on a gold button — invisible on every light surface,
   failing WCAG 2.4.11. Ink instead: 18.59:1 on white, 17.96:1 on --surface-alt,
   16.63:1 on the green tint, 11.14:1 on gold, 4.80:1 on the green field. On
   ink, navy-deep and green grounds it flips to white (18.59 / 17.03 / 3.87).
   Every combination clears 3:1. No border-radius here: the ring styles the
   outline, it must not reshape the element it is announcing.

   THE RING FOLLOWS THE GROUND, NOT THE ELEMENT. outline-offset is 2px, so the
   ring is painted OUTSIDE the box, on whatever the element is sitting on. That
   is why a white Member Login pill on the green header keeps the WHITE ring
   (the ring lands on green, 3.87:1) and a gold button on an ink section keeps
   it too (18.59:1) — flipping those to ink because the button is light would
   have been the wrong reading of the same rule.

   WHAT WAS BROKEN. The old rules were descendant selectors on the dark
   grounds, so EVERYTHING inside a dark section got the white ring — including
   the controls inside the WHITE panels those sections carry. Measured:
     .uep-cta-panel in .uep-section--green  (final CTA, 8 routes)   1.00:1
     .uep-cta-panel in .uep-hero--green     (home "Start here")     1.00:1
     .home-router__item--go, green tint, inside that panel          1.12:1
     .mini-series-panel in .uep-hero--green (both opt-in forms)     1.00:1
   Four light islands where the keyboard ring rendered white on white and
   announced nothing at all. /join/'s calendar was the near miss that is worth
   writing down: .uep-embed--calendar sets background:none, so its iframe ring
   lands on the green section rather than the panel and the old white ring did
   clear 3:1 (3.87). It is in the list below anyway — ink is 4.80 there, and
   the plain .uep-embed it modifies IS --surface-alt, where white would be
   1.03:1 the day someone uses it without the calendar modifier.

   THE FIX. One inherited custom property instead of descendant selectors.
   A dark ground sets --uep-ring to white; a light panel nested inside one sets
   it straight back to ink for itself and everything under it. Nesting resolves
   itself, at any depth, with no specificity war — which is the whole reason
   this is a custom property and not another selector list. When you add a new
   panel with a light background, add it to the second list. */
:focus-visible {
  outline: 3px solid var(--uep-ring);
  outline-offset: 2px;
}

/* Dark grounds: the ring lands on ink, navy-deep or the brand green. */
.uep-header--green,
.uep-hero--green,
.uep-section--ink,
.uep-section--dark,
.uep-section--green,
.uep-logobar,
.uep-trustbar,
.uep-footer { --uep-ring: var(--uep-on-dark); }

/* …and the light islands that sit INSIDE those grounds, which take it back.
   This list is deliberately the panels that actually CONTAIN a focusable
   control, not every light box in the kit: a panel with nothing to focus needs
   no ring colour, and listing it invites the .uep-step-card trap — that card
   is white on a light section but --uep-navy inside .uep-section--ink, so a
   blanket "step cards are light" line would have re-broken exactly the case
   this block exists to fix. .uep-topbar (gold) is listed even though it is not
   nested in a dark ground today, because ink on gold is 11.14:1 either way and
   the bar is the one component that moves between pages on its own. */
.uep-cta-panel,
.uep-faq__item,
.uep-embed,
.uep-topbar,
.uep-form { --uep-ring: var(--uep-ink); }

::selection {
  background: var(--uep-green);
  color: var(--uep-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}