/* Generated by tooling/generate-design-tokens.php; do not edit.
 * Manifest SHA-256: 4bcf484a9c371020b4440bf00f0bbbda5ae2688b402954e61c96edf38bf56869
 */
:root {
  --cd-primitive-forest: #1F3D32;
  --cd-primitive-terracotta: #D9735B;
  --cd-primitive-sand: #EADCCB;
  --cd-primitive-cream: #FAF7F2;
  --cd-primitive-charcoal: #2E2E2E;
  --cd-primitive-white: #FFFDFA;
  --cd-primitive-surface-muted: #F1ECE5;
  --cd-primitive-border-subtle: #E4DED5;
  --cd-primitive-border-strong: #8F8A81;
  --cd-primitive-text-secondary: #625F59;
  --cd-primitive-text-muted: #6F6B65;
  --cd-primitive-sage: #A7B5A7;
  --cd-primitive-mist: #D9D6CF;
  --cd-primitive-forest-hover: #183128;
  --cd-primitive-forest-pressed: #12271F;
  --cd-primitive-clay-text: #9F4936;
  --cd-color-background-canvas: #FAF7F2;
  --cd-color-background-surface: #FFFDFA;
  --cd-color-background-subtle: #F1ECE5;
  --cd-color-background-brand-soft: #E8EEE8;
  --cd-color-background-brand-strong: #1F3D32;
  --cd-color-background-decorative-sand: #EADCCB;
  --cd-color-text-primary: #2E2E2E;
  --cd-color-text-secondary: #625F59;
  --cd-color-text-muted: #6F6B65;
  --cd-color-text-on-brand: #FAF7F2;
  --cd-color-text-link: #1F3D32;
  --cd-color-text-accent: #9F4936;
  --cd-color-text-disabled: #625F59;
  --cd-color-border-subtle: #E4DED5;
  --cd-color-border-control: #8F8A81;
  --cd-color-border-active: #1F3D32;
  --cd-color-border-error: #A83D36;
  --cd-color-action-primary: #1F3D32;
  --cd-color-action-primary-hover: #183128;
  --cd-color-action-primary-pressed: #12271F;
  --cd-color-action-primary-label: #FAF7F2;
  --cd-color-action-secondary: #F1ECE5;
  --cd-color-action-secondary-hover: #EADCCB;
  --cd-color-action-secondary-label: #2E2E2E;
  --cd-color-action-disabled: #D9D6CF;
  --cd-color-status-success-foreground: #1F3D32;
  --cd-color-status-success-background: #E8EEE8;
  --cd-color-status-warning-foreground: #885416;
  --cd-color-status-warning-background: #F8EBD6;
  --cd-color-status-error-foreground: #A83D36;
  --cd-color-status-error-background: #FAEAE6;
  --cd-color-status-info-foreground: #345B68;
  --cd-color-status-info-background: #EAF0F2;
  --cd-color-status-neutral-foreground: #625F59;
  --cd-color-status-neutral-background: #F1ECE5;
  --cd-color-focus-ring: #1F3D32;
  --cd-color-focus-separator: #FAF7F2;
  --cd-color-focus-on-dark: #FAF7F2;
  --cd-color-selection-foreground: #1F3D32;
  --cd-color-selection-background: #E8EEE8;
  --cd-color-chart-series1: #1F3D32;
  --cd-color-chart-series2: #9F4936;
  --cd-color-chart-series3: #345B68;
  --cd-color-chart-series4: #885416;
  --cd-color-chart-grid: #E4DED5;
  --cd-space-0: 0px;
  --cd-space-1: 4px;
  --cd-space-2: 8px;
  --cd-space-3: 12px;
  --cd-space-4: 16px;
  --cd-space-5: 24px;
  --cd-space-6: 32px;
  --cd-space-7: 48px;
  --cd-space-8: 64px;
  --cd-space-9: 80px;
  --cd-space-10: 96px;
  --cd-radius-small: 8px;
  --cd-radius-control: 12px;
  --cd-radius-card: 20px;
  --cd-radius-sheet: 24px;
  --cd-radius-pill: 999px;
  --cd-border-width-default: 1px;
  --cd-border-width-active: 2px;
  --cd-border-width-focus: 3px;
  --cd-size-touch-target: 48px;
  --cd-size-button-min-height: 48px;
  --cd-size-button-compact-min-height: 40px;
  --cd-size-field-min-height: 48px;
  --cd-size-badge-min-height: 28px;
  --cd-size-icon-inline: 16px;
  --cd-size-icon-control: 20px;
  --cd-size-icon-navigation: 24px;
  --cd-size-avatar-small: 32px;
  --cd-size-avatar-default: 40px;
  --cd-size-list-row-min-height: 72px;
  --cd-size-table-row-min-height: 56px;
  --cd-size-table-row-compact-min-height: 48px;
  --cd-size-table-row-two-line-min-height: 64px;
  --cd-size-sidebar-width: 240px;
  --cd-size-dialog-max-width: 480px;
  --cd-size-dialog-wide-max-width: 640px;
  --cd-layout-breakpoint-medium: 600px;
  --cd-layout-breakpoint-expanded: 960px;
  --cd-layout-breakpoint-wide: 1280px;
  --cd-layout-narrow-mobile-threshold: 360px;
  --cd-layout-mobile-gutter: 24px;
  --cd-layout-narrow-mobile-gutter: 16px;
  --cd-layout-grid-gap: 24px;
  --cd-layout-marketing-max-width: 1200px;
  --cd-layout-console-content-max-width: 1440px;
  --cd-layout-card-padding-mobile: 16px;
  --cd-layout-card-padding-desktop: 24px;
  --cd-typography-family-editorial: "Fraunces";
  --cd-typography-family-interface: "Inter";
  --cd-typography-fraunces-ui-soft: 30;
  --cd-typography-fraunces-ui-wonk: 0;
  --cd-typography-fraunces-marketing-soft: 50;
  --cd-typography-fraunces-marketing-wonk: 1;
  --cd-typography-scale-display-hero-font-family: "Fraunces";
  --cd-typography-scale-display-hero-font-weight: 600;
  --cd-typography-scale-display-hero-desktop-font-size: 56px;
  --cd-typography-scale-display-hero-desktop-line-height: 64px;
  --cd-typography-scale-display-hero-mobile-font-size: 36px;
  --cd-typography-scale-display-hero-mobile-line-height: 44px;
  --cd-typography-scale-display-hero-letter-spacing-em: -0.02em;
  --cd-typography-scale-display-hero-tabular-numbers: 0;
  --cd-typography-scale-heading-page-font-family: "Fraunces";
  --cd-typography-scale-heading-page-font-weight: 600;
  --cd-typography-scale-heading-page-desktop-font-size: 36px;
  --cd-typography-scale-heading-page-desktop-line-height: 44px;
  --cd-typography-scale-heading-page-mobile-font-size: 28px;
  --cd-typography-scale-heading-page-mobile-line-height: 36px;
  --cd-typography-scale-heading-page-letter-spacing-em: -0.01em;
  --cd-typography-scale-heading-page-tabular-numbers: 0;
  --cd-typography-scale-heading-section-font-family: "Fraunces";
  --cd-typography-scale-heading-section-font-weight: 600;
  --cd-typography-scale-heading-section-desktop-font-size: 24px;
  --cd-typography-scale-heading-section-desktop-line-height: 32px;
  --cd-typography-scale-heading-section-mobile-font-size: 22px;
  --cd-typography-scale-heading-section-mobile-line-height: 30px;
  --cd-typography-scale-heading-section-letter-spacing-em: 0em;
  --cd-typography-scale-heading-section-tabular-numbers: 0;
  --cd-typography-scale-heading-ui-font-family: "Inter";
  --cd-typography-scale-heading-ui-font-weight: 600;
  --cd-typography-scale-heading-ui-desktop-font-size: 18px;
  --cd-typography-scale-heading-ui-desktop-line-height: 26px;
  --cd-typography-scale-heading-ui-mobile-font-size: 18px;
  --cd-typography-scale-heading-ui-mobile-line-height: 26px;
  --cd-typography-scale-heading-ui-letter-spacing-em: 0em;
  --cd-typography-scale-heading-ui-tabular-numbers: 0;
  --cd-typography-scale-body-large-font-family: "Inter";
  --cd-typography-scale-body-large-font-weight: 400;
  --cd-typography-scale-body-large-desktop-font-size: 18px;
  --cd-typography-scale-body-large-desktop-line-height: 28px;
  --cd-typography-scale-body-large-mobile-font-size: 18px;
  --cd-typography-scale-body-large-mobile-line-height: 28px;
  --cd-typography-scale-body-large-letter-spacing-em: 0em;
  --cd-typography-scale-body-large-tabular-numbers: 0;
  --cd-typography-scale-body-default-font-family: "Inter";
  --cd-typography-scale-body-default-font-weight: 400;
  --cd-typography-scale-body-default-desktop-font-size: 16px;
  --cd-typography-scale-body-default-desktop-line-height: 24px;
  --cd-typography-scale-body-default-mobile-font-size: 16px;
  --cd-typography-scale-body-default-mobile-line-height: 24px;
  --cd-typography-scale-body-default-letter-spacing-em: 0em;
  --cd-typography-scale-body-default-tabular-numbers: 0;
  --cd-typography-scale-body-compact-font-family: "Inter";
  --cd-typography-scale-body-compact-font-weight: 400;
  --cd-typography-scale-body-compact-desktop-font-size: 14px;
  --cd-typography-scale-body-compact-desktop-line-height: 20px;
  --cd-typography-scale-body-compact-mobile-font-size: 14px;
  --cd-typography-scale-body-compact-mobile-line-height: 20px;
  --cd-typography-scale-body-compact-letter-spacing-em: 0em;
  --cd-typography-scale-body-compact-tabular-numbers: 0;
  --cd-typography-scale-label-default-font-family: "Inter";
  --cd-typography-scale-label-default-font-weight: 500;
  --cd-typography-scale-label-default-desktop-font-size: 14px;
  --cd-typography-scale-label-default-desktop-line-height: 20px;
  --cd-typography-scale-label-default-mobile-font-size: 14px;
  --cd-typography-scale-label-default-mobile-line-height: 20px;
  --cd-typography-scale-label-default-letter-spacing-em: 0em;
  --cd-typography-scale-label-default-tabular-numbers: 0;
  --cd-typography-scale-label-button-font-family: "Inter";
  --cd-typography-scale-label-button-font-weight: 600;
  --cd-typography-scale-label-button-desktop-font-size: 16px;
  --cd-typography-scale-label-button-desktop-line-height: 24px;
  --cd-typography-scale-label-button-mobile-font-size: 16px;
  --cd-typography-scale-label-button-mobile-line-height: 24px;
  --cd-typography-scale-label-button-letter-spacing-em: 0em;
  --cd-typography-scale-label-button-tabular-numbers: 0;
  --cd-typography-scale-label-badge-font-family: "Inter";
  --cd-typography-scale-label-badge-font-weight: 500;
  --cd-typography-scale-label-badge-desktop-font-size: 13px;
  --cd-typography-scale-label-badge-desktop-line-height: 18px;
  --cd-typography-scale-label-badge-mobile-font-size: 13px;
  --cd-typography-scale-label-badge-mobile-line-height: 18px;
  --cd-typography-scale-label-badge-letter-spacing-em: 0em;
  --cd-typography-scale-label-badge-tabular-numbers: 0;
  --cd-typography-scale-caption-font-family: "Inter";
  --cd-typography-scale-caption-font-weight: 400;
  --cd-typography-scale-caption-desktop-font-size: 12px;
  --cd-typography-scale-caption-desktop-line-height: 18px;
  --cd-typography-scale-caption-mobile-font-size: 12px;
  --cd-typography-scale-caption-mobile-line-height: 18px;
  --cd-typography-scale-caption-letter-spacing-em: 0em;
  --cd-typography-scale-caption-tabular-numbers: 0;
  --cd-typography-scale-label-eyebrow-font-family: "Inter";
  --cd-typography-scale-label-eyebrow-font-weight: 500;
  --cd-typography-scale-label-eyebrow-desktop-font-size: 12px;
  --cd-typography-scale-label-eyebrow-desktop-line-height: 18px;
  --cd-typography-scale-label-eyebrow-mobile-font-size: 12px;
  --cd-typography-scale-label-eyebrow-mobile-line-height: 18px;
  --cd-typography-scale-label-eyebrow-letter-spacing-em: 0.12em;
  --cd-typography-scale-label-eyebrow-tabular-numbers: 0;
  --cd-typography-scale-number-hero-font-family: "Inter";
  --cd-typography-scale-number-hero-font-weight: 600;
  --cd-typography-scale-number-hero-desktop-font-size: 40px;
  --cd-typography-scale-number-hero-desktop-line-height: 48px;
  --cd-typography-scale-number-hero-mobile-font-size: 36px;
  --cd-typography-scale-number-hero-mobile-line-height: 44px;
  --cd-typography-scale-number-hero-letter-spacing-em: -0.02em;
  --cd-typography-scale-number-hero-tabular-numbers: 1;
  --cd-typography-scale-number-card-font-family: "Inter";
  --cd-typography-scale-number-card-font-weight: 600;
  --cd-typography-scale-number-card-desktop-font-size: 28px;
  --cd-typography-scale-number-card-desktop-line-height: 36px;
  --cd-typography-scale-number-card-mobile-font-size: 28px;
  --cd-typography-scale-number-card-mobile-line-height: 36px;
  --cd-typography-scale-number-card-letter-spacing-em: -0.01em;
  --cd-typography-scale-number-card-tabular-numbers: 1;
  --cd-typography-scale-number-row-font-family: "Inter";
  --cd-typography-scale-number-row-font-weight: 600;
  --cd-typography-scale-number-row-desktop-font-size: 14px;
  --cd-typography-scale-number-row-desktop-line-height: 20px;
  --cd-typography-scale-number-row-mobile-font-size: 16px;
  --cd-typography-scale-number-row-mobile-line-height: 24px;
  --cd-typography-scale-number-row-letter-spacing-em: 0em;
  --cd-typography-scale-number-row-tabular-numbers: 1;
  --cd-motion-duration-ms-instant: 0ms;
  --cd-motion-duration-ms-fast: 120ms;
  --cd-motion-duration-ms-standard: 180ms;
  --cd-motion-duration-ms-overlay: 240ms;
  --cd-motion-duration-ms-exit: 160ms;
  --cd-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --cd-motion-reduce-nonessential-motion: 1;
  --cd-shadow-none: none;
  --cd-shadow-card-x: 0;
  --cd-shadow-card-y: 4;
  --cd-shadow-card-blur: 20;
  --cd-shadow-card-spread: 0;
  --cd-shadow-card-color: #1F3D32;
  --cd-shadow-card-opacity: 0.05;
  --cd-shadow-overlay-x: 0;
  --cd-shadow-overlay-y: 12;
  --cd-shadow-overlay-blur: 32;
  --cd-shadow-overlay-spread: 0;
  --cd-shadow-overlay-color: #1F3D32;
  --cd-shadow-overlay-opacity: 0.12;
  --cd-scrim-color: #2E2E2E;
  --cd-scrim-opacity: 0.36;
  --cd-z-index-base: 0;
  --cd-z-index-sticky: 10;
  --cd-z-index-dropdown: 20;
  --cd-z-index-popover: 30;
  --cd-z-index-modal-scrim: 40;
  --cd-z-index-modal: 50;
  --cd-z-index-toast: 60;
  --cd-z-index-tooltip: 70;
  --cd-accessibility-normal-text-minimum-contrast: 4.5;
  --cd-accessibility-large-text-minimum-contrast: 3;
  --cd-accessibility-meaningful-non-text-minimum-contrast: 3;
  --cd-accessibility-focus-width: 3px;
  --cd-accessibility-focus-offset: 2px;
  --cd-accessibility-support-text-scaling: 1;
  --cd-accessibility-status-requires-text: 1;
  --cd-theme-policy-default: "light";
  --cd-theme-policy-dark-mode: "requires separate design review; do not auto-invert";
}

/*
 * CrewDue public website (/, /privacy, /terms, /support, /delete-account).
 * Warm Editorial: docs/CrewDue_Design_System.md (§2–§8 colour, type, layout and shape;
 * §10.1 and §18 targets and focus). GET /site/public.css serves this file AFTER the generated
 * design token file (PublicAssets::stylesheet), so every --cd-* value comes from
 * design-system/crewdue/crewdue.tokens.generated.css and none is written here: this file holds
 * only semantic aliases and component rules. No build step, no @import, no third-party font,
 * no inline style (the page CSP is style-src 'self', font-src 'self'). Fonts are the
 * self-hosted licensed Inter and Fraunces from /brand/fonts.
 * Light only: the design system's dark mode needs its own review, so nothing is inverted.
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/brand/fonts/Inter-Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/brand/fonts/Fraunces-Variable.ttf') format('truetype');
}

:root {
    color-scheme: light;

    /* Public aliases. */
    --ks-canvas: var(--cd-color-background-canvas);
    --ks-surface: var(--cd-color-background-surface);
    --ks-surface-sunken: var(--cd-color-background-subtle);
    --ks-border-subtle: var(--cd-color-border-subtle);
    --ks-border-strong: var(--cd-color-border-control);
    --ks-ink: var(--cd-color-text-primary);
    --ks-ink-muted: var(--cd-color-text-secondary);
    --ks-link: var(--cd-color-text-link);
    --ks-accent-text: var(--cd-color-text-accent);
    --ks-primary: var(--cd-color-action-primary);
    --ks-primary-hover: var(--cd-color-action-primary-hover);
    --ks-focus-ring: var(--cd-color-focus-ring);

    --ks-font: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ks-font-editorial: "Fraunces", Georgia, "Times New Roman", serif;
    --ks-radius-control: var(--cd-radius-control);
    --ks-radius-card: var(--cd-radius-card);
    --ks-target: var(--cd-size-touch-target);
    --ks-gutter: var(--cd-layout-mobile-gutter);
    --ks-section-gap: 48px;
}

/* Very narrow layouts use the narrow gutter (DS §7). */
@media (max-width: 359px) {
    :root { --ks-gutter: var(--cd-layout-narrow-mobile-gutter); }
}

@media (min-width: 768px) {
    :root { --ks-section-gap: 64px; }
}

@media (min-width: 1024px) {
    :root { --ks-gutter: 32px; }
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--cd-color-action-primary) 12%, transparent);
}

/* Rubber-band suppression for mouse and trackpad only; touch keeps pull-to-refresh. */
@media (pointer: fine) {
    html { overscroll-behavior: none; }
}

body {
    margin: 0;
    background: var(--ks-canvas);
    color: var(--ks-ink);
    font-family: var(--ks-font);
    font-size: var(--cd-typography-scale-body-default-mobile-font-size);
    line-height: var(--cd-typography-scale-body-default-mobile-line-height);
    overflow-wrap: break-word;
}

::selection {
    background: var(--cd-color-selection-background);
    color: var(--cd-color-selection-foreground);
}

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

a {
    color: var(--ks-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 120ms ease;
}
a:hover { color: var(--ks-primary-hover); text-decoration-thickness: 2px; }

/* DS focus: a 3 px forest ring with 2 px separation. */
a:focus-visible, summary:focus-visible {
    outline: var(--cd-accessibility-focus-width) solid var(--ks-focus-ring);
    outline-offset: var(--cd-accessibility-focus-offset);
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: var(--ks-gutter);
    top: -100px;
    min-height: var(--ks-target);
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    background: var(--ks-surface);
    color: var(--ks-link);
    border: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-control);
    z-index: 10;
}
.skip-link:focus { top: 8px; }

.ks-wrap {
    width: 100%;
    max-width: var(--cd-layout-marketing-max-width);
    margin: 0 auto;
    padding: 0 var(--ks-gutter);
}

/* Decorative icons: size only; the shared icon partial draws its own paths in currentColor. */
.ks-icon {
    width: var(--cd-size-icon-control);
    height: var(--cd-size-icon-control);
    flex: none;
}

/* Header */
.site-header {
    background: var(--ks-canvas);
    border-bottom: 1px solid var(--ks-border-subtle);
}
.site-header .ks-wrap {
    min-height: 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 8px;
}
.wordmark {
    font-family: var(--ks-font-editorial);
    font-size: var(--cd-typography-scale-heading-section-mobile-font-size);
    line-height: var(--cd-typography-scale-heading-section-mobile-line-height);
    font-variation-settings: 'SOFT' 30, 'WONK' 0;
    font-weight: 600;
    color: var(--ks-ink);
    text-decoration: none;
    min-height: var(--ks-target);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
/* The transparent two-form vector sits directly on the canvas. */
.brand-mark {
    flex: 0 0 44px;
}
.wordmark:hover { color: var(--ks-ink); }
.wordmark:hover span { text-decoration: underline; text-underline-offset: 4px; }
.balance-phrase {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.balance-phrase .ks-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ks-primary);
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ks-target);
    min-width: var(--ks-target);
    padding: 0 12px;
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--ks-radius-control);
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav .nav-anchor { display: none; }
@media (min-width: 768px) {
    .site-nav .nav-anchor { display: list-item; }
}

/* Sections */
main { display: block; }
/* In-page anchors (#balances, #privacy, #faq) land with breathing room above the heading. */
section[id] { scroll-margin-top: 16px; }
.section { padding: var(--ks-section-gap) 0 0; }
.section:last-child { padding-bottom: var(--ks-section-gap); }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ks-ink); text-wrap: balance; }

/* Editorial headings: Fraunces 600 with the UI axes (SOFT 30, WONK 0); the hero uses the
   marketing display axes (SOFT 50, WONK 1). Card titles and FAQ questions stay Inter. */
h1, h2 {
    font-family: var(--ks-font-editorial);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 30, "WONK" 0;
}
h1 {
    font-size: var(--cd-typography-scale-heading-page-mobile-font-size);
    line-height: var(--cd-typography-scale-heading-page-mobile-line-height);
    letter-spacing: var(--cd-typography-scale-heading-page-letter-spacing-em);
}
h2 {
    font-size: var(--cd-typography-scale-heading-section-mobile-font-size);
    line-height: var(--cd-typography-scale-heading-section-mobile-line-height);
}
h3 {
    font-family: var(--ks-font);
    font-size: var(--cd-typography-scale-heading-ui-mobile-font-size);
    line-height: var(--cd-typography-scale-heading-ui-mobile-line-height);
}
h1.hero-title {
    font-size: var(--cd-typography-scale-display-hero-mobile-font-size);
    line-height: var(--cd-typography-scale-display-hero-mobile-line-height);
    letter-spacing: var(--cd-typography-scale-display-hero-letter-spacing-em);
    font-variation-settings: "SOFT" 50, "WONK" 1;
}
@media (min-width: 1024px) {
    h1 {
        font-size: var(--cd-typography-scale-heading-page-desktop-font-size);
        line-height: var(--cd-typography-scale-heading-page-desktop-line-height);
    }
    h2 {
        font-size: var(--cd-typography-scale-heading-section-desktop-font-size);
        line-height: var(--cd-typography-scale-heading-section-desktop-line-height);
    }
    h1.hero-title {
        font-size: var(--cd-typography-scale-display-hero-desktop-font-size);
        line-height: var(--cd-typography-scale-display-hero-desktop-line-height);
    }
}

p { margin: 0; }
.lead {
    color: var(--ks-ink-muted);
    max-width: 56ch;
    margin-top: 16px;
    font-size: var(--cd-typography-scale-body-large-mobile-font-size);
    line-height: var(--cd-typography-scale-body-large-mobile-line-height);
}
.section-lead { color: var(--ks-ink-muted); max-width: 72ch; margin-top: 8px; }
.muted { color: var(--ks-ink-muted); }
.small {
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
}
/* Occasional marketing eyebrow (DS §6): tracked uppercase in the accessible clay accent. */
.eyebrow {
    font-size: var(--cd-typography-scale-label-eyebrow-mobile-font-size);
    line-height: var(--cd-typography-scale-label-eyebrow-mobile-line-height);
    letter-spacing: var(--cd-typography-scale-label-eyebrow-letter-spacing-em);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ks-accent-text);
}

/* Hero */
.hero { padding-top: 48px; }
.hero h1 { margin-top: 12px; }
.hero-actions { margin-top: 24px; display: grid; gap: 8px; justify-items: start; }
.text-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ks-target);
    font-weight: 600;
}

/* Cards and grids */
.grid { display: grid; gap: 16px; margin-top: 24px; padding: 0; list-style: none; }
@media (min-width: 768px) {
    .grid { gap: var(--cd-layout-grid-gap); }
    .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* DS card: white surface, 1 px subtle border (border or shadow, not both), 20 px radius, 24 px interior. */
.card {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-card);
    padding: var(--cd-layout-card-padding-desktop);
    display: grid;
    gap: 8px;
    align-content: start;
}
.card-title { display: flex; gap: 12px; align-items: center; }
.card-title .ks-icon { color: var(--ks-primary); }
.card p:not(.ks-money) {
    color: var(--ks-ink-muted);
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
}
.card .ks-money { color: var(--ks-ink); }

/* Amounts stay Inter with tabular figures (DS §6 financial typography). */
.ks-money {
    font-family: var(--ks-font);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum", "lnum";
    font-weight: 600;
    font-size: var(--cd-typography-scale-number-row-mobile-font-size);
    line-height: var(--cd-typography-scale-number-row-mobile-line-height);
}

.note {
    margin-top: 16px;
    color: var(--ks-ink-muted);
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
    max-width: 72ch;
}

/* FAQ: native details; each summary is a 48 px target (24 px line + 24 px padding, and a minimum). */
.faq { margin-top: 24px; max-width: 72ch; display: grid; gap: 8px; }
.faq details {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border-subtle);
    border-radius: var(--ks-radius-control);
}
.faq summary {
    min-height: var(--ks-target);
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-radius: var(--ks-radius-control);
}
/* The question is one flex item (its inline brand span stays in the sentence); the chevron is the other. */
.faq summary .faq-question { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ks-primary); }
.faq summary:hover .ks-icon { color: currentColor; }
.faq summary .ks-icon { transition: transform 120ms ease, color 120ms ease; color: var(--ks-ink-muted); }
.faq details[open] summary .ks-icon { transform: rotate(180deg); }
.faq details > div { padding: 0 16px 16px; color: var(--ks-ink-muted); }

/* Footer */
.site-footer {
    margin-top: var(--ks-section-gap);
    border-top: 1px solid var(--ks-border-subtle);
    padding: 24px 0 32px;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}
.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ks-target);
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
}
.site-footer .identity {
    margin-top: 8px;
    color: var(--ks-ink-muted);
    font-size: var(--cd-typography-scale-body-compact-mobile-font-size);
    line-height: var(--cd-typography-scale-body-compact-mobile-line-height);
}

/* Legal and information pages: a Fraunces page title; the dense document sections use the Inter UI heading. */
.doc { padding-top: 48px; max-width: 72ch; }
.doc h1 { margin-bottom: 8px; }
.doc h2 {
    margin-top: 32px;
    font-family: var(--ks-font);
    font-variation-settings: normal;
    font-size: var(--cd-typography-scale-heading-ui-mobile-font-size);
    line-height: var(--cd-typography-scale-heading-ui-mobile-line-height);
}
.doc p, .doc ul, .doc ol { margin: 12px 0 0; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li + li { margin-top: 8px; }
.doc p, .doc li { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

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