/* ══════════════════════════════════════════════════════════════════════════
   KASCADE HEALTH™ · THE HOMEPAGE, IN PRODUCTION
   ──────────────────────────────────────────────────────────────────────────
   Ported 2026-09-22 from the approved design lab at _refine/_site. This file
   is the homepage and nothing else: it is the set of rules from the lab's
   eleven stylesheets that ACTUALLY MATCH an element on that page, taken in
   source order, so the cascade is the one that was signed off.

   It was not hand-transcribed. It was extracted in a browser from the live
   lab page and then checked by rendering the lab markup against this single
   file and diffing it against the original, full-height, at 1440 / 1200 /
   1024 / 760 / 500. Every one came back pixel-identical, zero differing
   pixels. If you change a value here, re-run that comparison rather than
   trusting the screenshot to look right.

   The three @font-face blocks point at /assets/fonts/, whose files are
   byte-identical to the lab's. Everything else the lab declared (Source
   Serif, Gambarino, Instrument Serif) resolved to nothing on this page and
   was dropped rather than shipped as four unused downloads.

   index.html does NOT load kascade.css. The old homepage and this one share
   no markup, and kascade.css carries a 2026-09-01 !important sweep that
   would strip rules this design depends on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ==== base/01-grammar.css ==== */
@font-face { font-family: Newsreader; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: Newsreader; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/geist.woff2") format("woff2"); }
:root { --t-micro: 12px; --t-ui: 15px; --t-body: 17px; --t-lede: 21px; --t-h3: 34px; --t-h2: 52px; --t-h1: 84px; --t-num: 76px; --w-display: 400; --w-body: 400; --w-label: 500; --w-ui: 500; --w-num: 400; --lh-h1: 1.0; --lh-h2: 1.06; --lh-h3: 1.14; --lh-lede: 1.45; --lh-body: 1.58; --lh-micro: 1.45; --lh-num: .92; --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 104px; --s-8: 168px; --pause: 200px; --reading: 36rem; --wide: 1240px; --gutter: 72px; --gutter-break: 144px; --esp: #16100B; --esp-2: #1F1710; --ivory: #FAF6EF; --parch: #F2ECE1; --rust: #A64F2A; --rust-lift: #D07A55; --ink: #221A12; --ink-2: #52463A; --ink-3: #6E6052; --on-dark: #F3EDE3; --on-dark-2: #BFB6A9; --on-dark-3: #8D857A; --bg: var(--ivory); --fg-1: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --accent: var(--rust); --rule: rgba(34,26,18,.13); --r-0: 0; --r-pill: 999px; --tk-display: -.018em; --tk-head: -.016em; --tk-body: -.002em; --tk-num: -.02em; --tk-label: .07em; --serif: Georgia,serif; --sans: system-ui,sans-serif; --num-face: var(--sans); }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html { text-size-adjust: 100%; }
body { background: var(--ivory); color: var(--fg-2); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tk-body); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--ivory); }
.s { background: var(--bg); color: var(--fg-2); }
.h1 { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tk-display); color: var(--fg-1); text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tk-head); color: var(--fg-1); text-wrap: balance; }
.lede { font-size: var(--t-lede); line-height: var(--lh-lede); color: var(--fg-2); max-width: 32rem; }
.micro { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--fg-3); letter-spacing: 0px; }
.h1 + .lede, .h2 + .lede, .h3 + .lede, .pull + .lede { margin-top: var(--s-4); }
.signpost + .h1, .signpost + .h2, .signpost + .h3, .signpost + .pull, .signpost + .lede, .signpost + .body, .signpost + .modules, .signpost + .tblwrap, .signpost + .table { margin-top: 0px; }
.signpost { font-weight: var(--w-label); font-size: var(--t-micro); letter-spacing: var(--tk-label); text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: var(--s-3); }
.pull { font-family: var(--serif); font-style: italic; font-weight: var(--w-display); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tk-head); color: var(--fg-1); max-width: 22ch; }
i.lat, cite { font-style: italic; color: var(--fg-3); font-size: inherit; }
.accent { color: var(--accent); font-style: normal; font-weight: inherit; }
.wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
.grid > * { min-width: 0px; }
.btn { display: inline-flex; align-items: center; font-weight: var(--w-ui); font-size: var(--t-ui); letter-spacing: var(--tk-body); color: var(--ivory); background: var(--accent); padding: 15px 30px; border-radius: var(--r-pill); border: 0px; }
.btn-q { font-weight: var(--w-ui); font-size: var(--t-ui); color: var(--fg-1); border-bottom: 1px solid; padding-bottom: 2px; }
.cta-row { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin-top: var(--s-5); }
.hero-media { display: none; }
.ph { filter: saturate(0.9) contrast(1.03) brightness(0.98); }
figcaption { font-size: var(--t-micro); color: var(--fg-3); margin-top: var(--s-1); max-width: 28rem; }
@media (max-width: 1180px){:root { --t-h1: 60px; --t-h2: 40px; --t-h3: 28px; --t-num: 60px; --gutter: 48px; --gutter-break: 72px; --wide: 940px; --pause: 160px; }}
@media (max-width: 860px){:root { --t-h1: 46px; --t-h2: 34px; --t-h3: 26px; --t-num: 52px; --wide: 720px; }}
@media (max-width: 700px){:root { --t-h1: 38px; --t-h2: 30px; --t-h3: 24px; --t-num: 46px; --t-lede: 19px; --t-body: 16.5px; --gutter: 24px; --gutter-break: 24px; --pause: 120px; --reading: 100%; }
.grid { grid-template-columns: 1fr; }
.cta-row { gap: var(--s-4); }}
.nav-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); }
.nav-l { display: flex; align-items: baseline; gap: var(--s-5); min-width: 0px; }
.nav-row nav { display: flex; gap: var(--s-4); font-size: var(--t-ui); font-weight: var(--w-ui); }
.wordmark { font-family: var(--serif); font-weight: var(--w-display); font-size: var(--t-lede); line-height: 1.1; letter-spacing: var(--tk-head); color: var(--fg-1); }
@media (max-width: 820px){.nav-row nav { display: none; }}
/* ==== base/02-product.css ==== */
:root { --st-target: #40604F; --st-track: #7E5E12; --st-out: var(--rust); --fill-target: #C7D3C9; --fill-track: #E6D7B2; --fill-out: #E2BFAB; --fill-rest: rgba(34,26,18,.08); --plate-ratio: 2.29; }
/* ==== base/03-interaction.css ==== */
:root { --ease: cubic-bezier(.2,.6,.2,1); --t-fast: 140ms; --t-med: 240ms; }
@media (prefers-reduced-motion: reduce){*, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }}
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline-offset: 3px; border-radius: 2px; outline: 2px solid var(--accent) !important; }
.ph { filter: saturate(0.9) contrast(1.03) brightness(0.99); }
/* ==== base/04-refinement.css ==== */
.s-hero .hero-txt .lede { margin-top: var(--s-4); }
.s-hero .cta-row { margin-top: var(--s-5); }
/* ==== base/05-type.css ==== */
:root { --serif: Newsreader,Georgia,"Times New Roman",serif; --sans: Geist,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --num-face: var(--sans); --opsz-h1: 24; --opsz-h2: 22; --opsz-h3: 20; --opsz-lede: 18; --w-display: 450; --w-display-italic: 400; }
.h1, .h2, .h3, .pull, .m-name, .a-name, .g-name, .c-h, .e-name, .k-t, .q-ask, .wordmark, .kd-q, .g-h, .r-cite, .t-m { font-optical-sizing: none; }
.h1 { font-family: var(--serif); font-size: var(--t-h1); line-height: 1.07; letter-spacing: -0.012em; font-weight: var(--w-display); font-variation-settings: "opsz" var(--opsz-h1),"wght" var(--w-display); color: var(--fg-1); text-wrap: balance; }
.h2 { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.011em; font-weight: var(--w-display); font-variation-settings: "opsz" var(--opsz-h2),"wght" var(--w-display); color: var(--fg-1); text-wrap: balance; }
.pull { font-family: var(--serif); font-style: italic; font-size: var(--t-h2); line-height: 1.16; letter-spacing: -0.008em; font-weight: var(--w-display-italic); font-variation-settings: "opsz" var(--opsz-h2),"wght" var(--w-display-italic); color: var(--fg-1); max-width: 22ch; }
i.lat, cite { font-style: italic; color: var(--fg-3); font-size: inherit; }
.wordmark { font-family: var(--serif); font-style: normal; font-weight: 500; font-variation-settings: "opsz" 18, "wght" 500; letter-spacing: -0.006em; }
.h1 .accent, .h2 .accent { font-style: normal; font-weight: inherit; }
body, .body, .lede, .micro, .meta { font-family: var(--sans); }
.lede { font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.006em; color: var(--fg-2); }
@media (max-width: 1180px){:root { --opsz-h1: 22; --opsz-h2: 20; }}
@media (max-width: 860px){:root { --opsz-h1: 20; --opsz-h2: 19; --opsz-h3: 18; }}
@media (max-width: 700px){:root { --opsz-h1: 18; --opsz-h2: 18; --opsz-h3: 16; }
.h1 { line-height: 1.1; letter-spacing: -0.008em; }
.h2 { line-height: 1.15; letter-spacing: -0.006em; }}
/* ==== base/06-optical.css ==== */
.h1 + .lede { margin-top: 26px; }
.signpost { margin-bottom: 14px; }
.ksig-rail { display: flex; flex-wrap: wrap; gap: 0px; border-top: 1px solid var(--fg-1); margin-top: 40px; }
.ksig-tab { flex: 1 1 auto; min-width: 0px; appearance: none; background: transparent; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; cursor: pointer; text-align: left; padding: 18px 22px 16px 0px; font-family: var(--sans); color: var(--fg-3); transition: color 140ms var(--ease),border-color 140ms var(--ease); }
.ksig-tab .t-l { display: block; margin-top: 7px; font-size: 19px; line-height: 1.2; letter-spacing: -0.006em; color: var(--fg-2); font-weight: 400; }
.ksig-tab:hover .t-l { color: var(--fg-1); }
.ksig-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.ksig-tab[aria-selected="true"] .t-l { color: var(--fg-1); }
.ksig-panel { display: none; padding-top: 48px; }
.ksig-panel[data-on] { display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr); gap: 44px clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px){.ksig-panel[data-on] { grid-template-columns: 1fr; }
.ksig-tab { flex: 1 1 44%; padding-right: 16px; }}
@media (max-width: 700px){.ksig-rail { gap: 0px; }
.ksig-tab { flex: 1 1 100%; border-bottom: 1px solid var(--rule); padding: 14px 0px; }
.ksig-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
.ksig-tab .t-l { font-size: 18px; }}
.pull { text-wrap: balance; max-width: 26ch; }
@media (max-width: 820px){html[data-dir] .nav-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 16px; column-gap: var(--s-4); }
html[data-dir] .nav-l { display: contents; }
html[data-dir] .nav-row .wordmark { grid-area: 1 / 1; }
html[data-dir] .nav-row .btn-q { grid-area: 1 / 2; justify-self: end; }
html[data-dir] .nav-row nav { display: flex; grid-area: 2 / 1 / auto / -1; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; mask-image: linear-gradient(90deg, rgb(0, 0, 0) calc(100% - 30px), transparent); }
html[data-dir] .nav-row nav::-webkit-scrollbar { display: none; }
html[data-dir] .nav-row nav a { white-space: nowrap; padding-block: 4px; }}
.kbar[data-tight] .kbar-seg:not([data-x]), .kbar[data-tight][data-state="active"] .kbar-seg:not([data-x]), .kbar[data-tight]:hover .kbar-seg:not([data-x]), .kbar[data-tight]:focus-within .kbar-seg:not([data-x]) { color: transparent; }
.kbar[data-tight][data-state="active"] .kbar-leg b, .kbar[data-tight]:hover .kbar-leg b, .kbar[data-tight]:focus-within .kbar-leg b { color: var(--fg-2); }
.kbar[data-tight][data-state="active"] .kbar-leg b[data-on], .kbar[data-tight]:hover .kbar-leg b[data-on], .kbar[data-tight]:focus-within .kbar-leg b[data-on] { color: var(--fg-1); }
.kbar[data-tight][data-state="active"] .kbar-leg b, .kbar[data-tight]:hover .kbar-leg b, .kbar[data-tight]:focus-visible .kbar-leg b { color: var(--fg-2); }
.kbar[data-tight][data-state="active"] .kbar-leg b[data-on], .kbar[data-tight]:hover .kbar-leg b[data-on], .kbar[data-tight]:focus-visible .kbar-leg b[data-on] { color: var(--fg-1); }
html[data-dir] .s[data-parch] .btn { color: var(--ivory); background: var(--accent); }
/* ==== base/07-hero.css ==== */
html[data-dir^="h"] { --t-micro: 12px; --t-ui: 15px; --t-body: 17px; --t-lede: 20px; --t-h3: 30px; --t-h2: 48px; --t-h1: 76px; --t-num: 72px; --tk-body: -.003em; --tk-label: .075em; --tk-num: -.018em; --wide: 1320px; --reading: 34rem; --gutter: 76px; }
.hero-media img { display: none; }
html[data-dir^="h"] .hero-txt .h1 { max-width: 12.5ch; }
html[data-dir^="h"] .hero-txt .lede { max-width: 29rem; }
html[data-dir="hA"] .s-nav { order: 0; }
html[data-dir="hA"] .s-hero { order: 1; }
html[data-dir="hA"] .s-stats { order: 3; }
html[data-dir="hA"] .s-signals { order: 4; }
html[data-dir="hA"] .s-how { order: 5; }
html[data-dir="hA"] .s-cta { order: 11; }
html[data-dir="hA"] .s-foot { order: 12; }
html[data-dir="hA"] .s-hero { padding-block: 72px 104px; }
html[data-dir="hA"] .hero-media { display: block; grid-area: 1 / 8 / auto / span 5; align-self: end; }
html[data-dir="hA"] .hero-media .hp-port { display: block; aspect-ratio: 0.79 / 1; object-fit: cover; object-position: 54% 26%; width: 100%; }
html[data-dir="hA"] .hero-txt { grid-area: 1 / 1 / auto / span 7; align-self: end; }
@media (max-width: 1180px){html[data-dir] { --t-h1: 58px; --t-h2: 40px; --t-h3: 27px; --t-num: 56px; --gutter: 52px; --wide: 1000px; }}
@media (max-width: 860px){html[data-dir] { --t-h1: 44px; --t-h2: 33px; --t-h3: 25px; --t-num: 48px; --wide: 720px; --gutter: 40px; }
html[data-dir] .hero-media, html[data-dir] .hero-txt, html[data-dir] .hero-meta { grid-column: 1 / -1; }
html[data-dir="hA"] .hero-media, html[data-dir="hC"] .hero-media { grid-row: 1; max-width: 23rem; }
html[data-dir="hA"] .hero-txt, html[data-dir="hC"] .hero-txt { grid-row: 2; margin-top: 44px; }
html[data-dir="hA"] .hero-media .hp-port, html[data-dir="hC"] .hero-media .hp-port { aspect-ratio: 1.25 / 1; }}
@media (max-width: 700px){html[data-dir] { --t-h1: 37px; --t-h2: 28px; --t-h3: 23px; --t-num: 44px; --t-lede: 18px; --t-body: 16.5px; --gutter: 24px; --reading: 100%; --wide: 100%; }
html[data-dir] .grid { grid-template-columns: 1fr; }
html[data-dir^="h"] .hero-txt .h1 { max-width: none; }
html[data-dir] .hero-media { max-width: none; }}
/* ==== base/08-final.css ==== */
html[data-dir] { --scale: rgba(34,26,18,.055); --scale-edge: rgba(34,26,18,.22); --scale-hi-target: rgba(64,96,79,.26); --scale-hi-track: rgba(126,94,18,.22); --scale-hi-out: rgba(166,79,42,.22); --scale-index: var(--fg-1); --bar-h: 22px; --bar-h-mini: 7px; }
html[data-dir] .s[data-dark], html[data-dir] .s[data-dark2] { --scale: rgba(243,237,227,.075); --scale-edge: rgba(243,237,227,.26); --scale-hi-target: rgba(127,164,140,.30); --scale-hi-track: rgba(201,162,74,.26); --scale-hi-out: rgba(208,122,85,.30); }
html[data-dir] { --scale: rgba(34,26,18,.07); --scale-edge: rgba(34,26,18,.30); }
html[data-dir] .s[data-dark], html[data-dir] .s[data-dark2] { --scale: rgba(243,237,227,.09); --scale-edge: rgba(243,237,227,.34); }
html[data-dir] .s-signals { overflow-x: clip; }
html[data-dir] .ksig-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0px; border-top: 1px solid var(--fg-1); border-bottom: 0px; margin-top: 52px; }
html[data-dir] .ksig-tab { display: block; text-align: left; padding: 18px 24px 18px 0px; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: transparent; cursor: pointer; transition: border-color var(--t-med) var(--ease),
  color var(--t-fast) var(--ease); }
html[data-dir] .ksig-tab .t-l { display: block; margin-top: 7px; font-family: var(--sans); font-size: var(--t-ui); line-height: 1.25; color: var(--fg-2); letter-spacing: -0.004em; }
html[data-dir] .ksig-tab:hover .t-l { color: var(--fg-1); }
html[data-dir] .ksig-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
html[data-dir] .ksig-tab[aria-selected="true"] .t-l { color: var(--fg-1); font-weight: 500; }
html[data-dir] .ksig-panel { display: none; }
html[data-dir] .ksig-panel[data-on] { display: grid; grid-template-columns: minmax(0px, 6fr) minmax(0px, 6fr); gap: clamp(30px, 3.4vw, 46px) clamp(36px, 5vw, 80px); align-items: start; padding-top: clamp(34px, 3.6vw, 52px); }
html[data-dir] .sg-head { grid-area: 2 / 1; }
html[data-dir] .sg-body { display: contents; }
html[data-dir] .sg-name { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.014em; font-weight: 450; font-variation-settings: "opsz" 20, "wght" 450; color: var(--fg-1); }
html[data-dir] .sg-sym { margin-top: 18px; max-width: 30rem; font-size: var(--t-body); line-height: 1.62; color: var(--fg-2); }
html[data-dir] .sg-next { display: block; width: 100%; text-align: left; margin-top: auto; padding: 22px 0px 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--fg-1); background: transparent; cursor: pointer; font: inherit; color: inherit; }
html[data-dir] .sg-next-b { display: block; margin-top: 11px; max-width: 36rem; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
@media (max-width: 860px){html[data-dir] .ksig-rail { grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
html[data-dir] .ksig-tab { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding: 14px 0px; border-bottom: 1px solid var(--rule); }
html[data-dir] .ksig-tab .t-l { margin: 0px; }
html[data-dir] .ksig-tab[aria-selected="true"] { border-bottom-color: var(--accent); }
html[data-dir] .ksig-panel[data-on] { grid-template-columns: 1fr; gap: 0px; }
html[data-dir] .sg-body { grid-area: 2 / 1; }}
html[data-dir] .sg-next { grid-area: 3 / 1 / auto / -1; display: grid; grid-template-columns: minmax(0px, 6fr) minmax(0px, 6fr); column-gap: clamp(36px, 5vw, 80px); align-items: start; width: 100%; text-align: left; margin: 0px; padding: 26px 0px 0px; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--fg-1); background: transparent; cursor: pointer; font: inherit; color: inherit; }
html[data-dir] .sg-next-b { grid-column: 1; display: block; margin-top: 11px; max-width: 30rem; }
@media (max-width: 860px){html[data-dir] .sg-head, html[data-dir] .sg-data { grid-column: 1; }
html[data-dir] .sg-next { grid-area: 4 / 1; grid-template-columns: 1fr; }
html[data-dir] .sg-next-b, html[data-dir] .sg-next-go { grid-column: 1; }}
html[data-dir] .kwhy-head, html[data-dir] .khow-head { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
html[data-dir] .kwhy-turn { font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.006em; color: var(--fg-2); max-width: 26rem; padding-bottom: 4px; }
html[data-dir] .kstats { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); grid-template-rows: auto auto auto; gap: 0px clamp(24px, 3.4vw, 56px); margin-top: clamp(40px, 4vw, 60px); border-top: 1px solid var(--fg-1); }
html[data-dir] .kstat { display: contents; }
html[data-dir] .kstat-n { grid-row: 1; font-family: var(--num-face); font-weight: 500; font-size: clamp(52px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.03em; color: var(--fg-1); padding-top: 26px; font-variant-numeric: tabular-nums lining-nums; }
html[data-dir] .kstat-n i { font-style: normal; font-size: 0.36em; vertical-align: 0.62em; letter-spacing: 0px; color: var(--fg-3); padding-left: 0.06em; }
html[data-dir] .kstat-c { grid-row: 2; margin: 14px 0px 26px; font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--fg-2); align-self: start; }
html[data-dir] .kstat-s { grid-row: 3; margin: 0px; padding-top: 13px; border-top: 1px solid var(--rule); font-size: 11.5px; line-height: 1.4; color: var(--fg-3); align-self: start; }
html[data-dir] .s-how { padding-bottom: clamp(56px, 5vw, 76px); }
@media (max-width: 860px){html[data-dir] .kwhy-head, html[data-dir] .khow-head, html[data-dir] .kwalk { grid-template-columns: 1fr; gap: 24px; }
html[data-dir] .kstats { grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: auto auto auto auto auto auto; }
html[data-dir] .kstat:nth-child(n+3) .kstat-n { grid-row: 4; }
html[data-dir] .kstat:nth-child(n+3) .kstat-c { grid-row: 5; }
html[data-dir] .kstat:nth-child(n+3) .kstat-s { grid-row: 6; }}
@media (max-width: 700px){html[data-dir] .kstats { grid-template-columns: 1fr; border-top: 0px; }
html[data-dir] .kstat { display: block; border-top: 1px solid var(--rule); padding-block: 22px; }
html[data-dir] .kstat-c { margin: 12px 0px 10px; }
html[data-dir] .kstat-s { border-top: 0px; padding-top: 0px; }}
html[data-dir="hA"] .hero-txt .h1 { max-width: 15.5ch; text-wrap: pretty; }
html[data-dir] .ksig-tab { border-bottom: 0px; position: relative; padding-right: 28px; }
html[data-dir] .ksig-tab .t-l { display: inline-block; padding-bottom: 9px; border-bottom: 2px solid transparent; }
html[data-dir] .ksig-tab[aria-selected="true"] .t-l { border-bottom-color: var(--accent); }
html[data-dir] .kend { display: grid; grid-template-columns: minmax(0px, 7fr) minmax(0px, 4fr); gap: clamp(32px, 4vw, 80px); align-items: end; }
html[data-dir] .btn { border-radius: 3px; }
html[data-dir] .btn-q { border-radius: 0px; }
html[data-dir] .s-foot .pull { text-wrap: balance; max-width: 22ch; }
html[data-dir] .s-stats > .wide { padding-top: clamp(30px, 3vw, 44px); border-top: 1px solid var(--rule); }
@media (max-width: 860px){html[data-dir] .kfaq-head, html[data-dir] .kend { grid-template-columns: 1fr; gap: 26px; }}
/* ==== _site/system.css ==== */
html .s[data-dark] { --bg: var(--esp); --fg-1: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --accent: var(--rust-lift); --rule: rgba(243,237,227,.15); --st-target: #7FA48C; --st-track: #C9A24A; --st-out: var(--rust-lift); }
html .s[data-parch] { --bg: var(--parch); }
:root { --esp: #16110A; --esp-2: #1F1810; --ivory: #FCFAF4; --parch: #F6F1E4; --rust: #AE4F2A; --rust-lift: #DD8A62; --ink: #1F1810; --ink-2: #4C4030; --ink-3: #7A6B55; --on-dark: #F7F2E6; --on-dark-2: #CFC4AE; --on-dark-3: #948873; --st-target: #3F7C68; --st-target-t: #36705C; --st-track: #8A6A1C; --st-out: var(--rust); --rule: rgba(31,24,16,.13); }
:root { --opsz-h1: 18; --opsz-h2: 18; --opsz-h3: 18; --opsz-lede: 18; --w-display: 430; --w-display-italic: 400; }
.h1 { letter-spacing: -0.034em; line-height: 1.02; font-weight: 430; font-variation-settings: "opsz" 18, "wght" 430; }
.h2 { letter-spacing: -0.026em; line-height: 1.08; font-weight: 430; font-variation-settings: "opsz" 18, "wght" 430; }
.h3, .m-name, .a-name, .sg-name { letter-spacing: -0.016em; line-height: 1.24; font-weight: 440; font-variation-settings: "opsz" 18, "wght" 440; }
.pull { letter-spacing: -0.022em; line-height: 1.14; font-weight: 400; font-variation-settings: "opsz" 18, "wght" 400; }
.wordmark { font-variation-settings: "opsz" 18, "wght" 480; letter-spacing: -0.014em; }
.lede { font-family: var(--serif); font-weight: 390; line-height: 1.5; letter-spacing: -0.008em; color: var(--fg-2); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 390; text-wrap: pretty; }
.h1 .accent, .h2 .accent { font-weight: inherit; font-style: normal; }
.h1 .accent { white-space: nowrap; }
.signpost, .k-l, .m-l, .sg-h, .g-h { font-size: 11px; font-weight: 540; letter-spacing: 0.165em; text-transform: uppercase; }
.metric .value, .kbar-ticks span, .kbar-val span, .sg-v, .m-num, .kprice-n, .table td, .k-stamp b, .kstat-n { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; }
html[data-dir] .kstat-n { font-family: var(--serif); font-weight: 420; letter-spacing: -0.034em; font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 420; font-variant-numeric: lining-nums tabular-nums; }
html[data-dir] .kstat-n i { font-size: 0.34em; vertical-align: 0.66em; font-weight: 500; font-family: var(--sans); letter-spacing: 0.02em; }
cite, .g-cite, .st-cite, html[data-dir] .kstat-s { font-style: normal; font-size: 10.5px; font-weight: 540; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); border: 0px; padding-top: 0px; }
.wordmark, .nav-row nav a { display: inline-flex; align-items: center; min-height: 44px; }
.btn-q { position: relative; border-bottom: 0px; display: inline-flex; align-items: center; min-height: 44px; padding-block: calc(-0.725em + 22px); }
.btn-q::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: calc(-0.725em + 20px); height: 1px; background: currentcolor; }
a:focus-visible, button:focus-visible, .kbar:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
html[data-dir] .kstats, html[data-dir] .kstat-s, html[data-dir] .hero-meta, html[data-dir] .kask-a, html[data-dir] .sg-data, html[data-dir] .sg-row, html[data-dir] .sg-next, html[data-dir] .ksig-rail, html[data-dir] .ktrust-note, html[data-dir] .kwalk-spec, html[data-dir] .kwalk-spec-src, html[data-dir] .ph-cap, html[data-dir] .kprice-i, html[data-dir] .kend-aside, html[data-dir] .khow-table .table td, html[data-dir] .khow-table .table td.q, html[data-dir] .kd, html[data-dir] .s-stats .wide, html[data-dir] .s-founder .f-txt .meta, html[data-dir] .s-founder .f-fig .ph-cap, html[data-dir] .t-l, html[data-dir] .kstat { border-top: 0px; border-bottom: 0px; }
/* ==== _site/mechanics.css ==== */
html[data-dir] { --wide: 1320px; --gutter: 88px; }
html[data-dir] .s { overflow: visible; }
.room { position: relative; }
html[data-dir] .ksig-rail { border: 0px; display: flex; flex-wrap: wrap; }
html[data-dir] .ksig-tab { padding: 0px 0px 10px; background: none; }
html[data-dir] .ksig-tab .t-l { font-family: var(--serif); font-weight: 430; letter-spacing: -0.01em; color: var(--fg-3); border: 0px; font-variation-settings: "opsz" 18, "wght" 430; transition: color 0.2s; }
html[data-dir] .ksig-tab[aria-selected="true"] .t-l { color: var(--fg-1); }
html[data-dir] .ksig-tab:hover .t-l { color: var(--fg-2); }
html[data-dir] .sg-next { border: 0px; padding-top: 0px; }
html[data-dir] .kstats { border: 0px; }
html[data-dir] .kstat { display: block; }
html[data-dir] .kstat-n { padding-top: 0px; display: block; }
html[data-dir] .s-foot .pull { max-width: 18ch; }
/* ==== _site/home.css ==== */
html[data-dir] { --wide: 1320px; --gutter: 88px; --frame: calc(1240px + 2 * var(--gutter)); --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px; --s8: 168px; }
body { background: var(--ivory); }
html[data-dir] .s { overflow: visible; padding-block: 0px; }
.room { position: relative; }
html[data-dir] .room--open, html[data-dir] .room--object, html[data-dir] .room--knowing { background: var(--ivory); }
html[data-dir] .room--reality, html[data-dir] .room--buy { background: var(--parch); }
html[data-dir] .room--night, html[data-dir] .room--close { background: var(--esp); }
html[data-dir] .s-nav { padding-block: 32px 26px; }
html[data-dir] .s-nav .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
html[data-dir] .s-nav .nav-l { display: flex; align-items: baseline; gap: clamp(34px, 4vw, 64px); }
html[data-dir] .s-nav .wordmark { font-size: 19px; color: var(--fg-1); border: 0px; }
html[data-dir] .s-nav nav { display: flex; gap: clamp(20px, 2.2vw, 34px); }
html[data-dir] .s-nav nav a { font-family: var(--sans); font-size: 13px; font-weight: 450; letter-spacing: 0.005em; color: var(--fg-3); border: 0px; transition: color 0.18s; }
html[data-dir] .s-nav nav a:hover { color: var(--fg-1); }
html[data-dir] .s-nav .btn-q { font-size: 13.5px; color: var(--fg-1); }
html[data-dir] .s-hero { padding-block: clamp(14px, 1.6vw, 24px) 0px; }
html[data-dir] .hero-wide { row-gap: 0px; align-items: stretch; }
html[data-dir] .hero-media { display: block; grid-area: 1 / 7 / auto / -1; align-self: stretch; position: relative; min-height: clamp(560px, 57vw, 790px); margin-right: calc(-1 * (max(0px,(100vw - var(--wide)) / 2)
    + var(--gutter))); }
html[data-dir] .hero-media .hp-port { position: absolute; inset: 0px; display: block; width: 100%; height: 100%; min-height: 0px; aspect-ratio: auto; object-fit: cover; object-position: 44% 24%; }
html[data-dir] .hero-txt { grid-area: 1 / 1 / auto / span 5; align-self: start; padding-block: clamp(40px, 4.6vw, 66px) clamp(40px, 4.4vw, 66px); }
html[data-dir] .hero-txt .signpost { color: var(--fg-3); }
html[data-dir] .hero-txt .h1 { max-width: 13ch; font-size: clamp(44px, 4.95vw, 70px); line-height: 0.99; letter-spacing: -0.044em; margin-top: clamp(14px, 1.5vw, 22px); }
html[data-dir] .hero-txt .lede { max-width: 26rem; font-size: 20px; line-height: 1.48; margin-top: clamp(20px, 2.2vw, 30px); }
html[data-dir] .hero-proof { list-style: none; margin: clamp(24px, 2.6vw, 36px) 0px 0px; padding: 0px; max-width: 27rem; }
html[data-dir] .hero-proof li { font-family: var(--serif); font-size: 23px; line-height: 1.26; letter-spacing: -0.022em; font-weight: 450; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 450; }
html[data-dir] .hero-proof li + li { margin-top: clamp(9px, 1.1vw, 15px); }
html[data-dir] .hero-txt .cta-row { margin-top: clamp(38px, 4.2vw, 58px); display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
html[data-dir] .s-night { padding-block: clamp(78px, 8.4vw, 130px) clamp(34px, 3.6vw, 56px); }
html[data-dir] .s-night-g { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
html[data-dir] .night-ph { grid-area: 1 / 1 / auto / span 5; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; align-self: stretch; margin-left: calc(-1 * (max(0px,(100vw - var(--wide)) / 2) + var(--gutter))); }
html[data-dir] .night-ph img { display: block; width: 100%; height: 100%; min-height: clamp(470px, 50vw, 676px); object-fit: cover; object-position: 52% 42%; }
html[data-dir] .night-txt { --n-in: clamp(22px,2.5vw,36px); grid-area: 1 / 6 / auto / -1; display: flex; flex-direction: column; padding-block: 2px 6px; margin-left: clamp(26px, 4.6vw, 68px); margin-right: calc(-1 * max(0px,(100vw - var(--wide)) / 2)); }
html[data-dir] .night-ask { margin: 0px; font-family: var(--serif); font-size: clamp(24px, 2.55vw, 37px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 430; font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; }
html[data-dir] .night-q { margin: clamp(18px, 1.9vw, 27px) 0px 0px; padding-left: var(--n-in); text-indent: calc(-1 * var(--n-in)); font-family: var(--serif); font-optical-sizing: none; letter-spacing: -0.026em; line-height: 1.2; text-wrap: pretty; }
html[data-dir] .q { display: inline; padding-right: 0.62em; }
html[data-dir] .q-xl { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.04; color: var(--fg-1); font-style: italic; letter-spacing: -0.03em; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .q-m { font-size: clamp(22px, 2.55vw, 37px); line-height: 1.3; color: var(--fg-2); font-style: italic; letter-spacing: -0.024em; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .q-mi { font-size: clamp(21px, 2.35vw, 34px); line-height: 1.3; color: var(--fg-2); font-style: italic; letter-spacing: -0.024em; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .q-s { font-size: clamp(15px, 1.4vw, 20px); line-height: 2.05; color: rgb(172, 158, 134); white-space: nowrap; font-style: normal; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .night-where { margin: clamp(34px, 3.6vw, 52px) 0px 0px; font-family: var(--serif); font-size: clamp(24px, 2.95vw, 42px); line-height: 1.12; letter-spacing: -0.034em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; max-width: none; }
html[data-dir] .night-turn { margin: clamp(26px, 2.6vw, 38px) 0px 0px; padding-top: 0px; font-family: var(--serif); font-size: clamp(21px, 2.3vw, 32px); line-height: 1.24; letter-spacing: -0.026em; font-weight: 410; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 400; max-width: 33ch; }
html[data-dir] .s-signals { padding-block: clamp(54px, 5.8vw, 90px) clamp(66px, 7vw, 112px); overflow: hidden; }
html[data-dir] .s-signals { padding-block: clamp(62px, 6.6vw, 104px) clamp(44px, 4.4vw, 64px); overflow: hidden; }
html[data-dir] .sig-obj { position: relative; min-height: 752px; }
html[data-dir] .sig-g { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
html[data-dir] .sig-say { grid-area: 1 / 1 / auto / span 5; }
html[data-dir] .sig-h { font-size: clamp(36px, 4vw, 58px); line-height: 1.03; letter-spacing: -0.036em; max-width: 12ch; }
html[data-dir] .sig-turn { margin-top: clamp(20px, 2.2vw, 30px); font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.36; letter-spacing: -0.018em; font-weight: 400; color: var(--fg-2); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 400; max-width: 30ch; }
html[data-dir] .sig-art { position: absolute; left: 38%; top: 190px; right: calc(-1 * (max(0px,(100vw - var(--wide)) / 2) + var(--gutter))); aspect-ratio: 2.29 / 1; height: auto; pointer-events: none; z-index: 1; }
html[data-dir] .sig-art img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 0.34s; }
html[data-dir] .sig-art img.is-on { opacity: 1; }
html[data-dir] .ksig-rail { position: absolute; left: calc(var(--gutter) + 22px); top: 344px; width: 238px; display: block; border: 0px; padding: 0px; margin: 0px; z-index: 3; }
html[data-dir] .ksig-tab { display: block; width: 100%; text-align: left; background: none; border: 0px; padding-block: 8px; position: relative; cursor: pointer; }
html[data-dir] .ksig-tab + .ksig-tab { margin-top: clamp(4px, 1.1vw, 16px); }
html[data-dir] .ksig-tab .t-l { display: block; font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 420; color: rgb(134, 123, 107); border: 0px; font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 420; transition: color 0.24s, transform 0.24s; }
html[data-dir] .ksig-tab::before { content: ""; position: absolute; left: -22px; top: calc(0.56em + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.4); transition: opacity 0.24s, transform 0.24s; }
html[data-dir] .ksig-tab:hover .t-l { color: var(--on-dark-2); }
html[data-dir] .ksig-tab[aria-selected="true"] .t-l { color: var(--fg-1); font-weight: 430; font-variation-settings: "opsz" 18, "wght" 430; }
html[data-dir] .ksig-tab[aria-selected="true"]::before { opacity: 1; transform: scale(1); }
html[data-dir] .sig-take { position: absolute; left: var(--gutter); right: calc(-1 * (max(0px,(100vw - var(--wide)) / 2))); top: 697px; margin: 0px; max-width: none; font-family: var(--serif); font-size: clamp(23px, 3.35vw, 48px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; z-index: 5; }
html[data-dir] .sig-take .accent { white-space: nowrap; }
html[data-dir] .ksig-panel { padding: 0px; display: none; }
html[data-dir] .ksig-panel[data-on] { display: block; position: absolute; left: 28%; width: 452px; top: 302px; z-index: 4; background: rgb(244, 238, 224); color: var(--ink); box-shadow: rgba(8, 5, 2, 0.35) 0px 2px 6px, rgba(8, 5, 2, 0.55) 0px 28px 70px; padding: 28px 32px 30px; }
html[data-dir] .sg-body { display: grid; grid-template-columns: minmax(0px, 1fr); row-gap: 0px; }
html[data-dir] .sg-name { grid-area: 1 / 1; font-family: var(--serif); font-size: 23px; line-height: 1.1; letter-spacing: -0.024em; font-weight: 430; color: var(--ink); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(31, 24, 16, 0.16); }
html[data-dir] .sg-head { grid-area: 2 / 1; padding: 0px; }
html[data-dir] .sg-next { grid-area: 3 / 1; display: block; text-align: left; background: none; border: 0px; padding: 0px; margin-top: 15px; }
html[data-dir] .c-l { display: block; font-family: var(--sans); font-size: 9px; font-weight: 540; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); margin-bottom: 6px; }
html[data-dir] .sg-sym, html[data-dir] .sg-why, html[data-dir] .sg-next-b { margin: 0px 0px 13px; font-family: var(--sans); font-size: 13px; line-height: 1.56; color: var(--ink-2); max-width: none; font-weight: 400; letter-spacing: 0px; }
html[data-dir] .sg-why { margin-bottom: 0px; }
html[data-dir] .sg-next-b { margin-bottom: 0px; font-family: var(--serif); font-size: 15.5px; line-height: 1.4; letter-spacing: -0.016em; font-weight: 430; color: var(--ink); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; }
html[data-dir] .s-hero, html[data-dir] .s-know { overflow-x: clip; }
html[data-dir] .s-how { --supp-x: clamp(34px,7.7vw,111px); --supp-drop: clamp(100px,9.7vw,140px); --band-gap: clamp(20px,1.85vw,26px); padding-block: var(--s8) var(--s7); overflow-x: clip; }
html[data-dir] .s-how .wide, html[data-dir] .s-cta .wide, html[data-dir] .s-price .wide, html[data-dir] .s-foot .wide { max-width: var(--frame); }
html[data-dir] .khow-head { display: block; }
html[data-dir] br.mb { display: none; }
html[data-dir] br.db { display: none; }
html[data-dir] .s-how { --stage-gap: clamp(18px,1.9vw,27px); }
html[data-dir] .s-how .signpost { color: var(--accent); font-size: 13px; font-weight: 640; letter-spacing: 0.155em; }
html[data-dir] .khow-head .h2 { font-size: clamp(41px, 4.87vw, 70px); line-height: 0.97; letter-spacing: -0.035em; max-width: none; margin-top: clamp(16px, 1.6vw, 23px); }
html[data-dir] .khow-deck { margin-top: clamp(24px, 2.2vw, 32px); max-width: 493px; font-family: var(--serif); font-size: clamp(16.5px, 1.32vw, 19px); line-height: 1.5; letter-spacing: -0.008em; font-weight: 400; color: var(--ink-2); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 390; text-wrap: pretty; }
html[data-dir] .stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.8vw, 40px); align-items: start; margin: clamp(38px, 3.9vw, 60px) 0px 0px; }
html[data-dir] .st { margin: 0px; background: var(--ivory); }
html[data-dir] .st img { display: block; width: 100%; height: auto; }
html[data-dir] .cap-o { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: none; text-wrap: pretty; }
html[data-dir] .cap-o span { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.11em; color: var(--accent); margin-bottom: 5px; font-variant-numeric: lining-nums tabular-nums; }
html[data-dir] .cap-o em { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.2; letter-spacing: -0.012em; font-style: normal; font-weight: 420; color: var(--ink-3); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 420; margin-bottom: 9px; }
html[data-dir] .cap-o b { display: block; font-family: var(--serif); font-size: clamp(25px, 2.14vw, 30.5px); line-height: 1.1; letter-spacing: -0.026em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; margin-bottom: 14px; text-wrap: balance; }
html[data-dir] .beat { margin: 0px; display: block; }
html[data-dir] .beat .st { margin-top: var(--stage-gap); }
html[data-dir] .beat--1 { grid-area: 1 / 1 / auto / span 4; }
html[data-dir] .st--labs { padding: 24px 46px 20px 24px; box-shadow: none; border: 1px solid rgba(22, 17, 10, 0.06); }
html[data-dir] .beat--2 .cap-o { max-width: 440px; }
html[data-dir] .beat--2 .cap-o b { max-width: 19ch; }
html[data-dir] .beat--2 { grid-area: 1 / 6 / auto / span 6; margin-top: clamp(12px, 1.35vw, 20px); }
html[data-dir] .st--link { position: relative; z-index: 2; box-shadow: none; border: 1px solid rgba(22, 17, 10, 0.06); }
html[data-dir] .rep-side { grid-area: 1 / 1 / auto / span 3; z-index: 4; }
html[data-dir] .cap-3 { max-width: none; }
html[data-dir] .cap-3 b { margin-bottom: 13px; }
html[data-dir] .rep-side .how-link { margin-top: clamp(20px, 2vw, 28px); }
html[data-dir] .cap-3 { position: static; width: auto; margin: 0px; max-width: none; font-size: 15.5px; line-height: 1.48; }
html[data-dir] .cap-3 b { font-size: clamp(26px, 2.22vw, 32px); max-width: none; }
html[data-dir] .how-link { display: inline-flex; align-items: baseline; font-size: 15px; font-weight: 500; letter-spacing: 0.002em; color: var(--fg-1); }
html[data-dir] .how-link span { line-height: 1; padding-bottom: 4px; border-bottom: 1px solid rgba(31, 24, 16, 0.33); }
html[data-dir] .how-link::after { content: "→"; position: static; left: auto; right: auto; bottom: auto; width: auto; height: auto; background: none; margin-left: 0.62em; font-size: 1.04em; color: var(--accent); }
html[data-dir] .rep-stage { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.8vw, 40px); align-items: start; margin: clamp(46px,4.9vw,74px)
    calc(-1 * (max(0px,(100vw - var(--wide)) / 2) + var(--gutter))) 0 0; }
html[data-dir] .st--rep { grid-area: 1 / 4 / auto / -1; position: relative; z-index: 1; }
html[data-dir] .st--rep img { box-shadow: none; }
html[data-dir] .st--supp { margin: var(--s5) 0 0; width: 100%; background: var(--ivory); box-shadow: none; border: 1px solid rgba(22, 17, 10, 0.06); }
html[data-dir] .how-band { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.8vw, 40px); align-items: start; margin: var(--s6) 0 0; }
html[data-dir] .st--supp { grid-column: 1 / span 3; }
html[data-dir] .add-on { grid-column: 4 / span 5; padding-left: 0px; }
html[data-dir] .how-note { grid-column: 9 / span 4; max-width: none; padding-left: 0px; }
html[data-dir] .how-note .add-l { color: var(--accent); }
html[data-dir] .note-h { margin: var(--s3) 0 0; font-family: var(--serif); font-style: normal; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.1; letter-spacing: -0.024em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; max-width: none; text-wrap: balance; }
html[data-dir] .note-b { margin: var(--s4) 0 0; max-width: none; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
html[data-dir] .add-l { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
html[data-dir] .add-h { margin: var(--s3) 0 0; font-family: var(--serif); font-size: clamp(23px, 2.12vw, 29px); line-height: 1.1; letter-spacing: -0.026em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; max-width: none; text-wrap: balance; }
html[data-dir] .add-b { margin: var(--s4) 0 0; max-width: none; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
html[data-dir] .how-take { margin: var(--s8) auto 0; width: auto; max-width: none; padding-left: 0px; text-align: center; font-family: var(--serif); font-size: clamp(30px, 3.55vw, 51px); line-height: 1; letter-spacing: -0.03em; font-weight: 430; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 430; }
html[data-dir] .how-take .accent { display: inline-block; margin-top: 0.08em; font-size: 1em; line-height: 1; letter-spacing: -0.036em; }
html[data-dir] .raw { width: 100%; border-collapse: collapse; font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; }
html[data-dir] .raw th { text-align: left; font-weight: 400; font-size: 12.5px; line-height: 1.5; color: rgb(110, 99, 80); padding: 9px 0px; white-space: nowrap; }
html[data-dir] .raw td { text-align: right; font-size: 13px; font-weight: 500; color: rgb(46, 39, 25); padding: 9px 0px 9px 10px; letter-spacing: -0.01em; }
html[data-dir] .raw td:last-child { width: 54px; font-size: 12px; font-weight: 400; color: rgb(143, 134, 114); letter-spacing: 0.02em; }
html[data-dir] .s-stats { padding-block: clamp(84px, 9vw, 140px) clamp(54px, 5.8vw, 88px); }
html[data-dir] .s-stats .wide { max-width: calc(1200px + 2 * var(--gutter)); }
html[data-dir] .s-stats { padding-block: clamp(78px, 8.4vw, 128px) clamp(70px, 7.6vw, 110px); }
html[data-dir] .s-stats > .wide { --stat-shift: clamp(0px,3.9vw,56px); display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.8vw, 40px); align-items: start; padding-top: 0px; border-top: 0px; max-width: calc(1220px + 2 * var(--gutter)); }
html[data-dir] .st-head { grid-area: 1 / 1 / auto / span 6; text-align: left; margin-left: calc(clamp(14px,2.4vw,34px) + var(--stat-shift)); }
html[data-dir] .s-stats .signpost { display: block; color: var(--ink-2); font-size: clamp(16px, 1.8vw, 26px); font-weight: 500; letter-spacing: 0.07em; white-space: nowrap; line-height: 1.3; }
html[data-dir] .s-stats .h2 { margin: clamp(20px, 2.2vw, 32px) 0px 0px; max-width: 13ch; font-size: clamp(36px, 4.1vw, 59px); line-height: 1.04; letter-spacing: -0.032em; }
html[data-dir] .kstat-n { display: block; line-height: 0.82; }
html[data-dir] .kstat-c { line-height: 1.44; color: var(--fg-2); }
html[data-dir] .kstat-s { margin-top: 10px; font-size: 9px; letter-spacing: 0.14em; color: var(--fg-3); opacity: 0.8; border: 0px; padding: 0px; }
html[data-dir] .kstat--lead { grid-area: 2 / 1 / auto / span 6; margin-top: clamp(40px, 4.4vw, 68px); margin-left: calc(clamp(40px,9.4vw,136px) + var(--stat-shift)); }
html[data-dir] .kstat--lead .kstat-n { font-size: clamp(140px, 14.8vw, 214px); letter-spacing: -0.052em; }
html[data-dir] .kstat--lead .kstat-n i { font-size: 0.2em; vertical-align: 1.85em; margin-left: 0.06em; }
html[data-dir] .kstat--lead .kstat-c { margin: clamp(11px, 1.25vw, 18px) 0px 0px; max-width: 21ch; font-family: var(--serif); font-size: clamp(19px, 1.95vw, 27px); line-height: 1.26; letter-spacing: -0.02em; font-weight: 420; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 420; }
html[data-dir] .kstats { grid-area: 1 / 7 / span 2 / -1; display: grid; grid-template-columns: auto auto; place-content: start; column-gap: clamp(20px, 2.9vw, 42px); border: 0px; margin-left: calc(var(--stat-shift) - clamp(34px,6.2vw,89px)); padding-top: clamp(48px, 5.4vw, 80px); }
html[data-dir] .kstats .kstat-c { margin-top: 14px; font-size: 13.5px; }
html[data-dir] .kstats .kstat-n i { font-size: 0.29em; vertical-align: 0.8em; margin-left: 0.04em; }
html[data-dir] .kstat--a { grid-area: 1 / 1; width: clamp(196px, 17.4vw, 250px); }
html[data-dir] .kstat--a .kstat-n { font-size: clamp(66px, 7vw, 102px); letter-spacing: -0.046em; }
html[data-dir] .kstat--c { grid-area: 1 / 2; width: clamp(200px, 17.7vw, 254px); }
html[data-dir] .kstat--c .kstat-n { font-size: clamp(57px, 6.05vw, 88px); letter-spacing: -0.045em; padding-top: 0.17em; }
html[data-dir] .kstat--b { grid-area: 2 / 1 / auto / -1; width: clamp(186px, 15.6vw, 224px); margin-left: clamp(36px, 4.9vw, 70px); margin-top: clamp(44px, 4.3vw, 72px); }
html[data-dir] .kstat--b .kstat-n { font-size: clamp(49px, 5.1vw, 74px); letter-spacing: -0.042em; }
html[data-dir] .kwhy-turn { grid-area: 3 / 1 / auto / -1; margin: clamp(20px, 1.85vw, 27px) auto 0px; padding: 0px; border: 0px; max-width: none; text-align: center; font-family: var(--serif); font-size: clamp(19px, 2.05vw, 30px); line-height: 1.26; letter-spacing: -0.026em; font-weight: 420; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 420; }
html[data-dir] .s-know { padding-block: clamp(96px, 10.4vw, 160px) clamp(90px, 9.6vw, 150px); }
html[data-dir] .s-know-g { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
html[data-dir] .know-h { grid-area: 1 / 1 / auto / span 5; align-self: start; font-size: clamp(46px, 5.4vw, 78px); line-height: 0.99; letter-spacing: -0.04em; max-width: none; }
html[data-dir] .know-q { grid-area: 2 / 1 / auto / span 4; align-self: end; margin: clamp(34px, 3.6vw, 56px) 0px 0px; padding: 0px; border: 0px; max-width: 27ch; font-family: var(--serif); font-size: clamp(19px, 2.05vw, 28px); line-height: 1.38; letter-spacing: -0.018em; font-weight: 410; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 410; text-wrap: pretty; }
html[data-dir] .know-ph { grid-area: 1 / 6 / span 2 / -1; margin-bottom: 0px; margin-left: 0px; align-self: start; margin-top: 14px; margin-right: calc(-1 * (max(0px,(100vw - var(--wide)) / 2) + var(--gutter))); }
html[data-dir] .know-ph img { display: block; width: 100%; height: 752px; object-fit: cover; object-position: 50% 36%; }
html[data-dir] .know-by { display: block; font-family: var(--sans); font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: 0.015em; color: var(--fg-3); text-transform: none; margin-top: 16px; }
html[data-dir] .know-by::before { content: "— "; }
html[data-dir] .know-pull { grid-area: 3 / 3 / auto / span 9; margin: clamp(56px, 6vw, 92px) 0px 0px; padding: 0px; border: 0px; max-width: none; position: relative; text-align: left; font-family: var(--serif); font-size: clamp(34px, 3.7vw, 50px); line-height: 1.1; letter-spacing: -0.032em; font-style: italic; font-weight: 400; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .know-pull p { margin: 0px; text-indent: -0.46em; }
html[data-dir] .know-pull .know-by { margin-top: 22px; font-size: 13px; text-indent: 0px; }
html[data-dir] .know-q p { margin: 0px; }
html[data-dir] .s-price { text-align: left; padding-block: var(--s7)
  clamp(70px,7.4vw,118px); }
html[data-dir] .price-h { grid-column: 1 / span 5; margin: 0px; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.034em; max-width: none; }
html[data-dir] .price-deck { grid-column: 6 / span 4; margin: 0px 0px clamp(8px, 1vw, 14px); max-width: 30ch; font-size: 15.5px; line-height: 1.56; color: var(--ink-2); }
html[data-dir] .price-head { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: end; }
html[data-dir] .price-head { display: block; text-align: center; max-width: none; margin-inline: auto; }
html[data-dir] .price-h { grid-column: auto; margin: 0px; font-size: clamp(50px, 6.2vw, 90px); line-height: 0.95; letter-spacing: -0.04em; }
html[data-dir] .price-deck { grid-column: auto; margin: var(--s4) auto 0; max-width: 44ch; font-family: var(--serif); font-size: clamp(16.5px, 1.32vw, 19px); line-height: 1.5; letter-spacing: -0.008em; font-weight: 400; color: var(--ink-2); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .offers { position: relative; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); column-gap: clamp(64px, 7vw, 108px); align-items: start; text-align: center; margin: var(--s5) 0 0; border-top: 0px; background: none; padding: 0px; }
html[data-dir] .offer { display: contents; }
html[data-dir] .offer > * { grid-column: 1; }
html[data-dir] .offer--b > * { grid-column: 2; }
html[data-dir] .of-l { grid-row: 1; }
html[data-dir] .of-n { grid-row: 2; }
html[data-dir] .of-b { grid-row: 3; }
html[data-dir] .of-il { grid-row: 4; }
html[data-dir] .of-inc { grid-row: 5; }
html[data-dir] .offer .btn { grid-row: 6; }
html[data-dir] .of-l { display: flex; align-items: flex-end; justify-content: center; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent); line-height: 1.5; min-height: 3em; text-align: center; }
html[data-dir] .of-n { display: block; margin-top: var(--s3); font-family: var(--serif); font-size: clamp(82px, 9.5vw, 136px); line-height: 0.96; letter-spacing: -0.052em; font-weight: 410; color: var(--fg-1); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 410; font-variant-numeric: lining-nums tabular-nums; }
html[data-dir] .of-b { margin: var(--s2) auto 0; max-width: 452px; font-size: 18.5px; line-height: 1.48; color: var(--ink-2); text-wrap: pretty; }
html[data-dir] .of-il { display: block; margin: var(--s6) 0 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); }
html[data-dir] .of-inc { margin: var(--s2) auto 0; padding: 0px; list-style: none; max-width: 322px; text-align: left; }
html[data-dir] .of-inc li { font-size: 17px; line-height: 1.44; color: var(--ink-2); padding: 0px; }
html[data-dir] .of-inc li + li { margin-top: var(--s3); }
html[data-dir] .offer .btn { margin: var(--s5) auto 0; justify-self: center; padding-inline: clamp(30px, 3vw, 44px); width: clamp(280px, 23vw, 330px); justify-content: center; }
html[data-dir] .buy-foot { display: block; text-align: center; margin-top: var(--s6); }
html[data-dir] .buy-foot .micro { margin: 0px auto; max-width: 520px; font-family: var(--serif); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.5; letter-spacing: -0.006em; font-weight: 400; color: var(--ink-2); font-optical-sizing: none; font-variation-settings: "opsz" 18, "wght" 400; }
html[data-dir] .s-cta { padding-block: var(--s8) var(--s8); text-align: center; }
html[data-dir] .kend { display: block; border: 0px; padding: 0px; }
html[data-dir] .kend .signpost { color: var(--fg-3); }
html[data-dir] .kend .h2 { margin: var(--s4) auto 0; font-size: clamp(56px, 6.6vw, 98px); line-height: 1; letter-spacing: -0.042em; max-width: 13ch; }
html[data-dir] .s-foot { padding-block: clamp(74px, 7.6vw, 114px) clamp(62px, 6.4vw, 96px); }
html[data-dir] .foot-g { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 34px clamp(20px, 2.4vw, 40px); align-items: start; }
html[data-dir] .foot-a { grid-column: 1 / span 4; }
html[data-dir] .s-foot .wordmark { font-size: 18px; color: var(--fg-1); }
html[data-dir] .s-foot .pull { margin-top: 12px; font-size: 20px; line-height: 1.3; max-width: 26ch; }
html[data-dir] .foot-b { grid-column: 5 / span 4; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 0px clamp(18px, 2vw, 32px); grid-template-rows: repeat(6, auto); grid-auto-flow: column; }
html[data-dir] .foot-b a { font-family: var(--sans); font-size: 11.5px; line-height: 1.5; color: var(--fg-3); border: 0px; transition: color 0.18s; display: inline-flex; align-items: center; min-height: 44px; width: max-content; }
html[data-dir] .foot-b a:hover { color: var(--fg-1); }
html[data-dir] .foot-c { grid-column: 9 / -1; max-width: 46ch; }
html[data-dir] .s-foot .micro { font-size: 11px; line-height: 1.72; color: var(--fg-3); max-width: 46ch; }
html[data-dir] .s-foot .micro + .micro { margin-top: 14px; }
html[data-dir] .btn { background: var(--rust); color: rgb(252, 250, 244); border: 0px; padding: 16px 26px; font-family: var(--sans); font-size: 13.5px; font-weight: 520; letter-spacing: 0.01em; transition: background 0.18s; }
html[data-dir] .btn:hover { background: rgb(150, 66, 31); }
html[data-dir] .cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 2.2vw, 32px); }
@media (max-width: 1100px){html[data-dir] .night-txt { margin-left: clamp(16px, 2.6vw, 30px); margin-right: 0px; }
html[data-dir] .hero-media { min-height: clamp(420px, 46vw, 560px); }
html[data-dir] { --wide: 100%; --gutter: clamp(32px,5vw,64px); }
html[data-dir] .beat--1 { grid-column: 1 / span 5; }
html[data-dir] .beat--2 { grid-column: 7 / -1; }
html[data-dir] .rep-stage { margin-top: clamp(30px, 3.2vw, 42px); }
html[data-dir] .rep-side { grid-area: 1 / 1 / auto / -1; max-width: 54ch; }
html[data-dir] .cap-3 { max-width: none; font-size: 16px; }
html[data-dir] .st--rep { grid-area: 2 / 1 / auto / -1; margin-top: clamp(22px, 2.4vw, 32px); }
html[data-dir] .st--supp { grid-area: 2 / 1 / auto / span 5; margin-bottom: calc(-1 * var(--supp-drop)); }
html[data-dir] .how-band { margin-top: clamp(48px, 5vw, 72px); }
html[data-dir] .st--supp { grid-area: 1 / 1 / auto / span 4; }
html[data-dir] .add-on { grid-area: 1 / 5 / auto / -1; }
html[data-dir] .how-note { grid-area: 2 / 5 / auto / -1; margin-top: clamp(40px, 4.2vw, 58px); }
html[data-dir] .note-h { font-size: clamp(21px, 2.3vw, 25px); }
html[data-dir] .cap-o { max-width: 31ch; }
html[data-dir] .s-stats .wide { max-width: 100%; }
html[data-dir] .kstat--lead .kstat-n { font-size: clamp(140px, 19vw, 220px); }
html[data-dir] .kstat--lead .kstat-c { width: auto; max-width: 15ch; font-size: clamp(19px, 2.2vw, 24px); }
html[data-dir] .kstat--a .kstat-n { font-size: clamp(56px, 7.4vw, 80px); }
html[data-dir] .kstat--b .kstat-n { font-size: clamp(46px, 6vw, 66px); }
html[data-dir] .kstat--c .kstat-n { font-size: clamp(60px, 8vw, 88px); }
html[data-dir] .know-ph img { height: auto; aspect-ratio: 0.86 / 1; object-position: 50% 30%; }
html[data-dir] .sigmap, html[data-dir] .ksig-rail { max-width: none; }}
@media (max-width: 760px){html[data-dir] { --gutter: 24px; }
html[data-dir] .grid, html[data-dir] .hero-wide, html[data-dir] .s-night-g, html[data-dir] .sig-g, html[data-dir] .khow-head, html[data-dir] .s-know-g, html[data-dir] .price-head, html[data-dir] .offers, html[data-dir] .buy-foot, html[data-dir] .foot-g, html[data-dir] .stage { grid-template-columns: minmax(0px, 1fr); }
html[data-dir] .grid > *, html[data-dir] .hero-wide > *, html[data-dir] .s-night-g > *, html[data-dir] .sig-g > *, html[data-dir] .s-know-g > *, html[data-dir] .price-head > *, html[data-dir] .offers > *, html[data-dir] .buy-foot > *, html[data-dir] .foot-g > *, html[data-dir] .stage > * { grid-area: auto / 1 !important; }
html[data-dir] .hero-txt { padding-block: 8px 34px; }
html[data-dir] .hero-txt .h1 { max-width: none; font-size: clamp(34px, 10vw, 46px); }
html[data-dir] .hero-media { margin: 0 calc(-1 * var(--gutter)); }
html[data-dir] .hero-media .hp-port { min-height: 0px; aspect-ratio: 1.08 / 1; height: auto; }
html[data-dir] .hero-proof { max-width: none; margin-top: 26px; }
html[data-dir] .night-txt { margin-left: 0px; }
html[data-dir] .night-ph { margin: 0 calc(-1 * var(--gutter)) 26px; }
html[data-dir] .night-ph img { height: auto; min-height: 0px; aspect-ratio: 1.02 / 1; }
html[data-dir] .night-txt { padding-bottom: 0px; }
html[data-dir] .night-h, html[data-dir] .night-ask { font-size: clamp(26px, 7.4vw, 34px); }
html[data-dir] .night-q { margin-top: 30px; }
html[data-dir] .night-where { font-size: clamp(20px, 5.6vw, 26px); max-width: none; }
html[data-dir] .night-q { margin-top: 32px; }
html[data-dir] .night-turn { margin-top: 40px; padding-top: 0px; }
html[data-dir] .q-xl { font-size: clamp(27px, 8vw, 36px); }
html[data-dir] .q-m, html[data-dir] .q-mi { font-size: clamp(19px, 5.6vw, 25px); }
html[data-dir] .q-s { line-height: 1.6; }
html[data-dir] .q-s { font-size: 15px; }
html[data-dir] .s-signals { padding-block: 72px 210px; }
html[data-dir] .sig-h { max-width: none; font-size: clamp(32px, 9vw, 44px); }
html[data-dir] .sig-turn { margin-top: 26px; padding-left: 0px; }
html[data-dir] .ksig-rail { margin-top: 40px; padding-left: 22px; }
html[data-dir] .ksig-tab::before { left: -22px; }
html[data-dir] .ksig-panel[data-on] { margin-top: 40px; min-height: 0px; }
html[data-dir] .sg-sym, html[data-dir] .sg-next-b { max-width: none; }
html[data-dir] .sig-art { height: 200px; }
html[data-dir] .khow-head { text-align: center; }
html[data-dir] .s-how .signpost { display: block; }
html[data-dir] .khow-head .h2 { margin-inline: auto; }
html[data-dir] .khow-deck { margin-inline: auto; max-width: 34ch; }
html[data-dir] .stage, html[data-dir] .rep-stage { text-align: left; }
html[data-dir] .stage { display: flex; flex-direction: column; row-gap: 0px; margin-top: 34px; }
html[data-dir] .st { position: static; height: auto; width: auto; }
html[data-dir] .cap-o { position: static; width: auto; max-width: none; margin: 0px; }
html[data-dir] .beat { display: block; }
html[data-dir] .s-how { --stage-gap: 19px; }
html[data-dir] .beat--2 { margin-top: 30px; }
html[data-dir] .s-how .signpost { font-size: 11.5px; letter-spacing: 0.17em; }
html[data-dir] .cap-o { font-size: 15.5px; line-height: 1.45; max-width: none; }
html[data-dir] .cap-o span { margin-bottom: 5px; }
html[data-dir] .cap-o b { font-size: clamp(24px, 6.7vw, 27px); margin-bottom: 12px; }
html[data-dir] .cap-3 b { font-size: clamp(25px, 6.9vw, 28px); }
html[data-dir] .add-h { font-size: clamp(24px, 6.7vw, 27px); }
html[data-dir] .add-b { font-size: 15.5px; }
html[data-dir] .cap-o em { font-size: 17px; margin-bottom: 7px; }
html[data-dir] .st--labs { margin: var(--stage-gap) 0 0; padding: 20px 22px 16px; }
html[data-dir] .st--link { margin: var(--stage-gap) 0 0; }
html[data-dir] br.mb { display: inline; }
html[data-dir] .khow-head .h2 { font-size: clamp(30px, 8.9vw, 38px); max-width: none; line-height: 1.01; letter-spacing: -0.037em; }
html[data-dir] .khow-deck { font-size: 16.5px; max-width: 34ch; margin-top: var(--s4); }
html[data-dir] .rep-stage { display: flex; flex-direction: column; padding-left: 0px; overflow: hidden; margin: 22px calc(-1 * var(--gutter)) 0; }
html[data-dir] .rep-side { display: contents; }
html[data-dir] .cap-3 { order: 1; position: static; width: auto; max-width: none; margin: 0 var(--gutter); }
html[data-dir] .cap-3 b { font-size: clamp(24px, 6.6vw, 29px); }
html[data-dir] .how-link { order: 2; display: inline-flex; align-self: flex-start; margin: 18px var(--gutter) 0; }
html[data-dir] .st--rep { order: 3; width: 168%; margin-top: 20px; }
html[data-dir] .st--supp { order: 4; position: relative; left: auto; bottom: auto; align-self: flex-start; width: 60%; margin: -40px 0 0 var(--gutter); }
html[data-dir] .how-band { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; margin-top: 34px; text-align: center; }
html[data-dir] .add-on { display: contents; }
html[data-dir] .add-on .add-l { order: 1; }
html[data-dir] .st--supp { order: 2; width: 76%; max-width: 296px; margin: var(--s3) auto 0; grid-area: auto; }
html[data-dir] .add-h { order: 3; margin: var(--s4) auto 0; max-width: 19ch; }
html[data-dir] .add-b { order: 4; margin: var(--s4) auto 0; max-width: 46ch; text-align: left; }
html[data-dir] .how-note { order: 5; margin: var(--s6) 0 0; padding-left: 0px; grid-area: auto; max-width: none; }
html[data-dir] .note-h { font-size: 25px; max-width: 19ch; margin: var(--s3) auto 0; }
html[data-dir] .note-b { text-align: left; margin: var(--s4) auto 0; max-width: 46ch; }
html[data-dir] .note-b { font-size: 15.5px; }
html[data-dir] .know-h { font-size: clamp(34px, 9.6vw, 46px); }
html[data-dir] .know-q { max-width: none; margin-top: 30px; font-size: 18px; }
html[data-dir] .know-ph img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 26%; }
html[data-dir] .know-ph { margin: 34px calc(-1 * var(--gutter)) 0; }
html[data-dir] .know-ph img { height: auto; aspect-ratio: 0.86 / 1; }
html[data-dir] .know-pull { max-width: none; margin-top: 44px; font-size: clamp(26px, 7.4vw, 34px); }
html[data-dir] .s-price { padding-block: 72px 76px; }
html[data-dir] .price-h { font-size: clamp(28px, 7.8vw, 36px); }
html[data-dir] .price-deck { margin-top: var(--s4); max-width: 30ch; }
html[data-dir] .price-head { text-align: center; }
html[data-dir] .offers { row-gap: 0px; margin-top: 52px; padding-top: 0px; }
html[data-dir] .offers { display: block; margin-top: var(--s7); padding: 0px; background: none; text-align: center; }
html[data-dir] .offer { display: block; text-align: center; padding: 0px; }
html[data-dir] .offer > * { grid-area: auto; }
html[data-dir] .offer--b { margin-top: 96px; }
html[data-dir] .of-l { min-height: 0px; justify-content: center; }
html[data-dir] .of-n { font-size: clamp(78px, 22vw, 94px); margin-top: var(--s3); }
html[data-dir] .of-b { margin: var(--s4) auto 0; max-width: 29ch; min-height: 0px; text-wrap: balance; }
html[data-dir] .of-il { margin-top: 32px; }
html[data-dir] .of-inc { text-align: left; margin: var(--s3) auto 0; max-width: min(300px, 100%); }
html[data-dir] .of-inc li + li { margin-top: var(--s3); }
html[data-dir] .of-inc li { max-width: none; }
html[data-dir] .offer .btn { margin: var(--s4) auto 0; width: 100%; max-width: 300px; }
html[data-dir] .buy-foot { margin-top: var(--s6); }
html[data-dir] .buy-foot .micro { max-width: 30ch; font-size: 16px; }
html[data-dir] .s-price { padding-block: var(--s7) var(--s7); }
html[data-dir] .s-cta { padding-block: var(--s7) var(--s7); }
html[data-dir] .kend .h2 { max-width: none; font-size: clamp(38px, 10.6vw, 52px); }
html[data-dir] .s-foot .pull { max-width: none; }
html[data-dir] .foot-b { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
html[data-dir] .foot-g { row-gap: 0px; }
html[data-dir] .foot-b { margin-top: 40px; row-gap: 2px; }
html[data-dir] .foot-c { margin-top: 40px; }
html[data-dir] .s-foot { padding-block: 64px 58px; }
html[data-dir] .room { overflow-x: clip; }}
@media (max-width: 760px){html[data-dir] .s-nav .nav-row { flex-wrap: wrap; row-gap: 14px; }
html[data-dir] .s-nav .nav-l { flex: 1 1 100%; flex-wrap: wrap; gap: 18px; }
html[data-dir] .s-nav nav { flex-wrap: wrap; gap: 16px; }}
@media (max-width: 760px){html[data-dir] .hero-txt { order: 1; }
html[data-dir] .hero-media { order: 2; margin-top: 30px; }
html[data-dir] .h1 .accent, html[data-dir] .h2 .accent, html[data-dir] .sig-turn .accent, html[data-dir] .sig-take .accent { white-space: normal; }
html[data-dir] .s-nav { padding-block: 22px 18px; }
html[data-dir] .s-nav .nav-l { gap: 14px; }
html[data-dir] .s-nav nav { gap: 10px 12px; flex-wrap: wrap; }
html[data-dir] .s-nav nav a { font-size: 11.5px; min-height: 44px; }
html[data-dir] .s-nav .wordmark { font-size: 17px; }
html[data-dir] .s-nav .btn-q { font-size: 12.5px; }
html[data-dir] .hero-txt .h1 { font-size: clamp(32px, 9vw, 42px); }
html[data-dir] .know-h { font-size: clamp(32px, 9vw, 42px); }
html[data-dir] .kend .h2 { font-size: clamp(34px, 9.6vw, 46px); }}
@media (prefers-reduced-motion: reduce){html[data-dir] .sig-art img, html[data-dir] .ksig-tab .t-l, html[data-dir] .ksig-tab::before { transition: none; }}
@media (max-width: 1100px){html[data-dir] .sig-obj { min-height: 0px; display: flex; flex-direction: column; }
html[data-dir] .sig-g { display: contents; }
html[data-dir] .sig-say { order: 1; }
html[data-dir] .ksig-rail { order: 2; }
html[data-dir] .sig-art { order: 3; }
html[data-dir] .ksig-panel { order: 4; }
html[data-dir] .sig-take { order: 5; }
html[data-dir] .sig-say { max-width: none; }
html[data-dir] .sig-h { max-width: 14ch; }
html[data-dir] .sig-art { position: relative; left: auto; right: auto; top: auto; height: clamp(200px, 26vw, 300px); margin: clamp(44px,4.6vw,70px) calc(-1 * var(--gutter)) 0; }
html[data-dir] .ksig-rail { position: static; width: auto; margin-top: clamp(34px, 3.6vw, 52px); display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 24px; }
html[data-dir] .ksig-panel[data-on] { position: relative; left: auto; right: auto; top: auto; width: auto; max-width: 560px; transform: none; z-index: 2; margin-top: calc(-1 * clamp(26px, 3vw, 44px)); }
html[data-dir] .sig-take { position: static; left: auto; top: auto; }
html[data-dir] .sig-take { position: static; max-width: none; margin-top: clamp(40px, 4.4vw, 66px); }
html[data-dir] .s-signals { padding-bottom: clamp(64px, 6.8vw, 104px); }
html[data-dir] .how-take { width: auto; max-width: 40ch; padding-left: 0px; }}
@media (max-width: 760px){html[data-dir] .ksig-rail { grid-template-columns: minmax(0px, 1fr); }
html[data-dir] .ksig-panel[data-on] { max-width: none; padding: 22px 24px 24px; }
html[data-dir] .sig-take { max-width: none; font-size: clamp(24px, 6.6vw, 30px); }
html[data-dir] .sig-art { height: 180px; }
html[data-dir] br.db { display: none; }
html[data-dir] .how-take { font-size: clamp(28px, 7.6vw, 34px); max-width: 22ch; margin: var(--s7) auto 0; text-wrap: balance; line-height: 1.08; }
html[data-dir] .s-how { padding-block: var(--s7) var(--s7); }
html[data-dir] .how-take .accent { font-size: 1.09em; text-wrap: balance; }
html[data-dir] .know-pull { font-size: clamp(26px, 7.4vw, 34px); margin-top: 44px; grid-column: 1 / -1 !important; }
html[data-dir] .know-pull p { text-indent: 0px; }
html[data-dir] .know-h { grid-column: 1 / -1 !important; }
html[data-dir] .know-q { max-width: none; grid-column: 1 / -1 !important; }
html[data-dir] .know-ph { margin: 30px calc(-1 * var(--gutter)) 0; grid-column: 1 / -1 !important; }
html[data-dir] .know-ph img { height: auto; aspect-ratio: 0.86 / 1; }
html[data-dir] .price-h, html[data-dir] .price-deck { grid-column: 1 / -1; }
html[data-dir] .price-deck { margin: 16px 0px 0px; max-width: none; }
html[data-dir] .buy-foot .micro, html[data-dir] .buy-foot .micro--fine { grid-column: 1 / -1; max-width: none; }}
@media (max-width: 760px){html[data-dir] .s-stats { padding-block: clamp(54px, 13.5vw, 72px) clamp(60px, 15vw, 78px); }
html[data-dir] .s-stats > .wide { display: block; text-align: center; }
html[data-dir] .st-head { text-align: center; margin-left: 0px; }
html[data-dir] .s-stats .signpost { font-size: 14px; letter-spacing: 0.125em; max-width: none; white-space: normal; }
html[data-dir] .s-stats .h2 { max-width: none; margin: 15px auto 0px; font-size: clamp(30px, 8.6vw, 40px); }
html[data-dir] .kstat--lead { margin: 26px 0px 0px; }
html[data-dir] .kstat--lead .kstat-n { font-size: clamp(126px, 36vw, 160px); }
html[data-dir] .kstat--lead .kstat-c { max-width: 30ch; margin: 16px auto 0px; font-size: 21px; }
html[data-dir] .kstats { display: block; padding-top: 0px; margin: 34px 0px 0px; }
html[data-dir] .kstats .kstat { margin: 10px 0px 0px; width: auto; }
html[data-dir] .kstats .kstat:first-child { margin-top: 0px; }
html[data-dir] .kstats .kstat-n { padding-top: 0px; }
html[data-dir] .kstats .kstat-c { margin: 8px auto 0px; max-width: 31ch; font-size: 14px; }
html[data-dir] .kstats .kstat-s { margin-top: 7px; }
html[data-dir] .kstat--a .kstat-n { font-size: 60px; }
html[data-dir] .kstat--b .kstat-n { font-size: 47px; }
html[data-dir] .kstat--c .kstat-n { font-size: 54px; }
html[data-dir] .kwhy-turn { margin-top: 44px; text-align: center; font-size: clamp(21px, 5.9vw, 27px); }
html[data-dir] .hero-txt > * { grid-column: 1 !important; }
html[data-dir] .hero-txt .signpost { order: 1; display: block; text-align: center; margin-top: 9px; }
html[data-dir] .hero-txt .h1 { order: 2; max-width: none; text-align: center; font-size: clamp(35px, 10vw, 46px); line-height: 1.02; letter-spacing: -0.038em; margin-top: 13px; }
html[data-dir] .hero-txt .h1 .accent { white-space: nowrap; }
html[data-dir] .hero-media { order: 3; position: relative; min-height: 0px; aspect-ratio: 4 / 5; margin: 22px calc(-1 * var(--gutter)) 0; }
html[data-dir] .hero-media .hp-port { aspect-ratio: auto; height: 100%; min-height: 0px; }
html[data-dir] .hero-txt .lede { order: 4; max-width: 336px; margin: 20px auto 0px; text-align: center; font-size: 17px; line-height: 1.56; }
html[data-dir] .hero-proof { order: 5; max-width: 330px; margin: 16px auto 0px; }
html[data-dir] .hero-proof li { font-size: 21px; line-height: 1.3; text-align: center; }
html[data-dir] .hero-proof li + li { margin-top: 9px; }
html[data-dir] .hero-txt .cta-row { order: 6; margin: 34px 0px 36px; justify-content: center; flex-direction: column; gap: 13px; }
html[data-dir] .hero-txt .cta-row .btn { width: 100%; max-width: 300px; display: flex; align-items: center; justify-content: center; margin-inline: auto; }
html[data-dir] .s-nav { padding-block: 10px 4px; }
html[data-dir] .s-hero { padding-top: 0px; }
html[data-dir] .s-nav .nav-row > .btn-q { display: none; }
html[data-dir] .s-nav .nav-row, html[data-dir] .s-nav .nav-l { flex-wrap: wrap; }
html[data-dir] .s-nav .nav-row { gap: 0px; }
html[data-dir] .s-nav .nav-l { min-width: 0px; width: 100%; gap: 0px; }
html[data-dir] .s-nav nav { min-width: 0px; width: 100%; flex-wrap: wrap; gap: 0px 11px; }
html[data-dir] .s-nav nav a { font-size: 12px; }
html[data-dir] .night-txt { text-align: center; margin-left: 0px; margin-right: 0px; }
html[data-dir] .night-ask { margin-top: 0px; }
html[data-dir] .night-q { padding-left: 0px; text-indent: 0px; max-width: 330px; margin: 20px auto 0px; text-align: center; }
html[data-dir] .night-q br { display: none; }
html[data-dir] .q-xl, html[data-dir] .q-m, html[data-dir] .q-mi { display: block; max-width: none; padding-left: 0px; }
html[data-dir] .q-xl { line-height: 1.1; margin-bottom: 1px; }
html[data-dir] .q-m, html[data-dir] .q-mi { line-height: 1.24; margin-top: 16px; margin-bottom: 1px; }
html[data-dir] .q-s { line-height: 1.38; padding-right: 0px; font-size: 17.5px; color: rgb(187, 172, 146); }
html[data-dir] .night-where { max-width: none; margin-top: 34px; }
html[data-dir] .night-turn { max-width: 318px; margin: 15px auto 0px; font-size: clamp(19px, 5.4vw, 23px); }
html[data-dir] .sig-say { text-align: center; }
html[data-dir] .sig-h { max-width: 14ch; margin-inline: auto; }
html[data-dir] .sig-turn { max-width: 326px; margin: 22px auto 0px; padding-left: 0px; text-align: center; }
html[data-dir] .ksig-rail { padding-left: 0px; margin-top: 26px; text-align: center; }
html[data-dir] .ksig-tab { text-align: center; min-height: 44px; padding-block: 0px; display: flex; align-items: center; justify-content: center; }
html[data-dir] .ksig-tab + .ksig-tab { margin-top: -4px; }
html[data-dir] .ksig-tab .t-l { display: inline; font-size: 18px; }
html[data-dir] .ksig-tab::before { display: none; }
html[data-dir] .ksig-tab .t-l::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: 0.2em; opacity: 0; transform: scale(0.4); transition: opacity 0.24s, transform 0.24s; }
html[data-dir] .ksig-tab[aria-selected="true"] .t-l::before { opacity: 1; transform: scale(1); }
html[data-dir] .ksig-tab[aria-selected="true"]::before { transform: scale(1); }
html[data-dir] .sig-art { height: clamp(190px, 50vw, 230px); margin: 14px calc(-1 * var(--gutter)) 0; }
html[data-dir] .ksig-panel[data-on] { max-width: 330px; margin: calc(-1 * clamp(30px, 8vw, 40px)) auto 0px; padding: 24px 26px 26px; }
html[data-dir] .sig-take { max-width: 330px; margin: 30px auto 0px; text-align: center; font-size: clamp(24px, 6.8vw, 30px); line-height: 1.16; }
html[data-dir] .s-signals { padding-bottom: clamp(54px, 12vw, 72px); }}

/* ══════════════════════════════════════════════════════════════════════════
   ONE FIX ON TOP OF THE PORT · the statistics pair at tablet portrait
   ──────────────────────────────────────────────────────────────────────────
   Carried over from the lab, where it is also present: between 761px and
   about 839px the homepage SCROLLS SIDEWAYS. 768 is iPad portrait.

   The cause is not the grid, it is the floors. `.kstats` is a two-column row
   whose children never shrink past width:clamp(196px,17.4vw,250px) and
   clamp(200px,17.7vw,254px) with a clamp(20px,2.9vw,42px) gutter between
   them, so the pair is 418px wide no matter how narrow the window gets. It
   sits in columns 7-12 and is pulled further right by a negative left margin,
   and below roughly 840 that puts the "70%" past the trim. Measured, with
   the scrollbar included: 762 overflows by 38px, 800 by 19px, 840 by 0 but
   flush against the edge with no gutter left, 880 with 19px of gutter back.

   The design already answers this: at <=760 `.kstats` becomes display:block
   and the three stack. The breakpoint was simply set lower than this one
   module can survive. So the stack starts at 880 instead, and 761-880 gets
   the composition the page already uses below it rather than a new one.
   Everything else on the page keeps its own 760 breakpoint.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:880px){
  html[data-dir] .kstats{grid-template-columns:auto;
    row-gap:clamp(30px,4vw,46px);margin-left:0}
  html[data-dir] .kstat--a,
  html[data-dir] .kstat--c,
  html[data-dir] .kstat--b{grid-column:1;width:auto;max-width:34ch;
    margin-left:0}
  html[data-dir] .kstat--a{grid-row:1}
  html[data-dir] .kstat--c{grid-row:2}
  html[data-dir] .kstat--b{grid-row:3;margin-top:0}
  html[data-dir] .kstat--c .kstat-n{padding-top:0}
  /* "The reality of PCOS/PMOS care" is nowrap and needs 302px; .st-head is
     six columns minus a left shift, which is 284px at 762 and 298px at 800,
     so the label was cut off between 761 and about 830. Below 760 the design
     already lets this signpost wrap; it simply stopped one breakpoint too
     early. (Present in the lab too, so it shipped clipped.) */
  html[data-dir] .s-stats .signpost{ white-space:normal }
}


/* ══════════════════════════════════════════════════════════════════════════
   TWO TYPE SIZES RAISED TO THE 12px FLOOR · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   qa-responsive-check holds a house rule: no reading text below 12px. Two
   values on this page sat under it, and both are edited in place above rather
   than overridden down here, so there is one declaration per thing.

   .s-nav nav a   11px -> 12px. Navigation she has to read and tap on a
                  phone. NOTE WHICH DECLARATION MOVED. There are THREE rules
                  for this selector: 13px at desktop, 11.5px in the first
                  <=760 block, and 11px in a SECOND <=760 block about eighty
                  lines later, which is the one that actually rendered. Editing
                  the first changed nothing and the computed size stayed 11px.
                  The desktop 13px and the 11.5px are untouched; the live
                  declaration is the one at the bottom.

   .raw td:last-child  10px -> 12px. The unit column of the lab panel. The
                  column was already 54px wide and "µIU/mL", the longest unit
                  on the panel, measures exactly 54px at 12px, so NOTHING
                  MOVED: table width, row heights and the panel box are
                  identical before and after at 1440, 768 and 390. The column
                  width is therefore load-bearing now and is not a round
                  number by accident.

   THE HIERARCHY IS PRESERVED BY WEIGHT AND COLOUR, NOT BY SIZE. The three
   columns were 12.5 / 13 / 10px; they are now 12.5 / 13 / 12. The unit stays
   the quietest thing in the row because it is weight 400 against the value's
   500 and rgb(143,134,114) against the value's rgb(46,39,25) — a far bigger
   separation than 3px of size was doing. Do not re-open the gap by shrinking
   it again; raise the contrast instead if it ever reads too loud.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   WORKFLOW · OPTICAL BALANCE AND THE REPORT AS AN OBJECT · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   MEASURED FIRST, on the deployed page at 1440 (content frame 93 -> 1333):

     hero photo   R 1432   viewport edge  (-7)
     night photo  L   -7   viewport edge
     know photo   R 1432   viewport edge  (-7)
     offers       L   93   R 1333         inside the frame
     rep-stage    L   93   R 1481         55px PAST the viewport, clipped

   So the page's bleed convention is: a bled object lands ON the viewport
   edge. The report stage was the one object that broke it, and the reason is
   a real bug rather than a judgement: its bleed is

       margin-right: calc(-1 * (max(0px,(100vw - var(--wide)) / 2) + gutter))

   which resolves against --wide (1320px) while the section's own frame is
   --frame (1416px). It over-bleeds by half the difference, so the report ran
   off the page and was cut. An object that is cut at the right edge reads as
   a composition sitting too far LEFT, because the mass that should answer the
   left is missing.

   Two changes, and no arbitrary padding:

   1. The stage no longer bleeds at all. It ends on the frame line, so the
      section occupies 93 -> 1333 against a 1425 viewport: 93 left, 92 right.
      Optically centred, with the internal asymmetry (step 01 narrow at the
      left, step 02 wide, the report offset into columns 4-12) untouched.
      This is also what makes the hairline below possible: you cannot put an
      edge on an object that runs off the screen.

   2. The report gets the hairline the lab panel and the pattern plate already
      carry, rgba(22,17,10,.06) — the same warm 6% espresso, not a grey UI
      border. It is the page's existing value, not a new one.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1101px){
  html[data-dir] .rep-stage{ margin-right:0 }
}

/* the report is a printed object on the page, edged like the other two plates */
html[data-dir] .st--rep img,
html[data-dir] .st--supp img{ border:1px solid rgba(22,17,10,.06) }

/* Two columns that stopped short of the frame once the stage was contained.
   beat--2 (step 02 and the pattern plate) ended at 1226 against a 1333 frame
   line, leaving a 107px strip of nothing between it and the edge that the
   report below it now reaches. And the step 03 column, squeezed to 280px by
   the report starting at column 4, was breaking its heading over three ragged
   lines. Both are placement, not padding. */
@media (min-width:1101px){
  html[data-dir] .beat--2{ grid-area:1 / 6 / auto / -1 }
  html[data-dir] .st--rep{ grid-area:1 / 5 / auto / -1 }
  /* .rep-side is the thing that actually holds the step 03 column, and it was
     pinned to three columns. Four gives the heading a measure it can set on
     two lines instead of three ragged ones. */
  html[data-dir] .rep-side{ grid-area:1 / 1 / auto / span 4 }
  html[data-dir] .st--supp{ grid-column:1 / span 4 }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CLOSING BAND · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   The audit copy belongs to the audit plate, so it sits under it. The trap
   that creates, and the version before this one fell straight into it, is
   that the note on the right then becomes a PEER COLUMN with a 490px void
   where its picture should be. It did not read as whitespace; it read as a
   column whose image failed to load.

   So the band is one row of two objects and one row of one. The plate takes
   the left five columns and the note sits beside it in the right five,
   centred on the picture, with a hairline across its top: that rule is what
   makes it an aside rather than text floating in a field, and it is the same
   thin tonal line the lab panel and the report plate already use. The audit
   copy then runs underneath across seven columns, wider than the plate,
   which is what closes the band instead of leaving a second hole.

   Also caught here: the plate was set to `1 / span 4` by the workflow pass
   while .add-on starts at column 4, so the two overlapped by 67px at 1440;
   and the <=1100 layer gave the plate a negative bottom margin of
   --supp-drop (100-140px) to tuck text beside it, which with the copy now
   underneath pulled that copy 60px INTO the photograph.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:761px){
  html[data-dir] .st--supp{ grid-area:1 / 1 / span 1 / span 5;
    margin-top:0; margin-bottom:0 }
  html[data-dir] .how-note{ grid-area:1 / 8 / span 1 / -1; align-self:center;
    margin:0; border-top:1px solid rgba(22,17,10,.13);
    padding-top:var(--s4) }
  html[data-dir] .add-on{ grid-area:2 / 1 / span 1 / span 7;
    margin-top:var(--s5) }
  html[data-dir] .how-band{ align-items:start }
}

/* On a phone the same rule applies: the plate comes first and its label,
   heading and body follow it, so the picture is never orphaned above a
   label that belongs to it. Only the order changes; the flex column and the
   centred measures are the approved mobile composition. */
@media (max-width:760px){
  html[data-dir] .st--supp{ order:1; margin-top:0 }
  html[data-dir] .add-on .add-l{ order:2; margin-top:var(--s4) }
  html[data-dir] .add-h{ order:3 }
  html[data-dir] .add-b{ order:4 }
  html[data-dir] .how-note{ order:5 }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HERO · THE PHOTOGRAPH SITS UNDER THE HEADLINE · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   The orders were already written for this: signpost 1, headline 2, media 3,
   lede 4, proof 5, cta 6. They never took effect because .hero-txt is a
   block, so the five text children only ordered themselves INSIDE it and the
   photograph could only order against .hero-txt as a whole. It therefore fell
   to the bottom of the hero, below the buttons.

   display:contents dissolves the .hero-txt box so its children become grid
   items of .hero-wide alongside the photograph, and the orders that were
   always there finally resolve. Its own padding and margin move onto the
   children that needed them, since a contents box paints nothing.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  html[data-dir] .s-hero .hero-txt{ display:contents }
  html[data-dir] .s-hero .signpost{ margin-top:26px }
  html[data-dir] .s-hero .hero-media{ margin-top:var(--s5) }
  html[data-dir] .s-hero .lede{ margin-top:var(--s4) }
  html[data-dir] .s-hero .cta-row{ margin-bottom:34px }
  /* As children of .hero-txt these were width:100% of a block and then capped;
     as grid items they size to content instead, so the proof line came out
     312px where it measured 330 before. Pinned to the widths the live page
     already had, so nothing but the ORDER changes. */
  html[data-dir] .s-hero .lede{ width:100%; max-width:336px; margin-inline:auto }
  html[data-dir] .s-hero .hero-proof{ width:100%; max-width:330px;
    margin-inline:auto }
}

/* ══ MOBILE HEADER · CENTRED AS ONE UNIT · 2026-09-22 ══════════════════════
   The wordmark sat hard left while the links ran left under it and stopped
   84px short of the right edge, so the header read as left-packed with a gap
   rather than as a composed block. Centring only the links was worse: it left
   the wordmark hanging on its own. All three parts centre together. ──────── */
@media (max-width:760px){
  html[data-dir] .s-nav .nav-row{ align-items:center }
  html[data-dir] .s-nav .nav-l{ width:100%; align-items:center;
    flex-direction:column }
  html[data-dir] .s-nav nav{ width:100%; justify-content:center }
  html[data-dir] .s-nav .btn-q{ align-self:center }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE · THE SPACING PASS · 2026-09-22
   ──────────────────────────────────────────────────────────────────────────
   Every section below was spending a desktop step (--s7, 104px) on a 390px
   screen, where 104px is a quarter of the viewport. The steps come down one
   or two notches on the phone ONLY; the desktop rhythm is untouched. Measured
   gaps before, in page pixels:

     nav -> eyebrow            44      section rule -> HOW KASCADE WORKS  104
     photograph -> lede        40      note -> "You already have..."      104
     "You already have" -> end 104     section -> "This is what it feels"  96
     second quote -> end        90     ONE PANEL section pad          104/104
     -> "Choose your report"   104     deck -> the prices                104
     last button -> end        104

   Nothing is stacked: the smallest gap any of these becomes is 40px, and the
   headline-to-deck relationships are left alone. This is the canvas coming
   in, not the rhythm changing.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── the workflow opens closer to the rule above it ── */
  html[data-dir] .s-how{ padding-block:var(--s6) var(--s6) }

  /* ── 01 / Your labs read as one line, the way a numbered step should, and
        the block centres with the section heading and deck above it. Left
        alignment here was the only left-aligned thing in a centred column. ── */
  html[data-dir] .cap-o{ text-align:center }
  html[data-dir] .cap-o span{ display:inline }
  html[data-dir] .cap-o em{ display:inline; margin-bottom:0 }
  html[data-dir] .cap-o span::after{ content:"\00a0\00a0"; }
  html[data-dir] .cap-o b{ margin-top:10px; margin-inline:auto }

  /* ── the two closing headings get the full measure, so three cramped
        lines become two ── */
  html[data-dir] .add-h,
  html[data-dir] .note-h{ max-width:none }
  /* and their paragraphs balance instead of dribbling out on a short last
     line, which is what made them read as leaning left under a centred
     heading even though their margins were already equal */
  /* AND THE BLOCK ITSELF IS CENTRED, not just balanced. Balancing alone
     evened the line endings at about x=305 while the block still began at 24,
     so the ink sat 24 left / 85 right under a centred heading: equal margins
     on the BOX, visibly unequal on the TEXT. A measure just wider than the
     balanced line, centred, puts the two margins actually equal. */
  html[data-dir] .add-b,
  html[data-dir] .note-b{ max-width:300px; margin-inline:auto;
    text-wrap:balance }

  /* ── the closing statement, and the end of the section ── */
  html[data-dir] .how-note{ margin-top:var(--s6) }
  html[data-dir] .how-take{ margin-top:var(--s6) }

  /* ── the testimonial room ── */
  html[data-dir] .s-know{ padding-block:var(--s6) var(--s6) }
  html[data-dir] .know-pull{ margin-top:var(--s6) }

  /* ── ONE PANEL, READ PROPERLY ── */
  html[data-dir] .s-cta{ padding-block:var(--s6) var(--s6) }

  /* ── the checkout ── */
  html[data-dir] .s-price{ padding-block:var(--s6) var(--s6) }
  html[data-dir] .offers{ margin-top:var(--s6) }
  html[data-dir] .buy-foot{ margin-top:var(--s6) }

  /* THE PRICE SITS OPTICALLY CENTRED, NOT GEOMETRICALLY.
     Measured from the rendered pixels: the eyebrow's ink centre is 195.3 on a
     390 screen and the price's is 188.5, because the dollar sign is a light
     narrow glyph carrying the left end of a very heavy numeral. Geometric
     centring is what put it 7px left. 13px of left padding on a centred box
     moves the glyphs 6.5px right and the two ink centres agree. */
  /* OPTICALLY CENTRED ON THE VISIBLE BLOCK, NOT THE INK CENTROID. Corrected
     2026-09-23. The first pass measured the centre of mass and added
     padding-left:13px to balance it, which is the right method for a word and
     the wrong one for a price. "$147" is a tall thin $ against three heavy
     digits: the mass sits left of the glyphs' visible extent, so centring the
     mass pushed the block 10px RIGHT of the label above it, which is exactly
     what reads as crooked at 86px. Measured on the rendered page at 390: the
     glyph span ran 120..288 (centre 204) under a label centred on 194.
     Aligning the SPAN instead puts both cards within 0.2px of their label. */
  html[data-dir] .of-n{ padding-right:7px }
}