/* Clearfield one-page site
   Tokens match reports/components/styles.py (the report PDF's own brand). */

@font-face {
  font-family: "Besley";
  src: url("fonts/Besley-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Besley";
  src: url("fonts/Besley-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #1B2A3D;
  --grey: #F3F5F7;
  --white: #FFFFFF;
  --border: #E2E6EB;
  --border-on-dark: rgba(226, 232, 240, 0.2);
  --teal-dark: #1D9E75;
  --teal-light: #2DD4BF;
  --text-secondary: #3B4555;
  --muted: #8B95A5;
  --on-dark: #E2E8F0;
  --on-dark-muted: #94A3B8;
  --numeral-grey: #D8DEE6;
  --numeral-white: #E8ECF1;

  --font-display: "Besley", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1180px;
  --pad-inline: clamp(1.25rem, 5vw, 4rem);
  --ease-out-exp: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

/* Anchor landing: the masthead is static (not sticky/fixed - confirmed
   nowhere in this file), so nothing overlays a jumped-to heading. This
   margin is therefore comfortable-landing space, not overlay clearance -
   room for the heading to sit clear of the viewport edge rather than
   pinned flush to it. 4rem covers the doc-ordinal note above (roughly
   3.5rem or more keeps a section's decorative numeral in frame with its
   heading rather than clipping it off the top) and reads fine on
   index.html's plain h2 anchor targets, which carry no ordinal. */
[id] {
  scroll-margin-top: 4rem;
}

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

body {
  margin: 0;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-x: hidden;
}

h1, h2, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
}

svg {
  display: block;
  max-width: 100%;
}

a {
  text-underline-offset: 0.2em;
}

.sprite-defs {
  display: none;
}

/* Browser surfaces */

::selection {
  background: var(--teal-dark);
  color: var(--white);
}

html {
  caret-color: var(--teal-dark);
  accent-color: var(--teal-dark);
}

:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

.masthead :focus-visible,
.hero :focus-visible,
.contact :focus-visible {
  outline-color: var(--teal-light);
}

html {
  scrollbar-color: var(--teal-dark) var(--grey);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--grey);
}

::-webkit-scrollbar-thumb {
  background: var(--teal-dark);
  border-radius: 8px;
  border: 3px solid var(--grey);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--navy);
}

/* Shared type */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.eyebrow--on-dark {
  color: var(--teal-light);
}

/* Masthead */

.masthead {
  background: var(--navy);
}

.masthead-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-block: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-dark);
}

.brand-mark {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--teal-light);
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

/* Masthead nav */

.masthead-nav {
  position: relative;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem clamp(1.1rem, 2.5vw, 1.85rem);
  list-style: none;
}

.nav-list a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--teal-light);
  border-color: currentColor;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: var(--on-dark);
  transition: background-color 150ms ease;
}

.nav-toggle:hover .nav-toggle-bar,
.nav-toggle:focus-visible .nav-toggle-bar {
  background: var(--teal-light);
}

@media (max-width: 640px) {
  html.has-js .nav-toggle {
    display: inline-flex;
  }

  html.has-js .nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.85rem);
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 200px;
    background: var(--navy);
    border: 1px solid var(--border-on-dark);
    border-radius: 4px;
    padding: 0.4rem 0;
  }

  html.has-js .nav-list.is-open {
    display: flex;
  }

  html.has-js .nav-list a {
    display: block;
    padding: 0.7rem 1.1rem;
    border-bottom: 0;
  }
}

/* Hero */

.hero {
  background: var(--navy);
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 5.4vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  text-wrap: balance;
}

.hero-lede {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--on-dark-muted);
  max-width: 66ch;
  margin-top: 0.25rem;
}

/* Hero cycle rule */

.cycle {
  position: relative;
  margin-top: 2rem;
}

.cycle-line {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 1px;
  background: var(--teal-light);
  transform: scaleX(1);
  transform-origin: left center;
  animation: cycle-line-draw 900ms var(--ease-out-exp) both;
}

.cycle-rule {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.cycle-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.cycle-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--teal-light);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--teal-light);
  background: var(--navy);
  opacity: 1;
  transform: scale(1);
  animation: cycle-stop-fill 600ms var(--ease-out-exp) both;
}

.cycle-stop:nth-child(1) .cycle-num { animation-delay: 150ms; }
.cycle-stop:nth-child(2) .cycle-num { animation-delay: 350ms; }
.cycle-stop:nth-child(3) .cycle-num { animation-delay: 550ms; }
.cycle-stop:nth-child(4) .cycle-num { animation-delay: 750ms; }

.cycle-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-light);
}

@keyframes cycle-line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes cycle-stop-fill {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-line,
  .cycle-num {
    animation: none;
  }
}

/* Bands */

.band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.band--grey { background: var(--grey); }
.band--white { background: var(--white); }

.band + .band {
  border-top: 1px solid var(--border);
}

.band-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(0, 2.7fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.band-numeral {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 19vw, 15.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  user-select: none;
}

.band--grey .band-numeral { color: var(--numeral-grey); }
.band--white .band-numeral { color: var(--numeral-white); }

.band-content {
  grid-column: 2;
  max-width: 72ch;
}

.band-progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.band-progress .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
}

.band-progress .dot.is-filled {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.band-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 1.25rem 0 0.85rem;
}

.band-content > p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.band-content > p:last-child {
  margin-bottom: 0;
}

.band-note {
  font-style: italic;
  color: var(--text-secondary);
}

/* Onward link. index.html's About, Pricing and Contact bands are summaries;
   each closes on a line linking to its own full page. This rule supplies only
   the standoff the surrounding rhythm does not - .offer-pair and .contact-inner p
   both carry no bottom margin - and it collapses with .band-content > p's 1rem
   rather than adding to it, so the gap reads as 1.5rem in all three bands.
   The anchor itself introduces no new link colour: it reuses .offer-link on the
   two light bands (Navy label, Field Teal underline) and .contact-email on the
   navy Contact band (Signal Teal on Deep Navy, 7.8:1). */

.onward-link {
  margin-top: 1.5rem;
}

/* Chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  margin-top: 1.6rem;
}

.chips li {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--white);
}

/* Report object (band 04) */

.report-object {
  grid-column: 1 / -1;
}

.report-object figcaption {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.report-stack {
  display: grid;
  grid-template-columns: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.report-object {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.report-back,
.report-front {
  grid-area: 1 / 1;
}

.report-back {
  width: 62%;
  aspect-ratio: 1 / 1.41;
  justify-self: end;
  align-self: start;
  margin-top: 2.5%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(16, 32, 54, 0.08);
  padding: 4.5% 2.2% 4.5% 0;
}

.report-back-body {
  width: 40%;
  margin-left: auto;
}

.report-back-label {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.9em;
}

.report-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em 1em;
  margin-bottom: 1.3em;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--teal-dark);
  line-height: 1;
}

.stat-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.report-chart-label {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.5em;
}

.report-chart {
  width: 100%;
  height: auto;
}

.chart-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-bar--teal { fill: var(--teal-dark); }
.chart-bar--navy { fill: var(--navy); }

.chart-tick {
  font-family: var(--font-body);
  font-size: 8px;
  fill: var(--text-secondary);
  text-anchor: middle;
}

.report-legend {
  display: flex;
  gap: 1.1em;
  margin-top: 0.7em;
}

.report-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.swatch--teal { background: var(--teal-dark); }
.swatch--navy { background: var(--navy); }

.report-front {
  width: 72%;
  position: relative;
  aspect-ratio: 1 / 1.41;
  justify-self: start;
  align-self: start;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 3%),
    var(--navy);
  border-radius: 4px;
  box-shadow:
    0 24px 48px rgba(16, 32, 54, 0.28),
    0 4px 12px rgba(16, 32, 54, 0.18);
  padding: 7% 8%;
  display: flex;
  flex-direction: column;
  color: var(--on-dark);
}

.report-front-brand {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 2.3vw, 1.05rem);
  color: var(--on-dark);
}

.report-front-mark {
  width: 1.3em;
  height: 1.3em;
  color: var(--teal-light);
  flex-shrink: 0;
}

.report-front-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.4vw, 2.75rem);
  line-height: 1.14;
  color: var(--white);
  margin-top: auto;
  margin-bottom: 1em;
}

.report-front-rule {
  width: 2.4rem;
  height: 2px;
  background: var(--teal-light);
  border: 0;
  margin: 0 0 1em;
}

.report-front-client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.5vw, 1.35rem);
  color: var(--teal-light);
  margin-bottom: 0.35em;
}

.report-front-date {
  font-size: clamp(0.72rem, 1.9vw, 0.82rem);
  color: var(--on-dark-muted);
}

/* Offer pair (pricing band)
   One hairline-framed object split by a seam, not two floating cards.
   The filled panel is the offer that can be bought today; the plain
   panel states the one that cannot yet. */

.offer-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin-top: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.offer {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.offer + .offer {
  border-left: 1px solid var(--border);
}

.offer--primary {
  background: var(--grey);
}

.offer-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1;
  color: var(--navy);
}

.offer--primary .offer-amount {
  color: var(--teal-dark);
}

.offer-period {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-left: 0.15em;
}

.offer-detail {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.offer-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.offer-note {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Filled action - the marketing page's one purchase control.
   Shares the portal action's geometry; the label takes the on-dark
   hover language (Signal Teal on navy) rather than a teal fill, which
   would drop the label below 4.5:1. */

.offer-action {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--navy);
  border-radius: 3px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  transition: color 150ms ease;
}

.offer-action:hover,
.offer-action:focus-visible {
  color: var(--teal-light);
}

/* Pending-checkout notice - the buyable panel's stand-in until Stripe is
   wired. D3 (ruled 2026-09-01) publishes the site before card checkout
   opens, so the buy CTA is not a link at all in the meantime.

   It is deliberately NOT .offer-action's filled shape. A filled navy button
   that does nothing reads as a broken control and invites the click it
   cannot honour, so this borrows .portal-action--static's honest idiom
   instead - transparent fill, 1px Hairline border, the action's own
   geometry - with Navy ink rather than that rule's Field Teal, because on a
   light ground at 0.95rem/600 the text sits below the large-text threshold
   and 4.5:1 applies (#1D9E75 on Card White is 3.4:1).

   The two panels stay unequal, which is the Offer Pair's load-bearing
   honesty: the buyable panel keeps its Paper Grey fill, its Field Teal
   amount and an action-shaped element, and the live route beneath it is a
   real link to a real mailbox. The forthcoming panel keeps its italic note
   and its plain ground, and there is still nothing behind it to buy. */

.offer-pending {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--navy);
}

/* Register-interest link. The label stays Navy in every state (14.5:1);
   the hover darkens and thickens the underline instead. Field Teal on
   Card White is 3.4:1, and at 0.95rem/600 this text sits below the
   large-text threshold, so 4.5:1 applies and a teal label would fail. */

.offer-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 150ms ease, text-decoration-thickness 150ms ease;
}

.offer-link:hover,
.offer-link:focus-visible {
  text-decoration-color: var(--navy);
  text-decoration-thickness: 2px;
}

/* Doc-scope restorations. The Offer Pair also renders on pricing.html,
   inside .doc-body, and byte-identical markup is NOT sufficient to make the
   two surfaces render alike: the document rules .doc-body p and .doc-body a
   are descendant selectors at (0,1,1) and outrank this component's own class
   rules at (0,1,0). index.html is untouched by them only because the band
   rules use a child combinator (.band-content > p), which cannot reach inside
   the <ul>. Same collision, same remedy as .doc-body .doc-index-title and
   .doc-body .doc-ordinal below.

   Two of these are correctness, not polish. Without the action rule the buy
   CTA's REST state takes .doc-body a's navy ink on .offer-action's navy fill
   - 1:1, an invisible purchase control. Hover and focus were never invisible:
   .doc-body a:hover declares no color, so .offer-action:hover (0,2,0) still
   won and the label appeared in Signal Teal. The :hover/:focus-visible
   restoration below is kept as defence-in-depth, so the state pair cannot
   drift if a colour is ever added to .doc-body a:hover.
   Without the amount rule the GBP 25 drops
   to 17px while .offer--primary .offer-amount (0,2,0) still wins the colour,
   putting Field Teal on Paper Grey at 3.10:1 - the exact case the Don't in
   DESIGN.md forbids, since below 18.66px bold the 4.5:1 bar applies.

   The .offer--primary rule is load-bearing: it ties .doc-body .offer-amount
   on specificity, so without it the later source position here would repaint
   the buyable amount navy. margin-bottom is zeroed because .doc-body p adds
   1rem on top of .offer's 0.65rem flex gap.

   .offer-pending is a <p> too, so it is restored here for the same reason
   and by the same contract: without it .doc-body p would drag the notice to
   1.0625rem/1.7 in Ink Secondary and add a margin the flex gap already
   supplies, so pricing.html's panel would stop matching index.html's. */

.doc-body .offer-amount {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 0;
}

.doc-body .offer--primary .offer-amount {
  color: var(--teal-dark);
}

.doc-body .offer-detail {
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}

.doc-body .offer-note {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.doc-body .offer-pending {
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0;
}

.doc-body a.offer-action {
  color: var(--white);
  text-decoration: none;
  transition: color 150ms ease;
}

.doc-body a.offer-action:hover,
.doc-body a.offer-action:focus-visible {
  color: var(--teal-light);
}

/* Contact close */

.contact {
  background: var(--navy);
  padding-block: clamp(4rem, 9vw, 6rem);
}

.contact-inner {
  max-width: calc(640px + 2 * var(--pad-inline));
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.contact-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--on-dark);
  margin-bottom: 1rem;
}

.contact-inner p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--on-dark-muted);
}

.contact-email {
  color: var(--teal-light);
  text-decoration: underline;
  text-decoration-color: var(--teal-light);
  text-underline-offset: 0.2em;
  font-weight: 600;
  transition: color 150ms ease;
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--on-dark);
}

.contact-email-display {
  margin-top: 1.75rem;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
}

/* Footer */

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding-block: 1.75rem;
}

.site-footer-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.site-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.5rem;
}

.site-footer-brand,
.site-footer-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

.site-footer-links {
  display: flex;
  gap: 1.25rem;
}

.site-footer-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 0.2em;
  transition: color 150ms ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--teal-dark);
}

.brand-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
}

.brand-link .brand-word {
  transition: color 150ms ease;
}

.brand-link:hover .brand-word,
.brand-link:focus-visible .brand-word {
  color: var(--teal-light);
}

/* Simple document pages (privacy, terms, success, cancel) */

.doc-hero {
  background: var(--navy);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.doc-hero-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.doc-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  margin-top: 0.6rem;
}

/* Last-updated stamp (privacy, terms). OD11, ruled 2026-09-01: both legal
   documents carry a visible date. It sits under the doc-hero h1 in On-Dark
   Muted, which is the relationship the hero lede already has to the h1 on
   index.html, so the date reads as document metadata rather than as the
   first line of the document. */

.doc-hero-meta {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

.doc-body {
  background: var(--white);
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

.doc-body-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* The measure. It caps the direct children rather than .doc-body-inner
   itself, so the wrapper stays at the page's shared 1180px container while
   the reading column stays narrow.

   All four doc pages therefore wrap their prose in a single .doc-prose
   child, and that is a contract rather than tidiness: ch resolves against
   each element's OWN computed font, so capping several siblings caps them
   at several different widths. Unwrapped, a 1.0625rem .doc-body p and a
   1rem .next-steps frame differ by a flat 1.0625x, which showed as the
   framed list's hairline edge sitting inside the wrap point of the
   paragraph above it, and a Besley 700 h2 resolved 72ch so wide the cap
   was inert. One wrapper, one font context, one measure. */

.doc-body-inner > * {
  max-width: 72ch;
}

.doc-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--navy);
  margin: 2.5rem 0 0.85rem;
}

.doc-body h2:first-child {
  margin-top: 0;
}

.doc-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.doc-body p:last-child {
  margin-bottom: 0;
}

.doc-body a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 150ms ease, text-decoration-thickness 150ms ease;
}

.doc-body a:hover,
.doc-body a:focus-visible {
  text-decoration-color: var(--navy);
  text-decoration-thickness: 2px;
}

/* Doc-page left rail (privacy, terms)

   Echoes index.html's .band-inner geometry - the same
   minmax(90px, 0.8fr) / minmax(0, 2.7fr) split, the same column gap, the
   same 72ch measure sitting in column 2 - so a legal page reads as the
   same document family as the home page rather than as a loose slab of
   prose. The prose therefore indents away from the h1 above it by
   design, exactly as .band-content indents away from the hero on
   index.html; it is a constant, container-anchored offset, not the
   independent centring commit A removed.

   Only the two long pages carry the rail: success.html has one section
   and cancel.html none, so both keep the plain single column. The rail
   is opted into by a class on the wrapper, not inferred from the page. */

.doc-index {
  display: none;
}

.doc-body .doc-index-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 0.8rem;
}

.doc-index ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.doc-body .doc-index a {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid var(--border);
  padding-left: 0.7rem;
  transition: color 150ms ease, border-left-color 150ms ease;
}

.doc-body .doc-index a:hover,
.doc-body .doc-index a:focus-visible {
  color: var(--navy);
  border-left-color: var(--teal-dark);
}

/* Decorative section ordinals - the .band-numeral grammar at doc scale.
   aria-hidden and purely rhythmic: the nav above and the headings below
   carry every word of the meaning, so the ghosted tone is the numeral
   precedent rather than an AA regression. */

.doc-body .doc-ordinal {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--numeral-grey);
  user-select: none;
  margin: 2.75rem 0 0;
}

.doc-body .doc-ordinal:first-child {
  margin-top: 0;
}

.doc-body .doc-ordinal + h2 {
  margin-top: 0.3rem;
}

/* Scroll-margin for these section ids now comes from the global [id]
   rule near the top of this file (commit C), which covers every anchor
   target site-wide rather than being set per-page here. */

/* The rail itself. Held back to 1024px rather than the bands' 860px
   because this rail carries whole heading sentences, not a two-character
   numeral: at 860px the 0.8fr column is under 170px and every link wraps
   to three or four lines beside a squeezed measure. Below the
   breakpoint the geometry is exactly what commit A left - one column,
   72ch, container-anchored - with the ordinals added and the index
   hidden, so the 641-860px window stays the reviewed layout.

   The index is hidden rather than reflowed in-flow below the breakpoint
   because it duplicates the headings immediately beneath it: ten links
   stacked above the prose cost a full screen of scroll before the
   document starts, and every id survives, so a deep link into a section
   still lands at any width. */

@media (min-width: 1024px) {
  .doc-body-inner--railed {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 2.7fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .doc-body-inner--railed > .doc-prose {
    grid-column: 2;
  }

  .doc-body-inner--railed > .doc-index {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* Next-steps list (checkout return pages)
   The offer pair's framed-object grammar turned to one column: one
   hairline frame, rows seamed rather than boxed, a Label-ramp term
   against body-copy prose. For a short set of stated facts a reader
   scans rather than a passage they read. */

.next-steps {
  margin: 0.6rem 0 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.next-step {
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
}

.next-step + .next-step {
  border-top: 1px solid var(--border);
}

.next-step dt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.next-step dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* FAQ list (pricing)
   The third instance of the framed-object grammar (.offer-pair,
   .next-steps, this), and a VARIANT of .next-steps rather than a reuse of
   it. That component's dt is the Label ramp - 0.8rem/600/0.14em uppercase
   - for a short scanned label, and its own rule rules it out here: a row
   is a label and its fact, never a heading and a section. An FAQ question
   is exactly a heading and a section, and a full interrogative sentence
   set in letterspaced uppercase would run to two or three lines. So the
   frame, the seams and the padding are next-steps', and only the dt
   changes: Source Sans 600 at body size in Navy over the standard body
   copy answer. Navy-semibold above grey-regular is the differentiation;
   the frame and the seams do the grouping.

   Besley is deliberately not used - the Besley-Is-For-Moments rule lists
   heads, numerals, the wordmark, stat values, the offer amounts and the
   mock cover, and a dt is none of them - which also keeps this dt in the
   same voice as .next-step dt.

   No doc-scope restoration is needed, unlike the offer pair above: the
   answers are text directly in <dd> rather than wrapped in <p>, so
   .doc-body p never reaches them, and the one link inside an answer is
   left to .doc-body a on purpose so an FAQ link speaks the same
   Navy-with-teal-underline language as every other link on the page.
   dl and dd sit outside the h1/h2/p/ul/ol/figure margin reset at the top
   of this file, so both are zeroed explicitly here. */

.faq {
  margin: 0.6rem 0 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.faq:last-child {
  margin-bottom: 0;
}

.faq-item {
  padding: clamp(1.15rem, 3.5vw, 1.6rem);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-item dt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.faq-item dd {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Responsive */

@media (max-width: 860px) {
  .band-inner {
    grid-template-columns: 1fr;
  }

  .band-numeral,
  .band-content,
  .report-object {
    grid-column: 1;
  }

  .band-numeral {
    font-size: clamp(4.5rem, 26vw, 8rem);
    line-height: 0.75;
  }
}

@media (max-width: 640px) {
  .masthead-inner {
    padding-block: 1.1rem;
  }

  .nav-list a {
    font-size: 0.85rem;
  }

  .cycle-num {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .cycle-line {
    left: 16px;
    right: 16px;
    top: 16px;
  }

  .offer-pair {
    grid-template-columns: 1fr;
  }

  .offer + .offer {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 860px) {
  .report-stack { max-width: 460px; }
  .report-front { width: 64%; }
  .report-back { width: 58%; padding: 4.5% 2.5% 4.5% 0; }
  .report-back-body { width: 55%; }
  .report-stats { grid-template-columns: 1fr; gap: 0.7em; }
}

@media (max-width: 420px) {
  .cycle-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 360px) {
  .cycle-label {
    display: none;
  }
}