/*
 * The public site's only stylesheet. It carries no JavaScript companion: everything below must work
 * with the bundle absent, because there is no bundle. The design-system tokens come first and are
 * the only source of colour, typeface and type sizes — no value here is invented.
 */
/*
 * Self-hosted faces FIRST, then the design system's tokens. fonts.css is generated by
 * scripts/make-site-fonts.mjs; the design system's own remote webfont import is dropped for this
 * site by scripts/prerender.mjs, because we serve the same faces from our own origin.
 */
/*
 * GENERATED by scripts/make-site-fonts.mjs — do not edit by hand.
 *
 * Self-hosted so first paint does not wait on two cross-origin round trips, and so the Greek half of
 * the site has a real typeface: Plus Jakarta Sans ships no Greek subset, and Inter carries it.
 * The unicode-range on each face is Google's own, so the browser downloads only what a page needs.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jakarta-400-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jakarta-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jakarta-600-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jakarta-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jakarta-700-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jakarta-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/jakarta-800-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/jakarta-800-latin.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+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-400-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-800-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* POSALY Design System — global CSS entry point.
   Consumers link this ONE file. It is a list of @imports only; each imported file
   contributes tokens, fonts, or the typography/base layer. */
/* POSALY webfonts. Plus Jakarta Sans (core UI) + Inter (occasional form labels)
   are the two families the source file declares; both ship from Google Fonts.
   Substitution note: the .fig referenced the desktop families directly and carried
   no font binaries, so we load the identical families from the Google Fonts CDN. */


/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --action-accept-default: var(--green-600); /* @kind color */
  --action-accept-disabled: var(--green-100); /* @kind color */
  --action-accept-hover: var(--green-700); /* @kind color */
  --action-accept-pressed: var(--green-600); /* @kind color */
  --action-primary-default: var(--navy-100); /* @kind color */
  --action-primary-disabled: var(--navy-50); /* @kind color */
  --action-primary-hover: var(--navy-200); /* @kind color */
  --action-primary-pressed: var(--navy-300); /* @kind color */
  --action-primary-selected: var(--navy-400); /* @kind color */
  --action-reject-background-default: var(--white); /* @kind color */
  --action-reject-background-disabled: var(--white); /* @kind color */
  --action-reject-background-hover: var(--red-100); /* @kind color */
  --action-reject-background-pressed: var(--white); /* @kind color */
  --action-reject-border-default: var(--red-600); /* @kind color */
  --action-reject-border-disabled: var(--red-100); /* @kind color */
  --action-secondary-background-default: var(--white); /* @kind color */
  --action-secondary-background-disabled: var(--navy-50); /* @kind color */
  --action-secondary-background-hover: var(--navy-100); /* @kind color */
  --action-secondary-background-pressed: var(--navy-200); /* @kind color */
  --action-secondary-background-selected: var(--navy-400); /* @kind color */
  --action-secondary-border-default: var(--navy-200); /* @kind color */
  --action-secondary-border-disabled: var(--navy-50); /* @kind color */
  --action-secondary-border-selected: var(--navy-500); /* @kind color */
  --action-side-menu-default: var(--navy-200); /* @kind color */
  --action-side-menu-disabled: var(--navy-400); /* @kind color */
  --action-side-menu-hover: var(--navy-50); /* @kind color */
  --action-side-menu-pressed: var(--text-inverse); /* @kind color */
  --action-side-menu-selected: var(--white); /* @kind color */
  --amber-100: rgb(246,236,216); /* @kind color */
  --amber-600: rgb(154,100,31); /* @kind color */
  --black: rgb(0,0,0); /* @kind color */
  --border-dark: var(--navy-600); /* @kind color */
  --border-default: var(--neutral-200); /* @kind color */
  --border-focus: var(--neutral-400); /* @kind color */
  --border-strong: var(--neutral-300); /* @kind color */
  --border-subtle: var(--neutral-200); /* @kind color */
  --brand-blush: rgb(255,247,245); /* @kind color */
  --breakpoint-desktop-lg: 1440; /* @kind other */
  --breakpoint-desktop-sm: 1280; /* @kind other */
  --breakpoint-mobile: 390; /* @kind other */
  --breakpoint-tablet: 768; /* @kind other */
  --coral-100: rgb(251,221,214); /* @kind color */
  --coral-200: rgb(245,184,169); /* @kind color */
  --coral-300: rgb(237,145,124); /* @kind color */
  --coral-400: rgb(224,122,95); /* @kind color */
  --coral-500: rgb(212,112,90); /* @kind color */
  --coral-50: rgb(254,243,240); /* @kind color */
  --coral-600: rgb(184,90,68); /* @kind color */
  --coral-700: rgb(149,66,50); /* @kind color */
  --coral-800: rgb(110,46,32); /* @kind color */
  --coral-900: rgb(72,29,18); /* @kind color */
  --family-brand: "Plus Jakarta Sans"; /* @kind font */
  --family-display: "Plus Jakarta Sans"; /* @kind font */
  --focusring-offset: 2; /* @kind other */
  --focusring-width: 3; /* @kind other */
  --gold-100: rgb(255,244,214); /* @kind color */
  --gold-600: rgb(230,168,50); /* @kind color */
  --green-100: rgb(225,240,234); /* @kind color */
  --green-300: rgb(78,149,133); /* @kind color */
  --green-600: rgb(20,114,94); /* @kind color */
  --green-700: rgb(15,87,72); /* @kind color */
  --grid-desktop-columns: 12; /* @kind other */
  --grid-desktop-gutter: 24; /* @kind other */
  --grid-desktop-margin: 80; /* @kind other */
  --grid-mobile-columns: 4; /* @kind other */
  --grid-mobile-gutter: 12; /* @kind other */
  --grid-mobile-margin: 16; /* @kind other */
  --grid-tablet-columns: 8; /* @kind other */
  --grid-tablet-gutter: 16; /* @kind other */
  --grid-tablet-margin: 24; /* @kind other */
  --icons-action-selected: var(--navy-400); /* @kind color */
  --icons-default: var(--neutral-900); /* @kind color */
  --icons-disabled: var(--neutral-500); /* @kind color */
  --icons-inverse: var(--white); /* @kind color */
  --icons-reject: var(--neutral-900); /* @kind color */
  --kpi-cards-blue: var(--navy-100); /* @kind color */
  --kpi-cards-coral: var(--coral-50); /* @kind color */
  --kpi-cards-purple: var(--purple-100); /* @kind color */
  --lineheight-body: 1.5; /* @kind other */
  --lineheight-caption: 1.33; /* @kind other */
  --lineheight-display: 56; /* @kind other */
  --lineheight-title: 1.25; /* @kind other */
  --minfontsize: 12; /* @kind other */
  --miniconsize: 24; /* @kind other */
  --navy-100: rgb(210,218,231); /* @kind color */
  --navy-200: rgb(167,182,206); /* @kind color */
  --navy-300: rgb(124,146,181); /* @kind color */
  --navy-400: rgb(84,112,156); /* @kind color */
  --navy-500: rgb(58,85,128); /* @kind color */
  --navy-50: rgb(238,241,246); /* @kind color */
  --navy-600: rgb(36,51,73); /* @kind color */
  --navy-700: rgb(26,37,56); /* @kind color */
  --navy-800: rgb(17,25,39); /* @kind color */
  --navy-900: rgb(9,13,21); /* @kind color */
  --neutral-100: rgb(242,238,233); /* @kind color */
  --neutral-200: rgb(238,234,229); /* @kind color */
  --neutral-300: rgb(217,213,208); /* @kind color */
  --neutral-400: rgb(170,165,160); /* @kind color */
  --neutral-450: rgb(120,115,110); /* @kind color */
  --neutral-500: rgb(107,102,97); /* @kind color */
  --neutral-50: rgb(250,248,245); /* @kind color */
  --neutral-600: rgb(81,77,73); /* @kind color */
  --neutral-700: rgb(56,54,52); /* @kind color */
  --neutral-800: rgb(41,38,36); /* @kind color */
  --neutral-900: rgb(28,25,23); /* @kind color */
  --purple-100: rgb(237,230,246); /* @kind color */
  --purple-600: rgb(139,107,174); /* @kind color */
  --radius-full: 9999;
  --radius-lg: 24;
  --radius-md: 16;
  --radius-none: 0;
  --radius-sm: 8;
  --radius-xl: 32;
  --radius-xs: 4;
  --red-100: rgb(250,217,215); /* @kind color */
  --red-50: rgb(254,246,246); /* @kind color */
  --red-600: rgb(208,50,42); /* @kind color */
  --score-default-2: var(--navy-600); /* @kind color */
  --score-default-surface-2: var(--navy-100); /* @kind color */
  --score-default-surface: var(--navy-100); /* @kind color */
  --score-default: var(--navy-600); /* @kind color */
  --score-high-2: var(--green-600); /* @kind color */
  --score-high-surface-2: var(--green-100); /* @kind color */
  --score-high-surface: var(--green-100); /* @kind color */
  --score-high: var(--green-600); /* @kind color */
  --score-low-2: var(--red-600); /* @kind color */
  --score-low-surface-2: var(--red-50); /* @kind color */
  --score-low-surface: var(--red-50); /* @kind color */
  --score-low: var(--red-600); /* @kind color */
  --score-medium-2: var(--amber-600); /* @kind color */
  --score-medium-surface-2: var(--amber-100); /* @kind color */
  --score-medium-surface: var(--amber-100); /* @kind color */
  --score-medium: var(--amber-600); /* @kind color */
  --score-track-2: var(--neutral-300); /* @kind color */
  --score-track: var(--neutral-300); /* @kind color */
  --size-100: 11; /* @kind font */
  --size-1100: 48; /* @kind font */
  --size-200: 12; /* @kind font */
  --size-300: 14; /* @kind font */
  --size-400: 16; /* @kind font */
  --size-500: 18; /* @kind font */
  --size-600: 20; /* @kind font */
  --size-700: 24; /* @kind font */
  --size-900: 32; /* @kind font */
  --spacing-2xl: 24;
  --spacing-2xs: 2;
  --spacing-3xl: 32;
  --spacing-4xl: 40;
  --spacing-5xl: 48;
  --spacing-6xl: 64;
  --spacing-7xl: 80;
  --spacing-8xl: 96;
  --spacing-9xl: 128;
  --spacing-lg: 16;
  --spacing-md: 12;
  --spacing-none: 0;
  --spacing-sm: 8;
  --spacing-xl: 20;
  --spacing-xs: 4;
  --status-attention-background: var(--coral-100); /* @kind color */
  --status-attention-text: var(--neutral-900); /* @kind color */
  --status-info-background: var(--coral-50); /* @kind color */
  --status-info-border: var(--coral-100); /* @kind color */
  --status-info-text: var(--neutral-900); /* @kind color */
  --status-positive-background: var(--green-100); /* @kind color */
  --status-positive-text: var(--green-600); /* @kind color */
  --status-warning-background: var(--red-50); /* @kind color */
  --status-warning-text: var(--red-600); /* @kind color */
  --surface-default: var(--white); /* @kind color */
  --surface-elevated: var(--white); /* @kind color */
  --surface-page: var(--neutral-50); /* @kind color */
  --surface-subtle: var(--neutral-100); /* @kind color */
  --text-disabled: var(--neutral-500); /* @kind color */
  --text-inverse: var(--white); /* @kind color */
  --text-placeholder: var(--neutral-450); /* @kind color */
  --text-primary: var(--neutral-900); /* @kind color */
  --text-secondary: var(--neutral-500); /* @kind color */
  --text-tertiary: var(--neutral-400); /* @kind color */
  --tiers-macro: var(--coral-100); /* @kind color */
  --tiers-micro: var(--purple-100); /* @kind color */
  --tiers-mid-tier: var(--navy-100); /* @kind color */
  --tiers-nano: var(--neutral-200); /* @kind color */
  --touchtarget-comfortable: 48; /* @kind other */
  --touchtarget-min: 44; /* @kind other */
  --weight-bold: "Bold"; /* @kind other */
  --weight-extra-bold: "ExtraBold"; /* @kind other */
  --weight-medium: "Medium"; /* @kind other */
  --weight-regular: "Regular"; /* @kind other */
  --weight-semi-bold: "Semi Bold"; /* @kind other */
  --white: rgb(255,255,255); /* @kind color */
}

/* POSALY typography layer.
   Base values (families, weights, sizes, line-heights) live in components/fig-tokens.css
   as Figma Variables. This file adds the SEMANTIC type roles the product uses and a base
   document reset so every specimen card and UI kit inherits the right family + smoothing. */

:root {
  /* Semantic font-family aliases */
  --font-sans: var(--family-brand);            /* "Plus Jakarta Sans" — everything */
  --font-form: "Inter", var(--family-brand);   /* occasional login form labels */

  /* Semantic type role sizes (px) — derived from source usage */
  --type-hero: 64px;        /* ExtraBold, auth hero headlines */
  --type-h1: 32px;          /* Bold, big KPI numbers */
  --type-h2: 20px;          /* Bold, section titles */
  --type-h3: 18px;          /* Bold, page/header title */
  --type-body-lg: 16px;     /* Regular/Bold, large body & large buttons */
  --type-body: 14px;        /* Regular/Bold, default body, table cells, buttons */
  --type-caption: 12px;     /* Regular/SemiBold, sub-labels, table headers */
  --type-small: 12px;       /* Regular, @handles, meta — was 11px */
  --type-micro: 12px;       /* Bold + tracked, uppercase eyebrows — was 10px */
  /* 12px is the floor: nothing in the interface renders text below it. caption/small/micro
     therefore share a size and are distinguished by weight, tracking and case instead. */

  --leading-tight: 1.25;
  --leading-body: 1.5;
  --leading-caption: 1.33;

  /* Signature sidebar gradient — deep navy folding into warm coral at the base */
  --gradient-brand: linear-gradient(201.748deg, rgb(27,43,64) 24.98%, rgb(34,54,78) 59.48%, rgb(112,74,80) 81.77%, rgb(193,111,100) 99.34%); /* @kind other */
}

/* Document base */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links — default palette so user-added links never fall back to browser blue */
a { color: var(--coral-600); text-decoration: none; }
a:hover { color: var(--coral-700); text-decoration: underline; }

/* Reusable type roles */
.posaly-hero    { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-hero); line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); }
.posaly-h1      { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-h1); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--text-primary); }
.posaly-h2      { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-h2); line-height: 1.4; color: var(--text-primary); }
.posaly-h3      { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-h3); line-height: 1.55; color: var(--text-primary); }
.posaly-body    { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-primary); }
.posaly-body-bd { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-primary); }
.posaly-caption { font-family: var(--font-sans); font-weight: 600; font-size: var(--type-caption); line-height: var(--leading-caption); color: var(--text-secondary); }
.posaly-small   { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-small); line-height: var(--leading-caption); color: var(--text-secondary); }
.posaly-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-micro); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }



/*
 * A metric-matched fallback, so the page does not reflow when the webfont arrives.
 *
 * With `display=swap` the browser paints in a fallback face and swaps: on a slow connection that
 * swap moved a long page enough to score 0.38 cumulative layout shift, which is both a failing
 * Lighthouse number and a real reader watching the text jump. Measured in the browser, Plus Jakarta
 * Sans sets 1.28% wider than Arial at the same size with identical line height, so a fallback
 * adjusted by that much occupies almost exactly the same space and the swap becomes invisible.
 *
 * Remeasure this if the brand face ever changes; a stale adjustment is worse than none.
 */
@font-face {
  font-family: 'Jakarta fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Arimo');
  size-adjust: 101.28%;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  /*
   * Inter sits between the brand face and the metric-matched fallback because Plus Jakarta Sans
   * ships no Greek subset. The browser resolves per glyph, so Latin stays Jakarta and Greek becomes
   * Inter — without which every Greek page rendered in whatever the system happened to provide.
   */
  font-family: var(--font-sans), 'Inter', 'Jakarta fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* A marketing page may be more spacious than a dashboard screen; it may not be a different brand. */
.site-container {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: 24px;
}

@media (max-width: 560px) {
  .site-container { padding-inline: 16px; }
}

/* Visible only once focused — the first stop for a keyboard user. */
.site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--surface-page);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.10);
}
.site-skip:focus { left: 16px; top: 16px; }

/* ---------------------------------------------------------------- page frame */

.site-header {
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-page);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  flex-wrap: wrap;
  padding-block: 12px;
}

.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { display: block; height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex: 1 1 auto; }

.site-nav-link,
.site-lang,
.site-footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .12s ease;
}

.site-nav-link:hover,
.site-lang:hover,
.site-footer-link:hover { color: var(--text-primary); }

/* The current page is named, not merely underlined: weight and colour carry it. */
.site-nav-link[aria-current='page'] { color: var(--text-primary); font-weight: 700; }

.site-header-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

.site-signin {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--navy-800);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .12s ease;
}
.site-signin:hover { background: var(--neutral-900); }

/* ---------------------------------------------------------------- type */

/* No top padding: a hero runs flush to the header. Pages without one space their own head. */
.site-main { padding-block: 0 96px; }
.site-article { max-width: 68ch; }

.site-page-head { padding-top: 72px; margin-bottom: 56px; }

/* The one coral mark on a page — above the opening answer, never repeated per heading. */
.site-rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--coral-500);
  margin-bottom: 28px;
}

.site-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 20ch;
}

/*
 * The opening answer is the page's hero. It is set larger than the body because a model lifting it
 * alone must find the whole claim, and because a reader deciding whether to stay reads this first.
 */
.site-lede {
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  max-width: 58ch;
  color: var(--text-primary);
}

.site-body {
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
  color: var(--neutral-600);
}

.site-section { margin-top: 48px; }

.site-question {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  max-width: 34ch;
}

/* ---------------------------------------------------------------- the four steps */

/*
 * Hairline-separated rows, not a grid of identical cards: the four steps are a sequence, and a
 * sequence reads down a column. The numerals are quiet — they mark order, they are not decoration.
 */
.site-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-default);
}

.site-step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-default);
}

.site-step-index {
  flex: 0 0 auto;
  width: 32px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  /* neutral-400 measured 2.3:1 on the page colour — too faint for a numeral a reader follows. */
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}

.site-step-text { flex: 1 1 auto; }

.site-step-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

/* ---------------------------------------------------------------- links out */

.site-next { list-style: none; margin: 0; padding: 0; }
.site-next li { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.site-next a {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--coral-500);
  padding-bottom: 2px;
}
.site-next a:hover { color: var(--coral-500); }

/* ---------------------------------------------------------------- language notice */

.site-lang-notice {
  background: var(--navy-800);
  color: #fff;
  font-size: 13px;
}
.site-lang-notice-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 10px;
}
.site-lang-notice-action { color: #fff; font-weight: 700; }
.site-lang-notice-dismiss {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.site-lang-notice-dismiss:hover { color: #fff; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border-default);
  padding-block: 40px 56px;
  margin-top: 24px;
}
.site-footer-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 20px;
  max-width: 56ch;
}
.site-footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer-meta { font-size: 12px; color: var(--text-tertiary); margin: 20px 0 0; }

/* ---------------------------------------------------------------- focus, motion, narrow */

/* No border-radius here: it outranks .site-signin and .site-skip and would square off their
   design-system 8px corners on focus. Browsers follow the element's own radius when drawing an
   outline, so the declaration bought nothing and broke two components. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (max-width: 720px) {
  .site-main { padding-block: 0 64px; }
  .site-page-head { padding-top: 48px; }
  .site-header-inner { gap: 12px 18px; min-height: 0; }
  /*
   * One row, scrolled sideways if it must be — never wrapped.
   *
   * Wrapping made the header's height depend on the exact width of five words, and those five words
   * are a fraction wider once the brand face swaps in than in the fallback. At phone widths that was
   * enough to tip the nav from one row to two, growing the header by 35px and shoving the whole page
   * down after first paint: a measured 0.38 cumulative layout shift, the site's worst number by far.
   * A metric-matched fallback cannot save this — a wrap flips on a single pixel. Not wrapping can.
   */
  .site-nav {
    gap: 18px;
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-link { white-space: nowrap; }
  .site-header-actions { margin-left: auto; gap: 14px; }
  .site-page-head { margin-bottom: 40px; }
  .site-title { font-size: 32px; max-width: none; }
  .site-lede { font-size: 18px; }
  .site-step { gap: 16px; padding: 22px 0; }
  .site-step-index { width: 24px; font-size: 20px; }
}

/* ---------------------------------------------------------------- tables and lists */

/* The scorecard page is a reference, so it is given more room than a prose page. */
.site-article-wide { max-width: 860px; }

/*
 * Tables, not prose, for anything comparative: a model extracts a table cleanly and mangles a
 * comparison hidden inside a paragraph. The wrapper is the only thing on the site allowed to scroll
 * sideways, so a wide table survives 400px without the page itself overflowing.
 */
.site-table-wrap { overflow-x: auto; margin: 24px 0 0; -webkit-overflow-scrolling: touch; }

.site-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}

.site-table th,
.site-table td {
  border-bottom: 1px solid var(--border-default);
  padding: 12px 16px 12px 0;
  vertical-align: top;
}

.site-table thead th {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom-color: var(--text-primary);
  white-space: nowrap;
}

.site-table tbody th { font-weight: 700; color: var(--text-primary); }
.site-table tbody td { color: var(--neutral-600); }
.site-table tbody tr:last-child th,
.site-table tbody tr:last-child td { border-bottom: 0; }

.site-deflist { margin: 24px 0 0; }
.site-deflist-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-default);
}
.site-deflist-row dt { font-size: 18px; font-weight: 700; }
.site-deflist-row dd { margin: 0; font-size: 18px; line-height: 1.6; color: var(--neutral-600); }

.site-bands { list-style: none; margin: 24px 0 0; padding: 0; }
.site-bands li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-default);
}
.site-band-name { font-size: 18px; font-weight: 700; }
.site-band-body { font-size: 18px; color: var(--neutral-600); }

@media (max-width: 720px) {
  .site-deflist-row,
  .site-bands li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------------------------------------------------------------- faq */

.site-faq { border-top: 1px solid var(--border-default); }
.site-faq-item { padding: 28px 0; border-bottom: 1px solid var(--border-default); }
.site-faq-more { margin: 12px 0 0; }
.site-faq-more a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 2px;
}
.site-faq-more a:hover { color: var(--text-primary); border-bottom-color: var(--coral-500); }

/* ---------------------------------------------------------------- home */

.site-home-head { padding-top: 72px; margin-bottom: 56px; }

/*
 * The top of the design system's ramp, used on this page and nowhere else. It is the site's one
 * bold moment; --gradient-brand is already spent on the application sidebar and is not borrowed.
 */
.site-hero {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 16ch;
}

.site-routes { border-top: 1px solid var(--border-default); }
.site-route { padding: 32px 0; border-bottom: 1px solid var(--border-default); }
.site-route-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.site-route-cta { margin: 14px 0 0; }
.site-route-cta a {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--coral-500);
  padding-bottom: 2px;
}
.site-route-cta a:hover { color: var(--coral-500); }

@media (max-width: 720px) {
  .site-hero { font-size: 32px; max-width: none; }
  .site-home-head { margin-bottom: 40px; }
}

/* ================================================================ photography ============== */

.site-photo { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- hero */

.site-hero-block { margin-bottom: 56px; }

.site-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  max-height: 68vh;
  overflow: hidden;
  background: var(--neutral-200);
}

.site-hero-media .site-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/*
 * A gradient scrim, never a solid capsule — the design system's rule for text over imagery. It is
 * strong enough at the foot to hold white ExtraBold type at AA contrast over a sunlit photograph.
 */
.site-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 25, 39, 0.12) 0%, rgba(17, 25, 39, 0.06) 38%, rgba(17, 25, 39, 0.74) 100%);
}

.site-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding-block: 0 36px; }

.site-hero-title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 17ch;
}

.site-hero-below { padding-top: 32px; }

/* ---------------------------------------------------------------- slideshow */

.site-slideshow { margin: 72px 0; }

.site-slides-viewport {
  margin-top: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-slides-viewport::-webkit-scrollbar { display: none; }

.site-slides {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 24px;
  list-style: none;
}

.site-slide {
  position: relative;
  flex: 0 0 min(880px, 86vw);
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--neutral-200);
  box-shadow: 0 1px 6px rgba(28, 25, 23, 0.05);
}

.site-slide .site-photo { aspect-ratio: 1672 / 941; object-fit: cover; }

.site-slide-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 24px 20px;
  background: linear-gradient(180deg, rgba(17, 25, 39, 0) 0%, rgba(17, 25, 39, 0.78) 100%);
}

.site-slide-line {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 34ch;
}

.site-slides-controls { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

.site-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9999px;
  background: var(--neutral-200);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: filter .12s ease;
}
.site-slide-btn:hover { filter: brightness(0.96); }

.site-slide-dots { display: flex; gap: 8px; align-items: center; }

/*
 * The visible mark is 8px, but the button is 24px square: WCAG 2.2 asks for a 24px target and a
 * row of 8px dots fails it. The mark is drawn as a pseudo-element so the hit area can be larger
 * than the thing you see.
 */
.site-slide-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.site-slide-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--neutral-400);
  transition: background-color .12s ease, width .15s ease;
}
.site-slide-dot.is-current::before { background: var(--coral-500); width: 20px; }

/* ---------------------------------------------------------------- the process flow */

.site-process { margin: 72px 0; }

.site-flow { position: relative; list-style: none; margin: 32px 0 0; padding: 0; }

/* The line the stages hang from. It draws downward once the section arrives. */
.site-flow::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-default);
  transform-origin: top;
}

.site-flow-step { position: relative; display: flex; gap: 20px; padding: 0 0 32px; }
.site-flow-step:last-child { padding-bottom: 0; }

.site-flow-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--surface-page);
  box-shadow: inset 0 0 0 2px var(--border-default);
}

.site-flow-index { font-size: 13px; font-weight: 700; color: var(--text-secondary); }

.site-flow-title { margin: 6px 0 8px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.site-flow-text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--neutral-600); max-width: 58ch; }

.site-flow-note { margin-top: 28px; }
.site-flow-note a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--coral-500);
  text-decoration: none;
  padding-bottom: 2px;
}
.site-flow-note a:hover { color: var(--coral-500); }

/*
 * Armed only by JavaScript. Without it every stage stays visible, which is the point: the diagram
 * is content, and the animation is decoration on top of it.
 */
.site-process[data-anim="armed"] .site-flow-step {
  opacity: 0;
  transform: translateY(14px);
}

.site-process[data-anim="in"] .site-flow-step {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease calc(var(--i, 0) * 130ms), transform .5s ease calc(var(--i, 0) * 130ms);
}

.site-process[data-anim="armed"] .site-flow::before { transform: scaleY(0); }
.site-process[data-anim="in"] .site-flow::before { transform: scaleY(1); transition: transform .9s ease .1s; }

/*
 * Generic reveal-on-scroll, same contract as .site-process above and driven by the same site.js
 * observer (it already queries `[data-process], [data-reveal]`): armed only by JavaScript, so a
 * reader with no JavaScript, a blocked script or reduced motion preferred always gets the finished
 * page, never an empty box. Used on Section, PullQuote and non-hero photographs — the page content
 * that was flat before, not the hero, which stays eager and untouched to protect LCP.
 */
[data-reveal][data-anim="armed"] { opacity: 0; transform: translateY(14px); }
[data-reveal][data-anim="in"] { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* ---------------------------------------------------------------- rewards */

.site-rewards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }

.site-rewards li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border-default);
  box-shadow: 0 1px 6px rgba(28, 25, 23, 0.05);
}

.site-reward-name { font-size: 18px; font-weight: 700; }
.site-reward-body { font-size: 18px; line-height: 1.6; color: var(--neutral-600); }

/* ---------------------------------------------------------------- pull quote */

.site-pullquote { margin: 56px 0; padding: 0 0 0 24px; border-left: 3px solid var(--coral-500); }

.site-pullquote-text {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 24ch;
}

.site-pullquote-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ---------------------------------------------------------------- ugc grid */

.site-ugc {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.site-ugc li { margin: 0; }

.site-ugc .site-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--neutral-200);
}

/* ---------------------------------------------------------------- a side photograph */

.site-aside-photo { margin: 40px 0; }
.site-aside-photo .site-photo { border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }
.site-aside-photo figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .site-hero-title { font-size: 40px; max-width: none; }
  .site-hero-media { max-height: none; aspect-ratio: 4 / 3; }
  .site-rewards li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  .site-hero-title { font-size: 32px; }
  .site-hero-text { padding-bottom: 24px; }
  .site-slides { padding: 0 16px; }
  .site-slide { flex-basis: 88vw; }
  .site-slide-line { font-size: 16px; }
  .site-pullquote-text { font-size: 20px; max-width: none; }
  .site-ugc { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .site-flow-step { gap: 14px; }
  .site-flow-title { font-size: 18px; }
  .site-flow-text, .site-reward-name, .site-reward-body { font-size: 16px; }
}

/* ---------------------------------------------------------------- welcome card */

/*
 * A corner card, never an interstitial. It sits over the page and displaces nothing, so it cannot
 * shift the layout — and Google's demotion of mobile pages that cover their content on arrival does
 * not apply to it.
 */
.site-welcome {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.10);
  animation: site-welcome-in .28s ease both;
}

.site-welcome-inner { padding: 20px; }

.site-welcome-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.site-welcome-body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--neutral-600);
}

.site-welcome-actions { display: flex; flex-direction: column; gap: 8px; }

.site-welcome-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--navy-800);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .12s ease;
}
.site-welcome-choice:hover { background: var(--neutral-900); }

/* The second route is the same weight of choice, so it is the same shape in a quieter colour. */
.site-welcome-choice + .site-welcome-choice {
  background: var(--neutral-200);
  color: var(--text-primary);
}
.site-welcome-choice + .site-welcome-choice:hover { background: var(--navy-100); }

.site-welcome-dismiss {
  display: block;
  margin: 14px auto 0;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.site-welcome-dismiss:hover { color: var(--text-primary); }

@keyframes site-welcome-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-welcome { animation: none; }
}

@media (max-width: 560px) {
  /* Full width along the bottom on a phone, still leaving the page itself visible above it. */
  .site-welcome { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .site-welcome-inner { padding: 16px; }
}