/* Site developed and built by sitethreesixty.com */

/* ============================================================
   elements.css — Atomic element styles
   No colours. No widths (except form inputs). No grid positions.
   ============================================================ */

/* --- Buttons --- */

.btn-primary {
  display: inline-block;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  border: var(--border-medium) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--speed-normal) var(--ease-default),
              border-color var(--speed-normal) var(--ease-default),
              color var(--speed-normal) var(--ease-default),
              transform var(--speed-fast) var(--ease-default);
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  background: transparent;
  border: var(--border-medium) solid currentColor;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--speed-normal) var(--ease-default),
              border-color var(--speed-normal) var(--ease-default),
              color var(--speed-normal) var(--ease-default),
              transform var(--speed-fast) var(--ease-default);
}

.btn-secondary:hover {
  transform: translateY(-2px);
}

/* --- Cards --- */

.card {
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--speed-normal) var(--ease-default),
              transform var(--speed-normal) var(--ease-default);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* --- Badge --- */

.badge {
  display: inline-block;
  font-size: var(--font-caption);
  font-weight: var(--weight-bold);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Form inputs --- */

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--speed-fast) var(--ease-default),
              box-shadow var(--speed-fast) var(--ease-default);
}

.form-input:focus {
  box-shadow: var(--shadow-glow);
}

/* --- Form textarea --- */

.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-sm);
  outline: none;
  min-height: 150px;
  resize: vertical;
  transition: border-color var(--speed-fast) var(--ease-default),
              box-shadow var(--speed-fast) var(--ease-default);
}

.form-textarea:focus {
  box-shadow: var(--shadow-glow);
}

/* --- Breadcrumb --- */
/* The whole .breadcrumb family lives in inner-critical.css ONLY.
   It sits directly under the page banner (above the fold on every inner
   page), so its layout must be in the critical path or the list paints
   unstyled and reflows.
   Removed from here 4 Aug 2026 — this was a 21-line byte-identical
   duplicate of inner-critical.css, the largest violation of the
   zero-duplication rule in the repo. Do not re-add.
   NB: distinct from .breadcrumb-bearing (the hero-top bearing pattern),
   which is a different component and stays where it is. */

/* --- Section heading --- */

.section-heading {
  font-family: var(--font-heading);
  font-size: var(--font-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* --- Section label (eyebrow) --- */

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium); /* was regular — bumped for legibility (Steve, 2 Aug) */
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* --- Footer elements — STRUCTURE ONLY.
   All footer colour lives in zones.css (.zone-dark .footer-*), because
   Elements never set their own colours. The rules these replaced broke
   three things at once: colour in elements.css, var(--x, fallback)
   syntax, and raw px font sizes. --- */

.footer-heading {
  font-family: var(--font-heading);
  font-size: var(--font-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.footer-link {
  font-size: var(--font-small);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease-default),
              opacity var(--speed-fast) var(--ease-default);
}

.footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-h4);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.footer-wordmark .deg {
  font-size: .72em;
  vertical-align: .3em;
}

.footer-tagline {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
}

.footer-privacy,
.footer-copyright {
  font-size: var(--font-caption);
  line-height: var(--leading-normal);
}

/* "Sources & citations" modal trigger — explore pages place this in the
   footer; it is a button styled as a link. */
.footer-sources {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-caption);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--speed-fast) var(--ease-default),
              opacity var(--speed-fast) var(--ease-default);
}

/* ============================================================
   EXPLORE-MORE (businesses marquee) — element structure only
   Consolidated from css/businesses-marquee.css 4 Aug 2026.
   All colour lives in zones.css.
   ============================================================ */

.explore-more-title {
  font-size: var(--font-caption);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-lg);
}

.explore-more-link {
  font-size: var(--font-small);
  font-weight: var(--weight-regular);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--speed-slow) var(--ease-default),
              transform var(--speed-slow) var(--ease-default),
              color var(--speed-fast) var(--ease-default);
}

.explore-more-link.is-visible {
  opacity: 1;
  transform: none;
}

.explore-more-sep {
  font-size: var(--font-small);
  opacity: 0;
  transition: opacity var(--speed-slow) var(--ease-default);
  user-select: none;
  line-height: var(--leading-tight);
}

.explore-more-sep.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .explore-more-link,
  .explore-more-sep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   HOME PAGE — element structure + instrument animation.
   Consolidated from css/home.css 4 Aug 2026. Colour lives in
   zones.css; container layout in containers.css.
   @keyframes stay in the SAME FILE as the rules that reference
   them (CLS rule 8) — that is why the animations are here and
   not split further.
   ============================================================ */

/* MODULE:START solari-board — flip animation (resting layout is critical) */
.solari-board-flap.is-flipping .solari-board-ch {
  animation: solari-drop 135ms ease-in;
}

@keyframes solari-drop {
  0%   { transform: rotateX(0);      opacity: 1; }
  49%  { transform: rotateX(-90deg); opacity: .35; }
  50%  { transform: rotateX(90deg);  opacity: .35; }
  100% { transform: rotateX(0);      opacity: 1; }
}

.solari-board-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-.5px);
  pointer-events: none;
  opacity: .5;
}

.solari-board-eyebrow .solari-board-flap::after { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  .solari-board-flap.is-flipping .solari-board-ch { animation: none; }
}
/* MODULE:END solari-board */

.quiet-link {
  font-family: var(--font-mono);
  font-size: var(--font-small);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  width: fit-content;
  transition: color var(--speed-fast) var(--ease-default);
}

/* MODULE:START speedometer — structure + sweep (colour in zones.css) */
.speedo { width: min(320px, 100%); height: auto; }
.speedo-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.bg-bezel-outer { stroke: currentColor; opacity: .28; stroke-width: 2.5; fill: none; }
.bg-bezel-inner  { stroke: currentColor; opacity: .12; stroke-width: 1;   fill: none; }
.bg-track    { stroke: currentColor; opacity: .22; stroke-width: 5;   fill: none; }
.bg-danger   { opacity: .35; stroke-width: 5; fill: none; }
.bg-good     { stroke-width: 5; fill: none; stroke-linecap: butt; }
.bg-tick     { stroke: currentColor; opacity: .32; stroke-width: 1; }
.bg-tick-major    { stroke: currentColor; opacity: .78; stroke-width: 1.8; }
.bg-num      { font-size: var(--font-caption); font-family: var(--font-mono); }
.bg-needle   { stroke-width: 3.5; stroke-linecap: round; }
.bg-hub      { stroke-width: 2.5; }
.bg-window   { opacity: .9; stroke-width: 1; }
.bg-digital  { font-size: 26px; font-weight: 700; font-family: var(--font-mono); letter-spacing: .06em; }
.bg-cap      { font-size: var(--font-caption); letter-spacing: .18em; font-family: var(--font-mono); }

#needle {
  transform-origin: 150px 150px;
  transform: rotate(-125deg);
  transition: transform 1.6s cubic-bezier(.34, 1.2, .4, 1);
}

@media (prefers-reduced-motion: reduce) {
  #needle { transition: none; }
}
/* MODULE:END speedometer */

/* The bearings-dial instrument was REMOVED from Home (see index.html:190 —
   Steve, 2 Aug) and has not been rebuilt on any other page. Its CSS was
   dead: 21 rules matching no markup, including animation-delay:
   calc(var(--i) * .22s) where --i is set nowhere — an A3 undefined-token
   HARD FAIL found by independent inspection 4 Aug 2026.
   Deleted rather than kept "in case": dead CSS with an undefined token is
   a rule that reads as working. The instrument's spec survives in
   design-mockups/hero/bearings-dial.html if it is ever rebuilt. */

/* --- Zone 5: how it works --- */
.journey-num {
  font-family: var(--font-mono);
  font-size: var(--font-small);
  letter-spacing: var(--tracking-mono);
}

.journey-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-h3);
  letter-spacing: var(--tracking-tight);
}

.journey-step,
.journey-fork { max-width: 68ch; }   /* text measure, not a layout cap */
.journey-fork { max-width: none; }

.journey-lane p { flex: 1; }

.journey-lane-label,
.journey-lane-verify {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.journey-lane-verify { padding-top: var(--space-sm); }

.journey-lane-note {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
}

.journey-closer {
  max-width: 74ch;   /* text measure */
  font-size: var(--font-body-size);
}

/* --- Zone 6: pricing teaser --- */
.pricing-teaser-bearing {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
}

.pricing-teaser-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-h3);
  letter-spacing: var(--tracking-tight);
}

.pricing-teaser-price {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 2.4rem;
  letter-spacing: var(--tracking-tight);
}

.pricing-teaser-price .mo {
  font-family: var(--font-mono);
  font-size: var(--font-small);
}

.pricing-teaser-line { font-size: var(--font-small); }

/* --- Zone 7 --- */
.zone-cta .cta-block p { max-width: 48ch; }   /* text measure */
.proof-copy p { max-width: 48ch; }
.whatyouget-copy p { max-width: 48ch; }

/* --- FAQ accordion --- */
.faq-item {
  border-radius: var(--radius-md);   /* was --radius-sm on Home / --radius-md on Pricing;
                                        deduplicated to md — Steve, 4 Aug */
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--font-body-size);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  flex: none;
  transition: transform var(--speed-fast) var(--ease-default);
}

.faq-item[open] summary::after { content: "−"; }

.faq-a {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--font-small);
  line-height: 1.6;
}

/* ============================================================
   PRICING PAGE — element structure only (colour in zones.css).
   Consolidated from css/pages/pricing.css 4 Aug 2026.
   ============================================================ */

/* ---- Tier cards grid (Zone 2 — container layout, no width cap) ---- */
.tiers-head {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.tiers-head h2 {
  margin: var(--space-sm) 0;
}

/* Tier card element (page-specific card variant — travels with this page,
   not a candidate for elements.css since its internal structure is
   pricing-specific: badge, bearing label, price display) */
.tier-card {
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
}

.tier-card .tier-badge {
  position: absolute;
  top: -11px;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
}

.tier-card .tier-bearing {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.tier-card h3 {
  font-size: 1.5rem;
  margin: .35rem 0 .1rem;
}

.tier-card .tier-tagline {
  font-size: var(--font-caption);
  margin-bottom: 1.1rem;
  min-height: 2.4em;
}

.tier-card .tier-price-label {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: .15rem;
}

.tier-card .tier-price {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 3.4rem;
  letter-spacing: -.03em;
  line-height: 1;
}

.tier-card .tier-price .tier-mo {
  font-family: var(--font-mono);
  font-size: var(--font-small);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.tier-card .tier-sub {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  margin: .4rem 0 1.1rem;
}

.tier-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
}

.tier-card li {
  font-size: var(--font-caption);
  padding-left: 1.4rem;
  position: relative;
}

.tier-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  transform: rotate(45deg) translateY(-2px);
}

.tier-card li.muted::before {
  opacity: .5;
}

/* Fine print under the card grid */
.tiers-fineprint {
  text-align: center;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.tiers-fineprint a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--speed-fast) var(--ease-default);
}

/* ---- CTA (pricing-page specific sizing variants) ---- */
.cta-lg {
  font-size: var(--font-body-size);
  padding: 1rem 2rem;
}

/* ---- Charter / Claim Your Spot (Zone 3 — Slate) ---- */
.charter-lead {
  max-width: 56ch;
  font-size: var(--font-body-size);
  margin-bottom: var(--space-xl);
}

.guarantee-grid {
  text-align: left;
  margin-bottom: 2.75rem;
}

.guarantee-item h3 {
  font-size: var(--font-body-size);
  margin-bottom: .3rem;
}

.guarantee-item h3::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
}

.guarantee-item p {
  font-size: var(--font-caption);
  line-height: 1.5;
}

.charter-cta {
  padding-top: 2.25rem;
  text-align: center;
}

.charter-final {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

/* ---- Compare table (Zone 4 — Chalk) ---- */
.compare-head {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* The compare table reflows to stacked cards on narrow screens rather
   than scrolling sideways — Steve: "side scroll is annoying on small
   mobile phones". Removed `min-width: 640px` + `overflow-x: auto`.
   Uses a CONTAINER query, not a viewport breakpoint: the table reflows
   when ITS container is narrow, which is the correct trigger and keeps
   the site's single 1000px viewport breakpoint intact. */
.tablewrap {
  container-type: inline-size;
  border-radius: var(--radius-lg);
}

.compare-table {
  border-collapse: collapse;
  width: 100%;
}

.compare-table th, .compare-table td {
  text-align: left;
  padding: .85rem 1rem;
  font-size: var(--font-caption);
}

.compare-table thead th {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
  position: sticky;
  top: 0;
}

.compare-table thead th.col-tier {
  font-family: var(--font-display);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: -.01em;
  text-align: center;
}

.compare-table td.val {
  text-align: center;
}

/* Core column — intentionally empty (§9 OPEN ITEM 1, 00-FOUNDATION §11a).
   Every Core cell renders as an em-dash. Do not fill with invented
   content — Steve supplies the real row values.

   A8: the `opacity: .5 / .35` that used to dim these em-dashes is gone.
   They are CONTENT — the dash means "not included in Core" — and they
   measured 2.02:1 and 1.62:1. Colour now comes from zones.css, which is
   where colour belongs. Found by the 4th inspection's SVG fix, which
   also taught contrast-audit.py to composite element-level opacity. */

.compare-table tr.group td {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: .5rem 1rem;
}

/* ---- Shared section scaffolding (Zones 5–8) ---- */
.section-lead {
  max-width: 60ch;
  font-size: var(--font-small);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-head-center {
  text-align: center;
  margin-bottom: var(--space-md);
}

.section-head-center .section-label {
  margin-bottom: var(--space-sm);
}

/* ---- FAQ accordion (Zone 5 — muted) ---- */
.faq-list {
  margin-top: var(--space-md);
}

.faq-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  list-style: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  transition: transform var(--speed-fast) var(--ease-default);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item .faq-a {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--font-caption);
  line-height: 1.6;
}

/* ---- Add-ons / API & Email (Zone 6 — Chalk) ---- */
.addon-grid {
  margin-bottom: var(--space-lg);
}

.addon-item {
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.addon-item h3 {
  font-size: var(--font-small);
  margin-bottom: .3rem;
}

.addon-item p {
  font-size: var(--font-caption);
}

.addon-how {
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.addon-how h3 {
  font-size: var(--font-body-size);
  margin-bottom: .75rem;
}

.addon-how ul {
  list-style: none;
  margin-bottom: 1.25rem;
}

.addon-how li {
  font-size: var(--font-caption);
  padding-left: 1.4rem;
  position: relative;
}

.addon-how li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  transform: rotate(45deg) translateY(-2px);
}

.addon-result {
  font-size: var(--font-caption);
  padding-top: 1rem;
}

.fair-col h3 {
  font-size: var(--font-body-size);
  margin-bottom: .9rem;
}

.fair-col ul {
  list-style: none;
}

.fair-col li {
  font-size: var(--font-caption);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.4;
}

.fair-covered li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: var(--weight-bold);
}

.fair-notcovered li::before {
  content: "\00D7";
  position: absolute;
  left: 0;
  font-weight: var(--weight-bold);
}

.diff-item {
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.diff-item h3 {
  font-size: var(--font-body-size);
  margin-bottom: .3rem;
}

.diff-item p {
  font-size: var(--font-caption);
}

/* ---- Fuel gauge — ANIMATION properties only (deferred-safe).
   Resting SVG appearance (track/ticks/hub/labels/needle base position)
   lives in inner-critical.css — this file only carries the transition
   timing, which does not affect first-paint appearance (Blueprint §3 /
   §6, "safe to defer" list). Not redefined here vs critical — only the
   transition rules live in both places conceptually, but the PROPERTY
   values themselves are set once, here, not duplicated in critical. */
.fuel-gauge #needle {
  transition: transform var(--instrument-settle-duration) var(--instrument-settle-ease);
}

.fuel-gauge #fillArc {
  transition: stroke-dashoffset var(--instrument-settle-duration) var(--instrument-settle-ease);
}

@container (max-width: 640px) {
  /* Header row is meaningless once cells carry their own labels.
       Kept in the DOM for screen readers and non-supporting browsers. */
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td {
    width: 100%;
  }

  /* One card per feature */
  .compare-table tbody tr:not(.group) {
    padding: var(--space-md) 0;
  }

  .compare-table td {
    padding: var(--space-xs) var(--space-md);
  }

  /* Feature name = the card's heading */
  .compare-table td.feat {
    font-weight: var(--weight-bold);
    padding-bottom: var(--space-sm);
  }

  /* Tier rows: fixed-width label column, value left-aligned beside it.
       A shared label column keeps the values on one vertical line — right
       alignment made multi-line values ragged and hard to compare. */
  .compare-table td.val {
    text-align: left;
  }

  .compare-table td.val::before {
    content: attr(data-tier);
    font-family: var(--font-mono);
    font-size: var(--font-caption);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }

  /* Section headers stay full-width bands */
  .compare-table tr.group td {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fuel-gauge #needle, .fuel-gauge #fillArc {
    transition: none;
  }
}

/* ============================================================
   EXPLORE MANAGED — element structure only. Consolidated from
   css/pages/explore-managed.css 4 Aug 2026.
   ============================================================ */

.divide-frame {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: var(--leading-tight);
  max-width: 44ch;
}

.divide-frame em {
  font-style: italic;
}

.divide-col {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.divide-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.divide-here {
  font-size: 1.1em;
  vertical-align: .1em;
}

.divide-h {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.4rem;
}

.divide-col p {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
}

.divide-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  padding-top: .4rem;
  transition: color var(--speed-fast) var(--ease-default);
}

.handled-list {
  list-style: none;
  margin-top: var(--space-md);
}

.handled-mark {
  width: 12px;
  height: 12px;
  margin-top: .35rem;
  transform: rotate(45deg);
}

.handled-lead {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  margin-bottom: .2rem;
}

.handled-list p {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

.handled-plus {
  margin-top: 1.4rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
}

.handled-plus p {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  max-width: 66ch;
}

.handled-promise {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  line-height: 1.7;
}

/* ============================================================
   ZONE 4 — WHY DONE-FOR-YOU (Chalk) + ghost-type "TRUE"
   ============================================================ */
.zone-why {
  position: relative;
  overflow: hidden;
}

.ghost-type {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(8rem, 26vw, 22rem);
  letter-spacing: .04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.why {
  position: relative;
  z-index: 1;
}

.why p {
  font-size: var(--font-body-size);
  line-height: var(--leading-loose);
  max-width: 62ch;
}

.why-proof {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}

.process-steps {
  list-style: none;
}

.process-steps li {
  padding-top: 1.2rem;
}

.process-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: -.02em;
}

.process-steps h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  line-height: var(--leading-tight);
}

.process-steps p {
  font-size: var(--font-caption);
  line-height: var(--leading-normal);
}

.cn-head {
  text-align: center;
}

.cn-head .section-heading {
  max-width: 22ch;
}

.cn-intro {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  max-width: 66ch;
}

.cn-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: center;
}

.cn-col {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.cn-col h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  margin-bottom: .7rem;
}

.cn-col p {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
}

.cn-fig {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cn-contrast {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  text-align: center;
  max-width: 72ch;
}

/* Inline citation trigger (superscript) */
.cite {
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}

/* .cite sup stays em-based so it scales with its parent text, but .7em of
   already-small copy rendered at 8.4px — illegible. Raised 4 Aug 2026
   (Steve: "some of the fonts are too small"). */
.cite sup {
  font-size: .85em;
  vertical-align: super;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cn-sources-open {
  text-align: center;
}

.sources-trigger {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--speed-fast) var(--ease-default);
}

/* ============================================================
   ZONE 7 — CHARTER SCARCITY (Graphite)
   ============================================================ */
.charter-scarcity {
  text-align: center;
}

.charter-scarcity .section-heading {
  max-width: 24ch;
}

.cs-sub {
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

.section-head-center {
  text-align: center;
  margin-bottom: var(--space-md);
}

.section-head-center .section-label {
  margin-bottom: var(--space-sm);
}

.faq-list {
  width: 100%;
  margin-top: var(--space-md);
}

.faq-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  list-style: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  transition: transform var(--speed-fast) var(--ease-default);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item .faq-a {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--font-caption);
  line-height: 1.6;
}

.enquiry-sub {
  font-size: var(--font-small);
  line-height: var(--leading-normal);
  max-width: 56ch;
}

/* .ef-caption is a <span>, not a <label>: it captions a radiogroup that
   carries its own aria-label, so a <label for> pointing at no input was an
   orphan (found by inspection 4 Aug). Styled identically to a field label. */
.field label,
.field .ef-caption {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.field .opt {
  text-transform: none;
  letter-spacing: 0;
}

.radio, .check {
  font-family: var(--font-body);
  font-size: var(--font-caption);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

/* WCAG 2.2 Target Size (Minimum, 2.5.8) — 24x24 CSS px. Browser default
   is 13x13. An Element giving itself a usable size, which the Forbidden
   Rules permit ("a contact form should stop getting wider at some point").
   Applies to radios too, not only the two consent checkboxes the 4th
   inspection cited. */
.radio input, .check input {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 0;
}

.checks {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
}

.turnstile-slot:empty {
  min-height: 0;
}

.form-error {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.enquiry-secondary {
  padding-top: var(--space-md);
}

.enquiry-secondary a {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease-default);
}

.enquiry-offramp {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.enquiry-offramp a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   ZONE 9 — CONFIRMATION (Graphite) — the small literal Level reading true
   ============================================================ */
.confirm {
  text-align: center;
}

.confirm-level {
  width: min(340px, 80%);
}

.confirm-level .level-instrument {
  width: 100%;
  height: auto;
}

/* small literal Level — visible hairline instrument (NOT ghost), bubble
   already centred (the reading held). Same fine-line family, higher
   contrast than the hero ghost. */
.confirm-level .level-frame, .confirm-level .level-vial, .confirm-level .level-edge, .confirm-level .level-grad {
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .55;
}

.confirm-level .level-grad {
  opacity: .8;
}

.confirm-caption {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.confirm-line {
  font-size: var(--font-body-size);
  line-height: var(--leading-normal);
}

.confirm-secondary a {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
}

/* ============================================================
   SOURCES & CITATIONS MODAL (shared component)
   [hidden]/dialog:not([open]) no-flash guard lives in critical.
   ============================================================ */
.sources-modal {
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(560px, 92vw);
}

.sources-modal-head {
  padding: 1.1rem 1.4rem;
}

.sources-modal-head h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
}

.sources-modal-close {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: .2rem .4rem;
  transition: color var(--speed-fast) var(--ease-default);
}

.sources-list {
  list-style: none;
  margin: 0;
  padding: 1.2rem 1.4rem;
}

.sources-list li {
  padding-left: .6rem;
  margin-left: -.6rem;
  transition: border-left-color var(--speed-normal) var(--ease-default),
              background-color var(--speed-normal) var(--ease-default);
}

/* The inline superscript citation button — make it read as interactive. */
.cite {
  padding: 0 .1em;
  cursor: pointer;
  font: inherit;
}

.cite:hover, .cite:focus-visible {
  text-decoration: underline;
}

.source-claim {
  font-size: var(--font-caption);
}

.source-ref {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
}

.source-ref a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   EXPLORE CORE — element structure + instrument animation.
   Consolidated from css/pages/explore-core.css 4 Aug 2026.
   @keyframes stay with the rules that reference them (CLS rule 8).
   ============================================================ */

/* MODULE:START core-agent-anchor [motion] */
.core-anchor-live::before {
  animation: core-live 2s infinite;
}

.core-anchor-sweep {
  position: absolute;
  z-index: 1;
  width: min(390px, 68%);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Mask stencil — alpha only;
  Graphite as the opaque ring so no pure
     #000 appears (colour absolutes). */
  -webkit-mask-image: radial-gradient(circle, transparent 0 39%, var(--graphite) 40% 41%, transparent 42%);
  mask-image: radial-gradient(circle, transparent 0 39%, var(--graphite) 40% 41%, transparent 42%);
  animation: core-sweep 8s linear infinite;
}

.core-anchor-transfer {
  position: absolute;
  z-index: 2;
  width: 38%;
  height: 1px;
  opacity: 0;
  /* ⭐ PLANNER-APPROVED A4 EXCEPTION — Steve, 4 Aug 2026.
     --transfer-angle is a JS-SET RUNTIME PROPERTY (core-agent-anchor.js:51
     sets it per marker step), not a design token. A4 bans fallback syntax
     because a fallback hides an undefined TOKEN; this is a different
     mechanism — the property is undefined by design until the instrument
     activates, and the 0deg fallback IS the resting state. Without it,
     rotate() receives an invalid value on first paint and the browser
     discards the whole transform, so the line jumps to an unrotated,
     untranslated position. Do not "fix" this to a bare var(). */
  transform: rotate(var(--transfer-angle, 0deg)) translateX(42%);
  transform-origin: left center;
}

.core-anchor-transfer.is-active {
  opacity: .8;
  animation: core-transfer 900ms ease-out;
}

.core-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.zone-head {
  margin-bottom: var(--space-lg);
}

.zone-head h2 {
  margin-top: var(--space-sm);
}

.zone-head-center {
  text-align: center;
}

.lead-measure {
  max-width: 60ch;
}

/* ============================================================
   ZONE 3 — How same-day works (Slate). Three numbered step-cards.
   ============================================================ */
.steps-grid {
  margin-top: var(--space-lg);
}

.step-card {
  border-radius: var(--radius-md);
  padding: 1.4rem 1.35rem;
}

.step-num {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.step-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  line-height: 1.25;
}

.step-card p {
  font-size: var(--font-caption);
  line-height: 1.55;
}

/* Two-column: included-list (left) + the "what you need" dark panel (right).
   Panel is narrower and holds its shape; list takes the rest. Stacks < 860px. */
.spec-body {
  margin-top: var(--space-lg);
}

.spec-col {
  max-width: 52ch;
}

/* Included checklist — Torch corner-chevron, consistent site-wide. */
.included-list {
  list-style: none;
}

.included-list li {
  font-size: var(--font-small);
  line-height: 1.45;
  padding-left: 1.5rem;
  position: relative;
}

.included-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 8px;
  height: 8px;
  transform: rotate(45deg) translateY(-2px);
}


/* "What you need to start" — a DARK panel (right column of Zone 4), a
   designed counterpart to the light included-list. Its own Graphite surface
   makes it read as a distinct, intentional aside, not a plopped-on box. */
.need-panel {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
}

.need-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-bottom: .8rem;
}

.need-panel-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: .8rem;
}

.need-panel-lead {
  font-size: var(--font-small);
  line-height: 1.65;
  margin-bottom: 1.3rem;
}

.need-panel-link {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--font-small);
  border-radius: var(--radius-md);
  padding: .7rem 1.3rem;
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-default),
              border-color var(--speed-fast) var(--ease-default),
              transform var(--speed-fast) var(--ease-default);
}

.need-panel-link:hover {
  transform: translateY(-2px);
}

/* ============================================================
   ZONE 5 — The guarantee (dark). Ghost type + narrow statement.
   ============================================================ */
.guarantee {
  position: relative;
  text-align: center;
}

/* Ghost type — "30°" (Steve, 4 Aug 2026). The word was "RISK": removed
   because a negative word has no place in the copy, and at
   clamp(9rem,30vw,22rem) it also overflowed 320px by 64px. The clamp is
   tighter here and the ceiling lower — a 3-character ghost needs far less
   room than a 4-letter one, and it must never exceed its container. */
.guarantee-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(7rem, 30vw, 20rem);
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  max-width: 100%;
}

.guarantee-inner {
  position: relative;
  z-index: 1;
}

.guarantee h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-sm) 0 var(--space-md);
}

.guarantee p {
  font-size: var(--font-body-size);
  line-height: 1.6;
}

/* Quiet terms line under the guarantee — honest "terms apply" without
   turning the sell into a contract (§core-guarantee-terms). Selector is
   `.guarantee p.guarantee-terms` so it beats `.guarantee p` on specificity
   without an override flag. */
.guarantee p.guarantee-terms {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

.guarantee-terms a {
  text-decoration: underline;
}

/* ============================================================
   ZONE 6 — Prefer a more personal service? (Chalk). Reframed 3 Aug:
   a soft, centred invitation to talk to a designer / explore Managed,
   not a hard Core-vs-Managed table.
   ============================================================ */
.personal-lead {
  max-width: 58ch;
  margin: var(--space-md) auto 0;
  font-size: var(--font-body-size);
  line-height: 1.65;
}

.personal-actions {
  margin-top: var(--space-lg);
}

/* A quiet secondary link for the light (Chalk) zone — pairs with the
   primary .cta-core (defined in critical). */
.cta-quiet-dark {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--font-small);
  text-decoration: none;
  padding: .85rem 1.2rem;
  border-radius: var(--radius-md);
  transition: color var(--speed-fast) var(--ease-default);
}

/* Safety-net scroll container so a wide table never pushes the page body
   sideways (CLAUDE.md wide-content rule). On mobile the table reflows to
   stacked cards, so this rarely engages there — but it guarantees no
   horizontal page overflow at any width. */
.cmp-scroll {
  overflow-x: auto;
  margin-top: var(--space-lg);
}

/* --- The comparison table (real <table> — it IS tabular data) --- */
.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-small);
}

.cmp th, .cmp td {
  text-align: left;
  padding: .85rem 1.1rem;
  vertical-align: top;
}

/* Row-label column (the "Compared" dimension) */
.cmp tbody th[scope="row"] {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
}

/* Column headers */
.cmp thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
}

.cmp .cmp-rowlabel-h {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
}

/* The Core column — highlighted so the eye lands on the answer. */
.cmp .cmp-core {
  font-weight: var(--weight-medium);
}

/* The <a> sits INSIDE a <sup>, which already reduces size — a further .7em
   compounded to 8.4px. The link inherits the sup's size; it needs no
   reduction of its own. Fixed 4 Aug 2026. */
.cmp sup a {
  text-decoration: none;
  padding: 0 .15em;
}

/* --- "Which one is you" self-selection fork --- */
.who-fork {
  margin-top: var(--space-xl);
}

.who-col {
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-md);
}

.who-col h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.who-col ul {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.who-col li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--font-small);
  line-height: 1.5;
}

.who-col li::before {
  content: "—";
  position: absolute;
  left: 0;
}

.who-verdict {
  font-size: var(--font-small);
  font-style: italic;
  margin: 0;
}

/* --- Plain-English summary --- */
.cmp-summary {
  margin-top: var(--space-xl);
  max-width: 68ch;
  font-size: var(--font-body-size);
  line-height: 1.7;
}

/* ============================================================
   FAQ zone (SYNC-2) — accordion (reuses the site FAQ pattern).
   ============================================================ */
.faq-list {
  margin-top: var(--space-md);
}

.faq-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  list-style: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  transition: transform var(--speed-fast) var(--ease-default);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item .faq-a {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--font-caption);
  line-height: 1.6;
}

/* ============================================================
   ZONE 8 — Start now (dark, Torch accent). The close / handoff.
   ============================================================ */
.close-zone {
  text-align: center;
}

.close-zone h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-sm) 0 var(--space-lg);
}

.close-reassure {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
}

/* MODULE:START sources-modal */
.sources-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  padding: var(--space-md);
  opacity: 0;
  transition: opacity var(--speed-normal) var(--ease-default);
}

.sources-modal.is-open {
  opacity: 1;
}

.sources-modal-dialog {
  border-radius: var(--radius-lg);
  width: min(640px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: 1.75rem;
}

.sources-modal-head {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.sources-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
}

.sources-modal-close {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  line-height: 1;
  padding: .45rem .6rem;
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-default),
              color var(--speed-fast) var(--ease-default);
}

.sources-modal-intro {
  font-size: var(--font-caption);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.sources-modal-list {
  list-style: none;
  counter-reset: src;
}

.sources-modal-item {
  scroll-margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  transition: border-color var(--speed-normal) var(--ease-default),
              background-color var(--speed-normal) var(--ease-default);
}

.sources-modal-claim {
  font-size: var(--font-caption);
  line-height: 1.5;
}

.sources-modal-marker {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  margin-right: .4em;
}

.sources-modal-meta {
  margin-top: .4rem;
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
}

.sources-modal-meta a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* MODULE:START need-modal */
.need-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  padding: var(--space-md);
  opacity: 0;
  transition: opacity var(--speed-normal) var(--ease-default);
}

.need-modal.is-open {
  opacity: 1;
}

.need-modal-dialog {
  border-radius: var(--radius-lg);
  width: min(640px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: 1.75rem;
}

.need-modal-head {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.need-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
}

.need-modal-close {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  line-height: 1;
  padding: .45rem .6rem;
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-default),
              color var(--speed-fast) var(--ease-default);
}

.need-modal-intro, .need-modal-foot {
  font-size: var(--font-caption);
  line-height: 1.6;
}

.need-modal-intro {
  margin-bottom: 1.4rem;
}

.need-modal-foot {
  margin-top: 1.4rem;
  padding-top: 1rem;
}

.need-group {
  margin-bottom: 1.4rem;
}

.need-group-title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--font-body-size);
  margin-bottom: .7rem;
}

.need-group-tag {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: .2em .55em;
  border-radius: var(--radius-full);
}

.need-list {
  list-style: none;
}

.need-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: var(--font-caption);
  line-height: 1.55;
}

.need-list li::before {
  content: "—";
  position: absolute;
  left: 0;
}

@keyframes core-sweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes core-transfer {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .core-anchor-live::before, .core-anchor-sweep, .core-anchor-transfer.is-active {
    animation: none;
  }

  .sources-modal, .sources-modal-item {
    transition: none;
  }
}

@container (max-width: 640px) {
  .cmp thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* header row hidden; row cards self-label */
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td {
    width: 100%;
  }

  .cmp tr {
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
  }

  .cmp tbody th[scope="row"] {
    font-size: var(--font-caption);
    padding: .7rem 1.1rem;
  }

  .cmp td {
    padding: .7rem 1.1rem;
  }

  /* prefix each answer with its column name */
  .cmp td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--font-caption);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
}


/* ============================================================
   ARTICLE — element structure only, no colour (B1 PART 4 Zone 2).
   ============================================================ */

.article-lede {
  max-width: 60ch;   /* text measure */
  font-size: var(--font-h4);
  line-height: var(--leading-normal);
}

.article-body p {
  max-width: 65ch;   /* text measure */
  line-height: var(--leading-normal);
}

.article-body h2 {
  max-width: 65ch;   /* text measure */
  font-family: var(--font-heading);
  font-size: var(--font-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-top: var(--space-md);
}

.article-pullquote {
  max-width: 60ch;   /* text measure */
  padding-left: var(--space-lg);
  border-left: var(--border-medium) solid transparent;
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.article-body figure {
  max-width: 100%;
}

.article-body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Article inline CTA (mid-body prompt) --- */

.article-inline-cta p {
  font-family: var(--font-heading);
  font-size: var(--font-h4);
  font-weight: var(--weight-medium);
}

/* --- Also-trades cross-link line --- */

.also-trades p {
  font-size: var(--font-body-size);
}

/* --- FAQ "see the full FAQ" link row --- */

.faq-more {
  margin-top: var(--space-md);
  font-size: var(--font-small);
  text-align: center;
}

.faq-more a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Explore-more link row --- */

.explore-more-title {
  font-family: var(--font-mono);
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.explore-more-link {
  font-size: var(--font-small);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* https://www.sitethreesixty.com */