/* ============================================================================
   MANNING WEB COMPANY - SHARED DESIGN SYSTEM (mwc.css)
   ----------------------------------------------------------------------------
   One stylesheet for all tool + service pages:
     /landing-pages/auditor/   /google-ads/profit-calculator/
     /websites/website-planner/   /google-ads/   /websites/   /landing-pages/

   Brand DNA is lifted directly from the homepage (index.html): same palette,
   Montserrat, radii, shadows, gradients, eyebrow dot with coral crosshair,
   arrow buttons, dark footer shell. Elevated with a consistent 8px spacing
   rhythm, refined hover/focus-visible states, and restrained motion.

   TABLE OF CONTENTS
    1.  Design tokens
    2.  Reset + base
    3.  Layout (.container, section rhythm)
    4.  Topbar (gradient announcement)
    5.  Header, nav, mobile menu
    6.  Brand lockup
    7.  Buttons
    8.  Eyebrow + pills
    9.  Cards + card grids
   10.  Section heads + accent bar variants
   11.  Section surfaces
   12.  Bullets (checkmark + dot lists)
   13.  Forms (fields, selects, textareas, status boxes, honeypot)
   14.  FAQ accordion (native details/summary)
   15.  Tabs + segmented toggle (.mwc-tabs, .mwc-seg)
   16.  Result + stat cards
   17.  Score visualization (ring)
   18.  Check rows (pass/warn/fail/info scorecard)
   19.  Tool panel shell + loading states + empty state
   20.  CTA bands
   21.  Dark panels
   22.  Footer (dark shell, columns, meta row)
   23.  Utilities
   24.  Reveal-on-scroll states
   25.  Print helpers
   26.  Responsive breakpoints (980px, 720px, 400px)
   ========================================================================== */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette (identical to homepage - do not add new hues) */
  --navy: #12295b;
  --navy-2: #1a3773;
  --blue: #3563f6;
  --blue-2: #4f79ff;
  --blue-soft: #eef3ff;
  --text: #14284f;
  --muted: #667694;
  --line: #dbe5f5;
  --bg: #ffffff; /* page background base (top of the body gradient) */

  /* Status tints (already in use by existing form status boxes) */
  --ok-bg: #eefaf1;   --ok-line: #bfe8cd;   --ok-text: #1c6b3c;
  --warn-bg: #fff8ec; --warn-line: #f0dfb7; --warn-text: #7a5c1d;
  --bad-bg: #fdf1f1;  --bad-line: #f2c9c9;  --bad-text: #8a3030;

  /* Radii */
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-card: 24px;
  --r-band: 28px;
  --r-shell: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 10px 24px rgba(53, 99, 246, 0.10);
  --shadow-card: 0 18px 46px rgba(18, 41, 91, 0.06);
  --shadow-lift: 0 24px 56px rgba(18, 41, 91, 0.10);
  --shadow-btn: 0 16px 34px rgba(79, 121, 255, 0.28);
  --shadow-shell: 0 28px 64px rgba(18, 41, 91, 0.18);

  /* Spacing rhythm (8px base) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;

  --max: 1180px;
  --header-h: 84px;
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(53, 99, 246, 0.10), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, #f9fbff 100%);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }

::selection { background: rgba(53, 99, 246, 0.16); }

/* Refined keyboard focus, everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(53, 99, 246, 0.45);
  outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus-visible { left: 0; }


/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}

section { padding: var(--s-10) 0; }
/* Pull a section closer to the one above it (e.g. tool panel under a hero) */
.section-tight { padding-top: var(--s-5); }

/* Page hero for interior pages (smaller than the homepage hero) */
.page-hero { padding: var(--s-8) 0 var(--s-5); }
.page-hero h1 {
  margin: 0 0 var(--s-2);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.05em;
  color: var(--navy);
  max-width: 22ch;
}
.page-hero .lede {
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 62ch;
}


/* ============================================================
   4. TOPBAR
   ============================================================ */
.topbar {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 6px 0;
}


/* ============================================================
   5. HEADER, NAV, MOBILE MENU
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
}

.nav-links {
  display: flex;
  align-items: center;
  /* Homepage uses a 28px gap between bare text links. These links carry
     14px of tap padding on each side (44px targets), so 16px here keeps
     the same visual rhythm between labels. */
  gap: var(--s-2);
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
}

.nav-links > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-links > a:not(.btn):hover {
  color: var(--navy);
  background: #e8eef9;
  box-shadow: 0 12px 28px rgba(18, 41, 91, 0.12);
}
/* Current-section link */
.nav-links > a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
  color: var(--navy);
  background: linear-gradient(180deg, #f3f7ff, #e9f0ff);
  box-shadow: inset 0 0 0 1px #d8e4fb;
}

.mobile-nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid #d7e4fb;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #f4f8ff, #e8efff);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.mobile-nav-toggle:hover { background: #eaf1ff; }
.mobile-nav-toggle svg { width: 22px; height: 22px; display: block; }

.mobile-menu {
  display: none;
  position: sticky;
  top: var(--header-h);
  z-index: 19;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.mobile-menu.is-open { display: block; }
.mobile-menu-inner { padding: 12px 0 18px; display: grid; gap: 10px; }
.mobile-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--r-md);
  background: #f6f9ff;
  color: var(--navy);
  font-weight: 700;
  border: 1px solid #e1eafb;
  transition: background .2s ease;
}
.mobile-menu a:hover { background: #eaf1ff; }


/* ============================================================
   6. BRAND LOCKUP
   ============================================================ */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  position: relative;
  box-shadow: 0 12px 28px rgba(53, 99, 246, 0.22);
  flex: 0 0 38px;
  overflow: hidden;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { display: flex; flex-direction: column; gap: 3px; }
.brand-name strong { font-size: .98rem; font-weight: 700; letter-spacing: -0.035em; }
.brand-name span {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #7d8ca8;
}


/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-weight: 800;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .2s ease, filter .2s ease, background .2s ease, box-shadow .2s ease;
  cursor: pointer;
  gap: 10px;
}
.btn::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}
.btn:hover::after { transform: translateX(2px); }
.btn.no-arrow::after { content: none; }

.btn-primary {
  background: #4f79ff;
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); }

.btn-secondary {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--blue-soft); }

/* For use on dark navy panels */
.btn-inverse {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 16px 34px rgba(10, 24, 55, 0.30);
}
.btn-inverse:hover { transform: translateY(-1px); }

button.btn { font-family: inherit; font-size: .96rem; }
button.btn:disabled {
  opacity: .65;
  cursor: default;
  transform: none;
  filter: none;
}


/* ============================================================
   8. EYEBROW + PILLS
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #f3f7ff, #e9f0ff);
  color: var(--navy);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #d8e4fb;
}

/* Blue dot with the coral crosshair (signature detail) */
.eyebrow-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(53, 99, 246, 0.12);
  flex: 0 0 14px;
}
.eyebrow-dot::before,
.eyebrow-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 155, 165, 0.95);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.eyebrow-dot::before { width: 1.5px; height: 24px; border-radius: var(--r-pill); }
.eyebrow-dot::after { width: 24px; height: 1.5px; border-radius: var(--r-pill); }

/* Small fact pills (e.g. "Takes about 30 seconds") */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid #d8e4fb;
  color: var(--navy);
  font-size: .85rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(18, 41, 91, 0.05);
}


/* ============================================================
   9. CARDS + CARD GRIDS
   ============================================================ */
.card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  color: var(--navy);
  letter-spacing: -0.03em;
}
.card p { margin: 0; color: var(--muted); }

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 800;
}
.card-icon svg { width: 22px; height: 22px; display: block; }

.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* Card that lifts slightly on hover (use on linked cards) */
.card-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }


/* ============================================================
   10. SECTION HEADS + ACCENT BAR VARIANTS
   ============================================================ */
.section-head { max-width: 780px; margin-bottom: var(--s-4); }
.section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.section-head p { margin: 0; color: var(--muted); font-size: 1.04rem; }

.section-copy { max-width: 760px; color: var(--muted); font-size: 1.02rem; }

/* Vertical gradient accent bar to the left of the head.
   USE .section-head.has-accent ON NEW PAGES - it composes with any section.
   .accented-section and .services-section are the homepage's original hooks
   for the same bar, kept only so homepage-ported markup renders identically. */
.accented-section .section-head,
.services-section .section-head,
.section-head.has-accent {
  position: relative;
  padding-left: 18px;
}
.accented-section .section-head::before,
.services-section .section-head::before,
.section-head.has-accent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 48px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  box-shadow: 0 10px 24px rgba(53, 99, 246, 0.18);
}


/* ============================================================
   11. SECTION SURFACES
   ============================================================ */
.section-surface-plain { background: transparent; }

.section-surface-soft {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-top: 1px solid #eef3fb;
  border-bottom: 1px solid #eef3fb;
}

.section-surface-blue {
  background: linear-gradient(180deg, #f5f8ff, #eef4ff);
  border-top: 1px solid #e2eafc;
  border-bottom: 1px solid #e2eafc;
}

.services-section {
  background: linear-gradient(180deg, #f8fbff, #eef4ff);
  border-top: 1px solid #e6eefc;
  border-bottom: 1px solid #e6eefc;
}
.services-section .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  border-color: #d7e4fb;
  box-shadow: 0 20px 48px rgba(18, 41, 91, 0.07);
}
/* Homepage parity: the services section also gets the gradient icon chip
   (the accent bar rules live with the other accent variants in section 10) */
.services-section .card-icon {
  background: linear-gradient(180deg, #edf3ff, #e1ebff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* ============================================================
   12. BULLETS (checkmark + dot lists)
   ============================================================ */
.check-list,
.contact-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.check-list li,
.contact-points li {
  position: relative;
  padding-left: 26px;
  color: var(--navy);
  font-weight: 700;
  font-size: .95rem;
}
.check-list li::before,
.contact-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 800;
}
/* Muted why-line under a checkmark item */
.check-list li span,
.check-list li small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 600;
  font-size: .88rem;
}

.dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dot-list li { position: relative; padding-left: 22px; color: var(--muted); font-weight: 600; }
.dot-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(53, 99, 246, 0.12);
}


/* ============================================================
   13. FORMS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-field { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.form-field.full { grid-column: 1 / -1; }
.req { color: #d64545; }

.form-field label {
  display: block;
  margin: 0 0 6px;
  font-size: .8rem;
  color: #53658a;
  font-weight: 800;
  letter-spacing: .015em;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #ccd9f0;
  border-radius: var(--r-sm);
  background: #fbfdff;
  color: var(--text);
  font: 600 .94rem/1.4 "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 12px;
  min-height: 46px;
  outline: none;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%233563f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}
.form-field textarea { min-height: 96px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 99, 246, 0.12);
}
.form-field input[aria-invalid="true"] {
  border-color: #d68585;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.10);
}

/* Unboxed fieldset + legend styled like a field label (for radio groups) */
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-legend {
  padding: 0;
  margin: 0 0 6px;
  font-size: .8rem;
  color: #53658a;
  font-weight: 800;
  letter-spacing: .015em;
}

/* Row holding a form's submit button (same hook as the homepage form) */
.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-2);
}

/* Helper microcopy under a field or control */
.form-help {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--muted);
  font-weight: 600;
}

/* Status boxes (same tints as existing site forms) */
.form-status {
  display: none;
  margin-top: 14px;
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: .92rem;
  line-height: 1.5;
  font-weight: 600;
}
.form-status.show { display: block; }
.form-status.success { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-text); }
.form-status.error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad-text); }
.form-status.setup { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); }

/* Honeypot: visually removed, still in the DOM for bots */
.hp,
.contact-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}


/* ============================================================
   14. FAQ ACCORDION (native details/summary, styled)
   ============================================================ */
.mwc-faq { display: grid; gap: 12px; max-width: 860px; }

.mwc-faq details {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mwc-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  min-height: 44px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: background .2s ease;
}
.mwc-faq summary::-webkit-details-marker { display: none; }
.mwc-faq summary:hover { background: #f6f9ff; }
.mwc-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 1.1rem;
  font-weight: 800;
  transition: transform .25s ease;
}
.mwc-faq details[open] summary::after { transform: rotate(45deg); }
.mwc-faq details[open] summary { border-bottom: 1px solid #edf2fc; }
.mwc-faq .faq-body { padding: 14px 20px 20px; color: var(--muted); font-size: .96rem; }
.mwc-faq .faq-body p { margin: 0; }
.mwc-faq .faq-body p + p { margin-top: 10px; }


/* ============================================================
   15. TABS + SEGMENTED TOGGLE
   ------------------------------------------------------------
   .mwc-tabs      compact pill switcher (calculator forward/reverse modes)
   .mwc-seg       big tappable option cards over hidden radios
                  (auditor page-type choice, planner quiz options)
   ============================================================ */
.mwc-tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: linear-gradient(180deg, #f0f5ff, #e7efff);
  border: 1px solid #d8e4fb;
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 3px rgba(18, 41, 91, 0.06);
  max-width: 100%;
}
.mwc-tab {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.mwc-tab:hover { color: var(--navy); }
.mwc-tab.is-active,
.mwc-tab[aria-selected="true"] {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 22px rgba(18, 41, 91, 0.10);
}

/* Segmented option cards */
.mwc-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mwc-seg-option { position: relative; display: block; cursor: pointer; }
.mwc-seg-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.mwc-seg-body {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 2px solid #ccd9f0;
  border-radius: var(--r-lg);
  background: #fbfdff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.mwc-seg-option:hover .mwc-seg-body { border-color: #a9c1ee; }
.mwc-seg-option input:checked + .mwc-seg-body {
  border-color: var(--blue);
  background: linear-gradient(180deg, #f3f7ff, #e9f0ff);
  box-shadow: 0 14px 30px rgba(53, 99, 246, 0.14);
}
.mwc-seg-option input:focus-visible + .mwc-seg-body {
  outline: 3px solid rgba(53, 99, 246, 0.45);
  outline-offset: 2px;
}
.mwc-seg-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 800;
  font-size: .96rem;
  letter-spacing: -0.02em;
}
/* Radio-style indicator dot inside the title */
.mwc-seg-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  border: 2px solid #8298c1;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mwc-seg-option input:checked + .mwc-seg-body .mwc-seg-dot {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px var(--blue);
}
.mwc-seg-help {
  display: block;
  margin: 6px 0 0 28px;
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.45;
}


/* ============================================================
   16. RESULT + STAT CARDS
   ============================================================ */
.mwc-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mwc-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: 0 14px 36px rgba(18, 41, 91, 0.06);
}
.mwc-stat strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.mwc-stat span { color: var(--muted); font-size: .93rem; font-weight: 700; }
.mwc-stat.is-good strong { color: var(--ok-text); }
.mwc-stat.is-warn strong { color: var(--warn-text); }
.mwc-stat.is-bad strong { color: var(--bad-text); }

/* Larger framed result card (verdicts, summaries) */
.mwc-result-card {
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border: 1px solid #d7e4fb;
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.mwc-result-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.mwc-result-card p { margin: 0 0 10px; color: var(--muted); font-size: .97rem; overflow-wrap: anywhere; }
.mwc-result-card p:last-child { margin-bottom: 0; }


/* ============================================================
   17. SCORE VISUALIZATION (ring)
   ------------------------------------------------------------
   Markup (built by JS): .mwc-score > .mwc-score-ring (svg + number)
   + .mwc-score-meta (grade, page title, url). The ring circle uses
   stroke-dasharray/offset; JS sets the offset, CSS animates it.
   ============================================================ */
.mwc-score {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mwc-score-ring {
  position: relative;
  width: 136px;
  height: 136px;
  flex: 0 0 136px;
}
.mwc-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.mwc-score-ring .ring-bg { stroke: #e6eefc; }
.mwc-score-ring .ring-val {
  transition: stroke-dashoffset 1.2s cubic-bezier(.25, .7, .3, 1);
}
.mwc-score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center; /* keeps the number centered over the wider label */
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.mwc-score-num small {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.mwc-score-meta { min-width: 0; flex: 1 1 260px; }
.mwc-score-grade {
  margin: 0 0 6px;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--navy);
  font-weight: 800;
}
.mwc-score-page {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .mwc-score-ring .ring-val { transition: none; }
}


/* ============================================================
   18. CHECK ROWS (scorecard)
   ------------------------------------------------------------
   Statuses are shape + color coded (never color-only):
   pass = circle/check, warn = triangle/!, fail = diamond/x,
   info = rounded square/i. Icons are inline SVG built by page JS.
   ============================================================ */
.mwc-group {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.mwc-group + .mwc-group { margin-top: 14px; }
.mwc-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  overflow-wrap: anywhere; /* API strings can contain long unbroken tokens */
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mwc-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid #e9effb;
}
.mwc-check:first-of-type { border-top: 0; }
.mwc-check-icon { flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px; }
.mwc-check-icon svg { width: 100%; height: 100%; display: block; }
.mwc-check-copy { min-width: 0; overflow-wrap: anywhere; }
.mwc-check-label {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  font-size: .94rem;
  letter-spacing: -0.01em;
}
.mwc-check-detail {
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: .89rem;
  line-height: 1.5;
}


/* ============================================================
   19. TOOL PANEL SHELL + LOADING + EMPTY STATE
   ============================================================ */
.mwc-tool-panel {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid #d7e4fb;
  border-radius: var(--r-band);
  padding: 34px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
/* Thin gradient accent along the top edge */
.mwc-tool-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--blue));
}
.mwc-tool-panel > h2:first-of-type,
.mwc-tool-panel > h3:first-of-type { margin-top: 0; }

/* Loading block with staged messages + shimmer bar */
.mwc-loading { padding: var(--s-3) 0 var(--s-1); }
.mwc-loading-msg {
  margin: 0 0 14px;
  color: var(--navy);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  min-height: 1.6em;
}
.mwc-progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: #e6eefc;
  overflow: hidden;
  position: relative;
}
.mwc-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  animation: mwc-progress-slide 1.5s ease-in-out infinite;
}
@keyframes mwc-progress-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .mwc-progress-bar { animation: none; width: 100%; opacity: .55; }
}

/* Pre-submit empty state */
.mwc-empty {
  margin-top: var(--s-3);
  border: 2px dashed #c6d6f2;
  border-radius: var(--r-xl);
  padding: 22px;
  background: rgba(246, 249, 255, 0.7);
}
.mwc-empty h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.mwc-empty p { margin: 0 0 12px; color: var(--muted); font-size: .93rem; font-weight: 600; }

/* Fine-print / honest-caveat line inside results */
.mwc-fineprint {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: #f3f7ff;
  border: 1px solid #dde7fa;
  color: #53658a;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.5;
}


/* ============================================================
   20. CTA BANDS
   ============================================================ */
.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: 32px;
  border-radius: 30px;
  background: linear-gradient(135deg, #f7faff 0%, #eef4ff 56%, #dfe9ff 100%);
  color: var(--navy);
  box-shadow: 0 24px 56px rgba(18, 41, 91, 0.08);
  border: 1px solid #d8e4fb;
}
.cta-band h2 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--navy);
}
.cta-band p { margin: 0; max-width: 56ch; color: var(--muted); }
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}


/* ============================================================
   21. DARK PANELS (navy shell with dot grid, reusable)
   ============================================================ */
.mwc-panel-dark {
  position: relative;
  overflow: hidden;
  padding: 34px 30px;
  border-radius: var(--r-shell);
  color: #d9e4ff;
  background:
    radial-gradient(circle at 18% 18%, rgba(112, 146, 255, 0.18), transparent 20%),
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.10), transparent 16%),
    linear-gradient(135deg, #12295b 0%, #17336d 56%, #2149a3 100%);
  box-shadow: var(--shadow-shell);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.mwc-panel-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  opacity: 0.18;
  pointer-events: none;
}
.mwc-panel-dark > * { position: relative; z-index: 1; }
.mwc-panel-dark h2,
.mwc-panel-dark h3 { color: #fff; letter-spacing: -0.04em; margin-top: 0; }
.mwc-panel-dark p { color: rgba(228, 236, 255, 0.82); }


/* ============================================================
   22. FOOTER (dark shell, 4 columns on new pages)
   ============================================================ */
.footer { padding: 0 0 42px; color: #d9e4ff; }

.footer-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.footer-divider span {
  display: block;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  box-shadow: 0 8px 18px rgba(53, 99, 246, 0.16);
}
.footer-divider span:nth-child(1),
.footer-divider span:nth-child(3) { width: 18px; height: 6px; opacity: 0.65; }
.footer-divider span:nth-child(2) { width: 56px; height: 8px; }

.footer-shell {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 34px 30px 26px;
  border-radius: var(--r-shell);
  background:
    radial-gradient(circle at 18% 18%, rgba(112, 146, 255, 0.18), transparent 20%),
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.10), transparent 16%),
    linear-gradient(135deg, #12295b 0%, #17336d 56%, #2149a3 100%);
  box-shadow: var(--shadow-shell);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  opacity: 0.18;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .65fr) minmax(0, .85fr) minmax(0, .95fr);
  gap: 26px;
  align-items: start;
  text-align: left;
}

.footer-brand { max-width: 34ch; }
.footer-brand .brand { color: #fff; margin-bottom: 16px; }
.footer-brand p { margin: 0; color: rgba(228, 236, 255, 0.80); font-size: .96rem; }

.footer-heading {
  margin: 0 0 14px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Zero grid gap: each link row is a full 44px touch target, so the 44px
   pitch alone supplies the vertical rhythm between links. */
.footer-links { display: grid; gap: 0; font-size: .95rem; font-weight: 700; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  color: #fff;
  opacity: 0.92;
  transition: opacity .2s ease, transform .2s ease;
}
.footer-links a::before { content: "→"; font-size: .88rem; opacity: 0.7; }
.footer-links a:hover { opacity: 1; transform: translateX(2px); }

.footer-note-box { padding: 6px 0 0; }
.footer-note-copy {
  color: rgba(228, 236, 255, 0.80);
  font-size: .90rem;
  line-height: 1.65;
  margin: 0;
  max-width: 34ch;
}

.footer-meta-row {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  text-align: center;
}

.footer-policy-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(228, 236, 255, 0.68);
}
.footer-policy-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  color: rgba(228, 236, 255, 0.76);
  transition: color .2s ease;
  padding: 0 14px;
  position: relative;
}
.footer-policy-row a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  border-left: 1px solid rgba(228, 236, 255, 0.32);
}
.footer-policy-row a:hover { color: #fff; }
/* On narrow screens the row wraps, which would leave a stray pipe at the
   start of wrapped lines - drop the pipes and let link padding separate. */
@media (max-width: 640px) {
  .footer-policy-row a + a::before { display: none; }
}

.footer-bottom {
  color: rgba(228, 236, 255, 0.72);
  font-size: .86rem;
  font-weight: 600;
  padding-right: 8px;
}


/* ============================================================
   23. UTILITIES
   ============================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-center { text-align: center; }
.u-mt-1 { margin-top: var(--s-1); }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mb-0 { margin-bottom: 0; }
.u-maxw-prose { max-width: 68ch; }

[hidden] { display: none !important; }

/* Anything JS scrolls into view lands below the sticky header */
.mwc-scroll-target { scroll-margin-top: calc(var(--header-h) + var(--s-2)); }

/* Interactive tool UI that is useless without JS. mwc.js (and each tool's
   own app.js, as a fallback) adds .js to <html>; pair with a <noscript>
   message so no-JS visitors get an explanation instead of a dead form. */
html:not(.js) .needs-js { display: none; }


/* ============================================================
   24. REVEAL-ON-SCROLL STATES
   ------------------------------------------------------------
   Progressive enhancement: mwc.js adds .js to <html> immediately,
   so content stays visible when JS is unavailable. Disabled under
   prefers-reduced-motion (mwc.js also skips the observer).
   ============================================================ */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   25. PRINT HELPERS
   ============================================================ */
.print-only { display: none; }

@media print {
  .print-only { display: block; }
  .topbar,
  .site-header,
  .mobile-menu,
  .mobile-nav-toggle,
  .cta-band,
  .footer,
  .mwc-empty,
  .mwc-loading,
  [data-noprint] { display: none !important; }

  body { background: #fff; }
  section { padding: 18px 0; }
  .card,
  .mwc-group,
  .mwc-tool-panel,
  .mwc-result-card { box-shadow: none; border-color: #c9c9c9; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   26. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 980px) {
  .cards-2,
  .cards-3,
  .mwc-stat-cards { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav-links { display: none; }
  .mobile-nav-toggle { display: inline-flex; }

  .cta-band { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  :root { --s-10: 60px; }

  .topbar-inner { padding: 8px 0; min-height: 52px; }

  .page-hero { padding-top: var(--s-6); }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.9rem); max-width: none; }

  .form-grid { grid-template-columns: 1fr; }
  .mwc-seg { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; }

  .mwc-tool-panel { padding: 24px 20px; }
  .mwc-score { gap: 18px; }
}

@media (max-width: 400px) {
  .card,
  .mwc-group,
  .mwc-result-card { padding: 18px 16px; }

  .mwc-tool-panel { padding: 20px 14px; }
  .cta-band { padding: 24px 18px; }
  .footer-shell { padding: 26px 18px 20px; }

  .btn { width: 100%; }
  .nav .btn,
  .mwc-tabs .mwc-tab { width: auto; }

  .mwc-score-ring { width: 116px; height: 116px; flex-basis: 116px; }
  .mwc-score-num { font-size: 1.85rem; }
}

/* ==========================================================================
   19. LEDGER THEME (opt-in per page via body.theme-ledger)
   --------------------------------------------------------------------------
   The refreshed visual direction: near-white canvas with a two-level slate
   grid, orange as the single energy accent, naked nav that gains a frosted
   full-width bar on scroll, tactile buttons, full-bleed navy footer, film
   grain, and motion polish. Pages adopt it by adding class="theme-ledger"
   to <body>; unthemed pages are untouched. Once every page is on the theme
   these rules become the defaults.
   ========================================================================== */

body.theme-ledger {
  --orange: #F58F29;
  --orange-deep: #d97a14;
  --muted: #5b6674;
  --line: #e1e5ea;
  /* Display face for headlines only; falls back to Montserrat until the
     font link is present. Swap or remove this one variable to revert. */
  --font-display: "Bricolage Grotesque", "Montserrat", ui-sans-serif, system-ui, sans-serif;

  color: var(--text);
  background:
    linear-gradient(rgba(18, 41, 91, 0.07) 1px, transparent 1px) 0 0 / 100% 180px,
    linear-gradient(90deg, rgba(18, 41, 91, 0.07) 1px, transparent 1px) 0 0 / 180px 100%,
    linear-gradient(rgba(18, 41, 91, 0.022) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(18, 41, 91, 0.022) 1px, transparent 1px) 0 0 / 36px 100%,
    radial-gradient(1100px 480px at 72% -8%, rgba(53, 99, 246, 0.07), transparent 60%),
    #f8f9fb;
}

/* Film grain: nearly invisible, makes flat colour feel printed. Sits above
   page content, below overlays like the Calendly popup. */
body.theme-ledger::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

body.theme-ledger h1,
body.theme-ledger h2 { font-family: var(--font-display); }

/* ---------- Naked nav that frosts on scroll ---------- */
body.theme-ledger .site-header {
  position: sticky;
  top: 0;
  padding: 10px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.theme-ledger .site-header .nav { background: transparent; }
body.theme-ledger .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(18, 41, 91, 0.12);
  box-shadow: 0 6px 24px rgba(18, 41, 91, 0.05);
}
/* Nav links: small tracked caps, same treatment as the brand tagline */
body.theme-ledger .nav-links > a:not(.btn) {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
body.theme-ledger .nav-links > a:not(.btn):hover,
body.theme-ledger .nav-links > a[aria-current="page"] {
  color: var(--navy);
}
body.theme-ledger .mobile-menu {
  top: 0;
  background: rgba(255, 255, 255, 0.97);
}

/* ---------- Tactile buttons ---------- */
body.theme-ledger .btn { border-radius: 11px; }
body.theme-ledger .btn-primary {
  background: linear-gradient(180deg, #4f79ff, #3563f6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px rgba(53, 99, 246, 0.35);
}
body.theme-ledger .btn-primary:hover {
  background: linear-gradient(180deg, #5a82ff, #3a67f8);
  transform: translateY(-1px);
}
body.theme-ledger .btn-secondary {
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(18, 41, 91, 0.06);
}
body.theme-ledger .nav .btn { min-height: 48px; padding: 12px 18px; }

/* ---------- Eyebrow: white chip, orange dot, mono option ---------- */
body.theme-ledger .eyebrow {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 8px 20px rgba(18, 41, 91, 0.06);
}
body.theme-ledger .eyebrow-dot {
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(245, 143, 41, 0.16);
}
body.theme-ledger .eyebrow-dot::before,
body.theme-ledger .eyebrow-dot::after { display: none; }

/* Monospace data label: use on eyebrows and small captions for the
   measurement-readout feel */
body.theme-ledger .mono-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .07em;
}

/* Marker underline for the money phrase in headlines */
body.theme-ledger h1 .hl,
body.theme-ledger h2 .hl {
  background: linear-gradient(0deg, rgba(245, 143, 41, 0.38), rgba(245, 143, 41, 0.38)) no-repeat left 92% / 100% 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Hero portrait: navy circle + thin offset orange ring ---------- */
body.theme-ledger .hv2 {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.theme-ledger .hv2-circle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: linear-gradient(180deg, #1e3d7e, #12295b);
  box-shadow: 0 30px 70px rgba(18, 41, 91, 0.32);
  z-index: 1;
}
body.theme-ledger .hv2-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(calc(-50% + 22px), -18px);
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 3px solid rgba(245, 143, 41, 0.85);
  z-index: 0;
}
body.theme-ledger .hv2-photo {
  position: relative;
  z-index: 2;
  max-height: 548px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(10, 24, 55, 0.22));
}
body.theme-ledger .hv2 .hero-badge {
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, 0.97);
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(10, 24, 55, 0.12);
  min-width: 188px;
}
body.theme-ledger .hv2 .hero-badge strong { display: block; font-size: .96rem; letter-spacing: -0.02em; margin-bottom: 3px; }
body.theme-ledger .hv2 .hero-badge span { font-size: .87rem; color: var(--muted); font-weight: 700; }
body.theme-ledger .hv2 .hero-badge.top { top: 0; left: -6px; transform: rotate(-2deg); }
body.theme-ledger .hv2 .hero-badge.bottom { right: 0; bottom: 7%; transform: rotate(2deg); }

/* ---------- Hand-drawn scribbles ---------- */
body.theme-ledger .scribble-wrap { position: relative; }
body.theme-ledger .hero-scribble {
  position: absolute;
  left: 248px;
  top: 52px;
  width: 88px;
  height: 44px;
  transform: rotate(12deg);
  pointer-events: none;
}
body.theme-ledger .hero-scribble path { stroke: var(--orange); }
body.theme-ledger .hero-scribble-note {
  position: absolute;
  left: 352px;
  top: 64px;
  color: var(--orange-deep);
  font-weight: 700;
  font-size: .88rem;
  transform: rotate(-3deg);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Honest trust chips ---------- */
body.theme-ledger .hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 58px 0 26px;
}
body.theme-ledger .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(18, 41, 91, 0.05);
  color: var(--navy);
  font-weight: 700;
  font-size: .88rem;
}
body.theme-ledger .hero-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  flex: 0 0 8px;
}

/* ---------- Sections on the canvas ---------- */
body.theme-ledger .section-surface-soft,
body.theme-ledger .services-section {
  background: #fff;
  border-top: 1px solid #e8ebef;
  border-bottom: 1px solid #e8ebef;
}
body.theme-ledger .card,
body.theme-ledger .insight-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(18, 41, 91, 0.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
body.theme-ledger .card:hover,
body.theme-ledger .insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(18, 41, 91, 0.10);
}
body.theme-ledger .services-section .section-head::before,
body.theme-ledger .accented-section .section-head::before,
body.theme-ledger .section-head.has-accent::before {
  background: linear-gradient(180deg, var(--orange), var(--orange-deep));
  box-shadow: 0 10px 24px rgba(245, 143, 41, 0.25);
}
body.theme-ledger .card-icon {
  background: #fdf1e2;
  color: var(--orange-deep);
}
/* Hairline-outlined cards: one section per page, grid shows through */
body.theme-ledger .cards-hairline .insight-card,
body.theme-ledger .cards-hairline .card {
  background: transparent;
  border: 1px solid #cfd6df;
  box-shadow: none;
}
body.theme-ledger .cards-hairline .insight-card:hover,
body.theme-ledger .cards-hairline .card:hover {
  transform: none;
  box-shadow: none;
  border-color: #aeb9c6;
}

/* Solid navy numerals + mono captions on stat cards */
body.theme-ledger .mini-stat { border-color: var(--line); box-shadow: 0 10px 26px rgba(18, 41, 91, 0.05); }
body.theme-ledger .mini-stat strong { color: var(--navy); }
body.theme-ledger .mini-stat span {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
}

body.theme-ledger .cta-band {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(18, 41, 91, 0.07);
}
body.theme-ledger .contact-pitch,
body.theme-ledger .contact-form-card { border-color: var(--line); }

/* ---------- Full-bleed navy contrast band ---------- */
body.theme-ledger .band-navy {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 100% 180px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 180px 100%,
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 36px 100%,
    radial-gradient(900px 400px at 18% -10%, rgba(79, 121, 255, 0.25), transparent 60%),
    linear-gradient(135deg, #12295b 0%, #17336d 60%, #1a3773 100%);
  border-top: 0;
  border-bottom: 0;
}
body.theme-ledger .band-navy .section-head h2 { color: #fff; }
body.theme-ledger .band-navy .section-head p,
body.theme-ledger .band-navy .section-copy { color: rgba(228, 236, 255, 0.82); }
body.theme-ledger .band-navy .section-head::before {
  background: linear-gradient(180deg, var(--orange), var(--orange-deep));
}
body.theme-ledger .band-navy .insight-card,
body.theme-ledger .band-navy .reporting-band,
body.theme-ledger .band-navy .card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
body.theme-ledger .band-navy .insight-card:hover,
body.theme-ledger .band-navy .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
}
body.theme-ledger .band-navy .insight-card h3,
body.theme-ledger .band-navy .reporting-band h3,
body.theme-ledger .band-navy .card h3 { color: #fff; }
body.theme-ledger .band-navy .insight-card p,
body.theme-ledger .band-navy .reporting-band p,
body.theme-ledger .band-navy .card p { color: rgba(228, 236, 255, 0.78); }
body.theme-ledger .band-navy .title-icon { color: var(--orange); }

/* ---------- Flagship spotlight + scrolling card columns ---------- */
body.theme-ledger .flagship-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f79ff, #3563f6);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(53, 99, 246, 0.3);
  margin-bottom: 16px;
}
body.theme-ledger .flagship-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px;
  align-items: center;
}
body.theme-ledger .flagship-points {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
}
body.theme-ledger .flagship-points li {
  position: relative;
  padding-left: 28px;
  color: var(--navy);
  font-weight: 700;
  font-size: .98rem;
}
body.theme-ledger .flagship-points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange-deep);
  font-weight: 800;
}
body.theme-ledger .flagship-points li small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: .88rem;
  margin-top: 2px;
}

/* The scrolling columns: two vertical marquees with fade masks. Content is
   duplicated in markup (aria-hidden on the copy) for a seamless loop. */
body.theme-ledger .marquee-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 480px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
body.theme-ledger .marquee-col { display: flex; flex-direction: column; gap: 16px; animation: mwcMarqueeUp 36s linear infinite; }
body.theme-ledger .marquee-col.is-down { animation-name: mwcMarqueeDown; animation-duration: 42s; }
body.theme-ledger .marquee-cols:hover .marquee-col { animation-play-state: paused; }
body.theme-ledger .marquee-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(18, 41, 91, 0.05);
  flex-shrink: 0;
}
body.theme-ledger .marquee-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: .98rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
body.theme-ledger .marquee-card h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  flex: 0 0 8px;
}
body.theme-ledger .marquee-card p { margin: 0; color: var(--muted); font-size: .9rem; }
@keyframes mwcMarqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mwcMarqueeDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- Tool cards section ---------- */
body.theme-ledger .tool-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
body.theme-ledger .tool-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(18, 41, 91, 0.05);
  transition: transform .22s ease, box-shadow .22s ease;
  color: inherit;
}
body.theme-ledger .tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(18, 41, 91, 0.10);
}
body.theme-ledger .tool-card .mono-label {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.theme-ledger .tool-card h3 { margin: 0 0 8px; font-size: 1.14rem; color: var(--navy); letter-spacing: -0.03em; }
body.theme-ledger .tool-card p { margin: 0 0 16px; color: var(--muted); font-size: .94rem; }
body.theme-ledger .tool-card .tool-card-cta {
  margin-top: auto;
  color: var(--blue);
  font-weight: 800;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body.theme-ledger .tool-card .tool-card-cta::after { content: "\2192"; transition: transform .2s ease; }
body.theme-ledger .tool-card:hover .tool-card-cta::after { transform: translateX(3px); }

/* ---------- Full-bleed navy footer ---------- */
body.theme-ledger .footer { padding: 0; color: #d9e4ff; }
body.theme-ledger .footer-divider { display: none; }
body.theme-ledger .footer > .container { width: 100%; max-width: none; margin: 0; }
body.theme-ledger .footer-shell {
  border-radius: 0;
  border: 0;
  border-top: 1px solid rgba(18, 41, 91, 0.12);
  margin-top: 72px;
  padding: 56px 0 30px;
  box-shadow: none;
}
body.theme-ledger .footer-inner,
body.theme-ledger .footer-meta-row {
  width: min(calc(100% - 32px), var(--max, 1180px));
  margin-left: auto;
  margin-right: auto;
}
body.theme-ledger .footer-meta-row { margin-top: 26px; }

/* ---------- Responsive + reduced motion ---------- */
@media (max-width: 980px) {
  body.theme-ledger .flagship-grid { grid-template-columns: 1fr; }
  body.theme-ledger .marquee-cols { height: 380px; }
  body.theme-ledger .tool-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.theme-ledger .hv2 { min-height: 470px; }
  body.theme-ledger .hv2-circle, body.theme-ledger .hv2-ring { width: 300px; height: 300px; }
  body.theme-ledger .hv2-ring { transform: translate(calc(-50% + 14px), -12px); }
  body.theme-ledger .hv2-photo { max-height: 430px; }
  body.theme-ledger .hero-scribble, body.theme-ledger .hero-scribble-note { display: none; }
  body.theme-ledger .hero-chips { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-ledger .marquee-col { animation: none; }
  body.theme-ledger .marquee-cols { height: auto; -webkit-mask-image: none; mask-image: none; }
  body.theme-ledger .card:hover,
  body.theme-ledger .insight-card:hover,
  body.theme-ledger .tool-card:hover { transform: none; }
}

/* ---- Ledger theme round 2 refinements ---- */

/* Display font needs looser tracking than Montserrat did */
body.theme-ledger h1 { letter-spacing: -0.022em; }
body.theme-ledger h2 { letter-spacing: -0.015em; }

/* Cleaner buttons: keep the tactile gradient + inner highlight, drop the
   outer glow shadows */
body.theme-ledger .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.theme-ledger .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
body.theme-ledger .btn-secondary { box-shadow: none; }

/* Auto-hiding nav: slides away scrolling down, returns scrolling up */
body.theme-ledger .site-header {
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .3s ease;
}
body.theme-ledger .site-header.is-hidden { transform: translateY(-110%); }

/* Very dark footer */
body.theme-ledger .footer-shell {
  background: #0a1122;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.theme-ledger .footer-meta-row { border-top-color: rgba(255, 255, 255, 0.08); }

/* Hero stat band: honest numbers, AH style. Overlaps the portrait on mobile. */
body.theme-ledger .hero-statband {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(18, 41, 91, 0.06);
  overflow: hidden;
}
body.theme-ledger .statband-item {
  padding: 22px 26px;
  border-left: 1px solid var(--line);
}
body.theme-ledger .statband-item:first-child { border-left: 0; }
body.theme-ledger .statband-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin-bottom: 8px;
}
body.theme-ledger .statband-item .mono-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}

/* Services numbering: big display numerals with an orange tick, replacing
   the chip (the hero no longer carries its own 01/02/03 row) */
body.theme-ledger .services-section .card-icon {
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0 0 10px;
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--navy);
  position: relative;
  margin-bottom: 18px;
}
body.theme-ledger .services-section .card-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--orange);
}

/* Tool cards: icon chip + button-style CTA */
body.theme-ledger .tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fdf1e2;
  color: var(--orange-deep);
  margin-bottom: 14px;
}
body.theme-ledger .tool-icon svg { width: 22px; height: 22px; }
body.theme-ledger .tool-card .tool-card-cta {
  align-self: flex-start;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--navy);
  background: #fff;
  transition: border-color .2s ease, background .2s ease;
}
body.theme-ledger .tool-card:hover .tool-card-cta {
  border-color: var(--blue);
  color: var(--blue);
}

@media (max-width: 980px) {
  /* Portrait stays above the fold: the stat band pulls up over its base */
  body.theme-ledger .hero-statband {
    grid-template-columns: 1fr;
    margin-top: -84px;
    position: relative;
    z-index: 3;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
  }
  body.theme-ledger .statband-item { border-left: 0; border-top: 1px solid var(--line); padding: 16px 22px; }
  body.theme-ledger .statband-item:first-child { border-top: 0; }

  /* Marquee tiles: static stack on small screens, duplicates hidden */
  body.theme-ledger .marquee-cols {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
    grid-template-columns: 1fr;
  }
  body.theme-ledger .marquee-col { animation: none; }
  body.theme-ledger .marquee-card.is-dupe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-ledger .marquee-card.is-dupe { display: none; }
  body.theme-ledger .site-header.is-hidden { transform: none; }
}

/* Mobile hero: chips yield so the portrait makes it above the fold; the
   stat band overlapping the portrait carries the trust load instead */
@media (max-width: 980px) {
  body.theme-ledger .hero .hero-chips { display: none; }
}

/* Headline measure: with the display font and relaxed tracking, allow a
   wider line so the H1 sits at two to three lines, not five */
body.theme-ledger .hero h1 { max-width: 12ch; font-size: clamp(2.9rem, 5.6vw, 5.1rem); }

/* ---- Ledger theme round 3 refinements ---- */

/* Nav link hover: flat, no shadow */
body.theme-ledger .nav-links > a:not(.btn):hover {
  background: rgba(18, 41, 91, 0.05);
  box-shadow: none;
}

/* Tighter hero so the stat band lands above the fold on desktop */
body.theme-ledger .hero { padding: 40px 0 44px; }
body.theme-ledger .hv2 { min-height: 540px; }
body.theme-ledger .hv2-circle { width: 400px; height: 400px; }
body.theme-ledger .hv2-ring { width: 400px; height: 400px; }
body.theme-ledger .hv2-photo { max-height: 508px; }

/* Chips: one full-width horizontal line between hero and stat band */
body.theme-ledger .hero-chips { margin: 26px 0 0; }
body.theme-ledger .hero-chip { min-height: 36px; padding: 7px 13px; font-size: .84rem; }
body.theme-ledger .hero-statband { margin-top: 16px; }

/* Mobile: bottom hero badge rides above the overlapping stat band */
@media (max-width: 980px) {
  body.theme-ledger .hv2 .hero-badge.bottom { bottom: 104px; right: 4px; }
}

/* Marquee: faster, seamless loop (offset accounts for the column gap) */
body.theme-ledger .marquee-col { animation-duration: 22s; }
body.theme-ledger .marquee-col.is-down { animation-duration: 26s; }
@keyframes mwcMarqueeUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes mwcMarqueeDown { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }

/* Clean grey surface: for sections that should sit OFF the grid */
body.theme-ledger .section-clean {
  background: #f1f3f6;
  border-top: 1px solid #e6e9ed;
  border-bottom: 1px solid #e6e9ed;
}
body.theme-ledger .section-clean .tool-card { box-shadow: 0 10px 26px rgba(18, 41, 91, 0.06); }

/* Full-bleed bright blue closing band, AH style */
body.theme-ledger .bleed-cta {
  background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 100% 180px,
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 180px 100%,
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 36px 100%,
    linear-gradient(160deg, #2f5ff5 0%, #3563f6 55%, #2149a3 100%);
  padding: 88px 0;
}
body.theme-ledger .bleed-cta h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  max-width: 18ch;
}
body.theme-ledger .bleed-cta p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  font-size: 1.04rem;
}
body.theme-ledger .bleed-cta .mono-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 18px;
}
body.theme-ledger .btn-white {
  background: #fff;
  color: var(--navy);
  border: 0;
  box-shadow: none;
}
body.theme-ledger .btn-white:hover { background: #eef2f9; transform: translateY(-1px); }

/* Mobile sizes for the hero portrait circle (must follow the desktop
   resize above in the cascade) */
@media (max-width: 720px) {
  body.theme-ledger .hv2-circle, body.theme-ledger .hv2-ring { width: 300px; height: 300px; }
  body.theme-ledger .hv2-photo { max-height: 430px; }
}

/* Flush footer: when a full-bleed band closes the page, the dark footer
   sits directly against it (add .footer-flush to that page's footer) */
body.theme-ledger .footer-flush .footer-shell { margin-top: 0; border-top: 0; }

/* ---- Accolade ticker: thin white ribbon, slow horizontal marquee ---- */
body.theme-ledger .ticker {
  background: #fff;
  border-top: 1px solid #e8ebef;
  border-bottom: 1px solid #e8ebef;
  padding: 17px 0;
  overflow: hidden;
}
body.theme-ledger .ticker-track {
  display: flex;
  width: max-content;
  animation: mwcTickerX 36s linear infinite;
}
body.theme-ledger .ticker:hover .ticker-track { animation-play-state: paused; }
body.theme-ledger .ticker-group { display: flex; }
body.theme-ledger .ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: 44px;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
}
body.theme-ledger .ticker-item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
  flex: 0 0 7px;
}
@keyframes mwcTickerX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  body.theme-ledger .ticker-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  body.theme-ledger .ticker-group.is-dupe { display: none; }
}

/* ==========================================================================
   20. SERVICE PAGE HERO + TOOL MOCKUP (theme-ledger)
   --------------------------------------------------------------------------
   Shared by the three service pages: one-statement hero on the left, a
   designed static mockup of the page's own free tool on the right. The
   mockup internals (bars, tree rows, score ring) are styled per page.
   ========================================================================== */
body.theme-ledger .svc-hero { padding: 48px 0 46px; }
body.theme-ledger .svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
  gap: 52px;
  align-items: center;
}
body.theme-ledger .svc-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.8rem, 5.2vw, 4.5rem);
  line-height: .97;
  color: var(--navy);
  max-width: 13ch;
}
body.theme-ledger .svc-hero-sub {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 46ch;
}
body.theme-ledger .svc-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 58px; /* room for the scribble note hanging below */
}
/* Nudge the scribble right so it points at the tool CTA (second button) */
body.theme-ledger .svc-hero .hero-scribble { left: 300px; }
body.theme-ledger .svc-hero .hero-scribble-note { left: 404px; }

/* Floating white card cluster holding the mockup */
body.theme-ledger .mock-cluster { position: relative; display: grid; }
body.theme-ledger .mock-window {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 28px 64px rgba(18, 41, 91, 0.13);
}
body.theme-ledger .mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
body.theme-ledger .mock-head .mono-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
body.theme-ledger .mock-dots { display: flex; gap: 5px; }
body.theme-ledger .mock-dots i { width: 8px; height: 8px; border-radius: 999px; background: #e1e5ea; }
body.theme-ledger .mock-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 18px 44px rgba(18, 41, 91, 0.12);
}
body.theme-ledger .mock-card.is-tilt {
  transform: rotate(-2deg);
  width: min(88%, 330px);
  justify-self: end;
  margin-top: -12px;
  margin-right: 6px;
  position: relative;
  z-index: 2;
}
body.theme-ledger .mock-card > .mono-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.theme-ledger .mock-caption {
  margin: 20px 0 0;
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--muted);
}
body.theme-ledger .mock-caption a { color: var(--blue); }

@media (max-width: 980px) {
  body.theme-ledger .svc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  body.theme-ledger .svc-hero h1 { max-width: none; }
}
@media (max-width: 720px) {
  body.theme-ledger .svc-hero { padding-top: 30px; }
  body.theme-ledger .svc-hero .hero-actions { margin-bottom: 8px; }
  body.theme-ledger .mock-card.is-tilt { width: min(94%, 330px); margin-right: 2px; }
}

/* ---- In-text (prose) links: identifiable as links ----
   Any <a> sitting inside body copy gets the brand blue with an underline so
   it reads as a link, the way people expect. Scoped to main so footer, nav,
   and button links are untouched; button-like classes are excluded too. */
body.theme-ledger main p a:not(.btn):not(.tool-card-cta):not(.back-link):not([class*="cta"]),
body.theme-ledger main .flagship-points li a:not(.btn),
body.theme-ledger main .check-list a:not(.btn),
body.theme-ledger main li > a:not(.btn):not(.tool-card-cta):not(.back-link):not([class*="cta"]) {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(53, 99, 246, 0.42);
  transition: color .15s ease, text-decoration-color .15s ease;
  border-radius: 2px;
}
body.theme-ledger main p a:not(.btn):not(.tool-card-cta):not(.back-link):not([class*="cta"]):hover,
body.theme-ledger main .flagship-points li a:not(.btn):hover,
body.theme-ledger main .check-list a:not(.btn):hover,
body.theme-ledger main li > a:not(.btn):not(.tool-card-cta):not(.back-link):not([class*="cta"]):hover {
  color: var(--orange-deep);
  text-decoration-color: var(--orange);
}
/* On the navy contrast band, prose links go light so they stay legible */
body.theme-ledger main .band-navy p a:not(.btn),
body.theme-ledger main .band-navy li a:not(.btn) { color: #9db8ff; text-decoration-color: rgba(157, 184, 255, 0.5); }
body.theme-ledger main .band-navy p a:not(.btn):hover,
body.theme-ledger main .band-navy li a:not(.btn):hover { color: #ffb968; text-decoration-color: var(--orange); }