/* ══════════════════════════════════════════════════════════
   AYLIO — shared stylesheet
   Palette is contrast-audited: every text/background pair
   used here meets WCAG 2.2 AA (4.5:1 body, 3:1 UI).
   ══════════════════════════════════════════════════════════ */
/* Self-hosted latin subsets — no third-party origin on the render path */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/fraunces.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: optional; src: url(/assets/fonts/inter.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica');size-adjust:108.6%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:87.8%}

:root{color-scheme:light;
  
  --green:#6cc04a;          /* fills/graphics ONLY — white on this is 2.26:1 */
  --green-cta:#3a7a24;      /* white on this = 5.26:1  AA */
  --green-cta-h:#2f6a1c;    /* white on this = 6.56:1  AA */
  --green-text:#3a7a24;     /* 5.26:1 on white, 4.96:1 on cream */
  --green-light:#8ed172;    /* on ink only */
  --green-pale:#eef7e7;
  --green-mist:#dcefd0;

  --ink:#14130f; --char:#2a2924;
  --text:#57544c;   /* 7.0:1 on white */
  --soft:#67635a;   /* 5.98:1 on white */
  --muted:#6b675e;  /* 5.63:1 on white */

  --paper:#fff; --cream:#faf8f3; --sand:#f4f1ea;
  --border:#ece8df; --rule:#ddd8cc;
  --field:#8c867c;          /* form-control borders — 3.61:1 on white, 3.45:1 on cream */
  --sh-cta:0 8px 22px rgba(58,122,36,.18);
  --sh-cta-h:0 12px 28px rgba(47,106,28,.24);

  --amber:#e8a23d;        /* star fill only */
  --amber-text:#8a5800;   /* 6.04:1 on white */
  --red:#b0402a;          /* 5.81:1 on white */
  --off:#767068;          /* 4.90:1 on white */
  --focus:#14130f;

  --sh-sm:0 1px 2px rgba(20,19,15,.05),0 1px 3px rgba(20,19,15,.04);
  --sh-md:0 6px 20px rgba(20,19,15,.06),0 2px 6px rgba(20,19,15,.04);
  --sh-lg:0 18px 50px rgba(20,19,15,.09),0 6px 16px rgba(20,19,15,.05);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:100px;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px; --readw:720px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(64px,9vw,110px);
  --sec-lg:clamp(76px,11vw,130px);
  --head-gap:clamp(34px,5vw,54px);
  --nav-h:64px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:3px}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
svg{flex:none}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li,figcaption,blockquote){text-wrap:pretty}
::selection{background:var(--green-mist);color:var(--ink)}
/* The translate="no" trademark shields must not create layout boxes: inside a
   flex parent (.faq-q, .sticky) a span splits the text into separate flex
   items and space-between scatters the sentence. display:contents removes the
   box, the text runs merge back into one anonymous item, and the translate
   attribute (an HTML semantic, not a CSS one) still applies. */
span[translate="no"]{display:contents}

.display{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-optical-sizing:auto;font-weight:600;line-height:1.05}
.d-xl{font-size:clamp(40px,6.2vw,72px);letter-spacing:-.032em;line-height:1.02}
.d-lg{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.024em;line-height:1.07}
.d-md{font-size:clamp(26px,3.3vw,36px);letter-spacing:-.018em;line-height:1.13}
.d-sm{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.008em;line-height:1.25}
/* The gap that was hand-patched with a dozen inline margin-tops. Zero
   specificity, so those patches still win where they exist. */
:where(h1,h2,h3).display + p{margin-top:14px}

/* Type roles, replacing an ad-hoc 9-value inline font-size scale. */
.t-fine{font-size:12.5px;line-height:1.6;color:var(--soft)}
.t-meta{font-size:13px;line-height:1.6;color:var(--soft)}
.t-body{font-size:14.5px;line-height:1.7;color:var(--text)}
.t-body-lg{font-size:15.5px;line-height:1.72;color:var(--text)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.read{max-width:var(--readw);margin:0 auto;padding-inline:var(--gut)}
.wrap .read{padding-inline:0}
.lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;color:var(--text)}
/* ── The twin-dot mark ──────────────────────────────────────
   The product is two openings; this is that, at every scale. One rule,
   parameterized by --dot-r (radius) and --dot-gap (center distance), so the
   family cannot drift apart again. */
.eyebrow::before,.prose h2::before,.h-dot::before,.callout h3::before,.forcard h3::before,.forcard h2::before,
.artcard .rd::before,.verdict h3::before,.dotmark::before{
  --dot-r:2.9px;--dot-gap:10px;content:"";
  width:calc(var(--dot-gap) + var(--dot-r)*2);height:calc(var(--dot-r)*2);
  background:radial-gradient(circle at var(--dot-r) 50%,currentColor var(--dot-r),transparent calc(var(--dot-r) + .3px)),
             radial-gradient(circle at calc(var(--dot-gap) + var(--dot-r)) 50%,currentColor var(--dot-r),transparent calc(var(--dot-r) + .3px))}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
.eyebrow::before{opacity:.9}
.eyebrow.mid{display:flex;justify-content:center}
.sec-head{text-align:center;max-width:660px;margin:0 auto var(--head-gap)}
/* Two-sentence headlines need room for each clause to hold its own line;
   at 660px they wrap into four ragged lines and orphan the last word. */
.sec-head.wide{max-width:820px}
/* Balance the remaining multi-line headings rather than leaving a short
   orphan on the final line. */
.display{text-wrap:balance}
.sec-head p{margin-top:14px}
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

/* reveal via animation (never transition — it clobbers hover transitions) */
.js .rv{opacity:0}
.js .rv.in{animation:reveal .7s var(--ease) both}
/* The hero is the LCP element. Reveal-hiding it until deferred JS + the
   observer + a .7s animation finish cost ~2s of LCP on throttled mobile
   (measured: FCP 2.0s vs LCP 4.2s). Above the fold paints immediately;
   the entrance animation stays for everything below. */
.js .hero .rv{opacity:1;animation:none}
/* Failsafe: the inline head script proves JS support, but hiding content and
   collapsing FAQ answers depends on site.js actually running. If it never
   does (blocked, offline, CDN hiccup), these fire at 2.5s and the page works
   without it. site.js cancels them by adding .enhanced as its first act. */
.js:not(.enhanced) .rv{animation:failsafe-show 0s 2.5s forwards}
.js:not(.enhanced) .faq-a{animation:failsafe-rows 0s 2.5s forwards}
.no-js .faq-a{grid-template-rows:1fr} /* no JS at all: answers simply stay open */
@keyframes failsafe-show{to{opacity:1}}
@keyframes failsafe-rows{to{grid-template-rows:1fr}}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}

/* Inch mark drawn by CSS so the DOM carries only the sr-only word (see site.js inches()).
   Second declaration is the alt-text form, silent to screen readers where supported. */
.geo-in::after{content:"\2033";content:"\2033" / ""}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;user-select:none;-webkit-user-select:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.on-ink :focus-visible,.on-ink:focus-visible{--focus:#fff}
.skip{position:fixed;top:-100px;left:50%;transform:translateX(-50%);z-index:300;background:var(--ink);color:#fff;
  padding:13px 26px;border-radius:var(--r-sm);font-weight:600;transition:top .18s}
.skip:focus{top:10px}
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1}
}

/* ── stars ── */
.rating{display:inline-flex;vertical-align:middle}
.rt{position:relative;display:inline-block;line-height:0;--star:15px;--gap:2px}
.rr{display:flex;gap:var(--gap)}
.rr svg{width:var(--star);height:var(--star);fill:currentColor}
.rr-e{color:#d9d3c6}
/* Inline links that opt out of the link color and mark themselves with an
   underline alone were drawing it in --green-mist (1.21:1 on paper) or
   --rule (1.42:1). An underline IS the affordance for those links, so it
   has to be visible: WCAG wants 3:1 for a non-text indicator. These two
   tokens exist for hairline borders and stay as they are; the underline
   gets its own token, dark enough to see. */
/* 3.38:1 on paper, 3.19:1 on cream, 3.00:1 on sand — clears 3:1 on every
   background the site uses. */
:root{--underline:#928b7d}
/* The graphic is rounded to the nearest HALF star — Amazon's convention, and
   Google's and Yelp's — while the exact figure (4.3) is printed beside it and
   is what the aria-label reads. 4.3 rounds to 4.5, so: four whole stars, which
   carry their four gaps with them, then half of the fifth.

   Measured in stars rather than as a percentage of the track. The old inline
   width:91% happened to land in about the right place at 15px, but the track
   is five stars PLUS four 2px gaps, so the same 91% drifted at the sticky
   bar's 12px stars. This is exact at any --star size.

   If the rating moves, change the 0.5 to the new rating rounded to the nearest
   half (4.0 → 0, 4.5 → 0.5, 5.0 → a full fifth star); check.py §6v checks it
   against the number the pages state. */
.rr-f{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--amber);
  width:calc(4 * (var(--star) + var(--gap)) + 0.5 * var(--star))}

/* ── announce + nav ── */
.announce{background:var(--ink);color:#fff;text-align:center;padding:9px var(--gut);font-size:12px;
  letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.announce b{font-weight:700}
.announce i{width:3px;height:3px;border-radius:50%;background:var(--green);display:inline-block}
@media (max-width:560px){.announce{gap:11px}}

@media (min-width:901px){header{position:sticky;top:0;z-index:100}}
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.87);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s}
/* Once it actually sticks, an .87-alpha bar over an ink section composites to a
   flat mid-grey. Opaque paper the moment it leaves the top of the page. */
.nav.scrolled{background:var(--paper);border-bottom-color:var(--border);box-shadow:0 4px 24px rgba(20,19,15,.05)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:21px;font-weight:600;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:9px}
.brand-logo{height:40px;width:auto;display:block}
.foot-brand .brand-logo{height:32px;filter:brightness(0) invert(1)}
@media (max-width:560px){.brand-logo{height:34px}}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-link{font-size:13.5px;color:var(--text);padding:9px 12px;border-radius:var(--r-sm);transition:color .15s,background .15s}
.nav-link:hover{color:var(--ink);background:var(--sand)}
.nav-link[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-cta{margin-left:8px;background:var(--green-cta);color:#fff;padding:11px 20px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  transition:background .2s,transform .2s,box-shadow .2s}
.nav-cta:hover{background:var(--green-cta-h);transform:translateY(-1px);box-shadow:var(--sh-cta-h)}
.navtog{display:none;width:42px;height:42px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.navtog:hover{background:var(--sand)}
@media (max-width:900px){
  .nav-links{display:none}
  .navtog{display:inline-flex}
  .no-js .nav-links,.js-failed .nav-links{display:flex;flex-wrap:wrap;gap:2px 14px;width:100%;padding-top:8px}
  .no-js .nav-in,.js-failed .nav-in{flex-wrap:wrap;height:auto;padding-block:10px}
  .nav.open .nav-links{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:12px var(--gut) 18px;background:var(--paper);
    border-bottom:1px solid var(--border);box-shadow:var(--sh-lg)}
  .nav.open .nav-link{padding:13px 12px;font-size:15px}
  .nav.open .nav-cta{margin:8px 0 0;justify-content:center;padding:14px 20px;font-size:15px}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:600;line-height:1.55;
  border-radius:var(--r-pill);transition:background .22s,transform .22s var(--ease),box-shadow .22s,border-color .22s}
.btn svg{transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn span[aria-hidden]{display:inline-block;transition:transform .22s var(--ease)}
.btn:hover span[aria-hidden]{transform:translateX(3px)}
.btn-primary:active,.nav-cta:active,.fitform button:active,.sticky a:active{
  transform:translateY(0);box-shadow:0 3px 10px rgba(58,122,36,.18);transition-duration:.05s}
.btn-ghost:active{transform:translateY(0);transition-duration:.05s}
.btn-primary{background:var(--green-cta);color:#fff;padding:16px 30px;box-shadow:var(--sh-cta)}
.btn-primary:hover{background:var(--green-cta-h);transform:translateY(-2px);box-shadow:var(--sh-cta-h)}
.btn-ghost{color:var(--ink);padding:15px 22px;border:1px solid var(--rule);background:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff;border-color:var(--ink)}
.btn-lg{padding:18px 38px;font-size:16.5px}
.buyline{font-size:13.5px;color:var(--soft);margin-top:14px}
.buyline b{color:var(--ink);font-weight:700}
.buyline span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:var(--muted)}

/* ── video facade: full-bleed click-to-load, no third-party bytes until play ── */
.video-facade{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-lg);cursor:pointer;
  background:radial-gradient(120% 120% at 50% 0%,#2a2f24 0%,var(--ink) 68%);color:#fff;
  box-shadow:var(--sh-md);transition:transform .22s var(--ease),box-shadow .22s}
.video-facade:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,19,15,.28)}
.video-facade:hover .vf-play{transform:scale(1.08);background:var(--green-cta-h)}
.video-facade:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.video-facade::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 33% 50%,rgba(255,255,255,.045) 0 19%,transparent calc(19% + .3px)),
             radial-gradient(circle at 67% 50%,rgba(255,255,255,.045) 0 19%,transparent calc(19% + .3px))}
.video-facade>*{position:relative}
.vf-play{display:inline-flex;align-items:center;justify-content:center;width:74px;height:74px;
  border-radius:50%;background:var(--green-cta);color:#fff;box-shadow:var(--sh-cta-h);
  transition:transform .22s var(--ease),background .22s}
.vf-play svg{margin-left:4px}
/* Both lines ran to within 1px of the card's rounded corner at 360px, which
   reads as clipped. Padding on the children rather than the button, so the
   16/9 aspect-ratio box is untouched. */
.vf-label{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:clamp(17px,2.2vw,21px);font-weight:600;padding-inline:22px;text-align:center}
.vf-sub{font-size:12.5px;color:rgba(255,255,255,.66);padding-inline:22px;text-align:center;text-wrap:balance}
.video-live{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.video-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── image placeholders (replace with real photography) ── */
.ph{margin:0}
/* A shipped photograph, not a placeholder box. .ph-box carried the radius;
   a bare <img> inherits nothing, which left the photos the only square
   corners on a site that rounds everything at --r-lg. */
.ph>img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
.ph-box{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:14px;text-align:center;padding:32px 28px;border-radius:var(--r-lg);
  background:var(--sand);
  border:1px solid var(--border);color:var(--soft);min-height:180px}
/* Inner dashed keyline + corner stamp keep it unambiguously non-final,
   while the plate itself reads composed. */
.ph-box::after{content:"";position:absolute;inset:10px;border:1.5px dashed var(--rule);
  border-radius:calc(var(--r-lg) - 10px);pointer-events:none}
.ph-box.on-dark::after{border-color:rgba(255,255,255,.3)}
/* A ghost of the two openings, at product scale. The slots stay obviously
   unfinished (dashed border, tag, spec) but they now say what the product is
   instead of reading as empty sand. */
.ph-box::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 33% 50%,#ece7da calc(19% - 1.5px),#d9d3c6 calc(19% - 1.5px) 19%,transparent calc(19% + .3px)),
             radial-gradient(circle at 67% 50%,#ece7da calc(19% - 1.5px),#d9d3c6 calc(19% - 1.5px) 19%,transparent calc(19% + .3px))}
.ph-box>*{position:relative}
.ph-box.on-dark{background:#211f1a;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.ph-box.on-dark::before{background:radial-gradient(circle at 33% 50%,rgba(255,255,255,.05) calc(19% - 1.5px),rgba(255,255,255,.18) calc(19% - 1.5px) 19%,transparent calc(19% + .3px)),
             radial-gradient(circle at 67% 50%,rgba(255,255,255,.05) calc(19% - 1.5px),rgba(255,255,255,.18) calc(19% - 1.5px) 19%,transparent calc(19% + .3px))}
.ph-tag{position:absolute;top:22px;left:22px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:4px 10px;border-radius:var(--r-pill)}
.ph-box.on-dark .ph-tag{background:var(--green-cta)}
.ph-desc{font-size:12.5px;font-weight:500;color:var(--soft)}
.ph-box.on-dark .ph-desc{color:#fff}
.ph-spec{display:none}
html.specs .ph-spec{display:block;font-size:11.5px;color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ph-box.on-dark .ph-spec{color:rgba(255,255,255,.6)}
.ph-1x1{aspect-ratio:auto;min-height:clamp(300px,35vw,505px)}
/* The hero product shot is photographed on white; multiply drops that white
   into the hero's gradient so the cushion sits on the page rather than in a
   floating rectangle. Harmless on the near-white ground it sits over. */
.hero-visual img{width:100%;height:auto;mix-blend-mode:multiply}
/* A light-ground figure sitting in a dark section: give it a real plate so it
   reads as an inset exhibit rather than a hole punched in the ink. */
.figplate{width:100%;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.figplate img{width:100%;height:auto;display:block}
/* Crops the diagram's bottom caption strip, which carries a circulation claim
   the rest of the site does not make. Delete .figcrop to restore the full
   image once an edited version lands. */
.figcrop{aspect-ratio:1400/852}
.ph-4x3{aspect-ratio:auto;min-height:clamp(200px,34vw,420px)}
.ph-16x9{aspect-ratio:auto;min-height:clamp(200px,26vw,420px)}
.ph figcaption{font-size:13.5px;line-height:1.6;color:var(--soft);margin-top:12px;text-align:center}
.sec-ink .ph figcaption{color:rgba(255,255,255,.62)}

/* ── hero ── */
.hero{position:relative;padding-top:clamp(38px,6vw,68px);padding-bottom:clamp(52px,7vw,84px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(1100px 620px at 78% 14%,var(--green-pale) 0%,transparent 58%)}
.hero-grid{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:1.02fr .98fr}}
.hero-copy{max-width:560px}
@media (max-width:959px){.hero-copy{text-align:center;margin-inline:auto}}
.hero h1{margin-bottom:20px}
.hero-sub{font-size:clamp(16.5px,1.9vw,19px);line-height:1.62;color:var(--text);margin-bottom:14px;max-width:470px}
.hero-sub:last-of-type{margin-bottom:24px}
@media (max-width:959px){.hero-sub{margin-inline:auto}}
.cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:959px){.cta-row{justify-content:center}}
.proofstrip{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--border);font-size:13px;color:var(--text)}
@media (max-width:959px){.proofstrip{justify-content:center}}
@media (max-width:600px){.proofstrip{flex-direction:column;gap:9px}.proofstrip .sep{display:none}}

@media (max-width:520px){.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%}}
.proofstrip b{color:var(--ink);font-weight:700}

/* Star split on /reviews/. The percentage sits inside the dd's own grid, not
   absolutely positioned past it, so the row cannot overflow at 375px. */
.histo{display:grid;gap:7px;margin:18px 0 10px}
.histo>div{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px}
.histo dt{font-size:13.5px;color:var(--soft)}
.histo dd{display:grid;grid-template-columns:1fr 38px;align-items:center;gap:10px;margin:0}
.histo dd .bar{position:relative;height:10px;border-radius:5px;background:var(--sand);overflow:hidden}
.histo dd .bar>span{position:absolute;inset:0 auto 0 0;background:var(--green);border-radius:5px}
.histo dd b{font-size:13.5px;color:var(--ink);text-align:right}

/* Proof at the last ask. The closing band is the only place that asked for the
   click with nothing to back it: the hero strip is a screen away and the sticky
   bar (<=900px only) hides itself over this band. */
.final .proof{font-size:13.5px;color:rgba(255,255,255,.72);margin:-14px 0 24px;text-wrap:balance}
.final .proof b{color:#fff}

/* The checker can rule someone out; the band under it used to keep selling.
   Driven by html.no-sell, which is set before paint on a latched visitor, so
   there is no flash of a Buy button and no JS runs for it. */
.final .nosell-alt{display:none}
html.no-sell .final[data-nosell-aware] .sell-only{display:none}
html.no-sell .final[data-nosell-aware] .nosell-alt{display:block;font-size:15.5px;line-height:1.6;
  color:rgba(255,255,255,.86);max-width:46ch;margin:0 auto}
html.no-sell .final[data-nosell-aware] .nosell-alt a{color:var(--green-light);text-decoration:underline;text-underline-offset:3px}

/* Mobile hero: the rating belongs above the $99.99 ask, not below the fold.
   Desktop keeps the designed order (strip under the button, on its rule). */
@media (max-width:959px){
  .hero:not(.hero-page) .hero-copy{display:flex;flex-direction:column}
  .hero:not(.hero-page) .hero-copy>*{order:2}
  .hero:not(.hero-page) .hero-copy .eyebrow,
  .hero:not(.hero-page) .hero-copy h1,
  .hero:not(.hero-page) .hero-copy .hero-sub{order:0}
  .hero:not(.hero-page) .hero-copy .proofstrip{order:1;margin-top:12px;margin-bottom:2px;padding-top:0;border-top:0}
}
@media (max-width:600px){
  /* .proofstrip goes column at this width; in the hero keep it in rows and drop
     the patent item, so the whole Buy button still lands in the first screen. */
  .hero:not(.hero-page) .hero-copy .proofstrip{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 14px}
  .hero:not(.hero-page) .hero-copy .proofstrip>span:last-child{display:none}
}
.proofstrip .sep{width:3px;height:3px;border-radius:50%;background:var(--rule)}
.hero-visual{position:relative;width:100%;max-width:520px;margin-inline:auto}

/* ── generic sections ── */
.sec{padding-block:var(--sec)}
.sec-cream{background:var(--cream)}
.sec-ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.sec-ink::before{content:"";position:absolute;top:-140px;right:-120px;width:880px;height:520px;
  background:radial-gradient(ellipse at center,rgba(108,192,74,.07),transparent 66%);pointer-events:none}
.sec-ink>*{position:relative}
.sec-ink .eyebrow{color:var(--green-light)}
.sec-ink .lead{color:rgba(255,255,255,.72)}

/* physics */
.physics-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,60px);align-items:center}
@media (min-width:900px){.physics-grid{grid-template-columns:1fr 1fr}}
.physics p:not(.beat):not(.eyebrow){font-size:16.5px;line-height:1.78;color:var(--text)}
.physics p+p{margin-top:15px}
.sec-ink .physics p:not(.beat):not(.eyebrow){color:rgba(255,255,255,.74)}
/* "open space." — the answer the sentence above sets up with a colon. Sized
   well below the h2 so it reads as a beat, not a second heading. */
.beat{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
  font-size:clamp(20px,2.2vw,25px);font-weight:600;line-height:1.25;color:var(--ink);margin-top:18px}
.sec-ink .beat{color:#fff} /* tried --green-light 2026-08-27: reads dimmer than the white body text and the payoff recedes — white is the emphasis here */
.physics .physics-more{margin-top:22px}
/* The section's closing statement: sits under both columns, larger than the
   in-column beats so it reads as the punchline rather than another aside. */
.closing-q{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
  font-size:clamp(25px,3.4vw,38px);font-weight:600;line-height:1.2;letter-spacing:-.015em;
  text-align:center;max-width:22ch;margin:clamp(46px,6vw,72px) auto 0;color:#fff}
/* The line that resolves the three steps — centered under the trio, sized as a
   summary beat rather than another heading. */
.steps-close{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;
  font-size:clamp(19px,2.1vw,24px);font-weight:600;line-height:1.35;color:var(--ink);
  text-align:center;max-width:34ch;margin:clamp(34px,4.5vw,48px) auto 0}

/* steps */
.steps{display:grid;grid-template-columns:1fr;gap:26px;margin-top:8px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:32px}}
.step{position:relative;padding-left:52px}
.step .n{position:absolute;left:0;top:-3px;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--green-cta);color:var(--green-text);display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:17px;font-weight:600}
.sec-ink .step .n{border-color:var(--green);color:var(--green-light)}
.step h3{font-size:16px;font-weight:700;margin-bottom:7px}
.step p{font-size:14.5px;line-height:1.65;color:var(--text)}
.sec-ink .step p{color:rgba(255,255,255,.68)}

/* two-column for/not-for */
.forgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:34px}
@media (min-width:700px){.forgrid{grid-template-columns:1fr 1fr}}
.forcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 26px}
.forcard.no{background:var(--cream)}
.forcard h2,.forcard h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px;
  display:flex;align-items:center;gap:8px}
.forcard.yes h3,.forcard.yes h4,.forcard.yes h2{color:var(--green-text)}
.forcard.no h3,.forcard.no h4,.forcard.no h2{color:var(--red)}
.forcard li{list-style:none;position:relative;padding-left:15px;font-size:14.5px;line-height:1.6;color:var(--text);margin-bottom:11px}
.forcard li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--rule)}
.forcard.yes li::before{background:var(--green)}

/* spec table */
.spectable{width:100%;border-collapse:collapse;font-size:15px}
.spectable th,.spectable td{text-align:left;padding:14px 4px;border-bottom:1px solid var(--border)}
.spectable th{font-weight:500;color:var(--soft);width:46%}
.spectable td{font-weight:600}
#fit .physics-grid{align-items:center} /* balance the short spec table against the taller callout stack */
#fit .spectable tr:first-child th,#fit .spectable tr:first-child td{padding-top:22px}
/* Let the price card use the display scale despite .forcard h3's uppercase rule. */
.forcard h3.display{font-size:clamp(19px,2.1vw,23px);text-transform:none;
  letter-spacing:-.008em;display:block;margin-bottom:12px;color:var(--ink)}

/* callout */
.callout{border-left:3px solid var(--green);background:var(--green-pale);padding:22px 24px;border-radius:0 var(--r-md) var(--r-md) 0;margin:26px 0}
.callout h3{font-size:15.5px;font-weight:700;margin-bottom:8px}
.callout p{font-size:14.5px;line-height:1.7;color:var(--text)}
.callout p+p{margin-top:10px}
.callout.warn{border-left-color:var(--amber);background:#fdf6e9}

/* comparison */
.tscroll{position:relative;max-width:960px;margin:0 auto}
.tscroll-in{position:relative;overflow-x:auto;scrollbar-width:thin}
.tscroll-in:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.thint{display:none;font-size:12px;color:var(--soft);text-align:center;margin-bottom:12px}
.tscroll.overflowing .thint{display:block}
.ctable{width:100%;border-collapse:separate;border-spacing:0;min-width:660px}
.ctable th,.ctable td{padding:15px 14px;font-size:14px;text-align:left;vertical-align:top}
.ctable thead th{font-weight:600;color:var(--soft);font-size:13px}
.ctable tbody th{font-weight:600;color:var(--ink);position:sticky;left:0;background:var(--cream);z-index:1;
  box-shadow:1px 0 0 var(--border);width:170px}
.ctable tbody tr>*{border-top:1px solid var(--border)}
.ctable tbody tr:hover>*{background:var(--sand)}
.ctable tbody tr:hover>.fc{background:var(--green-pale)}
.ctable tbody td{color:var(--text)}
.ctable .fc{background:var(--green-pale);
  box-shadow:inset 1px 0 0 var(--green-mist),inset -1px 0 0 var(--green-mist)}
.ctable tbody tr:last-child .fc{box-shadow:inset 1px 0 0 var(--green-mist),inset -1px 0 0 var(--green-mist),inset 0 -1px 0 var(--green-mist)}
.ctable thead .fc{color:var(--green-text);font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:16px;
  font-weight:600;border-radius:var(--r-md) var(--r-md) 0 0;padding-top:18px}
.ctable tbody tr:last-child .fc{border-radius:0 0 var(--r-md) var(--r-md)}
.ctable tbody .fc{color:var(--ink);font-weight:600}
.tfoot-note{font-size:13px;color:var(--soft);margin-top:16px;text-align:center}
.tfoot-note a{color:var(--green-text);text-decoration:underline;text-underline-offset:2px}

/* proof */
.pquote{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:clamp(20px,2.6vw,27px);
  line-height:1.4;color:var(--ink);max-width:22ch;margin:0 auto}
.tgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:var(--head-gap)}
@media (min-width:700px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column}
.tcard blockquote{flex:1 0 auto}
.tcard blockquote{font-size:15px;line-height:1.65;color:var(--char);margin:12px 0 16px}
.tcard .who{font-size:13px;font-weight:700}
.tcard .ctx{font-size:12px;color:var(--soft)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
@media (min-width:760px){.gal{grid-template-columns:repeat(4,1fr);gap:18px}}
.gal figure{margin:0}
.gal img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);background:var(--cream)}
.gal figcaption{font-size:13px;line-height:1.55;color:var(--soft);margin-top:9px}

/* everyday */
.ugrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:760px){.ugrid{grid-template-columns:repeat(4,1fr);gap:20px}}
.ucase{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;
  padding:16px 0 0;text-align:left}
.ucase h3{font-size:15px;font-weight:700;margin-bottom:5px}
.ucase p{font-size:13.5px;color:var(--text);line-height:1.55}

/* faq */
.faq-list{max-width:var(--readw);margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;padding:21px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;font-weight:600;text-align:left;transition:color .2s}
.faq-q:hover{color:var(--green-text)}
.faq-q:hover .ico{border-color:var(--green);color:var(--green-text)}
.faq-q .ico{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--rule);color:var(--soft);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .3s var(--ease),border-color .3s,background .3s,color .3s}
.faq-item.open .ico{transform:rotate(45deg);border-color:var(--green);background:var(--green-pale);color:var(--green-text)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:14.5px;line-height:1.78;color:var(--text);padding-bottom:21px}
.faq-a p+p{padding-bottom:21px;margin-top:-8px}

/* final cta */
.final{padding-block:var(--sec-lg);background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:900px;height:460px;background:radial-gradient(ellipse at center,rgba(108,192,74,.13),transparent 68%)}
.final-in{max-width:660px;margin:0 auto;padding-inline:var(--gut);position:relative;z-index:1}
.final h2{margin-bottom:16px}
.final>.final-in>h2+p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.72);margin-bottom:30px}
.final .buyline{color:rgba(255,255,255,.66)}
.final .buyline b{color:#fff}

/* footer */
footer{background:var(--ink);color:#fff;padding:clamp(46px,7vw,64px) 0 28px;border-top:1px solid rgba(255,255,255,.08)}
.foot-top{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.08)}
@media (min-width:640px){.foot-top{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.foot-top{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-brand .brand{color:#fff;display:inline-flex;margin-bottom:12px}
.foot-brand p{font-size:13px;color:rgba(255,255,255,.66);line-height:1.7;max-width:300px}
.foot-col h2{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:14px}
.foot-col a{display:block;font-size:13px;color:rgba(255,255,255,.74);padding:4px 0;margin-bottom:2px;transition:color .15s}
.foot-col a:hover{color:var(--green-light)}
.foot-bot{display:flex;justify-content:space-between;align-items:flex-start;padding-top:22px;
  font-size:12px;color:rgba(255,255,255,.62);flex-wrap:wrap;gap:14px}
.foot-bot a{color:rgba(255,255,255,.74);text-decoration:underline;text-underline-offset:2px}
.foot-bot .totop{flex:none;font-weight:600;text-decoration:none;align-self:flex-start;padding:4px 0;margin:-4px 0}
.foot-bot .totop:hover{color:var(--green-light)}
.disclaimer{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.58);max-width:70ch;margin-top:14px}

/* sticky buy bar */
.sticky{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;overflow:hidden;z-index:95;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));display:none;align-items:center;justify-content:space-between;
  gap:12px;transform:translateY(110%);visibility:hidden;
  transition:transform .38s var(--ease),visibility .38s;box-shadow:0 -6px 24px rgba(20,19,15,.08)}
.sticky.show{transform:translateY(0);visibility:visible}
.sticky .t{font-size:14px;font-weight:700;line-height:1.25;min-width:0;flex:1 1 auto}
.sticky .t>span{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--soft);margin-top:2px;flex-wrap:wrap}
.sticky a{background:var(--green-cta);color:#fff;padding:13px 24px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;white-space:nowrap;flex:none;transition:background .2s}
.sticky a:hover{background:var(--green-cta-h)}
@media (max-width:900px){.sticky{display:flex}footer{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  /* no JS: nothing adds .show, and nothing can hide the bar over the closing
     Buy section either, so it floated a duplicate of the button beneath it.
     Drop it — the hero, in-body and closing CTAs all work without script. */
  .no-js .sticky,.js-failed .sticky{display:none}
  .no-js footer,.js-failed footer{padding-bottom:34px}
  /* the fixed bar covered the bottom 66px: focused links landed behind it (WCAG 2.2 2.4.11) */
  html.js{scroll-padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}}

/* ── article / learn ── */
.artmeta{font-size:13px;color:var(--soft);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:16px}
.artmeta .pill{background:var(--green-pale);color:var(--green-text);font-weight:600;padding:4px 10px;border-radius:var(--r-pill);font-size:12px}
.prose{font-size:17px;line-height:1.78;color:var(--text)}
.prose>*+*{margin-top:20px}
.prose h2{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:clamp(23px,3vw,30px);
  font-weight:600;color:var(--ink);letter-spacing:-.018em;line-height:1.2;margin-top:44px}
/* An asterism that is literally the product mark — brands every article,
   which is most of the site's search-landing surface. */
.prose h2::before{--dot-r:2.5px;--dot-gap:10px;display:block;margin-bottom:12px;color:var(--green)}
.prose h3{font-size:20px;line-height:1.35;font-weight:700;color:var(--ink);letter-spacing:-.005em;margin-top:42px}
.prose h3+*{margin-top:9px}
.prose ul,.prose ol{padding-left:22px}
.prose li::marker{color:var(--green-cta)}
.prose li+li{margin-top:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--green-text);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:color .18s,text-decoration-thickness .18s}
.prose a:hover{color:var(--green-cta-h);text-decoration-thickness:2px}
/* Buttons keep their own skin inside prose. `.prose a` (0,1,1) outranks
   `.btn-primary` (0,1,0), so without these the in-body Amazon CTA painted its
   label the same green as its background — invisible text on 14 pages. */
.prose a.btn{text-decoration:none}
.prose a.btn-primary,.prose a.btn-primary:hover{color:#fff}
.prose a.btn-ghost,.prose a.btn-ghost:hover{color:var(--ink)}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll-in,.twrap{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.tscroll-in::-webkit-scrollbar,.twrap::-webkit-scrollbar{height:10px}
.tscroll-in::-webkit-scrollbar-track,.twrap::-webkit-scrollbar-track{background:transparent}
.tscroll-in::-webkit-scrollbar-thumb,.twrap::-webkit-scrollbar-thumb{background:var(--rule);border-radius:5px}
.twrap:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.5}
.prose th,.prose td{border:0;border-bottom:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top;background:none}
.prose thead th{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);border-bottom-color:var(--rule);padding-bottom:10px}
.prose tbody th,.prose tbody td:first-child{font-weight:600;color:var(--ink)}
.prose tbody tr:hover>*{background:var(--cream)}
/* A .twrap table outside .prose (the calculator card) would otherwise render
   as a bare browser table: no padding, no rules, wrong size. */
.fitcard .twrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.5}
.fitcard .twrap th,.fitcard .twrap td{border:0;border-bottom:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
.fitcard .twrap thead th{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);border-bottom-color:var(--rule);padding-bottom:10px}
.fitcard .twrap tbody td:first-child{font-weight:600;color:var(--ink)}
.medbox{background:var(--sand);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;font-size:13.5px;line-height:1.7;color:var(--text)}
.medbox strong{color:var(--ink)}
.crumbs{font-size:13px;color:var(--soft);margin-bottom:18px}
.crumbs a{color:var(--soft);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--ink)}
.artgrid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:700px){.artgrid{grid-template-columns:1fr 1fr}}
.artcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.artcard p{flex:1 0 auto}
.artcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--green-mist)}
.artcard h2,.artcard h3{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:20px;font-weight:600;
  letter-spacing:-.015em;line-height:1.25;margin-bottom:9px}
.artcard p{font-size:14px;line-height:1.65;color:var(--text)}
/* ── stat band: the durable numbers as one ruled, annual-report row ── */
.statband{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(44px,6vw,64px) 0 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.statband>div{display:flex;flex-direction:column-reverse;gap:9px;
  padding:clamp(22px,3vw,30px) clamp(16px,2.5vw,28px)}
.statband>div+div{border-left:1px solid var(--border)}
.statband dd{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-weight:600;
  font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.statband dt{font-size:12.5px;line-height:1.5;color:var(--soft)}
.sec-ink .statband{border-color:rgba(255,255,255,.14)}
.sec-ink .statband>div+div{border-left-color:rgba(255,255,255,.14)}
.sec-ink .statband dd{color:#fff}
.sec-ink .statband dt{color:rgba(255,255,255,.62)}
.statband.s2{grid-template-columns:1fr 1fr}
.statband.s2>div:nth-child(3){border-left:0}
.statband.s2>div:nth-child(n+3){border-top:1px solid var(--border)}
@media (max-width:700px){
  .statband{grid-template-columns:1fr 1fr}
  .statband>div:nth-child(3){border-left:0}
  .statband>div:nth-child(n+3){border-top:1px solid var(--border)}
  .sec-ink .statband>div:nth-child(n+3){border-top-color:rgba(255,255,255,.14)}
}

.dotmark{border:0;height:0;display:flex;justify-content:center;
  padding-block:clamp(6px,1.5vw,14px);color:var(--rule)}
.dotmark::before{--dot-r:5px;--dot-gap:19px}
.artcard .rd{font-size:12px;color:var(--green-text);font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:6px}
.artcard .rd::before{--dot-r:2.1px;--dot-gap:8.4px;display:inline-block}

/* inline product CTA inside articles */
.inlinecta{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.inlinecta .txt{flex:1 1 260px}
.inlinecta h3{font-family:'Fraunces','Fraunces Fallback',Georgia,serif;font-size:20px;font-weight:600;margin-bottom:6px}
.inlinecta p{font-size:14px;color:var(--text);line-height:1.6}

/* fit tool */
.fitcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,4vw,36px);box-shadow:var(--sh-sm)}
.fitform{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:18px}
.fitform label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.fitform input{width:150px;padding:13px 15px;border:1px solid var(--field);border-radius:var(--r-sm);font-size:16px;font-family:inherit}
.fitform input:hover{border-color:var(--muted)}
/* 16px, not 15: iOS Safari zooms the viewport whenever a focused control
   computes under 16px and never zooms back out. The input beside it is
   already 16px, so tapping from one to the other jumped the page. */
.fitform select{min-width:210px;padding:13px 15px;border:1px solid var(--field);border-radius:var(--r-sm);font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.fitform select:hover{border-color:var(--muted)}
.fitform select:focus-visible{border-color:var(--ink)}
.fitform input:focus-visible{border-color:var(--ink)}
.fitform button{background:var(--ink);color:#fff;padding:14px 24px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  transition:background .22s,transform .22s var(--ease),box-shadow .22s}
.fitform button:hover{background:var(--green-cta);transform:translateY(-1px)}
.verdict{margin-top:22px;border-radius:var(--r-md);padding:22px 24px;display:none}
.verdict.show{display:block}
.verdict:focus{outline:none}
.verdict:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.verdict h3{font-size:17px;font-weight:700;margin-bottom:8px}
.verdict h3::before{--dot-r:2.5px;--dot-gap:9px;display:inline-block;margin-right:8px}
.verdict p{font-size:14.5px;line-height:1.7}
.verdict p+p{margin-top:11px}
.verdict .btn{margin-top:16px}
.v-good{background:var(--green-pale);border:1px solid var(--green-mist)}
.v-good h3{color:var(--green-text)}
.v-mid{background:#fdf6e9;border:1px solid #f3e2be}
.v-mid h3{color:var(--amber-text)}
.v-no{background:#fbeeea;border:1px solid #f2d7cf}
.v-err{background:#fbeeea;border:1px solid #f2d7cf}   /* a rejected entry is not a borderline result */
.v-err h3{color:var(--red)}
.v-no h3{color:var(--red)}

/* ── "How did you find us?" one-tap poll (the /start/ page) ── */
.srcpoll .lead{max-width:58ch}
.srcpoll-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.srcpoll-opts[hidden]{display:none} /* display:flex beats the hidden attr without this */
.srcpoll-opts button{border:1px solid var(--field);border-radius:var(--r-pill);background:#fff;
  padding:12px 19px;font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.srcpoll-opts button:hover{border-color:var(--ink);background:var(--sand);transform:translateY(-1px)}
.srcpoll-thanks{margin-top:20px;font-size:14.5px;font-weight:600;color:var(--green-text)}
/* "Point at the pain" triage (coccyx-vs-socket-seat). Buttons reveal one of four
   verdicts kept in the HTML; without JS every verdict shows and the buttons hide. */
.triage{margin:8px 0 28px;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--sand)}
.triage-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.triage-opts button{border:1px solid var(--field);border-radius:var(--r-pill);background:#fff;
  padding:12px 19px;font-size:14px;font-weight:600;color:var(--ink);text-align:left;
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.triage-opts button:hover{border-color:var(--ink);transform:translateY(-1px)}
.triage-opts button[aria-pressed="true"]{border-color:var(--green-text);background:var(--green-pale)}
.triage-out:focus{outline:none}
.triage-out:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.triage-verdict{margin-top:14px;font-size:15.5px}
.triage-verdict p{margin:0}
.js .triage-verdict[hidden]{display:none}
.no-js .triage-opts,.js-failed .triage-opts{display:none}
.no-js .triage-verdict{display:block}
/* beats .js .triage-verdict[hidden] on equal specificity by cascade order */
.js-failed .triage-verdict[hidden]{display:block}
/* "Share this guide" on articles: shown only where the Web Share API (or the
   clipboard) exists; styled as the surrounding More-reading links. */
.share-slot{display:inline}
.share-slot[hidden]{display:none}
/* The share button is revealed by site.js only where the Share or clipboard
   API exists. On /start/ it sits mid-sentence, so when JS is off — or when
   site.js never arrives, where <noscript> does NOT render because JS is
   enabled — the paragraph lost its subject: "Know someone who sits all day?
   It says whether the cushion fits them." This is the written-out version. */
.share-fallback{display:none}
.no-js .share-fallback,.js-failed .share-fallback{display:inline}
.share-btn{background:none;border:0;padding:0;font:inherit;color:var(--green-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.share-btn:hover{color:var(--ink)}
.no-js .fitform>div,.no-js .fitform button{display:none}   /* both checkers are JS; the note now sits after the
   form, so it survives — and with the fields gone there is nothing to type and nothing to submit */
.no-js .srcpoll,.js-failed .srcpoll{display:none}      /* a one-tap poll with nothing to tap, and a heading promising taps */
/* ── without JavaScript ──────────────────────────────────────────────
   The drawer, the reveal animations and the buy bar are all JS-driven.
   Rather than ship dead controls, fall back to plain markup. */
.no-js .navtog,.js-failed .navtog{display:none}  /* a button that opens nothing */
.no-js .faq-q .ico,.js-failed .faq-q .ico{display:none} /* a + beside an already-open answer */

.no-js #printguide,.no-js #printhandout,
.js-failed #printguide,.js-failed #printhandout{display:none} /* their only behavior lives in site.js */
.no-js .video-facade,.js-failed .video-facade{display:none}   /* a play button that cannot play */

/* ══ Round 1 polish (2026-09-01): typography rhythm, panel language, mobile ══
   Placed after every component rule so equal-specificity overrides win by
   cascade order. Each group cites the critique finding it resolves. */

/* header → body: one beat, not a whole section (typography-2 / layout-2) */
:where(main,article)>.sec:first-child:not(.hero){padding-bottom:0}
:where(main,article)>.sec:first-child:not(.hero)+.sec:not(.sec-cream){padding-top:clamp(32px,4.5vw,56px)}

/* prose heading scale: a real two-level hierarchy (typography-4) */
.prose h2{font-size:clamp(24px,3.2vw,31px);margin-top:clamp(48px,6vw,60px)}
.prose h3{font-size:clamp(18.5px,2vw,20px);margin-top:34px}

/* panels inside prose: no heading leak, readable body, deliberate rhythm (components-1, typography-3) */
.prose>.callout,.prose>.inlinecta,.prose>.medbox,.prose>.ph{margin-block:32px}
.prose .callout h3,.prose .inlinecta h3,.prose .verdict h3{margin-top:0}
.prose .callout h3{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.35}
.prose .callout h3+p,.prose .inlinecta h3+p{margin-top:8px}
.prose .callout p,.prose .inlinecta p{font-size:15.5px;line-height:1.65}
.prose .inlinecta .txt{max-width:48ch}
.prose .medbox{font-size:14px}
.prose .ph figcaption{text-align:left;font-size:13.5px;line-height:1.6;margin-top:12px;max-width:62ch}
.prose>:first-child{margin-top:0}

/* one panel family: shared radius, hairline + accent bar, twin-dot mark (components-2) */
.callout{border:1px solid var(--green-mist);border-left:3px solid var(--green);border-radius:var(--r-md);padding:20px 22px}
.callout.warn{border-color:#f3e2be;border-left-color:var(--amber)}
.callout h3{display:flex;align-items:center;gap:8px}
.callout h3::before{--dot-r:2.5px;--dot-gap:9px;display:inline-block;color:var(--green)}
.callout.warn h3::before{color:currentColor}
.prose>.medbox,.fitcard .medbox{border-radius:var(--r-md)}

/* labels: one idiom for pills, eyebrows and for/against headings (components-6) */
.artmeta .pill{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;line-height:1.4}
.forcard h3::before,.forcard h2::before{--dot-r:2.3px;--dot-gap:8.5px;display:inline-block}
.forcard h3.display::before{content:none}
.h-dot::before{--dot-r:2.5px;--dot-gap:10px;display:block;margin-bottom:12px;color:var(--green)}
.nb{white-space:nowrap}

/* breadcrumbs as a quiet trail (components-7) */
.crumbs{font-size:12.5px;letter-spacing:.01em;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:0 6px;align-items:center}
.crumbs a{text-decoration-color:var(--rule);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s;padding-block:3px;margin-block:-3px}
.crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
.crumbs span[aria-hidden]{color:var(--field)}

/* buttons: firmer ghost boundary, one compact size (components-5) */
.btn-ghost{border-color:var(--field);background:rgba(255,255,255,.7)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.on-ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.on-ink .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nav-cta,.sticky a,.fitform button{padding:12px 22px;font-size:14px;font-weight:600;line-height:1.2}
/* WCAG 2.2 2.5.8: the fit button sat at 41px beside a 48px input, the sticky link at 42px */
.fitform button{min-height:48px}
.sticky a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.buyline{text-wrap:balance}

/* sticky buy bar: never three rows (components-4 / mobile-2) */
.sticky .t{white-space:nowrap;font-size:14px}
.sticky .t>span{font-size:11px;gap:5px;flex-wrap:nowrap;margin-top:3px}
.sticky .t>span[translate="no"]{display:contents;font-size:inherit;font-weight:inherit;color:inherit} /* the meta-row rule above otherwise turns "Socket Seat" into its own flex row, and shrinks the product name to 11px grey */
.sticky .rt{--star:12px}
@media (max-width:480px){.sticky{padding-inline:14px;gap:10px}.sticky .t{font-size:13.5px}.sticky a{padding:13px 18px}}
@media (max-width:340px){.sticky .t>span{display:none}}

/* learn hub: three columns, no orphan cards, group rhythm, marked headings (layout-6 / typography-7) */
@media (min-width:1000px){
  .artgrid.hub{grid-template-columns:repeat(3,1fr);gap:22px}
  .artgrid.hub>.artcard:nth-child(3n+1):last-child{grid-column:1/-1}
  .artgrid.hub>.artcard:nth-child(3n+2):last-child{grid-column:span 2}
  .artgrid.hub>.artcard:nth-child(3n+1):last-child p,.artgrid.hub>.artcard:nth-child(3n+2):last-child p{flex:0 0 auto;max-width:52ch}
}
.artgrid+h2.display{margin-top:clamp(44px,5vw,60px)}
h2.display+.lead{margin:10px 0 24px}

/* footer: disclaimers fill the brand column; slimmer bottom rail (layout-8) */
.foot-brand .disclaimer{max-width:320px}
.foot-brand p+.disclaimer{margin-top:18px}
.foot-bot{align-items:center;padding-top:18px}
.foot-col a{padding:3px 0;margin-bottom:0}
@media (max-width:639px){
  .foot-brand .disclaimer{max-width:none}
  .foot-col{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .foot-col h2{grid-column:1/-1}
  .foot-col a{font-size:14px;padding:8px 0;margin:0}
}
footer{border-top-color:rgba(255,255,255,.14)}

/* phones: photo before the buy button, heading before exhibit, scannable tables, full-width CTAs (mobile-1,3,5,7,8) */
@media (max-width:959px){
  .hero-grid{gap:clamp(22px,5vw,32px)}
  .hero-visual{order:-1;max-width:min(72vw,320px)}
}
@media (max-width:899px){.physics-grid>.ph{order:1}}
@media (max-width:700px){
  .ctable{min-width:600px}
  .no-js .tscroll .thint,.js-failed .tscroll .thint{display:block}  /* JS normally reveals this */
  .ctable tbody th{width:118px}
  .ctable th,.ctable td{padding:12px 10px;font-size:13.5px}
  .ctable thead .fc{font-size:15px}
  .tscroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;
    background:linear-gradient(90deg,rgba(250,248,243,0),var(--cream))}
}
@media (max-width:520px){
  /* reading copy was 14.5px and support text 10.5-11px on phones */
  .faq-a p,.callout p,.step p,.forcard li{font-size:15.5px}
  .announce{font-size:12px}
  .artmeta .pill{font-size:11px}
  .spectable th{width:36%}
  .spectable th,.spectable td{padding:12px 4px;font-size:14.5px;line-height:1.5}
  .prose table{font-size:14px}
  .prose th,.prose td{padding:9px 10px}
  .inlinecta .btn{width:100%}
  .fitform>div{flex:1 1 140px}
  .fitform input{width:100%;min-width:0}
  .fitform select{width:100%;min-width:0}
  .fitform button{flex:1 0 100%}   /* full-width row of its own, so the selects keep their width */
}

/* ══ Round 2 (2026-09-01): page structure — heroes, fact strips, next-read cards ══ */
.hero-page{padding-top:clamp(28px,4.5vw,52px)}
@media (min-width:960px){.hero-page .hero-visual{max-width:440px}}
.hero-page .hero-visual img{width:100%;height:auto;mix-blend-mode:multiply}
/* $= stopped matching the day bump-assets.py began stamping SVGs with ?v=,
   so the coccyx diagram lost its white plate and rendered multiplied against
   the page. *= matches with or without the stamp. */
.hero-page .hero-visual img[src*=".svg"]{mix-blend-mode:normal;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
.hero-page .crumbs{margin-bottom:14px}
.hero-page .lead{margin-bottom:26px}
.hero-page .buyline{margin-top:14px}
.hero+.wrap>.statband.hero-stats{margin:0 0 clamp(8px,1.5vw,16px)}
.read .cta-row,.read .proofstrip{justify-content:flex-start;align-items:flex-start}
.inlinecta{align-items:center}
.inlinecta picture{flex:none;display:block;width:clamp(96px,13vw,136px)}
.inlinecta-img{flex:none;width:100%;height:auto;border-radius:var(--r-md);mix-blend-mode:multiply}
.inlinecta .txt{flex:1 1 240px}
@media (max-width:520px){.inlinecta picture{width:88px}}
.nextread{margin-top:clamp(40px,6vw,56px);padding-top:clamp(26px,4vw,36px);border-top:1px solid var(--border)}
.nextread h2{font-size:clamp(22px,2.6vw,26px);margin-top:0}
.nextread .artgrid{margin-top:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nextread .artgrid>.artcard:nth-child(2n+1):last-child{grid-column:1/-1}
.nextread .artcard{padding:20px 22px}
.nextread .artcard h3{font-size:17px;margin:0 0 6px;flex:1 0 auto}
.prose a.artcard,.prose a.artcard:hover{color:inherit;text-decoration:none}
.nextread .t-meta{margin-top:16px}
.prose .statband{margin-top:28px}
.prose .tgrid{margin-top:20px}
.spectable.bands th{color:var(--ink);font-weight:600;width:38%}
@media (min-width:700px){.spectable.bands th{white-space:nowrap}}
.spectable.bands td{font-weight:400;color:var(--text)}
.read>.fitcard+.fitcard{margin-top:28px}

/* ══ Round 3 (2026-09-01): regression fixes from the before/after review ══ */
:where(main,article)>.sec:first-child:not(.hero):has(+.sec-cream){padding-bottom:clamp(32px,4.5vw,56px)}
:where(main,article)>.sec:first-child:not(.hero)+.sec-cream{padding-top:clamp(40px,5vw,64px)}
.statband>div{justify-content:flex-end}            /* column-reverse: packs numbers to the top edge, labels hang below */
.forcard h3::before,.forcard h2::before,.callout h3::before{flex:none}  /* the mark must not shrink inside a flex heading */
.read .proofstrip{flex-direction:column;align-items:flex-start;gap:9px}
.read .proofstrip .sep{display:none}
.prose .tgrid{grid-template-columns:1fr;gap:14px}
.prose tbody td:first-child,.prose tbody th{min-width:8.5em}
.fitcard .ph figcaption{text-align:left;font-size:13.5px;line-height:1.6;margin-top:12px;max-width:62ch}
.hero-page .lead{max-width:52ch}
.ph-sm{max-width:320px;margin-inline:auto}
@media (max-width:959px){.hero-copy .crumbs{justify-content:center}}

@media print{
  .nav,.sticky,.announce,.skip,.noprint,.final{display:none!important}
  /* Components added after this block was first written: none of them earn ink.
     The video is a screen; forms don't submit on paper; the dashed .ph-box
     plates are production notes, not content — but the real photographs
     inside .ph are content and do earn ink. */
  .video-facade,.video-live,form.fitform,.verdict,.ph-box,.inlinecta .btn{display:none!important}
  /* .ph now wraps real photographs too — hide only the dashed .ph-box
     production notes, and let the shipped images print. */
  .ph>img{max-width:100%!important;page-break-inside:avoid}
  .tcard,.fitcard,.callout,.inlinecta{box-shadow:none!important;border:1px solid #ccc!important}
  .js .rv{opacity:1!important;animation:none!important}
  .sec-ink,.final,footer{background:#fff!important;color:#000!important}
  /* Buttons can't be clicked on paper; with background-graphics off their
     white label printed on white. Dark text + hairline border instead. */
  .btn{color:#000!important;background:#fff!important;border:1px solid #ccc!important;box-shadow:none!important}
  /* The href-printing rule dumped ~90-char maas attribution URLs mid-sentence.
     Amazon links print a clean address; buttons and the nav CTA print none. */
  a[href*="amazon.com/dp/B07K6T8WDJ"]::after{content:" (amazon.com/dp/B07K6T8WDJ)"!important}
  a[href*="amazon.com/dp/B00AE9V3WQ"]::after{content:" (amazon.com/dp/B00AE9V3WQ)"!important}
  a.btn[href]::after,a.nav-cta[href]::after{content:""!important}
  /* The footer logo was white-filtered for ink and printed invisibly. */
  .foot-brand .brand-logo{filter:none}
  /* Nav columns cost ~1.5 sheets per printout; brand line + legal stay.
     Collapse the grid with them: a letter page is ~740px, so the 640px
     two-column rule still applied and the legal text printed in a 40%
     column beside three empty ones. */
  footer .foot-col{display:none}
  .foot-top{display:block!important}
  .foot-brand p,.foot-brand .disclaimer{max-width:none!important}
  /* Keep cards whole and headings attached to their bodies. */
  .fitcard,.callout,.tcard,.medbox{break-inside:avoid}
  h2,h3{break-after:avoid}
  .sec-ink *,.final *,footer *{color:#000!important}
  .faq-a{grid-template-rows:1fr!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
  /* Only absolute links printed their address, so every INTERNAL reference —
     "the setup guide", "the fit checker", "how to measure your sit-bone width"
     — printed as underlined text with no way to reach it. These are the pages
     people are invited to print and hand to someone: the reference has to be
     followable off the paper. Buttons, the nav CTA and the two Amazon links
     keep their own !important ::after above, so they are unaffected; "#" and
     "mailto:" links do not match this selector at all. */
  a[href^="/"]:not([href^="//"])::after{content:" (aylio.com" attr(href) ")";font-size:10px}
}

/* Handout-only print mode: the clinician page's "Print the handout" button puts
   html.print-handout on the root (site.js removes it on afterprint), and the
   printout collapses to just the .handout-sec section — a one-sheet patient
   handout with no site chrome around it. */
@media print{
  .print-handout main>section{display:none!important}
  .print-handout main>section.handout-sec{display:block!important}
  .print-handout footer,.print-handout .crumbs{display:none!important}
}

/* gallery shipped 2026-09-05 */

/* ══ Round 4 polish (2026-09-22): design round 4 ══
   Appended after every earlier block so equal-specificity overrides win by
   cascade order. Each rule cites the round-4 finding it resolves. */

/* C1: page titles out-rank section heads on phones. .d-lg's 30px floor sat 4px
   above the 26px prose h2 (now 24px in the round-1 block). Scoped to h1 so .d-lg
   h2s (closing bands, home sections) keep their size; 4.4vw reaches 32px at
   727px, so tablet and desktop are unchanged. */
h1.display.d-lg{font-size:clamp(32px,4.4vw,48px)}

/* C2/C14/C20: a wrapped callout or for/against label centred the twin-dot
   between its lines. Pin the mark to the centre of the first line; the em value
   is the fallback where the lh unit is unsupported. */
.callout h3,.forcard h2,.forcard h3{align-items:flex-start}
.callout h3::before,.forcard h2::before,.forcard h3::before{margin-top:.55em;margin-top:calc(.5lh - var(--dot-r))}

/* C3: spec-table labels share their value's first line, like the site's other
   tables (which are top-aligned). */
.spectable th,.spectable td{vertical-align:baseline}

/* C4/C28: in the hero the rating always takes its own line (it plus the next
   item is ~573px, wider than the 560px .hero-copy cap), so the first separator
   only ever dangled at the end of that line. */
.hero .proofstrip>.rating+span+.sep{display:none}

/* C5/C7/C18: the home divider between two cream sections is cream and holds its
   dots in flow (the hr's UA overflow:hidden clipped them on phones). The section
   after it becomes a BFC so the eyebrow's 14px .sec-head p margin stays inside
   the cream instead of collapsing through padding-top:0 as a white seam. */
.sec-cream+.dotmark{background:var(--cream);height:auto;overflow:visible;padding-bottom:clamp(10px,2vw,26px)}
.dotmark+.sec-cream{display:flow-root}

/* C8/C19/C33: a text-led page header starts where the product heroes do
   (.hero-page's top padding), not a full --sec (64-110px) below the nav. */
:where(main,article)>.sec:first-child:not(.hero){padding-top:clamp(28px,4.5vw,52px)}

/* C11: the coccyx hero's own bottom padding is the hand-off; a full --sec on top
   of it left ~194px of white under the CTA. Coloured bands keep their padding. */
.hero-page+.sec:not(.sec-cream):not(.sec-ink){padding-top:0}

/* C9/C22: the footer logo is a bare <picture>, not the .brand link that carried
   margin-bottom:12px, so it sat on the tagline with 0px between them. */
.foot-brand picture{display:block;margin-bottom:14px}

/* C10/C32: the learn hub header now shares the grid's left edge (.read became
   .wrap.hub-head) but keeps the reading measure (720px .read minus gutters). */
.hub-head>*{max-width:624px}

/* C12: one label column for the fit page's chair checks. min-width, not width,
   so a wider label (fallback font before Inter loads) grows instead of wrapping —
   the labels are already flex-shrink:0. 5.75em is the widest label, 'Desk
   height' (89px at 15.5px), with no slack: every pixel of the label column comes
   out of the description beside it. text-wrap:pretty keeps a description from
   ending on a one- or two-word line now that the column is a little narrower. */
.checks>li>strong{min-width:5.75em}
.checks>li{text-wrap:pretty}
/* On a phone a side label column leaves each description ~234px and 8-10
   lines; stacked, the label heads its own paragraph at full width. */
@media (max-width:520px){.checks>li{flex-direction:column;gap:2px}.checks>li>strong{min-width:0}}

/* C13/C26/C31: in the 624px prose column the inline CTA's button always wrapped
   under the photo. The photo spans both rows; text and button share one left
   edge. Screen only (print hides the button, and the empty row would add a gap).
   Phones (<=520px) keep the stacked, full-width layout. The bare-<img> diagram
   cards do not match and are unchanged. */
@media screen and (min-width:521px){
  .prose>.inlinecta:has(>picture){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:16px;align-items:start}
  .prose>.inlinecta:has(>picture)>picture{grid-row:1/span 2;align-self:center}
  .prose>.inlinecta:has(>picture)>.txt,.prose>.inlinecta:has(>picture)>.btn{grid-column:2}
  .prose>.inlinecta:has(>picture)>.btn{justify-self:start}
}

/* C15/C24: a button label with a no-break phrase wraps as whole phrases,
   centred, instead of squeezing the loose text into a column beside the phrase
   (fit hero on phones). */
.btn:has(>.nb){flex-wrap:wrap;row-gap:2px}
.btn>.nb>span[aria-hidden]{margin-left:.3em}

/* C16: the home 'Two cushions' pair used h4 + bare p, which no .forcard rule
   covered: heading glued to body, body at 16px ink. */
.forcard h4{font-size:15.5px;font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:8px}
.forcard>p{font-size:15px;line-height:1.7;color:var(--text)}
@media (max-width:520px){.forcard>p{font-size:15.5px}}  /* the phone reading-copy floor from the 520px block */

/* C17/C34: saddle calculator card. The video gets space above it (the facade is
   swapped for .video-live on play, site.js), and table cells on phones get the
   same padding as .prose tables. */
.fitcard .video-facade,.fitcard .video-live{margin-top:14px}
@media (max-width:520px){.fitcard .twrap th,.fitcard .twrap td{padding:9px 10px}}

/* C21: the phone scroll-hint fade (.tscroll::after, <=700px) spans the whole
   .tscroll, which also holds the hint, the footnote and the 'Two cushions'
   cards. Lift everything except the scroller above it. */
.tscroll>:not(.tscroll-in){position:relative;z-index:1}

/* C27: on phones the closing ask matches the hero button (full width, same
   size), so long labels ('See the coccyx cushion on Amazon') stay on one line. */
@media (max-width:520px){.final .btn-lg{width:100%;padding:16px 20px;font-size:15px}}