/* Theory Media — shared design system, paper identity. Every page loads this
   after base.css. Masthead, footer, the pinned-act mechanics, and every
   reusable content component (charts, stats, the chain, lanes, proof, close,
   CTA, badges, reveal). Page-unique act CONTENT lives in that page's own CSS
   file, loaded after this one (home.css, ai-check.css). */

/* ============ Masthead ============
   Always ink: a dark editorial masthead over both stages, like a newspaper's. */

.tm-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(14,19,24,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236,237,236,0.1);
}
.tm-nav__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-6); }
.tm-nav__mark { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: .02em; color: var(--paper); white-space: nowrap; }
.tm-nav__mark-a { font-weight: 800; }
.tm-nav__mark-b { font-weight: 500; }
.tm-nav__mark-dot { color: var(--slope); font-weight: 800; }
.tm-nav__links { display: none; align-items: center; gap: clamp(var(--space-4),2vw,var(--space-8));
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.tm-nav__links a { color: var(--slope); padding-block: var(--space-2); border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-entrance), border-color var(--dur-fast) var(--ease-entrance); }
.tm-nav__links a:hover { color: var(--paper); border-bottom-color: var(--paper); }
.tm-nav__links a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--paper); }
.tm-nav__check { display: none; font-family: var(--font-label); font-size: var(--text-caption);
  font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink); background: var(--paper); border-radius: var(--radius-round);
  padding: var(--space-2) var(--space-5);
  transition: background var(--dur-fast) var(--ease-entrance); }
.tm-nav__check:hover { background: #fff; }
@media (min-width: 980px) { .tm-nav__links { display: flex; } .tm-nav__check { display: inline-flex; } }
.tm-nav__toggle { display: inline-flex; background: none; border: none; padding: var(--space-2);
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (min-width: 980px) { .tm-nav__toggle { display: none; } }
.tm-nav__toggle span, .tm-nav__toggle span::before, .tm-nav__toggle span::after {
  display: block; width: 22px; height: 2px; background: var(--paper); position: relative; }
.tm-nav__toggle span::before, .tm-nav__toggle span::after { content: ""; position: absolute; }
.tm-nav__toggle span::before { top: -7px; } .tm-nav__toggle span::after { top: 7px; }
.tm-nav__mobile { display: none; flex-direction: column; padding: var(--space-4) var(--container-pad) var(--space-8);
  background: var(--ink); border-bottom: 1px solid rgba(236,237,236,0.1); }
.tm-nav__mobile[data-open="true"] { display: flex; }
.tm-nav__mobile a { font-family: var(--font-label); font-size: var(--text-body); font-weight: 600;
  color: var(--paper); padding: var(--space-3) 0; border-bottom: 1px solid rgba(236,237,236,0.1); }
@media (min-width: 980px) { .tm-nav__mobile { display: none !important; } }

/* Reading progress — scroll-driven, pure CSS, degrades to nothing. */
@supports (animation-timeline: scroll()) {
  .tm-nav::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    background: var(--logo);
    transform-origin: left center; transform: scaleX(0);
    animation: nav-progress linear forwards;
    animation-timeline: scroll(root);
  }
  @keyframes nav-progress { to { transform: scaleX(1); } }
}

/* ============ Pinned scroll acts (shared mechanics) ============
   Each act is a tall .act-wrap holding a position:sticky .act; main.js writes
   one --p (0..1) per act per frame; elements map a slice via --from/--to and
   animate off the resulting --sub. */

.act-wrap { position: relative; height: var(--travel, 240svh); }
.act {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ink);
}
/* A lit act: pinned choreography on the paper field. (.act's ink background
   would otherwise win the cascade over .stage-lit.) */
.act.stage-lit { background: var(--paper); }
[data-sub] {
  --from: 0; --to: 1;
  --sub: clamp(0, calc((var(--p, 0) - var(--from)) / (var(--to) - var(--from))), 1);
}
.rise { opacity: var(--sub); transform: translate3d(0, calc((1 - var(--sub)) * 32px), 0); }
.pop  { opacity: var(--sub); transform: scale(calc(0.94 + (0.06 * var(--sub)))); }
.fade { opacity: var(--sub); }

.act__stage {
  position: relative; z-index: 2; width: 100%;
  padding-inline: var(--container-pad);
  max-width: var(--container-max); margin-inline: auto;
}
/* Colorless vignette: depth without chroma. */
.act__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 78% 4%, rgba(38,46,54,0.75), transparent 60%),
    radial-gradient(ellipse 95% 65% at 8% 104%, rgba(8,11,14,0.9), transparent 62%);
}
.act__topline {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: var(--space-8) var(--container-pad) 0;
  display: flex; justify-content: space-between; gap: var(--space-4);
}
.act__topline .tm-eyebrow { color: var(--slope); }
.act__locale { text-align: right; }
.tm-clock { font-variant-numeric: tabular-nums; color: var(--paper); }

.act__cue {
  position: absolute; bottom: var(--space-8); left: 0; right: 0; z-index: 3;
  padding-inline: var(--container-pad);
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate);
  opacity: calc(1 - (var(--p, 0) * 2.5));
}
.act__cue::before { content: ""; width: 40px; height: 1px; background: var(--slate); }

/* ============ Section furniture ============ */

.sec-head { max-width: 62ch; display: grid; gap: var(--space-6); margin-bottom: var(--space-16); }

/* Inside a pinned act: tighter, and the headline a step smaller. */
.sec-head--act { margin-bottom: var(--space-8); }
.sec-head--act h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.75rem); }

/* First-fold load-in for act content that must not wait for scroll. */
@keyframes tm-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.tm-in { opacity: 0; animation: tm-in 0.85s var(--ease-entrance) forwards; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .tm-in { opacity: 1; animation: none; } }
.no-js .tm-in { opacity: 1; animation: none; }

/* Staged step list — a dark act's numbered beats (lv's "three answers",
   growth's "three guesses"). Steps carry data-sub windows in the markup. */
.decide { display: grid; gap: var(--space-4); max-width: 760px; margin-top: var(--space-6); }
/* Pillars — promoted from local-visibility.css (2026-08-06) when the five
   industry landers became their second users. local-visibility.css keeps its
   identical copy untouched; the definitions match, so the cascade is a no-op
   on that page. */
.pillars { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.pillar__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  color: var(--logo); letter-spacing: var(--tracking-wide); }
.pillar h3 { font-size: var(--text-h3); color: var(--ink); }
.pillar p { font-size: var(--text-small); color: var(--body-ink); }
.pillar p + p { margin-top: var(--space-2); }

/* Act payoff line — promoted from local-visibility's .lv-payoff (2026-08-05)
   when the three offer pages became its second, third, and fourth users.
   .lv-payoff remains in local-visibility.css untouched. */
.act-payoff { margin-top: var(--space-6); font-size: var(--text-body); color: var(--paper); max-width: 54ch; font-weight: 500; }
.act-payoff strong { font-weight: 800; }
.act.stage-lit .act-payoff { color: var(--ink); }
.decide__step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  align-items: baseline; padding-top: var(--space-4); border-top: 1px solid rgba(236,237,236,0.14);
}
.decide__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  color: var(--slate); font-variant-numeric: tabular-nums; }
.decide__step h3 { font-size: var(--text-h4); color: var(--paper); }
.decide__step p { margin-top: var(--space-1); font-size: var(--text-small); color: var(--slope); line-height: var(--leading-snug); }

/* The pricing ladder — rung cards, the lead rung carrying the logo note. */
.ladder { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.rung {
  display: grid; gap: var(--space-2) var(--space-8); align-items: center;
  padding: var(--space-8); border-radius: 16px;
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
@media (min-width: 760px) { .rung { grid-template-columns: auto 1fr auto; gap: var(--space-8); } }
.rung--lead { border-color: var(--logo); box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent); }
.rung__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.rung--lead .rung__n { color: var(--logo); }
.rung__body h3 { font-size: var(--text-h3); color: var(--ink); margin-top: var(--space-1); }
.rung__body p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); max-width: 56ch; }
.rung__price { text-align: left; }
@media (min-width: 760px) { .rung__price { text-align: right; } }
.rung__amt {
  font-family: var(--font-label); font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); color: var(--ink); line-height: 1;
}
.rung__per { font-size: var(--text-caption); color: var(--label-ink); display: block; margin-top: var(--space-1); }
.rung__cta { margin-top: var(--space-4); }
@media (min-width: 760px) { .rung__cta { justify-self: end; } }
.ladder__foot { margin-top: var(--space-8); font-size: var(--text-small); color: var(--label-ink); max-width: 68ch; }
.ladder__foot a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }

/* An aside worth a box: the honest caveat, logo-tinted. */
.tm-note {
  margin-top: var(--space-12); padding: var(--space-6); border-radius: 12px;
  background: color-mix(in srgb, var(--logo) 6%, transparent);
  border-left: 2px solid var(--logo);
}
.tm-note__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.tm-note p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); max-width: 68ch; }
.tm-note a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }

.tm-kicker { display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.tm-kicker::before { content: attr(data-n) " \2014"; color: var(--logo); font-variant-numeric: tabular-nums; }
.stage-dark .tm-kicker { color: var(--slate); }
.stage-dark .tm-kicker::before { color: var(--slate); }   /* colorless in the dark */

.tm-reveal { opacity: 0; transform: translate3d(0,24px,0);
  transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance); }
.tm-reveal.is-in { opacity: 1; transform: none; }

.tm-badge { display: inline-flex; align-items: center; font-family: var(--font-label);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; padding: 3px var(--space-3); border-radius: var(--radius-round);
  border: 1px solid currentColor; }
.tm-badge--verified { color: var(--good); }
.tm-badge--reasoned { color: var(--mid); }
.tm-badge--illustrative { color: var(--label-ink); }

.tm-arrow { display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  padding-bottom: 3px; border-bottom: 1px solid var(--slate);
  transition: border-color var(--dur-fast) var(--ease-entrance), color var(--dur-fast) var(--ease-entrance); }
.tm-arrow::after { content: "\2192"; font-weight: 400; transition: transform var(--dur-fast) var(--ease-entrance); }
.tm-arrow:hover { border-color: var(--logo); color: var(--logo); }
.tm-arrow:hover::after { transform: translateX(4px); }
.stage-dark .tm-arrow, .tm-dark-panel .tm-arrow { color: var(--paper); }
.stage-dark .tm-arrow:hover, .tm-dark-panel .tm-arrow:hover { color: #fff; border-color: var(--paper); }

/* The letterpress button: ink on paper, paper on ink. */
.tm-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: var(--text-body-lg);
  padding: var(--space-4) var(--space-8); border-radius: var(--radius-round);
  box-shadow: 0 14px 40px rgba(14,19,24,0.28);
  transition: transform var(--dur-fast) var(--ease-entrance), box-shadow var(--dur-fast) var(--ease-entrance), background var(--dur-fast) var(--ease-entrance);
}
.tm-cta:hover { transform: translateY(-2px); background: var(--charcoal); box-shadow: 0 20px 50px rgba(14,19,24,0.36); }
.tm-cta::after { content: "\2192"; }
.stage-dark .tm-cta { background: var(--paper); color: var(--ink); box-shadow: 0 14px 50px rgba(0,0,0,0.5); }
.stage-dark .tm-cta:hover { background: #fff; }

/* ============ Stats ============ */

.stats { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { display: grid; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid rgba(14,19,24,0.18); }
.stat__fig {
  font-family: var(--font-label); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink);
}
.stat__label { color: var(--body-ink); font-size: var(--text-small); max-width: 30ch; }
.stat__src { font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }

/* ============ Charts ============ */

.chart { display: grid; gap: var(--space-6); }
.chart__cap {
  font-family: var(--font-label); font-size: var(--text-caption);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.chart__foot { font-size: var(--text-small); color: var(--label-ink); max-width: 66ch; margin-top: var(--space-4); }

/* Ranked bars: competitors in pencil grey; the subject in ink. The subject is
   the darkest thing on the page — that is the entire chart argument. */
.sov { display: grid; gap: var(--space-3); }
.sov__row {
  display: grid; grid-template-columns: 150px 1fr 64px; gap: var(--space-4);
  align-items: center;
  font-family: var(--font-label); font-size: var(--text-small);
}
@media (max-width: 700px) { .sov__row { grid-template-columns: 110px 1fr 56px; gap: var(--space-3); font-size: var(--text-caption); } }
.sov__name { color: var(--label-ink); }
.sov__row--you .sov__name { color: var(--ink); font-weight: 700; }
.sov__track { height: 20px; background: rgba(14,19,24,0.06); border-radius: 6px; overflow: hidden; }
.sov__bar {
  display: block; width: 100%;
  height: 100%; border-radius: 6px; background: var(--mist);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease-instrument);
  transition-delay: var(--d, 0s);
}
.is-in .sov__bar { transform: scaleX(var(--w, 1)); }
.sov__row--you .sov__bar { background: var(--ink); }
.sov__val { text-align: right; color: var(--label-ink); font-variant-numeric: tabular-nums; }
.sov__row--you .sov__val { color: var(--ink); font-weight: 700; }

/* Dual-metric scan rows — one carded row per business, two bars each
   (map coverage / share / AI-named). The one green row marks "what strong
   looks like". Used by /local-visibility's scans and /proof's study. */
.scangrid { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.scanrow {
  display: grid; gap: var(--space-3);
  padding: var(--space-6); border-radius: 14px;
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.scanrow--strong { border-color: var(--good); box-shadow: 0 8px 30px color-mix(in srgb, var(--good) 12%, transparent); }
.scanrow__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.scanrow__id { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.scanrow--strong .scanrow__id { color: var(--good); }
.scanrow__metrics { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .scanrow__metrics { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.scanmetric { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--space-3); align-items: center; }
.scanmetric__lbl { font-family: var(--font-label); font-size: var(--text-caption); color: var(--label-ink); }
.scanmetric__track { height: 14px; background: rgba(14,19,24,0.06); border-radius: 5px; overflow: hidden; }
.scanmetric__bar { display: block; height: 100%; border-radius: 5px; background: var(--slope);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease-instrument); transition-delay: var(--d, 0s); }
.is-in .scanmetric__bar { transform: scaleX(var(--w, 1)); }
.scanrow--strong .scanmetric__bar { background: var(--good); }
.scanmetric__val { font-family: var(--font-label); font-size: var(--text-small); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.scanmetric__val--miss { color: var(--label-ink); font-weight: 500; }
.scanrow__read { font-size: var(--text-small); color: var(--body-ink); max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .scanmetric__bar { transform: scaleX(var(--w, 1)); } }
.no-js .scanmetric__bar { transform: scaleX(var(--w, 1)); }

/* Trajectory: ink line, the logo note marks the live end. */
.traj { width: 100%; }
.traj__grid line { stroke: rgba(14,19,24,0.1); stroke-width: 1; }
.traj__axis { font-family: var(--font-label); font-size: 11px; fill: var(--label-ink); }
.traj__end { font-family: var(--font-label); font-size: 13px; font-weight: 700; fill: var(--logo); }
.traj__area { fill: var(--logo); opacity: 0; transition: opacity .7s var(--ease-fade) .9s; }
.is-in .traj__area { opacity: 0.09; }
.traj__line {
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s linear;
}
.is-in .traj__line { stroke-dashoffset: 0; }
.traj__dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; opacity: 0;
  transition: opacity .3s var(--ease-entrance); }
.is-in .traj__dot { opacity: 1; }
.traj__dot--end { fill: var(--logo); stroke: var(--logo); }

/* ============ The collapse pair ============ */

.pair { display: grid; gap: var(--space-12); }
@media (min-width: 800px) { .pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-24); } }
.pair__side { display: grid; gap: var(--space-2); align-content: start; }
.pair__label { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.pair__fig {
  font-family: var(--font-label); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: var(--text-fig); line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  display: inline-block; min-width: 3.6em; text-align: left; contain: layout;
}
.pair__fig--out { color: var(--logo); }
.pair__note { font-size: var(--text-small); color: var(--label-ink); }
.ratio { margin-top: var(--space-12); font-size: clamp(1.4rem,1.1rem + 1.4vw,2.2rem);
  font-weight: 800; color: var(--ink); letter-spacing: var(--tracking-tight); max-width: 24ch; }
.ratio em { font-style: normal; color: var(--logo); }

.foot { margin-top: var(--space-12); }
.foot__note { margin-top: var(--space-3); color: var(--label-ink); font-size: var(--text-small); max-width: 64ch; }

/* ============ The Chain ============ */

.chain__band { display: grid; gap: var(--space-12); }
@media (min-width: 900px) { .chain__band { grid-template-columns: repeat(4,1fr); gap: var(--space-8); } }
.tm-link { position: relative; padding-top: var(--space-6); border-top: 1px solid var(--slate); }
.tm-link__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--logo); font-variant-numeric: tabular-nums; }
.tm-link h3 { font-size: var(--text-h3); margin-block: var(--space-2) var(--space-4); color: var(--ink); }
.tm-link p { font-size: var(--text-small); color: var(--body-ink); }
.chain__after { margin-top: var(--space-16); }
.chain__after .tm-eyebrow { color: var(--label-ink); }

/* The fracture: reads unbroken on arrival, breaks as you scroll past. --p is
   written by main.js off [data-scrub]; static contexts get 1. */
.tm-link--fractured { border-top: none; --p: 1; }
.tm-link--fractured::before, .tm-link--fractured::after {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--slate);
}
.tm-link--fractured::before { left: 0; width: calc(42% - 9px);
  transform: translateX(calc(9px * (1 - var(--p)))); }
.tm-link--fractured::after { right: 0; width: calc(58% - 9px); transform-origin: left center;
  transform: translateX(calc(-9px * (1 - var(--p))))
             translateY(calc(4px * var(--p)))
             rotate(calc(-1.6deg * var(--p))); }

/* ============ Service lanes ============ */

.lanes { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .lanes { grid-template-columns: 1fr 1fr; } }
.lane {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
  border-radius: 16px; padding: var(--space-8);
  display: grid; gap: var(--space-5); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
  transition: transform var(--dur-fast) var(--ease-entrance), border-color var(--dur-fast) var(--ease-entrance), box-shadow var(--dur-fast) var(--ease-entrance);
}
.lane:hover { transform: translateY(-4px); border-color: var(--logo); box-shadow: 0 18px 44px rgba(14,19,24,0.1); }
.lane__more { margin-top: var(--space-2); }
.lane__tag { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.lane h3 { font-size: var(--text-h3); color: var(--ink); }
.lane p { color: var(--body-ink); font-size: var(--text-small); }
.lane__steps { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.lane__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: baseline; padding-top: var(--space-3); border-top: 1px solid rgba(14,19,24,0.1);
  font-size: var(--text-small); color: var(--body-ink); }
.lane__step-n { font-family: var(--font-label); font-size: var(--text-caption); color: var(--label-ink); }
.lane__step strong { color: var(--ink); }
.svc__pricing { margin-top: var(--space-12); color: var(--label-ink); font-size: var(--text-small); max-width: 62ch; }

/* ============ Proof / record / legend ============ */

.proof { display: grid; gap: var(--space-16); }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0,7fr) minmax(0,5fr); } }
.proof h2 { max-width: 14ch; margin-block: var(--space-2) var(--space-6); }
.proof p + p { margin-top: var(--space-4); }
.record { border: 1px solid rgba(14,19,24,0.12); border-radius: 12px; padding: var(--space-6);
  margin-block: var(--space-6); background: var(--card); font-family: var(--font-label); font-size: var(--text-small);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04); }
.record__label { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--label-ink); margin-bottom: var(--space-2); }
.record__entry { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--ink); font-weight: 600; }
.legend { display: grid; gap: var(--space-6); align-content: start; }
.legend__item { display: grid; gap: var(--space-2); padding-top: var(--space-4);
  border-top: 1px solid rgba(14,19,24,0.12); justify-items: start; }
.legend__item p { font-size: var(--text-small); color: var(--body-ink); max-width: 44ch; }

/* ============ FAQ (native details/summary, no JS) ============ */

.faq { display: grid; margin-top: var(--space-4); max-width: 860px; }
.faq details { border-top: 1px solid rgba(14,19,24,0.14); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-5) 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  font-size: var(--text-body-lg); font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-label); font-weight: 400; font-size: 1.4rem;
  color: var(--logo); flex: none; transition: transform var(--dur-fast) var(--ease-entrance);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-5); max-width: 68ch; }
.faq__a p { font-size: var(--text-small); color: var(--body-ink); }
.faq__a p + p { margin-top: var(--space-3); }

/* ============ Close — the dark bookend ============ */

.close { display: grid; gap: var(--space-8); }
.close h2 { max-width: 16ch; }
.close__lede { color: var(--slope); max-width: 54ch; }
.close__aside { font-size: var(--text-small); color: var(--slate); max-width: 52ch; }
.close__aside a { color: var(--paper); border-bottom: 1px solid var(--slate); }

/* ============ Footer ============ */

.tm-footer { background: var(--void); color: var(--slope); padding-block: var(--space-16) var(--space-8); }
.tm-footer__end { padding-bottom: var(--space-16); }
.tm-footer__endline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 4.5vw, 5.5rem);
  line-height: 1.05; letter-spacing: var(--tracking-tight);
  color: var(--paper); font-weight: 800; max-width: none;
}
.tm-footer__endline .plus { font-weight: 400; color: var(--slate); margin-inline: 0.18em; }
.tm-footer__endline .quiet { font-weight: 500; color: var(--slope); }
.tm-footer__top { display: grid; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(236,237,236,0.1); }
@media (min-width: 768px) { .tm-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.tm-footer__mark { font-family: var(--font-display); font-size: 1.25rem; color: var(--paper); }
.tm-footer__blurb { margin-top: var(--space-4); max-width: 36ch; }
.tm-footer h2 { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-4); }
.tm-footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.tm-footer__links a { color: var(--slope); }
.tm-footer__links a:hover { color: var(--paper); }
.tm-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-8); font-family: var(--font-label); font-size: var(--text-caption);
  color: var(--slate); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ============ Collapse: mobile, reduced motion, no JS (generic) ============
   Page-specific act content adds its own collapse rules in its own file. */

@media (max-width: 999px) {
  .act { height: auto; min-height: 100svh; padding-block: var(--space-24); position: relative; top: auto; }
  .act-wrap { height: auto; }
  [data-sub] { --sub: 1; }
  .act__cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .act-wrap { height: auto; }
  .act { position: relative; height: auto; min-height: 0; padding-block: var(--space-24); }
  [data-sub] { --sub: 1 !important; }
  .act__cue { display: none; }
  .tm-reveal { opacity: 1; transform: none; }
  .sov__bar { transform: scaleX(var(--w, 1)); }
  .traj__line { stroke-dashoffset: 0; }
  .traj__area { opacity: 0.09; }
  .traj__dot { opacity: 1; }
}

.no-js .act-wrap { height: auto; }
.no-js .act { position: relative; height: auto; min-height: 0; padding-block: var(--space-24); }
.no-js [data-sub] { --sub: 1 !important; }
.no-js .tm-reveal { opacity: 1; transform: none; }
.no-js .sov__bar { transform: scaleX(var(--w, 1)); }
.no-js .traj__line { stroke-dashoffset: 0; }
.no-js .traj__area { opacity: 0.09; }
.no-js .traj__dot { opacity: 1; }