/* Generated by bin/build-assets.php — do not edit. Source: resources/css/marketing.css */
/* row 54 — per-surface CSS bundle manifest (marketing chrome).
   This is the SINGLE entry the document head links (via the M9-fingerprinted
   public/assets/css/marketing.<hash>.css). The dev bundler (bin/build-assets.php)
   inlines every @import below — recursively, since tokens/index.css itself imports
   the individual token atoms — into one flat stylesheet.

   Cascade order is deliberate and MUST be preserved:
     1. tokens   — :root custom properties everything else resolves via var()
     2. base     — reset, then typography, then a11y, then @font-face
     3. layout   — page grid + section rhythm
     4. components — chrome + atoms, low-specificity, token-driven
   Only marketing-surface CSS is imported here. NO portal/staff CSS. */

/* 1 — design tokens (single manifest; pulls in every token atom). */
/* >>> inlined: ./tokens/index.css */
/* row 35 — token manifest. One import pulls in every design-token atom (rows 21-34).
   Order: colour primitives first, then semantic colour (which may reference them),
   then type / space / radii / shadow / motion / z / layout. */
/* >>> inlined: ./color/navy.css */
/* row 21 — navy brand colour tokens.
   Source: live-build ccfs/style.css :root (--c-brand #003366, --c-brand-dark #002244,
   --c-brand-light #2b6ca8). Exposed under the BUILD-MAP --c-navy* names; the legacy
   --c-brand* aliases are kept so carried-over component CSS keeps resolving. */
:root {
  --c-navy:        #003366;
  --c-navy-2:      #16325c;
  --c-navy-dark:   #002244;
  --c-navy-light:  #2b6ca8;

  /* link/accent blue — sitewide refs had no fallback (collapsed to ink). Aliased to
     navy-light, NOT --c-green (which fails 4.5:1 text contrast on white). */
  --c-blue:        var(--c-navy-light);

  /* legacy aliases (source names) */
  --c-brand:       var(--c-navy);
  --c-brand-dark:  var(--c-navy-dark);
  --c-brand-light: var(--c-navy-light);
}

/* <<< end: ./color/navy.css */

/* >>> inlined: ./color/green.css */
/* row 22 — green accent colour token.
   Source: live-build ccfs/style.css :root (--c-accent #90cb22). Exposed under the
   BUILD-MAP --c-green name; the legacy --c-accent alias is kept so carried-over
   component CSS keeps resolving. */
:root {
  /* A11Y GUARD (report M5/M7): --c-green #90cb22 is contrast-safe ONLY as text/icon on
     DARK (navy) surfaces — ≈9:1 there, but only ≈1.95:1 on white (fails 4.5:1 text AND the
     3:1 non-text/state-indicator bar). Do NOT use it for text, borders, or selected-state
     underlines on light backgrounds — use navy (--c-brand) for state cues on white. */
  --c-green:   #90cb22;

  /* AA-safe dark green for text/borders on light surfaces (--c-green itself fails on white). */
  --c-green-dark: #5f8a16;

  /* legacy alias (source name) */
  --c-accent:  var(--c-green);
}

/* <<< end: ./color/green.css */

/* >>> inlined: ./color/neutral.css */
/* row 23 — neutral greys / white / ink scale.
   Source: live-build ccfs/style.css :root text + surface tokens. */
:root {
  --c-ink:          #111827;  /* primary text */
  --c-ink-muted:    #374151;  /* secondary text */
  --c-ink-subtle:   #6b7280;  /* tertiary / captions */
  --c-border:       #e5e7eb;  /* hairlines, dividers */
  --c-white:        #ffffff;
  --c-bg:           #ffffff;  /* page background */
  --c-bg-alt:       #f9fafb;  /* zebra / inset surfaces */
  --c-bg-elevated:  #ffffff;  /* cards, popovers */

  /* Intentional light SURFACE-TINTS — give heros/inset bands depth instead of flat solid slabs.
     This token CSS is the documented single place raw surface hex is allowed; every other leg
     references these by NAME (esp. the product jump-nav hover wash) rather than inlining color-mix. */
  --c-surface-navy-tint:  #eef3f8;  /* cool inset band; ink 15.89:1, ink-muted 9.23:1, navy 11.30:1 */
  --c-surface-green-tint: #f4f9e9;  /* eco/green callout + jump-nav hover wash; ink 16.53:1, NAVY 11.75:1. Text on this MUST be navy/ink — green-dark is only 3.81:1 here. */

  --c-border-strong: #8a8a8a;  /* strong/emphasis border (R217) */

  /* sitewide refs without fallback (collapsed to ink/initial) — alias to existing ink/surface scale */
  --c-muted:          var(--c-ink-subtle);  /* muted text / captions */
  --c-text-secondary: var(--c-ink-muted);   /* secondary text */
  --c-surface-muted:  var(--c-bg-alt);      /* inset / zebra surface */

  /* legacy aliases (source names) */
  --c-text:         var(--c-ink);
  --c-text-muted:   var(--c-ink-muted);
  --c-text-subtle:  var(--c-ink-subtle);

  /* Compatibility aliases — carried-over component bundles (form-field.css, careers.css) target a
     --color-* / --radius-* namespace this system never defined; the un-fallback'd ones (--color-text,
     --color-surface) collapsed to invalid → janky inputs. Map them to the design tokens so forms and
     those components render consistently with everything else. */
  --color-text:         var(--c-ink);
  --color-text-muted:   var(--c-ink-muted);
  --color-muted:        var(--c-ink-subtle);
  --color-surface:      var(--c-bg-elevated);
  --color-surface-alt:  var(--c-bg-alt);
  --color-border:       #cbd5e1;            /* control border — a touch stronger than the --c-border hairline so field edges read */
  --color-primary:      var(--c-navy);
  --color-link:         var(--c-navy);
}

/* <<< end: ./color/neutral.css */

/* >>> inlined: ./color/semantic.css */
/* row 24 — semantic state colours for alert callouts.
   Source: live-build ccfs/style.css :root (--c-success #16a34a, --c-warning #d97706,
   --c-danger #dc2626, --c-info #2563eb), wired into inc/core/ccfs-ui-components.php
   alerts. Exposed under --c-success/-warn/-error/-info per the BUILD-MAP row. */
:root {
  --c-success:  #16a34a;
  --c-warn:     #d97706;
  --c-error:    #dc2626;
  --c-info:     #2563eb;

  /* R213 AA text-contrast variants (6.82:1 and 6.78:1 on #f9fafb) */
  --c-success-text: #166534;
  --c-warn-text:    #92400e;

  /* legacy alias (source name) */
  --c-warning:  var(--c-warn);
  --c-danger:   var(--c-error);
}

/* <<< end: ./color/semantic.css */

/* >>> inlined: ./type/family.css */
/* row 25 — font-family stacks.
   Source: critical-marketing.css:886-891 (R140/R150). Montserrat is primary sans;
   Inter is the self-hosted fallback (loaded after Montserrat in the sans stack). Mono
   used for money figures / tabular numerals. No CDN requests (UK-GDPR posture). */
:root {
  --font-sans:  "Montserrat", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* <<< end: ./type/family.css */

/* >>> inlined: ./type/scale.css */
/* row 26 — type size ramp.
   Source: live-build ccfs/style.css :root (--text-xs .75rem .. --text-4xl 2.25rem).
   Exposed under the BUILD-MAP --fs-* names; legacy --text-* aliases kept. */
:root {
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-lg:    1.125rem;  /* 18px */
  --fs-xl:    1.25rem;   /* 20px */
  --fs-2xl:   1.5rem;    /* 24px */
  --fs-3xl:   1.875rem;  /* 30px */
  --fs-4xl:   2.25rem;   /* 36px */

  /* legacy aliases (source names) */
  --text-xs:   var(--fs-xs);
  --text-sm:   var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg:   var(--fs-lg);
  --text-xl:   var(--fs-xl);
  --text-2xl:  var(--fs-2xl);
  --text-3xl:  var(--fs-3xl);
  --text-4xl:  var(--fs-4xl);
}

/* <<< end: ./type/scale.css */

/* >>> inlined: ./type/leading.css */
/* row 27 — line-height + reading-measure tokens.
   Source: live-build ccfs/style.css :root (--lh-tight 1.2, --lh-normal 1.5,
   --lh-loose 1.75). --measure-prose tracks the long-form legal reading column
   (.ccfs-simple-content caps body copy at 60ch in source; ~66ch comfortable max). */
:root {
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  --measure-prose: 66ch;  /* long-form / legal reading measure */
}

/* <<< end: ./type/leading.css */

/* >>> inlined: ./space/scale.css */
/* row 28 — spacing ramp.
   Source: live-build ccfs/style.css :root (--s-1 4px .. --s-12 256px). Exposed under
   the BUILD-MAP --sp-* names; legacy --s-* aliases kept for carried-over component CSS.
   Some late-ported page bundles still use the older --sp-100/200 naming; keep those
   aliases here so spacing does not collapse when those pages render. */
:root {
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;
  --sp-12:  256px;

  /* legacy aliases (source names) */
  --s-1:   var(--sp-1);
  --s-2:   var(--sp-2);
  --s-3:   var(--sp-3);
  --s-4:   var(--sp-4);
  --s-5:   var(--sp-5);
  --s-6:   var(--sp-6);
  --s-7:   var(--sp-7);
  --s-8:   var(--sp-8);
  --s-9:   var(--sp-9);
  --s-10:  var(--sp-10);
  --s-11:  var(--sp-11);
  --s-12:  var(--sp-12);

  /* legacy step aliases (carried-over page bundles) */
  --sp-100: var(--sp-1);
  --sp-150: var(--sp-2);
  --sp-200: var(--sp-2);
  --sp-250: var(--sp-3);
  --sp-300: var(--sp-3);
  --sp-350: var(--sp-4);
  --sp-400: var(--sp-4);
  --sp-500: var(--sp-5);
  --sp-600: var(--sp-6);
  --sp-700: var(--sp-7);
  --sp-800: var(--sp-8);
}

/* <<< end: ./space/scale.css */

/* >>> inlined: ./radii/scale.css */
/* row 29 — border-radius tokens.
   Source: live-build ccfs/style.css :root (--r-sm 4px, --r-md 8px, --r-lg 16px,
   --r-full 9999px). */
:root {
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    16px;
  --r-full:  9999px;

  /* compatibility aliases — carried-over bundles (form-field.css, careers.css,
     simple-view-toggle.css) reference the --radius-* namespace. */
  --radius-sm:  var(--r-sm);
  --radius-md:  var(--r-md);
  --radius-lg:  var(--r-lg);
}

/* <<< end: ./radii/scale.css */

/* >>> inlined: ./shadow/scale.css */
/* row 30 — elevation shadow tokens.
   Source: live-build ccfs/style.css :root (--shadow-sm/-md/-lg). */
:root {
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, .10);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, .14);
}

/* <<< end: ./shadow/scale.css */

/* >>> inlined: ./shadow/focus.css */
/* row 31 — focus-ring token (the visible focus indicator — never removed).
   Source: live-build ccfs/style.css :root (--shadow-focus). OPAQUE navy ring so the
   focused/unfocused delta clears WCAG 2.2 SC 2.4.11 (≥3:1) on white surfaces — the
   prior 35%-alpha tint blended to ≈1.64:1 and failed (A11Y H1). #2b6ca8 == rgb(43,108,168)
   at full opacity. Dark-band buttons keep their white-ring override (home.css ~190). */
:root {
  --shadow-focus:  0 0 0 3px #2b6ca8;
}

/* <<< end: ./shadow/focus.css */

/* >>> inlined: ./motion/duration.css */
/* row 32 — motion duration + easing tokens.
   Source: live-build ccfs/style.css :root (--dur-fast 120ms, --dur-normal 220ms,
   --dur-slow 400ms, --ease-out, --ease-in-out). Under prefers-reduced-motion the
   durations collapse to ~1ms (mirrors the source @media block) so transitions that
   reference these tokens become effectively instant for motion-averse users. */
:root {
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    1ms;
    --dur-normal:  1ms;
    --dur-slow:    1ms;
  }
}

/* <<< end: ./motion/duration.css */

/* >>> inlined: ./z/layers.css */
/* row 33 — z-index layering scale (header / drawer / overlay / modal / toast).
   Source: live-build ccfs/style.css :root (--z-base 1 .. --z-toast 1500). */
:root {
  --z-base:     1;
  --z-sticky:   100;   /* sticky header */
  --z-overlay:  500;   /* drawer / scrim */
  --z-modal:    1000;  /* dialogs */
  --z-toast:    1500;  /* transient notifications (top-most) */
}

/* <<< end: ./z/layers.css */

/* >>> inlined: ./layout/breakpoints.css */
/* row 34 — layout breakpoint + container tokens.
   Breakpoints: 390 (phone) / 768 (tablet) / 1024 (laptop) / 1440 (wide), per the
   BUILD-MAP row. Container widths from live-build ccfs/style.css :root
   (--container-narrow 640px, --container-default 960px, --container-wide 1200px,
   --container-max 1440px).

   NB custom properties cannot drive @media (min-width: var(--bp-*)) queries — these
   tokens are the single source of truth for the pixel values; component/layout CSS
   restates the literal in its @media prelude and references --bp-* only in comments. */
:root {
  --bp-phone:    390px;
  --bp-tablet:   768px;
  --bp-laptop:   1024px;
  --bp-wide:     1440px;

  --container-narrow:   640px;
  --container-default:  960px;
  --container-wide:     1200px;
  --container-max:      1440px;
}

/* <<< end: ./layout/breakpoints.css */


/* <<< end: ./tokens/index.css */


/* 2 — base layer. */
/* >>> inlined: ./base/reset.css */
/* base/reset.css — row 36
 * Modern, minimal reset. Border-box everywhere, no UA margin leak, predictable
 * media/form defaults. Structural-only: the values here are 0, 100%, none and
 * keyword inherits — not design tokens — so no raw hex/px lives outside the
 * token files. Depends on tokens/index.css for the custom properties used by
 * the typography/a11y layers that load after it.
 */

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

/* No UA margin leak — every element starts flush; spacing is opt-in. */
* {
	margin: 0;
}

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

body {
	min-height: 100vh;
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Media defaults — block-level, never overflow, vertical rhythm preserved. */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Form controls inherit typography rather than UA defaults. */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

/* Avoid text overflows on long words / URLs. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Lists used as navigation/structure carry no UA bullets or indent. */
ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

/* Anchors and table cells behave predictably. */
a {
	color: inherit;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Honour reduced-motion at the reset layer too: collapse all animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* <<< end: ./base/reset.css */

/* >>> inlined: ./base/typography.css */
/* base/typography.css — row 37
 * Base element type, fully token-driven. Every size/leading/colour/weight here
 * is a var(--token) declared in tokens/* (loaded via tokens/index.css). No raw
 * hex/px lives in this file. Mirrors the theme's type intent: Montserrat sans
 * throughout, tight leading + slight negative tracking on display headings,
 * comfortable body leading for reading.
 */

html {
	font-family: var(--font-sans);
	font-size: 100%; /* respect the user's root size; the scale is rem-based */
	line-height: var(--lh-normal);
	color: var(--c-text);
	background-color: var(--c-bg);
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: var(--lh-normal);
	color: var(--c-text);
}

/* Display headings — Montserrat, tight leading. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-sans);
	line-height: var(--lh-tight);
	letter-spacing: -0.011em; /* slight negative tracking on display headings (the intended type voice) */
	color: var(--c-navy);     /* brand-navy headings vs ink body — restores hierarchy (was flat ink-on-ink) */
	text-wrap: balance;       /* even multi-line heading wrap; degrades gracefully where unsupported */
}

h1 {
	font-size: var(--text-4xl);
	font-weight: 700;
}

h2 {
	font-size: var(--text-3xl);
	font-weight: 700;
}

h3 {
	font-size: var(--text-2xl);
	font-weight: 600;
}

h4 {
	font-size: var(--text-xl);
	font-weight: 600;
}

h5 {
	font-size: var(--text-lg);
	font-weight: 600;
}

h6 {
	font-size: var(--text-base);
	font-weight: 600;
}

/* Body copy — comfortable measure and rhythm; spacing is opt-in via tokens. */
p {
	font-size: var(--text-base);
	line-height: var(--lh-loose);
	color: var(--c-text);
}

small {
	font-size: var(--text-sm);
}

strong,
b {
	font-weight: 700;
}

/* Inline code / monospace figures use the mono token. */
code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

/* <<< end: ./base/typography.css */

/* >>> inlined: ./base/a11y.css */
/* base/a11y.css — row 38
 * Accessibility primitives: a skip-link that is hidden until focused, a global
 * :focus-visible ring driven by --shadow-focus (the focus ring is NEVER
 * removed), and an .sr-only utility for screen-reader-only text. Token-driven:
 * colours/spacing/radii/z come from tokens/* (via tokens/index.css); the only
 * literals are the standard sr-only clip primitives (1px clip rect), which are
 * structural, not design tokens. Depends on tokens/shadow/focus.css (row 31).
 */

/* Skip-link — off-screen until it receives focus, then snaps into the top-left
 * so a keyboard user can jump straight to the main content. Mirrors header.php
 * `<a class="skip-link …" href="#content">`. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-sticky);
	padding: var(--s-2) var(--s-4);
	background-color: var(--c-brand);
	color: var(--c-bg);
	border-radius: var(--r-md);
	text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
	left: var(--s-3);
	top: var(--s-3);
}

/* Global focus ring — visible on keyboard focus, built from the focus-ring
 * token so it can never be silently removed. */
:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Some elements (links/buttons) benefit from a crisp outline fallback in
 * forced-colors mode where box-shadow is dropped. */
@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

/* Screen-reader-only text — visually hidden but available to assistive tech. */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

/* Allow an sr-only element to become visible when focused (e.g. a hidden
 * control that should appear for keyboard users). */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* <<< end: ./base/a11y.css */

/* >>> inlined: ./base/fonts.css */
/* base/fonts.css — row 42
 * Self-hosted @font-face declarations. woff2 only, font-display:swap → no FOIT.
 * No Google-Fonts CDN requests — UK-GDPR posture intact for the regulated lender.
 * Assets under public/assets/fonts/ (web-served root); paths are root-relative.
 *
 * Source: live-build ccfs/assets/css/critical-marketing.css:851-891 (R140/R150).
 *   Montserrat (rows 39-41): 400/600/700 — brand primary sans.
 *   Inter       (R140):      400/500/600/700 — sans fallback after Montserrat.
 *   SourceSerif4 (R140):     400/600/700 — brand serif (headings etc.).
 * WP used internal aliases ('CCFS Sans', 'CCFS Serif'); rebuild uses canonical names.
 */

/* ── Montserrat (primary sans) ── */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/montserrat-400.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/montserrat-700.woff2") format("woff2");
}

/* ── Inter (sans fallback) — critical-marketing.css:851-870 ── */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");
}

/* ── Source Serif 4 (brand serif) — critical-marketing.css:871-885 ── */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/SourceSerif4-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/SourceSerif4-Semibold.woff2") format("woff2");
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/SourceSerif4-Bold.woff2") format("woff2");
}

/* <<< end: ./base/fonts.css */

/* >>> inlined: ./base/print.css */
/* base/print.css — print baseline (PASS-2 finding: zero @media print anywhere; customers print
 * legal/agreement pages and got full nav chrome + CTAs). Hide interactive chrome, force
 * black-on-white body. Shared pattern across the three UI trees (marketing/clients/mrs). */
@media print {
	.ccfs-nav,
	.ccfs-nav__drawer,
	.skip-link,
	footer,
	[data-consent],
	.ccfs-cookie,
	button,
	.ccfs-btn {
		display: none !important;
	}
	body {
		background: #fff !important;
		color: #000 !important;
	}
	main {
		margin: 0 !important;
		padding: 0 !important;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
	}
	.legal-page,
	.content-page {
		background: #fff !important;
		box-shadow: none !important;
		color: #000 !important;
		max-width: none !important;
	}
	.legal-page__wrap,
	.content-page__header,
	.content-page__body {
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
	}
	.legal-page__back,
	.content-page .callout {
		border: 1px solid #000 !important;
		background: #fff !important;
	}
	.legal-page a[href^="/"]::after,
	.content-page a[href^="/"]::after {
		content: " (https://credicorp.co.uk" attr(href) ")";
		font-size: 0.85em;
	}
}

/* <<< end: ./base/print.css */


/* 3 — layout. */
/* >>> inlined: ./layout/grid.css */
/* layout/grid.css — row 52
 * Page container: a single centred column with a sane max-width and symmetric
 * gutters, plus modifiers for the narrower / wider editorial measures. Fully
 * token-driven — every width is a --container-* token and every gutter a --sp-*
 * token (tokens/layout/breakpoints.css row 34, tokens/space/scale.css row 28,
 * both via tokens/index.css row 35). No raw px/hex lives in this file.
 *
 * `.container` is the default page wrapper: max-width --container-default,
 * horizontally centred, with a gutter that grows one step up at tablet so
 * content never kisses the viewport edge on wider phones. The variant classes
 * only change the cap; they inherit the centring + gutters.
 */

.container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	/* Gutter is a custom property so a section/grid can read the same value
	   (e.g. to bleed a full-width band while keeping inner content aligned). */
	--container-gutter: var(--sp-4);
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
}

/* Editorial measures — same centring + gutters, different cap. */
.container--narrow  { max-width: var(--container-narrow); }
.container--wide    { max-width: var(--container-wide); }
.container--max     { max-width: var(--container-max); }

/* Full-bleed: opt out of the cap entirely (used by edge-to-edge bands that
   place their own inner .container for the readable column). */
.container--full    { max-width: none; }

/* From tablet up (--bp-tablet = 768px) the gutters widen one step so the
   measure breathes on laptops/desktops. The literal mirrors the --bp-tablet
   token value; custom properties cannot drive @media preludes. */
@media (min-width: 768px) {
	.container {
		--container-gutter: var(--sp-5);
	}
}

/* <<< end: ./layout/grid.css */

/* >>> inlined: ./layout/section.css */
/* layout/section.css — row 53
 * Vertical rhythm for page sections: a consistent block of top/bottom padding
 * that separates marketing bands, plus density modifiers and a flow utility for
 * even spacing between stacked children. Fully token-driven — every value is a
 * --sp-* token (tokens/space/scale.css row 28, via tokens/index.css row 35). No
 * raw px/hex in this file.
 *
 * `.section` owns the vertical padding only; horizontal insets are the
 * container's job (layout/grid.css row 52), keeping the two concerns separate so
 * a full-bleed coloured band can pad vertically while its inner .container holds
 * the readable column.
 */

.section {
	padding-block: var(--sp-7);
}

/* Density modifiers — same rhythm, scaled. */
.section--tight  { padding-block: var(--sp-5); }
.section--loose  { padding-block: var(--sp-8); }
.section--flush  { padding-block: 0; }

/* Collapse one edge when sections butt against the header or footer / each
   other, so doubled gaps don't open up. */
.section--top-flush     { padding-block-start: 0; }
.section--bottom-flush  { padding-block-end: 0; }

/* Section heading block — a little space under the title before the body grid. */
.section__head {
	margin-block-end: var(--sp-5);
}

/* Flow utility — even vertical gaps between direct children without per-child
   margins (the classic "owl" pattern, expressed with a token). Useful inside a
   section for stacked prose / cards. */
.flow > * + * {
	margin-block-start: var(--sp-5);
}
.flow--tight > * + * { margin-block-start: var(--sp-3); }
.flow--loose > * + * { margin-block-start: var(--sp-7); }

/* From laptop up (--bp-laptop = 1024px) the band rhythm opens up one step so
   long marketing pages get more air between sections. The literal mirrors the
   --bp-laptop token value; custom properties cannot drive @media preludes. */
@media (min-width: 1024px) {
	.section {
		padding-block: var(--sp-8);
	}
	.section--loose {
		padding-block: var(--sp-9);
	}
}

/* <<< end: ./layout/section.css */


/* 4 — components (all that exist under resources/css/components/). */
/* >>> inlined: ./components/button/button.base.css */
/* row 57 — base button component (token-driven).
   Source: live-build ccfs/style.css `.ccfs-btn` + inc/core/ccfs-ui-components.php
   (`ccfs-ui-btn` vocabulary). The base owns layout, type, focus ring and the size
   modifiers; colour/fill lives in the per-variant files (rows 58-60).

   Class contract mirrors the button.base.php partial: `.btn` + `.btn--{variant}`
   + `.btn--{size}`. NO raw hex/px here — every value resolves to a design token. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-elevated);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--c-bg-alt);
}

/* The focus ring is the visible keyboard indicator — never removed. */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Inline icon glyph sizing — icons inherit currentColor and sit on the text baseline. */
.btn svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* Size modifiers. */
.btn--sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
}

.btn--lg {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-base);
}

/* Disabled state (native + ARIA). */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Legacy content compatibility: older atoms use ccfs-btn / is-* classes. */
.ccfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-elevated);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.ccfs-btn:hover {
  background: var(--c-bg-alt);
}

.ccfs-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* <<< end: ./components/button/button.base.css */

/* >>> inlined: ./components/button/variants/primary.css */
/* row 58 — primary button variant (navy fill, the page's principal call-to-action).
   Source: live-build ccfs/style.css `.ccfs-btn--primary` (navy brand fill, brand-dark
   on hover, white label). Layered on `.btn` (row 57). Token-driven; white label uses
   --c-white. */

.btn--primary {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-navy-dark);
  border-color: var(--c-navy-dark);
  color: var(--c-white);
}

.ccfs-btn.is-primary,
.ccfs-btn-primary {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}

.ccfs-btn.is-primary:hover,
.ccfs-btn-primary:hover {
  background: var(--c-navy-dark);
  border-color: var(--c-navy-dark);
  color: var(--c-white);
}

/* <<< end: ./components/button/variants/primary.css */

/* >>> inlined: ./components/button/variants/ghost.css */
/* row 59 — ghost / outline button variant (transparent fill, navy label).
   Source: live-build ccfs/style.css `.ccfs-btn--ghost` + inc/core/ccfs-ui-components.php
   `.ccfs-ui-btn--ghost` (transparent, navy text, faint navy tint on hover). Layered on
   `.btn` (row 57). The hover tint is mixed FROM the navy token via color-mix — no raw
   hex, the tint tracks the brand colour. */

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-navy);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--c-navy) 8%, transparent);
  border-color: transparent;
  color: var(--c-navy);
}

.ccfs-btn.is-ghost,
.ccfs-btn.is-secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--c-navy) 24%, transparent);
  color: var(--c-navy);
}

.ccfs-btn.is-ghost:hover,
.ccfs-btn.is-secondary:hover {
  background: color-mix(in srgb, var(--c-navy) 8%, transparent);
  color: var(--c-navy);
}

/* <<< end: ./components/button/variants/ghost.css */

/* >>> inlined: ./components/button/variants/link.css */
/* row 60 — link-style button (renders inline, looks like a text link, behaves like a button).
   Source: live-build inc/core/ccfs-ui-components.php button vocabulary — the link variant
   strips the box chrome so a real <button>/<a> can sit inside prose without a pill shape
   (e.g. "Change", "Remove" inline actions). Layered on `.btn` (row 57). Keeps the focus
   ring + reset the box-model bits the base set. Token-driven. */

.btn--link {
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--c-navy-light);
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.btn--link:hover {
  background: transparent;
  color: var(--c-navy);
  text-decoration: none;
}

/* Tighten the focus ring to the text box (no padding to wrap). */
.btn--link:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-focus);
}

/* <<< end: ./components/button/variants/link.css */

/* >>> inlined: ./components/link/text-link.css */
/* row 62 — inline text link (underline + visible focus).
   Source: live-build ccfs/style.css `a` rules (links underline by default, brand colour;
   `.ccfs-asst__ans a` shows the navy underlined link treatment) + the `--shadow-focus`
   focus token. An inline link inside body copy: navy, underlined at rest, underline drops
   on hover, focus ring on keyboard focus. Token-driven. */

.text-link {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.text-link:hover {
  color: var(--c-navy-light);
  text-decoration: none;
}

.text-link:visited {
  color: var(--c-navy);
}

/* Visible keyboard focus — never removed. */
.text-link:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-focus);
}

/* <<< end: ./components/link/text-link.css */

/* >>> inlined: ./components/badge/badge.base.css */
/* row 71 — badge component (token-driven).
   Source: live-build inc/core/ccfs-ui-components.php `.ccfs-ui-badge*` (assets/css/
   ccfs-ui-portal.css). A small pill label: rounded-full, bold, small caps-ish weight,
   with an optional leading status dot. Variant tints are mixed FROM the semantic colour
   tokens via color-mix so the swatch tracks the token — no raw hex.

   Class contract mirrors badge.base.php: `.badge` + `.badge--{variant}`, optional
   `.badge__dot`. Variants: neutral (default) / success / warning / danger / info / brand. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-tight);
  white-space: nowrap;
  background: var(--c-bg-alt);
  color: var(--c-ink-muted);
}

/* Status dot — inherits the badge's text colour. */
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: currentColor;
  flex: 0 0 auto;
}

/* Variants — tint + label colour mixed from the semantic tokens. */
.badge--neutral {
  background: var(--c-bg-alt);
  color: var(--c-ink-muted);
}

.badge--success {
  background: color-mix(in srgb, var(--c-success) 16%, var(--c-bg-elevated));
  color: color-mix(in srgb, var(--c-success) 62%, var(--c-ink));
}

.badge--warning {
  background: color-mix(in srgb, var(--c-warn) 18%, var(--c-bg-elevated));
  color: color-mix(in srgb, var(--c-warn) 64%, var(--c-ink));
}

.badge--danger {
  background: color-mix(in srgb, var(--c-error) 16%, var(--c-bg-elevated));
  color: color-mix(in srgb, var(--c-error) 60%, var(--c-ink));
}

.badge--info {
  background: color-mix(in srgb, var(--c-info) 15%, var(--c-bg-elevated));
  color: color-mix(in srgb, var(--c-info) 62%, var(--c-ink));
}

.badge--brand {
  background: color-mix(in srgb, var(--c-navy) 14%, var(--c-bg-elevated));
  color: color-mix(in srgb, var(--c-navy) 70%, var(--c-ink));
}

/* <<< end: ./components/badge/badge.base.css */

/* >>> inlined: ./components/chip/chip.base.css */
/* row 73 — chip component (filters / hex-copy tokens).
   Source: live-build inc/core/ccfs-ui-components.php badge/button vocabulary +
   ccfs/style.css `.ccfs-export-fmt` (the small bordered inline token pill). A chip is a
   compact, bordered, interactive-feeling label used for filter selections and copyable
   hex/link tokens. Unlike a badge (pure label) a chip can be a <button>/<a> (selectable /
   copy action) and carries a hairline border + hover affordance.

   Class contract mirrors chip.base.php: `.chip` + optional `.chip--selected`,
   `.chip__icon`, `.chip__label`. Token-driven — no raw hex/px outside tokens. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-bg-elevated);
  color: var(--c-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.chip:hover {
  background: var(--c-bg-alt);
  border-color: color-mix(in srgb, var(--c-ink) 24%, var(--c-border));
  color: var(--c-ink);
}

/* Visible keyboard focus — never removed. */
.chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Inline icon (copy glyph for hex/link chips) — inherits currentColor. */
.chip__icon,
.chip svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* Hex/link chips render the value in the monospace stack for tabular alignment. */
.chip--mono .chip__label {
  font-family: var(--font-mono);
}

/* Selected filter state — navy-tinted, navy border + label. */
.chip--selected {
  background: color-mix(in srgb, var(--c-navy) 8%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-navy) 40%, var(--c-border));
  color: var(--c-navy);
}

.chip--selected:hover {
  background: color-mix(in srgb, var(--c-navy) 14%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-navy) 40%, var(--c-border));
  color: var(--c-navy);
}

/* Disabled state. */
.chip[disabled],
.chip[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* <<< end: ./components/chip/chip.base.css */

/* >>> inlined: ./components/alert/alert.base.css */
/* row 75 — alert / callout component (semantic colours, token-driven).
   Source: live-build inc/core/ccfs-ui-components.php `.ccfs-ui-alert*` (assets/css/
   ccfs-ui-portal.css). An inline notice block: optional leading icon slot + body. On the
   marketing site the base (neutral) alert carries a verbatim compliance-text slot (rows 24
   + 35 deps). Variant tint/border/label are mixed FROM the semantic colour tokens via
   color-mix — no raw hex.

   Class contract mirrors alert.base.php: `.alert` + `.alert--{variant}`, with
   `.alert__icon` + `.alert__body`. Variants: (neutral default) / success / warning /
   danger / info. */

.alert {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Icon slot — optical alignment to the first text line. Inherits currentColor. */
.alert__icon,
.alert > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.alert__body {
  min-width: 0;
}

/* Compliance / legal copy sits at a comfortable reading measure. */
.alert__body > * {
  max-width: var(--measure-prose);
}

/* Variants — tint + border + label mixed from the semantic tokens. */
.alert--success {
  background: color-mix(in srgb, var(--c-success) 9%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-success) 30%, var(--c-border));
  color: color-mix(in srgb, var(--c-success) 58%, var(--c-ink));
}

.alert--warning {
  background: color-mix(in srgb, var(--c-warn) 11%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-warn) 32%, var(--c-border));
  color: color-mix(in srgb, var(--c-warn) 60%, var(--c-ink));
}

.alert--danger {
  background: color-mix(in srgb, var(--c-error) 8%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-error) 30%, var(--c-border));
  color: color-mix(in srgb, var(--c-error) 56%, var(--c-ink));
}

.alert--info {
  background: color-mix(in srgb, var(--c-info) 8%, var(--c-bg-elevated));
  border-color: color-mix(in srgb, var(--c-info) 28%, var(--c-border));
  color: color-mix(in srgb, var(--c-info) 60%, var(--c-ink));
}

/* <<< end: ./components/alert/alert.base.css */

/* >>> inlined: ./components/nav/header.css */
/* components/nav/header.css — row 84
 *
 * Header bar layout for the primary navigation chrome (partials/nav/header.php).
 * Mirrors the WP theme's `.top_full` + `.nav_full` header into one sticky `<header class="ccfs-nav">`
 * banner. Token-driven only: every colour/space/radius/shadow/z/duration is a var(--*) from
 * tokens/* (rows 21-34, imported via tokens/index.css). The only literals are the @media
 * breakpoint pixel values, which custom properties cannot drive — they restate the --bp-* tokens
 * (390 / 768 / 1024 / 1440), the single source of which is tokens/layout/breakpoints.css.
 *
 * Responsibilities here: the sticky bar, the logo + actions row, the CTA placement, and the
 * mobile/desktop swap of the desktop menu vs. the drawer toggle. Dropdown styling lives in
 * menu-desktop.css (row 85); the off-canvas drawer lives in drawer.css (row 86).
 */

.ccfs-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-navy);
  /* shrink/elevate transition for the stuck state (RM-aware: --dur collapses to ~1ms
     under prefers-reduced-motion, so this becomes effectively instant). */
  transition:
    box-shadow var(--dur-normal) var(--ease-out),
    background-color var(--dur-normal) var(--ease-out);
}

/* Stuck state — sticky-header.js (row 88) adds `.is-stuck` once the page scrolls past the
   header; we elevate the bar with a shadow so it separates from the content beneath. */
.ccfs-nav.is-stuck {
  box-shadow: var(--shadow-md);
}

.ccfs-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-4);
  /* slightly tighter vertical padding once stuck */
  transition: padding-block var(--dur-normal) var(--ease-out);
}

.ccfs-nav.is-stuck .ccfs-nav__bar {
  padding-block: var(--sp-2);
}

/* Brand logo link */
.ccfs-nav__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--c-navy);            /* wordmark inherits via currentColor */
  text-decoration: none;
  border-radius: var(--r-sm);
}

.ccfs-nav__logo .logo-wordmark {
  display: block;
  width: auto;
  height: var(--sp-7);             /* ~48px mark height (was 32 — owner: make the logo bigger) */
  transition: height var(--dur-normal) var(--ease-out);
}

.ccfs-nav.is-stuck .ccfs-nav__logo .logo-wordmark {
  height: var(--sp-6);             /* shrink to ~32px when stuck (still larger than the old default) */
}

/* Right-hand actions cluster: CTA + mobile toggle */
.ccfs-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.ccfs-nav__cta {
  display: inline-flex;
}

/* Mobile drawer toggle — a square icon button, shown only on small viewports. */
.ccfs-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);
  height: var(--sp-7);
  padding: 0;
  font-size: var(--fs-2xl);        /* drives the 1em SVG glyph size */
  color: var(--c-navy);
  background-color: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
}

.ccfs-nav__toggle:hover {
  background-color: var(--c-bg-alt);
}

.ccfs-nav__toggle-icon {
  display: inline-flex;
  line-height: 0;
}

/* --- Mobile-first defaults: desktop menu hidden, toggle shown ---------------------------- */
.ccfs-nav__primary {
  display: none;
}

/* --- Laptop and up (>= --bp-laptop = 1024px): show the desktop menu, hide the CTA-adjacent
       toggle. The drawer + its toggle are the small-screen path only. ------------------------ */
@media (min-width: 1024px) {
  .ccfs-nav__primary {
    display: block;
    flex: 1 1 auto;
  }

  .ccfs-nav__toggle {
    display: none;
  }

  .ccfs-nav__bar {
    gap: var(--sp-6);
  }
}

/* <<< end: ./components/nav/header.css */

/* >>> inlined: ./components/nav/menu-desktop.css */
/* components/nav/menu-desktop.css — row 85
 *
 * Desktop primary menu + dropdown styling (partials/nav/menu-desktop.php + menu-item.php).
 * The submenu opens on hover AND focus-within so pointer and keyboard users reach it equally
 * (the row's evidence is "dropdown on hover/focus"). Links are the row-61 nav-link atom, which
 * emits `.nav-link` (+ `.is-active` on the current page), so styling is scoped under the nav
 * containers rather than via bespoke per-link classes.
 *
 * Token-driven only: colours/space/radii/shadow/z/duration are var(--*) from tokens/* (rows
 * 21-34). The only literal is the @media breakpoint (1024 = --bp-laptop), which custom
 * properties cannot drive; the value's single source is tokens/layout/breakpoints.css. This whole
 * block is gated behind that breakpoint because the desktop menu is hidden below it (header.css);
 * the same menu items render in the off-canvas drawer (drawer.css) on small screens.
 */

@media (min-width: 1024px) {
  .ccfs-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ccfs-nav__item {
    position: relative;          /* dropdown anchor */
    display: flex;
    align-items: center;
  }

  /* Top-level link */
  .ccfs-nav__list .nav-link {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--c-navy);
    text-decoration: none;
    border-radius: var(--r-md);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .ccfs-nav__list .nav-link:hover {
    /* Subtle brand-green wash on hover (was a flat grey --c-bg-alt). */
    background-color: var(--c-surface-green-tint);
    color: var(--c-navy-dark);
  }

  /* Current page — the atom adds .is-active + aria-current. Owner: the navy/blue underline read
     "yuck" + off-brand, so the active accent is now brand GREEN. Use --c-green-dark (4.3:1 on
     white) for the underline so it still clears the 3:1 non-text contrast R212 required. */
  .ccfs-nav__list .nav-link.is-active {
    color: var(--c-navy);
    box-shadow: inset 0 -3px 0 0 var(--c-green-dark);
  }

  /* Dropdown toggle (chevron) sits beside the top-level link */
  .ccfs-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-1);
    margin-inline-start: calc(-1 * var(--sp-1));
    font-size: var(--fs-base);
    color: var(--c-navy);
    background-color: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    line-height: 0;
  }

  .ccfs-nav__dropdown-chevron {
    display: inline-flex;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  /* --- The dropdown panel --------------------------------------------------------------- */
  .ccfs-nav__dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    display: block;
    min-width: 14rem;
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    background-color: var(--c-bg-elevated);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);

    /* Hidden by default: collapsed + non-interactive until the item is hovered/focused. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--sp-2));
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out);
  }

  /* Open on hover OR keyboard focus anywhere within the item (link, toggle, or a submenu link). */
  .ccfs-nav__item--has-dropdown:hover > .ccfs-nav__dropdown,
  .ccfs-nav__item--has-dropdown:focus-within > .ccfs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Flip the chevron while the dropdown is shown. */
  .ccfs-nav__item--has-dropdown:hover .ccfs-nav__dropdown-chevron,
  .ccfs-nav__item--has-dropdown:focus-within .ccfs-nav__dropdown-chevron {
    transform: rotate(180deg);
  }

  .ccfs-nav__dropdown-item {
    margin: 0;
  }

  /* Submenu link */
  .ccfs-nav__dropdown .nav-link {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: var(--lh-normal);
    color: var(--c-ink);
    text-decoration: none;
    border-radius: var(--r-sm);
    box-shadow: none;            /* override the top-level active underline treatment */
    white-space: nowrap;
  }

  .ccfs-nav__dropdown .nav-link:hover {
    background-color: var(--c-bg-alt);
    color: var(--c-navy);
  }

  .ccfs-nav__dropdown .nav-link.is-active {
    color: var(--c-navy-dark);
    font-weight: 600;
    background-color: var(--c-bg-alt);
    box-shadow: none;
  }
}

/* <<< end: ./components/nav/menu-desktop.css */

/* >>> inlined: ./components/nav/drawer.css */
/* components/nav/drawer.css — row 86
 *
 * Mobile off-canvas navigation drawer: a scrim/overlay + a panel that slides in from the right
 * (partials/nav/drawer.php; opened by the toggle in drawer-toggle.php, driven by nav-drawer.js
 * row 87). z-index comes from the --z tokens (scrim + panel on --z-overlay, above the sticky
 * header). The slide/fade transitions reference --dur/--ease tokens, so they collapse to ~1ms
 * under prefers-reduced-motion (the motion tokens already fold that in) — no separate RM block
 * is needed for the animation itself.
 *
 * Token-driven only: colours/space/radii/shadow/z/duration are var(--*) from tokens/* (rows
 * 21-34). The only literals are the @media breakpoint (1024 = --bp-laptop) and the 100%/100vw
 * structural sizing; the breakpoint value's single source is tokens/layout/breakpoints.css.
 *
 * State model (JS toggles these):
 *   - markup ships with the `hidden` attribute on both overlay and panel → fully inert, no paint.
 *   - to open: JS removes `hidden`, then adds `.is-open` on the next frame → transitions run.
 *   - body gets `.ccfs-nav-drawer-open` so page scroll is locked while the drawer is up.
 */

/* Lock body scroll while the drawer is open (class set by nav-drawer.js on <body>). */
.ccfs-nav-drawer-open {
  overflow: hidden;
}

/* Scrim behind the panel */
.ccfs-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--c-navy-dark);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-out);
}

.ccfs-nav__overlay.is-open {
  opacity: 0.5;
}

/* The sliding panel */
.ccfs-nav__drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  width: min(20rem, 86vw);
  height: 100%;
  height: 100dvh;
  background-color: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Off-canvas until opened. */
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease-out);
}

.ccfs-nav__drawer.is-open {
  transform: translateX(0);
}

/* The `hidden` attribute must win even though we set display:flex above. */
.ccfs-nav__drawer[hidden],
.ccfs-nav__overlay[hidden] {
  display: none;
}

/* Drawer header: title + close button */
.ccfs-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.ccfs-nav__drawer-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.ccfs-nav__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  padding: 0;
  font-size: var(--fs-xl);
  color: var(--c-navy);
  background-color: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  line-height: 0;
}

.ccfs-nav__drawer-close:hover {
  background-color: var(--c-bg-alt);
}

.ccfs-nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.ccfs-nav__drawer-actions .ccfs-nav__search {
  position: relative;
  display: flex;
  gap: var(--sp-2);
}

.ccfs-nav__drawer-actions .ccfs-nav__search-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-sm);
  background: var(--c-white);
}

.ccfs-nav__drawer-actions .ccfs-nav__search-input:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--c-navy-light);
}

.ccfs-nav__drawer-actions .ccfs-nav__search-suggest {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-1));
  inset-inline: 0;
  z-index: 1200;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
}

.ccfs-nav__drawer-actions .ccfs-nav__search-suggest[hidden] {
  display: none;
}

.ccfs-nav__drawer-actions .ccfs-nav__search-option,
.ccfs-nav__drawer-actions .ccfs-nav__search-empty {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-decoration: none;
}

.ccfs-nav__drawer-actions .ccfs-nav__search-option small,
.ccfs-nav__drawer-actions .ccfs-nav__search-empty {
  color: var(--c-muted);
}

.ccfs-nav__drawer-actions .ccfs-nav__search-option:hover,
.ccfs-nav__drawer-actions .ccfs-nav__search-option:focus,
.ccfs-nav__drawer-actions .ccfs-nav__search-option[aria-selected="true"] {
  outline: none;
  background: var(--c-bg-alt);
}

.ccfs-nav__drawer-actions [data-nav-signin] {
  display: inline-flex;
  align-self: flex-start;
}

/* Drawer nav list */
.ccfs-nav__drawer-nav {
  padding: var(--sp-3) var(--sp-2) var(--sp-5);
}

.ccfs-nav__drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccfs-nav__drawer-list .ccfs-nav__item {
  display: block;
  border-bottom: 1px solid var(--c-border);
}

/* Top-level link in the drawer */
.ccfs-nav__drawer-list .nav-link {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--c-navy);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.ccfs-nav__drawer-list .nav-link:hover {
  background-color: var(--c-bg-alt);
}

.ccfs-nav__drawer-list .nav-link.is-active {
  color: var(--c-navy);
  box-shadow: inset 0 -2px 0 0 var(--c-navy);
}

/* Row holding a top-level link + its dropdown toggle */
.ccfs-nav__drawer-list .ccfs-nav__item--has-dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ccfs-nav__drawer-list .ccfs-nav__item--has-dropdown > .nav-link {
  flex: 1 1 auto;
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);
  height: var(--sp-7);
  flex: 0 0 auto;
  font-size: var(--fs-xl);
  color: var(--c-navy);
  background-color: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  line-height: 0;
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown-chevron {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Drawer submenu — collapsed by default; nav-dropdown.js flips the toggle's
   aria-expanded to "true" and opens the panel. We key the open state off that
   ARIA attribute so the single source of "open" is the accessible state. */
.ccfs-nav__drawer-list .ccfs-nav__dropdown {
  flex: 1 0 100%;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
  list-style: none;
  overflow: hidden;
  display: none;
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown-toggle[aria-expanded="true"] + .ccfs-nav__dropdown,
.ccfs-nav__drawer-list .ccfs-nav__dropdown-toggle[aria-expanded="true"] ~ .ccfs-nav__dropdown {
  display: block;
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown-toggle[aria-expanded="true"] .ccfs-nav__dropdown-chevron {
  transform: rotate(180deg);
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown-item {
  margin: 0;
}

.ccfs-nav__drawer-list .ccfs-nav__dropdown .nav-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-muted);
}

/* --- Laptop and up (>= --bp-laptop = 1024px): the desktop menu serves navigation, so the
       drawer and its scrim are never shown even if JS is mid-state. ------------------------- */
@media (min-width: 1024px) {
  .ccfs-nav__overlay,
  .ccfs-nav__drawer {
    display: none;
  }
}

/* <<< end: ./components/nav/drawer.css */

/* >>> inlined: ./components/chrome-parity.css */
/* GVIS chrome parity: warning banner, header search, sign-in action and floating accessibility shortcut. */

.ccfs-warning-banner {
  background: #fff4d6;
  border-bottom: 1px solid #f4d27a;
  color: var(--c-ink);
}

.ccfs-warning-banner[hidden] {
  display: none;
}

.ccfs-warning-banner__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.ccfs-warning-banner__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: center;
}

.ccfs-warning-banner__text a {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ccfs-warning-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-5);
  height: var(--sp-5);
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--c-navy) 24%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-white) 80%, transparent);
  color: var(--c-navy);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.ccfs-warning-banner__dismiss:hover {
  background: var(--c-white);
}

.ccfs-nav__search {
  display: none;
}

.ccfs-nav__actions [data-nav-signin] {
  display: none;
}

main#content {
  padding-block-end: calc(7rem + env(safe-area-inset-bottom, 0px));
}

.ccfs-accessibility-fab {
  position: fixed;
  inset-inline-start: 1.25rem;
  bottom: 1.25rem;
  z-index: 890;
}

.ccfs-accessibility-fab__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-decoration: none;
}

.ccfs-accessibility-fab__link:hover {
  background: var(--c-bg-alt);
}

.ccfs-accessibility-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .ccfs-nav__actions [data-nav-signin] {
    display: inline-flex;
  }
}

@media (min-width: 1180px) {
  .ccfs-nav__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 17rem;
  }

  .ccfs-nav__search-input {
    min-width: 0;
    width: 10rem;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-sm);
    background: var(--c-white);
  }

  .ccfs-nav__search-input:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--c-navy-light);
  }

  .ccfs-nav__search-suggest {
    position: absolute;
    inset-block-start: calc(100% + var(--sp-1));
    inset-inline: 0;
    z-index: 1200;
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-white);
    box-shadow: var(--shadow-lg);
  }

  .ccfs-nav__search-suggest[hidden] {
    display: none;
  }

  .ccfs-nav__search-option,
  .ccfs-nav__search-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    text-decoration: none;
  }

  .ccfs-nav__search-option small,
  .ccfs-nav__search-empty {
    color: var(--c-muted);
  }

  .ccfs-nav__search-option:hover,
  .ccfs-nav__search-option:focus,
  .ccfs-nav__search-option[aria-selected="true"] {
    outline: none;
    background: var(--c-bg-alt);
  }
}

@media (max-width: 480px) {
  .ccfs-warning-banner__inner {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .ccfs-warning-banner__text {
    text-align: left;
  }

  /* The fixed-fab spacer is dead weight here — the fabs are not fixed at
     <=480px, so the ~7rem reserve just opens a gap above the footer. */
  main#content {
    padding-block-end: var(--sp-5);
  }

  /* Hide the duplicate floating Simple View control: the footer toggle covers
     the same action. */
  .ccfs-accessibility-fab {
    display: none;
  }

  .ccfs-accessibility-fab__label {
    display: inline;
  }
}

/* <<< end: ./components/chrome-parity.css */

/* >>> inlined: ./components/footer/footer.css */
/* row 110 — Footer component (layout + readable legal measure).
   One concern: the site footer chrome composed by resources/views/partials/footer/footer.php.
   Tokens only — no raw hex/px outside the token files (var(--token) throughout). Breakpoint
   literal 768px restates --bp-tablet (custom properties cannot drive @media; tokens/layout/
   breakpoints.css is the single source of truth for the value).

   Mobile-first: labelled link groups, compact enough to scan without turning the footer into
   one long undifferentiated list. The nav columns become a three-column grid from the tablet
   breakpoint up. The verbatim legal disclaimer is capped at --measure-prose (~66ch) so the fine
   print stays readable on a phone instead of running the full viewport width. */

.ccfs-footer {
  background: var(--c-navy-dark);
  color: var(--c-white);
  padding-block: var(--sp-7);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.ccfs-footer__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* --- Navigation columns ------------------------------------------------- */

.ccfs-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

.ccfs-footer__column {
  margin: 0;
}

.ccfs-footer__column:nth-child(3) {
  grid-column: 1 / -1;
}

.ccfs-footer__column-heading {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ccfs-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}

.ccfs-footer__column:nth-child(3) .ccfs-footer__menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ccfs-footer__item {
  margin: 0;
}

.ccfs-footer__link {
  color: var(--c-white);
  text-decoration: none;
}

.ccfs-footer__link:hover,
.ccfs-footer__link:focus-visible {
  color: var(--c-green);
  text-decoration: underline;
}

/* --- Identity / copyright block ----------------------------------------- */

.ccfs-footer__identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--c-border);
}

.ccfs-footer__identity p {
  margin: 0;
  max-width: var(--measure-prose);
  color: var(--c-border);
}

.ccfs-footer__identity .ccfs-footer__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.ccfs-footer__identity span,
.ccfs-footer__identity .ccfs-ico-line {
  color: var(--c-border);
}

.ccfs-footer__copyright {
  color: var(--c-white);
  font-weight: 600;
}

.ccfs-footer__entity {
  line-height: var(--lh-loose);
}

.ccfs-footer__disambiguation {
  font-size: var(--fs-xs);
  color: var(--c-border);
}

/* --- Verbatim legal disclaimer ------------------------------------------ */

.ccfs-footer__legal {
  border-top: 1px solid var(--c-navy-light);
  padding-top: var(--sp-5);
}

.ccfs-footer__legal-text,
.ccfs-footer__legal-text .ccfs-disclaimer {
  display: block;
  /* ~66ch reading measure keeps the fine print legible on a phone. */
  max-width: var(--measure-prose);
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--c-border);
}

/* tablet and up (>= --bp-tablet 768px): lay the nav columns side by side and
   let the identity block share the row width comfortably. */
@media (min-width: 768px) {
  .ccfs-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .ccfs-footer__column:nth-child(3) {
    grid-column: auto;
  }

  .ccfs-footer__column:nth-child(3) .ccfs-footer__menu {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* <<< end: ./components/footer/footer.css */

/* >>> inlined: ./components/simple-view-toggle.css */
/* Simple View footer toggle. */

.ccfs-simple-toggle {
  max-width: var(--measure-prose);
}

.ccfs-simple-toggle__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-navy-light);
  border-radius: var(--r-sm);
  color: var(--c-white);
  text-decoration: none;
  font-weight: 600;
}

.ccfs-simple-toggle__link:hover,
.ccfs-simple-toggle__link:focus-visible {
  color: var(--c-navy-dark);
  background: var(--c-green);
  text-decoration: none;
}

/* <<< end: ./components/simple-view-toggle.css */

/* >>> inlined: ./components/language-switcher.css */
/* Sitewide language switcher — English / Cymraeg / Gàidhlig / Scots.

   Rendered by LocaleService::renderSwitcher() (markup `.ccfs-i18n-switch` >
   `.ccfs-i18n-switch__lang`) in the FOOTER on every public page, and in the
   locale/legal page headers. Its styling previously lived ONLY in an inline
   <style> that LocaleController / LegalController emitted — so on the homepage,
   product, About, Apply and English legal pages the footer switcher had no CSS
   and collapsed into run-together inline links ("EnglishCymraegGàidhligScots").
   Bundling it here styles it wherever it appears. Token-driven (no raw hex). */

.ccfs-i18n-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}

.ccfs-i18n-switch__lang {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ccfs-i18n-switch__lang:hover {
  border-color: var(--c-navy);
  color: var(--c-navy);
}

.ccfs-i18n-switch__lang.is-current {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-navy-dark);
  font-weight: 700;
}

/* Footer context: the switcher sits on the navy footer, so the light-page pills
   would be invisible. Re-tint to a translucent-white outline + white label
   (matching the cookie-banner ghost-on-navy treatment); keep the green current
   pill, which reads fine on navy. */
.ccfs-footer .ccfs-i18n-switch__lang {
  background: transparent;
  border-color: color-mix(in srgb, var(--c-white) 40%, transparent);
  color: var(--c-white);
}

.ccfs-footer .ccfs-i18n-switch__lang:hover {
  background: color-mix(in srgb, var(--c-white) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-white) 65%, transparent);
  color: var(--c-white);
}

.ccfs-footer .ccfs-i18n-switch__lang.is-current {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-navy-dark);
}

/* <<< end: ./components/language-switcher.css */

/* >>> inlined: ./components/cookie-banner.css */
/* row 114 — cookie consent banner + granular preferences (PECR / CMv2).
   Source: live-build ccfs/style.css `.ccfs-cookie*` block. Token-driven — NO raw
   hex/px outside the token files; every value resolves to a design token
   (rows 21-33). The banner sits ABOVE the footer via the z-index scale
   (--z tokens, row 33): it is a fixed bottom band layered at --z-overlay so it
   floats over page content and the footer, and the focus ring / dialog never
   fall behind sticky chrome.

   Visibility contract: the banner is `hidden` in markup and stays display:none
   until the consent JS (row 115) removes [hidden] AND adds .is-visible once it
   confirms no prior choice is recorded. This file never reveals the banner on
   its own — markup must not imply consent, and CSS must not force-show it. */

.cookie-banner {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-overlay);
  box-sizing: border-box;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-navy-dark, var(--c-navy));
  color: var(--c-white);
  /* The banner floats over a navy hero, so a same-navy fill blends in with no
     separation. A green top rule + strong shadow lift it off the page as a
     distinct surface (brief: banner blended into the hero, copy hard to read). */
  border-block-start: 3px solid var(--c-green);
  box-shadow: var(--shadow-lg);
  /* Never let the banner cover the hero headline behind it: cap its height and
     scroll if the granular options are expanded on a short viewport. */
  max-block-size: min(85vh, 40rem);
  overflow-y: auto;
}

/* JS adds .is-visible (and clears [hidden]) only when no choice is recorded. */
.cookie-banner.is-visible {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

/* Belt-and-braces: the [hidden] attribute alone keeps it down before JS runs. */
.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__body {
  flex: 1 1 28rem;
}

.cookie-banner__text {
  margin: 0;
  /* Explicit white: a global `p { color }` must never win the cascade here and
     leave dark-navy copy on the navy banner (brief: cookie text was illegible). */
  color: var(--c-white);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.cookie-banner__link {
  color: var(--c-green);
  text-decoration: underline;
}

.cookie-banner__link:hover {
  color: var(--c-white);
}

/* ---- granular preferences (prefs-dialog) ---- */

/* M3: optional categories are a <fieldset> + <legend> (robust group semantics) replacing
   <ul role="group" aria-label>. Strip native fieldset chrome; the inner list keeps the grid.
   The show/hide rule below still targets .cookie-banner__options (now the fieldset). */
.cookie-banner__options {
  margin: var(--sp-3) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cookie-banner__options-legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cookie-banner__options-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.cookie-banner__option-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  cursor: pointer;
}

.cookie-banner__toggle {
  margin: 0;
  flex: 0 0 auto;
  /* Tint the native control to the brand accent so checked state reads on navy. */
  accent-color: var(--c-green);
}

/* The locked essential toggle is not interactive — show it as fixed. */
.cookie-banner__toggle:disabled {
  cursor: default;
  opacity: 0.85;
}

.cookie-banner__option-name {
  font-weight: 700;
}

/* ---- actions ---- */

.cookie-banner__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* The banner's ghost buttons sit on a dark navy surface, so the default ghost
   variant (navy label) would be invisible. Re-tint ONLY within the banner: a
   white outline + white label, with a faint white wash on hover. Mixed FROM the
   white token via color-mix — no raw hex, the tint tracks the token. */
.cookie-banner__actions .btn--ghost {
  border-color: color-mix(in srgb, var(--c-white) 45%, transparent);
  color: var(--c-white);
}

.cookie-banner__actions .btn--ghost:hover {
  background: color-mix(in srgb, var(--c-white) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-white) 60%, transparent);
  color: var(--c-white);
}

/* Customise + Save are the expand/commit controls for the granular view. On wide
   screens the full option list is always visible, so the Customise affordance is
   hidden; the narrow layout below re-introduces it as a progressive disclosure. */
.cookie-banner__actions .btn[data-cookie-action="customise"] {
  display: none;
}

/* ---- narrow screens: progressive disclosure of the granular options ---- */
@media (max-width: 47.99rem) {
  .cookie-banner {
    padding: var(--sp-3) var(--sp-4);
  }

  .cookie-banner.is-visible {
    flex-direction: column;
    align-items: stretch;
  }

  /* CRITICAL: in the row layout `.cookie-banner__body { flex: 1 1 28rem }` sets a
     28rem WIDTH basis; once the banner stacks into a column that 28rem becomes a
     HEIGHT basis, forcing a ~28rem dead gap between the copy and the buttons and
     inflating the banner until it overlaps the hero. Reset to natural height. */
  .cookie-banner__body {
    flex: 0 1 auto;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__actions .btn {
    flex: 1 1 0;
  }

  /* Collapsed by default; the Customise button (now shown) toggles it open via
     the JS flipping [data-expanded]. Default-collapsed never hides consent — the
     three primary actions remain visible; only the optional toggles + Save fold
     away until the user asks to customise. */
  .cookie-banner__actions .btn[data-cookie-action="customise"] {
    display: inline-flex;
  }

  .cookie-banner[data-expanded="false"] .cookie-banner__options,
  .cookie-banner[data-expanded="false"] .btn[data-cookie-choice="save"] {
    display: none;
  }

  .cookie-banner[data-expanded="true"] .cookie-banner__options {
    margin-block: var(--sp-3);
  }
}

/* ---- full preferences as a centred dialog overlay (optional escalation) ----
   When the JS promotes the banner to a modal preferences view it adds
   .cookie-banner--dialog; the overlay layers at --z-modal (above the
   --z-overlay banner band and any sticky chrome) and dims the page behind it. */
.cookie-banner--dialog {
  inset: 0;
  inset-block-end: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--c-navy-dark) 55%, transparent);
}

.cookie-banner--dialog.is-visible {
  flex-direction: column;
  align-items: stretch;
}

.cookie-banner--dialog .cookie-banner__body,
.cookie-banner--dialog .cookie-banner__actions {
  width: 100%;
  max-width: var(--measure-prose);
  margin-inline: auto;
}

/* <<< end: ./components/cookie-banner.css */

/* >>> inlined: ./components/hero.css */
/* row 159 — Home hero (navy band: copy column + glance card).
   Source: live-build ccfs/style.css `.ccfs-hp-hero*` (15745-15851). Renamed to the clean `.home-hero`
   contract; token-driven. The hero photo layer (live ::before, style.css:15758-15775) is WIRED below —
   the R141 stock binaries landed (/assets/stock/hero-2.{avif,webp,jpg}); F-M2-8's omission is closed. */

.home-hero {
  position: relative;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(43, 108, 168, .55), transparent 60%),
    linear-gradient(160deg, #013b73 0%, var(--c-navy) 55%, var(--c-navy-dark) 100%);
  color: var(--c-white);
  overflow: hidden;
}

/* Hero photo layer — mirrors live style.css:15758-15775 (.ccfs-hp-hero::before): navy gradient over
   the hero-2 photo, AVIF → WebP → JPEG via image-set with a plain-JPEG fallback declaration. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .92) 38%, rgba(0, 51, 102, .55) 70%, rgba(0, 34, 68, .85) 100%),
    url("/assets/stock/hero-2.jpg");
  background-image:
    linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .92) 38%, rgba(0, 51, 102, .55) 70%, rgba(0, 34, 68, .85) 100%),
    image-set(
      url("/assets/stock/hero-2.avif") type("image/avif"),
      url("/assets/stock/hero-2.webp") type("image/webp"),
      url("/assets/stock/hero-2.jpg") type("image/jpeg")
    );
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background-image: radial-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 22px 22px;
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.home-hero__eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-green);
}

.home-hero__title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--c-white);
}

.home-hero__sub {
  margin: 0 0 var(--sp-5);
  max-width: 36em;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .88);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}

.home-hero__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-hero__bullets li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.home-hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.home-hero__card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  backdrop-filter: blur(4px);
}

.home-hero__card-head {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-green);
}

.home-hero__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: 0;
}

.home-hero__facts dt {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .7);
}

.home-hero__facts dd {
  margin: 3px 0 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-white);
}

.home-hero__card-foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .72);
}

/* --bp-* token = 900px (custom props can't drive @media; literal restated per breakpoints.css). */
@media (min-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    padding: var(--sp-8) var(--sp-4);
  }

  .home-hero__card {
    justify-self: end;
    max-width: 380px;
    width: 100%;
  }
}

/* <<< end: ./components/hero.css */

/* >>> inlined: ./components/stat.css */
/* row 164 — Home stats band (four key figures; mono-weight numerals).
   Source: live-build ccfs/style.css `.ccfs-hp-stats*` / `.ccfs-hp-stat*` (15867-15882). Renamed to
   `.home-stats` / `.home-stat`; token-driven. 2-up on phone, 4-up from 720px. */

.home-stats {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}

.home-stats__grid {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-3);
}

.home-stat {
  text-align: center;
}

.home-stat__num {
  display: block;
  font-size: clamp(22px, 4.5vw, 30px);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

.home-stat__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-subtle);
}

/* --bp-* token = 720px (literal restated; custom props can't drive @media). */
@media (min-width: 720px) {
  .home-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* <<< end: ./components/stat.css */

/* >>> inlined: ./components/steps.css */
/* row 171 — Home "how it works" steps (numbered four-step flow).
   Source: live-build ccfs/style.css `.ccfs-hp-how*` (15932-15956). Renamed to `.home-how`;
   token-driven. The band is full-bleed alt-surface; its inner blocks stay container-width.
   1-up → 4-up from 760px. */

.home-how {
  background: var(--c-bg-alt);
  max-width: none;
}

.home-how > .home-section__head,
.home-how > .home-how__steps,
.home-how > .home-how__cta {
  max-width: var(--container-wide);
  margin-inline: auto;
}

.home-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-how__step {
  position: relative;
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.home-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-white);
  background: var(--c-navy);
  border-radius: 50%;
}

.home-how__step-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.home-how__step p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

.home-how__cta {
  margin: var(--sp-6) 0 0;
}

/* --bp-* token = 760px (literal restated; custom props can't drive @media). */
@media (min-width: 760px) {
  .home-how__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* <<< end: ./components/steps.css */

/* >>> inlined: ./components/table.css */
/* row 224 — Shared responsive-table component. Tokens from tokens/*.css, no literals. */

.compare__table {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) repeat(3, 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-block-end: var(--sp-6);
}

.compare__row {
    display: contents;
}

/* Row header cells (label column) */
.compare__cell--label,
.compare__cell--rowhead {
    background: var(--c-bg-alt);
    padding: var(--sp-3) var(--sp-4);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-navy);
    display: flex;
    align-items: center;
}

/* Data cells */
.compare__cell {
    background: var(--c-bg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* Column header row */
.compare__row--head .compare__cell {
    background: var(--c-navy);
    color: var(--c-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-4);
}

.compare__row--head .compare__cell--label {
    background: var(--c-bg-alt);
}

.compare__product-name {
    font-size: var(--fs-base);
    font-weight: 700;
}

.compare__product-tagline {
    font-size: var(--fs-xs);
    opacity: 0.82;
}

/* Mobile: stack columns vertically */
@media (max-width: 760px) {
    .compare__table {
        grid-template-columns: 1fr;
    }

    .compare__row {
        display: block;
        border-bottom: 2px solid var(--c-border);
    }

    .compare__row:last-child {
        border-bottom: none;
    }

    .compare__cell--label,
    .compare__cell--rowhead {
        background: var(--c-navy);
        color: var(--c-bg);
        border-radius: 0;
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .compare__cell {
        border-bottom: 1px solid var(--c-border);
        padding: var(--sp-3);
        display: block;
    }

    .compare__cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: var(--fs-xs);
        color: var(--c-navy);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-block-end: var(--sp-1);
    }

    .compare__row--head {
        display: none; /* Product headers shown separately on mobile via compare__filter */
    }
}

/* <<< end: ./components/table.css */

/* >>> inlined: ./components/product-card.css */
/* row 168 — Home product cards + grid (three product showcase cards).
   Source: live-build ccfs/style.css `.ccfs-hp-products__grid` / `.ccfs-hp-product*` (15884-15930).
   Renamed to `.home-products` / `.home-product`; token-driven. 1-up → 3-up from 760px. */

.home-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-product {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
}

.home-product:hover,
.home-product:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-navy-light);
}

.home-product__top {
  margin-bottom: var(--sp-4);
}

.home-product__badge {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-bg-alt);
  border-radius: var(--r-full);
}

.home-product__badge--core {
  color: var(--c-white);
  background: var(--c-navy);
}

.home-product__name {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-navy);
}

.home-product__tag {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

.home-product__points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.home-product__points li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-ink);
}

.home-product__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--c-green);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.home-product__cta {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-navy);
}

.home-product__cta:hover {
  color: var(--c-navy-light);
}

.home-product__cta span {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.home-product__cta:hover span {
  transform: translateX(3px);
}

/* --bp-* token = 760px (literal restated; custom props can't drive @media). */
@media (min-width: 760px) {
  .home-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* <<< end: ./components/product-card.css */

/* >>> inlined: ./components/trust-bar.css */
/* row 161 — Home trust bar (dark navy strip of trust signals).
   Source: live-build ccfs/style.css `.ccfs-hp-trust*` (15853-15865). Renamed to `.home-trust`;
   token-driven. Decorative SVGs inherit the green accent. */

.home-trust {
  background: var(--c-navy-dark);
}

.home-trust__list {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  justify-content: center;
  list-style: none;
}

.home-trust__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}

.home-trust__list svg {
  color: var(--c-green);
  flex: none;
}

/* <<< end: ./components/trust-bar.css */

/* >>> inlined: ./components/faq.css */
/* row 180 — Home FAQ teaser (2-column: sticky aside + native <details> accordion).
   Source: live-build ccfs/style.css `.ccfs-hp-faq*` (15997-16031). Renamed to `.home-faq`;
   token-driven. Accordion is native <details> — works with no JS. The chevron marker is a pure-CSS
   data-URI mask (no asset). 1-up → 5fr/7fr from 880px (aside sticky). */

.home-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.home-faq__intro {
  margin: var(--sp-1) 0 var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  max-width: 38em;
}

.home-faq__more {
  margin: var(--sp-1) 0 0;
}

.home-faq__list {
  display: grid;
  gap: var(--sp-3);
}

.home-faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.home-faq__item[open] {
  border-color: var(--c-navy-light);
  box-shadow: var(--shadow-sm);
}

.home-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4);
  position: relative;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.home-faq__item summary::-webkit-details-marker {
  display: none;
}

.home-faq__item summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

.home-faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform var(--dur-fast) var(--ease-out);
  background: var(--c-ink-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-faq__item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.home-faq__body {
  padding: 0 var(--sp-4) var(--sp-4);
}

.home-faq__body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

/* --bp-* token = 880px (literal restated; custom props can't drive @media). */
@media (min-width: 880px) {
  .home-faq__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-7);
  }

  .home-faq__aside {
    position: sticky;
    top: var(--sp-5);
  }
}

/* <<< end: ./components/faq.css */

/* >>> inlined: ./components/calculator.css */
/* calculator.css — row 194 (M3)
 * Three-variant (onetime / flex / slice) calculator UI styles.
 * Uses project design tokens: --c-* colours, --r-* radii, --sp-* space, --fs-* type.
 * No figure literals — all numbers come from JS / PHP.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.calc {
	background: var(--c-bg-elevated);
	color: var(--c-ink); /* the calc is a white card; reset text to ink so it never inherits the white of a dark band (was white-on-white inside the calc) */
	border-radius: var(--r-lg);
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

/* ── Tab strip ────────────────────────────────────────────────────────────── */

.calc__tabs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid var(--c-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.calc__tabs::-webkit-scrollbar { display: none; }

.calc__tab {
	flex: 1 1 auto;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink-muted);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.calc__tab:hover {
	color: var(--c-ink);
}

.calc__tab[aria-selected="true"] {
	color: var(--c-navy);
	/* A11Y M_CALC-1: navy underline (was --c-green ≈1.95:1 on white — failed SC 1.4.11 3:1).
	   Navy on white ≈8:1, and the text-colour swap alone was ~1.2:1, so the bar is the cue. */
	border-bottom-color: var(--c-navy);
}

.calc__tab:focus-visible {
	outline: 3px solid var(--c-navy);
	outline-offset: -3px;
	border-radius: 2px;
}

/* R71: "preview" availability badge on the Flex tab when running-credit-live is false (verbatim
   WP string, 14-shortcodes.php:43). Muted uppercase tag — part of the tab's accessible name. */
.calc__tab-tag {
	font-style: normal;
	margin-left: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-ink-muted);
}

/* ── Pane ─────────────────────────────────────────────────────────────────── */

.calc__pane {
	padding: var(--sp-6) var(--sp-6) var(--sp-8);
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 680px) {
	.calc__pane {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Controls column ──────────────────────────────────────────────────────── */

.calc__controls {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

/* M_CALC-4: radio groups are <fieldset>/<legend> — strip the native fieldset chrome so
   they lay out identically to a .calc__field, while AT gets the group name from <legend>. */
.calc__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.calc__label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-ink-muted);
}

.calc__legend {
	padding: 0;
}

.calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--c-border);
	cursor: pointer;
	accent-color: var(--c-navy);
}

.calc__range:focus-visible {
	outline: 3px solid var(--c-navy);
	outline-offset: 3px;
	border-radius: 3px;
}

.calc__range-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-xs);
	color: var(--c-ink-subtle);
	margin-top: var(--sp-1);
}

.calc__freq-group {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.calc__freq-label {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--c-ink);
	cursor: pointer;
}

.calc__freq-label input[type="radio"] {
	accent-color: var(--c-navy);
}

/* ── Readout column ───────────────────────────────────────────────────────── */

/* M_CALC-2: the visual readout is NOT a live region (it updated ~8 rows on every slider
   tick). A single visually-hidden role="status" carries a concise, debounced summary so
   AT hears one settled sentence instead of the whole panel mid-drag. */
.calc__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.calc__readout {
	background: var(--c-bg-alt);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.calc__readout-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-2);
}

.calc__readout-label {
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
}

.calc__readout-value {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	text-align: right;
}

.calc__readout-divider {
	height: 1px;
	background: var(--c-border);
	margin: var(--sp-1) 0;
}

.calc__readout-total {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--c-navy);
}

/* Flex "pay in full vs pay only minimum" comparison table. On product pages it renders inside the
   navy calc band, so without an explicit colour its cells inherit the band's WHITE text onto a light
   --c-bg-alt surface → white-on-white (~1.05:1, the owner-reported bug). Pin to ink like .calc__readout.
   (The figures themselves are computed by the calc lane — flagged separately; this only fixes legibility.) */
.calc__flex-compare,
.calc__flex-compare-table,
.calc__flex-compare-table th,
.calc__flex-compare-table td {
	color: var(--c-ink);
}
.calc__flex-compare-note {
	color: var(--c-ink-muted);
}

/* Cap warning */

.calc__cap-warn {
	font-size: var(--fs-xs);
	color: var(--c-ink-muted);
	background: #fefce8;
	border-left: 3px solid #ca8a04;
	padding: var(--sp-2) var(--sp-3);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	margin-top: var(--sp-1);
}

/* Error message (slice out-of-range) */

.calc__error {
	font-size: var(--fs-sm);
	color: var(--c-error);
	background: #fef2f2;
	border-left: 3px solid var(--c-error);
	padding: var(--sp-2) var(--sp-3);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Instalment toggle (Slice) ────────────────────────────────────────────── */

.calc__inst-group {
	display: flex;
	gap: var(--sp-2);
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */

@media (max-width: 479px) {
	.calc__pane {
		padding: var(--sp-4) var(--sp-4) var(--sp-6);
	}

	.calc__tab {
		font-size: var(--fs-xs);
		padding: var(--sp-2) var(--sp-3);
	}
}

/* <<< end: ./components/calculator.css */

/* >>> inlined: ./components/calc-cta.css */
/* row 175 — Home calculator CTA band (navy gradient teaser + M3 mount point).
   Source: live-build ccfs/style.css `.ccfs-hp-calc*` (15971-15983). Renamed to `.home-calc`;
   token-driven. The representative-example line and the (hidden) M3 mount point sit in the copy
   column; the CTA aligns to the end from 820px. */

.home-calc {
  background: linear-gradient(135deg, #013b73, var(--c-navy-dark));
  color: var(--c-white);
}

.home-calc__inner {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.home-calc__copy h2 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  color: var(--c-white);
}

.home-calc__copy p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .86);
  max-width: 46em;
}

.home-calc__copy .home-calc__rep {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .7);
}

/* --bp-* token = 820px (literal restated; custom props can't drive @media). */
@media (min-width: 820px) {
  .home-calc__inner {
    grid-template-columns: 1.6fr auto;
    gap: var(--sp-7);
    padding: var(--sp-7) var(--sp-4);
  }

  .home-calc__action {
    justify-self: end;
  }
}

/* <<< end: ./components/calc-cta.css */

/* >>> inlined: ./components/eligibility.css */
/* row 216 — Eligibility pre-check widget. All tokens from tokens/*.css, no literals. */

.elig {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-8) var(--sp-6);
    max-width: 640px;
    margin-inline: auto;
}

.elig__h {
    font-size: var(--fs-xl);
    color: var(--c-navy);
    margin-block-end: var(--sp-2);
}

.elig__intro {
    color: var(--c-ink-muted);
    font-size: var(--fs-sm);
    margin-block-end: var(--sp-4);
}

.elig__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    margin-block-end: var(--sp-2);
}

.elig__textarea {
    width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--c-ink);
    background: var(--c-bg);
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.elig__textarea:focus {
    outline: 2px solid var(--c-navy);
    outline-offset: 2px;
    border-color: var(--c-navy);
}

.elig__chars-hint {
    font-size: var(--fs-xs);
    color: var(--c-ink-subtle);
    text-align: right;
    margin-block-start: var(--sp-1);
    margin-block-end: var(--sp-4);
}

.elig__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.elig__apply-link {
    font-size: var(--fs-sm);
    color: var(--c-navy);
}

/* Narration and ARIA live region */
.elig__narration,
.elig__out {
    margin-block-start: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.elig__narration--no_fit,
.elig__out--no_fit {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--c-ink);
}

.elig__narration--unknown,
.elig__out--unknown {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: var(--c-ink);
}

.elig__out--loading {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    color: var(--c-ink-muted);
}

.elig__out--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b42318;
}

.elig__disc {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-subtle);
}

/* <<< end: ./components/eligibility.css */

/* >>> inlined: ./components/form-field.css */
/* row 287 — form field + state styles.
   Source: ccfs-ui-components.php (WP theme component styles).
   Scope: all .ccfs-field / .ccfs-form / .ccfs-form-state atoms. */

/* ── Field container ── */
.ccfs-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.ccfs-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ccfs-field--full { grid-column: 1 / -1; }
.ccfs-field--half { grid-column: span 1; }
.ccfs-field--checkbox { grid-column: 1 / -1; }

/* ── Labels ── */
.ccfs-field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.ccfs-field__req { color: var(--color-error, #b91c1c); }

/* ── Inputs ── */
.ccfs-field__input,
.ccfs-field__select,
.ccfs-field__textarea {
    min-height: 48px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ccfs-field__input:focus,
.ccfs-field__select:focus,
.ccfs-field__textarea:focus {
    outline: none;
    border-color: var(--color-primary, #003366);
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(0,51,102,0.2));
}
.ccfs-field__textarea { min-height: 100px; resize: vertical; }

/* ── Error state ── */
.ccfs-field--error .ccfs-field__input,
.ccfs-field--error .ccfs-field__select,
.ccfs-field--error .ccfs-field__textarea {
    border-color: var(--color-error, #b91c1c);
}
.ccfs-field__error {
    font-size: var(--text-sm);
    color: var(--color-error, #b91c1c);
    margin: 0;
}

/* ── Help text ── */
.ccfs-field__help {
    font-size: var(--text-sm);
    color: var(--color-muted, #586b77);
    margin: 0;
}

/* ── Checkbox ── */
.ccfs-field__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: 1.5;
}
.ccfs-field__checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-primary, #003366);
}

/* ── Honeypot (off-screen, not display:none so autofill bots still see it) ── */
.ccfs-hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Submit row ── */
.ccfs-form__submit { margin-top: var(--sp-4); }

/* ── State regions ── */
.ccfs-form-state { padding: var(--sp-4); border-radius: var(--radius-md, 6px); margin-bottom: var(--sp-4); }
.ccfs-form-state--success { background: var(--color-success-bg, #f0fdf4); border: 1px solid var(--color-success, #15803d); color: var(--color-success, #15803d); }
.ccfs-form-state--error   { background: var(--color-error-bg, #fef2f2);   border: 1px solid var(--color-error, #b91c1c);     color: var(--color-error, #b91c1c); }
.ccfs-form-state__msg     { margin: 0; font-weight: 500; }

/* ── Account-action gate ── */
.ccfs-form-gate { padding: var(--sp-6) 0; }
.ccfs-form-gate__title   { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.ccfs-form-gate__intro   { color: var(--color-muted); margin-bottom: var(--sp-4); }
.ccfs-form-gate__notice  { padding: var(--sp-3) var(--sp-4); background: var(--color-surface-alt, #f8fafc); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); }
.ccfs-form-gate__cta     { display: inline-block; }

/* ── Form page header ── */
.ccfs-form-page { max-width: 680px; margin: 0 auto; padding: var(--sp-8) var(--sp-4); }
.ccfs-form-page__title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-3); }
.ccfs-form-page__intro { color: var(--color-muted); margin-bottom: var(--sp-6); }

/* ── Inline form (inside <details> accordion) ── */
.ccfs-form-inline { padding: var(--sp-4); }
.ccfs-form-inline__intro { margin-bottom: var(--sp-4); color: var(--color-muted); }

/* ── Mobile ── */
@media (max-width: 640px) {
    .ccfs-form__fields { grid-template-columns: 1fr; }
    .ccfs-field--half  { grid-column: 1 / -1; }
}

/* <<< end: ./components/form-field.css */

/* >>> inlined: ./components/cta.css */
/* row 182 — Home closing CTA band (final navy apply band) + the minimal compare-CTA band.
   Source: live-build ccfs/style.css `.ccfs-hp-final*` (16051-16059). Renamed to `.home-final`;
   token-driven, centred. `.home-compare` is the minimal compare band (see PICAI-QUEUE-AI8 F-M2-1). */

.home-final {
  background: linear-gradient(160deg, #013b73 0%, var(--c-navy) 60%, var(--c-navy-dark) 100%);
  color: var(--c-white);
}

.home-final__inner {
  box-sizing: border-box;
  max-width: 820px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.home-final__inner h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  color: var(--c-white);
}

.home-final__inner > p {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .88);
}

.home-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: 0 0 var(--sp-5);
}

.home-final__fine {
  margin: 0 auto;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .6);
  max-width: 60em;
}

/* Minimal compare-CTA band (single verbatim-label CTA) — see PICAI-QUEUE-AI8 F-M2-1. */
.home-compare {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.home-compare__inner {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  justify-content: center;
}

/* <<< end: ./components/cta.css */

/* >>> inlined: ./components/credi-launcher.css */
/* row 377 — Credi launcher + chat panel */

.ccfs-credi-wrap {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
}

/* Floating action button */
.ccfs-credi-fab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    background: var(--c-green);
    color: var(--c-navy);
    border: none;
    border-radius: 2rem;
    font: 600 0.875rem var(--font-sans);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.ccfs-credi-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.ccfs-credi-fab:focus-visible {
    outline: 2px solid var(--c-navy);
    outline-offset: 3px;
}

/* Panel */
.ccfs-credi-panel {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 0;
    width: 340px;
    max-height: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 200ms ease, transform 200ms ease;
}

.ccfs-credi-panel[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.97);
}

.ccfs-credi-panel[aria-hidden="false"] {
    opacity: 1;
    transform: none;
}

/* Header */
.ccfs-credi-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem 0.75rem;
    background: var(--c-navy);
    color: #fff;
    flex-shrink: 0;
}

.ccfs-credi-title {
    font-weight: 700;
    font-size: 0.9375rem;
}

.ccfs-credi-subtitle {
    font-size: 0.75rem;
    opacity: 0.7;
    flex: 1;
}

.ccfs-credi-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    transition: opacity 100ms;
}

.ccfs-credi-close:hover { opacity: 1; }

/* Feed */
.ccfs-credi-feed {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scroll-behavior: smooth;
}

/* Bubbles */
.ccfs-credi-bubble {
    max-width: 90%;
    border-radius: 12px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ccfs-credi-bubble p { margin: 0 0 0.375rem; }
.ccfs-credi-bubble p:last-child { margin-bottom: 0; }

.ccfs-credi-bubble.credi {
    background: var(--c-bg-alt);
    color: var(--c-navy);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}

.ccfs-credi-bubble.visitor {
    background: var(--c-navy);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}

.ccfs-credi-bubble.is-error { border-left: 3px solid var(--c-error); }
.ccfs-credi-bubble.thinking { opacity: 0.6; font-style: italic; }

/* Compose */
.ccfs-credi-compose {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
}

.ccfs-credi-input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.5rem 0.875rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--c-navy);
    background: #fff;
}

/* No local focus override: defer to the global :focus-visible navy ring
 * (--shadow-focus #2b6ca8, 5.51:1, clears SC 2.4.11 ≥3:1). A green outline here
 * was only ~1.95:1 on white and undid the hardened global ring. */

.ccfs-credi-counter {
    font-size: 0.75rem;
    color: var(--c-ink-subtle);
    min-width: 2ch;
}

.ccfs-credi-counter.is-low { color: var(--c-warn-text); }

.ccfs-credi-send {
    background: var(--c-green);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-navy);
    flex-shrink: 0;
    transition: opacity 150ms;
}

.ccfs-credi-send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 480px) {
    .ccfs-credi-wrap {
        position: relative;
        bottom: auto;
        right: auto;
        z-index: auto;
        display: flex;
        justify-content: flex-end;
        margin: 0 var(--sp-4) var(--sp-4);
    }
    .ccfs-credi-panel {
        position: fixed;
        width: calc(100vw - 2rem);
        right: 1rem;
        bottom: 1rem;
        z-index: 900;
    }
    .ccfs-credi-fab-label { display: inline; }
    .ccfs-credi-fab { padding: 0.875rem 1.125rem; border-radius: 2rem; }
}

/* <<< end: ./components/credi-launcher.css */


/* 5 — page-level CSS (per-surface scoped rules). */
/* >>> inlined: ./pages/home.css */
/* row 183 — Home page CSS bundle ("home bundle"). The home page links THIS (built to
   public/assets/css/home.css) in addition to the chrome bundle marketing.css. It @imports the home
   section component atoms (rows 159-182) and carries the home-only layer: the shared section shell,
   the sections without a dedicated component atom (section head, why grid, about grid — see
   PICAI-QUEUE-AI8 F-M2-6), the dark-band CTA contrast overrides, and the progressive reveal state.

   Cascade: component atoms first, then the home-only layer (lowest specificity, token-driven).
   Bundler note (F-M2-6): bin/build-assets.php (AI#5) should flatten this @import tree to
   public/assets/css/home.css, the same way it flattens marketing.css. */

/* 1 — home section component atoms (rows 159-182). */
/* >>> inlined: ../components/hero.css */
/* row 159 — Home hero (navy band: copy column + glance card).
   Source: live-build ccfs/style.css `.ccfs-hp-hero*` (15745-15851). Renamed to the clean `.home-hero`
   contract; token-driven. The hero photo layer (live ::before, style.css:15758-15775) is WIRED below —
   the R141 stock binaries landed (/assets/stock/hero-2.{avif,webp,jpg}); F-M2-8's omission is closed. */

.home-hero {
  position: relative;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(43, 108, 168, .55), transparent 60%),
    linear-gradient(160deg, #013b73 0%, var(--c-navy) 55%, var(--c-navy-dark) 100%);
  color: var(--c-white);
  overflow: hidden;
}

/* Hero photo layer — mirrors live style.css:15758-15775 (.ccfs-hp-hero::before): navy gradient over
   the hero-2 photo, AVIF → WebP → JPEG via image-set with a plain-JPEG fallback declaration. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .92) 38%, rgba(0, 51, 102, .55) 70%, rgba(0, 34, 68, .85) 100%),
    url("/assets/stock/hero-2.jpg");
  background-image:
    linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .92) 38%, rgba(0, 51, 102, .55) 70%, rgba(0, 34, 68, .85) 100%),
    image-set(
      url("/assets/stock/hero-2.avif") type("image/avif"),
      url("/assets/stock/hero-2.webp") type("image/webp"),
      url("/assets/stock/hero-2.jpg") type("image/jpeg")
    );
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat, no-repeat;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background-image: radial-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 22px 22px;
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.home-hero__eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-green);
}

.home-hero__title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--c-white);
}

.home-hero__sub {
  margin: 0 0 var(--sp-5);
  max-width: 36em;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .88);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}

.home-hero__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-hero__bullets li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.home-hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.home-hero__card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  backdrop-filter: blur(4px);
}

.home-hero__card-head {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-green);
}

.home-hero__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: 0;
}

.home-hero__facts dt {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .7);
}

.home-hero__facts dd {
  margin: 3px 0 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-white);
}

.home-hero__card-foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .72);
}

/* --bp-* token = 900px (custom props can't drive @media; literal restated per breakpoints.css). */
@media (min-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-7);
    padding: var(--sp-8) var(--sp-4);
  }

  .home-hero__card {
    justify-self: end;
    max-width: 380px;
    width: 100%;
  }
}

/* <<< end: ../components/hero.css */

/* >>> inlined: ../components/trust-bar.css */
/* row 161 — Home trust bar (dark navy strip of trust signals).
   Source: live-build ccfs/style.css `.ccfs-hp-trust*` (15853-15865). Renamed to `.home-trust`;
   token-driven. Decorative SVGs inherit the green accent. */

.home-trust {
  background: var(--c-navy-dark);
}

.home-trust__list {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  justify-content: center;
  list-style: none;
}

.home-trust__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}

.home-trust__list svg {
  color: var(--c-green);
  flex: none;
}

/* <<< end: ../components/trust-bar.css */

/* >>> inlined: ../components/stat.css */
/* row 164 — Home stats band (four key figures; mono-weight numerals).
   Source: live-build ccfs/style.css `.ccfs-hp-stats*` / `.ccfs-hp-stat*` (15867-15882). Renamed to
   `.home-stats` / `.home-stat`; token-driven. 2-up on phone, 4-up from 720px. */

.home-stats {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}

.home-stats__grid {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-3);
}

.home-stat {
  text-align: center;
}

.home-stat__num {
  display: block;
  font-size: clamp(22px, 4.5vw, 30px);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}

.home-stat__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-subtle);
}

/* --bp-* token = 720px (literal restated; custom props can't drive @media). */
@media (min-width: 720px) {
  .home-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* <<< end: ../components/stat.css */

/* >>> inlined: ../components/product-card.css */
/* row 168 — Home product cards + grid (three product showcase cards).
   Source: live-build ccfs/style.css `.ccfs-hp-products__grid` / `.ccfs-hp-product*` (15884-15930).
   Renamed to `.home-products` / `.home-product`; token-driven. 1-up → 3-up from 760px. */

.home-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-product {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
}

.home-product:hover,
.home-product:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-navy-light);
}

.home-product__top {
  margin-bottom: var(--sp-4);
}

.home-product__badge {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-bg-alt);
  border-radius: var(--r-full);
}

.home-product__badge--core {
  color: var(--c-white);
  background: var(--c-navy);
}

.home-product__name {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-navy);
}

.home-product__tag {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

.home-product__points {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.home-product__points li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-ink);
}

.home-product__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: var(--c-green);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.home-product__cta {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--c-navy);
}

.home-product__cta:hover {
  color: var(--c-navy-light);
}

.home-product__cta span {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.home-product__cta:hover span {
  transform: translateX(3px);
}

/* --bp-* token = 760px (literal restated; custom props can't drive @media). */
@media (min-width: 760px) {
  .home-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* <<< end: ../components/product-card.css */

/* >>> inlined: ../components/steps.css */
/* row 171 — Home "how it works" steps (numbered four-step flow).
   Source: live-build ccfs/style.css `.ccfs-hp-how*` (15932-15956). Renamed to `.home-how`;
   token-driven. The band is full-bleed alt-surface; its inner blocks stay container-width.
   1-up → 4-up from 760px. */

.home-how {
  background: var(--c-bg-alt);
  max-width: none;
}

.home-how > .home-section__head,
.home-how > .home-how__steps,
.home-how > .home-how__cta {
  max-width: var(--container-wide);
  margin-inline: auto;
}

.home-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-how__step {
  position: relative;
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.home-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-white);
  background: var(--c-navy);
  border-radius: 50%;
}

.home-how__step-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.home-how__step p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

.home-how__cta {
  margin: var(--sp-6) 0 0;
}

/* --bp-* token = 760px (literal restated; custom props can't drive @media). */
@media (min-width: 760px) {
  .home-how__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* <<< end: ../components/steps.css */

/* >>> inlined: ../components/calc-cta.css */
/* row 175 — Home calculator CTA band (navy gradient teaser + M3 mount point).
   Source: live-build ccfs/style.css `.ccfs-hp-calc*` (15971-15983). Renamed to `.home-calc`;
   token-driven. The representative-example line and the (hidden) M3 mount point sit in the copy
   column; the CTA aligns to the end from 820px. */

.home-calc {
  background: linear-gradient(135deg, #013b73, var(--c-navy-dark));
  color: var(--c-white);
}

.home-calc__inner {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.home-calc__copy h2 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  color: var(--c-white);
}

.home-calc__copy p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .86);
  max-width: 46em;
}

.home-calc__copy .home-calc__rep {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .7);
}

/* --bp-* token = 820px (literal restated; custom props can't drive @media). */
@media (min-width: 820px) {
  .home-calc__inner {
    grid-template-columns: 1.6fr auto;
    gap: var(--sp-7);
    padding: var(--sp-7) var(--sp-4);
  }

  .home-calc__action {
    justify-self: end;
  }
}

/* <<< end: ../components/calc-cta.css */

/* >>> inlined: ../components/calculator.css */
/* calculator.css — row 194 (M3)
 * Three-variant (onetime / flex / slice) calculator UI styles.
 * Uses project design tokens: --c-* colours, --r-* radii, --sp-* space, --fs-* type.
 * No figure literals — all numbers come from JS / PHP.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.calc {
	background: var(--c-bg-elevated);
	color: var(--c-ink); /* the calc is a white card; reset text to ink so it never inherits the white of a dark band (was white-on-white inside the calc) */
	border-radius: var(--r-lg);
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

/* ── Tab strip ────────────────────────────────────────────────────────────── */

.calc__tabs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid var(--c-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.calc__tabs::-webkit-scrollbar { display: none; }

.calc__tab {
	flex: 1 1 auto;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink-muted);
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s;
}

.calc__tab:hover {
	color: var(--c-ink);
}

.calc__tab[aria-selected="true"] {
	color: var(--c-navy);
	/* A11Y M_CALC-1: navy underline (was --c-green ≈1.95:1 on white — failed SC 1.4.11 3:1).
	   Navy on white ≈8:1, and the text-colour swap alone was ~1.2:1, so the bar is the cue. */
	border-bottom-color: var(--c-navy);
}

.calc__tab:focus-visible {
	outline: 3px solid var(--c-navy);
	outline-offset: -3px;
	border-radius: 2px;
}

/* R71: "preview" availability badge on the Flex tab when running-credit-live is false (verbatim
   WP string, 14-shortcodes.php:43). Muted uppercase tag — part of the tab's accessible name. */
.calc__tab-tag {
	font-style: normal;
	margin-left: var(--sp-1);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-ink-muted);
}

/* ── Pane ─────────────────────────────────────────────────────────────────── */

.calc__pane {
	padding: var(--sp-6) var(--sp-6) var(--sp-8);
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 680px) {
	.calc__pane {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Controls column ──────────────────────────────────────────────────────── */

.calc__controls {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.calc__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

/* M_CALC-4: radio groups are <fieldset>/<legend> — strip the native fieldset chrome so
   they lay out identically to a .calc__field, while AT gets the group name from <legend>. */
.calc__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.calc__label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-ink-muted);
}

.calc__legend {
	padding: 0;
}

.calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--c-border);
	cursor: pointer;
	accent-color: var(--c-navy);
}

.calc__range:focus-visible {
	outline: 3px solid var(--c-navy);
	outline-offset: 3px;
	border-radius: 3px;
}

.calc__range-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-xs);
	color: var(--c-ink-subtle);
	margin-top: var(--sp-1);
}

.calc__freq-group {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.calc__freq-label {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--c-ink);
	cursor: pointer;
}

.calc__freq-label input[type="radio"] {
	accent-color: var(--c-navy);
}

/* ── Readout column ───────────────────────────────────────────────────────── */

/* M_CALC-2: the visual readout is NOT a live region (it updated ~8 rows on every slider
   tick). A single visually-hidden role="status" carries a concise, debounced summary so
   AT hears one settled sentence instead of the whole panel mid-drag. */
.calc__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.calc__readout {
	background: var(--c-bg-alt);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.calc__readout-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-2);
}

.calc__readout-label {
	font-size: var(--fs-sm);
	color: var(--c-ink-muted);
}

.calc__readout-value {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
	text-align: right;
}

.calc__readout-divider {
	height: 1px;
	background: var(--c-border);
	margin: var(--sp-1) 0;
}

.calc__readout-total {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--c-navy);
}

/* Flex "pay in full vs pay only minimum" comparison table. On product pages it renders inside the
   navy calc band, so without an explicit colour its cells inherit the band's WHITE text onto a light
   --c-bg-alt surface → white-on-white (~1.05:1, the owner-reported bug). Pin to ink like .calc__readout.
   (The figures themselves are computed by the calc lane — flagged separately; this only fixes legibility.) */
.calc__flex-compare,
.calc__flex-compare-table,
.calc__flex-compare-table th,
.calc__flex-compare-table td {
	color: var(--c-ink);
}
.calc__flex-compare-note {
	color: var(--c-ink-muted);
}

/* Cap warning */

.calc__cap-warn {
	font-size: var(--fs-xs);
	color: var(--c-ink-muted);
	background: #fefce8;
	border-left: 3px solid #ca8a04;
	padding: var(--sp-2) var(--sp-3);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	margin-top: var(--sp-1);
}

/* Error message (slice out-of-range) */

.calc__error {
	font-size: var(--fs-sm);
	color: var(--c-error);
	background: #fef2f2;
	border-left: 3px solid var(--c-error);
	padding: var(--sp-2) var(--sp-3);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── Instalment toggle (Slice) ────────────────────────────────────────────── */

.calc__inst-group {
	display: flex;
	gap: var(--sp-2);
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */

@media (max-width: 479px) {
	.calc__pane {
		padding: var(--sp-4) var(--sp-4) var(--sp-6);
	}

	.calc__tab {
		font-size: var(--fs-xs);
		padding: var(--sp-2) var(--sp-3);
	}
}

/* <<< end: ../components/calculator.css */

/* >>> inlined: ../components/faq.css */
/* row 180 — Home FAQ teaser (2-column: sticky aside + native <details> accordion).
   Source: live-build ccfs/style.css `.ccfs-hp-faq*` (15997-16031). Renamed to `.home-faq`;
   token-driven. Accordion is native <details> — works with no JS. The chevron marker is a pure-CSS
   data-URI mask (no asset). 1-up → 5fr/7fr from 880px (aside sticky). */

.home-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.home-faq__intro {
  margin: var(--sp-1) 0 var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  max-width: 38em;
}

.home-faq__more {
  margin: var(--sp-1) 0 0;
}

.home-faq__list {
  display: grid;
  gap: var(--sp-3);
}

.home-faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.home-faq__item[open] {
  border-color: var(--c-navy-light);
  box-shadow: var(--shadow-sm);
}

.home-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4);
  position: relative;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.home-faq__item summary::-webkit-details-marker {
  display: none;
}

.home-faq__item summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

.home-faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform var(--dur-fast) var(--ease-out);
  background: var(--c-ink-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-faq__item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.home-faq__body {
  padding: 0 var(--sp-4) var(--sp-4);
}

.home-faq__body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

/* --bp-* token = 880px (literal restated; custom props can't drive @media). */
@media (min-width: 880px) {
  .home-faq__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-7);
  }

  .home-faq__aside {
    position: sticky;
    top: var(--sp-5);
  }
}

/* <<< end: ../components/faq.css */

/* >>> inlined: ../components/cta.css */
/* row 182 — Home closing CTA band (final navy apply band) + the minimal compare-CTA band.
   Source: live-build ccfs/style.css `.ccfs-hp-final*` (16051-16059). Renamed to `.home-final`;
   token-driven, centred. `.home-compare` is the minimal compare band (see PICAI-QUEUE-AI8 F-M2-1). */

.home-final {
  background: linear-gradient(160deg, #013b73 0%, var(--c-navy) 60%, var(--c-navy-dark) 100%);
  color: var(--c-white);
}

.home-final__inner {
  box-sizing: border-box;
  max-width: 820px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.home-final__inner h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 800;
  color: var(--c-white);
}

.home-final__inner > p {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .88);
}

.home-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: 0 0 var(--sp-5);
}

.home-final__fine {
  margin: 0 auto;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, .6);
  max-width: 60em;
}

/* Minimal compare-CTA band (single verbatim-label CTA) — see PICAI-QUEUE-AI8 F-M2-1. */
.home-compare {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.home-compare__inner {
  box-sizing: border-box;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  justify-content: center;
}

/* <<< end: ../components/cta.css */


/* 2 — shared section shell (no dedicated component atom in the map; home-bundle level). */
.home-section {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-4);
}

.home-section__head {
  max-width: 760px;
  margin: 0 0 var(--sp-6);
}

.home-section__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-navy-light);
}

.home-section__title {
  margin: 0 0 var(--sp-3);
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.18;
  font-weight: 800;
  color: var(--c-navy);
}

.home-section__lede {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

/* 3 — Why Credicorp grid + tiles (front-page.php:225-263; no dedicated CSS atom — F-M2-6). */
.home-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-why__tile {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
}

.home-why__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-navy);
  background: color-mix(in srgb, var(--c-navy) 8%, transparent);
}

.home-why__tile h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.home-why__tile p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

/* --bp-* tokens = 640px / 940px (literals restated; custom props can't drive @media). */
@media (min-width: 640px) {
  .home-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 940px) {
  .home-why__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 — About band grid (front-page.php:278-310; no dedicated CSS atom — F-M2-6).
   Uses the staged responsive stock/card-5 photo from the live WP theme. */
.home-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

.home-about__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg, 12px);
}

.home-about__copy p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
}

.home-about__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

/* 5 — Newsroom/support ribbon (front-page.php:394-424 labels; items from corpus). */
.home-ribbon {
  max-width: var(--container-wide);
}

.home-ribbon__head {
  margin-inline: auto;
  text-align: center;
}

.home-ribbon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.home-ribbon__col {
  min-width: 0;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-navy) 8%, transparent);
}

.home-ribbon__col:first-child {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 8%, var(--c-white)), var(--c-white) 46%);
}

.home-ribbon__col-title {
  margin: 0 0 var(--sp-4);
  color: var(--c-navy);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
}

.home-ribbon__items {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-ribbon__item {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 72%, transparent);
}

.home-ribbon__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.home-ribbon__link {
  color: var(--c-navy);
  font-weight: 800;
  line-height: var(--lh-tight);
  text-decoration: none;
}

.home-ribbon__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-ribbon__excerpt {
  margin: var(--sp-2) 0 0;
  color: var(--c-ink-muted);
  line-height: var(--lh-normal);
}

.home-ribbon__date {
  margin: var(--sp-2) 0 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.home-ribbon__browse {
  margin: var(--sp-5) 0 0;
}

@media (min-width: 860px) {
  .home-ribbon__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --bp-* token = 860px (literal restated; custom props can't drive @media). */
@media (min-width: 860px) {
  .home-about__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--sp-7);
  }
}

/* 6 — Dark-band CTA contrast. The default .btn--primary (navy fill) and .btn--ghost (navy label)
   vanish on the navy hero/calc/final bands; restate them with brand-green fill + white outline so
   the CTAs stay legible (WCAG contrast) on dark. */
.home-hero .btn--primary,
.home-calc .btn--primary,
.home-final .btn--primary {
  background: var(--c-green);
  border-color: var(--c-green);
  color: var(--c-navy-dark);
}

.home-hero .btn--primary:hover,
.home-calc .btn--primary:hover,
.home-final .btn--primary:hover {
  background: color-mix(in srgb, var(--c-green) 86%, #000);
  border-color: color-mix(in srgb, var(--c-green) 86%, #000);
  color: var(--c-navy-dark);
}

.home-hero .btn--ghost,
.home-calc .btn--ghost,
.home-final .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--c-white);
}

.home-hero .btn--ghost:hover,
.home-calc .btn--ghost:hover,
.home-final .btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .8);
  color: var(--c-white);
}

/* The shared focus ring (--shadow-focus) is a navy tint tuned for white surfaces — near-invisible on
   these navy bands. Restate a high-contrast white ring so keyboard focus stays visible (WCAG 2.4.11). */
.home-hero .btn:focus-visible,
.home-calc .btn:focus-visible,
.home-final .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .65);
}

/* 7 — Progressive reveal (row 184). The hidden/offset initial state applies ONLY when the
   reveal-on-scroll module has armed it (adds `reveal-on` to <html>) — which it does NOT do under
   reduced motion or no-JS, so content is always visible without JS. */
.reveal-on .home-section {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-on .home-section.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on .home-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 8 — Back-to-top control (row 186 atom + row 185 module). No dedicated CSS atom in the map; styled
   here at the home-bundle level (F-M2-6). A floating circular control, bottom-end; the `hidden`
   attribute (set until scrolled, by back-to-top.js) keeps it out of the flow with no-JS. */
.back-to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-sticky, 100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-navy-dark);
  border-radius: var(--r-full);
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top:hover {
  background: var(--c-navy-dark);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* <<< end: ./pages/home.css */

/* >>> inlined: ./pages/product.css */
/* row 246 — product page bundle (business-loan, flex, slice). Source: style.css */

/* ── Page shell ──────────────────────────────────────────────────────── */
.page-product .product-page {
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--sp-400) var(--sp-300);
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.product-hero {
    position: relative;
    padding: var(--sp-600) 0 var(--sp-400);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-500);
    overflow: hidden;
}

/* Per-product hero: tinted navy gradient over stock photo.
   hero-1=loan (navy+green), hero-3=flex (navy+blue), hero-5=slice (navy+orange).
   Improvement over WP: each product page has a distinct hero band.
   Source: page-business-loans.php, page-business-credit-facility.php, page-credicorp-slice.php
   (WP used inline background-image but no per-product colour). */

/* Cohesive dark-navy overlay over the stock photo — the image reads as a subtle texture, white text
   stays crisp, and the per-product accent lives ONLY on the bottom border + kicker (no garish
   two-tone gradient). Trailing var(--c-navy) is the solid fallback if the photo fails to load. */
.product-hero--loan {
    background:
        linear-gradient(105deg,
            color-mix(in srgb, var(--c-navy) 95%, transparent) 0%,
            color-mix(in srgb, var(--c-navy) 88%, transparent) 100%),
        url('/assets/stock/hero-1.webp') center / cover no-repeat,
        var(--c-navy);
    border-bottom-color: var(--c-green);
}

.product-hero--flex {
    background:
        linear-gradient(105deg,
            color-mix(in srgb, var(--c-navy) 95%, transparent) 0%,
            color-mix(in srgb, var(--c-navy) 88%, transparent) 100%),
        url('/assets/stock/hero-3.webp') center / cover no-repeat,
        var(--c-navy);
    border-bottom-color: #1a6fc4;
}

.product-hero--slice {
    background:
        linear-gradient(105deg,
            color-mix(in srgb, var(--c-navy) 95%, transparent) 0%,
            color-mix(in srgb, var(--c-navy) 88%, transparent) 100%),
        url('/assets/stock/hero-5.webp') center / cover no-repeat,
        var(--c-navy);
    border-bottom-color: #c46a1a;
}

/* On coloured hero bands the text must flip to white */
.product-hero--loan .product-hero__h,
.product-hero--flex .product-hero__h,
.product-hero--slice .product-hero__h {
    color: #fff;
}

.product-hero--loan .product-hero__lede,
.product-hero--flex .product-hero__lede,
.product-hero--slice .product-hero__lede {
    color: color-mix(in srgb, white 92%, transparent);
}

/* Product badge — top-right corner of the hero section.
   For flex/slice: <img> with white webp. For loan: CSS text pill. */
.product-hero__badge {
    position: absolute;
    top: var(--sp-400);
    right: var(--sp-400);
    height: 3rem;
    width: auto;
    object-fit: contain;
    opacity: .92;
    pointer-events: none;
}

.product-hero__badge--text {
    display: inline-flex;
    align-items: center;
    padding: .3em .8em;
    background: color-mix(in srgb, var(--c-green) 85%, transparent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--r-sm);
    line-height: 1;
    /* reset image-element sizing not needed but keep neutral */
    height: auto;
    width: auto;
    object-fit: unset;
    opacity: 1;
}

.product-hero__kicker {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    /* Defensive default: navy (12.61:1 on white) so a variant-less product-hero
       never paints green-on-white (1.95:1). The --loan/--flex/--slice overrides
       below still flip this to #fff on the navy band. */
    color: var(--c-navy);
    font-weight: 600;
    margin-bottom: var(--sp-200);
}

.product-hero--loan .product-hero__kicker,
.product-hero--flex .product-hero__kicker,
.product-hero--slice .product-hero__kicker {
    color: #fff;
    opacity: .8;
}

.product-hero__h {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    color: var(--c-navy);
    margin: 0 0 var(--sp-300);
}

.product-hero__lede {
    font-size: var(--fs-lg);
    color: var(--c-text-secondary);
    max-width: 52ch;
    margin: 0 0 var(--sp-400);
}

.product-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-200);
    align-items: center;
}

/* The hero CTAs sit on the dark navy band — recolour them for the dark surface (the default navy
   primary vanishes into the band and the navy-ink ghost is fully invisible). Primary -> solid green
   pill (navy ink), secondary -> white outline + white text. */
.product-hero--loan .product-hero__actions .btn--primary,
.product-hero--flex .product-hero__actions .btn--primary,
.product-hero--slice .product-hero__actions .btn--primary {
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-navy);
}
.product-hero--loan .product-hero__actions .btn--primary:hover,
.product-hero--flex .product-hero__actions .btn--primary:hover,
.product-hero--slice .product-hero__actions .btn--primary:hover {
    background: color-mix(in srgb, var(--c-green) 86%, white);
    border-color: color-mix(in srgb, var(--c-green) 86%, white);
    color: var(--c-navy);
}
.product-hero--loan .product-hero__actions .btn--ghost,
.product-hero--flex .product-hero__actions .btn--ghost,
.product-hero--slice .product-hero__actions .btn--ghost {
    color: #fff;
    border-color: color-mix(in srgb, white 55%, transparent);
}
.product-hero--loan .product-hero__actions .btn--ghost:hover,
.product-hero--flex .product-hero__actions .btn--ghost:hover,
.product-hero--slice .product-hero__actions .btn--ghost:hover {
    background: color-mix(in srgb, white 12%, transparent);
    border-color: #fff;
    color: #fff;
}

/* ── Flex-only gate notice ───────────────────────────────────────────── */
.product-gate {
    background: color-mix(in srgb, var(--c-navy) 6%, white);
    border: 1px solid color-mix(in srgb, var(--c-navy) 20%, white);
    border-radius: var(--r-md);
    padding: var(--sp-400);
    margin-bottom: var(--sp-500);
}

.product-gate__h {
    font-size: var(--fs-md);
    color: var(--c-navy);
    margin: 0 0 var(--sp-200);
}

/* ── Sections ────────────────────────────────────────────────────────── */
.product-section {
    margin-bottom: var(--sp-600);
}

.product-section__h {
    font-size: var(--fs-xl);
    color: var(--c-navy);
    margin: 0 0 var(--sp-300);
    padding-bottom: var(--sp-200);
    border-bottom: 2px solid var(--c-green);
    display: inline-block;
}

/* ── Tick lists ──────────────────────────────────────────────────────── */
.product-section .ticks {
    list-style: none;
    padding: 0;
    margin: var(--sp-300) 0 0;
}

.product-section .ticks li {
    padding-left: var(--sp-400);
    position: relative;
    margin-bottom: var(--sp-200);
    line-height: 1.55;
}

.product-section .ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .35em;
    width: 1.1em;
    height: 1.1em;
    background: var(--c-green);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
}

/* ── Step list (ol.steps) ───────────────────────────────────────────── */
.product-section .steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: var(--sp-300) 0 0;
}

.product-section .steps li {
    counter-increment: step;
    padding-left: 3rem;
    position: relative;
    margin-bottom: var(--sp-300);
}

.product-section .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--c-navy);
    color: white;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Callout ─────────────────────────────────────────────────────────── */
.product-section .callout {
    background: color-mix(in srgb, var(--c-green) 10%, white);
    border-left: 3px solid var(--c-green);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--sp-400);
    margin: var(--sp-300) 0 0;
}

.product-section .callout h3 {
    font-size: var(--fs-md);
    color: var(--c-navy);
    margin: 0 0 var(--sp-200);
}

/* ── Table sections (e.g. Slice fee table) ──────────────────────────── */
.product-section .product-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-300) 0 0;
    font-size: var(--fs-sm);
}

.product-section .product-table th,
.product-section .product-table td {
    text-align: left;
    padding: var(--sp-200) var(--sp-300);
    border-bottom: 1px solid var(--c-border);
}

.product-section .product-table th {
    font-weight: 600;
    color: var(--c-navy);
    background: color-mix(in srgb, var(--c-navy) 4%, white);
}

/* ── CTA section ─────────────────────────────────────────────────────── */
.product-cta {
    background: var(--c-navy);
    color: white;
    border-radius: var(--r-lg);
    padding: var(--sp-600) var(--sp-400);
    text-align: center;
    margin-top: var(--sp-600);
}

.product-cta__h {
    font-size: var(--fs-xl);
    color: white;
    margin: 0 0 var(--sp-200);
}

.product-cta__body {
    color: color-mix(in srgb, white 80%, transparent);
    margin: 0 0 var(--sp-400);
}

/* ── Jump-nav (mobile "On this page") ───────────────────────────────── */
/* Source: page-business-loans.php:71-87 (ccfs-bl-jumpnav). Mobile-first:
   visible on small screens; hidden on desktop — the full-length desktop
   layout lets readers scan the page at a glance without a nav shortcut. */
.product-jumpnav {
    margin: 0 0 var(--sp-500);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.product-jumpnav__details {
    /* <details> has no padding of its own; children carry it */
}

.product-jumpnav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-200);
    padding: var(--sp-300) var(--sp-400);
    background: color-mix(in srgb, var(--c-navy) 4%, white);
    cursor: pointer;
    list-style: none; /* remove UA triangle */
    font-weight: 600;
    color: var(--c-navy);
    user-select: none;
}

/* Remove WebKit's native disclosure triangle */
.product-jumpnav__summary::-webkit-details-marker { display: none; }

.product-jumpnav__chevron {
    font-size: 1.1em;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.product-jumpnav__details[open] .product-jumpnav__chevron {
    transform: rotate(180deg);
}

.product-jumpnav__list {
    list-style: none;
    margin: 0;
    padding: var(--sp-200) 0;
    border-top: 1px solid var(--c-border);
}

.product-jumpnav__list li + li {
    border-top: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent);
}

.product-jumpnav__link {
    display: block;
    padding: var(--sp-200) var(--sp-400);
    color: var(--c-navy);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.product-jumpnav__link:hover,
.product-jumpnav__link:focus {
    /* Green stays as the wash; navy carries the text (navy-on-tint = 11.75:1).
       Was green-on-white text (1.82:1). */
    background: var(--c-surface-green-tint);
    color: var(--c-navy);
    outline: none;
}

.product-jumpnav__link--cta {
    font-weight: 700;
    /* Navy (12.61:1) instead of green-on-white (1.95:1); weight + border-top carry the emphasis. */
    color: var(--c-navy);
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-100);
    padding-top: var(--sp-300);
}

/* Hide jump-nav on desktop — the full page layout is visible at a glance */
@media (min-width: 768px) {
    .product-jumpnav {
        display: none;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .product-hero {
        padding: var(--sp-400) 0 var(--sp-300);
    }

    .product-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-hero__badge {
        height: 2.25rem;
        top: var(--sp-300);
        right: var(--sp-300);
    }

    /* Mobile: float the badge out of the corner and flow it ABOVE the
       heading so the pill (incl. the text variant) never overlaps the H1.
       Source intent: no badge/H1 overlap at 375px for loan/flex/slice. */
    .product-hero__badge {
        position: static;
        margin: 0 0 var(--sp-300);
    }
}

/* <<< end: ./pages/product.css */

/* >>> inlined: ./pages/apply-entry.css */
/* row 371 — apply-entry page styles
   VIS-MARKETING-APPLY-ENTRY-HERO: hero band + why-apply callout added above the form.
   ae-hero mirrors home-hero (hero-2 photo, navy overlay, left-aligned).
   ae-why mirrors home-trust dark strip. */

/* ── Apply-entry hero band ─────────────────────────────────────────────────── */

.ae-hero {
    position: relative;
    background: var(--c-navy);
    color: var(--c-white);
    overflow: hidden;
}

/* Navy gradient over hero-2 photo — mirrors home-hero::before (hero.css:17-36).
   Left-heavy gradient to balance the right-side form below. AVIF→WebP→JPEG with
   plain-JPEG fallback; identical stock binary (/assets/stock/hero-2.*). */
.ae-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .90) 40%, rgba(0, 51, 102, .60) 75%, rgba(0, 34, 68, .85) 100%),
        url("/assets/stock/hero-2.jpg");
    background-image:
        linear-gradient(90deg, #003366 0%, rgba(0, 51, 102, .90) 40%, rgba(0, 51, 102, .60) 75%, rgba(0, 34, 68, .85) 100%),
        image-set(
            url("/assets/stock/hero-2.avif") type("image/avif"),
            url("/assets/stock/hero-2.webp") type("image/webp"),
            url("/assets/stock/hero-2.jpg")  type("image/jpeg")
        );
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.ae-hero__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--sp-8, 3rem) var(--sp-4, 1.5rem);
}

.ae-hero__copy {
    max-width: 580px;
}

.ae-hero__eyebrow {
    margin: 0 0 var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-green);
}

.ae-hero__title {
    margin: 0 0 var(--sp-5, 1.5rem);
    font-size: clamp(26px, 5vw, 44px);
    line-height: 1.1;
    font-weight: 800;
    color: var(--c-white);
}

/* 3-step ordered list — numbered badges + text, horizontal flow */
.ae-hero__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 0.5rem) var(--sp-5, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ae-steps;
}

.ae-hero__step {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
}

.ae-hero__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-green);
    color: var(--c-navy, #003366);
    font-size: 0.8125rem;
    font-weight: 800;
    flex: none;
}

.ae-hero__step-text {
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

/* Arrow connectors between steps on wide screens */
@media (min-width: 540px) {
    .ae-hero__step:not(:last-child)::after {
        content: "→";
        color: rgba(255, 255, 255, .45);
        font-size: 0.8125rem;
        margin-left: var(--sp-2, 0.5rem);
    }
}

/* ── Why-apply callout (mirrors home-trust dark strip) ────────────────────── */

.ae-why {
    background: var(--c-navy-dark, #001f40);
}

.ae-why__list {
    box-sizing: border-box;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2, 0.5rem) var(--sp-6, 2rem);
    justify-content: center;
    list-style: none;
}

.ae-why__list li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.ae-why__list svg {
    color: var(--c-green);
    flex: none;
}

/* ── Form section ─────────────────────────────────────────────────────────── */

.ccfs-apply-entry {
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}

.ccfs-ae-h1 {
    font-size: var(--text-3xl, 1.875rem);
    font-family: var(--font-sans);
    color: var(--c-navy);
    margin-bottom: 0.75rem;
    text-align: center;
}

.ccfs-ae-intro {
    color: var(--c-ink-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
    text-align: center;
}

.ccfs-ae-notice,
.ccfs-ae-error {
    background: var(--off-white, #f8f9fb);
    border-left: 4px solid var(--c-navy);
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0 4px 4px 0;
}

.ccfs-ae-error {
    border-left-color: #cc3333;
    background: #fff5f5;
    color: #7c1f1f;
}

.ccfs-ae-error:focus {
    outline: 2px solid rgba(204, 51, 51, 0.55);
    outline-offset: 2px;
}

.ccfs-ae-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg, 12px);
    box-shadow: var(--shadow-md);
    padding: clamp(1.25rem, 4vw, 2rem);
}

.ccfs-ae-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ccfs-ae-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--c-navy);
}

.ccfs-ae-input,
.ccfs-ae-select {
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    color: var(--c-navy);
    background: #fff;
    width: 100%;
}

.ccfs-ae-input:focus,
.ccfs-ae-select:focus {
    outline: 2px solid var(--c-navy);
    outline-offset: 2px;
    border-color: var(--c-navy);
}

.ccfs-field-error .ccfs-ae-input,
.ccfs-field-error .ccfs-ae-select,
.ccfs-field-error .ccfs-ae-consent-label input[type="checkbox"] {
    border-color: #c0392b;
    outline: 2px solid rgba(192, 57, 43, 0.35);
    outline-offset: 1px;
}

.ccfs-ae-consent { flex-direction: row; align-items: flex-start; gap: 0; }
.ccfs-ae-consent-label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
    cursor: pointer;
    line-height: 1.5;
}
.ccfs-ae-consent-label input[type="checkbox"] { margin-top: 0.2em; flex-shrink: 0; }

.ccfs-ae-cta { margin-top: 0.5rem; align-self: flex-start; }

.ccfs-ae-hint {
    font-size: 0.8125rem;
    color: var(--c-ink-muted);
    margin-top: 0.25rem;
}

@media (max-width: 640px) {
    .ccfs-apply-entry { padding: 1.5rem 0 3rem; }
    .ccfs-ae-h1,
    .ccfs-ae-intro { text-align: left; }
    .ccfs-ae-form { border-radius: var(--r-md, 8px); box-shadow: var(--shadow-sm); }
}

/* <<< end: ./pages/apply-entry.css */

/* >>> inlined: ./pages/legal.css */
/* row 265 — legal page bundle (reading measure ~66ch, long-form documents). Source: style.css */

/* ── Page shell ──────────────────────────────────────────────────────── */
.page-legal .legal-page {
    padding: var(--sp-400) var(--sp-300);
}

.legal-page__wrap {
    max-width: 72ch;
    margin: 0 auto;
}

/* ── Back link ───────────────────────────────────────────────────────── */
.legal-page__back {
    margin-bottom: var(--sp-400);
    font-size: var(--fs-sm);
}

.legal-page__back a {
    color: var(--c-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__back a:hover {
    color: var(--c-green);
}

/* ── Document article ────────────────────────────────────────────────── */
.legal-doc {
    line-height: 1.7;
}

.legal-doc__title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--c-navy);
    line-height: 1.2;
    margin: 0 0 var(--sp-500);
    padding-bottom: var(--sp-300);
    border-bottom: 2px solid var(--c-green);
}

/* ── Sections ────────────────────────────────────────────────────────── */
.legal-section {
    margin-bottom: var(--sp-500);
}

.legal-section h2,
.legal-doc__html h2 {
    font-size: var(--fs-lg);
    color: var(--c-navy);
    margin: 0 0 var(--sp-300);
}

/* html-block (raw-markup) docs lack .legal-section wrappers, so their
   headings/paras fell through to the base scale. Pull them onto the same
   structured navy typography as the structured-doc sections. */
.legal-doc__html h3 {
    font-size: var(--fs-md);
    color: var(--c-navy);
    margin: var(--sp-300) 0 var(--sp-200);
}

.legal-doc__html p {
    margin: 0 0 var(--sp-200);
}

.legal-section p {
    margin: 0 0 var(--sp-200);
}

.legal-section p.note {
    font-size: var(--fs-sm);
    color: var(--c-text-secondary);
    margin-top: var(--sp-300);
}

/* ── Lists ───────────────────────────────────────────────────────────── */
.legal-section ul,
.legal-section ol {
    margin: var(--sp-200) 0 var(--sp-300) var(--sp-400);
    padding: 0;
}

.legal-section li {
    margin-bottom: var(--sp-150);
}

/* Tick lists */
.legal-section .ticks {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

.legal-section .ticks li {
    padding-left: var(--sp-400);
    position: relative;
    margin-bottom: var(--sp-250);
}

.legal-section .ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .4em;
    width: .9em;
    height: .9em;
    background: var(--c-green);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65%;
}

/* Step lists */
.legal-section .steps {
    counter-reset: step;
    list-style: none;
    margin-left: 0;
    padding: 0;
}

.legal-section .steps li {
    counter-increment: step;
    padding-left: 2.75rem;
    position: relative;
    margin-bottom: var(--sp-300);
}

.legal-section .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: .1em;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--c-navy);
    color: white;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Callouts ────────────────────────────────────────────────────────── */
.legal-section .callout {
    background: color-mix(in srgb, var(--c-navy) 5%, white);
    border: 1px solid color-mix(in srgb, var(--c-navy) 15%, white);
    border-left: 3px solid var(--c-green);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--sp-400);
    margin: var(--sp-300) 0;
}

.legal-section .callout h3 {
    font-size: var(--fs-md);
    color: var(--c-navy);
    margin: 0 0 var(--sp-200);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
/* Structured key/value tables (.legal-table, wrapped in .table-scroll) and
   raw tables inside html-block docs (.legal-doc__html table) shipped with no
   styling. Give both a shared bordered grid + tinted header. */
.legal-table,
.legal-doc__html table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-300) 0;
}

.legal-table th,
.legal-table td,
.legal-doc__html table th,
.legal-doc__html table td {
    border: 1px solid var(--c-border);
    padding: var(--sp-200) var(--sp-300);
    text-align: left;
    vertical-align: top;
}

.legal-table thead th,
.legal-table th,
.legal-doc__html table thead th,
.legal-doc__html table th {
    background: var(--c-bg-alt);
    color: var(--c-navy);
}

/* Wide tables scroll horizontally rather than overflow the reading column.
   .table-scroll wraps structured tables; injected html-block tables have no
   wrapper element, so the html block itself becomes the scroll container. */
.table-scroll,
.legal-doc__html {
    overflow-x: auto;
}

/* ── Document footer ─────────────────────────────────────────────────── */
.legal-doc__footer {
    margin-top: var(--sp-600);
    padding-top: var(--sp-400);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
}

.ccfs-ico-footnote {
    margin-top: var(--sp-500);
    color: var(--c-ink-subtle);
    font-size: var(--fs-xs);
}

/* ── Legal index (overview page) ─────────────────────────────────────── */
.legal-index-page .legal-group-heading {
    font-size: var(--fs-lg);
    color: var(--c-navy);
    margin: var(--sp-500) 0 var(--sp-300);
    padding-bottom: var(--sp-200);
    border-bottom: 1px solid var(--c-border);
}

.legal-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--sp-300);
    margin-bottom: var(--sp-500);
}

.legal-doc-card {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-350);
    background: white;
    display: flex;
    flex-direction: column;
    gap: var(--sp-200);
    transition: box-shadow .15s;
}

.legal-doc-card:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--c-navy) 12%, transparent);
}

.legal-doc-card__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-navy);
    text-decoration: none;
}

.legal-doc-card__title:hover {
    color: var(--c-green);
    text-decoration: underline;
}

.legal-doc-card__summary {
    font-size: var(--fs-sm);
    color: var(--c-text-secondary);
    flex: 1;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .legal-page__wrap {
        max-width: 100%;
    }

    .legal-doc-grid {
        grid-template-columns: 1fr;
    }
}

/* <<< end: ./pages/legal.css */

/* >>> inlined: ./pages/careers.css */
/* row 303 — careers page bundle. Source: style.css (ccfs-careers__* classes). */

.ccfs-careers { max-width: 720px; }

.ccfs-careers__job-list { list-style: none; padding: 0; margin: 0; }
.ccfs-careers__job-item { border-bottom: 1px solid var(--c-border); padding: var(--sp-3) 0; }
.ccfs-careers__job-link { display: flex; flex-direction: column; gap: var(--sp-1); color: inherit; text-decoration: none; }
.ccfs-careers__job-link strong { color: var(--c-navy); }
.ccfs-careers__job-link:hover strong { text-decoration: underline; }
.ccfs-careers__job-meta { font-size: var(--text-sm); color: var(--c-ink-muted); }

/* EO form */
.ccfs-careers__eo-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); max-width: 480px; }
.ccfs-careers__eo-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ccfs-careers__eo-field span { font-size: var(--text-sm); font-weight: 600; }
.ccfs-careers__eo-field input,
.ccfs-careers__eo-field select { min-height: 44px; padding: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--text-base); }
.ccfs-careers__eo-submit { grid-column: 1 / -1; margin-top: var(--sp-2); }

/* Single job */
.ccfs-careers-single { max-width: 720px; padding: var(--sp-8) var(--sp-4); }
.ccfs-careers-single__meta { color: var(--c-ink-muted); font-size: var(--text-sm); margin-bottom: var(--sp-6); }
.ccfs-careers-single__body { margin-bottom: var(--sp-8); }
.ccfs-careers-single__apply { padding: var(--sp-6) var(--sp-4); background: var(--c-bg-alt); border-radius: var(--r-md); margin-bottom: var(--sp-6); }
.ccfs-careers-single__apply h2 { margin-bottom: var(--sp-3); }
.ccfs-careers-single__back { font-size: var(--text-sm); }

@media (max-width: 640px) {
    .ccfs-careers__eo-form { grid-template-columns: 1fr; }
}

/* <<< end: ./pages/careers.css */

/* >>> inlined: ./pages/compare.css */
/* row 225 — Compare page layout. Tokens from tokens/*.css, no literals. */

/* >>> inlined: ../components/table.css */
/* row 224 — Shared responsive-table component. Tokens from tokens/*.css, no literals. */

.compare__table {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) repeat(3, 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-block-end: var(--sp-6);
}

.compare__row {
    display: contents;
}

/* Row header cells (label column) */
.compare__cell--label,
.compare__cell--rowhead {
    background: var(--c-bg-alt);
    padding: var(--sp-3) var(--sp-4);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-navy);
    display: flex;
    align-items: center;
}

/* Data cells */
.compare__cell {
    background: var(--c-bg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* Column header row */
.compare__row--head .compare__cell {
    background: var(--c-navy);
    color: var(--c-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-4);
}

.compare__row--head .compare__cell--label {
    background: var(--c-bg-alt);
}

.compare__product-name {
    font-size: var(--fs-base);
    font-weight: 700;
}

.compare__product-tagline {
    font-size: var(--fs-xs);
    opacity: 0.82;
}

/* Mobile: stack columns vertically */
@media (max-width: 760px) {
    .compare__table {
        grid-template-columns: 1fr;
    }

    .compare__row {
        display: block;
        border-bottom: 2px solid var(--c-border);
    }

    .compare__row:last-child {
        border-bottom: none;
    }

    .compare__cell--label,
    .compare__cell--rowhead {
        background: var(--c-navy);
        color: var(--c-bg);
        border-radius: 0;
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .compare__cell {
        border-bottom: 1px solid var(--c-border);
        padding: var(--sp-3);
        display: block;
    }

    .compare__cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: var(--fs-xs);
        color: var(--c-navy);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-block-end: var(--sp-1);
    }

    .compare__row--head {
        display: none; /* Product headers shown separately on mobile via compare__filter */
    }
}

/* <<< end: ../components/table.css */


.compare {
    max-width: 1100px;
    margin-inline: auto;
    padding: var(--sp-8) var(--sp-4);
}

.compare__header {
    text-align: center;
    margin-block-end: var(--sp-8);
}

.compare__title {
    font-size: var(--fs-3xl);
    color: var(--c-navy);
    margin-block-end: var(--sp-3);
}

.compare__lede {
    font-size: var(--fs-base);
    color: var(--c-ink-muted);
    max-width: 72ch;
    margin-inline: auto;
    line-height: 1.6;
}

.compare__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Filter buttons (injected by compare-explorer.js) */
.compare__filter {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-block-end: var(--sp-4);
}

.compare__filter-btn {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg);
    color: var(--c-ink-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.compare__filter-btn--active {
    background: var(--c-navy);
    color: var(--c-bg);
    border-color: var(--c-navy);
}

/* Honest notes box */
.compare__nb {
    background: #fffbe8;
    border: 1px solid #f1e5a0;
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-6);
    margin-block-end: var(--sp-6);
}

.compare__nb-h {
    font-size: var(--fs-base);
    font-weight: 700;
    color: #5a4500;
    margin-block-end: var(--sp-2);
}

.compare__nb p {
    color: #5a4500;
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin-block-end: var(--sp-2);
}

.compare__nb p:last-child {
    margin-block-end: 0;
}

/* CTA row */
.compare__cta {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-block-end: var(--sp-10);
}

@media (max-width: 480px) {
    .compare__cta {
        flex-direction: column;
    }

    .compare__cta .btn {
        text-align: center;
    }
}

/* <<< end: ./pages/compare.css */

/* >>> inlined: ./pages/brand.css */
/* row 323 — Brand pages: overview, style-guide, assets, trademark, usage. */

/* ── Shared brand page shell ─────────────────────────────────────────── */
.ccfs-brand-h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--c-navy);
    margin: 2rem 0 1.5rem;
    letter-spacing: 0;
}

.ccfs-brand-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border, #e5e8eb);
    font-size: 0.875rem;
}
.ccfs-brand-subnav a { color: var(--c-blue, #1d4ed8); text-decoration: none; }
.ccfs-brand-subnav a:hover { text-decoration: underline; }

.ccfs-bl-section {
    margin-bottom: 3rem;
}
.ccfs-bl-section h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--c-navy);
}
.ccfs-bl-section ul,
.ccfs-bl-section ol {
    margin: 0 0 1rem 1.5rem;
    line-height: 1.65;
}
.ccfs-bl-section p { margin: 0 0 0.75rem; line-height: 1.65; }
.ccfs-bl-note { font-size: 0.875rem; color: var(--c-muted, #6b7280); margin: 0.5rem 0 0; }

/* ── Brand overview nav cards ────────────────────────────────────────── */
.ccfs-brand-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.ccfs-brand-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--c-border, #e5e8eb);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ccfs-brand-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: var(--c-navy);
}
.ccfs-brand-card__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-navy);
    margin: 0;
}
.ccfs-brand-card__body {
    font-size: 0.875rem;
    color: var(--c-text, #1a1a1a);
    margin: 0;
    flex: 1;
    line-height: 1.5;
}
.ccfs-brand-card__cta { font-size: 0.875rem; color: var(--c-blue, #1d4ed8); font-weight: 600; margin-top: auto; }

/* ── Disambiguation block ────────────────────────────────────────────── */
.ccfs-brand-disambig { background: var(--c-bg-alt, #f8f9fa); padding: 1.5rem; border-radius: 8px; }
.ccfs-brand-disambig h2 { border-bottom: none; margin-bottom: 0.75rem; }
.ccfs-brand-disambig__cta { font-size: 0.875rem; color: var(--c-muted, #6b7280); margin: 0; }

/* ── Colour swatches ─────────────────────────────────────────────────── */
.ccfs-brand-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}
.ccfs-brand-swatch {
    background: var(--c-white);
    color: #0d2346;
    border-radius: 6px;
    padding: 1rem;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
}
.ccfs-brand-swatch--0d2346 { background: #0d2346; }
.ccfs-brand-swatch--90cb22 { background: #90cb22; }
.ccfs-brand-swatch--ffffff { background: #ffffff; }
.ccfs-brand-swatch--586b77 { background: #586b77; }
.ccfs-brand-swatch--15803d { background: #15803d; }
.ccfs-brand-swatch--b45309 { background: #b45309; }
.ccfs-brand-swatch--b91c1c { background: #b91c1c; }
.ccfs-brand-swatch.is-on-dark { color: #ffffff; }
.ccfs-brand-swatch.is-white { border: 1px solid #e5e8eb; }
.ccfs-brand-swatch-name { font-weight: 700; }
.ccfs-brand-swatch-hex,
.ccfs-brand-swatch-rgb,
.ccfs-brand-swatch-cmyk,
.ccfs-brand-swatch-pantone { opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ── Copy button (hex chip) ──────────────────────────────────────────── */
.ccfs-copy-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    border-radius: 2px;
    outline-offset: 2px;
}
.ccfs-copy-btn:hover .ccfs-brand-swatch-hex { text-decoration: underline; }
.ccfs-copy-btn.is-copied .ccfs-brand-swatch-hex { opacity: 1; font-weight: 700; }

/* ── Typography specimen ─────────────────────────────────────────────── */
.ccfs-brand-type { margin: 0 0 1rem; }
.ccfs-brand-type dt { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted, #6b7280); margin: 1.25rem 0 0.2rem; }
.ccfs-brand-type dd { margin: 0; }

/* ── Assets page: logo demos ─────────────────────────────────────────── */
.ccfs-brand-logo-demos { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
.ccfs-brand-logo-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    min-width: 220px;
}
.ccfs-brand-logo-demo--light { background: #fff; border: 1px solid var(--c-border, #e5e8eb); }
.ccfs-brand-logo-demo--dark  { background: var(--c-navy); }
.ccfs-brand-logo-demo figcaption { font-size: 0.8125rem; text-align: center; }
.ccfs-brand-logo-demo--dark figcaption { color: rgba(255,255,255,0.7); }

/* ── Boilerplate quote ───────────────────────────────────────────────── */
.ccfs-brand-boilerplate {
    border-left: 4px solid var(--c-lime, #90cb22);
    margin: 0 0 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--c-bg-alt, #f8f9fa);
    border-radius: 0 6px 6px 0;
}
.ccfs-brand-boilerplate p { margin: 0; font-size: 0.9375rem; line-height: 1.65; }

/* ── Press kit dl ────────────────────────────────────────────────────── */
.ccfs-brand-presskit { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.ccfs-brand-presskit dt { font-weight: 600; color: var(--c-navy); }
.ccfs-brand-presskit dd { margin: 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ccfs-brand-cards { grid-template-columns: 1fr; }
    .ccfs-brand-swatches { gap: 0.75rem; }
    .ccfs-brand-swatch { min-width: 110px; }
    .ccfs-brand-presskit { grid-template-columns: 1fr; gap: 0.25rem 0; }
    .ccfs-brand-presskit dd { margin-bottom: 0.75rem; color: var(--c-muted, #6b7280); }
}

/* <<< end: ./pages/brand.css */

/* >>> inlined: ./pages/content.css */
/* row 364 — Shared content/list/article reading styles.
   Covers: newsroom, guides, glossary, case-studies, help, payment-support, search.
   Reading measure ~66ch. Source: style.css (reading styles). */

/* ── Prose reading body ─────────────────────────────────────────────── */
.prose { max-width: 66ch; }
.prose h2,
.prose h3,
.prose h4 { margin-top: 2rem; margin-bottom: 0.5rem; }
.prose p  { margin: 0 0 1rem; line-height: 1.7; }
.prose ul,
.prose ol { margin: 0 0 1rem 1.5rem; line-height: 1.7; }
.prose dl { margin: 0 0 1.5rem; line-height: 1.7; }
.prose dt { margin-top: 1rem; font-weight: 700; color: var(--c-navy); }
.prose dd { margin: 0.25rem 0 0 1.25rem; }
.prose a  { color: var(--c-navy); text-decoration: underline; }
.prose a:hover { color: var(--c-blue); }
.prose strong { font-weight: 600; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; }
.prose th,
.prose td { border: 1px solid var(--c-border, #d0d5dd); padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: var(--c-bg-alt, #f8f9fa); font-weight: 600; }

/* ── Content page gutters ───────────────────────────────────────────── */
.newsroom,
.guides-hub,
.glossary,
.case-studies {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--sp-4);
    box-sizing: border-box;
}

/* ── Common section header ──────────────────────────────────────────── */
.newsroom__header,
.guides-hub__header,
.glossary__header,
.case-studies__header,
.search-results__header,
.help-page__header,
.payhelp__header,
.money-tools-page__header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--c-border, #d0d5dd);
    margin-bottom: 2rem;
}
.newsroom__h,
.guides-hub__h,
.glossary__h,
.case-studies__h,
.search-results__h,
.help-page__h,
.payhelp__h,
.money-tools-page__h {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 0.5rem;
}

/* ── Category nav tabs ──────────────────────────────────────────────── */
.newsroom__cats,
.guides-hub__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
}
.newsroom__cat-link,
.guides-hub__cat-link {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--c-border, #d0d5dd);
    border-radius: 2em;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--c-text, #1a1a1a);
    transition: background 0.15s, border-color 0.15s;
}
.newsroom__cat-link:hover,
.guides-hub__cat-link:hover { background: var(--c-bg-alt, #f8f9fa); }
.newsroom__cat-link.is-active,
.guides-hub__cat-link.is-active {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
}

/* ── Card grids ─────────────────────────────────────────────────────── */
.newsroom__grid,
.guides-hub__grid,
.case-studies__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* ── News / guide / case-study card ─────────────────────────────────── */
.news-card,
.guide-card,
.case-card {
    background: #fff;
    border: 1px solid var(--c-border, #d0d5dd);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.news-card__media-link,
.guide-card__media-link,
.case-card__media-link {
    display: block;
    margin: -1.25rem -1.5rem 0.5rem;
}
.news-card__media,
.guide-card__media,
.case-card__media,
.news-single__media,
.guide-single__media,
.case-single__media {
    display: block;
    overflow: hidden;
    background: var(--c-bg-alt, #f8f9fa);
}
.news-card__media,
.guide-card__media,
.case-card__media {
    aspect-ratio: 16 / 9;
}
.news-card__media img,
.guide-card__media img,
.case-card__media img,
.news-single__media img,
.guide-single__media img,
.case-single__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.news-card__media img,
.guide-card__media img,
.case-card__media img {
    height: 100%;
}
.news-card__date,
.case-card__date { font-size: 0.8125rem; color: var(--c-muted, #6b7280); }
.news-card__cat  { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-blue); }
.news-card__title,
.guide-card__title,
.case-card__title { font-size: 1rem; font-weight: 600; margin: 0; }
.news-card__title a,
.guide-card__title a,
.case-card__title a { color: var(--c-navy); text-decoration: none; }
.news-card__title a:hover,
.guide-card__title a:hover,
.case-card__title a:hover { text-decoration: underline; }
.news-card__excerpt,
.guide-card__excerpt,
.case-card__excerpt { font-size: 0.9rem; color: var(--c-text, #1a1a1a); margin: 0; flex: 1; }
.guide-card__cta,
.case-card__cta { margin-top: auto; font-size: 0.875rem; color: var(--c-blue); text-decoration: none; font-weight: 600; }
.guide-card__cta:hover,
.case-card__cta:hover { text-decoration: underline; }

/* ── Single article ─────────────────────────────────────────────────── */
.news-single,
.guide-single,
.case-single,
.glossary-single {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem var(--sp-4);
    box-sizing: border-box;
}
.news-single__header,
.guide-single__header,
.case-single__header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border, #d0d5dd); }
.news-single__media,
.guide-single__media,
.case-single__media {
    margin-top: 1.5rem;
    border: 1px solid var(--c-border, #d0d5dd);
    border-radius: 8px;
}
.news-single__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.news-single__cat { color: var(--c-blue); text-decoration: none; font-weight: 600; }
.news-single__date,
.case-single__date { color: var(--c-muted, #6b7280); }
.news-single__title,
.guide-single__title,
.case-single__title,
.glossary-single__term {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 0.75rem;
}
.news-single__excerpt,
.guide-single__excerpt,
.case-single__excerpt {
    font-size: 1.125rem;
    color: var(--c-text, #1a1a1a);
    line-height: 1.6;
    margin: 0;
}
.news-single__back,
.guide-single__back,
.case-single__back,
.glossary-single__back { display: inline-block; margin-top: 2rem; color: var(--c-blue); text-decoration: none; font-size: 0.9rem; }
.news-single__back:hover,
.guide-single__back:hover,
.case-single__back:hover,
.glossary-single__back:hover { text-decoration: underline; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.guide-single__breadcrumb,
.case-single__breadcrumb,
.glossary-single__breadcrumb { font-size: 0.875rem; margin-bottom: 1rem; }
.guide-single__breadcrumb a,
.case-single__breadcrumb a,
.glossary-single__breadcrumb a { color: var(--c-blue); text-decoration: none; }

/* ── Pager ──────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 1rem; margin: 2rem 0; font-size: 0.9rem; }
.pager__prev,
.pager__next { color: var(--c-blue); text-decoration: none; font-weight: 600; }
.pager__prev:hover,
.pager__next:hover { text-decoration: underline; }
.pager__info { color: var(--c-muted, #6b7280); }

/* ── Glossary ───────────────────────────────────────────────────────── */
.glossary__section { margin-bottom: 2rem; }
.glossary__letter { font-size: 1.25rem; font-weight: 700; color: var(--c-navy); margin: 0 0 0.75rem; border-bottom: 2px solid var(--c-navy); padding-bottom: 0.25rem; }
.glossary__list { list-style: none; padding: 0; margin: 0; }
.glossary__list li + li { margin-top: 0.4rem; }
.glossary__list a { color: var(--c-navy); text-decoration: none; }
.glossary__list a:hover { color: var(--c-blue); text-decoration: underline; }
.glossary-single__body { margin-top: 1.5rem; }

/* ── Human sitemap ─────────────────────────────────────────────────── */
.ccfs-sitemap-page {
    overflow-wrap: anywhere;
}

.ccfs-sitemap-list a {
    word-break: break-word;
}

/* ── Search ─────────────────────────────────────────────────────────── */
.search-results { max-width: 720px; margin: 0 auto; padding-bottom: 3rem; }
.search-results__form { margin: 1.5rem 0 2rem; }
.search-results__label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.search-results__row { display: flex; gap: 0.5rem; }
.search-results__input {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--c-border, #d0d5dd);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--c-text, #1a1a1a);
}
.search-results__btn {
    padding: 0.6rem 1.25rem;
    background: var(--c-navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}
.search-results__btn:hover { background: var(--c-blue); }
.search-results__count { font-size: 0.9rem; color: var(--c-muted, #6b7280); margin-bottom: 1.5rem; }
.search-results__none { color: var(--c-muted, #6b7280); margin: 1rem 0; }
.search-results__list { list-style: none; padding: 0; margin: 0; }
.search-result { padding: 1.25rem 0; border-bottom: 1px solid var(--c-border, #d0d5dd); }
.search-result__type { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-blue); display: block; margin-bottom: 0.25rem; }
.search-result__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; }
.search-result__title a { color: var(--c-navy); text-decoration: none; }
.search-result__title a:hover { text-decoration: underline; }
.search-result__excerpt { font-size: 0.875rem; color: var(--c-text, #1a1a1a); margin: 0 0 0.4rem; }
.search-result__date { font-size: 0.8125rem; color: var(--c-muted, #6b7280); }

/* ── Help page ──────────────────────────────────────────────────────── */
.help-page { max-width: 800px; margin: 0 auto; padding-bottom: 3rem; }
.help-page__hero { margin: 0 0 22px; border-radius: 12px; overflow: hidden; }
.help-page__hero img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 6; }
.help-page__intro { font-size: 1.0625rem; color: var(--c-text, #1a1a1a); line-height: 1.65; margin: 0; }
.help-page__self-service,
.help-page__quick,
.help-page__email,
.help-page__contact { margin-bottom: 2.5rem; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 1rem; }
.help-card { border: 1px solid var(--c-border, #d0d5dd); border-radius: 8px; padding: 1.25rem; }
.help-card h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.help-card h3 a { color: var(--c-navy); text-decoration: none; }
.help-card h3 a:hover { text-decoration: underline; }
.help-card p { font-size: 0.9rem; margin: 0 0 0.5rem; }
.help-card__cta { font-size: 0.875rem; color: var(--c-blue); font-weight: 600; text-decoration: none; }
.help-card__cta:hover { text-decoration: underline; }

/* ── Payment support ────────────────────────────────────────────────── */
.payhelp { max-width: 760px; margin: 0 auto; padding-bottom: var(--sp-8); }
.payhelp__eyebrow {
    margin: 0 0 var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-navy);
}
.payhelp__intro { font-size: 1.0625rem; line-height: 1.65; margin: 0; color: var(--c-text); }
.payhelp__section { margin-bottom: var(--sp-7); }
.payhelp__section > h2 {
    margin-bottom: var(--sp-3);
    font-size: 1.375rem;
    color: var(--c-navy);
}
.payhelp__section > p { line-height: 1.65; }

/* Primary "talk to us first" card — the page's main action, given visual weight */
.payhelp__primary {
    padding: var(--sp-6);
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-green);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}
.payhelp__primary > h2 { margin-top: 0; }

/* Action tiles — the quick routes to get help */
.payhelp__actions {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}
.payhelp__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
    color: var(--c-navy);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.payhelp__action::after {
    content: "→";
    flex: none;
    font-weight: 700;
    color: var(--c-green);
    transition: transform 0.15s;
}
.payhelp__action:hover {
    border-color: var(--c-green);
    background: #f6faec;
    transform: translateY(-1px);
}
.payhelp__action:hover::after { transform: translateX(3px); }
.payhelp__action:focus-visible {
    outline: 3px solid rgba(43, 108, 168, 0.35);
    outline-offset: 2px;
}
.payhelp__email { margin: var(--sp-5) 0 0; font-size: 0.95rem; color: var(--c-text); }

/* Policy document links */
.payhelp__docs { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.payhelp__doc {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: none;
}
.payhelp__docs li:first-child .payhelp__doc { border-top: 1px solid var(--c-border); }
.payhelp__doc::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--c-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.payhelp__doc:hover { color: var(--c-navy); text-decoration: underline; }

/* Free-advice organisation cards */
.payhelp__orgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--sp-4);
    margin: var(--sp-4) 0 var(--sp-5);
}
.payhelp__org {
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}
.payhelp__org-name { margin: 0 0 var(--sp-2); font-size: 1.0625rem; color: var(--c-navy); }
.payhelp__org-body { margin: 0 0 var(--sp-3); font-size: 0.95rem; line-height: 1.55; color: var(--c-text); }
.payhelp__org-contact { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; align-items: baseline; }
.payhelp__org-tel { font-size: 1.0625rem; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.payhelp__org-tel:hover { text-decoration: underline; }
.payhelp__org-url { font-size: 0.9rem; font-weight: 600; color: var(--c-navy); text-decoration: none; }
.payhelp__org-url:hover { text-decoration: underline; }

/* Supporting notes + regulatory callout */
.payhelp__note { font-size: 0.95rem; line-height: 1.6; color: var(--c-muted, #4b5563); }
.payhelp__callout {
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--c-navy);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--c-bg-alt);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Money tools page ───────────────────────────────────────────────── */
.money-tools-page { max-width: 900px; margin: 0 auto; padding-bottom: 3rem; }
.money-tools-page__lede { font-size: 1.0625rem; line-height: 1.65; margin: 0; }
.money-tools-page__calculator { margin-top: 2rem; }

/* Tool cards (ccfs-smt) — token-based grid + card surfaces */
.ccfs-smt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}
.ccfs-smt-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    color: var(--c-ink);
    transition: border-color 0.15s;
}
.ccfs-smt-card:hover { border-color: var(--c-navy); }
.ccfs-smt-card-cta { color: var(--c-navy); font-weight: 700; }
@media (max-width: 560px) {
    .ccfs-smt-grid { grid-template-columns: 1fr; }
}

/* ── Editorial section pages ───────────────────────────────────────── */
.content-page,
.personal-loans-page {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding: var(--sp-8) var(--sp-4) var(--sp-10);
    box-sizing: border-box;
}

.content-page__header,
.personal-loans-page__lead {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}

.content-page__h,
.personal-loans-page__h {
    margin: 0;
    max-width: 16ch;
    color: var(--c-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: var(--lh-tight);
}

.content-page__body,
.personal-loans-page {
    display: grid;
    gap: var(--sp-5);
}

.content-page .section,
.personal-loans-page .section,
.personal-loans-page .legal-footer {
    min-width: 0;
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-white);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-navy) 8%, transparent);
}

.content-page .section:nth-child(odd),
.personal-loans-page .section:nth-of-type(odd) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 7%, var(--c-white)), var(--c-white) 46%);
}

.content-page .section h2,
.personal-loans-page .section h2 {
    margin: 0 0 var(--sp-3);
    color: var(--c-navy);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.content-page .section p,
.personal-loans-page .section p,
.personal-loans-page .legal-footer p {
    margin: 0 0 var(--sp-3);
    line-height: var(--lh-loose);
}

.content-page .section p:last-child,
.personal-loans-page .section p:last-child,
.personal-loans-page .legal-footer p:last-child {
    margin-bottom: 0;
}

.content-page .lede,
.personal-loans-page .lede {
    color: var(--c-ink);
    font-size: var(--fs-lg);
}

.content-page .section ul,
.content-page .section ol,
.personal-loans-page .section ul,
.personal-loans-page .section ol {
    margin: var(--sp-3) 0 0;
    padding-left: 1.25rem;
    line-height: var(--lh-loose);
}

/* Editorial lede (intro under the page title) */
.content-page__lede {
    margin: var(--sp-4) 0 0;
    max-width: 60ch;
    color: var(--c-ink);
    font-size: var(--fs-lg);
    line-height: var(--lh-loose);
}

/* Product overview cards (what-we-offer) */
.content-products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--sp-4);
}
.content-product {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-green);
    border-radius: var(--r-md);
    background: var(--c-white);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-navy) 8%, transparent);
}
.content-product__name {
    margin: 0 0 var(--sp-2);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    color: var(--c-navy);
}
.content-product__name a { color: inherit; text-decoration: none; }
.content-product__name a:hover { text-decoration: underline; }
.content-product__blurb {
    margin: 0 0 var(--sp-4);
    line-height: var(--lh-loose);
    color: var(--c-text);
}
.content-product__cta {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}
.content-product__cta::after { content: " →"; color: var(--c-navy); }
.content-product__cta:hover { text-decoration: underline; }

/* Regulatory fine-print framing at the foot of an editorial page */
.content-regulatory {
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
    border-left: 4px solid var(--c-navy);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--c-bg-alt);
    color: var(--c-muted, #4b5563);
    font-size: 0.9rem;
    line-height: var(--lh-loose);
}

.content-page .section li + li,
.personal-loans-page .section li + li {
    margin-top: var(--sp-2);
}

.content-page ul.ticks {
    display: grid;
    gap: var(--sp-2);
    padding: 0;
}

.content-page ul.ticks li {
    margin: 0;
    padding-left: 1.75rem;
}

.content-page .steps {
    display: grid;
    gap: var(--sp-3);
    padding-left: 1.5rem;
}

.content-page .steps li::marker {
    color: var(--c-navy);
    font-weight: 700;
}

.content-page .note,
.personal-loans-page .note {
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.personal-loans-page .btn,
.personal-loans-page .btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    background: var(--c-navy);
    color: var(--c-white);
    font-weight: 700;
    text-decoration: none;
}

.personal-loans-page .btn:hover,
.personal-loans-page .btn--primary:hover {
    background: var(--c-blue);
}

/* ── Forms hub ──────────────────────────────────────────────────────── */
.ccfs-forms-hub { max-width: 860px; margin: 0 auto; padding-bottom: 3rem; }
.ccfs-forms-hub__header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--c-border, #d0d5dd);
    margin-bottom: 2rem;
}
.ccfs-forms-hub__h {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--c-navy);
    margin: 0 0 0.5rem;
}
.ccfs-forms-hub__intro {
    font-size: 1.0625rem;
    color: var(--c-text, #1a1a1a);
    line-height: 1.65;
    margin: 0;
}
.ccfs-forms-hub .ccfs-faq { background: #fff; }
.ccfs-forms-hub .ccfs-form-inline { padding-top: 0.25rem; }
.ccfs-forms-hub .account-action-cta { margin: 0; }

/* ── Contact page ───────────────────────────────────────────────────── */
.page-contact .ccfs-contact-layout {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding: var(--sp-8) var(--sp-4) var(--sp-7);
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.15fr);
    gap: var(--sp-8);
    align-items: start;
    box-sizing: border-box;
}

.page-contact .ccfs-contact-details,
.page-contact .ccfs-contact-form,
.page-contact .ccfs-contact-self-service,
.page-contact .ccfs-contact-complaints {
    min-width: 0;
}

.page-contact .ccfs-bl-h1 {
    margin: 0 0 var(--sp-3);
    color: var(--c-navy);
}

.page-contact .ccfs-contact-section-h,
.page-contact .ccfs-contact-form h2,
.page-contact .ccfs-contact-self-service h3,
.page-contact .ccfs-contact-complaints h2 {
    margin: 0 0 var(--sp-3);
    color: var(--c-navy);
}

.page-contact .ccfs-contact-card-grid {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.page-contact .ccfs-contact-card {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--c-green) 8%, var(--c-white)), var(--c-white) 42%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-navy) 8%, transparent);
}

.page-contact .ccfs-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--c-navy);
    color: var(--c-white);
    font-weight: 800;
    line-height: 1;
}

.page-contact .ccfs-contact-card h3 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-md);
    color: var(--c-navy);
}

.page-contact .ccfs-contact-card p,
.page-contact .ccfs-contact-form > p,
.page-contact .ccfs-contact-self-service p,
.page-contact .ccfs-contact-complaints p {
    margin: 0;
    line-height: var(--lh-loose);
}

.page-contact .ccfs-contact-details a,
.page-contact .ccfs-contact-self-service a,
.page-contact .ccfs-contact-complaints a {
    color: var(--c-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-contact .ccfs-contact-form {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    background:
        linear-gradient(180deg, var(--c-white), color-mix(in srgb, var(--c-bg-alt) 64%, var(--c-white)));
    box-shadow: var(--shadow-md);
}

.page-contact .ccfs-contact-form .ccfs-form {
    margin-top: var(--sp-4);
}

.page-contact .ccfs-contact-form .ccfs-form__fields {
    row-gap: var(--sp-4);
}

.page-contact .ccfs-form__submit {
    margin: var(--sp-4) 0 0;
}

.page-contact .ccfs-contact-self-service,
.page-contact .ccfs-contact-complaints {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--sp-4);
    box-sizing: border-box;
}

.page-contact .ccfs-contact-self-service {
    padding-bottom: var(--sp-6);
}

.page-contact .ccfs-callout {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4);
    border-left: 4px solid var(--c-green);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: color-mix(in srgb, var(--c-green) 10%, var(--c-white));
}

.page-contact .ccfs-callout h3 {
    margin: 0 0 var(--sp-2);
    color: var(--c-navy);
}

.page-contact .ccfs-ticks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.page-contact .ccfs-ticks li {
    position: relative;
    padding-left: 1.5rem;
}

.page-contact .ccfs-ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--c-green);
}

.page-contact .ccfs-contact-complaints {
    padding-bottom: var(--sp-8);
}

/* ── Branded error pages (404/451) ─────────────────────────────────── */
.page-error main {
    background: linear-gradient(180deg, #f7fafc 0%, #fff 60%);
}

.ccfs-error-page {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.ccfs-error-tagline,
.ccfs-451-location-label,
.ccfs-451-footnote {
    color: var(--c-muted);
    font-size: 0.92rem;
}

.ccfs-error-h1,
.ccfs-451-h1 {
    margin: 0 0 1rem;
    color: var(--c-blue);
    font-size: clamp(2rem, 6vw, 3.75rem);
    line-height: 1.05;
}

.ccfs-error-page > p,
.ccfs-error-links,
.ccfs-451-note {
    font-size: 1.05rem;
    line-height: 1.7;
}

.ccfs-error-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ccfs-error-links a {
    display: block;
    padding: 0.9rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    color: var(--c-blue);
    font-weight: 700;
    text-decoration: none;
}

.ccfs-error-links a:hover {
    border-color: var(--c-green);
}

.ccfs-451-location {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--c-green);
    border-radius: 0 8px 8px 0;
    background: #fff;
}

.ccfs-451-location p {
    margin: 0;
}

.ccfs-451-country {
    margin-top: 0.2rem;
    color: var(--c-blue);
    font-size: 1.25rem;
    font-weight: 800;
}

.ccfs-451-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
}

/* ── Responsive breakpoints ─────────────────────────────────────────── */

/* 390px — narrow mobile: add side padding, tighten header rhythm */
@media (max-width: 390px) {
    .newsroom__header,
    .guides-hub__header,
    .glossary__header,
    .case-studies__header,
    .search-results__header,
    .help-page__header,
    .payhelp__header,
    .money-tools-page__header,
    .ccfs-forms-hub__header { padding: 1.5rem 0 1rem; }

    .news-single,
    .guide-single,
    .case-single,
    .glossary-single { padding: 1.5rem var(--sp-4); }

    .help-page,
    .ccfs-forms-hub { padding-bottom: 2rem; }

    .newsroom__cats,
    .guides-hub__cats {
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .pager { flex-wrap: wrap; gap: 0.5rem; }
}

/* 768px — tablet: relax column constraints where needed */
@media (max-width: 768px) {
    .newsroom__grid,
    .guides-hub__grid,
    .case-studies__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

    .help-cards { grid-template-columns: 1fr; }

    .search-results__row { flex-direction: column; }
    .search-results__input,
    .search-results__btn { width: 100%; }

    .page-contact .ccfs-contact-layout {
        padding-block: var(--sp-6) var(--sp-9);
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-7);
    }

    .page-contact .ccfs-contact-form {
        padding: var(--sp-4);
    }

    .page-contact .ccfs-contact-card {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: var(--sp-3);
    }
}

/* 1024px — desktop narrowing: ensure readable measure on mid-width viewports */
@media (min-width: 1024px) {
    .newsroom__grid,
    .guides-hub__grid,
    .case-studies__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ── Ticks (reused by help/payhelp) ─────────────────────────────────── */
ul.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.ticks li { padding-left: 1.6em; position: relative; margin-bottom: 0.5rem; }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--c-green, #1d8348); font-weight: 700; }

/* ── Callout (shared) ───────────────────────────────────────────────── */
.callout { background: var(--c-bg-alt, #f8f9fa); border-left: 4px solid var(--c-blue); padding: 1.25rem 1.5rem; border-radius: 0 8px 8px 0; margin: 2rem 0; }
.callout h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.callout p { margin: 0; font-size: 0.9rem; }

/* ── FAQ (M5 row 311 addendum) ──────────────────────────────────────────── */
.ccfs-faqs-index { max-width: 720px; padding: 2rem 1rem; }
.ccfs-faq-topic { margin-bottom: var(--sp-8, 2rem); scroll-margin-top: 5rem; }
.ccfs-faq-topic h2 { margin-bottom: var(--sp-3, 0.75rem); }
.ccfs-faq { border: 1px solid var(--color-border, #e5e8eb); border-radius: 6px; overflow: hidden; }
.ccfs-faq__item { border-bottom: 1px solid var(--color-border, #e5e8eb); }
.ccfs-faq__item:last-child { border-bottom: none; }
.ccfs-faq__q { display: block; padding: 1rem 2.5rem 1rem 1rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; }
.ccfs-faq__q::-webkit-details-marker { display: none; }
.ccfs-faq__q::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.15s ease-out;
    background: var(--c-ink-subtle, #9ca3af);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 15.5l-6-6L7.4 8 12 12.6 16.6 8 18 9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
details[open] > .ccfs-faq__q::after { transform: translateY(-50%) rotate(180deg); }
.ccfs-faq__q:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(0,51,102,.2)); border-radius: 4px; }
.ccfs-faq__a { padding: 0 1rem 1rem; line-height: 1.6; }
.ccfs-faq__permalink { font-size: 0.875rem; margin-top: 0.75rem; }
.ccfs-faq-single { max-width: 720px; padding: 2rem 1rem; }
.ccfs-faq-single__breadcrumb { font-size: 0.875rem; color: var(--c-muted, #6b7280); margin-bottom: 0.75rem; }
.ccfs-faq-single__body { margin: 1.5rem 0; line-height: 1.7; }
/* Flow rhythm for rich-text FAQ bodies (single + accordion answer) */
.ccfs-faq-single__body > * + *,
.ccfs-faq__a > * + * { margin-top: var(--sp-4); }
.ccfs-faq-single__body h2,
.ccfs-faq__a h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.ccfs-faq-single__back { font-size: 0.875rem; }
.ccfs-faq-topic-desc { color: var(--c-muted, #6b7280); margin-bottom: 0.75rem; }

/* ── Sectors hub (E13 sectors/index.php) ─────────────────────────────── */
/* ASSET-imagery: sector cards get Lucide-style inline SVG icons + hover lift.
   No live WP equivalent for the sector pages (new in rebuild). DERIVED. */
.sectors-hub {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding: var(--sp-8) var(--sp-4) var(--sp-10);
    box-sizing: border-box;
}

.sectors-hub__header {
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-6);
}

.sectors-hub__h {
    margin: 0 0 var(--sp-3);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--c-navy);
}

.sectors-hub__lede {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    max-width: 60ch;
}

.sectors-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}

.sector-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out;
    text-decoration: none;
}

.sector-card:hover,
.sector-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-navy-light);
}

/* Sector icon container */
.sector-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 0 var(--sp-4);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--c-navy) 8%, transparent);
    color: var(--c-navy);
    flex: none;
}

.sector-card__h {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.sector-card__h a {
    color: var(--c-navy);
    text-decoration: none;
}

.sector-card__h a:hover {
    text-decoration: underline;
}

.sector-card__lede {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    flex: 1;
}

.sector-card__cta {
    margin-top: auto;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-navy);
    text-decoration: none;
}

.sector-card__cta:hover {
    color: var(--c-navy-light);
    text-decoration: underline;
}

.sectors-hub__common {
    padding: var(--sp-6);
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-green);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}

.sectors-hub__common h2 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-2xl);
    color: var(--c-navy);
}

.sectors-hub__common p:last-child {
    margin: var(--sp-5) 0 0;
}

/* ── Sector landing page (E13 sectors/show.php) ───────────────────────── */
.sector-page {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-10);
    box-sizing: border-box;
}

.sector-page__breadcrumb {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
}

.sector-page__breadcrumb a {
    color: var(--c-navy);
    text-decoration: none;
}

.sector-page__breadcrumb a:hover {
    text-decoration: underline;
}

.sector-page__header {
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-6);
}

.sector-page__h {
    margin: 0 0 var(--sp-3);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--c-navy);
}

.sector-page__lede {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    color: var(--c-ink);
    max-width: 58ch;
}

.sector-page__tag {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-ink-subtle);
    font-weight: 600;
}

.sector-page__pain,
.sector-page__products,
.sector-page__calc,
.sector-page__eligibility,
.sector-page__guides {
    margin-bottom: var(--sp-8);
}

.sector-page__pain h2,
.sector-page__products h2,
.sector-page__calc h2,
.sector-page__eligibility h2,
.sector-page__guides h2 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-2xl);
    color: var(--c-navy);
}

.sector-product-card {
    padding: var(--sp-5);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}

.sector-product-card--recommended {
    border-color: var(--c-green);
    border-top: 4px solid var(--c-green);
}

.sector-product-card h3 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xl);
    color: var(--c-navy);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.sector-product-card .badge {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c-green) 18%, transparent);
    color: var(--c-navy);
}

.sector-product-card p,
.sector-product-card ul { margin: 0 0 var(--sp-3); }

.sector-product-card a.btn { margin-right: var(--sp-2); }

.sector-calc-example {
    background: var(--c-bg-alt);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin: var(--sp-4) 0;
    max-width: 38em;
}

.sector-calc-example dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-4);
    margin: 0 0 var(--sp-3);
}

.sector-calc-example dt {
    font-weight: 600;
    color: var(--c-ink-muted);
    font-size: var(--fs-sm);
}

.sector-calc-example dd {
    margin: 0;
    color: var(--c-navy);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.sector-calc-example__note {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-subtle);
}

.sector-page__disclaimer {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--c-ink-muted);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--c-border);
    margin-top: var(--sp-4);
}

.sector-page__guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.sector-page__legal {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
}

.legal-note {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-subtle);
}

.legal-note a {
    color: var(--c-navy);
    text-decoration: underline;
}

/* <<< end: ./pages/content.css */

/* >>> inlined: ./pages/lp.css */
/* R3 §6 splash landing pages. Source CSS: live WP style.css:13720-13873. */
.ccfs-splash {
    background: #fff;
    color: var(--c-text);
}

.ccfs-splash-wrap {
    max-width: 61.25rem;
    margin: 0 auto;
    padding: var(--sp-400) var(--sp-300) var(--sp-700);
}

.ccfs-splash-logo {
    display: block;
    height: 2.375rem;
    width: auto;
    max-width: 12.5rem;
    margin: 0 0 var(--sp-300);
}

.ccfs-splash-eyebrow {
    margin: 0 0 var(--sp-150);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
}

.ccfs-splash-h1 {
    margin: 0 0 var(--sp-250);
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    line-height: 1.15;
    color: var(--c-navy);
}

.ccfs-splash-sub {
    margin: 0 0 var(--sp-300);
    font-size: var(--fs-lg);
    color: var(--c-text);
    max-width: 62ch;
}

.ccfs-splash-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-150);
    margin: var(--sp-100) 0 var(--sp-300);
}

.ccfs-splash-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .75rem 1.375rem;
    border: 1px solid var(--c-green-dark);
    border-radius: var(--r-sm);
    background: var(--c-green);
    color: var(--c-navy);
    text-decoration: none;
    font-weight: 700;
}

.ccfs-splash-cta:hover {
    background: var(--c-green-dark);
}

.ccfs-splash-cta.is-ghost {
    background: transparent;
    color: var(--c-navy);
    border-color: var(--c-navy);
}

.ccfs-splash-bullets,
.ccfs-splash-trust-row,
.ccfs-splash-foot-links {
    list-style: none;
    padding: 0;
}

.ccfs-splash-bullets {
    margin: var(--sp-300) 0 0;
}

.ccfs-splash-bullets li {
    position: relative;
    padding: .25rem 0 .25rem 1.75rem;
}

.ccfs-splash-bullets li::before {
    content: "";
    position: absolute;
    left: .25rem;
    top: .55rem;
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--c-green-dark);
}

.ccfs-splash-trust,
.ccfs-splash-rep,
.ccfs-splash-card {
    border: 1px solid var(--c-border);
    background: #fff;
}

.ccfs-splash-trust {
    margin: var(--sp-400) 0 var(--sp-350);
    padding: var(--sp-300);
    background: var(--c-surface-muted);
    border-radius: var(--r-md);
}

.ccfs-splash-trust-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-150);
    margin: 0;
}

.ccfs-splash-trust-row li {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

.ccfs-splash-trust-row .k {
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ccfs-splash-trust-row .v {
    font-weight: 700;
    color: var(--c-navy);
}

.ccfs-splash-rep {
    margin: var(--sp-350) 0;
    padding: var(--sp-300);
    border-left: .25rem solid var(--c-navy);
    border-radius: var(--r-sm);
}

.ccfs-splash-rep h2 {
    margin: 0 0 var(--sp-100);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-text-secondary);
}

.ccfs-splash-rep p {
    margin: 0;
}

.ccfs-splash-secondary {
    margin: var(--sp-400) 0;
}

.ccfs-splash-secondary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-200);
}

.ccfs-splash-card {
    display: block;
    padding: var(--sp-300);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
}

.ccfs-splash-card h3 {
    margin: 0 0 var(--sp-100);
    color: var(--c-navy);
}

.ccfs-splash-card p {
    margin: 0;
    color: var(--c-text-secondary);
}

.ccfs-splash-foot {
    margin-top: var(--sp-500);
    padding-top: var(--sp-300);
    border-top: 1px solid var(--c-border);
}

.ccfs-splash-foot-disclaimer {
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
}

.ccfs-splash-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-250);
    margin: 0;
    font-size: var(--fs-sm);
}

.ccfs-splash--speed .ccfs-splash-h1,
.ccfs-splash--honest .ccfs-splash-eyebrow {
    color: var(--c-green-dark);
}

.ccfs-splash--cap .ccfs-splash-rep {
    border-left-color: var(--c-green-dark);
}

.ccfs-splash--no-pg .ccfs-splash-trust {
    background: color-mix(in srgb, var(--c-navy) 6%, white);
}

@media (max-width: 479px) {
    .ccfs-splash-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 640px) {
    .ccfs-splash-secondary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .ccfs-splash--desktop-first .ccfs-splash-wrap {
        max-width: 67.5rem;
        padding: var(--sp-600) var(--sp-400) var(--sp-800);
    }

    .ccfs-splash--desktop-first .ccfs-splash-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: var(--sp-500);
        align-items: start;
    }

    .ccfs-splash--desktop-first .ccfs-splash-bullets {
        grid-column: 2;
        margin-top: 0;
    }

    .ccfs-splash--desktop-first .ccfs-splash-h1,
    .ccfs-splash--desktop-first .ccfs-splash-sub,
    .ccfs-splash--desktop-first .ccfs-splash-cta-row,
    .ccfs-splash--desktop-first .ccfs-splash-eyebrow {
        grid-column: 1;
    }

    .ccfs-splash-trust-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* <<< end: ./pages/lp.css */

/* >>> inlined: ./pages/about.css */
/* row 292 — About page CSS. Source: live-build ccfs/style.css:15098-15101 (.ccfs-about-figure,
   .ccfs-about-pullquote) + style.css:12697-12754 (ccfs-about-layout, #content.column1).
   Ported to token-driven rebuild conventions. The figure floats right on wider viewports
   (live behaviour: style.css:15098) and stacks full-width below 640px (style.css:15101).
   The pullquote retains verbatim styling from style.css:15100 with token substitution.
   Additional: .ccfs-about-layout, .ccfs-about-body, .ccfs-about-established, .ccfs-about-disambig
   provide page structure (build classes in page.php, no WP equivalent in this codebase — derived). */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.ccfs-about-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-10);
}

/* ── Body copy area ───────────────────────────────────────────────────────── */
.ccfs-about-body {
  max-width: 72ch;
}

.ccfs-about-body > p {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-loose, 1.7);
  color: var(--c-ink);
}

.ccfs-bl-h1 {
  margin: 0 0 var(--sp-5);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: var(--lh-tight, 1.2);
  color: var(--c-navy);
}

/* ── Floating figure (photo + pullquote) — mirrors style.css:15098-15101 ── */
/* Source: live-build ccfs/style.css:15098 (.ccfs-about-figure float + width). */
.ccfs-about-figure {
  float: right;
  width: min(42%, 380px);
  margin: 4px 0 var(--sp-6) var(--sp-6);
  shape-outside: border-box;
}

/* Source: live-build ccfs/style.css:15099 (img styling). */
.ccfs-about-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 8px 26px rgba(13, 35, 70, .12);
}

/* Source: live-build ccfs/style.css:15100 (.ccfs-about-pullquote). */
.ccfs-about-pullquote {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--c-green);
  background: #f6faef;
  border-radius: 0 10px 10px 0;
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1.5;
  color: #3f5060;
  font-style: italic;
}

/* Source: live-build ccfs/style.css:15101 (narrow viewport: stack figure). */
@media (max-width: 640px) {
  .ccfs-about-figure {
    float: none;
    width: 100%;
    margin: 0 0 var(--sp-5);
  }
}

/* ── Established block ────────────────────────────────────────────────────── */
.ccfs-about-established {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

.ccfs-about-established h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl, 1.25rem);
  color: var(--c-navy);
}

/* ── Disambiguation section ───────────────────────────────────────────────── */
.ccfs-about-disambig {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-bg-alt, #f8f9fa);
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--c-border);
}

.ccfs-about-disambig h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl, 1.25rem);
  color: var(--c-navy);
}

.ccfs-about-disambig p {
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-normal, 1.6);
  color: var(--c-ink-muted);
}

.ccfs-about-disambig p:last-child {
  margin-bottom: 0;
}

/* ── V4 capability note ───────────────────────────────────────────────────── */
.ccfs-about-v4-note {
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--c-green) 8%, var(--c-white));
  border-radius: var(--r-sm, 4px);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-muted);
  margin: var(--sp-4) 0;
}

/* <<< end: ./pages/about.css */