/* Self-hosted brand fonts for the letter and pricing pages (the WP-path @font-face
   in design-tokens.css 404s on this static site; these rules serve the real files). */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations');font-weight:300 800;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3-300.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3-600.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/source-sans-3-700.woff2') format('woff2');font-weight:700;font-display:swap;}

/* Long-form letter styles - PodControl home 2026-10-15
   Extends design-tokens.css + components.css. Zero em dashes in content values. */

.letter-main{max-width:var(--measure-letter,700px);margin-left:auto;margin-right:auto;padding:0 24px;}
.letter-wide{max-width:var(--measure-wide,940px);margin-left:auto;margin-right:auto;padding:0 24px;}

/* Hero */
.lf-eyebrow{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--color-signal);text-transform:uppercase;margin-bottom:14px;}
.lf-prehead{font-size:16px;color:#bad0d5;margin-bottom:18px;max-width:520px;margin-left:auto;margin-right:auto;}
.chapter-hero h1{max-width:560px;margin-left:auto;margin-right:auto;}
.lf-sub{font-size:19px;line-height:1.6;color:#dbe6ee;max-width:600px;margin:0 0 14px;margin-left:auto;margin-right:auto;}
.lf-qualifier{font-size:15px;color:#a3bec6;max-width:560px;margin-left:auto;margin-right:auto;}

/* Reading rhythm */
.letter-main h2{font-size:27px;line-height:1.2;margin:0 0 18px;}
.letter-main h3{font-size:20px;margin:26px 0 10px;}
.letter-main p{font-size:17.5px;line-height:1.7;margin:0 0 18px;}
.letter-main ul,.letter-main ol{padding-left:24px;margin:0 0 18px;}
.letter-main li{margin-bottom:10px;line-height:1.65;}
.salutation{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:24px;}

/* Boxes and lists */
.cost-box{background:var(--color-surface);border:1px solid var(--color-rule);border-left:3px solid var(--color-signal);border-radius:6px;padding:22px 26px;margin:26px 0;}
.cost-box .box-label{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--color-ink);margin-bottom:12px;}
.callout{background:#eff5f6;border-left:3px solid var(--color-wire);border-radius:6px;padding:18px 22px;font-size:16px;margin:22px 0;}
.checklist li{list-style:none;position:relative;padding-left:30px;}
.checklist li::before{content:"\2713";position:absolute;left:0;color:var(--color-signal);font-weight:700;}

/* Next-step line ending every section */
.mc-next{margin-top:26px;padding-top:16px;border-top:1px solid var(--color-rule);font-size:15.5px;color:var(--color-text-muted);}
.mc-next a{color:var(--color-signal);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.chapter-dark .mc-next{border-top-color:rgba(255,255,255,.14);}
.chapter-dark .mc-next a{color:var(--color-signal);}
.mc-next .arrow{font-family:var(--font-body);color:var(--color-signal);margin-right:6px;}

/* Proof furniture */
.lf-table{width:100%;border-collapse:collapse;margin:22px 0;background:var(--color-surface);font-size:15px;}
.lf-table th{text-align:left;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--color-ink);background:#eff5f6;padding:10px 12px;border-bottom:2px solid var(--color-rule);}
.lf-table td{padding:10px 12px;border-bottom:1px solid var(--color-rule);vertical-align:top;line-height:1.5;}
.lf-table .num{text-align:right;white-space:nowrap;}
.lf-table tr.hl td{background:#fdf5ef;font-weight:600;color:var(--color-ink);}
.src-note{font-size:13px;color:var(--color-text-muted);margin-top:-10px;}
.quote-block{border-left:3px solid var(--color-rule);padding:4px 0 4px 18px;margin:20px 0;font-size:16px;color:var(--color-text-muted);}
.quote-block .who{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--color-ink);}

/* Stack grid */
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:26px 0;}
.stack-grid div{font-size:15.5px;padding-left:20px;position:relative;line-height:1.55;}
.stack-grid div::before{content:"\2022";position:absolute;left:2px;color:var(--color-signal);font-weight:700;}
@media (max-width:640px){.stack-grid{grid-template-columns:1fr;}}

/* Guarantees */
.seals{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0;}
@media (max-width:640px){.seals{grid-template-columns:1fr;}}
.seal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:24px;}
.seal .seal-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--color-signal);color:#fff;font-weight:700;margin-bottom:12px;}
.seal h3{color:#fff;font-size:19px;margin:0 0 10px;}
.seal p{color:#d8e6e8;font-size:15.5px;margin:0;}

/* 90-day stakes */
.stakes-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden;margin:26px 0;}
@media (max-width:700px){.stakes-grid{grid-template-columns:1fr;}}
.stakes-col{padding:26px;}
.stakes-col.wait{background:rgba(218, 123, 70,.09);border-right:1px solid rgba(255,255,255,.16);}
@media (max-width:700px){.stakes-col.wait{border-right:none;border-bottom:1px solid rgba(255,255,255,.16);}}
.stakes-col.act{background:rgba(62, 156, 201,.09);}
.stakes-col h3{font-size:15px;margin:0 0 16px;color:#fff;letter-spacing:.04em;}
.stakes-col.wait h3{color:#e7a987;}
.stakes-col.act h3{color:#95c9e1;}
.stakes-col li{font-size:15.5px;color:#d8e6e8;margin-bottom:13px;}

/* FAQ */
.lf-faq details{border-bottom:1px solid var(--color-rule);}
.lf-faq details:first-child{border-top:1px solid var(--color-rule);}
.lf-faq summary{font-family:var(--font-display);font-weight:600;font-size:17.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;color:var(--color-ink);}
.lf-faq summary::-webkit-details-marker{display:none;}
.lf-faq summary::after{content:"+";font-size:22px;color:var(--color-signal);flex-shrink:0;}
.lf-faq details[open] summary::after{content:"\2212";}
.lf-faq details p{font-size:15.5px;color:var(--color-text-muted);margin:0 0 16px;max-width:640px;}

/* Become grid + close */
.become-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0;}
@media (max-width:700px){.become-grid{grid-template-columns:1fr;}}
.become-grid>div{border-top:2px solid var(--color-signal);padding-top:12px;}
.become-grid .k{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--color-signal);margin-bottom:8px;}
.become-grid p{color:#d8e6e8;font-size:15px;margin:0;}
.cta-block{text-align:center;margin:36px 0 20px;padding:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:8px;}
.cta-block .btn{min-height:52px;display:inline-flex;align-items:center;}
.cta-block .guarantee-line{margin-top:14px;font-size:14px;color:#a3bec6;}
.sign-off{margin-top:30px;}
.sign-off .name{font-style:italic;}
.ps{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:15.5px;color:#ccdcdf;}

/* Sticky mobile CTA bar */
@media (max-width:768px){
  .mobile-cta-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--color-deep-ink);border-top:1px solid rgba(255,255,255,.16);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;}
  .mobile-cta-bar a{width:100%;text-align:center;}
  .mobile-cta-bar .bar-note{font-size:12.5px;color:#A2BFC9;text-align:center;margin-top:6px;}
  body{padding-bottom:104px;padding-bottom:calc(104px + env(safe-area-inset-bottom));}
}
@media (min-width:769px){.mobile-cta-bar{display:none;}}

/* Buttons in the letter get real tap targets */
.letter-main .btn,.chapter .btn{min-height:48px;display:inline-flex;align-items:center;gap:8px;}

/* The launch ladder (pricing page) */
.ladder{display:grid;gap:10px;margin:26px 0;}
.rung{display:grid;grid-template-columns:96px 1fr 74px;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-surface);}
.rung .rlabel{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--color-text-muted);text-transform:uppercase;}
.rung .rbar{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--color-wire),var(--color-signal));}
.rung .rprice{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--color-ink);text-align:right;white-space:nowrap;}
.rung.now{border-color:var(--color-signal);background:#fdf5ef;}
.rung.now .rlabel{color:var(--color-signal);}
.rung.last{border-style:dashed;}
.rung .rtag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#fff;background:var(--color-signal);border-radius:3px;padding:2px 6px;vertical-align:middle;letter-spacing:.05em;}
@media (max-width:560px){.rung{grid-template-columns:72px 1fr 60px;gap:10px;padding:8px 10px;}.rung .rprice{font-size:17px;}}
.ladder-note{font-size:13.5px;color:var(--color-text-muted);margin-top:-8px;}

/* Render fixes 2026-10-15: body font + dark-context overrides */
.site-main{font-family:var(--font-body);}
.chapter-dark .trust-item{color:#bad0d5;}
.chapter-dark .mc-next{color:#ccdcdf;}
.chapter-dark .callout{background:rgba(255,255,255,.06);color:#d8e6e8;border-left-color:var(--color-wire);}
.chapter-dark .callout p, .chapter-dark .callout li{color:#d8e6e8;}
.chapter-dark .lf-table th{background:rgba(255,255,255,.08);color:#e9f1f3;}
.chapter-dark .lf-table td{color:#d8e6e8;border-bottom-color:rgba(255,255,255,.12);}
.chapter-dark .lf-table{background:transparent;}

/* ===== 2026-10-15 critic-batch additions (scoped overrides only; shared files untouched) ===== */
/* A1: pricing plans table - desktop min-width restored via CSS; <=640px becomes per-plan cards using existing data-label attrs */
@media (min-width:641px){table.cmp{min-width:720px;}}
@media (max-width:640px){
  table.cmp{min-width:0;width:100%;}
  .cmp thead{display:none;}
  .cmp tr{display:block;margin:0 0 18px;padding:14px 16px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper);}
  .cmp th{display:block;text-align:left;font-size:18px;padding:0 0 8px;}
  .cmp th .for{display:block;font-weight:400;font-size:13px;}
  .cmp td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:right;border:0;padding:6px 0;}
  .cmp td::before{content:attr(data-label);font-weight:600;text-align:left;color:var(--color-text-muted);flex:1;}
  .cmp td.act{justify-content:center;margin-top:8px;}
  .cmp td.act::before{content:"";}
  .cmp td.act .btn{width:100%;}
}
/* A9: contrast - ink labels on signal fills; safe signal on light text; dark hover fix; footer legibility */
.btn.btn-primary{color:var(--color-ink);}
.rung .rtag,.seal .seal-n{color:var(--color-ink);}
section:not(.chapter-dark) .mc-next a,
section:not(.chapter-dark) .mc-next .arrow{color:#9E5424;}
section:not(.chapter-dark) .lf-faq summary::after{color:#9E5424;}
.chapter-dark .btn-secondary{color:var(--color-paper);border-color:rgba(255,255,255,.45);}
.chapter-dark .btn-secondary:hover:not(:disabled){background:var(--color-paper);border-color:var(--color-paper);color:var(--color-deep-ink);}
.footer .footer-bottom,.footer .footer-bottom a{color:#A2BFC9;}
/* A7: skip-link reveal on focus */
.sr-only:focus{position:fixed;top:10px;left:10px;z-index:200;width:auto;height:auto;padding:10px 18px;clip:auto;clip-path:none;overflow:visible;background:var(--color-signal);color:var(--color-ink);border-radius:8px;font-weight:600;text-decoration:none;}
/* A5: hamburger is a mobile-only control */
@media (min-width:769px){.nav-cta .btn-ghost{display:none !important;}}

.btn.btn-primary:hover:not(:disabled){color:#0f2a36;}

/* ===== 2026-10-16 (W4): sales page presentation + one control page =====
   Owner walk fixes: centered measure, section rhythm, diagram figures,
   pricing section, zero inline styles on the home page. Colors come from
   the short brand tokens in design-tokens.css (--ink, --signal,
   --wire-deep, --paper, --rule). Appended last so it wins on order. */

/* Centered measure: hero text blocks get equal auto margins so the column
   sits centered on wide screens (the letter faces of this page). */
.lf-prehead, .lf-sub, .lf-qualifier, .chapter-hero h1 { margin-left:auto; margin-right:auto; }

/* Section rhythm: numbered anchors. The number and the rule are drawn in
   CSS (not text); reordering sections renumbers them automatically. */
.site-main { counter-reset: sec; }
.sec-anchor { display:flex; align-items:center; gap:10px; margin:2px 0 16px; }
.sec-anchor .sa-line { width:36px; height:3px; border-radius:2px; background:var(--signal); }
.sec-anchor .sa-num::before { counter-increment:sec; content:counter(sec,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.16em; color:var(--signal); }

/* Anchor targets clear the sticky nav when jumped to. */
[data-sec] { scroll-margin-top:88px; }

/* Inline proof facts read as artifacts, not prose. */
section:not(.chapter-dark) .letter-main span[data-proof],
section:not(.chapter-dark) .letter-main strong[data-proof] { background:rgba(218, 123, 70,.10); border-radius:3px; padding:0 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.chapter-dark .letter-main span[data-proof],
.chapter-dark .letter-main strong[data-proof] { background:rgba(218, 123, 70,.16); border-radius:3px; padding:0 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* Proof blocks as cards. */
.quote-block { background:var(--color-surface); border:1px solid var(--color-rule); border-left:3px solid var(--signal); border-radius:8px; padding:16px 20px; margin:18px 0; box-shadow:var(--shadow-sm); }
.stack-grid div { background:var(--color-surface); border:1px solid var(--color-rule); border-radius:8px; padding:10px 12px 10px 34px; }
.stack-grid div::before { left:14px; }
.lf-table { border:1px solid var(--color-rule); box-shadow:var(--shadow-sm); }
.lf-scroll { overflow-x:auto; }
.lf-t520 { min-width:520px; }
.lf-t640 { min-width:640px; }
.lf-link-signal { color:var(--color-signal); }

/* Migrated inline helpers (values preserved 1:1). */
.lf-cta-row { gap:1rem; justify-content:center; flex-wrap:wrap; }
.callout-toc { margin-top:26px; }
.toc-label { margin-bottom:8px; }
.toc-list { margin-bottom:0; }
.chapter-dark .on-dark { color:#fff; }
.chapter-dark .on-dark-muted { color:#d8e6e8; }

/* Figure slots. These are labelled wireframe diagrams drawn in CSS, not
   screenshots. To swap in a real product capture later, replace the inner
   element with an img and keep the figcaption. */
.fig { margin:30px 0; }
.fig-cap { font-size:13.5px; color:var(--color-text-muted); margin-top:10px; }
.fig-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-ink); background:var(--color-rule); border-radius:3px; padding:2px 6px; margin-right:8px; vertical-align:1px; }
.chapter-dark .fig-cap { color:#a3bec6; }

/* Figure 1: the three steps. */
.fig-strip { display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:center; gap:4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:20px 18px; }
.fs-panel { position:relative; border:1px dashed var(--color-border); border-radius:10px; padding:16px 12px 14px; min-height:92px; display:flex; flex-direction:column; gap:9px; background:var(--color-background); }
.fs-n::before { content:attr(data-n); position:absolute; top:-11px; left:10px; width:22px; height:22px; border-radius:50%; background:var(--signal); color:var(--color-ink); font-family:var(--font-display); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.fs-icon { width:26px; height:26px; position:relative; }
.fs-i-ingest { border:2px solid var(--wire-deep); border-radius:6px; }
.fs-i-ingest::after { content:""; position:absolute; left:50%; top:4px; width:0; height:0; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--wire-deep); }
.fs-i-search { border:2px solid var(--wire-deep); border-radius:50%; width:20px; height:20px; margin-top:2px; }
.fs-i-search::after { content:""; position:absolute; right:-1px; bottom:-5px; width:9px; height:2px; background:var(--wire-deep); transform:rotate(45deg); }
.fs-i-clip { border:2px solid var(--wire-deep); border-radius:6px; }
.fs-i-clip::after { content:""; position:absolute; left:9px; top:6px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid var(--wire-deep); }
.fs-bar { height:7px; border-radius:4px; background:var(--color-rule); }
.fs-arrow { height:2px; background:var(--color-border); position:relative; }
.fs-arrow::after { content:""; position:absolute; right:0; top:-3px; border-left:7px solid var(--color-border); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.w70 { width:70%; } .w60 { width:60%; } .w55 { width:55%; } .w45 { width:45%; } .w35 { width:35%; } .w80 { width:80%; }

/* Figure 2: the review queue. */
.fig-q { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:12px; padding:16px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; }
.fq-card { border:1px solid var(--color-border); border-radius:10px; padding:10px; background:var(--color-background); display:flex; flex-direction:column; gap:8px; }
.fq-thumb { height:44px; border-radius:6px; background:linear-gradient(135deg, var(--color-rule), var(--wire-deep)); opacity:.45; }
.fq-line { height:7px; border-radius:4px; background:var(--color-rule); }
.fq-line.short { width:60%; }
.fq-chips { display:flex; gap:6px; }
.fq-chip { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.fq-chip.ok { background:rgba(28,122,75,.14); color:#1c7a4b; }
.fq-chip.ok::before { content:"\2713"; }
.fq-chip.edit { background:rgba(62, 156, 201,.16); color:var(--wire-deep); }
.fq-chip.edit::before { content:"\270E"; }
.fq-chip.no { background:rgba(176,58,58,.12); color:#b03a3a; }
.fq-chip.no::before { content:"\2715"; }

/* Figure 3: the run receipt. */
.fig-rc { max-width:430px; margin:0 auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.rc-head { display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--color-border); }
.rc-dot { width:10px; height:10px; border-radius:50%; background:var(--signal); }
.rc-title { height:8px; width:42%; border-radius:4px; background:var(--color-rule); }
.rc-row { display:flex; align-items:center; gap:10px; }
.rc-bar { height:8px; border-radius:4px; background:var(--color-rule); }
.rc-mark { width:18px; height:18px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.rc-mark.ok { background:rgba(28,122,75,.14); color:#1c7a4b; }
.rc-mark.ok::before { content:"\2713"; }
.rc-mark.retry { background:rgba(218, 123, 70,.16); color:#9E5424; }
.rc-mark.retry::before { content:"\21BB"; }

/* Pricing section: vertical cards, the only prices on the page. */
.price-lede { font-size:17px; color:var(--color-text-muted); margin:0 0 24px; }
.price-grid { display:grid; gap:16px; margin:6px 0 20px; }
.price-card { display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; background:var(--color-surface); border:1px solid var(--color-rule); border-radius:12px; padding:22px 26px; box-shadow:var(--shadow-sm); }
.pc-head { flex:1 1 220px; min-width:0; }
.pc-name { font-family:var(--font-display); font-size:24px; line-height:1.1; margin:0 0 4px; color:var(--color-ink); }
.pc-for { font-size:14.5px; color:var(--color-text-muted); margin:0; }
.pc-specs { list-style:none; padding:0; margin:0; flex:0 1 auto; display:flex; gap:20px; }
.pc-specs li { font-size:15px; color:var(--color-ink); }
.pc-specs li::before { content:"\2713"; color:var(--color-signal); font-weight:700; margin-right:6px; }
.pc-price { flex:0 0 auto; display:flex; align-items:baseline; gap:10px; }
.pc-amount { font-family:var(--font-display); font-weight:700; font-size:38px; color:var(--color-ink); line-height:1; white-space:nowrap; }
.pc-flag { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink); background:var(--signal); border-radius:3px; padding:3px 7px; white-space:nowrap; }
.pc-climb { font-size:13px; font-weight:600; color:var(--color-text-muted); white-space:nowrap; }
.pc-cta { flex:0 0 auto; color:var(--color-ink); }
.pc-note { flex:1 1 100%; margin:2px 0 0; font-size:14px; color:var(--color-text-muted); }
.price-foot { margin:4px 0 0; font-size:14.5px; color:var(--color-text-muted); }
@media (max-width:700px) {
  .price-card { flex-direction:column; align-items:flex-start; }
  .pc-price { margin-top:2px; }
  .pc-cta { width:100%; text-align:center; }
  .pc-specs { flex-wrap:wrap; gap:8px 18px; }
}


/* ===== Wave 1 (2026-10-17): show-don't-tell stagecraft =====
   Additions only. Every new selector is scoped to this page's product
   figures and stat furniture. No copy touched. Colors from brand tokens.
   Appended last so it wins on order. */

/* ---- Product shot frame (desktop chrome around a real UI capture) ---- */
.shot { margin:34px 0; position:relative; }
.shot-frame { border:1px solid var(--color-rule); border-radius:14px; overflow:hidden; background:var(--color-background); }
.chapter-dark .shot-frame { border-color:rgba(255,255,255,.12); background:var(--color-deep-ink); }
.shot-chrome { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--color-surface); border-bottom:1px solid var(--color-rule); }
.chapter-dark .shot-chrome { background:var(--color-deep-ink-hover); border-bottom-color:rgba(255,255,255,.08); }
.shot-chrome span { width:10px; height:10px; border-radius:50%; background:var(--color-rule); opacity:.55; }
.shot-chrome span:nth-child(2){ background:var(--color-signal); opacity:.9; }
.shot-body { padding:0; }
.shot-body img { display:block; width:100%; height:auto; }
.cd { position:absolute; border-radius:50%; border:2px solid var(--color-wire); opacity:.35; }
.cd-a { top:22px; left:22px; width:18px; height:18px; }
.cd-b { top:22px; right:22px; width:14px; height:14px; }
.cd-c { bottom:22px; right:22px; width:12px; height:12px; }
.shot-hero .shot-body img { max-height:520px; object-fit:cover; }
.shot-run .shot-body img, .shot-review .shot-body img { max-height:420px; object-fit:cover; }

/* Anim (GIF) shots */
.shot-anim .shot-body img { width:100%; max-width:860px; height:auto; display:block; margin:0 auto; }
.shot-phone .shot-body img { max-width:430px; }

/* Before/after pair */
.ba { display:flex; align-items:center; gap:26px; justify-content:center; margin:34px 0; flex-wrap:wrap; }
.ba-item { border:1px solid var(--color-rule); border-radius:12px; overflow:hidden; background:var(--color-surface); }
.chapter-dark .ba-item { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.ba-item .shot-body img { display:block; width:100%; height:auto; }
.ba-arrow { writing-mode:vertical-rl; text-orientation:upright; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--color-text-muted); margin:0 8px; white-space:nowrap; }

/* Stat band */
.statband { display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; margin:26px 0; border:1px solid var(--color-rule); border-radius:12px; padding:20px 24px; background:var(--color-surface); }
.chapter-dark .statband { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.stat { min-width:150px; }
.stat-n { font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1; color:var(--color-ink); display:block; }
.chapter-dark .stat-n { color:#ffffff; }
.stat-l { font-size:13px; color:var(--color-text-muted); line-height:1.45; margin-top:6px; display:block; }
.stat-src { width:100%; font-size:11px; color:var(--color-text-muted); margin-top:14px; padding-top:10px; border-top:1px solid var(--color-rule); }

/* Trend diagram (figure) */
.fig-trend { margin:34px 0; }
.ft-wrap { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-surface); overflow-x:auto; }
.chapter-dark .ft-wrap { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.ft-lane { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-muted); white-space:nowrap; padding:6px 10px; border-radius:6px; background:var(--color-background); border:1px dashed var(--color-rule); flex:none; }
.ft-lane.hot { background:rgba(218,123,70,.10); color:var(--color-signal); border-color:rgba(218,123,70,.35); }
.ft-join { width:2px; height:26px; background:var(--color-rule); flex:none; margin:0 4px; }
.chapter-dark .ft-lane { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:#a3bec6; }
.chapter-dark .ft-lane.hot { background:rgba(218,123,70,.14); border-color:rgba(218,123,70,.30); }
.chapter-dark .ft-join { background:rgba(255,255,255,.08); }

/* Week strip diagram */
.fig-week { margin:34px 0; }
.wk { display:flex; align-items:center; gap:10px; padding:16px 20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-surface); overflow-x:auto; }
.chapter-dark .wk { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.wk-day { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); padding:6px 10px; border-radius:6px; background:var(--color-background); border:1px solid var(--color-rule); white-space:nowrap; flex:none; }
.wk-line { height:2px; background:var(--color-wire); flex:1 1 200px; margin:0 2px; }

/* Climb diagram */
.fig-climb { margin:34px 0; }
.cl { display:flex; gap:10px; padding:16px 20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-surface); overflow-x:auto; }
.chapter-dark .cl { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.cl-step { width:10px; height:10px; border-radius:50%; background:var(--color-rule); flex:none; }
.cl-step.now { background:var(--color-signal); box-shadow:0 0 0 4px rgba(218,123,70,.25); }

/* Quote grid */
.qgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:26px 0; }

/* Statement card */
.statement-card { border:1px solid var(--color-rule); border-radius:12px; padding:22px 26px; background:var(--color-surface); margin:26px 0; position:relative; }
.chapter-dark .statement-card { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.sig-mark { position:absolute; top:-10px; right:18px; width:20px; height:20px; border-radius:50%; background:var(--color-signal); color:var(--color-ink); font-family:var(--font-display); font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; }

/* Chart card (one-star bars) */
.chartcard { border:1px solid var(--color-rule); border-radius:12px; padding:22px 26px; background:var(--color-surface); margin:26px 0; }
.chapter-dark .chartcard { background:var(--color-deep-ink); border-color:rgba(255,255,255,.12); }
.cc-title { font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 14px; }
.cc-row { display:flex; align-items:center; gap:14px; margin:0 0 10px; }
.cc-lab { font-size:13px; color:var(--color-text-muted); min-width:170px; font-weight:500; }
.cc-bar { flex:1; height:10px; border-radius:5px; background:var(--color-rule); overflow:hidden; }
.cc-fill { height:100%; border-radius:5px; background:var(--color-signal); }
.cc-fill.hot { background:var(--color-signal); }
.cc-val { font-size:14px; font-weight:700; color:var(--color-ink); white-space:nowrap; min-width:56px; text-align:right; }
.chapter-dark .chartcard { background:var(--color-deep-ink); }
.chapter-dark .cc-lab, .chapter-dark .cc-val { color:#d8e6e8; }
.chapter-dark .cc-bar { background:rgba(255,255,255,.08); }

/* Byline card */
.byline { display:flex; align-items:flex-start; gap:18px; margin:26px 0; padding-top:6px; border-top:1px solid var(--color-rule); }
.byline-mono { font-family:var(--font-mono); font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--color-signal); line-height:1; flex:none; }
.byline-chips { display:flex; gap:10px; flex-wrap:wrap; }
.byline-chip { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); border:1px solid var(--color-rule); border-radius:12px; padding:3px 10px; background:var(--color-background); }
.chapter-dark .byline-chip { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); color:#a3bec6; }

/* Shot caption already covered by .fig-cap */

/* Responsive: stack shots full width on narrow screens */
@media (max-width:700px){
  .ba{flex-direction:column;align-items:stretch;}
  .ba-arrow{writing-mode:horizontal-tb;margin:6px 0 0;transform:rotate(0deg);}
  .statband{gap:14px;padding:16px 20px;}
  .stat-n{font-size:24px;}
}