/* Featherglass site: shared styles for every page.
   One look by design: black, white and one deep red. Inter Tight stands in for Helvetica Now Display,
   DM Mono for PP Supply Mono. Page-specific scenes (the homepage hero, problem and solution) live in each page. */
:root {
  --hud-top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 1.6vw, 22px) + 66px);
  color-scheme: dark;
  --ink: #080808;          /* Ben's ink */
  --white: #FFFFFF;
  --red: #A6121D;          /* deep red: buttons, fills */
  --signal: #D21F2C;       /* the same red, lit: lines and light on black */
  --graphite: #8B8B8E;     /* secondary text on black and white */
  --rule-dark: rgba(255,255,255,.14);
  --rule-light: #E4E4E4;
  --text-2: #3C3C3E;
  --text-3: #6A6A6D;
  --soft: #ACACAF;         /* body text on black */
  --card: rgba(244,244,245,.72);

  --display: "Inter Tight", "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --ui: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  --track: -0.028em;       /* headline tracking, tuned per face */

  --edge: clamp(18px, 2.3vw, 44px);
}
* { box-sizing: border-box; }
html, body { background: var(--ink); color: var(--white); }
body { margin: 0; font-family: var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 30; background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 8px; font: 500 14px/1 var(--ui); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- header, brand and menu ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + var(--edge)) var(--edge) 0; }
.brand { display: inline-flex; align-items: center; gap: 10.7px; color: var(--white); text-decoration: none; }
.brand .fg { height: 40px; width: auto; display: block; }
.fg-type { display: block; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.015em; color: var(--white); white-space: nowrap; }
.brand .fg-type { height: auto; }
:root.logo-type .fg-mark, :root:not(.logo-type) .fg-type { display: none !important; }
.nav-r { display: flex; align-items: center; gap: 20px; }
.cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--red); color: var(--white); text-decoration: none; font: 500 14px/1 var(--ui); letter-spacing: -0.005em; transition: background-color .2s ease; }
.cta:hover { background: #8D0F18; }
.menu { appearance: none; border: 0; background: none; color: var(--white); display: inline-flex; align-items: center; gap: 14px; cursor: pointer; padding: 0; font: 500 14px/1 var(--ui); }
.menu .ring { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); display: grid; place-content: center; gap: 5px; transition: background-color .25s ease; }
.menu .ring i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s ease; }
.menu:hover .ring { background: rgba(255,255,255,.08); }

/* menu overlay */
.sheet { position: fixed; inset: 0; z-index: 10; background: var(--ink); color: var(--white); display: flex; flex-direction: column; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + var(--edge)) var(--edge) var(--edge); }
.sheet[hidden] { display: none; }
.sheet .nav { position: static; padding: 0; }
.sheet .ring i:first-child { transform: translateY(3.25px) rotate(45deg); }
.sheet .ring i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.sheet ol { list-style: none; margin: auto 0 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--edge); }
.sheet li { border-top: 1px solid var(--rule-dark); }
.sheet li a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0 16px; text-decoration: none; font: 700 clamp(1.6rem, 3vw, 2.8rem)/1.1 var(--display); letter-spacing: var(--track); }
.sheet li a small { font: 300 12px/1 var(--mono); letter-spacing: .06em; color: var(--graphite); min-width: 2.2em; }
.sheet li a:hover, .sheet li a[aria-current="page"] { color: var(--signal); }

/* fixed header: FG, the red pill and Menu stay with the reader, and take the colour of the section beneath */
.fixhead { position: fixed; top: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(14px, 1.6vw, 22px)) var(--edge) 0; color: var(--white); pointer-events: none;
  opacity: 0; transform: translateY(-14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.1,1), color .35s ease; }
.fixhead.show { opacity: 1; transform: none; }
.fixhead.show > * { pointer-events: auto; }
.fixhead .brand { color: inherit; }
.fixhead .brand .fg { height: 30px; }
.fixhead .fg-type { font-size: 30px; color: inherit; }
.fixhead .menu { color: inherit; }
.fixhead .menu .ring { width: 42px; height: 42px; border-color: currentColor; }
.fixhead .cta { height: 36px; padding: 0 16px; font-size: 13.5px; }
.fixhead.on-light { color: var(--ink); }
.fixhead.on-light .menu:hover .ring { background: rgba(8,8,8,.06); }

/* ---------- section scaffolding ---------- */
.light { background: var(--white); color: var(--ink); padding-inline: var(--edge); }
.dark { background: var(--ink); color: var(--white); }
.sec { position: relative; isolation: isolate; padding: var(--hud-top) var(--edge) clamp(96px, 11vw, 168px); }
.sec-in { max-width: 1500px; display: flex; flex-direction: column; gap: clamp(36px, 4.4vw, 64px); }
.dark-grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain, none); background-size: 220px 220px; opacity: .05; mix-blend-mode: screen; }

/* the mono label row that opens a section: dot, index, name; optional note on the right; a hairline beneath */
.kicker { margin: 0 0 -24px; display: flex; align-items: center; gap: 10px; font: 300 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px rgba(210,31,44,.8); }
.kicker .ix { color: #E4E4E6; margin-right: .35em; }
[data-theme="light"] .kicker .ix, .hg-light .kicker .ix { color: var(--ink); }
.ct-hud, .hud { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: .5px solid rgba(255,255,255,.18); }
.ct-hud .kicker, .hud .kicker { margin: 0; }
.ct-hud span, .hud > span { font: 300 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
[data-theme="light"] .hud { border-bottom-color: rgba(8,8,8,.14); }
@media (max-width: 640px) { .hud > span { display: none; } }

.h1 { margin: 0; font: 700 clamp(2.6rem, 6vw, 7rem)/1 var(--display); letter-spacing: -0.035em; max-width: 14em; text-wrap: balance; }
.h2 { margin: 0; font: 700 clamp(2.2rem, 4vw, 4.6rem)/1.05 var(--display); letter-spacing: var(--track); max-width: 22em; text-wrap: balance; }
.h2 .dim, .h1 .dim { color: var(--graphite); }
.h3 { margin: 0; font: 700 clamp(1.3rem, 1.7vw, 1.75rem)/1.12 var(--display); letter-spacing: -0.018em; text-wrap: balance; }
.lede { margin: 0; font: 500 clamp(1.15rem, 1.6vw, 1.5rem)/1.4 var(--display); letter-spacing: -0.012em; color: var(--text-2); max-width: 32em; text-wrap: pretty; }
.dark .lede, [data-theme="dark"] .lede { color: #CFCFD2; }
.body { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--text-2); max-width: 36em; }
.dark .body, [data-theme="dark"] .body { color: var(--soft); }
.mono { font: 300 12px/1.45 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.note { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 500 clamp(1.1rem, 1.5vw, 1.4rem)/1.38 var(--display); letter-spacing: -0.012em; max-width: 34em; }
.note i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px rgba(210,31,44,.55); transform: translateY(-.1em); }

/* links and buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; font: 500 15px/1 var(--ui); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: #8D0F18; }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.dark .btn-line:hover, [data-theme="dark"] .btn-line:hover { background: rgba(255,255,255,.08); }
.light .btn-line:hover, [data-theme="light"] .btn-line:hover { background: rgba(8,8,8,.05); }
.arrow { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--ui); text-decoration: none; color: inherit; }
.arrow::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width .3s ease; }
.arrow:hover::after { width: 34px; }
.arrow.red { color: var(--red); }
.dark .arrow.red { color: #F0444F; }

/* ---------- cards: Cominvi-style, icon top left, title at the foot; the card under the pointer fills deep red ---------- */
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.pf-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-item { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.2vw, 34px); min-height: clamp(360px, 31vw, 460px); cursor: default; outline-offset: 4px;
  background: var(--card); border: 1px solid rgba(8,8,8,.08); border-radius: 8px; color: var(--ink);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  transition: background-color .45s ease, border-color .45s ease; }
.pf-item .ic { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; }
.pf-item .txt { display: flex; flex-direction: column; }
.pf-item h3 { margin: 0; font: 700 clamp(1.4rem, 2vw, 2.1rem)/1.08 var(--display); letter-spacing: var(--track); color: var(--ink); text-wrap: balance; transition: color .45s ease; }
.pf-item .body { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1), opacity .35s ease, margin-top .55s cubic-bezier(.2,.7,.2,1); }
.pf-item .body > p { min-height: 0; overflow: hidden; margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 500; color: rgba(255,255,255,.94); transition: color .45s ease; }
.pf-item.on { background: var(--red); border-color: var(--red); }
.pf-item.on .ic { stroke: var(--white); }
.pf-item.on h3 { color: var(--white); }
.pf-item.on .body { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.pf-item .tagline { font: 300 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); transition: color .45s ease; }
.pf-item.on .tagline { color: rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) { .pf-item, .pf-item .body { transition: none; } }
@media (max-width: 1150px) { .pf-grid, .pf-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-item { min-height: 320px; } }
@media (max-width: 640px) {
  .pf-grid, .pf-grid.three, .pf-grid.two { grid-template-columns: minmax(0, 1fr); }
  .pf-item { min-height: 0; gap: 40px; }
  .pf-item .body { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
  .pf-item:not(.on) .body > p { color: var(--text-2); font-weight: 400; }
}

/* ruled columns: a hairline that draws in, a mono tag, a title, a paragraph */
.cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px clamp(20px, 2.4vw, 40px); }
.col { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 22px; }
.col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-light); }
.dark .col::before, [data-theme="dark"] .col::before { background: var(--rule-dark); }
.col .tag { margin: 0; display: flex; align-items: center; gap: 8px; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.col .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.col h3 { margin: 4px 0 0; font: 700 clamp(1.2rem, 1.45vw, 1.45rem)/1.18 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.col p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text-2); max-width: 34em; }
.dark .col p, [data-theme="dark"] .col p { color: var(--soft); }
.col p b { font-weight: 600; color: inherit; }
.col .more { margin-top: auto; padding-top: 6px; }
.col .st { align-self: flex-start; font: 300 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; border: 1px solid currentColor; color: var(--text-3); }
.col .st.dev { color: var(--red); }
.dark .col .st.dev { color: #F0444F; }
@media (max-width: 1100px) { .cols { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 700px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* the reveal used across pages: rule draws, then the content rises */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .col::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.6,0,.2,1); }
  .js-reveal .col > * { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.1,1); }
  .js-reveal .col > :nth-child(2) { transition-delay: .08s; } .js-reveal .col > :nth-child(3) { transition-delay: .16s; } .js-reveal .col > :nth-child(4) { transition-delay: .24s; }
  .js-reveal .col.in::before { transform: none; }
  .js-reveal .col.in > * { opacity: 1; transform: none; }
  .js-reveal .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.1,1); }
  .js-reveal .rv.in { opacity: 1; transform: none; }
}

/* words that light up as they are read */
.ink .w { transition: color .35s linear; }
.dark .ink .w, [data-theme="dark"] .ink .w { color: #313134; }
.light .ink .w, [data-theme="light"] .ink .w { color: #DADADC; }
.ink .w.on { color: inherit !important; }

/* ---------- sheet transitions ---------- */
.cover-dim { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; }
.cover { --R: 28px; position: relative; z-index: 2; margin-top: calc(-1 * var(--R)); border-radius: var(--cr, var(--R)) var(--cr, var(--R)) 0 0; overflow: hidden; }
.light.cover, [data-theme="light"].cover { box-shadow: 0 -1px 0 rgba(255,255,255,.06); }
.dark.cover, [data-theme="dark"].cover { box-shadow: 0 -24px 60px rgba(0,0,0,.18); }
[data-recede] { transform-origin: 50% 0; will-change: transform; }
[data-exit] { will-change: transform, opacity; }
@media (max-width: 640px) { .cover { --R: 18px; } }

/* ---------- inner page hero: black, a few hairlines meeting one point, the red thread carried on ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; min-height: min(86svh, 860px); display: flex; flex-direction: column; padding: var(--hud-top) var(--edge) clamp(48px, 6vw, 88px); background: var(--ink); color: var(--white); }
.phero .lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.phero .lines path { fill: none; stroke-linecap: round; }
.phero .lines .f { stroke: #FFFFFF; }
.phero .lines .t { stroke: var(--signal); filter: drop-shadow(0 0 6px rgba(210,31,44,.8)); }
.phero .lines .n { fill: #FFFFFF; }
.phero-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 2.4vw, 32px); max-width: 1500px; padding-top: clamp(64px, 10vh, 120px); }
.phero .lede { max-width: 30em; }
.phero .btns { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .phero .h1, .phero .lede, .phero .btns { animation: rise-in 1.1s cubic-bezier(.2,.75,.1,1) both; }
  .phero .lede { animation-delay: .12s; } .phero .btns { animation-delay: .22s; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- a list of rows: label, statement, measure ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 15rem); gap: 8px clamp(18px, 2.4vw, 36px); align-items: baseline; padding: 26px 0; border-top: 1px solid var(--rule-light); }
.row > * { min-width: 0; margin: 0; }
.rows .row:first-of-type { border-top-color: var(--ink); }
.dark .row { border-top-color: var(--rule-dark); }
.dark .rows .row:first-of-type { border-top-color: rgba(255,255,255,.6); }
.row-h { padding: 0 0 12px; border-top: 0; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.row-h + .row { border-top-color: var(--ink); }
.row .k { font: 700 16px/1.3 var(--display); letter-spacing: -0.01em; }
.row .v { font: 500 clamp(1.1rem, 1.45vw, 1.3rem)/1.38 var(--display); letter-spacing: -0.012em; text-wrap: pretty; }
.row .m { font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.dark .row .m { color: var(--graphite); }
@media (max-width: 760px) {
  .row-h { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
  .row .m::before { content: attr(data-l) " "; color: var(--text-2); }
}

/* ---------- numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); counter-reset: s; }
.steps li { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2vw, 30px); border-radius: 8px; border: 1px solid rgba(8,8,8,.1); background: var(--card); color: var(--ink); counter-increment: s; }
.dark .steps li { border-color: var(--rule-dark); background: rgba(255,255,255,.03); color: var(--white); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 300 12px/1 var(--mono); letter-spacing: .08em; color: var(--red); }
.dark .steps li::before { color: #F0444F; }
.steps h3 { margin: 18px 0 0; font: 700 clamp(1.15rem, 1.4vw, 1.4rem)/1.15 var(--display); letter-spacing: -0.015em; }
.steps p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--text-2); }
.dark .steps p { color: var(--soft); }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- two-column split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 96px); align-items: start; }
.split > * { min-width: 0; }
.split .stick { position: sticky; top: calc(var(--hud-top) + 8px); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split .stick { position: static; } }

/* ---------- questions ---------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.dark .faq { border-top-color: rgba(255,255,255,.6); }
.faq details { border-bottom: 1px solid var(--rule-light); }
.dark .faq details { border-bottom-color: var(--rule-dark); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; font: 700 clamp(1.1rem, 1.4vw, 1.35rem)/1.25 var(--display); letter-spacing: -0.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; max-width: 46em; font-size: 16px; line-height: 1.62; color: var(--text-2); }
.dark .faq details p { color: var(--soft); }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); }
.person { min-width: 0; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 6px; filter: grayscale(1) contrast(1.05); background: #1A1A1B; }
.person div { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.person b { font: 700 1.3rem/1.15 var(--display); letter-spacing: -0.015em; }
.person i { font: 300 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: #F0444F; }
.light .person i, [data-theme="light"] .person i { color: var(--red); }
.person p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--soft); }
.light .person p { color: var(--text-2); }
@media (max-width: 900px) { .people { grid-template-columns: minmax(0, 1fr); } }

/* ---------- resource cards ---------- */
.res { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.res a, .res > div { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 32px); min-height: 260px; border-radius: 8px; text-decoration: none; background: var(--card); border: 1px solid rgba(8,8,8,.08); color: var(--ink); transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.res .mono { color: var(--text-3); }
.res h3 { margin: auto 0 0; font: 700 clamp(1.3rem, 1.8vw, 1.8rem)/1.1 var(--display); letter-spacing: var(--track); text-wrap: balance; }
.res p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.res a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.res a:hover .mono, .res a:hover p { color: rgba(255,255,255,.86); }
@media (max-width: 1000px) { .res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .res { grid-template-columns: minmax(0, 1fr); } }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label, .field legend { font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); padding: 0; }
.field input, .field textarea, .field select { width: 100%; font: 400 16px/1.4 var(--ui); color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 0 12px; }
.dark .field input, .dark .field textarea { border-bottom-color: rgba(255,255,255,.35); }
.light .field input, .light .field textarea { border-bottom-color: rgba(8,8,8,.3); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--signal); }
.field textarea { min-height: 120px; resize: vertical; }
.choice { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.choice legend { width: 100%; }
.choice legend { margin-bottom: 10px; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid currentColor; font: 500 14px/1 var(--ui); text-transform: none; letter-spacing: -0.005em; color: var(--text-2); border-color: rgba(8,8,8,.3); opacity: 1; transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.choice input:checked + span { opacity: 1; background: var(--red); border-color: var(--red); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
.form-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--graphite); }
.form .sent { display: none; }
.form.done > :not(.sent) { display: none; }
.form.done .sent { display: flex; grid-column: 1 / -1; flex-direction: column; gap: 10px; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- invitation: closes every page, the red thread drawn across ---------- */
.invite { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); padding: var(--hud-top) var(--edge) clamp(170px, 17vw, 250px); }
.invite .thread { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(150px, 15vw, 220px); z-index: -1; pointer-events: none; overflow: visible; }
.invite .thread path { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(210,31,44,.85)); }
.invite .thread .tick { stroke: rgba(255,255,255,.55); stroke-width: 1; filter: none; }
.invite-in { max-width: 1500px; display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }
.invite h2 { margin: clamp(48px, 9vh, 120px) 0 0; font: 700 clamp(2.6rem, 6.4vw, 7.4rem)/.98 var(--display); letter-spacing: -0.04em; max-width: 12em; text-wrap: balance; }
.invite .lede { color: #CFCFD2; max-width: 30em; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); max-width: 980px; }
.path { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 30px); border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,10,11,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; transition: background-color .4s ease, border-color .4s ease; }
.path .mono { color: var(--graphite); transition: color .4s ease; }
.path b { font: 700 clamp(1.3rem, 1.8vw, 1.7rem)/1.1 var(--display); letter-spacing: var(--track); }
.path span { font-size: 15px; line-height: 1.5; color: var(--soft); transition: color .4s ease; }
.path .arrow { margin-top: 8px; }
.path:hover { background: var(--red); border-color: var(--red); }
.path:hover .mono, .path:hover span { color: rgba(255,255,255,.88); }
@media (max-width: 700px) { .paths { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--ink); color: var(--white); padding: clamp(56px, 6vw, 88px) var(--edge) calc(env(safe-area-inset-bottom, 0px) + 32px); border-top: 1px solid var(--rule-dark); }
.foot-in { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); }
.foot-in > * { min-width: 0; }
.foot .brand .fg { height: 34px; }
.foot .fg-type { font-size: 34px; }
.foot .tag { margin: 18px 0 0; font: 500 1.05rem/1.4 var(--display); letter-spacing: -0.01em; color: #CFCFD2; max-width: 20em; }
.foot h2 { margin: 0 0 16px; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot ul a { text-decoration: none; font-size: 15px; color: #E4E4E6; }
.foot ul a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--signal); }
.legal-row { max-width: 1500px; margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font: 300 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.legal-row a { text-decoration: none; }
.legal-row a:hover { color: var(--white); }
.legal-row nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 900px) { .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-in > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* prose for legal and long text */
.prose { max-width: 46em; display: flex; flex-direction: column; gap: 16px; }
.prose h2 { margin: 28px 0 0; font: 700 clamp(1.5rem, 2.2vw, 2.1rem)/1.12 var(--display); letter-spacing: var(--track); }
.prose p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.prose .placeholder { padding: 18px 20px; border-left: 2px solid var(--red); background: #F6F6F7; font-size: 15px; }

/* smooth scrolling (Lenis), when it loads */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 700px) {
  .nav .cta, .nav .menu > span:first-child { display: none; }
  .sheet ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .fixhead .cta { display: none; } .fixhead .menu > span:first-child { display: none; } }
/* phones: the header's red pill is hidden, so the open menu carries it at its foot */
.sheet-cta { display: none; }
@media (max-width: 700px) { .sheet .sheet-cta { display: flex; flex: none; justify-content: center; height: 48px; margin-top: 24px; font-size: 15px; } }
@media (max-width: 700px) and (max-height: 700px) { .sheet ol { padding-top: 12px; } .sheet li a { padding: 9px 0 10px; } }

/* links inside cards */
.pf-item .arrow { margin-top: 20px; align-self: flex-start; color: var(--ink); transition: color .45s ease; }
.pf-item.on .arrow { color: var(--white); }
.pf-item .tagline + h3 { margin-top: 10px; }

/* two-column rows: label and statement */
.rows.two .row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
@media (max-width: 760px) { .rows.two .row { grid-template-columns: minmax(0, 1fr); } }
.rows .row a, .faq a, .lede a, .body a, .prose a { color: inherit; text-decoration-color: var(--signal); text-underline-offset: 3px; }

/* shorter page heroes (contact, legal) */
.phero-short { min-height: min(64svh, 640px); }

/* the campaign landing page: brand and one button, nothing else */
.lp-head { opacity: 1; transform: none; }
.lp-head > * { pointer-events: auto; }
.lp-foot { padding-top: 24px; }
.lp-foot .legal-row { margin-top: 0; border-top: 0; padding-top: 0; }
@media (max-width: 640px) { .lp-head .cta { display: inline-flex; } }

/* ---------- phones ----------
   The fixed header steps out of the way while reading down and returns on the first scroll up, over a soft scrim
   in the colour of the section beneath. Touch targets are at least 44px; small mono labels no smaller than 11px. */
@media (max-width: 700px) {
  .fixhead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 26px); z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(8,8,8,.92) 0%, rgba(8,8,8,.78) 55%, rgba(8,8,8,0) 100%); transition: background .35s ease; }
  .fixhead.on-light::before { background: linear-gradient(rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,0) 100%); }
  .fixhead { padding-bottom: 6px; }
  .fixhead.show.tuck { opacity: 0; transform: translateY(-100%); pointer-events: none; }
  .fixhead.show.tuck > * { pointer-events: none; }

  .arrow { min-height: 44px; }
  .foot ul { gap: 2px; }
  .foot ul a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }
  .legal-row nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .faq summary { padding: 20px 0; }

  /* founders: a small portrait beside the name, the bio full width beneath */
  .person { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; }
  .person img { grid-column: 1; grid-row: 1 / span 2; }
  .person div { display: contents; }
  .person b { grid-column: 2; align-self: end; }
  .person i { grid-column: 2; align-self: start; }
  .person p { grid-column: 1 / -1; margin-top: 14px; }

  .res a, .res > div { min-height: 0; gap: 12px; }
  .res h3 { margin-top: 22px; }

  .invite { padding-bottom: 116px; }
  .invite .thread { height: 96px; }

  .dark .row .m::before { color: #CFCFD2; }
  .phero { min-height: min(78svh, 720px); }
}
@media (max-width: 480px) { .person { grid-template-columns: 84px minmax(0, 1fr); } }

/* ---------- booking page: Dr. Israel's calendar, embedded on Featherglass's own site ----------
   Intro and calendar side by side; on phones the calendar follows the intro, and the agenda and host come after it. */
.phero-book { min-height: min(58svh, 580px); }
.bk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro cal" "about cal"; grid-template-rows: auto 1fr;
  gap: 36px clamp(32px, 5vw, 96px); align-items: start; }
.bk-intro { grid-area: intro; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bk-about { grid-area: about; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.bk-cal { grid-area: cal; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bk-intro .h2 { font-size: clamp(2rem, 3.3vw, 3.5rem); }
.bk-label { margin: 0 0 12px; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.bk-agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: a; }
.bk-agenda li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 12px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-light); counter-increment: a; }
.bk-agenda li::before { content: counter(a, decimal-leading-zero); grid-row: 1 / span 2; font: 300 12px/1.7 var(--mono); letter-spacing: .08em; color: var(--red); }
.bk-agenda b { font: 700 1.12rem/1.25 var(--display); letter-spacing: -0.012em; }
.bk-agenda span { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.bk-host { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.bk-host img { grid-row: 1 / span 3; width: 76px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 6px; filter: grayscale(1) contrast(1.05); background: #E9E9EA; }
.bk-host b { font: 700 1.15rem/1.2 var(--display); letter-spacing: -0.012em; }
.bk-host i { font: 300 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--red); }
.bk-host p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.bk-small { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.bk-small a { color: inherit; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.bk-small a:hover { color: var(--ink); }

/* the calendar itself: HighLevel's booking widget, sized by its own script */
.bk-frame { position: relative; min-width: 0; }
.bk-frame iframe { display: block; width: 100%; min-height: 760px; border: 0; background: transparent; }

/* in a preview frame, where outside calendars can't be embedded: the same calendar, one tap away */
.bk-out { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: clamp(460px, 42vw, 620px); padding: clamp(24px, 3vw, 44px); border-radius: 8px; background: var(--ink); color: var(--white); }
.bk-out .bk-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: .5px solid rgba(255,255,255,.18); }
.bk-out .bk-top .kicker { margin: 0; }
.bk-out .bk-top > span { font: 300 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
.bk-out { padding-bottom: clamp(84px, 9vw, 128px); }
.bk-out h3 { margin: 0; font: 700 clamp(1.9rem, 3.2vw, 3.2rem)/1.04 var(--display); letter-spacing: var(--track); max-width: 12em; text-wrap: balance; }
.bk-out .bk-msg p { margin: 16px 0 0; max-width: 30em; font: 500 clamp(1.02rem, 1.3vw, 1.2rem)/1.45 var(--display); letter-spacing: -0.01em; color: #CFCFD2; }
.bk-out .bk-foot { display: flex; flex-direction: column; gap: 14px; }
.bk-out .form-note { color: var(--graphite); }
.bk-out .thread { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(76px, 8vw, 116px); z-index: -1; pointer-events: none; }
.bk-out .thread path { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(210,31,44,.85)); }
.bk-out .thread .f { stroke: #FFFFFF; stroke-opacity: .09; stroke-width: .8; filter: none; }

.lp-book { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 900px) {
  .bk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "cal" "about"; grid-template-rows: auto; }
  .bk-frame iframe { min-height: 900px; }
}
@media (max-width: 640px) { .bk-out .bk-top > span { display: none; } }

/* the Myth series: title as the link, a line beneath */
.myths .v a { text-decoration: none; font-weight: 600; }
.myths .v a:hover { color: var(--red); }
.myths .v a::after { content: " \2197"; font-weight: 400; color: var(--red); }
.myth-d { display: block; margin-top: 6px; font: 400 15px/1.55 var(--ui); letter-spacing: 0; color: var(--text-2); }

/* ---------- contrast and comfort ----------
   Small grey labels on white step up to a darker grey so they read at AA; red links on black use the lit red;
   the fixed header keeps a soft scrim at every width so text never runs under it; reduced motion keeps it still. */
.light .kicker, [data-theme="light"] .kicker, .light .hud > span, [data-theme="light"] .hud > span,
.light .col .tag, [data-theme="light"] .col .tag, .light .field label, .light .field legend, .light .form-note,
.light .row-h, [data-theme="light"] .row-h, .light .mono, [data-theme="light"] .mono, .light .bk-label { color: var(--text-3); }
.dark .choice span, [data-theme="dark"] .choice span { color: #CFCFD2; border-color: rgba(255,255,255,.35); }
.invite .arrow.red, .dark .path .arrow.red { color: #F0444F; }
.dark .col .st, [data-theme="dark"] .col .st { color: #A3A3A6; }
.dark .col .st.dev, [data-theme="dark"] .col .st.dev { color: #F0444F; }
@media (min-width: 701px) {
  .fixhead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 30px); z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(8,8,8,.85) 0%, rgba(8,8,8,.6) 50%, rgba(8,8,8,0) 100%); transition: background .35s ease; }
  .fixhead.on-light::before { background: linear-gradient(rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%); }
  .fixhead { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fixhead, .fixhead::before { transition: none; } }


/* ---------- v29 (revision brief, 17 Oct 2026) ---------- */
[hidden] { display: none !important; }

/* the Featherglass name beside the FG mark, set off by a fine rule */
.brand .wm { position: relative; display: block; padding-left: 12px; font: 600 19px/1 var(--display); letter-spacing: -0.015em; white-space: nowrap; color: inherit; }
.brand .wm::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: currentColor; opacity: .4; }
.fixhead .brand .wm { font-size: 16px; padding-left: 10px; }
.foot .brand .wm { font-size: 18px; }
.hero .brand .wm { transition: opacity .9s ease .35s; }
.hero.hold-brand .brand .wm { opacity: 0; transition: none; }
:root:not(.js-reveal) .hero.hold-brand .brand .wm { opacity: 1; }

/* desktop header: the principal routes beside the red pill */
.nls { display: flex; align-items: center; gap: 2px; margin-right: 4px; }
.nl { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 999px; font: 500 14px/1 var(--ui); letter-spacing: -0.005em; color: inherit;
  text-decoration: none; white-space: nowrap; opacity: .86; transition: opacity .2s ease, background-color .2s ease; }
.nl:hover { opacity: 1; background: rgba(255,255,255,.08); }
.fixhead.on-light .nl:hover { background: rgba(8,8,8,.06); }
.nl[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.fixhead .nl { height: 36px; font-size: 13.5px; padding: 0 11px; }
@media (max-width: 1139px) { .nls { display: none; } }

/* highlighted cards: a white card, a firmer edge, a red rule drawn across the top and a red icon, instead of a full red fill */
.pf-item::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: 8px 8px 0 0; background: var(--red);
  transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.pf-item .body > p { color: var(--text-2); font-weight: 400; }
.pf-item.on { background: var(--white); border-color: rgba(8,8,8,.2); box-shadow: 0 24px 50px -30px rgba(8,8,8,.38); }
.pf-item.on::before { transform: scaleX(1); }
.pf-item.on .ic { stroke: var(--red); }
.pf-item.on h3 { color: var(--ink); }
.pf-item.on .tagline, .pf-item.on .arrow { color: var(--red); }
.res a { position: relative; }
.res a::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: 8px 8px 0 0; background: var(--red);
  transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.res a:hover, .res a:focus-visible { background: var(--white); border-color: rgba(8,8,8,.2); color: var(--ink); box-shadow: 0 24px 50px -30px rgba(8,8,8,.38); }
.res a:hover::before, .res a:focus-visible::before { transform: scaleX(1); }
.res a:hover .mono, .res a:focus-visible .mono { color: var(--red); }
.res a:hover p, .res a:focus-visible p { color: var(--text-2); }
.path { position: relative; }
.path::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: 8px 8px 0 0; background: var(--signal);
  transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.path:hover, .path:focus-visible { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.42); }
.path:hover::before, .path:focus-visible::before { transform: scaleX(1); }
.path:hover .mono, .path:focus-visible .mono { color: #F0444F; }
.path:hover span, .path:focus-visible span { color: var(--soft); }
.path .arrow.red, .path:hover .arrow.red, .path:focus-visible .arrow.red { color: #F0444F; }

/* the organizational value rows */
.rows.val .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.rows.val .row .k { font: 600 clamp(1.05rem, 1.35vw, 1.22rem)/1.32 var(--display); letter-spacing: -0.012em; }
.rows.val.three .row { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 1.2fr); }
.rows.val.three .row .k { font: 700 15px/1.3 var(--display); }
.rows.val.three .row .v { font: 600 16px/1.35 var(--display); letter-spacing: -0.01em; }
.rows.val.three .row .m { font: 500 clamp(1.05rem, 1.35vw, 1.22rem)/1.4 var(--display); letter-spacing: -0.012em; color: inherit; }
.dark .rows.val.three .row .m { color: var(--white); }
.rows.val .pf-more { margin-top: 24px; }
.rows.val .form-note a { color: inherit; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.dark .rows.val .form-note { color: var(--soft); }
@media (max-width: 760px) { .rows.val .row, .rows.val.three .row { grid-template-columns: minmax(0, 1fr); } }

/* customer evidence, ready for approved material (hidden until then) */
.evidence { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; }
.ev-quote { margin: 0; }
.ev-quote blockquote { margin: 0; font: 500 clamp(1.3rem, 2vw, 1.9rem)/1.3 var(--display); letter-spacing: -0.015em; }
.ev-quote figcaption { margin-top: 14px; font: 300 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.ev-stat { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ev-stat b { font: 700 clamp(2.4rem, 4vw, 3.6rem)/1 var(--display); letter-spacing: var(--track); }
.ev-stat span { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ev-logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
@media (max-width: 760px) { .evidence { grid-template-columns: minmax(0, 1fr); } }

/* desktop header over light sections: a slightly firmer scrim now that the header carries links */
@media (min-width: 701px) { .fixhead.on-light::before { background: linear-gradient(rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 55%, rgba(255,255,255,0) 100%); } }

/* calls to action set beside a link */
.trust-act { margin-top: 8px; gap: 12px 28px; }
.light .btn-line, [data-theme="light"] .btn-line { color: var(--ink); }

/* forms: optional marks, helper lines, checkboxes */
.choice label { position: relative; }
.choice input { left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
.field .opt { text-transform: none; letter-spacing: 0; font: 400 12px/1 var(--ui); color: var(--text-3); }
.field > .form-note { font-size: 13px; }
.choice .hint { width: 100%; margin-top: 4px; }
.choice input[type="checkbox"] + span { padding: 0 16px 0 14px; gap: 8px; }
.choice input[type="checkbox"] + span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1px solid currentColor; flex: none; }
.choice input[type="checkbox"]:checked + span::before { background: var(--white); border-color: var(--white); box-shadow: inset 0 0 0 2px var(--red); }
.myths .v a::after { content: none; }
.myths .v a[target="_blank"]::after { content: " \2197"; font-weight: 400; color: var(--red); }

/* ---------- Myth series articles ---------- */
.art-hero { min-height: min(68svh, 680px); }
.art-k { margin: 0; font: 300 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #F0444F; }
.art-h1 { font-size: clamp(2.2rem, 4.8vw, 5rem); max-width: 17em; text-wrap: balance; }
.art-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 300 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.art-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--signal); margin-right: 18px; vertical-align: middle; transform: translateY(-1px); }
.art { background: var(--white); color: var(--ink); }
.art-grid { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 18rem); justify-content: space-between; gap: 56px clamp(40px, 6vw, 120px); align-items: start; }
.art-body { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.art-body > p { margin: 0; font: 400 clamp(17px, 1.25vw, 19px)/1.68 var(--ui); color: #1E1E20; text-wrap: pretty; }
.art-body > p a, .art-refs a { color: inherit; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.art-body > h2 { margin: 26px 0 0; font: 700 clamp(1.35rem, 1.9vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.art-body > blockquote { margin: 10px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--red); }
.art-body > blockquote p { margin: 0; font: 500 clamp(1.2rem, 1.6vw, 1.45rem)/1.45 var(--display); letter-spacing: -0.012em; color: var(--ink); }
.art-fig { margin: 18px 0 12px; max-width: 640px; }
.art-fig.tall { max-width: 440px; }
.art-zoom { appearance: none; display: block; width: 100%; padding: 0; border: 1px solid var(--rule-light); border-radius: 4px; background: #FFF; cursor: zoom-in; overflow: hidden; }
.art-zoom img { display: block; width: 100%; height: auto; }
.art-zoom:disabled { cursor: default; }
.art-fig figcaption { margin-top: 10px; font: 300 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.art-refs { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule-light); }
.art-refs h2 { margin: 0 0 12px; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.art-refs ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.art-side { position: sticky; top: calc(var(--hud-top) + 8px); display: flex; flex-direction: column; gap: 14px; }
.art-side-k { margin: 0; font: 300 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.art-side ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.art-side li { border-bottom: 1px solid var(--rule-light); }
.art-side li a { display: block; padding: 14px 0; text-decoration: none; font: 600 15px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.art-side li a small { display: block; margin-bottom: 6px; font: 300 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.art-side li a:hover { color: var(--red); }
.art-side li a[aria-current="page"] { color: var(--red); }
.art-side li a[aria-current="page"] small { color: var(--red); }
.art-side li a[target="_blank"]::after { content: " \2197"; font-weight: 400; color: var(--red); }
.art-lb { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94svh; overflow: visible; }
.art-lb::backdrop { background: rgba(8,8,8,.88); }
.art-lb img { display: block; max-width: min(96vw, 1400px); max-height: 88svh; width: auto; height: auto; border-radius: 4px; background: #FFF; }
.art-lb-x { position: absolute; right: 0; top: -44px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #FFF; font: 500 14px/1 var(--ui); cursor: pointer; }
@media (max-width: 1000px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); }
  .art-side { position: static; }
}
@media (max-width: 640px) {
  .art-hero { min-height: min(60svh, 560px); }
  .art-fig, .art-fig.tall { max-width: none; margin: 10px 0 6px; }
  .art-body { gap: 18px; }
}

/* ---------- product views: rebuilt from Featherglass's product studies (synthetic patient) ---------- */
.pv { margin: 0; min-width: 0; width: 100%; max-width: 600px; justify-self: end; border-radius: 12px; overflow: hidden; background: #FFFFFF; color: #16161A;
  font-family: var(--ui); border: 1px solid rgba(8,8,8,.1); box-shadow: 0 30px 80px -24px rgba(0,0,0,.6); text-align: left; }
.light .pv, [data-theme="light"] .pv { box-shadow: 0 30px 70px -36px rgba(8,8,8,.38); }
.pv svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pv p, .pv h4, .pv h5 { margin: 0; }
.pv-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E7E7EA; }
.pv-bar b { font: 600 15px/1 var(--display); letter-spacing: -0.015em; color: #080808; }
.pv-bar small { font: 400 12px/1.2 var(--ui); color: #6A6A6D; text-align: right; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; }
.pv-head h4 { display: flex; align-items: center; gap: 8px; font: 700 19px/1.15 var(--display); letter-spacing: -0.02em; color: #080808; }
.pv-head h4 svg { width: 17px; height: 17px; color: #3C3C40; }
.pv-head p { margin-top: 3px; font: 400 13px/1.3 var(--ui); color: #6A6A6D; }
.pv-share { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid #D9D9DC; border-radius: 6px; font: 500 13px/1 var(--ui); color: #080808; white-space: nowrap; }
.pv-share svg { color: var(--red); width: 16px; height: 16px; }
.pv-tabs, .pv-sub { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid #E7E7EA; font: 500 13px/1 var(--ui); color: #5C5C60; overflow: hidden; }
.pv-tabs span, .pv-sub span { padding: 10px 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pv-tabs .on, .pv-sub .on { color: #080808; border-bottom-color: var(--red); }
.pv-sub { font-weight: 400; font-size: 12.5px; gap: 18px; }
.pv h5 { font: 700 14px/1.3 var(--display); letter-spacing: -0.01em; color: #080808; }
.pv-sum { padding: 4px 18px 8px; }
.pv-sec { padding: 11px 0; border-bottom: 1px solid #ECECEE; }
.pv-sec:last-child { border-bottom: 0; }
.pv-sec h5 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pv-sec h5 svg { width: 15px; height: 15px; color: #6A6A6D; }
.pv-sec p { margin-top: 5px; font: 400 13px/1.5 var(--ui); color: #3C3C40; }
.pv-ask { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.pv-q { align-self: flex-end; max-width: 90%; padding: 9px 13px; border-radius: 10px; background: #F1F1F3; font: 500 13.5px/1.35 var(--ui); color: #16161A; }
.pv-ans { display: flex; flex-direction: column; gap: 3px; }
.pv-ans p { font: 400 13px/1.5 var(--ui); color: #3C3C40; }
.pv-ans p + h5 { margin-top: 7px; }
.pv-ans sup { font: 500 9.5px/1 var(--ui); color: var(--red); margin-left: 1px; }
.pv-srcs { padding-top: 10px; border-top: 1px solid #ECECEE; }
.pv-lbl { font: 400 12px/1.2 var(--ui); color: #6A6A6D; margin-bottom: 6px !important; }
.pv-src { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0 6px 10px; border-left: 2px solid transparent; }
.pv-src.on { border-left-color: var(--red); }
.pv-src .n { flex: none; width: 20px; height: 20px; border: 1px solid #BDBDC2; border-radius: 4px; display: grid; place-content: center; font: 500 11px/1 var(--ui); color: #16161A; }
.pv-src b, .pv-doc b { display: block; font: 600 13px/1.3 var(--ui); color: #080808; }
.pv-src i, .pv-doc i { display: block; font: 400 12px/1.35 var(--ui); font-style: normal; color: #6A6A6D; }
.pv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.pv-tile { border: 1px solid #E4E4E7; border-radius: 8px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pv-tile p { font: 400 12.5px/1.45 var(--ui); color: #3C3C40; }
.pv-input { display: flex; align-items: center; gap: 10px; margin: 12px 18px 4px; padding: 9px 12px; border: 1px solid #DCDCE0; border-radius: 8px; font: 400 13px/1 var(--ui); color: #6A6A6D; }
.pv-input svg { width: 15px; height: 15px; color: #16161A; }
.pv-docs { list-style: none; margin: 0; padding: 4px 18px 8px; }
.pv-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid #ECECEE; }
.pv-doc:last-child { border-bottom: 0; }
.pv-doc > svg { margin-top: 1px; color: #3C3C40; }
.pv-doc span { display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--ui); color: #3C3C40; }
.pv-doc time { font: 400 12px/1.3 var(--ui); color: #3C3C40; white-space: nowrap; }
.pv-doc.new b::after { content: "New"; margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(166,18,29,.1); color: var(--red); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.pv-meds { padding: 8px 18px 4px; }
.pv-med { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 4px 18px; padding: 13px 0; border-bottom: 1px solid #ECECEE; }
.pv-med:last-child { border-bottom: 0; }
.pv-med b { display: block; font: 700 16px/1.25 var(--display); letter-spacing: -0.01em; color: #080808; }
.pv-med i { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--ui); font-style: normal; color: #6A6A6D; }
.pv-med p { font: 400 13.5px/1.55 var(--ui); color: #3C3C40; padding-left: 16px; border-left: 1px solid #E0E0E3; }
.pv-foot { padding: 12px 18px 16px; border-top: 1px solid #ECECEE; background: #FAFAFA; }
.pv-foot p { margin-top: 3px; font: 400 13.5px/1.45 var(--ui); color: #3C3C40; }
.pv-wide { max-width: 760px; justify-self: start; }
@media (max-width: 900px) { .pv { justify-self: start; max-width: 560px; } }
@media (max-width: 700px) {
  .pv-bar small { display: none; }
  .pv-head { padding: 12px 14px 8px; }
  .pv-head h4 { font-size: 17px; }
  .pv-tabs, .pv-sub { padding: 0 14px; gap: 16px; }
  .pv-sum, .pv-docs { padding-left: 14px; padding-right: 14px; }
  .pv-ask { padding: 12px 14px 14px; gap: 10px; }
  .pv-tiles { padding: 12px 14px 14px; gap: 8px; }
  .pv-tile { padding: 9px 10px; }
  .pv-tile p { font-size: 12px; }
  .pv-input { margin: 10px 14px 2px; }
  .pv-med { grid-template-columns: minmax(0, 1fr); }
  .pv-med p { padding-left: 0; border-left: 0; }
  .pv-sub span:nth-child(n+3) { display: none; }
  .pv-sec.m-closed p { display: none; }
  .pv-sec.m-closed h5 svg { transform: rotate(-90deg); }
}