/* ==========================================================================
   SETTINGS / DESIGN TOKENS
   All CSS custom properties for the Headway Insurance SSR build.
   Source: Figma – Headway renewal process / Design System page
   Font: Inter (Google Fonts) — verify with Headway brand team if unsure
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     COLOUR — Primary (Green/Teal)
     Figma names: Primary 900 → Primary 500
     BEM token names: --color-primary-[shade]
  -------------------------------------------------------------------------- */
  --color-primary-950: #002924;   /* Deepest — button text colour (all variants) */
  --color-primary-900: #014B43;   /* Darkest — dark UI, deep pressed */
  --color-primary-800: #017065;   /* Dark — focus rings, links */
  --color-primary-700: #05D2BE;   /* Default — CTA buttons, progress bar */
  --color-primary-600: #B4F1EB;   /* Light — tints */
  --color-primary-500: #E3FFFB;   /* Lightest — secondary button bg, hover tints */

  /* Button interaction colours (from Figma component) */
  --color-primary-hover:   #06E4CF;   /* Brighter teal — primary/secondary hover */
  --color-primary-pressed: #029788;   /* Mid teal — primary/secondary pressed */

  /* Semantic aliases */
  --color-brand:           var(--color-primary-700);
  --color-brand-dark:      var(--color-primary-800);
  --color-brand-darker:    var(--color-primary-900);
  --color-brand-light:     var(--color-primary-600);
  --color-brand-lightest:  var(--color-primary-500);
  --color-header-start:    #04BFAD;   /* Header gradient start */
  --color-header-end:      #00AEBD;   /* Header gradient end */

  /* --------------------------------------------------------------------------
     COLOUR — Accent Blue (Cyan / Teal)
     Figma Accent 1 swatches (labels 900/800 were stale purple in Figma)
  -------------------------------------------------------------------------- */
  --color-accent-blue-900: #00454B;
  --color-accent-blue-800: #00666F;
  --color-accent-blue-700: #00C3D3;
  --color-accent-blue-600: #B2EDF2;
  --color-accent-blue-500: #D8F9FF;

  /* --------------------------------------------------------------------------
     COLOUR — Accent Orange (Warning/Alert)
     Figma names: Accent Orange 900 → Accent Orange 500
  -------------------------------------------------------------------------- */
  --color-accent-orange-900: #653700;
  --color-accent-orange-800: #985500;
  --color-accent-orange-700: #FF9306;   /* Warning — icons, alerts */
  --color-accent-orange-600: #FFC29F;
  --color-accent-orange-500: #FFEAE0;   /* Warning bg tint */

  /* --------------------------------------------------------------------------
     COLOUR — Grey (Neutral)
     Figma names: Grey 900 → Grey 500
  -------------------------------------------------------------------------- */
  --color-grey-900: #333333;   /* Body text, secondary text */
  --color-grey-800: #808080;   /* Placeholders, muted */
  --color-grey-700: #BFBFBF;   /* Borders, dividers */
  --color-grey-600: #E5E5E5;   /* Disabled states, subtle borders */
  --color-grey-500: #F2F2F2;   /* Card background tint */
  --color-chip-bg:  #F2F4F8;   /* Info chip pill (Figma Frame 3285) */
  --color-grey-400: #F8F8F8;   /* Page background tint */

  /* --------------------------------------------------------------------------
     COLOUR — Base
  -------------------------------------------------------------------------- */
  --color-white:      #FFFFFF;
  --color-black:      #000000;
  --color-page-bg:    var(--color-grey-400);
  --color-surface:    var(--color-white);
  --color-surface-alt: var(--color-grey-500);

  /* --------------------------------------------------------------------------
     COLOUR — Semantic / Status
  -------------------------------------------------------------------------- */
  --color-success:        var(--color-primary-700);
  --color-success-800:    var(--color-primary-800);   /* Darker success — text on light bg */
  --color-success-bg:     var(--color-primary-500);
  --color-warning:        var(--color-accent-orange-700);
  --color-warning-bg:     var(--color-accent-orange-500);
  --color-error:          #FF0000;   /* Red — inline error states */
  --color-error-bg:       #FFF0F2;
  --color-info:           var(--color-accent-blue-700);
  --color-info-bg:        var(--color-accent-blue-500);

  /* --------------------------------------------------------------------------
     COLOUR — Text
  -------------------------------------------------------------------------- */
  --color-text-primary:   var(--color-grey-900);
  --color-text-secondary: var(--color-grey-900);
  --color-text-disabled:  var(--color-grey-700);
  --color-text-on-brand:  var(--color-white);
  --color-text-link:      var(--color-primary-800);
  --color-text-link-hover:var(--color-primary-900);

  /* --------------------------------------------------------------------------
     COLOUR — Border
  -------------------------------------------------------------------------- */
  --color-border:         var(--color-grey-600);
  --color-border-strong:  var(--color-grey-700);
  --color-border-brand:   var(--color-primary-700);
  --color-border-error:   var(--color-error);

  /* --------------------------------------------------------------------------
     COLOUR — Header gradient
     Figma: header uses linear gradient from primary-800 to primary-700
  -------------------------------------------------------------------------- */
  --gradient-header: linear-gradient(91.45deg, var(--color-header-start) 0%, var(--color-header-end) 101.1%);
  --gradient-hero:   linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-700) 100%);
  --gradient-confirmation: linear-gradient(175.37deg, var(--color-header-start) 9.56%, var(--color-accent-orange-700) 95.65%);


  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     Font family: Inter (Google Fonts)
     Weights used in Figma: Regular (400), Medium (500), Bold (700)
  -------------------------------------------------------------------------- */
  --font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* --------------------------------------------------------------------------
     TYPE SCALE — Desktop headers (Figma: Header for Desktop)
     CSS rem-based: assume root 16px → divide px by 16
  -------------------------------------------------------------------------- */
  --text-h1-desktop-size:   5rem;        /* 80px */
  --text-h1-desktop-lh:     6rem;        /* 96px */
  --text-h1-desktop-ls:     -0.02em;

  --text-h2-desktop-size:   3.5rem;      /* 56px */
  --text-h2-desktop-lh:     4rem;        /* 64px */
  --text-h2-desktop-ls:     -0.02em;

  --text-h3-desktop-size:   2.75rem;     /* 44px — Figma Bold/Bold 44pt */
  --text-h3-desktop-lh:     1.1;         /* 48px at 44px */
  --text-h3-desktop-ls:     -0.02em;

  --text-h4-desktop-size:   2rem;        /* 32px */
  --text-h4-desktop-lh:     2.25rem;     /* 36px */
  --text-h4-desktop-ls:     -0.015em;

  /* --------------------------------------------------------------------------
     TYPE SCALE — Mobile headers (Figma: Header for Mobile)
  -------------------------------------------------------------------------- */
  --text-h1-size:           3.25rem;     /* 52px */
  --text-h1-lh:             4rem;        /* 64px */
  --text-h1-ls:             -0.02em;

  --text-h2-size:           2.25rem;     /* 36px */
  --text-h2-lh:             2.75rem;     /* 44px */
  --text-h2-ls:             -0.02em;

  --text-h3-size:           1.75rem;     /* 28px */
  --text-h3-lh:             2rem;        /* 32px */
  --text-h3-ls:             -0.02em;

  --text-h4-size:           1.5rem;      /* 24px */
  --text-h4-lh:             1.75rem;     /* 28px */
  --text-h4-ls:             -0.015em;

  /* --------------------------------------------------------------------------
     TYPE SCALE — Paragraph (shared, all breakpoints)
  -------------------------------------------------------------------------- */
  --text-xl-size:   2rem;          /* 32px — Paragraph XL */
  --text-xl-lh:     3rem;          /* 48px */
  --text-xl-ls:     0;

  --text-lg-size:   1.5rem;        /* 24px — Paragraph LG */
  --text-lg-lh:     2.25rem;       /* 36px */
  --text-lg-ls:     0;

  --text-md-size:   1.25rem;       /* 20px — Paragraph MD */
  --text-md-lh:     2rem;          /* 32px */
  --text-md-ls:     0;

  --text-sm-size:   1.125rem;      /* 18px — Paragraph SM */
  --text-sm-lh:     1.75rem;       /* 28px */
  --text-sm-ls:     0.02em;

  --text-xs-size:   1rem;          /* 16px — Paragraph XS (base) */
  --text-xs-lh:     1.5rem;        /* 24px */
  --text-xs-ls:     0.02em;

  --text-xxs-size:  0.875rem;      /* 14px — Paragraph XXS (labels, captions) */
  --text-xxs-lh:    1.5rem;        /* 24px */
  --text-xxs-ls:    0.02em;

  --text-xxxs-size: 0.75rem;       /* 12px — footer, form errors (in Figma screens, not DS type page) */
  --text-xxxs-lh:   1.2;
  --text-xxxs-ls:   0.02em;

  /* Semantic alias (base body text = XS) */
  --text-base-size: var(--text-xs-size);
  --text-base-lh:   var(--text-xs-lh);
  --text-base-ls:   var(--text-xs-ls);


  /* --------------------------------------------------------------------------
     SPACING SCALE
     4px base unit — multiples of 4
  -------------------------------------------------------------------------- */
  --space-1:    0.25rem;     /*  4px */
  --space-2:    0.5rem;      /*  8px */
  --space-3:    0.75rem;     /* 12px */
  --space-4:    1rem;        /* 16px */
  --space-5:    1.25rem;     /* 20px */
  --space-6:    1.5rem;      /* 24px */
  --space-8:    2rem;        /* 32px */
  --space-10:   2.5rem;      /* 40px */
  --space-12:   3rem;        /* 48px */
  --space-14:   3.5rem;      /* 56px */
  --space-16:   4rem;        /* 64px */
  --space-20:   5rem;        /* 80px */
  --space-24:   6rem;        /* 96px */

  /* Semantic aliases */
  --space-xs:   var(--space-2);    /*  8px */
  --space-sm:   var(--space-4);    /* 16px */
  --space-md:   var(--space-6);    /* 24px */
  --space-lg:   var(--space-8);    /* 32px */
  --space-xl:   var(--space-12);   /* 48px */
  --space-2xl:  var(--space-16);   /* 64px */

  /* Button On White (Figma Button System) */
  --btn-padding-y:  var(--space-3);   /* 12px */
  --btn-padding-x:  var(--space-10);  /* 40px */


  /* --------------------------------------------------------------------------
     BORDER RADIUS
  -------------------------------------------------------------------------- */
  --radius-sm:     0.25rem;    /*  4px — tags, badges */
  --radius-md:     0.5rem;     /*  8px — inputs, cards */
  --radius-lg:     0.75rem;    /* 12px — modals, large cards */
  --radius-xl:     1rem;       /* 16px — feature cards */
  --radius-2xl:    1.5rem;     /* 24px — screen containers */
  --radius-pill:   9999px;     /* Full pill — buttons */


  /* --------------------------------------------------------------------------
     SHADOWS (Figma effect styles: DS-SM, DS-MD, DS-LG, DS-XL)
     Using teal-tinted shadows to match the design system
  -------------------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px 0 rgba(16,24,40,0.06),  0 1px 3px 0 rgba(16,24,40,0.10);
  --shadow-md:   0 2px 4px -2px rgba(16,24,40,0.06), 0 4px 8px -2px rgba(16,24,40,0.10);
  --shadow-lg:   0 4px 6px -2px rgba(16,24,40,0.03), 0 12px 16px -4px rgba(16,24,40,0.08);
  --shadow-xl:   0 8px 8px -4px rgba(16,24,40,0.03), 0 20px 24px -4px rgba(16,24,40,0.08);


  /* --------------------------------------------------------------------------
     TRANSITIONS
  -------------------------------------------------------------------------- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;


  /* --------------------------------------------------------------------------
     LAYOUT
  -------------------------------------------------------------------------- */
  --container-max:       400px;    /* Mobile-first — matches Figma canvas width */
  --container-md:        768px;    /* Tablet breakpoint */
  --container-lg:        1200px;    /* Desktop breakpoint */
  --content-max:         560px;    /* Tablet+ wizard content cap */
  --content-max-lg:      640px;    /* Desktop wizard content cap */
  --container-padding:   var(--space-4);   /* 16px side padding */

  /* Header heights */
  --header-logo-height:   72px;
  --header-progress-height: 48px;
  --header-total-height:  calc(var(--header-logo-height) + var(--header-progress-height));


  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
  -------------------------------------------------------------------------- */
  --z-base:      0;
  --z-above:     10;
  --z-sticky:    100;
  --z-dropdown:  200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

}

/* ==========================================================================
   GENERIC / RESET
   Modern CSS reset based on Andy Bell's "A More Modern CSS Reset"
   https://andy-bell.co.uk/a-more-modern-css-reset/
   ========================================================================== */

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

/* Prevent font size inflation on mobile */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* Remove default margin and padding */
*,
::before,
::after {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Avoid text overflow on paragraphs */
p, li, figcaption {
  text-wrap: pretty;
  max-width: 75ch;
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Make images and media responsive by default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form inputs */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

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

/* Ensure the [hidden] attribute is respected even when display is overridden
   (e.g. svg { display: block } would otherwise defeat hidden on SVG elements) */
[hidden] {
  display: none !important;
}

/* Anchor reset */
a {
  text-decoration: none;
  color: inherit;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Remove animations for people who've turned them off */
@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;
  }
}

/* Hidden utility — screen reader visible only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   ELEMENTS / BASE
   Bare HTML element styles. No classes.
   ========================================================================== */

html {
  font-size: 100%; /* 16px root — all rem values relative to this */
}

body {
  font-family:    var(--font-family-base);
  font-size:      var(--text-base-size);
  line-height:    var(--text-base-lh);
  letter-spacing: var(--text-base-ls);
  color:          var(--color-text-primary);
  background-color: var(--color-page-bg);
}

/* --------------------------------------------------------------------------
   Headings
   Mobile-first sizes; desktop overrides in responsive section
-------------------------------------------------------------------------- */

/* Heading scale — element defaults + .u-text-h* helpers for semantic overrides */
h1,
.u-text-h1 {
  font-size:      var(--text-h1-size);
  line-height:    var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
}

h2,
.u-text-h2 {
  font-size:      var(--text-h2-size);
  line-height:    var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
}

h3,
.u-text-h3 {
  font-size:      var(--text-h3-size);
  line-height:    var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
}

h4,
.u-text-h4 {
  font-size:      var(--text-h4-size);
  line-height:    var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-primary);
}

h5,
.u-text-h5 {
  font-size:      var(--text-sm-size);
  line-height:    var(--text-sm-lh);
  letter-spacing: var(--text-sm-ls);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
}

h6,
.u-text-h6 {
  font-size:      var(--text-xs-size);
  line-height:    var(--text-xs-lh);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
}

/* Desktop heading overrides */
@media (min-width: 768px) {
  h1,
  .u-text-h1 {
    font-size:   var(--text-h1-desktop-size);
    line-height: var(--text-h1-desktop-lh);
  }
  h2,
  .u-text-h2 {
    font-size:   var(--text-h2-desktop-size);
    line-height: var(--text-h2-desktop-lh);
  }
  h3,
  .u-text-h3 {
    font-size:   var(--text-h3-desktop-size);
    line-height: var(--text-h3-desktop-lh);
  }
  h4,
  .u-text-h4 {
    font-size:   var(--text-h4-desktop-size);
    line-height: var(--text-h4-desktop-lh);
  }
}

/* --------------------------------------------------------------------------
   Body copy
-------------------------------------------------------------------------- */

p {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-primary);
}

small {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xxs-lh);
  color:       var(--color-text-secondary);
}

strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Links
-------------------------------------------------------------------------- */

a {
  color:       var(--color-text-link);
  font-weight: var(--font-weight-medium);
  transition:  color var(--transition-fast);
}

a:hover {
  color:           var(--color-text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Lists
-------------------------------------------------------------------------- */

ul, ol {
  padding-left: var(--space-6);
}

li {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
}

/* --------------------------------------------------------------------------
   Horizontal rule
-------------------------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-top:    var(--space-6);
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Tables
-------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align:  left;
  font-weight: var(--font-weight-bold);
  font-size:   var(--text-xxs-size);
  color:       var(--color-text-secondary);
  padding:     var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

td {
  font-size:   var(--text-xs-size);
  padding:     var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   Focus styles (global)
-------------------------------------------------------------------------- */

:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   OBJECTS / CONTAINER
   Layout containers. No cosmetic styles — only structure.
   ========================================================================== */

/*
  .o-container
  —————————————
  Mobile-first content wrapper. Max-width matches Figma canvas (390px mobile).
  From tablet up, content stays capped at --content-max and centres on screen.
*/
.o-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--container-padding);
  padding-right: var(--container-padding);
}

/* Tablet — cap content width on larger viewports */
@media (min-width: 768px) {
  .o-container {
    max-width: var(--content-max);
    padding-left:  var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Desktop — same content cap, slightly more breathing room */
@media (min-width: 1200px) {
  .o-container {
    max-width: var(--content-max-lg);
    padding-left:  var(--space-12);
    padding-right: var(--space-12);
  }
}

/*
  .o-container--narrow
  ————————————————————
  For centred single-column content (forms, confirmations).
  Caps at 480px on desktop to keep readable line lengths.
*/
.o-container--narrow {
  max-width: var(--content-max);
}

/*
  .o-container--flush
  ———————————————————
  Full-width with no horizontal padding (used inside cards, full-bleed sections).
*/
.o-container--flush {
  padding-left:  0;
  padding-right: 0;
}

/* ==========================================================================
   OBJECTS / STACK
   Vertical layout primitives using the "lobotomised owl" pattern.
   Ref: https://every-layout.dev/layouts/stack/
   ========================================================================== */

/*
  .o-stack
  ————————
  Adds consistent vertical spacing between direct children.
  Default gap: --space-6 (24px)
*/
.o-stack {
  display: flex;
  flex-direction: column;
}

.o-stack > * + * {
  margin-top: var(--space-6);
}

/* Gap modifiers */
.o-stack--gap-xs > * + * { margin-top: var(--space-2); }   /*  8px */
.o-stack--gap-sm > * + * { margin-top: var(--space-4); }   /* 16px */
.o-stack--gap-md > * + * { margin-top: var(--space-6); }   /* 24px */
.o-stack--gap-lg > * + * { margin-top: var(--space-8); }   /* 32px */
.o-stack--gap-xl > * + * { margin-top: var(--space-12); }  /* 48px */

.o-stack--lg > * + * { margin-top: var(--space-8); }


/*
  .o-cluster
  ——————————
  Horizontal flow that wraps. For tags, inline lists, button groups.
*/
.o-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.o-cluster--gap-sm { gap: var(--space-2); }
.o-cluster--gap-lg { gap: var(--space-6); }


/*
  .o-split
  ————————
  Two-column layout: one child takes all available space, the other hugs its content.
  Used for label + action rows (e.g. section header + "Edit" link).
*/
.o-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}


/*
  .o-page
  ————————
  Full-height page wrapper. Pushes footer to bottom via flex-grow.
*/
.o-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.o-page__body {
  flex: 1;
  padding-top:    var(--space-8);
  padding-bottom: var(--space-8);
}

.o-page__footer {
  padding-top:    var(--space-6);
  padding-bottom: var(--space-6);
  padding-left:   var(--container-padding);
  padding-right:  var(--container-padding);
}

/* ==========================================================================
   COMPONENT / ACCORDION
   BEM block: .accordion
   ──────────────────────────────────────────────────────────────────────────
   Built on native <details>/<summary> with JS enhancement for animation.

   Structure:
     .accordion
       .accordion__item   ← <details>
         .accordion__trigger  ← <summary>
           .accordion__trigger-content  ← optional wrapper for icon + label
             .accordion__trigger-icon   ← optional leading icon (filled SVG)
             .accordion__label
           .accordion__icon   ← trailing chevron (rotates when open)
         .accordion__panel    ← collapsible content

   Without leading icon (simple form):
     .accordion__trigger
       .accordion__label
       .accordion__icon

   With leading icon:
     .accordion__trigger
       .accordion__trigger-content
         .accordion__trigger-icon
         .accordion__label
       .accordion__icon

   States (JS-toggled on .accordion__item):
     .is-open   → item is expanded

   JS: accordion.js animates open/close via CSS transitions.
       Adds .is-open to <details> elements instead of relying on [open]
       so transitions can fire on close.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.accordion {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
}

/* --------------------------------------------------------------------------
   Item (<details>)
   Open: trigger + panel stack as one seamless card (no gap, shared borders)
-------------------------------------------------------------------------- */

.accordion__item {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Remove default details marker */
.accordion__item summary {
  list-style: none;
}
.accordion__item summary::-webkit-details-marker {
  display: none;
}

/* --------------------------------------------------------------------------
   Trigger (<summary>)
-------------------------------------------------------------------------- */

.accordion__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  width:           100%;
  padding:         var(--space-4);
  cursor:          pointer;
  background:      var(--color-surface);
  border:          1.5px solid var(--color-border);
  border-radius:   var(--radius-md);
  text-align:      left;
  -webkit-user-select:     none;
     -moz-user-select:     none;
          user-select:     none;
  font-size:       var(--text-h4-size);
  line-height:     1.1;
  font-weight:     var(--font-weight-bold);
  letter-spacing:  0;
  color:           var(--color-text-primary);
  transition:      background-color var(--transition-fast),
                   color            var(--transition-fast);
}

.accordion__trigger:hover {
  background-color: var(--color-brand-lightest);
  color:            var(--color-brand-dark);
}

.accordion__item.is-open > .accordion__trigger:hover,
.accordion__item[open] > .accordion__trigger:hover {
  background-color: var(--color-surface);
  color:            var(--color-text-primary);
}

.accordion__trigger:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

/* Open trigger — top half of seamless card with panel below */
.accordion__item.is-open > .accordion__trigger,
.accordion__item[open]   > .accordion__trigger {
  background-color: var(--color-surface);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* --------------------------------------------------------------------------
   Progressive lock — sections after current until previous is confirmed
-------------------------------------------------------------------------- */

.accordion__item.is-locked > .accordion__trigger {
  cursor: default;
  pointer-events: none;
}

.accordion__item.is-locked > .accordion__trigger:hover {
  background-color: var(--color-surface);
  color:            var(--color-text-primary);
}

.accordion__item.is-locked > .accordion__trigger .accordion__icon {
  display: none;
}

/* --------------------------------------------------------------------------
   Trigger content (icon + label group)
-------------------------------------------------------------------------- */

.accordion__trigger-content {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  min-width:   0;   /* allow text truncation if needed */
}

/* --------------------------------------------------------------------------
   Leading icon (optional, filled SVG)
-------------------------------------------------------------------------- */
/* Leading icon container (Figma: 48x48 teal tile, 24px icon) */
.accordion__trigger-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--color-primary-500);
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-md);
}
.accordion__trigger-icon-wrap .accordion__trigger-icon { width: 24px; height: 24px; }

/* Confirmed section — Figma: heroicons-outline/check-circle on primary-700 tile */
.accordion__item.is-confirmed .accordion__trigger {
  background: var(--color-brand-lightest);
}

.accordion__item.is-confirmed.is-open > .accordion__trigger,
.accordion__item.is-confirmed[open] > .accordion__trigger {
  background: var(--color-surface);
}

/* Confirmed — Figma: bright teal tile, dark teal outline check */
.accordion__item.is-confirmed .accordion__trigger-icon-wrap {
  background:   var(--color-brand);
  border-color: var(--color-brand);
}

.accordion__item.is-confirmed .accordion__trigger-icon:not(.accordion__trigger-icon--confirmed) {
  display: none;
}

.accordion__trigger-icon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
  color:       var(--color-brand-dark);
  stroke:      none;
  transition:  fill var(--transition-fast),
               color var(--transition-fast);
}

/* Outline check-circle (stroke only) — dark teal on confirmed tile */
.accordion__trigger-icon--confirmed {
  color:       var(--color-primary-950);
  fill:   none;
  stroke: currentColor;
}

.accordion__item.is-confirmed .accordion__trigger-icon--confirmed,
.accordion__item.is-open .accordion__trigger-icon--confirmed,
.accordion__item[open] .accordion__trigger-icon--confirmed {
  fill:  none;
  color: var(--color-primary-950);
}

/* --------------------------------------------------------------------------
   Trailing chevron icon
-------------------------------------------------------------------------- */

.accordion__icon {
  width:       24px;
  height:      24px;
  flex-shrink: 0;
  fill:        var(--color-grey-700);
  transition:  transform var(--transition-base),
               fill        var(--transition-fast);
}

.accordion__item.is-open .accordion__icon,
.accordion__item[open]   .accordion__icon {
  transform: rotate(180deg);
  fill:      var(--color-brand);
}

/* --------------------------------------------------------------------------
   Panel
   JS wraps content in .accordion__panel-inner for height animation.
-------------------------------------------------------------------------- */

.accordion__panel {
  overflow: hidden;
  /* Height animated by JS */
}

.accordion__panel-inner {
  padding:             var(--space-4);
  background:          var(--color-surface);
  border:              1.5px solid var(--color-border);
  border-radius:       var(--radius-md);
  font-size:           var(--text-xs-size);
  line-height:         var(--text-xs-lh);
  color:               var(--color-text-secondary);
}

.accordion__item.is-open .accordion__panel-inner,
.accordion__item[open] .accordion__panel-inner {
  border-top:             none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --------------------------------------------------------------------------
   Tables within accordion panels — full border grid
-------------------------------------------------------------------------- */

.accordion__panel-inner table:not(.stacked-table) {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-xs-size);
  line-height:     var(--text-xs-lh);
  margin-top:      var(--space-3);
}

.accordion__panel-inner table:not(.stacked-table) th,
.accordion__panel-inner table:not(.stacked-table) td {
  padding:     var(--space-2) var(--space-3);
  border:      1px solid var(--color-border);
  text-align:  left;
  color:       var(--color-text-primary);
}

.accordion__panel-inner table:not(.stacked-table) th {
  background:  var(--color-grey-500);
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Variant: flush (no borders, inside a card)
-------------------------------------------------------------------------- */

.accordion--flush .accordion__item {
  gap: 0;
}

.accordion--flush .accordion__trigger,
.accordion--flush .accordion__panel-inner {
  border:        none;
  border-radius: 0;
  background:    transparent;
}

.accordion--flush .accordion__item:first-child .accordion__trigger {
  border-top: none;
}


/* ==========================================================================
   COMPONENT / ALERT
   BEM block: .alert
   ──────────────────────────────────────────────────────────────────────────
   Inline notification banners (not modal — for inline feedback).

   Structure:
     .alert
       .alert__icon    ← optional SVG icon
       .alert__content
         .alert__title   ← optional bold title
         .alert__text    ← message body
       .alert__close   ← optional dismiss button

   Variants:
     .alert--info     → brand teal
     .alert--success  → green (brand)
     .alert--warning  → orange
     .alert--error    → red
   ========================================================================== */

.alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border:        1.5px solid transparent;
  font-size:     var(--text-xs-size);
  line-height:   var(--text-xs-lh);
}

/* ---------- Info (brand teal) ------------------------------------------- */
.alert--info {
  background-color: var(--color-primary-500);
  border-color:     var(--color-primary-600);
  color:            var(--color-primary-900);
}

.alert--info-icon-orange .alert__icon {
  color: var(--color-accent-orange-700);
}

/* ---------- Success -------------------------------------------------------- */
.alert--success {
  background-color: var(--color-primary-500);
  border-color:     var(--color-primary-600);
  color:            var(--color-primary-900);
}

/* ---------- Warning -------------------------------------------------------- */
.alert--warning {
  background-color: var(--color-accent-orange-500);
  border-color:     var(--color-accent-orange-600);
  color:            var(--color-accent-orange-900);
}

/* ---------- Error ---------------------------------------------------------- */
.alert--error {
  background-color: var(--color-error-bg);
  border-color:     var(--color-error);
  color:            var(--color-error);
}

/* ---------- Icon ----------------------------------------------------------- */
.alert__icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  fill:        none;
  stroke:      currentColor;
  stroke-width: 1.5;
  margin-top:  2px;
}

/* ---------- Content -------------------------------------------------------- */
.alert__content {
  flex: 1;
}

.alert__title {
  font-weight:   var(--font-weight-bold);
  margin-bottom: var(--space-1);
}

.alert__text {
  margin: 0;
}

.alert__content .alert__text + .alert__text {
  margin-top: var(--space-3);
}

.alert__text a {
  color:           inherit;
  font-weight:     var(--font-weight-bold);
  text-decoration: underline;
}

.alert__text a:hover,
.alert__text a:focus-visible {
  text-decoration-thickness: 2px;
}

/* ---------- Close ---------------------------------------------------------- */
.alert__close {
  width:        24px;
  height:       24px;
  flex-shrink:  0;
  display:      flex;
  align-items:  center;
  justify-content: center;
  border:       none;
  background:   none;
  cursor:       pointer;
  color:        currentColor;
  opacity:      0.7;
  border-radius: var(--radius-sm);
  transition:   opacity var(--transition-fast);
}

.alert__close:hover {
  opacity: 1;
}

/* ==========================================================================
   COMPONENT / BADGE
   BEM block: .badge
   ──────────────────────────────────────────────────────────────────────────
   Small inline label for statuses, tags, and counts.

   Variants:
     .badge--brand    → teal (default)
     .badge--success  → green
     .badge--warning  → orange
     .badge--error    → red
     .badge--neutral  → grey
     .badge--outline  → border only
   ========================================================================== */

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-pill);
  font-size:      var(--text-xxs-size);
  font-weight:    var(--font-weight-medium);
  line-height:    1.4;
  letter-spacing: 0.02em;
  white-space:    nowrap;
  border:         none;
}

/* Brand (teal) */
.badge--brand {
  background-color: var(--color-primary-500);
  color:            var(--color-primary-900);
  border-color:     var(--color-primary-600);
}

/* Success */
.badge--success {
  background-color: var(--color-primary-500);
  color:            var(--color-primary-900);
  border-color:     var(--color-primary-600);
}

/* Warning */
.badge--warning {
  background-color: var(--color-accent-orange-500);
  color:            var(--color-accent-orange-900);
  border-color:     var(--color-accent-orange-600);
}

/* Error */
.badge--error {
  background-color: var(--color-error-bg);
  color:            var(--color-error);
  border-color:     var(--color-error);
}

/* Neutral */
.badge--neutral {
  background-color: var(--color-grey-500);
  color:            var(--color-grey-900);
  border-color:     var(--color-grey-600);
}

/* Outline only */
.badge--outline {
  background-color: transparent;
  color:            var(--color-brand);
  border-color:     var(--color-brand);
}

/* Large — used for prominent price/total displays */
.badge--lg {
  padding:   var(--space-2) var(--space-4);
  font-size: var(--text-xs-size);
}

/* Dot indicator */
.badge__dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

/* ==========================================================================
   COMPONENT / BUTTON
   BEM block: .btn
   ──────────────────────────────────────────────────────────────────────────
   Variants:   .btn--primary  .btn--secondary  .btn--ghost
   Sizes:      .btn--sm  .btn--lg  (default is standard)
   Width:      .btn--full  (full-width, block-level)
   Icon:       .btn--icon-left  .btn--icon-right (for arrow buttons)

   States (JS-toggled or HTML attribute):
     .is-loading   → shows spinner, disables pointer events
     :disabled / .is-disabled → greyed out, no pointer events
     :hover        → CSS pseudo
     :focus-visible → focus ring
     :active       → pressed state

   Usage:
     <button class="btn btn--primary" type="button">
       <span class="btn__label">Continue</span>
       <svg class="btn__icon" …></svg>
     </button>
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
-------------------------------------------------------------------------- */

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-2);
  padding:          var(--btn-padding-y) var(--btn-padding-x);
  border-radius:    var(--radius-pill);
  border:           1px solid transparent;
  font-family:      var(--font-family-base);
  font-size:        var(--text-xs-size);     /* 16px */
  font-weight:      var(--font-weight-bold);
  line-height:      1.25;                    /* 20px */
  letter-spacing:   0.01em;
  text-decoration:  none;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color var(--transition-fast),
                    color            var(--transition-fast),
                    border-color     var(--transition-fast),
                    box-shadow       var(--transition-fast),
                    opacity          var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select:      none;
     -moz-user-select:      none;
          user-select:      none;
}

.btn:focus,
.btn:focus-visible {
  outline:       none;
  border-radius: var(--radius-pill);
  box-shadow:    0 0 0 4px var(--color-primary-800);
}

/* Anchor buttons — override global link hover/focus styles */
a.btn,
a.btn:hover {
  text-decoration: none;
}

a.btn:focus-visible {
  outline:       none;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   Disabled state (applies to all variants)
-------------------------------------------------------------------------- */

.btn:disabled,
.btn.is-disabled {
  pointer-events: none;
  cursor:         not-allowed;
  box-shadow:     none;
}

/* --------------------------------------------------------------------------
   Loading state
-------------------------------------------------------------------------- */

.btn.is-loading {
  pointer-events:  none;
  position:        relative;
  color:           transparent;   /* hide label; spinner uses --btn-spinner-color */
}

.btn.is-loading .btn__icon {
  opacity: 0;
}

.btn.is-loading::after {
  content:          '';
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  width:            18px;
  height:           18px;
  border:           2px solid var(--btn-spinner-color, var(--color-primary-950));
  border-top-color: transparent;
  border-radius:    50%;
  animation:        btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   PRIMARY variant
   Figma: teal fill, near-black text (#002924)
-------------------------------------------------------------------------- */

.btn--primary {
  background-color: var(--color-primary-700);   /* #05D2BE */
  border-color:     var(--color-primary-700);
  color:            var(--color-primary-950);   /* #002924 */
  --btn-spinner-color: var(--color-primary-950);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover); /* #06E4CF — brighter */
  border-color:     var(--color-primary-hover);
}

.btn--primary:active {
  background-color: var(--color-primary-pressed); /* #029788 */
  border-color:     var(--color-primary-pressed);
}

.btn--primary:disabled,
.btn--primary.is-disabled {
  background-color: var(--color-grey-600);   /* #E5E5E5 */
  border-color:     var(--color-grey-600);
  color:            var(--color-grey-800);   /* #808080 */
}

/* --------------------------------------------------------------------------
   SECONDARY variant
   Figma: lightest teal fill (#E3FFFB), grey border, near-black text
-------------------------------------------------------------------------- */

.btn--secondary {
  background-color: var(--color-primary-500);  /* #E3FFFB */
  border-color:     var(--color-grey-600);     /* #E5E5E5 */
  color:            var(--color-primary-950);  /* #002924 */
  --btn-spinner-color: var(--color-primary-950);
}

.btn--secondary:hover {
  background-color: var(--color-primary-hover); /* #06E4CF */
  border-color:     var(--color-primary-hover);
  color:            var(--color-primary-950);
}

.btn--secondary:active {
  background-color: var(--color-primary-pressed); /* #029788 */
  border-color:     var(--color-primary-pressed);
  color:            var(--color-primary-950);
}

.btn--secondary:disabled,
.btn--secondary.is-disabled {
  background-color: transparent;
  border-color:     var(--color-grey-600);
  color:            var(--color-grey-700);
}

/* --------------------------------------------------------------------------
   GHOST variant
   Figma: white fill, grey border (#E5E5E5), near-black text
-------------------------------------------------------------------------- */

.btn--ghost {
  background-color: var(--color-white);
  border-color:     var(--color-grey-600);     /* #E5E5E5 */
  color:            var(--color-primary-950);  /* #002924 */
  --btn-spinner-color: var(--color-primary-950);
}

.btn--ghost:hover {
  background-color: var(--color-grey-500);     /* #F2F2F2 */
  border-color:     var(--color-grey-700);     /* #BFBFBF */
  color:            var(--color-primary-950);
}

.btn--ghost:active {
  background-color: var(--color-grey-700);     /* #BFBFBF */
  border-color:     var(--color-grey-700);
  color:            var(--color-text-primary); /* #333333 */
}

.btn--ghost:disabled,
.btn--ghost.is-disabled {
  background-color: transparent;
  border-color:     var(--color-grey-600);
  color:            var(--color-grey-700);
}

/* --------------------------------------------------------------------------
   SIZES
-------------------------------------------------------------------------- */

.btn--sm {
  padding:   var(--space-2) var(--space-6);
  font-size: var(--text-xxs-size);   /* 14px */
}

.btn--lg {
  padding:   var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--text-xs-size);    /* 16px — keeps height at 44px */
}

/* --------------------------------------------------------------------------
   FULL WIDTH
-------------------------------------------------------------------------- */

.btn--full {
  width:           100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   ICON
-------------------------------------------------------------------------- */

.btn__icon {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
  /* Paths set fill or stroke on the SVG; do not override here */
}

.btn--sm .btn__icon {
  width:  16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   LINK BUTTON (inline, no box)
-------------------------------------------------------------------------- */

.btn--link {
  padding:          0;
  background:       none;
  border:           none;
  border-radius:    0;
  color:            var(--color-text-link);
  font-weight:      var(--font-weight-medium);
  text-decoration:  underline;
}

.btn--link:hover {
  color: var(--color-text-link-hover);
}

.btn--link:disabled,
.btn--link.is-disabled {
  background: none;
  border:     none;
}

/* ==========================================================================
   COMPONENT / CARD
   BEM block: .card
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .card
       .card__header      ← optional teal header band
         .card__title
         .card__action    ← "Edit" link or close button
       .card__body        ← main content area
       .card__list        ← quote line items (screens 02, 06, 07)
       .card__row         ← label/value row inside body
         .card__row-label
         .card__row-value
         .card__row-group
         .card__row-name
         .card__row-name-note
         .card__row-sub
       .card__footer      ← optional footer with CTA
       .card__divider     ← horizontal rule between rows

   Modifiers:
     .card--flat         → no shadow
     .card--outlined     → border only, no shadow (screens 02, 06, 07)
     .card--detail       → policy key/value layout (screens 02, 06)
     .card--quote        → quote line-item list layout (screens 02, 06, 07)
     .card--teal-header  → coloured header band
     .card--highlight    → brand left border accent

   Row modifiers:
     .card__row--stacked → label above value
     .card__row--detail  → policy detail typography (screens 02, 06)
     .card__row--quote   → quote line item layout (screens 02, 06, 07)
     .card__row--total   → emphasised total row
     .card__row-sub--free → free-item sub-label (success colour)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.card {
  background:    var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-md);
  overflow:      hidden;
}

/* --------------------------------------------------------------------------
   Modifiers
-------------------------------------------------------------------------- */

.card--flat {
  box-shadow: none;
}

.card--outlined {
  box-shadow:  none;
  border:      1.5px solid var(--color-border);
}

.card--quote .card__list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.card--highlight {
  border-left: 4px solid var(--color-brand);
}

/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

.card__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-4) var(--space-6);
  background:      var(--color-white);
  border-bottom:   1px solid var(--color-border);
}

.card--teal-header .card__header {
  background: var(--gradient-header);
  border-bottom: none;
}

.card__title {
  font-size:   var(--text-sm-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  line-height: var(--text-sm-lh);
  margin:      0;
}

.card--teal-header .card__title {
  color: var(--color-white);
}

.card__action {
  font-size:   var(--text-xxs-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-link);
  cursor:      pointer;
  flex-shrink: 0;
  margin-left: var(--space-4);
  background:  none;
  border:      none;
  padding:     var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:  color var(--transition-fast),
               background-color var(--transition-fast);
}

.card__action:hover {
  background-color: var(--color-primary-500);
  color:            var(--color-primary-800);
  text-decoration:  none;
}

.card--teal-header .card__action {
  color: rgba(255, 255, 255, 0.85);
}

.card--teal-header .card__action:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Body
-------------------------------------------------------------------------- */

.card__body {
  padding: var(--space-2);
}

.card__body + .card__body {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Row (label + value pairs)
-------------------------------------------------------------------------- */

.card__row {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding-top:     var(--space-3);
  padding-bottom:  var(--space-3);
  padding-left:    var(--space-4);
  padding-right:   var(--space-4);
}

.card__row > * + * {
  margin-left: var(--space-4);
}

@supports (gap: 1rem) {
  .card__row {
    gap: var(--space-4);
  }

  .card__row > * + * {
    margin-left: 0;
  }
}

.card__row + .card__row {
  border-top: 1px solid var(--color-border);
}

/* Stacked variant — label above value (used on personal details screen) */
.card__row--stacked {
  flex-direction: column;
}

.card__row--stacked > * + * {
  margin-left:  0;
  margin-top:     var(--space-1);
}

@supports (gap: 1rem) {
  .card__row--stacked {
    gap: var(--space-1);
  }

  .card__row--stacked > * + * {
    margin-top: 0;
  }
}

.card__row-label {
  font-size:   var(--text-sm-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-secondary);
  flex-shrink: 0;
  min-width:   120px;
}

.card__row--stacked .card__row-label {
  min-width: unset;
}

.card__row-value {
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
  text-align:  right;
}

.card__row--stacked .card__row-value {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Divider
-------------------------------------------------------------------------- */

.card__divider {
  border:        none;
  border-top:    1px solid var(--color-border);
  margin-left:   var(--space-6);
  margin-right:  var(--space-6);
  margin-top:    0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------- */

.card__footer {
  padding:     var(--space-4) var(--space-6);
  background:  var(--color-grey-500);
  border-top:  1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Row — detail variant (policy key/value, screens 02 & 06)
-------------------------------------------------------------------------- */

.card--detail .card__body {
  padding-top:    var(--space-4);
  padding-bottom: var(--space-4);
  padding-left:   0;
  padding-right:  0;
}

.card__row--detail {
  padding: var(--space-4) var(--space-5);
  border-top: none;
}

.card__row--detail + .card__row--detail {
  border-top: none;
}

.card__row--detail .card__row-label {
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  flex:        1;
  min-width:   unset;
}

.card__row--detail .card__row-value {
  font-size:   var(--text-xxs-size);
  font-weight: var(--font-weight-regular);
  color:       var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Row — quote variant (renewal line items, screens 02, 06 & 07)
-------------------------------------------------------------------------- */

.card--quote .card__row--quote {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-4) var(--space-5);
  font-size:       var(--text-xs-size);
  color:           var(--color-text-primary);
  border-top:      none;
}

.card__row-group {
  flex:      1;
  min-width: 0;
}

.card__row-name {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  line-height: 1.3;
}

.card__row-name-note {
  font-style:  normal;
  font-weight: var(--font-weight-regular);
  color:       var(--color-text-secondary);
}

.card__row-sub {
  display:     block;
  font-size:   var(--text-xxxs-size);
  font-weight: var(--font-weight-regular);
  color:       var(--color-grey-800);
}

.card__row-sub--free {
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-orange-700);
}

.card__row--quote .card__row-value {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  text-align:  right;
}

.card__row--total {
  border-top:    2px solid var(--color-border-strong);
  border-bottom: none;
  padding-top:   var(--space-5);
  margin-top:    var(--space-1);
}

.card__row--total .card__row-name {
  font-size:   var(--text-h4-size);
  line-height: var(--text-h4-lh);
  font-weight: var(--font-weight-bold);
}

.card__row--total .card__row-value {
  font-size: var(--text-md-size);
}

/* ==========================================================================
   COMPONENT / CAROUSEL
   BEM block: .carousel
   Powered by: Splide.js
   ──────────────────────────────────────────────────────────────────────────
   We import Splide's base CSS and layer our brand-specific overrides here.
   Splide CDN: https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css
   ========================================================================== */

/* Override Splide pagination dots */
.splide__pagination__page {
  background:    var(--color-grey-600);
  border-radius: 50%;
  width:         8px;
  height:        8px;
  transition:    background-color var(--transition-fast),
                 transform        var(--transition-fast);
}

.splide__pagination__page.is-active {
  background:    var(--color-accent-orange-700);
  transform:     scale(1.3);
}

/* Override Splide arrows */
.splide__arrow {
  background:    var(--color-white);
  border:        1.5px solid var(--color-border);
  border-radius: 50%;
  box-shadow:    var(--shadow-sm);
  color:         var(--color-text-primary);
  transition:    border-color      var(--transition-fast),
                 background-color  var(--transition-fast);
}

.splide__arrow:hover {
  background:   var(--color-primary-500);
  border-color: var(--color-accent-orange-700);
}

.splide__arrow svg {
  fill: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Custom .carousel wrapper (used around <div class="splide">)
-------------------------------------------------------------------------- */

.carousel {
  position: relative;
  width:    100%;
}

.carousel__slide {
  padding-left:  var(--space-2);
  padding-right: var(--space-2);
}

/* ==========================================================================
   COMPONENT / CHECKBOX
   BEM block: .checkbox
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     <label class="checkbox">
       <input class="checkbox__input" type="checkbox">
       <span class="checkbox__box"></span>
       <span class="checkbox__label">Label text</span>
     </label>
   ========================================================================== */

.checkbox {
  display:     flex;
  align-items: flex-start;
  cursor:      pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.checkbox > * + * {
  margin-left: var(--space-3);
}

@supports (gap: 1rem) {
  .checkbox {
    gap: var(--space-3);
  }

  .checkbox > * + * {
    margin-left: 0;
  }
}

.checkbox__input {
  position:    absolute;
  opacity:     0;
  width:       0;
  height:      0;
}

.checkbox__box {
  width:           20px;
  height:          20px;
  flex-shrink:     0;
  border:          2px solid var(--color-border-strong);
  border-radius:   var(--radius-sm);
  background:      var(--color-white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color      var(--transition-fast),
                   background-color  var(--transition-fast);
  margin-top:      2px; /* Optical alignment with text */
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--color-brand);
  border-color:     var(--color-brand);
}

.checkbox__input:checked + .checkbox__box::after {
  content: '';
  display: block;
  width:   10px;
  height:  6px;
  border-left:   2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform:     rotate(-45deg) translateY(-1px) translateX(1px);
}

.checkbox:hover .checkbox__box {
  border-color: var(--color-brand);
}

.checkbox__input:focus + .checkbox__box,
.checkbox__input:focus-visible + .checkbox__box {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

.checkbox__input:disabled + .checkbox__box {
  background-color: var(--color-grey-500);
  border-color:     var(--color-grey-600);
  cursor:           not-allowed;
}

.checkbox__label {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-primary);
}

/* Error state (applied to parent .form-field.has-error) */
.form-field.has-error .checkbox__box {
  border-color: var(--color-error);
}

/* ==========================================================================
   COMPONENT / CONTACT PANEL
   Inline teal callout — same pattern as make-changes modal content (layer 25).
   ========================================================================== */

.contact-panel {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-12) var(--space-5);
  background:      var(--color-primary-500);
  border:          1px solid var(--color-brand-light);
  border-radius:   var(--radius-2xl);
  text-align:      center;
}

.contact-panel__title {
  margin:      0;
  font-size:   var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary-950);
}

.contact-panel__text {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
}

.contact-panel__phone {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  font-size:       var(--text-lg-size);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-text-primary);
  text-decoration: none;
}

.contact-panel__phone-icon {
  width: 30px;
  height: 30px;
}
/* ── Design System page overrides ─────────────────────────────── */
.ds-page {
  background: var(--color-grey-500);
  min-height: 100vh;
}

.ds-header {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.ds-header__title {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.ds-header__subtitle {
  font-size: var(--text-sm-size);
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.ds-nav {
  background: rgba(1,112,101,0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-nav__list {
  display: flex;
  list-style: none;
  padding: 0 var(--space-4);
  margin: 0;
  gap: var(--space-1);
}

.ds-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xxs-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.ds-nav__link:hover {
  color: var(--color-white);
}

.ds-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.ds-section {
  margin-bottom: var(--space-16);
}

.ds-section__title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-h3-lh);
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-brand);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-8);
}

.ds-section__subtitle {
  font-size: var(--text-md-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  margin-top: var(--space-6);
}

.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

.ds-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.ds-swatch__color {
  height: 64px;
}

.ds-swatch__info {
  padding: var(--space-2) var(--space-3);
}

.ds-swatch__name {
  font-size: var(--text-xxs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: block;
}

.ds-swatch__value {
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  color: var(--color-text-secondary);
}

.ds-type-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.ds-type-row:last-child {
  border-bottom: none;
}

.ds-type-meta {
  min-width: 180px;
  flex-shrink: 0;
}

.ds-type-meta-name {
  font-size: var(--text-xxs-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ds-type-meta-detail {
  font-size: var(--text-xxs-size);
  font-family: 'Courier New', monospace;
  color: var(--color-grey-700);
}

.ds-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.ds-space-bar {
  background: var(--color-primary-600);
  height: 24px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.ds-space-label {
  font-size: var(--text-xxs-size);
  font-family: 'Courier New', monospace;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ds-shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-6);
}

.ds-shadow-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.ds-shadow-card__label {
  font-size: var(--text-xxs-size);
  font-weight: var(--font-weight-medium);
  font-family: 'Courier New', monospace;
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.ds-example {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin: var(--space-6) 0;
}

.ds-example--dark {
  background: var(--color-primary-900);
}

.ds-example--grey {
  background: var(--color-grey-500);
}

.ds-example__label {
  font-size: var(--text-xxs-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-700);
  margin-bottom: var(--space-4);
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.ds-row--center {
  align-items: center;
}

.ds-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .ds-col-2 { grid-template-columns: 1fr; }
}

.ds-radius-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ds-radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ds-radius-box {
  width: 64px;
  height: 64px;
  background: var(--color-primary-600);
  border: 2px solid var(--color-primary-700);
}

.ds-radius-label {
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  color: var(--color-text-secondary);
  text-align: center;
}

.ds-radius-pill {
  width: 96px;
}

.ds-section__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.ds-section__desc--sm {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.ds-demo-box {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.ds-spec-note {
  font-size: var(--text-xxs-size);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: var(--space-3);
}

.ds-spec-note--inline {
  font-size: var(--text-xxs-size);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.ds-example--flush {
  padding: 0;
  overflow: hidden;
}

.ds-example--flush .site-header {
  position: relative;
}

.ds-example__label--light {
  color: rgba(255,255,255,0.5);
}

.ds-demo-narrow { max-width: 400px; }
.ds-card-demo   { max-width: 360px; }

.card.card--flat.ds-card-flat-demo {
  background: var(--color-grey-500);
}

.ds-text-secondary {
  color: var(--color-text-secondary);
  margin: 0;
}

.ds-tab-text {
  color: var(--color-text-secondary);
  margin: 0;
}

.ds-info-demo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--text-xs-size);
}

/* ==========================================================================
   COMPONENT / DRIVING HISTORY
   Claims & convictions panels — carousel cards, list meta, empty callout.
   ========================================================================== */

.history-section__intro {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
}

.history-list__meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  padding-top:    var(--space-3);
  padding-bottom: var(--space-3);
}

.history-list__count {
  margin:      0;
  font-size:   var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.history-list__swipe {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  margin:      0;
  font-size:   var(--text-xxxs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-accent-orange-700);
}

.history-list__swipe-text--scroll {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .history-list__swipe-text--touch {
    display: none;
  }

  .history-list__swipe-text--scroll {
    display: inline;
  }
}

.history-list__swipe-icon {
  width:  19px;
  height: 19px;
  color:  var(--color-accent-orange-700);
}

/* --------------------------------------------------------------------------
   History card — carousel slide (layers 23 / 011.2 / 013)
-------------------------------------------------------------------------- */

.history-card {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  padding:          var(--space-8) var(--space-5) var(--space-10);
  background:       var(--color-white);
  border:           1px solid var(--color-grey-500);
  border-radius:    var(--radius-2xl);
  box-shadow:       var(--shadow-lg);
}

.history-card__head {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.history-card__title {
  margin:      0;
  font-size:   var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.history-card__ref {
  margin:      0;
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color:       var(--color-grey-900);
}

.history-card__field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.history-card__label {
  font-size:   var(--text-sm-size);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.history-card__label--inline {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.history-card__value {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
}

.history-card__value--icon {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

.history-card__icon {
  flex-shrink: 0;
  color:       var(--color-brand-dark);
}

.history-card__icon--calendar {
  width:  20px;
  height: 18px;
}

.history-card__icon--user {
  width:  20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Carousel overrides inside driving history accordion
-------------------------------------------------------------------------- */

.history-carousel {
  margin-left:  calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}

/* Room for card box-shadow inside Splide’s overflow-hidden track */
.history-carousel .splide__track {
  padding-bottom: var(--space-4);
}

.history-carousel .splide__arrow {
  display: none;
}

.history-carousel .splide__pagination {
  position:   static;
  margin-top: var(--space-4);
  padding:    0;
  gap:        var(--space-3);
}

.history-carousel .splide__pagination__page {
  width:         22px;
  height:        22px;
  background:    var(--color-grey-600);
  opacity:       1;
  transform:     none;
}

.history-carousel .splide__pagination__page.is-active {
  background: var(--color-accent-orange-700);
  transform:  none;
}

.history-carousel .splide__slide {
  height:         auto;
  padding-left: var(--space-4);
}

.accordion__panel-inner .contact-panel {
  margin-top:    var(--space-2);
  margin-bottom: var(--space-2);
}

.accordion__panel-inner .history-section__intro + .history-list__meta,
.accordion__panel-inner .history-section__intro + .contact-panel {
  margin-top: var(--space-4);
}

.accordion__panel-inner .history-list__meta + .history-carousel {
  margin-top: var(--space-2);
}

.accordion__panel-inner .history-carousel + .accordion__confirm,
.accordion__panel-inner .contact-panel + .accordion__confirm {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Renewal summary — claims & convictions counts only (Figma 2573:29732)
-------------------------------------------------------------------------- */

.history-summary {
  display:        flex;
  flex-direction: column;
  padding-top:    var(--space-5);
  padding-bottom: var(--space-5);
}

.history-summary__item {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  padding:        var(--space-4);
}

.history-summary__item--bordered {
  border-bottom: 1px solid var(--color-grey-600);
}

.history-summary__label {
  margin:      0;
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.history-summary__value {
  margin:      0;
  font-size:   var(--text-base-size);
  line-height: var(--text-base-lh);
  color:       var(--color-grey-800);
}


/* ==========================================================================
   COMPONENT / FORM FIELD
   BEM block: .form-field
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .form-field
       .form-field__label      ← <label>
       .form-field__hint       ← helper text below label (optional)
       .form-field__control    ← wraps the <input>/<textarea>/<select>
         <input class="form-field__input">
       .form-field__feedback   ← validation message (hidden by default)
       .form-field__note       ← footnote / extra info (optional)

   States:
     .form-field.has-error    → red border, shows .form-field__feedback
     .form-field.is-valid     → green border
     .form-field__input:disabled → greyed out
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.form-field {
  display:        flex;
  flex-direction: column;
}

.form-field > * + * {
  margin-top: var(--space-2);
}

@supports (gap: 1rem) {
  .form-field {
    gap: var(--space-2);
  }

  .form-field > * + * {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Label
-------------------------------------------------------------------------- */

.form-field__label {
  font-size:      var(--text-h4-size);
  line-height:    var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text-primary);
  text-align:     center;
}

.form-field__label--required::after {
  content: ' *';
  color:   var(--color-error);
}

/* --------------------------------------------------------------------------
   Hint (below label, before input)
-------------------------------------------------------------------------- */

.form-field__hint {
  font-size:   var(--text-xxs-size);
  color:       var(--color-text-secondary);
  margin-top: calc(var(--space-1) * -1); /* Close gap between label and hint */
}

/* --------------------------------------------------------------------------
   Control wrapper
-------------------------------------------------------------------------- */

.form-field__control {
  position: relative;
}

/* --------------------------------------------------------------------------
   Input / Textarea
-------------------------------------------------------------------------- */

.form-field__input {
  display:          block;
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border:           1.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  font-family:      var(--font-family-base);
  font-size:        var(--text-xs-size);
  line-height:      var(--text-xs-lh);
  color:            var(--color-text-primary);
  transition:       border-color  var(--transition-fast),
                    box-shadow    var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance:       none;
       appearance:       none;
}

.form-field__input::-moz-placeholder {
  color: var(--color-grey-800);
}

.form-field__input::placeholder {
  color: var(--color-grey-800);
}

.form-field__input:hover {
  border-color: var(--color-grey-800);
}

.form-field__input:focus,
.form-field__input:focus-visible {
  outline:      none;
  border-color: var(--color-brand);
  box-shadow:   0 0 0 3px var(--color-primary-500);
}

.form-field__input:disabled {
  background-color: var(--color-grey-500);
  border-color:     var(--color-grey-600);
  color:            var(--color-text-disabled);
  cursor:           not-allowed;
}

/* Textarea specific */
textarea.form-field__input {
  resize:     vertical;
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   OTP / PIN input (verification code)
-------------------------------------------------------------------------- */

.form-field__input--otp {
  text-align:      center;
  font-size:       var(--text-lg-size);
  font-weight:     var(--font-weight-bold);
  letter-spacing:  0.2em;
}

/* --------------------------------------------------------------------------
   Validation states
-------------------------------------------------------------------------- */

/* Error */
.form-field.has-error .form-field__input {
  border-color: var(--color-error);
  box-shadow:   none;
}

.form-field.has-error .form-field__input:focus {
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

/* Valid */
.form-field.is-valid .form-field__input {
  border-color: var(--color-brand);
}

.form-field__error {
  color: var(--color-error);
  font-size: var(--text-xxxs-size);
  line-height: var(--text-xxxs-lh);
  margin: var(--space-1) auto 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Feedback message
-------------------------------------------------------------------------- */

.form-field__feedback {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-1);
  font-size:   var(--text-xxs-size);
  color:       var(--color-text-secondary);
  line-height: 1.4;
}

.form-field.has-error .form-field__feedback {
  color: var(--color-error);
}

.form-field.is-valid .form-field__feedback {
  color: var(--color-brand-dark);
}

.form-field__feedback-icon {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
  fill:        none;
  stroke:      currentColor;
  stroke-width: 2;
  margin-top:  1px;
}

/* --------------------------------------------------------------------------
   Note (footnote)
-------------------------------------------------------------------------- */

.form-field__note {
  font-size: var(--text-xxs-size);
  color:     var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Icon inside input (prefix/suffix)
-------------------------------------------------------------------------- */

.form-field__control--has-prefix .form-field__input {
  padding-left: var(--space-10);
}

.form-field__control--has-suffix .form-field__input {
  padding-right: var(--space-10);
}

.form-field__prefix,
.form-field__suffix {
  position:    absolute;
  top:         50%;
  transform:   translateY(-50%);
  width:       20px;
  height:      20px;
  color:       var(--color-text-secondary);
  pointer-events: none;
}

.form-field__prefix { left: var(--space-4); }
.form-field__suffix { right: var(--space-4); }

/* ==========================================================================
   COMPONENT / SITE HEADER
   BEM block: .site-header
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .site-header
       .site-header__logo-bar      ← teal gradient band with logo
         .site-header__logo-link
           .site-header__logo      ← <img> or <svg> logo
       .site-header__nav-bar       ← full-width background strip
         .site-header__nav-inner    ← centred content wrapper (back + progress)
         .site-header__back        ← back button (← icon)
         .site-header__progress    ← progress bar slot (see _progress-bar.css)

   States:
     .site-header.is-sticky        ← applies box-shadow when scrolled
     .site-header__back.is-hidden  ← hide back button on first screen
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.site-header {
  position:   -webkit-sticky;
  position:   sticky;
  top:        0;
  z-index:    var(--z-sticky);
  width:      100%;
  background: var(--color-white);
}

.site-header.is-sticky .site-header__nav-bar {
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Logo bar
   — teal gradient, centred logo
-------------------------------------------------------------------------- */

.site-header__logo-bar {
  background:      var(--gradient-header);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4) var(--space-6);
  min-height:      var(--header-logo-height);
}

.site-header__logo-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  text-decoration: none;
}

/* Inline SVG wordmark — height controlled here, width scales proportionally */
.site-header__wordmark {
  height:    32px;
  width:     auto;
  display:   block;
  flex-shrink: 0;
}

.site-header__logo-link:hover {
  text-decoration: none;
  opacity:         0.9;
}

.site-header__logo {
  height: 40px;
  width:  auto;
}

/* Fallback text logo (if image fails or not available) */
.site-header__logo-text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  color:          var(--color-white);
  text-decoration: none;
}

.site-header__logo-text-brand {
  font-size:      1.125rem;   /* 18px */
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height:    1;
  color:          var(--color-white);
}

.site-header__logo-text-sub {
  font-size:   0.5625rem;    /* 9px */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:       rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* The circular icon before the wordmark */
.site-header__logo-icon {
  width:  36px;
  height: 36px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Nav bar
   — white strip below logo bar, holds back button and progress indicator
-------------------------------------------------------------------------- */

.site-header__nav-bar {
  background: var(--color-page-bg);
  transition: box-shadow var(--transition-fast);
}

.site-header__nav-inner {
  display:         flex;
  align-items:     center;
  width:           100%;
  max-width:       var(--container-max);
  margin-left:  auto;
  margin-right: auto;
  padding:         0 var(--space-4);
  min-height:      var(--header-progress-height);
}

.site-header__nav-inner > * + * {
  margin-left: var(--space-4);
}

@supports (gap: 1rem) {
  .site-header__nav-inner {
    gap: var(--space-4);
  }

  .site-header__nav-inner > * + * {
    margin-left: 0;
  }
}

.site-header__nav-inner .progress-bar {
  flex:      1;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Back button
-------------------------------------------------------------------------- */

.site-header__back {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           32px;
  flex-shrink:      0;
  border:           none;
  background:       none;
  cursor:           pointer;
  border-radius:    var(--radius-pill);
  color:            var(--color-text-primary);
  transition:       background-color var(--transition-fast),
                    color            var(--transition-fast);
}

.site-header__back[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.site-header__back:hover {
  background-color: var(--color-grey-500);
}

.site-header__back:focus,
.site-header__back:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

.site-header__back.is-hidden {
  visibility: hidden;   /* Hidden but preserves space */
  pointer-events: none;
}

.site-header__back-icon {
  width:  20px;
  height: 20px;
  fill:   currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   Progress slot (the .progress-bar component lives inside here)
-------------------------------------------------------------------------- */

.site-header__progress {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------- */

/* Tablet+ — align progress bar with page content */
@media (min-width: 768px) {
  .site-header__logo-bar {
    min-height: 80px;
  }
  .site-header__logo {
    height: 48px;
  }
  .site-header__logo-text-brand {
    font-size: 1.25rem;
  }
  .site-header__nav-inner {
    max-width: var(--content-max);
    padding-left:  var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Desktop — centred content wrapper */
@media (min-width: 1200px) {
  .site-header__logo-bar {
    min-height: 88px;
  }
  .site-header__nav-inner {
    max-width: var(--content-max-lg);
    padding-left:  var(--space-12);
    padding-right: var(--space-12);
  }
}

/* ==========================================================================
   COMPONENT / INFO CHIP
   Figma: grey pill with label + 12px info icon (Cover Summary — Permitted Use)
   ========================================================================== */

.info-chip-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  margin:         0;
  padding:        0;
  list-style:     none;
}

.info-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         2px 10px;
  border:          none;
  border-radius:   var(--radius-pill);
  background:      var(--color-chip-bg);
  color:           var(--color-text-primary);
  font-family:     var(--font-family-base);
  font-size:       var(--text-xxs-size);
  line-height:     1.2;
  font-weight:     var(--font-weight-regular);
  cursor:          pointer;
  text-align:      left;
  transition:      background-color var(--transition-fast);
}

.info-chip:hover {
  background-color: var(--color-grey-600);
}

.info-chip:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

.info-chip__icon {
  width:       12px;
  height:      12px;
  flex-shrink: 0;
  fill:        currentColor;
  color:       var(--color-brand);
}

/* ==========================================================================
   COMPONENT / INTRO SCREEN
   BEM blocks: .intro-hero · .policy-pill · .intro-steps · .intro-disclaimer
   ──────────────────────────────────────────────────────────────────────────
   Used on screen 00 (introduction.html).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro hero — full-width branded header section
-------------------------------------------------------------------------- */

.intro-hero {
  background:    var(--gradient-header);
  padding:       var(--space-12) var(--space-6) var(--space-10);
  text-align:    center;
}

.intro-hero__eyebrow {
  font-size:      var(--text-xxs-size);
  font-weight:    var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.7);
  margin-bottom:  var(--space-3);
}

.intro-hero__title {
  font-size:      var(--text-h2-size);
  font-weight:    var(--font-weight-bold);
  line-height:    var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  color:          var(--color-white);
  margin-bottom:  var(--space-4);
}

.intro-hero__subtitle {
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color:       rgba(255,255,255,0.85);
  margin:      0 auto;
  max-width:   30ch;
}

/* --------------------------------------------------------------------------
   Policy pill — reference number displayed in the hero
-------------------------------------------------------------------------- */

.policy-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-4);
  background:     rgba(255,255,255,0.15);
  border:         1px solid rgba(255,255,255,0.3);
  border-radius:  var(--radius-pill);
  font-size:      var(--text-xxs-size);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-white);
  letter-spacing: 0.02em;
  margin-bottom:  var(--space-6);
}

.policy-pill__dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--color-white);
  flex-shrink:   0;
}

/* --------------------------------------------------------------------------
   Intro steps — numbered list of renewal process steps
-------------------------------------------------------------------------- */

.intro-steps {
  list-style: none;
  margin:     var(--space-5) 0 0;
  padding:    0;
}

.intro-step {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-4);
  padding:       var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.intro-step:last-child {
  border-bottom: none;
}

.intro-step__number {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  flex-shrink:     0;
  border-radius:   50%;
  background:      var(--color-brand-lightest);
  border:          1.5px solid var(--color-brand-light);
  font-size:       var(--text-xs-size);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-brand-dark);
  line-height:     1;
}

.intro-step__content {
  flex:        1;
  padding-top: 4px;
}

.intro-step__title {
  font-size:     var(--text-xs-size);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.intro-step__desc {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xxs-lh);
  color:       var(--color-text-secondary);
  margin:      0;
}

/* --------------------------------------------------------------------------
   Policy reference — centred badge above the steps list
-------------------------------------------------------------------------- */

.intro-policy-ref {
  text-align:  center;
  padding-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Disclaimer — small-print text at the foot of the intro screen
-------------------------------------------------------------------------- */

.intro-disclaimer {
  font-size:   var(--text-xxs-size);
  line-height: 1.6;
  color:       var(--color-text-secondary);
  text-align:  center;
  margin:      0;
  padding:     0 var(--space-2);
}

/* --------------------------------------------------------------------------
   Intro splash — full-page teal splash screen (screen 00)
   Replaces the normal o-page layout for the brand entry screen.
-------------------------------------------------------------------------- */

/* When .site-header sits inside .intro-splash, let the splash
   gradient show through rather than painting a second gradient. */
.intro-splash .site-header {
  background: transparent;
  box-shadow: none;
}

.intro-splash {
  min-height:      100vh;
  min-height:      100dvh;
  background:      linear-gradient(90deg, rgba(1,112,101,0.4) 0%, rgba(1,112,101,0) 100%),
                   linear-gradient(90.72deg, rgb(4,191,173) 0%, rgb(0,174,189) 101.1%);
  display:         flex;
  flex-direction:  column;
}

.intro-splash__logo-bar {
  display:     flex;
  align-items: center;
  padding:     var(--space-4) var(--space-6);
  height:      64px;
  flex-shrink: 0;
}

.intro-splash__logo-link {
  display: flex;
  outline: none;
}

.intro-splash__logo-link:focus-visible {
  outline:        2px solid rgba(255,255,255,0.7);
  outline-offset: 4px;
  border-radius:  var(--radius-xs);
}

.intro-splash__wordmark {
  height: 36px;
  width:  auto;
}

.intro-splash__body {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-top:     var(--space-10);
  padding-bottom:  var(--space-12);
  gap:             var(--space-6);
}

.intro-splash__body .o-container {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-6);
}

.intro-splash__illustration {
  width:         188px;
  height:        188px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
}

.intro-splash__title {
  font-size:      52px;
  font-weight:    var(--font-weight-bold);
  line-height:    1.08;
  letter-spacing: -1.04px;
  color:          var(--color-white);
  margin:         0;
  max-width:      14ch;
}

.intro-splash__subtitle {
  font-size:   var(--text-sm-size);
  line-height: 1.5;
  color:       #f8f8f8;
  max-width:   332px;
  margin:      0;
}

.intro-splash__cta {
  margin-top: var(--space-2);
  width:      100%;
}

/* ==========================================================================
   COMPONENT / MODAL
   BEM block: .modal
   Powered by: MicroModal.js (https://micromodal.vercel.app/)
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .modal                       ← <div> wrapper (aria-hidden by default)
       .modal__overlay            ← darkened backdrop (click to close)
         .modal__container        ← white box
           .modal__header
             .modal__title
             .modal__close        ← × button
           .modal__content
           .modal__footer         ← optional action buttons

   States:
     .modal.is-open               → JS-toggled by MicroModal
     body.has-modal-open          → scroll lock on <body>

   MicroModal adds/removes aria-hidden and triggers .is-open class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block + Overlay
-------------------------------------------------------------------------- */

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
  position:        fixed;
  top:             0;
  right:           0;
  bottom:          0;
  left:            0;
  background:      rgba(1, 112, 101, 0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         var(--z-modal);
  padding:         var(--space-4);
}

/* --------------------------------------------------------------------------
   Container
-------------------------------------------------------------------------- */

.modal__container {
  background:    var(--color-white);
  border-radius: var(--radius-xl);
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  max-height:    90dvh;
  overflow-y:    auto;
  position:      relative;
  animation:     modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

.modal__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-4) var(--space-6) var(--space-2);
}

.modal__title {
  font-size:   var(--text-sm-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-sm-lh);
  color:       var(--color-text-primary);
  margin:      0;
}

.modal__title--lg {
  font-size:      28px;
  line-height:    32px;
  letter-spacing: -0.56px;
}

.modal__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  flex-shrink:     0;
  border:          none;
  background:      none;
  border-radius:   var(--radius-pill);
  cursor:          pointer;
  color:           var(--color-text-secondary);
  transition:      background-color var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--color-grey-500);
}

.modal__close:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

.modal__close-icon {
  width:  20px;
  height: 20px;
  fill:   none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.modal__header--center {
  position:        relative;
  justify-content: center;
}

.modal__header--center .modal__title {
  width:          100%;
  text-align:     center;
  padding-left:  40px;
  padding-right: 40px;
}

.modal__header--center .modal__close {
  position: absolute;
  top:      var(--space-4);
  right:    var(--space-6);
}

/* --------------------------------------------------------------------------
   Content
-------------------------------------------------------------------------- */

.modal__content {
  padding:        var(--space-2) var(--space-6) var(--space-8);
  font-size:      var(--text-xs-size);
  line-height:    var(--text-xs-lh);
  color:          var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------- */

.modal__footer {
  padding:       var(--space-4) var(--space-6) var(--space-6);
  border-top:    1px solid var(--color-border);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}

@media (min-width: 480px) {
  .modal__footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Make Changes call-out (used inside .modal__content)
-------------------------------------------------------------------------- */

.make-changes__intro {
  font-size:     var(--text-sm-size);
  line-height:   var(--text-sm-lh);
  color:         var(--color-text-primary);
  text-align:    center;
  margin-bottom: var(--space-5);
}

.make-changes__phone {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  font-size:       var(--text-lg-size);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-text-primary);
  text-decoration: none;
  margin-bottom:   var(--space-5);
}

.make-changes__phone:hover,
.make-changes__phone:focus {
  color: var(--color-brand-dark);
  text-decoration: none;
}

.make-changes__phone:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 10px;
  text-decoration: none;
}

.make-changes__phone-icon {
  flex-shrink: 0;
  fill:        var(--color-brand);
}

.make-changes__hours {
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  color:       var(--color-text-primary);
  text-align:  center;
  margin:      0;
}

/* --------------------------------------------------------------------------
   PDF viewer modal (Document Review — screen 08)
   Fills the viewport inside the overlay padding — modal, not browser fullscreen.
-------------------------------------------------------------------------- */

.modal--pdf .modal__overlay {
  align-items:          stretch;
  padding:              var(--space-4);
  overscroll-behavior:  none;   /* stop touch-scroll bleeding through to the page */
  touch-action:         none;   /* prevent backdrop scroll on mobile */
}

.modal__container--pdf {
  width:          100%;
  max-width:      none;
  max-height:     none;
  height:         100%;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.modal__content--pdf {
  padding:        0 var(--space-4) var(--space-3);
  flex:           1;
  min-height:     0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  position:       relative; /* Allow absolute positioning of mobile overlay */
}

.pdf-viewer__fallback {
  margin:      0 var(--space-2);
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
}

.pdf-viewer__fallback a {
  color: var(--color-text-link);
}

.pdf-viewer__frame {
  width:      100%;
  height:     auto;
  border:     0;
  display:    block;
  flex:       1;
  min-height: 0;
  background: var(--color-grey-500);
}

/* PDF.js Canvas Container (for Android and browsers without inline PDF support) */
.pdf-viewer__pdfjs-container {
  width:          100%;
  display:        flex;
  flex-direction: column;
  flex:           1;
  min-height:     0;
  overflow-y:     auto;   /* canvas scrolls here — never overflows into footer */
  background:     var(--color-grey-500);
}

.pdf-viewer__canvas {
  display:    block;
  max-width:  100%;
  height:     auto;
  margin:     0 auto;
  background: white;
}

/* Navigation bar (Prev / Page X of Y / Next) */
.pdf-viewer__controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  padding:         var(--space-3);
  background:      var(--color-grey-100);
  border-top:      1px solid var(--color-border);
  flex-shrink:     0;
}

/* When the controls live inside the modal footer the border-top is handled
   by the footer itself, so we suppress the duplicate on the controls. */
.pdf-viewer__controls--footer {
  border-top: none;
}

.pdf-viewer__page-info {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  min-width:   120px;
  text-align:  center;
}

/* Footer: stacks nav-row + action-row vertically, no outer padding
   (each child row owns its own padding).                           */
.modal__footer--pdf {
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  border-top:     1px solid var(--color-border);
  padding:        0;
  gap:            0;
}

/* Wrapper for the Download / Open-in-new-tab / ghost buttons */
.pdf-viewer__footer-action {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding:        var(--space-3) var(--space-4);
}

/* PDF Viewer Mobile Optimizations */
.pdf-viewer__fallback-content {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-6) var(--space-4);
  min-height:      300px;
  background:      var(--color-grey-900);
  border-radius:   var(--radius-md);
}

/* Mobile overlay that appears over the PDF iframe */
.pdf-viewer__mobile-overlay {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%);
  z-index:         10;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-6) var(--space-4);
  background:      white;
  border-radius:   var(--radius-lg);
  box-shadow:      0 10px 40px rgba(0, 0, 0, 0.15);
  max-width:       90%;
  width:           auto;
  min-width:       280px;
}

/* Full-height overlay when PDF can't be rendered (Android) */
.pdf-viewer__mobile-overlay--full {
  position:   static;
  transform:  none;
  max-width:  100%;
  width:      100%;
  min-height: 400px;
  box-shadow: none;
  border:     1px solid var(--color-border);
}

.pdf-viewer__pdf-icon {
  width:         60px;
  height:        60px;
  color:         var(--color-grey-100);
  margin-bottom: var(--space-3);
}

.pdf-viewer__filename {
  font-size:     var(--text-sm-size);
  line-height:   var(--text-sm-lh);
  font-weight:   600;
  color:         var(--color-grey-900);
  margin-bottom: var(--space-4);
  word-break:    break-word;
  max-width:     100%;
  padding:       0 var(--space-2);
}

.pdf-viewer__download-btn {
  margin-top: var(--space-2);
}

.modal__container--pdf-mobile .pdf-viewer__frame {
  /* On mobile, reduce iframe height as it usually shows a placeholder */
  min-height: 200px;
}

/* ==========================================================================
   COMPONENT / OPTIONAL COVER
   Optional extras panel — info callout + add-on rows with toggles.
   ========================================================================== */

.optional-cover {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.optional-cover__intro {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
}

.optional-cover__item {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.optional-cover__item-head {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
  margin-top:    var(--space-4);
  margin-bottom: var(--space-4);
}

.optional-cover__icon-wrap {
  flex-shrink: 0;
}

.optional-cover__icon {
  display: block;
  width:   30px;
  height:  30px;
  color:   var(--color-brand-dark);
}

.optional-cover__item-summary {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.optional-cover__item-title {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.optional-cover__item-name {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.optional-cover__item-price-line {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-2);
  margin:          0;
  font-size:       var(--text-xs-size);
  line-height:     var(--text-xs-lh);
  color:           var(--color-grey-900);
}

.optional-cover__item-subtitle {
  flex: 1;
  min-width: 0;
}

.optional-cover__item-price {
  font-weight: var(--font-weight-bold);
}

.optional-cover__desc {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
}

.optional-cover__toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

.optional-cover__toggle-label {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-grey-900);
  font-weight: var(--font-weight-bold);
}

.optional-cover__total {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding-top:    var(--space-4);
  padding-bottom: var(--space-4);
  border-top:      1px solid var(--color-border);
}

.optional-cover__total-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.optional-cover__total-title {
  margin: 0;
}

.optional-cover__total .card__row-sub {
  margin-top: 0;
}

.optional-cover--summary .optional-cover__item-head {
  margin-top:    0;
  margin-bottom: 0;
}

/* ==========================================================================
   COMPONENT / PROGRESS BAR
   BEM block: .progress-bar
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .progress-bar
       .progress-bar__track      ← grey background rail
         .progress-bar__fill     ← teal filled portion (width set via inline style)
       .progress-bar__label      ← "Step 2 of 6" text (optional, sr-only by default)

   Usage:
     <div class="progress-bar" role="progressbar"
          aria-valuenow="2" aria-valuemin="1" aria-valuemax="6"
          aria-label="Step 2 of 6">
       <div class="progress-bar__track">
         <div class="progress-bar__fill" style="width: 33%"></div>
       </div>
       <span class="progress-bar__label sr-only">Step 2 of 6</span>
     </div>

   States:
     .progress-bar__fill.is-complete → 100% width + success colour
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.progress-bar {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Track
-------------------------------------------------------------------------- */

.progress-bar__track {
  width:            100%;
  height:           4px;
  background-color: var(--color-grey-600);
  border-radius:    var(--radius-pill);
  overflow:         hidden;
}

/* --------------------------------------------------------------------------
   Fill
   Width is set via inline style: style="width: 33%"
   Width is driven by the native <progress> value attribute (set per screen).
-------------------------------------------------------------------------- */

.progress-bar__fill {
  height:           100%;
  background-color: var(--color-brand);
  border-radius:    var(--radius-pill);
  transition:       width var(--transition-slow);
  will-change:      width;
}

.progress-bar__fill.is-complete {
  background-color: var(--color-brand);
  width:            100% !important;
}

/* --------------------------------------------------------------------------
   Label (visible version — used below the track if needed)
-------------------------------------------------------------------------- */

.progress-bar__label {
  display:         block;
  font-size:       var(--text-xxs-size);
  color:           var(--color-text-secondary);
  text-align:      right;
  margin-top:      var(--space-1);
}

/* --------------------------------------------------------------------------
   Step counter variant (e.g. "2 / 6" displayed inline)
   Used: .progress-bar--with-steps
-------------------------------------------------------------------------- */

.progress-bar--with-steps {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.progress-bar--with-steps .progress-bar__track {
  flex: 1;
}

.progress-bar--with-steps .progress-bar__step-count {
  font-size:   var(--text-xxs-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Native <progress> element
   Used instead of the div/role=progressbar pattern.
   Cross-browser styling requires vendor prefixes.

   Usage:
     <progress class="progress-bar" value="4" max="8"
               aria-label="Step 4 of 8"></progress>
-------------------------------------------------------------------------- */

progress.progress-bar {
  -webkit-appearance: none;
          -moz-appearance: none;
       appearance: none;
  width:         100%;
  height:        8px;
  border:        none;
  border-radius: var(--radius-pill);
  background:    var(--color-grey-600);   /* Firefox fills the track here */
  display:       block;
}

/* WebKit/Blink (Chrome, Safari, Edge) — track */
progress.progress-bar::-webkit-progress-bar {
  background:    var(--color-grey-600);
  border-radius: var(--radius-pill);
}

/* WebKit/Blink — filled value */
progress.progress-bar::-webkit-progress-value {
  background:    var(--color-brand);
  border-radius: var(--radius-pill);
  -webkit-transition:    width var(--transition-slow);
  transition:    width var(--transition-slow);
}

/* Firefox — filled value */
progress.progress-bar::-moz-progress-bar {
  background:    var(--color-brand);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   COMPONENT / QUOTE SCREEN
   BEM blocks: .info-btn · .page-actions
   ──────────────────────────────────────────────────────────────────────────
   Screen-specific helpers for renewal quote flows (screens 02, 06 & 07).
   Card shells and row layouts live in _card.css (.card, .card--quote,
   .card--detail, .card__row--quote, .card__row--detail).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Info button — ⓘ icon that opens an info modal
-------------------------------------------------------------------------- */

.info-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           12px;
  height:          12px;
  padding:         0;
  border:          none;
  background:      none;
  cursor:          pointer;
  color:           var(--color-brand);
  flex-shrink:     0;
  vertical-align:  middle;
  transition:      color var(--transition-fast);
}

.info-btn svg {
  width:  18px;
  height: 18px;
}

.info-btn:hover {
  color: var(--color-brand-dark);
}

.info-btn:focus,
.info-btn:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius:  50%;
}

/* --------------------------------------------------------------------------
   Page actions — CTA button stack at the foot of the screen
-------------------------------------------------------------------------- */

.page-actions {
  display:        flex;
  flex-direction: column;
  padding-top:    var(--space-2);
}

.page-actions > * + * {
  margin-top: var(--space-3);
}

@supports (gap: 1rem) {
  .page-actions {
    gap: var(--space-3);
  }

  .page-actions > * + * {
    margin-top: 0;
  }
}

/* ==========================================================================
   COMPONENT / RADIO
   BEM block: .radio
   Same pattern as .checkbox but circular.
   ========================================================================== */

.radio {
  display:     flex;
  align-items: flex-start;
  cursor:      pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.radio > * + * {
  margin-left: var(--space-3);
}

@supports (gap: 1rem) {
  .radio {
    gap: var(--space-3);
  }

  .radio > * + * {
    margin-left: 0;
  }
}

.radio__input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.radio__circle {
  width:           20px;
  height:          20px;
  flex-shrink:     0;
  border:          2px solid var(--color-border-strong);
  border-radius:   50%;
  background:      var(--color-white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      border-color      var(--transition-fast),
                   background-color  var(--transition-fast);
  margin-top:      2px;
}

.radio__input:checked + .radio__circle {
  border-color: var(--color-brand);
}

.radio__input:checked + .radio__circle::after {
  content:          '';
  display:          block;
  width:            8px;
  height:           8px;
  border-radius:    50%;
  background-color: var(--color-brand);
}

.radio:hover .radio__circle {
  border-color: var(--color-brand);
}

.radio__input:focus + .radio__circle,
.radio__input:focus-visible + .radio__circle {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

.radio__input:disabled + .radio__circle {
  background-color: var(--color-grey-500);
  border-color:     var(--color-grey-600);
}

.radio__label {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-primary);
}

/* Radio card variant — full-width clickable tile */
.radio-card {
  position:  relative;
  display:   block;
  padding:   var(--space-4) var(--space-5);
  border:    1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor:    pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.radio-card:hover {
  border-color: var(--color-brand);
  background:   var(--color-brand-lightest);
}

.radio-card:has(.radio__input:checked),
.radio-card.is-checked {
  border-color:     var(--color-brand);
  background-color: var(--color-brand-lightest);
  box-shadow:       0 0 0 1px var(--color-brand);
}

/* Card inner layout */
.radio-card__inner {
  display:        flex;
  flex-direction: column;
}

.radio-card__inner > * + * {
  margin-top: var(--space-1);
}

@supports (gap: 1rem) {
  .radio-card__inner {
    gap: var(--space-1);
  }

  .radio-card__inner > * + * {
    margin-top: 0;
  }
}

.radio-card__title {
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  line-height: 1.3;
}

.radio-card__description {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xxs-lh);
  color:       var(--color-text-secondary);
}

.radio-card__price {
  font-size:   var(--text-xs-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-brand-dark);
  margin-top:  var(--space-2);
}

.radio-card:has(.radio__input:checked) .radio-card__title,
.radio-card.is-checked .radio-card__title {
  color: var(--color-brand-darker);
}

.radio-card:has(.radio__input:checked) .radio-card__price,
.radio-card.is-checked .radio-card__price {
  color: var(--color-brand-dark);
}

/* ==========================================================================
   COMPONENT / SCREEN-LEVEL PATTERNS
   Patterns used specifically across journey screens.
   Keeps screen HTML free of inline styles.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGE INTRO — title + subtitle block at the top of each screen
-------------------------------------------------------------------------- */

.page-intro {
  margin-bottom: var(--space-2);
}
.page-intro h1,
.page-intro h2 {
  margin-bottom: var(--space-2);
}

.page-intro p {
  margin: 0;
}

.page-subtitle {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      0;
}

.page-subtitle + .page-subtitle {
  margin-top: var(--space-sm);
}


/* --------------------------------------------------------------------------
   PAGE CONTENT — standard screen body padding
-------------------------------------------------------------------------- */

.page-content {
  padding-top:    var(--space-8);
  padding-bottom: var(--space-12);
}

.page-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}


/* --------------------------------------------------------------------------
   SUMMARY PANEL — grouped read-only sections (Renewal Summary accordion)
-------------------------------------------------------------------------- */

.summary-panel {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
}

.summary-panel__block {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.summary-panel__title {
  margin:      0;
  font-size:   var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}



/* --------------------------------------------------------------------------
   RENEWAL SUMMARY — nested content without inner card outlines
-------------------------------------------------------------------------- */

.renewal-summary .card {
  box-shadow: none;
  background: transparent;
}

.renewal-summary .card--outlined {
  border: none;
}

.renewal-summary .terms-card {
  border: none;
  background: transparent;
  padding: 0;
}

.renewal-summary .history-card {
  border: none;
  box-shadow: none;
}


/* The teal dot tooltip trigger (filled circle variant) */
.tooltip__trigger--dot {
  width:            12px;
  height:           12px;
  border-radius:    50%;
  background:       var(--color-brand);
  border:           none;
  cursor:           pointer;
  flex-shrink:      0;
  transition:       background-color var(--transition-fast),
                    transform        var(--transition-fast);
}

.tooltip__trigger--dot:hover {
  background:  var(--color-brand-dark);
  transform:   scale(1.2);
}

/* Excess badge inside tooltip */
.tooltip__badge {
  display:          inline-block;
  background:       var(--color-primary-600);
  color:            var(--color-primary-900);
  font-size:        var(--text-xxs-size);
  font-weight:      var(--font-weight-bold);
  padding:          var(--space-1) var(--space-3);
  border-radius:    var(--radius-pill);
  margin-bottom:    var(--space-2);
}


/* --------------------------------------------------------------------------
   DECLARATION ITEM — checklist rows in Document Review
-------------------------------------------------------------------------- */

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

.declaration-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-4);
  padding-top:    var(--space-4);
  padding-bottom: var(--space-4);
}

.declaration-item + .declaration-item {
  border-top: 1px solid var(--color-border);
}

.declaration-item__icon {
  flex-shrink: 0;
  width:       24px;
  height:      24px;
  margin-top:  1px;
  color:       var(--color-brand);
}

.declaration-item__icon svg {
  width:  24px;
  height: 24px;
}

.declaration-item__text {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      0;
}

/* Inline text in declaration item (not a link) */
.declaration-item span {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-primary);
}

/* Link variant inside declaration item */
.declaration-item__link {
  font-size:       var(--text-xs-size);
  line-height:     var(--text-xs-lh);
  color:           var(--color-text-link);
  font-weight:     var(--font-weight-medium);
  text-decoration: underline;
}

.declaration-item__link:hover {
  color: var(--color-text-link-hover);
}


/* --------------------------------------------------------------------------
   DOC STEP — the collapsible step sections in Document Review
-------------------------------------------------------------------------- */

.doc-step {
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  background:    var(--color-white);
  box-shadow:    var(--shadow-sm);
  transition:    border-color var(--transition-fast);
}

.doc-step.is-complete {
  border-color: var(--color-brand);
}

.doc-step__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  padding:     var(--space-4) var(--space-5);
  cursor:      pointer;
  background:  var(--color-white);
  border:      none;
  width:       100%;
  text-align:  left;
  transition:  background-color var(--transition-fast);
}

.doc-step__header:hover {
  background: var(--color-grey-500);
}

.doc-step.is-complete .doc-step__header {
  background: var(--color-primary-500);
}

.doc-step__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--radius-md);
  background:      var(--color-primary-600);
  flex-shrink:     0;
  color:           var(--color-primary-900);
}

.doc-step.is-complete .doc-step__icon {
  background: var(--color-brand);
  color:      var(--color-white);
}

.doc-step__title {
  flex:        1;
  font-size:   var(--text-sm-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: 1.3;
}

.doc-step__chevron {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
  fill:       none;
  stroke:     var(--color-text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-base);
}

.doc-step.is-open .doc-step__chevron {
  transform: rotate(180deg);
}

.doc-step__body {
  border-top: 1px solid var(--color-border);
  padding:    var(--space-5) var(--space-5) var(--space-6);
}

/* Document list items in Document Review */
.doc-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.doc-item + .doc-item {
  border-top: 1px solid var(--color-border);
}

.doc-item__link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding-top:    var(--space-4);
  padding-bottom: var(--space-4);
  width:           100%;
  border:          none;
  background:      none;
  font:            inherit;
  text-align:      left;
  cursor:          pointer;
  color:           var(--color-text-primary);
  text-decoration: none;
}

.doc-item__link:hover {
  text-decoration: none;
}

.doc-item__link:hover .doc-item__name {
  color: var(--color-brand-dark);
}

.doc-item__icon {
  flex-shrink: 0;
  color:       var(--color-brand);
  width:       22px;
  height:      28px;
}

.doc-item__icon--pdf {
  color: var(--color-primary-800);
}

.doc-item__icon svg {
  width:  22px;
  height: 28px;
}

.doc-item__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.doc-item__name {
  font-size:   var(--text-sm-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
  margin:      0;
  transition: color var(--transition-fast);
}

.doc-item__action {
  font-size:   var(--text-xs-size);
  color:       var(--color-text-link);
  font-weight: var(--font-weight-medium);
}

/* Step body intro text */
.doc-step__body-intro {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      0 0 var(--space-4);
}

/* Warning line (orange text) */
.doc-step__warning {
  font-size:   var(--text-xxs-size);
  color:       var(--color-warning);
  font-weight: var(--font-weight-medium);
  margin:      var(--space-3) 0 0;
}


/* --------------------------------------------------------------------------
   CONFIRMATION PAGE — Figma Confirmation layer (screen 09)
-------------------------------------------------------------------------- */

.confirmation-page {
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.confirmation-page__backdrop {
  flex:            1;
  background:      var(--gradient-confirmation);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  padding-top:    var(--space-6);
  padding-bottom: var(--space-10);
  padding-left:   var(--space-6);
  padding-right:  var(--space-6);
}

.confirmation-page__backdrop .o-container {
  width:     100%;
  max-width: 570px;
}

.confirmation-page__panel {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-6);
  width:           100%;
  padding:         var(--space-5);
  background:      var(--color-white);
  border-radius:   10px;
  box-shadow:      0 4px 2px rgba(0, 0, 0, 0.25);
  text-align:      center;
}

.confirmation-page__illustration {
  width:         188px;
  height:        188px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
}

.confirmation-page__illustration img {
  display:    block;
  width:      100%;
  height:     100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.confirmation-page__heading {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  width:          100%;
}

.confirmation-page__eyebrow {
  margin:      0;
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: var(--font-weight-regular);
  color:       var(--color-black);
}

.confirmation-page__title {
  margin:         0;
  font-size:      var(--text-h3-desktop-size);
  font-weight:    var(--font-weight-bold);
  line-height:    var(--text-h3-desktop-lh);
  letter-spacing: -0.02em;
  color:          var(--color-black);
}

.confirmation-page__lead {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  font-weight: var(--font-weight-regular);
  color:       var(--color-black);
}

.confirmation-page__details {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-10);
  width:          100%;
  font-size:      var(--text-xxs-size);
  line-height:    1.2;
  color:          var(--color-black);
}

.confirmation-page__details p {
  margin: 0;
  font-size: var(--text-xxs-size);
  line-height: var(--text-xxxs-lh);
}

.confirmation-page__details strong {
  font-weight: var(--font-weight-bold);
}

.confirmation-page__phone {
  color:           inherit;
  font-weight:     var(--font-weight-bold);
  text-decoration: none;
}

.confirmation-page__phone:hover,
.confirmation-page__phone:focus-visible {
  color:           var(--color-text-link);
  text-decoration: underline;
}

.confirmation-page__cta {
  width: 100%;
}


/* --------------------------------------------------------------------------
   VERIFY STATES — code entry section shown after Send Code
-------------------------------------------------------------------------- */

/* Tighten the gap when code section follows the Send button directly */
.verify-code-section {
  margin-top: var(--space-5);
}

/* Error state on the code input */
.verify-code-section.is-error .form-field__input {
  border-color: var(--color-border-error);
}

.verify-status {
  display:         flex;
  align-items:     center;
  justify-content: center; /* centred by default */
  gap:             var(--space-2);
  font-size:       var(--text-xs-size);
  font-weight:     var(--font-weight-bold);
  margin-top:      var(--space-2);
}

.verify-status--success {
  color: var(--color-success-800);
}

.verify-status--error {
  color: var(--color-error);
}


/* --------------------------------------------------------------------------
   FOOTER HELP — "Having trouble? Call us on…" footer row
-------------------------------------------------------------------------- */

.footer-help {
  text-align:  center;
  font-size:   var(--text-xxxs-size);
  line-height: var(--text-xxxs-lh);
  color:       var(--color-text-secondary);
  padding-top: var(--space-4);
  margin-left:  auto;
  margin-right: auto;
}

.footer-help a {
  color: var(--color-text-link);
}

.footer-help a:hover {
  color: var(--color-text-link-hover);
}


/* --------------------------------------------------------------------------
   DOCUMENT REVIEW — screen 08 patterns
-------------------------------------------------------------------------- */

.doc-review__intro {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      0 0 var(--space-4);
}

.doc-review__note {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      var(--space-4) 0 0;
}

.doc-review__payment {
  font-size:   var(--text-xs-size);
  line-height: var(--text-sm-lh);
  color:       var(--color-text-secondary);
  margin-top:  var(--space-4);
}

.doc-review__payment p {
  margin: var(--space-6) 0 0;
}

.doc-review__warning {
  font-size:   var(--text-xs-size);
  /* color:       var(--color-warning); */
  font-weight: var(--font-weight-bold);
  margin:      var(--space-2) 0 0;
}


/* --------------------------------------------------------------------------
   DECLARATION CONFIRM — checkbox confirmation block
-------------------------------------------------------------------------- */

.declaration-confirm {
  display:       flex;
  align-items:   flex-start;
  padding:       var(--space-4);
  background:    var(--color-grey-400);
  border-radius: var(--radius-lg);
  outline:       2px solid var(--color-brand);
  margin-top:    var(--space-4);
  margin-bottom: var(--space-4);
}

.declaration-confirm__label {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  cursor:      pointer;
  width:       100%;
}

.declaration-confirm__input {
  position: absolute;
  opacity:  0;
  width:    1px;
  height:   1px;
}

.declaration-confirm__marker {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  min-width:       20px;
  border-radius:   var(--radius-sm);
  border:          2px solid var(--color-brand);
  background:      var(--color-white);
  transition:      background-color var(--transition-fast), border-color var(--transition-fast);
  margin-top:      1px;
}

.declaration-confirm.is-checked {
  background:      var(--color-primary-500);
}

.declaration-confirm.is-checked .declaration-confirm__marker {
  background:   var(--color-brand);
  border-color: var(--color-brand);
}

.declaration-confirm.is-checked .declaration-confirm__marker::after {
  content:     '';
  display:     block;
  width:       5px;
  height:      9px;
  border:      2px solid var(--color-white);
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg) translateY(-1px);
}

.declaration-confirm__required {
  color:       var(--color-error);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top:  3px;
  align-self: flex-start;
}

.declaration-confirm__text {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}


/* ==========================================================================
   COMPONENT / SELECT
   BEM block: .form-field (select variant)
   Custom-styled native <select> — no JS dependency.
   ========================================================================== */

.form-field__select {
  display:          block;
  width:            100%;
  padding:          var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border:           1.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  font-family:      var(--font-family-base);
  font-size:        var(--text-xs-size);
  line-height:      var(--text-xs-lh);
  color:            var(--color-text-primary);
  cursor:           pointer;
  transition:       border-color  var(--transition-fast),
                    box-shadow    var(--transition-fast);

  /* Custom chevron (inline SVG encoded) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-4) center;
  background-size:     16px;
  -webkit-appearance:  none;
  -moz-appearance:          none;
       appearance:          none;
}

.form-field__select:hover {
  border-color: var(--color-grey-800);
}

.form-field__select:focus,
.form-field__select:focus-visible {
  outline:      none;
  border-color: var(--color-brand);
  box-shadow:   0 0 0 3px var(--color-primary-500);
}

.form-field__select:disabled {
  background-color: var(--color-grey-500);
  border-color:     var(--color-grey-600);
  color:            var(--color-text-disabled);
  cursor:           not-allowed;
}

.form-field.has-error .form-field__select {
  border-color: var(--color-error);
}

/* ==========================================================================
   COMPONENT / STACKED TABLE
   Label above value per row; leading icon + 16px gap + content (Cover Summary).
   ========================================================================== */

.stacked-table {
  width:           100%;
  border-collapse: collapse;
  margin:          0;
}

.stacked-table tbody {
  display: block;
}

.stacked-table__row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
}

.stacked-table__marker {
  flex-shrink:    0;
  padding:        0;
  vertical-align: top;
  border:         none;
}

.stacked-table__icon {
  display: block;
  width:   30px;
  height:  30px;
  color:   var(--color-brand-dark);
}

.stacked-table__cell {
  display:           flex;
  flex:              1;
  flex-direction:    column;
  gap:               var(--space-1);
  min-width:         0;
  padding-top:    0;
  padding-bottom: var(--space-4);
  padding-left:   0;
  padding-right:  0;
  font-weight:       normal;
  text-align:        left;
  border:            none;
}

.stacked-table__label {
  font-size:   var(--text-sm-size);
  line-height: var(--text-sm-lh);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-secondary);
}

.stacked-table__value {
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
}

.stacked-table__value--multiline {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.stacked-table__value-line {
  display: block;
}

.stacked-table__value-line--accent {
  color:       var(--color-accent-orange-700);
  font-weight: var(--font-weight-medium);
}

.stacked-table__label--with-info {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-1);
}

.stacked-table__sub {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  margin-top:     var(--space-4);
}

.stacked-table__chips {
  margin-top: var(--space-2);
}

.stacked-table__empty {
  margin:      0;
  font-size:   var(--text-xs-size);
  line-height: var(--text-xs-lh);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-primary);
}

/* Inside accordion panels — reset generic bordered table grid */
.accordion__panel-inner .stacked-table {
  margin-top: 0;
}

.accordion__panel-inner .stacked-table th,
.accordion__panel-inner .stacked-table td {
  border:     none;
  background: transparent;
}

.accordion__panel-inner .stacked-table__marker {
  padding: 0;
}

/* ==========================================================================
   COMPONENT / TABS
   BEM block: .tabs
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .tabs
       .tabs__nav           ← scrollable tab strip
         .tabs__nav-item    ← individual tab button
       .tabs__panels
         .tabs__panel       ← content panel (hidden unless .is-active)

   States:
     .tabs__nav-item.is-active   → current tab
     .tabs__panel.is-active      → visible panel

   JS: tabs.js initialises and toggles .is-active on click.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block
-------------------------------------------------------------------------- */

.tabs {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Nav strip
-------------------------------------------------------------------------- */

.tabs__nav {
  display:          flex;
  overflow-x:       auto;
  scrollbar-width:  none;   /* Firefox */
  -ms-overflow-style: none; /* IE */
  border-bottom:    2px solid var(--color-grey-600);
  gap:              0;
  padding-left:   var(--space-6);
  padding-right:  var(--space-6);
}

.tabs__nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* --------------------------------------------------------------------------
   Tab item
-------------------------------------------------------------------------- */

.tabs__nav-item {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-4);
  font-size:       var(--text-xs-size);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-secondary);
  white-space:     nowrap;
  flex-shrink:     0;
  border:          none;
  background:      none;
  cursor:          pointer;
  border-bottom:   2px solid transparent;
  margin-bottom:   -2px;   /* Overlap the nav border-bottom */
  transition:      color             var(--transition-fast),
                   border-bottom-color var(--transition-fast);
}

.tabs__nav-item:hover {
  color:             var(--color-text-primary);
  border-bottom-color: var(--color-grey-700);
}

.tabs__nav-item.is-active {
  color:              var(--color-brand);
  border-bottom-color: var(--color-brand);
  font-weight:        var(--font-weight-bold);
}

.tabs__nav-item:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius:  var(--radius-sm) var(--radius-sm) 0 0;
}

/* --------------------------------------------------------------------------
   Panels
-------------------------------------------------------------------------- */

.tabs__panels {
  padding-top: var(--space-4);
}

.tabs__panel {
  display: none;
}

.tabs__panel.is-active {
  display: block;
}

/* Pill nav sits closer to content — no underline strip gap */
.tabs--pills .tabs__panels {
  padding-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Pill variant (for cover summary section selector)
   .tabs--pills replaces underline style with pill buttons
-------------------------------------------------------------------------- */

.tabs--pills .tabs__nav {
  border-bottom: none;
  gap:           var(--space-2);
  padding-left:  0;
  padding-right: 0;
  flex-wrap:     wrap;
}

.tabs--pills .tabs__nav-item {
  border:           1.5px solid var(--color-border);
  border-radius:    var(--radius-pill);
  padding:          var(--space-2) var(--space-4);
  margin-bottom:    0;
  font-size:        var(--text-xxs-size);
  background:       var(--color-white);
  color:            var(--color-text-primary);
}

.tabs--pills .tabs__nav-item:hover {
  border-color:     var(--color-brand);
  color:            var(--color-brand);
}

.tabs--pills .tabs__nav-item.is-active {
  background-color: var(--color-brand);
  border-color:     var(--color-brand);
  color:            var(--color-white);
  font-weight:      var(--font-weight-bold);
}

.tabs__nav-icon {
  width: 20px; height: 20px; flex-shrink: 0;
}

/* ==========================================================================
   COMPONENT / YOUR TERMS
   Endorsements & excesses — section headings + white card with info chips.
   ========================================================================== */

.terms-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.terms-section__title {
  margin:      0;
  font-size:   var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: var(--font-weight-bold);
  color:       var(--color-grey-900);
}

.terms-section__intro {
  margin:      0 0 var(--space-4);
  font-size:   var(--text-xxxs-size);
  line-height: var(--text-xxxs-lh);
  color:       var(--color-grey-900);
}

.terms-card {
  padding:       var(--space-5) var(--space-6);
  background:    var(--color-white);
  border:        1px solid var(--color-border);
  border-radius: var(--space-5);
}

.terms-card__chips {
  gap: var(--space-4);
}

.o-stack--lg > .terms-divider {
  margin-top:    var(--space-8);
  margin-bottom: var(--space-8);
  margin-left:   0;
  margin-right:  0;
  border:     none;
  border-top: 1px solid var(--color-grey-800);
}

/* Prevent double gap below the rule from the stack sibling margin */
.o-stack--lg > .terms-divider + .terms-section {
  margin-top: 0;
}

/* ==========================================================================
   COMPONENT / TOGGLE
   Switch control for optional cover and similar on/off settings.
   ========================================================================== */

.toggle {
  display:     inline-flex;
  align-items: center;
  cursor:      pointer;
  flex-shrink: 0;
}

.toggle__input {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  border:   0;
}

.toggle__track {
  display:       block;
  width:         2.5rem;
  height:        1.25rem;
  border-radius: var(--radius-pill);
  background:    var(--color-grey-700);
  position:      relative;
  transition:    background-color var(--transition-fast);
}

.toggle__thumb {
  position:      absolute;
  top:           0.125rem;
  left:          0.125rem;
  width:         1rem;
  height:        1rem;
  border-radius: 50%;
  background:    var(--color-white);
  transition:    transform var(--transition-fast);
}

.toggle__input:checked + .toggle__track {
  background: var(--color-brand);
}

.toggle__input:checked + .toggle__track .toggle__thumb {
  transform: translateX(1.25rem);
}

.toggle__input:focus-visible + .toggle__track {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT / TOOLTIP / POP-UP
   BEM block: .tooltip
   ──────────────────────────────────────────────────────────────────────────
   Structure:
     .tooltip
       .tooltip__trigger   ← ⓘ icon button that opens the tooltip
       .tooltip__content   ← the floating panel (.is-open shows it)
         .tooltip__close   ← × close button
         .tooltip__title   ← optional heading
         .tooltip__text    ← body copy

   States:
     .tooltip.is-open      → JS-toggled, shows .tooltip__content

   Position: below trigger by default; JS can add .tooltip--above
   ========================================================================== */

.tooltip {
  position: relative;
  display:  inline-block;
}

/* --------------------------------------------------------------------------
   Trigger button
-------------------------------------------------------------------------- */

.tooltip__trigger {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  border:          1.5px solid var(--color-brand);
  background:      transparent;
  cursor:          pointer;
  color:           var(--color-brand);
  font-size:       11px;
  font-weight:     var(--font-weight-bold);
  line-height:     1;
  transition:      background-color var(--transition-fast),
                   color            var(--transition-fast);
}

.tooltip__trigger:hover,
.tooltip.is-open .tooltip__trigger {
  background-color: var(--color-brand);
  color:            var(--color-white);
}

.tooltip__trigger:focus-visible {
  outline:        2px solid var(--color-brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Content panel
-------------------------------------------------------------------------- */

.tooltip__content {
  display:       none;
  position:      absolute;
  top:           calc(100% + var(--space-2));
  left:          50%;
  transform:     translateX(-50%);
  z-index:       var(--z-dropdown);
  width:         240px;
  background:    var(--color-white);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  padding:       var(--space-4);
}

.tooltip.is-open .tooltip__content {
  display: block;
  animation: tooltip-fade-in 0.15s ease;
}

@keyframes tooltip-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Above variant */
.tooltip--above .tooltip__content {
  top:    auto;
  bottom: calc(100% + var(--space-2));
}

/* --------------------------------------------------------------------------
   Close button inside tooltip
-------------------------------------------------------------------------- */

.tooltip__close {
  position:  absolute;
  top:       var(--space-2);
  right:     var(--space-2);
  width:     24px;
  height:    24px;
  display:   flex;
  align-items: center;
  justify-content: center;
  border:    none;
  background: none;
  cursor:    pointer;
  color:     var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.tooltip__close:hover {
  background-color: var(--color-grey-500);
}

/* --------------------------------------------------------------------------
   Content
-------------------------------------------------------------------------- */

.tooltip__title {
  font-size:     var(--text-xs-size);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-2);
  padding-right: var(--space-6); /* Clear close button */
}

.tooltip__text {
  font-size:   var(--text-xxs-size);
  line-height: var(--text-xs-lh);
  color:       var(--color-text-secondary);
  margin:      0;
}

/* ==========================================================================
   UTILITIES / HELPERS
   Single-purpose utility classes, state classes, and JS-toggled helpers.

   Convention (Harry Roberts):
     .u-*     → utility (layout, display, spacing)
     .is-*    → state (toggled by JS or current state)
     .has-*   → context modifier (toggled on parent by JS)
   ========================================================================== */


/* --------------------------------------------------------------------------
   STATE CLASSES
   All toggled exclusively by JavaScript. Never applied in markup directly
   except .is-active on nav items.
-------------------------------------------------------------------------- */

/* Visibility / display */
.is-hidden    { display: none !important; }
.is-visible   { display: block !important; }

/* Interactive states */
.is-active    { /* Each component defines its own .is-active styles */ }
.is-disabled  { pointer-events: none; opacity: 0.5; cursor: not-allowed; }
.is-loading   { pointer-events: none; cursor: wait; }

/* Form validation states */
.is-valid   { /* Defined in _form-field.css */ }
.is-error   { /* Defined in _form-field.css */ }

/* Expand/collapse (accordions, dropdowns) */
.is-open    { /* Defined per component */ }
.is-closed  { /* Defined per component */ }

/* Selection */
.is-selected { /* Defined per component */ }
.is-current  { /* Defined per component — e.g. current step */ }


/* --------------------------------------------------------------------------
   HAS-* CONTEXT CLASSES
   Applied to parent elements to communicate child state.
-------------------------------------------------------------------------- */

/* Lock body scroll when modal is open */
.has-modal-open {
  overflow: hidden;
}

/* When a dropdown is open inside an element */
.has-dropdown-open { /* per component */ }

/* When a field group contains an error */
.has-error { /* Defined in _form-field.css */ }


/* --------------------------------------------------------------------------
   DISPLAY UTILITIES
-------------------------------------------------------------------------- */

.u-block         { display: block; }
.u-inline        { display: inline; }
.u-inline-block  { display: inline-block; }
.u-flex          { display: flex; }
.u-inline-flex   { display: inline-flex; }
.u-grid          { display: grid; }
.u-none          { display: none; }


/* --------------------------------------------------------------------------
   FLEX UTILITIES
-------------------------------------------------------------------------- */

.u-flex-col     { flex-direction: column; }
.u-flex-row     { flex-direction: row; }
.u-flex-wrap    { flex-wrap: wrap; }
.u-flex-nowrap  { flex-wrap: nowrap; }
.u-flex-1       { flex: 1; }
.u-flex-auto    { flex: auto; }
.u-flex-none    { flex: none; }

.u-items-start    { align-items: flex-start; }
.u-items-center   { align-items: center; }
.u-items-end      { align-items: flex-end; }
.u-items-stretch  { align-items: stretch; }

.u-justify-start    { justify-content: flex-start; }
.u-justify-center   { justify-content: center; }
.u-justify-end      { justify-content: flex-end; }
.u-justify-between  { justify-content: space-between; }


/* --------------------------------------------------------------------------
   SPACING UTILITIES (margin / padding)
   Pattern: .u-{property}{side}-{size}
   property: m (margin), p (padding)
   side:     t (top), b (bottom), l (left), r (right), x (inline), y (block)
-------------------------------------------------------------------------- */

.u-mt-0  { margin-top: 0; }
.u-mt-xs { margin-top: var(--space-xs); }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }

.u-mb-0  { margin-bottom: 0; }
.u-mb-xs { margin-bottom: var(--space-xs); }
.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mb-lg { margin-bottom: var(--space-lg); }
.u-mb-xl { margin-bottom: var(--space-xl); }

.u-pt-0  { padding-top: 0; }
.u-pt-sm { padding-top: var(--space-sm); }
.u-pt-md { padding-top: var(--space-md); }
.u-pt-lg { padding-top: var(--space-lg); }

.u-pb-0  { padding-bottom: 0; }
.u-pb-sm { padding-bottom: var(--space-sm); }
.u-pb-md { padding-bottom: var(--space-md); }
.u-pb-lg { padding-bottom: var(--space-lg); }

.u-py-sm {
  padding-top:    var(--space-sm);
  padding-bottom: var(--space-sm);
}
.u-py-md {
  padding-top:    var(--space-md);
  padding-bottom: var(--space-md);
}
.u-py-lg {
  padding-top:    var(--space-lg);
  padding-bottom: var(--space-lg);
}
.u-py-xl {
  padding-top:    var(--space-xl);
  padding-bottom: var(--space-xl);
}

.u-px-sm {
  padding-left:  var(--space-sm);
  padding-right: var(--space-sm);
}
.u-px-md {
  padding-left:  var(--space-md);
  padding-right: var(--space-md);
}
.u-px-lg {
  padding-left:  var(--space-lg);
  padding-right: var(--space-lg);
}


/* Heading scale helpers (.u-text-h1–.u-text-h6) are defined with element
   styles in 03-elements/_base.css. Use them when the semantic level and visual
   level differ, e.g. <h2 class="u-text-h1"> for an H1-sized section title. */

/* --------------------------------------------------------------------------
   TEXT UTILITIES
-------------------------------------------------------------------------- */

.u-text-left    { text-align: left; }
.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }

.u-text-primary    { color: var(--color-text-primary); }
.u-text-secondary  { color: var(--color-text-secondary); }
.u-text-on-brand   { color: var(--color-text-on-brand); }
.u-text-brand      { color: var(--color-brand); }
.u-text-error      { color: var(--color-error); }
.u-text-success    { color: var(--color-success); }
.u-text-warning    { color: var(--color-warning); }

.u-text-bold   { font-weight: var(--font-weight-bold); }
.u-text-medium { font-weight: var(--font-weight-medium); }
.u-text-normal { font-weight: var(--font-weight-regular); }

.u-text-xl  { font-size: var(--text-xl-size);  line-height: var(--text-xl-lh); }
.u-text-lg  { font-size: var(--text-lg-size);  line-height: var(--text-lg-lh); }
.u-text-md  { font-size: var(--text-md-size);  line-height: var(--text-md-lh); }
.u-text-sm  { font-size: var(--text-sm-size);  line-height: var(--text-sm-lh); }
.u-text-xs  { font-size: var(--text-xs-size);  line-height: var(--text-xs-lh); }
.u-text-xxs { font-size: var(--text-xxs-size); line-height: var(--text-xxs-lh); }

.u-text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   COLOUR UTILITIES
-------------------------------------------------------------------------- */

.u-bg-white      { background-color: var(--color-white); }
.u-bg-brand      { background-color: var(--color-brand); }
.u-bg-brand-light { background-color: var(--color-brand-light); }
.u-bg-surface    { background-color: var(--color-surface); }
.u-bg-surface-alt { background-color: var(--color-surface-alt); }


/* --------------------------------------------------------------------------
   BORDER RADIUS UTILITIES
-------------------------------------------------------------------------- */

.u-rounded      { border-radius: var(--radius-md); }
.u-rounded-lg   { border-radius: var(--radius-lg); }
.u-rounded-xl   { border-radius: var(--radius-xl); }
.u-rounded-pill { border-radius: var(--radius-pill); }


/* --------------------------------------------------------------------------
   SHADOW UTILITIES
-------------------------------------------------------------------------- */

.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }


/* --------------------------------------------------------------------------
   WIDTH / HEIGHT
-------------------------------------------------------------------------- */

.u-w-full  { width: 100%; }
.u-w-auto  { width: auto; }
.u-h-full  { height: 100%; }


/* --------------------------------------------------------------------------
   OVERFLOW
-------------------------------------------------------------------------- */

.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto   { overflow: auto; }


/* --------------------------------------------------------------------------
   ICON UTILITIES
-------------------------------------------------------------------------- */

/* Inline icon that sits alongside text — optically aligns to cap-height */
.u-icon-inline {
  vertical-align: -2px;
  margin-right:   4px;
  flex-shrink:    0;
}


/* --------------------------------------------------------------------------
   POSITION
-------------------------------------------------------------------------- */

.u-relative { position: relative; }
.u-absolute { position: absolute; }
.u-sticky   { position: -webkit-sticky; position: sticky; }
.u-fixed    { position: fixed; }


/* --------------------------------------------------------------------------
   RESPONSIVE SHOW/HIDE
-------------------------------------------------------------------------- */

/* Hidden on mobile, shown at breakpoint */
.u-hide-mobile {
  display: none;
}
@media (min-width: 768px) {
  .u-hide-mobile {
    display: revert;
  }
}

/* Shown on mobile, hidden at breakpoint */
.u-hide-tablet {
  display: revert;
}
@media (min-width: 768px) {
  .u-hide-tablet {
    display: none;
  }
}


.spinner-ring div {
    border-color: var(--color-primary-800) transparent transparent transparent;
}