/* Spark Shark Handbook, chrome styles
   Layered ON TOP of handbook.css (the original handbook stylesheet).
   handbook.css owns: body typography, h1–h4, lists, blockquotes, tables, callouts,
   .diagram.diagram-placeholder, and the brand --ss-* tokens.
   This file owns: sticky header, chapter chrome (sidebar TOC, breadcrumbs, head, CTAs,
   safety/quick-answer/cost cards, FAQ, prev/next, related), hub, service,
   glossary, footer. We override body padding-left because the original was painted to
   the right of a fixed 300px sidebar that we don't ship on the static site.
*/

:root {
  --c-accent: var(--ss-orange, #f28c28);
  --c-accent-dark: #c66b14;
  --c-teal: var(--ss-teal, #4a9ba5);
  --c-teal-light: var(--ss-paper, #f0f5f9);
  --c-navy: var(--ss-deep, #0c192b);
  --c-yellow: var(--ss-yellow, #f8c81e);
  --c-text: var(--ink, #1a2434);
  --c-text-muted: var(--ink-soft, #5a6677);
  --c-rule: var(--rule, #d9dee5);
  --c-bg: #ffffff;
  --c-bg-soft: #f8f9fb;
  --c-danger: #c0392b;
  --c-caution: #e08e1f;

  --header-h: 64px;
  --page-search-h: 79px;   /* height of the frozen per-page search bar */
  --maxw: 1180px;
  --radius: 8px;
  --shadow-1: 0 1px 3px rgba(12,25,43.08), 0 1px 2px rgba(12,25,43.04);
}

/* The original sheet pads body 300px for its fixed sidebar; we don't ship that nav. */
html { scroll-padding-top: calc(var(--header-h) + var(--page-search-h) + 12px); }
body { padding-left: 0 !important; }

/* ============================================================
   PARENT SITE NAV BAR
   Copied verbatim from sparkshark.com (css/site.css "=== HEADER ===" block),
   with design tokens resolved to literals and the inherited base typography
   (UI font, link underline) made explicit, so the handbook's content styles
   cannot bleed in. This is the exact same bar as every other page.
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(226,232,240,.9); box-shadow: 0 10px 30px rgba(12,25,43,.06); backdrop-filter: blur(16px); font-size: 16px; }
.site-header, .site-header *, .mobile-menu, .mobile-menu * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}
.site-header a, .mobile-menu a { text-decoration: none; }
.site-header .wrap { max-width: 1140px; margin: 0 auto; }
.site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 72px; padding: 12px clamp(24px, 3vw, 32px); }
.site-logo { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; color: #0F172A; font-weight: 700; font-size: 1.05rem; }
.site-logo:hover { color: #0F172A; }
.site-logo img { height: 40px; width: auto; }
.site-logo span { white-space: nowrap; }
.site-nav { display: none; gap: 24px; align-items: center; justify-self: end; }
.site-nav a { color: #334155; font-weight: 500; font-size: .95rem; }
.site-nav a:hover { color: #0369A1; }
.header-cta { display: flex; align-items: center; gap: 12px; justify-self: end; margin-left: 0; }
.header-cta__phone { display: none; color: #0F172A; font-weight: 700; white-space: nowrap; }
.menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #0F172A; background: transparent; border: 0; cursor: pointer; }
.menu-toggle:hover { background: #F0F5F9; }
.menu-toggle svg { width: 24px; height: 24px; fill: currentColor; }
@media (min-width: 960px) {
  .site-header__inner { grid-template-columns: auto auto auto; justify-content: center; column-gap: clamp(24px, 3vw, 48px); }
  .site-nav { display: flex; justify-self: center; }
  .header-cta { display: flex; }
  .header-cta__phone { display: inline; }
  .menu-toggle { display: none; }
}
@media (max-width: 1060px) and (min-width: 960px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: .9rem; }
}
.mobile-menu { display: none; padding: 16px 24px 32px; border-top: 1px solid #E2E8F0; background: #ffffff; }
.mobile-menu.open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.mobile-menu a { color: #0F172A; font-weight: 500; padding: 8px 0; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-navy); color: #fff; padding: 8px 12px; z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

.placeholder {
  background: #fff7e6;
  border: 1px dashed var(--c-caution);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--c-caution);
  font-style: italic;
  font-size: .92em;
}

/* ===== Sticky header ===== */
.ss-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-navy);
  color: #fff;
  border-bottom: 3px solid var(--c-accent);
  height: var(--header-h);
}
.ss-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
}
.ss-header__logo {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 800;
  white-space: nowrap;
}
.ss-header__logo:hover { color: var(--c-yellow); }
.ss-header__logo-mark { color: var(--c-yellow); font-size: 22px; }
.ss-header__logo-text { display: flex; flex-direction: column; line-height: 1.1; letter-spacing: .04em; font-size: 14px; }
.ss-header__logo-text small { font-weight: 500; letter-spacing: 0; font-size: 11px; color: #b9c3d1; text-transform: none; }

.ss-header__browse {
  flex: 0 1 auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(255,255,255.10);
  color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background-color 150ms ease, color 150ms ease;
}
.ss-header__browse:hover,
.ss-header__browse:focus-visible {
  background: rgba(255,255,255.20);
  color: #fff;
  text-decoration: none;
}

.ss-header__actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.ss-header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.ss-header__cta--call { background: var(--c-accent); color: #fff; border: 1px solid var(--c-accent); }
.ss-header__cta--call:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.ss-header__cta--book { background: transparent; color: #fff; border: 1px solid rgba(255,255,255.55); }
.ss-header__cta--book:hover { background: rgba(255,255,255.10); color: #fff; }
.ss-header__cta-text-short { display: none; }

@media (max-width: 900px) {
  .ss-header__browse { display: none; }
  .ss-header__logo-text small { display: none; }
}
@media (max-width: 640px) {
  /* Both CTAs stay visible. Drop the phone icon emoji and the long-form text
     to keep the row tight; phone number is the high-value lead so it leads. */
  .ss-header__cta { padding: 0 10px; font-size: 13px; height: 34px; gap: 4px; }
  .ss-header__cta-text { display: none; }
  .ss-header__cta-text-short { display: inline; }
  .ss-header__cta--call > [aria-hidden] { display: none; }
}
@media (max-width: 420px) {
  .ss-header__cta { padding: 0 8px; font-size: 12px; }
  .ss-header__logo-text { font-size: 12px; }
}

/* ===== Chapter page layout ===== */
main { display: block; }

.chapter__layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 960px) {
  .chapter__layout { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding-top: 32px; }
}

/* ===== Sidebar TOC ===== */
.chapter__sidebar { font-size: 14px; }
@media (min-width: 960px) {
  .chapter__sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--page-search-h) + 20px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--page-search-h) - 40px);
    overflow-y: auto;
  }
}
.chapter__toc {
  border-left: 3px solid var(--c-teal);
  padding: 8px 12px 8px 16px;
  background: var(--c-teal-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.chapter__toc[open] { padding-bottom: 12px; }
.chapter__toc-title {
  cursor: pointer; font-weight: 800; color: var(--c-navy);
  text-transform: uppercase; letter-spacing: .05em; font-size: 12px;
  list-style: none;
}
.chapter__toc-title::-webkit-details-marker { display: none; }
.chapter__toc-title::after { content: " ▾"; color: var(--c-teal); }
.chapter__toc[open] .chapter__toc-title::after { content: " ▴"; }
@media (min-width: 960px) {
  .chapter__toc-title { pointer-events: none; }
  .chapter__toc-title::after { display: none; }
  .chapter__toc { background: transparent; }
}
.chapter__toc-list { list-style: none; padding: 0; margin: 12px 0 0; max-width: none; }
.chapter__toc-list li { margin: 0 0 6px; padding-left: 0; }
.chapter__toc-list li::before { display: none; }
.chapter__toc-list a { color: var(--c-text-muted); text-decoration: none; display: block; padding: 2px 0 2px 8px; border-left: 2px solid transparent; margin-left: -10px; line-height: 1.3; }
.chapter__toc-list a:hover { color: var(--c-accent-dark); border-left-color: var(--c-accent); }
/* Sidebar back-to-handbook link, promoted to a visible pill button */
.chapter__sidebar-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 14px;
  border: 1.5px solid var(--c-navy);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-navy);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.chapter__sidebar-back:hover,
.chapter__sidebar-back:focus-visible {
  background: var(--c-navy);
  color: #fff;
  border-color: var(--c-navy);
  outline: none;
}
.chapter__sidebar-back:hover .chapter__sidebar-back-arrow,
.chapter__sidebar-back:focus-visible .chapter__sidebar-back-arrow {
  transform: translateX(-3px);
}
.chapter__sidebar-back-arrow {
  font-weight: 800;
  color: var(--c-accent);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chapter__sidebar-back:hover .chapter__sidebar-back-arrow,
.chapter__sidebar-back:focus-visible .chapter__sidebar-back-arrow {
  color: var(--c-yellow);
}

/* Bottom-of-chapter back-to-handbook link, wider, full-width style for the
   end-of-page action so it reads as the next thing to do. */
.chapter__bottom-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 8px;
  padding: 14px 22px;
  max-width: var(--measure);
  border: 2px solid var(--c-navy);
  border-radius: 8px;
  background: var(--c-bg);
  color: var(--c-navy);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.chapter__bottom-back:hover,
.chapter__bottom-back:focus-visible {
  background: var(--c-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(12, 25, 43, 0.12);
  outline: none;
}
.chapter__bottom-back-arrow {
  font-weight: 800;
  color: var(--c-accent);
  font-size: 20px;
  line-height: 1;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chapter__bottom-back:hover .chapter__bottom-back-arrow,
.chapter__bottom-back:focus-visible .chapter__bottom-back-arrow {
  color: var(--c-yellow);
  transform: translateX(-4px);
}

/* ===== Breadcrumbs ===== */
.breadcrumbs ol {
  list-style: none; padding: 0; margin: 0 0 16px; max-width: none;
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 13px; color: var(--c-text-muted);
}
.breadcrumbs li { padding-left: 0; margin: 0; }
.breadcrumbs li::before { display: none; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 4px; color: var(--c-rule); }
.breadcrumbs a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-accent-dark); text-decoration: underline; }

/* ===== Chapter head ===== */
.chapter__head { margin: 0 0 28px; }
.chapter__eyebrow {
  margin: 0 0 6px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--c-accent);
}
/* .chapter__h1 inherits the original handbook h1 treatment (top rule::before, weight)
   but we tighten the top spacing because the sticky header already provides air. */
.chapter__h1 {
  margin-top: 0;
  padding-top: 1rem;
}
.chapter__meta {
  margin: 12px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 13px; color: var(--c-text-muted);
  max-width: none;
}
.chapter__meta::before { display: none; }
.chapter__difficulty {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.chapter__difficulty--easy { background: #e9f5ec; color: #2d8a4a; }
.chapter__difficulty--moderate { background: #fff4e0; color: var(--c-caution); }
.chapter__difficulty--advanced { background: #fde7e1; color: #c2511b; }
.chapter__difficulty--pro-only { background: var(--c-navy); color: #fff; }

/* ===== Diagrams + tables, left-aligned, sized for readability, click-to-expand =====
   Site-wide rule (per Seth, 2026-05-21): chapter diagrams are large enough to read
   inline (`--measure-wide`, 56rem) AND clickable to open a full-screen overlay for the
   detailed view. Tables follow the same width rule. Both share the text's left edge so
   the page reads as a single left-anchored column.
   Documented in IMPLEMENTATION.md §8 (UX/Readability) and PROGRESS.md.
*/
.chapter__content .diagram {
  max-width: var(--measure-wide);
  margin-left: 0;
  margin-right: auto;
}
/* Tables stick to the prose column, they're reading content, not visual content. */
.chapter__content .table-wrap {
  max-width: var(--measure);
  margin-left: 0;
  margin-right: auto;
}
.chapter__content .diagram {
  cursor: zoom-in;
}
.chapter__content .diagram svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Fullscreen overlay used by the click-to-expand interaction (JS in _base.html). */
.ss-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 25, 43, 0.94);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.ss-zoom-overlay[hidden] { display: none; }
.ss-zoom-overlay__inner {
  width: 100%;
  max-width: 1400px;
  max-height: 92vh;
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px;
  overflow: auto;
  position: relative;
}
.ss-zoom-overlay__inner .diagram {
  max-width: none;
  margin: 0;
  cursor: default;
}
.ss-zoom-overlay__inner .diagram svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
}
.ss-zoom-overlay__inner .diagram__caption {
  margin-top: 12px;
  text-align: left;
  max-width: none;
}
.ss-zoom-overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--c-navy);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-zoom-overlay__close:hover { background: var(--c-accent); }
.ss-zoom-overlay__close:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .chapter__content .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .chapter__content .table-wrap table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .chapter__content .table-wrap th,
  .chapter__content .table-wrap td {
    padding: 0.55rem 0.6rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .chapter__content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .chapter__content pre code,
  .chapter__content code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ===== Chapter chrome cards/sections, match body text width =====
   Site-wide rule (per Seth, 2026-05-21): every chrome card or section inside the
   chapter body (intro cards, mid/end CTAs, cost card, FAQ, prev/next nav,
   related-chapters) is constrained to `--measure` and left-aligned with text, so
   the page reads as a single column of prose-width content. Diagrams are the only
   exception; they get `--measure-wide` per the rule above.
   Documented in IMPLEMENTATION.md §8 (UX/Readability) and PROGRESS.md.
*/
.chapter__body > .quick-answer,
.chapter__body > .safety,
.chapter__body > .cost-card,
.chapter__body > .ss-cta,
.chapter__body > .faq,
.chapter__body > .chapter-nav,
.chapter__body > .related {
  max-width: var(--measure);
  margin-left: 0;
  margin-right: auto;
}
/* Same width constraint for the mid-chapter CTA AND for every callout lifted from
   the original handbook chunk (whats-next, side-note, etc.), they all read as
   cards and should match the universal card width. Descendant selector (no `>`) so
   nesting under the synthetic div-balance wrapper doesn't escape the rule. */
.chapter__content .ss-cta,
.chapter__content .callout {
  max-width: var(--measure);
  margin-left: 0;
  margin-right: auto;
}

/* ===== UNIVERSAL CARD RULE =====================================================
   Site-wide rule (per Seth, 2026-05-21): every card on the site uses the same
   padding, border-radius, margin, and body-text size. The only per-card variation
   is the colored treatment (background, border color, label color) and the title/
   label typography. Body text inside every card matches the page's body text size
   exactly (inherits 17px / 1.65 from `body`), no shrinking of card text relative
   to prose. Applies to: .quick-answer.safety.cost-card.ss-cta (all variants),
   .faq__item, and the original-handbook .callout--* blocks lifted into chapter
   content.
   Documented in IMPLEMENTATION.md §8 (UX/Readability) and PROGRESS.md.
*/
.quick-answer,
.safety,
.cost-card,
.ss-cta,
.faq__item,
.chapter__content .callout {
  padding: 16px 18px;
  border-radius: 6px;
  margin: 18px 0;
  border: 1px solid var(--c-rule);
}
/* Card body text inherits body size, no font-size overrides anywhere. */
.quick-answer__body,
.quick-answer__body p,
.safety__body,
.safety__body p,
.cost-card__caption,
.ss-cta__body,
.faq__q,
.faq__a,
.chapter__content .callout p {
  font-size: inherit;
  line-height: 1.65;
  max-width: none;
}

/* Quick answer + Safety, white card, 6px colored left rule, uppercase tracked label. */
.quick-answer,
.safety {
  background: var(--c-bg);
  border-left: 6px solid var(--c-teal);
}
.quick-answer { border-left-color: var(--c-teal); }
.safety--info { border-left-color: var(--c-teal); }
.safety--caution { border-left-color: var(--c-caution); }
.safety--danger { border-left-color: var(--c-danger); }

.quick-answer__title,
.safety__label {
  margin: 0 0 0.5rem;
  font-size: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-navy);
  border: 0;
  padding: 0;
  max-width: none;
}
.quick-answer__title::before,
.safety__label::before { display: none; }
.safety--info .safety__label { color: var(--c-teal); }
.safety--caution .safety__label { color: var(--c-caution); }
.safety--danger .safety__label { color: var(--c-danger); }

.quick-answer__body p,
.safety__body p { margin: 0 0 0.6rem; }
.quick-answer__body > *:last-child,
.safety__body > *:last-child { margin-bottom: 0; }

/* Cost card, colored treatment only (padding/margin/border/radius come from the
   universal card rule above). */
.cost-card {
  background: var(--c-bg-soft);
}
.cost-card__title {
  margin: 0 0 4px;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-muted);
  font-weight: 800;
  border: 0;
  padding: 0;
  max-width: none;
}
.cost-card__title::before { display: none; }
.cost-card__range {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: inherit;
  color: var(--c-navy);
  max-width: none;
}
.cost-card__caption { margin: 0; color: var(--c-text-muted); }

/* Universal CTA, colored treatment only. Padding/margin/radius from universal rule. */
.ss-cta {
  background: var(--c-bg-soft);
  box-shadow: var(--shadow-1);
}
.ss-cta--safety { background: #fde7e1; border-color: var(--c-danger); }
.ss-cta--quote { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.ss-cta--quote .ss-cta__headline { color: var(--c-yellow); }
.ss-cta__headline {
  margin: 0 0 4px;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-navy);
  max-width: none;
}
.ss-cta--safety .ss-cta__headline { color: var(--c-danger); }
.ss-cta__body { margin: 0 0 10px; }
.ss-cta--quote .ss-cta__body { color: #d9dee5; }
.ss-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 6px;
  font-weight: 800;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.ss-cta__btn:hover { transform: translateY(-2px); text-decoration: none; }
.ss-cta__btn--primary {
  background: linear-gradient(135deg, #FFB547 0%, #F28C28 44%, #D96A13 100%);
  color: #0C192B;
  border-color: rgba(255,181,71,.85);
  box-shadow: 0 18px 46px rgba(242,140,40,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.ss-cta__btn--primary:hover {
  background: #FFAD55;
  color: #0C192B;
  box-shadow: 0 22px 50px rgba(242,140,40,.34);
}
.ss-cta__btn--secondary {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FB 100%);
  color: #0C192B;
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
.ss-cta__btn--secondary:hover {
  background: #F8FAFC;
  color: #0C192B;
}

/* ===== FAQ, section wrapper + per-item cards inherit from universal rule ===== */
.faq { margin: 28px 0; }
.faq__title { color: var(--c-navy); font-size: inherit; font-weight: 800; margin: 0 0 12px; border: 0; padding: 0; max-width: none; }
.faq__title::before { display: none; }
.faq__list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: none; }
.faq__item { background: var(--c-bg); max-width: none; }
.faq__item::before { display: none; }
.faq__q { font-weight: 800; color: var(--c-navy); margin: 0; }
.faq__a { margin: 6px 0 0; color: var(--c-text); }

/* Chapter nav, card-style buttons with an orange arrow that slides outward on hover. */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 32px 0 16px;
}
.chapter-nav > span:empty { display: none; }
.chapter-nav__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-bg);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  min-height: 76px;
}
.chapter-nav__link:hover,
.chapter-nav__link:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-bg-soft);
  box-shadow: 0 2px 8px rgba(12, 25, 43, 0.08);
  color: var(--c-text);
  outline: none;
}
.chapter-nav__link--next {
  flex-direction: row-reverse;
  text-align: right;
}
.chapter-nav__arrow {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
  flex: 0 0 auto;
  transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.chapter-nav__link--prev:hover .chapter-nav__arrow,
.chapter-nav__link--prev:focus-visible .chapter-nav__arrow {
  transform: translateX(-6px);
}
.chapter-nav__link--next:hover .chapter-nav__arrow,
.chapter-nav__link--next:focus-visible .chapter-nav__arrow {
  transform: translateX(6px);
}
.chapter-nav__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chapter-nav__direction {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.chapter-nav__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .chapter-nav { grid-template-columns: 1fr; }
  .chapter-nav__link--next { flex-direction: row; text-align: left; }
}

.related { margin: 24px 0; }
.related__title { color: var(--c-navy); font-size: 18px; margin: 0 0 8px; border: 0; padding: 0; max-width: none; }
.related__title::before { display: none; }
.related__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: none; }
.related__list li { padding-left: 0; }
.related__list li::before { display: none; }
.related__list a { color: var(--c-accent-dark); text-decoration: none; }
.related__list a:hover { color: var(--c-accent); text-decoration: underline; }

/* ===== Hub page =====
   Modeled on the original handbook's .callout--toc treatment: white card, teal left
   rule, orange tracked part headers with a navy under-rule, flex rows with the
   chapter number in orange and the title in ink.
*/
.hub { max-width: 56rem; margin: 0 auto; padding: 32px 16px 64px; }
.hero {
  position: relative;
  overflow: hidden;
  color: #E6EDF7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    linear-gradient(112deg, rgba(5, 12, 22, .99) 0%, rgba(10, 24, 41, .98) 48%, rgba(9, 32, 55, .94) 100%),
    linear-gradient(135deg, #07111F 0%, #10233C 52%, #123250 100%);
}
.hero::before {
  content: none;
  display: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 8px;
  background: linear-gradient(90deg, #FFD700 0%, #F28C28 54%, #9A3412 100%);
  box-shadow: 0 -18px 54px rgba(242, 140, 40, .22);
}
.hero__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 98px 24px 94px;
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(340px, 520px);
  gap: clamp(76px, 7vw, 124px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__text {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 22px;
  max-width: 760px;
  overflow: visible;
}
.hero__text > * { margin: 0; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #FFD700;
  max-width: min(970px, calc(100vw - 48px));
  font-size: clamp(1.44rem, 1.89vw, 2.1rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .045em;
  text-shadow: 0 0 22px rgba(255, 215, 0, .2);
  text-wrap: balance;
}
.hero__eyebrow .alt { color: #FFD700; }
.hero h1 {
  font-family: inherit;
  width: min(1050px, calc(100vw - 48px));
  max-width: 1050px;
  box-sizing: border-box;
  padding: 0 clamp(28px, 5vw, 84px) 0 0;
  border: 0;
  color: #FFFFFF;
  font-size: clamp(2.88rem, 3.8vw, 3.88rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 16px 42px rgba(0, 0, 0, .34);
  text-wrap: balance;
}
.hero h1::before { display: none; }
.hero h1 .accent { color: #FFD700; }
.hero__sub {
  font-family: inherit;
  max-width: 670px;
  color: #E2EBF5;
  font-size: 1.18rem;
  line-height: 1.72;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; }
.hero .btn {
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; border-radius: 6px; padding: 0 30px;
  font-weight: 800; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
.hero .btn:hover { transform: translateY(-2px); text-decoration: none; }
.hero .btn svg { flex: 0 0 auto; }
.hero .btn--call { background: linear-gradient(135deg, #FFB547 0%, #F28C28 44%, #D96A13 100%); color: #0C192B; border: 1px solid rgba(255,181,71,.85); box-shadow: 0 18px 46px rgba(242,140,40,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.hero .btn--call:hover { background: #FFAD55; color: #0C192B; box-shadow: 0 22px 50px rgba(242,140,40,.34); }
.hero .btn--book { background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FB 100%); color: #0C192B; border: 1px solid rgba(255,255,255,.86); box-shadow: 0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.72); }
.hero .btn--book:hover { background: #F8FAFC; color: #0C192B; }
.hero__mascot {
  position: relative;
  z-index: 3;
  align-self: stretch;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  transform: translate(88px, 80px);
  pointer-events: none;
}
.hero__mascot img {
  position: relative;
  width: min(38vw, 480px);
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  opacity: .98;
  transform: translateX(20px);
  filter: drop-shadow(0 42px 58px rgba(0, 0, 0, .5));
}
@media (max-width: 1180px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 56px;
  }
  .hero h1 {
    width: min(900px, calc(100vw - 48px));
    max-width: 900px;
    padding-right: clamp(18px, 4vw, 52px);
  }
  .hero__mascot { transform: translate(34px, 34px); }
  .hero__mascot img { width: min(37vw, 420px); }
}
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 78px;
    padding-bottom: 72px;
  }
  .hero h1 {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    font-size: 2.76rem;
  }
  .hero__eyebrow { font-size: 1.44rem; }
  .hero__mascot {
    min-height: auto;
    width: 100%;
    justify-content: center;
    transform: none;
    margin: 0 auto;
  }
  .hero__mascot img {
    width: min(72vw, 360px);
    transform: translateX(22px);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .hero__inner {
    gap: 30px;
    padding-top: 58px;
    padding-bottom: 60px;
  }
  .hero h1 {
    width: 100%;
    font-size: 2.05rem;
    padding-right: 0;
  }
  .hero__eyebrow { font-size: 1.02rem; }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .btn {
    width: 100%;
  }
  .hero__mascot img {
    width: min(80vw, 310px);
    transform: translateX(14px);
  }
}

.hub__directory {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-left: 8px solid var(--c-teal);
  border-radius: 6px;
  padding: 28px 32px;
}
.hub__part { margin-bottom: 28px; }
.hub__part:last-child { margin-bottom: 0; }
.hub__part-title {
  color: var(--c-accent);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 2px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--c-navy);
  max-width: none;
}
.hub__part-title::before { display: none; }
.hub__part-subtitle {
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--c-text-muted);
  font-style: italic;
  max-width: none;
}
.hub__chapter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
.hub__chapter {
  padding-left: 0;
  margin: 0;
}
.hub__chapter::before { display: none; }
.hub__chapter a,
.hub__chapter span[aria-disabled] {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.35rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 4px;
  text-decoration: none !important;
  color: var(--c-text) !important;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: background 0.1s, color 0.1s;
}
.hub__directory a,
.hub__directory a:hover,
.hub__directory a:focus-visible,
.chapter__toc-list a,
.chapter__toc-list a:hover,
.chapter__toc-list a:focus-visible,
.callout--toc a,
.callout--toc a:hover,
.callout--toc a:focus-visible {
  text-decoration: none !important;
}
.hub__chapter a:hover {
  background: rgba(74, 155, 165, 0.08);
  color: var(--c-navy);
}
.hub__chapter span[aria-disabled] {
  color: var(--c-text-muted);
  opacity: .55;
  cursor: not-allowed;
}
.hub__chapter-num {
  flex: 0 0 auto;
  min-width: 1.8em;
  color: var(--c-accent);
  font-weight: 800;
  text-align: right;
}
.hub__chapter--coming .hub__chapter-num { color: var(--c-text-muted); }
.hub__chapter-title { font-weight: 500; }
.hub__chapter a:hover .hub__chapter-num { color: var(--c-accent); }

@media (max-width: 600px) {
  .hub__directory { padding: 20px 18px 20px 22px; border-left-width: 6px; }
}

/* ============================================================
   SEARCH
   Per-page search bar (in the page body, NOT the nav, so the header stays
   standardized) + the /handbook/search/ results page. The results hero reuses
   the navy hub-hero treatment so the page feels native to the guide.
   ============================================================ */

/* --- per-page search bar (slim band frozen directly under the standardized nav) --- */
.page-search {
  position: sticky;
  top: var(--header-h);
  z-index: 40;            /* under the nav (z 50), over page content */
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-rule);
}
.page-search__form {
  max-width: 56rem;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: stretch;
}
.page-search__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #cfd8e2;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--c-text);
}
.page-search__input::placeholder { color: #7a8a9c; }
.page-search__input:focus-visible { outline: 0; }
.page-search__form:focus-within .page-search__input { border-color: var(--c-accent); }
.page-search__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border: 1px solid var(--c-accent);
  border-radius: 0 8px 8px 0;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
}
.page-search__btn:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.page-search__btn svg { width: 20px; height: 20px; fill: currentColor; }

/* --- results page --- */
.search-page { max-width: 56rem; margin: 0 auto; padding: 32px 16px 64px; }
.search-page__head {
  background: linear-gradient(135deg, var(--c-navy) 0%, #15243d 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px 32px 28px;
  margin: 0 0 24px;
}
.search-page__eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--c-accent);
}
.search-page__h1 {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  max-width: none;
}
.search-page__h1::before { display: none; }
.search-page__form { display: flex; gap: 10px; flex-wrap: wrap; }
.search-page__input {
  flex: 1 1 240px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: #fff;
}
.search-page__input::placeholder { color: #7a8a9c; }
.search-page__input:focus-visible {
  outline: 0;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.35);
}
.search-page__btn { flex: 0 0 auto; padding: 12px 22px; border: 0; cursor: pointer; font-size: 1rem; }

.search-page__status { color: var(--c-text-muted); font-size: 0.95rem; margin: 0 0 16px; max-width: none; }

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.search-results > li { margin: 0; padding: 0; max-width: none; }
.search-results > li::before { content: none; }

/* The whole card is the link. Generous padding (extra on the right for the
   hover arrow) keeps text well clear of the borders. */
.search-result__link {
  display: block;
  position: relative;
  padding: 24px 60px 24px 28px;
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-bg);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.search-result__link:hover,
.search-result__link:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-bg-soft);
  box-shadow: 0 6px 18px rgba(12, 25, 43, 0.10);
  transform: translateY(-1px);
  outline: none;
}
.search-result__link::after {
  content: "→";
  position: absolute;
  right: 24px;
  top: 26px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.search-result__link:hover::after,
.search-result__link:focus-visible::after {
  opacity: 1;
  transform: translateX(5px);
}
.search-result__meta {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  max-width: none;
}
.search-result__title {
  display: block;
  margin: 0 0 9px;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--c-navy);
}
.search-result__link:hover .search-result__title,
.search-result__link:focus-visible .search-result__title { color: var(--c-accent-dark); }
.search-result__snippet {
  display: block;
  margin: 0;
  color: var(--c-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: none;
}
.search-result mark {
  background: rgba(248, 200, 30, 0.45);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.search-result__none {
  color: var(--c-text);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  background: var(--c-bg);
  padding: 24px 28px;
}
.search-result__none p { max-width: none; margin: 0; line-height: 1.6; }

@media (max-width: 600px) {
  .search-page__head { padding: 24px 20px 22px; }
}

/* ===== Service page ===== */
.service { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; }
.service__sub { color: var(--c-text-muted); margin: 0 0 16px; max-width: none; }
.service__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.service__what ul { padding-left: 20px; max-width: none; }

/* ===== Glossary ===== */
.glossary { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; }
.glossary h1 { margin-top: 0; padding-top: 1rem; }
.glossary__intro { color: var(--c-text-muted); max-width: none; }

/* ===== Footer ===== */
.ss-footer {
  background: var(--c-navy); color: #d9dee5;
  margin-top: 64px; padding: 32px 16px;
}
.ss-footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ss-footer__inner { grid-template-columns: 1.2fr 1fr 2fr; } }
.ss-footer__brand { color: #d9dee5; }
.ss-footer__brand strong { color: #fff; }
.ss-footer__brand a { color: var(--c-yellow); }
.ss-footer__nav { display: flex; flex-wrap: wrap; gap: 14px; align-content: start; }
.ss-footer__nav a { color: #d9dee5; text-decoration: none; font-weight: 700; }
.ss-footer__nav a:hover { color: var(--c-accent); }
.ss-footer__legal { margin: 0; font-size: 12px; color: #9aa6b8; line-height: 1.5; max-width: none; }
.ss-footer__legal::before { display: none; }
.ss-footer .placeholder { background: rgba(248,200,30.10); color: var(--c-yellow); border-color: var(--c-yellow); }

/* ===== Homepage ===== */
.home { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px 64px; }
.home__hero { background: linear-gradient(135deg, var(--c-navy) 0%, #15243d 100%); color: #fff; border-radius: var(--radius); padding: 40px 32px; margin: 0 0 32px; }
.home__eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--c-accent); }
.home__h1 { color: #fff; margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; line-height: 1.1; }
.home__h1::before { display: none; }
.home__sub { color: #d9dee5; max-width: none; margin: 0 0 18px; }
.home__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home__hero .ss-cta__btn--secondary { background: transparent; color: #fff; border: 1px solid #fff; }
.home__hero .ss-cta__btn--secondary:hover.home__hero .ss-cta__btn--secondary:focus-visible { background: #fff; color: var(--c-navy); }
.home__section-title { margin: 0 0 14px; font-size: 22px; letter-spacing: -.01em; }
.home__section-title::before { display: none; }
.home__services { background: var(--c-bg-soft); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 24px 22px; margin: 0 0 24px; }
.home__service-grid { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .home__service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .home__service-grid { grid-template-columns: 1fr 1fr 1fr; } }
.home__service-grid li { background: #fff; border: 1px solid var(--c-rule); border-radius: 6px; padding: 12px 14px; }
.home__service-grid a { display: block; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.home__service-grid a:hover { color: var(--c-accent); }
.home__service-grid span { display: block; color: var(--c-text-muted); font-size: 14px; margin-top: 4px; }
.home__services-cta { margin: 6px 0 0; font-weight: 700; }
.home__services-cta a { color: var(--c-accent); text-decoration: none; }
.home__handbook.home__trust { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 24px 22px; margin: 0 0 24px; }
.home__handbook-bullets.home__trust-bullets { padding-left: 20px; max-width: none; }

/* ===== Services hub ===== */
.svcs-hub { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px 64px; }
.svcs-hub__head { margin: 0 0 24px; }
.svcs-hub__eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--c-accent); }
.svcs-hub__h1 { margin: 0 0 12px; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.01em; }
.svcs-hub__h1::before { display: none; }
.svcs-hub__sub { color: var(--c-text-muted); max-width: none; }
.svcs-hub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.svcs-hub__list { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 24px; }
.svcs-hub__list ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .svcs-hub__list ul { grid-template-columns: 1fr 1fr; } }
.svcs-hub__list li { border: 1px solid var(--c-rule); border-radius: 6px; padding: 12px 14px; }
.svcs-hub__list a { display: block; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.svcs-hub__list a:hover { color: var(--c-accent); }
.svcs-hub__list span { display: block; color: var(--c-text-muted); font-size: 14px; margin-top: 4px; }
.svcs-hub__area { background: var(--c-bg-soft); border-left: 4px solid var(--c-teal); border-radius: 6px; padding: 16px 18px; }
.svcs-hub__area h2 { margin: 0 0 6px; font-size: 18px; }
.svcs-hub__area h2::before { display: none; }

/* ===== Permits hub ===== */
.permits-hub { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px 64px; }
.permits-hub__head { margin: 0 0 24px; }
.permits-hub__eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--c-accent); }
.permits-hub__h1 { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.01em; }
.permits-hub__h1::before { display: none; }
.permits-hub__sub { color: var(--c-text-muted); max-width: none; }
.permits-hub__list { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 24px; }
.permits-hub__list ul { list-style: none; padding: 0; margin: 0; }
.permits-hub__list li { border-bottom: 1px solid var(--c-rule); padding: 12px 0; }
.permits-hub__list li:last-child { border-bottom: 0; }
.permits-hub__list a { font-weight: 700; color: var(--c-navy); text-decoration: none; }
.permits-hub__list a:hover { color: var(--c-accent); }
.permits-hub__list span { display: block; color: var(--c-text-muted); font-size: 14px; margin-top: 4px; }
.permits-hub__ahj { background: #fff7e6; border-left: 4px solid var(--c-caution); border-radius: 6px; padding: 16px 18px; margin: 0 0 24px; }
.permits-hub__ahj h2 { margin: 0 0 6px; font-size: 18px; }
.permits-hub__ahj h2::before { display: none; }
.permits-hub__cta { background: var(--c-bg-soft); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 20px 22px; }
.permits-hub__cta h2 { margin: 0 0 8px; font-size: 18px; }
.permits-hub__cta h2::before { display: none; }
.permits-hub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ===== Guides hub ===== */
.guides-hub { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px 64px; }
.guides-hub__head { margin: 0 0 20px; }
.guides-hub__eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--c-accent); }
.guides-hub__h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }
.guides-hub__h1::before { display: none; }
.guides-hub__sub { color: var(--c-text-muted); max-width: none; }
.guides-hub__group { background: #fff; border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 18px; }
.guides-hub__group h2 { margin: 0 0 10px; font-size: 18px; color: var(--c-accent); letter-spacing: .04em; text-transform: uppercase; }
.guides-hub__group h2::before { display: none; }
.guides-hub__group ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .guides-hub__group ul { grid-template-columns: 1fr 1fr; } }
.guides-hub__group a { font-weight: 600; color: var(--c-navy); text-decoration: none; }
.guides-hub__group a:hover { color: var(--c-accent); }
.guides-hub__all { font-weight: 700; margin-top: 8px; }
.guides-hub__all a { color: var(--c-accent); text-decoration: none; }

/* ===== Glossary (expanded) ===== */
.glossary__jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 24px; padding: 12px 14px; background: var(--c-bg-soft); border: 1px solid var(--c-rule); border-radius: 6px; }
.glossary__jump a { display: inline-block; min-width: 28px; padding: 4px 6px; text-align: center; font-weight: 700; color: var(--c-navy); text-decoration: none; border-radius: 4px; }
.glossary__jump a:hover { background: var(--c-accent); color: #fff; }
.glossary__section { margin: 0 0 28px; padding-top: 12px; border-top: 2px solid var(--c-rule); }
.glossary__section h2 { margin: 0 0 14px; font-size: 26px; color: var(--c-accent); }
.glossary__section h2::before { display: none; }
.glossary__list { margin: 0; padding: 0; }
.glossary__list dt { font-weight: 700; color: var(--c-navy); margin-top: 14px; font-size: 17px; }
.glossary__list dd { margin: 4px 0 0; color: var(--c-text); }
.glossary__list dd a { color: var(--c-accent); }
.glossary__missing { margin-top: 28px; padding: 14px 18px; background: var(--c-bg-soft); border-left: 4px solid var(--c-teal); border-radius: 6px; color: var(--c-text-muted); }

/* ===== Chapter -> service bridge ===== */
.svc-bridge { background: #fff7e6; border-left: 4px solid var(--c-accent); border-radius: 6px; padding: 16px 18px; margin: 18px 0; max-width: var(--measure, 38rem); }
.svc-bridge h3 { margin: 0 0 6px; font-size: 17px; color: var(--c-navy); }
.svc-bridge h3::before { display: none; }
.svc-bridge p { margin: 0 0 10px; }
.svc-bridge__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-bridge a { color: var(--c-accent); font-weight: 700; text-decoration: none; }