/* ==========================================================================
   Segen Finance — homeowner site
   --------------------------------------------------------------------------
   Built to the Segen visual language pack (segen-visual-language.html +
   STYLE-GUIDE.md), following the PRESENTATION register — the customer-facing
   proposal — not the dense installer app chrome.

   Section 1 is the token block, copied verbatim from the pack's @theme block,
   which is itself a verbatim copy of
   libs/segenity/src/lib/styles/variables.css. Do not edit these values by
   hand; re-export the pack and re-copy.

   Section 2 holds the only additions: accessible substitutions. Each one
   picks a DARKER TOKEN THAT ALREADY EXISTS, per rule 8 ("if a shade seems
   missing, use the nearest existing token"), because the first-choice token
   fails a WCAG 2.2 AA contrast minimum. No new colours are introduced.
   Run `python3 tools/contrast.py` to verify.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SEGEN TOKENS — verbatim from the visual language pack
   -------------------------------------------------------------------------- */
:root {
  /* primitives */
  --color-white: #ffffff;
  --color-black: #1c1b1a;
  --color-gray-50: #f8f8f8;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #dcdcdc;
  --color-gray-300: #bdbdbd;
  --color-gray-400: #989898;
  --color-gray-500: #7c7c7c;
  --color-gray-600: #656565;
  --color-gray-700: #525252;
  --color-gray-800: #292929;
  --color-gray-900: #3d3d3d;
  --color-gray-950: #292929;
  --color-stone-50: #f6f2ed;
  --color-stone-100: #f1ebe3;
  --color-stone-200: #e2d5c6;
  --color-stone-300: #cfb9a2;
  --color-blue-50: #eaffff;
  --color-blue-400: #36d6fa;
  --color-blue-500: #0cc2eb;
  --color-blue-600: #00afdf;
  --color-blue-700: #017da3;
  --color-blue-900: #0e506b;
  --color-orange-50: #fff5e4;
  --color-orange-400: #f78f40;
  --color-orange-500: #f5711a;
  --color-orange-600: #d5500f;
  --color-orange-700: #bf400f;
  --color-orange-800: #973315;
  --color-red-50: #ffefee;
  --color-red-200: #ffcdc9;
  --color-red-600: #d92d20;
  --color-red-700: #b61c11;
  --color-red-900: #80231c;
  --color-green-50: #ecfdf3;
  --color-green-600: #079455;
  --color-green-900: #074d31;
  --color-purple-100: #f0e9ff;
  --color-purple-800: #6f00ff;
  --color-pink-50: #fbe8ff;
  --color-pink-500: #ee46bc;
  --color-pink-700: #c11574;

  /* typography */
  --font-poppins: 'Poppins', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-space-mono: 'Space Mono', monospace;
  --font-heading: var(--font-poppins);
  --font-body: var(--font-inter);
  /* Space Mono, in two styles only, for metadata attached to something else:
     a timing, duration or category tag, a field label, a unit, chart data or a
     technical code. Label: 11px bold caps, 0.08em. Data/meta: 12px regular.
     Never for headings, body copy, buttons, headline figures or eyebrows. */
  --font-decorative: var(--font-space-mono);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  /* semantic */
  --color-background: var(--color-white);
  --color-body: var(--color-black);
  --color-brand: var(--color-orange-600);
  --color-brand-light: var(--color-orange-400);
  --color-brand-dark: var(--color-orange-700);
  --color-brand-darker: var(--color-orange-800);
  --color-brand-fg: var(--color-white);
  --color-accent: var(--deep);
  --color-accent-light: var(--color-blue-50);
  --color-accent-fg: var(--color-white);
  --color-muted: var(--hairline);
  --color-muted-fg: var(--color-gray-500);
  --color-invert: var(--color-black);
  --color-invert-fg: var(--color-white);
  --color-error: var(--color-red-600);
  --color-error-light: var(--color-red-50);
  --color-error-dark: var(--color-red-700);
  --color-success: var(--color-green-600);
  --color-success-light: var(--color-green-50);
  --color-warning: var(--color-orange-400);
  --color-warning-light: var(--color-orange-50);
  --color-info: var(--color-blue-700);
  --color-info-light: var(--color-blue-50);
  --color-ring: var(--deep);
  --color-border: var(--hairline);
  --color-border-darker: var(--color-gray-700);
  --color-disabled: var(--color-gray-100);
  --color-disabled-fg: var(--color-gray-400);
  --color-text-secondary: var(--ink-2);
  --color-surface-neutral: var(--color-stone-50);
  --color-surface-secondary: var(--color-gray-50);
  --color-surface-tertiary: var(--color-gray-100);
  --color-surface-dark: var(--color-gray-800);

  /* layout */
  --container-content: 1400px;

  /* This design is light-only, by instruction. Declaring it stops browsers
     in dark mode from inverting the page, and makes form controls, scrollbars
     and the canvas render light to match. */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. ACCESSIBLE SUBSTITUTIONS
   Five roles where the pack's first-choice token misses a WCAG 2.2 AA
   minimum. Each resolves to a darker token that is already in the palette.
   -------------------------------------------------------------------------- */
:root {
  /* brand #d5500f gives 4.21:1 on white — short of 4.5:1 for normal-size
     text. brand-dark gives 5.31:1. Used for link text, button fills, and
     any brand-coloured text below 24px.
     brand itself is still used where only 3:1 is required: large headings,
     icon strokes, borders, and the hero wash. */
  --brand-text: var(--color-brand-dark);        /* 5.31:1 on white */
  --brand-text-hover: var(--color-brand-darker); /* 7.50:1 on white */

  /* muted-fg #7c7c7c gives 4.17:1 on white and 3.75:1 on warm stone. gray-600
     gives 5.83:1 and 5.23:1. Used for all caption and help text. */
  --caption-fg: var(--color-gray-600);

  /* border #dcdcdc is 1.37:1 on white. Fine for decorative card and table
     edges, but WCAG 1.4.11 wants 3:1 where a border is what identifies an
     interactive control — the secondary button, the menu toggle, inputs.
     gray-500 gives 4.17:1. */
  --control-border: var(--color-gray-500);

  /* brand on surface-dark is 3.45:1. brand-light gives 6.21:1. */
  --brand-on-dark: var(--color-brand-light);

  /* Draft placeholder marker. Follows the pack's chip recipe — a 600-weight
     border, a 50-weight fill and 900-weight text — which is both idiomatic
     and accessible (8.66:1). error/red-600 as text would be 4.33:1. */
  --tbc-fg: var(--color-red-900);
  --tbc-bg: var(--color-error-light);
  --tbc-border: var(--color-error);
}

/* --------------------------------------------------------------------------
   2b. BRAND DIRECTION — the yellow brand
   Chosen at design review. This deliberately leaves the installer-tooling
   design system in section 1, which is kept for reference and because the
   regulatory components still draw on it.

   The amber comes from the supplied logo mark. It is the only bright colour
   on the page, and it ALWAYS carries dark text: white on it is 1.83:1 and
   unreadable, ink is 9.45:1. That single rule is what lets the design be
   loud and stay legible.

   Everything else is warm neutral — white, cream, sand — plus one deep teal
   for dark surfaces, icons and glyphs. Cards and bands separate by VALUE,
   not by hue; the rhythm lives in the icon discs, which alternate
   amber-with-ink and teal-with-amber.

   Run `python3 tools/contrast.py` after changing any of these.
   -------------------------------------------------------------------------- */
:root {
  --amber:        #FFB020;   /* accent fills — ink text only, 9.45:1          */
  --amber-soft:   #FFC85E;
  --amber-press:  #D98F0B;   /* the solid drop under a pressed button         */
  --cream:        #F6F2ED;   /* primary tinted surface — the platform's warm stone, ink 15.5:1 */
  --sand:         #F6F2ED;   /* retired: kept as an alias of the one beige    */
  --orange:       #C94A0F;   /* primary actions, as on the Segen platform — white 4.70:1.
                                The palette's orange-600 is 4.21:1, too light for button text. */
  --orange-hover: #B0400D;
  --accent-word:  #00719A;   /* highlighted words in headings — 5.48:1 white,
                                4.92:1 stone, 4.63:1 sand. Not for dark grounds. */
  --chart-marker: #00719A;   /* chart point markers: brand blue                */
  --navy:         #06364A;   /* headings and other display text — 12.85:1 white */
  --deep:         #00719A;   /* brand-blue surfaces, icons, borders, charts —
                                white on it 5.48:1; never amber TEXT on it (3.0:1) */
  --deep-hover:   #005E80;
  --blue-tint:    #E6F1F5;   /* brand blue at ~10% on white: icon discs; blue on it 4.9:1 */
  --hairline:     rgb(20 28 31 / 0.10);   /* the one border colour */

  --ink:          #141C1F;   /* body text          — 17.27:1 on white         */
  --ink-2:        #46555B;   /* secondary text     —  7.75:1 on white         */
  --link:         #00719A;   /* brand blue — 5.48:1 on white, 4.92:1 on stone */

  /* Kept so the components below keep working; they now point at the brand. */
  --ink-heading:   var(--navy);
  --surface-deep:  var(--deep);
  --label:         var(--ink);
  --label-on-tint: var(--ink);
  --brand-text:       var(--navy);
  --brand-text-hover: var(--navy);
  --caption-fg:       var(--ink-2);
  --control-border:   #3D5A64;

  --radius-brand:    1.5rem;
  --shadow-brand:    0 2px 4px rgb(6 54 74 / 0.04), 0 12px 28px -8px rgb(6 54 74 / 0.14);
  --shadow-brand-lg: 0 8px 20px var(--hairline), 0 28px 56px -16px rgb(6 54 74 / 0.20);
}

/* --------------------------------------------------------------------------
   3. SHAPE, ELEVATION, RHYTHM
   Radius steps up with element size (pack section 5). Never rounded-3xl.
   -------------------------------------------------------------------------- */
:root {
  --radius-sm:    0.125rem;  /* 2px  — alerts                               */
  --radius-table: 0.25rem;   /* 4px  — table containers                     */
  --radius-md:    0.375rem;  /* 6px  — chips, small badges                  */
  --radius-lg:    0.5rem;    /* 8px  — controls, list rows                  */
  --radius-xl:    1rem;      /* content cards and panels — this brand rounds
                                harder than the installer tooling            */
  --radius-2xl:   1.5rem;    /* page shell, large stat aggregates           */
  --radius-full:  9999px;    /* buttons, inputs, pills, icon discs          */

  /* shadow-sm is the default for presentation cards. Heavier elevation is
     reserved for overlays. */
  /* Soft and slightly teal-tinted rather than neutral grey. */
  --shadow-sm: 0 1px 2px rgb(20 28 31 / 0.04);
  --shadow-lg: 0 8px 20px var(--hairline), 0 28px 56px -16px rgb(6 54 74 / 0.20);

  /* gap-16 between major sections is the single most important spacing value
     in the pack. gap-6 from a heading to its content. */
  --space-section: 4rem;
  --space-heading: 1.5rem;

  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   4. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-background);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.625;                       /* leading-relaxed */
  color: var(--ink);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Headings are semibold with light tracking, closer to the Segen platform's
   calmer type; deep teal keeps them recognisably Segen Finance. */
h1, h2 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-heading);
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
/* Hierarchy: each level sits roughly 1.5x above the next at every width, so
   an H1 never reads as a slightly larger H2. H1 36-56px, section H2 26-40px,
   article H2 (.prose) 22-30px, H3 20px. */
h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-base); }

p, ul, ol, dl { margin: 0 0 1.15rem; }

/* Spacing between stacked list items. Horizontal and grid lists opt out:
   this was pushing every navigation item after the first down by 6.4px, so
   the nav sat 3px out of line with the logo and the CTA. */
li + li { margin-top: 0.4rem; }
.nav__list li + li,
.breadcrumb li + li,
.stat-row li + li,
.site-footer__col li + li,
.site-footer__legal li + li { margin-top: 0; }

/* Brand orange, semibold, underlined with a 4px offset (pack section 6). */
a {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--navy); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

code {
  font-family: var(--font-decorative);
  font-size: 0.9em;
  background: var(--color-surface-tertiary);
  border-radius: var(--radius-md);
  padding: 0.1em 0.35em;
}

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   Centred 1400px container with the pack's responsive gutters.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: 1rem;                                  /* px-4  */
}
@media (min-width: 40rem)  { .container { padding-inline: 1.5rem; } }  /* sm:px-6  */
@media (min-width: 64rem)  { .container { padding-inline: 2rem; } }    /* lg:px-8  */
@media (min-width: 80rem)  { .container { padding-inline: 3rem; } }    /* xl:px-12 */

/* Text-led pages (guides, terms, complaints, legal) get a narrower shell.
   The 1400px token is the proposal's card-layout shell; at that width a
   68ch reading column leaves ~660px of dead space to its right. Narrowing
   the container keeps the page header and the prose column aligned on the
   same left edge and reads as deliberate. Card-led pages — the homepage,
   the renewables hub, help & support — keep the full 1400px shell.

   Scoped to the page CONTENT only. This used to target every .container,
   which shrank the site header and footer too: the footer was 864px wide on
   a guide and 1400px on the homepage, and the header ran out of room for the
   navigation. Site chrome keeps the same width on every page. */
/* Text-led pages keep the full shell and put their content in a reading
   column pinned to the container's left edge — the same edge the page
   header's copy sits on. Narrowing and re-centring the container instead
   left the body indented about 150px from its own heading. */
.page--prose .section > .container > * { max-width: 54rem; }

.section { padding-block: clamp(2.5rem, 6vw, var(--space-section)); }
/* Two warm tints rather than one. nth-of-type counts every <section>, not
   just the tinted ones, so in practice this picks a tint per page from where
   the tinted bands happen to fall: the homepage alternates cream against
   white, inner pages sit their single tinted band on sand. That reads well,
   but it is a side effect, not a rule -- CSS cannot count "nth element
   carrying this class", so genuinely alternating within a page would mean
   the build stamping the classes. Worth doing if a page ever ends up with
   two tinted bands touching. */
.section--tint { background: var(--cream); }
main > .section--tint:nth-of-type(odd)  { background: var(--cream); }
main > .section--tint:nth-of-type(even) { background: var(--cream); }
.section { border-top: 0; }
.section--flush-top { padding-top: 0; }

.measure { max-width: var(--measure); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--deep);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-lg) 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--color-white); }

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
/* At the top of the page the header carries the same surface as the hero
   below it, so the two read as one block. Once you scroll past, it turns
   white with a hairline — white-on-white is invisible without one.

   The height is deliberately constant: a sticky header that resizes on
   scroll shifts the content underneath it, which feels like a jolt. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: rgb(6 54 74 / 0.10);
  box-shadow: 0 2px 10px rgb(6 54 74 / 0.07);
}
/* Without JavaScript there is no scrolled state, so give it the hairline
   permanently rather than leaving it to float over the content. */
html:not(.js) .site-header { border-bottom-color: rgb(6 54 74 / 0.10); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
}
/* The homepage gets a larger wordmark — it is the first thing a visitor
   sees there, and the header has room for it at a constant height. */
.page--home .site-header__inner { min-height: 4.25rem; }

/* Logo. The supplied SVG lockup carries the wordmark, the mark and the
   "Finance" descriptor, so it is one image rather than composed in CSS.
   width/height on the <img> reserve the space and stop the header shifting
   as the SVG loads. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.logo img {
  height: 2.125rem;
  width: auto;
  display: block;
}
@media (min-width: 40rem) { .logo img { height: 2.375rem; } }
.page--home .logo img { height: 2.5rem; }
@media (min-width: 40rem) { .page--home .logo img { height: 3rem; } }
.logo:hover img { opacity: 0.85; }

.nav { display: contents; }
.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.nav__link {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--cream); color: var(--navy); }
.nav__link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--color-white);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-full);
  padding: 0.5rem 0.9rem;
  color: var(--color-body);
  cursor: pointer;
}
.nav-toggle:active { scale: 0.95; }
.nav-toggle__bars { display: block; width: 0.9rem; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -4px; }
.nav-toggle__bars::after  { top: 4px; }

/* Mobile navigation. Without JavaScript there is no working toggle, so the
   links render as a static stacked block and the toggle is hidden. The `.js`
   class (set inline in <head>, so no flash) switches to the overlay panel. */
@media (max-width: 61.99rem) {
  .site-header__inner { flex-wrap: wrap; }
  .nav__list {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0.75rem;
  }
  .nav-toggle { display: none; }

  .js .site-header__inner { flex-wrap: nowrap; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex: 0 1 auto;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 1rem 1.25rem;
  }
  .js .nav__list[hidden] { display: none; }

  .nav__link {
    padding: 0.8rem 0.75rem;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .nav__link[aria-current="page"] { border-radius: var(--radius-lg); }
  .nav__cta { margin-top: 0.75rem; }
}
@media (min-width: 62rem) {
  .nav-toggle, .js .nav-toggle { display: none; }
  .nav__list[hidden] { display: flex; }
  .nav__cta { margin-left: 0.4rem; }
  /* Match the nav links' height so the row shares one optical baseline.
     The default .btn is 42px against the links' 36px, which read as a
     misalignment rather than as emphasis. */
  .nav__cta .btn {
    min-height: 2.25rem;
    padding-inline: 1.15rem;
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   7. BUTTONS — pill, semibold, active:scale-95
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 3.5rem; padding: 0 2rem; font-size: var(--text-lg); }

/* Below 30rem the chunkier buttons cannot fit inside a narrow card: .btn is
   nowrap, so a wide label sets the card's min-content width and pushes it
   past the viewport. Full-width stacked CTAs are the consumer convention
   anyway, and letting labels wrap removes the failure mode entirely. */
@media (max-width: 30rem) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; white-space: normal; text-align: center; }
  .btn--lg { font-size: var(--text-base); padding: 0 1.25rem; min-height: 3.125rem; }
}
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* Amber with INK text. White on this amber is 1.83:1 and unreadable; ink is
   9.45:1. The solid drop shadow gives the press its weight. */
.btn--primary { background: var(--orange); color: var(--color-white); }
.btn--primary:hover { background: var(--orange-hover); color: var(--color-white); }

.btn--secondary { background: var(--color-white); color: var(--ink); border: 1px solid var(--ink); }
.btn--secondary:hover { background: var(--cream); color: var(--navy); }

.btn--dark { background: var(--deep); color: var(--color-white); }
.btn--dark:hover { background: var(--deep-hover); color: var(--color-white); }

.btn--on-dark { background: var(--orange); color: var(--color-white); }
.btn--on-dark:hover { background: var(--orange-hover); color: var(--color-white); }

.btn--ghost-on-dark { background: transparent; color: var(--color-white); border: 1px solid rgb(255 255 255 / 0.7); }
.btn--ghost-on-dark:hover { background: rgb(255 255 255 / 0.14); color: var(--color-white); border-color: var(--color-white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* --------------------------------------------------------------------------
   8. BADGES & EYEBROWS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 0.35rem 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
}
.badge--dark { background: var(--surface-deep); color: var(--color-white); }
.badge--dark .badge__dot { background: var(--color-brand-light); }
.badge--outline {
  background: transparent;
  color: var(--ink-heading);
  border: 1px solid var(--color-blue-700);
}
.badge--outline .badge__dot { background: var(--label); }
.badge--tick { background: var(--color-success-light); color: var(--color-green-900); }
.badge__dot { width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); flex-shrink: 0; }
.badge svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }

/* Uppercase section label. brand-dark rather than brand: at this size the
   4.5:1 threshold applies and brand is 4.21:1 on white. */
.eyebrow {
  /* An amber label with ink text in sentence case and softly rounded corners,
     after the Segen platform's category tags. (White on amber is 1.83:1.) */
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--amber);                /* ink on amber 9.45:1 */
  border-radius: 0.5rem;
  line-height: 1.2;
  padding: 0.4rem 0.75rem;
  /* The fill's edge lines up with the breadcrumb, heading and body copy. */
  margin: 0 0 1rem;
}
/* Centre the capitals and x-height optically in the fill; the lowercase
   descenders run into the bottom padding, as on the platform's tags. */
@supports (text-box: trim-both cap alphabetic) {
  .eyebrow { text-box: trim-both cap alphabetic; padding: 0.55rem 0.75rem; }
}
/* The quieter variant, for a label that introduces supporting content. */
.eyebrow--muted { background: var(--color-white); color: var(--ink-2); }

.section-head { max-width: 52ch; margin-bottom: 2.5rem; }
.section-head--centre { margin-inline: auto; text-align: center; max-width: 46ch; }
.section-head--wide { max-width: 62ch; }
.section-head > :last-child { margin-bottom: 0; }
/* A section head with a single call to action beside it (homepage, installers). */
/* Set in a card, like the site's other cards: the copy on the left, the
   button pinned to the right edge and centred on it. Stacks on small screens. */
.installer-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brand);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
}
.installer-callout > .section-head { margin-bottom: 0; max-width: none; }
.installer-callout > .section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.5rem; }
.installer-callout > .section-head p { max-width: 58ch; }
@media (min-width: 48rem) {
  .installer-callout { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: center; }
  .installer-callout > .btn { justify-self: end; }
}
.section-head p { color: var(--color-text-secondary); font-size: var(--text-sm); }
.section-head--centre p { max-width: 46ch; margin-inline: auto; }
/* A centred head whose intro should sit on two lines rather than three. */
.section-head--centre-wide { max-width: 46rem; }
.section-head--centre-wide p { max-width: 44rem; }

/* A section head with a decorative illustration beside it, filling the space
   the 52ch heading column leaves on wide screens. Hidden on small screens,
   where there is no spare space for it. */
.section-art { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.section-art > .section-head { margin-bottom: 0; flex: 0 1 52ch; min-width: 0; }
.section-art__img { width: clamp(12rem, 21vw, 18rem); height: auto; flex-shrink: 0; margin-right: 12%; }
@media (max-width: 47.99rem) { .section-art__img { display: none; } }

/* An accent word inside a heading, in brand blue. It sits upright rather
   than italic — friendlier, and it holds up better at display sizes. */
h1 em, h2 em, .accent-word {
  font-style: normal;
  color: var(--accent-word);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. MEDIA PLACEHOLDERS  ←—— grey blocks, to be replaced with real images
   Use --media-ratio to set the aspect ratio, e.g. style="--media-ratio: 16/9".
   -------------------------------------------------------------------------- */
.media {
  aspect-ratio: var(--media-ratio, 16 / 9);
  background: var(--color-surface-tertiary);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  overflow: hidden;
}
.media__label {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption-fg);
  line-height: 1.5;
  max-width: 26ch;
}
.media--flush { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.media--round { border-radius: var(--radius-full); }
.media--plain { border-style: solid; }
/* A real photo in place of the placeholder: fill the frame edge to edge. */
.media--image { padding: 0; border: 0; }
.media--image > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero visual: overlapping placeholder cards, echoing the mock's floating
   quote/payment cards. Three separate blocks so real images can drop into
   each one independently. */
.media-cluster { position: relative; display: grid; gap: 0.75rem; }
.media-cluster[hidden] { display: none; }
@media (min-width: 62rem) {
  .media-cluster {
    display: block;
    min-height: 24rem;
  }
  .media-cluster .media { position: absolute; box-shadow: var(--shadow-lg); }
  .media-cluster__a { top: 0; left: 8%; width: 62%; --media-ratio: 4 / 3; rotate: -2.5deg; }
  .media-cluster__b { top: 34%; right: 0; width: 46%; --media-ratio: 5 / 3; rotate: 3deg; }
  .media-cluster__c { bottom: 0; left: 0; width: 54%; --media-ratio: 5 / 2; rotate: -1deg; }
}

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Cream ground with two amber washes bled in from the corners — the warmth
     that carries the brand, rather than a flat panel behind the heading. */
  background:
    radial-gradient(70rem 38rem at 88% -14%, rgb(255 176 32 / 0.26), transparent 64%),
    radial-gradient(58rem 32rem at -4% 6%, rgb(255 176 32 / 0.10), transparent 60%),
    var(--cream);
  border-bottom: 0;
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(2.25rem, 5vw, 3.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The hero's own background carries the amber wash now, so this overlay
     stays empty; the element is kept because the z-index stack above it
     (.hero > .container) is built on it. */
  background: none;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
/* The hero visual: one composed image (photo, product cards, illustrations)
   on a transparent ground, so the amber wash shows through around it. */
.hero__art img { display: block; width: 100%; height: auto; }
/* Top-aligned with the heading and pulled into the column gap, so it reads
   with the heading, intro and buttons rather than centring on the whole text
   column (which runs on into the small print and stats). */
@media (min-width: 62rem) { .hero__art { align-self: start; margin-left: -2.5rem; } }
/* Stacked (below the desktop breakpoint), the visual leads, above the heading. */
@media (max-width: 61.99rem) {
  /* Capped and centred so it doesn't swamp a tablet screen or upscale past
     the source image's 898px. */
  .hero__art { order: -1; width: 100%; max-width: 35rem; margin-inline: auto; }
}

.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

.hero h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.9vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 1.15rem;
  max-width: 20ch;
}
.hero__lead {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin-bottom: 1.5rem;
}
.hero__note {
  margin: 1.25rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--caption-fg);
  max-width: 56ch;
}

/* Big-figure trust row under the hero copy. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  list-style: none;
  padding-inline: 0;          /* ul default indent, not reset by list-style */
}
.stat-row > li { margin: 0; }
.stat-row__figure {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-heading);
  line-height: 1.1;
}
/* A figure too long for one line (the full lender name) wraps instead of
   spilling into the next column. */
.stat-row__figure--wrap { white-space: normal; text-wrap: balance; line-height: 1.15; }
.stat-row__label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--caption-fg);
}

/* Page header for interior pages.
   Two columns: copy left, image right. Its height is driven by the image
   rather than by how long the standfirst happens to be, so every content
   page's header is the same size — before this, a page with a four-line
   lead was visibly taller than one with two. */
.page-header {
  /* Flat stone, like the platform's header band. Only the homepage hero keeps
     the amber wash, so it stays a Segen Finance moment rather than wallpaper. */
  background: var(--cream);
  border-bottom: 0;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
}

/* The header keeps the full shell on every page, so the h1 lands on the same
   left edge whichever page you arrive on. Before this, the header narrowed on
   text-led pages and the heading jumped sideways as you clicked between a
   guide and a card-led page. */

.page-header__grid { display: grid; gap: 1.5rem; align-items: center; }
.page-header__text > :last-child { margin-bottom: 0; }
/* A stat-row in a page header (Homeowners, Businesses) runs full width under
   the text and image, so all four figures fit on one line without squeezing
   the image column. */
.page-header__grid > .stat-row { grid-column: 1 / -1; margin-top: 0.5rem; }
@media (min-width: 62rem) {
  .page-header__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3rem;
    min-height: 19rem;
  }
  /* Utility pages — legal, 404, internal — carry no imagery, so they get a
     single column and a shorter band. */
  .page-header__grid--plain { grid-template-columns: minmax(0, 1fr); min-height: 9rem; }
}
.page-header__media .media { --media-ratio: 16 / 10; }
@media (max-width: 61.99rem) {
  .page-header__media .media { --media-ratio: 16 / 9; }
}

.page-header h1 { margin-bottom: 1rem; max-width: 26ch; }
.page-header__lead {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 54ch;
  margin: 0;
}

.breadcrumb { font-size: var(--text-xs); margin-bottom: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--color-gray-300); font-weight: 400; }
.breadcrumb li { color: var(--caption-fg); }
.breadcrumb li[aria-current="page"] { color: var(--color-text-secondary); font-weight: 500; }

/* Breadcrumb links were picking up the body link style — brand orange,
   semibold, underlined — which made the trail shout louder than the page
   title above it. They are navigation furniture: quiet until hovered. */
.breadcrumb a {
  color: var(--caption-fg);
  font-weight: 400;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. STAT STRIP — one bordered container with internal dividers, per the
   brand pack's stat-grid recipe.
   -------------------------------------------------------------------------- */
.stat-strip {
  border: 0;
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-block: var(--space-heading);
}
.stat-strip__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .stat-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stat-strip__grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .stat-strip__grid--3 { grid-template-columns: repeat(3, 1fr); } }

.stat-strip__grid > .stat-cell:nth-child(odd)  { background: var(--color-white); }
.stat-strip__grid > .stat-cell:nth-child(even) { background: var(--color-white); }
.stat-cell { padding: 1.25rem; border-bottom: 1px solid var(--hairline); }
.stat-cell:last-child { border-bottom: 0; }
@media (min-width: 40rem) {
  .stat-cell { padding: 1.5rem; }
  .stat-strip__grid--4 > .stat-cell:not(:nth-child(4n)),
  .stat-strip__grid--3 > .stat-cell:not(:nth-child(3n)) { border-right: 1px solid var(--hairline); }
}
@media (min-width: 64rem) {
  .stat-strip__grid--4 > .stat-cell, .stat-strip__grid--3 > .stat-cell { border-bottom: 0; }
  .stat-strip__grid--4 > .stat-cell:last-child,
  .stat-strip__grid--3 > .stat-cell:last-child { border-right: 0; }
}

/* Inside the narrower text-page shell a 4-up strip is too tight and values
   wrap mid-figure. The column media queries key off the viewport, not the
   container, so override explicitly. */
@media (min-width: 64rem) {
  .page--prose .stat-strip__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .page--prose .stat-strip__grid--4 > .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--color-muted); }
  .page--prose .stat-strip__grid--4 > .stat-cell:nth-child(odd) { border-right: 1px solid var(--color-muted); }
  .page--prose .stat-strip__grid--4 > .stat-cell:nth-child(even) { border-right: 0; }
}
.stat-cell__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  display: grid; place-items: center;
  margin-bottom: 0.85rem;
  background: var(--blue-tint);
  color: var(--deep);
}
.stat-cell__icon svg { width: 1.3rem; height: 1.3rem; }
.stat-cell__label {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.4rem;
}
.stat-cell__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.stat-cell__value small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--caption-fg); }
.stat-cell__note { margin: 0.5rem 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--caption-fg); }

/* --------------------------------------------------------------------------
   12. CHOICE CARDS — the light/dark pair from the mock
   -------------------------------------------------------------------------- */
.choice-grid { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.choice-card {
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(20 28 31 / 0.10);   /* white like every other card */
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.choice-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.choice-card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--blue-tint);
  color: var(--deep);
}
.choice-card__icon svg { width: 1.3rem; height: 1.3rem; }
.choice-card__tag {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.choice-card h3 { font-size: var(--text-xl); margin-bottom: 1.15rem; max-width: 22ch; }
.choice-card__body { flex: 1; }
.choice-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.choice-card__figure {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.choice-card__figure small { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--caption-fg); margin-top: 0.2rem; letter-spacing: 0; }

.choice-card--dark {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--color-white);
}
.choice-card--dark h3 { color: var(--color-white); }
.choice-card--dark .choice-card__icon { background: rgb(255 255 255 / 0.16); color: var(--color-white); }  /* on blue: white glyph */
.choice-card--dark .choice-card__tag { color: var(--color-white); }
.choice-card--dark .choice-card__figure { color: var(--color-white); }
.choice-card--dark .choice-card__figure small { color: rgb(255 255 255 / 0.92); }
.choice-card--dark .checklist { color: rgb(255 255 255 / 0.92); }
.choice-card--dark .checklist svg { color: var(--color-white); }

/* --------------------------------------------------------------------------
   13. CHECKLIST
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: 1.6; }

/* The tick is positioned, not a grid column. This was a two-column grid, and
   it broke silently whenever an item mixed an element with bare text: a
   <strong> followed by a text run produces THREE grid items, so the text was
   placed in the 16px icon column and wrapped one word per line. Absolute
   positioning accepts any mix of inline content. */
.checklist > li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0 0 0.65rem;
}
.checklist > li:last-child { margin-bottom: 0; }
.checklist svg {
  color: var(--deep);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1rem;
  height: 1rem;
  /* Deep teal: 12.85:1 on white, 11.99:1 on cream. */
  color: var(--deep);
}
/* The palette gives every tick the same deep teal — the success variant is
   not paired against a failure list anywhere, so a second colour here read as
   decoration rather than meaning. */
.checklist--success svg { color: var(--deep); }
.checklist--neutral svg { color: var(--caption-fg); }

/* Good-fit / not-a-fit panels */
.fit-grid { display: grid; gap: 1rem; }
.fit-panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-muted);
  background: var(--color-white);
  padding: 1.5rem;
}
.fit-panel--yes { border-color: var(--deep); background: var(--color-white); }
.fit-panel__head {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--text-sm); font-weight: 600;
  margin-bottom: 1rem;
}
.fit-panel__head svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.fit-panel--yes .fit-panel__head { color: var(--navy); }
.fit-panel--yes .fit-panel__head svg { color: var(--deep); }
.fit-panel--no .fit-panel__head svg { color: var(--caption-fg); }

/* --------------------------------------------------------------------------
   14. CARDS & GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Four items in a three-column grid leaves one stranded on its own row.
     Two-by-two reads as deliberate; three-plus-one reads as a mistake. */
  .grid--3:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards are always white, on white and beige sections alike, as on the Segen
   platform; the colour rhythm lives in the alternating icon discs instead. */
.card {
  background: var(--color-white);
  border: 1px solid rgb(20 28 31 / 0.10);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card__inner { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-secondary); }
.card p.card__meta { font-size: 0.75rem; line-height: 1.5; color: var(--caption-fg); }
.card__inner > :last-child { margin-bottom: 0; }
.card__body { flex: 1; }
.card__body > :last-child { margin-bottom: 0; }
.card__footer { margin-top: 1.25rem; }
.card__meta {
  font-family: var(--font-decorative);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0.75rem 0 0;
  color: var(--caption-fg);
}
/* Kept as a hook for existing markup; stone cards are white like the rest. */
.card--stone { background: var(--color-white); box-shadow: var(--shadow-sm); }
/* Icon discs carry the colour, alternating amber-with-ink (9.45:1) and
   deep-teal-with-amber (7.03:1). */
.card__icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--deep);
  display: grid; place-items: center;
  margin-bottom: 0.9rem;
}
.card__icon svg { width: 1.3rem; height: 1.3rem; }
.card__figure {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.card__figure--accent { color: var(--color-accent); }
.card__figure--ink { color: var(--color-body); }
.card__label {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption-fg);
  margin-bottom: 0.75rem;
}

a.card { text-decoration: none; font-weight: 400; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.card:hover { border-color: var(--deep); box-shadow: var(--shadow-lg); color: inherit; }
a.card h3 { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.card:hover h3 { color: var(--navy); text-decoration-thickness: 2px; }

.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-heading); }
.benefit-list > li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.9rem; margin: 0; }
.benefit-list h3 { margin-bottom: 0.35rem; }
.benefit-list p { margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-secondary); }
.benefit-list svg {
  width: 2.75rem; height: 2.75rem;
  padding: 0.7rem;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--deep);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   15. NUMBERED ROWS (product matrix / process steps)
   -------------------------------------------------------------------------- */
.rows { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; counter-reset: row; }
.row-item {
  counter-increment: row;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
  border: 0;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: 1.1rem 1.25rem;
  margin: 0;
}
.row-item::before {
  content: counter(row);
  background: var(--blue-tint);
  color: var(--deep);
  width: 2rem; height: 2rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row-item h3 { font-size: var(--text-base); margin-bottom: 0.3rem; }
.row-item p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
/* Stop the text short of the chip in the top-right corner (the widest,
   "In your proposal", is ~8.3rem), so the two never crowd each other. */
@media (min-width: 40rem) { .row-item p { max-width: calc(100% - 10.5rem); } }
.row-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.row-chip {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
  border-radius: 999px;
  line-height: 1;                      /* see .eyebrow: centres the capitals */
  padding: 0.45rem 0.6rem 0.35rem;
  white-space: nowrap;
}
@supports (text-box: trim-both cap alphabetic) {
  .row-chip { text-box: trim-both cap alphabetic; padding: 0.48rem 0.6rem; }
}

/* Legacy alias — .steps renders as numbered rows too. */
.steps { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; counter-reset: row; }
.steps > li {
  counter-increment: row;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
  border: 0;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: 1.1rem 1.25rem;
  margin: 0;
}
.steps > li::before {
  content: counter(row);
  background: var(--blue-tint);
  color: var(--deep);
  width: 2rem; height: 2rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-base); margin-bottom: 0.3rem; }
.steps p { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }

/* Split layout: sticky intro on the left, rows on the right. */
.split { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
  /* For a short panel beside a long text column: equal columns, and the panel
     centred against the text, so it doesn't sit at the top over empty space. */
  .split--centred { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .split--centred > .callout { margin-block: 0; }
}

/* --------------------------------------------------------------------------
   16. QUOTE / CASE-STUDY PANELS
   -------------------------------------------------------------------------- */
.quote-grid { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .quote-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

.figure-panel {
  background: var(--deep);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.figure-panel__figure {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
  line-height: 1;
  margin: 0.75rem 0 0.85rem;
  font-variant-numeric: tabular-nums;
}
.figure-panel p { color: rgb(255 255 255 / 0.92); font-size: var(--text-sm); line-height: 1.6; }
.figure-panel__body { flex: 1; }
.figure-panel__body > :last-child { margin-bottom: 0; }

.testimonial {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.testimonial__stars { color: var(--amber); letter-spacing: 0.1em; margin-bottom: 1rem; font-size: var(--text-sm); }
.testimonial blockquote {
  margin: 0 0 1.25rem;
  font-size: var(--text-lg);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.011em;
  flex: 1;
}
.testimonial__who { display: flex; align-items: center; gap: 0.75rem; }
.testimonial__avatar {
  width: 2.25rem; height: 2.25rem;
  flex-shrink: 0;
  --media-ratio: 1;
}
.testimonial__name { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.testimonial__role { font-size: var(--text-xs); color: var(--caption-fg); margin: 0.1rem 0 0; }

/* --------------------------------------------------------------------------
   17. REPRESENTATIVE EXAMPLE
   FCA CONC 3.5: clear, prominent, and more prominent than any other rate.
   -------------------------------------------------------------------------- */
.rep-example {
  border: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-white);
  /* Lifted off the page more than a card: it is the one regulated block every
     reader should find, so it gets a soft, navy-tinted drop shadow. */
  box-shadow: var(--shadow-brand);
  margin-block: var(--space-heading);
}
.rep-example__head {
  background: var(--deep);
  border-bottom: 0;
  padding: 1.25rem 1.5rem;
}
.rep-example__head h2 { margin: 0 0 0.3rem; font-size: var(--text-lg); color: var(--color-white); }
.rep-example__head p { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: rgb(255 255 255 / 0.92); max-width: 70ch; }

.rep-example__table { width: 100%; border-collapse: collapse; }
.rep-example__table th,
.rep-example__table td {
  text-align: left;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: baseline;
  font-size: var(--text-sm);
}
.rep-example__table th { font-weight: 500; color: var(--color-text-secondary); width: 50%; }
.rep-example__table td { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Cookie policy reuses the table; its description column is prose, not figures. */
.cookie-table td:last-child { font-weight: 400; }
/* Modern slavery statement tables: regular-weight prose cells, medium first column. */
.statement-table td { font-weight: 400; }
.statement-table td:first-child { font-weight: 500; }
.rep-example__table tr:last-child th,
.rep-example__table tr:last-child td { border-bottom: 0; }
.rep-example__table tr.is-headline th,
.rep-example__table tr.is-headline td {
  background: var(--amber);
  border-top: 0;
  font-size: var(--text-base);
  padding-block: 1.05rem;
}
.rep-example__table tr.is-headline th { font-weight: 700; color: var(--ink); }
.rep-example__table tr.is-headline td {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rep-example__foot {
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.rep-example__foot > :last-child { margin-bottom: 0; }
.rep-example__provisional {
  border: 0;
  border-left: 4px solid var(--deep);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* Compact dark variant, as on the mock's homeowner page. */
.rep-strip {
  background: var(--color-invert);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  line-height: 1.6;
  margin-block: var(--space-heading);
}
.rep-strip p { margin: 0; color: rgb(255 255 255 / 0.92); max-width: 78ch; }
.rep-strip strong { color: var(--color-white); font-weight: 600; }

/* --------------------------------------------------------------------------
   18. ALERTS, SUMMARY PANELS, PROSE
   -------------------------------------------------------------------------- */
/* Panels separate by weight, not hue: white with a teal edge for neutral
   notes, cream with an amber edge for anything to pay attention to. */
.callout {
  border: 0;
  border-left: 6px solid var(--deep);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-block: var(--space-heading);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3, .callout h4 {
  margin-top: 0; margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.011em;
}
.callout--accent { border-left-color: var(--deep); background: var(--color-white); box-shadow: none; }

.short-version {
  background: var(--color-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-block: var(--space-heading);
}
.short-version > :last-child { margin-bottom: 0; }
.short-version__label {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}
.short-version p { font-size: var(--text-base); line-height: 1.65; margin: 0; }

.prose { max-width: var(--measure); }
.prose--centred { margin-inline: auto; }
.prose--centred > .callout:first-child { margin-top: 0; }

/* A step down from one block to the next: a deep-teal disc with an amber
   arrow, the same pairing as the icon discs on the cards. */
.flow-arrow {
  width: 2.75rem; height: 2.75rem;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--deep);
  color: var(--color-white);
}
.flow-arrow svg { width: 1.3rem; height: 1.3rem; }
/* The illustrated version: a 3D amber arrow, decorative only. */
.flow-arrow-art { display: block; width: auto; height: 5rem; margin: 0 auto 1.25rem; }
/* Inside an article an H2 is a subheading, not a section title: smaller, and
   with more room above it than below so it groups with the text it leads. */
.prose > h2 { margin-top: 2.75rem; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.2; }
.prose > h3 { margin-top: 2rem; }
.prose > h4 { margin-top: 1.75rem; }
.prose > h2:first-child, .prose > h3:first-child, .prose > h4:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li::marker { color: var(--deep); }
.prose strong { font-weight: 600; }

.next-steps { border-top: 1px solid var(--color-border); margin-top: 2.5rem; padding-top: var(--space-heading); }

.toc {
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.toc h2 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--caption-fg);
  margin-bottom: 0.75rem;
}
.toc ol { margin: 0; padding-left: 1.3rem; font-size: var(--text-sm); }
.toc li::marker { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   19. FAQ — +/− circle affordance, as in the mock
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 0;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.011em;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  translate: 0 -50%;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--deep);
  color: var(--deep);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35rem;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.faq details[open] summary::after {
  content: "\2212";
  background: var(--deep);
  border-color: var(--deep);
  color: var(--color-white);
}
.faq summary:hover { color: var(--navy); }
.faq summary:hover::after { border-color: var(--deep); color: var(--deep); }
.faq details[open] summary:hover::after { color: var(--ink); }
.faq details > div { padding-bottom: 1.25rem; max-width: var(--measure); font-size: var(--text-sm); line-height: 1.65; }
.faq details > div > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20. CONTACT BLOCKS
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .contact-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } }

.contact-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 1.35rem;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.contact-card > :last-child { margin-bottom: 0; }
.contact-card dl { margin: 0; }
.contact-card dt {
  font-family: var(--font-decorative);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption-fg);
  margin-bottom: 0.35rem;
}
.contact-card dd { margin: 0 0 1.15rem; font-weight: 500; }
.contact-card dd:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   21. CTA BAND — full-bleed brand orange.
   brand-dark, not brand: white body text is 4.21:1 on brand and 5.31:1 on
   brand-dark. Subtext stays at 90% white or above (4.60:1).
   -------------------------------------------------------------------------- */
/* The closing call to action: a dark navy panel with white text
   and the orange primary button — the same pairing as the rest of the site.
   (A page that nests .cta-band inside a .container, like
   find-an-installer.html, can add its own border-radius via an inline style.) */
.cta-band {
  background: var(--navy);             /* the dark blue: white 12.85:1 */
  color: var(--color-white);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-radius: 0;
  margin-inline: 0;
}
/* As a page-level section (homepage, Renewables) the band is a contained
   navy panel on the page ground, set apart from the blue footer. */
section.cta-band { background: none; padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Straight after another section the band would add its own top padding to
   that section's bottom padding (double the gap); share one gap instead. */
.section + section.cta-band { padding-top: 0; }
section.cta-band .cta-band__inner {
  background: var(--navy);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  max-width: none;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  max-width: 68rem;
  margin-inline: auto;
}
.cta-band h2 { color: var(--color-white); margin-bottom: 0.4rem; font-size: clamp(var(--text-xl), 1.1rem + 1vw, var(--text-3xl)); }
.cta-band p { color: rgb(255 255 255 / 0.92); margin: 0; font-size: var(--text-sm); line-height: 1.6; max-width: 52ch; }
/* grow: 0 — this used to be flex: 1 1 22rem, which stretched the text box
   to fill all the leftover row width (invisibly, since the visible text
   stayed narrow), shoving the buttons away with an empty-looking gap
   between them. Fixed width + no grow, then .cta-band__inner centers the
   {text, buttons} pair as one snug cluster instead. */
.cta-band__text { flex: 0 1 26rem; }

/* On the blue band the orange button leads; the ghost button is secondary. */
.cta-band a:not(.btn) { color: var(--color-white); }
.cta-band .btn--on-dark { background: var(--orange); color: var(--color-white); }
.cta-band .btn--on-dark:hover { background: var(--orange-hover); color: var(--color-white); }
.cta-band .btn--ghost-on-dark { border-color: rgb(255 255 255 / 0.7); color: var(--color-white); }
.cta-band .btn--ghost-on-dark:hover { background: rgb(255 255 255 / 0.14); color: var(--color-white); }

/* --------------------------------------------------------------------------
   22. FOOTER — dark, as in the mock
   -------------------------------------------------------------------------- */
/* The footer sits on deep blue, which is lighter than the old near-black, so
   the muted whites had to come up: 0.62 alpha gives only 4.45:1 here where it
   gave 7.25:1 before. The regulatory block is legally required text. */
.site-footer {
  background: var(--deep);
  color: rgb(255 255 255 / 0.92);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.site-footer a { color: rgb(255 255 255 / 0.92); font-weight: 400; text-decoration: none; }
.site-footer a:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; }

.site-footer__top {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.25rem;
}
@media (min-width: 44rem) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__top { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2.5rem; } }

.site-footer__blurb { font-size: var(--text-xs); line-height: 1.7; color: rgb(255 255 255 / 0.92); max-width: 32ch; }
.site-footer__mark { margin-bottom: 1.15rem; }
.site-footer__mark .logo { margin-right: 0; }
.site-footer__mark .logo img { height: 2.625rem; }

.footer-frn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);   /* on its own light tint, so full white */
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.75rem;
  line-height: 1.3;
}
.footer-frn svg { width: 0.85rem; height: 0.85rem; color: var(--color-white); flex-shrink: 0; }

.site-footer__col h2 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-white);
  margin-bottom: 0.9rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.site-footer__col li { margin: 0 0 0.6rem; }

/* Regulatory block — required disclosures, identical on every page. */
.regulatory {
  padding-top: 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.92);
  max-width: 100ch;
}
.regulatory p { margin: 0 0 0.75rem; }
.regulatory strong { color: rgb(255 255 255 / 0.92); font-weight: 600; }
.regulatory a { color: rgb(255 255 255 / 0.92); text-decoration: underline; }

.site-footer__legal {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.92);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   23. DRAFT MARKERS  ←—— delete before publication
   -------------------------------------------------------------------------- */
.tbc {
  background: var(--tbc-bg);
  color: var(--tbc-fg);
  border-bottom: 1px dashed var(--tbc-border);
  font-style: italic;
  font-weight: 500;
  padding: 0 0.2em;
  border-radius: 2px;
}
.tbc::before { content: "⚠ "; font-style: normal; }

/* --------------------------------------------------------------------------
   25. CHIPS & UTILITIES
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-blue-700);
  background: var(--color-blue-50);
  color: var(--color-blue-900);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pill--phase2 { border-color: var(--deep); background: var(--color-white); color: var(--ink); }
.pill--new { border-color: var(--color-success); background: var(--color-success-light); color: var(--color-green-900); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-muted { color: var(--color-text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.lead { font-size: var(--text-base); line-height: 1.65; color: var(--color-text-secondary); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.section-intro { max-width: 60ch; margin-bottom: 2rem; }
.section-intro > :last-child { margin-bottom: 0; }
.section-intro p { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   26a. ENQUIRY FORM
   Pill inputs per the brand pack. The fields on the enquiry page are
   currently `disabled` on purpose: the form has no endpoint, and a form that
   looks live would collect real personal data and drop it on the floor.
   -------------------------------------------------------------------------- */
.form-card {
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.form-card h2, .form-card h3 { font-size: var(--text-xl); margin-bottom: 0.4rem; }
.form-card__intro { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 1.25rem; }

.field { margin-bottom: 1.1rem; }
.field > label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.field__hint { display: block; font-size: var(--text-xs); color: var(--caption-fg); margin-top: 0.35rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-body);
  background: var(--color-white);
  border: 2px solid rgb(6 54 74 / 0.18);
  border-radius: var(--radius-full);
  padding: 0.65rem 1rem;
  min-height: 2.625rem;
}
.field select { appearance: none; padding-right: 2.25rem; }
.field textarea {
  border-radius: var(--radius-xl);   /* a pill would look wrong at four rows */
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.55;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 1px;
  border-color: var(--color-ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--color-disabled);
  color: var(--color-disabled-fg);
  cursor: not-allowed;
}
.field--check { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; align-items: start; }
.field--check input { margin: 0.2rem 0 0; }
.field--check label { font-weight: 400; font-size: var(--text-sm); margin: 0; }

.form-card .btn[disabled] {
  background: var(--color-disabled);
  color: var(--color-disabled-fg);
  border-color: var(--color-disabled);
  cursor: not-allowed;
}
.form-card .btn[disabled]:active { scale: 1; }

/* --------------------------------------------------------------------------
   26b. AT A GLANCE / RELATED
   Charts and related-article cards break out of the reading column, which is
   why they sit outside .prose in the markup.
   -------------------------------------------------------------------------- */
.glance {
  border: 0;
  border-left: 6px solid var(--deep);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  padding: 1.35rem 1.5rem;
  margin-block: var(--space-heading);
}
.glance__title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin: 0 0 0.9rem;
}
.glance .checklist { font-size: var(--text-sm); }

.chart-wrap, .related { margin-block: var(--space-section); }
.related__title { font-size: var(--text-xl); margin-bottom: var(--space-heading); }

/* --------------------------------------------------------------------------
   27. CHARTS
   Hand-built inline SVG (see tools/charts.py). Colours live here rather than
   in the markup so the plots follow the palette. Everything is sized in the
   viewBox, so the charts scale without a media query.
   -------------------------------------------------------------------------- */
.chart {
  margin: var(--space-section) 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chart__caption { padding: 1.5rem 1.5rem 0; }
.chart__caption h3 { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.chart__caption p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 62ch;
}
.chart__eyebrow {                     /* a smaller .eyebrow */
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: 0.4rem;
  line-height: 1.2;
  padding: 0.3rem 0.6rem;
  margin: 0 0 0.85rem;
}
@supports (text-box: trim-both cap alphabetic) {
  .chart__eyebrow { text-box: trim-both cap alphabetic; padding: 0.45rem 0.6rem; }
}

/* The plot scrolls rather than squashing below the width where the axis
   labels stop being legible. */
.chart__plot { padding: 1.25rem 1.5rem 0; overflow-x: auto; }
.chart__plot svg { width: 100%; min-width: 30rem; height: auto; display: block; }

.chart__grid { stroke: var(--color-border); stroke-width: 1; }
.chart__axis { stroke: var(--color-border-darker); stroke-width: 1.5; }
.chart__tick {
  font-family: var(--font-decorative);
  font-size: 12px;
  fill: var(--caption-fg);
}
.chart__axis-label {
  font-family: var(--font-decorative);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--caption-fg);
}
.chart__annotation {
  fill: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}
.chart__annotation--accent { fill: var(--deep); font-weight: 600; }
.chart__annotation--sm { font-size: 11px; }

.chart__band-cost { fill: rgb(20 28 31 / 0.06); }
.chart__band-payback { fill: rgb(0 113 154 / 0.16); }
.chart__wedge { fill: var(--deep); opacity: 0.14; }
.chart__line { stroke: var(--deep); stroke-width: 3; fill: none; }
.chart__line--soft { stroke: var(--deep); stroke-width: 1; opacity: 0.4; }
.chart__marker { fill: var(--chart-marker); stroke: var(--color-white); stroke-width: 2.5; }
.chart__bar { fill: var(--deep); }

/* Data table behind the plot — the figures have to be reachable without
   being able to see the chart. */
.chart__data { border-top: 1px solid var(--color-border); margin-top: 1.25rem; }
.chart__data summary {
  cursor: pointer;
  padding: 0.85rem 1.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-text);
  list-style: none;
}
.chart__data summary::-webkit-details-marker { display: none; }
.chart__data summary::before { content: "+ "; font-weight: 400; }
.chart__data[open] summary::before { content: "\2212 "; }
.chart__data summary:hover { color: var(--brand-text-hover); text-decoration: underline; text-underline-offset: 4px; }
.chart__data > div { padding: 0 1.5rem 1.25rem; overflow-x: auto; }
.chart__data table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.chart__data caption {
  text-align: left;
  font-size: var(--text-xs);
  color: var(--caption-fg);
  padding-bottom: 0.6rem;
}
.chart__data th, .chart__data td {
  text-align: left;
  padding: 0.45rem 0.75rem 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.chart__data thead th { font-weight: 600; color: var(--color-text-secondary); font-size: var(--text-xs); }
.chart__data tbody th { font-weight: 500; }

.chart__note {
  margin: 0;
  padding: 1rem 1.5rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   26. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .media, .media-cluster { display: none !important; }
  .chart { break-inside: avoid; box-shadow: none !important; }
  .chart__data { display: none !important; }   /* the plot prints; the table would duplicate it */
  body { font-size: 11pt; color: #000; }
  .hero::before { display: none; }
  .hero, .page-header { background: #fff !important; }
  .cta-band, .site-footer, .figure-panel, .choice-card--dark, .rep-strip {
    background: #fff !important; color: #000 !important;
  }
  .cta-band h2, .cta-band p, .site-footer a, .regulatory,
  .figure-panel p, .figure-panel__figure { color: #000 !important; }
  .card, .contact-card, .rep-example, .testimonial { box-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}