/*! Candidloans — generated by TPL Site Engine. Tokens first: every value below is a variable. */

:root {
  /* color · Brand */
  --color-brand: #2856FC;
  --color-brand-strong: #1E44C8;
  --color-brand-soft: var(--color-brand-50);
  --color-brand-contrast: #ffffff;
  --color-brand-tint: color-mix(in srgb, var(--color-brand) 8%, transparent);
  --color-brand-glow: color-mix(in srgb, var(--color-brand) 28%, transparent);
  --color-accent: #809BFF;
  --color-accent-strong: var(--color-accent-600);
  --color-accent-soft: var(--color-accent-50);
  --color-accent-contrast: #121212;
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-highlight: var(--color-accent);

  /* color · Brand ramp */
  --color-brand-50: #e7f5ff;
  --color-brand-100: #d3eaff;
  --color-brand-200: #b2d4ff;
  --color-brand-300: #8bb7ff;
  --color-brand-400: #6192ff;
  --color-brand-500: #4070ff;
  --color-brand-600: #2856fc;
  --color-brand-700: #1441d6;
  --color-brand-800: #0331ac;
  --color-brand-900: #002483;
  --color-brand-950: #00104b;

  /* color · Accent ramp */
  --color-accent-50: #eef5ff;
  --color-accent-100: #dfeaff;
  --color-accent-200: #c5d6ff;
  --color-accent-300: #a5bcff;
  --color-accent-400: #809bff;
  --color-accent-500: #617ee4;
  --color-accent-600: #4a67c8;
  --color-accent-700: #3651a6;
  --color-accent-800: #263e85;
  --color-accent-900: #192e65;
  --color-accent-950: #081638;

  /* color · Neutral ramp */
  --color-neutral-50: #f2f6fe;
  --color-neutral-100: #e8ebf4;
  --color-neutral-200: #d6d9e2;
  --color-neutral-300: #bec2ca;
  --color-neutral-400: #9fa3aa;
  --color-neutral-500: #83868e;
  --color-neutral-600: #6c6f76;
  --color-neutral-700: #555960;
  --color-neutral-800: #41444b;
  --color-neutral-900: #2f3239;
  --color-neutral-950: #16191e;

  /* color · Status */
  --color-success: #11b882;
  --color-success-soft: rgba(17,184,130,.1);
  --color-warning: #f5a524;
  --color-warning-soft: rgba(245,165,36,.12);
  --color-danger: #e5484d;
  --color-danger-soft: rgba(229,72,77,.1);
  --color-info: #2f86e0;
  --color-info-soft: rgba(47,134,224,.1);

  /* color · Ink & surfaces */
  --color-ink: #0E1730;
  --color-ink-90: color-mix(in srgb, var(--color-ink) 90%, transparent);
  --color-ink-80: color-mix(in srgb, var(--color-ink) 80%, transparent);
  --color-ink-70: color-mix(in srgb, var(--color-ink) 70%, transparent);
  --color-ink-60: color-mix(in srgb, var(--color-ink) 60%, transparent);
  --color-ink-50: color-mix(in srgb, var(--color-ink) 50%, transparent);
  --color-ink-40: color-mix(in srgb, var(--color-ink) 40%, transparent);
  --color-ink-30: color-mix(in srgb, var(--color-ink) 30%, transparent);
  --color-ink-20: color-mix(in srgb, var(--color-ink) 20%, transparent);
  --color-ink-12: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --color-ink-10: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --color-ink-06: color-mix(in srgb, var(--color-ink) 6%, transparent);
  --color-ink-05: color-mix(in srgb, var(--color-ink) 5%, transparent);
  --color-ink-03: color-mix(in srgb, var(--color-ink) 3%, transparent);
  --color-white: #ffffff;
  --color-black: #000000;
  --color-w-90: rgba(255,255,255,.9);
  --color-w-80: rgba(255,255,255,.8);
  --color-w-70: rgba(255,255,255,.7);
  --color-w-60: rgba(255,255,255,.6);
  --color-w-50: rgba(255,255,255,.5);
  --color-w-35: rgba(255,255,255,.35);
  --color-w-25: rgba(255,255,255,.25);
  --color-w-15: rgba(255,255,255,.15);
  --color-w-10: rgba(255,255,255,.1);
  --color-w-06: rgba(255,255,255,.06);
  --color-w-04: rgba(255,255,255,.04);
  --surface: #ffffff;
  --surface-2: #F4F6FB;
  --surface-3: var(--color-neutral-100);
  --surface-card: #ffffff;
  --surface-card-2: var(--color-neutral-50);
  --surface-inverse: #1A2D56;
  --surface-inverse-2: #0F1B38;
  --surface-inverse-3: #1d232d;
  --surface-brand: var(--color-brand);
  --surface-glass: rgba(255,255,255,.12);
  --surface-glass-strong: rgba(255,255,255,.22);
  --surface-overlay: rgba(8,12,18,.62);

  /* color · Text roles */
  --text-heading: var(--color-ink);
  --text-body: var(--color-ink-70);
  --text-muted: #66748F;
  --text-subtle: var(--color-ink-40);
  --text-link: var(--color-brand);
  --text-link-hover: var(--color-brand-strong);
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: var(--color-w-70);
  --text-on-inverse-subtle: var(--color-w-50);
  --text-on-brand: var(--color-brand-contrast);
  --text-eyebrow: var(--color-brand);

  /* border · Borders */
  --border-color: #E7EBF3;
  --border-color-strong: var(--color-ink-20);
  --border-color-subtle: var(--color-ink-06);
  --border-color-brand: var(--color-brand);
  --border-color-inverse: var(--color-w-15);
  --border-color-inverse-strong: var(--color-w-25);
  --border-color-focus: var(--color-brand);
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-thick: 3px;
  --hairline: 1px;
  --focus-ring-width: 3px;
  --border: var(--border-width) solid var(--border-color);
  --border-subtle: var(--border-width) solid var(--border-color-subtle);
  --border-strong: var(--border-width) solid var(--border-color-strong);
  --border-inverse: var(--border-width) solid var(--border-color-inverse);
  --focus-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--color-brand) 35%, transparent);

  /* gradient · Gradients */
  --grad-brand: linear-gradient(190deg,#809BFF 0%,#2856FC 100%);
  --grad-brand-r: linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-600) 100%);
  --grad-brand-diag: linear-gradient(135deg, var(--color-brand-400) 0%, var(--color-brand-700) 100%);
  --grad-accent: linear-gradient(180deg, var(--color-accent-400) 0%, var(--color-accent-600) 100%);
  --grad-cta: var(--grad-brand);
  --grad-card: linear-gradient(234deg, var(--color-brand-400) 0%, var(--color-brand-600) 100%);
  --grad-panel: linear-gradient(225deg,#1A2D56 0%,#0F1B38 100%);
  --grad-footer: var(--grad-panel);
  --grad-hero-veil: linear-gradient(180deg, rgba(8,12,18,.72) 0%, rgba(8,12,18,.35) 45%, rgba(8,12,18,.78) 100%);
  --grad-hero-scrim: linear-gradient(90deg, rgba(8,12,18,.85) 0%, rgba(8,12,18,.25) 60%, rgba(8,12,18,0) 100%);
  --grad-mesh: radial-gradient(90% 130% at -6% 124%, color-mix(in srgb, var(--color-accent) 60%, transparent) 0%, transparent 52%), radial-gradient(65% 85% at 100% 2%, color-mix(in srgb, var(--color-brand-300) 45%, transparent) 0%, transparent 55%), var(--grad-brand-diag);
  --grad-sheen: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.42) 50%, transparent 75%);
  --grad-fade-down: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  --grad-text: linear-gradient(92deg, var(--color-ink) 0%, var(--color-brand) 100%);

  /* font · Fonts */
  --font-body: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-eyebrow: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-accent: var(--font-display);

  /* font · Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --fw-heading: var(--fw-bold);
  --fw-display: var(--fw-extrabold);
  --fw-body: var(--fw-regular);
  --fw-btn: var(--fw-semibold);
  --fw-eyebrow: var(--fw-semibold);

  /* typography · Type scale */
  --fs-3xs: clamp(9px, .55vw + 7px, 10px);
  --fs-2xs: clamp(10px, .6vw + 8px, 11px);
  --fs-xs: clamp(11px, .7vw + 9px, 12px);
  --fs-sm: clamp(12px, .8vw + 10px, 14px);
  --fs-base: 0.875rem;
  --fs-md: clamp(15px, 1vw + 12px, 18px);
  --fs-lg: clamp(17px, 1.2vw + 13px, 20px);
  --fs-xl: clamp(19px, 1.5vw + 14px, 24px);
  --fs-2xl: clamp(22px, 2vw + 15px, 30px);
  --fs-3xl: clamp(25px, 2.6vw + 16px, 36px);
  --fs-4xl: clamp(28px, 3.4vw + 16px, 44px);
  --fs-5xl: clamp(32px, 4.2vw + 16px, 54px);
  --fs-6xl: clamp(36px, 5.2vw + 16px, 66px);
  --fs-7xl: clamp(40px, 6.4vw + 16px, 80px);
  --fs-8xl: clamp(46px, 7.6vw + 16px, 96px);
  --fs-h1: var(--fs-5xl);
  --fs-h2: var(--fs-4xl);
  --fs-h3: var(--fs-xl);
  --fs-h4: var(--fs-lg);
  --fs-h5: var(--fs-md);
  --fs-h6: var(--fs-base);
  --fs-lead: var(--fs-lg);
  --fs-body: var(--fs-base);
  --fs-small: var(--fs-sm);
  --fs-legal: var(--fs-xs);
  --fs-eyebrow: var(--fs-xs);
  --fs-btn: var(--fs-base);
  --fs-nav: var(--fs-sm);
  --fs-quote: var(--fs-xl);
  --fs-stat: var(--fs-4xl);

  /* typography · Line height */
  --lh-none: 1;
  --lh-tight: 1.08;
  --lh-snug: 1.18;
  --lh-heading: 1.14;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;
  --lh-loose: 1.78;
  --lh-legal: 1.68;

  /* typography · Letter spacing */
  --ls-tighter: -.04em;
  --ls-tight: -.02em;
  --ls-heading: -.02em;
  --ls-normal: 0;
  --ls-wide: .02em;
  --ls-wider: .06em;
  --ls-eyebrow: .1em;

  /* typography · Text transform */
  --tt-eyebrow: uppercase;
  --tt-btn: none;
  --tt-heading: none;

  /* typography · Measure */
  --measure-tight: 38ch;
  --measure: 62ch;
  --measure-wide: 78ch;
  --measure-hero: 20ch;
  --measure-head: 26ch;

  /* space · Spacing */
  --space-0: 0px;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 16px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* layout · Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-inner: 1120px;
  --container-narrow: 820px;
  --container-prose: 760px;
  --gutter: 40px;
  --gutter-lg: clamp(10px, 5vw, 80px);
  --section-pad-y: clamp(32px, 6vw, 110px);
  --section-pad-y-sm: clamp(22px, 4vw, 64px);
  --gutter-mobile: 10px;
  --section-pad-y-mobile: 28px;
  --section-pad-y-sm-mobile: 20px;
  --section-pad-y-lg-mobile: 36px;
  --section-pad-y-lg: clamp(40px, 8vw, 150px);
  --section-gap: clamp(24px, 3vw, 48px);
  --grid-gap: clamp(16px, 2vw, 28px);
  --grid-gap-lg: clamp(20px, 3vw, 40px);
  --stack-gap: var(--space-4);
  --header-h: 78px;
  --header-h-mobile: 64px;
  --hero-min-h: clamp(520px, 78vh, 780px);
  --hero-pad-top: clamp(24px, 4vw, 64px);
  --hero-pad-top-mobile: 24px;
  --hero-media-ratio: 4 / 3;
  --card-media-ratio: 16 / 10;
  --avatar-size: 48px;
  --icon-size: 24px;
  --icon-size-sm: 18px;
  --icon-size-lg: 32px;
  --logo-h: 36px;
  --logo-h-mobile: 30px;

  /* layout · Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1219px;
  --bp-xl: 1440px;
  --bp-sm-up: 769px;
  --bp-md-up: 1025px;

  /* radius · Radii */
  --radius-none: 0px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 25px;
  --radius-xl: 35px;
  --radius-2xl: 50px;
  --radius-3xl: 64px;
  --radius-pill: 100px;
  --radius-circle: 50%;
  --radius: 15px;
  --radius-card: 25px;
  --radius-card-inner: var(--radius-md);
  --radius-btn: var(--radius-pill);
  --radius-input: var(--radius-md);
  --radius-icon: var(--radius-sm);
  --radius-badge: var(--radius-pill);
  --radius-media: var(--radius-lg);
  --radius-panel: 35px;
  --radius-modal: var(--radius-lg);

  /* shadow · Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(16,20,28,.05);
  --shadow-sm: 0 4px 14px rgba(16,20,28,.06);
  --shadow-md: 0 10px 30px rgba(16,20,28,.08);
  --shadow-lg: 0 24px 70px rgba(26,45,86,.12);
  --shadow-xl: 0 28px 70px rgba(16,20,28,.16);
  --shadow-2xl: 0 40px 100px rgba(16,20,28,.22);
  --shadow-card: 0 10px 40px rgba(26,45,86,.08);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-hero: 0 24px 60px rgba(8,12,18,.24);
  --shadow-header: 0 8px 26px rgba(16,20,28,.07);
  --shadow-btn: 0 10px 24px color-mix(in srgb, var(--color-brand) 26%, transparent);
  --shadow-btn-hover: 0 14px 34px color-mix(in srgb, var(--color-brand) 34%, transparent);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-glow: 0 0 0 8px color-mix(in srgb, var(--color-brand) 12%, transparent);
  --shadow-modal: 0 40px 120px rgba(0,0,0,.35);

  /* motion · Motion */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-slower: 600ms;
  --dur-ambient: 9s;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-linear: linear;
  --transition: all var(--dur-base) var(--ease-out);
  --transition-color: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  --transition-transform: transform var(--dur-base) var(--ease-out);
  --lift: translateY(-3px);
  --lift-lg: translateY(-6px);
  --anim-rise: 14px;
  --anim-float-y: 10px;
  --anim-nudge-x: 4px;
  --anim-scale-from: .96;

  /* opacity · Opacity */
  --op-0: 0;
  --op-10: .1;
  --op-20: .2;
  --op-40: .4;
  --op-60: .6;
  --op-80: .8;
  --op-100: 1;
  --op-veil: .62;
  --op-pattern: .18;
  --op-disabled: .45;

  /* z · Z-index */
  --z-base: 0;
  --z-decor: 1;
  --z-content: 2;
  --z-sticky: 50;
  --z-header: 100;
  /* the overlay has to sit under the panel it dims, otherwise it covers the menu */
  --z-overlay: 150;
  --z-menu: 190;
  --z-modal: 200;
  --z-toast: 300;
  --z-editor: 9000;

  /* component · Button */
  --btn-h: 52px;
  --btn-h-sm: 42px;
  --btn-h-lg: 60px;
  --btn-pad-x: var(--space-7);
  --btn-pad-x-sm: var(--space-5);
  --btn-pad-x-lg: var(--space-9);
  --btn-gap: var(--space-2);
  --btn-radius: var(--radius-btn);
  --btn-border-width: 0px;
  --btn-icon-size: 18px;
  --btn-bg: var(--color-brand);
  --btn-bg-hover: var(--color-brand-strong);
  --btn-fg: var(--color-brand-contrast);
  --btn-border-color: transparent;
  --btn-secondary-bg: var(--surface-inverse);
  --btn-secondary-fg: var(--color-white);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--color-ink);
  --btn-ghost-border: var(--border-color);
  --btn-white-bg: var(--color-white);
  --btn-white-fg: var(--color-ink);
  --btn-bg-image: var(--grad-brand);
  --btn-shadow: var(--shadow-btn);
  --btn-shadow-hover: var(--shadow-btn-hover);
  --btn-transform-hover: var(--lift);
  --btn-sheen: 1;

  /* component · Badge & chip */
  --badge-bg: var(--color-brand-tint);
  --badge-fg: var(--color-brand);
  --badge-border-color: transparent;
  --badge-radius: var(--radius-badge);
  --badge-pad-x: var(--space-3-5);
  --badge-pad-y: var(--space-2);
  --badge-fs: var(--fs-eyebrow);
  --badge-inverse-bg: var(--color-w-10);
  --badge-inverse-fg: var(--color-white);
  --chip-bg: var(--surface-2);
  --chip-fg: var(--color-ink-70);
  --chip-border-color: var(--border-color);
  --chip-radius: var(--radius-pill);
  --chip-pad-x: var(--space-4);
  --chip-h: 38px;
  --chip-fs: var(--fs-sm);

  /* component · Card */
  --card-bg: var(--surface-card);
  --card-bg-alt: var(--surface-2);
  --card-bg-inverse: var(--surface-inverse);
  --card-bg-brand: var(--color-brand);
  --card-fg: var(--color-ink);
  --card-border-color: var(--border-color);
  --card-border-width: var(--border-width);
  --card-radius: var(--radius-card);
  --card-pad: clamp(20px, 2.4vw, 32px);
  --card-pad-sm: clamp(16px, 2vw, 24px);
  --card-pad-lg: clamp(26px, 3.2vw, 48px);
  --card-gap: var(--space-4);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);
  --card-transform-hover: var(--lift);

  /* component · Icon box */
  --ibox-size: 52px;
  --ibox-size-sm: 40px;
  --ibox-size-lg: 64px;
  --ibox-radius: var(--radius-icon);
  --ibox-bg: var(--color-brand-soft);
  --ibox-fg: var(--color-brand);
  --ibox-bg-inverse: var(--color-w-10);
  --ibox-fg-inverse: var(--color-white);
  --ibox-border-color: transparent;
  --ibox-icon-size: 24px;

  /* component · Logo */
  --logo-mark-size: 38px;
  --logo-mark-size-mobile: 32px;
  --logo-mark-radius: var(--radius-sm);
  --logo-mark-bg: var(--color-brand);
  --logo-mark-fg: var(--color-brand-contrast);
  --logo-mark-bg-image: none;
  --logo-mark-icon-color: var(--color-brand);
  --logo-mark-bare-size: 32px;
  --logo-mark-icon-size: 22px;
  --logo-mark-border-color: transparent;
  --logo-mark-shadow: none;
  --logo-text-fs: var(--fs-md);
  --logo-text-fw: var(--fw-bold);
  --logo-text-ls: var(--ls-tight);
  --logo-gap: var(--space-2-5);

  /* component · Header */
  --nav-bg: rgba(255,255,255,.9);
  --nav-bg-scrolled: var(--color-white);
  --nav-fg: var(--color-ink);
  --nav-fg-muted: var(--color-ink-70);
  --nav-fg-hover: var(--color-brand);
  --nav-border-color: var(--border-color-subtle);
  --nav-blur: 14px;
  --nav-shadow: var(--shadow-header);
  --nav-link-gap: var(--space-8);
  --nav-link-fs: var(--fs-nav);
  --nav-link-fw: var(--fw-medium);
  --nav-radius: 0px;
  --nav-inverse-bg: rgba(14,17,22,.72);
  --nav-inverse-fg: var(--color-white);
  --hamburger-w: 24px;
  --hamburger-bar-h: 2px;
  --mobile-menu-w: min(86vw, 360px);
  --mobile-menu-bg: var(--color-white);
  --mobile-menu-fg: var(--color-ink);

  /* component · Hero */
  --hero-bg: var(--surface);
  --hero-fg: var(--color-ink);
  --hero-fg-muted: color-mix(in srgb, var(--hero-fg) 72%, transparent);
  --hero-veil: var(--grad-hero-veil);
  --hero-radius: var(--radius-panel);
  --hero-pad: clamp(24px, 4vw, 64px);
  --hero-grid-gap: clamp(24px, 3.4vw, 56px);
  --hero-copy-w: minmax(0, 1.05fr);
  --hero-aside-w: minmax(0, .95fr);
  --hero-title-fs: var(--fs-h1);
  --hero-title-lh: var(--lh-tight);
  --hero-sub-fs: var(--fs-lead);
  --hero-pattern-color: var(--color-w-10);
  --hero-pattern-size: 48px;

  /* component · Pre-form */
  --preform-bg: var(--color-white);
  --preform-fg: var(--color-ink);
  --widget-heading-fs: clamp(17px, 2.2vw, 22px);
  --preform-gap: var(--space-5);
  --preform-divider-space: var(--space-3);
  --preform-foot-gap: var(--space-3);
  --amt-wrap-pad-y: 2px;
  --preform-radius: var(--radius-panel);
  --preform-pad: clamp(20px, 2.6vw, 32px);
  --preform-shadow: var(--shadow-hero);
  --preform-border-color: var(--border-color-subtle);
  --preform-max-w: 460px;
  --range-track-h: 10px;
  --range-track-bg: var(--color-ink-10);
  --range-fill: var(--grad-brand-r);
  --range-thumb-size: 28px;
  --range-thumb-bg: var(--color-white);
  --range-thumb-border: var(--color-brand);
  --range-thumb-shadow: var(--shadow-md);
  --quickpick-h: 46px;
  --quickpick-bg: var(--surface-2);
  --quickpick-bg-active: var(--color-brand);
  --quickpick-fg: var(--color-ink-70);
  --quickpick-fg-active: var(--color-brand-contrast);
  --quickpick-radius: var(--radius-md);

  /* component · Input */
  --input-h: 52px;
  --input-bg: var(--color-white);
  --input-fg: var(--color-ink);
  --input-placeholder: var(--color-ink-40);
  --input-border-color: var(--border-color);
  --input-border-color-focus: var(--color-brand);
  --input-radius: var(--radius-input);
  --input-pad-x: var(--space-4);
  --input-fs: var(--fs-base);
  --label-fs: var(--fs-sm);
  --label-fg: var(--color-ink-70);

  /* component · Section head */
  --sechead-gap: var(--space-4);
  --sechead-mb: clamp(28px, 3.4vw, 56px);
  --sechead-max-w: 720px;
  --sechead-align: center;
  --sechead-title-fs: var(--fs-h2);
  --sechead-sub-fs: var(--fs-md);
  --sechead-sub-color: var(--text-body);

  /* component · Steps */
  --step-num-size: 44px;
  --step-num-bg: var(--color-brand);
  --step-num-fg: var(--color-brand-contrast);
  --step-num-radius: var(--radius-circle);
  --step-num-fs: var(--fs-lg);
  --step-connector-color: var(--border-color);
  --step-connector-width: 2px;

  /* component · FAQ */
  --faq-bg: var(--surface-card);
  --faq-bg-open: var(--surface-card);
  --faq-fg: var(--color-ink);
  --faq-border-color: var(--border-color);
  --faq-radius: var(--radius-md);
  --faq-gap: var(--space-3);
  --faq-pad-x: clamp(16px, 2vw, 26px);
  --faq-pad-y: clamp(14px, 1.6vw, 22px);
  --faq-summary-fs: var(--fs-md);
  --faq-summary-fw: var(--fw-semibold);
  --faq-answer-fs: var(--fs-base);
  --faq-answer-color: var(--text-body);
  --faq-marker-size: 28px;
  --faq-marker-bg: var(--color-brand-tint);
  --faq-marker-fg: var(--color-brand);

  /* component · CTA band */
  --cta-bg: var(--grad-brand-diag);
  --cta-fg: var(--color-white);
  --cta-radius: var(--radius-panel);
  --cta-pad-y: clamp(40px, 5vw, 80px);

  /* component · Footer */
  --footer-bg: var(--surface-inverse);
  --footer-bg-image: none;
  --footer-fg: var(--color-white);
  --footer-fg-muted: var(--color-w-60);
  --footer-link: var(--color-w-80);
  --footer-link-hover: var(--color-white);
  --footer-border-color: var(--color-w-10);
  --footer-radius: 0px;
  --footer-pad-y: clamp(40px, 5vw, 72px);
  --footer-legal-fs: var(--fs-legal);
  --footer-legal-color: var(--color-w-50);
  --footer-legal-lh: var(--lh-legal);

  /* component · Modal */
  --modal-bg: var(--color-white);
  --modal-fg: var(--color-ink);
  --modal-radius: var(--radius-modal);
  --modal-pad: clamp(20px, 3vw, 40px);
  --modal-max-w: 760px;
  --modal-scrim: rgba(8,12,18,.66);
  --modal-shadow: var(--shadow-modal);

  /* component · Trust & stats */
  --trust-bg: var(--surface-2);
  --trust-fg: var(--color-ink-70);
  --trust-icon-color: var(--color-brand);
  --trust-pad-y: var(--space-6);
  --trust-divider-color: var(--border-color);
  --stat-value-fs: var(--fs-stat);
  --stat-value-color: var(--color-brand);
  --stat-label-fs: var(--fs-sm);
  --stat-label-color: var(--text-muted);

  /* component · Prose */
  --prose-fs: var(--fs-base);
  --prose-lh: var(--lh-relaxed);
  --prose-color: var(--text-body);
  --prose-heading-color: var(--color-ink);
  --prose-gap: var(--space-4);
  --prose-h2-fs: var(--fs-2xl);
  --prose-h3-fs: var(--fs-lg);
  --prose-max-w: var(--container-prose);
  --prose-marker-color: var(--color-brand);

  /* component · Decoration */
  --decor-grid-color: rgba(255,255,255,.08);
  --decor-grid-size: 48px;
  --decor-dot-color: var(--color-brand);
  --decor-wave-fill: var(--surface);
  --decor-blob-1: color-mix(in srgb, var(--color-brand) 40%, transparent);
  --decor-blob-2: color-mix(in srgb, var(--color-accent) 34%, transparent);
  --decor-noise-opacity: .04;
  --blob-blur: 60px;
  --glass-blur: 14px;
  --glass-blur-sm: 8px;
  --mask-ink: var(--color-black);
  --rule-line-w: min(320px, 40vw);
  --grid-auto-min: 260px;
  --stat-band-min: 160px;
  --float-card-w: min(260px, 62%);
  --icon-btn-size: 40px;
  --textarea-h: 140px;
  --nav-underline-offset: 6px;
  --hamburger-gap: 5px;
  --range-thumb-border-w: 3px;
  --media-rows-gap: clamp(28px, 4vw, 64px);
  --panel-pad: clamp(24px, 4vw, 64px);
  --cta-pad-x: clamp(20px, 4vw, 64px);
  --hero-pad-bottom: clamp(40px, 6vw, 96px);
  --widget-min-h-default: 420px;
  --nav-scrim: linear-gradient(180deg, rgba(8,12,18,.55) 0%, rgba(8,12,18,0) 100%);
}


/* ===== reset ===== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:where([hidden]){display:none!important}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--color-brand);color:var(--color-brand-contrast)}

/* ===== base ===== */

html,body{min-height:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--text-heading);
  text-transform:var(--tt-heading);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);font-weight:var(--fw-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
h5{font-size:var(--fs-h5)}
h6{font-size:var(--fs-h6)}
p{text-wrap:pretty}
strong,b{font-weight:var(--fw-semibold)}
small{font-size:var(--fs-small)}
a.inline-link,.inline-link{
  color:var(--text-link);
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:.18em;
  transition:var(--transition-color);
}
a.inline-link:hover,.inline-link:hover{color:var(--text-link-hover)}
hr{border:0;border-top:var(--border);margin:var(--space-8) 0}
.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;
}
.skip-link{
  position:absolute;left:var(--space-4);top:calc(var(--space-4) * -6);
  z-index:var(--z-toast);background:var(--color-brand);color:var(--color-brand-contrast);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:var(--space-4)}

/* ===== layout ===== */

.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{max-width:var(--container-wide)}
.container--inner{max-width:var(--container-inner)}
.container--narrow{max-width:var(--container-narrow)}
.container--prose{max-width:var(--prose-max-w)}
.container--flush{padding-inline:0}

.section{
  position:relative;
  padding-block:var(--section-pad-y);
  background:var(--section-bg,transparent);
  color:var(--section-fg,inherit);
}
.section--sm{padding-block:var(--section-pad-y-sm)}
.section--lg{padding-block:var(--section-pad-y-lg)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--alt{--section-bg:var(--surface-2)}
.section--inverse{
  --section-bg:var(--surface-inverse);
  --section-fg:var(--text-on-inverse);
  --text-heading:var(--text-on-inverse);
  --text-body:var(--text-on-inverse-muted);
  --text-muted:var(--text-on-inverse-subtle);
  --border-color:var(--border-color-inverse);
  --border-color-subtle:var(--color-w-06);
  --card-bg:var(--surface-inverse-2);
  --card-border-color:var(--border-color-inverse);
  --card-fg:var(--text-on-inverse);
  --faq-bg:var(--surface-inverse-2);
  --faq-bg-open:var(--surface-inverse-2);
  --faq-fg:var(--text-on-inverse);
  --faq-border-color:var(--border-color-inverse);
  --faq-answer-color:var(--text-on-inverse-muted);
  --faq-marker-bg:var(--color-w-10);
  --faq-marker-fg:var(--text-on-inverse);
  --badge-bg:var(--badge-inverse-bg);
  --badge-fg:var(--badge-inverse-fg);
  --ibox-bg:var(--ibox-bg-inverse);
  --ibox-fg:var(--ibox-fg-inverse);
  --chip-bg:var(--color-w-06);
  --chip-fg:var(--text-on-inverse-muted);
  --chip-border-color:var(--border-color-inverse);
  --prose-color:var(--text-on-inverse-muted);
  --prose-heading-color:var(--text-on-inverse);
  --card-bg-alt:var(--surface-inverse-3);
  --surface-2:var(--surface-inverse-2);
  --surface-card:var(--surface-inverse-2);
  --trust-bg:var(--surface-inverse-2);
  --trust-fg:var(--text-on-inverse-muted);
  --trust-icon-color:var(--color-brand);
  --trust-divider-color:var(--border-color-inverse);
  --preform-bg:var(--surface-inverse-2);
  --preform-fg:var(--text-on-inverse);
  --preform-border-color:var(--border-color-inverse);
  --quickpick-bg:var(--color-w-06);
  --quickpick-fg:var(--text-on-inverse-muted);
  --input-bg:var(--surface-inverse-3);
  --input-fg:var(--text-on-inverse);
  --input-border-color:var(--border-color-inverse);
  --input-placeholder:var(--color-w-35);
  --label-fg:var(--text-on-inverse-muted);
  --range-track-bg:var(--color-w-10);
  --step-connector-color:var(--border-color-inverse);
  --sechead-sub-color:var(--text-on-inverse-muted);
  --stat-label-color:var(--text-on-inverse-subtle);
  --decor-wave-fill:var(--surface-inverse);
}
.section--brand{
  --section-bg:var(--color-brand);
  --section-fg:var(--text-on-brand);
  --text-heading:var(--text-on-brand);
  --text-body:var(--text-on-brand);
  --card-bg:var(--color-w-10);
  --card-border-color:var(--color-w-15);
}
.section--panel{--section-bg:var(--grad-panel)}

.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(var(--grid-auto-min),1fr))}
.grid--lg{gap:var(--grid-gap-lg)}
.stack{display:flex;flex-direction:column;gap:var(--stack-gap)}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}

.split{
  display:grid;
  grid-template-columns:var(--split-a,minmax(0,1fr)) var(--split-b,minmax(0,1fr));
  gap:var(--hero-grid-gap);
  align-items:var(--split-align,center);
}
.split--reverse>*:first-child{order:2}

@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .split--reverse>*:first-child{order:0}
}
@media (max-width:768px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ===== mobile rules ===== */

@media (max-width:768px){
  :root{
    --gutter:var(--gutter-mobile);
    --gutter-lg:var(--gutter-mobile);
    --section-pad-y:var(--section-pad-y-mobile);
    --section-pad-y-sm:var(--section-pad-y-sm-mobile);
    --section-pad-y-lg:var(--section-pad-y-lg-mobile);
  }
}

/* ===== per-element visibility ===== */

@media (max-width:768px){ [data-tpl-hide~="m"]{display:none!important} }
@media (min-width:769px) and (max-width:1024px){ [data-tpl-hide~="t"]{display:none!important} }
@media (min-width:1025px){ [data-tpl-hide~="d"]{display:none!important} }

/* ===== primitives ===== */

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--btn-bg);
  --_fg:var(--btn-fg);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--btn-gap);
  min-height:var(--btn-h);
  padding-inline:var(--btn-pad-x);
  border:var(--btn-border-width) solid var(--btn-border-color);
  border-radius:var(--btn-radius);
  background-color:var(--_bg);
  background-image:var(--btn-bg-image);
  color:var(--_fg);
  font-family:var(--font-body);
  font-size:var(--fs-btn);
  font-weight:var(--fw-btn);
  line-height:1;
  letter-spacing:var(--ls-normal);
  text-transform:var(--tt-btn);
  text-align:center;
  box-shadow:var(--btn-shadow);
  transition:var(--transition);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn__in{position:relative;z-index:2;display:inline-flex;align-items:center;gap:var(--btn-gap)}
.btn svg{width:var(--btn-icon-size);height:var(--btn-icon-size);flex:none}
.btn:hover{
  background-color:var(--btn-bg-hover);
  box-shadow:var(--btn-shadow-hover);
  transform:var(--btn-transform-hover);
}
.btn:active{transform:translateY(0)}
.btn::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:var(--grad-sheen);
  transform:translateX(-120%);
  opacity:calc(var(--btn-sheen) * 1);
  pointer-events:none;
}
.btn:hover::after{animation:tplSheen var(--dur-slower) var(--ease-out) forwards}
.btn--sm{min-height:var(--btn-h-sm);padding-inline:var(--btn-pad-x-sm);font-size:var(--fs-small)}
.btn--lg{min-height:var(--btn-h-lg);padding-inline:var(--btn-pad-x-lg);font-size:var(--fs-md)}
.btn--block{width:100%}
.btn--secondary{--_bg:var(--btn-secondary-bg);--_fg:var(--btn-secondary-fg);background-image:none;box-shadow:var(--shadow-sm)}
.btn--secondary:hover{background-color:var(--btn-secondary-bg);filter:brightness(1.15)}
.btn--dark{--_bg:var(--surface-inverse);--_fg:var(--text-on-inverse);background-image:none}
.btn--dark:hover{background-color:var(--surface-inverse-2)}
.btn--white{--_bg:var(--btn-white-bg);--_fg:var(--btn-white-fg);background-image:none}
.btn--white:hover{background-color:var(--btn-white-bg);filter:brightness(.96)}
.btn--ghost{
  --_bg:var(--btn-ghost-bg);--_fg:var(--btn-ghost-fg);
  background-image:none;border-width:var(--border-width);border-color:var(--btn-ghost-border);box-shadow:none;
}
.btn--ghost:hover{background-color:var(--color-ink-05);box-shadow:none}
.btn--accent{--_bg:var(--color-accent);--_fg:var(--color-accent-contrast);background-image:none}
.btn[aria-disabled="true"],.btn:disabled{opacity:var(--op-disabled);pointer-events:none}

/* ---------- Badge / eyebrow / chip ---------- */
/* The eyebrow pills were dropped from the design. The rule below removes every
   .badge (including .badge--inverse) site-wide; the styling underneath is kept
   so the component can be brought back by deleting this one line. */
.badge{display:none !important}
.badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--badge-pad-y) var(--badge-pad-x);
  border:var(--border-width) solid var(--badge-border-color);
  border-radius:var(--badge-radius);
  background:var(--badge-bg);
  color:var(--badge-fg);
  font-family:var(--font-eyebrow);
  font-size:var(--badge-fs);
  font-weight:var(--fw-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:var(--tt-eyebrow);
  line-height:1;
  white-space:nowrap;
}
.badge--inverse{background:var(--badge-inverse-bg);color:var(--badge-inverse-fg)}
.badge--outline{background:transparent;border-color:var(--border-color)}
.badge--dot::before{content:'';width:var(--space-2);height:var(--space-2);border-radius:var(--radius-circle);background:currentColor}
.eyebrow{
  display:block;
  color:var(--text-eyebrow);
  font-family:var(--font-eyebrow);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:var(--tt-eyebrow);
}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--chip-h);
  padding-inline:var(--chip-pad-x);
  border:var(--border-width) solid var(--chip-border-color);
  border-radius:var(--chip-radius);
  background:var(--chip-bg);
  color:var(--chip-fg);
  font-size:var(--chip-fs);
  font-weight:var(--fw-medium);
}
.chip svg,.chip img{width:var(--icon-size-sm);height:var(--icon-size-sm);flex:none}
.chip--ok{background:var(--color-success-soft);color:var(--color-success);border-color:transparent}
.chip--glass{background:var(--surface-glass);border-color:var(--color-w-25);color:var(--text-on-inverse);backdrop-filter:blur(var(--glass-blur-sm))}

/* ---------- Accent text ---------- */
.accent{color:var(--color-highlight)}
.accent-grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.accent-underline{
  position:relative;white-space:nowrap;
}
.accent-underline::after{
  content:'';position:absolute;left:0;right:0;bottom:-.06em;height:.16em;
  background:var(--color-brand);border-radius:var(--radius-pill);opacity:.32;
}
.accent-script{font-family:var(--font-accent);font-weight:var(--fw-regular)}

/* ---------- Cards ---------- */
.card{
  position:relative;
  display:flex;flex-direction:column;gap:var(--card-gap);
  padding:var(--card-pad);
  border:var(--card-border-width) solid var(--card-border-color);
  border-radius:var(--card-radius);
  background:var(--card-bg);
  color:var(--card-fg);
  box-shadow:var(--card-shadow);
  transition:var(--transition);
}
.card--hover:hover{box-shadow:var(--card-shadow-hover);transform:var(--card-transform-hover)}
.card--alt{background:var(--card-bg-alt)}
.card--inverse{
  background:var(--card-bg-inverse);color:var(--text-on-inverse);
  --text-heading:var(--text-on-inverse);--text-body:var(--text-on-inverse-muted);
  --ibox-bg:var(--ibox-bg-inverse);--ibox-fg:var(--ibox-fg-inverse);
  border-color:var(--border-color-inverse);
}
.card--brand{
  background:var(--card-bg-brand);color:var(--text-on-brand);
  --text-heading:var(--text-on-brand);--text-body:var(--text-on-brand);
  --ibox-bg:var(--color-w-15);--ibox-fg:var(--text-on-brand);
  border-color:transparent;
}
.card--grad{background:var(--grad-card);color:var(--color-white);--text-heading:var(--color-white);--text-body:var(--color-w-80);border-color:transparent}
.card--glass{background:var(--surface-glass);border-color:var(--color-w-25);backdrop-filter:blur(var(--glass-blur));box-shadow:none}
.card--flat{box-shadow:none}
.card--sm{padding:var(--card-pad-sm)}
.card--lg{padding:var(--card-pad-lg)}
.card__title{font-size:var(--fs-h4)}
.card__text{color:var(--text-body);font-size:var(--fs-body)}
.card__media{
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  overflow:hidden;
}
.card__media img{width:100%;aspect-ratio:var(--card-media-ratio);object-fit:cover}

/* ---------- Icon box ---------- */
.ibox{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--ibox-size);height:var(--ibox-size);
  border:var(--border-width) solid var(--ibox-border-color);
  border-radius:var(--ibox-radius);
  background:var(--ibox-bg);
  color:var(--ibox-fg);
}
.ibox svg,.ibox img{width:var(--ibox-icon-size);height:var(--ibox-icon-size)}
.ibox--sm{width:var(--ibox-size-sm);height:var(--ibox-size-sm);--ibox-icon-size:var(--icon-size-sm)}
.ibox--lg{width:var(--ibox-size-lg);height:var(--ibox-size-lg);--ibox-icon-size:var(--icon-size-lg)}
.ibox--ghost{background:transparent;border-color:var(--border-color)}
.ibox--circle{border-radius:var(--radius-circle)}
.ibox--brand{background:var(--color-brand);color:var(--color-brand-contrast)}

/* ---------- Section head ---------- */
.sec-head{
  display:flex;flex-direction:column;gap:var(--sechead-gap);
  max-width:var(--sechead-max-w);
  margin-bottom:var(--sechead-mb);
  align-items:var(--_sh-items,center);
  text-align:var(--sechead-align);
}
.sec-head[data-align="center"]{--_sh-items:center;--sechead-align:center;margin-inline:auto}
.sec-head[data-align="left"]{--_sh-items:flex-start;--sechead-align:left}
.sec-head h2,.sec-head .sec-title{font-size:var(--sechead-title-fs);max-width:var(--measure-head)}
.sec-head p,.sec-head .sec-sub{font-size:var(--sechead-sub-fs);color:var(--sechead-sub-color);max-width:var(--measure)}

/* ---------- Media ---------- */
.media{border-radius:var(--radius-media);overflow:hidden;background:var(--surface-2)}
.media img{width:100%;height:100%;object-fit:cover;object-position:var(--_focal,50% 50%)}
.media--hero{aspect-ratio:var(--hero-media-ratio)}
.media--card{aspect-ratio:var(--card-media-ratio)}
.media--square{aspect-ratio:1}
.media--fill{position:absolute;inset:0;border-radius:inherit}
.media--fill img{position:absolute;inset:0}

/* ---------- Overlays & decoration ---------- */
.veil{position:absolute;inset:0;background:var(--hero-veil);pointer-events:none;z-index:var(--z-decor)}
.scrim{position:absolute;inset:0;background:var(--grad-hero-scrim);pointer-events:none;z-index:var(--z-decor)}
.pattern-grid{
  position:absolute;inset:0;pointer-events:none;z-index:var(--z-decor);
  opacity:var(--op-pattern);
  background-image:
    linear-gradient(to right,var(--decor-grid-color) var(--hairline),transparent var(--hairline)),
    linear-gradient(to bottom,var(--decor-grid-color) var(--hairline),transparent var(--hairline));
  background-size:var(--decor-grid-size) var(--decor-grid-size);
  mask-image:radial-gradient(120% 100% at 50% 0%,var(--mask-ink) 20%,transparent 78%);
}
.pattern-dots{
  position:absolute;inset:0;pointer-events:none;z-index:var(--z-decor);
  opacity:var(--op-pattern);
  background-image:radial-gradient(var(--decor-grid-color) var(--space-px),transparent var(--space-px));
  background-size:calc(var(--decor-grid-size) / 2) calc(var(--decor-grid-size) / 2);
}
.pattern-hex{
  position:absolute;inset:0;pointer-events:none;z-index:var(--z-decor);
  opacity:var(--op-pattern);
  background-image:
    linear-gradient(120deg,transparent 47%,var(--hero-pattern-color) 47% 53%,transparent 53%),
    linear-gradient(60deg,transparent 47%,var(--hero-pattern-color) 47% 53%,transparent 53%);
  background-size:var(--hero-pattern-size) var(--hero-pattern-size);
}
.blob{position:absolute;border-radius:var(--radius-circle);filter:blur(var(--blob-blur));pointer-events:none;z-index:var(--z-base)}
.blob--1{background:var(--decor-blob-1)}
.blob--2{background:var(--decor-blob-2)}
.rule{height:var(--hairline);background:var(--border-color);border:0}
.rule-dots{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding-block:var(--space-8)}
.rule-dots .dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-circle);background:var(--decor-dot-color)}
.rule-dots .line{height:var(--hairline);width:var(--rule-line-w);background:var(--border-color)}
.wave{display:block;width:100%;height:auto;fill:var(--decor-wave-fill)}

/* ---------- Trust row / SSL ---------- */
.trust-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  flex-wrap:wrap;font-size:var(--fs-small);color:var(--text-muted);
}
.ssl{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--trust-icon-color);font-weight:var(--fw-medium)}
.ssl svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.disclosure-link{text-decoration:underline;text-underline-offset:.18em;color:var(--text-muted)}
.disclosure-link:hover{color:var(--text-link)}

/* ---------- Check / benefit list ---------- */
.checklist{display:flex;flex-direction:column;gap:var(--space-3)}
.checklist--row{flex-direction:row;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.checklist li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-body)}
.checklist .tick{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--icon-size);height:var(--icon-size);border-radius:var(--radius-circle);
  background:var(--color-accent-soft);color:var(--color-accent);margin-top:.1em;
}
.checklist .tick svg{width:calc(var(--icon-size) * .62);height:calc(var(--icon-size) * .62)}

/* ---------- Stats ---------- */
.stat{display:flex;flex-direction:column;gap:var(--space-1)}
.stat__value{font-family:var(--font-display);font-size:var(--stat-value-fs);font-weight:var(--fw-display);color:var(--stat-value-color);line-height:var(--lh-none)}
.stat__label{font-size:var(--stat-label-fs);color:var(--stat-label-color)}

/* ---------- Prose (legal pages, long copy) ---------- */
.prose{
  font-size:var(--prose-fs);
  line-height:var(--prose-lh);
  color:var(--prose-color);
  display:flex;flex-direction:column;gap:var(--prose-gap);
  max-width:var(--prose-max-w);
}
.prose--wide{max-width:none}
.prose h2{font-size:var(--prose-h2-fs);color:var(--prose-heading-color);margin-top:var(--space-6)}
.prose h3{font-size:var(--prose-h3-fs);color:var(--prose-heading-color);margin-top:var(--space-4)}
.prose h4{color:var(--prose-heading-color)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-5)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--prose-marker-color)}
.prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:.18em}
.prose table{margin-block:var(--space-4);font-size:var(--fs-small)}
.prose th,.prose td{border:var(--border);padding:var(--space-3);text-align:left}
.prose th{background:var(--surface-2);font-weight:var(--fw-semibold);color:var(--prose-heading-color)}
.legal-text{font-size:var(--fs-legal);line-height:var(--lh-legal);color:var(--text-muted)}

/* ===== utilities ===== */

.u-center{text-align:center}
.u-left{text-align:left}
.u-right{text-align:right}
.u-relative{position:relative}
.u-fill{position:absolute;inset:0}
.u-hidden{display:none!important}
.u-mt-0{margin-top:0}
.u-flow>*+*{margin-top:var(--space-4)}
.u-measure{max-width:var(--measure)}
.u-measure-tight{max-width:var(--measure-tight)}
.u-nowrap{white-space:nowrap}
.u-balance{text-wrap:balance}
.u-round{border-radius:var(--radius-card)}
.u-shadow{box-shadow:var(--shadow-card)}
.u-z-content{position:relative;z-index:var(--z-content)}
@media (max-width:1024px){.u-hide-md{display:none!important}}
@media (max-width:768px){.u-hide-sm{display:none!important}}
@media (min-width:769px){.u-only-sm{display:none!important}}
@media (min-width:1025px){.u-only-md{display:none!important}}

/* ===== animations ===== */

@keyframes tplSheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes tplGlow{0%,100%{box-shadow:var(--btn-shadow)}50%{box-shadow:var(--btn-shadow-hover)}}
@keyframes tplFadeUp{from{opacity:0;transform:translateY(var(--anim-rise))}to{opacity:1;transform:none}}
@keyframes tplFadeIn{from{opacity:0}to{opacity:1}}
@keyframes tplScaleIn{from{opacity:0;transform:scale(var(--anim-scale-from))}to{opacity:1;transform:none}}
@keyframes tplFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--anim-float-y) * -1))}}
@keyframes tplDrift{0%{transform:translate(0,0)}33%{transform:translate(3%,-4%)}66%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}}
@keyframes tplSpin{to{transform:rotate(360deg)}}
@keyframes tplNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--anim-nudge-x))}}
@keyframes tplMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tplPulse{0%,100%{opacity:1}50%{opacity:.55}}

.anim-float{animation:tplFloat var(--dur-ambient) var(--ease-in-out) infinite}
.anim-drift{animation:tplDrift calc(var(--dur-ambient) * 2) var(--ease-in-out) infinite}
.anim-glow{animation:tplGlow calc(var(--dur-ambient) / 3) var(--ease-in-out) infinite}
.anim-nudge:hover svg{animation:tplNudge var(--dur-slow) var(--ease-out) infinite}

[data-reveal]{opacity:0}
[data-reveal].is-in{animation:tplFadeUp var(--dur-slower) var(--ease-out) forwards}
[data-reveal="fade"].is-in{animation-name:tplFadeIn}
[data-reveal="scale"].is-in{animation-name:tplScaleIn}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;animation:none!important}}


/* block: header-nav */
.brand-lockup{display:inline-flex;align-items:center;gap:var(--logo-gap);min-width:0}
.brand-mark{
  display:inline-grid;place-items:center;flex:none;
  width:var(--logo-mark-size);height:var(--logo-mark-size);
  border:var(--border-width) solid var(--logo-mark-border-color);
  border-radius:var(--logo-mark-radius);
  background-color:var(--logo-mark-bg);
  background-image:var(--logo-mark-bg-image);
  color:var(--logo-mark-fg);
  box-shadow:var(--logo-mark-shadow);
}
.brand-mark svg,.brand-mark iconify-icon{width:var(--logo-mark-icon-size);height:var(--logo-mark-icon-size)}
/* The Iconify web component draws an inner svg sized in em, so a width on the host leaves
   the drawing at 1em — the icon sat in a corner of its tile. Picked icons are inlined as
   SVG now, but a font-size keeps the component correct if one is ever left unresolved. */
.brand-mark iconify-icon{font-size:var(--logo-mark-icon-size);line-height:1}
/* No tile: the icon carries the mark on its own, at its own size and colour. */
.brand-mark--bare{
  background:none;
  border-color:transparent;
  box-shadow:none;
  width:auto;height:auto;
  color:var(--logo-mark-icon-color);
}
.brand-mark--bare svg,.brand-mark--bare iconify-icon{
  width:var(--logo-mark-bare-size);
  height:var(--logo-mark-bare-size);
}
.brand-mark--bare iconify-icon{font-size:var(--logo-mark-bare-size)}
.brand-word{
  font-family:var(--font-display);
  font-size:var(--logo-text-fs);
  font-weight:var(--logo-text-fw);
  letter-spacing:var(--logo-text-ls);
  white-space:nowrap;
}
@media (max-width:1024px){
  .brand-mark{width:var(--logo-mark-size-mobile);height:var(--logo-mark-size-mobile)}
}

.site-header{
  position:relative;z-index:var(--z-header);
  height:var(--header-h);
}
.site-header--sticky{position:sticky;top:0}
.site-header__bar{
  position:absolute;inset:0;
  background:var(--nav-bg);
  border-bottom:var(--border-width) solid var(--nav-border-color);
  box-shadow:var(--nav-shadow);
  backdrop-filter:blur(var(--nav-blur));
  -webkit-backdrop-filter:blur(var(--nav-blur));
  transition:var(--transition);
}
.site-header__in{
  position:relative;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
}
.navbar__logo{
  display:inline-flex;align-items:center;gap:var(--space-2-5);
  font-family:var(--font-display);
  font-size:var(--fs-md);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  color:var(--nav-fg);
  white-space:nowrap;
}
.navbar__right{display:flex;align-items:center;gap:var(--space-6)}
.navbar__menu{display:flex;align-items:center;gap:var(--nav-link-gap)}
.navbar__menu a{
  position:relative;
  font-size:var(--nav-link-fs);font-weight:var(--nav-link-fw);
  color:var(--nav-fg-muted);
  transition:var(--transition-color);
}
.navbar__menu a:hover{color:var(--nav-fg-hover)}
.navbar__menu a::after{
  content:'';position:absolute;left:0;right:0;bottom:calc(var(--nav-underline-offset) * -1);height:var(--border-width-2);
  background:var(--color-brand);border-radius:var(--radius-pill);
  transform:scaleX(0);transform-origin:left;transition:var(--transition-transform);
}
.navbar__menu a:hover::after,.navbar__menu a[aria-current="page"]::after{transform:scaleX(1)}
.navbar__phone{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--nav-fg);font-weight:var(--fw-semibold);font-size:var(--fs-small)}
.navbar__phone svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.navbar__cta{min-height:var(--btn-h-sm);padding-inline:var(--btn-pad-x-sm)}

/* transparent-over-hero */
.site-header--transparent .site-header__bar{
  background:transparent;box-shadow:none;border-bottom-color:transparent;backdrop-filter:none;
}
/* A hero photo can be light at the top, so a transparent header needs its own
   scrim to keep the white nav text readable on every generated site. */
.site-header--transparent .site-header__bar::after{
  content:'';position:absolute;inset:0 0 auto;height:calc(var(--header-h) * 2);
  background:var(--nav-scrim);
  pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);
}
.site-header--transparent.is-scrolled .site-header__bar::after{opacity:0}
/*
 * A transparent header has no bar of its own, so the section below it must run behind it —
 * otherwise the strip the header reserves shows the page background above the hero, with
 * the nav scrim smeared across it, and the site opens on an empty band.
 *
 * The section pulls itself up by the header's height and re-adds it to its own top
 * padding, so the copy sits where it would have anyway. --first-pad-top is what that
 * section wanted above its content (hero and page-head both publish it); the fallback
 * keeps an unknown first section sensible. Card heroes are excluded because they already
 * do this dance inside their own frame.
 */
.site-header--transparent ~ section:first-of-type:not(.hero--card){
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + var(--first-pad-top, var(--section-pad-y)));
}
@media (max-width:768px){
  .site-header--transparent ~ section:first-of-type:not(.hero--card){
    margin-top:calc(var(--header-h-mobile) * -1);
    padding-top:calc(var(--header-h-mobile) + var(--first-pad-top, var(--section-pad-y)));
  }
}
.site-header--transparent{--nav-fg:var(--nav-inverse-fg);--nav-fg-muted:var(--color-w-70);--nav-fg-hover:var(--color-white)}
/*
 * The inverse nav colours and the scrim above both assume the section behind the bar is
 * dark. Now that the first section actually runs behind the bar, a light hero would get a
 * grey smear across its top and pale nav text on it. Written as :has(:not(dark)) so a
 * browser without :has support simply keeps the scrim — the safe direction.
 */
.site-header--transparent:has(~ section:first-of-type:not(.hero--on-dark)){
  --nav-fg:var(--color-ink);--nav-fg-muted:var(--color-ink-70);--nav-fg-hover:var(--color-brand);
}
.site-header--transparent:has(~ section:first-of-type:not(.hero--on-dark)) .site-header__bar::after{display:none}
.site-header--transparent.is-scrolled .site-header__bar{
  background:var(--nav-bg);box-shadow:var(--nav-shadow);border-bottom-color:var(--nav-border-color);
  backdrop-filter:blur(var(--nav-blur));
}
.site-header--transparent.is-scrolled{--nav-fg:var(--color-ink);--nav-fg-muted:var(--color-ink-70);--nav-fg-hover:var(--color-brand)}

/* floating pill */
.site-header--floating{height:calc(var(--header-h) + var(--space-4))}
.site-header--floating .site-header__bar{
  inset:var(--space-3) var(--gutter) auto;
  height:var(--header-h);
  border-radius:var(--radius-pill);
  border-bottom:0;
  box-shadow:var(--shadow-lg);
  max-width:var(--container-max);margin-inline:auto;
}
.site-header--floating .site-header__in{padding-inline:var(--space-6)}

.site-header--bordered .site-header__bar{box-shadow:none}

/* hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:var(--hamburger-gap);
  width:calc(var(--hamburger-w) + var(--space-3));height:calc(var(--hamburger-w) + var(--space-3));
  border-radius:var(--radius-sm);
}
.hamburger__bar{
  display:block;width:var(--hamburger-w);height:var(--hamburger-bar-h);
  border-radius:var(--radius-pill);background:var(--nav-fg);
  transition:var(--transition);
}
.hamburger--active .hamburger__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger--active .hamburger__bar:nth-child(2){opacity:0}
.hamburger--active .hamburger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* off-canvas */
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-menu);
  width:var(--mobile-menu-w);
  display:flex;flex-direction:column;gap:var(--space-5);
  padding:calc(var(--header-h-mobile) + var(--space-6)) var(--space-6) var(--space-8);
  background:var(--mobile-menu-bg);color:var(--mobile-menu-fg);
  box-shadow:var(--shadow-2xl);
  transform:translateX(102%);
  transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto;
}
.mobile-menu--active{transform:none}
.mobile-menu ul{display:flex;flex-direction:column;gap:var(--space-1)}
.mobile-menu a{
  display:block;padding:var(--space-3) 0;
  font-size:var(--fs-lg);font-weight:var(--fw-medium);
  border-bottom:var(--border-width) solid var(--border-color-subtle);
}
.mobile-menu a:hover{color:var(--color-brand)}
.mobile-menu__close{
  position:absolute;top:var(--space-5);right:var(--space-5);
  width:var(--icon-btn-size);height:var(--icon-btn-size);display:grid;place-items:center;
  border-radius:var(--radius-circle);background:var(--color-ink-05);color:inherit;
}
.mobile-menu__close svg{width:var(--icon-size);height:var(--icon-size)}
.menu-overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--surface-overlay);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
.menu-overlay--active{opacity:1;visibility:visible}
body.tpl-menu-open{overflow:hidden}

@media (max-width:1024px){
  .site-header{height:var(--header-h-mobile)}
  .site-header--floating{height:calc(var(--header-h-mobile) + var(--space-4))}
  .site-header--floating .site-header__bar{height:var(--header-h-mobile)}
  .navbar__menu,.navbar__phone{display:none}
  .hamburger{display:flex}
  .navbar__logo img,.navbar__logo svg{height:var(--logo-h-mobile)}
}
@media (max-width:480px){
  /* phones: the headline is tightened and pulled closer to the content under it,
     so the amount picker sits higher on the first screen */
  :root{
    --fs-h1: clamp(24px, 5.2vw + 6px, 30px);
    --fs-h2: clamp(21px, 4.4vw + 5px, 26px);
    --hero-pad-top: 14px;
    --hero-pad-top-mobile: 14px;
  }
  .hero__title,.page-head h1{margin-bottom:var(--space-2)}
  .page-head{padding-block:var(--space-6) var(--space-5)}
  .page-head__in{gap:var(--space-2)}
  /* the CTA stays in the header on phones - it is the primary action and the
     burger alone is not enough of a prompt for SMS traffic */
  .navbar__cta{min-height:34px;padding-inline:var(--space-3);font-size:13px}
  .navbar__right{gap:var(--space-2)}
  .navbar__logo .brand-word{font-size:16px}
}

/* block: hero-split */
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  /* Published for the "runs behind a transparent header" rule in the header block, which
     re-adds --header-h on top of whatever the first section wanted above its content. */
  --first-pad-top:var(--hero-pad-top);
  padding-top:var(--hero-pad-top);
  padding-bottom:var(--hero-pad-bottom);
  background:var(--hero-bg);
  color:var(--hero-fg);
  min-height:var(--_min-h,auto);
  display:flex;align-items:center;
}
.hero--card{
  padding:0;
  margin-top:calc(var(--header-h) * -1);
}
.hero--card>.container{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.hero--card .hero__frame{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--hero-radius);
  padding:var(--hero-pad);
  padding-top:calc(var(--header-h) + var(--hero-pad));
  min-height:var(--_min-h,auto);
  display:flex;align-items:center;
}
.hero__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:var(--_focal,50% 50%)}
.hero__bg-wrap{position:absolute;inset:0;z-index:0}
.hero__mesh{position:absolute;inset:0;z-index:0;background:var(--grad-mesh)}
.hero__grad{position:absolute;inset:0;z-index:0;background:var(--grad-brand-diag)}
.hero__panel{position:absolute;inset:0;z-index:0;background:var(--grad-panel)}
.hero__in{position:relative;z-index:var(--z-content);width:100%}
.hero__grid{
  display:grid;
  grid-template-columns:var(--hero-copy-w) var(--hero-aside-w);
  gap:var(--hero-grid-gap);
  align-items:center;
}
.hero__grid--reverse>.hero__copy{order:2}
.hero__grid--solo{grid-template-columns:minmax(0,1fr)}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.hero__copy h1{
  font-size:var(--hero-title-fs);
  line-height:var(--hero-title-lh);
  max-width:var(--measure-hero);
}
.hero__sub{
  font-size:var(--hero-sub-fs);
  color:var(--hero-fg-muted);
  max-width:var(--measure);
}
.hero__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.hero__note{font-size:var(--fs-small);color:var(--hero-fg-muted);max-width:22ch}
.hero__aside{min-width:0;display:flex;justify-content:flex-end}
.hero__grid--solo .hero__aside{justify-content:center;margin-top:var(--space-6)}

.hero--on-dark{
  --hero-fg:var(--text-on-inverse);
  --hero-fg-muted:var(--color-w-70);
  --text-heading:var(--text-on-inverse);
  --text-body:var(--color-w-70);
  --text-muted:var(--color-w-50);
  --badge-bg:var(--badge-inverse-bg);
  --badge-fg:var(--badge-inverse-fg);
  --border-color:var(--border-color-inverse);
}
.hero--center{text-align:center}
.hero--center .hero__copy{align-items:center}
.hero--center .hero__copy h1,.hero--center .hero__sub{margin-inline:auto}
.hero--center .hero__actions{justify-content:center}

.hero__benefits{margin-top:calc(var(--space-1) * -1)}
.hero__trust{max-width:var(--preform-max-w)}

@media (max-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__grid--reverse>.hero__copy{order:0}
  .hero__aside{justify-content:center}
  .hero{min-height:0}
  .hero--card .hero__frame{min-height:0}
}
@media (max-width:768px){
  /* A card hero pads its frame, not itself — pushing the outer section down as well moved
     the card away from the top of the screen and then still paid for the header inside the
     frame, so the copy started a long way down. */
  .hero{--first-pad-top:var(--hero-pad-top-mobile)}
  .hero:not(.hero--card){padding-top:var(--hero-pad-top-mobile)}
  .hero--card{margin-top:calc(var(--header-h-mobile) * -1)}
  .hero--card .hero__frame{padding-top:calc(var(--header-h-mobile) + var(--space-6))}
  .hero__actions{width:100%}
  .hero__actions .btn{width:100%}
}

.preform{
  position:relative;
  display:flex;flex-direction:column;gap:var(--preform-gap);
  width:100%;max-width:var(--preform-max-w);
  padding:var(--preform-pad);
  border:var(--border-width) solid var(--preform-border-color);
  border-radius:var(--preform-radius);
  background:var(--preform-bg);
  color:var(--preform-fg);
  box-shadow:var(--preform-shadow);

  /*
   * The card re-derives its own text tokens from its own foreground.
   *
   * A hero over a photo is a section--inverse, which sets --text-muted,
   * --label-fg and --border-color to light values so its own copy reads on the
   * dark image. This card then paints a *white* surface inside that section and
   * inherited those light values, so "Status", "Amount" and the SSL note came out
   * white on white. Deriving them from --preform-fg makes the card self-consistent
   * whatever the section around it decides to be.
   */
  --text-muted:color-mix(in srgb, var(--preform-fg) 62%, transparent);
  --text-body:color-mix(in srgb, var(--preform-fg) 80%, transparent);
  --text-heading:var(--preform-fg);
  --label-fg:color-mix(in srgb, var(--preform-fg) 75%, transparent);
  --border-color:color-mix(in srgb, var(--preform-fg) 14%, transparent);
  --border-color-subtle:color-mix(in srgb, var(--preform-fg) 8%, transparent);
}
.preform--wide{max-width:none}
.preform__meta{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-small)}
.preform__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);color:var(--text-muted)}
.preform__row>span:last-child{color:var(--preform-fg);font-weight:var(--fw-semibold)}
.preform__head{display:flex;flex-direction:column;gap:var(--space-1)}
.preform__title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--preform-fg)}
.preform__sub{font-size:var(--fs-small);color:var(--text-muted)}
/*
 * The card is a flex column with its own row gap, so a hairline placed between two groups
 * collects that gap twice — once above the line and once below it — which was most of the
 * dead space between the slider and the CTA. Pulling the divider in by one whole gap turns
 * the pair back into a single, controllable separation.
 */
.preform__divider{
  height:var(--hairline);
  background:var(--border-color);
  margin-block:calc(var(--preform-divider-space) - var(--preform-gap));
}
.preform__foot{display:flex;flex-direction:column;gap:var(--preform-foot-gap)}
.preform__note{font-size:var(--fs-xs);color:var(--text-muted);text-align:center}

/* ----- amount slider ----- */
.preform__amount{display:flex;flex-direction:column;gap:var(--space-3)}
.preform__amount-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.preform__amount-top label{font-size:var(--label-fs);color:var(--label-fg)}
.amount-out{
  font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-display);
  color:var(--color-brand);line-height:var(--lh-none);
  font-variant-numeric:tabular-nums;
}
/* The thumb needs a little room to overhang the track, but only a little: the old
   --space-2 block padding plus the foot gap stacked into a visible dead band between
   the slider and the button. */
.amt-wrap{position:relative;padding-block:var(--amt-wrap-pad-y)}
.amt-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:var(--range-track-h);
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,transparent 0,transparent 0) no-repeat,var(--range-track-bg);
  background-image:linear-gradient(90deg,var(--color-brand) 0,var(--color-brand) var(--fill,50%),transparent var(--fill,50%));
  cursor:pointer;outline:none;
}
.amt-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--range-thumb-size);height:var(--range-thumb-size);
  border-radius:var(--radius-circle);
  background:var(--range-thumb-bg);
  border:var(--range-thumb-border-w) solid var(--range-thumb-border);
  box-shadow:var(--range-thumb-shadow);
  cursor:grab;
}
.amt-range::-moz-range-thumb{
  width:var(--range-thumb-size);height:var(--range-thumb-size);
  border-radius:var(--radius-circle);
  background:var(--range-thumb-bg);
  border:var(--range-thumb-border-w) solid var(--range-thumb-border);
  box-shadow:var(--range-thumb-shadow);
  cursor:grab;
}
.amt-ticks{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-muted)}

/* ----- quick pick ----- */
.quickpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.quickpick__btn{
  min-height:var(--quickpick-h);
  border-radius:var(--quickpick-radius);
  background:var(--quickpick-bg);
  color:var(--quickpick-fg);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);
  border:var(--border-width) solid transparent;
  transition:var(--transition);
  font-variant-numeric:tabular-nums;
}
.quickpick__btn:hover{border-color:var(--color-brand);color:var(--color-brand)}
.quickpick__btn[aria-pressed="true"]{
  background:var(--quickpick-bg-active);color:var(--quickpick-fg-active);border-color:transparent;
  box-shadow:var(--shadow-btn);
}
@media (max-width:480px){.quickpick{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ----- widget host ----- */
.widget-host{
  position:relative;width:100%;
  min-height:var(--widget-min-h,var(--widget-min-h-default));
  border-radius:var(--preform-radius);
  overflow:hidden;
}
.widget-host__note{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  margin-top:var(--space-3);font-size:var(--fs-xs);color:var(--text-muted);
}
.widget-host__note svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}

/* ----- trust list panel ----- */
.trust-panel{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--card-pad);
  border-radius:var(--card-radius);
  background:var(--surface-glass);
  border:var(--border-width) solid var(--color-w-25);
  backdrop-filter:blur(var(--glass-blur));
  color:var(--text-on-inverse);
}
.trust-panel__head{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold)}
.trust-panel__list{display:flex;flex-direction:column;gap:var(--space-3)}
.trust-panel__item{display:flex;gap:var(--space-3);align-items:flex-start}
.trust-panel__item .ibox{background:var(--color-w-15);color:currentColor}
.trust-panel__item b{display:block;font-weight:var(--fw-semibold)}
.trust-panel__item span{font-size:var(--fs-small);opacity:.8}

/* ----- floating cards over a photo ----- */
.hero-photo{position:relative}
.hero-photo>.media{border-radius:var(--radius-panel);overflow:hidden}
.float-card{
  position:absolute;
  display:flex;flex-direction:column;gap:var(--space-2);
  width:var(--float-card-w);
  padding:var(--card-pad-sm);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-small);
}
.float-card__head{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);color:var(--text-heading)}
.float-card__head .ibox{--ibox-size:var(--ibox-size-sm);--ibox-icon-size:var(--icon-size-sm)}
.float-card__text{color:var(--text-body)}
.float-card:nth-child(2){top:6%;left:-6%}
.float-card:nth-child(3){bottom:22%;right:-6%}
.float-card:nth-child(4){bottom:-4%;left:4%}
.float-card:nth-child(5){top:32%;right:-4%}
@media (max-width:1024px){
  .float-card{position:static;width:100%;box-shadow:var(--shadow-card)}
  .hero-photo{display:flex;flex-direction:column;gap:var(--space-3)}
}

/* ----- stats tiles ----- */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.hero-stats .card{gap:var(--space-1);padding:var(--card-pad-sm);text-align:center;align-items:center}
@media (max-width:480px){.hero-stats{grid-template-columns:minmax(0,1fr)}}

/* block: feature-grid */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.bento>.span-2{grid-column:span 2}
.bento>.span-3{grid-column:span 3}
.card--step{gap:var(--space-4)}
.card__head{display:flex;align-items:center;gap:var(--space-3)}
.card__head h3{font-size:var(--fs-h4);margin:0}
.card__num{
  display:inline-grid;place-items:center;flex:none;
  width:var(--step-num-size);height:var(--step-num-size);
  border-radius:var(--step-num-radius);
  background:var(--step-num-bg);color:var(--step-num-fg);
  font-family:var(--font-display);font-size:var(--step-num-fs);font-weight:var(--fw-bold);
  line-height:1;
}
.card__line{height:var(--hairline);background:var(--border-color);margin-block:var(--space-1)}
.card__foot{margin-top:auto;padding-top:var(--space-3)}

/* timeline steps */
.steps-timeline{display:flex;flex-direction:column;gap:var(--space-6);position:relative}
.steps-timeline::before{
  content:'';position:absolute;left:calc(var(--step-num-size) / 2);top:var(--step-num-size);bottom:var(--step-num-size);
  width:var(--step-connector-width);background:var(--step-connector-color);
}
.steps-timeline__item{display:grid;grid-template-columns:var(--step-num-size) minmax(0,1fr);gap:var(--space-5);align-items:start;position:relative}
.steps-timeline__body{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-2)}
.steps-timeline__body h3{font-size:var(--fs-h4)}

/* split-media rows */
.media-rows{display:flex;flex-direction:column;gap:var(--media-rows-gap)}
.media-row{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--hero-grid-gap);align-items:center;
}
.media-row--flip>.media-row__photo{order:2}
.media-row__photo .media{aspect-ratio:var(--card-media-ratio)}
.media-row__body{display:flex;flex-direction:column;gap:var(--space-3)}
.media-row__head{display:flex;align-items:center;gap:var(--space-3)}
.media-row__head h3{font-size:var(--fs-h3)}
@media (max-width:1024px){
  .media-row{grid-template-columns:minmax(0,1fr)}
  .media-row--flip>.media-row__photo{order:0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento>.span-2,.bento>.span-3{grid-column:span 2}
}
@media (max-width:768px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento>.span-2,.bento>.span-3{grid-column:span 1}
}

/* option cards */
.option-card{position:relative;overflow:hidden}
.option-card__media{margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;overflow:hidden}
.option-card__media img{width:100%;aspect-ratio:var(--card-media-ratio);object-fit:cover}
.option-card__amount{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--color-brand);
}
.option-card__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* trust strip */
.trust-strip{
  background:var(--trust-bg);color:var(--trust-fg);
  padding-block:var(--trust-pad-y);
}
.trust-strip__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.trust-strip__item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);font-weight:var(--fw-medium)}
.trust-strip__item .ibox{background:transparent;color:var(--trust-icon-color);--ibox-size:var(--icon-size-lg)}
.trust-strip--divided .trust-strip__item+.trust-strip__item{
  padding-left:var(--space-6);border-left:var(--border-width) solid var(--trust-divider-color);
}
@media (max-width:768px){
  .trust-strip__in{justify-content:flex-start;gap:var(--space-4)}
  .trust-strip--divided .trust-strip__item+.trust-strip__item{padding-left:0;border-left:0}
}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--stat-band-min),1fr));gap:var(--grid-gap)}
.stat-band .stat{align-items:center;text-align:center}

/* block: steps */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.bento>.span-2{grid-column:span 2}
.bento>.span-3{grid-column:span 3}
.card--step{gap:var(--space-4)}
.card__head{display:flex;align-items:center;gap:var(--space-3)}
.card__head h3{font-size:var(--fs-h4);margin:0}
.card__num{
  display:inline-grid;place-items:center;flex:none;
  width:var(--step-num-size);height:var(--step-num-size);
  border-radius:var(--step-num-radius);
  background:var(--step-num-bg);color:var(--step-num-fg);
  font-family:var(--font-display);font-size:var(--step-num-fs);font-weight:var(--fw-bold);
  line-height:1;
}
.card__line{height:var(--hairline);background:var(--border-color);margin-block:var(--space-1)}
.card__foot{margin-top:auto;padding-top:var(--space-3)}

/* timeline steps */
.steps-timeline{display:flex;flex-direction:column;gap:var(--space-6);position:relative}
.steps-timeline::before{
  content:'';position:absolute;left:calc(var(--step-num-size) / 2);top:var(--step-num-size);bottom:var(--step-num-size);
  width:var(--step-connector-width);background:var(--step-connector-color);
}
.steps-timeline__item{display:grid;grid-template-columns:var(--step-num-size) minmax(0,1fr);gap:var(--space-5);align-items:start;position:relative}
.steps-timeline__body{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-2)}
.steps-timeline__body h3{font-size:var(--fs-h4)}

/* split-media rows */
.media-rows{display:flex;flex-direction:column;gap:var(--media-rows-gap)}
.media-row{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--hero-grid-gap);align-items:center;
}
.media-row--flip>.media-row__photo{order:2}
.media-row__photo .media{aspect-ratio:var(--card-media-ratio)}
.media-row__body{display:flex;flex-direction:column;gap:var(--space-3)}
.media-row__head{display:flex;align-items:center;gap:var(--space-3)}
.media-row__head h3{font-size:var(--fs-h3)}
@media (max-width:1024px){
  .media-row{grid-template-columns:minmax(0,1fr)}
  .media-row--flip>.media-row__photo{order:0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento>.span-2,.bento>.span-3{grid-column:span 2}
}
@media (max-width:768px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento>.span-2,.bento>.span-3{grid-column:span 1}
}

/* option cards */
.option-card{position:relative;overflow:hidden}
.option-card__media{margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;overflow:hidden}
.option-card__media img{width:100%;aspect-ratio:var(--card-media-ratio);object-fit:cover}
.option-card__amount{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--color-brand);
}
.option-card__list{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* trust strip */
.trust-strip{
  background:var(--trust-bg);color:var(--trust-fg);
  padding-block:var(--trust-pad-y);
}
.trust-strip__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.trust-strip__item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-small);font-weight:var(--fw-medium)}
.trust-strip__item .ibox{background:transparent;color:var(--trust-icon-color);--ibox-size:var(--icon-size-lg)}
.trust-strip--divided .trust-strip__item+.trust-strip__item{
  padding-left:var(--space-6);border-left:var(--border-width) solid var(--trust-divider-color);
}
@media (max-width:768px){
  .trust-strip__in{justify-content:flex-start;gap:var(--space-4)}
  .trust-strip--divided .trust-strip__item+.trust-strip__item{padding-left:0;border-left:0}
}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--stat-band-min),1fr));gap:var(--grid-gap)}
.stat-band .stat{align-items:center;text-align:center}

/* block: faq-accordion */
.faq-list{display:flex;flex-direction:column;gap:var(--faq-gap)}
.faq-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--faq-gap)}
.faq-columns>.faq-list{gap:var(--faq-gap)}
.faq-item{
  border:var(--border-width) solid var(--faq-border-color);
  border-radius:var(--faq-radius);
  background:var(--faq-bg);
  color:var(--faq-fg);
  overflow:hidden;
  transition:var(--transition);
}
.faq-item[open]{background:var(--faq-bg-open);box-shadow:var(--shadow-sm)}
.faq-item>summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--faq-pad-y) var(--faq-pad-x);
  font-size:var(--faq-summary-fs);
  font-weight:var(--faq-summary-fw);
  color:var(--faq-fg);
}
.faq-item>summary:hover{color:var(--text-link)}
.faq-item__marker{
  display:inline-grid;place-items:center;flex:none;
  width:var(--faq-marker-size);height:var(--faq-marker-size);
  border-radius:var(--radius-circle);
  background:var(--faq-marker-bg);color:var(--faq-marker-fg);
  transition:var(--transition-transform);
}
.faq-item__marker svg{width:60%;height:60%}
.faq-item[open] .faq-item__marker{transform:rotate(180deg)}
.faq-item[open] .faq-item__marker--plus{transform:rotate(45deg)}
.faq-answer{
  padding:0 var(--faq-pad-x) var(--faq-pad-y);
  font-size:var(--faq-answer-fs);
  color:var(--faq-answer-color);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.faq-answer a{color:var(--text-link);text-decoration:underline;text-underline-offset:.18em}
.faq-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--hero-grid-gap);align-items:start}
.faq-copy{display:flex;flex-direction:column;gap:var(--space-4);position:sticky;top:calc(var(--header-h) + var(--space-6))}
.faq-photo{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-panel);
  padding:var(--panel-pad);
}
.faq-photo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* The background image and the veil must stay absolutely positioned — hence the
   :not() guard. A bare child-universal rule silently promoted them into the flow. */
.faq-photo>:not(.faq-photo__bg):not(.veil){position:relative;z-index:var(--z-content)}
@media (max-width:1024px){
  .faq-columns{grid-template-columns:minmax(0,1fr)}
  .faq-split{grid-template-columns:minmax(0,1fr)}
  .faq-copy{position:static}
}

/* block: cta-band */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--cta-radius);
  padding:var(--cta-pad-y) var(--cta-pad-x);
  background:var(--cta-bg);
  color:var(--cta-fg);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-5);
}
.cta-band h2{color:var(--cta-fg);max-width:var(--measure-head)}
.cta-band p{color:var(--cta-fg);opacity:.86;max-width:var(--measure)}
.cta-band__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}
.cta-band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.35}
.cta-band>:not(.cta-band__bg):not([class*="pattern-"]){position:relative;z-index:var(--z-content)}
.cta-band--flush{border-radius:0;margin-inline:calc(var(--gutter) * -1)}
.cta-band--soft{--cta-bg:var(--surface-2);--cta-fg:var(--color-ink)}
.cta-band--dark{--cta-bg:var(--grad-panel);--cta-fg:var(--text-on-inverse)}
.cta-band--outline{--cta-bg:transparent;--cta-fg:var(--color-ink);border:var(--border-width) solid var(--border-color)}
@media (max-width:768px){.cta-band__actions{width:100%;flex-direction:column}.cta-band__actions .btn{width:100%}}

/* block: widget-form */
.form-page{padding-block:calc(var(--header-h) + var(--space-8)) var(--section-pad-y)}
.form-page__head{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;text-align:center;margin-bottom:var(--space-8)}
.form-page__steps{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
.form-page__shell{
  max-width:var(--container-narrow);margin-inline:auto;
  /* no inner padding: the widget draws its own card, so the shell would add a
     second visible frame around it */
  padding:0;
  border-radius:var(--preform-radius);
  background:var(--preform-bg);
  border:var(--border-width) solid var(--preform-border-color);
  box-shadow:var(--preform-shadow);
  overflow:hidden;
}
.form-page__note{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--fs-xs);color:var(--text-muted)}
.form-page__note svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}

/* block: prose-page */
/* The header reserves its own height, so this padding is the page title's own breathing
   room and nothing else — adding --header-h here left a phone with a header's worth of
   blank strip above every legal page's heading, on top of the header itself. --first-pad-top is what the header block re-adds when
   the section genuinely runs behind a transparent bar. */
.page-head{--first-pad-top:var(--section-pad-y);padding-block:var(--section-pad-y) var(--space-8)}
.page-head__in{display:flex;flex-direction:column;gap:var(--space-3)}
.page-head--split .page-head__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--hero-grid-gap);align-items:center}
.page-head--panel{background:var(--grad-panel);color:var(--text-on-inverse);--text-heading:var(--text-on-inverse);--text-body:var(--color-w-70)}
.page-head__photo .media{aspect-ratio:var(--card-media-ratio)}
.page-head__meta{font-size:var(--fs-small);color:var(--text-muted)}
.prose-body{padding-top:1rem;padding-bottom:var(--section-pad-y)}
@media (max-width:1024px){.page-head--split .page-head__in{grid-template-columns:minmax(0,1fr)}}

/* block: contact-block */
.contact{padding-block:calc(var(--header-h) + var(--space-8)) var(--section-pad-y)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--hero-grid-gap);align-items:start}
.contact__channels{display:flex;flex-direction:column;gap:var(--space-4)}
.contact__channel{display:flex;gap:var(--space-3);align-items:flex-start}
.contact__channel b{display:block;font-size:var(--fs-small);color:var(--text-muted);font-weight:var(--fw-medium)}
.contact__channel span{font-size:var(--fs-md);color:var(--text-heading);font-weight:var(--fw-semibold)}
.contact__form{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--card-pad);border-radius:var(--card-radius);background:var(--card-bg);border:var(--border-width) solid var(--card-border-color);box-shadow:var(--card-shadow)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--label-fs);color:var(--label-fg);font-weight:var(--fw-medium)}
.field input,.field textarea,.field select{
  min-height:var(--input-h);
  padding:var(--space-3) var(--input-pad-x);
  border:var(--border-width) solid var(--input-border-color);
  border-radius:var(--input-radius);
  background:var(--input-bg);color:var(--input-fg);
  font-size:var(--input-fs);
  transition:var(--transition-color);
}
.field textarea{min-height:var(--textarea-h);resize:vertical;padding-top:var(--space-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--input-placeholder)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--input-border-color-focus);box-shadow:var(--focus-ring)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:1024px){.contact__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.field-row{grid-template-columns:minmax(0,1fr)}}

/* block: site-footer */
.brand-lockup{display:inline-flex;align-items:center;gap:var(--logo-gap);min-width:0}
.brand-mark{
  display:inline-grid;place-items:center;flex:none;
  width:var(--logo-mark-size);height:var(--logo-mark-size);
  border:var(--border-width) solid var(--logo-mark-border-color);
  border-radius:var(--logo-mark-radius);
  background-color:var(--logo-mark-bg);
  background-image:var(--logo-mark-bg-image);
  color:var(--logo-mark-fg);
  box-shadow:var(--logo-mark-shadow);
}
.brand-mark svg,.brand-mark iconify-icon{width:var(--logo-mark-icon-size);height:var(--logo-mark-icon-size)}
/* The Iconify web component draws an inner svg sized in em, so a width on the host leaves
   the drawing at 1em — the icon sat in a corner of its tile. Picked icons are inlined as
   SVG now, but a font-size keeps the component correct if one is ever left unresolved. */
.brand-mark iconify-icon{font-size:var(--logo-mark-icon-size);line-height:1}
/* No tile: the icon carries the mark on its own, at its own size and colour. */
.brand-mark--bare{
  background:none;
  border-color:transparent;
  box-shadow:none;
  width:auto;height:auto;
  color:var(--logo-mark-icon-color);
}
.brand-mark--bare svg,.brand-mark--bare iconify-icon{
  width:var(--logo-mark-bare-size);
  height:var(--logo-mark-bare-size);
}
.brand-mark--bare iconify-icon{font-size:var(--logo-mark-bare-size)}
.brand-word{
  font-family:var(--font-display);
  font-size:var(--logo-text-fs);
  font-weight:var(--logo-text-fw);
  letter-spacing:var(--logo-text-ls);
  white-space:nowrap;
}
@media (max-width:1024px){
  .brand-mark{width:var(--logo-mark-size-mobile);height:var(--logo-mark-size-mobile)}
}

.site-footer{
  position:relative;
  padding-block:var(--footer-pad-y);
  background-color:var(--footer-bg);
  background-image:var(--footer-bg-image);
  color:var(--footer-fg);
  border-radius:var(--footer-radius);
}
.site-footer a{color:var(--footer-link);transition:var(--transition-color)}
.site-footer a:hover{color:var(--footer-link-hover)}
.site-footer__top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;
  padding-bottom:var(--space-6);
}
.footer-logo{display:inline-flex;align-items:center;color:var(--footer-fg)!important}
.site-footer__nav ul{
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);
  padding-block:var(--space-5);
  border-top:var(--border-width) solid var(--footer-border-color);
  border-bottom:var(--border-width) solid var(--footer-border-color);
  font-size:var(--fs-small);
}
.site-footer__disclosure{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding-top:var(--space-6);
  font-size:var(--footer-legal-fs);
  line-height:var(--footer-legal-lh);
  color:var(--footer-legal-color);
}
.site-footer__disclosure h4,.site-footer__disclosure h2{
  font-size:var(--fs-md);color:var(--footer-fg);margin-bottom:var(--space-1);
}
.site-footer__disclosure a{text-decoration:underline;text-underline-offset:.18em}
.site-footer__copy{
  padding-top:var(--space-6);
  font-size:var(--fs-small);color:var(--footer-fg-muted);
}
.site-footer--light{
  --footer-bg:var(--surface-2);
  --footer-fg:var(--color-ink);
  --footer-fg-muted:var(--color-ink-50);
  --footer-link:var(--color-ink-70);
  --footer-link-hover:var(--color-brand);
  --footer-border-color:var(--border-color);
  --footer-legal-color:var(--color-ink-50);
  border-top:var(--border-width) solid var(--border-color);
}
.site-footer--brand{--footer-bg:var(--color-brand);--footer-bg-image:var(--grad-footer)}
.site-footer--card{
  margin:0 var(--gutter) var(--gutter);
  border-radius:var(--radius-panel);
}
@media (max-width:768px){
  /* Logo, CTA and links all centre on a phone. Left-aligned they sat hard against the
     gutter with the rest of the footer text centred under them, which read as a mistake
     rather than as a choice. */
  .site-footer__top{flex-direction:column;align-items:center;text-align:center}
  .site-footer__top .btn{width:auto;margin-inline:auto}
  /* One link per line. Eight legal links wrapped into a ragged three-line block that was
     hard to scan and easy to mis-tap; a single column is both. */
  .site-footer__nav ul{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    gap:var(--space-3);
  }
  .site-footer__nav li{width:100%;text-align:center}
}

/* block: modal-disclosure */
.tpl-modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:none;align-items:center;justify-content:center;
  padding:var(--space-5);
  background:var(--modal-scrim);
}
.tpl-modal.is-open{display:flex}
.tpl-modal__panel{
  position:relative;
  width:100%;max-width:var(--modal-max-w);max-height:86vh;overflow-y:auto;
  padding:var(--modal-pad);
  border-radius:var(--modal-radius);
  background:var(--modal-bg);color:var(--modal-fg);
  box-shadow:var(--modal-shadow);
  animation:tplScaleIn var(--dur-base) var(--ease-out);
}
.tpl-modal__close{
  position:absolute;top:var(--space-4);right:var(--space-4);
  width:var(--icon-btn-size);height:var(--icon-btn-size);display:grid;place-items:center;
  border-radius:var(--radius-circle);background:var(--color-ink-05);color:inherit;
}
.tpl-modal__close svg{width:var(--icon-size);height:var(--icon-size)}
.tpl-modal__body{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--text-body)}
.tpl-modal__body h2,.tpl-modal__body h3{color:var(--modal-fg);font-size:var(--fs-lg);margin-top:var(--space-3)}
.tpl-modal h2:first-child{margin-top:0;font-size:var(--fs-2xl);padding-right:var(--space-12)}