/* ============================================================
   REFUND / LEGAL — change order (21 Jul 2026)
   Layered on base.css + v3.css + v9.css. Reuses tokens, type,
   .eyebrow / .display / .container / .footer.
   Three pieces:
     1  .legal-disclaimer  — quiet fine-print block on /costs
     2  .rf-*              — standalone /refund-policy page
     3  .refund-pointer / .footer-legal — short-form signpost
   No price figures anywhere; treatment is deliberately understated.
   NOTE: disclaimer copy is DRAFT, pending client sign-off.
   ============================================================ */

/* ------------------------------------------------------------
   1 — /costs fine-print disclaimer
   Sits directly beneath the .co-refund plain-language line.
   Smaller than body, hairline-bordered, no icon, no alarm color.
   ------------------------------------------------------------ */
.legal-disclaimer {
  margin-top: 20px;
  padding: clamp(22px, 2.4vw, 30px);
  background: color-mix(in oklab, var(--slate-mid) 4%, var(--bg-card));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.legal-disclaimer .k {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
  margin-bottom: 14px;
}
.legal-disclaimer p {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--slate-dark);
  margin: 0 0 12px;
  max-width: var(--measure-wide);
}
.legal-disclaimer p:last-child { margin-bottom: 0; }
.legal-disclaimer p strong { color: var(--fg-strong); font-weight: 600; }

/* ------------------------------------------------------------
   3 — short-form pointer (Journey / Contact)
   One quiet line + link. Not a restatement.
   ------------------------------------------------------------ */
.refund-pointer {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-mid);
}
.refund-pointer a {
  color: var(--accent-deep);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-deep) 38%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms var(--ease);
}
.refund-pointer a:hover { border-color: var(--accent-deep); opacity: 1; }

/* footer entry point — bare utility link */
/* ⛔ `.footer-bottom { flex-wrap: wrap; gap: 12px 24px }` was declared here too,
   byte-identical to v3.css:1572. Removed 11 Aug 2026. The footer is global
   chrome and v3.css reaches all 37 pages; this sheet reaches only /privacy and
   /refund-policy, so a duplicate could only ever make those two diverge from
   the rest — silently, since the values agreed. v3.css owns the footer bar. */
.footer-legal {
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  border-bottom: 0;
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.footer-legal:hover { color: var(--coral-soft); opacity: 1; }

/* ------------------------------------------------------------
   2 — /refund-policy standalone page
   Plainest layout in the system: header + centered column + footer.
   No hero, no cards, no CTA. Body at readable size (not fine print).
   ------------------------------------------------------------ */
/* Top padding was clamp(48px, 6vw, 92px) = 86px at 1440, which put this page's
   breadcrumb 38px lower than every other page's. Fixed at 48px to match; the
   bottom keeps its responsive clamp. [Jacob, 8 Aug 2026] */
.rf { padding: 48px 0 clamp(72px, 8vw, 120px); }
/* ⚠️ Centring this column was TRIED and REJECTED `[Jacob, 7 Aug 2026]`. At
   680px centred it read as a narrow strip floating in the middle of the page.
   The file header still says "centered column" — that describes an intent that
   has now been tested and dropped. ⛔ Do not re-centre it.

   Left-aligned, full grid, with a page-local measure below doing the widening
   instead. */
.rf-container { max-width: 1320px; }

/* 🔴 Page-local measure `[Jacob, 7 Aug 2026]`. The page's blocks sat at
   --measure (58ch ≈ 490px) in a 1240px row, which read as too narrow for a
   left-aligned document. 72ch is ~608px, about a quarter wider.

   ⚠️ That is ~85 characters per line, above the 45–75 comfortable band the
   rest of the site targets — accepted here deliberately: this is legal copy
   that is skimmed and referred back to, not read continuously, and the request
   was explicitly for a wider column. ⛔ Do not copy this value to prose pages;
   they use --measure / --measure-wide for a reason. See dac61b6. */
.rf { --rf-measure: 72ch; }

.rf-crumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--fs-note); font-weight: 500;
  letter-spacing: 0.04em; color: var(--slate-mid); margin-bottom: 30px;
}
.rf-crumb a { color: var(--slate-mid); text-decoration: none; border: 0; transition: color 160ms var(--ease); }
.rf-crumb a:hover { color: var(--fg-strong); opacity: 1; }
.rf-crumb .sep { opacity: 0.5; }
.rf-crumb .here { color: var(--fg-strong); }

.rf .eyebrow { margin-bottom: 22px; }
.rf h1.display {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
.rf-intro {
  margin: 26px 0 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.56;
  color: var(--slate-dark);
  max-width: var(--rf-measure);
}
.rf-intro em { font-style: italic; color: var(--accent-deep); font-family: var(--font-serif); }

/* ------------------------------------------------------------------
   THE REFUND — the confirmed clause, given its own room.
   Chrome spec §3: reproduced verbatim from claude_guide-costs.md §8,
   single source of truth. The 21 Jul change order is explicit that it
   must not be buried in a terms panel — it is the most reassuring
   fact on the page, so it sits above the disclaimer, not inside it.
   ------------------------------------------------------------------ */
.rf-refund {
  margin-top: clamp(34px, 4vw, 48px);
  padding: clamp(26px, 3vw, 38px);
  background: var(--sage-pale);
  border-left: 3px solid var(--sage-deep);
  border-radius: 0 12px 12px 0;
  max-width: var(--rf-measure);
}
.rf-refund .k {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 14px;
}
.rf-refund-line {
  margin: 0;
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,2vw, 26px);
  line-height: 1.42;
  color: var(--fg-strong);
}


/* ------------------------------------------------------------------
   EXPLANATORY BLOCKS — added 6 Aug 2026.
   The page carried one sentence and read as unfinished. These blocks
   explain the confirmed policy; they do not extend it. Every statement
   traces to claude_guide-costs.md §7 (two installments) and §8 (the
   refund clause). ⛔ No figures here — those live only on /costs.
   All selectors are scoped under .rf; this sheet is loaded by
   refund-policy.html alone and must not reach another page.
   ------------------------------------------------------------------ */
.rf-block {
  margin-top: clamp(34px, 4vw, 50px);
  max-width: var(--rf-measure);
}
.rf-block .rf-h {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.rf-block p {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.72;
  color: var(--slate-dark);
}
.rf-block p:last-child { margin-bottom: 0; }
.rf-block p strong { color: var(--fg-strong); font-weight: 600; }
.rf-block a {
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-deep) 38%, transparent);
  transition: border-color 160ms var(--ease);
}
.rf-block a:hover { border-color: var(--accent-deep); opacity: 1; }

/* Two installments — ordered because the sequence is the point. */
.rf-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: rf-step;
  border-top: 1px solid var(--border-soft);
}
.rf-steps li {
  counter-increment: rf-step;
  display: grid;
  grid-template-columns: 26px minmax(0, 15ch) 1fr;
  gap: 4px 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}
.rf-steps li::before {
  content: counter(rf-step);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-mid);
}
.rf-step-k {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-strong);
}
.rf-step-v {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
}
.rf-cta { margin-top: 20px; }

@media (max-width: 640px) {
  .rf { padding: 40px 0 72px; }
  /* Stack label above value; the 15ch column cannot hold at 390. */
  .rf-steps li {
    grid-template-columns: 22px 1fr;
    gap: 3px 12px;
  }
  .rf-steps li .rf-step-v { grid-column: 2; }
}