/* help.css — the SINGLE CSS bundle the help-centre document head links (async, fingerprinted at
   deploy by the ?v= cache-bust). The dev bundler (bin/build-assets.php) inlines every @import
   below — recursively, since tokens/index.css itself imports the token atoms — into one flat
   public/assets/css/help.css.

   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 (empty) fonts, then print
     3. layout   — page grid + section rhythm
     4. pages    — help-centre chrome + page styles (bold-design vocabulary, token-driven)

   The token + base + layout layers are COPIED VERBATIM from the marketing surface (the mature,
   shared bold-design system — not rewritten). Only the help-centre page CSS is bespoke. */

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

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

/* >>> inlined: ./color/neutral.css */
/* row 23 — neutral greys / white / ink scale.
   Source: live-build ccfs/style.css :root text + surface tokens.

   PREMIUM-UPLIFT (depth via surface separation): the page background moves off pure white
   to a very light cool grey (#f5f7fa) and cards/popovers stay pure white (--c-bg-elevated)
   — so every card, panel and elevated surface visibly LIFTS off the page with the new
   layered shadows, the way HSBC/Lloyds surfaces sit on a tonal canvas rather than melting
   into a white void. --c-bg-alt is deepened a hair (#eef1f6) so inset/zebra bands still
   read distinct from the new page grey. --c-border held at #e5e7eb (hairlines on white).
   The locked surface-tint tokens below are byte-identical (SurfaceTintTokensTest). */
: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:           #f5f7fa;  /* page background — light tonal grey so white cards lift */
  --c-bg-alt:       #eef1f6;  /* zebra / inset surfaces (deeper than page grey) */
  --c-bg-elevated:  #ffffff;  /* cards, popovers — pure white, lifts off the page */

  /* 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);
  /* WCAG 1.4.11: form control edges need ≥3:1 on white. #9aa6b8 = ~3.3:1 on #fff.
     Decorative hairlines / dividers → --c-border #e5e7eb (not a control edge). */
  --color-border:       #9aa6b8;
  --color-primary:      var(--c-navy);
  --color-link:         var(--c-navy);
  /* form-field.css state colours carried hardcoded hexes that didn't match the semantic
     tokens (alert.base.css), so form error/success rendered a different red/green than
     every other state surface. Map them to --c-error/--c-success and tint the bg from the
     same color-mix recipe the alert variants use, so all state surfaces agree. */
  --color-error:        var(--c-error);
  --color-success:      var(--c-success);
  --color-error-bg:     color-mix(in srgb, var(--c-error) 8%, var(--c-bg-elevated));
  --color-success-bg:   color-mix(in srgb, var(--c-success) 9%, var(--c-bg-elevated));
}

/* >>> 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;
  --c-error-text:   #b91c1c;

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

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

/* >>> 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.

   PREMIUM-UPLIFT (confident bank-like hierarchy): body sizes (xs/sm/base/lg) stay fixed
   and rem-based so reading copy is unchanged, but the display sizes (xl→4xl) become a
   fluid clamp() scale so page headings read large and assured on desktop without
   overflowing phones. The clamp floors keep small-screen sizes close to the prior values;
   the ceilings push H1/H2 up noticeably (4xl 36→44px, 3xl 30→34px) for a substantial,
   not-timid voice. Every consumer references these tokens by name, so the scale cascades. */
:root {
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-lg:    1.125rem;  /* 18px */
  --fs-xl:    clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem);   /* 20 → 22.4px */

  /* --fs-md: carried-over page bundles (content/legal/product/status .css) reference a
     mid heading step this ramp never defined; un-fallback'd, it collapsed and those
     navy H3 sub-headings silently inherited body size. Alias to --fs-lg (18px), the
     intended sub-heading step, matching how --text-*/--radius-* compat aliases are handled. */
  --fs-md:    var(--fs-lg);
  --fs-2xl:   clamp(1.5rem, 1.38rem + 0.6vw, 1.75rem);    /* 24 → 28px */
  --fs-3xl:   clamp(1.75rem, 1.55rem + 1vw, 2.125rem);    /* 28 → 34px */
  --fs-4xl:   clamp(2.125rem, 1.7rem + 2.1vw, 2.75rem);   /* 34 → 44px */

  /* Display heading scale — fluid clamp() steps that sit AT/ABOVE --fs-4xl for hero
     marquee/eyebrow display type (landing H1, section heroes). Floors stay near the 4xl
     ceiling so phones don't overflow; ceilings push up for an assured, large-format voice. */
  --fs-display-3: clamp(2.75rem, 2.2rem + 2.4vw, 3.5rem);   /* 44 → 56px */
  --fs-display-2: clamp(3.25rem, 2.5rem + 3.2vw, 4.5rem);   /* 52 → 72px */
  --fs-display-1: clamp(3.75rem, 2.8rem + 4.2vw, 5.5rem);   /* 60 → 88px */

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

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

   PREMIUM-UPLIFT: --lh-tight nudged 1.2→1.15 so large display headings read tight and
   assured; --lh-loose pulled 1.75→1.6 so body prose lands in the confident 1.5-1.6
   bank range (1.75 read slightly airy/uncommitted). --lh-normal unchanged at 1.5. */
:root {
  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.6;

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

/* >>> 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.

   PREMIUM-UPLIFT (bank-grade generosity): the small UI steps (1-4) are unchanged so
   tight inline gaps / control padding stay crisp, but the mid-to-upper steps that drive
   card/panel padding, grid gaps and section rhythm are opened ~17-30%. This is the
   single highest-leverage fix for the "cramped" complaint — every .section, .container,
   card and grid resolves its breathing room from these tokens, so the change cascades
   site-wide without per-page edits. --sp-5 24→28, --sp-6 32→40, --sp-7 48→60,
   --sp-8 64→80, --sp-9 96→120. */
:root {
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   clamp(20px, 1.1rem + 1.1vw, 28px);
  --sp-6:   clamp(26px, 1.3rem + 2vw, 40px);
  --sp-7:   clamp(34px, 1.4rem + 3.4vw, 60px);
  --sp-8:   clamp(44px, 1.8rem + 5vw, 80px);
  --sp-9:   clamp(60px, 2.4rem + 8vw, 120px);
  --sp-10:  160px;
  --sp-11:  208px;
  --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);
}

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

   PREMIUM-UPLIFT (restrained, not bubbly): banks read confident with modest corners.
   --r-md held at 8px (the card/button workhorse); --r-lg pulled 16→12px so large panels
   and cards stop looking soft/consumer-app and read composed. --r-sm/--r-full unchanged. */
:root {
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --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);
}

/* >>> inlined: ./radii/bevel.css */
/* row 29b — bevel-radius alias layer (shared survey token system).
   Imported right after radii/scale.css so curvature reads from ONE place and the
   skeuomorphic survey can speak in bevel terms while keeping the restrained 8/12px
   bank feel (--r-sm 4 / --r-md 8 / --r-lg 12 / --r-full 9999). No new curvature values. */
:root {
  --skeu-bevel-sm: var(--r-sm);
  --skeu-bevel: var(--r-md);
  --skeu-bevel-lg: var(--r-lg);
  --skeu-bevel-pill: var(--r-full);
}

/* >>> inlined: ./shadow/scale.css */
/* row 30 — elevation shadow tokens.
   Source: live-build ccfs/style.css :root (--shadow-sm/-md/-lg).

   PREMIUM-UPLIFT (layered depth): single flat drop-shadows replaced with TWO-LAYER
   shadows — a crisp 1px contact shadow plus a softer ambient diffusion — so cards lift
   off the new light-grey page (neutral.css --c-bg) with believable depth instead of a
   flat smudge. Tuned on a slate-blue tint (15,23,42) to read neutral-cool, not muddy.
   --shadow-xs added for the slimmest chrome (sticky header / notice bar) hairline lift. */
:root {
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md:  0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .07);
  --shadow-lg:  0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px rgba(15, 23, 42, .09);
}

/* >>> inlined: ./shadow/skeu.css */
/* row 30b — SKEUOMORPHIC elevation + inset vocabulary (shared survey token system).
   Imported immediately AFTER shadow/scale.css and BEFORE shadow/focus.css so it layers
   on the existing --shadow-sm/-md/-lg scale and never touches the focus ring.

   Tuned on the SAME slate-blue tint (15,23,42) the scale uses → reads cohesive with
   --shadow-sm/-md/-lg (cards lift off the light-grey page, neutral.css --c-bg #f5f7fa).
   Adds a 1px white top-edge bevel (gloss) to raised surfaces + tactile pressed/inset
   wells + brand CTA chrome derived from --c-navy / --c-green. Modern, restrained
   skeuomorphism — NOT gaudy. Highlights lighten only the TOP 1px (no text-contrast hit).

   Affordance RULE: depth never replaces the non-shadow cue (border/weight/colour) and
   never lands on :focus — focus keeps --shadow-focus (shadow/focus.css) untouched. */
:root {
  /* Raised surfaces (cards, panels, buttons at rest) — crisp top-edge gloss + a LAYERED ambient
     drop (contact + mid + soft spread) for real tactile depth. */
  --skeu-highlight: inset 0 1px 0 rgba(255,255,255,.6);                  /* top bevel gloss on light surfaces */
  --skeu-highlight-strong: inset 0 1px 0 rgba(255,255,255,.8);           /* white cards / secondary btn */
  /* TURN-DOWN PASS (2026-06-19): the depth pass read too heavy — softened all ambient layers ~40%
     (kept the 3-layer structure + monotonic ladder, just lighter). Skeuo character stays; shading
     is restrained. Still NEUTRAL slate — no colored glows. */
  --skeu-shadow-raised: var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.05);
  --skeu-shadow-raised-lg: var(--skeu-highlight), 0 2px 4px rgba(15,23,42,.05), 0 10px 22px rgba(15,23,42,.07);
  /* Hover = lift one notch (pair with transform: translateY(-1px/-2px) the components already use).
     Blur/offset deliberately EXCEED --skeu-shadow-raised-lg so a large card on raised-lg genuinely
     lifts on hover instead of shrinking its shadow — keeps the elevation ladder monotonic. */
  --skeu-shadow-hover: var(--skeu-highlight-strong), 0 2px 6px rgba(15,23,42,.06), 0 12px 26px rgba(15,23,42,.08);
  /* Pressed (:active) — collapse the lift to a deep inner press; affordance pairs with translateY(0). */
  --skeu-shadow-pressed: inset 0 2px 4px rgba(15,23,42,.16), inset 0 1px 2px rgba(15,23,42,.10);
  /* Canonical press for DARK surfaces (navy/green CTAs) — a darker inset than the light --skeu-shadow-pressed
     so a pressed primary doesn't get a pale slate well that clashes with its gradient. */
  --skeu-shadow-pressed-navy: inset 0 2px 4px rgba(0,0,0,.22), inset 0 1px 2px rgba(0,0,0,.14);
  --skeu-shadow-cta-navy-active: var(--skeu-shadow-pressed-navy);
  --skeu-shadow-cta-green-active: var(--skeu-shadow-pressed-navy);
  --skeu-grad-navy-active: linear-gradient(180deg, var(--c-navy-dark) 0%, var(--c-navy-dark) 100%);
  /* Inset wells (inputs, sliders track, readout panels) — a real recessed well, not a hairline. */
  --skeu-shadow-inset: inset 0 1px 3px rgba(15,23,42,.10), inset 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px rgba(15,23,42,.02);
  --skeu-shadow-inset-deep: inset 0 2px 5px rgba(15,23,42,.13), inset 0 1px 2px rgba(15,23,42,.09);
  /* Navy primary CTA chrome — gradient + bevel + brand glow, all derived from --c-navy. */
  --skeu-grad-navy: linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 84%, #fff) 0%, var(--c-navy) 46%, var(--c-navy-dark) 100%);
  --skeu-grad-navy-hover: linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 92%, #fff) 0%, var(--c-navy-dark) 100%);
  --skeu-shadow-cta-navy: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.09);
  --skeu-shadow-cta-navy-hover: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 4px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.11);
  /* Green CTA chrome (dark navy bands) — derived from --c-green. */
  --skeu-grad-green: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 76%, #fff) 0%, var(--c-green) 50%, color-mix(in srgb, var(--c-green) 86%, #000) 100%);
  --skeu-grad-green-hover: linear-gradient(180deg, color-mix(in srgb, var(--c-green) 84%, #fff) 0%, color-mix(in srgb, var(--c-green) 90%, #000) 100%);
  --skeu-shadow-cta-green: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.09);
  --skeu-shadow-cta-green-hover: inset 0 1px 0 rgba(255,255,255,.46), 0 2px 4px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.11);
  /* Secondary (white) CTA gradient — references the locked navy-tint token, not raw hex. */
  --skeu-grad-surface: linear-gradient(180deg, var(--c-white) 0%, color-mix(in srgb, var(--c-surface-navy-tint) 60%, var(--c-white)) 100%);
  --skeu-grad-surface-hover: linear-gradient(180deg, var(--c-surface-navy-tint) 0%, color-mix(in srgb, var(--c-surface-navy-tint) 70%, var(--c-navy)) 100%);
  --skeu-shadow-cta-surface: var(--skeu-highlight-strong), 0 1px 2px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.07);
  --skeu-shadow-cta-surface-hover: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(15,23,42,.10), 0 6px 14px rgba(15,23,42,.09);
  /* Sticky-header / floating-FAB / dropdown chrome. */
  --skeu-shadow-chrome: 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(15,23,42,.06), 0 6px 14px rgba(15,23,42,.07);
  /* Hover lift for INTERACTIVE chrome (FAB, dropdown trigger) — one notch up from --skeu-shadow-chrome. */
  --skeu-shadow-chrome-hover: 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(15,23,42,.08), 0 10px 22px rgba(15,23,42,.10);
  /* Detached floating panels (dropdown, drawer sheet, search-suggest). Blur EXCEEDS raised-lg so a
     float panel never reads flatter than the in-flow cards beside it (monotonic ladder). */
  --skeu-shadow-float: 0 2px 8px rgba(15,23,42,.07), 0 14px 30px rgba(15,23,42,.10);
  /* Single source of truth for the full-bleed navy CTA bands (.home-hero / .home-calc / .home-final)
     — replaces the raw #013b73 hex that was duplicated 3x at inconsistent angles/stop-counts. */
  --skeu-grad-navy-band: linear-gradient(160deg, color-mix(in srgb, var(--c-navy) 88%, #fff) 0%, var(--c-navy) 60%, var(--c-navy-dark) 100%);
}
/* NON-DESKTOP TURN-DOWN (owner directive 2026-06-20: "side shadows too heavy esp mobile").
   The wide raised-lg AMBIENT blur (0 10px 22px) pools on the left/right edges of stacked cards and
   reads as a grey wash. Cut the ambient blur + offset ~60% (keep the top-edge gloss + a tight
   contact shadow) so cards still lift but never shade the page. BREAKPOINT: applies to EVERYTHING
   below the desktop layout (<= 1023.98px) — phones AND tablets AND narrow laptop windows — not just
   <=640px. (The earlier 640px cap missed the 641–1023px range, where the page still reads heavy:
   the owner saw old shadows persist at exactly that width even though the menu/button rules — which
   key off the 1024px desktop breakpoint — had already changed.) Desktop (>= 1024px) keeps the bold
   at-rest lift. Token-level override → every component inherits it with ZERO per-component edits. */
@media (max-width: 1023.98px) {
  :root {
    --skeu-shadow-raised:    var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04);
    --skeu-shadow-raised-lg: var(--skeu-highlight), 0 1px 3px rgba(15,23,42,.05), 0 3px 8px rgba(15,23,42,.05);
    --skeu-shadow-hover:     var(--skeu-highlight-strong), 0 1px 3px rgba(15,23,42,.05), 0 4px 10px rgba(15,23,42,.06);
    --skeu-shadow-float:     0 1px 4px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.07);
    --skeu-shadow-chrome:    0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.05), 0 3px 8px rgba(15,23,42,.05);
  }
}


/* >>> 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 (--shadow-focus-inverse). */
:root {
  --shadow-focus:  0 0 0 3px #2b6ca8;

  /* Inverse (white) focus ring for buttons on navy bands, where the navy --shadow-focus is
     near-invisible. WCAG 2.4.11 override used by home-hero/calc/final + product-cta CTAs —
     one source of truth so a future ring tweak changes both override sites together. */
  --shadow-focus-inverse:  0 0 0 3px rgba(255, 255, 255, .65);
}

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

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

/* >>> 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;
  /* Widened 1200→1320 (owner: content sat in a narrow column with big dead margins on desktop,
     read as "cut off / not resizing / doesn't fit tight"). 1320 fills wide screens noticeably
     more while keeping body line-length readable. */
  --container-wide:     1320px;
  --container-max:      1440px;
}



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

/* iOS/Safari tap flash — kill the grey -webkit-tap-highlight overlay that fires on
 * every interactive element when touched. Scoped to genuinely interactive nodes
 * (anchors, buttons, form controls, summary, label) so non-interactive text is
 * unaffected. The visible affordance stays the :hover / :active / :focus-visible
 * states the components already define; this only removes the OS-painted flash.
 * Lives at the reset layer (inlined into critical.css) so it applies from first paint. */
a,
button,
input,
textarea,
select,
summary,
label,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
}

/* Motion baseline — a single tasteful transition for the interactive affordances
 * that don't already define their own (bare anchors / buttons). Components that set
 * a transition (button.base.css, link/text-link.css, …) load AFTER this in the
 * cascade and carry higher specificity, so they win; this only fills the gap so a
 * link or button with no component rule still eases its colour/background/shadow on
 * hover/focus instead of snapping. Uses the shared motion tokens; the reduced-motion
 * block below collapses --dur-* (and any transition referencing it) to ~instant. */
a,
button {
	transition:
		color var(--dur-normal) var(--ease-out),
		background-color var(--dur-normal) var(--ease-out),
		border-color var(--dur-normal) var(--ease-out),
		box-shadow var(--dur-normal) var(--ease-out);
}

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

/* >>> 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.018em; /* premium-uplift: tighter negative tracking so large headings read confident + bank-like (was -0.011em) */
	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 */
	/* Vertical rhythm: a tighter space BELOW every heading binds it to the
	   content it introduces; a generous space ABOVE (scaled by level, in the
	   per-element rules below) separates it from the preceding block. The reset
	   zeroes all UA margins, so this base layer is what gives every page its
	   rhythm — no per-page one-offs needed. */
	margin-block-end: var(--sp-4);
}

/* Per-element size/weight + space-above, scaled by level so the hierarchy reads
   through whitespace as well as size: larger headings get more air above. */
h1 {
	font-size: var(--text-4xl);
	font-weight: 700;
	margin-block-start: var(--sp-8);
}

h2 {
	font-size: var(--text-3xl);
	font-weight: 700;
	margin-block-start: var(--sp-7);
}

h3 {
	font-size: var(--text-2xl);
	font-weight: 600;
	margin-block-start: var(--sp-6);
}

h4 {
	font-size: var(--text-xl);
	font-weight: 600;
	margin-block-start: var(--sp-5);
}

h5 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-block-start: var(--sp-5);
}

h6 {
	font-size: var(--text-base);
	font-weight: 600;
	margin-block-start: var(--sp-5);
}

/* Body copy — comfortable measure and rhythm. A consistent space below every
   paragraph is the single biggest readability win for prose; the reset stripped
   the UA default, so restore it here at the base layer. */
p {
	font-size: var(--text-base);
	line-height: var(--lh-loose);
	color: var(--c-text);
	margin-block-end: var(--sp-4);
}

/* Rhythm guards — keep the new margins from opening doubled or unwanted gaps:
   - a leading heading/paragraph must not push its container open (cards, bands,
     prose columns start flush at the top);
   - a heading or paragraph that is the LAST child must not add a trailing gap;
   - stacked headings (e.g. a kicker + title pair, or a heading directly after
     another) collapse the large space-above to a tight, deliberate step;
   - a heading immediately after a paragraph keeps its full space-above (the
     default) so new subsections breathe. */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
	margin-block-start: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
	margin-block-end: 0;
}

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--sp-2);
}

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

/* >>> 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. A thin white separator ring is
 * layered UNDER the navy --shadow-focus so the indicator detaches crisply from
 * the focused element on BOTH light and navy surfaces (the ring never sits flush
 * against a same-colour edge), giving a small offset and a higher focused/
 * unfocused contrast delta — a strict accessibility win, the ring only gets more
 * visible. --shadow-focus stays the source of truth (a future tweak there carries
 * through here); the white ring is the only added layer. */
:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 1px var(--c-white),
		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;
	}
}

/* Search-combobox active option — the "focus-visible" indicator for the roving
 * aria-activedescendant target. The input keeps DOM focus the whole time (the
 * WAI-ARIA combobox rule), so the highlighted option never matches :focus-visible
 * itself: it must carry its OWN visible indicator. We mirror the global ring
 * (the same navy --shadow-focus over a thin white separator) so the keyboard
 * highlight reads as strongly as a real focus ring on both light and dark
 * surfaces. .pages/help.css owns the panel layout + the subtle card tint; THIS
 * is the load-bearing high-contrast indicator that can never be silently lost.
 * Matched on both .is-active (pointer + keyboard) and [aria-selected="true"]
 * (the ARIA source of truth) so the two can never drift apart. */
.search-typeahead__option.is-active,
.search-typeahead__option[aria-selected="true"] {
	box-shadow:
		0 0 0 1px var(--c-white),
		var(--shadow-focus);
}

/* Forced-colors: box-shadow rings are dropped, so fall back to a system outline
 * exactly like the global :focus-visible rule above. */
@media (forced-colors: active) {
	.search-typeahead__option.is-active,
	.search-typeahead__option[aria-selected="true"] {
		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;
}

/* >>> inlined: ./base/fonts.css */
/* base/fonts.css — help centre.
 *
 * The help centre is a lean, self-contained surface and does NOT ship the self-hosted
 * Montserrat/Inter/Source-Serif woff2 binaries the marketing site carries. To avoid 404s for
 * font files that don't exist here, there are deliberately NO @font-face rules: the type tokens
 * (tokens/type/family.css) already declare a complete system-font fallback stack
 * (ui-sans-serif, -apple-system, Segoe UI, Roboto, …) which renders crisply on every platform
 * with zero network requests — keeping the strict CSP (font-src 'self') and the UK-GDPR posture
 * (no CDN font calls) intact. If the brand woff2 set is later copied into public/assets/fonts/,
 * port the marketing @font-face block here verbatim and the tokens pick them up automatically.
 */

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

	/* ── Calculator quote sheet ───────────────────────────────────────────────
	   "Print / Save quote" prints a clean, dated quote: drop the band gradient + the
	   surrounding page copy, hide the interactive controls (sliders/tabs/radios) and the
	   print button, and keep only the active pane's readout + schedule. Inactive panes
	   already carry [hidden]; the readout/compare/schedule tables print black-on-white. */
	.home-calc,
	.home-calc__inner {
		background: #fff !important;
		color: #000 !important;
		display: block !important;
		padding: 0 !important;
	}
	.home-calc__copy,
	.calc__controls,
	.calc__tabs,
	.calc__single-heading,
	.calc__no-print,
	.calc__sr-status {
		display: none !important;
	}
	.calc {
		box-shadow: none !important;
		border: 1px solid #000 !important;
	}
	.calc::before {
		display: none !important;
	}
	.calc__pane {
		display: block !important;
		padding: 0 !important;
	}
	.calc__readout {
		box-shadow: none !important;
		background: #fff !important;
		border: none !important;
	}
	.calc__readout-value,
	.calc__readout-label,
	.calc__readout-total {
		color: #000 !important;
	}
	.calc__flex-compare-table th,
	.calc__flex-compare-table td,
	.calc__flex-compare-table thead th,
	.calc__flex-compare-table tbody th[scope="row"] {
		color: #000 !important;
		background: #fff !important;
		border-color: #000 !important;
	}
}


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

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

/* Premium band seams — opt-in top-edge keylines so a colour change from one band
   to the next reads as a deliberate seam, not an abrupt cut. Both are painted as a
   1px INSET box-shadow (zero layout impact — no border box-height shift, padding /
   rhythm / width untouched), matching the inset-gloss convention used across the
   skeu vocabulary (--skeu-highlight) and the home/product navy bands.

   --seam       light band: a crisp hairline in the divider token, the same edge
                colour every other light-on-light divider on the site uses.
   --seam-navy  navy band: a faint white-translucent top gloss so the band catches
                light along its top edge against the lighter band above it. Uses the
                shared --skeu-highlight (inset 0 1px 0 rgba white) — neutral, no
                colour glow, and a single source of truth with the card bevels. */
.section--seam      { box-shadow: inset 0 1px 0 var(--c-border); }
.section--seam-navy { box-shadow: var(--skeu-highlight); }

/* Section heading block — clear space under the title/intro before the body
   grid, sized one step above the base heading rhythm so a section's lead reads
   as a distinct band from its content. */
.section__head {
	margin-block-end: var(--sp-6);
}

/* 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 so long
   marketing pages get noticeably more air between sections — the change that
   makes the page read as composed bands rather than a continuous scroll. The
   literals mirror the --bp-laptop token value; custom properties cannot drive
   @media preludes. */
@media (min-width: 1024px) {
	.section {
		padding-block: var(--sp-9);
	}
	.section--tight {
		padding-block: var(--sp-7);
	}
	.section--loose {
		padding-block: var(--sp-10);
	}
}


/* 4 — help-centre pages (bold-design vocabulary; token-driven). */
/* >>> inlined: ./pages/help.css */
/* pages/help.css — help-centre chrome + page styles.
 *
 * Built on the shared MATURE bold-design token system (copied verbatim into resources/css/tokens):
 *   - NEUTRAL slate-tint layered shadows via --skeu-shadow-raised / -raised-lg / -hover / -chrome /
 *     -float (1px white top-bevel gloss, deep inset wells). NO colored glows.
 *   - navy/green CTA gradient + bevel chrome (--skeu-grad-navy / -green, --skeu-shadow-cta-*).
 *   - navy hero band (--c-navy → --c-navy-dark), keylines, frosted sticky header.
 *   - brand navy #003366, green #90cb22 (green only as accent on dark / never as text on white).
 * Mobile/tablet turn-down (<=1023.98px) softens ambient depth.
 * Every colour/space/radius/shadow resolves from a token — no raw hex outside the token files. */

/* ------------------------------------------------------------------ *
 * Small shared utilities + atoms
 * ------------------------------------------------------------------ */

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal, 1.6);
}

:root {
  --help-band-gradient: var(--skeu-grad-navy-band);
  --help-band-keyline: rgba(255,255,255,.14);
  --help-band-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.18);
  --help-frosted-surface: linear-gradient(180deg, color-mix(in srgb, var(--c-white) 94%, transparent), color-mix(in srgb, var(--c-surface-navy-tint) 86%, transparent));
}

.content-narrow { max-width: var(--container-narrow); }

a { color: var(--c-navy-light); }
a:hover { color: var(--c-navy); }

/* Button atoms — navy/green CTA chrome from the bold-design tokens. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7em 1.25em;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn--sm { padding: 0.5em 0.9em; font-size: var(--fs-sm); }

.btn--primary {
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border-color: var(--c-navy-dark);
  box-shadow: var(--skeu-shadow-cta-navy);
}
.btn--primary:hover {
  color: var(--c-white);
  background: var(--skeu-grad-navy-hover);
  box-shadow: var(--skeu-shadow-cta-navy-hover);
  transform: translateY(-1px);
}
.btn--primary:active {
  background: var(--skeu-grad-navy-active);
  box-shadow: var(--skeu-shadow-cta-navy-active);
  transform: translateY(0);
}

.btn--ghost {
  color: var(--c-navy);
  background: var(--skeu-grad-surface);
  border-color: var(--c-border-strong);
  box-shadow: var(--skeu-shadow-cta-surface);
}
.btn--ghost:hover {
  color: var(--c-navy);
  background: var(--skeu-grad-surface-hover);
  box-shadow: var(--skeu-shadow-cta-surface-hover);
  transform: translateY(-1px);
}

.btn--secondary {
  color: var(--c-white);
  background: var(--skeu-grad-green);
  border-color: var(--c-green-dark);
  box-shadow: var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.12), 0 7px 16px rgba(15,23,42,.14);
}
.btn--secondary:hover {
  color: var(--c-white);
  background: var(--skeu-grad-green-hover);
  box-shadow: var(--skeu-highlight-strong), 0 2px 4px rgba(15,23,42,.14), 0 10px 22px rgba(15,23,42,.16);
  transform: translateY(-1px);
}

/* Card atom — raised on the tonal page canvas with the layered neutral shadow + 1px bevel. */
.card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  padding: var(--sp-6);
}
.card--feature {
  background:
    linear-gradient(180deg, var(--c-white) 0%, var(--c-surface-navy-tint) 100%);
  box-shadow: var(--skeu-shadow-raised-lg);
}

/* ------------------------------------------------------------------ *
 * Skip link (token-driven; base/a11y provides the primitive, this themes it)
 * ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--sp-2); top: var(--sp-2);
  z-index: var(--z-skip, 1000);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: var(--r-md);
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------------ *
 * Site header — frosted sticky chrome bar
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 100);
  background: color-mix(in srgb, var(--c-white) 94%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--skeu-shadow-chrome);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
  /* Notch / safe-area (iOS standalone, viewport-fit=cover) — kept in this critical-slice rule so the
     sticky navy bar insets its content from FIRST paint (no notch-clip flash during the async-CSS
     window). The padding-block above sets the base; here we ADD the top inset and widen the inline
     gutter to clear the notch sides. env() resolves to 0 everywhere it doesn't apply, so it is inert
     on desktop / non-notched / non-standalone. The footer counterpart lives in its own band below. */
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  padding-inline:
    max(var(--container-gutter), env(safe-area-inset-left, 0px))
    max(var(--container-gutter), env(safe-area-inset-right, 0px));
}
.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;   /* desktop: centre the "Help Centre" sub-label under the (wider) logo */
  line-height: 1.05;
  text-decoration: none;
  flex: 0 0 auto;
}
.site-brand__name {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-navy);
  letter-spacing: 0;
}
.site-brand__sub {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Separate the "Help Centre" sub-label from the logo above it — without this it touches
     the bottom edge of the wordmark raster. */
  margin-top: var(--sp-1);
}

/* Brand mark — sizes the logo (the .site-brand__logo cap was MISSING, so the 700px raster
   rendered at intrinsic width and bloated/overflowed on mobile) and anchors the ®. */
.site-brand__mark {
  position: relative;
  display: inline-block;
}
.site-brand__logo {
  display: block;
  height: 2.5rem;            /* 40px — the height cap that was absent */
  width: auto;
}
@media (max-width: 767px) {
  .site-brand__logo { height: 2.1rem; }   /* 34px on phones */
}
/* Registered-trademark ® at the wordmark's top-right (the logo is a raster, so the mark is crisp
   HTML text — matches the marketing nav ®). Decorative (aria-hidden); the accessible name stays
   "Credicorp" via the <img alt>. */
.site-brand__reg {
  position: absolute;
  top: 0.05rem;
  right: -0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-navy-light);
  pointer-events: none;
}
@media (max-width: 767px) {
  .site-brand__reg { font-size: 0.56rem; right: -0.42rem; }
}

.site-search { flex: 1 1 auto; min-width: 0; }
.site-search__label { display: none; }
.site-search__field {
  display: flex;
  align-items: stretch;
  background: var(--c-white);
  /* WCAG 1.4.11 control edge — --color-border (#9aa6b8 ≈ 3.3:1 on white), NOT the decorative
     --c-border hairline. Fallback carries the token value so the edge stays visible pre-token. */
  border: 1px solid var(--color-border, #9aa6b8);
  border-radius: var(--r-full);
  box-shadow: var(--skeu-shadow-inset);
  overflow: hidden;
  max-width: 32rem;
  margin-inline: auto;
}
.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.6em 1em;
  font: inherit;
  color: var(--c-ink);
  /* type="search" — strip Safari/iOS's native pill bezel + inner clear ("×") button so the input
     sits flush inside our pill field; the field's own :focus-within ring is the affordance. */
  -webkit-appearance: none;
  appearance: none;
}
/* Belt-and-braces for Safari's separate search decoration pseudo-elements (inset clear glyph). */
.site-search__input::-webkit-search-decoration,
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.site-search__input:focus { outline: none; }
.site-search__field:focus-within {
  box-shadow: var(--skeu-shadow-inset), var(--shadow-focus);
  border-color: var(--c-navy-light);
}
.site-search__submit {
  flex: 0 0 auto;
  border: 0;
  padding: 0.4em 1.1em;
  margin: 4px;
  border-radius: var(--r-full);
  font: inherit;
  font-weight: 600;
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  box-shadow: var(--skeu-shadow-cta-navy);
  cursor: pointer;
}
.site-search__submit:hover { background: var(--skeu-grad-navy-hover); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
  /* Push the primary nav to the right edge on desktop. On inner pages the search
     (flex:1 1 auto) already fills the gap; on the home page there's no header search,
     so without this the nav sat immediately right of the logo. The ≤720px rule keeps
     its own margin-left:auto for the wrapped mobile row (unchanged). */
  margin-left: auto;
  /* Overflow safety valve — the rigid ~433px link cluster (5 nowrap links + CTA) previously
     blew past every phone viewport (measured +35→+129px @414→320) because it had NO overflow
     handling. min-width:0 lets the flex item shrink below its content; overflow-x:auto turns any
     residual excess into a graceful horizontal scroll instead of pushing the document wider.
     This is the no-JS baseline AND belt-and-braces if the toggle module never loads; the ≤720px
     rule below collapses the same nav into a hamburger disclosure when JS is on. */
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox: hide the scrollbar (row is a11y-scrollable) */
}
.site-nav::-webkit-scrollbar { display: none; }   /* WebKit/Blink: hide the scrollbar chrome */

/* Hamburger toggle — hidden by default (desktop + no-JS). It only appears below the 720px
   breakpoint AND only when JS is on (html.js), wired by the ≤720px media block below. */
.site-nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5em 0.7em;
  margin-left: auto;                     /* pin to the right edge of the header row on mobile */
  border: 1px solid var(--color-border, #9aa6b8);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: var(--skeu-shadow-inset);
  font: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-navy);
  cursor: pointer;
}
.site-nav-toggle__bars {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.site-nav-toggle__bars::before,
.site-nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.site-nav-toggle__bars::before { top: -6px; }
.site-nav-toggle__bars::after  { top: 6px; }
.site-nav-toggle__label { line-height: 1; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  /* WCAG 2.5.8 tap-target floor — all three non-CTA nav links must clear 44×44px on touch
     viewports. min-height + vertical padding guarantee the clickable bounding box regardless
     of the rendered line-height (was 21px with zero padding — 23px short of the minimum). */
  min-height: 44px;
  padding: 0.5em 0.35em;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--c-navy); }
.site-nav__link--cta {
  /* "Apply now" CTA: was 35px (padding:0.5em 1em without min-height).
     min-height: 44px brings it to the WCAG 2.5.8 minimum. */
  min-height: 44px;
  padding: 0.5em 1em;
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-cta-navy);
}
.site-nav__link--cta:hover { color: var(--c-white); background: var(--skeu-grad-navy-hover); }

/* Bottom padding clears the fixed Credi FAB (52px height + 1.25rem bottom offset ≈ 72px) plus
   the iOS home-indicator inset so the launcher never sits over content on any device. */
.site-main { display: block; padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }

/* ------------------------------------------------------------------ *
 * Home hero — full-bleed navy gradient band with white search
 * ------------------------------------------------------------------ */
.help-hero {
  background: var(--help-band-gradient);
  color: var(--c-white);
  border-bottom: 1px solid var(--c-navy-dark);
  /* Suppress the top white inset that --help-band-shadow carries — the hero sits directly below the
     sticky header so the 1px rgba(255,255,255,.12) reads as a faint hairline under the header bar. */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}
.help-hero__inner {
  text-align: center;
  padding-block: var(--sp-10, 5rem) var(--sp-9, 4rem);
}
.help-hero__title {
  font-size: clamp(2.25rem, 1.8rem + 2.4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: var(--sp-4);
  line-height: 1.1;
  /* Explicit white — base/typography.css sets h1{color:var(--c-navy)} via a direct element
     selector that would otherwise beat the inherited white from .help-hero on this dark band. */
  color: var(--c-white);
}
.help-hero__lede {
  font-size: var(--fs-lg);
  color: color-mix(in srgb, var(--c-white) 86%, transparent);
  max-width: 44rem;
  margin: 0 auto var(--sp-6);
}
.help-hero__search { max-width: 46rem; margin: 0 auto; }
.help-hero__search-field {
  display: flex;
  gap: var(--sp-2);
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-white) 72%, var(--c-border-strong));
  border-radius: var(--r-full);
  padding: 8px;
  box-shadow: var(--skeu-highlight-strong), var(--skeu-shadow-float);
}
.help-hero__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.85em 1.25em;
  font: inherit;
  font-size: var(--fs-lg);
  color: var(--c-ink);
  /* type="search" — strip Safari/iOS's native bezel + inner clear button (see .site-search__input). */
  -webkit-appearance: none;
  appearance: none;
}
.help-hero__search-input::-webkit-search-decoration,
.help-hero__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.help-hero__search-input:focus { outline: none; }
.help-hero__search-submit { flex: 0 0 auto; border-radius: var(--r-full); }
.help-hero__hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--c-white) 80%, transparent);
}
.help-hero__hint a { color: var(--c-white); text-decoration: underline; text-underline-offset: 2px; }


/* ------------------------------------------------------------------ *
 * Sections + topic groups
 * ------------------------------------------------------------------ */
.help-section { padding-block: var(--sp-7); }
.help-section--alt {
  background: var(--c-bg-alt);
  border-block: 1px solid var(--c-border);
}
.help-section__heading {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-5);
}
.help-section__more { margin-top: var(--sp-5); font-weight: 600; }

.help-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-5);
}
.help-group {
  display: flex;
  flex-direction: column;
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-navy);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  padding: var(--sp-5);
}
.help-group__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}
.help-group__intro {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  flex: 1 0 auto;
}
.help-group__topics { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.help-topic-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  /* min-height: 44px — primary homepage navigation card; audit measured 17px tall in the
     automated test. The flex + padding (--sp-3 = 12px top/bottom) should yield ~40px+,
     but an explicit floor guarantees the WCAG 2.5.8 tap-target minimum on all UA. */
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-white);
  text-decoration: none;
  box-shadow: var(--skeu-shadow-raised);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.help-topic-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--skeu-shadow-hover);
  border-color: var(--c-navy-light);
  border-left-color: var(--c-navy);
}
.help-topic-link__label { font-weight: 600; color: var(--c-ink); }
.help-topic-link__label::after { content: " →"; color: var(--c-navy-light); font-weight: 400; opacity: 0; transition: opacity .12s ease; }
.help-topic-link:hover .help-topic-link__label::after { opacity: 1; }
.help-topic-link__count {
  font-size: var(--fs-xs);
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border: 1px solid var(--c-navy-dark);
  border-radius: var(--r-full);
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: var(--skeu-shadow-cta-navy);
}

/* Popular questions */
.help-popular { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.help-popular__link {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-green);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--skeu-shadow-raised);
  transition: transform .12s ease, box-shadow .12s ease;
}
.help-popular__link:hover { transform: translateY(-1px); box-shadow: var(--skeu-shadow-hover); }
.help-popular__q { display: block; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-1); }
.help-popular__a { display: block; font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* Home contact card */
.help-contact { text-align: center; }
.help-contact__title { font-size: var(--fs-2xl); font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-2); }
.help-contact__body { color: var(--c-ink-muted); max-width: 40rem; margin: 0 auto var(--sp-5); }
.help-contact__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * Contact / Get-support landing (/contact/) — signpost surface.
 * Reuses .card / .card--feature / .callout atoms; these classes lay them out
 * and theme the contact-specific bits in the same NEUTRAL skeuo language.
 * ------------------------------------------------------------------ */
.contact-primary { text-align: center; margin-bottom: var(--sp-6); }
.contact-primary .help-contact__actions { margin-top: var(--sp-5); }
.contact-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-subtle); }

/* Two-up responsive grid of bordered support blocks; collapses to one column on narrow screens.
   Floor is 15rem so two columns fit inside the 640px readable container (.content-narrow); below
   ~that the auto-fit reflows to a single column. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-5);
  margin-block: var(--sp-5);
}
.contact-block,
.sso-banner {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  padding: var(--sp-5) var(--sp-6);
}
.sso-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  background: var(--help-frosted-surface);
}
.sso-banner__greeting,
.sso-banner__body { color: var(--c-ink); font-weight: 600; }
.sso-banner__greeting { color: var(--c-navy); }
.sso-banner__link { flex: 0 0 auto; }
.contact-block__title { font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-2); }
.contact-block__intro { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.contact-block__body { color: var(--c-ink-muted); margin: 0 0 var(--sp-3); }
.contact-block__body:last-child { margin-bottom: 0; }

/* Link list — flat, generous tap targets, navy ink. */
.contact-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.contact-links a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-navy-light);
  text-decoration: none;
  background: var(--skeu-grad-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--skeu-shadow-raised);
  transition: transform var(--dur-fast, 120ms) ease, box-shadow var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease;
}
.contact-links a:hover { transform: translateY(-1px); box-shadow: var(--skeu-shadow-hover); border-color: var(--c-navy-light); text-decoration: underline; }

/* Email teams — label above the address, address is a mailto link. */
.contact-teams { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.contact-team { display: grid; gap: 2px; }
.contact-team__label { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.contact-team__email { color: var(--c-navy-light); font-weight: 600; word-break: break-word; }

/* Phone + postal address. */
.contact-phone { margin: 0 0 var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.contact-phone__num { font-size: var(--fs-xl); font-weight: 700; color: var(--c-navy); text-decoration: none; }
.contact-phone__num:hover { text-decoration: underline; }
.contact-phone__label { font-size: var(--fs-sm); color: var(--c-ink-subtle); }
.contact-address { font-style: normal; color: var(--c-ink-muted); line-height: 1.6; }

.contact-callout { margin-top: var(--sp-6); }
.contact-callout a { color: var(--c-navy-light); }

.contact-form-section { margin-bottom: var(--sp-6); }
.contact-form-section > h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}
.contact-enquiry-form .help-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.contact-enquiry-form .help-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.contact-enquiry-form .help-form__field--full { grid-column: 1 / -1; }
.contact-enquiry-form .help-form__field--hidden {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.help-form__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.required { color: var(--c-error-text); font-weight: 700; }
.help-form__input,
.help-form__select,
.help-form__textarea {
  width: 100%;
  font: inherit;
  color: var(--c-ink);
  background: var(--c-bg-elevated);
  border: 1px solid var(--color-border, #9aa6b8);
  border-radius: var(--r-md);
  padding: 0.7em 0.85em;
  box-shadow: var(--skeu-shadow-inset);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.help-form__select {
  padding-right: 2.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23374151' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  -webkit-appearance: none;
  appearance: none;
}
.help-form__textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.help-form__input:focus-visible,
.help-form__select:focus-visible,
.help-form__textarea:focus-visible {
  outline: none;
  border-color: var(--c-navy-light);
  box-shadow: var(--skeu-shadow-inset), var(--shadow-focus);
}
.help-form__privacy { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-subtle); }
.form-state {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  color: var(--c-ink);
}
.form-state--success {
  background: var(--c-surface-green-tint);
  border-color: var(--c-green-dark);
}
.form-state--error {
  background: var(--c-bg-elevated);
  border-color: var(--c-error);
  color: var(--c-error-text);
}

/* ------------------------------------------------------------------ *
 * Breadcrumb + page head
 * ------------------------------------------------------------------ */
.breadcrumb {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-subtle);
  padding-block: var(--sp-5) var(--sp-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.breadcrumb a {
  color: var(--c-navy-light);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast, 120ms) ease;
}
.breadcrumb a:hover { text-decoration: underline; background: var(--c-surface-navy-tint, #edf2f9); }
.breadcrumb span[aria-hidden] { margin-inline: var(--sp-1); color: var(--c-border-strong); }

.page-head { margin-bottom: var(--sp-6); }
.page-head h1 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0;
  margin-bottom: var(--sp-4);
}
.page-head__lede { color: var(--c-ink-muted); font-size: var(--fs-lg); }

/* ------------------------------------------------------------------ *
 * Topic jump-nav (FAQ index) + topics
 * ------------------------------------------------------------------ */
.topic-jumpnav {
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-7);
}
.topic-jumpnav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.topic-jumpnav__list a {
  display: inline-flex;
  align-items: center;
  /* Topic pill chips are primary FAQ navigation on mobile; raised from 2rem (32px) to 44px
     on touch viewports to meet the WCAG 2.5.8 tap-target minimum.
     Desktop keeps the 2rem (32px) visual — the mobile override in ≤720px sets 44px. */
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--c-navy); text-decoration: none;
  background: var(--skeu-grad-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  box-shadow: var(--skeu-shadow-raised);
}
.topic-jumpnav__list a:hover { text-decoration: underline; border-color: var(--c-navy-light); box-shadow: var(--skeu-shadow-hover); }

/* scroll-margin-top updated: on mobile the sticky header wraps to two rows reaching ~181px.
   The old 8rem (128px) left topics 53px under the opaque header after anchor-jump.
   The mobile override below raises it to 12rem (192px) to clear the two-row header. */
.faq-topic { margin-bottom: var(--sp-8); scroll-margin-top: 8rem; padding-top: var(--sp-3); }
.faq-topic__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-navy);
  padding-bottom: var(--sp-3);
  margin-top: 0;
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--c-border);
}
.faq-topic__title a { color: inherit; text-decoration: none; }
.faq-topic__title a:hover { color: var(--c-navy-light); }

/* ------------------------------------------------------------------ *
 * FAQ accordion (native <details>) — inset well that lifts when open
 * ------------------------------------------------------------------ */
.faq-list { display: grid; gap: var(--sp-3); }
/* scroll-margin-top: on desktop, 6.5rem (104px) clears the single-row header (~64px).
   On mobile the header wraps to two rows and reaches ~181px; the mobile override in the
   ≤720px block raises this to 12rem (192px). See also .faq-topic below. */
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  overflow: hidden;
  scroll-margin-top: 6.5rem;
}
.faq-item[open] { box-shadow: var(--skeu-shadow-raised-lg); border-color: var(--c-navy-light); }
.faq-item__q {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  color: var(--c-navy);
  position: relative;
  padding-right: 3rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  position: absolute;
  right: var(--sp-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--c-navy-light);
  transition: transform .15s ease;
}
.faq-item[open] .faq-item__q::after { content: "\2212"; }
.faq-item__q:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--c-white), inset 0 0 0 4px var(--c-navy-light); }
.faq-item__a {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-ink-muted);
  border-top: 1px solid var(--c-border);
}
/* Match the single-article body rhythm so a FAQ answer reads the same on /faqs/{topic}/ as the
   same content does on /faqs/{slug}/ — paragraph + list bottom margins and inter-item gap aligned
   to --sp-4/--sp-2 (was the tighter --sp-3/--sp-1). */
.faq-item__a { line-height: var(--lh-loose); }
.faq-item__a > :first-child { margin-top: var(--sp-4); }
.faq-item__a p { margin-bottom: var(--sp-4); }
.faq-item__a h2 { font-size: var(--fs-xl); color: var(--c-navy); margin: var(--sp-5) 0 var(--sp-3); }
.faq-item__a h3 { font-size: var(--fs-lg); color: var(--c-navy); margin: var(--sp-4) 0 var(--sp-3); }
.faq-item__a ul, .faq-item__a ol { margin: 0 0 var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); }
.faq-item__a a { color: var(--c-navy-light); }
.faq-item__permalink { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; }
.faq-item__permalink a { text-decoration: none; }

/* ------------------------------------------------------------------ *
 * Topic / article two-column layout + aside
 * ------------------------------------------------------------------ */
.topic-layout, .article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: var(--sp-7);
  align-items: start;
  padding-bottom: var(--sp-8);
}
.topic-layout__aside, .article-aside {
  position: sticky;
  top: 6rem;
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  padding: var(--sp-4);
}
.aside__heading {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-subtle);
  margin-bottom: var(--sp-3);
}
.aside__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.aside__list a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-navy);
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--skeu-grad-surface);
  box-shadow: var(--skeu-shadow-raised);
}
.aside__list a:hover { background: var(--skeu-grad-surface-hover); color: var(--c-navy); border-color: var(--c-navy-light); box-shadow: var(--skeu-shadow-hover); }
.aside__cta { margin-top: var(--sp-3); }

/* Sticky portal CTA in the article aside — "Sign in" + "Apply now" buttons. */
.aside__portal-cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.aside__portal-cta .btn { width: 100%; text-align: center; justify-content: center; }

/* ------------------------------------------------------------------ *
 * Single article body — readable measure, branded headings
 * ------------------------------------------------------------------ */
.article {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised-lg);
  padding: var(--sp-7);
}
.article__eyebrow { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.article__eyebrow a { color: var(--c-navy-light); text-decoration: none; }
.article__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-navy);
  letter-spacing: 0;
  margin-bottom: var(--sp-5);
}
.article__body {
  color: var(--c-ink-muted);
  font-size: 1.0625rem; /* 17px — between --fs-base (16) and --fs-lg (18); comfortable without bloat */
  line-height: 1.75;
  max-width: 68ch; /* readable measure cap; grid column is wide without this */
}
.article__body > :first-child { margin-top: 0; }
.article__body p { margin-bottom: var(--sp-4); }
/* Heading rhythm: the space ABOVE a heading binds it to the section it opens. */
.article__body h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-navy);
  margin: var(--sp-6) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.article__body h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-navy);
  margin: var(--sp-5) 0 var(--sp-4);
}
/* Restore bullet/number markers stripped by global reset. */
.article__body ul { list-style: disc; margin: 0 0 var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); }
.article__body ol { list-style: decimal; margin: 0 0 var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); }
.article__body a { color: var(--c-navy-light); }
.article__body strong { color: var(--c-ink); }
/* Inline code — subtle tinted pill so code reads distinct from prose. */
.article__body code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
  background: var(--c-surface-navy-tint, #edf2f9);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--c-navy);
}
/* Fenced code / pre blocks. */
.article__body pre {
  background: #0f1626;
  border: 1px solid #25324a;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
.article__body pre code {
  background: none;
  border: 0;
  padding: 0;
  color: #cfe0ff;
  font-size: var(--fs-sm);
}
/* Content-image CLS safety net (future-proofing — the corpus is figure-free today). Any <img> an
 * author adds to a body fits the column and never overflows; height:auto preserves the intrinsic
 * ratio when width/height are authored (the preferred path — see ImageAttributes + the article.php
 * convention note). The default aspect-ratio reserves a 16:9 box ONLY for images with no width/
 * height attribute, so a forgotten-dimensions image still holds layout instead of reflowing; an
 * authored aspect-ratio="W/H" set via the height/width attributes overrides it. .article__body img
 * also gets loading=lazy/decoding=async (or eager+fetchpriority on the first/LCP image) injected by
 * ImageAttributes at render time. */
.article__body img { max-width: 100%; height: auto; display: block; margin: var(--sp-4) 0; border-radius: var(--rad-md, 8px); }
.article__body img:not([width]):not([height]) { aspect-ratio: 16 / 9; object-fit: cover; }
.article__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.article__foot-note { font-size: var(--fs-sm); color: var(--c-ink-subtle); }

/* ------------------------------------------------------------------ *
 * In-article rich blocks — token-driven, used by long-form guides + the
 * fees / comparison / glossary articles. Same deep-neutral skeuo idiom as
 * the rest of the page (layered slate shadow + 1px bevel, navy headings,
 * green ONLY as a left-keyline accent — never green text on white). All
 * presentation-only: no account data, no JS.
 * ------------------------------------------------------------------ */

/* Key-figures table (fees / what-it-costs). Mirrors the marketing figures
   table but in the help token vocabulary. Numeric cells are tabular-aligned. */
.figure-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
  overflow: hidden;
  margin: var(--sp-5) 0;
  font-size: var(--fs-base);
}
.figure-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-subtle);
  padding: var(--sp-2) var(--sp-4);
}
.figure-table th,
.figure-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.figure-table thead th {
  background: var(--c-surface-navy-tint);
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.figure-table tbody th { color: var(--c-navy); font-weight: 600; width: 46%; }
.figure-table tbody td { color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
.figure-table tbody tr:last-child th,
.figure-table tbody tr:last-child td { border-bottom: 0; }
.figure-table tr.is-us th,
.figure-table tr.is-us td { background: var(--c-surface-green-tint); }

/* Callout note — neutral info band with a green left-keyline. NOT a colored
   glow; the body text stays ink (a11y: never green text on a pale fill). */
.callout {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-green);
  border-radius: var(--r-md);
  color: var(--c-ink-muted);
  box-shadow: var(--skeu-shadow-raised);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__title {
  display: block;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}

/* Glossary — linkable A–Z definition list. Each term is an anchor target so
   articles can deep-link to a single definition (#term-slug). */
.glossary { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.glossary__letter {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-navy);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-border);
  scroll-margin-top: 6rem;
}
.glossary__letter:first-child { margin-top: 0; }
.glossary__entry {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  scroll-margin-top: 6rem;
}
.glossary__term { font-weight: 700; color: var(--c-navy); margin: 0 0 var(--sp-1); font-size: var(--fs-lg); }
.glossary__def  { margin: 0; color: var(--c-ink-muted); }
.glossary__def a { color: var(--c-navy-light); }

/* Steps — numbered process list (how-to-apply / escalation ladder). Green
   keyline accent; counter-driven so no manual numbering in the markup. */
.steps { list-style: none; padding: 0; margin: var(--sp-5) 0; counter-reset: help-step; display: grid; gap: var(--sp-3); }
.steps > li {
  counter-increment: help-step;
  position: relative;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-7) + var(--sp-2));
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-green);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  color: var(--c-ink-muted);
}
.steps > li::before {
  content: counter(help-step);
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--skeu-grad-navy);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--skeu-shadow-cta-navy);
}
.steps > li strong { color: var(--c-navy); }

/* The figure-table degrades to stacked rows on narrow screens (label above value). */
@media (max-width: 600px) {
  .figure-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .figure-table, .figure-table tbody, .figure-table tr { display: block; width: 100%; }
  .figure-table tbody th, .figure-table tbody td { display: block; width: auto; border-bottom: 0; padding: var(--sp-2) var(--sp-4); }
  .figure-table tbody th { padding-bottom: 0; }
  .figure-table tbody tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
  .figure-table tbody tr:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------------ *
 * Search page
 * ------------------------------------------------------------------ */
.search-page__form { margin-bottom: var(--sp-6); }
.search-page__field {
  display: flex;
  gap: var(--sp-2);
  background: var(--c-white);
  /* WCAG 1.4.11 control edge — see .site-search__field note (token #9aa6b8 ≈ 3.3:1 on white). */
  border: 1px solid var(--color-border, #9aa6b8);
  border-radius: var(--r-full);
  padding: 6px;
  box-shadow: var(--skeu-shadow-inset);
}
.search-page__field:focus-within { border-color: var(--c-navy-light); box-shadow: var(--skeu-shadow-inset), var(--shadow-focus); }
.search-page__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  padding: 0.7em 1.1em; font: inherit; color: var(--c-ink);
  /* type="search" — strip Safari/iOS's native bezel + inner clear button (see .site-search__input).
     Shared by the /search field and the 404-page search (both render .search-page__input). */
  -webkit-appearance: none;
  appearance: none;
}
.search-page__input::-webkit-search-decoration,
.search-page__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-page__input:focus { outline: none; }
.search-page__submit { flex: 0 0 auto; border-radius: var(--r-full); }
.search-page__hint, .search-page__count { color: var(--c-ink-muted); margin-bottom: var(--sp-4); }
.search-page__empty {
  padding: var(--sp-6);
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised-lg);
}
.search-page__empty p { margin-bottom: var(--sp-3); }
.search-page__empty-heading { font-size: var(--fs-xl); font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-2); }
.search-page__empty-lede { color: var(--c-ink-muted); max-width: 44rem; margin-bottom: var(--sp-5); }
.search-page__empty-subhead {
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-navy); margin-bottom: var(--sp-3);
}
.search-page__empty-popular { margin-bottom: var(--sp-5); }
.search-page__empty-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.search-page__empty-more { margin-bottom: 0; font-weight: 600; }

.search-results { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.search-result__link {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--skeu-shadow-raised);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.search-result__link:hover { transform: translateY(-1px); box-shadow: var(--skeu-shadow-hover); border-color: var(--c-navy-light); }
.search-result__title { display: block; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-1); }
.search-result__topic {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border: 1px solid var(--c-navy-dark);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
  box-shadow: var(--skeu-shadow-cta-navy);
}

.search-chips {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-raised);
}
.search-chips__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.search-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  color: var(--c-navy);
  background: var(--skeu-grad-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  box-shadow: var(--skeu-shadow-raised);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.search-chips__chip:hover {
  border-color: var(--c-navy-light);
  box-shadow: var(--skeu-shadow-hover);
  text-decoration: underline;
}
.search-chips__chip--active {
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border-color: var(--c-navy-dark);
  box-shadow: var(--skeu-shadow-cta-navy);
}
.search-chips__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c-white) 78%, transparent);
  color: var(--c-navy);
  box-shadow: inset 0 1px 1px rgba(15,23,42,.12);
}
.search-chips__chip--active .search-chips__count {
  background: rgba(255,255,255,.18);
  color: var(--c-white);
}
.search-result__snippet { display: block; font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* ------------------------------------------------------------------ *
 * Search — "You might be looking for" fallback suggestions
 * Surfaced beneath thin/empty results; a real listbox the search input
 * owns once the combobox module loads, a plain link list without JS.
 * ------------------------------------------------------------------ */
.search-suggest {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.search-suggest__heading { font-size: var(--fs-lg); font-weight: 700; color: var(--c-navy); margin-bottom: var(--sp-1); }
.search-suggest__lede { color: var(--c-ink-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.search-suggest__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.search-suggest__item { margin: 0; border-radius: var(--r-md); }
/* The active (keyboard/pointer) option mirrors the result-card hover affordance. */
.search-suggest__item.is-active .search-suggest__link {
  transform: translateY(-1px);
  box-shadow: var(--skeu-shadow-hover);
  border-color: var(--c-navy-light);
}
.search-suggest__item.is-active { box-shadow: 0 0 0 1px var(--c-white), var(--shadow-focus); }
.search-suggest__link {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--skeu-shadow-raised);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.search-suggest__link:hover { transform: translateY(-1px); box-shadow: var(--skeu-shadow-hover); border-color: var(--c-navy-light); }
.search-suggest__link:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--c-white), var(--shadow-focus); }
.search-suggest__title { display: block; font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-1); }
.search-suggest__meta { display: block; margin-bottom: var(--sp-2); }
.search-suggest__topic,
.search-suggest__badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}
.search-suggest__topic { color: var(--c-navy); background: var(--c-surface-navy-tint); }
/* The KB quick-answer chip carries the navy gradient to read as the strongest match. */
.search-suggest__badge {
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border: 1px solid var(--c-navy-dark);
  box-shadow: var(--skeu-shadow-cta-navy);
}
.search-suggest__snippet { display: block; font-size: var(--fs-sm); color: var(--c-ink-muted); }

/* The JS combobox builds each option as a bare .search-suggest__option (no inner <a>); give it the
   same card affordance as the server-rendered .search-suggest__link items. */
.search-suggest__option {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.search-suggest__option.is-active,
.search-suggest__option[aria-selected="true"] {
  transform: translateY(-1px);
  box-shadow: var(--skeu-shadow-hover), 0 0 0 1px var(--c-white), var(--shadow-focus);
  border-color: var(--c-navy-light);
}

/* Reduced-motion: drop the lift transition on the suggestion cards. */
@media (prefers-reduced-motion: reduce) {
  .search-suggest__link, .search-suggest__option { transition: none; }
  .search-suggest__item.is-active .search-suggest__link,
  .search-suggest__option.is-active,
  .search-suggest__link:hover { transform: none; }
}

/* Forced-colors: box-shadow rings are dropped, so fall back to a system outline
   exactly like the global :focus-visible / combobox indicators in base/a11y.css. */
@media (forced-colors: active) {
  .search-suggest__item.is-active,
  .search-suggest__link:focus-visible,
  .search-suggest__option.is-active,
  .search-suggest__option[aria-selected="true"] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ------------------------------------------------------------------ *
 * Search typeahead — the FLOATING combobox panel under the hero / header
 * search box (search-typeahead.js builds it at runtime over the existing
 * /api/quick-answers backend). Distinct from the in-flow .search-suggest
 * rescue list on /search: this is an absolutely-positioned dropdown the
 * input owns as a WAI-ARIA combobox. The active-option FOCUS RING lives in
 * base/a11y.css next to the global :focus-visible ring; here we own only
 * panel layout + the option card affordance.
 * ------------------------------------------------------------------ */

/* The field wrapper anchors the absolute panel. The header pill clips its
   children (overflow:hidden for the rounded edge); with the typeahead mounted
   we let the panel escape — the input is transparent and the submit carries
   its own pill radius + margin, so the pill still reads correctly. */
[data-search-typeahead] { position: relative; }
.site-search__field[data-search-typeahead] { overflow: visible; }

/* The /search page hooks the input itself (data-search-combobox); the module anchors the panel to
   the input's parent field, so that field is the positioning context here. */
.search-page__field { position: relative; }

.search-typeahead {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--sp-2));
  /* Above the sticky header (--z-sticky 100) so the header search dropdown clears page content. */
  z-index: var(--z-overlay);
}
.search-typeahead__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  display: grid;
  gap: var(--sp-2);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  /* Momentum scrolling for the capped typeahead dropdown on older iOS Safari. */
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--skeu-shadow-float);
}
.search-typeahead__list[hidden] { display: none; }
.search-typeahead__option {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
/* Active = the roving aria-activedescendant target (keyboard) OR hover/selected
  (pointer). The high-contrast ring is in a11y.css; here we tint the card. */
.search-typeahead__option.is-active,
.search-typeahead__option[aria-selected="true"] {
  background: var(--c-surface-navy-tint);
  border-color: var(--c-navy-light);
  box-shadow: var(--skeu-shadow-hover), 0 0 0 1px var(--c-white), var(--shadow-focus);
  transform: translateY(-1px);
}
.search-typeahead__option--quick { border-color: var(--c-border); }
.search-typeahead__title {
  display: block;
  font-weight: 600;
  color: var(--c-navy);
  margin-bottom: var(--sp-1);
}
.search-typeahead__meta {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  color: var(--c-navy);
  background: var(--c-surface-navy-tint);
}
/* The KB quick-answer chip carries the navy gradient to read as the strongest match. */
.search-typeahead__meta--quick {
  color: var(--c-white);
  background: var(--skeu-grad-navy);
  border: 1px solid var(--c-navy-dark);
  box-shadow: var(--skeu-shadow-cta-navy);
}
@media (prefers-reduced-motion: reduce) {
  .search-typeahead__option { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Empty state
 * ------------------------------------------------------------------ */
.help-empty {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-ink-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Error pages
 * ------------------------------------------------------------------ */
.error-page { text-align: center; padding-block: var(--sp-8); }
.error-page__code {
  font-size: var(--fs-display-3);
  font-weight: 700;
  color: var(--c-navy-light);
  line-height: 1;
  opacity: .5;
}
.error-page__title { font-size: var(--fs-3xl); font-weight: 700; color: var(--c-navy); margin: var(--sp-3) 0; }
.error-page__body { color: var(--c-ink-muted); max-width: 36rem; margin: 0 auto var(--sp-5); }
.error-page__search { max-width: 30rem; margin: 0 auto var(--sp-5); }
.error-page__links { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ *
 * Home — prominent "Apply for a Credicorp loan" CTA band (light only)
 * ------------------------------------------------------------------ */
.help-apply-cta {
  background: var(--help-band-gradient);
  color: var(--c-white);
  border-block: 1px solid var(--c-navy-dark);
  box-shadow: var(--help-band-shadow);
  padding-block: var(--sp-7);
}
.help-apply-cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.help-apply-cta__text { flex: 1 1 20rem; }
.help-apply-cta__heading {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-white);
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}
.help-apply-cta__body {
  color: color-mix(in srgb, var(--c-white) 84%, transparent);
  font-size: var(--fs-base);
  max-width: 44rem;
  margin-bottom: 0;
}
.help-apply-cta__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.help-apply-cta__btn {
  font-size: var(--fs-lg);
  padding: 0.75em 1.5em;
  background: var(--c-white);
  color: var(--c-navy);
  border-color: rgba(255,255,255,.6);
  box-shadow: var(--skeu-shadow-cta-surface);
}
.help-apply-cta .help-apply-cta__btn,
.help-apply-cta .help-apply-cta__btn:visited {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: rgba(255,255,255,.72);
  box-shadow: var(--skeu-highlight-strong), 0 2px 4px rgba(15,23,42,.14), 0 10px 22px rgba(15,23,42,.16);
}
.help-apply-cta__btn:hover {
  color: var(--c-navy);
  background: var(--skeu-grad-surface-hover);
  transform: translateY(-1px);
  box-shadow: var(--skeu-shadow-cta-surface-hover);
}
.help-apply-cta .help-apply-cta__btn:hover {
  color: var(--c-navy);
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-surface-navy-tint) 100%);
  box-shadow: var(--skeu-highlight-strong), 0 2px 4px rgba(15,23,42,.16), 0 12px 24px rgba(15,23,42,.18);
}
.help-apply-cta__signin {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--c-white) 80%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.help-apply-cta__signin:hover { color: var(--c-white); }
@media (max-width: 720px) {
  .help-apply-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  /* flex-basis 20rem acts as a min-height in column layout → ~200px navy void above the button.
     Reset to auto so the text block is only as tall as its content. */
  .help-apply-cta__text { flex: 0 0 auto; }
  .help-apply-cta__actions { width: 100%; }
  .help-apply-cta__btn { width: 100%; justify-content: center; }
}
/* ------------------------------------------------------------------ *
 * Article bottom CTA band — "Ready to apply?" (light mode only)
 * ------------------------------------------------------------------ */
.article-cta-band {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  background: var(--help-band-gradient);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-navy-dark);
  box-shadow: var(--help-band-shadow), var(--skeu-shadow-raised-lg);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.article-cta-band__apply { flex: 1 1 16rem; }
.article-cta-band__heading {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-white);
  margin-bottom: var(--sp-1);
  letter-spacing: 0;
}
.article-cta-band__body {
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--c-white) 82%, transparent);
  margin-bottom: var(--sp-4);
  max-width: 38rem;
}
.article-cta-band__links {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.article-cta-band .btn--primary {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: rgba(255,255,255,.6);
  box-shadow: var(--skeu-shadow-cta-surface);
}
.article-cta-band .btn--primary:hover {
  color: var(--c-navy);
  background: var(--skeu-grad-surface-hover);
  box-shadow: var(--skeu-shadow-cta-surface-hover);
}
.article-cta-band .btn--ghost {
  border-color: rgba(255,255,255,.35);
  color: color-mix(in srgb, var(--c-white) 88%, transparent);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(15,23,42,.10);
}
.article-cta-band .btn--ghost:hover {
  color: var(--c-white);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 4px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.12);
}
@media (max-width: 720px) {
  .article-cta-band { flex-direction: column; padding: var(--sp-5); }
  .article-cta-band__links { flex-direction: row; flex-wrap: wrap; }
}
/* ------------------------------------------------------------------ *
 * Article — "Still need help?" contact note
 * ------------------------------------------------------------------ */
.article-contact-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-navy-light);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  box-shadow: var(--skeu-shadow-raised);
}
.article-contact-note p { margin: 0; }
.article-contact-note a { color: var(--c-navy-light); }

/* ------------------------------------------------------------------ *
 * Article — "See also" cross-link paragraph (appended to link-orphaned articles)
 * Subtle keyline treatment: navy left accent, muted bg, normal prose size.
 * ------------------------------------------------------------------ */
.article__see-also {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-navy-light);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  box-shadow: var(--skeu-shadow-raised);
  margin-bottom: 0;
}
.article__see-also a { color: var(--c-navy-light); }

/* ------------------------------------------------------------------ *
 * Article — SSO CTA band (inline auth/guest prompt between body + footer)
 * ------------------------------------------------------------------ */
.article__sso-cta {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.sso-article-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--help-frosted-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--skeu-shadow-raised);
  flex-wrap: wrap;
}
.sso-article-banner--auth { border-left: 3px solid var(--c-green); }
.sso-article-banner--guest { border-left: 3px solid var(--c-navy-light); }
.sso-article-banner__greeting,
.sso-article-banner__prompt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  flex: 1 1 auto;
}
.sso-article-banner__greeting { color: var(--c-navy); }
@media (max-width: 480px) {
  .sso-article-banner { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.site-footer {
  background: var(--help-band-gradient);
  color: color-mix(in srgb, var(--c-white) 82%, transparent);
  border-top: 1px solid var(--c-navy-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  padding-block: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__col {
  padding: var(--sp-4);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(15,23,42,.14), 0 8px 20px rgba(15,23,42,.12);
}
.site-footer__heading {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.site-footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer__list a {
  display: inline-flex;
  padding: 0.15rem 0;
  color: color-mix(in srgb, var(--c-white) 82%, transparent);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.site-footer__list a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__note {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(15,23,42,.14), 0 8px 20px rgba(15,23,42,.12);
}
/* Explicit light colour: a global `p { color: … }` sets a dark ink directly on every <p>,
   which beats the navy footer's INHERITED light colour. legal/copy below set their own
   colour and were fine; this note <p> didn't, so "Worried about money?" rendered dark on
   navy. Set it (and its <strong>) to a light tone for contrast. */
.site-footer__note p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); max-width: 70ch; color: color-mix(in srgb, var(--c-white) 80%, transparent); }
.site-footer__note strong { color: var(--c-white); }
.site-footer__note a { color: var(--c-green); text-decoration: underline; }
.site-footer__legal { color: color-mix(in srgb, var(--c-white) 66%, transparent); font-size: var(--fs-xs); }
.site-footer__legal strong { color: color-mix(in srgb, var(--c-white) 86%, transparent); }
.site-footer__copy { color: color-mix(in srgb, var(--c-white) 58%, transparent); font-size: var(--fs-xs); }

/* ------------------------------------------------------------------ *
 * Notch / safe-area — footer band (iOS standalone, viewport-fit=cover)
 * ------------------------------------------------------------------ *
 * Header counterpart lives in the critical .site-header__inner rule above (so the sticky bar insets
 * from first paint). The full-bleed navy footer band keeps its coloured background to the screen
 * edge while insetting its CONTENT: widen the inline gutter to clear the notch sides, and pad the
 * bottom by the home-indicator inset so the legal/copy text isn't cropped. env() is 0 elsewhere.
 */
.site-footer > .container {
  padding-inline:
    max(var(--container-gutter), env(safe-area-inset-left, 0px))
    max(var(--container-gutter), env(safe-area-inset-right, 0px));
}
.site-footer {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ *
 * scroll-padding-top — compensates the sticky header height so browser-
 * native anchor jumps (skip-to-content, footer links, hash-links) land
 * below the opaque header on all viewports.
 *
 * Desktop: single-row header ≈ 64px → 7rem (112px) gives comfortable clearance.
 * ≤720px:  header wraps to two rows and reaches ≈181px → 12rem (192px) override.
 *
 * Separate per-element scroll-margin-top on .faq-item/.faq-topic handles the FAQ
 * jump-nav anchors (same mobile override to 12rem in the ≤720px block).
 * ------------------------------------------------------------------ */
:root { scroll-padding-top: 7rem; }

/* ------------------------------------------------------------------ *
 * Responsive — stack columns; mobile/tablet ambient-depth turn-down
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* Bold-design turn-down: soften ambient blur ~60% on smaller viewports (cheaper paint,
     less heavy) while keeping the bevel + border affordance. NEUTRAL — no colored glows. */
  :root {
    --skeu-shadow-raised: var(--skeu-highlight), 0 1px 2px rgba(15,23,42,.05), 0 2px 6px rgba(15,23,42,.04);
    --skeu-shadow-raised-lg: var(--skeu-highlight), 0 1px 3px rgba(15,23,42,.05), 0 4px 10px rgba(15,23,42,.06);
    --skeu-shadow-hover: var(--skeu-highlight-strong), 0 1px 3px rgba(15,23,42,.06), 0 5px 12px rgba(15,23,42,.07);
    --skeu-shadow-float: 0 1px 4px rgba(15,23,42,.07), 0 6px 16px rgba(15,23,42,.09);
  }
}

/* Ease the article card's generous --sp-7 padding (clamp up to ~60px) one step down on narrower
   viewports so vertical padding stops out-weighing the narrowed reading column. Starts at 980px to
   cover the cramped two-column 721-880px band (aside not yet stacked) as well as the stacked
   721-880 band; the <=720px rule below drops it a further step. Article-scoped — .card unchanged. */
@media (max-width: 980px) {
  .article { padding: var(--sp-6); }
}

@media (max-width: 880px) {
  .topic-layout, .article-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .topic-layout__aside, .article-aside { position: static; }
}

@media (max-width: 720px) {
  .site-header__inner { flex-wrap: wrap; row-gap: var(--sp-3); }

  /* --- Mobile nav: hamburger disclosure -------------------------------------------------- *
   * Below 720px the rigid ~433px link cluster no longer sits inline (that was what overflowed
   * every phone viewport). Instead:
   *   • the brand stays top-left and the hamburger pins top-right on the SAME first row;
   *   • the search (inner pages) drops to its own full-width row (order:3);
   *   • the nav becomes a full-width disclosure panel (order:4) whose links STACK vertically —
   *     collapsed by default (html.js), expanded when the toggle sets data-nav-open on the header.
   * No-JS fallback: html.no-js keeps the toggle hidden and the nav visible as a scrollable row
   * (the base .site-nav overflow-x:auto), so every link is still reachable without JS. */

  /* Show the hamburger ONLY when JS is active. */
  .js .site-nav-toggle { display: inline-flex; }
  .js .site-nav-toggle[aria-expanded="true"] { color: var(--c-navy); background: var(--c-bg-alt, #f1f4f9); }

  /* Search: own full-width row, >=44px tap target (WCAG 2.5.8). */
  .site-search { order: 3; flex-basis: 100%; }
  .site-search__field { max-width: none; min-height: 44px; }
  .site-search__input { min-height: 44px; }
  .site-search__submit { min-height: 44px; }

  /* Nav panel: full-width row that stacks its links. When JS is on, collapse it by default and
     let the toggle reveal it. */
  .site-nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    margin-left: 0;
    overflow-x: visible;               /* stacked column — no horizontal scroll needed */
  }
  .site-nav__link {
    justify-content: flex-start;
    width: 100%;
    padding: 0.75em 0.9em;
    border-radius: var(--r-md);
    color: var(--c-ink);
  }
  .site-nav__link:hover { background: var(--c-bg-alt, #f1f4f9); }
  .site-nav__link--cta { justify-content: center; }
  .site-nav__user { padding: 0.4em 0.9em; }

  /* JS on: collapse the panel; the toggle opens it. Uses a class/attr toggle only (CSP-safe) —
     display:none removes it from layout AND the tab order when closed. */
  .js .site-nav { display: none; }
  .js .site-header[data-nav-open] .site-nav { display: flex; }

  .site-brand { align-items: flex-start; margin-right: auto; }   /* mobile: keep the sub-label left-aligned + push the hamburger to the far right */

  /* Two-row sticky header on mobile reaches ≈181px. Raise scroll-padding-top so ALL native
     anchor jumps (skip links, footer links, hash URLs) clear the header. */
  :root { scroll-padding-top: 12rem; }

  /* site-brand__sub renders at --fs-xs (12px) which is below the 13px legibility floor for
     functional labels on mobile. Bump to 13px. */
  .site-brand__sub { font-size: 0.8125rem; /* 13px */ }

  /* Topic pill chips (jump-nav): raise to 44px tap target on touch viewports. */
  .topic-jumpnav__list a { min-height: 44px; padding-block: 0.6rem; }

  /* FAQ anchor-scroll offset: sticky header wraps to two rows at mobile and reaches ~181px.
     Old values: .faq-item=6.5rem (104px), .faq-topic=8rem (128px) — both cause content to
     scroll under the opaque header on anchor-jump. Raised to 12rem (192px) to clear ~181px. */
  .faq-item  { scroll-margin-top: 12rem; }
  .faq-topic { scroll-margin-top: 12rem; }

  /* article-count badge inside topic cards: --fs-xs = 12px — below 13px floor on mobile.
     Using max() keeps it at 12px where 0.75rem resolves above 12px already (never shrinks). */
  .help-topic-link__count { font-size: max(0.75rem, 13px); }

  .help-hero__inner { padding-block: var(--sp-7); }
  .help-hero__search-field { flex-direction: column; gap: var(--sp-2); border-radius: var(--r-lg); }
  .help-hero__search-submit { width: 100%; border-radius: var(--r-md); min-height: 44px; }
  .article, .card { padding: var(--sp-5); }
  .sso-banner { align-items: flex-start; flex-direction: column; }
  .contact-enquiry-form .help-form__fields { grid-template-columns: 1fr; }
  .contact-enquiry-form .help-form__field--half { grid-column: 1 / -1; }
}

/* Honour reduced-motion: no lift transforms / transitions. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, .help-topic-link:hover, .help-popular__link:hover,
  .search-result__link:hover, .faq-item:hover { transform: none !important; }
}

/* Sectigo SSL trust seal (partials/footer/trust-seal.php) — official "Secured by Sectigo" badge,
   click-to-verify to the genuine Sectigo page. Centre it under the copyright line; the raw _lg_2x
   asset is 280×108, so pin the display to 140px wide (retina-crisp at 2×) instead of its native size. */
.site-footer__seal {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
}
.site-footer__seal-link {
  display: inline-flex;
  line-height: 0;
  border-radius: var(--r-sm);
}
.site-footer__seal-link:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}
.site-footer__seal img {
  width: 140px;
  height: auto;
  max-width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer__seal-link { transition: opacity var(--dur-fast) var(--ease-out); }
  .site-footer__seal-link:hover { opacity: 0.82; }
}


/* ================================================================== *
 * Home enrichment (2026-06-29): topic icons, stats band, explore imagery.
 * Neutral-skeuo language, design tokens only — matches the card system.
 * ================================================================== */
.help-group__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: var(--sp-3);
  border-radius: var(--r-md); color: var(--c-white);
  background: var(--skeu-grad-navy); border: 1px solid var(--c-navy-dark);
  box-shadow: var(--skeu-shadow-cta-navy);
}
.help-group__icon .ico { width: 1.4rem; height: 1.4rem; fill: currentColor; }

.help-stats { background: var(--c-bg-alt); border-block: 1px solid var(--c-border); }
.help-stats__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-5); padding-block: var(--sp-6);
}
.help-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); }
.help-stat__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: var(--sp-2);
  border-radius: var(--r-full); color: var(--c-navy);
  background: var(--c-surface-navy-tint); border: 1px solid var(--c-border);
  box-shadow: var(--skeu-shadow-raised);
}
.help-stat__ic .ico { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.help-stat__num { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-navy); line-height: 1.1; }
.help-stat__label { font-size: var(--fs-sm); color: var(--c-ink-muted); }

.help-explore { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--sp-5); }
.help-explore__card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--skeu-shadow-raised);
  text-decoration: none; transition: transform .14s ease, box-shadow .14s ease;
}
.help-explore__card:hover { transform: translateY(-3px); box-shadow: var(--skeu-shadow-raised-lg); }
.help-explore__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface-navy-tint); border-bottom: 1px solid var(--c-border); }
.help-explore__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-explore__body { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); }
.help-explore__label { font-weight: 700; color: var(--c-navy); }
.help-explore__count {
  font-size: var(--fs-xs); color: var(--c-white); background: var(--skeu-grad-navy);
  border: 1px solid var(--c-navy-dark); border-radius: var(--r-full); padding: 2px 8px;
  white-space: nowrap; font-weight: 600;
}


/* 4b — Forms & Requests atoms (request-form fields, states, gate). Separate file so it lands in the
   async bundle only, never in critical.css (the bundler slices critical from pages/help.css). */
/* >>> inlined: ./components/form.css */
/* Forms & Requests — request-form styling for the help centre.
   Token-driven, in the shared bold-design vocabulary (neutral layered shadows, navy accents,
   inset fields). Reuses help's .faq-item accordion for the hub list, .btn for the submit, .callout
   for the footer note — this file styles only the form-specific atoms (.help-field*, states, gate).
   Below-the-fold by definition, so it is excluded from critical.css. */

/* ------------------------------------------------------------------ *
 * Hub — grouped sections wrapping the .faq-item accordion
 * ------------------------------------------------------------------ */
.help-forms__group { margin: 0 0 var(--sp-7); }
.help-forms__group-heading {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-navy);
  margin: 0 0 var(--sp-1);
}
.help-forms__group-intro {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-4);
}
.help-form__intro {
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-4);
}

/* ------------------------------------------------------------------ *
 * Form block + field grid
 * ------------------------------------------------------------------ */
.help-form-block { margin-top: var(--sp-2); }
.help-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-4);
}
.help-field--full,
.help-field--checkbox { grid-column: 1 / -1; }
.help-field--half { grid-column: span 1; }

@media (max-width: 32rem) {
  .help-form__fields { grid-template-columns: 1fr; }
  .help-field--half { grid-column: 1 / -1; }
}

.help-form__submit { margin: var(--sp-5) 0 0; }
.help-form__submit .btn { min-width: 12rem; }
.help-form__back { margin-top: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; }
.help-form__back a { color: var(--c-navy-light); text-decoration: none; }
.help-form__back a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Fields
 * ------------------------------------------------------------------ */
.help-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.help-field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.help-field__req { color: var(--c-error); font-weight: 700; }
.help-field__help {
  font-size: var(--fs-xs);
  color: var(--c-ink-subtle);
  margin: 0 0 var(--sp-1);
}

.help-field__input,
.help-field__select,
.help-field__textarea {
  width: 100%;
  font: inherit;
  color: var(--c-ink);
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  padding: 0.6em 0.75em;
  box-shadow: var(--skeu-shadow-inset);
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.help-field__textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }

/* Native select chevron (no JS, CSP-safe data-URI SVG). */
.help-field__select {
  padding-right: 2.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23374151' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
}

.help-field__input::placeholder,
.help-field__textarea::placeholder { color: var(--c-ink-subtle); }

.help-field__input:focus-visible,
.help-field__select:focus-visible,
.help-field__textarea:focus-visible {
  outline: none;
  border-color: var(--c-navy-light);
  box-shadow: inset 0 0 0 1px var(--c-navy-light), var(--shadow-focus);
}

/* Error state */
.help-field--error .help-field__input,
.help-field--error .help-field__select,
.help-field--error .help-field__textarea {
  border-color: var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}
.help-field--error .help-field__input:focus-visible,
.help-field--error .help-field__select:focus-visible,
.help-field--error .help-field__textarea:focus-visible {
  box-shadow: inset 0 0 0 1px var(--c-error), var(--shadow-focus);
}
.help-field__error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-error-text);
  margin: var(--sp-1) 0 0;
}

/* Checkbox (consent) */
.help-field--checkbox { margin-top: var(--sp-2); }
.help-field__checkbox-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  cursor: pointer;
}
.help-field__checkbox {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  accent-color: var(--c-navy);
  cursor: pointer;
}
.help-field__checkbox-text a { color: var(--c-navy-light); }

/* ------------------------------------------------------------------ *
 * Success / error state banners (no-JS visible via ?sent/?error; JS toggles [hidden])
 * ------------------------------------------------------------------ */
.help-form-state {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  box-shadow: var(--skeu-shadow-raised);
}
.help-form-state__msg { margin: 0; font-weight: 600; }
.help-form-state--success {
  background: var(--c-surface-green-tint);
  border-color: var(--c-green-dark);
  color: var(--c-success-text);
}
.help-form-state--error {
  background: var(--c-bg-elevated);
  border-color: var(--c-error);
  color: var(--c-error-text);
}

/* ------------------------------------------------------------------ *
 * Account-gated sign-in gate (no PII fields)
 * ------------------------------------------------------------------ */
.help-form-gate {
  background: var(--c-surface-navy-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--skeu-shadow-raised);
}
.help-form-gate__title {
  font-size: var(--fs-lg);
  color: var(--c-navy);
  margin: 0 0 var(--sp-2);
}
.help-form-gate__intro { color: var(--c-ink-muted); margin: 0 0 var(--sp-3); }
.help-form-gate__notice { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.help-form-gate__actions { margin: 0; }

/* ------------------------------------------------------------------ *
 * Honeypot — off-screen (NOT display:none: some bots skip those). Real users never see it.
 * ------------------------------------------------------------------ */
.help-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 4c — cross-estate network strip (estate-bar). */
/* >>> inlined: ./components/estate-bar.css */
/* estate-bar.css — cross-estate network strip for the Help Centre.
   Mirrors the resource-hub estate-bar (subhubs/assets/hub.css): a low-profile navy strip ABOVE the
   site header linking every corner of the Credicorp estate. Two COMPACT rows, no section headers and
   no divider keyline — kept deliberately short. Pure HTML/CSS, no JS, so it passes the nonce CSP
   unchanged. Every link points to ANOTHER site in the estate, so each opens in a new tab; the Help
   Centre self-marks as the current page (a plain green span, never a link to itself). */
.estate-bar{background:var(--c-navy-dark);border-bottom:1px solid rgba(255,255,255,.10)}
/* stack the two rows tightly; tiny block padding keeps the strip low-profile under the main nav */
.estate-bar__inner{display:flex;flex-direction:column;align-items:stretch;gap:.18rem;padding-block:.34rem;min-width:0;width:min(100%,72rem);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.estate-bar__link{color:color-mix(in srgb,var(--c-white) 66%,transparent);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.005em;line-height:1.4;white-space:nowrap}
.estate-bar__link:hover,.estate-bar__link:focus-visible{color:var(--c-white);text-decoration:underline}
.estate-bar__link--current{color:var(--c-green);font-weight:600}
/* Row 1 (products) may wrap on very narrow desktop; row 2 (network) stays on ONE line — all seven
   resource-hub links sit together for fast site-swapping, and never fold into a tall stack. */
.estate-bar__row{display:flex;align-items:center;gap:1.25rem;min-width:0}
.estate-bar__row--products{flex-wrap:wrap;row-gap:.15rem}
.estate-bar__row--network{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:720px){
  /* on phones the single-line row 2 scrolls sideways rather than wrapping into a tall block */
  .estate-bar__inner{gap:.12rem}
  .estate-bar__row{gap:1.05rem}
  .estate-bar__row--network{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .estate-bar__row--network::-webkit-scrollbar{display:none}
}


/* 5 — Credi assistant widget (floating launcher + chat dock). Imported LAST and as a SEPARATE
   file so it lands only in the full async bundle, never in critical.css (the bundler extracts
   critical by slicing pages/help.css at its "Sections + topic groups" marker — this import is
   outside that file, so it is excluded from the above-the-fold inline). */
/* >>> inlined: ./pages/credi.css */
/* ── Credi assistant widget (public help centre) ──────────────────────────────────────────────
   The floating launcher + chat dock for the knowledge-only Credi assistant. Visually mirrors the
   clients Credi widget (deep-neutral skeuomorphism — layered slate shadows + top-edge gloss + navy
   gradient chrome, NOT flat fills) but uses the help token vocabulary directly and OMITS every
   account-only surface (no account cards, no gated-action confirm cards, no escalate/citation
   blocks — this widget answers general questions only).

   Token notes (help set ≠ clients set): card surface = --c-bg-elevated; hairline = --c-border;
   muted = --c-muted; danger = --c-danger; warn = --c-warn/--c-warn-text; transitions compose
   --dur-fast + --ease-out (no --transition-fast token); font weights are raw 600/700 (no --fw-*).
   This file is imported LAST in help.css, AFTER the "Sections + topic groups" critical-cut marker
   in pages/help.css, so it is bundled + cache-busted but never inlined into critical.css.
   ──────────────────────────────────────────────────────────────────────────────────────────── */

/* >>> credi-critical-start
   FOUC GUARD (bug3): the FAB markup (.credi-trigger) is server-rendered and painted immediately,
   but the rest of this widget CSS ships in the async help.css bundle (this file is imported LAST,
   AFTER the critical-cut marker — never inlined). Before the bundle paints, the trigger would fall
   back to the reset (button{background:none}) so the icon's fill="currentColor" inherited the body
   ink colour (#111827 ≈ black) on a transparent UA button — the "black FAB" report. bin/build-
   assets.php lifts JUST this block (between the credi-critical markers) into the inlined critical.css
   so the navy chrome + white icon paint on first frame. Keep it MINIMAL: only the appearance the
   first paint needs (position so it doesn't reflow, navy fill, white icon); all hover/active/motion
   stays in the async rule below. Tokens (--c-navy, --skeu-grad-navy, --skeu-shadow-float) are already
   inlined in critical.css, so the gradient resolves correctly even at the critical stage. */
.credi-trigger {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full, 9999px);
  background-image: var(--skeu-grad-navy);
  background-color: var(--c-navy, #003366);
  color: #fff;
  border: 1px solid var(--c-navy-dark, #002244);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--skeu-shadow-float, 0 6px 24px rgba(0, 51, 102, .30));
}
/* <<< credi-critical-end */

/* Floating trigger (FAB) — fixed bottom-right, navy gradient + bevel, layered float shadow. */
.credi-trigger {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full, 9999px);
  background-image: var(--skeu-grad-navy);
  background-color: var(--c-navy, #003366);
  color: #fff;
  border: 1px solid var(--c-navy-dark, #002244);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--skeu-shadow-float, 0 6px 24px rgba(0, 51, 102, .30));
  transition: transform .26s var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 120ms) var(--ease-out, ease-out),
              opacity .26s ease;
}

/* Scroll-tuck (2026-06-21): the launcher slides out of the way while the visitor scrolls the page so
   it never sits over the article cards/content; credi.js toggles .credi-trigger--tucked (hide on
   scroll-down, reveal on scroll-up / when scrolling stops, never while the dock is open). No-op under
   reduced-motion (stays put + fully visible). */
.credi-trigger--tucked { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .credi-trigger { transition: none; }
  .credi-trigger--tucked { transform: none; opacity: 1; pointer-events: auto; }
}

.credi-trigger:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--skeu-shadow-chrome-hover, 0 10px 26px rgba(0, 51, 102, .30));
}

.credi-trigger:active {
  transform: translateY(0) scale(.98);
  box-shadow: var(--skeu-shadow-pressed-navy, inset 0 2px 4px rgba(0, 0, 0, .22));
}

.credi-trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-inverse, 0 0 0 3px rgba(255, 255, 255, .65)),
              var(--skeu-shadow-float, 0 6px 24px rgba(0, 51, 102, .30));
}

/* When the dock is open, the trigger stays put behind it (the dock sits above via z-index). */

/* Chat dock — detached floating panel above the trigger. */
.credi-dock {
  position: fixed;
  bottom: calc(1.25rem + 52px + .5rem);
  right: 1.25rem;
  z-index: 91;
  width: min(380px, calc(100vw - 2.5rem));
  max-height: min(560px, calc(100svh - 7rem));
  background: var(--c-bg-elevated, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(15, 23, 42, .12));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.credi-dock[hidden] {
  display: none;
}

.credi-dock:not([hidden]) {
  animation: credi-dock-open 160ms var(--ease-out, ease-out) both;
}

@keyframes credi-dock-open {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .credi-dock:not([hidden]) { animation: none; }
}

/* Header — navy gradient band with identity + close. */
.credi-dock__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background-image: var(--skeu-grad-navy-band);
  background-color: var(--c-navy, #003366);
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.credi-dock__identity {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.credi-dock__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.credi-dock__avatar svg { width: 100%; height: 100%; display: block; }

.credi-dock__name {
  margin: 0;
  /* Explicit white: these are <p> elements, and the global `p { color: var(--c-text) }`
     (base/typography.css) overrides the header's inherited color: #fff, which rendered the
     title/tagline DARK on the navy header. Class beats the element selector. */
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
}

.credi-dock__tagline {
  margin: 0;
  color: #fff;
  font-size: .75rem;
  opacity: .82;
  line-height: 1.2;
}

.credi-dock__close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: .25rem;
  border-radius: var(--r-sm, 6px);
  opacity: .82;
  display: flex;
  transition: opacity var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.credi-dock__close:hover { opacity: 1; }
.credi-dock__close:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }

/* Message list — scrolling log, polite live region. */
.credi-dock__messages {
  flex: 1;
  overflow-y: auto;
  /* Momentum scrolling for the chat log on older iOS Safari. */
  -webkit-overflow-scrolling: touch;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  scroll-behavior: smooth;
  background: var(--c-bg, #f5f7fa);
}

.credi-msg {
  max-width: 88%;
  font-size: .9rem;
  line-height: 1.5;
}

.credi-msg p { margin: 0 0 .5em; }
.credi-msg p:last-child { margin-bottom: 0; }

.credi-msg ul,
.credi-msg ol { margin: .25em 0 .5em; padding-left: 1.4em; }
.credi-msg li { margin-bottom: .2em; }

.credi-msg a {
  color: var(--c-navy, #003366);
  font-weight: 600;
}

/* Source affordance — the appended KB link is surfaced as an explicit, labelled provenance row
   ("Source — From this help article: <link>") rather than a bare CTA, so the visitor can see which
   help article the answer came from and open the full verbatim article in one click. Tokens only,
   so it stays AA in both light and dark (caption text --c-muted ≥4.5:1 on the elevated bubble;
   link inherits the navy --c-msg a colour). The hairline keylines it off from the answer body. */
.credi-msg .credi-source {
  margin-top: .55em;
  padding-top: .5em;
  border-top: 1px solid var(--c-border, #e5e7eb);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--c-muted, #6b7280);
}

.credi-msg .credi-source__label {
  display: inline-block;
  margin-right: .35em;
  padding: .05em .4em;
  border-radius: var(--r-sm, 4px);
  background: var(--c-bg-alt, #eef1f6);
  color: var(--c-text-muted, #374151);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: baseline;
}

.credi-msg .credi-source a {
  font-weight: 600;
}

/* RAG provenance list — the retrieved help articles the AI answer was grounded in, appended after a
   "Sources" label row (.credi-source). Same muted, AA caption treatment; tight compact list so it
   reads as provenance metadata, not body content. */
.credi-msg .credi-sources {
  margin: .25em 0 0;
  padding-left: 1.1em;
  list-style: disc;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--c-muted, #6b7280);
}

.credi-msg .credi-sources li {
  margin: 0;
}

.credi-msg .credi-sources a {
  font-weight: 600;
}

.credi-msg--assistant {
  align-self: flex-start;
  background: var(--c-bg-elevated, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 2px var(--r-md, 8px) var(--r-md, 8px) var(--r-md, 8px);
  padding: .55rem .75rem;
  box-shadow: var(--skeu-shadow-raised, 0 1px 2px rgba(15, 23, 42, .05));
}

.credi-msg--user {
  align-self: flex-end;
  background-image: var(--skeu-grad-navy);
  background-color: var(--c-navy, #003366);
  color: #fff;
  border-radius: var(--r-md, 8px) 2px var(--r-md, 8px) var(--r-md, 8px);
  padding: .55rem .75rem;
  box-shadow: var(--skeu-shadow-cta-navy, 0 1px 2px rgba(15, 23, 42, .10));
}

.credi-msg--user a { color: #fff; text-decoration: underline; }

.credi-msg--warn {
  align-self: flex-start;
  max-width: 100%;
  background: color-mix(in srgb, var(--c-warn, #d97706) 12%, var(--c-bg-elevated, #fff));
  color: var(--c-warn-text, #92400e);
  border: 1px solid color-mix(in srgb, var(--c-warn, #d97706) 35%, transparent);
  border-radius: var(--r-md, 8px);
  padding: .55rem .75rem;
}

.credi-msg--error {
  align-self: flex-start;
  max-width: 100%;
  background: color-mix(in srgb, var(--c-danger, #dc2626) 8%, var(--c-bg-elevated, #fff));
  color: var(--c-error-text, #b91c1c);
  border: 1px solid color-mix(in srgb, var(--c-danger, #dc2626) 32%, transparent);
  border-radius: var(--r-md, 8px);
  padding: .55rem .75rem;
}

/* Recovery affordance inside an offline/transport error bubble. The "Try again" row sits below the
   error copy; the button reuses the .credi-chip pill (it carries data-credi-prompt, the same retry
   contract as the starter chips), on a neutral surface so it reads as an action — not part of the red
   error tint. A11y: it is a real <button>, keyboard-focusable, and gets a high-contrast focus ring in
   both themes. */
.credi-msg__actions {
  margin: .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.credi-chip--retry {
  color: var(--c-navy, #003366);
}

/* Suggested-prompt chips — pill controls; the strip retires after the first turn. */
.credi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .25rem;
}

.credi-chips[hidden] { display: none; }

.credi-chip {
  appearance: none;
  border: 1px solid var(--color-border, #9aa6b8);
  background-image: var(--skeu-grad-surface);
  background-color: var(--c-bg-elevated, #fff);
  color: var(--c-navy, #003366);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .4rem .7rem;
  border-radius: var(--r-full, 9999px);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--skeu-shadow-cta-surface, 0 1px 2px rgba(15, 23, 42, .08));
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out),
              border-color var(--dur-fast, 120ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 120ms) var(--ease-out, ease-out),
              transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.credi-chip:hover {
  background-image: var(--skeu-grad-surface-hover);
  border-color: var(--c-navy, #003366);
  box-shadow: var(--skeu-shadow-cta-surface-hover, 0 2px 6px rgba(15, 23, 42, .10));
  transform: translateY(-1px);
}

.credi-chip:active { transform: translateY(0); box-shadow: var(--skeu-shadow-pressed, inset 0 2px 4px rgba(15, 23, 42, .16)); }
.credi-chip:focus-visible { outline: 2px solid var(--c-navy, #003366); outline-offset: 2px; }

/* Thinking dots. */
.credi-msg--thinking { align-self: flex-start; }

.credi-dots {
  display: inline-flex;
  gap: .3em;
  padding: .4rem .2rem;
}

.credi-dots span {
  width: 7px;
  height: 7px;
  background: var(--c-muted, #6b7280);
  border-radius: 50%;
  animation: credi-bounce .9s infinite;
}

.credi-dots span:nth-child(2) { animation-delay: .15s; }
.credi-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes credi-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .6; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .credi-dots span { animation: none; opacity: .6; }
}

/* Composer — auto-grow textarea + send button. */
.credi-composer {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .6rem .75rem;
  border-top: 1px solid var(--c-border, #e5e7eb);
  background: var(--c-bg-elevated, #fff);
  flex-shrink: 0;
}

.credi-composer__input {
  flex: 1;
  border: 1px solid var(--color-border, #9aa6b8);
  border-radius: var(--r-md, 8px);
  padding: .45rem .65rem;
  font: inherit;
  font-size: .9rem;
  resize: none;
  outline-offset: 2px;
  line-height: 1.45;
  min-height: 38px;
  max-height: 140px;
  overflow-y: auto;
  /* Momentum scrolling for the capped auto-grow composer on older iOS Safari. */
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--skeu-shadow-inset, inset 0 1px 3px rgba(15, 23, 42, .10));
}

.credi-composer__input:focus {
  outline: 2px solid var(--c-navy, #003366);
  border-color: var(--c-navy, #003366);
}

.credi-composer__send {
  background-image: var(--skeu-grad-navy);
  background-color: var(--c-navy, #003366);
  color: #fff;
  border: 1px solid var(--c-navy-dark, #002244);
  border-radius: var(--r-md, 8px);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--skeu-shadow-cta-navy, 0 1px 2px rgba(15, 23, 42, .10));
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease-out),
              box-shadow var(--dur-fast, 120ms) var(--ease-out, ease-out),
              transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.credi-composer__send:hover {
  background-image: var(--skeu-grad-navy-hover);
  box-shadow: var(--skeu-shadow-cta-navy-hover, 0 2px 6px rgba(15, 23, 42, .12));
  transform: translateY(-1px);
}

.credi-composer__send:active { transform: translateY(0); box-shadow: var(--skeu-shadow-pressed-navy, inset 0 2px 4px rgba(0, 0, 0, .22)); }
.credi-composer__send:focus-visible { outline: none; box-shadow: var(--shadow-focus-inverse, 0 0 0 3px rgba(255, 255, 255, .65)), var(--skeu-shadow-cta-navy, 0 1px 2px rgba(15, 23, 42, .10)); }
.credi-composer__send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* Mobile — dock becomes a bottom sheet spanning the width. */
@media (max-width: 480px) {
  .credi-dock {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0;
    max-height: 78svh;
  }

  .credi-trigger {
    bottom: 1rem;
    right: 1rem;
  }
}