/* Newsreader is pinned to weight 400 with its optical-size axis kept, so headings sharpen as they grow.
   Geist and Geist Mono are variable (100–900); the UI uses 400 and 500 only. */
@font-face{font-family:Newsreader;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;src:url(fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* The interface speaks Fernbloom's UI language (prototype A, Sierra Agent
   Studio grammar): flat white cards on hairlines, 8px action rectangles with
   one filled primary per view, 6px status badges, pale icon tiles, 44px
   fields with a focus halo, Geist for every working word and Geist Mono for
   figures. Septima sits in the brand slot the way a coach's colour does on
   Fernbloom's client surfaces: Aubergine fills the primary, inks links and
   draws the focus ring. Newsreader stays for what speaks rather than works:
   page and section headlines, the Seven Cs, the questions and the quotes.
   The diagnostic speaks in strings: each dimension is a wave, blue when flat
   (slack), red when sharp (tense), with a green tick when in tune. Rays appear
   only as the mark and the Seven Cs glyphs. The homepage opens and closes on
   purple fields with wave-shaped edges; strings and faint wave lines are the
   only ornament on them. */
:root{
  /* neutrals: warm-grey inks, a warm paper grey, hairlines */
  --text-default:#222222;--text-secondary:#625e5b;--text-muted:#716f6c;
  --surface-page:#ffffff;--surface-card:#ffffff;--surface-subtle:#f6f5f3;--surface-nav-active:#f3f3f7;
  --border-card:#eeeeee;--border-control:#d7dce4;--border-hover:#c1bcb7;--tick:#898683;
  /* the brand slot: Aubergine, with its derived tint, wash and edge */
  --accent-fill:#392d5b;--accent-hover:#2b2146;--accent-on:#ffffff;--accent-ink:#392d5b;
  --accent-tint:#ece8f4;--accent-wash:#f7f5fb;--accent-edge:#ddd7ea;
  --focus-ring:#392d5b;--focus-halo:rgba(57,45,91,.2);
  --lavender:#7a6ca8;
  /* status tones: bg and ink pairs, each 4.5:1 or better; info is the accent */
  --tone-success-bg:#e4eee6;--tone-success-ink:#006838;
  --tone-pending-bg:#fdebe6;--tone-pending-ink:#b2381f;
  /* the tuning states: flat is slack and cool, sharp is tense and warm */
  --tone-flat-bg:#e6eef8;--tone-flat-ink:#2a5e9c;
  --tone-sharp-bg:var(--tone-pending-bg);--tone-sharp-ink:var(--tone-pending-ink);
  --tone-danger-bg:#fdeae5;--tone-danger-ink:#c72d06;--tone-danger-edge:#f1b8a9;
  --tone-neutral-bg:#f6f5f3;--tone-neutral-ink:#625e5b;
  --tone-info-bg:var(--accent-tint);--tone-info-ink:var(--accent-ink);
  /* depth: none at rest; the primary's lift, floating layers, the readout on its band */
  --shadow-primary:0 2px 6px rgba(57,45,91,.24);
  --shadow-popover:0 8px 24px rgba(31,22,56,.1),0 2px 6px rgba(31,22,56,.06);

  --shadow-halo:0 0 0 3px var(--focus-halo);
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;
  --serif:Newsreader,Georgia,'Times New Roman',serif;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(0,0,.2,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-scan:cubic-bezier(.6,0,.3,1);--fast:120ms;
  /* type scale: the UI steps are named for their role, the larger serif steps by size.
     caption 12 badges, key and footer labels; meta 13 secondary labels and captions;
     ui 14 controls, rows and notes; body-sm 15 secondary text; body 16; body-lg 17 reading
     prose; lead 18 leads and small headings; xl 20 to 5xl 30 serif lines, quotes, names and
     the statement. Display, title, h2 and lede are set per breakpoint below. */
  --text-caption:12px;--text-meta:13px;--text-ui:14px;--text-body-sm:15px;--text-body:16px;--text-body-lg:17px;--text-lead:18px;--text-xl:20px;--text-2xl:22px;--text-3xl:24px;--text-4xl:28px;--text-5xl:30px;
  --max:1112px;--gutter:24px;--section:128px;--header:72px;
  --display:64px;--display-lh:1.0938;--title:52px;--title-lh:1.1154;--h2:44px;--h2-lh:1.1364;--lede:20px;--lede-lh:1.5;
  --alert-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E")
}

/* Base */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-default);font-family:var(--sans);font-size:var(--text-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,blockquote{margin:0}
h1,h2,h3,h4{font-weight:400;color:var(--text-default);text-wrap:balance}
ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
input,textarea{caret-color:var(--accent-ink)}
strong{font-weight:500;color:var(--text-default)}
/* no italic face is loaded, so titles stay upright rather than slanting synthetically */
cite{font-style:normal}
::selection{background:var(--accent-tint);color:var(--text-default)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:is(.band,.hero-head,.closing) :focus-visible{outline-color:#fff}
.wrap{width:min(calc(100% - var(--gutter) * 2),var(--max));margin-inline:auto}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:60;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-md);background:var(--accent-fill);color:var(--accent-on);font-size:var(--text-ui);font-weight:500;box-shadow:var(--shadow-primary)}
.skip:focus{top:16px}
.nowrap{white-space:nowrap}
/* Newsreader kerns "f?" apart; drop kerning on that one word */
.unkerned{font-kerning:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* A fact still to be supplied: a dashed to-do mark in the warm rule. Remove the class once the real copy is in. */
.ph{padding:.05em .35em;border:1px dashed var(--border-hover);border-radius:var(--r-xs);background:var(--surface-card);color:var(--text-secondary);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Type: Newsreader speaks, Geist works */
.display{font-family:var(--serif);font-size:var(--display);line-height:var(--display-lh);letter-spacing:-.02em}
.title{font-family:var(--serif);font-size:var(--title);line-height:var(--title-lh);letter-spacing:-.02em}
.h2{font-family:var(--serif);font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-.015em}
.h3{font-family:var(--sans);font-size:var(--text-lead);line-height:1.4445;font-weight:500}
.lede{font-size:var(--lede);line-height:var(--lede-lh);color:var(--text-secondary);text-wrap:pretty;max-width:32em}
.sub{font-size:var(--text-lead);line-height:1.5;color:var(--text-secondary);max-width:38rem;text-wrap:pretty}
.body-l{font-size:var(--text-lead);line-height:1.5556;color:var(--text-default);max-width:34em;text-wrap:pretty}
.prose{display:grid;gap:16px}
.prose p{font-size:var(--text-body-lg);line-height:1.5883;color:var(--text-default);max-width:34em;text-wrap:pretty}

/* Buttons: 8px rectangles for actions. One filled primary per view, lifted by a soft shadow in its own hue. */
.btn{--btn-h:40px;--btn-px:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:0 var(--btn-px);border:1px solid transparent;border-radius:var(--r-md);font-size:var(--text-body);line-height:1.5;font-weight:500;max-width:100%;text-align:center;text-wrap:balance;cursor:pointer;transition:background-color var(--fast) var(--ease-out),border-color var(--fast) var(--ease-out),color var(--fast) var(--ease-out),box-shadow var(--fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn-sm{--btn-h:32px;--btn-px:14px;font-size:var(--text-ui);line-height:1.4286}
.btn-lg{--btn-h:48px;--btn-px:24px}
.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-on);box-shadow:var(--shadow-primary)}
.btn-secondary{background:var(--surface-card);border-color:var(--accent-edge);color:var(--accent-ink)}
.btn-tertiary{--btn-px:12px;background:transparent;color:var(--text-secondary)}
/* on the aubergine band: white, the band's ink, no lift */
.btn-on-band{background:#fff;border-color:#fff;color:var(--accent-ink)}
.btn-on-band-quiet{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
@media (hover:hover){
  .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .btn-secondary:is([href],button):hover{background:var(--accent-wash)}
  .btn-tertiary:hover{background:var(--surface-subtle);color:var(--text-default)}
  .btn-on-band:hover{background:var(--accent-tint);border-color:var(--accent-tint)}
  .btn-on-band-quiet:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
}
.btn:active{filter:brightness(.96)}
/* the current page: a secondary that has stopped acting */
a.btn:not([href]){cursor:default;filter:none}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--text-body-sm);font-weight:500;color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border-radius:var(--r-xs)}
.text-link:hover{text-decoration-thickness:2px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border-card);border-radius:var(--r-md);background:var(--surface-card);color:var(--text-default);cursor:pointer;transition:background-color var(--fast) var(--ease-out),border-color var(--fast) var(--ease-out)}
@media (hover:hover){.icon-btn:hover{background:var(--surface-subtle);border-color:var(--border-control)}}

/* Badges report state: 6px rectangles, never pills */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px;border-radius:var(--r-sm);background:var(--tone-bg,var(--tone-neutral-bg));color:var(--tone-ink,var(--tone-neutral-ink));font-size:var(--text-caption);line-height:1.3334;font-weight:500;white-space:nowrap}
.tone-success{--tone-bg:var(--tone-success-bg);--tone-ink:var(--tone-success-ink)}
.tone-pending{--tone-bg:var(--tone-pending-bg);--tone-ink:var(--tone-pending-ink)}
.tone-danger{--tone-bg:var(--tone-danger-bg);--tone-ink:var(--tone-danger-ink)}
.tone-neutral{--tone-bg:var(--tone-neutral-bg);--tone-ink:var(--tone-neutral-ink)}
.tone-info{--tone-bg:var(--tone-info-bg);--tone-ink:var(--tone-info-ink)}
.tone-flat{--tone-bg:var(--tone-flat-bg);--tone-ink:var(--tone-flat-ink)}
.tone-sharp{--tone-bg:var(--tone-sharp-bg);--tone-ink:var(--tone-sharp-ink)}
/* Icon tiles: a pale tone with the tone's ink as a stroke glyph, never a solid fill with a white glyph */
.tile{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-md);background:var(--tone-bg,var(--tone-info-bg));color:var(--tone-ink,var(--tone-info-ink))}
.tile-lg{width:40px;height:40px}
.tile-lg .icon{width:20px;height:20px}

/* Cards: white, a 1px hairline, 12px corners, no shadow. Flush cards hold rows. */
.card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--r-lg);padding:24px}
.card-flush{padding:0;overflow:hidden}
.flush-row{display:flex;align-items:flex-start;gap:16px;min-height:56px;padding:16px 20px;border-top:1px solid var(--border-card)}
.flush-row:first-child{border-top:0}
.row-text{display:grid;gap:2px;min-width:0}
.row-title{font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--text-default)}
.row-sub{font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary);text-wrap:pretty;max-width:34em}
.flush-row .tile{margin-top:-4px}
/* an open list: the same rows on hairlines, without the card around them */
.rows{border-block:1px solid var(--border-card)}
.rows > .flush-row{padding-inline:0}
/* a tinted zone: the accent wash with its edge */
.panel-tint{background:var(--accent-wash);border:1px solid var(--accent-edge);border-radius:var(--r-lg)}
/* a tile on a surface already tinted in its hue steps one shade deeper, so it still reads as a tile */
.panel-tint .tile{background:color-mix(in srgb,var(--accent-ink) 9%,var(--accent-tint))}

/* The aubergine band: the flat brand field that carries the readout, the Seven Cs and the close */
.band{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 48px);margin-inline:auto;border-radius:var(--r-xl);color:#fff;background:var(--accent-fill)}
.band .h2{color:#fff}
.band .sub{color:rgba(255,255,255,.8)}
.band .text-link{color:#fff}
.band-lines{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.closing .band-lines{z-index:0}
.band-lines path{fill:none;stroke:#fff;stroke-opacity:.13;stroke-width:1}

/* The mark: seven rays from one origin, 15° apart. Stroke is in mark units
   (the mark is 42.7 units tall): 2.2 at display sizes, 3 below 40px. */
.mark{display:block;flex:none;width:25px;height:30px;color:var(--accent-fill);stroke-width:3}
/* The same rays as the Seven Cs glyph. --r1…--r7 light each ray. */
.rays{fill:none;stroke:currentColor;stroke-linecap:round}
/* the wordmark, outlined from Libre Franklin 500 at .24em tracking */
.wordmark{display:block;width:89px;height:11px;color:var(--text-default)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:#fff}
.header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--border-card)}
.header-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:var(--header)}
.logo{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:44px;border-radius:var(--r-md)}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-md);font-size:var(--text-body-sm);color:var(--text-secondary);transition:background-color var(--fast) var(--ease-out),color var(--fast) var(--ease-out)}
.nav a[aria-current]{background:var(--surface-nav-active);color:var(--text-default)}
@media (hover:hover){.nav a:hover{background:var(--surface-subtle);color:var(--text-default)}}
.header-end{justify-self:end;display:flex;align-items:center;gap:8px}
.menu{display:none}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu .icon{width:20px;height:20px;stroke-width:1.5}
.menu .i-close,.menu[open] .i-open{display:none}
.menu[open] .i-close{display:block}
.sheet{position:fixed;inset:var(--header) 0 0;z-index:49;overflow-y:auto;display:grid;align-content:start;gap:4px;background:#fff;padding:12px var(--gutter) calc(32px + env(safe-area-inset-bottom))}
.sheet a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--r-md);font-size:var(--text-lead);color:var(--text-default)}
.sheet a[aria-current]:not(.btn){background:var(--surface-nav-active);color:var(--accent-ink)}
.sheet .btn{width:100%;margin-top:24px}
html.menu-open{overflow:hidden}

/* Tablets and phones: a docked "Get in Touch" bar once the page's own actions scroll away */
.dock{display:none}

/* Home hero: a purple field. Six strings lie still behind the headline, Courage
   flat and Competence sharp; the only motion is the scan inside the readout,
   which sits across the field's wave-shaped lower edge, half in the field and
   half on the page. The field stops --field-cut above the section's end. */
.hero{--field-cut:220px;position:relative;isolation:isolate;padding:88px 0 56px;color:#fff;background:linear-gradient(var(--accent-fill),var(--accent-fill)) top / 100% calc(100% - var(--field-cut)) no-repeat}
.hero-head{position:relative;z-index:1;display:grid;justify-items:center;gap:24px;text-align:center}
.hero .display{max-width:14em;color:#fff}
.hero .lede{max-width:33rem;color:rgba(255,255,255,.82)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
/* one proof signal under the buttons: the quote, then who said it */
.hero-proof{display:grid;justify-items:center;gap:4px;margin:12px 0 0}
.hero-proof p{font-family:var(--serif);font-size:var(--text-xl);line-height:1.4;color:#fff}
.hero-proof figcaption{font-size:var(--text-ui);line-height:1.4286;color:rgba(255,255,255,.72);text-wrap:balance}
.hero-figure{margin-top:56px}
.hero .hero-figure{position:relative;z-index:1;padding-inline:var(--gutter)}
.hero .readout{border:1px solid var(--border-card)}
.hero-scan{position:absolute;inset:0 0 auto;z-index:0;height:640px;overflow:hidden;pointer-events:none}
.hero-strings{position:absolute;inset:0;width:100%;height:100%}
/* the strings thin out behind the headline and lede, so they frame the words without crossing them */
.hero-scan{--hush:radial-gradient(ellipse 40% 52% at 50% 42%,rgba(0,0,0,.08) 62%,#000 100%);-webkit-mask-image:var(--hush);mask-image:var(--hush)}
.hero-strings path{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.strings-clean path{stroke-opacity:.3}
.strings-clean .is-flat{stroke:#a9c4f2;stroke-opacity:.75;stroke-width:1.5}
.strings-clean .is-sharp{stroke:#f4ab98;stroke-opacity:.75;stroke-width:1.5}
/* where a purple field meets the page: a slow wave, filled in the page colour */
.field-edge{position:absolute;left:0;z-index:0;width:100%;height:112px;fill:var(--surface-page);pointer-events:none}
.hero .field-edge{bottom:calc(var(--field-cut) - 1px)}
.closing .field-edge{top:-1px}

/* The sample readout: one page of the leadership readout. A head with the
   product's name and the scan's status, a summary of the states in mono figures,
   the six strings, then where to focus. Flat, as every card is: white on
   aubergine needs no shadow to stand forward. */
.readout-band{padding:56px var(--gutter)}
.readout{--scan-at:.5s;--scan-for:1.8s;max-width:880px;margin-inline:auto;overflow:hidden;background:var(--surface-card);color:var(--text-default);border-radius:var(--r-lg)}
.readout-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:56px;padding:12px 28px;border-bottom:1px solid var(--border-card)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
.crumb-brand{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text-default)}
.crumb-brand .mark{width:13px;height:16px}
/* the status: what the scan is reading while it runs, then that it is done */
.readout-status{display:grid;justify-items:end;font-size:var(--text-meta);line-height:1.3847;color:var(--text-secondary)}
.readout-status > span{grid-area:1 / 1;display:inline-flex;align-items:center;gap:8px}
.readout-status > span::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot)}
.status-scan{--dot:var(--lavender);opacity:0}
.status-done{--dot:var(--tone-success-ink)}
/* the top strip: Coherence as the overall reading, drawn as the six strings
   summed into one chord, then a count for each state under its sign */
.readout-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);border-bottom:1px solid var(--border-card)}
.coherence{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;gap:6px 20px;min-width:0;padding:16px 28px 18px;background:var(--accent-wash)}
.coherence-value{font-size:var(--text-3xl);line-height:1.3334;font-weight:500;letter-spacing:-.01em;color:var(--accent-ink)}
.chord{display:block;width:100%;height:32px;align-self:center;overflow:visible;fill:none;stroke:var(--accent-ink);stroke-width:1.75;stroke-linejoin:round}
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.summary > div{display:grid;align-content:start;gap:6px;min-width:0;padding:16px 24px 18px;border-inline-start:1px solid var(--border-card)}
.summary-label{display:flex;align-items:center;gap:8px;font-size:var(--text-meta);line-height:1.3847;color:var(--text-secondary)}
.summary-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--text-4xl);line-height:1.1429;letter-spacing:-.02em;color:var(--text-default)}
/* each state's sign: a tick in green when in tune, the flat and sharp signs in their colours */
.readout .is-tune{--sign:var(--tone-success-ink)}
.readout :is(.is-flat,.is-sharp){--sign:var(--wave)}
.readout .sign{color:var(--sign);stroke-width:2}
/* The profile: one string per dimension, drifting over its resting line. In
   tune is the reference wave in lavender; flat runs slower and slacker in blue,
   sharp faster and tighter in red. Each state is written beside its string,
   after its sign. */
.profile{--pad:28px;--name:112px;--state:88px;--gap:20px;position:relative;padding:12px var(--pad) 16px}
.strings li{display:grid;grid-template-columns:var(--name) minmax(0,1fr) var(--state);gap:0 var(--gap);align-items:center;min-height:48px}
.string-name{font-size:var(--text-body);line-height:1.375;font-weight:500;color:var(--text-default)}
.string-state{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-meta);line-height:1.3847;color:var(--text-muted);white-space:nowrap}
.strings :is(.is-flat,.is-sharp) .string-state{font-weight:500;color:var(--wave)}
.wave{position:relative;display:block;height:32px;background:linear-gradient(var(--border-card),var(--border-card)) center / 100% 1px no-repeat}
.wave-reveal{position:absolute;inset:0;overflow:hidden}
.wave-line{position:absolute;top:0;left:0;width:1440px;height:32px;overflow:visible;fill:none;stroke:var(--wave,var(--lavender));stroke-width:1.75;stroke-linejoin:round;animation:drift var(--drift,6s) linear infinite}
.strings .is-flat{--drift:11s}
.strings .is-sharp{--drift:2.4s}
.strings :is(.is-flat,.is-sharp) .wave-line{stroke-width:2.25}
@keyframes drift{to{transform:translateX(-480px)}}
.is-flat{--wave:var(--tone-flat-ink)}
.is-sharp{--wave:var(--tone-sharp-ink)}
.wave-mini{display:block;flex:none;width:36px;height:12px;overflow:visible;fill:none;stroke:var(--wave,var(--lavender));stroke-width:1.75}
/* The scan: a line crosses the strings and leaves each one vibrating behind it
   while the chord fills in. The states arrive from the right as it reaches
   them, then where to focus rises into place. It runs once, when the card
   comes into view; until then site.js holds it. At rest, and with reduced
   motion, the readout shows its result. */
.scan-beam{position:absolute;top:12px;bottom:16px;inset-inline:calc(var(--pad) + var(--name) + var(--gap)) var(--beam-end,calc(var(--pad) + var(--state) + var(--gap)));overflow:hidden;pointer-events:none}
.scan-beam span{position:absolute;inset:0;opacity:0;background:linear-gradient(to right,transparent calc(100% - 160px),rgba(122,108,168,.12) calc(100% - 2px),var(--accent-ink) calc(100% - 2px));animation:beam var(--scan-for) var(--ease-scan) var(--scan-at) backwards}
@keyframes beam{0%{opacity:1;transform:translateX(-100%)}92%{opacity:1}100%{opacity:0;transform:translateX(0)}}
@keyframes reveal{from{clip-path:inset(-8px 100% -8px 0)}to{clip-path:inset(-8px 0 -8px 0)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes arrive{from{opacity:0;transform:translateX(16px)}}
@keyframes hold{0%,100%{opacity:1}}
@keyframes pulse{50%{opacity:.25}}
.wave-reveal,.chord{animation:reveal var(--scan-for) var(--ease-scan) var(--scan-at) backwards}
.status-scan{animation:hold calc(var(--scan-at) + var(--scan-for)) linear}
.status-scan::before{animation:pulse 1s ease-in-out infinite}
.status-done{animation:rise .4s var(--ease-expo) calc(var(--scan-at) + var(--scan-for)) backwards}
.string-state{animation:arrive .5s var(--ease-expo) calc(var(--scan-at) + var(--scan-for) - .2s + var(--i,0) * 60ms) backwards}
.strings li:nth-child(2){--i:1}
.strings li:nth-child(3){--i:2}
.strings li:nth-child(4){--i:3}
.strings li:nth-child(5){--i:4}
.strings li:nth-child(6){--i:5}
.readout-focus{animation:rise .6s var(--ease-expo) calc(var(--scan-at) + var(--scan-for) + .4s) backwards}
/* held: everything waits but the status dot, which keeps pulsing while it reads */
.readout.is-waiting *{animation-play-state:paused}
/* where to focus: the readout's conclusion, a full-width strip in the accent wash */
.readout-focus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px 28px;border-top:1px solid var(--border-card);background:var(--accent-wash)}
.readout-focus .tile{background:color-mix(in srgb,var(--accent-ink) 9%,var(--accent-tint))}
.readout-focus p{font-size:var(--text-body-sm);line-height:1.4667;color:var(--text-default);text-wrap:pretty}
.readout-focus strong{font-weight:500;color:var(--accent-ink)}

/* Notices and banners: a block in the tone's pale fill, a tile one shade deeper, the title in the tone's ink */
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:16px;border:1px solid transparent;border-radius:var(--r-lg);background:var(--tone-bg);color:var(--text-default)}
.notice > .tile{grid-row:span 2;background:color-mix(in srgb,var(--tone-ink) 10%,var(--tone-bg))}
.notice-title{font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--tone-ink)}
.notice-text{font-size:var(--text-body-sm);line-height:1.5334;text-wrap:pretty}
.notice-action{grid-column:2;justify-self:start;margin-top:8px}

/* the full key, with what each state means */
.scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.scale li{display:grid;align-content:start;gap:8px;font-size:var(--text-body-sm);line-height:1.4667;color:var(--text-secondary);text-wrap:pretty}
.scale .wave-mini{width:64px;height:20px;margin-bottom:8px}
.scale strong{font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--text-default)}

/* Sections own the space above their heading; the last one before the close or footer also closes the gap below */
.section{padding-top:var(--section)}
main > .section:last-child{padding-bottom:var(--section)}
.split-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:end;margin-bottom:48px}

/* Inner page opening: the title on the left, what it means on the right */
.page-hero{padding-top:88px}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 64px;align-items:end}
.page-hero .title{max-width:13em}
.page-hero-aside{display:grid;gap:20px;justify-items:start}
.page-hero-aside .btn{margin-top:4px}
.page-hero + .hero-figure{margin-top:64px}

/* The flow: six kinds of source, tangled, gather at the mark and leave as six
   clean strings, one per dimension. Each source's icon and each dimension's
   name sits level with the end of its line; the lines stretch between them.
   The icons stand bare, in the secondary ink, like the words they replace. */
.flow{--flow-h:300px;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:0 20px;margin:0}
.flow-in,.flow-out{display:grid;align-items:center;height:var(--flow-h);white-space:nowrap}
.flow-in{grid-template-rows:repeat(6,1fr);justify-items:end;color:var(--text-secondary)}
.flow-in .icon{display:block;width:20px;height:20px;stroke-width:1.5}
.flow-out{grid-template-rows:repeat(6,1fr);font-family:var(--serif);font-size:var(--text-xl);line-height:1.2;letter-spacing:-.01em;color:var(--text-default)}
.flow-mid{position:relative;height:var(--flow-h)}
.flow-lines{display:block;width:100%;height:100%;overflow:visible}
.flow-lines path{fill:none;vector-effect:non-scaling-stroke}
.flow-noise path{stroke:var(--lavender);stroke-opacity:.38;stroke-width:1}
.flow-signal path{stroke:var(--accent-ink);stroke-width:1.5}
.flow-mark{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:var(--r-xl);background:var(--accent-fill)}
/* nudged right so the fan, not its origin, sits in the middle of the tile */
.flow-mark .mark{width:24px;height:29px;margin-left:3px;color:#fff;stroke-width:2.6}
.statement{font-family:var(--serif);font-size:var(--text-5xl);line-height:1.4;letter-spacing:-.012em;color:var(--text-default);max-width:21em;text-wrap:balance}
/* the questions it answers: four under the flow, one per dimension in the Seven Cs'
   order, ruled like the Seven Cs board below */
.asks{margin-top:72px}
.asks-lead{margin-bottom:16px;font-size:var(--text-body-sm);line-height:1.4667;color:var(--text-secondary)}
.q-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border-card)}
.q-list li{padding:20px 24px 24px;border-top:1px solid var(--border-card);font-family:var(--serif);font-size:var(--text-2xl);line-height:1.3637;letter-spacing:-.01em;color:var(--text-default);text-wrap:balance}
@media (min-width:1024px){.q-list li + li{border-inline-start:1px solid var(--border-card)}.q-list li:first-child{padding-inline-start:0}}
@media (min-width:768px) and (max-width:1023px){.q-list li:nth-child(even){border-inline-start:1px solid var(--border-card)}.q-list li:nth-child(odd){padding-inline-start:0}}

/* Questions leaders ask: the heading beside a list of questions that open in place */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px;align-items:start}
.faq-head{display:grid;gap:16px}
.faq-list{border-bottom:1px solid var(--border-card)}
.faq-item{border-top:1px solid var(--border-card)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px 0;font-size:var(--text-lead);line-height:1.4445;font-weight:500;color:var(--text-default);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{width:20px;height:20px;color:var(--accent-ink);transition:transform var(--fast) var(--ease-out)}
.faq-item[open] summary .icon{transform:rotate(180deg)}
@media (hover:hover){.faq-item summary:hover span{color:var(--accent-ink)}}
.faq-item p{max-width:34em;padding-bottom:20px;font-size:var(--text-body);line-height:1.5625;color:var(--text-secondary);text-wrap:pretty}

/* Where the analysis runs: three steps inside a dashed boundary, the readout
   outside it. It reads its own width: four across with room, stacked without. */
.boundary{position:relative;container-type:inline-size;margin:0}
.boundary-label{position:absolute;top:-14px;inset-inline-start:24px;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border:1px solid var(--accent-edge);border-radius:var(--r-sm);background:#fff;font-size:var(--text-meta);line-height:1.3847;font-weight:500;color:var(--accent-ink)}
.boundary ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));isolation:isolate}
.boundary ol::before{content:"";position:absolute;inset-block:0;inset-inline:0 calc(25% + 8px);z-index:-1;border:1px dashed var(--accent-edge);border-radius:24px;background:var(--accent-wash)}
.boundary li{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;padding:44px 16px 36px;text-align:center}
.boundary li:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:64px;inset-inline:calc(50% + 28px) calc(-50% + 28px);height:1px;background:var(--lavender)}
.boundary .tile{margin-bottom:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--accent-edge)}
.boundary .is-out .tile{background:var(--accent-fill);box-shadow:none}
.boundary .tile .mark{width:15px;height:18px;margin-left:2px;color:#fff;stroke-width:3}
.boundary strong{font-size:var(--text-body);line-height:1.5}
.boundary li > span:last-child{font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
.boundary .is-out strong{color:var(--accent-ink)}
@container (max-width:640px){
  .boundary ol{grid-template-columns:1fr;grid-auto-rows:1fr}
  .boundary ol::before{inset:0 0 calc(25% + 6px) 0;border-radius:var(--r-xl)}
  .boundary li{grid-template-columns:40px minmax(0,1fr);justify-items:start;align-content:center;gap:0 14px;padding:22px 20px;text-align:start}
  .boundary li:first-child{padding-top:30px}
  .boundary .tile{grid-row:span 2;margin:0}
  .boundary li:not(:last-child)::after{top:calc(50% + 24px);bottom:calc(-50% + 24px);inset-inline:40px auto;width:1px;height:auto}
  .boundary li:first-child:not(:last-child)::after{top:calc(50% + 28px)}
}
.boundary + .pair{margin-top:48px}
/* Home: the two safety claims beside the boundary */
.safety{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px 72px;align-items:center}
.safety-copy{display:grid;gap:28px;justify-items:start}
.claim{display:grid;gap:8px}
.claim p{font-size:var(--text-body);line-height:1.5625;color:var(--text-secondary);max-width:34em;text-wrap:pretty}
/* two statements side by side, each a heading and its paragraph */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px}
.pair > div{display:grid;align-content:start;gap:8px}
.pair p{font-size:var(--text-body);line-height:1.5625;color:var(--text-secondary);max-width:34em;text-wrap:pretty}

/* Splits: copy on the left, a card of rows on the right */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.split-copy{display:grid;gap:20px;justify-items:start}

/* The Seven Cs. Each dimension lights its own ray: Capacity the first, Coherence the seventh */
:is(.cs,.cs-board) li:nth-child(1){--r1:1}
:is(.cs,.cs-board) li:nth-child(2){--r2:1}
:is(.cs,.cs-board) li:nth-child(3){--r3:1}
:is(.cs,.cs-board) li:nth-child(4){--r4:1}
:is(.cs,.cs-board) li:nth-child(5){--r5:1}
:is(.cs,.cs-board) li:nth-child(6){--r6:1}
:is(.cs,.cs-board) li:nth-child(7){--r7:1}
.cs-glyph{width:40px;height:40px;color:var(--accent-ink);stroke-width:1.75}
/* on the homepage: six cells on hairlines, then Coherence across the full width with every ray lit */
.cs-head{display:grid;gap:12px;max-width:40rem;margin-bottom:40px}
.cs-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-board li{display:grid;align-content:start;gap:10px;padding:28px 24px 32px;border-top:1px solid var(--border-card)}
/* column rules: three across on wide screens, two on tablets, none on phones */
@media (min-width:1024px){.cs-board li:not(:nth-child(3n+1)):not(.is-coherence){border-inline-start:1px solid var(--border-card)}.cs-board li:nth-child(3n+1):not(.is-coherence){padding-inline-start:0}}
@media (min-width:768px) and (max-width:1023px){.cs-board li:nth-child(even):not(.is-coherence){border-inline-start:1px solid var(--border-card)}.cs-board li:nth-child(odd):not(.is-coherence){padding-inline-start:0}}
.cs-board .cs-glyph{margin-bottom:6px}
.cs-board h3{font-family:var(--serif);font-size:var(--text-4xl);line-height:1.2143;letter-spacing:-.01em;color:var(--text-default)}
.cs-board li p{font-size:var(--text-body-sm);line-height:1.5334;color:var(--text-secondary);text-wrap:pretty}
.cs-board .is-coherence{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 24px;margin-top:8px;padding:24px 28px;border:0;border-radius:var(--r-lg);background:var(--accent-wash)}
.cs-board .is-coherence .cs-glyph{margin:0}
.cs-board .is-coherence > div{display:grid;gap:4px}
.is-coherence{--r1:1;--r2:1;--r3:1;--r4:1;--r5:1;--r6:1;--r7:1}
/* on the Diagnostic page: a flush card, one row per dimension */
.cs .flush-row{display:grid;grid-template-columns:40px minmax(0,.7fr) minmax(0,1.7fr);gap:24px;align-items:start;padding:24px 0}
.cs h3{font-family:var(--serif);font-size:var(--text-4xl);line-height:1.2143;letter-spacing:-.015em}
.cs-text{display:grid;gap:6px}
.cs .def{font-size:var(--text-body);line-height:1.5625;color:var(--text-default);max-width:32em;text-wrap:pretty}
.cs .practice{font-family:var(--serif);font-size:var(--text-lead);line-height:1.4445;color:var(--text-secondary);max-width:30em;text-wrap:pretty}
.cs .is-coherence{margin-top:-1px;padding-inline:20px;border-top:0;border-radius:var(--r-lg);background:var(--accent-wash)}
/* why these seven, and why balance matters */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 64px;margin-bottom:48px}
.why > div{display:grid;align-content:start;gap:10px}
.why p{font-size:var(--text-body-lg);line-height:1.5883;color:var(--text-default);max-width:36em;text-wrap:pretty}

/* The journey: four steps joined by a hairline, then a loop that runs back
   under them from the last step to the scan, to say the work repeats */
.method-title{margin-bottom:48px}
.journey-more{margin-top:32px}
.journey{--gap:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.journey li{position:relative;display:grid;align-content:start;gap:8px}
.journey .tile{margin-bottom:12px;font-family:var(--mono);font-size:var(--text-ui);font-variant-numeric:tabular-nums}
.journey li:not(:last-child)::before{content:"";position:absolute;top:16px;inset-inline:44px calc(var(--gap) * -1 + 12px);height:1px;background:var(--border-control)}
.journey p{font-size:var(--text-body);line-height:1.5625;color:var(--text-secondary);max-width:24em;text-wrap:pretty}
.journey-loop{--gap:32px;position:relative;height:56px;margin-block:20px 0;margin-inline:calc((100% - var(--gap) * 3) / 4 + var(--gap) + 16px) calc((100% - var(--gap) * 3) / 4 - 16px)}
.journey-loop::after{content:"";position:absolute;inset:0;border:1px solid var(--lavender);border-top:0;border-radius:0 0 28px 28px}
/* the arrowhead, pointing back up at the scan */
.journey-loop::before{content:"";position:absolute;top:0;inset-inline-start:-5px;width:8px;height:8px;border-left:1px solid var(--lavender);border-top:1px solid var(--lavender);transform:rotate(45deg)}
.journey-loop > span:last-child{position:absolute;z-index:1;left:50%;bottom:-12px;transform:translateX(-50%);padding:0 14px;background:var(--surface-page);font-size:var(--text-body-sm);line-height:1.6;font-weight:500;color:var(--accent-ink);white-space:nowrap}
.journey-loop .tile{display:none}
/* the close of a page: terms on the left, the action on the right */
.ask-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:64px}
.ask-row p{font-size:var(--text-body);line-height:1.5625;color:var(--text-secondary);max-width:36em}


/* People: a portrait over each name. Initials hold the place until a headshot replaces them. */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.person{display:grid;align-content:start;gap:2px}
.portrait{display:grid;place-items:center;width:88px;height:88px;margin-bottom:18px;overflow:hidden;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);font-size:var(--text-2xl);font-weight:500;letter-spacing:.02em}
.portrait img{width:100%;height:100%;object-fit:cover}
.row-role{font-size:var(--text-ui);line-height:1.4286;color:var(--accent-ink)}
.person p:not([class]){margin-top:8px;font-size:var(--text-body-sm);line-height:1.5334;color:var(--text-secondary);max-width:30em;text-wrap:pretty}
.people-group{margin:72px 0 28px;font-size:var(--text-lead);line-height:1.4445;font-weight:500}
/* Molecular leadership: the argument beside two molecules made of the same elements */
.molecular{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px 64px;align-items:center}
.molecular-copy{display:grid;gap:24px}
.molecules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin:0;padding:40px 24px 32px;border-radius:24px;background:var(--accent-wash)}
.molecule{display:grid;justify-items:center;gap:12px;text-align:center}
.molecule svg{display:block;width:100%;max-width:180px;height:auto;overflow:visible}
.molecule .bond{fill:none;stroke:var(--accent-ink);stroke-width:2.5;stroke-linecap:round}
.atom-o{fill:var(--accent-fill)}
.atom-h{fill:#fff;stroke:var(--accent-ink);stroke-width:1.5}
.molecule text{font-family:var(--sans);font-size:var(--text-body-sm);font-weight:500;fill:#fff;text-anchor:middle;dominant-baseline:central}
.molecule text.on-h{font-size:var(--text-caption);fill:var(--accent-ink)}
.molecule p{display:grid;gap:2px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
.molecule p strong{font-size:var(--text-body-sm)}
.molecules figcaption{grid-column:1 / -1;padding-top:20px;border-top:1px solid var(--accent-edge);font-family:var(--serif);font-size:var(--text-xl);line-height:1.4;text-align:center;color:var(--text-default);text-wrap:balance}

/* Reviewer questions: the question on the left, the answer on the right */
.qa .flush-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 40px;padding:20px 0}
.qa dt{font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--text-default);text-wrap:balance}
.qa dd{font-size:var(--text-body-sm);line-height:1.5334;color:var(--text-default);max-width:34em;text-wrap:pretty}

/* A closing ask inside a page */
.ask{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:32px 40px}
.ask .prose p{color:var(--text-secondary)}

/* The close: a full-width purple field whose top edge is a wave, the page's last word */
.section:has(+ .closing){padding-bottom:72px}
.closing{position:relative;isolation:isolate;overflow:hidden;padding:184px 0 128px;background:var(--accent-fill);color:#fff}
.closing .band-lines path{stroke-opacity:.16}
.closing-in{position:relative;z-index:1;display:grid;justify-items:center;gap:20px;text-align:center}
.closing .h2{max-width:16em;color:#fff}
.closing-lede{max-width:36rem;font-size:var(--text-body-lg);line-height:1.5883;color:rgba(255,255,255,.82);text-wrap:pretty}
.closing .btn{margin-top:8px}
main:has(> .closing:last-child) + .footer{border-top:0}

/* A link inside running text */
.inline-link{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.inline-link:hover{text-decoration-thickness:2px}
/* The privacy notice: one readable column of short sections */
.legal{display:grid;gap:12px;max-width:40rem}
.legal .h3{margin-top:28px}
.legal .h3:first-child{margin-top:0}
.legal p{max-width:33em;font-size:var(--text-body-lg);line-height:1.5883;color:var(--text-default);text-wrap:pretty}
.legal .legal-date{margin-top:20px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
/* The missing page: the heading, a reason, and two ways back */
.is-missing-page{padding-bottom:var(--section)}
.missing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

/* The brand page: each file shown on its own ground, with its downloads beneath */
.kit-title{margin-bottom:12px}
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;margin-top:32px}
.kit .is-wide{grid-column:1 / -1}
.kit-preview{display:grid;place-items:center;aspect-ratio:16 / 10;padding:32px;border:1px solid var(--border-card);border-radius:var(--r-lg);background:var(--surface-card)}
.kit-preview img{display:block;max-width:100%;max-height:100%;height:auto}
.kit-preview.is-dark{border-color:transparent;background:var(--accent-fill)}
.kit-preview.is-plain{aspect-ratio:auto;justify-items:start;padding:0;border:0;background:none}
.kit-preview.is-plain img{border-radius:var(--r-md)}
.kit-preview img.is-round{border-radius:50%}
.kit-preview img.has-edge{box-shadow:0 0 0 1px var(--border-card)}
.kit-preview img.is-capped{max-width:min(100%,720px)}
.kit-name{margin-top:14px;font-size:var(--text-body);line-height:1.5;font-weight:500;color:var(--text-default)}
.kit-name span{margin-inline-start:8px;white-space:nowrap;font-family:var(--mono);font-size:var(--text-meta);font-weight:400;color:var(--text-secondary)}
.kit-files{display:flex;gap:24px;margin-top:2px}
.kit-files a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-ui);font-weight:500;color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.kit-files a:hover{text-decoration-thickness:2px}
.kit-note{margin-top:32px;font-size:var(--text-body-sm);line-height:1.5334;color:var(--text-secondary);max-width:34em;text-wrap:pretty}
.btn-note{font-size:var(--text-ui);font-weight:400;color:rgba(255,255,255,.75)}
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 20px;margin-top:32px}
.swatches.is-small{margin-top:16px}
.swatch{display:block;aspect-ratio:1 / 1;margin-bottom:2px;border-radius:var(--r-lg);background:var(--c)}
.swatches.is-small .swatch{aspect-ratio:2 / 1}
.swatch.has-edge{box-shadow:inset 0 0 0 1px var(--border-card)}
.swatch-code{font-family:var(--mono);font-size:var(--text-meta);line-height:1.5385;color:var(--text-secondary)}
.swatch-use{margin-top:4px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary);text-wrap:pretty}
.type-specimens{margin-top:24px;border-top:1px solid var(--border-card)}
.type-specimens li{padding:28px 0;border-bottom:1px solid var(--border-card)}
.specimen{margin-bottom:12px;color:var(--text-default);text-wrap:balance}
.specimen.is-serif{font-family:var(--serif);font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-.015em}
.specimen.is-sans{max-width:36em;font-size:var(--text-2xl);line-height:1.4546}
.specimen.is-mono{font-family:var(--mono);font-size:var(--text-2xl);line-height:1.4546;font-variant-numeric:tabular-nums}

/* The contact form: a card of 44px fields */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start;padding:88px 0 var(--section)}
.contact-intro{display:grid;gap:24px;align-content:start}
.contact-alt{font-size:var(--text-body-sm);line-height:1.5334;color:var(--text-secondary);max-width:30em}
.form{position:relative;display:grid;gap:20px;padding:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{display:grid;gap:8px;min-width:0}
.field-label{font-size:var(--text-ui);line-height:1.4286;font-weight:500;color:var(--text-default)}
.field-label .opt{font-weight:400;color:var(--text-secondary)}
.input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-control);border-radius:var(--r-md);background:var(--surface-card);font-size:var(--text-body);line-height:1.4;color:var(--text-default);transition:border-color var(--fast) var(--ease-out),box-shadow var(--fast) var(--ease-out)}
textarea.input{min-height:132px;resize:vertical;line-height:1.5}
@media (hover:hover){.input:hover{border-color:var(--border-hover)}}
.input:focus,.input:focus-visible{border-color:var(--focus-ring);outline:none;box-shadow:var(--shadow-halo)}
.input[aria-invalid="true"]{border-color:var(--tone-danger-ink)}
/* invalid and focused: the red edge stays and the ring is drawn round it */
.input[aria-invalid="true"]:focus{border-color:var(--tone-danger-ink);box-shadow:none;outline:2px solid var(--focus-ring);outline-offset:2px}
@media (forced-colors:active){.input:focus{outline:2px solid CanvasText}}
.field-hint{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
.count{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--text-meta)}
.field-error{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-ui);line-height:1.4286;font-weight:500;color:var(--tone-danger-ink)}
.field-error::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:var(--alert-mask) center / contain no-repeat;mask:var(--alert-mask) center / contain no-repeat}
.field-error:empty{display:none}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.form-note{font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
/* the result stays in the page, visually hidden until there is something to say, so it is always announced */
.form-result:not(.is-shown){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}

/* Footer */
.footer{padding:64px 0 40px;border-top:1px solid var(--border-card)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(2,minmax(0,1fr));gap:32px}
.footer-brand p{max-width:22em;margin-top:12px;font-size:var(--text-ui);line-height:1.4286;color:var(--text-secondary)}
.footer-title{margin-bottom:8px;font-size:var(--text-caption);line-height:1.3334;font-weight:500;color:var(--text-muted)}
.footer-col a,.footer-ph{display:inline-flex;align-items:center;min-height:36px;font-size:var(--text-ui);color:var(--text-secondary);overflow-wrap:anywhere}
.footer-col a{transition:color var(--fast) var(--ease-out)}
.footer-col a:hover,.footer-col a[aria-current]{color:var(--text-default)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--border-card);font-size:var(--text-meta);line-height:1.5385;color:var(--text-secondary)}

@media (max-width:1023px){
  .split-head > .text-link{justify-self:start}
  :root{--display:48px;--display-lh:1.125;--title:42px;--title-lh:1.1429;--h2:34px;--h2-lh:1.1765;--section:104px;--header:64px}
  .header-in{grid-template-columns:1fr auto}
  .nav,.header-cta{display:none}
  .menu{display:block}
  .dock:not([hidden]){display:block;position:fixed;inset:auto 0 0;z-index:45;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border-card);box-shadow:var(--shadow-popover)}
  .dock .btn{display:flex;width:100%;max-width:480px;margin-inline:auto}
  .hero{--field-cut:200px;padding-top:64px}
  .readout-band{padding:40px var(--gutter)}
  .readout-head,.coherence,.readout-focus{padding-inline:24px}
  .profile{--pad:24px}
  .summary > div{padding-inline:20px}
  .page-hero .wrap{grid-template-columns:1fr;align-items:start}
  .split-head{grid-template-columns:1fr;gap:16px}
  .flow{gap:0 16px}
  .q-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:1fr;gap:24px}
  .cs-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs .flush-row{grid-template-columns:36px minmax(0,.7fr) minmax(0,1.6fr);gap:20px}
  .split{grid-template-columns:1fr;gap:40px}
  .molecular{grid-template-columns:1fr}
  .molecules{max-width:560px}
  /* tablets: two steps a row, joined across each row; the loop becomes a closing line */
  .journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .journey li:nth-child(2n)::before{display:none}
  .journey-loop{display:grid;grid-template-columns:32px minmax(0,1fr);gap:20px;align-items:center;height:auto;margin:40px 0 0}
  .journey-loop::after,.journey-loop::before{display:none}
  .journey-loop .tile{display:inline-grid}
  .journey-loop > span:last-child{position:static;transform:none;padding:0;white-space:normal}
  .ask-row{margin-top:56px}
  .contact{grid-template-columns:1fr;gap:40px}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer{padding-bottom:104px}
}
@media (max-width:900px){
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  :root{--display:38px;--display-lh:1.1579;--title:34px;--title-lh:1.1765;--h2:28px;--h2-lh:1.2143;--lede:18px;--lede-lh:1.5;--section:72px;--gutter:20px}
  .asks{margin-top:48px}
  .q-list{grid-template-columns:1fr}
  .q-list li{padding:16px 0}
  /* every target is 44px on phones */
  .btn,.btn-sm{--btn-h:44px}
  .btn-lg{--btn-h:48px}
  .icon-btn{width:44px;height:44px}
  .band{width:calc(100% - 24px);border-radius:var(--r-lg)}
  .hero{--field-cut:140px;padding-top:48px}
  .hero-scan{height:520px;--hush:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3) 82%,#000)}
  .hero .hero-figure{padding-inline:12px}
  .safety{grid-template-columns:1fr;gap:56px}
  .hero-head{gap:20px}
  .hero-figure{margin-top:36px}
  .readout-band{padding:12px}
  .readout-head{padding:12px 16px}
  .readout-top{grid-template-columns:1fr}
  .coherence{padding:14px 16px 16px}
  .summary{border-top:1px solid var(--border-card)}
  .summary > div{padding:14px 16px}
  .summary > div:first-child{border-inline-start:0}
  .summary-n{font-size:var(--text-3xl);line-height:1.1667}
  .readout-status{justify-items:start}
  /* phones: the state tucks under its name, so the string keeps the width */
  .profile{--pad:16px;--name:96px;--gap:12px;--beam-end:var(--pad);padding-block:8px 12px}
  .strings li{grid-template-columns:var(--name) minmax(0,1fr);gap:2px var(--gap);padding-block:6px}
  .strings .wave{grid-column:2;grid-row:1 / span 2}
  .string-name{font-size:var(--text-body-sm);line-height:1.4667}
  .string-state{grid-column:1;grid-row:2;font-size:var(--text-caption);line-height:1.3334}
  .scan-beam{top:8px;bottom:12px}
  .readout-focus{align-items:start;padding:14px 16px}
  .page-hero{padding-top:48px}
  .page-hero + .hero-figure{margin-top:36px}
  .split-head{margin-bottom:32px}
  .sub{font-size:var(--text-body);line-height:1.5}
  .statement{font-size:var(--text-3xl);line-height:1.4167}
  /* phones: the copy above names the sources, so the flow is only its lines, edge to edge */
  .flow{--flow-h:228px;grid-template-columns:minmax(0,1fr);gap:0}
  .flow-in,.flow-out{display:none}
  .flow-mark{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:var(--r-md)}
  .flow-mark .mark{width:17px;height:21px;margin-left:2px;stroke-width:3}
  .boundary-label{inset-inline-start:16px}
  .boundary + .pair{margin-top:40px}
  .pair,.why{grid-template-columns:1fr;gap:28px}
  .why{margin-bottom:40px}
  .scale{grid-template-columns:1fr;gap:20px}
  .scale li{grid-template-columns:72px minmax(0,1fr);gap:2px 16px;align-items:center}
  .scale .wave-mini{grid-row:span 2;width:56px;margin:0}
  .cs-board{grid-template-columns:1fr}
  .cs-board li{grid-template-columns:32px minmax(0,1fr);gap:4px 14px;padding:20px 0}
  .cs-board .cs-glyph{grid-row:span 2;width:32px;height:32px;margin:2px 0 0}
  .cs-board h3{font-size:var(--text-3xl);line-height:1.25}
  .cs-board .is-coherence{grid-template-columns:32px minmax(0,1fr);gap:12px 14px;margin-top:12px;padding:20px 16px}
  .cs-board .is-coherence .cs-glyph{grid-row:auto;align-self:start}
  .cs-board .is-coherence .text-link{grid-column:2}
  .cs .flush-row{grid-template-columns:32px minmax(0,1fr);gap:6px 14px;align-items:start;padding:18px 0}
  .cs .cs-text{grid-column:2}
  .cs .is-coherence{padding-inline:14px}
  .cs-glyph{width:32px;height:32px;margin-top:2px}
  .cs h3{font-size:var(--text-3xl);line-height:1.25}
  .cs .practice{font-size:var(--text-body-lg);line-height:1.4706}
  .flush-row{padding:14px 16px}
  .qa .flush-row{grid-template-columns:1fr;padding:16px 0}
  .people{grid-template-columns:1fr;gap:28px}
  .person{grid-template-columns:64px minmax(0,1fr);gap:2px 16px}
  .portrait{grid-row:span 3;width:64px;height:64px;margin:0;font-size:var(--text-lead)}
  .person p:not([class]){grid-column:2;margin-top:4px}
  .people-group{margin:56px 0 20px}
  .molecules{padding:28px 12px 24px;gap:20px 8px}
  .molecules figcaption{font-size:var(--text-lead);line-height:1.4445}
  .ask{grid-template-columns:1fr;padding:24px}
  .kit{grid-template-columns:1fr;gap:32px}
  .kit-preview{padding:24px}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .specimen.is-sans,.specimen.is-mono{font-size:var(--text-lead);line-height:1.5556}
  .ask-row{margin-top:48px}
  .closing{padding:136px 0 88px}
  .method-title{margin-bottom:32px}
  .contact{padding-top:48px}
  .form{padding:20px}
  .form-row{grid-template-columns:1fr}
  .footer{padding-top:48px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
  .footer-col a,.footer-ph{min-height:44px}
}
@media (max-width:639px){
  /* phones: one step under the next, joined by a line through the tiles */
  .journey{grid-template-columns:1fr;gap:28px}
  .journey li{padding-inline-start:52px}
  .journey .tile{position:absolute;inset-inline-start:0;top:-4px;margin:0}
  .journey li:not(:last-child)::before{display:block;top:36px;bottom:-28px;inset-inline:16px auto;width:1px;height:auto}
  .journey-loop{margin-top:28px}
  .journey-loop::before{display:block;top:-28px;bottom:auto;inset-inline-start:16px;width:1px;height:20px;border:0;border-inline-start:1px dashed var(--lavender);transform:none}
}
@media (max-width:360px){
  .profile{--name:84px}
}
@media (max-width:480px){
  .hero-actions{width:100%;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}