/* ==========================================================================
   GotLocal.ai marketing site — "Coverage Map" direction, indigo + coral.
   Scoped to body.apex. Serves ALL marketing pages; they opt out of
   marketing.css via skip_base_css, so the nav, footer and CTA are painted here.

   Single visual world by intent — a chart has no light mode — so every colour
   is painted explicitly and nothing relies on the host ground or on the
   layout's data-theme attribute. The theme toggle is hidden on these pages
   because it has nothing to switch.

   Palette is Mobo's: indigo #12174E with coral #FF6B58. Every foreground is
   >= 4.5:1 against every ground it can land on — and there are four of them
   (--navy, --navy-2, --navy-3, --ink), not one. --dimmer is #8E94BE because
   the lightest ground, --navy-3, is the binding constraint: on that panel the
   earlier #7E85B1 measured 3.83:1. Check new colours against --navy-3, not
   against the board.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/archivo-black-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/libre-franklin-400.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/libre-franklin-500.woff2') format('woff2'); }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/libre-franklin-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* ---------- tokens ---------- */
body.apex {
  --navy:        #12174E;       /* the board */
  --navy-2:      #171D5E;       /* raised panel */
  --navy-3:      #1C2470;       /* raised panel, hover / featured */
  --ink:         #0B0F35;       /* sunk band */
  --water:       #070A22;       /* map water — reads below the sunk band */

  --text:        #EDEFF7;
  --text-2:      #C9CFEA;
  --dim:         #9AA0C4;
  --dimmer:      #8E94BE;      /* passes 4.5:1 on all four grounds, --navy-3 included */

  --rule:        rgba(154, 160, 196, 0.22);
  --rule-2:      rgba(154, 160, 196, 0.38);
  --grid:        rgba(154, 160, 196, 0.16);
  --shore:       #7C8FD4;

  --accent:      #FF6B58;
  --accent-hi:   #FF8877;
  --accent-ink:  #2A0A04;

  --measure:     66ch;
  --radius:      10px;
  --radius-sm:   6px;

  /* Elevation. The corners stay square — that's the identity — but raised
     objects now cast a real shadow so cards read as sitting on the board
     rather than being drawn onto it. Tuned dark and wide: on an indigo ground
     a tight black shadow reads as dirt, a broad soft one reads as depth. */
  --lift-1: 0 1px 2px rgba(3, 5, 20, .30), 0 3px 10px rgba(3, 5, 20, .22);
  --lift-2: 0 2px 6px rgba(3, 5, 20, .34), 0 14px 34px rgba(3, 5, 20, .30);
  --lift-3: 0 4px 14px rgba(3, 5, 20, .38), 0 28px 64px rgba(3, 5, 20, .40);

  /* Type roles. Three faces, three jobs — and the job is the point, not the
     face. --font-display is the shout, --font-body is the argument,
     --font-label is nav / eyebrows / buttons / form labels, and --font-num is
     ONLY for things that are actually numeric or reference-like: sheet numbers,
     prices, coordinates, tabular figures. A monospace is a label voice; the
     moment it carries a sentence it reads as terminal output rather than as
     someone talking. Label and body are the same family on purpose — swapping
     --font-label alone is how you audition a third face. */
  --font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  --font-body:    'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-label:   'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-num:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   LIGHT BANDS

   The page is dark at the ends and light through the middle: the nav and hero
   are indigo (the coverage map needs a dark ground to glow on), the body of
   every page is paper, and the closing CTA and footer return to indigo.

   This is done by REDEFINING the palette tokens at band scope rather than by
   writing a second set of component rules. Custom properties inherit, so a
   .band that redeclares --navy / --text / --accent re-skins every component
   inside it — cards, tables, inputs, buttons, list markers — with no component
   aware that light exists. Anything built later inherits it for free.

   The accent has to change value, not just lighten: #FF6B58 is 2.80:1 on white
   and fails as text. On paper it becomes #C63A25, which is 5.33:1 as text and
   5.21:1 as a fill under white — so --accent-ink flips to white here too.
   Every pair below was checked against all three paper grounds.
   ========================================================================== */
body.apex .band,
body.apex .section {
  --navy:        #FFFFFF;      /* card / base surface — the white is the CARD */
  --navy-2:      #FFFFFF;      /* raised panel */
  --navy-3:      #F7F8FC;      /* featured / hover panel */
  --ink:         #EAECF4;      /* sunk band */

  --text:        #12174E;      /* headings — the brand indigo */
  --text-2:      #3C4260;
  --dim:         #4B5170;
  --dimmer:      #535978;

  --rule:        rgba(18, 23, 78, 0.14);
  --rule-2:      rgba(18, 23, 78, 0.24);
  --grid:        rgba(18, 23, 78, 0.07);

  /* Same hue as the dark-side coral (7deg) at near-full saturation, just
     darker: #FF6B58 is hsl(7,100%,67%) and reads 2.52:1 on paper, which is
     unreadable as text. This is hsl(7,95%,42%) — the lightest value at that
     hue and saturation that clears 4.5:1 on all three paper grounds, so it
     reads as the same coral rather than as a different, browner colour.
     (For reference: the Ariana template does the same split, but its light
     accent lands at 3.68:1 and does not meet AA.) */
  --accent:      #D11D05;
  --accent-hi:   #A81704;
  --accent-ink:  #FFFFFF;

  /* Shadows over paper are a soft grey, not the near-black used on indigo. */
  --lift-1: 0 1px 2px rgba(18, 23, 78, .06), 0 3px 10px rgba(18, 23, 78, .05);
  --lift-2: 0 2px 6px rgba(18, 23, 78, .07), 0 14px 34px rgba(18, 23, 78, .08);
  --lift-3: 0 4px 14px rgba(18, 23, 78, .08), 0 28px 64px rgba(18, 23, 78, .10);

  /* The page ground is a tinted paper and the CARDS are the white things on
     it. All-white everywhere leaves nothing for a card to sit against. */
  background: #EFF1F7;
  color: var(--text-2);
}
body.apex .band-sunk,
body.apex .section-dark { background: var(--ink); }

/* The ends of the page stay indigo. These come after the light block so they
   win on source order at equal specificity, and .close-cta is qualified with
   .band because it carries that class too. */
body.apex .band.close-cta,
body.apex .section.close-cta {
  --navy: #12174E; --navy-2: #171D5E; --navy-3: #1C2470; --ink: #0B0F35;
  --text: #EDEFF7; --text-2: #C9CFEA; --dim: #9AA0C4; --dimmer: #8E94BE;
  --rule: rgba(154, 160, 196, 0.22); --rule-2: rgba(154, 160, 196, 0.38);
  --accent: #FF6B58; --accent-hi: #FF8877; --accent-ink: #2A0A04;
  --lift-1: 0 1px 2px rgba(3, 5, 20, .30), 0 3px 10px rgba(3, 5, 20, .22);
  --lift-2: 0 2px 6px rgba(3, 5, 20, .34), 0 14px 34px rgba(3, 5, 20, .30);
  --lift-3: 0 4px 14px rgba(3, 5, 20, .38), 0 28px 64px rgba(3, 5, 20, .40);
  background: var(--ink);
  color: var(--text-2);
}

/* Headings take the heading colour explicitly — on paper they are indigo while
   the body text around them is a softer slate. */
body.apex .band h2, body.apex .band h3,
body.apex .section h2, body.apex .section h3 { color: var(--text); }

/* ---------- reset / base ---------- */
body.apex *,
body.apex *::before,
body.apex *::after { box-sizing: border-box; }

body.apex {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The board is plain. The grid belongs to the drawing, not the wall it hangs on. */
body.apex main { display: block; }

body.apex h1,
body.apex h2,
body.apex h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
body.apex p { margin: 0; }
body.apex a { color: inherit; text-decoration: none; }
body.apex img { max-width: 100%; display: block; }
body.apex :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

body.apex .mono,
body.apex .tick {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

body.apex .container,
body.apex .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Section rhythm — hairline rules do the dividing, not blocks of colour. */
body.apex .band { padding: 108px 0; border-top: 1px solid var(--rule); }
body.apex .band-tight { padding: 76px 0; border-top: 1px solid var(--rule); }
body.apex .band-sunk { background: var(--ink); }

/* Section head: a mono sheet-number, then the statement. */
body.apex .sheet-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
body.apex .sheet-no::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
body.apex .band h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; max-width: 20ch; }
body.apex .band-intro { margin-top: 20px; max-width: var(--measure); color: var(--text-2); }

/* ==========================================================================
   TITLE BLOCK (nav)
   ========================================================================== */
body.apex .nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(18, 23, 78, 0.90);
  box-shadow: var(--lift-2);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
body.apex .nav .container { max-width: 1140px; }
body.apex .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 62px;
}
body.apex .nav-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 17px; letter-spacing: -0.02em; color: var(--text);
  white-space: nowrap; text-transform: uppercase;
}
/* .ai is wrapped in a span in the nav/footer partials so it can carry the accent
   without a pseudo-element — screen readers must not read the wordmark twice. */
body.apex .nav-logo .tld { color: var(--accent); }

body.apex .nav-links { display: flex; align-items: center; gap: 24px; }
body.apex .nav-links a {
  font-family: var(--font-label);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em;
  color: var(--dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body.apex .nav-links a:hover,
body.apex .nav-links a.nav-link-active { color: var(--text); border-bottom-color: var(--accent); }

body.apex .nav-actions { display: flex; align-items: center; gap: 14px; }
body.apex .btn-accent {
  font-family: var(--font-label);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.005em;
  background: var(--accent); color: var(--accent-ink);
  padding: 11px 18px;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .btn-accent:hover { background: var(--accent-hi); }

/* One visual world — the light/dark control has nothing to switch. */
body.apex .theme-btn,
body.apex .theme-float,
body.apex .nav-hamburger { display: none !important; }

@media (max-width: 900px) {
  body.apex .nav-inner { height: auto; padding: 11px 0 0; flex-wrap: wrap; }
  body.apex .nav-links {
    order: 3; width: 100%;
    margin: 11px -24px 0; padding: 9px 24px;
    border-top: 1px solid var(--rule);
    gap: 20px; overflow-x: auto; scrollbar-width: none;
    /* min-width:0 is load-bearing: as a flex item this defaults to min-width:auto,
       which refuses to shrink below its content and forces a ~485px floor on the
       whole page instead of letting overflow-x:auto scroll. */
    min-width: 0;
  }
  body.apex .nav-links::-webkit-scrollbar { display: none; }
  body.apex .nav-links a { white-space: nowrap; }
}
@media (max-width: 560px) {
  body.apex .nav-actions .btn-accent { padding: 10px 13px; font-size: 12.5px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
body.apex .hero { padding: 64px 0 104px; border: 0; }

/* The hero is the argument and the evidence side by side: the claim on the
   left, the map that proves it on the right. Below 1040px the map drops under
   the form — the form converts, so it keeps the top of the fold. */
body.apex .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}
@media (max-width: 1040px) {
  body.apex .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  body.apex .hero-map { max-width: 620px; }
}
body.apex .hero-copy { min-width: 0; }
body.apex .hero-map { min-width: 0; }
body.apex .hero-map .sheet { background: var(--ink); }
body.apex .hero-map .map-legend { padding-left: 18px; padding-right: 18px; }

body.apex .eyebrow {
  font-family: var(--font-label);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
body.apex .hero h1 {
  font-size: clamp(32px, 4.1vw, 54px);
  line-height: 1.02; letter-spacing: -0.025em; max-width: 15ch;
}
body.apex .hero h1 em { font-style: normal; color: var(--accent); }
body.apex .hero-lede { margin-top: 22px; max-width: 54ch; color: var(--text-2); font-size: 17.5px; }

/* ---- the live preview generator (functional — ids are bound in marketing-places.js) ---- */
body.apex .hero-generator-form { margin-top: 32px; max-width: 560px; position: relative; }
/* A form label that is also a promise ("about a minute") is a sentence, not a
   spec. Sentence case at 14px, and --text-2 rather than --dim, because it is
   the label for the one control on the page that converts. */
body.apex .gen-label {
  font-family: var(--font-label);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--text-2); margin-bottom: 10px;
}
body.apex .hero-input-wrap { position: relative; margin-bottom: 10px; }
body.apex .hero-input-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--dimmer); pointer-events: none;
}
body.apex .hero-places-input,
body.apex .hero-email-input,
body.apex .preview-input-row input {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--rule-2);
  color: var(--text);
  font: 400 16px/1.4 'Libre Franklin', sans-serif;
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
body.apex .hero-places-input { padding-left: 44px; }
body.apex .hero-places-input::placeholder,
body.apex .hero-email-input::placeholder,
body.apex .preview-input-row input::placeholder { color: var(--dimmer); }
body.apex .hero-places-input:focus,
body.apex .hero-email-input:focus,
body.apex .preview-input-row input:focus { outline: none; border-color: var(--accent); }

body.apex .hero-places-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--navy-2);
  border: 1px solid var(--rule-2);
  max-height: 300px; overflow-y: auto;
  border-radius: var(--radius-sm);
}
body.apex .hero-places-dropdown.active { display: block; }
body.apex .hero-place-item {
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 2px;
}
body.apex .hero-place-item:last-child { border-bottom: 0; }
body.apex .hero-place-item:hover,
body.apex .hero-place-item:focus { background: var(--navy-3); outline: none; }
body.apex .hero-place-item strong { font-size: 15px; font-weight: 600; color: var(--text); }
body.apex .hero-place-item span { font-size: 13px; color: var(--dim); }

body.apex .hero-build-btn,
body.apex .btn-primary {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-label);
  font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 16px 26px; margin-top: 4px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .hero-build-btn:hover:not(:disabled) { background: var(--accent-hi); }
/* A washed-out accent fill reads as a broken button on first paint. Disabled is
   an outline instead; the JS only ever sets inline opacity back to 1. */
body.apex .hero-build-btn:disabled {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--dim);
  cursor: not-allowed;
}

/* The warmest line on the page — "she picks up" — was set as terminal output.
   Uppercase destroys word-shape, so a sentence at 11.5px/0.1em is decoded
   letter by letter. Sentence case, 14.5px, --text-2. The phone number keeps
   the mono, which is the one thing mono is genuinely for here: tabular figures. */
body.apex .hero-aside {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.6; color: var(--text-2);
}
body.apex .hero-aside a {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  color: var(--text); border-bottom: 1px solid var(--accent);
}

/* ==========================================================================
   COVERAGE MAP — the one place the drafting grid actually belongs
   ========================================================================== */
body.apex .sheet {
  border: 1px solid var(--rule-2);
  background: var(--ink);
  box-shadow: var(--lift-3);
  position: relative;
  border-radius: var(--radius);
}
/* registration ticks at the corners of a drawing */
body.apex .sheet::before,
body.apex .sheet::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--rule-2); border-style: solid;
}
body.apex .sheet::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
body.apex .sheet::after  { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }

body.apex .sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
body.apex .sheet-head strong { color: var(--text); font-weight: 500; }

body.apex .map-body {
  padding: 18px 18px 10px;
  /* the drafting grid — confined to the drawing, where it means something */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  background-position: -1px -1px, -1px -1px;
}

/* --------------------------------------------------------------------------
   THE COVERAGE MAP (generated — see src/scripts/coverage-map/)

   Real OSM coastline, real city coordinates from the same table that builds
   the location pages, on an equirectangular plane scaled so the service radius
   is a true circle. One SVG user unit == one mile.

   Every rule below states the FINISHED map. The animation start state lives
   behind .is-armed, which only JavaScript ever adds — so with JS off, or with
   prefers-reduced-motion, the map is simply drawn, complete, on first paint.
   -------------------------------------------------------------------------- */
body.apex .cm {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Reserving the box with aspect-ratio is what keeps this at 0 CLS: the SVG
     is the largest thing in its section and would otherwise resize on load. */
}
body.apex .cm-water  { fill: var(--water); }
body.apex .cm-island { fill: var(--navy); }
body.apex .cm-shore {
  fill: none;
  stroke: var(--shore);
  stroke-opacity: 0.62;
  stroke-width: 0.13;
  stroke-linejoin: round;
}
body.apex .cm-grad {
  fill: none;
  stroke: var(--shore);
  stroke-opacity: 0.12;
  stroke-width: 0.08;
}
body.apex .cm-ring {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.8;
  stroke-width: 0.16;
  /* The ring carries pathLength="1" so the draw-on is a plain 1 -> 0 dashoffset.
     That also makes stroke-dasharray fractions of the circumference, not miles:
     a 25mi ring is ~157mi around, so these are ~1.2mi dashes on ~0.85mi gaps. */
  stroke-dasharray: 0.0076 0.0054;
}
body.apex .cm-halo { fill: var(--accent); opacity: 0.16; }
body.apex .cm-dot  { fill: var(--accent); }
body.apex .cm-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3px;                 /* user units — 1.3 miles tall on the plane */
  fill: var(--text-2);
  letter-spacing: -0.02px;
}
body.apex .cm-town.is-hq .cm-dot   { r: 1; }
body.apex .cm-town.is-hq .cm-label { font-size: 1.6px; fill: #fff; font-weight: 700; }

/* The unresolved state: one town findable, fourteen dark. This is the argument
   the page is making, so the map holds it until the reader has read it. */
body.apex .cm[data-lit='one'] .cm-town:not(.is-hq) .cm-dot   { fill: var(--dimmer); }
body.apex .cm[data-lit='one'] .cm-town:not(.is-hq) .cm-label { fill: var(--dimmer); }
body.apex .cm[data-lit='one'] .cm-town:not(.is-hq) .cm-halo  { opacity: 0; }
body.apex .cm-town .cm-dot,
body.apex .cm-town .cm-label,
body.apex .cm-town .cm-halo {
  transition: fill 0.45s ease, opacity 0.45s ease;
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ---- armed: the state JS sets before the section scrolls into view ----

   Only stroke-dashoffset animates. Nothing on this map fades, deliberately:
   the town labels sit on top of the water fill, so any opacity transition
   underneath them makes their rendered contrast a moving target — an audit
   (or a person on a slow device) can sample a half-painted ground and read
   text against a blend. Drawing the shore and the ring is the effect; the
   surfaces they enclose are simply there. */
body.apex .cm.is-armed .cm-shore,
body.apex .cm.is-armed .cm-ring { stroke-dashoffset: 1; }
body.apex .cm.is-armed .cm-shore { stroke-dasharray: 1; }
body.apex .cm.is-armed .cm-ring { stroke-dasharray: 1; }

body.apex .cm.is-armed.is-drawn .cm-shore {
  stroke-dashoffset: 0; stroke-dasharray: 1;
  transition: stroke-dashoffset 1.7s cubic-bezier(.4, 0, .2, 1) 0.1s;
}
body.apex .cm.is-armed.is-drawn .cm-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) 0.45s;
}
/* The ring ends dashed; the dash pattern is swapped in after the draw lands. */
body.apex .cm.is-armed.is-drawn .cm-ring { stroke-dasharray: 0.0076 0.0054; }

body.apex .map-legend {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin: 4px 2px 0; padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
body.apex .map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
body.apex .legend-live i { background: var(--accent); }
body.apex .legend-dark i { background: var(--dimmer); }

/* the arithmetic */
body.apex .math {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 22px; padding: 20px 18px; border-top: 1px solid var(--rule-2);
}
body.apex .math-cell { text-align: center; }
body.apex .math-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1; color: var(--text);
}
body.apex .math-cell.is-total .math-num { color: var(--accent); }
body.apex .math-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--dim); margin-top: 9px;
}
body.apex .math-op {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px; color: var(--dimmer);
}
@media (max-width: 620px) {
  body.apex .math { flex-direction: column; gap: 18px; }
  body.apex .math-op { font-size: 20px; }
}

/* ==========================================================================
   WHAT CHANGES — today vs with GotLocal
   ========================================================================== */
body.apex .compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); box-shadow: var(--lift-2); margin-top: 56px;
  border-radius: var(--radius);
}
body.apex .compare-col { background: var(--navy); padding: 30px 28px 34px; }
body.apex .compare-col.is-now { background: var(--ink); }
body.apex .compare-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
body.apex .compare-col.is-now .compare-head { color: var(--dim); }
body.apex .compare-col.is-next .compare-head { color: var(--accent); }
body.apex .compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
body.apex .compare li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 15.5px; line-height: 1.5;
}
body.apex .compare-col.is-now li { color: var(--dim); }
body.apex .compare-col.is-next li { color: var(--text-2); }
body.apex .compare li .m {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6;
}
body.apex .compare-col.is-now li .m { color: var(--dimmer); }
body.apex .compare-col.is-next li .m { color: var(--accent); }
@media (max-width: 780px) { body.apex .compare { grid-template-columns: 1fr; } }

/* ==========================================================================
   WHAT YOU GET — spec sheets
   ========================================================================== */
body.apex .specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-top: 56px;
}
body.apex .spec {
  background: var(--navy-2); border: 1px solid var(--rule); box-shadow: var(--lift-1);
  padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 12px;
  border-radius: var(--radius);
}
body.apex .spec-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent);
}
body.apex .spec h3 { font-size: 17.5px; line-height: 1.2; }
body.apex .spec p { font-size: 15px; color: var(--text-2); line-height: 1.6; }
body.apex .spec-tag {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  padding-top: 14px; border-top: 1px solid var(--rule);
}
body.apex .spec-tag.is-addon { color: var(--accent); }
body.apex .spec-tag a { color: inherit; border-bottom: 1px solid currentColor; }

/* ==========================================================================
   PROOF — built sheets
   ========================================================================== */
body.apex .builds { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
@media (max-width: 820px) { body.apex .builds { grid-template-columns: 1fr; } }
body.apex .build {
  border: 1px solid var(--rule-2); background: var(--navy-2); display: block;
  box-shadow: var(--lift-1);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
  border-radius: var(--radius);
  /* The screenshot is the first child and square, so without this it paints
     over the two top corners and the card reads as un-rounded on top. */
  overflow: hidden;
}
body.apex .build:hover { border-color: var(--accent); box-shadow: var(--lift-3); transform: translateY(-2px); }
/* height:auto is load-bearing: the <img> carries width/height attributes, and
   without it the attribute height wins, aspect-ratio never applies, and
   object-fit:cover crops the screenshot. */
body.apex .build-shot {
  border-bottom: 1px solid var(--rule-2);
  width: 100%; height: auto;
  aspect-ratio: 900 / 563;
  object-fit: cover; object-position: top center;
}
body.apex .build-body { padding: 20px 22px 24px; }
body.apex .build-name { font-family: 'Archivo Black', sans-serif; font-size: 19px; }
body.apex .build-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent);
  margin-top: 8px;
}
body.apex .build-desc { font-size: 15px; color: var(--text-2); margin-top: 12px; line-height: 1.6; }
body.apex .build-link {
  display: inline-block; margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}

/* ==========================================================================
   HOW IT WORKS — revision table
   ========================================================================== */
body.apex .steps { margin-top: 56px; border: 1px solid var(--rule); box-shadow: var(--lift-1);
  border-radius: var(--radius);
}
body.apex .step {
  display: grid; grid-template-columns: 92px 1fr; gap: 30px;
  padding: 34px 30px; border-bottom: 1px solid var(--rule);
}
body.apex .step:last-child { border-bottom: 0; }
body.apex .step-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  padding-top: 4px;
}
body.apex .step h3 { font-size: 19px; }
body.apex .step p { font-size: 15.5px; color: var(--text-2); margin-top: 10px; max-width: var(--measure); line-height: 1.6; }
@media (max-width: 620px) {
  body.apex .step { grid-template-columns: 1fr; gap: 10px; }
}

/* ==========================================================================
   AVERY
   ========================================================================== */
body.apex .avery { display: grid; grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: center; }
@media (max-width: 860px) { body.apex .avery { grid-template-columns: 1fr; gap: 32px; } }
body.apex .avery-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
body.apex .avery-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: apex-pulse 2s ease-in-out infinite;
}
@keyframes apex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
body.apex .avery p { color: var(--text-2); margin-top: 18px; max-width: var(--measure); }
body.apex .call-card {
  border: 1px solid var(--accent); background: var(--navy-2); box-shadow: var(--lift-2);
  padding: 36px 30px; text-align: center;
  border-radius: var(--radius);
}
body.apex .call-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 4vw, 34px); color: var(--text); letter-spacing: -0.02em;
}
body.apex .call-cta {
  display: block; margin-top: 20px;
  background: var(--accent); color: var(--accent-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 15px 20px;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .call-cta:hover { background: var(--accent-hi); }
body.apex .call-foot {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
body.apex .buildfee {
  margin-top: 56px; border: 1px solid var(--rule-2); background: var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  padding: 24px 26px;
}
@media (max-width: 780px) { body.apex .buildfee { grid-template-columns: 1fr; gap: 14px; } }
body.apex .buildfee-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
body.apex .buildfee-amount { font-family: 'Archivo Black', sans-serif; font-size: clamp(20px, 3vw, 27px); margin-top: 8px; white-space: nowrap; }
body.apex .buildfee p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
body.apex .buildfee em { font-style: normal; color: var(--accent); }

body.apex .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
@media (max-width: 900px) { body.apex .tiers { grid-template-columns: 1fr; } }
body.apex .tier {
  background: var(--navy-2); border: 1px solid var(--rule); box-shadow: var(--lift-1);
  padding: 30px 28px 32px; display: flex; flex-direction: column;
  border-radius: var(--radius);
}
/* The featured tier is the one being recommended, so it sits highest. */
body.apex .tier.is-featured {
  background: var(--navy-3); border-color: var(--accent); box-shadow: var(--lift-2);
}
body.apex .tier-flag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  align-self: flex-start; padding: 4px 9px; margin-bottom: 14px;
  border-radius: var(--radius-sm);
}
body.apex .tier-flag.is-blank { background: transparent; color: transparent; }
body.apex .tier-name { font-family: 'Archivo Black', sans-serif; font-size: 22px; }
body.apex .tier-tag { font-size: 14px; color: var(--dim); margin-top: 8px; min-height: 42px; line-height: 1.45; }
body.apex .tier-price { margin: 16px 0 20px; display: flex; align-items: baseline; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
body.apex .tier-price b { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 38px; letter-spacing: -0.02em; }
body.apex .tier-price span { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
body.apex .tier ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
body.apex .tier li { display: grid; grid-template-columns: 16px 1fr; gap: 11px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
body.apex .tier li .m { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
body.apex .tier li.is-muted { color: var(--dimmer); }
body.apex .tier li.is-muted .m { color: var(--dimmer); }
body.apex .tier-cta {
  margin-top: auto; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent);
  padding: 14px 18px;
  transition: background 0.15s ease, color 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .tier-cta:hover { background: var(--accent); color: var(--accent-ink); }
body.apex .tier.is-featured .tier-cta { background: var(--accent); color: var(--accent-ink); }
body.apex .tier.is-featured .tier-cta:hover { background: var(--accent-hi); }

body.apex .addon {
  margin-top: 22px; border: 1px solid var(--rule-2); background: var(--ink);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 26px;
}
@media (max-width: 780px) { body.apex .addon { grid-template-columns: 1fr; gap: 18px; } }
body.apex .addon .spec-no { letter-spacing: 0.18em; text-transform: uppercase; }
body.apex .addon h3 { font-size: 21px; margin-top: 10px; }
body.apex .addon p { font-size: 15px; color: var(--text-2); margin-top: 10px; max-width: 60ch; line-height: 1.6; }
body.apex .addon-price { text-align: right; white-space: nowrap; }
@media (max-width: 780px) { body.apex .addon-price { text-align: left; } }
body.apex .addon-price b { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 38px; }
body.apex .addon-price span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); display: block; margin-top: 4px; }
body.apex .pricing-aside { margin-top: 20px; font-size: 14.5px; color: var(--dim); }
body.apex .pricing-aside a { color: var(--text); border-bottom: 1px solid var(--accent); }

/* ==========================================================================
   FAQ — answers rendered open, never behind a click
   ========================================================================== */
body.apex .faqs { margin-top: 56px; border-top: 1px solid var(--rule); }
body.apex .faq {
  display: grid; grid-template-columns: 92px 1fr; gap: 30px;
  padding: 30px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 620px) { body.apex .faq { grid-template-columns: 1fr; gap: 10px; } }
body.apex .faq-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; color: var(--dim); padding-top: 5px;
}
body.apex .faq h3 { font-size: 17.5px; line-height: 1.3; }
body.apex .faq p { font-size: 15.5px; color: var(--text-2); margin-top: 11px; max-width: var(--measure); line-height: 1.65; }
body.apex .faq p a { color: var(--text); border-bottom: 1px solid var(--accent); }
body.apex .faq em { font-style: normal; color: var(--dim); }

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
body.apex .close-cta { text-align: center; }
body.apex .close-cta .sheet-no { justify-content: center; }
body.apex .close-cta .sheet-no::after { display: none; }
body.apex .close-cta h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(28px, 4.4vw, 44px); }
body.apex .close-cta .band-intro { margin: 18px auto 0; }
body.apex .close-cta .hero-generator-form { margin: 34px auto 0; text-align: left; }
body.apex .preview-input-row { margin-bottom: 10px; }
body.apex .preview-note {
  margin-top: 14px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
/* the partial's auto-filled confirmation block, repainted off its inline purple */
body.apex .cta-autofill {
  border: 1px solid var(--accent) !important;
  background: var(--navy-3) !important;
  background: color-mix(in srgb, var(--accent) 10%, var(--ink)) !important;
  padding: 18px !important; margin: 12px 0 !important; text-align: left;
  border-radius: var(--radius-sm);
}
body.apex .cta-autofill .b1 { font-weight: 600; color: var(--text); font-size: 16px; }
body.apex .cta-autofill .b2 { font-size: 14px; color: var(--text-2); margin-top: 4px; }

/* ==========================================================================
   FOOTER — sheet index
   ========================================================================== */
body.apex .footer { border-top: 1px solid var(--rule); background: var(--ink); padding: 56px 0 30px; }
body.apex .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; }
@media (max-width: 980px) { body.apex .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { body.apex .footer-grid { grid-template-columns: 1fr; } }
body.apex .footer-brand p { font-size: 14px; color: var(--dim); margin-top: 14px; line-height: 1.6; max-width: 34ch; }
body.apex .footer-col h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule);
}
body.apex .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
body.apex .footer-col a { font-size: 14px; color: var(--dim); }
body.apex .footer-col a:hover { color: var(--text); }
body.apex .footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dimmer);
}

/* ==========================================================================
   MOTION

   Two things move on scroll and nothing else: sections rise 8px as they
   arrive, and the coverage map draws itself once. Both are opacity/transform
   only — no layout property is animated, so none of this can cost CLS or a
   layout pass. Both are additive: the finished state is the CSS default and
   JS only ever adds the "start here" class, so no-JS renders the whole page.
   ========================================================================== */
body.apex .rise { }                     /* finished state — the default */
html.js body.apex .rise {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s cubic-bezier(.4, 0, .2, 1), transform 0.55s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
html.js body.apex .rise.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* A second element in the same section trails the first slightly, which reads
   as one movement rather than as two things arriving at once. */
html.js body.apex .rise[data-rise='2'] { transition-delay: 0.09s; }
html.js body.apex .rise[data-rise='3'] { transition-delay: 0.18s; }

/* Counters hold their final value in the markup, so the number is correct and
   indexable before a single frame runs. */
body.apex .count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body.apex *,
  body.apex *::before,
  body.apex *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  /* Reduced motion gets the finished map, not a fast one. */
  html.js body.apex .rise { opacity: 1; transform: none; }
  body.apex .cm.is-armed .cm-shore { stroke-dasharray: none; stroke-dashoffset: 0; }
  body.apex .cm.is-armed .cm-ring { stroke-dasharray: 0.0076 0.0054; stroke-dashoffset: 0; }
}

/* Avery's number doubles as the live indicator, so it keeps the dot and drops
   the trailing rule the other sheet numbers carry. */
body.apex .avery-live.sheet-no { display: inline-flex; margin-bottom: 18px; color: var(--accent); }
body.apex .avery-live.sheet-no::after { display: none; }

/* ==========================================================================
   SHARED MARKETING VOCABULARY

   The other twelve pages were written against marketing.css and use a
   different class vocabulary from the homepage (.section rather than .band,
   .section-header rather than .sheet-no + h2, and so on). Rather than rewrite
   ten templates — and risk the ~40 element ids the pricing calculator and the
   Places autocomplete bind to — that vocabulary is restated here in the same
   drafting language: square corners, hairline rules, mono spec labels,
   Archivo Black for anything numeric.
   ========================================================================== */

/* ---------- section rhythm ---------- */
body.apex .section { padding: 108px 0; border-top: 1px solid var(--rule); }
body.apex .section-dark { background: var(--ink); }
body.apex .section > .container { max-width: 1140px; }

body.apex .section-header { margin-bottom: 56px; }
body.apex .section-header.centered { text-align: center; }
body.apex .section-header h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; max-width: 20ch; }
body.apex .section-header.centered h2 { max-width: 22ch; margin-inline: auto; }
body.apex .section-header p,
body.apex .section-desc { margin-top: 18px; max-width: var(--measure); color: var(--text-2); font-size: 16.5px; }
body.apex .section-header.centered p,
body.apex .section-header.centered .section-desc { margin-inline: auto; }

/* .badge and .section-badge are the same object as the homepage's .eyebrow. */
body.apex .badge,
body.apex .section-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

body.apex .hero-sub {
  margin-top: 22px; max-width: var(--measure);
  color: var(--text-2); font-size: 18px; line-height: 1.6;
}
body.apex .hero h1 + .hero-sub { margin-top: 24px; }
body.apex .section h1,
body.apex .hero h1 { max-width: 18ch; }

/* The layout's own observer drives .reveal on these pages; .rise (apex-motion)
   drives the homepage. Same movement either way. */
body.apex .reveal { }
html.js body.apex .reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s cubic-bezier(.4, 0, .2, 1), transform 0.55s cubic-bezier(.4, 0, .2, 1);
}
html.js body.apex .reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body.apex .reveal { opacity: 1; transform: none; }
}

/* ---------- generic cards ---------- */
/* The 1px-gap-over-a-rule-coloured-background trick draws the hairlines for
   free, but any last row that doesn't fill leaves that background showing as a
   lit block. These grids hold a variable number of cards, so instead each card
   carries its own hairline as a box-shadow ring and the container is
   transparent — an empty cell is then simply empty. */
body.apex .features-grid,
body.apex .industries-hub-grid,
body.apex .industry-services-grid,
body.apex .weaknesses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
body.apex .feature-card,
body.apex .industry-hub-card,
body.apex .industry-service-card,
body.apex .weakness-card {
  background: var(--navy-2); border: 1px solid var(--rule); box-shadow: var(--lift-1);
  padding: 30px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.15s ease;
  border-radius: var(--radius);
}

body.apex .industry-hub-card:hover,
body.apex .industry-service-card:hover { background: var(--navy-3); }
body.apex .feature-card h3,
body.apex .industry-hub-card h3,
body.apex .industry-service-card h3,
body.apex .weakness-card h3 { font-size: 17.5px; line-height: 1.2; }
body.apex .feature-card p,
body.apex .industry-hub-card p,
body.apex .industry-service-card p,
body.apex .weakness-card p { font-size: 15px; color: var(--text-2); line-height: 1.6; }

body.apex .icon-wrap,
body.apex .industry-hub-icon,
body.apex .weakness-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
body.apex .icon-wrap svg,
body.apex .industry-hub-icon svg,
body.apex .weakness-icon svg { width: 26px; height: 26px; }
body.apex .industry-hub-link {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

/* ---------- buttons ---------- */
body.apex .btn-ghost {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid var(--rule-2); color: var(--text);
  padding: 11px 18px;
  transition: border-color 0.15s ease, color 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
body.apex .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- pills (compare hub, blog filters, city tags) ---------- */
body.apex .compare-others { display: flex; flex-wrap: wrap; gap: 10px; }
body.apex .compare-other-pill,
body.apex .blog-filter-pill,
body.apex .industry-city-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--rule-2);
  padding: 9px 14px;
  transition: border-color 0.15s ease, color 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .compare-other-pill:hover,
body.apex .blog-filter-pill:hover { border-color: var(--accent); color: var(--text); }
body.apex .blog-filter-pill.is-active { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
body.apex .blog-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
body.apex .industry-service-cities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 14px; }
body.apex .industry-city-tag { font-size: 10px; padding: 6px 10px; }

/* ==========================================================================
   PRICING CALCULATOR — an instrument panel, not a pricing table
   ========================================================================== */
body.apex .calc-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  box-shadow: var(--lift-2); position: relative; z-index: 1;
  border-radius: var(--radius) var(--radius) 0 0;
}
@media (max-width: 760px) { body.apex .calc-controls { grid-template-columns: 1fr; } }
body.apex .calc-counter { background: var(--navy); padding: 30px 26px 26px; }
body.apex .calc-counter-label,
body.apex .calc-price-label,
body.apex .calc-stat-label,
body.apex .calc-card-title,
body.apex .calc-compare-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}
body.apex .calc-counter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 16px 0 18px;
}
body.apex .calc-counter-value { text-align: center; flex: 1; min-width: 0; }
body.apex .calc-counter-value > span {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
body.apex .calc-counter-sub { font-size: 12.5px; color: var(--dimmer); margin-top: 7px; line-height: 1.4; }
body.apex .calc-btn-minus,
body.apex .calc-btn-plus {
  width: 40px; height: 40px; flex: none;
  background: transparent; color: var(--accent);
  border: 1px solid var(--rule-2);
  font-family: 'JetBrains Mono', monospace; font-size: 19px; line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .calc-btn-minus:hover,
body.apex .calc-btn-plus:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

body.apex .calc-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--rule-2); outline: none; cursor: pointer;
}
body.apex .calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; background: var(--accent); border: 0; cursor: pointer;
}
body.apex .calc-slider::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--accent); border: 0; border-radius: 0; cursor: pointer;
}
body.apex .calc-slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
body.apex .calc-range-labels {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--dimmer);
}

body.apex .calc-price-hero {
  border: 1px solid var(--rule-2); border-top: 0;
  background: var(--ink); box-shadow: var(--lift-2);
  padding: 44px 26px; text-align: center;
}
body.apex .calc-price-amount {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(44px, 7vw, 76px); line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
body.apex .calc-price-meta,
body.apex .calc-monthly-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); margin-top: 12px;
}
body.apex .calc-price-divider { height: 1px; background: var(--rule); margin: 26px auto; max-width: 260px; }
body.apex .calc-monthly-amount {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(24px, 3.4vw, 34px); color: var(--text); letter-spacing: -0.02em;
}
body.apex .calc-monthly-period {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}

body.apex .calc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-top: 0;
  box-shadow: var(--lift-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
@media (max-width: 860px) { body.apex .calc-stats { grid-template-columns: repeat(2, 1fr); } }
body.apex .calc-stat { background: var(--navy); padding: 28px 20px; text-align: center; }
body.apex .calc-stat-value {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1; margin: 11px 0 8px;
  color: var(--text) !important;   /* the templates carry the old palette inline */
  font-variant-numeric: tabular-nums;
}
body.apex .calc-stat:last-child .calc-stat-value { color: var(--accent) !important; }
body.apex .calc-stat-sub { font-size: 12px; color: var(--dimmer); line-height: 1.4; }

body.apex .calc-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px;
}
@media (max-width: 860px) { body.apex .calc-columns { grid-template-columns: 1fr; } }
body.apex .calc-card {
  border: 1px solid var(--rule-2); background: var(--navy-2); box-shadow: var(--lift-1);
  padding: 30px 28px 26px;
  border-radius: var(--radius);
}
body.apex .calc-card-title { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
body.apex .calc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; color: var(--text-2);
}
body.apex .calc-row:last-child { border-bottom: 0; }
body.apex .calc-row span:last-child {
  font-family: 'JetBrains Mono', monospace; color: var(--text); font-variant-numeric: tabular-nums;
}
body.apex .calc-row-total { border-top: 1px solid var(--rule-2); border-bottom: 0; margin-top: 6px; padding-top: 15px; }
body.apex .calc-row-total span { color: var(--text) !important; font-weight: 600; }
body.apex .calc-row-total span:last-child { color: var(--accent) !important; }

body.apex .calc-checks { display: grid; gap: 11px; margin-top: 4px; }
/* Flow layout, not grid: several of these items are a <span> plus a bare text
   node, and as grid items those land on separate rows — the text wrapping into
   the 16px marker column. An absolutely positioned marker keeps the content
   inline however many nodes it is made of. */
body.apex .calc-check {
  position: relative; padding-left: 27px;
  font-size: 14.5px; color: var(--text-2); line-height: 1.5;
}
body.apex .calc-check::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent);
}
body.apex .calc-check span { color: var(--text); font-family: 'JetBrains Mono', monospace; }
body.apex .calc-compare-price { font-family: 'Archivo Black', sans-serif; font-size: 27px; margin-top: 10px; }
body.apex .calc-compare-good .calc-compare-price { color: var(--accent); }
body.apex .calc-compare-bad .calc-compare-price { color: var(--dim); }
body.apex .calc-compare-sub { font-size: 13px; color: var(--dimmer); margin-top: 7px; line-height: 1.5; }
body.apex .calc-compare-good,
body.apex .calc-compare-bad { padding: 18px 0; border-bottom: 1px solid var(--rule); }
body.apex .calc-compare-bad:last-child { border-bottom: 0; }

/* ==========================================================================
   COMPARISON PAGES
   ========================================================================== */
body.apex .compare-table-wrap {
  overflow-x: auto; border: 1px solid var(--rule); box-shadow: var(--lift-1); margin-top: 44px;
  border-radius: var(--radius);
}
body.apex .compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
body.apex .compare-table th,
body.apex .compare-table td {
  padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; color: var(--text-2); vertical-align: top;
}
body.apex .compare-table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  background: var(--ink); border-bottom: 1px solid var(--rule-2);
}
body.apex .compare-col-label,
body.apex .compare-feature { color: var(--text); font-weight: 500; }
body.apex .compare-col-gotlocal { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); }
body.apex thead .compare-col-gotlocal { color: var(--accent); }
body.apex .compare-check { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
body.apex .compare-table tr:last-child td { border-bottom: 0; }

body.apex .verdict-box {
  border: 1px solid var(--accent); background: var(--navy-2); box-shadow: var(--lift-2);
  padding: 34px 32px; margin-top: 44px;
  border-radius: var(--radius);
}
body.apex .verdict-text { font-size: 16.5px; color: var(--text-2); line-height: 1.65; max-width: var(--measure); }

body.apex .compare-faq-list { border-top: 1px solid var(--rule); margin-top: 44px; }
body.apex .compare-faq-item { border-bottom: 1px solid var(--rule); padding: 22px 0; }
/* These are <details open> — the answer is in the DOM and rendered open, which
   is what the FAQ schema promises. The disclosure still works; it just isn't
   how the answer gets read. */
body.apex .compare-faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
body.apex .compare-faq-item summary::-webkit-details-marker { display: none; }
body.apex .compare-faq-item summary::marker { content: ''; }
body.apex .compare-faq-item summary > span {
  font-family: 'Archivo Black', Impact, sans-serif; font-weight: 400;
  font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; color: var(--text);
}
body.apex .compare-faq-item summary:hover > span { color: var(--accent); }
body.apex .compare-faq-chevron {
  flex: none; color: var(--dim); margin-top: 2px;
  transition: transform 0.2s ease, color 0.15s ease;
}
body.apex .compare-faq-item[open] .compare-faq-chevron { transform: rotate(180deg); color: var(--accent); }
body.apex .compare-faq-answer { font-size: 15.5px; color: var(--text-2); margin-top: 11px; max-width: var(--measure); line-height: 1.65; }

/* ==========================================================================
   INDUSTRY PAGES
   ========================================================================== */
body.apex .problem-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); box-shadow: var(--lift-2); margin-top: 44px;
  border-radius: var(--radius);
}
@media (max-width: 780px) { body.apex .problem-grid { grid-template-columns: 1fr; } }
body.apex .problem-col { background: var(--navy); padding: 30px 28px 34px; }
body.apex .problem-col.bad { background: var(--ink); }
body.apex .problem-col h3 {
  font-family: 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
body.apex .problem-col.bad h3 { color: var(--dim); }
body.apex .problem-col.good h3 { color: var(--accent); }
body.apex .problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
body.apex .problem-list li { font-size: 15.5px; line-height: 1.5; padding-left: 26px; position: relative; }
body.apex .problem-col.bad .problem-list li { color: var(--dim); }
body.apex .problem-col.good .problem-list li { color: var(--text-2); }
body.apex .problem-list li::before {
  position: absolute; left: 0; top: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
}
body.apex .problem-col.bad .problem-list li::before { content: '×'; color: var(--dimmer); }
body.apex .problem-col.good .problem-list li::before { content: '✓'; color: var(--accent); }

body.apex .math-section { border: 1px solid var(--rule-2); background: var(--ink); margin-top: 44px; }
body.apex .math-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 26px; padding: 30px 22px;
}
@media (max-width: 620px) { body.apex .math-row { flex-direction: column; gap: 18px; } }
body.apex .math-copy {
  padding: 20px 22px 24px; border-top: 1px solid var(--rule);
  font-size: 15.5px; color: var(--text-2); line-height: 1.65;
}

body.apex .industry-pricing-card {
  border: 1px solid var(--accent); background: var(--navy-2); box-shadow: var(--lift-2);
  padding: 40px 30px; margin-top: 44px; text-align: center;
  border-radius: var(--radius);
}
body.apex .industry-pricing-headline {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 5vw, 46px); line-height: 1; letter-spacing: -0.025em; color: var(--accent);
}
/* This one is an inline <strong> inside a sentence, not a display figure —
   sizing it like a hero number overlaps the lines around it. */
body.apex .industry-pricing-amount {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: 1.2em; color: var(--accent); letter-spacing: -0.01em;
}
body.apex .industry-pricing-muted {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
  line-height: 1.9; max-width: 62ch; margin: 14px auto 0;
}
body.apex .industry-pricing-muted strong { color: var(--text); font-weight: 500; }
body.apex .industry-pricing-card .btn-accent { margin-top: 24px; padding: 14px 26px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
body.apex .blog-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
body.apex .blog-card {
  background: var(--navy-2); border: 1px solid var(--rule); box-shadow: var(--lift-1);
  padding: 30px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.15s ease;
  border-radius: var(--radius);
}
body.apex .blog-card:hover { background: var(--navy-3); }
body.apex .blog-card-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
body.apex .blog-card-title { font-family: 'Archivo Black', sans-serif; font-size: 19px; line-height: 1.2; }
body.apex .blog-card-excerpt { font-size: 15px; color: var(--text-2); line-height: 1.6; }
body.apex .blog-card-meta,
body.apex .blog-post-byline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
}
body.apex .blog-card-meta-sep { margin: 0 8px; color: var(--dimmer); }
body.apex .blog-card-more {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
body.apex .blog-empty {
  border: 1px dashed var(--rule-2); padding: 46px 24px; text-align: center;
  color: var(--dim); font-size: 15.5px;
}

/* ---------- a post ---------- */
body.apex .blog-post-header { border-bottom: 1px solid var(--rule); padding: 56px 0 40px; }
body.apex .blog-post-header-inner { max-width: 760px; }
body.apex .blog-post-title {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.03; letter-spacing: -0.025em;
  margin: 16px 0 20px; text-wrap: balance;
}
body.apex .blog-post-body-wrap { padding: 48px 0 64px; }
body.apex .blog-article { max-width: 760px; }

/* The post body is the one place on the site with long-form prose, so it gets
   a real reading measure and generous leading rather than the spec-sheet look. */
body.apex .blog-markdown { font-size: 17.5px; line-height: 1.75; color: var(--text-2); }
body.apex .blog-markdown > * + * { margin-top: 1.15em; }
body.apex .blog-markdown h2 {
  font-size: clamp(23px, 3vw, 31px); line-height: 1.15; color: var(--text);
  margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--rule);
}
body.apex .blog-markdown h3 { font-size: 20px; line-height: 1.25; color: var(--text); margin-top: 1.7em; }
body.apex .blog-markdown a { color: var(--text); border-bottom: 1px solid var(--accent); }
body.apex .blog-markdown a:hover { color: var(--accent); }
body.apex .blog-markdown strong { color: var(--text); font-weight: 600; }
body.apex .blog-markdown ul,
body.apex .blog-markdown ol { padding-left: 1.3em; }
body.apex .blog-markdown li + li { margin-top: 0.5em; }
body.apex .blog-markdown li::marker { color: var(--accent); }
body.apex .blog-markdown blockquote {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 20px;
  color: var(--text); font-size: 18.5px;
}
body.apex .blog-markdown code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.88em;
  background: var(--ink); border: 1px solid var(--rule); padding: 2px 6px; color: var(--text);
}
body.apex .blog-markdown pre {
  background: var(--ink); border: 1px solid var(--rule); padding: 18px 20px; overflow-x: auto;
}
body.apex .blog-markdown pre code { border: 0; padding: 0; background: none; }
body.apex .blog-markdown img { border: 1px solid var(--rule); }
body.apex .blog-markdown table { width: 100%; border-collapse: collapse; font-size: 15px; }
body.apex .blog-markdown th,
body.apex .blog-markdown td { border: 1px solid var(--rule); padding: 11px 14px; text-align: left; }
body.apex .blog-markdown th { background: var(--ink); color: var(--text); }
body.apex .blog-markdown hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

body.apex .blog-related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 44px;
}
body.apex .blog-related-card {
  background: var(--navy-2); border: 1px solid var(--rule); box-shadow: var(--lift-1);
  padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background 0.15s ease;
  border-radius: var(--radius);
}
body.apex .blog-related-card:hover { background: var(--navy-3); }
body.apex .blog-related-title { font-family: 'Archivo Black', sans-serif; font-size: 16.5px; line-height: 1.25; }
body.apex .blog-related-excerpt { font-size: 14px; color: var(--text-2); line-height: 1.55; }

/* ==========================================================================
   PAYMENT RESULT + STANDALONE PREVIEW FORM
   ========================================================================== */
body.apex .payment-result {
  border: 1px solid var(--rule-2); background: var(--navy-2); box-shadow: var(--lift-2);
  max-width: 620px; margin: 0 auto; padding: 52px 38px; text-align: center;
  border-radius: var(--radius);
}
body.apex .payment-result--success { border-color: var(--accent); }
body.apex .payment-result-icon { font-size: 42px; line-height: 1; margin-bottom: 20px; color: var(--accent); }
body.apex .payment-result h1 { font-size: clamp(26px, 4vw, 38px); }
body.apex .payment-result .hero-sub { margin-inline: auto; font-size: 16.5px; }
body.apex .payment-result .btn-accent,
body.apex .payment-result .btn-ghost { margin-top: 26px; }

body.apex .preview-section { text-align: center; }
body.apex .preview-section .hero-generator-form,
body.apex .preview-form { margin: 32px auto 0; max-width: 560px; text-align: left; }
body.apex .preview-submit {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-label);
  font-size: 15px; font-weight: 700; letter-spacing: 0.005em;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 16px 26px; cursor: pointer;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
}
body.apex .preview-submit:hover { background: var(--accent-hi); }

/* --- leftovers from the old templates, restated in the palette --- */
body.apex .calc-strike { color: var(--dimmer); text-decoration: line-through; }
body.apex .pricing-cta-row { text-align: center; padding: 48px 0 0; }
body.apex .field-error {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 8px;
}
body.apex .back-link { font-size: 14px; color: var(--dim); }
body.apex .back-link:hover { color: var(--text); }
body.apex .preview-generate { min-height: 70vh; padding: 96px 0 80px; border-top: 0; }
body.apex .preview-generate .container { max-width: 560px; }
body.apex .preview-generate .section-header { margin-bottom: 28px; }
body.apex .preview-generate h1 { font-size: clamp(28px, 4vw, 38px); }
body.apex .field-hint { font-size: 13px; color: var(--dim); margin-top: 6px; }
body.apex .back-row { margin-top: 16px; text-align: center; }

/* ==========================================================================
   PROPOSAL PAGES — private, unlisted client proposals (/proposal/*)
   Only two things are new here. Everything else on those pages reuses the
   existing band / spec / step / tier / addon / faq vocabulary above.
   ========================================================================== */

/* Checklist inside an .addon or a bare band. Same marker treatment as .tier li
   so the two read as one family. */
body.apex .proposal-list { list-style: none; margin: 18px 0 0; padding: 0; }
body.apex .proposal-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
body.apex .proposal-list li:first-child { border-top: 0; }
body.apex .proposal-list .m { color: var(--accent); flex: 0 0 auto; font-weight: 700; }

/* A steering committee prints things and reads them round a table. Drop the
   furniture, unwind the motion, and force every band to paper. */
@media print {
  body.apex.proposal .title-block,
  body.apex.proposal .footer,
  body.apex.proposal .theme-float,
  body.apex.proposal .hero-aside a { display: none !important; }

  body.apex.proposal,
  body.apex.proposal .band,
  body.apex.proposal .band-sunk,
  body.apex.proposal .close-cta,
  body.apex.proposal .hero {
    background: #fff !important;
    color: #12174E !important;
  }
  body.apex.proposal .rise,
  body.apex.proposal .reveal {
    opacity: 1 !important; transform: none !important;
  }
  body.apex.proposal .band { padding: 24px 0 !important; break-inside: avoid; }
  body.apex.proposal .spec,
  body.apex.proposal .step,
  body.apex.proposal .faq,
  body.apex.proposal .addon,
  body.apex.proposal .tier { break-inside: avoid; }
  body.apex.proposal a { text-decoration: underline; }
}