/* ChiAha brand layer (docs/brand-style-guide.md). Linked LAST on every page,
   after the page's inline <style>, /css/site.css and /css/chrome.css, so these
   rules win. scripts/site-chrome.py adds the link.

   Constants on every page: dark Harbor ground, Harbor accent (Sky for small
   accent text on dark), ReliaSim red as the one action colour, Nunito display,
   DM Mono labels, DM Sans text, official White logo, rising-bars mark.
   What varies per page (hero, body bands, closer) is picked with the classes in
   sections 7-9; the page -> variant map is in the style guide. */

/* ── 1. Roles -> tokens (the old names are kept so page CSS keeps working) ── */
:root, [data-theme="dark"], [data-theme="light"] {
  --ink: #0E2230; --ink-deep: #0A1A25;
  --harbor: #2C5977; --harbor-deep: #23496A; --harbor-soft: #3E7196; --warm: #2C5977;
  --mist: #E6F4FA; --slate: #4A6273;
  --on-dark: #EAF3F8; --on-dark-muted: rgba(234,243,248,0.70);
  --sky: #70CEEF; --exclaim: #2A95BA; --exclaim-deep: #1B6F8F;
  --action: #B43F3F; --action-hover: #CC4E4E; --action-ink: #FFFFFF;
  --line-dark: rgba(44,89,119,0.9);
  --error: #F4A3A3;
  /* Soft band (the one "lighter" band per page). Version B, applied: a mid Aha Blue band
     with cards a step lighter and light text, so no section jumps more than ~3:1 in
     luminance from its neighbours. To switch to Version A (muted light band), replace
     these nine lines with the Version A block in docs/brand-style-guide.md section 2. */
  --band-bg: #1F4560; --band-card: #2B5675; --band-card-line: rgba(234,243,248,0.12);
  --band-text: #EAF3F8; --band-muted: rgba(234,243,248,0.86); --band-accent: #A8E0F5;
  --band-em: #70CEEF; --band-logo: #EAF3F8; --band-shadow: 0 2px 10px rgba(0,0,0,0.18);
  --bg: var(--ink); --surface: var(--warm); --border: var(--line-dark);
  --text: var(--on-dark); --muted: var(--on-dark-muted);
  --accent: var(--harbor); --accent-lt: var(--sky); --accent-dk: var(--warm);
  --accent2: var(--harbor); --accent3: var(--harbor);
  --card-bg: rgba(234,243,248,0.045);
  --bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Crect x='0' y='9' width='4' height='6' rx='2' fill='%2370CEEF'/%3E%3Crect x='6' y='6' width='4' height='9' rx='2' fill='%2370CEEF'/%3E%3Crect x='12' y='3' width='4' height='12' rx='2' fill='%2370CEEF'/%3E%3Crect x='18' y='0' width='4' height='15' rx='2' fill='%232A95BA'/%3E%3C/svg%3E");
  --bars-big: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20936%20320%22%3E%3Crect%20x%3D%224%22%20y%3D%22276%22%20width%3D%2218%22%20height%3D%2240%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%2256%22%20y%3D%22246%22%20width%3D%2218%22%20height%3D%2270%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22108%22%20y%3D%22206%22%20width%3D%2218%22%20height%3D%22110%22%20rx%3D%229%22%20fill%3D%22%232A95BA%22%20fill-opacity%3D%220.55%22/%3E%3Crect%20x%3D%22160%22%20y%3D%22256%22%20width%3D%2218%22%20height%3D%2260%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22212%22%20y%3D%22166%22%20width%3D%2218%22%20height%3D%22150%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22264%22%20y%3D%22226%22%20width%3D%2218%22%20height%3D%2290%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22316%22%20y%3D%22126%22%20width%3D%2218%22%20height%3D%22190%22%20rx%3D%229%22%20fill%3D%22%232A95BA%22%20fill-opacity%3D%220.55%22/%3E%3Crect%20x%3D%22368%22%20y%3D%22196%22%20width%3D%2218%22%20height%3D%22120%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22420%22%20y%3D%22246%22%20width%3D%2218%22%20height%3D%2270%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22472%22%20y%3D%22156%22%20width%3D%2218%22%20height%3D%22160%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22524%22%20y%3D%2296%22%20width%3D%2218%22%20height%3D%22220%22%20rx%3D%229%22%20fill%3D%22%232A95BA%22%20fill-opacity%3D%220.55%22/%3E%3Crect%20x%3D%22576%22%20y%3D%22206%22%20width%3D%2218%22%20height%3D%22110%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22628%22%20y%3D%22136%22%20width%3D%2218%22%20height%3D%22180%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22680%22%20y%3D%2256%22%20width%3D%2218%22%20height%3D%22260%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22732%22%20y%3D%22176%22%20width%3D%2218%22%20height%3D%22140%22%20rx%3D%229%22%20fill%3D%22%232A95BA%22%20fill-opacity%3D%220.55%22/%3E%3Crect%20x%3D%22784%22%20y%3D%2286%22%20width%3D%2218%22%20height%3D%22230%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22836%22%20y%3D%2216%22%20width%3D%2218%22%20height%3D%22300%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3Crect%20x%3D%22888%22%20y%3D%22116%22%20width%3D%2218%22%20height%3D%22200%22%20rx%3D%229%22%20fill%3D%22%23FFFFFF%22%20fill-opacity%3D%220.10%22/%3E%3C/svg%3E");
  --bars-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 120'%3E%3Crect x='0' y='70' width='14' height='50' rx='7' fill='%2370CEEF'/%3E%3Crect x='24' y='35' width='14' height='85' rx='7' fill='%2370CEEF'/%3E%3Crect x='48' y='0' width='14' height='120' rx='7' fill='%232A95BA'/%3E%3C/svg%3E");
}
body { background: var(--ink); color: var(--on-dark); }
.theme-toggle { display: none !important; }

/* ── 2. Type: Nunito display, DM Mono labels, DM Sans text ── */
h1, h2, h3, h4.step-title, .section-title, .cta-headline, .hero-headline, .stat-value,
.card h3, .step h3, .person h3, .mcp-name, .sub-head, .facts li b, .tool-name, .home-card h3,
.home-tool-name, .eq-plus, .eq-equals, .compare-stat, .testi-name, .step-text h4 {
  font-family: 'Nunito', system-ui, sans-serif !important; letter-spacing: -0.01em !important;
}
h1 em, h2 em, h3 em, .section-title em, .cta-headline em, .hero-headline em { font-style: normal !important; }
blockquote, .testi-q, .quote-card blockquote, .pe-quote blockquote {
  font-family: 'Nunito', system-ui, sans-serif !important; font-style: normal !important; font-weight: 600 !important;
}
.lede, .hero-sub, .card p, .person p, .tool-desc, .pillar p, .home-card p, .home-lede { font-weight: 400 !important; }

/* Eyebrows carry the rising-bars mark from the logo */
.eyebrow, .section-eyebrow, .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Mono', monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-lt);
}
.eyebrow::before, .section-eyebrow::before, .hero-eyebrow::before {
  content: ''; display: block; width: 22px; height: 15px; flex: none; background: var(--bars) no-repeat center / contain !important;
}

/* ── 3. Action: ReliaSim red, white label. Ghost = light outline ── */
.btn-primary, .nav-cta, .fws-btn, button[type="submit"].btn-primary, #contact button[type="submit"] {
  background: var(--action) !important; color: var(--action-ink) !important; border: 0 !important; border-radius: 8px !important; font-weight: 500;
}
.btn-primary:hover, .nav-cta:hover, .fws-btn:hover, #contact button[type="submit"]:hover {
  opacity: 1 !important; filter: none !important; background: var(--action-hover) !important;
}
/* Secondary action = a quiet text link beside the one primary button (no second button) */
.btn-ghost { color: var(--on-dark) !important; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 14px 4px !important;
  font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(234,243,248,0.45); }
.btn-ghost:hover { color: var(--sky) !important; text-decoration-color: var(--sky); transform: none !important; }
input[type="checkbox"] { accent-color: var(--action); }

/* ── 4. Nav: darker Ink step, official White logo ── */
nav { background: rgba(10,26,37,0.95) !important; border-bottom: 1px solid var(--line-dark) !important; }
.nav-links a { color: var(--on-dark-muted); font-size: 12px; font-weight: 500; }
.nav-links a:hover, nav .nav-links a.active { color: var(--sky); }
.nav-mobile-toggle { background: rgba(234,243,248,0.06) !important; border-color: var(--line-dark) !important; color: var(--on-dark) !important; }
.nav-links.mobile-open { background: var(--ink-deep) !important; }

/* Event ribbon: Aha Blue strip, action button, white small text */
.fws-strip { background: var(--warm) !important; border-bottom: 0 !important; }
.fws-when { color: rgba(234,243,248,0.86) !important; }
.fws-text { color: rgba(234,243,248,0.9); }
.event-k { color: rgba(234,243,248,0.86) !important; }
.fws-link { color: var(--on-dark) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ── 5. Footer: darker Ink step, one rounded corner, White logo ── */
footer { background: var(--ink-deep) !important; border-top: 0 !important; border-radius: 120px 0 0 0; margin-top: 24px; }
footer .footer-brand img { opacity: 1 !important; }
footer .footer-brand p, footer .footer-col li a, footer .footer-bottom { color: var(--on-dark-muted) !important; }
footer .footer-col h4 { color: var(--sky) !important; }
footer .footer-col li a:hover { color: var(--on-dark) !important; }
footer .footer-bottom { border-top-color: var(--line-dark) !important; }

/* ── 6. Cards, icons in circles, shared components ── */
.card, .step, .person, .quote-card, .pub, .mcp-card, .logo-cell, .pillar, .compare-card, .pe-quote,
.pe-checklist, .audience-card, .tool-card, .home-card, .home-tool {
  border-radius: 14px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.card, .pillar { border-top-color: var(--harbor) !important; }
.card, .step, .person, .quote-card, .pub, .mcp-card, .logo-cell, .compare-card, .pe-quote, .pe-checklist, .audience-card {
  border-color: var(--border); background: var(--card-bg);
}
a.card:hover, .tool-card:hover { background: rgba(112,206,239,0.08) !important; }
.b-icon { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--harbor); display: flex; align-items: center; justify-content: center; color: var(--sky); background: rgba(44,89,119,0.35); margin-bottom: 8px; flex: none; }
.b-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step-num { width: 44px !important; height: 44px !important; border-radius: 50%; background: rgba(44,89,119,0.35) !important; border: 1.5px solid var(--harbor) !important; color: var(--sky) !important; font-family: 'Nunito', sans-serif !important; font-weight: 800; font-size: 18px !important; }
.tool-badge { background: rgba(44,89,119,0.30) !important; color: var(--sky) !important; border-color: var(--harbor) !important; }
.tool-badge.sandbox-free, .tool-badge.new { background: rgba(112,206,239,0.12) !important; color: var(--sky) !important; border-color: rgba(112,206,239,0.45) !important; }
/* "Bad" side of a compare: muted slate, never orange/red (red is the action colour) */
.compare-card.bad { border-left-color: rgba(234,243,248,0.35) !important; }
.compare-card.bad .compare-label, .compare-card.bad .compare-stat { color: var(--on-dark-muted) !important; }
.stats-bar { background: var(--warm) !important; border: 0 !important; }
.stats-bar .stat-item { border-right-color: rgba(255,255,255,0.18) !important; }
.stats-bar .stat-value { color: var(--on-dark); font-weight: 800; }
.stats-bar .stat-value span { color: var(--sky) !important; }
.stats-bar .stat-label { color: rgba(234,243,248,0.86) !important; }
.lm-logo { background-color: #ffffff; }
.hero-proof::before { background: var(--sky) !important; }
p a:not([class]), li a:not([class]) { text-underline-offset: 2px; }

/* ── 7. Body bands. Default = dark Harbor ground. ── */
.section.alt { background: var(--ink-deep) !important; border-color: var(--line-dark) !important; }
/* Aha Blue band: white text, small labels white ~86%, Sky only for large accent text */
.band-harbor { background: var(--warm) !important; color: var(--on-dark);
  --text: #EAF3F8; --muted: rgba(234,243,248,0.92); --accent-lt: rgba(234,243,248,0.92);
  --border: rgba(255,255,255,0.20); --card-bg: rgba(10,26,37,0.28); --harbor: rgba(255,255,255,0.35); }
.band-harbor .section-title em, .band-harbor h2 em, .band-harbor .facts li b { color: var(--sky) !important; }
.band-harbor .eyebrow::before, .band-harbor .section-eyebrow::before { filter: brightness(1.6) saturate(0.4); }
.band-harbor .b-icon { background: rgba(10,26,37,0.28); border-color: var(--sky); }
/* The soft band: colours from the --band-* tokens (section 1) */
.band-soft { background: var(--band-bg) !important; color: var(--band-text);
  --text: var(--band-text); --muted: var(--band-muted); --accent-lt: var(--band-accent); --border: var(--band-card-line); --card-bg: var(--band-card); }
.band-soft .card, .band-soft .step, .band-soft .person, .band-soft .quote-card, .band-soft .pub, .band-soft .logo-cell,
.band-soft .pillar, .band-soft .compare-card, .band-soft .pe-quote, .band-soft .pe-checklist, .band-soft .audience-card,
.band-soft .mcp-card, .band-soft .tool-card, .band-soft .testimonial-card, .band-soft .aud, .band-soft .faq-item, .band-soft details, .band-soft .method, .band-soft .problem, .band-soft .audience {
  background: var(--band-card) !important; border-color: var(--band-card-line) !important; box-shadow: var(--band-shadow); color: var(--band-text);
}
.band-soft .card, .band-soft .pillar { border-top-color: var(--band-em) !important; }
/* Highlights on the mid-blue band are light coral, not sky: sky on Harbor read as blue on blue
   (Amber, 2026-09-25). Coral comes from the action-red family, so it stays on brand and stays
   distinct from the blues for colour-blind readers too (hue and lightness both differ). */
.band-soft { --band-em: #F4A3A3; --band-accent: #F4A3A3; --accent-lt: #F4A3A3; --sky: #F4A3A3; }
.band-soft .section-title em, .band-soft h2 em, .band-soft h1 em { color: var(--band-em) !important; }
.band-soft .b-icon { background: transparent; border-color: var(--band-em); color: var(--band-em); }
.band-soft .step-num { background: transparent !important; color: var(--band-em) !important; border-color: var(--band-em) !important; }
.band-soft .lm-logo { background-color: var(--band-logo); opacity: 0.85; }
.band-soft .btn-ghost { color: var(--band-text); }
.band-soft .quote-card blockquote, .band-soft blockquote { color: var(--band-text) !important; }
.band-soft .quote-card { border-left-color: var(--band-em) !important; }
.band-soft .tool-badge { background: transparent !important; color: var(--band-accent) !important; border-color: var(--band-accent) !important; }
.band-soft .compare-card.bad { border-left-color: var(--band-muted) !important; }
.band-soft .compare-card.bad .compare-label, .band-soft .compare-card.bad .compare-stat { color: var(--band-muted) !important; }
.curve-divider.edge-soft { --surface: var(--band-bg); }
.curve-divider.edge-deep { --surface: var(--ink-deep); }

/* ── 8. Hero variants (section pages use .page-hero; landing pages use .hero) ── */
.page-hero { background: var(--ink) !important; border-bottom: 0 !important; position: relative; overflow: hidden; }
.page-hero h1 { font-weight: 800 !important; }
.page-hero .lede { color: var(--on-dark-muted); }
.crumbs a { color: var(--sky); }
.jump { gap: 8px 22px !important; }
.jump a { border: 0 !important; background: none !important; padding: 2px 0 !important; border-radius: 0; color: var(--on-dark-muted) !important; border-bottom: 1px solid rgba(234,243,248,0.3) !important; }
.jump a:hover { color: var(--sky) !important; border-bottom-color: var(--sky) !important; }

/* hv-centered: centered text, rising bars at both lower corners */
.hv-centered .page-hero-inner { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; text-align: center; justify-items: center; gap: 22px !important; position: relative; z-index: 1; }
.hv-centered .hero-actions, .hv-centered .jump { justify-content: center; }
.hv-centered .lede { max-width: 700px; margin: 0 auto; }
.hv-centered::before, .hv-centered::after { content: ''; position: absolute; bottom: 0; width: 360px; height: 124px; background: var(--bars-big) no-repeat left bottom / contain; opacity: 0.9; pointer-events: none; }
.hv-centered::before { left: 3vw; }
.hv-centered::after { right: 3vw; transform: scaleX(-1); }

/* hv-photo: text left, duotoned photo right in a rounded rectangle with a Harbor echo block */
.hv-photo .page-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; align-items: center !important; column-gap: 72px !important; }
.hv-photo.photo-left .page-hero-inner > .hero-figure { order: -1; margin: 0 0 22px 22px; box-shadow: -22px 22px 0 0 var(--harbor); }
.hero-figure { position: relative; aspect-ratio: 4 / 3; max-height: 420px; width: calc(100% - 22px); margin: 0 22px 22px 0; border-radius: 18px;
  background: var(--harbor) var(--photo) center / cover no-repeat; background-blend-mode: luminosity; box-shadow: 22px 22px 0 0 var(--harbor); }
.hero-figure::after { content: ''; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(160deg, rgba(14,34,48,0.05), rgba(14,34,48,0.45)); box-shadow: inset 0 0 0 1px rgba(112,206,239,0.25); }
.hero-figure .fig-bars { position: absolute; left: -34px; bottom: 0; z-index: 2; width: 52px; height: 100px; background: var(--bars-hero) no-repeat bottom / contain; }

/* hv-stats: stat-led hero, big figures in Harbor-outlined tiles */
.hv-stats .page-hero-inner { align-items: center !important; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hero-stat { border: 1.5px solid var(--harbor); border-radius: 14px; padding: 22px 22px 18px; background: rgba(44,89,119,0.22); }
.hero-stat b { display: block; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 50px); line-height: 1; color: var(--on-dark); }
.hero-stat b span { color: var(--sky); }
.hero-stat small { display: block; margin-top: 10px; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); line-height: 1.5; }
.hero-stat:first-child { background: var(--warm); border-color: var(--warm); }
.hero-stat:first-child small { color: rgba(234,243,248,0.86); }

/* hv-gallery: three documents fanned out (book covers are documents: never masked or duotoned) */
.hv-gallery .page-hero-inner { align-items: center !important; }
.hero-gallery { position: relative; height: 340px; }
.hero-gallery img { position: absolute; top: 20px; width: 42%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 32px rgba(0,0,0,0.45); border: 1px solid rgba(112,206,239,0.25); }
.hero-gallery img:nth-child(1) { left: 2%; transform: rotate(-7deg); }
.hero-gallery img:nth-child(2) { left: 29%; top: 0; z-index: 2; }
.hero-gallery img:nth-child(3) { left: 56%; transform: rotate(7deg); }
.hero-gallery::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -8px; height: 70px; border-radius: 18px; background: var(--harbor); z-index: -1; }

/* hv-duotone: full-bleed duotoned photo behind centered text */
.hv-duotone { background: var(--harbor) var(--photo) center / cover no-repeat !important; background-blend-mode: luminosity; }
.hv-duotone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,34,48,0.80) 0%, rgba(14,34,48,0.62) 55%, rgba(14,34,48,0.92) 100%); }
.hv-duotone .page-hero-inner { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; text-align: center; justify-items: center; gap: 22px !important; }
.hv-duotone .jump, .hv-duotone .hero-actions { justify-content: center; }
.hv-duotone .lede { color: rgba(234,243,248,0.86) !important; max-width: 700px; margin: 0 auto; }

/* Landing pages with the full-bleed video: grayscale video under an Ink->Harbor wash (duotone) */
.hero .hero-video-bg { background: var(--harbor) var(--photo) center / cover no-repeat; background-blend-mode: luminosity; }
.hero .hero-video-bg iframe { filter: grayscale(1) contrast(1.05); }
/* Reduced motion: no background video; the still duotoned photo shows instead */
@media (prefers-reduced-motion: reduce) { .hero .hero-video-bg iframe { display: none; } }
.hero .hero-video-overlay { background: linear-gradient(160deg, rgba(14,34,48,0.90) 0%, rgba(44,89,119,0.72) 100%) !important; }

/* Guide pages (long reads): left text on the ground with a bars watermark */
.guide-hero { background: var(--ink) !important; border-bottom: 0 !important; position: relative; overflow: hidden; }
.guide-hero::after { content: ''; position: absolute; right: 4vw; bottom: 0; width: 420px; height: 144px; background: var(--bars-big) no-repeat right bottom / contain; pointer-events: none; }
.guide-hero > * { position: relative; z-index: 1; }

/* ── 9. Closer variants ── */
.cta-section { position: relative; overflow: hidden; border-top: 0 !important; }
.cta-headline { font-weight: 800 !important; }
/* closer-warm: Aha Blue, one 120px rounded corner, rising bars */
.closer-warm { background: var(--warm) !important; color: var(--on-dark); border-radius: 0 0 120px 0; padding-bottom: 150px !important;
  --text: #EAF3F8; --muted: rgba(234,243,248,0.86); --accent-lt: rgba(234,243,248,0.92); --border: rgba(255,255,255,0.3); }
.closer-warm::after { content: ''; position: absolute; right: 120px; bottom: 30px; width: 460px; height: 158px; background: var(--bars-big) no-repeat right bottom / contain; pointer-events: none; }
.closer-warm > * { position: relative; z-index: 1; }
.closer-warm .cta-headline em { color: var(--sky) !important; }
.closer-warm .btn-ghost { color: var(--on-dark); }
/* closer-box: the soft band with an outlined box */
.closer-box { background: var(--band-bg) !important; color: var(--band-text); --text: var(--band-text); --muted: var(--band-muted); --accent-lt: var(--band-accent); --border: var(--band-card-line); }
.closer-box .cta-inner, .closer-box .cta-box { border: 2px solid var(--band-em); border-radius: 18px; padding: 48px 52px; background: transparent; position: relative; }
.closer-box .cta-inner::before, .closer-box .cta-box::before { content: ''; position: absolute; top: -2px; left: 52px; width: 88px; height: 6px; border-radius: 3px; background: var(--exclaim); }
.closer-box .cta-headline { color: var(--band-text); }
.closer-box .cta-headline em { color: var(--band-em) !important; }
.closer-box .cta-label { color: var(--band-accent) !important; }
.closer-box .btn-ghost { color: var(--band-text); }
.closer-box .btn-ghost:hover { color: var(--band-em) !important; }
/* closer-duotone: a duotoned photo band */
.closer-duotone { background: var(--harbor) var(--photo) center / cover no-repeat !important; background-blend-mode: luminosity; color: var(--on-dark);
  --text: #EAF3F8; --muted: rgba(234,243,248,0.88); --accent-lt: rgba(234,243,248,0.92); }
.closer-duotone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,34,48,0.94) 0%, rgba(14,34,48,0.80) 50%, rgba(44,89,119,0.55) 100%); }
.closer-duotone > * { position: relative; z-index: 1; }
.closer-duotone .cta-headline em { color: var(--sky) !important; }
.closer-duotone .btn-ghost { color: var(--on-dark); }
/* closer-wave: layered waves on top of a deep Harbor band */
.closer-wave { background: var(--harbor-deep) !important; color: var(--on-dark); margin-top: 110px; overflow: visible !important;
  --text: #EAF3F8; --muted: rgba(234,243,248,0.86); --accent-lt: rgba(234,243,248,0.92); --border: rgba(255,255,255,0.3); }
.closer-wave::before { content: ''; position: absolute; left: 0; right: 0; top: -110px; height: 111px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C260,0 520,6 760,42 C1000,78 1220,74 1440,30 L1440,110 L0,110 Z' fill='%233E7196' fill-opacity='0.30'/%3E%3Cpath d='M0,70 C240,34 480,40 720,70 C960,100 1200,96 1440,58 L1440,110 L0,110 Z' fill='%232C5977' fill-opacity='0.75'/%3E%3Cpath d='M0,70 C240,34 480,40 720,70 C960,100 1200,96 1440,58' fill='none' stroke='%2370CEEF' stroke-opacity='0.5' stroke-width='1.5'/%3E%3Cpath d='M0,96 C300,76 620,78 900,94 C1120,106 1300,104 1440,92 L1440,110 L0,110 Z' fill='%2323496A'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }
.closer-wave .cta-headline em { color: var(--sky) !important; }
.closer-wave .btn-ghost { color: var(--on-dark); }

/* ── 9b. Comfort and clarity ── */
/* Focus: visible on every ground */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sky) !important; outline-offset: 3px; border-radius: 6px; }
.band-soft a:focus-visible, .closer-box a:focus-visible { outline-color: var(--band-em) !important; }
/* Links in running text are underlined, never colour alone */
p a:not([class]), li a:not([class]), .lede a, .note a { text-decoration: underline !important; text-underline-offset: 2px; }
nav a, nav li a:not([class]), footer .footer-col li a:not([class]), .jump a, .toc a, .toc li a:not([class]) { text-decoration: none !important; }
/* Product tile CTAs: product colour stays on the border, the label is readable */
.tool-cta { color: var(--sky) !important; }
.band-soft .tool-cta { color: var(--band-accent) !important; }
/* Customer logos: a still, wrapped row instead of a looping marquee */
.logo-marquee { -webkit-mask-image: none !important; mask-image: none !important; }
.lm-track { animation: none !important; width: auto !important; justify-content: center; }
.lm-set { flex-wrap: wrap; justify-content: center; row-gap: 22px; padding-right: 0 !important; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lm-set + .lm-set { display: none !important; }
/* Section pages: soft curved edges where a band meets the ground */
.page-hero ~ .band-soft, .page-hero ~ .band-harbor { position: relative; }
.page-hero ~ .band-soft::before, .page-hero ~ .band-harbor::before,
.page-hero ~ .band-soft::after, .page-hero ~ .band-harbor::after {
  content: ''; position: absolute; left: 0; right: 0; height: 36px; pointer-events: none; background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C360,4 1080,4 1440,36 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C360,4 1080,4 1440,36 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.page-hero ~ .band-soft::before, .page-hero ~ .band-harbor::before { top: -35px; }
.page-hero ~ .band-soft::after, .page-hero ~ .band-harbor::after { bottom: -35px; transform: scaleY(-1); z-index: 1; }

/* ── 10. Phones ── */
@media (max-width: 900px) {
  .hv-photo .page-hero-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-figure, .hv-photo.photo-left .page-hero-inner > .hero-figure { order: 0; width: 100%; margin: 8px 0 0; box-shadow: none; max-height: 280px; }
  .hero-figure .fig-bars { display: none; }
  .hero-gallery { height: 260px; max-width: 420px; }
  .hv-centered::before, .hv-centered::after { width: 200px; height: 69px; opacity: 0.6; }
  .guide-hero::after { width: 240px; height: 82px; opacity: 0.6; }
}
@media (max-width: 768px) {
  footer { border-radius: 64px 0 0 0; }
  .closer-warm { border-radius: 0 0 64px 0; }
  .closer-warm::after { right: 50%; transform: translateX(50%); width: 300px; height: 102px; bottom: 22px; }
  .closer-box .cta-inner, .closer-box .cta-box { padding: 32px 22px; }
  .closer-wave { margin-top: 64px; }
  .closer-wave::before { top: -64px; height: 65px; }
  .nav-brand img { max-height: 58px; }
  .hv-centered::after { display: none; }
}
@media (max-width: 480px) {
  .hero-stats { gap: 10px; }
  .hero-stat { padding: 16px 14px 14px; }
  .hero-stat small { font-size: 11px; letter-spacing: 0.06em; }
}

/* A closer-wave right after a band lays its waves over the band's lower edge */
.band-harbor + .closer-wave, .band-soft + .closer-wave { margin-top: 0; }
.page-hero ~ .band-harbor:has(+ .closer-wave)::after, .page-hero ~ .band-soft:has(+ .closer-wave)::after { display: none; }
.tools-grid { gap: 16px !important; }
.hero-stats .hero-stat:first-child:nth-last-child(3) { grid-column: span 2; }
/* Two-column closers: the bars sit under the headline, clear of the buttons */
.closer-warm:has(.cta-inner)::after { right: auto; left: 48px; width: 380px; height: 130px; bottom: 26px; }
@media (max-width: 768px) { .closer-warm:has(.cta-inner)::after { left: 50%; width: 280px; height: 96px; bottom: 20px; } }
.hero-text > div + div { margin-top: 20px; }
/* Two bands back to back: no curved edges between them */
.page-hero ~ :is(.band-soft, .band-harbor) + :is(.band-soft, .band-harbor)::before,
.page-hero ~ :is(.band-soft, .band-harbor):has(+ :is(.band-soft, .band-harbor, .closer-box, .closer-warm))::after { display: none; }
.stats-bar:has(> .stat-item:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.customer-names { gap: 8px 18px !important; } .customer-names span { border: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; color: var(--on-dark-muted) !important; }
/* Reduced motion: every animation lands on its final frame at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}