/* /media, the sales page. Rebuilt 24 September 2026.
 *
 * Composes on tcs.css, base.css, v2.css (type, the 1160 wrapper, the section rhythm), louli.css
 * (character tints) and preview.css (the product frames). Everything page-specific lives here
 * rather than in an inline block, so it caches and so one file owns the page.
 *
 * SPACING HAS ONE OWNER. Every top-level section takes its vertical padding from --v2-gap, the
 * token the homepage and /experience already use, and nothing adds a margin on top of it. The
 * old page stacked tcs.css's `section{padding:clamp(48px,6vw,88px) 0}` under a local
 * `.o-sec{margin-top:56px}`, because the reset meant to cancel the first targeted `.c-wrap`, a
 * wrapper the page had stopped using. Measured at 1440: 229px of paper between every pair of
 * sections. Adjacent sections are now told apart by their ground (paper, then paper-2), which
 * lets the gap be a breath rather than a gulf. */

/* WHAT THIS PAGE TAKES FROM THE HOMEPAGE SYSTEM, WITHOUT LOADING v2.css.
 * The wrapper, the section rhythm token and the display type are the homepage's values, restated
 * for this page alone. Loading the whole 28KB homepage sheet for these rules put a seventh
 * render-blocking stylesheet in front of the first paint: measured at 390px on Slow 4G, LCP went
 * from 1996ms to 2928ms. If one of these values changes in v2.css, change it here too. */
:root { --v2-gap: clamp(56px, 8vh, 104px); }
.m { background: var(--paper); }
.m .wrap-v2 { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.m .eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin: 0 0 12px; }
.m h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.95rem, 3.9vw, 3rem); line-height: 1.07; letter-spacing: -.017em; margin: 0 0 14px; max-width: 20ch; }
.m p { color: var(--ink-2); }
.m .lede { font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 56ch; }
.v2-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.m .nav .btn { white-space: nowrap; }
@media (max-width: 880px) { :root { --v2-gap: 44px; } }
@media (max-width: 400px) { .m .nav .btn { padding: 10px 13px !important; font-size: .86rem !important; } }

.m main > section { padding: var(--v2-gap) 0; margin: 0; }
.m .m-band { background: var(--paper-2); }
.m h2 { margin-bottom: 12px; }
.m .m-head { max-width: 62ch; margin-bottom: clamp(24px, 3.4vw, 40px); }
.m .m-head .lede { margin: 0; }
.m h3 { letter-spacing: -.015em; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
/* Folded content on a phone is hidden="until-found": skipped, but reachable by find-in-page. Its
   own spacing collapses with it. */
[hidden="until-found"] { padding: 0 !important; margin: 0 !important; border: 0 !important; }

/* ---------------------------------------------------------------- hero */
.m main > .m-hero { padding-top: clamp(28px, 5vw, 64px); }
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.m-hero h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 4.3rem);
  line-height: 1.02; letter-spacing: -.02em; margin: 0 0 18px; max-width: 14ch; text-wrap: balance;
}
.m-hero .lede { max-width: 54ch; }

/* The price, compact. A measurement in the mono beside the sentence that qualifies it, never a
   panel: the old dark card was 579px tall and took 64% of the first screen at 1440 before the
   page had said what the product was. The full terms sit in the offer section, one click down. */
.m-price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center;
  margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); max-width: 560px; }
.m-price .o-price { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 0; }
.m-price .lede { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 46ch; }
.m-price.o-unavailable .o-price { font-size: 1.3rem; line-height: 1.2; font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.o-note { font-size: .9rem; color: var(--ink-2); margin: 12px 0 0; max-width: 56ch; }
.o-note:empty { display: none; }
.m-hero .v2-cta-row { margin-top: 20px; }
.m-fine { font-size: .84rem; color: var(--ink-3); margin: 12px 0 0; max-width: 56ch; }
.m-fine a { color: var(--ink-2); }

/* Two actions that must never be confused. Buying is the filled ink pill. The free case is an
   outlined pill with an arrow and the word "free" in its label, so the eye can tell them apart
   before it reads them. */
.m .btn-free { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.m .btn-free:hover { background: var(--paper-2); }
.m .btn-free::after { content: "\2192"; font-weight: 400; }

/* The desk: The Louli stands beside three case files from the edition. Real titles, set in the
   case typography, fanned on a floor in its own tint. The figure is the approved cutout, whole,
   untouched, standing on the floor line with a contact shadow, as louli.css requires. */
.m-desk { --tint: var(--lc-main); --floor: var(--lc-main-floor); --floor-at: 82%; aspect-ratio: 1 / 1; width: 100%; max-width: 480px; margin-left: auto; }
/* The figure stands clear of the files: its face is never under a card. */
.m-desk .lc-fig { height: 64%; right: 3%; }
.m-file { position: absolute; z-index: 2; width: 50%; left: 4%; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 12px 14px 14px; box-shadow: 0 1px 2px rgba(22,21,15,.06), 0 14px 28px -18px rgba(22,21,15,.45); }
.m-file span { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.m-file b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(.98rem, 1.5vw, 1.18rem); line-height: 1.15; color: var(--ink); }
.m-file:nth-child(1) { top: 7%; rotate: -3deg; }
.m-file:nth-child(2) { top: 31%; left: 8%; rotate: 2deg; }
.m-file:nth-child(3) { top: 56%; left: 3%; rotate: -1.5deg; }
/* The three files are real links, to the same cases' summaries further down this page, so the
   hero's most card-like objects do what they look like they do. */
a.m-file { display: block; text-decoration: none; color: var(--ink); transition: translate var(--t), box-shadow var(--t); }
a.m-file:hover { translate: 0 -3px; box-shadow: 0 1px 2px rgba(22,21,15,.08), 0 20px 34px -18px rgba(22,21,15,.5); }
a.m-file:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 12px; z-index: 3; }
.m-case { scroll-margin-top: 84px; }
/* On a phone the header scrolls away with the page, so a linked case lands near the top rather than
   under 160px of the case before it. */
@media (max-width: 760px) { .m-case { scroll-margin-top: 16px; } html:has(header.nav nav.sn) { scroll-padding-top: 0; } }

.m-facts { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2); }
.m-facts li { padding: 16px 18px 0 0; }
.m-facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.m-facts b { display: block; font-family: var(--mono); font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.m-facts span { display: block; font-size: .86rem; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }

/* ---------------------------------------------------------------- featured cases
   Five case files. Surface, border and a restrained lift separate each from the paper-2 band;
   inside, a register of labelled rows rather than boxes within boxes. The decision row is the
   only one given weight, because it is the thing the whole case turns on. */
.m-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.m-case { background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(22,21,15,.04), 0 18px 36px -30px rgba(22,21,15,.5); }
.m-case.is-lead { grid-column: span 2; }
.m-tags { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.m-tags .m-stage { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 3px 9px 2px; }
.m-case h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 14px; text-wrap: balance; }
.m-case dl { margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.m-case dl > .m-ask { grid-column: 1 / -1; }
.m-case.is-lead dl { grid-template-columns: 1fr 1fr 1fr; }
.m-case.is-lead dl > .m-ask { grid-column: auto; }
.m-case dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.m-case dd { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-2); }
.m-case .m-ask dd { color: var(--ink); font-weight: 600; font-size: 1rem; border-left: 3px solid var(--ink); padding-left: 12px; }
.m-case .m-skill { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.m-case .m-skill b { color: var(--ink); font-weight: 600; }
.m-cases-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; margin-top: 22px;
  padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.m-cases-foot p { margin: 0; max-width: 60ch; }
.m-cases-foot .v2-cta-row { margin: 0; }

.m-case-more { display: none; }
@media (max-width: 700px) {
  /* A folded case keeps its stage, its format, its title and its decision: enough to recognise
     it and to know what it asks. The situation, the constraint and the practice line fold away. */
  .m-case.is-folded dl { gap: 0; margin-bottom: 4px; }
  .m-case-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: 10px;
    padding: 0 16px; margin-bottom: 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
  .m-case-more::after { content: "+"; content: "+" / ""; font-weight: 400; font-size: 1.1rem; line-height: 1; }
  .m-case-more[aria-expanded="true"]::after { content: "\2212"; content: "\2212" / ""; }
  .m-case-more:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
}

/* ---------------------------------------------------------------- how a case works */
.m-how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.m-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.m-steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.m-steps li::before { content: counter(s); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper);
  font-size: .78rem; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.m-steps b { color: var(--ink); font-size: 1.02rem; }
.m-steps p { margin: 2px 0 0; font-size: .94rem; line-height: 1.5; }
.m-how .pv-frame { font-size: .88rem; }
.m-how .pv-body { padding: 18px 22px 20px; }
.m-frame-cap { font-size: .84rem; color: var(--ink-3); margin: 12px 0 0; max-width: 62ch; }
.m-frame-cap a { color: var(--ink); }
/* The specialist, as the product sets it: after the commit, beside its line. */
.pv-int[data-domain='performance'] .pv-face { --tint: var(--lc-slate); --floor: var(--lc-slate-floor); }
.pv-face { flex: 0 0 auto; width: 64px; height: 72px; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(to bottom, var(--tint) 0 80%, var(--floor) 80% 100%); }
.pv-int .pv-face img { position: absolute; left: 50%; bottom: 8%; height: 86%; width: auto; max-width: none; translate: -50% 0;
  border-radius: 0; box-shadow: none; background: none; }
.pv-int { margin-top: 16px; align-items: center; }
.pv-int .pv-q { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin: 0 0 2px; }
.pv-int p { font-size: .9rem; }

.m-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.m-kind { border-top: 2px solid var(--ink); padding-top: 14px; }
.m-kind .tag { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.m-kind b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }
.m-kind p { margin: 0; font-size: .92rem; line-height: 1.5; }
.m-kind em { font-style: normal; color: var(--ink); }

/* Which specialist speaks. Counted from the 37 case files, not estimated. */
.m-voices { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px 40px; align-items: center;
  padding: 22px; border-radius: 18px; background: var(--paper-2); }
.m-voices > p { margin: 0; font-size: .95rem; }
.m-voices > p b { color: var(--ink); }
.m-voices ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.m-voices li { display: grid; gap: 6px; text-align: center; font-size: .8rem; color: var(--ink-2); line-height: 1.3; }
.m-voices li b { display: block; font-family: var(--mono); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.m-voices .lm-face { border-radius: 12px; }
.m-voices .lm-operations .lm-face img { height: 40%; }

/* ---------------------------------------------------------------- all 37
   Five columns on a wide screen, every title visible. On a narrow one each stage is a
   disclosure, all open in the markup so a crawler and a visitor without script read every
   title; the page script closes all but the first below 700px. */
.o-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.o-stages > li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px 12px; }
.o-stage-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.o-stage-h b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); }
.o-stage-h em { font-style: normal; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.o-stage-w { display: block; margin: 8px 0 6px; color: var(--ink-3); font-size: .84rem; line-height: 1.4; }
.o-stages ul { list-style: none; padding: 0; margin: 0; }
.o-stages ul li { padding: 8px 0; font-size: .9rem; line-height: 1.35; color: var(--ink); border-top: 1px solid var(--line); }
.o-stages ul li:first-child { border-top: 0; }

/* ---------------------------------------------------------------- what you keep */
.m-keep { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.m-reg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.m-reg li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .94rem; line-height: 1.5; }
.m-reg b { color: var(--ink); font-weight: 600; }
.m-reg span { color: var(--ink-2); }
.m-reg li > span { max-width: 72ch; } /* L168: about 135 characters a line at 1440 before */
.m-artifacts { display: grid; gap: 16px; }
.m-artifacts .pv-frame { font-size: .86rem; }
/* Two frames side by side with the register leave no room for the wordmark beside the tabs.
   The mark stays; the words step aside, as the product bar does on a phone. */
.m-artifacts .pv-brand span { display: none; }
.m-artifacts .pv-body { padding: 16px 20px 18px; }
/* The certificate specimen, L155. Two things for it live here: the frame body's padding and the
   reset of the frame's tightened letter-spacing. The certificate brings its own edge, rules and
   padding, so the body gives it a thinner margin than the text frames get, because every pixel
   left is the container its stylesheet measures to choose a layout. The certificate itself is
   drawn by site/assets/certificate.css, the application's own sheet, which states its colours at
   a weight host rules cannot outrank, so this file's .m p does not grey its name. */
.m-artifacts .pv-body.m-cert-body { padding: 14px; letter-spacing: normal; }
#certificate { scroll-margin-top: 100px; }
.m-pb-fold > summary { display: none; }
@media (max-width: 700px) {
  .m-pb-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); font-weight: 600; cursor: pointer; list-style: none; }
  .m-pb-fold > summary::-webkit-details-marker { display: none; }
  .m-pb-fold > summary::after { content: "+"; content: "+" / ""; font-weight: 400; font-size: 1.2rem; line-height: 1; }
  .m-pb-fold[open] > summary { margin-bottom: 10px; }
  .m-pb-fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
  .m-pb-fold > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
}
.m-pb { margin: 0; padding: 16px 20px 18px; font-family: var(--mono); font-size: .74rem; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap; background: var(--paper); border: 0; border-radius: 0; overflow-x: auto; }
.m-pb b { color: var(--ink); font-weight: 400; }
.m-cert { margin-top: 18px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.m-cert b { color: var(--ink); }

/* ---------------------------------------------------------------- fit */
.o-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.o-who div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.o-who b { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--ink); }
.o-who span { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.m-not { margin-top: clamp(32px, 4vw, 48px); }
.m-not h3 { font-size: 1.1rem; margin: 0 0 12px; }
.m-not dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
.m-not dt { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.m-not dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }

.o-method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.o-method h3 { font-size: 1.02rem; margin: 0 0 6px; }
.o-method p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); }

/* ---------------------------------------------------------------- the offer
   The one dark object on the page, placed where a buyer arrives at the decision rather than
   before they know what the product is. Dark ground, cream ink, amber for the action only. */
.m-offer { background: var(--dark); color: var(--paper); border-radius: var(--r-lg); padding: clamp(26px, 4.4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); }
.m-offer h2 { color: var(--paper); margin: 0 0 6px; }
.m-offer .eyebrow { color: #A79F87; }
.m-offer p { color: #DDD6C2; }
.m-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 6px; }
.m-offer-price b { font-family: var(--mono); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--paper); font-variant-numeric: tabular-nums; }
.m-offer-price span { font-size: .92rem; color: #CFC8B4; max-width: 38ch; }
.m-incl { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(251,246,233,.16); }
.m-incl li { padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid rgba(251,246,233,.12); color: #DDD6C2; font-size: .93rem; line-height: 1.45; }
.m-incl li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 11px; height: 6px; border-left: 2px solid var(--dark-amber); border-bottom: 2px solid var(--dark-amber); rotate: -45deg; }
.m-incl b { color: var(--paper); font-weight: 600; }
.m-offer .m-terms-h { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #A79F87; margin: 0 0 10px; }
.m-terms { list-style: none; margin: 0; padding: 0; }
.m-terms li { padding: 0 0 10px 16px; position: relative; color: #DDD6C2; font-size: .9rem; line-height: 1.5; }
.m-terms li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--dark-amber); }
.m-legal { margin: 12px 0 0; font-size: .86rem; color: #CFC8B4; }
.m-legal a { color: var(--paper); }
.m-offer .o-refund { margin: 6px 0 0; font-size: .88rem; color: #CFC8B4; border-top: 1px solid rgba(251,246,233,.16); padding-top: 12px; }
.m-count { margin: 10px 0 0; }
.m-count summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #CFC8B4; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.m-count summary::-webkit-details-marker { display: none; }
.m-count summary::before { content: "+"; content: "+" / ""; font-size: 1rem; line-height: 1; }
.m-count[open] summary::before { content: "\2212"; content: "\2212" / ""; }
.o-seats { margin: 0; max-width: 58ch; }
.o-seats em { font-style: normal; color: #CFC8B4; font-size: .88rem; line-height: 1.5; }
.m-offer .v2-cta-row { margin-top: 22px; }
.m-offer .btn-p { background: var(--dark-amber); border-color: var(--dark-amber); color: var(--dark); }
.m-offer .btn-p:hover { background: var(--dark-amber); color: var(--dark); filter: brightness(1.06); }
/* Opaque on purpose. A translucent hover composites onto whatever a checker assumes is underneath,
   and tools/verify-consent.mjs measured it against the page's paper: paper text on paper, 1:1. */
.m-offer .btn-free { background: var(--dark); border-color: rgba(251,246,233,.5); color: var(--paper); }
.m-offer .btn-free:hover { background: var(--dark-2); color: var(--paper); }
.m-offer a { color: inherit; }
.m-offer .m-fine { color: #A79F87; }
/* The global focus ring is ink, which measures 1.06:1 on this ground. Paper measures 15.94:1. */
.m-offer a:focus-visible, .m-offer button:focus-visible, .m-offer summary:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ---------------------------------------------------------------- questions */
.o-faq { max-width: 820px; }
.o-faq details { border-top: 1px solid var(--line-2); }
.o-faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
.o-faq summary { padding: 16px 0; min-height: 44px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.o-faq summary::-webkit-details-marker { display: none; }
.o-faq summary::after { content: "+"; content: "+" / ""; font-size: 1.2rem; font-weight: 400; line-height: 1; color: var(--ink-3); flex: 0 0 auto; }
.o-faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.o-faq summary:hover::after { color: var(--ink); }
.o-faq details p { padding: 0 0 18px; color: var(--ink-2); font-size: .95rem; max-width: 64ch; margin: 0; }

/* Compliance clarity, unchanged in wording: what the purchase is and is not. */
.o-clarity { margin: 28px 0 0; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: var(--card); max-width: 820px; }
.o-clarity-line { margin: 0 0 14px; font-weight: 600; color: var(--ink); max-width: 64ch; }
.o-clarity h3 { margin: 0 0 6px; font-size: 1rem; }
.o-clarity p:last-child { margin: 0; color: var(--ink-2); max-width: 64ch; }

/* ---------------------------------------------------------------- close and reservation */
.m-close { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.m-close h2 { max-width: 16ch; }
.m-close .v2-cta-row { margin-top: 18px; }
.c-next h3 { font-size: 1.15rem; margin: 0 0 6px; }
.c-next .lede { font-size: .95rem; margin-bottom: 14px; }
.c-cap { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.c-cap label { font-size: .9rem; font-weight: 600; }
.c-cap input[type=email] { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); color: var(--ink); }
.c-cap input[type=email]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.c-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: .9rem !important; line-height: 1.45; min-height: 44px; color: var(--ink-2); }
.c-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: 0 0 auto; }
.c-check input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.c-err { color: var(--bad); font-size: .9rem; margin: 0; }
.c-cap-ok { color: var(--ok); font-size: .92rem; }
.c-q p { font-size: .97rem; margin-bottom: 8px; color: var(--ink); }
.c-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.c-opt { min-height: 44px; padding: 10px 16px; font: inherit; font-size: .92rem; border: 1px solid var(--line-2); border-radius: 100px; background: var(--paper); color: var(--ink-2); cursor: pointer; transition: var(--t); }
.c-opt:hover { border-color: var(--ink-3); color: var(--ink); }
.c-opt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fine { font-size: .86rem; color: var(--ink-3); margin-top: 10px; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .o-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-voices { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .m-hero-grid, .m-how, .m-keep, .m-close, .m-offer { grid-template-columns: minmax(0, 1fr); }
  .m-desk { max-width: 380px; margin: 0 auto; }
  .m-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .m-facts li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 14px; }
  .m-case.is-lead dl { grid-template-columns: 1fr 1fr; }
  .m-case.is-lead dl > .m-ask { grid-column: 1 / -1; }
  .m-cases-foot { grid-template-columns: 1fr; }
  .m-kinds, .m-not dl { grid-template-columns: 1fr; }
  .o-who { grid-template-columns: 1fr; }
  .o-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .m-cases { grid-template-columns: minmax(0, 1fr); }
  .m-case.is-lead { grid-column: auto; }
  .m-case dl, .m-case.is-lead dl { grid-template-columns: 1fr; }
  .m-case { padding: 18px 18px 16px; }
  .o-stages { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .o-stages > li { padding: 0 16px; }
  .o-stage-top { padding: 14px 0 12px; }
  /* The disclosure button the page script builds below 700px. It wraps the stage heading, so the
     closed state still says what the stage is and how many cases it holds. */
  .o-stage-btn { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 44px; cursor: pointer; border-radius: 8px; }
  .o-stage-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
  .o-stage-btn .o-stage-h { border-bottom: 0; padding-bottom: 0; }
  /* The sign that a stage opens, at a size and weight a thumb can find. */
  .o-stage-btn .o-stage-h::after { content: "+"; content: "+" / ""; font-family: var(--sans); font-size: 1.35rem; line-height: 1; color: var(--ink); margin-left: 12px; }
  .o-stage-btn[aria-expanded="true"] .o-stage-h::after { content: "\2212"; content: "\2212" / ""; }
  .o-stage-btn .o-stage-h em { margin-left: auto; }
  .o-stage-btn .o-stage-w { margin-bottom: 0; }
  .o-stages ul { padding-bottom: 10px; }
  .o-method { grid-template-columns: 1fr; }
  .m-reg li { grid-template-columns: 1fr; gap: 2px; }
  /* Five labels in a 343px row do not fit: "Performance" ran into "Creative". Three, then two. */
  .m-voices ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .m-voices li { font-size: .8rem; }
}
@media (max-width: 480px) {
  .m-price { grid-template-columns: 1fr; gap: 6px; }
  .m-hero .v2-cta-row .btn { width: 100%; }
  .m-offer .v2-cta-row .btn { width: 100%; }
  .m-facts b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m-price.o-confirming .o-price { transition: none; }
}
.m-offer-price b:empty { display: none; }
.m-offer-price.o-unavailable b { font-family: var(--sans); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
/* The Playbook frame's filename is the one thing that cannot fit a phone's chrome row beside the
   tabs and the PREVIEW tag, and a clipped PREVIEW tag is the one clip that matters. */
@media (max-width: 700px) { .m-artifacts .pv-count { display: none; } }