/* =====================================================================================
   Mike the Media Buyer: site styles. One structure, three skins (data-skin on <html>).
   Tokens: /assets/css/tokens.css (= site/design/design-tokens.css, verbatim).
   Mobile-first: the 375 base is authored first; desktop layers use min-width queries.
   Every value references a token (or a calc of one). Role aliases below only point at tokens.
   ===================================================================================== */

/* ---- role aliases (no new values) ---- */
[data-skin="v1"] { --r-cta: var(--radius-s); --r-field: var(--radius-s); --r-frame: var(--radius-l); }

/* =====================================================================================
   BASE
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--color-cta) transparent; }
/* browser-chrome exemption (craft r5 P2-6): scrollbar geometry is UA chrome, not page design; preview-era values kept as is */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-cta); border: 4px solid transparent; border-radius: 999px; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-cta-hover); background-clip: padding-box; }
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
b, strong { font-weight: var(--weight-strong); }
.wrap { max-width: calc(var(--max-container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { position: relative; padding: var(--section-gap) 0; background-color: var(--color-bg); color: var(--color-ink); }
.sep { color: var(--color-subtle); }
:target { scroll-margin-top: var(--space-6); }

/* skin-only devices: hidden unless the skin turns them on (display:none hides from AT too) */
.rule, .cycler, .sig, .spine-rail, .p-node, .stage-path, .chrome, .rc-no, .g-ix, .q-ix, .loop, .gl, .p-num, .pf-ph, .status2, .nf-path, .nf-num { display: none; }

/* ---- reveal: opacity only; JS adds .in. No .motion class (no JS / reduced motion) = visible ---- */
html.motion [data-reveal] { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
html.motion [data-reveal].in { opacity: 1; }

/* =====================================================================================
   TOP BAR (not sticky)
   ===================================================================================== */
.bar { background: var(--color-bg); border-bottom: var(--rule-w) solid var(--color-line); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-body); letter-spacing: var(--track-h3); text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav .lnk { display: none; align-items: center; min-height: var(--tap-min); font-size: var(--text-caption); color: var(--color-muted); text-decoration: none; }
.nav .lnk:hover { color: var(--color-ink); }
.btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--r-cta); background: var(--color-cta); color: var(--color-cta-ink); font-size: var(--text-caption); font-weight: var(--weight-cta); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn-sm:hover { background: var(--color-cta-hover); }
@media (min-width: 761px) { .nav .lnk { display: inline-flex; } }

/* =====================================================================================
   CTA (one action, highest salience in every skin)
   ===================================================================================== */
.cta-block { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--space-5); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--cta-height); padding: 0 var(--space-6);
  border-radius: var(--r-cta); background: var(--color-cta); color: var(--color-cta-ink);
  font-family: var(--font-display); font-weight: var(--weight-cta); font-size: var(--text-lead); letter-spacing: var(--track-body);
  text-decoration: none; box-shadow: var(--shadow-cta);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cta:hover { background: var(--color-cta-hover); transform: translateY(calc(var(--space-1) / -2)); }
.cta .arr { width: var(--icon-m); height: var(--icon-m); flex: none; }
.micro { margin-top: var(--space-3); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); text-align: center; }
.micro a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-ink); }

/* =====================================================================================
   S1 HERO (shared, mobile base)
   ===================================================================================== */
.s-hero { padding-top: var(--space-6); }
.s-hero h1 { text-wrap: balance; }
.h1-a { display: block; font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: var(--track-display); }
.h1-b { display: block; margin-top: var(--space-3); font-size: var(--text-display-sub); font-weight: var(--weight-display-sub); line-height: var(--leading-heading); letter-spacing: var(--track-h3); text-wrap: balance; }
.stage { margin-top: var(--space-5); }
.deck li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); align-items: baseline; }
.deck .ix { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-mono); letter-spacing: var(--track-mono); color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.deck .t { display: block; }
.deck .tx { display: block; font-size: var(--text-deck); font-weight: var(--weight-deck); line-height: var(--leading-snug); letter-spacing: var(--track-deck); }
.deck .n { font-weight: var(--weight-heading); }
.proof { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
/* round 6 (2026-10-19): role line above the H1 */
.roles { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; line-height: var(--leading-snug); color: var(--color-muted); text-wrap: balance; }
.pl { font-size: var(--text-body); line-height: var(--leading-snug); color: var(--color-muted); }
.pl-name { color: var(--color-ink); font-weight: var(--weight-strong); }
.hero-media { margin-top: var(--space-7); }
.hm-photo { overflow: hidden; background: var(--color-photo-bg); }
.hm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hm-cap { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-muted); }
.cta-block .cta { width: 100%; }
@media (min-width: 641px) {
  [data-skin="v1"] .s-hero .cta-block, [data-skin="v1"] .after .cta-block, [data-skin="v1"] .final-r .cta-block { display: inline-flex; align-items: center; }
  [data-skin="v1"] .cta-block .cta { width: auto; }
}
.s-hero .micro, .final-r .micro { max-width: 36ch; margin-left: auto; margin-right: auto; }

/* =====================================================================================
   S2 PROOF STRIP
   ===================================================================================== */
.s-proof { padding: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule-w); background: var(--color-line); }
.facts li { min-width: 0; background: var(--color-bg); }
.facts a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; min-height: var(--tap-min); padding: var(--space-5) var(--space-3); text-decoration: none; }
.f-fig { font-family: var(--font-display); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.f-num { display: block; font-size: var(--text-stat); line-height: var(--leading-display); letter-spacing: var(--track-h2); }
.f-rest { display: block; margin-top: var(--space-1); font-size: var(--text-lead); line-height: var(--leading-snug); }
.f-line { font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.facts a:hover .f-num { text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-1); }
/* 10 tiles: phone 2x5, tablet 2x5, desktop 5+5 */
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .facts li, .facts li:last-child { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .facts li, .facts li:last-child { grid-column: auto; }
  .facts a { padding: var(--space-6) var(--space-5); }
}

/* =====================================================================================
   SECTION HEADS
   ===================================================================================== */
.sec-head { margin-bottom: var(--space-7); }
.sec-head h2, .about-text h2, .faq-grid h2, .final-l h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--track-h2); text-wrap: balance; max-width: 22ch; }
.sec-head .intro { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-muted); max-width: 52ch; }
.sec-head .intro p + p { margin-top: var(--space-4); }
.h-sub { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.h-tier { margin-top: var(--space-2); font-size: var(--text-figure); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }

/* =====================================================================================
   S3 PROBLEM
   ===================================================================================== */
.first { margin-top: var(--space-4); font-size: var(--text-lead); font-weight: var(--weight-strong); max-width: var(--max-body); }
.q-label { font-size: var(--text-caption); color: var(--color-muted); }
.quotes { margin-top: var(--space-4); display: grid; gap: var(--space-5); }
.q p { font-size: var(--text-lead); line-height: var(--leading-snug); }
.q-lead { color: var(--color-muted); }
.q-src { margin-top: var(--space-2); font-size: var(--text-caption) !important; color: var(--color-subtle); }
.prob-body { margin-top: var(--space-8); display: grid; gap: var(--space-6); }
.pb-text { max-width: var(--max-body); }
.pb-text p + p { margin-top: var(--space-4); }
.bridge { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); border-top: var(--rule-w) solid var(--color-line-strong); padding-top: var(--space-5); }
.hl { font-style: normal; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .prob-body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
  .pb-text { grid-column: 1 / 8; }
  .bridge { grid-column: 8 / 13; align-self: end; border-top: 0; padding-top: 0; }
}

/* =====================================================================================
   S4 PILLARS (shared)
   ===================================================================================== */
.bento { display: grid; gap: var(--space-8); }
.pillar { position: relative; display: grid; gap: var(--space-5); min-width: 0; }
.p-text, .p-vis { min-width: 0; }
.p-head { display: flex; align-items: center; gap: var(--space-3); }
.pillar h3 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.p-body { margin-top: var(--space-3); max-width: 54ch; }
.see { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--color-muted); }
.see { line-height: var(--leading-tap); }
.see a { display: inline; padding: calc(var(--space-3) + var(--space-1) / 4) 0; color: var(--color-ink); text-underline-offset: var(--space-1); }
.full a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-ink); text-underline-offset: var(--space-1); }
.see-k { font-weight: var(--weight-strong); color: var(--color-ink); }
.full { font-size: var(--text-caption); font-weight: var(--weight-strong); }
.p-shot { display: block; width: 100%; padding: 0; border: 0; background: var(--color-chrome); cursor: zoom-in; text-align: left; }
.p-crop { display: block; aspect-ratio: var(--ratio-well); overflow: hidden; background: var(--color-shot-bg); }
.p-crop img { width: 100%; height: 100%; object-fit: cover; }
.crop-r1 { object-position: 23% 50%; }
.crop-hooks, .crop-r8 { object-position: 0 0; }
.crop-r11 { object-position: 50% 50%; }
.p-vis figcaption { margin-top: var(--space-3); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.p-closer { display: flex; gap: var(--space-4); align-items: flex-start; }
.p-closer p { font-size: var(--text-lead); max-width: var(--max-body); }
@media (min-width: 981px) {
  [data-skin="v1"] .pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-8); align-items: start; }
  [data-skin="v1"] .pillar.flip .p-text { order: 2; }
}

/* =====================================================================================
   S5 WORK + S5a RESULTS
   ===================================================================================== */
.results h3 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.r-intro { margin-top: var(--space-2); color: var(--color-muted); max-width: var(--max-body); }
.r-h { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: var(--space-2); }
.r-group li { position: relative; padding: var(--space-3) 0; border-bottom: var(--rule-w) solid var(--color-line); }
.r-group li b { font-variant-numeric: tabular-nums; }
.r-group li:target { background: var(--color-tint); }
.r-scale { margin-top: var(--space-6); }
.r-groups { margin-top: var(--space-7); display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .r-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .r-scale ul, .r-cols ul { columns: 2; column-gap: var(--space-7); } .r-scale li, .r-cols li { break-inside: avoid; } }
@media (min-width: 1100px) { .r-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Tier 1 receipts ---- */
.ledger { display: grid; gap: var(--space-8); }
.rc { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rc:target .rc-cap, .tc:target .tc-cap { background: var(--color-tint); }
.rc-shot, .tc-shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.well { display: block; aspect-ratio: var(--ratio-well); padding: var(--space-3); background: var(--color-shot-bg); }
.well img { width: 100%; height: 100%; object-fit: contain; }
#r1 .well { aspect-ratio: 2314 / 766; }
#r12 .well { aspect-ratio: 1685 / 1037; }
.rc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.rc-plat { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); }
.rc-title, .tc-title { margin-top: var(--space-2); font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.rc-fig { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-figure); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--track-h3); font-variant-numeric: tabular-nums; }
.rc-meta { margin-top: var(--space-2); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.rc-tags { margin-top: var(--space-3); }
.tag { display: inline-block; padding: 0 var(--space-2); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-mono); color: var(--color-muted); line-height: var(--leading-body); }
.rc-not { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-top: var(--space-1); padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-1); }
@media (min-width: 760px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .rc--wide { grid-column: 1 / -1; }
}

/* ---- Tier 2 TikTok ---- */
.tape-row { margin-top: var(--space-6); display: grid; gap: var(--space-6); }
.tc { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tc .well { aspect-ratio: var(--ratio-strip); }
.tc-fig { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--text-body); font-weight: var(--weight-strong); line-height: var(--leading-snug); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .tape-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .tc { grid-column: span 2; }
  .tc:nth-child(4), .tc:nth-child(5) { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .tape-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tc, .tc:nth-child(4), .tc:nth-child(5) { grid-column: auto; }
}

/* ---- Tier 3 wall ---- */
.s-wall, .s-scope { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.w-group { grid-column: 1 / -1; margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.w-group:first-child { margin-top: 0; }
.tile-w { min-width: 0; }
.tile-collage { grid-column: 1 / -1; display: flex; flex-direction: column; } /* R4: Store days moved into an expander, so the collage now sits on its own row */
.w-group.w-in { margin: 0 0 var(--space-2); }
.tile-collage .w-btn { flex: 1 1 auto; min-height: 0; }
.si { white-space: normal; }
.w-btn { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.thumb { display: block; width: 100%; aspect-ratio: var(--ratio-thumb); overflow: hidden; background: var(--color-shot-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.tile-collage .thumb { aspect-ratio: var(--ratio-video); }
.w-title { font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.after { margin-top: var(--space-7); }
@media (min-width: 640px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-collage { grid-column: 1 / span 2; }
}

/* =====================================================================================
   S5b EVERYTHING I DO
   ===================================================================================== */
.groups { display: grid; gap: var(--space-6); }
.grp { min-width: 0; }
.grp h3 { font-size: var(--text-figure); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.g-lead { margin-top: var(--space-2); font-size: var(--text-lead); line-height: var(--leading-snug); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.chip { padding: var(--space-1) var(--space-3); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.more summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); margin-top: var(--space-2); cursor: pointer; list-style: none; font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-1); }
.more summary::-webkit-details-marker { display: none; }
.more .chips { margin-top: var(--space-2); }
.verticals { margin-top: var(--space-8); }
.v-label { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (min-width: 700px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================================
   S6 HOW IT WORKS
   ===================================================================================== */
.steps { display: grid; gap: var(--space-5); }
.steps li { position: relative; display: grid; grid-template-columns: calc(var(--space-6) + var(--space-2)) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.st-n { position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--space-6) + var(--space-2)); height: calc(var(--space-6) + var(--space-2)); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); background: var(--color-bg); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-mono); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc((var(--space-6) + var(--space-2)) / 2); top: calc(var(--space-6) + var(--space-2)); bottom: calc(var(--space-5) * -1); width: var(--rule-w); background: var(--color-line-strong); }
.st-t { color: var(--color-muted); }
.st-t b { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lead); }
.ownership { margin-top: var(--space-7); font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); max-width: 60ch; }
@media (min-width: 1100px) {
  [data-skin="v1"] .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
  [data-skin="v1"] .steps li { grid-template-columns: minmax(0, 1fr); align-content: start; } /* QA: stretched rows were pushing short steps' titles down */
  [data-skin="v1"] .steps li:not(:last-child)::after { left: calc(var(--space-6) + var(--space-2)); right: calc(var(--space-5) * -1); top: calc((var(--space-6) + var(--space-2)) / 2); bottom: auto; width: auto; height: var(--rule-w); }
}

/* =====================================================================================
   S7 FIT
   ===================================================================================== */
.fit-cols { display: grid; gap: var(--space-5); }
.fit h3 { font-size: var(--text-figure); line-height: var(--leading-heading); }
.fit ul { margin-top: var(--space-4); }
.fit li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-6); }
.fit li::before { position: absolute; left: 0; top: var(--space-2); font-weight: var(--weight-heading); }
.fit-yes li::before { content: "✓"; color: var(--color-ink); }
.fit-no li::before { content: "×"; color: var(--color-muted); }
.closer { margin-top: var(--space-6); font-size: var(--text-lead); max-width: var(--max-body); }
@media (min-width: 900px) { .fit-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================
   S8 ABOUT
   ===================================================================================== */
.about-grid { display: grid; gap: var(--space-7); }
.about-photo { min-width: 0; }
.ap-frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-photo-bg); }
.ap-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about-photo figcaption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-muted); }
.about-text { min-width: 0; }
.about-body { margin-top: var(--space-5); max-width: var(--max-body); }
.about-body p + p { margin-top: var(--space-4); }
.vid { margin-top: var(--space-7); max-width: var(--max-body); }
.vid-frame { overflow: hidden; }
.vid-stage { position: relative; aspect-ratio: var(--ratio-video); background: var(--color-dark-section); }
.vid-stage video { display: block; width: 100%; height: 100%; background: var(--color-dark-section); }
.facade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); border: 0; cursor: pointer; background: var(--color-surface); color: var(--color-ink); text-align: center; }
.play { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border: var(--tile-w) solid var(--color-ink); border-radius: 50%; }
.f-title { font-family: var(--font-display); font-size: var(--text-figure); font-weight: var(--weight-heading); line-height: var(--leading-heading); }
.dur { padding: 0 var(--space-2); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-label); }
.vid.playing .facade { display: none; }
.vid figcaption { margin-top: var(--space-3); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.vid figcaption b { display: block; color: var(--color-ink); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
  .about-photo { position: sticky; top: var(--space-6); } /* panel r3 P2-9: photo travels with the long About column instead of leaving a dead column */
  .ap-frame { aspect-ratio: var(--ratio-portrait); }
}

/* =====================================================================================
   S9 FAQ
   ===================================================================================== */
.faq-grid { display: grid; gap: var(--space-6); }
.faq-list details { border-bottom: var(--rule-w) solid var(--color-line); }
.faq-list summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: var(--cta-height); padding: var(--space-3) 0; cursor: pointer; list-style: none; font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.faq-list summary::-webkit-details-marker { display: none; }
.pm { position: relative; width: var(--space-4); height: var(--space-4); flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--tile-w); margin-top: calc(var(--tile-w) / -2); background: currentColor; }
.pm::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
details[open] .pm::after { transform: rotate(0deg); }
.ans { padding-bottom: var(--space-5); max-width: var(--max-body); color: var(--color-muted); }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); }
}

/* =====================================================================================
   S10 FINAL CTA
   ===================================================================================== */
.final-grid { display: grid; gap: var(--space-7); }
.final-l h3 { margin-top: var(--space-6); font-size: var(--text-figure); line-height: var(--leading-heading); }
.call-steps { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.call-steps li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.cs-n { font-family: var(--font-display); font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; }
.reassure { font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
@media (min-width: 900px) {
  .final-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; }
}

/* =====================================================================================
   S11 FOOTER
   ===================================================================================== */
.s-footer { padding: var(--space-7) 0; border-top: var(--rule-w) solid var(--color-line); }
.foot-in { display: grid; gap: var(--space-4); }
.f1 { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-strong); }
.f2, .copy { font-size: var(--text-caption); color: var(--color-muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-caption); }
@media (min-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-6); } }

/* =====================================================================================
   LIGHTBOX (one shared native <dialog>)
   ===================================================================================== */
dialog.lb { width: 100%; max-width: var(--lb-max-w); max-height: none; padding: 0; border: 0; background: transparent; color: var(--color-ink); }
dialog.lb::backdrop { background: var(--color-backdrop); }
.lb-panel { position: relative; max-height: calc(100dvh - var(--space-6)); overflow: auto; padding: calc(var(--tap-min) + var(--space-3)) var(--space-4) var(--space-4); background: var(--color-surface); border-radius: var(--r-frame); }
.lb-x { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; width: var(--tap-min); height: var(--tap-min); padding: 0; border: var(--rule-w) solid var(--color-line-strong); border-radius: 50%; background: var(--color-bg); color: var(--color-ink); font-size: var(--text-figure); line-height: var(--leading-display); cursor: pointer; }
.lb-body { display: grid; gap: var(--space-5); }
.lb-media { min-width: 0; display: grid; gap: var(--space-3); justify-items: center; }
.lb-media img { width: auto; height: auto; max-width: 100%; max-height: var(--lb-max-h); object-fit: contain; background: var(--color-shot-bg); }
.lb-media.pan { justify-items: start; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--space-2); } /* QA: wide captures pan at 1x instead of shrinking to a sliver (width set in site.js) */
.lb-media.pan img { max-width: none; max-height: none; }
.lb-cap { min-width: 0; font-size: var(--text-body); }
.lb-title { font-family: var(--font-display); font-size: var(--text-lead); font-weight: var(--weight-heading); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.lb-text { color: var(--color-ink); }
.lb-date { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--color-muted); }
.lb-dl { display: grid; gap: var(--space-1); }
.lb-dl dt { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-subtle); }
.lb-dl dt:first-child { margin-top: 0; }
.lb-dl dt.not { color: var(--color-ink); font-weight: var(--weight-heading); }
.lb-dl dd { color: var(--color-muted); }
.lb-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.lb-nav button { width: var(--tap-min); height: var(--tap-min); padding: 0; border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-cta); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-figure); line-height: var(--leading-display); cursor: pointer; }
@media (min-width: 1100px) {
  .lb-body.side { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); align-items: start; }
  .lb-panel { padding: calc(var(--tap-min) + var(--space-3)) var(--space-6) var(--space-5); }
}

/* =====================================================================================
   PREVIEW-ONLY SKIN TOGGLE (delete at ship with [data-preview-only])
   ===================================================================================== */
.skin-toggle { position: fixed; left: var(--space-3); bottom: var(--space-3); z-index: 50; display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); background: var(--preview-bg); color: var(--preview-ink); border: var(--rule-w) solid var(--preview-ink); font-family: system-ui, -apple-system, sans-serif; font-size: var(--text-label); line-height: var(--leading-snug); }
.skin-toggle button { min-height: var(--tap-min); padding: 0 var(--space-2); border: 0; background: none; color: var(--preview-ink); font: inherit; cursor: pointer; }
.skin-toggle button[aria-pressed="true"] { background: var(--preview-ink); color: var(--preview-bg); }
.st-l { font-weight: var(--weight-strong); padding-right: var(--space-1); }

/* =====================================================================================
   /book/
   ===================================================================================== */
.s-bookpage { padding-top: var(--space-6); }
.book-grid { display: grid; gap: var(--space-6); }
.book-val h1, .reading h1, .nf h1 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--track-h2); text-wrap: balance; }
.b-intro { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-muted); max-width: 46ch; }
.reply { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--color-muted); }
.form-card { min-width: 0; padding: var(--space-5); }
.field { margin-top: var(--space-5); }
.field:first-child { margin-top: 0; }
fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.field > label, .field > legend { display: block; padding: 0; margin-bottom: var(--space-2); font-size: var(--text-caption); font-weight: var(--weight-strong); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field textarea { width: 100%; min-height: var(--field-height); padding: 0 var(--space-4); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-field); background: var(--color-bg); color: var(--color-ink); font: inherit; font-size: var(--text-body); }
.field textarea { min-height: calc(var(--field-height) * 2); padding: var(--space-3) var(--space-4); resize: vertical; margin-top: var(--space-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--color-error); } /* see the R5 audit block for the winning selector */
.opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt span { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-field); font-size: var(--text-caption); cursor: pointer; }
.opt input:checked + span { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.opt input:focus-visible + span { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.err { margin-top: var(--space-2); font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--color-error); }
.form-card .cta-block { margin-top: var(--space-6); }
.form-card .micro a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-ink); }
.state { grid-column: 1 / -1; }
.state h2 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.state > p { margin-top: var(--space-3); max-width: var(--max-body); }
.state h3 { margin-top: var(--space-6); font-size: var(--text-figure); line-height: var(--leading-heading); }
.cal-slot { display: grid; place-items: center; align-content: center; gap: var(--space-3); min-height: var(--cal-min-h-m); margin-top: var(--space-5); padding: var(--space-5); border: var(--tile-w) dashed var(--color-line-strong); border-radius: var(--r-frame); text-align: center; }
.cal-dev { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-muted); }
.below { margin-top: var(--space-4); font-size: var(--text-caption); color: var(--color-muted); }
.self-checks { margin-top: var(--space-4); display: grid; gap: var(--space-4); max-width: var(--max-body); counter-reset: sc; }
.self-checks li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-3); }
.self-checks li::before { counter-increment: sc; content: counter(sc); font-family: var(--font-display); font-weight: var(--weight-heading); }
@media (min-width: 900px) {
  .book-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); align-items: start; }
  .cal-slot { min-height: var(--cal-min-h); }
}

/* /privacy/ */
.reading { max-width: var(--max-body); }
.reading h2 { margin-top: var(--space-7); font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.reading p { margin-top: var(--space-3); }
.reading .updated { margin-top: var(--space-7); font-size: var(--text-caption); color: var(--color-muted); }
.gap-mark { padding: 0 var(--space-1); background: var(--color-tint); font-family: var(--font-mono); font-size: var(--text-caption); }

/* 404 */
.nf { max-width: var(--max-narrow); }
.nf > p { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--color-muted); }
.nf-links { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.nf-links a:not(.cta) { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--weight-strong); }

/* =====================================================================================
   ===================================  V1 SIGNAL ROOM  ================================
   ===================================================================================== */
[data-skin="v1"] .glyph { display: inline-block; width: var(--bullet); height: var(--bullet); border: var(--rule-w) solid var(--color-ink); border-radius: 50%; }
[data-skin="v1"] .glyph i { display: none; }
[data-skin="v1"] .btn-sm { background: transparent; color: var(--color-accent); border: var(--rule-w) solid color-mix(in srgb, var(--color-accent) 50%, transparent); }
[data-skin="v1"] .btn-sm:hover { background: var(--color-tint); }

/* bands: B = bg, S = surface; dot grid bookends hero + final */
/* R5 audit (design P1-5): re-banded for the built order; no two neighbours share a band */
[data-skin="v1"] .s-proof, [data-skin="v1"] .s-contrast, [data-skin="v1"] .s-results, [data-skin="v1"] .s-how, [data-skin="v1"] .s-tiktok,
[data-skin="v1"] .s-camera, [data-skin="v1"] .s-scope, [data-skin="v1"] .s-faq, [data-skin="v1"] .s-footer { background-color: var(--color-surface); }
[data-skin="v1"] .s-hero, [data-skin="v1"] .s-final { background-image: radial-gradient(var(--color-dot) 1px, transparent 1px); background-size: var(--dot-grid) var(--dot-grid); background-position: calc(var(--dot-grid) / -2) calc(var(--dot-grid) / -2); }
[data-skin="v1"] .s-proof, [data-skin="v1"] .s-pillars { border-top: var(--rule-w) solid var(--color-line); border-bottom: var(--rule-w) solid var(--color-line); }
[data-skin="v1"] .s-how { border-top: var(--rule-w) solid var(--color-line); }
[data-skin="v1"] .facts li { background: var(--color-surface); }

/* hero */
[data-skin="v1"] .deck { border-top: var(--rule-w) solid var(--color-line); max-width: var(--max-narrow); }
[data-skin="v1"] .deck li { padding: var(--space-2) 0; border-bottom: var(--rule-w) solid var(--color-line); color: var(--color-muted); }
[data-skin="v1"] .deck .n { color: var(--color-ink); }
[data-skin="v1"] .pf-ph { display: block; flex: none; width: calc(var(--space-7) + var(--space-2)); height: calc(var(--space-7) + var(--space-2)); border-radius: 50%; overflow: hidden; background: var(--color-photo-bg); border: var(--rule-w) solid var(--color-line-strong); }
[data-skin="v1"] .pf-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(2.3); transform-origin: 51% 6%; }
[data-skin="v1"] .hero-media { display: grid; max-width: var(--max-hero-media); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); background: var(--color-surface); overflow: hidden; }
[data-skin="v1"] .hm-photo { grid-area: 1 / 1; aspect-ratio: 1 / 1; }
[data-skin="v1"] .hm-photo img { transform: scale(1.45); transform-origin: 54% 4%; }
[data-skin="v1"] .hm-cap { grid-area: 1 / 1; align-self: end; justify-self: start; margin: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--color-bg); color: var(--color-ink); font-weight: var(--weight-strong); }
[data-skin="v1"] .sig { display: block; grid-area: 2 / 1; padding: var(--space-4); border-top: var(--rule-w) solid var(--color-line-strong); }
.track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-4); }
.track::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(var(--node-size) / 2); height: var(--rule-w); background: var(--color-line-strong); }
.node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.node .dot { display: grid; place-items: center; width: var(--node-size); height: var(--node-size); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); background: var(--color-surface); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.node .dot svg { width: var(--icon-s); height: var(--icon-s); fill: none; stroke: var(--color-muted); stroke-width: 1.6; transition: stroke var(--dur-base); }
.node .lb { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--track-mono); line-height: var(--leading-snug); color: var(--color-muted); text-align: center; }
.node.on .dot { background: var(--color-ink); border-color: var(--color-ink); }
.node.on .dot svg { stroke: var(--color-bg); }
.node.on .lb { color: var(--color-ink); }
.pulse { position: absolute; z-index: 2; top: calc(var(--node-size) / 2 - var(--pulse-size) / 2); left: 0; width: var(--pulse-size); height: var(--pulse-size); margin-left: calc(var(--pulse-size) / -2); border-radius: 50%; background: var(--color-ink); box-shadow: var(--shadow-raised); opacity: 0; transition: transform var(--dur-step) var(--ease-signature), opacity var(--dur-base); }
.log { padding-top: var(--space-3); border-top: var(--rule-w) dashed var(--color-line); }
.log li { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); padding: var(--space-1) 0; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-snug); color: var(--color-muted); transition: opacity var(--dur-base), color var(--dur-base); }
.log .ar { color: var(--color-subtle); }
.log code { font-family: inherit; color: var(--color-ink); }
.sig.running .log li { opacity: 0.22; }
.sig.running .log li.seen { opacity: 0.6; }
.sig.running .log li.now { opacity: 1; color: var(--color-ink); }
@media (min-width: 641px) { [data-skin="v1"] .pf-ph { display: none; } }
@media (min-width: 981px) {
  [data-skin="v1"] .hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7); align-items: start; }
  [data-skin="v1"] .hero-copy { grid-column: 1 / span 7; padding-top: var(--space-4); }
  [data-skin="v1"] .hero-media { grid-column: 8 / span 5; margin-top: 0; max-width: none; }
  [data-skin="v1"] .deck li { grid-template-columns: var(--space-7) minmax(0, 1fr); }
}

/* proof strip */
[data-skin="v1"] .f-num { font-weight: var(--weight-heading); }

/* problem */
[data-skin="v1"] .q { border-left: var(--tile-w) solid var(--color-line-strong); padding-left: var(--space-4); }
[data-skin="v1"] .q-src { font-family: var(--font-mono); letter-spacing: var(--track-mono); }

/* pillars: the spine */
[data-skin="v1"] .spine { --sp-pad: var(--space-7); --sp-rail: var(--space-4); position: relative; padding-left: var(--sp-pad); }
[data-skin="v1"] .spine-rail { display: block; position: absolute; left: var(--sp-rail); top: var(--space-2); bottom: var(--space-9); width: var(--tile-w); background: var(--color-line); }
.spine-fill { position: absolute; inset: 0; background: var(--color-ink); transform-origin: top; transform: scaleY(1); transition: transform var(--dur-draw) var(--ease-signature); }
.spine.armed .spine-fill { transform: scaleY(0); }
[data-skin="v1"] .p-node { display: grid; place-items: center; position: absolute; z-index: 1; left: calc(var(--sp-rail) - var(--sp-pad) + var(--rule-w)); top: var(--space-1); transform: translateX(-50%); width: calc(var(--space-5) + var(--space-1) / 2); height: calc(var(--space-5) + var(--space-1) / 2); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-s); background: var(--color-ink); color: var(--color-bg); font-family: var(--font-mono); font-size: var(--text-label); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
[data-skin="v1"] .spine.armed .pillar:not(.lit) .p-node { background: var(--color-surface); color: var(--color-subtle); border-color: var(--color-line-strong); }
[data-skin="v1"] .stage-path { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); }
[data-skin="v1"] .p-shot, [data-skin="v1"] .rc-shot, [data-skin="v1"] .tc-shot { overflow: hidden; border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); background: var(--color-shot-bg); box-shadow: var(--shadow-card); }
/* QA 2026-10-11: each frame's 60px card shadow was painting over the white well of the frame beside it
   (TikTok row, 2-col receipts). The shadow now lives on a ::before in an isolated layer beneath every frame;
   the inner children carry the radius that overflow:hidden used to provide. */
[data-skin="v1"] .ledger, [data-skin="v1"] .tape-row { isolation: isolate; }
[data-skin="v1"] .rc-shot, [data-skin="v1"] .tc-shot { position: relative; overflow: visible; box-shadow: none; }
[data-skin="v1"] .rc-shot::before, [data-skin="v1"] .tc-shot::before { content: ""; position: absolute; inset: calc(var(--rule-w) * -1); z-index: -1; border-radius: inherit; box-shadow: var(--shadow-card); pointer-events: none; }
[data-skin="v1"] .rc-shot .chrome, [data-skin="v1"] .tc-shot .chrome { border-radius: calc(var(--radius-l) - var(--rule-w)) calc(var(--radius-l) - var(--rule-w)) 0 0; }
[data-skin="v1"] .rc-shot .well, [data-skin="v1"] .tc-shot .well { border-radius: 0 0 calc(var(--radius-l) - var(--rule-w)) calc(var(--radius-l) - var(--rule-w)); }
[data-skin="v1"] .chrome { display: flex; align-items: center; gap: var(--space-2); height: var(--chrome-h); padding: 0 var(--space-3); background: var(--color-chrome); border-bottom: var(--rule-w) solid var(--color-line); }
[data-skin="v1"] .chrome i { flex: none; width: var(--chrome-dot); height: var(--chrome-dot); border-radius: 50%; background: var(--color-decor); }
[data-skin="v1"] .chrome span { min-width: 0; margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-skin="v1"] .p-closer { align-items: center; }
[data-skin="v1"] .loop { display: block; flex: none; width: var(--tap-min); height: var(--tap-min); margin-left: calc(var(--sp-rail) - var(--sp-pad) - (var(--space-7) - var(--space-1)) / 2); fill: none; stroke: var(--color-ink); stroke-width: 1.5; background: var(--color-surface); }
@media (min-width: 981px) { [data-skin="v1"] .spine { --sp-pad: var(--space-9); --sp-rail: var(--space-6); } }

/* results */
[data-skin="v1"] .gl { display: inline-block; width: var(--bullet); height: var(--bullet); border: var(--rule-w) solid var(--color-ink); }
[data-skin="v1"] .r-group li { padding-left: var(--space-5); }
[data-skin="v1"] .r-group li::before { content: "→"; position: absolute; left: 0; top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-subtle); }
[data-skin="v1"] .r-group li b { color: var(--color-ink); }

/* receipts */
[data-skin="v1"] .rc-plat { display: none; }
[data-skin="v1"] .tag { text-transform: uppercase; }
[data-skin="v1"] .tc-fig { font-weight: var(--weight-strong); }

/* wall */
[data-skin="v1"] .thumb { border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); }

/* scope */
[data-skin="v1"] .grp { border-top: var(--rule-w) solid var(--color-line); padding-top: var(--space-4); }
[data-skin="v1"] .g-ix { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-subtle); }
[data-skin="v1"] .more summary { font-family: var(--font-mono); }

/* how */
[data-skin="v1"] .st-n { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
[data-skin="v1"] .ownership { padding: var(--space-6); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); max-width: none; }

/* fit */
[data-skin="v1"] .fit { padding: var(--space-6); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); }

/* about */
[data-skin="v1"] .ap-frame { border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); }
[data-skin="v1"] .about-photo figcaption { font-family: var(--font-mono); }
[data-skin="v1"] .vid-frame { border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); }
[data-skin="v1"] .dur { font-family: var(--font-mono); }

/* faq */
[data-skin="v1"] .faq-list summary { grid-template-columns: var(--space-5) minmax(0, 1fr) auto; }
[data-skin="v1"] .q-ix { display: block; font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-subtle); }
[data-skin="v1"] .ans { padding-left: calc(var(--space-5) + var(--space-3)); }

/* final */
[data-skin="v1"] .call-steps li { font-family: var(--font-mono); font-size: var(--text-caption); }
[data-skin="v1"] .cs-n { font-family: var(--font-mono); color: var(--color-subtle); }
[data-skin="v1"] .cs-n::before { content: "> "; }

/* footer */
[data-skin="v1"] .s-footer { font-family: var(--font-mono); }
[data-skin="v1"] .f1 { font-family: var(--font-mono); font-size: var(--text-caption); }

/* lightbox */
[data-skin="v1"] .lb-panel { border: var(--rule-w) solid var(--color-line-strong); }

/* book / 404 echoes */
[data-skin="v1"] .form-card { background: var(--color-surface); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); }
[data-skin="v1"] .status2 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-muted); }
.status2 .s-node { display: inline-flex; align-items: center; gap: var(--space-2); }
.status2 .s-dot { width: var(--bullet); height: var(--bullet); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-s); }
.status2 .s-node.on .s-dot { background: var(--color-ink); border-color: var(--color-ink); }
.status2 .s-node.on { color: var(--color-ink); }
.status2 .s-rail { flex: 0 0 var(--space-7); height: var(--rule-w); background: var(--color-line-strong); }
[data-skin="v1"] .nf-path { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-7); max-width: var(--max-narrow); }
.nf-path .n-dot { display: grid; place-items: center; width: var(--node-size); height: var(--node-size); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--text-label); }
.nf-path .n-dot.broken { border-style: dashed; border-color: var(--color-decor); color: var(--color-subtle); }
.nf-path .n-rail { flex: 1 1 auto; height: var(--rule-w); background: var(--color-line-strong); }
.nf-path .n-rail.gap { background: none; border-top: var(--rule-w) dashed var(--color-decor); }
.cycler .we { display: block; font-family: var(--font-display); font-weight: var(--weight-strong); font-size: var(--text-h3); line-height: var(--leading-display); letter-spacing: var(--track-h3); }
.cycler .slot { display: block; height: calc(var(--leading-tight) * 1em); overflow: hidden; margin-top: 0.06em; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-cycler); line-height: var(--leading-tight); letter-spacing: var(--track-display); color: var(--color-accent); }
.cycler .noun { display: block; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out); }
.cycler .noun.in { transform: translateY(0); opacity: 1; }
.cycler .noun.out { transform: translateY(-105%); opacity: 0; }
.cycler .noun.reset { transition: none; }
.cycler .pips { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.cycler .pips i { width: var(--pip-w); height: var(--pip-h); background: var(--color-decor); transition: background var(--dur-base); }
.cycler .pips i.on { background: var(--color-ink); }

/* inline mailto links inside running text: padded to a 44px tap target without moving the line */
.reading p a, .state p a { display: inline-block; padding: calc(var(--space-3) + var(--space-1) / 4) 0; margin: calc((var(--space-3) + var(--space-1) / 4) * -1) 0; }

/* =====================================================================================
   ROUND 4 COPY MERGE (2026-10-11): new blocks reuse existing patterns; values are tokens only
   ===================================================================================== */
/* hero: the "why one person" line under the deck */
.sub { margin-top: var(--space-4); max-width: var(--max-media); font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.sub + .proof { margin-top: var(--space-4); }

/* S5a follow-on blocks: 2026 work + who I've bought for (S5a list styling per skin) */
.results + .results { margin-top: var(--space-8); }
.r-cols { margin-top: var(--space-5); }
.r-note { margin-top: var(--space-4); max-width: var(--max-body); font-weight: var(--weight-strong); }
.r-who .chips { margin-top: var(--space-4); }

/* TikTok intro reuses the section-head pattern */
.sec-head + .tape-row { margin-top: 0; } /* the ownership line already closes on a strong rule */
.after .micro { max-width: 36ch; margin-left: auto; margin-right: auto; }

/* wall: Store days in a closed expander, tiles in a nested contact sheet */
.w-more { grid-column: 1 / -1; margin-top: var(--space-3); }
.w-sub { margin-top: var(--space-2); }
.w-more + .tile-collage { margin-top: var(--space-4); } /* chip, not a bar, now that the collage tile is wider */

/* S5c On camera (text only): reuses the problem-section quote list */
@media (min-width: 900px) { .s-camera .quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* S5b now follows About: separate the two surface bands */
[data-skin="v1"] .s-scope { border-top: var(--rule-w) solid var(--color-line); }

/* /book/: field hint under a legend */
.hint { margin: 0 0 var(--space-3); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }

/* =====================================================================================
   PANEL ROUND 1 FIXES (2026-10-11, copy/panel-round1.md). Tokens only; reused patterns.
   ===================================================================================== */
/* P0-4: mid-page booking rows (.after) after problem, pillars, results, receipts, fit, About and S5b.
   .after-m is the mid-S5b row: one-column (< 700px) layouts only, where S5b runs ~5,000px tall. */
.s-problem .after, .s-fit .after, .s-scope > .wrap > .after { margin-top: var(--space-8); }
.about-text .after { margin-top: var(--space-7); max-width: var(--max-body); }
.groups > .after { margin-top: 0; }
.s-pillars .after { margin-top: var(--space-6); }
@media (max-width: 640px) { [data-skin="v1"] .bento { gap: var(--space-6); } } /* R5 audit: one more token step so the 375 CTA gap holds under 4,300px */ /* trims the V1 375 pillars run (no CTA can sit inside it) */
.rc-after { grid-column: 1 / -1; margin-top: 0; } /* receipts row sits between R11 and R12 (a pair boundary at every width) so neither stretch tops ~4,000px at 375 */
@media (min-width: 700px) { .after-m { display: none; } } /* the bridge line already closes on a strong rule */
/* P2-14: mid-page rows sit on the copy column's left edge on desktop (CTA and microcopy left-aligned) */
@media (min-width: 641px) {
  [data-skin="v1"] .after .cta-block { align-items: flex-start; }
  [data-skin="v1"] .after .micro { text-align: left; margin-left: 0; }
}
.cta { text-align: center; }

/* P1-7: Ways to work (three self-select lines, no prices), styled like each skin's Fit columns */
.ways { display: grid; gap: var(--space-5); }
.ways li { font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--color-muted); }
.ways b { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: var(--text-figure); line-height: var(--leading-heading); letter-spacing: var(--track-h3); color: var(--color-ink); }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-skin="v1"] .ways li { padding: var(--space-6); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l); }
[data-skin="v1"] .s-ways + .s-fit { border-top: var(--rule-w) solid var(--color-line); }

/* P1-10: receipts R04 to R07 behind an expander; everything stays in the DOM and the lightbox */
.rc-more { grid-column: 1 / -1; }
.rc-more > summary { margin-top: 0; }
.rc-sub { margin-top: var(--space-6); }

/* P2-16: V1 at <= 640 shows the face once (the 56px proof avatar); the hero panel keeps the signal path */
@media (max-width: 640px) {
  [data-skin="v1"] .hm-photo, [data-skin="v1"] .hm-cap { display: none; }
  [data-skin="v1"] .sig { border-top: 0; }
}

/* P2-19: wall tiles framed on their least-redacted region (CSS viewing window only; the lightbox shows the whole file) */
#w-motion .thumb img { object-position: 0 100%; transform: scale(2.75); transform-origin: 0 13.6%; }
#w-log .thumb img { object-position: 100% 0; transform: scale(2.25); transform-origin: 100% 39%; }

/* P2-21: /book/ left column carries the home "What happens on the call" steps on desktop */
.b-call { display: none; }
@media (min-width: 900px) {
  .b-call { display: block; margin-top: var(--space-7); max-width: var(--max-narrow); }
  .b-call h2 { font-size: var(--text-figure); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
}

/* =====================================================================================
   PANEL ROUND 2 FIXES (2026-10-11, copy/panel-round2.md). Tokens only; reused patterns.
   ===================================================================================== */
/* P2-17: skip link (visible on keyboard focus only) */
.skip { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-cta); background: var(--color-bg); color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: none; transform: translateY(calc(-100% - var(--space-6))); }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* P0-2a: static jump row under the proof strip (< 760px, where the bar shows only the wordmark and button). Not sticky. */
.jump { display: none; }
@media (max-width: 759px) {
  .jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); padding: var(--space-2) 0; }
  .jump a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--color-ink); text-underline-offset: var(--space-1); }
  [data-skin="v1"] .jump { border-top: var(--rule-w) solid var(--color-line); }
  [data-skin="v1"] .jump a { font-family: var(--font-mono); font-weight: var(--weight-mono); letter-spacing: var(--track-mono); }
  [data-skin="v1"] .jump a::before { content: "#"; color: var(--color-subtle); }
}

/* P0-2b: TikTok row + daily-work wall in one closed expander (all cards stay in the DOM and the lightbox) */
.s-receipts { padding-bottom: var(--space-6); }
.more-rc > summary { display: block; padding-bottom: var(--section-gap); background: var(--color-bg); cursor: pointer; list-style: none; }
.more-rc > summary::-webkit-details-marker { display: none; }
.more-rc > summary .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); }
.more-rc > summary .wrap::before { content: ""; grid-column: 1 / -1; grid-row: 1; height: var(--rule-w); margin-bottom: var(--space-4); background: var(--color-line-strong); }
.more-rc > summary .wrap::after { content: "+"; grid-column: 2; grid-row: 2 / span 2; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-cta); font-family: var(--font-display); font-size: var(--text-lead); font-weight: var(--weight-strong); }
.more-rc[open] > summary .wrap::after { content: "\2212"; }
.mr-lbl { grid-column: 1; grid-row: 2; font-family: var(--font-display); font-size: var(--text-figure); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--track-h3); text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: var(--space-1); }
.mr-n { grid-column: 1; grid-row: 3; font-size: var(--text-caption); color: var(--color-muted); }
.more-rc[open] > summary { padding-bottom: var(--space-6); }
[data-skin="v1"] .mr-n { font-family: var(--font-mono); letter-spacing: var(--track-mono); }

/* P1-4: December 2023 sits beside November (R04 + R05 pair); the expander now holds R06 to R08 */
@media (min-width: 760px) { .rc-sub #r7 { grid-column: 1 / -1; } }

/* P2-17: receipts / TikTok / wall headings promoted one level; keep their visual sizes */
.sec-head .h-sub { font-size: var(--text-h3); letter-spacing: var(--track-h3); max-width: none; }

/* P1-5: Ways to work, three short lines per way */
.ways li p { margin-top: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); }
.ways li .w-for { margin-top: 0; color: var(--color-ink); font-weight: var(--weight-strong); }
.ways-note { margin-top: var(--space-6); max-width: var(--max-body); color: var(--color-muted); }

/* P2-17, moved in R5 (marketing-psych S-1): the self-checks block now closes the Problem section; the FAQ keeps a link back */
.checks { max-width: var(--max-media); margin: var(--space-8) auto 0; padding: var(--space-5); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-frame); }
.checks h3 { font-size: var(--text-figure); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.fc-intro { margin-top: var(--space-2); color: var(--color-muted); }
@media (min-width: 900px) { .checks .self-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); max-width: none; } }
.faq-back { font-size: var(--text-caption); font-weight: var(--weight-strong); }
.faq-back a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-ink); text-underline-offset: var(--space-1); }
@media (min-width: 900px) { .faq-back { grid-column: 2; } }

/* P2-14: "See it" link runs at a tighter pitch (about 29px per line: still >= the 24px WCAG 2.2 target size) */
.see { line-height: calc(var(--leading-body) * 1.25); }
.see a { padding: var(--space-2) 0; } /* panel r3 P2-7: 32px+ hit area in dense See-it rows */

/* P2-16 (V1, desktop): the studio portrait sits inside the dark frame instead of bleeding to its edges */
@media (min-width: 981px) {
  [data-skin="v1"] .hm-photo { margin: var(--space-4) var(--space-4) 0; border-radius: var(--radius-s); }
  [data-skin="v1"] .hm-cap { margin: calc(var(--space-4) + var(--space-3)); margin-bottom: var(--space-3); }
}

/* P2-19: reveals settle faster */
html.motion [data-reveal] { transition-duration: var(--dur-base); }

/* =====================================================================================
   ROUND 5 MERGE (2026-10-11, copy/r5-merge-spec.md). Tokens only (four R5 tokens added with
   justifications in tokens.css). Owner's round-5 instruction: the living element and the contrast
   video are the two autoplay exceptions (section-treatments §0 Motion).
   ===================================================================================== */

/* S3 Problem: living element "one line through four stations" (output/living-elements-2026-10-11/README.md).
   Decorative (aria-hidden); JS plays it only in view; reduced motion = the poster still only. */
.s-problem .living-line { max-width: var(--max-media); margin: var(--space-8) auto 0; }
.living-line:not(.is-ready) { display: none; } /* JS fills it near view; no JS = nothing decorative to show */
.living-frame { position: relative; aspect-ratio: var(--ratio-living); overflow: hidden; background: var(--color-living-plate); }
.living-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.living-cap { margin-top: var(--space-3); font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
[data-skin="v1"] .living-frame { background: var(--color-bg); -webkit-mask-image: radial-gradient(closest-side, var(--color-living-plate) 62%, transparent 100%); mask-image: radial-gradient(closest-side, var(--color-living-plate) 62%, transparent 100%); }
[data-skin="v1"] .living-cap { text-align: center; font-family: var(--font-mono); letter-spacing: var(--track-mono); } /* design P2-4: on the copy edge */
@media (max-width: 640px) { .living-frame { aspect-ratio: var(--ratio-living-sm); } .s-problem .living-line { margin-top: var(--space-7); } .checks { margin-top: var(--space-7); } }
.s-contrast .checks { margin-left: 0; } /* R5 audit: the checks block now leads into the contrast CTA row (self-audit, then book), on the copy edge */

/* S3b Contrast: just a media buyer vs a growth marketer. The table is the content (and the
   reduced-motion version); the skin-matched Remotion render above it is decorative. */
.s-contrast .sec-head h2 { max-width: 24ch; }
.cv { display: none; max-width: var(--max-media); margin-bottom: var(--space-7); }
.cv.is-ready { display: block; }
.cv-frame { aspect-ratio: var(--ratio-contrast); overflow: hidden; background: var(--color-bg); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-frame); }
.cv-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-ctl { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-top: var(--space-3); padding: 0 var(--space-4); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--r-cta); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-caption); font-weight: var(--weight-strong); cursor: pointer; }
.cv-ctl:hover { background: var(--color-surface); }
.cv.is-rm .cv-frame { display: none; }
.cv.is-rm.is-shown .cv-frame { display: block; }
.cv.is-rm .cv-ctl { margin-top: 0; }
.ctable { width: 100%; max-width: var(--max-media); border-collapse: collapse; table-layout: fixed; }
.ctable caption { caption-side: top; padding-bottom: var(--space-3); text-align: left; font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--color-muted); }
.ctable thead th { width: 42%; padding: 0 var(--space-4) var(--space-3) 0; text-align: left; vertical-align: bottom; font-family: var(--font-display); font-size: var(--text-lead); font-weight: var(--weight-heading); line-height: var(--leading-snug); border-bottom: var(--rule-w) solid var(--color-line-strong); }
.ctable thead th.c-gm { width: 58%; padding-right: 0; }
.ctable .c-stop { padding: var(--space-5) 0 var(--space-2); text-align: left; font-size: var(--text-caption); font-weight: var(--weight-strong); line-height: var(--leading-snug); color: var(--color-ink); }
.ctable td { padding: 0 var(--space-4) var(--space-4) 0; vertical-align: top; line-height: var(--leading-snug); border-bottom: var(--rule-w) solid var(--color-line); }
.ctable td.c-mb { color: var(--color-muted); }
.ctable td.c-gm { padding-right: 0; color: var(--color-ink); }
.c-see { display: block; margin-top: var(--space-1); font-size: var(--text-caption); }
.c-see a { display: inline-block; padding: var(--space-2) 0; color: var(--color-ink); text-underline-offset: var(--space-1); }
.c-close { margin-top: var(--space-7); max-width: var(--max-body); font-size: var(--text-lead); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.c-end { margin-top: var(--space-5); max-width: 26ch; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--track-h3); }
.c-fair { margin-top: var(--space-5); max-width: var(--max-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); }
.s-contrast .after { margin-top: var(--space-7); }
@media (min-width: 900px) { .ctable td { padding-bottom: var(--space-5); } }
@media (max-width: 640px) { /* R5 audit (red-team P1-3): the cell proof links show at every width */
  .ctable .c-stop { padding-top: var(--space-4); }
  .ctable td { padding-bottom: var(--space-3); }
  .c-close { margin-top: var(--space-6); }
}
[data-skin="v1"] .s-contrast { border-top: var(--rule-w) solid var(--color-line); }
[data-skin="v1"] .cv-frame { border-radius: var(--radius-l); }
[data-skin="v1"] .ctable caption, [data-skin="v1"] .ctable .c-stop { font-family: var(--font-mono); font-weight: var(--weight-mono); letter-spacing: var(--track-mono); }
[data-skin="v1"] .cv-ctl { font-family: var(--font-mono); letter-spacing: var(--track-mono); }
[data-skin="v1"] .cv-ctl:hover { background: var(--color-bg); }

/* Ways now sits between Work and How (offer-architect S-1): same band as Work in V1, so it opens on a rule */
[data-skin="v1"] .s-ways { border-top: var(--rule-w) solid var(--color-line); }

/* Final CTA: the mechanism line and "What I'll be looking for" */
.final-why { margin-top: var(--space-4); max-width: var(--max-body); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--color-muted); }
.call-looks { margin-top: var(--space-3); display: grid; gap: var(--space-2); max-width: var(--max-body); }
.call-looks li { position: relative; padding-left: var(--space-5); line-height: var(--leading-snug); }
.call-looks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: var(--bullet); height: var(--bullet); background: var(--color-ink); }
[data-skin="v1"] .call-looks li::before { border-radius: 50%; }
.final-r .micro + .micro { margin-top: 0; }

/* /book/: what comes after the call (offer-architect O3), visible at every width */
.b-after { margin-top: var(--space-4); max-width: 46ch; font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-ink); }

/* =====================================================================================
   ROUND 5 AUDIT FIXES (2026-10-11, copy/r5-fix-spec.md). Tokens only; new tokens carry
   justifications in tokens.css. Item map: copy/r5-fix-log.md.
   ===================================================================================== */

/* inline links inside running copy and microcopy: 44px hit area without moving the line */
.tap-in { display: inline-block; padding: calc(var(--space-3) + var(--space-1) / 4) 0; margin: calc((var(--space-3) + var(--space-1) / 4) * -1) 0; color: var(--color-ink); text-underline-offset: var(--space-1); }
.micro a.tap-in { display: inline-block; min-height: 0; }

/* Ruling 1: contrast video, 4:5 render below 700px (16:9 at 700px and up) */
@media (max-width: 699px) {
  .cv { max-width: var(--max-narrow); }
  .cv-frame { aspect-ratio: var(--ratio-contrast-sm); }
}

/* Ruling 5: CTA tiering. Full weight: hero, contrast, How, final. Every other booking row is a compact text link */
.after-link .book-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.book-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-family: var(--font-display); font-size: var(--text-lead); font-weight: var(--weight-cta); line-height: var(--leading-snug); color: var(--color-accent); text-decoration: underline; text-decoration-thickness: var(--tile-w); text-underline-offset: var(--space-1); }
.book-link:hover { color: var(--color-cta-hover); }
.book-link .arr { width: var(--icon-m); height: var(--icon-m); flex: none; }
.book-note { font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.s-pillars .after-link { margin-top: var(--space-6); }
/* design P2-7: on the full-weight rows the microcopy sits centered under the button */
@media (min-width: 641px) {
  [data-skin="v1"] .after:not(.after-link) .cta-block { align-items: center; }
  [data-skin="v1"] .after:not(.after-link) .micro { text-align: center; margin-left: auto; max-width: 32ch; }
}

/* Ruling 6: band fixes that follow the re-band */
[data-skin="v1"] .s-final { background-color: var(--color-bg); }

/* Ruling 6: existing visuals break the text-only runs (How: the attribution log; interview: the test campaigns) */
.x-vis { max-width: var(--max-media); margin-top: var(--space-7); }
.s-how .x-vis + .ownership { margin-top: var(--space-7); }
.x-strip .p-crop { aspect-ratio: var(--ratio-strip); }
.crop-motion { object-position: 0 56%; transform: scale(var(--crop-motion-zoom)); transform-origin: 0 49%; } /* first two ad cards: ROAS plus the four scores */
.crop-t5 { object-position: 0 100%; transform: scale(var(--crop-t5-zoom)); transform-origin: 0 100%; } /* campaign names to total cost, down to "Total of 29 campaigns" */

/* Ruling 7: "Three ways" is one primary option plus two secondary rows, not three equal cards */
.ways li:first-child b { font-size: var(--text-h3); }
@media (min-width: 900px) {
  .ways { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ways li:first-child { grid-row: span 2; }
} /* design P2-15 */
@media (max-width: 640px) { [data-skin="v1"] .ways li { padding: var(--space-5); } }
[data-skin="v1"] .ways li:first-child { background: var(--color-surface); }

/* Ruling 8: pillar plates framed on each receipt's key figure (CSS window only; the lightbox shows the whole file) */
.crop-r1 { object-position: 100% 50%; transform: scale(var(--crop-r1-zoom)); transform-origin: 13% 100%; } /* Revenue and ROAS columns, Total row ($10,736,660 at 2.62) */
.crop-r8 { object-position: 0 0; transform: scale(var(--crop-r8-zoom)); transform-origin: 30% 100%; }

/* Ruling 13: /book/ invalid fields show the error border in every skin; the decline state has a way back */
[data-skin] .field input[aria-invalid="true"], [data-skin] .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
[data-skin] .field[aria-invalid="true"] .opt span { border-color: var(--color-error); }
.b-change { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0; border: 0; background: none; cursor: pointer; font-weight: var(--weight-strong); color: var(--color-ink); text-decoration: underline; text-underline-offset: var(--space-1); }
.book-val.is-declined .b-intro, .book-val.is-declined .reply, .book-val.is-declined .b-after, .book-val.is-declined .b-call, .book-val.is-declined .status2 { display: none; }
.note-l { display: block; margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-caption); font-weight: var(--weight-strong); }
.note-l + textarea { margin-top: 0; }

/* About: the Loom and the booking row are grid children (design P2-12: no dead left column in V1 at desktop) */
.about-grid > .vid, .about-grid > .after { margin-top: 0; max-width: var(--max-body); }
@media (min-width: 900px) {
  .about-grid > .vid, .about-grid > .after { grid-column: 2; }
  .about-grid .about-photo { grid-row: 1 / span 3; }
  [data-skin="v1"] .about-grid > .vid { grid-column: 1 / -1; max-width: var(--max-media); }
}

/* design P2-1: V1 in-flow statements step below the H2 */
[data-skin="v1"] .bridge, [data-skin="v1"] .c-end, [data-skin="v1"] .results > h3, [data-skin="v1"] .checks h3 { font-size: var(--text-h3-flow); }

/* design P2-2: proof-strip figures share one baseline grid at desktop */
@media (min-width: 1100px) {
  .facts a { justify-content: flex-start; }
  .f-num { min-height: calc(var(--text-stat) * var(--leading-display) * 2); display: flex; align-items: flex-end; }
  .f-rest { margin-top: var(--space-2); }
}

/* design P2-13: thin TikTok strips read as a row, not a hairline (CSS window; lightbox shows the whole strip) */
.tc-shot[data-open="t1"] .well, .tc-shot[data-open="t2"] .well, .tc-shot[data-open="t4"] .well { overflow: hidden; }
.tc-shot[data-open="t1"] img, .tc-shot[data-open="t2"] img, .tc-shot[data-open="t4"] img { object-fit: contain; object-position: 0 50%; transform: scale(var(--strip-zoom)); transform-origin: 0 50%; }

/* design P2-14: the collage takes its own full row at desktop */
@media (min-width: 1000px) {
  .tile-collage { grid-column: 1 / -1; }
  .tile-collage .thumb { aspect-ratio: var(--ratio-strip); }
}

/* design P2-18 (optional, applied): V1 at 641 to 980, the signal path leads the hero panel so it reaches the first view */
@media (min-width: 641px) and (max-width: 980px) {
  [data-skin="v1"] .sig { grid-area: 1 / 1; border-top: 0; border-bottom: var(--rule-w) solid var(--color-line-strong); }
  [data-skin="v1"] .hm-photo { grid-area: 2 / 1; }
  [data-skin="v1"] .hm-cap { grid-area: 2 / 1; }
}

/* R5 audit: the self-checks lead into the contrast CTA row; the 2026 block carries a compact booking row */
.s-contrast .checks + .after { margin-top: var(--space-7); }
.results + .after-link { margin-top: var(--space-6); }
.after-link + .results { margin-top: var(--space-8); }

/* Ruling 9 (obsession): one numeral recipe per skin across the hero deck, the pillars and (V1) the scope groups.
   The contrast table dropped its 01 to 06 stop numerals. */
[data-skin="v1"] .deck .ix, [data-skin="v1"] .g-ix { display: inline-grid; place-items: center; width: calc(var(--space-5) + var(--space-1) / 2); height: calc(var(--space-5) + var(--space-1) / 2); border-radius: var(--radius-s); background: var(--color-ink); color: var(--color-bg); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--weight-mono); letter-spacing: 0; }
[data-skin="v1"] .deck li { align-items: center; }
[data-skin="v1"] .g-ix { margin-bottom: var(--space-3); }

/* R14 agency receipt (2026-10-11): tall archive capture, framed by CSS on the date bar, logo and acquisition line */
#r13 .well { aspect-ratio: 1280 / 960; overflow: hidden; }
#r13 .well img { object-fit: cover; object-position: 50% 0; }


/* =====================================================================================
   S3 Problem: "one line" flow graphic (round 6e, owner: "design a better html graphic here with
   icons"). Replaces the handoffs loop video (files kept on disk). One SVG rect is the line: it runs
   through the four station nodes and loops back under them through the return badge. A dash travels
   it; site.js times each node's glow to the dash. Phone: a vertical line through the nodes.
   V1 keeps lime for booking only, so its flow colour is the ink.
   ===================================================================================== */
.flow { --fl-c: var(--color-accent); --fl-node: 56px; --fl-top: 20px; --fl-t: 9s; --fl-gap: var(--space-4);
  position: relative; max-width: var(--max-media); margin: var(--space-8) auto 0; padding: var(--space-6) var(--space-5) var(--space-6);
  border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l);
  background: radial-gradient(color-mix(in srgb, var(--color-ink) 7%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--color-surface, var(--color-bg)); overflow: hidden; }
[data-skin="v1"] .flow { --fl-c: var(--color-ink); }
.fl-head { display: grid; gap: var(--space-2); margin: 0 0 var(--space-6); text-align: center; }
.fl-kick { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); }
.fl-cap { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--track-h3); color: var(--color-ink); text-wrap: balance; }
.fl-track { position: relative; padding-inline: var(--space-6); }
.fl-stations { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fl-gap); margin: 0; padding: 0; list-style: none; }
.fl-st { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--fl-top); min-width: 0; }
.fl-node { position: relative; display: grid; place-items: center; width: var(--fl-node); height: var(--fl-node); border-radius: 50%; color: var(--color-ink);
  background: var(--color-bg); border: var(--rule-w) solid var(--color-line-strong); }
.fl-no { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--track-label); color: var(--color-muted); }
.fl-t { margin: var(--space-1) 0 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--color-ink); }
.fl-d { margin: var(--space-2) 0 0; max-width: 26ch; font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.fl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: var(--space-3) 0 0; }
.fl-chips span { padding: 2px 8px; border: var(--rule-w) solid var(--color-line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-mono); color: var(--color-muted); background: var(--color-bg); white-space: nowrap; }
.fl-return { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); width: fit-content; margin: var(--space-7) auto 0; max-width: 60ch; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: var(--rule-w) solid var(--color-line-strong); border-radius: 999px; background: var(--color-bg); text-align: left; font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-muted); }
.fl-return b { color: var(--color-ink); font-weight: var(--weight-strong); }
.fl-rnode { --fl-node: 44px; color: var(--fl-c); border-color: color-mix(in srgb, var(--fl-c) 55%, transparent); }
.fl-rnode svg { width: 22px; height: 22px; }
/* the line: from node 1's centre to node 4's centre, down to the return badge's centre */
.fl-svg { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.fl-loop { top: calc(var(--fl-top) + var(--fl-node) / 2); left: 0; width: 100%; height: calc(100% - var(--fl-top) - var(--fl-node) / 2 - var(--fl-bot, 22px)); }
.fl-vert { display: none; }
.fl-base { fill: none; stroke: var(--color-line-strong); stroke-width: 1.5; }
.fl-pulse { fill: none; stroke: var(--fl-c); stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px var(--fl-c)); } /* site.js sets the dash and runs it */
.fl-pulse.is-on { opacity: 1; }
.fl-p2.is-on { opacity: .55; }
@keyframes fl-glow {
  0%, 5% { color: var(--fl-c); border-color: var(--fl-c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fl-c) 16%, transparent), 0 0 28px color-mix(in srgb, var(--fl-c) 35%, transparent); }
  15%, 100% { color: var(--color-ink); border-color: var(--color-line-strong); box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 760px) {
  .flow { --fl-node: 48px; --fl-top: 0px; padding: var(--space-5) var(--space-4); }
  .fl-head { text-align: left; }
  .fl-stations { grid-template-columns: 1fr; gap: var(--space-5); }
  .fl-st { display: grid; grid-template-columns: var(--fl-node) 1fr; column-gap: var(--space-3); align-items: start; text-align: left; }
  .fl-st .fl-node { grid-row: 1 / span 4; }
  .fl-no { margin-top: 2px; } .fl-d { max-width: none; } .fl-chips { justify-content: flex-start; }
  .fl-loop { display: none; }
  .fl-track { padding-inline: 0; }
  .fl-vert { display: block; top: calc(var(--fl-node) / 2); left: calc(var(--fl-node) / 2 - 1px); width: 2px; height: calc(100% - var(--fl-node) / 2 - var(--fl-bot, 22px)); }
  .fl-return { margin: var(--space-6) 0 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }
  .fl-rnode { flex: none; margin-left: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-pulse, .fl-packet { display: none; }
  .fl-st .fl-node { color: var(--fl-c); border-color: color-mix(in srgb, var(--fl-c) 55%, transparent); }
}

/* /book/: free-text box under "Other" in "Where do you think it's breaking?" (round 6e) */
.other-in { margin-top: var(--space-3); }
.other-in .note-l { display: block; margin-bottom: var(--space-2); }

/* R6f: flow graphic, more motion. Stations glow + ripple when the packet arrives (.lit/.hit from
   site.js), the packet rides the line with its event label, the grid drifts, and on entry the line
   draws itself and the stations pop in one by one. All of it is off under reduced motion. */
.fl-node { transition: color .35s, border-color .35s, box-shadow .5s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.fl-node.lit { color: var(--fl-c); border-color: var(--fl-c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fl-c) 16%, transparent), 0 0 32px color-mix(in srgb, var(--fl-c) 38%, transparent); transform: scale(1.08); }
.fl-node::before, .fl-node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--fl-c); opacity: 0; pointer-events: none; }
.fl-node.hit::before { animation: fl-ring 1s cubic-bezier(.2,.7,.3,1) forwards; }
.fl-node.hit::after { animation: fl-ring 1s .18s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fl-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.fl-node svg { transition: transform .45s cubic-bezier(.3,1.8,.5,1); }
.fl-node.lit svg { transform: scale(1.12) rotate(-6deg); }
.fl-trk .fl-node.lit svg { transform: scale(1.12) rotate(90deg); }
.fl-st .fl-t { transition: color .35s; }
.fl-st:has(.fl-node.lit) .fl-chips span { border-color: color-mix(in srgb, var(--fl-c) 45%, var(--color-line)); color: var(--color-ink); }
.fl-chips span { transition: border-color .4s, color .4s; }
.fl-packet { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.fl-packet.is-on { opacity: 1; }
.fl-packet i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--fl-c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-c) 22%, transparent), 0 0 18px 4px color-mix(in srgb, var(--fl-c) 55%, transparent); }
.fl-packet b { position: absolute; left: 0; bottom: 12px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-label); letter-spacing: var(--track-mono);
  color: var(--color-bg); background: var(--fl-c); transition: opacity .25s; }
.fl-packet.vert b { opacity: 0; }
.flow { animation: fl-drift 14s linear infinite; }
@keyframes fl-drift { from { background-position: 0 0, 0 0; } to { background-position: 22px 22px, 0 0; } }
/* entrance */
.flow.fl-arm:not(.fl-in) .fl-st, .flow.fl-arm:not(.fl-in) .fl-return { opacity: 0; transform: translateY(14px) scale(.96); }
.fl-st, .fl-return { transition: opacity .6s, transform .7s cubic-bezier(.2,.9,.3,1.2); }
.flow.fl-in .fl-st { transition-delay: calc(.35s + var(--i, 0) * .22s); }
.flow.fl-in .fl-return { transition-delay: 1.35s; }
@media (prefers-reduced-motion: reduce) {
  .flow { animation: none; }
  .flow .fl-st, .flow .fl-return { opacity: 1 !important; transform: none !important; transition: none; }
  .fl-node, .fl-node svg { transition: none; }
}

/* R6g: About CTA row sits in the text column in every skin. The sticky photo can travel to the
   bottom of the grid, so a full-width row under it got covered (owner screenshot 2026-10-19). */

/* R6g: hero event log types itself out (V1). The active line's ">" turns lime, a block cursor
   blinks while it types, and a check appears when it's done. Static under reduced motion. */
.log .ok { margin-left: .5em; color: var(--color-accent); opacity: 0; transition: opacity .3s; }
.sig.running .log li.done .ok { opacity: .9; }
.sig.running .log li.now .ar { color: var(--color-accent); }
.sig.running .log li.typing .tx::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--color-accent); animation: tm-blink .9s steps(1) infinite; }
.sig.running .log li { transition: opacity .35s, color .35s; }
@keyframes tm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .log .ok { opacity: .9; } }

/* R6g: owner line on the agency card (R14) */
.rc-why { margin-top: var(--space-2); max-width: 60ch; font-size: var(--text-caption); line-height: var(--leading-snug); color: var(--color-ink); }

/* R6g: terminal wordmark (owner pick, logo-c-terminal). Live text, not an image: lime prompt,
   lowercase mono name, blinking lime block cursor. It types itself once per session (the inline head
   script adds .tm-type to <html> before first paint). Lime here is the owner's logo colour, so it isn't limited to booking. */
.wordmark.tm { gap: .55ch; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-body); letter-spacing: 0; }
.tm-p { color: var(--color-accent); font-weight: 700; }
.tm-t { display: inline-block; overflow: hidden; white-space: nowrap; color: var(--color-ink); }
.tm-c { display: inline-block; width: .6em; height: 1.1em; margin-left: .1ch; background: var(--color-accent); animation: tm-blink 1.05s steps(1) infinite; }
.wordmark.tm:hover .tm-t { color: var(--color-accent); }
.tm-type .wordmark.tm .tm-t { width: 0; animation: tm-typing 1.1s steps(20, end) .25s forwards; }
@keyframes tm-typing { to { width: 20ch; } }
.f1.tm { gap: .55ch; }
.f1.tm .tm-p { font-weight: 700; }
@media (max-width: 380px) { .wordmark.tm { font-size: var(--text-caption); } }
@media (prefers-reduced-motion: reduce) { .tm-c { animation: none; } .tm-type .wordmark.tm .tm-t { width: auto; animation: none; } }

/* =====================================================================================
   S5d Stack (round 6h). A terminal panel: the command types itself, the tool count runs up,
   categories cascade in and each tool tag pops in like `ls` output. site.js adds .sk-in on view.
   Static (everything shown) without JS or under reduced motion.
   ===================================================================================== */
.sk-term { margin-top: var(--space-6); padding: var(--space-5); border: var(--rule-w) solid var(--color-line-strong); border-radius: var(--radius-l);
  background: radial-gradient(color-mix(in srgb, var(--color-ink) 6%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--color-surface, var(--color-bg)); font-family: var(--font-mono); }
.sk-cmd { margin: 0; font-size: var(--text-caption); color: var(--color-ink); white-space: nowrap; overflow: hidden; }
.sk-typed { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.sk-cmd .tm-c { vertical-align: -0.15em; }
.sk-sum { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-caption); color: var(--color-muted); }
.sk-sum b { color: var(--color-ink); font-weight: 600; }
.sk-ok { color: var(--color-accent); }
.sk-count { font-variant-numeric: tabular-nums; }
.sk-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sk-term { padding: var(--space-6); } }
.sk-cat { min-width: 0; padding: var(--space-4); border: var(--rule-w) solid var(--color-line); border-radius: var(--radius-s, 10px); background: var(--color-bg); transition: border-color .3s; }
.sk-cat:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line)); }
.sk-h { display: flex; align-items: baseline; gap: .6ch; margin: 0 0 var(--space-3); font-size: var(--text-caption); }
.sk-path { color: var(--color-accent); }
.sk-name { color: var(--color-ink); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-body); }
.sk-n { margin-left: auto; color: var(--color-muted); }
.sk-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-tools li { padding: 3px 9px; border: var(--rule-w) solid var(--color-line-strong); border-radius: 999px; font-size: 11.5px; letter-spacing: var(--track-mono); color: var(--color-muted); transition: color .25s, border-color .25s, transform .25s; }
.sk-tools li:hover { color: var(--color-ink); border-color: var(--color-accent); transform: translateY(-1px); }
/* motion, only once JS has armed it */
.sk-arm .sk-typed { width: 0; }
.sk-arm.sk-in .sk-typed { animation: sk-type 1s steps(30, end) .1s forwards; }
@keyframes sk-type { to { width: 30ch; } }
.sk-arm .sk-sum, .sk-arm .sk-cat { opacity: 0; transform: translateY(10px); }
.sk-arm.sk-in .sk-sum { opacity: 1; transform: none; transition: opacity .4s 1.05s, transform .5s 1.05s; }
.sk-arm.sk-in .sk-cat { opacity: 1; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.1), border-color .3s; transition-delay: calc(1.2s + var(--i) * .09s), calc(1.2s + var(--i) * .09s), 0s; }
.sk-arm .sk-tools li { opacity: 0; transform: scale(.85); }
.sk-arm.sk-in .sk-tools li { opacity: 1; transform: none; transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1), color .25s, border-color .25s;
  transition-delay: calc(1.35s + var(--i) * .09s + var(--j) * .035s), calc(1.35s + var(--i) * .09s + var(--j) * .035s), 0s, 0s; }
.sk-arm.sk-in .sk-tools li:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .sk-arm .sk-typed { width: auto; } .sk-arm .sk-sum, .sk-arm .sk-cat, .sk-arm .sk-tools li { opacity: 1; transform: none; }
  .sk-term .tm-c { animation: none; }
}
@media (min-width: 1100px) { .sk-cat:nth-child(2), .sk-cat:nth-child(6) { grid-column: span 2; } } /* 10 cards fill a 3-col grid: [ads][track x2] / [pages][crm][email] / [ai-img x2][ai] / [research][ecom][ops] */