/* Design A · "Reading room" (22-10): paper and ink, oxblood on light, brass on leather.
   Signature: section mark § on every kicker, the last word of each H1 in italic, an arched top on dark rooms. */
:root{
  --l-bg:#F3EEE3;--l-bg2:#E9E2D2;--l-fg:#1D1B16;--l-muted:#5E584C;--l-line:#CFC6B3;--l-surface:#FBF8F1;
  --d-bg:#241C17;--d-fg:#EFE7D6;--d-muted:#B9AE98;--d-line:#4A3F35;--d-surface:#2E251F;
  --acc:#7B2433;--acc-ink:#FBF8F1;--acc-text:#7B2433;
  --acc-d:#C9A867;--acc-d-ink:#1D1B16;--acc-d-text:#D4B676;
  --ok:#2E5E58;--ok-t:#2E5E58;--warn:#B07A12;--warn-t:#8A5D07;--bad:#9E2A2B;--bad-t:#9E2A2B;
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Sans",system-ui,sans-serif;
  --w-display:400;--lh-display:1.02;--ls-display:-.012em;
  --h1:clamp(52px,8.6vw,136px);--h1-sub:clamp(46px,6.4vw,96px);--h1-measure:11ch;
  --h2:clamp(36px,4.6vw,66px);--h3:clamp(23px,1.9vw,28px);
  --r-btn:3px;--r-card:6px;--r-field:6px;--r-field-in:3px;--r-chip:3px;--r-bar:0;
  --w-btn:500;--ls-btn:.01em;
  --kicker-font:500 12.5px/1.3 var(--f-body);--kicker-ls:.16em;
  --brand-font:400 27px/1 var(--f-display);--brand-ls:-.01em;
  --head-bg:rgba(243,238,227,.9);--head-fg:#1D1B16;--head-line:rgba(29,27,22,.12);--head-solid:#F3EEE3;
  --head-acc:#7B2433;--head-acc-ink:#FBF8F1;
  --menu-font:400 34px/1.15 var(--f-display);
  --hero-scrim:linear-gradient(to top,rgba(36,28,23,.94) 0%,rgba(36,28,23,.72) 30%,rgba(36,28,23,.28) 62%,rgba(36,28,23,.42) 100%);
  --hero-kicker:#D4B676;
  --field-shell:#FBF8F1;--field-bg:#fff;
  --engine-font:400 21px/1.2 var(--f-display);--engine-ls:0;
  --num-font:italic 400 46px/1 var(--f-display);
  --band-font:400 clamp(26px,2.7vw,38px)/1.2 var(--f-display);
  --us-bg:rgba(123,36,51,.07);--us-fg:#5C1A26;
  --plan-h:34px;--price-font:400 64px/1 var(--f-display);
  --faq-h:clamp(22px,1.8vw,26px);
  --ok-font:400 36px/1.1 var(--f-display);--run-font:400 30px/1.2 var(--f-display);
  --score-font:400 64px/1 var(--f-display);
}
h1 em,h2 em{font-style:italic;color:var(--a-text)}
.hero h1 em,.phead-photo h1 em{color:#E2C98F}
.kicker::before{content:"§";font:400 22px/0 var(--f-display);letter-spacing:0;text-transform:none;transform:translateY(1px)}
.wm{font-size:28px}
.mk{width:22px;height:22px}
.btn-ghost{border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
/* rules carry the room: a double rule above lists, like a ledger */
.points li:first-child,.proofs li:first-child,.trio li{border-top:3px double var(--line)}
.steps li{border-top:3px double var(--fg)}
.qa summary h3{font-weight:400}
.plan h3{font-weight:400}
.tbl{border-radius:var(--r-card)}
thead th{font-weight:500}
.compare .us{font-weight:500}
.band-line{border-radius:2px;border-left:3px solid var(--acc)}
.band-line::before{content:"“";display:block;height:.5em;margin:-.05em 0 .05em;color:var(--acc);font-size:2.1em;line-height:1}
.gsteps h2::before,.fixes li::before{font-size:40px}
/* dark rooms open with an arch, inset to the text column */
.shape::before{left:max(var(--gut),calc(50% - 620px));right:max(var(--gut),calc(50% - 620px));height:clamp(44px,6.5vw,104px);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(212,182,118,.35)}
.ring-fg{stroke-linecap:butt}
.score{font-size:68px}
.free{border-radius:var(--r-card)}
.rq-ok-h{color:var(--acc)}
/* phones: the copy covers the whole photo, so the scrim carries further up */
@media (max-width:759px){:root{--hero-scrim:linear-gradient(to top,rgba(36,28,23,.96) 0%,rgba(36,28,23,.86) 48%,rgba(36,28,23,.6) 74%,rgba(36,28,23,.45) 100%)}}
/* the shift portrait carries the same arch as the dark rooms */
@media (min-width:960px){.shot-shift{border-radius:999px 999px 0 0}}