/* Content rhythm: shared gutters, quieter decoration, clear reading surfaces. */
:root{
  --page-gutter:clamp(20px,4vw,64px);
  --reading:color-mix(in srgb,var(--marble) 84%,var(--ink-0));
}
.shell,.pad.shell{
  width:min(calc(100% - var(--page-gutter) * 2),1240px);
  max-width:1240px;
  margin-inline:auto;
  padding-inline:0;
}
.pad.shell{padding-block:clamp(48px,6vw,88px)}
.content-section{padding-block:clamp(48px,6vw,80px)}
.article-body{max-width:760px}
h1,h2,.sec-title{text-wrap:balance}
.wrap :is(h1,h2,h3,h4,p,blockquote,figcaption){text-shadow:none}
.benefit p,.step-copy p,.phase p,.scard p,.article-body p,.article-body li,
.price-card p,.price-includes li{color:var(--reading)}
.geo{opacity:.05}
.rosette{opacity:.055}
.spine{opacity:.28}
.article-card,.price-card{background-color:color-mix(in srgb,var(--ink-0) 76%,transparent)}
.article-body p+p{margin-top:20px}
.article-body a,.source-note a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:720px){
  .pad.shell{padding-block:44px}
  .content-section{padding-block:44px}
}
@media(prefers-reduced-motion:reduce){
  .geo,.rosette,.grain,.glow{animation:none}
}

/* Match the viewport and heading rhythm across landing and reading pages. */
html{scrollbar-gutter:auto}
h1,h2,.hero h1,.sec-title{letter-spacing:-.02em!important}
header .btn,header .menu a{letter-spacing:normal}

/* Five answer choices remain readable on narrow phones. */
.vdq-scale-btn .sl{font-family:var(--body);letter-spacing:0;overflow-wrap:normal;word-break:normal}
@media(max-width:720px){.vdq-scale{gap:5px}.vdq-scale-btn{padding:10px 2px;min-width:0}.vdq-scale-btn .sl{white-space:normal}}