/* ============================================================
   Coverproof — design system
   Palette: paper white / deep pine / brass stamp accent
   Type: Newsreader (display) · Public Sans (body) · IBM Plex Mono (ledger)
   ============================================================ */

:root {
  /* Light/cream is the one and only theme — pinned for all visitors.
     `only light` opts out of UA/forced dark schemes; never add a
     prefers-color-scheme variant. */
  color-scheme: only light;

  --paper: #FBFBF8;
  --mist: #F1F2EC;
  --white: #FFFFFF;
  --ink: #16211C;
  --ink-soft: #4A564F;
  --pine: #1E4B3F;
  --pine-deep: #12332B;
  --pine-wash: #E7EEE9;
  --brass: #8A6420;
  --brass-soft: #B08A3E;
  --line: #DBDCD2;
  --line-soft: #E8E9E1;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --container: 1080px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(22, 33, 28, 0.06), 0 12px 32px rgba(22, 33, 28, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* the ON FILE stamp intentionally overhangs its card; never let it cause page scroll */
}

::selection { background: var(--pine); color: var(--paper); }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- type scale ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 1rem;
}

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 34em; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }
.mono { font-family: var(--font-mono); }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 1rem;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { display: block; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { font-size: 0.95rem; text-decoration: none; color: var(--ink); }
/* animated underline instead of a color swap */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--pine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav .btn { margin-left: 0.4rem; }
@media (max-width: 760px) {
  .nav a:not(.btn) { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 33, 28, 0.16);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(22, 33, 28, 0.12);
}
.btn-primary { background: var(--pine); color: #fff; }
.btn-primary:hover { background: var(--pine-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-secondary:hover { background: var(--pine-wash); color: var(--pine-deep); }
.btn-lg { font-size: 1.1rem; padding: 1rem 2rem; }
.btn-on-dark { background: var(--paper); color: var(--pine-deep); }
.btn-on-dark:hover { background: #fff; color: var(--pine-deep); }
/* ghost button for dark bands: paper outline at rest; on hover the fill
   tints light AND the text flips to deep pine in the same 150ms — both
   states AA (measured: paper on pine-deep 13.2:1; pine-deep on pine-wash 11.6:1) */
.btn-ghost-dark { background: transparent; color: var(--paper); border-color: rgba(251, 251, 248, 0.55); }
.btn-ghost-dark:hover { background: var(--pine-wash); border-color: var(--pine-wash); color: var(--pine-deep); }

/* ---------- hero ---------- */

.hero { padding: 5.5rem 0 4.5rem; }
.hero .container {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem; align-items: center;
}
.hero h1 { margin-bottom: 1.3rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-bottom: 1.1rem; }
.hero-fine { font-size: 0.88rem; color: var(--ink-soft); }
/* R2's proof line. Sits between the CTA and the fine print: it is not fine print — it is the only
   trust signal above the fold, and the one this product can make honestly. */
.hero-proof { font-size: 0.95rem; color: var(--ink); margin-bottom: 0.5rem; }
.hero-proof a { color: var(--pine); }
/* ---------- hero top padding (index) ----------
   The partner rail was removed in QA18. It had sat above the header at 45px tall, and
   `.hero` reclaimed exactly that 45px so the page below it landed where the pre-rail page
   did. Deleting the rail and the reclaim together would have returned the hero to its
   original 5.5rem and given the 45px straight back to chrome nobody sees.

   So the reclaimed value is kept and simply addressed directly instead of through a
   sibling selector that no longer has a sibling. Nothing about the rendered hero changes
   from what has shipped since QA14 — but the 45px the rail occupied is now returned to the
   VIEWPORT, which lifts everything below it and puts R2's proof line above the fold at
   1366x768 for the first time. Scoped to index by class (partners.html never had a rail and
   keeps the full 5.5rem) and to >=901px because the mobile hero already uses a smaller
   padding. */
@media (min-width: 901px) {
  .hero-tight { padding-top: calc(5.5rem - 45px); }
}

/* Authored AFTER `.hero` on purpose. `.hero { padding: ... }` is a SHORTHAND and carries
   the same specificity as `.hero-tight`, so source order is the only thing that decides
   which padding-top survives. The first version of this rule sat above `.hero`, lost
   silently, and measured byte-identical to the pre-change page — a class that is present,
   valid, and doing nothing. */

@media (max-width: 900px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero .container { grid-template-columns: 1fr; gap: 3rem; }
}

/* ---------- signature: the questionnaire card ---------- */

.q-card {
  /* the brightest element on first view: pure white on cream, with a
     slightly deeper soft shadow than the standard card */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(22, 33, 28, 0.08), 0 20px 48px rgba(22, 33, 28, 0.13);
  padding: 2rem 2rem 2.4rem;
  position: relative;
  max-width: 460px;
  justify-self: end;
}
@media (max-width: 900px) { .q-card { justify-self: start; } }

.q-card-head {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0.8rem; margin-bottom: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem;
}
.q-question {
  font-family: var(--font-display);
  font-size: 1.18rem; line-height: 1.4; font-weight: 500;
  margin-bottom: 1.3rem;
}
.q-question .q-num { color: var(--brass); font-family: var(--font-mono); font-size: 0.85rem; margin-right: 0.5rem; }

.q-options { display: flex; gap: 2rem; margin-bottom: 1.4rem; }
.q-option { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.q-box {
  width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--ink-soft); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
}
.q-box svg { width: 15px; height: 15px; }
.q-box svg path {
  stroke: var(--pine); stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: draw-check 0.45s ease forwards 0.8s;
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .q-box svg path { stroke-dashoffset: 0; } }

.q-attach {
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6;
  color: var(--pine);
  background: var(--pine-wash);
  border-left: 3px solid var(--pine);
  padding: 0.7rem 0.9rem;
}

/* The hero's one orchestrated moment: the checkbox ticks "Yes" (0.8s),
   then the ON FILE stamp presses down — scale 1.15 -> 1 with a slight
   rotation settle and a soft shadow pulse at contact. */
.stamp {
  position: absolute; right: -26px; bottom: -30px;
  width: 139px; height: 139px; /* +5% presence per design pass */
  transform: rotate(-9deg);
  opacity: 0;
  animation: stamp-press 0.55s cubic-bezier(0.3, 1.15, 0.4, 1) forwards 1.5s;
  pointer-events: none;
}
@keyframes stamp-press {
  0%   { opacity: 0; transform: rotate(-12.5deg) scale(1.15); filter: drop-shadow(0 12px 20px rgba(22, 33, 28, 0)); }
  55%  { opacity: 1; transform: rotate(-8.5deg) scale(0.985); filter: drop-shadow(0 5px 12px rgba(22, 33, 28, 0.32)); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); filter: drop-shadow(0 2px 5px rgba(22, 33, 28, 0.16)); }
}
@media (prefers-reduced-motion: reduce) { .stamp { opacity: 1; } }
@media (max-width: 520px) { .stamp { right: -10px; bottom: -26px; width: 113px; height: 113px; } }

/* ---------- sections ---------- */

.section { padding: 5rem 0; }
.section-tint { background: var(--mist); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 620px; margin-bottom: 3rem; }
.section-head h2 { margin-bottom: 0.9rem; }
@media (max-width: 760px) { .section { padding: 3.5rem 0; } }

/* ---------- evidence register (ledger) ---------- */

.register { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.register-caption {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--line); background: var(--mist);
  display: flex; justify-content: space-between; gap: 1rem;
}
.register-row {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 1.5rem; align-items: baseline;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.register-row:last-child { border-bottom: none; }
.register-ref { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brass); }
.register-row h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; }
.register-row p { color: var(--ink-soft); font-size: 0.95rem; max-width: 46em; }
.register-tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pine); background: var(--pine-wash);
  padding: 0.25rem 0.6rem; border-radius: 3px; white-space: nowrap;
}
@media (max-width: 640px) {
  .register-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .register-tag { justify-self: start; }
}

.footnote {
  font-size: 0.85rem; color: var(--ink-soft);
  border-left: 2px solid var(--brass-soft);
  padding-left: 0.9rem; margin-top: 1.4rem; max-width: 52em;
}

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.step-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--brass); display: block; margin-bottom: 0.9rem; }
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------- versus free ---------- */

.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  min-width: 560px;
}
.compare th, .compare td { padding: 1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.compare thead th { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--mist); border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td:first-child { font-weight: 600; width: 34%; }
.compare .yes { color: var(--pine); font-weight: 700; }
.compare .no { color: var(--ink-soft); }

/* ---------- pricing ---------- */

.price-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  max-width: 660px; margin: 0 auto; overflow: hidden;
}
.price-head { padding: 2.2rem 2.5rem 1.8rem; border-bottom: 1px solid var(--line-soft); }
.price-figure { font-family: var(--font-display); font-size: 3rem; font-weight: 500; line-height: 1; }
.price-figure .per { font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); font-weight: 400; }
.price-body { padding: 1.8rem 2.5rem 2.4rem; }
.price-body ul { list-style: none; margin-bottom: 1.8rem; }
.price-body li { padding: 0.45rem 0 0.45rem 1.9rem; position: relative; }
.price-body li::before {
  content: ""; position: absolute; left: 0; top: 0.78rem;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--pine); border-bottom: 2.5px solid var(--pine);
  transform: rotate(-45deg);
}

.terms-box {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem;
  font-size: 0.9rem; color: var(--ink-soft);
  margin-top: 1.6rem;
}
.terms-box strong { color: var(--ink); }
.terms-box ul { list-style: none; }
.terms-box li { padding: 0.22rem 0 0.22rem 1.4rem; position: relative; }
/* QA17. Two things were wrong here and only one of them was the em dash.
   The terms box sits INSIDE .price-body, so `.price-body li::before` also matched
   these items and contributed a 14x8 box with 2.5px pine left/bottom borders and
   `transform: rotate(-45deg)` — a tick. The old rule set only `content: "—"` and a
   brass colour, so what actually rendered was a ROTATED em dash colliding with an
   inherited pine tick: never the clean dash the source implied, and a tick beside
   "No warranty of insurance or audit outcomes" reads as if the absence of a
   warranty were a feature.
   So this resets the inherited geometry explicitly rather than partially
   overriding it, and draws one deliberate brass rule. Terms are not features. */
.terms-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.62rem;
  height: 1px;
  border: 0;
  transform: none;
  background: var(--brass);
}

/* ---------- partner tiers ---------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: stretch; }
.tier { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; display: flex; flex-direction: column; }
.tier.featured { border-color: var(--pine); box-shadow: var(--shadow-card); position: relative; }
.tier-flag {
  position: absolute; top: -12px; left: 1.6rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--pine); color: #fff; padding: 0.25rem 0.7rem; border-radius: 3px;
}
.tier h3 { margin-bottom: 0.3rem; }
.tier .price-figure { font-size: 2.2rem; margin: 0.6rem 0 0.2rem; }
.tier .tier-sub { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.tier ul { list-style: none; margin-bottom: 1.4rem; flex: 1; }
.tier li { padding: 0.32rem 0 0.32rem 1.5rem; position: relative; font-size: 0.95rem; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 0.68rem;
  width: 12px; height: 7px;
  border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine);
  transform: rotate(-45deg);
}
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

.slots {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--brass);
}

/* ---------- E&O / liability box ---------- */

.liability-box {
  border: 1.5px solid var(--pine);
  border-radius: var(--radius);
  background: var(--white);
  padding: 2rem 2.2rem;
  max-width: 760px;
}
.liability-box h3 { color: var(--pine-deep); margin-bottom: 0.8rem; }
.liability-box p + p { margin-top: 0.8rem; }

/* ---------- audience split cards ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.split-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; }
.split-card .eyebrow { margin-bottom: 0.6rem; }
.split-card h3 { margin-bottom: 0.9rem; font-size: 1.35rem; font-family: var(--font-display); font-weight: 600; }
.split-card ul { list-style: none; }
.split-card li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; font-size: 0.97rem; }
.split-card li::before {
  content: ""; position: absolute; left: 0; top: 0.75rem;
  width: 12px; height: 7px;
  border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine);
  transform: rotate(-45deg);
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-weight: 600; font-size: 1.05rem;
  padding: 1.2rem 2.2rem 1.2rem 0;
  cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 1.2rem; color: var(--brass);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1.3rem; color: var(--ink-soft); max-width: 60em; }
.faq details p + p { margin-top: -0.5rem; }

/* ---------- CTA band ---------- */

/* ONE definition of "dark band", shared by the closing CTA and the partner section
   (QA18). The partner section was rebuilt onto this pattern rather than given a surface
   of its own: dark pine is how this page already marks a band that addresses a different
   moment, and reusing the rule means the two can never drift apart. */
.cta-band,
.partner-section { background: var(--pine-deep); color: var(--paper); padding: 4.5rem 0; }
.cta-band h2,
.partner-section h2 { color: #fff; margin-bottom: 0.8rem; }
.cta-band p { color: rgba(251, 251, 248, 0.75); max-width: 36em; margin-bottom: 1.8rem; }
.cta-band .hero-fine { color: rgba(251, 251, 248, 0.6); margin-top: 1rem; }

/* The partner section's head only. Scoped to .section-head deliberately: `.cta-band p`
   is an element selector and would otherwise beat `.price-figure` and `.muted` inside the
   white price card, turning the price into translucent paper on white. The dark-surface
   values follow this stylesheet's own conventions: paper for a mono label (as
   .site-footer h4 does) and 0.75 paper for body copy (as .cta-band p does). The eyebrow
   rule replaces --line, whose job on cream is a hairline just barely visible against the
   page; 0.28 paper is the alpha that reproduces that weight on pine-deep. Checked against
   the rendered page, not picked from the file: at the footer's 0.12 the rule disappears at
   1px, and at .btn-ghost-dark's 0.55 it reads as a border rather than a hairline. */
.partner-section .section-head .eyebrow { color: var(--paper); }
.partner-section .section-head .eyebrow::after { background: rgba(251, 251, 248, 0.28); }
.partner-section .section-head .lede { color: rgba(251, 251, 248, 0.75); }

/* 🔴 The price card is a LIGHT ISLAND on a dark band, and it has to say so.
   The shared dark-band rule sets `color: var(--paper)` on the section, which the closing
   CTA band can do safely because everything inside it sits on dark. This section contains
   a WHITE .price-card, so that paper colour was inherited straight onto white: the $399
   figure and all three list items rendered at 1.03:1, i.e. invisible.
   Caught by axe on the rendered page, NOT by verify-design — a palette gate checks token
   PAIRS and cannot see what inherits onto what. Same family as QA17's rotated dash: the
   stylesheet read correctly and the page was wrong. */
.partner-section .price-card { color: var(--ink); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--pine-deep); color: rgba(251, 251, 248, 0.7);
  padding: 3.5rem 0 2.5rem; font-size: 0.9rem;
  border-top: 1px solid rgba(251, 251, 248, 0.12);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.site-footer h4 { color: var(--paper); font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9rem; font-weight: 500; }
.site-footer a { color: rgba(251, 251, 248, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; }
.site-footer li { padding: 0.22rem 0; }
.footer-legal {
  border-top: 1px solid rgba(251, 251, 248, 0.15);
  padding-top: 1.6rem; font-size: 0.8rem; line-height: 1.7;
  color: rgba(251, 251, 248, 0.55);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- utilities ---------- */

.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.center { text-align: center; }

/* ---------- sample module video embed ---------- */

.sample-video { max-width: 860px; margin: 0 auto; }
.sample-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--pine-deep);
  box-shadow: var(--shadow-card);
}
.sample-cap {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}
.sample-cap a { font-weight: 600; }

/* ---------- micro-interactions (motion.js adds the classes) ---------- */

/* Sections fade up 12px on first scroll into view — once, below-fold only.
   motion.js skips everything when prefers-reduced-motion is set, and the
   global reduced-motion guard at the top of this file backstops it. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* Video poster: subtle play-button pulse on hover only; motion.js hides
   the badge permanently once playback has started. */
.sample-video { position: relative; }
.sample-video::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 86px; height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5 L17.5 12 L9 17.5 Z' fill='%23FBFBF8'/%3E%3C/svg%3E") center/38px no-repeat,
    rgba(18, 51, 43, 0.82);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.sample-video:hover::after { opacity: 1; animation: play-pulse 1.6s ease-in-out infinite; }
.sample-video.started::after { display: none; }
@keyframes play-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-video:hover::after { animation: none; }
}

/* ---------- module lineup ---------- */

.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.6rem; max-width: 880px; }
.module-item {
  display: flex; align-items: baseline; gap: 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
}
.module-num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brass); flex: none; width: 1.2rem; }
.module-item .t { font-weight: 600; }
.module-item .sample-tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pine); background: var(--pine-wash);
  padding: 0.2rem 0.55rem; border-radius: 3px; margin-left: auto; white-space: nowrap;
  text-decoration: none;
}
.module-item .sample-tag:hover { background: var(--pine); color: #fff; }
.module-item.is-sample { border-color: var(--pine); }
@media (max-width: 720px) { .modules { grid-template-columns: 1fr; } }

/* ---------- what-you-receive walkthrough ---------- */

.walk { display: flex; flex-direction: column; gap: 1.1rem; max-width: 880px; }
.walk-step {
  display: grid; grid-template-columns: 3.2rem 1fr 240px;
  gap: 1.4rem; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
}
.walk-num {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--brass);
  border: 1.5px solid var(--brass-soft); border-radius: 50%;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
}
.walk-step h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.25rem; }
.walk-step p { font-size: 0.93rem; color: var(--ink-soft); }
.walk-step p a { font-weight: 600; }
.walk-thumb { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.walk-thumb img { display: block; width: 100%; height: auto; }
.walk-thumb:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22, 33, 28, 0.14); }
@media (max-width: 720px) {
  .walk-step { grid-template-columns: 2.6rem 1fr; }
  .walk-thumb { grid-column: 2; max-width: 300px; }
}

/* ---------- card breathing (modules, steps, walkthrough) ---------- */

.module-item, .step, .walk-step {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.module-item:hover, .step:hover, .walk-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22, 33, 28, 0.10);
}
.module-item { cursor: pointer; position: relative; }

/* click feedback on locked modules 1-7: a brief stamp-tag (motion.js
   removes it after 1.5s; base styles are visible so reduced-motion
   users still see the message, just without the stamp-in/out) */
.locked-tag {
  position: absolute;
  right: 0.9rem; top: 50%;
  transform: translateY(-50%) rotate(-2deg);
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass);
  border: 1.5px solid var(--brass-soft);
  border-radius: 4px;
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  pointer-events: none;
  animation: locked-in 1.5s ease forwards;
}
@keyframes locked-in {
  0%   { opacity: 0; transform: translateY(-50%) rotate(-2deg) scale(1.12); }
  14%  { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* module 8 click: highlight pulse on the sample video */
.sample-video.pulse {
  border-radius: var(--radius);
  animation: sample-pulse 1.6s ease;
}
@keyframes sample-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 75, 63, 0); }
  30% { box-shadow: 0 0 0 7px rgba(30, 75, 63, 0.35); }
  70% { box-shadow: 0 0 0 4px rgba(138, 100, 32, 0.28); }
}

/* The pre-launch placeholder modal was retired 2026-07-27 when checkout went
   live (DECISIONS #74). Its markup no longer exists; an unconfigured link is
   now unwrapped to plain text by config.js instead of opening a dialog that
   would tell a buyer, mid-click, that payment "switches on at launch". */

/* ============================================================
   THE DOSSIER — final polish pass (design frozen after this).
   Everything below draws from insurance paperwork: ledgers,
   form sections, stamps, filing. Letterpress-and-archive.
   ============================================================ */

/* ---------- paper materiality ---------- */
/* near-invisible grain: inline SVG turbulence, ~600 bytes, 3% alpha */
body, .section-tint {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* a hair of letterpress depth on the display serif (light pages only) */
h1, h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.cta-band h2 { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }

/* ---------- form-section numbering ---------- */
.section-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.section-head .eyebrow::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 1px;
  background: var(--line);
}

/* ---------- the ledger (evidence register) ---------- */
.register { box-shadow: none; }
.register-row {
  padding: 1.5rem;
  padding-right: 3.6rem;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.register-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 33, 28, 0.08);
  z-index: 1;
}
/* the small brass tick that stamps in at the row's end on hover */
.register-row::after {
  content: "";
  position: absolute;
  right: 0.95rem; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11.5' fill='none' stroke='%238A6420' stroke-width='1.8'/%3E%3Cpath d='M8.5 13.4 L12 16.6 L18 9.6' fill='none' stroke='%238A6420' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0;
  transform: scale(1.3) rotate(-8deg);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.register-row:hover::after {
  opacity: 1;
  transform: scale(1) rotate(-8deg);
}
/* classification tags become stamped marks */
.register-tag {
  background: transparent;
  border: 1.5px solid var(--pine);
  color: var(--pine);
  letter-spacing: 0.12em;
  padding: 0.28rem 0.65rem;
  border-radius: 3px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
/* tags never change text or width — on hover they simply fill solid
   (white on pine, 9.8:1); the row's cursor + tick + hint line carry the
   "click to view the sample" message */
a.register-row { cursor: pointer; }
/* §QA14(c), R2: this is the most persuasive interaction on the site — every row opens a real
   watermarked sample before payment, which no comparable vendor offers — and it was signalled
   only by a cursor, a hover fill and one hint line below the ledger. The title now carries a
   standing underline so the rows READ as links before anything is hovered. Underline offset and
   colour are the ones the site already uses for in-text links; no new token, no layout shift,
   and nothing moves on hover, which is the constraint the tag rule exists to protect. */
a.register-row h3 {
  text-decoration: underline;
  text-decoration-color: var(--brass-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.register-row:hover h3,
a.register-row:focus-visible h3 { text-decoration-color: var(--pine); }
a.register-row:hover .register-tag {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}
.register-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.8rem;
}

/* ---------- module numerals: oversized serif anchors ---------- */
.module-item { align-items: center; gap: 1.1rem; padding: 0.85rem 1.2rem; }
.module-num {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 500;
  color: var(--pine);
  width: 3.1rem;
  line-height: 1;
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- document footer ---------- */
.site-footer { border-top: 4px double rgba(251, 251, 248, 0.35); }
.footer-ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: rgba(251, 251, 248, 0.55); /* 5.08:1 on pine-deep — AA for small text */
  border-bottom: 1px solid rgba(251, 251, 248, 0.15);
  padding-bottom: 1.2rem;
  margin-bottom: 2.2rem;
}

/* ---------- QA2 bugfix pass (2026-07-26) — accessibility + mobile, no visual redesign ---------- */

/* module lineup: stack to one column on narrow phones (was 2-col overflow at 390px) */
@media (max-width: 560px) { .modules { grid-template-columns: 1fr; } }
.module-item { min-width: 0; }
/* the module-8 sample tag was overflowing its card (and the page) on narrow screens */
@media (max-width: 900px) {
  .module-item { flex-wrap: wrap; }
  .module-item .sample-tag { margin-left: 2.2rem; }
}

/* hairline horizontal-overflow guard on small screens */
body { overflow-x: clip; }

/* header CTA on partners: .nav a's ink color was overriding .btn-primary's white text */
.nav a.btn-primary { color: #fff; }
.nav a.btn-primary:hover { color: #fff; }

/* WCAG 1.4.1: links inside running text distinguishable without relying on color */
p a:not(.btn), li a:not(.btn), .footer-legal a, .hero-fine a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}