/* ---------------------------------------------------------------------------
   marineaircon — site styles.

   Layered on top of the Nocturne design system (_ds/nocturne-<id>/styles.css),
   which owns the components (.btn, .card, .field, .input, .table, .seg …).
   This file carries two things only:
     1. the theme overrides that retune Nocturne to the marine palette, and
     2. the page-level layout the design canvas expressed as inline styles.
   Take every colour, size and radius from a token — never a raw hex.
--------------------------------------------------------------------------- */

/* --- 1. Theme ------------------------------------------------------------

   Two themes, both real. The site is read on a dock and aboard, often in
   bright sun by someone making a five-figure decision — which is why nautical
   charts are printed pale in the first place. The light theme is the default
   for anyone whose system asks for it; the dark ground is the brand and is
   kept exactly as the design canvas set it.

   Nocturne is fully token-driven, so redefining these carries every component
   with it. Nothing below hard-codes a colour outside this block.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Marine ramp, shared by both themes. */
  --marine-100: #ecfbff;
  --marine-200: #cff4fd;
  --marine-300: #a6e8fa;
  --marine-400: #6fd8f5;
  --marine-500: #3ecbf0;
  --marine-600: #2aa5c9;
  --marine-700: #1f7d99;
  --marine-800: #17566a;
  --marine-900: #12384a;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1200px;
}

/* Light — the default where the system asks for it. Paper is biased blue
   rather than cream: cream with a serif is the commonest generated look and
   this is a chart, not a letterpress invitation. */
:root {
  --color-bg: #eef2f5;
  --color-surface: #ffffff;
  --color-surface-2: #e3eaef;
  --color-text: #0d1a24;
  --color-divider: color-mix(in srgb, #0d1a24 14%, transparent);

  /* Derived from --color-text, so they flip with the theme on their own rather
     than needing a value in each of the three theme blocks. A control's border
     is not a rule: it wants to be seen. */
  /* Fraunces sets headlines; Inter keeps every number. A serif's figures are
     drawn for prose, and this site's columns of prices depend on Inter's
     tabular ones lining up — so the split is by job, not by size. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* The second temperature. The palette was navy and cyan and nothing else,
     which left it nowhere to go. Teak against seawater is the pairing the
     subject already has; kept low-chroma so it reads as warm grey rather than
     as the cream every generated page reaches for. */
  --sand-100: #f6f2ec;
  --sand-200: #ece5da;
  --sand-300: #d9cdba;
  --sand-600: #8f7551;
  --sand-800: #4a3b27;
  --band-warm: #f1ece4;

  /* Chart ramp. An ordinal scale — one hue, monotone lightness — because every
     series on this site is ordered: cool→hot climates, equipment→parts→labour.
     Validated against a white card surface (monotone L, ΔL ≥ 0.06 per step,
     light end ≥ 2:1) rather than picked by eye; the dark block re-steps rather
     than flipping, since the anchor moves with the ground. */
  --chart-1: var(--marine-600);
  --chart-2: var(--marine-700);
  --chart-3: var(--marine-900);
  --chart-grid: color-mix(in srgb, var(--color-text) 10%, transparent);
  --chart-axis: color-mix(in srgb, var(--color-text) 45%, transparent);

  --color-control-line: color-mix(in srgb, var(--color-text) 38%, transparent);
  --color-control-well: color-mix(in srgb, var(--color-text) 5%, transparent);
  --color-row-hover: color-mix(in srgb, var(--color-text) 6%, transparent);

  /* Cyan at #3ecbf0 fails contrast on pale ground, so light gets a darker
     step of the same hue rather than a different colour. */
  --color-accent: #0b6d8d;
  --color-accent-2: #0b6d8d;
  --color-accent-100: var(--marine-900);
  --color-accent-200: var(--marine-800);
  --color-accent-300: var(--marine-700);
  --color-accent-400: #0a5c78;
  --color-accent-500: #0b6d8d;
  --color-accent-600: var(--marine-300);
  --color-accent-700: var(--marine-400);
  --color-accent-800: var(--marine-200);
  --color-accent-900: var(--marine-100);

  --color-neutral-100: #0d1a24;
  --color-neutral-200: #1d2c38;
  --color-neutral-300: #33454f;
  --color-neutral-400: #4e626d;
  --color-neutral-500: #6c8090;
  --color-neutral-600: #93a6b3;
  --color-neutral-700: #bccbd5;
  --color-neutral-800: #d6e0e7;
  --color-neutral-900: #e8eef2;

  --color-section: #0e3557;
  --color-section-glow: #17507f;
  --color-section-ghost: #2a5d9c;

  --warn: #9a4c05;
  --page-wash:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--marine-200) 55%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, var(--marine-300) 22%, transparent), transparent 55%);
  --nav-veil: color-mix(in srgb, #eef2f5 72%, transparent);
  --shadow-lift: 0 1px 2px rgb(13 26 36 / 0.05), 0 8px 24px -8px rgb(13 26 36 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #141a2e;
    --color-surface: #1d2438;
    --color-surface-2: #232b42;
    --color-text: #e9edf3;
    --color-divider: color-mix(in srgb, #e9edf3 16%, transparent);

    --chart-1: var(--marine-600);
    --chart-2: var(--marine-500);
    --chart-3: var(--marine-300);
    --band-warm: #221d16;

    --color-accent: var(--marine-500);
    --color-accent-2: #5fd3f2;
    --color-accent-100: var(--marine-100);
    --color-accent-200: var(--marine-200);
    --color-accent-300: var(--marine-300);
    --color-accent-400: var(--marine-400);
    --color-accent-500: var(--marine-500);
    --color-accent-600: var(--marine-600);
    --color-accent-700: var(--marine-700);
    --color-accent-800: var(--marine-800);
    --color-accent-900: var(--marine-900);

    --color-neutral-100: #f3f5fe;
    --color-neutral-200: #e4e7f5;
    --color-neutral-300: #cfd3e5;
    --color-neutral-400: #b2b6ca;
    --color-neutral-500: #9397ab;
    --color-neutral-600: #75798c;
    --color-neutral-700: #595d6c;
    --color-neutral-800: #3f424d;
    --color-neutral-900: #292b31;

    --color-section: #14305c;
    --color-section-glow: #1b4680;
    --color-section-ghost: #2a5d9c;

    --warn: #ffb14e;
    --page-wash:
      radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--marine-900) 55%, transparent), transparent 60%),
      radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%);
    --nav-veil: color-mix(in srgb, #141a2e 70%, transparent);
    --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -10px rgb(0 0 0 / 0.5);
  }
}

/* An explicit choice beats the system setting, in both directions. */
:root[data-theme="dark"] {
  --color-bg: #141a2e; --color-surface: #1d2438; --color-surface-2: #232b42;
  --color-text: #e9edf3; --color-divider: color-mix(in srgb, #e9edf3 16%, transparent);
  --chart-1: var(--marine-600); --chart-2: var(--marine-500); --chart-3: var(--marine-300);
  --band-warm: #221d16;
  --color-accent: var(--marine-500); --color-accent-2: #5fd3f2;
  --color-accent-100: var(--marine-100); --color-accent-200: var(--marine-200);
  --color-accent-300: var(--marine-300); --color-accent-400: var(--marine-400);
  --color-accent-500: var(--marine-500); --color-accent-600: var(--marine-600);
  --color-accent-700: var(--marine-700); --color-accent-800: var(--marine-800);
  --color-accent-900: var(--marine-900);
  --color-neutral-100: #f3f5fe; --color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca; --color-neutral-500: #9397ab; --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c; --color-neutral-800: #3f424d; --color-neutral-900: #292b31;
  --color-section: #14305c; --color-section-glow: #1b4680; --color-section-ghost: #2a5d9c;
  --warn: #ffb14e;
  --page-wash:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--marine-900) 55%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%);
  --nav-veil: color-mix(in srgb, #141a2e 70%, transparent);
  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -10px rgb(0 0 0 / 0.5);
}

/* Text tints, derived so they follow whichever theme is active. */
:root {
  --text-78: color-mix(in srgb, var(--color-text) 82%, transparent);
  --text-72: color-mix(in srgb, var(--color-text) 78%, transparent);
  --text-70: color-mix(in srgb, var(--color-text) 76%, transparent);
  --text-64: color-mix(in srgb, var(--color-text) 70%, transparent);
  --text-60: color-mix(in srgb, var(--color-text) 66%, transparent);
  --text-55: color-mix(in srgb, var(--color-text) 62%, transparent);
  --text-50: color-mix(in srgb, var(--color-text) 58%, transparent);
}

html { scroll-behavior: smooth; }
main section[id], main h2[id] { scroll-margin-top: 96px; }

/* The `hidden` attribute must beat the component display rules below
   (.card is flex, .btn is inline-flex, .enquire form is grid) — without this
   every element we toggle with `hidden` stays on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  text-wrap: pretty;
  /* 18px. This is read at arm's length on a phone in sunlight, and the whole
     scale above it was grown to match rather than the base alone — a bigger
     base under unchanged headings just flattens the hierarchy. */
  font-size: 18px;
  line-height: 1.62;
  background: var(--page-wash), var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-400); }

/* Feedback belongs on the press, not the release. */
.btn { transition: transform 100ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out; }
.btn:active { transform: scale(0.975); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:active { transform: none; }
}

/* Translucency is a material, not a requirement. Where it is turned down,
   the surfaces go solid rather than merely less blurred. */
@media (prefers-reduced-transparency: reduce) {
  .site-nav { background: var(--color-bg); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --color-divider: color-mix(in srgb, var(--color-text) 42%, transparent); }
  .card, .price-card, .pick, .port-card { border: 1px solid var(--color-divider); }
  .site-nav { background: var(--color-bg); backdrop-filter: none; }
}

/* Skip link — keyboard users land on the content, not the nav, every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 10px 16px; background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* --- 2. Shell ----------------------------------------------------------- */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.site-nav {
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
  padding-block: 14px;
  flex-wrap: wrap;
  gap: 8px 18px;
  /* A floating material with content passing under it, rather than an opaque
     bar that consumes a strip. The separation comes from the blur and a soft
     edge below, not from a 1px line. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-veil);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.site-nav::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 55%, transparent), transparent);
  pointer-events: none;
}
.site-nav a:not(.nav-brand):not(.btn) {
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.site-nav a:not(.nav-brand):not(.btn):hover { border-bottom-color: var(--color-accent); }
.site-nav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.site-nav .nav-brand {
  font-size: 17px; display: inline-flex; align-items: center; gap: 12px;
  color: var(--color-text);
}
.site-nav .nav-brand img { height: 40px; width: auto; display: block; }
.site-nav .brand-tld { font-weight: 400; color: var(--text-55); font-size: 13px; }
.site-nav a { white-space: nowrap; }

.powered-strip {
  max-width: var(--measure); margin: 0 auto; padding: 9px var(--gutter) 8px;
  display: flex; justify-content: flex-end; align-items: center; gap: 9px;
  min-height: 48px; color: var(--text-70); font-size: 13px; line-height: 18px;
}
.powered-strip > span { display: inline-flex; gap: .35em; }
.powered-strip .powered-label { color: var(--text-55); }
.powered-strip img { width: 38px; height: 38px; object-fit: contain; }

.site-footer {
  max-width: var(--measure); margin: 0 auto; padding: 56px var(--gutter);
  font-size: 13px; line-height: 22px; color: var(--text-55);
  display: grid; gap: 28px;
}
/* The footer once carried the full lockup — print artwork with the wordmark
   baked in, which at 72 px was an unreadable smear. The emblem alone reads at
   any size, and the name is already in the line of type beside it. */
.site-footer img { height: 34px; width: auto; display: block; }
.site-footer .footer-main { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
.site-footer .foot-id { display: flex; align-items: center; gap: 18px; }
.site-footer .foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer .foot-links a { color: inherit; text-decoration: none; }
.site-footer .foot-links a:hover { color: var(--color-accent); }
.site-footer .footer-trust {
  padding-top: 22px; border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px;
}
.site-footer .footer-trust > span:last-child { max-width: 68ch; }
.site-footer .footer-trust a { color: var(--text-70); }
.site-footer .footer-powered {
  display: inline-flex; align-items: center; gap: 18px; color: var(--color-text);
  min-width: min(100%, 300px); padding: 14px 22px 14px 16px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-lift);
}
.site-footer .footer-powered img { width: 92px; height: 92px; object-fit: contain; flex: none; }
.site-footer .footer-powered > span { display: grid; gap: 2px; }
.site-footer .footer-powered small {
  color: var(--text-55); font-size: 11px; line-height: 16px;
  letter-spacing: .07em; text-transform: uppercase;
}
.site-footer .footer-powered strong {
  font-family: var(--font-display); font-size: 21px; line-height: 27px;
  font-weight: 600; letter-spacing: -.01em;
}

.form-intro {
  margin: 0 0 24px; padding: 14px 16px; border-left: 2px solid var(--color-accent);
  background: var(--color-row-hover); color: var(--text-78); font-size: 14px; line-height: 21px;
}

.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.resource-card { min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.resource-card .card-body { flex: 1; }
.resource-link { margin-top: 18px; font-size: 14px; font-weight: 600; }
.resource-link::after { content: " ↗"; }

/* --- 3. Repeated design elements ---------------------------------------- */

/* Accent eyebrow with its 44px rule. */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 28px;
}
.kicker::before { content: ""; width: 44px; height: 1px; background: var(--color-accent); flex: none; }

/* Rules fade out at their ends rather than stopping cleanly — a Nocturne rule. */
.rule { height: 1px; background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent); }
.rule-strong { height: 1px; background: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent); }
.rule-flat { height: 1px; background: var(--color-divider); }

.h2 { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 72; font-size: 36px; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }
.lede { font-size: 19px; line-height: 31px; max-width: 58ch; margin: 28px 0 0; color: var(--text-78); }
.body { font-size: 17px; line-height: 30px; color: var(--text-78); margin: 24px 0 0; max-width: 60ch; }
.body + .body { margin-top: 14px; }
.note { font-size: 15.5px; line-height: 26px; margin: 28px 0 0; color: var(--text-70); max-width: 60ch; }

.tnum { font-feature-settings: 'tnum' 1; }

/* The big display figure used by the stat band and both calculators. */
.figure-xl {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(44px, 4.4vw, 62px); line-height: 1; margin: 0;
  font-feature-settings: 'tnum' 1; letter-spacing: -0.02em;
}

.btn-row { display: flex; gap: 8.4px; flex-wrap: wrap; }
.btn-row .btn { white-space: nowrap; text-decoration: none; min-height: 44px; }
.btn-row .btn-primary { padding-inline: 16px; }

/* --- 4. Home ------------------------------------------------------------ */

.hero {
  padding: 92px 0 84px;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 42px clamp(24px, 3vw, 56px); align-items: center;
}
/* Sized so "Quiet nights at anchor." holds one line at every width it is
   given. The scale grew this session and the old clamp broke the headline into
   five lines, which is not a headline. */
.hero h1 {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 144;
  font-size: clamp(42px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -0.018em;
  margin: 0 0 0 -0.04em; max-width: 15ch;
}
.hero h1 span { display: block; }
.hero p { font-size: 18px; line-height: 30px; max-width: 56ch; margin: 24px 0 0; color: var(--text-72); }
/* The deck: the line the headline used to be, now doing its job under a
   conventional H1 instead of instead of one. */
.hero .hero-deck {
  font-size: 22px; line-height: 32px; letter-spacing: -0.005em;
  color: var(--color-text); margin-top: 22px; max-width: 44ch;
}
.hero .btn-row { margin-top: 28px; }
.hero figure { margin: 0; justify-self: end; width: 100%; max-width: 620px; }
.hero figure img { width: 100%; height: auto; display: block; }
.hero-shortcuts {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  margin-top: 22px; font-size: 14px; line-height: 22px;
}
.hero-shortcuts span { color: var(--text-55); }
.hero-shortcuts a { color: var(--text-72); text-decoration-thickness: 1px; }
.hero-shortcuts a:hover { color: var(--color-accent); }

/* The one full-bleed saturated band on the page — presence at page scale. */
.stat-band {
  background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
  padding: 70px 0;
}
.stat-band .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 42px 28px;
}
.stat-num {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(40px, 4vw, 58px); line-height: 1.1; margin: 0 0 0 -0.055em;
  font-feature-settings: 'tnum' 1;
}
.stat-label {
  font-size: 13px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-72); margin: 14px 0 0;
}

.steps { padding: 98px 0 70px; }
.step {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px clamp(24px, 4vw, 72px); align-items: baseline; padding: 42px 0;
}
.step h2 {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 48;
  font-size: 27px; line-height: 34px; letter-spacing: -0.008em; margin: 0;
  display: flex; gap: 18px; align-items: baseline;
}
.step h2 .n { font-size: 16px; color: var(--color-accent); font-feature-settings: 'tnum' 1; flex: none; }
.step p { font-size: 17px; line-height: 30px; margin: 0; color: var(--text-78); max-width: 52ch; }

.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(24px, 5vw, 96px); align-items: center; padding: 56px 0 84px;
}
.split h2 { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 72; font-size: 36px; line-height: 46px; letter-spacing: -0.012em; margin: 0; }
.split p { font-size: 17px; line-height: 30px; color: var(--text-78); margin: 24px 0 0; max-width: 48ch; }
.split figure { margin: 0; }

.photo-frame {
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}
.photo-frame picture,
.photo-frame img { display: block; width: 100%; }
.photo-frame img { height: auto; object-fit: cover; }
.photo-frame figcaption {
  padding: 12px 16px 14px;
  font-size: 13px; line-height: 20px; color: var(--text-60);
}
.hero-art img { aspect-ratio: 1.6 / 1; object-fit: cover; }
.editorial-photo { max-width: 900px; margin: 36px 0 30px; }
.editorial-photo img { aspect-ratio: 4 / 3; }
.maintenance-photo { max-width: 1060px; margin: 48px 0 6px; }
.maintenance-photo img { aspect-ratio: 3 / 2; }

.pull { padding: 0 0 84px; }
.pull blockquote {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: 'opsz' 96;
  font-size: clamp(27px, 2.9vw, 38px); line-height: 1.28; letter-spacing: -0.008em;
  max-width: 34ch; margin: 0;
}
.pull cite { display: block; font-style: normal; font-size: 17px; line-height: 30px; color: var(--text-64); margin: 42px 0 0; }

.enquire {
  padding: 70px 0 56px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 42px clamp(24px, 5vw, 96px);
}
.enquire h2 { font-size: 27px; line-height: 34px; margin: 0; }
.enquire p { font-size: 17px; line-height: 30px; color: var(--text-78); margin: 24px 0 0; max-width: 44ch; }
.enquire .fine { font-size: 13px; line-height: 22px; color: var(--text-60); }
.enquire form { display: grid; gap: 14px; max-width: 480px; align-content: start; }
.enquire .submit-row { display: flex; gap: 8.4px; align-items: center; flex-wrap: wrap; }
.enquire .submit-row span { font-size: 12px; color: var(--text-55); }

/* --- 5. Guide ----------------------------------------------------------- */

.guide-toc { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 36px; font-size: 15px; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }

.page-head { padding: 84px 0 56px; }
.page-head h1 {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 120;
  font-size: clamp(40px, 5vw, 70px); line-height: 1.06; letter-spacing: -0.014em;
  margin: 0 0 0 -0.06em; max-width: 18ch;
}

.sec {
  padding: 70px 0;
  display: grid; grid-template-columns: minmax(64px, 160px) minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 72px);
}
.sec > .sec-n { font-size: 15px; color: var(--color-accent); margin: 0; font-feature-settings: 'tnum' 1; }
.sec:last-of-type { padding-bottom: 84px; }

.card-grid { display: grid; gap: 8.4px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
/* 260px min left a third card stranded on its own row once the document
   column narrowed to make room for the rail. */
.card-grid-wide { display: grid; gap: 14px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); }
.card-grid-wide .card { padding: 22px; gap: 10px; }
.card-grid-wide .card-title { font-size: 22px; }
.card-grid-wide .card-body { font-size: 15.5px; line-height: 24px; }
.for-against { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--text-70); }
.for-against + .for-against { margin-top: 0; }
.for-against strong { color: var(--color-text); font-weight: 500; }
.typical { margin: 6px 0 0; font-size: 12px; color: var(--text-55); }

/* Calculator: controls beside a result card. */
.calc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start;
}
.calc-controls { display: grid; gap: 22px; align-content: start; }
.calc-controls input[type="range"] { width: 100%; accent-color: var(--color-accent); }
.calc-controls .radio-group { display: grid; gap: 0; padding-top: 4px; }
.calc-controls .radio-group .radio { align-items: flex-start; line-height: 18px; }
.calc-controls .radio-group .dot { margin-top: 1px; }
.calc-controls .checkbox .dot { border-radius: 4px; }
.calc-out { padding: 24px; gap: 14px; }
.calc-out .sub { margin: 0; font-size: 14px; color: var(--text-70); }
.calc-out .advice { margin: 0; font-size: 14px; line-height: 22px; }
.calc-out .caveat { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-55); }
.calc-out .btn { align-self: start; margin-top: 6px; white-space: nowrap; text-decoration: none; }
.hint { margin: 6px 0 0; font-size: 12px; color: var(--text-55); }
.label-dim { color: var(--text-50); }
.label-val { color: var(--color-text); font-feature-settings: 'tnum' 1; }

.noise { display: grid; gap: 10px; margin-top: 36px; max-width: 640px; }
.noise-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 14px; align-items: center; }
.noise-row .label { font-size: 15px; line-height: 22px; }
.noise-track { height: 6px; border-radius: 3px; background: var(--color-neutral-900); margin-top: 6px; overflow: hidden; }
.noise-fill { height: 100%; background: var(--color-accent-700); border-radius: 3px; }
.noise-db { font-size: 14px; font-feature-settings: 'tnum' 1; text-align: right; color: var(--text-78); }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin-top: 24px; }
.two-col p { font-size: 17px; line-height: 30px; color: var(--text-78); margin: 0; }
.two-col strong { color: var(--color-text); font-weight: 500; }

.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px clamp(24px, 4vw, 56px); margin: 36px 0 0; }
.glossary dt { font-family: var(--font-heading); font-weight: 500; font-size: 16.5px; line-height: 24px; }
.glossary dd { margin: 4px 0 0; font-size: 15px; line-height: 24px; color: var(--text-72); }

.scroll-x { overflow-x: auto; margin-top: 28px; }

/* --- 6. Compare --------------------------------------------------------- */

.quiz {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px clamp(24px, 4vw, 72px); align-items: start; padding: 0 0 70px;
}
.quiz-out { padding: 24px; gap: 14px; min-height: 200px; }
.quiz-out .card-title { font-size: 26px; letter-spacing: -0.01em; }
.quiz-out p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-78); }
.quiz-out .btn { align-self: start; margin-top: 6px; white-space: nowrap; }

.table-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; }
.table-head p { font-size: 15px; line-height: 24px; color: var(--text-64); margin: 10px 0 0; max-width: 60ch; }
.table-head .seg { flex: 0 0 100%; display: flex; max-width: max-content; overflow-x: auto; }
.table-head .seg-opt { white-space: nowrap; }
#compare-table { padding: 70px 0 42px; }
#compare-table .table { min-width: 860px; }
.unit-brand { display: block; font-weight: 500; }
.unit-model { display: block; font-size: 12px; color: var(--text-60); }
.pick { gap: 0; }
.pick .dot { border-radius: 4px; }
.selection-hint { font-size: 12px; line-height: 18px; color: var(--text-50); margin: 14px 0 0; }

#compare-side { padding: 14px 0 84px; }
.side-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.side-grid .card { padding: 22px; gap: 12px; }
.side-grid .card-title { font-size: 20px; }
.side-model { font-size: 13px; color: var(--text-60); margin-top: -8px; }
.spec { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; line-height: 20px; }
.spec .k { color: var(--text-60); }
.spec .v { text-align: right; font-feature-settings: 'tnum' 1; }
.verdict { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--text-72); }

/* --- 7. Narrow screens -------------------------------------------------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 56px 0; }
  .hero figure { justify-self: start; max-width: 100%; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 56px 0; }
  .sec > .sec-n { margin-bottom: 0; }
  .steps { padding: 70px 0 56px; }
}

@media (max-width: 700px) {
  .powered-strip { justify-content: flex-start; padding-block: 7px; min-height: 44px; }
  .powered-strip img { width: 32px; height: 32px; }
  .resource-grid { grid-template-columns: 1fr; }
  .site-footer .footer-main, .site-footer .footer-trust { justify-content: flex-start; }
  .site-footer .footer-powered { width: 100%; padding: 12px 18px 12px 14px; }
  .site-footer .footer-powered img { width: 78px; height: 78px; }
}

@media (max-width: 560px) {
  .site-footer { justify-content: flex-start; }
  .site-footer img { height: 40px; }
  .hero { padding: 42px 0 48px; gap: 34px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .hero-shortcuts { gap: 8px 16px; }
  .hero-shortcuts span { flex-basis: 100%; }
  .stat-band { padding: 48px 0; }
  .stat-band .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .stat-num { font-size: clamp(28px, 8.5vw, 36px); }
  .stat-label { font-size: 11px; line-height: 15px; }
  .page-head { padding: 54px 0 42px; }
  .photo-frame { border-radius: var(--radius-md); }
}

/* --- 8. Breadcrumbs ------------------------------------------------------ */

.crumbs {
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  color: var(--text-60);
}
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 12px; }
.crumbs a { color: var(--text-70); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs .sep { color: var(--text-50); }
.crumbs [aria-current="page"] { color: var(--color-text); }

/* --- 9. Editorial pages -------------------------------------------------- */

/* A callout is the page speaking about itself — a caveat, a limit, a thing we
   would rather say out loud. Accent-tinted so it reads apart from body copy. */
.callout {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-left: 2px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-900) 40%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 68ch;
}
.callout p { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-78); }
.callout strong { color: var(--color-text); font-weight: 500; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 28px; }
.person {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; background: var(--color-surface); border-radius: var(--radius-md);
}
.person-role { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.person-name { font-family: var(--font-heading); font-weight: 500; font-size: 17px; line-height: 1.3; }
.person p { margin: 4px 0 0; font-size: 13.5px; line-height: 21px; color: var(--text-70); }

/* Label / explanation rows — a policy read as a set of answers, not prose. */
.checks-list { margin-top: 28px; border-top: 1px solid var(--color-divider); max-width: 74ch; }
.check-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--color-divider);
}
.check-k { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-accent); padding-top: 4px; }
.check-row p { margin: 0; font-size: 14.5px; line-height: 24px; color: var(--text-78); }

.pull-quote {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.32; letter-spacing: -0.01em;
  max-width: 30ch; margin: 24px 0 0;
}

.ask-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 60ch; }
.ask-list li {
  font-size: 14.5px; line-height: 23px; color: var(--text-78);
  padding-left: 18px; position: relative;
}
.ask-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--color-accent); }
.ask-list strong { color: var(--color-text); font-weight: 500; }

.steps-compact { display: grid; gap: 14px; margin-top: 24px; max-width: 60ch; }
.step-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; }
.step-c .step-n { font-size: 13px; color: var(--color-accent); font-feature-settings: 'tnum' 1; }
.step-c p { margin: 0; font-size: 14.5px; line-height: 23px; color: var(--text-78); }

/* --- 10. Contact --------------------------------------------------------- */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 42px clamp(24px, 5vw, 80px); padding: 56px 0 84px; align-items: start;
}
.contact-form-col { display: grid; gap: 0; align-content: start; }
.contact-form-col form { display: grid; gap: 14px; }
.contact-form-col .submit-row { display: flex; gap: 8.4px; align-items: center; flex-wrap: wrap; }
.contact-form-col .submit-row span { font-size: 12px; color: var(--text-55); }
.contact-form-col .fine { font-size: 13px; line-height: 21px; color: var(--text-60); margin: 0; }
.contact-form-col #enquiry-done { padding: 22px; }

/* Home hands the enquiry off to /contact/ rather than duplicating the form. */
.enquire-cta { display: grid; gap: 16px; align-content: start; }
.enquire-cta .fine { font-size: 13px; line-height: 21px; color: var(--text-60); margin: 0; }

/* --- 11. Cost pages ------------------------------------------------------ */

/* The headline figure. A cost page whose whole value is giving a number should
   lead with the number, above any prose. */
.price-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px; margin: 36px 0 0;
}
.price-card {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.price-card .who { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.price-card .fig {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1; letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1; margin: 2px 0;
}
.price-card .sub { font-size: 13px; line-height: 20px; color: var(--text-60); margin: 0; }
/* Some port facts are a sentence rather than a figure — let those wrap as text. */
.price-card .fig.fig-text { font-size: 19px; line-height: 26px; letter-spacing: -0.005em; hyphens: none; }

/* Confidence marker. Not decoration — these figures are not all the same kind
   of number, and the page says which is which. */
.conf {
  display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px; white-space: nowrap;
}
.conf-sourced     { background: var(--color-accent-800); color: var(--color-accent-100); }
.conf-derived     { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.conf-provisional { border: 1px solid var(--color-neutral-600); color: var(--text-70); }

.conf-key { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 20px 0 0; font-size: 13px; color: var(--text-70); }
.conf-key span.k { display: inline-flex; align-items: center; gap: 8px; }

/* Working shown: equipment + parts + labour = total, as a real table. */
.sum-table td.num { font-feature-settings: 'tnum' 1; white-space: nowrap; text-align: right; }
.sum-table td.total, .sum-table th.total { font-weight: 500; color: var(--color-text); }
.sum-table tr.is-total td { border-top: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent-900) 30%, transparent); }

/* A published correction, per the editorial policy. */
.correction {
  border-left: 3px solid var(--color-accent-400);
  background: color-mix(in srgb, var(--color-accent-900) 45%, transparent);
  padding: 18px 22px; margin: 28px 0 0; max-width: 70ch; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.correction .stamp { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: 8px; }
.correction p { margin: 0; font-size: 14.5px; line-height: 24px; color: var(--text-78); }
.correction p + p { margin-top: 10px; }

/* The flywheel: readers' real invoices are the only thing that will tighten
   these ranges, and asking is the whole mechanism. */
.ask-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px clamp(24px, 4vw, 56px); align-items: center;
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 28px clamp(22px, 3vw, 34px); margin: 42px 0 0;
}
.ask-quotes h2 { font-size: 22px; line-height: 28px; margin: 0; }
.ask-quotes p { font-size: 14.5px; line-height: 23px; color: var(--text-70); margin: 12px 0 0; }

/* Quote checker */
.qc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin-top: 36px; align-items: start; }
.qc-controls { display: grid; gap: 20px; align-content: start; }
.qc-out { padding: 24px; gap: 14px; }
.qc-verdict {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.015em; margin: 0;
}
.qc-band-in     { color: var(--color-accent-300); }
.qc-band-lowish, .qc-band-highish { color: var(--color-accent); }
.qc-band-low, .qc-band-high { color: var(--warn); }

/* Where the quote sits on the expected range. */
.qc-scale { margin: 4px 0 2px; }
.qc-track { position: relative; height: 8px; border-radius: 4px; background: var(--color-neutral-900); overflow: hidden; }
.qc-span { position: absolute; top: 0; bottom: 0; background: var(--color-accent-700); border-radius: 4px; }
.qc-mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--color-text); }
.qc-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-55); margin-top: 8px; font-feature-settings: 'tnum' 1; }
.qc-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-78); }
.qc-flags { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.qc-flags li { font-size: 13.5px; line-height: 21px; color: var(--text-70); padding-left: 16px; position: relative; }
.qc-flags li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--color-accent); }

/* Checklist used by the quote-contents page. */
.lines { margin: 28px 0 0; border-top: 1px solid var(--color-divider); }
.line-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px;
  padding: 15px 0; border-bottom: 1px solid var(--color-divider);
}
.line-item .name { font-size: 15px; font-weight: 500; }
.line-item .why { grid-column: 1 / -1; font-size: 13.5px; line-height: 21px; color: var(--text-70); margin: 0; }
.line-item .cost { font-size: 13px; color: var(--text-60); font-feature-settings: 'tnum' 1; white-space: nowrap; }
.line-item.omitted .name::after {
  content: "often left off"; margin-left: 10px; font-size: 10px; letter-spacing: 0.08em;
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
  color: var(--warn); font-weight: 600;
}

/* Four-card groups wrap 3 + 1 in the guide's content column, stranding the
   last card on its own row. Two-up fills both rows evenly. */
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* --- 12. Best-of picks --------------------------------------------------- */

.picks { display: grid; gap: 14px; margin-top: 8px; }

/* A pick is a ranked recommendation, not a card in a grid — the rank sits in
   its own column so the eye can run down the order. */
.pick {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 24px;
  background: var(--color-surface); border-radius: var(--radius-md); padding: 24px;
}
.pick-rank { display: flex; flex-direction: column; gap: 4px; }
.pick-n {
  font-family: var(--font-heading); font-weight: 500; font-size: 30px; line-height: 1;
  color: var(--color-accent); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em;
}
.pick-role { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-60); line-height: 16px; }

.pick-body { display: flex; flex-direction: column; gap: 12px; }
.pick-name { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.pick-name span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-60); margin-top: 4px; }

.pick-specs { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-60); }
.pick-specs b { color: var(--color-text); font-weight: 500; font-feature-settings: 'tnum' 1; }

.pick-why { margin: 0; font-size: 14.5px; line-height: 23px; color: var(--text-78); }

.pick-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 28px; }
.pick-cols h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 8px; font-family: var(--font-body); font-weight: 500; }
.pick-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pick-cols li { font-size: 13.5px; line-height: 20px; color: var(--text-70); padding-left: 15px; position: relative; }
.pick-cols li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--color-neutral-600); }
.pick-cols div:first-child li::before { background: var(--color-accent); }

.pick-watch { margin: 0; font-size: 13.5px; line-height: 21px; color: var(--text-70); padding-top: 12px; border-top: 1px solid var(--color-divider); }
.pick-watch strong { color: var(--color-text); font-weight: 500; }

@media (max-width: 640px) {
  .pick { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .pick-rank { flex-direction: row; align-items: baseline; gap: 10px; }
  .pick-n { font-size: 22px; }
}

/* --- 13. Head-to-head ---------------------------------------------------- */

.versus {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px; margin-top: 32px; align-items: stretch;
}
.vs-side { background: var(--color-surface); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.vs-side h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }
.vs-side .vs-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.vs-side p { margin: 0; font-size: 14.5px; line-height: 23px; color: var(--text-78); }
.vs-side ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vs-side li { font-size: 13.5px; line-height: 20px; color: var(--text-70); padding-left: 15px; position: relative; }
.vs-side li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--color-accent); }
.vs-side .vs-verdict { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-divider); font-size: 13.5px; line-height: 21px; color: var(--color-text); }

/* The one-line answer, before the detail. */
.verdict-lead {
  border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent-900) 45%, transparent);
  padding: 20px 24px; margin: 32px 0 0; max-width: 72ch; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.verdict-lead p { margin: 0; font-size: 16px; line-height: 26px; color: var(--color-text); }
.verdict-lead p + p { margin-top: 10px; font-size: 14.5px; color: var(--text-78); }

/* --- 14. Unit pages ------------------------------------------------------ */

.unit-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px clamp(24px, 4vw, 56px); align-items: start; }
.unit-spec { border-top: 1px solid var(--color-divider); }
.unit-spec .row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.unit-spec .row .k { color: var(--text-60); }
.unit-spec .row .v { font-feature-settings: 'tnum' 1; text-align: right; }

/* --- 15. FAQ ------------------------------------------------------------- */

.faq-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 34px clamp(24px, 4vw, 56px); }
.faq-group h2 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider);
  font-weight: 500;
}
.faq-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.faq-group li { display: grid; gap: 4px; }
.faq-group li a { font-size: 16.5px; line-height: 24px; text-decoration: none; }
.faq-group li a:hover { text-decoration: underline; }
.faq-group li span { font-size: 14px; line-height: 21px; color: var(--text-60); }

.faq-answer .body:first-child { margin-top: 0; }
.faq-links { display: flex; flex-wrap: wrap; gap: 8.4px; margin-top: 28px; }
.faq-links .btn { white-space: nowrap; text-decoration: none; }
.faq-related { margin-top: 8px; }

/* --- 16. Ports ----------------------------------------------------------- */

.port-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.port-card {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  background: var(--color-surface); border-radius: var(--radius-md); padding: 22px;
  border: 1px solid transparent; transition: border-color .12s ease;
}
.port-card:hover { border-color: var(--color-accent); }
.port-name { font-family: var(--font-heading); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: var(--color-text); }
.port-region { font-size: 13px; color: var(--text-60); }
.port-facts { font-size: 12.5px; color: var(--text-70); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--color-divider); font-feature-settings: 'tnum' 1; }
.port-facts b { color: var(--color-accent); font-weight: 500; }

.marinas { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.marina {
  font-size: 13px; padding: 6px 14px; border-radius: 100px;
  background: var(--color-surface); color: var(--text-78);
  border: 1px solid var(--color-divider);
}

/* --- 17. HTML sitemap ---------------------------------------------------- */

.sitemap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 34px clamp(24px, 4vw, 56px); }
.sitemap-group h2 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider);
  font-weight: 500;
}
.sitemap-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sitemap-group li { display: grid; gap: 2px; }
.sitemap-group li a { font-size: 14.5px; line-height: 20px; text-decoration: none; }
.sitemap-group li a:hover { text-decoration: underline; }
.sitemap-group li code { font-size: 11.5px; color: var(--text-50); }

/* --- 18. Related links --------------------------------------------------- */

/* One block, used at the foot of every cluster page. Interlinking is the job. */
.related {
  margin: 48px 0 0; padding: 28px clamp(22px, 3vw, 34px);
  background: var(--color-surface); border-radius: var(--radius-md);
}
.related h2 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 16px; font-weight: 500;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: 16px 24px; }
.related-grid a { display: grid; gap: 3px; text-decoration: none; }
.related-grid a strong { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--color-accent); }
.related-grid a:hover strong { text-decoration: underline; }
.related-grid a span { font-size: 13px; line-height: 19px; color: var(--text-60); }

/* --- 19. Maintenance ----------------------------------------------------- */

.job-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 34px clamp(24px, 4vw, 56px); }
.job-group h2 {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider);
  font-weight: 500;
}
.job-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.job-group li { display: grid; gap: 4px; }
.job-group li a { font-size: 15.5px; line-height: 22px; text-decoration: none; }
.job-group li a:hover { text-decoration: underline; }
.job-group li span { font-size: 13px; line-height: 20px; color: var(--text-60); }
.job-group li em { font-style: normal; font-size: 11.5px; letter-spacing: 0.04em; color: var(--color-accent); }

/* How often, how long, what with, who — the four things you want before starting. */
.job-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; margin: 28px 0 0; background: var(--color-divider); border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.job-meta > div { background: var(--color-surface); padding: 16px 18px; display: grid; gap: 5px; }
.job-meta .k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.job-meta .v { font-size: 14px; line-height: 20px; }

.job-steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 16px; max-width: 68ch; }
.job-steps li {
  counter-increment: step; position: relative; padding-left: 42px;
  font-size: 15px; line-height: 25px; color: var(--text-78);
}
.job-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-size: 13px; color: var(--color-accent); font-feature-settings: 'tnum' 1;
}

/* --- 20. Head-to-head decision list -------------------------------------- */

.decide-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 64ch; }
.decide-list li {
  font-size: 15px; line-height: 24px; color: var(--text-78);
  padding-left: 20px; position: relative;
}
.decide-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 1px; background: var(--color-accent);
}


/* --- 21. Surfaces by role ------------------------------------------------

   Border, fill, radius and shadow each say "separate object", so they are
   spent by role rather than stamped on every block. Three levels only:

     lift   — a computed result. The figure is the point of the page.
     group  — related information. Held together by a rule, not a box.
     quiet  — supporting detail. No surface at all.
--------------------------------------------------------------------------- */

/* A result: the calculators, the price figures, the quote verdict. */
.card.elev-md,
.price-card,
.calc-out,
.quiet-out {
  box-shadow: var(--shadow-lift);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* A group: informational cards lose their shadow and become plain blocks.
   Fifty-six identical drop-shadowed boxes flatten the hierarchy rather than
   creating one. */
.card.elev-sm {
  box-shadow: none;
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  border: 1px solid var(--color-divider);
}

/* The one place a fill is doing real work: the price cards on the cost hub,
   where the number is the entire reason the page exists. */
.price-card .fig { letter-spacing: -0.025em; }

/* Labels get weight and colour rather than capitals. Small tracked-out caps
   above every heading is template chrome, not hierarchy. */
.card-kicker,
.pick-role,
.vs-tag,
.price-card .who,
.person-role,
.check-k,
.job-meta .k,
.conf,
.faq-group h2,
.job-group h2,
.sitemap-group h2,
.related h2,
.pick-cols h4 {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.card-kicker, .pick-role, .vs-tag, .price-card .who, .person-role { font-size: 12.5px; }
.faq-group h2, .job-group h2, .sitemap-group h2, .related h2, .pick-cols h4 { font-size: 13px; }
.job-meta .k, .check-k { font-size: 12px; }
.conf { font-size: 11px; padding: 3px 9px; }

/* The eyebrow keeps its treatment only where it carries information the
   heading does not — a port's region, a term's category, a unit's type. */
.kicker { font-size: 12.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 600; }

/* The table is where most of this site's numbers live; the design system set
   it at 14px, which is small for a column of prices read on a phone. */
.table { font-size: 15.5px; }
.table td, .table th { padding-block: 13px; }

/* Table headers were 11px tracked-out capitals — hard to read at that size and
   the same tell as everywhere else. A column heading is a heading. */
.table th {
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--text-60);
  padding-bottom: 10px;
}
.kicker::before { width: 28px; }

/* Sections without a number collapse to a single column rather than leaving
   a hole where the marker used to be. */
.sec:not(:has(.sec-n)) { grid-template-columns: minmax(0, 1fr); }

/* Interactive things look interactive, and answer on press. */
.port-card, .faq-group li a, .job-group li a, .related-grid a, .sitemap-group li a {
  transition: color 120ms ease-out, border-color 120ms ease-out, transform 100ms ease-out;
}
.port-card:active { transform: scale(0.99); }

/* --- 22. Light-theme corrections ----------------------------------------

   What the design system had assumed a dark ground for. Caught by looking at
   the page rather than by reading the CSS.
--------------------------------------------------------------------------- */

/* The stat band is a saturated dark ground in BOTH themes — that is the point
   of it. Its text therefore cannot follow --color-text, which flips. */
.stat-band {
  --color-text: #f2f7fb;
  --text-72: color-mix(in srgb, #f2f7fb 78%, transparent);
  color: #f2f7fb;
}
.stat-band .stat-num { color: #ffffff; }
.stat-band .stat-label { color: color-mix(in srgb, #f2f7fb 78%, transparent); }

/* Tracked-out capitals under every figure. Weight carries the label instead. */
.stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* --- 23. Controls that look like controls --------------------------------

   The design system drew unchecked radios and checkboxes with a
   --color-divider border — the hairline meant for rules. Next to real text it
   reads as a disabled control, and the row itself was only as tall as its
   16px dot, which is a poor target on a phone. These give the control its own
   border, a well you can see, a row you can hit, and a response to the press.
--------------------------------------------------------------------------- */

.radio .dot,
.checkbox .dot {
  border-color: var(--color-control-line);
  background: var(--color-control-well);
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.radio:hover .dot,
.checkbox:hover .dot { border-color: var(--color-accent); }
.radio:active .dot,
.checkbox:active .dot { transform: scale(0.9); }
.radio .dot { transition: border-color 120ms ease-out, background-color 120ms ease-out, transform 90ms ease-out; }

/* The whole row is the target, not the 16px circle in front of it. Each row
   carries its own padding now, so the group closes up: options within one
   question should read as tighter than the gap between questions. */
.radio-group { display: grid; gap: 0; }
.radio-group .radio,
.pick-list .checkbox {
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: var(--radius-sm);
  min-height: 34px;
  font-size: 15px;
  transition: background-color 120ms ease-out;
}
.radio-group .radio:hover,
.pick-list .checkbox:hover { background: var(--color-row-hover); }

/* A question above its answers is a heading, not fine print. */
.q-legend {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-text);
  margin-bottom: 6px;
  padding: 0;
}
.calc-controls .field + .field,
.picker .field + .field { margin-top: 26px; }

/* The price card's spec line is a different kind of fact from the sentence
   above it, and was separated from it by nothing but a <br>. Not `.spec` —
   that name already belongs to the compare table's key/value row. */
.price-card .price-spec {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--text-60);
}

/* The fieldsets carried border:0;padding:0;margin:0 inline on every one of
   them. It belongs here once. */
.field { border: 0; padding: 0; margin: 0; }

/* --- 24. Sizing index ----------------------------------------------------

   Every row here carries a computed figure, not a description. So it is set
   as a result list — label left, number right, hairline between — rather than
   the stacked link-and-blurb the FAQ and glossary indexes use. A reader can
   scan the right-hand column and find their boat without opening anything.
--------------------------------------------------------------------------- */

.sizing-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 44px clamp(24px, 4vw, 56px);
}
.sizing-group h2 {
  font-family: var(--font-body); font-size: 17.5px; line-height: 26px;
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--color-text); margin: 0;
}
.sizing-group > p {
  font-size: 15px; line-height: 23px; color: var(--text-60);
  margin: 6px 0 14px; max-width: 46ch;
}
.sizing-group ul {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--color-divider);
}
.sizing-group li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--color-divider);
}
.sizing-group li a {
  flex: none; text-decoration: none; font-size: 16.5px; line-height: 24px;
  padding: 11px 0; font-variant-numeric: tabular-nums;
}
.sizing-group li a::after {
  /* Stretch the target across the whole row, so the figure is clickable too. */
  content: ""; position: absolute; inset: 0;
}
.sizing-group li { position: relative; }
.sizing-group li:hover { background: var(--color-row-hover); }
.sizing-group li:hover a { color: var(--color-accent); }
.sizing-group li span {
  font-size: 14px; line-height: 21px; color: var(--text-60);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* --- 25. Fault finding ---------------------------------------------------

   A diagnostic step is two things: what to check, and what the answer tells
   you. Most troubleshooting lists publish only the first half, which is why
   they read as a shopping list rather than a path. Setting the two at
   different weights keeps that distinction visible while scanning.
--------------------------------------------------------------------------- */

.diag { list-style: none; counter-reset: diag; margin: 28px 0 0; padding: 0; }
.diag li {
  counter-increment: diag;
  position: relative;
  padding: 0 0 22px 44px;
  border-left: 1px solid var(--color-divider);
  margin-left: 11px;
}
.diag li:last-child { border-left-color: transparent; padding-bottom: 0; }
.diag li::before {
  content: counter(diag);
  position: absolute; left: -12px; top: 0;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-control-line);
}
.diag-do { margin: 0; font-size: 17px; line-height: 26px; color: var(--color-text); font-weight: 500; }
.diag-why { margin: 6px 0 0; font-size: 16px; line-height: 26px; color: var(--text-70); max-width: 62ch; }

/* Ranked causes. The rank word carries the frequency, so it is set as a label
   rather than a number — "most" and "rarely" are honest about a ranking that
   comes from experience rather than from a count. */
.causes { display: grid; gap: 2px; margin-top: 28px; }
.cause {
  display: grid; grid-template-columns: 90px 1fr; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--color-divider);
}
.cause:first-child { border-top: 1px solid var(--color-divider); }
.cause-rank {
  font-size: 12.5px; line-height: 22px; font-weight: 600;
  color: var(--color-accent); padding-top: 1px;
}
.cause-name { margin: 0; font-size: 16.5px; line-height: 24px; color: var(--color-text); font-weight: 500; }
.cause-fix { margin: 4px 0 0; font-size: 15.5px; line-height: 24px; color: var(--text-70); max-width: 62ch; }

/* The one callout that means stop rather than note. */
.callout-warn {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.fault-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.fault-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--color-surface); border-radius: var(--radius-md); padding: 22px;
  border: 1px solid transparent;
  transition: border-color .12s ease, transform .1s ease-out;
}
.fault-card:hover { border-color: var(--color-accent); }
.fault-card:active { transform: scale(0.995); }
.fault-sym { font-size: 17px; line-height: 25px; color: var(--color-text); font-weight: 500; }
.fault-first { font-size: 15px; line-height: 23px; color: var(--text-70); }
/* Accent is the link colour on this site, and a whole card is already a link —
   so the urgency line takes its own scale instead: amber for the three faults
   that genuinely mean stop, plain text for the ones that do not. */
.fault-urg { font-size: 12.5px; line-height: 18px; font-weight: 600; margin-top: auto; padding-top: 10px; color: var(--text-60); }
.fault-urg.sev-urgent { color: var(--warn); }
.fault-urg.sev-prompt { color: var(--color-text); }

@media (max-width: 560px) {
  .cause { grid-template-columns: 1fr; gap: 4px; }
}

/* --- 26. The document and its rail ---------------------------------------

   Measured before this existed: prose stopped at 830px on a 1,320px canvas
   and the right 490px sat empty for the whole scroll — on a 3,871px fault
   page, zero per cent of the width was ever used. A wider measure would have
   been the wrong fix; 62ch is 62ch. So the page becomes two columns and the
   spare one earns its place: where you are in the document, and the single
   fact the page most wants you to leave with.

   Below 1080px there is no room for a second column and the rail goes away
   entirely rather than stacking — a table of contents pushed above the
   article is worse than no table of contents.
--------------------------------------------------------------------------- */

.page-rail { display: none; }

@media (min-width: 1080px) {
  main.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 0 clamp(40px, 5vw, 72px);
    /* Deliberately NOT align-items: start. The rail column has to stretch to
       the document's height, or position: sticky inside it has a box only as
       tall as its own content to stick within and the rail vanishes after the
       first screen. */
    align-items: stretch;
  }
  .page-rail { display: block; }
  .rail-inner {
    position: sticky;
    /* Clear of the translucent nav, with a little air. */
    top: 104px;
    padding: 0 0 40px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* The rail starts level with the first section, not with the page head. */
  main.has-rail .page-rail { padding-top: 70px; }
}

.rail-pin {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-divider);
}
.rail-pin-k {
  display: block; font-size: 12px; line-height: 18px; font-weight: 600;
  color: var(--text-60); margin-bottom: 6px;
}
.rail-pin-t {
  margin: 0; font-size: 21px; line-height: 27px; letter-spacing: -0.012em;
  color: var(--color-text); font-weight: 500; font-variant-numeric: tabular-nums;
}
.rail-pin-b { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--text-60); }

.rail-h {
  margin: 0 0 10px; font-size: 12px; line-height: 18px;
  font-weight: 600; color: var(--text-60);
}
.rail-nav ol {
  margin: 0; padding: 0; list-style: none;
  border-left: 1px solid var(--color-divider);
}
.rail-nav li { margin: 0; }
.rail-nav a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13.5px; line-height: 19px;
  color: var(--text-60); text-decoration: none;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.rail-nav a:hover { color: var(--color-text); }
/* Where you are. Set by js/rail.js from an IntersectionObserver; without JS
   the list is still a working set of anchors, which is the point of
   rendering it server-side. */
.rail-nav a[aria-current="true"] {
  color: var(--color-text);
  border-left-color: var(--color-accent);
  font-weight: 500;
}

/* --- 27. Charts ----------------------------------------------------------

   Inline SVG, server-rendered, no library. Text inside a chart wears the
   page's text tokens rather than the series colour — a coloured mark beside a
   label carries identity; the label itself stays ink. The one exception is a
   direct series label at the end of its own line, where the colour IS the
   connection to the line it names.
--------------------------------------------------------------------------- */

.chart {
  margin: 32px 0 0;
  padding: 0;
  /* The plot needs the room a paragraph does not. */
  max-width: none;
}
.chart svg { display: block; overflow: visible; }

/* Axis and tick labels: recessive, tabular, never competing with the marks. */
.ct-ax {
  font-size: 12px;
  fill: var(--chart-axis);
  font-variant-numeric: tabular-nums;
}
/* A value called out beside its own mark. */
.ct-val {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--color-text);
  font-variant-numeric: tabular-nums;
}
/* A label sitting inside a filled segment, so it takes the ground's ink. */
.ct-in {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--color-bg);
  font-variant-numeric: tabular-nums;
}
/* A direct series label — the only chart text that wears its series colour,
   because that colour is what ties it to the line. */
.ct-key { font-size: 12.5px; font-weight: 600; fill: var(--color-text); }

/* Hover. Each mark carries a <title>, which the browser shows as a tooltip;
   this is the visual half of the same affordance. */
.ct-seg, .ct-dot { transition: opacity 120ms ease-out; }
.chart:hover .ct-seg, .chart:hover .ct-dot { opacity: 0.62; }
.chart .ct-seg:hover, .chart .ct-dot:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ct-seg, .ct-dot { transition: none; }
}

/* Under about 640px a 720-wide plot with sentence-length row labels stops
   being readable at any scale. Let it scroll rather than shrink to illegible. */
@media (max-width: 640px) {
  .chart { overflow-x: auto; }
  .chart svg { min-width: 560px; }
}

/* --- 28. The sizing instrument -------------------------------------------

   The calculator is the reason the site exists and it looked like a settings
   panel. The hull is drawn from the same numbers the sizer runs, so dragging
   the slider shows why the figure moved rather than only that it did.
--------------------------------------------------------------------------- */

.hull {
  display: block;
  margin: 4px 0 18px;
  max-width: 340px;
  overflow: visible;
}
.hull-zone { transition: opacity 260ms ease-out, height 200ms ease-out, y 200ms ease-out; }

/* The figure counts to its new value in JS; this keeps its box from jumping
   as the digits change width. */
.calc-out .figure-xl { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hull-zone { transition: none; }
}

/* --- 29. Drawings and alternating bands ----------------------------------

   The home page was five sections on one flat ground with a placeholder where
   a photograph should have been. It is ten now, on three grounds that take
   turns, with the machinery drawn rather than described — because a site about
   boats that shows no boats reads as a spreadsheet about boats.
--------------------------------------------------------------------------- */

:root {
  --art-line: color-mix(in srgb, var(--color-text) 62%, transparent);
  --art-water: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --band-tint: color-mix(in srgb, var(--marine-600) 8%, var(--color-bg));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --art-line: color-mix(in srgb, var(--color-text) 58%, transparent);
    --band-tint: color-mix(in srgb, var(--marine-800) 30%, var(--color-bg));
  }
}
:root[data-theme="dark"] {
  --art-line: color-mix(in srgb, var(--color-text) 58%, transparent);
  --band-tint: color-mix(in srgb, var(--marine-800) 30%, var(--color-bg));
}

.art { display: block; width: 100%; height: auto; overflow: visible; }
.art-lab { font-size: 13px; fill: var(--text-60); }
.art-n { font-size: 12px; font-weight: 600; fill: var(--color-accent); }

.hero-art { margin: 0; justify-self: end; width: 100%; max-width: 620px; }

/* A band is a full-bleed run of colour with its own gutter, so the page has a
   rhythm rather than one continuous sheet. */
.band { padding: 84px 0; }
/* Warm, so the page alternates temperature rather than shade. */
.band-tint { background: var(--band-warm); }
.band-tint .card, .band-tint .fault-chip { background: var(--color-surface); }
.band-deep {
  background: linear-gradient(180deg, var(--marine-900), color-mix(in srgb, var(--marine-800) 70%, var(--marine-900)));
  --color-text: #f2f7fb;
  --text-78: color-mix(in srgb, #f2f7fb 80%, transparent);
  --text-70: color-mix(in srgb, #f2f7fb 74%, transparent);
  --text-60: color-mix(in srgb, #f2f7fb 66%, transparent);
  --color-divider: color-mix(in srgb, #f2f7fb 20%, transparent);
  --color-accent: var(--marine-400);
  color: #f2f7fb;
}
.band-head { max-width: 62ch; margin-bottom: 44px; }
.band-head .body { margin-top: 18px; }
.band .note { margin-top: 40px; }

/* The seawater loop, with its key beside it on a wide screen. */
.loop {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}
.art-loop { max-width: 820px; }
.loop-key {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px 28px;
}
.loop-key li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; line-height: 22px; color: var(--text-70);
}
.loop-key span {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--color-accent); color: var(--color-accent);
  font-size: 12px; font-weight: 600;
}

/* Three architectures, drawn. */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.sys { display: flex; flex-direction: column; gap: 4px; }
.art-sys { max-width: 300px; margin-bottom: 10px; }
.sys h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: 21px; line-height: 28px; margin: 0; letter-spacing: -0.01em; }
.sys p { font-size: 16px; line-height: 26px; color: var(--text-70); margin: 8px 0 0; }
.sys a { font-size: 15px; margin-top: 12px; align-self: start; }

/* The climate row on the deep band. */
.climate-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.climate {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  padding: 26px; border-radius: var(--radius-md);
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid transparent;
  transition: border-color .12s ease, background-color .12s ease;
}
.climate:hover { border-color: var(--color-accent); background: color-mix(in srgb, #ffffff 12%, transparent); }
.climate-k { font-size: 13px; font-weight: 600; color: var(--color-accent); }
.climate-v { font-size: 30px; line-height: 36px; letter-spacing: -0.015em; color: #ffffff; font-variant-numeric: tabular-nums; }
.climate-b { font-size: 15px; line-height: 23px; color: var(--text-70); margin-top: 4px; }

/* Fault chips — a wide net of entry points without a wall of cards. */
.fault-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fault-chip {
  display: inline-block; padding: 11px 18px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  font-size: 15.5px; line-height: 22px; text-decoration: none; color: var(--color-text);
  transition: border-color .12s ease, color .12s ease, transform .1s ease-out;
}
.fault-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.fault-chip:active { transform: scale(0.98); }
.fault-chip:last-child { border-color: var(--color-accent); color: var(--color-accent); }

@media (min-width: 900px) {
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-key { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .band { padding: 60px 0; }
  .art-loop { min-width: 620px; }
  .loop { overflow-x: auto; }
}

/* --- 30. The nav on a phone ----------------------------------------------

   Measured before this: at 390px the links wrapped to a second line and the
   call to action to a third, eating about 150px of the fold before a reader
   saw anything. There was no mobile pattern here — just a desktop row that
   reflowed. A <details> disclosure needs no JavaScript, which means the menu
   works before the bundle loads and keeps working if it never does.
--------------------------------------------------------------------------- */

.nav-narrow { display: none; }
.nav-wide { display: contents; }

@media (max-width: 860px) {
  .site-nav { flex-wrap: nowrap; gap: 12px; align-items: center; }
  .nav-wide { display: none; }
  .nav-narrow { display: block; margin-left: auto; position: relative; }

  .nav-narrow > summary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-control-line);
    font-size: 15px; font-weight: 500; color: var(--color-text);
    cursor: pointer; list-style: none; user-select: none;
    min-height: 42px; white-space: nowrap;
  }
  .nav-narrow > summary::-webkit-details-marker { display: none; }
  .nav-narrow > summary::marker { content: ""; }
  .nav-narrow > summary:hover { border-color: var(--color-accent); }
  .nav-narrow[open] > summary { border-color: var(--color-accent); color: var(--color-accent); }

  /* Three bars that become a cross when the panel is open — the control says
     what pressing it will do. */
  .nav-bars, .nav-bars::before, .nav-bars::after {
    display: block; width: 16px; height: 1.5px; background: currentColor;
    border-radius: 1px; transition: transform 180ms ease, opacity 120ms ease;
  }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -5px; }
  .nav-bars::after { top: 5px; }
  .nav-narrow[open] .nav-bars { background: transparent; }
  .nav-narrow[open] .nav-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-narrow[open] .nav-bars::after { transform: translateY(-5px) rotate(-45deg); }

  .nav-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
    min-width: 232px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .34);
  }
  .nav-panel a {
    padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 16px; min-height: 44px; display: flex; align-items: center;
    border-bottom: 0;
  }
  .nav-panel a:hover { background: var(--color-row-hover); }
  .nav-panel a[aria-current="page"] { color: var(--color-accent); background: var(--color-row-hover); }
  /* The call to action keeps its shape but fills the panel width. */
  .nav-panel .btn { justify-content: center; margin-top: 6px; }

  /* A nowrap flex item will not shrink below its content, so the brand ran
     under the menu button. min-width:0 lets it give way, and the .com.au is
     the part worth losing first. */
  .site-nav .nav-brand {
    font-size: 16px; gap: 10px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .site-nav .nav-brand img { height: 34px; }
  .site-nav .brand-tld { display: none; }
}

@media (max-width: 360px) {
  .site-nav .nav-brand { font-size: 0; gap: 0; overflow: visible; }
  .site-nav .nav-brand img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bars, .nav-bars::before, .nav-bars::after { transition: none; }
}

/* --- 31. Motion ----------------------------------------------------------

   Restrained, and only where it means something. Sections settle as they
   arrive rather than appearing; the water in the drawings moves because it is
   water. Everything else already answers a press or a hover.

   The reveal is gated on .js-reveal, which js/motion.js puts on <html>. With
   no JavaScript — and for a crawler — nothing is ever hidden.
--------------------------------------------------------------------------- */

.js-reveal main .band,
.js-reveal main .sec,
.js-reveal main .steps,
.js-reveal main .chart,
.js-reveal main .loop {
  opacity: 0;
  transform: translateY(14px);
  /* Settles rather than stops — decelerating, with no overshoot on a block of
     text, which would read as a bounce. */
  transition: opacity 520ms cubic-bezier(.22, .61, .36, 1),
              transform 520ms cubic-bezier(.22, .61, .36, 1);
}
.js-reveal main .is-in {
  opacity: 1;
  transform: none;
}

/* The sea. Two strokes drifting at different rates, which is enough to read as
   water and little enough to ignore while reading. */
@keyframes drift-a { from { transform: translateX(0); } to { transform: translateX(-26px); } }
@keyframes drift-b { from { transform: translateX(0); } to { transform: translateX(18px); } }
.art [stroke="var(--art-water)"] path:nth-child(odd) { animation: drift-a 13s ease-in-out infinite alternate; }
.art [stroke="var(--art-water)"] path:nth-child(even) { animation: drift-b 17s ease-in-out infinite alternate; }

/* A lift that answers the pointer. */
.card.elev-md, .fault-card, .port-card, .climate, .fault-chip {
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              border-color 140ms ease-out, box-shadow 220ms ease-out;
}
.fault-card:hover, .port-card:hover, .climate:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal main .band, .js-reveal main .sec, .js-reveal main .steps,
  .js-reveal main .chart, .js-reveal main .loop { opacity: 1; transform: none; transition: none; }
  .art [stroke="var(--art-water)"] path { animation: none; }
  .card.elev-md, .fault-card, .port-card, .climate, .fault-chip { transition: none; }
  .fault-card:hover, .port-card:hover, .climate:hover { transform: none; }
}

/* --- 32. The loop, in miniature -----------------------------------------

   The cutaway lives on the home page and in the guide. This is the compact
   form for a fault page, where somebody is standing in an engine bay deciding
   what to open. A strip with nothing lit is the useful case, not the empty
   one: it says this fault is not a seawater problem.
--------------------------------------------------------------------------- */

.loop-h {
  font-size: 15px; font-weight: 600; color: var(--text-60);
  margin: 34px 0 0; letter-spacing: 0;
}
.loop-strip {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  counter-reset: loop;
}
.loop-part {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-size: 14px; line-height: 20px;
  color: var(--text-55);
}
.loop-part span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-divider); flex: none;
}
.loop-part.on {
  color: var(--color-text);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  font-weight: 500;
}
.loop-part.on span { background: var(--color-accent); }

/* --- 33. Answer first ----------------------------------------------------

   Most how-to pages open with three paragraphs of preamble because a longer
   page used to rank better. It does not any more, and it never helped the
   reader. The answer block is set to be the first thing on the page and the
   most readable thing on it — it is also the text a search result or an
   assistant lifts, so it is written to survive being quoted alone.
--------------------------------------------------------------------------- */

.answer-first {
  padding: 0 0 12px;
  max-width: 62ch;
}
.answer-k {
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-accent);
}
.answer {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 40;
  font-size: 22px; line-height: 34px; letter-spacing: -0.004em;
  color: var(--color-text);
}

.how-steps {
  margin: 26px 0 0; padding: 0 0 0 1.4em;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 64ch;
}
.how-steps li {
  font-size: 16.5px; line-height: 27px; color: var(--text-78);
  padding-left: 6px;
}
.how-steps li::marker { color: var(--color-accent); font-weight: 600; font-size: 15px; }

/* Links with their reason attached. A related block that names only the
   destination tells a reader nothing about why they would go there. */
.how-links {
  list-style: none; margin: 26px 0 0; padding: 0;
  border-top: 1px solid var(--color-divider);
  max-width: 74ch;
}
.how-links li {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 3px; padding: 15px 0;
  border-bottom: 1px solid var(--color-divider);
}
.how-links a { font-size: 17px; line-height: 25px; }
.how-links span { font-size: 15px; line-height: 23px; color: var(--text-60); }
@media (min-width: 720px) {
  .how-links li { grid-template-columns: minmax(0, 20em) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; }
}

.how-index {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 44px clamp(24px, 4vw, 56px);
}

/* --- 34. Installation library ------------------------------------------ */
.topic-jumps {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 30px;
  font-size: 14px; line-height: 22px;
}
.topic-jumps a { color: var(--text-70); text-underline-offset: 4px; }
.topic-jumps a:hover { color: var(--color-accent); }
.wide-photo { max-width: 980px; }
.wide-photo img { aspect-ratio: 3 / 2; }

.decision-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 34px;
}
.decision-grid article {
  min-width: 0; padding: 24px; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface);
}
.decision-grid article > span {
  display: block; margin-bottom: 10px; color: var(--color-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.decision-grid h3 { margin: 0; font-size: 18px; line-height: 25px; }
.decision-grid p { margin: 10px 0 0; color: var(--text-70); font-size: 15px; line-height: 24px; }
.decision-grid a { display: inline-block; margin-top: 14px; font-size: 14px; }

.process-flow {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden;
}
.process-flow li { position: relative; padding: 22px 16px; min-height: 132px; background: var(--color-surface); }
.process-flow li + li { border-left: 1px solid var(--color-divider); }
.process-flow li:nth-child(3n + 1) { border-left: 0; }
.process-flow li:nth-child(n + 4) { border-top: 1px solid var(--color-divider); }
.process-flow span { color: var(--color-accent); font-size: 13px; }
.process-flow strong, .process-flow small { display: block; }
.process-flow strong { margin-top: 14px; font-size: 16px; }
.process-flow small { margin-top: 6px; color: var(--text-60); font-size: 12px; line-height: 18px; }

.air-path, .moisture-path {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  margin: 34px 0 0; padding: 18px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.air-path span, .moisture-path span {
  flex: 1 1 120px; display: grid; place-items: center; min-height: 66px; padding: 12px;
  border-radius: var(--radius-sm); background: var(--color-row-hover); text-align: center;
  font-size: 14px; font-weight: 500; line-height: 20px;
}
.air-path i, .moisture-path i { align-self: center; color: var(--color-accent); font-style: normal; }

.power-bars { display: grid; gap: 26px; margin-top: 34px; max-width: 900px; }
.power-bars > div { display: grid; gap: 9px; }
.power-bars > div > strong { font-size: 15px; }
.power-bars > div > small { color: var(--text-55); font-size: 12px; }
.power-bars .bar { display: flex; min-height: 52px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-row-hover); }
.power-bars .bar i, .power-bars .bar b { display: flex; align-items: center; padding: 10px 14px; font-style: normal; font-size: 13px; line-height: 18px; }
.power-bars .bar i { background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.power-bars .bar b { color: var(--text-70); font-weight: 500; }

.brand-directory {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px;
}
.brand-directory article { padding: 26px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.brand-directory .wordmark { display: block; font-family: var(--font-display); font-size: 27px; line-height: 34px; }
.brand-directory p { min-height: 72px; margin: 12px 0 16px; color: var(--text-70); font-size: 15px; line-height: 24px; }
.brand-directory a { font-size: 14px; font-weight: 600; }

.check-sheet {
  list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px;
}
.check-sheet li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--color-divider); font-size: 16px; line-height: 24px; }
.check-sheet li::before { content: ""; position: absolute; left: 0; top: 16px; width: 16px; height: 16px; border: 1px solid var(--color-control-line); border-radius: 3px; }
.checklist-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.checklist-groups section { padding: 24px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.checklist-groups h3 { margin: 0 0 12px; font-size: 18px; }
.checklist-groups ul { margin: 0; padding-left: 20px; color: var(--text-70); font-size: 15px; line-height: 25px; }

.install-feature .kicker { margin-bottom: 22px; }
.install-feature .btn-row { margin-top: 26px; }
.visual-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.visual-link-grid a { display: flex; flex-direction: column; gap: 7px; padding: 22px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none; }
.visual-link-grid a:hover { border-color: var(--color-accent); }
.visual-link-grid strong { color: var(--color-text); font-size: 16px; }
.visual-link-grid span { color: var(--text-60); font-size: 13px; line-height: 20px; }

@media (max-width: 820px) {
  .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-flow li, .process-flow li:nth-child(3n + 1) { border-left: 0; }
  .process-flow li:nth-child(even) { border-left: 1px solid var(--color-divider); }
  .process-flow li:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
}
@media (max-width: 620px) {
  .decision-grid, .brand-directory, .check-sheet, .checklist-groups, .visual-link-grid { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: 1fr; }
  .process-flow li, .process-flow li:nth-child(even), .process-flow li:nth-child(3n + 1) { border-left: 0; }
  .process-flow li:nth-child(n + 2) { border-top: 1px solid var(--color-divider); }
  .brand-directory p { min-height: 0; }
  .power-bars .bar i, .power-bars .bar b { padding: 9px 8px; font-size: 11px; }
}
.how-group h2 {
  font-family: var(--font-display); font-weight: 600; font-variation-settings: 'opsz' 36;
  font-size: 21px; line-height: 28px; letter-spacing: -0.008em;
  color: var(--color-text); margin: 0;
}
.how-count { font-size: 13px; line-height: 20px; color: var(--text-55); margin: 5px 0 14px; }
.how-group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-divider); }
.how-group li { border-bottom: 1px solid var(--color-divider); padding: 12px 0; }
.how-group li a { font-size: 16px; line-height: 24px; text-decoration: none; }
.how-group li a:hover { text-decoration: underline; }
.how-tag {
  display: inline-block; margin-left: 8px;
  font-size: 11.5px; line-height: 18px; font-weight: 600;
  color: var(--color-accent); white-space: nowrap;
}
/* YouSail-owned provider directory. Membership is generated from the protected
   feed; these rules intentionally reuse the site's existing type and tokens. */
.provider-head { max-width: 900px; }
.provider-directory { padding: 48px 0 72px; }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.provider-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.provider-media { display: grid; min-height: 190px; place-items: center; padding: 26px; background: var(--color-surface-2); }
.provider-media img { width: 100%; height: 160px; object-fit: contain; }
.provider-monogram { display: grid; width: 104px; height: 104px; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); font: 700 48px/1 Inter, sans-serif; }
.provider-copy { padding: 24px; }
.provider-location, .eyebrow { color: var(--color-accent); font-size: .74rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.provider-copy h2 { margin: 9px 0 12px; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.provider-copy h2 a { color: inherit; text-decoration: none; }
.provider-copy p { min-height: 4.5em; color: var(--color-text-muted); line-height: 1.5; }
.provider-link { display: inline-block; margin-top: 18px; font-weight: 700; }
.provider-source-note { max-width: 820px; padding: 0 0 72px; }
.provider-profile-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding: 42px 0 56px; }
.provider-profile-head h1 { margin: 12px 0 18px; }
.provider-profile-media { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; margin: 0; border-radius: 20px; background: var(--color-surface-2); }
.provider-profile-media img { width: 100%; height: 100%; object-fit: contain; }
.provider-media-empty { min-height: 300px; border-radius: 20px; background: linear-gradient(145deg, var(--color-surface), var(--color-surface-2)); }
.provider-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.provider-profile-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(32px, 6vw, 80px); padding: 48px 0 64px; }
.provider-facts { align-self: start; border-top: 1px solid var(--color-border); }
.provider-facts div { display: grid; gap: 5px; padding: 17px 0; border-bottom: 1px solid var(--color-border); }
.provider-facts span { color: var(--color-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.provider-facts strong { font-size: .95rem; line-height: 1.45; }
@media (max-width: 900px) { .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .provider-grid, .provider-profile-head, .provider-profile-body { grid-template-columns: 1fr; }
  .provider-copy p { min-height: 0; }
  .provider-profile-media { order: -1; }
}

/* Field library: readable hierarchy, visible content and generous touch targets. */
.topic-nav { display:flex; gap:var(--space-4); padding:0 var(--gutter); border-bottom:1px solid var(--color-divider); overflow-x:auto; scrollbar-width:thin; background:var(--color-surface); }
.topic-nav a { display:flex; align-items:center; min-height:44px; flex-shrink:0; font-size:13px; color:var(--color-text); text-decoration:none; }
.topic-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.editorial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.editorial-card { display:flex; flex-direction:column; gap:16px; padding:28px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); text-decoration:none; min-width:0; }
.editorial-card h3 { font-family:var(--font-display); font-size:clamp(23px,2.2vw,30px); line-height:1.2; margin:0; text-wrap:balance; }
.editorial-card p { font-size:16px; line-height:1.65; color:var(--text-75); margin:0; }
.editorial-card:hover { border-color:var(--color-accent); background:var(--color-surface-2); }
.editorial-arrow { margin-top:auto; font-size:14px; font-weight:600; }
.editorial-byline { font-size:14px; color:var(--text-75); margin-top:24px; }
.editorial-tip { padding:clamp(24px,4vw,40px); border:1px solid var(--color-divider); border-left:4px solid var(--color-accent); border-radius:var(--radius-md); background:var(--color-surface); margin:28px 0; }
.editorial-tip h2, .editorial-tip h3 { font-family:var(--font-display); line-height:1.25; margin:12px 0; }
.editorial-tip p { max-width:70ch; font-size:17px; line-height:1.7; margin:12px 0; }
.editorial-tip a { display:inline-flex; align-items:center; min-height:44px; }
.editorial-list { padding-left:24px; max-width:70ch; }
.editorial-list li { padding:8px 0; font-size:17px; line-height:1.7; }
.editorial-faq { border-bottom:1px solid var(--color-divider); padding:8px 0; }
.editorial-faq summary { cursor:pointer; padding:14px 4px; min-height:48px; font-size:17px; font-weight:500; }
.editorial-faq p { font-size:16px; line-height:1.75; max-width:70ch; padding:0 4px 16px; }
.guide-jump { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; }
.guide-jump a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.editorial-scroller { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,35%); gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 20px; scrollbar-width:thin; }
.editorial-scroller > * { scroll-snap-align:start; }
.logo-scroller { grid-auto-columns:220px; }
.logo-scroller img { width:150px; height:76px; object-fit:contain; background:white; border-radius:var(--radius-sm); }
.logo-scroller h3 { font-family:var(--font-body); font-size:16px; }
.term-tips { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; align-items:start; }
.term-tip { flex:1 1 180px; border:1px solid var(--color-divider); border-radius:var(--radius-sm); background:var(--color-surface); }
.term-tip summary { min-height:44px; padding:12px; cursor:pointer; font-size:14px; }
.term-tip [role=tooltip] { display:block; padding:0 14px 16px; font-size:14px; line-height:1.6; }
.term-tip summary span { float:right; color:var(--color-accent); }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible { outline:3px solid var(--color-accent); outline-offset:4px; }
.btn, .nav-narrow > summary { min-height:44px; }
.nav-panel { max-height:calc(100dvh - 100px); overflow-y:auto; }
.sec .body { line-height:1.8; }
.page-head h1 { text-wrap:balance; }
.doc, .sec > div, .provider-profile-body > *, .provider-profile-head > * { min-width:0; }
main { overflow-wrap:break-word; }
@media (min-width:861px) and (max-width:1200px) {
 .site-nav { flex-wrap:wrap; }
 .nav-wide { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
}
@media (max-width:700px) {
 .editorial-grid { grid-template-columns:1fr; }
 .editorial-scroller { grid-auto-columns:85%; }
 .logo-scroller { grid-auto-columns:200px; }
 .editorial-card { padding:24px; }
 .topic-nav { gap:24px; }
 .body, input, select, textarea { font-size:16px; }
 .btn-row { align-items:stretch; }
 .btn-row .btn { white-space:normal; text-align:center; }
 .foot-links a { min-height:44px; display:inline-flex; align-items:center; }
 .site-nav { padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
@media print { .site-nav,.topic-nav,.powered-strip,.page-rail,.site-footer { display:none; } .editorial-grid { display:block; } .editorial-card { break-inside:avoid; } }

/* Final content pass: compact hierarchy, usable tools, and readable source facts. */
.page-head { padding:48px 0 32px; }
.page-head h1 { font-size:clamp(32px,4vw,54px); line-height:1.12; }
.page-head .lede { max-width:65ch; }
.powered-strip { min-height:40px; padding-block:4px; }
.powered-strip img { width:28px; height:28px; }
.story-head { max-width:820px; }
.story-head .btn-row { margin-top:24px; }
.story-head ~ .sec .body { max-width:68ch; }
.guide-figure { margin:0 0 32px; }
.guide-figure img { display:block; width:100%; height:auto; border-radius:16px; background:#f8f6f0; }
.guide-figure figcaption { font-size:13px; line-height:1.6; padding:12px 0; color:var(--text-70); max-width:80ch; }
.provider-profile-head { display:block; padding:38px 0 32px; }
.provider-profile-head h1 { font-size:clamp(30px,4vw,48px); line-height:1.15; max-width:24ch; overflow-wrap:anywhere; }
.provider-profile-head .lede { max-width:66ch; }
.provider-profile-head .provider-profile-media { max-width:340px; margin-top:24px; }
.provider-matches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.provider-match { display:flex; flex-direction:column; gap:10px; padding:22px; border:1px solid var(--color-divider); border-radius:12px; text-decoration:none; background:var(--color-surface); min-width:0; }
.provider-match:hover { border-color:var(--color-accent); }
.provider-match strong { font-size:18px; line-height:1.4; }
.provider-match small { line-height:1.6; color:var(--text-70); }
.provider-help .btn-row,.guide-actions { margin-block:24px; }
.guide-filters,.brief-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.guide-filters label,.brief-form label,.filter-control { display:flex; flex-direction:column; gap:8px; font-weight:500; line-height:1.5; }
.guide-filters input,.guide-filters select,.brief-form input,.brief-form textarea,.brief-form select,.filter-control select,#brief-output { width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--color-divider); border-radius:8px; background:var(--color-surface); color:var(--color-text); font:inherit; font-size:16px; min-height:48px; }
.filter-control { max-width:340px; }
.filter-status { grid-column:1/-1; margin:0; }
.guide-meta { display:block; font-size:13px; line-height:1.5; margin-top:16px; color:var(--text-70); }
.brief-form textarea { resize:vertical; }
.brief-result { padding:24px; border:1px solid var(--color-divider); border-radius:12px; margin:24px 0; }
#brief-output { line-height:1.6; margin:12px 0 20px; }
.brief-result h3 { margin-top:0; }
.submission-outline { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.9; padding:24px; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:12px; }
.source-facts dt { font-weight:600; margin-top:16px; }
.source-facts dd { margin:6px 0; }
[data-js-only][hidden], [data-guide-card][hidden], .provider-match[hidden], .provider-empty[hidden], .brief-result[hidden], section[hidden], [data-guide-empty][hidden] { display:none !important; }
@media(max-width:700px) {
 .page-head { padding:30px 0 24px; }
 .page-head h1 { font-size:34px; }
 .provider-matches,.guide-filters,.brief-form { grid-template-columns:1fr; }
 .brief-result { padding:16px; }
 .powered-strip { padding-inline:20px; }
 .provider-profile-head { padding-block:28px; }
 .guide-figure { margin-inline:0; }
 .btn-row { flex-wrap:wrap; }
}
@media print {
 .guide-filters,.guide-actions,.provider-help,.brief-result .btn-row { display:none !important; }
 .guide-figure { max-width:500px; break-inside:avoid; }
 .brief-result { border:0; padding:0; }
 #brief-output { height:auto; min-height:800px; border:0; }
}

.print-only { display:none; }
@media print { .has-brief .brief-form,.has-brief #brief-output,.has-brief #brief-status { display:none !important; } .has-brief #brief-print { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6; } }