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

:root {
  /* color · Brand */
  --color-brand: var(--color-brand-500);
  --color-brand-strong: var(--color-brand-600);
  --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: var(--color-accent-500);
  --color-accent-strong: var(--color-accent-600);
  --color-accent-soft: var(--color-accent-50);
  --color-accent-contrast: #ffffff;
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-highlight: var(--color-accent);

  /* color · Brand ramp */
  --color-brand-50: #eaf9fc;
  --color-brand-100: #d8f1f6;
  --color-brand-200: #b9e2ea;
  --color-brand-300: #94cdd8;
  --color-brand-400: #6aafbc;
  --color-brand-500: #49939f;
  --color-brand-600: #317b86;
  --color-brand-700: #165d66;
  --color-brand-800: #124d54;
  --color-brand-900: #0b393e;
  --color-brand-950: #021d20;

  /* color · Accent ramp */
  --color-accent-50: #fdf5e8;
  --color-accent-100: #f7ead5;
  --color-accent-200: #ecd6b5;
  --color-accent-300: #dabd8f;
  --color-accent-400: #c09c67;
  --color-accent-500: #ac874f;
  --color-accent-600: #8c6832;
  --color-accent-700: #725121;
  --color-accent-800: #5a3e16;
  --color-accent-900: #442d0e;
  --color-accent-950: #241504;

  /* color · Neutral ramp */
  --color-neutral-50: #edf8fa;
  --color-neutral-100: #e3eef0;
  --color-neutral-200: #d1dcdd;
  --color-neutral-300: #b9c4c5;
  --color-neutral-400: #9ba5a7;
  --color-neutral-500: #7e888a;
  --color-neutral-600: #687173;
  --color-neutral-700: #515b5c;
  --color-neutral-800: #3d4648;
  --color-neutral-900: #2b3435;
  --color-neutral-950: #121a1c;

  /* 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: #1d353d;
  --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-65: color-mix(in srgb, var(--color-ink) 65%, 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: #f2f7f6;
  --surface-2: var(--color-neutral-50);
  --surface-3: var(--color-neutral-100);
  --surface-card: #ffffff;
  --surface-card-2: var(--color-neutral-50);
  --surface-inverse: #0e1116;
  --surface-inverse-2: #151a22;
  --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: #5d7177;
  --text-subtle: var(--color-ink-40);
  --text-link: #1e636c;
  --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-on-brand-body: #000000;
  --text-eyebrow: #1e636c;
  --text-brand: #1e636c;
  --text-brand-on-inverse: #49939f;

  /* border · Borders */
  --border-color: var(--color-ink-10);
  --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(180deg, var(--color-brand-400) 0%, var(--color-brand-600) 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, var(--surface-inverse-2) 0%, var(--surface-inverse) 100%);
  --grad-footer: var(--grad-panel);
  --grad-hero-veil: linear-gradient(180deg, rgba(8,12,18,.62) 0%, rgba(8,12,18,.36) 45%, rgba(8,12,18,.66) 100%);
  --grad-hero-veil-mobile: linear-gradient(180deg, rgba(8,12,18,.6) 0%, rgba(8,12,18,.5) 40%, rgba(8,12,18,.62) 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', Arial, sans-serif;
  --font-display: 'Manrope', Georgia, 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-semibold);
  --fw-display: var(--fw-semibold);
  --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(12px, .6vw + 9.5px, 13px);
  --fs-sm: clamp(12px, .8vw + 10px, 14px);
  --fs-base: clamp(14px, .9vw + 11px, 16px);
  --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: clamp(34px, 4.4vw + 14px, 58px);
  --fs-h2: clamp(28px, 3vw + 12px, 42px);
  --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: clamp(11px, .6vw + 8.5px, 12px);
  --fs-eyebrow: clamp(12px, .5vw + 10.5px, 13px);
  --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.12;
  --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: -.005em;
  --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: 12px;
  --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: 1184px;
  --container-wide: 1440px;
  --container-inner: 1120px;
  --container-narrow: 820px;
  --container-prose: 760px;
  --gutter: clamp(10px, 4vw, 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: 86px;
  --header-h-mobile: 72px;
  --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: 38px;
  --logo-h-mobile: 32px;

  /* 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;
  --bp-h-short: 900px;
  --bp-h-shorter: 780px;

  /* radius · Radii */
  --radius-none: 0px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-3xl: 40px;
  --radius-pill: 100px;
  --radius-circle: 50%;
  --radius: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-card-inner: var(--radius-md);
  --radius-btn: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-icon: var(--radius-sm);
  --radius-badge: var(--radius-sm);
  --radius-media: var(--radius-xl);
  --radius-panel: var(--radius-xl);
  --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 18px 50px rgba(16,20,28,.12);
  --shadow-xl: 0 28px 70px rgba(16,20,28,.16);
  --shadow-2xl: 0 40px 100px rgba(16,20,28,.22);
  --shadow-card: var(--shadow-md);
  --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: none;
  --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: 320ms;
  --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: 24px;
  --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;
  --z-overlay: 140;
  --z-menu: 150;
  --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-sm);
  --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: none;
  --btn-shadow: var(--shadow-none);
  --btn-shadow-hover: var(--shadow-btn-hover);
  --btn-transform-hover: var(--lift);
  --btn-sheen: 0;

  /* component · Badge & chip */
  --badge-bg: var(--color-brand-tint);
  --badge-fg: #1e636c;
  --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-md);
  --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: 0px;
  --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-lg);
  --card-shadow-hover: var(--shadow-xl);
  --card-transform-hover: var(--lift-lg);

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

  /* component · Logo */
  --logo-mark-size: 38px;
  --logo-mark-size-mobile: 32px;
  --logo-mark-radius: var(--radius-circle);
  --logo-mark-bg: #165d66;
  --logo-mark-fg: #ffffff;
  --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: 22px;
  --logo-text-fw: var(--fw-bold);
  --logo-text-ls: var(--ls-tight);
  --logo-gap: var(--space-2-5);

  /* component · Header */
  --nav-bg: #f2f7f6;
  --nav-bg-scrolled: var(--color-white);
  --nav-fg: #1d353d;
  --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;
  --tap-target-min: 44px;
  --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-veil-mobile: var(--grad-hero-veil-mobile);
  --hero-text-shadow: 0 1px 2px rgba(8,12,18,.45), 0 0 24px rgba(8,12,18,.25);
  --hero-radius: var(--radius-2xl);
  --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-title-fs-mobile: 28px;
  --hero-title-lh-mobile: 1.2;
  --hero-title-fs-short: clamp(30px, 3vw + 8px, 42px);
  --hero-pad-top-short: clamp(12px, 1.6vw, 20px);
  --hero-pad-bottom-short: clamp(20px, 3vw, 36px);
  --hero-copy-gap-short: var(--space-3);
  --hero-copy-gap-mobile: var(--space-4);
  --hero-pattern-color: var(--color-w-10);
  --hero-pattern-size: 48px;

  /* component · Pre-form */
  --preform-bg: var(--color-w-90);
  --preform-fg: var(--color-ink);
  --preform-link-color: var(--text-link);
  --preform-icon-color: var(--trust-icon-color);
  --widget-heading-fs: clamp(17px, 2.2vw, 22px);
  --preform-gap: var(--space-5);
  --preform-gap-mobile: var(--space-4);
  --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-pad-mobile: 12px;
  --preform-shadow: var(--shadow-xl);
  --preform-border-color: var(--color-w-60);
  --preform-max-w: 460px;
  --preform-amount-color: var(--text-brand);
  --range-track-h: 10px;
  --range-track-bg: color-mix(in srgb, var(--preform-fg) 12%, transparent);
  --range-fill: var(--grad-brand-r);
  --range-thumb-size: 28px;
  --range-thumb-bg: var(--preform-bg);
  --range-thumb-border: var(--color-brand);
  --range-thumb-shadow: var(--shadow-md);
  --quickpick-h: 46px;
  --quickpick-bg: color-mix(in srgb, var(--preform-fg) 7%, var(--preform-bg));
  --quickpick-bg-active: var(--color-brand);
  --quickpick-fg: color-mix(in srgb, var(--preform-fg) 82%, transparent);
  --quickpick-fg-active: var(--color-brand-contrast);
  --quickpick-radius: var(--radius-md);

  /* component · Amount picker */
  --picker-amount-fs: var(--fs-3xl);
  --picker-amount-fs-sm: var(--fs-2xl);
  --picker-label-fs: var(--fs-sm);
  --picker-label-fg: var(--text-muted);
  --picker-label-tracking: .08em;
  --picker-question-fs: var(--fs-sm);
  --picker-gauge-w: clamp(240px, 27vw, 320px);
  --picker-gauge-w-mobile: 210px;
  --picker-gauge-stroke: 13;
  --picker-gauge-knob: 7.6;
  --picker-track-bg: color-mix(in srgb, var(--preform-fg) 12%, transparent);
  --picker-gauge-track: color-mix(in srgb, var(--preform-fg) 55%, transparent);
  --picker-fill: var(--color-brand);
  --picker-fill-soft: var(--color-brand-400);
  --picker-knob-bg: var(--preform-bg);
  --picker-knob-ring: var(--color-brand);
  --picker-knob-shadow: var(--shadow-md);
  --picker-step-size: 58px;
  --picker-step-bg: var(--color-brand);
  --picker-step-fg: var(--color-brand-contrast);
  --picker-step-radius: var(--radius-md);
  --picker-step-shadow: var(--shadow-btn);
  --picker-pill-h: 68px;
  --picker-pill-bg: color-mix(in srgb, var(--preform-fg) 7%, var(--preform-bg));
  --picker-pill-btn-bg: var(--preform-bg);
  --picker-pill-rail-h: 6px;
  --picker-seg-h: 52px;
  --picker-seg-gap: var(--space-1-5);
  --picker-seg-bg: color-mix(in srgb, var(--preform-fg) 9%, transparent);
  --picker-seg-past-bg: color-mix(in srgb, var(--picker-fill) 42%, transparent);
  --picker-seg-active-bg: var(--color-brand);
  --picker-seg-radius: var(--radius-sm);
  --picker-seg-rail-bg: color-mix(in srgb, var(--preform-fg) 6%, var(--preform-bg));
  --picker-bubble-bg: var(--color-brand);
  --picker-bubble-fg: var(--text-on-brand-body);
  --picker-tick-h: 11px;
  --picker-tick-h-active: 26px;
  --picker-tick-w: 2px;
  --picker-tick-color: color-mix(in srgb, var(--preform-fg) 26%, transparent);
  --picker-tick-active: var(--color-brand);
  --picker-drum-item-h: 54px;
  --picker-drum-item-h-mobile: 46px;
  --picker-drum-fs: clamp(29px, 3.2vw, 46px);
  --picker-drum-fade: color-mix(in srgb, var(--preform-fg) 34%, transparent);
  --picker-drum-band-bg: color-mix(in srgb, var(--picker-fill) 16%, transparent);
  --picker-arrow-bg: color-mix(in srgb, var(--preform-fg) 7%, var(--preform-bg));
  --picker-split-h: 68px;
  --picker-split-bg: color-mix(in srgb, var(--preform-fg) 10%, var(--preform-bg));
  --picker-split-fill: var(--color-brand);
  --picker-split-fg: var(--text-on-brand-body);
  --picker-split-radius: var(--radius-md);
  --picker-grip-w: 18px;
  --picker-sign-stroke: 2.4;
  --picker-motion: var(--dur-slow) var(--ease-out);
  --preform-email-h: var(--input-h);
  --preform-email-bg: color-mix(in srgb, var(--preform-fg) 4%, var(--preform-bg));
  --preform-email-fg: var(--preform-fg);
  --preform-email-placeholder: color-mix(in srgb, var(--preform-fg) 64%, transparent);
  --preform-email-border: color-mix(in srgb, var(--preform-fg) 22%, transparent);
  --preform-error-color: var(--color-danger);

  /* 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: #1e636c;

  /* 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: #1d353d;
  --footer-bg-image: none;
  --footer-fg: #f2f7f6;
  --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);
  --ssl-color: var(--text-muted);
  --trust-pad-y: var(--space-6);
  --trust-divider-color: var(--border-color);
  --stat-value-fs: var(--fs-stat);
  --stat-value-color: #1e636c;
  --option-amount-color: var(--text-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 · Design DNA hooks */
  --hl-color: inherit;
  --hl-bg-image: none;
  --hl-clip: border-box;
  --hl-fill: currentColor;
  --hl-decoration: underline;
  --hl-underline-color: var(--color-brand);
  --hl-underline-h: .14em;
  --media-filter: none;
  --media-tint: transparent;
  --media-tint-blend: multiply;
  --divider-h: 0px;
  --divider-clip: none;
  --divider-mask: none;
  --btn-arrow-display: none;
  --btn-arrow-size: 1em;
  --btn-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E");
  --ls-btn: var(--ls-normal);
  --card-accent-w: 0px;
  --card-accent-h: 0px;
  --card-accent-bg: var(--grad-brand);
  --card-accent-radius: 0;
  --page-bg-image: none;
  --page-bg-size: auto;
  --page-bg-repeat: repeat;
  --page-grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
  --page-grid: linear-gradient(color-mix(in srgb, var(--color-ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-ink) 5%, transparent) 1px, transparent 1px);
  --page-glow: radial-gradient(60% 24% at 12% 0%, color-mix(in srgb, var(--color-brand) 12%, transparent), transparent 70%), radial-gradient(50% 20% at 90% 60%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%);
  --divider-wave: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 60C240 100 480 100 720 60S1200 20 1440 60V100H0Z%27/%3E%3C/svg%3E") center/100% 100% no-repeat;
  --divider-curve: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 100%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 100C360 0 1080 0 1440 100Z%27/%3E%3C/svg%3E") center/100% 100% no-repeat;
  --divider-slant: polygon(0 100%, 100% 0, 100% 100%);
  --img-ph-bg: linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 14%, var(--surface-2)), color-mix(in srgb, var(--color-accent) 10%, var(--surface-2)));
  --img-ph-fg: var(--color-brand);
  --img-ph-min-h: clamp(140px, 22vw, 320px);

  /* 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;
  --apr-table-min-w: 560px;
  --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%}
/*
 * The page surface is painted on <html> as well as <body>, and the body's background, text
 * colour and font are !important. The lead widget's own stylesheet, loaded from its CDN,
 * carries a body rule (a font, a dark grey colour, a faint gradient background) that lands
 * after ours: every dark or tinted theme turned white behind its sections and its copy went
 * dark grey the moment a hero carried the live widget. A third-party sheet must not decide
 * the page's colour or face, so these are the declarations in the engine that insist.
 */
html{background:var(--surface)}
body{
  font-family:var(--font-body)!important;
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-normal);
  color:var(--text-body)!important;
  background-color:var(--surface)!important;
  background-image:var(--page-bg-image)!important;
  background-size:var(--page-bg-size);
  background-repeat:var(--page-bg-repeat);
  -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);
}
/* Shaped section edges (DNA): a section draws its own background upward over the section
   above it, as a slant, a curve or a wave. Height 0 — the default — draws nothing, and two
   sections of the same colour meet invisibly whatever the shape. */
:is(.section,.hero,.trust-strip)+:is(.section,.trust-strip)::before{
  content:'';position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  top:calc(var(--divider-h) * -1);
  height:calc(var(--divider-h) + var(--border-width));
  background:var(--section-bg,var(--surface));
  clip-path:var(--divider-clip);
  -webkit-mask:var(--divider-mask);mask:var(--divider-mask);
}
:is(.section,.hero)+.trust-strip::before{background:var(--trust-bg)}
.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(--text-brand-on-inverse);
  --trust-divider-color:var(--border-color-inverse);
  /* Brand-as-text roles: the brand itself can vanish on ink (a navy, a forest green). */
  --text-brand:var(--text-brand-on-inverse);
  --text-eyebrow:var(--text-brand-on-inverse);
  --text-link:var(--text-brand-on-inverse);
  --text-link-hover:var(--text-on-inverse);
  --stat-value-color:var(--text-brand-on-inverse);
  --option-amount-color:var(--text-brand-on-inverse);
  --ssl-color:var(--text-on-inverse-muted);
  --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-body);
  --text-brand:var(--text-on-brand);
  --text-eyebrow:var(--text-on-brand-body);
  --text-link:var(--text-on-brand);
  --text-link-hover:var(--text-on-brand-body);
  --option-amount-color:var(--text-on-brand);
  --ssl-color:var(--text-on-brand-body);
  --trust-icon-color:var(--text-on-brand);
  --text-heading:var(--text-on-brand);
  --text-body:var(--text-on-brand-body);
  --text-muted:var(--text-on-brand-body);
  --text-subtle:var(--text-on-brand-body);
  --sechead-sub-color:var(--text-on-brand-body);
  --stat-value-color:var(--text-on-brand);
  --stat-label-color:var(--text-on-brand-body);
  --badge-bg:var(--color-w-15);
  --badge-fg:var(--text-on-brand);
  --text-eyebrow:var(--text-on-brand);
  --ibox-bg:var(--color-w-15);
  --ibox-fg:var(--text-on-brand);
  --border-color:var(--color-w-25);
  --card-bg:var(--color-w-10);
  --card-border-color:var(--color-w-15);
  --card-fg:var(--text-on-brand-body);
  --faq-bg:var(--color-w-10);
  --faq-bg-open:var(--color-w-15);
  --faq-fg:var(--text-on-brand);
  --faq-border-color:var(--color-w-15);
  --faq-answer-color:var(--text-on-brand-body);
  --faq-marker-bg:var(--color-w-15);
  --faq-marker-fg:var(--text-on-brand);
  --trust-bg:transparent;
  --trust-fg:var(--text-on-brand-body);
  --trust-icon-color:var(--text-on-brand);
  --trust-divider-color:var(--color-w-25);
}
.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);
}
/* When the split collapses to one column its paragraphs would run the whole page; a line
   of 120 characters is not reading, it is scanning. */
.split p{max-width:var(--measure-wide)}
.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-btn);
  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)}
/* The CTA arrow the DNA can switch on: drawn from currentColor through a mask, so it follows the label colour. */
.btn:not(.btn--sm) .btn__in::after{
  content:'';display:var(--btn-arrow-display);flex:none;
  width:var(--btn-arrow-size);height:var(--btn-arrow-size);
  background:currentColor;
  -webkit-mask:var(--btn-arrow-mask) center/contain no-repeat;mask:var(--btn-arrow-mask) center/contain no-repeat;
}
.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 ---------- */
.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;
  /*
   * A badge is a pill: it must hug its text.
   *
   * An inline-flex display is not enough, because a badge usually sits in a column flex
   * container (the hero copy, a .stack) whose default align-items is stretch — which pulled
   * the eyebrow out into a full-width band of background colour across the top of the hero.
   * Hugging is therefore the default, and a container that means to centre its children says
   * so by setting --stack-self, which inherits down to here.
   */
  align-self:var(--stack-self,flex-start);
  /* The same rule for a grid parent, where the horizontal axis is justify-self. */
  justify-self:var(--stack-self,start);
}
.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 ---------- */
/* The headline highlight follows the DNA hooks: a colour, a gradient fill, an underline, or nothing. */
.accent{
  color:var(--hl-color);
  background-image:var(--hl-bg-image);
  -webkit-background-clip:var(--hl-clip);background-clip:var(--hl-clip);
  -webkit-text-fill-color:var(--hl-fill);
  text-decoration-line:var(--hl-decoration);
  text-decoration-color:var(--hl-underline-color);
  text-decoration-thickness:var(--hl-underline-h);
  text-underline-offset:.08em;
  text-decoration-skip-ink:none;
}
.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)}
/* The accent bar the DNA can add to every card: a top or a left bar in the brand gradient. */
.card::before{
  content:'';position:absolute;top:0;left:0;
  width:var(--card-accent-w);height:var(--card-accent-h);
  background:var(--card-accent-bg);border-radius:var(--card-accent-radius);
  pointer-events:none;
}
.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);max-width:var(--measure-wide)}
.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);
  /* Whatever this head aligns its children to, a badge inside it follows. */
  --stack-self: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)}
/* A lead paragraph outside a section head (page heads, the form page) keeps the same measure. */
.sec-sub{max-width:var(--measure-wide)}

/* ---------- Media ---------- */
.media{position:relative;border-radius:var(--radius-media);overflow:hidden;background:var(--surface-2)}
/* An unfilled photo slot: a brand-tinted panel the size the photo would be. */
.img-ph{
  display:grid;place-items:center;width:100%;height:100%;min-height:var(--img-ph-min-h);
  background:var(--img-ph-bg);color:var(--img-ph-fg);border-radius:inherit;
  aspect-ratio:var(--card-media-ratio);
}
.media .img-ph,.card__media .img-ph,.option-card__media .img-ph{aspect-ratio:auto}
.card__media .img-ph,.option-card__media .img-ph{aspect-ratio:var(--card-media-ratio)}
/* A photo that failed to load (runtime photo-fallback): its frame shows the same panel. */
.is-photo-missing{background:var(--img-ph-bg)}
.is-photo-missing img[data-tpl-broken]{visibility:hidden}
.hero__bg-wrap.is-photo-missing{display:none}
.img-ph__hint{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);opacity:var(--op-80)}
.img-ph__hint svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}
.media img{width:100%;height:100%;object-fit:cover;object-position:var(--_focal,50% 50%)}
/* Photo treatment (DNA): one filter and one tint over every photograph so the set reads as one. */
.media img,.card__media img,.option-card__media img,.faq-photo img,.hero__bg{filter:var(--media-filter)}
.media::after,.card__media::after,.option-card__media::after,.hero__bg-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--media-tint);mix-blend-mode:var(--media-tint-blend);
}
.card__media,.option-card__media{position:relative}
.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(--ssl-color);font-weight:var(--fw-medium)}
.ssl svg{width:var(--icon-size-sm);height:var(--icon-size-sm);color:var(--trust-icon-color)}
.disclosure-link{text-decoration:underline;text-underline-offset:.18em;color:var(--text-muted)}
.disclosure-link:hover{color:var(--text-link)}

/* ---------- Widget host ---------- */
/* Shared by the hero's widget aside and the dedicated form page. It reserves the widget's
   height before the module mounts, so the page does not jump — and so the fold check can
   measure where the first question will be. */
.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)}

/* ---------- 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);max-width:var(--measure-wide)}

/* ===== 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;align-items:center;gap:var(--hamburger-gap);
  /* The bars keep their own width; the button they sit in is a thumb-sized target. */
  width:var(--tap-target-min);height:var(--tap-target-min);
  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(--text-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){
  .navbar__cta{display:none}
}

/* block: widget-form */
/* The header is in flow and already reserves its own height, so the page pays only for its
   own breathing room. The widget's first question has to be on screen without a scroll on
   every device, which is why the head above it is kept short and the phone rules below
   strip the shell down to the widget itself. */
.form-page{--first-pad-top:var(--section-pad-y-sm);padding-block:var(--section-pad-y-sm) var(--section-pad-y)}
.form-page__head{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;--stack-self:center;text-align:center;margin-bottom:var(--space-6)}
.form-page__head h1{font-size:var(--fs-h2)}
.form-page__apr{font-size:var(--fs-legal);line-height:var(--lh-legal);color:var(--text-muted);max-width:var(--measure-wide);margin-inline:auto;text-align:center;margin-top:var(--space-4)}
.form-page__shell{
  max-width:var(--container-narrow);margin-inline:auto;
  padding:var(--preform-pad);
  border-radius:var(--preform-radius);
  background:var(--preform-bg);
  border:var(--border-width) solid var(--preform-border-color);
  box-shadow:var(--preform-shadow);
}
.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)}
@media (max-width:768px){
  .form-page{padding-top:var(--space-4)}
  .form-page__head{gap:var(--space-2);margin-bottom:var(--space-4)}
  .form-page__head h1{font-size:var(--hero-title-fs-mobile);line-height:var(--hero-title-lh-mobile)}
  .form-page__head .sec-sub{font-size:var(--fs-small)}
  /* On a phone the card shell is dropped: the widget runs edge to edge inside the page
     gutter, which is what the whole page exists to show. */
  .form-page__shell{padding:0;border:0;box-shadow:none;background:transparent;max-width:none}
}

/* 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);--text-muted:var(--color-w-50);
  --sechead-sub-color:var(--text-on-inverse-muted);
  --badge-bg:var(--badge-inverse-bg);--badge-fg:var(--badge-inverse-fg);
  --text-eyebrow:var(--text-brand-on-inverse);--text-link:var(--text-brand-on-inverse);--text-link-hover:var(--text-on-inverse);
}
.page-head__photo .media{aspect-ratio:var(--card-media-ratio)}
.page-head__meta{font-size:var(--fs-small);color:var(--text-muted)}
.page-head__intro{max-width:var(--measure-wide);color:var(--text-body)}
.page-head__intro p{margin:0}
.page-head__intro p+p{margin-top:var(--space-3)}
.page-head--panel .page-head__intro{color:var(--color-w-70)}
.prose-body{padding-bottom:var(--section-pad-y)}
@media (max-width:1024px){.page-head--split .page-head__in{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)}
/* The footer's link colour is for its list, not for a button: a translucent label on a
   brand fill measured 2.3:1. */
.site-footer a.btn{color:var(--_fg)}
.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__operator{font-size:var(--footer-legal-fs);line-height:var(--footer-legal-lh);color:var(--footer-legal-color);margin-bottom:var(--space-3)}
.site-footer__operator a{color:var(--footer-link)}
.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);
  /* text-muted, not half-strength ink: the theme repair step guarantees text-muted reads on
     the alternating band this footer sits on; 50% ink on a mid-grey band measured 2.9:1. */
  --footer-fg-muted:var(--text-muted);
  --footer-link:var(--text-body);
  --footer-link-hover:var(--text-link);
  --footer-border-color:var(--border-color);
  --footer-legal-color:var(--text-muted);
  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}
  /* Each link is a thumb target: full width, tap-height, the gap absorbed into the padding
     so the column reads the same but nothing is a hairline-thin sliver to hit. */
  .site-footer__nav ul{gap:0}
  .site-footer__nav li a{display:flex;align-items:center;justify-content:center;min-height:var(--tap-target-min);padding-inline:var(--space-3)}
}

/* 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)}

:root{--af-brand:#165d66;--af-accent:#ac874f;--af-ink:#1d353d;--af-paper:#f2f7f6;--af-soft:#dbece8;--af-display:'Manrope',Arial,sans-serif;--af-weight:600}
/* Bespoke email-visitor experience. Legal text is supplied by TPL Site Engine. */
:root{--af-serif:Georgia,serif;--af-radius:24px;--af-shadow:0 18px 60px #10291c0b}
body{background:var(--af-paper);color:var(--af-ink)}
.site-header{background:var(--af-paper)!important;border-bottom:1px solid color-mix(in srgb,var(--af-ink) 12%,transparent);box-shadow:none!important}
.site-header__bar{background:var(--af-paper)!important;box-shadow:none!important;border-radius:0!important}
.navbar__logo{max-width:320px}.navbar__menu a{font-size:13px!important;font-weight:600!important}
.logo-text,.brand-mark__text{letter-spacing:-.035em!important}
.navbar__cta .btn,.site-footer .btn{font-size:13px!important;min-height:46px}
.af{font-family:Arial,sans-serif;font-family:var(--font-body,Arial,sans-serif);color:var(--af-ink);font-size:16px;line-height:1.65}
.af *{box-sizing:border-box}.af h1,.af h2,.af h3,.af p,.af figure{margin:0}.af a{color:inherit}
.af-wrap{width:min(1184px,calc(100% - 64px));margin-inline:auto}
.af-eye{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;display:flex;gap:12px;align-items:center;margin-bottom:24px!important}
.af-eye::before{content:'';height:1px;width:28px;background:currentColor}
.af h1{font-family:var(--af-display);font-size:clamp(40px,4.35vw,66px);font-weight:var(--af-weight,400);line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.af h2{font-family:var(--af-display);font-size:clamp(32px,3vw,46px);font-weight:var(--af-weight,400);line-height:1.13;letter-spacing:-.035em;text-wrap:balance}
.af h3{font-size:18px;letter-spacing:-.025em;line-height:1.3}
.af p{font-size:15px;line-height:1.8}.af-lead{max-width:500px;margin-top:24px!important;opacity:.82;font-size:16px!important}
.af-hero{padding:64px 0 38px}.af-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:62px;align-items:center}
.af-visual{position:relative;min-width:0}.af-visual img{width:100%;height:480px;object-fit:cover;border-radius:var(--af-radius);display:block}
.af-visual figcaption{display:flex;align-items:center;gap:9px;font-size:10px;text-transform:uppercase;letter-spacing:.15em;margin-top:14px}
.af-visual figcaption::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--af-brand)}
.af-tag{position:absolute;bottom:42px;left:-24px;padding:18px 22px;background:var(--af-paper);box-shadow:var(--af-shadow);border:1px solid #ffffff80;border-radius:14px;display:flex;gap:14px;align-items:center;max-width:240px}
.af-tag span{font-size:12px;line-height:1.45}.af-tag strong{display:block;font-size:13px;margin-bottom:3px}
.af-icon{width:26px;height:26px;flex-shrink:0;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.af-action{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:54px;padding:14px 24px;background:var(--af-brand);color:#fff!important;border:1px solid var(--af-brand);border-radius:9px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;font-family:inherit;line-height:1.4}
.af-action:hover{transform:translateY(-2px);filter:brightness(.94);box-shadow:0 8px 20px #10291c18}.af-action .af-icon{width:20px;height:20px}
.af-textlink{text-underline-offset:5px;font-size:12px;font-weight:600}
.af-actions{margin-top:30px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.af-small{font-size:11px!important;line-height:1.65!important;opacity:.76;margin-top:15px!important;max-width:500px}
.af-picker{margin-top:27px;padding:20px;background:color-mix(in srgb,var(--af-paper) 80%,white);border:1px solid color-mix(in srgb,var(--af-brand) 18%,transparent);border-radius:14px;max-width:470px}
.af-picker-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.af-picker label{font-size:12px;font-weight:600}.af-picker output{font-size:23px;font-weight:600;letter-spacing:-.04em}
.af-picker input[type=range]{display:block;width:100%;accent-color:var(--af-brand);height:22px;cursor:pointer;margin:0}.af-picker-limits{display:flex;justify-content:space-between;font-size:10px;margin:4px 0 14px;opacity:.8}.af-picker .af-action{width:100%}
.af-divider{border-top:1px solid color-mix(in srgb,var(--af-ink) 15%,transparent);border-bottom:1px solid color-mix(in srgb,var(--af-ink) 15%,transparent);margin-top:38px;padding:21px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-size:12px}.af-divider div{display:flex;gap:12px;align-items:center}.af-divider .af-icon{width:20px;height:20px}
.af-section{padding:86px 0}.af-section-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:36px}.af-section-head h2{max-width:570px}.af-section-head>p{max-width:310px;font-size:13px;opacity:.8}
.af-email{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}.af-email h2{max-width:440px}.af-email p{max-width:540px;opacity:.86}.af-email-links{display:flex;flex-wrap:wrap;gap:25px;margin-top:22px}.af-email-marker{width:52px;height:52px;display:grid;place-items:center;background:var(--af-soft);border-radius:14px;margin-bottom:20px}
.af-tint{background:var(--af-soft)}.af-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.af-card{padding:30px;min-width:0;border:1px solid color-mix(in srgb,var(--af-brand) 16%,transparent);border-radius:var(--af-radius);background:var(--af-paper);transition:transform .3s,box-shadow .3s}.af-card:hover{transform:translateY(-4px);box-shadow:var(--af-shadow)}.af-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:45px}.af-num{font-size:11px;font-weight:700;letter-spacing:.08em;opacity:.6}.af-card p{font-size:13px;margin-top:13px;opacity:.85}
.af-story{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}.af-story-art{background:var(--af-soft);aspect-ratio:1.15;border-radius:var(--af-radius);position:relative;overflow:hidden;display:grid;place-items:center}.af-story-art>svg{width:90%;height:90%}.af-story-copy>p{margin-top:24px;opacity:.85}.af-checklist{margin-top:24px;padding:0;list-style:none}.af-checklist li{display:flex;gap:14px;align-items:center;font-size:13px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--af-ink) 12%,transparent)}.af-checklist .af-icon{height:18px;width:18px}
.af-faq{display:grid;grid-template-columns:.78fr 1.22fr;gap:90px}.af-faq-intro>p{margin-top:22px;opacity:.8}.af-faq details{border-bottom:1px solid color-mix(in srgb,var(--af-ink) 20%,transparent)}.af-faq details:first-child{border-top:1px solid color-mix(in srgb,var(--af-ink) 20%,transparent)}.af-faq summary{list-style:none;font-size:14px;font-weight:600;cursor:pointer;padding:23px 36px 23px 0;position:relative;line-height:1.5}.af-faq summary::-webkit-details-marker{display:none}.af-faq summary::after{content:'+';position:absolute;right:2px;top:19px;font-size:22px;font-weight:400}.af-faq details[open] summary::after{content:'−'}.af-faq details p{padding:0 28px 23px 0;font-size:13px;opacity:.84}.af-faq details p a{text-decoration:underline}
.af-close{padding:58px;background:var(--af-brand);color:var(--af-paper);border-radius:var(--af-radius);display:flex;justify-content:space-between;align-items:center;gap:44px;margin-bottom:65px}.af-close h2{max-width:620px}.af-close p{font-size:12px;margin-top:18px;opacity:.88}.af-close .af-action{background:var(--af-paper);color:var(--af-ink)!important;border-color:var(--af-paper);flex-shrink:0;max-width:290px}
.af-pagehero{padding:70px 0 58px}.af-pagehero h1{max-width:830px}.af-pagehero p{max-width:670px}.af-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.af-contact-grid .af-card{padding:36px}.af-contact-grid h2{font-size:30px;margin:22px 0 18px}.af-contact-grid a{overflow-wrap:anywhere}.af-contact-grid .af-textlink{display:inline-block;margin-top:20px}.af-note-box{margin-top:28px;background:var(--af-soft);padding:26px;border-radius:14px}.af-note-box p{font-size:13px}
.site-footer{background:var(--af-ink)!important;color:var(--af-paper)!important;border-radius:0!important}.site-footer__disclosure{color:var(--af-paper)!important;opacity:.8;font-size:11px!important;line-height:1.8!important}.site-footer__disclosure p{font-size:11px!important}.site-footer a,.site-footer h4,.site-footer h2{color:inherit!important}.site-footer__brand{color:var(--af-paper)!important}.site-footer__copy{opacity:.72}
:focus-visible{outline:3px solid var(--af-accent)!important;outline-offset:5px!important}
.af-reveal{animation:af-enter .65s ease both}.af-visual{animation:af-enter .9s ease both}.af-tag{animation:af-float 7s ease-in-out infinite}
@keyframes af-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes af-float{50%{transform:translateY(-7px)}}
/* Each composition follows the landscape and character of its brand. */
.af-grove .af-visual img{border-radius:48% 48% 12px 12px}.af-grove .af-card{border-radius:4px}.af-grove .af-story-art{border-radius:50% 50% 6px 6px}
.af-harbor .af-hero-grid{grid-template-columns:1fr 1.04fr}.af-harbor .af-visual{order:-1}.af-harbor .af-visual img{height:490px;border-radius:8px 80px 8px 8px}.af-harbor .af-tag{left:auto;right:-20px}.af-harbor .af-card{border-radius:8px;border-top:3px solid var(--af-accent)}
.af-atlantic .af-hero{background:var(--af-ink);color:var(--af-paper);padding-top:54px}.af-atlantic .af-visual img{border-radius:2px;height:500px}.af-atlantic .af-picker{background:#ffffff0b;border-color:#ffffff35}.af-atlantic .af-action{background:var(--af-paper);color:var(--af-ink)!important}.af-atlantic .af-tag{background:var(--af-paper);color:var(--af-ink);border-radius:2px}.af-atlantic .af-divider{border-color:#ffffff25}.af-atlantic .af-card{border-radius:2px}.af-atlantic .af-close .af-action{background:var(--af-paper)}
.af-oasis .af-hero-grid{grid-template-columns:1.04fr 1fr}.af-oasis .af-visual img{border-radius:48% 48% 44% 44%;height:500px}.af-oasis .af-action{border-radius:100px}.af-oasis .af-card{border-radius:35px}.af-oasis .af-close{border-radius:65px 12px 65px 12px}
.af-pacific .af-hero-grid{gap:44px}.af-pacific .af-visual img{height:530px;border-radius:6px 6px 100px 6px}.af-pacific .af-tag{border-radius:3px;bottom:65px}.af-pacific .af-card:nth-child(2){background:var(--af-brand);color:#fff}.af-pacific .af-story-art{border-radius:6px 90px 6px 6px}
.af-silver .af-hero-grid{grid-template-columns:1fr 1.04fr}.af-silver .af-visual{order:-1}.af-silver .af-visual img{border-radius:180px 180px 18px 18px}.af-silver .af-tag{left:auto;right:-20px}.af-silver .af-card{background:transparent;border-radius:0;border-width:0 0 1px;padding-left:0}.af-silver .af-close{border-radius:10px}
.af-velvet .af-hero{padding-top:75px}.af-velvet .af-visual img{border-radius:180px 12px 180px 12px;height:510px}.af-velvet .af-card{border-radius:28px 6px 28px 6px}.af-velvet .af-close{border-radius:55px 6px 55px 6px}
.af-fresh .af-visual img{border-radius:35px;height:490px}.af-fresh .af-picker{box-shadow:var(--af-shadow);background:#fff}.af-fresh .af-card{border:0;box-shadow:var(--af-shadow)}.af-fresh .af-tag{border-radius:100px}.af-fresh .af-action{border-radius:100px}
.af-glade .af-visual{order:-1}.af-glade .af-visual img{border-radius:50% 50% 5px 5px}.af-glade .af-tag{left:auto;right:-20px}.af-glade .af-card{border-radius:0;border-width:1px 0 0;background:transparent}.af-glade .af-story-art{border-radius:4px 70px 4px 70px}
.af-gate .af-visual img{border-radius:46% 46% 0 0;height:520px}.af-gate .af-card{border-radius:0;border-top:3px solid var(--af-accent)}.af-gate .af-action,.af-gate .af-picker,.af-gate .af-close{border-radius:2px}.af-gate .af-story-art{border-radius:150px 150px 0 0}
.af-crest .af-hero{background:var(--af-soft)}.af-crest .af-visual img{border-radius:10px 90px 10px 10px;height:500px}.af-crest .af-card:nth-child(3){background:var(--af-brand);color:white}.af-crest .af-close{border-radius:8px 60px 8px 8px}
@media(min-width:1500px){.af-hero{padding-top:80px;padding-bottom:44px}}
@media(max-width:1024px){.af-hero-grid{gap:32px!important}.af h1{font-size:48px}.af-visual img{height:450px!important}.af-story,.af-faq,.af-email{gap:40px}.af-card{padding:23px}.af-tag{left:12px!important;right:auto!important}.af-section{padding:68px 0}.af-close{padding:40px}.af-close .af-action{max-width:240px}}
@media(max-width:760px){.af-wrap{width:calc(100% - 40px)}.af-hero{padding:38px 0 24px!important}.af-hero-grid{grid-template-columns:1fr!important;gap:30px!important}.af-visual{order:initial!important}.af-visual img{height:350px!important;max-height:100vw}.af-visual figcaption{font-size:9px}.af h1{font-size:44px;line-height:1.08}.af h2{font-size:33px}.af-eye{font-size:9px;letter-spacing:.14em;margin-bottom:19px!important}.af-lead{font-size:15px!important;margin-top:20px!important}.af-picker{max-width:none}.af-tag{bottom:38px;padding:13px 17px}.af-divider{gap:15px;margin-top:26px;font-size:10px}.af-divider div{gap:8px;align-items:flex-start}.af-divider .af-icon{width:17px;height:17px}.af-section{padding:52px 0}.af-section-head,.af-close{display:block}.af-section-head>p{margin-top:20px;max-width:none}.af-email,.af-story,.af-faq{grid-template-columns:1fr;gap:28px}.af-cards{grid-template-columns:1fr;gap:14px}.af-card{padding:26px}.af-card-top{margin-bottom:23px}.af-email-marker{display:none}.af-story-art{aspect-ratio:1.3}.af-faq-intro>p{margin-top:16px}.af-close{margin-bottom:38px;padding:32px;border-radius:20px!important}.af-close .af-action{margin-top:26px;max-width:100%;width:100%}.af-pagehero{padding:44px 0 35px}.af-pagehero h1{font-size:40px}.af-contact-grid{grid-template-columns:1fr}.af-contact-grid .af-card{padding:26px}.af-actions{gap:15px}.af-action{min-height:52px;font-size:12px}.navbar__logo{max-width:270px}.navbar__logo .logo-text{font-size:18px!important}}
@media(max-width:360px){.af-wrap{width:calc(100% - 32px)}.af h1{font-size:38px}.af-divider{grid-template-columns:1fr;gap:12px}.navbar__logo{max-width:235px}.af-tag{max-width:210px}.af-close{padding:24px}}
@media(prefers-reduced-motion:reduce){.af *, .af *::before,.af *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Photography revision requested by the user. */
body{font-family:'Manrope',Arial,sans-serif!important}.af{font-family:'Manrope',Arial,sans-serif}.af-story-art img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.af-visual img{object-position:center 42%}.af-visual img,.af-story-art{border-radius:20px!important}.af-grove .af-visual img,.af-silver .af-visual img,.af-gate .af-visual img{border-radius:80px 16px 16px 16px!important}.af-harbor .af-visual img,.af-glade .af-visual img{border-radius:16px 80px 16px 16px!important}.af-velvet .af-visual img{border-radius:60px 16px 60px 16px!important}.af-atlantic .af-visual img{border-radius:4px!important}.af-crest .af-visual img,.af-pacific .af-visual img{border-radius:16px 16px 75px 16px!important}.af-visual figcaption{font-size:9px}.af-tag{max-width:225px}.af-silver .af-visual img{object-position:54% 42%}.af-oasis .af-visual img{object-position:55% 40%}@media(max-width:760px){.af-visual img{height:310px!important;border-radius:20px!important}.af-visual .af-tag{bottom:40px}.af-story-art{border-radius:16px!important}}

.af h1,.af h2,.af h3{color:inherit!important}.navbar__cta .btn{background:var(--af-brand)!important;color:white!important}.site-footer .btn{background:var(--af-paper)!important;color:var(--af-ink)!important}.af-tag strong{font-size:12px;white-space:nowrap}.af-tag{max-width:250px}.form-page__shell{max-width:640px;margin-inline:auto}.widget-host{min-height:430px!important}.form-page__head{padding-top:32px}.form-page__note{margin-top:24px!important}
.site-footer__disclosure,.site-footer__disclosure p{font-size:12px!important;line-height:1.85!important}.af-hero h1{font-weight:var(--af-weight)!important}.af-faq-intro h2,.af-close h2{font-weight:var(--af-weight)!important}
.navbar__cta.btn{background:var(--af-brand)!important;color:#fff!important;box-shadow:none!important}.brand-word{letter-spacing:-.035em}.af-silver .af-hero h1{font-size:clamp(40px,4.1vw,60px)}@media(max-width:480px){.navbar__logo .brand-word{font-size:20px!important}}@media(max-width:360px){.navbar__logo .brand-word{font-size:17px!important}.brand-lockup{gap:7px!important}.navbar__logo .brand-mark{width:22px!important}}

/* Fixed navigation and compact first-screen forms. */
html{scroll-padding-top:calc(var(--header-h) + 12px)}
body{padding-top:var(--header-h)!important}
body .site-header{position:fixed!important;inset:0 0 auto!important;width:100%;z-index:100!important}
.mobile-menu{z-index:110!important}.menu-overlay{z-index:105!important}.tpl-modal{z-index:130!important}
.picker-segments__rail{touch-action:pan-y;user-select:none;cursor:grab}
.preform.is-dragging .picker-segments__rail{cursor:grabbing}
.preform.is-dragging .picker-segments__seg{transform:none!important;transition:none!important}
.mobile-legal-bar,.mobile-legal-close{display:none}
/* Green Glade: bring the complete form above the panorama on desktop too. */
.ux-glade .ux-hero{display:flex;flex-direction:column;padding-top:24px!important}
.ux-glade .ux-hero>.glade-panorama{order:3;margin-top:24px!important;height:260px}
.ux-glade .glade-heading{padding-bottom:24px}
.ux-glade .glade-platform{margin:0 auto!important}
@media(max-width:760px){
 html{--header-h:54px;--header-h-mobile:54px;scroll-padding-top:62px}
 body{--header-h:54px;padding-inline:0!important}
 body .site-header{height:54px!important}
 .site-header .site-header__in{width:100%!important;max-width:none!important;padding-inline:10px!important;gap:8px}
 .site-header .brand-word{font-size:17px!important}.site-header .brand-mark{width:25px;height:25px}
 .site-header .navbar__cta{display:none!important}
 .ux .ux-hero,.af .af-hero{padding:0!important}
 .ux .ux-wrap,.af .af-wrap{width:100%!important;max-width:none!important;padding-inline:0!important}
 .ux .ux-hero h1,.af .af-hero h1{font-size:27px!important;line-height:1.12!important;letter-spacing:-.035em!important;margin:0!important}
 .ux .ux-hero .ux-eyebrow,.ux .ux-hero .ux-deck,.ux .ux-hero .ux-feature-labels,
 .ux .ux-hero .ux-form-title,.ux .ux-hero .ux-photo-caption,.ux .ux-hero .oasis-note,
 .ux .ux-hero .harbor-photo,.ux .ux-hero .atlantic-panorama,.ux .ux-hero .ux-orbit-photo,
 .ux .ux-hero .velvet-photo,.ux .ux-hero .fresh-photo,.ux .ux-hero .glade-panorama,
 .ux .ux-hero .gate-photo,.ux .ux-hero .gate-note,.ux .ux-hero .crest-photo,.ux .ux-hero .crest-planner-head,
 .af .af-hero .af-eye,.af .af-hero .af-lead,.af .af-hero .af-visual,.af .af-hero .af-divider{display:none!important}
 .ux .harbor-heading,.ux .ux-hero .ux-intro,.ux .gate-title,.ux .glade-heading,.ux .fresh-copy{padding:14px 12px!important;margin:0!important;min-height:0!important;gap:0!important;border:0!important;border-radius:0!important}
 .ux .glade-heading .ux-intro{padding:0!important}
 .ux .harbor-spread,.ux .pacific-hero-grid,.ux .velvet-spread,.ux .fresh-bento,.ux .oasis-orbit,.ux .gate-triptych,.ux .crest-grid{display:block!important;min-height:0!important;margin:0!important;padding:0!important}
 .ux .harbor-spread .ux-form,.ux .ux-hero .ux-form,.ux .atlantic-console,.ux .glade-platform,.ux .crest-planner{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .ux .ux-hero .preform{padding:12px!important;margin:0!important;max-width:none!important;gap:12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;--preform-gap-mobile:12px;--preform-pad-mobile:12px;--preform-email-h:46px;--picker-pill-h:68px}
 .ux .ux-hero .preform__foot{gap:8px!important}.ux .preform__amount{gap:10px!important}
 .ux .preform .picker-title,.ux .preform__title{font-size:18px!important;line-height:1.25!important}
 .ux .preform__email label{margin-bottom:5px!important}.ux .preform__email input{height:46px!important}
 .ux .preform .btn{min-height:46px!important;padding:12px 16px!important}
 .ux .preform__note{font-size:10px!important;line-height:1.4!important}
 .ux .ux-hero .ux-ad{padding:0 12px 12px!important;margin:0!important;font-size:10px!important;line-height:1.5!important}
 .ux .quickpick__btn{min-height:44px!important;font-size:16px!important}
 .ux .picker-head{margin-bottom:6px!important;gap:12px!important}
 .ux .picker-gauge{max-width:210px!important}
 .ux .picker-segments{padding-top:30px!important}.ux .picker-segments__seg{height:48px!important}
 .ux .picker-drum{max-height:134px!important}.ux .picker-hint{margin:3px 0!important}
 .ux-crest .preform__amount{padding:12px!important}.ux-crest .preform__amount-top label{margin-bottom:6px!important}
 .ux .picker-stepper__val .amount-out{font-size:38px!important}
 .ux .picker-ticks__label .ibox{display:none!important}.ux .picker-ticks__label .picker-title{font-size:16px!important}
 .ux-atlantic .preform,.ux-glade .preform{display:flex!important}.ux-atlantic .preform__amount .picker-head{margin-bottom:8px!important}
 .ux .ux-hero{min-height:0!important;animation:none!important}.ux .ux-hero *{animation:none!important}
 .af .af-hero-grid{display:block!important;padding:0!important;margin:0!important}.af .af-hero .af-reveal>h1{padding:14px 12px!important}
 .af .af-hero .af-picker{border:0!important;border-radius:0!important;padding:12px!important;margin:0!important;box-shadow:none!important}
 .af .af-hero .af-small{padding:0 12px 12px!important;margin:0!important;font-size:10px!important;line-height:1.5!important}
 /* No decorative page chrome around the production form. Required widget fields remain accessible. */
 body:has(.form-page){height:100dvh!important;min-height:100dvh!important;display:flex;flex-direction:column;overflow:hidden;background:var(--af-paper,#fff)}
 .form-page,.form-page>.container,.form-page .form-page__shell{width:100%!important;max-width:none!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .form-page__head,.form-page__note{display:none!important}
 .form-page .widget-host{min-height:0!important;padding:0!important;margin:0!important}
 body .form-page{flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:contain}
 body:has(.form-page) .site-footer{display:none!important}
 .mobile-legal-bar{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:20px;min-height:42px;padding:0 10px;font:12px/1.4 Manrope,Arial,sans-serif}
 .mobile-legal-bar button,.mobile-legal-bar a{font:inherit;color:var(--af-brand,#173e52);border:0;background:transparent;padding:10px 0;text-decoration:underline;cursor:pointer}
 body.mobile-legal-open .site-footer{display:block!important;position:fixed;inset:54px 0 0;z-index:120;overflow-y:auto;overscroll-behavior:contain;margin:0!important;padding-top:55px!important}
 body.mobile-legal-open .mobile-legal-close{display:block;position:fixed;right:12px;top:62px;z-index:121;border:1px solid currentColor;border-radius:6px;padding:10px 16px;background:var(--af-paper,#fff);color:var(--af-ink,#173e52);font:14px Manrope,Arial,sans-serif;cursor:pointer}
}
@media(max-width:360px){.ux-pacific .ux-hero .ux-intro{padding-block:10px!important}.ux-pacific .ux-hero .preform{padding-block:8px!important}}

@media(max-width:760px){.ux-oasis .picker-gauge__center .amount-out{font-size:32px!important;line-height:1.1!important}.ux-oasis .picker-gauge__center .picker-question{font-size:11px!important;line-height:1.3!important}.ux-oasis .picker-gauge__center{bottom:4%!important}}