@font-face{
  font-family:"Newsreader";src:url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Newsreader";src:url("/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Geist";src:url("/fonts/geist-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Geist Mono";src:url("/fonts/geistmono-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Metric-matched fallbacks: system fonts resized to the web fonts' width and
   vertical metrics, so the hero headline (the LCP element) does not reflow
   when the real font swaps in. Values measured from the woff2 files. */
@font-face{
  font-family:"Newsreader Fallback";src:local("Georgia");
  size-adjust:95.59%;ascent-override:76.89%;descent-override:27.72%;line-gap-override:0%;
}
@font-face{
  font-family:"Geist Fallback";src:local("Arial");
  size-adjust:100.01%;ascent-override:100.49%;descent-override:29.5%;line-gap-override:0%;
}

/* ─── RESET & TOKENS ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
  --accent: #3E3AA8;
  --accent-hover: #34309A;
  --accent-soft: #E9E8F8;
  --accent-tint: #C9C6F2;
  --ink: #0E1530;
  --ink-2: #474D6B;
  --ink-3: #656A82;
  --line: rgba(14,21,48,0.08);
  --line-strong: rgba(14,21,48,0.16);
  --bg: #F3F4F7;
  --surface: #FDFDFE;
  --shell: rgba(14,21,48,0.035);
  --danger: #B23A30;
  --success: #2E7550;
  /* Labs divergence: 'Geist Fallback' is a metric-matched face (self-hosted Geist, not Google Fonts) to avoid LCP reflow; the parent has none */
  --font-sans: 'Geist','Geist Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --max-w: 1200px;
  /* Labs additions: the serif voice, and the one dark band the parent has no equivalent for */
  --font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --night: #0C0E13;
  --on-night: #ECEBE6;
  --on-night-2: #8F929B;
  /* Radius system: bezel shells 28px, bezel cores 22px (shell minus 6px padding), inputs 14px, buttons and pills fully round, markers round */
  --radius-shell: 28px;
  --radius-core: 22px;
  --radius-input: 14px;
  --radius-pill: 999px;
  --ease-spring: cubic-bezier(0.32,0.72,0,1);
  --shadow-soft: 0 1px 1px rgba(14,21,48,0.03), 0 30px 60px -36px rgba(30,34,90,0.28);
  --z-grain: 50;
  --z-menu: 90;
  --z-nav: 100;
  --z-skip: 200;
}
html{scroll-behavior:smooth;scroll-padding-top:104px}
html.menu-open{overflow:hidden}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink-2);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.65;font-size:16px}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);line-height:1.1;color:var(--ink);font-weight:600;letter-spacing:-0.02em;text-wrap:balance}
p{text-wrap:pretty}
a{text-decoration:none;color:inherit}
::selection{background:var(--accent-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 32px}}

.skip-link{position:absolute;left:16px;top:-64px;z-index:var(--z-skip);padding:10px 16px;background:var(--ink);color:#fff;border-radius:var(--radius-pill);font-weight:500;font-size:14px;transition:top 400ms var(--ease-spring)}
.skip-link:focus{top:16px}
#navSentinel{position:absolute;top:0;left:0;width:1px;height:40px;pointer-events:none}
main:focus{outline:none}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{display:inline-block;width:1em;height:1em;flex-shrink:0;fill:currentColor;vertical-align:middle}

/* ─── DOUBLE BEZEL ─── */
.bezel{padding:6px;background:var(--shell);border-radius:var(--radius-shell);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.05)}
.bezel-core{height:100%;background:var(--surface);border-radius:var(--radius-core);box-shadow:inset 0 1px 1px rgba(255,255,255,0.9),var(--shadow-soft)}

/* ─── SECTION ─── */
.section{padding:72px 0 88px;position:relative}
@media(min-width:768px){.section{padding:112px 0 128px}}
@media(min-width:768px){.section-tight{padding:88px 0 104px}}
.section-head{max-width:44rem;margin-bottom:40px}
@media(min-width:768px){.section-head{margin-bottom:56px}}
.section h2{font-size:clamp(30px,4vw,48px);letter-spacing:-0.035em;line-height:1.05;margin-bottom:20px}
.section h2 .line{display:block}
.section h2 .line:last-child:not(:first-child){color:var(--ink-3)}
.section p.lede{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:36rem}
@media(min-width:768px){.section p.lede{font-size:18px}}
.pill-label{display:inline-flex;align-items:center;padding:6px 14px;margin-bottom:20px;background:var(--shell);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.06);font-family:var(--font-mono);font-weight:500;font-size:12px;color:var(--accent)}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border:none;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color 500ms var(--ease-spring),transform 500ms var(--ease-spring),box-shadow 500ms var(--ease-spring)}
.btn-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;transition:transform 500ms var(--ease-spring),background-color 500ms var(--ease-spring)}
.btn:hover .btn-icon{transform:translate(2px,-1px) scale(1.05)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:0.65;cursor:progress;transform:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 16px 32px -16px rgba(62,58,168,0.65)}
.btn-primary .btn-icon{background:rgba(255,255,255,0.16)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 20px 36px -16px rgba(62,58,168,0.7)}
.btn-primary:hover .btn-icon{background:rgba(255,255,255,0.24)}
.btn-sm{gap:10px;padding:5px 5px 5px 18px;font-size:14px}
.btn-sm .btn-icon{width:32px;height:32px;font-size:16px}
.btn-link{font-weight:500;font-size:15px;color:var(--ink);padding:4px 0;border-bottom:1px solid var(--line-strong);transition:color 400ms var(--ease-spring),border-color 400ms var(--ease-spring)}
.btn-link:hover{color:var(--accent);border-color:var(--accent)}

/* ─── NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:14px 16px;pointer-events:none}
@media(min-width:768px){.nav{padding:20px 32px}}
.nav-inner{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:var(--max-w);margin:0 auto;padding:6px 6px 6px 18px;background:rgba(253,253,254,0.78);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.06),inset 0 1px 0 rgba(255,255,255,0.8);transition:background-color 500ms var(--ease-spring),box-shadow 500ms var(--ease-spring)}
.nav-inner.scrolled{background:rgba(253,253,254,0.92);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.06),inset 0 1px 0 rgba(255,255,255,0.8),0 18px 40px -24px rgba(30,34,90,0.35)}
@media(min-width:860px){.nav-inner{width:max-content;gap:24px}}
.nav-logo{display:flex;align-items:center;gap:10px;padding:6px 0;margin-right:auto;flex-shrink:0}
@media(min-width:860px){.nav-logo{margin-right:8px}}
.nav-logo svg{height:24px;width:auto;flex-shrink:0}
.nav-logo-text{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-0.01em}
.nav-links{display:none}
@media(min-width:860px){.nav-links{display:flex;gap:2px}}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);padding:9px 14px;border-radius:var(--radius-pill);transition:color 400ms var(--ease-spring),background-color 400ms var(--ease-spring)}
.nav-links a:hover{color:var(--ink);background:rgba(14,21,48,0.05)}
.nav-links a[aria-current="true"]{color:var(--accent);background:var(--accent-soft)}
.nav-cta{display:none}
@media(min-width:600px){.nav-cta{display:inline-flex}}
.nav-toggle{position:relative;flex-shrink:0;width:44px;height:44px;border:none;border-radius:50%;background:rgba(14,21,48,0.05);cursor:pointer;transition:background-color 400ms var(--ease-spring)}
.nav-toggle:hover{background:rgba(14,21,48,0.09)}
.nav-toggle span{position:absolute;left:14px;top:50%;width:16px;height:1.5px;margin-top:-0.75px;border-radius:2px;background:var(--ink);transition:transform 500ms var(--ease-spring)}
.nav-toggle span:nth-child(1){transform:translateY(-3px)}
.nav-toggle span:nth-child(2){transform:translateY(3px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
@media(min-width:860px){.nav-toggle{display:none}}

/* ─── MOBILE MENU ─── */
.menu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:center;padding:112px 28px 48px;background:rgba(243,244,247,0.86);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);opacity:0;visibility:hidden;transition:opacity 500ms var(--ease-spring),visibility 0s 500ms}
.menu.is-open{opacity:1;visibility:visible;transition:opacity 500ms var(--ease-spring),visibility 0s}
@media(min-width:860px){.menu{display:none}}
.menu-links{list-style:none;display:grid;gap:4px}
.menu-links li{overflow:hidden}
.menu-links a{display:block;padding:6px 0;font-size:clamp(32px,9vw,44px);font-weight:600;letter-spacing:-0.035em;color:var(--ink)}
.menu-links a,.menu-cta{opacity:0;transform:translateY(48px);transition:opacity 600ms var(--ease-spring),transform 700ms var(--ease-spring);transition-delay:calc(var(--i,0) * 60ms + 60ms)}
.menu.is-open .menu-links a,.menu.is-open .menu-cta{opacity:1;transform:none}
.menu-cta{margin-top:40px;align-self:flex-start}

/* ─── HERO ─── */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:120px 0 72px}
@media(min-width:768px){.hero{padding:148px 0 104px}}
.hero::before{content:'';position:absolute;z-index:-1;width:960px;height:960px;right:-320px;top:-380px;background:radial-gradient(closest-side,rgba(62,58,168,0.12),rgba(62,58,168,0) 72%);pointer-events:none}
.hero-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.hero h1{font-size:clamp(38px,5vw,62px);font-weight:600;letter-spacing:-0.04em;line-height:1.03}
.hero-sub{margin-top:24px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:32rem}
.hero-sub strong{color:var(--ink);font-weight:600}
@media(min-width:768px){.hero-sub{font-size:19px}}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.hero-copy > *{animation:heroIn 1000ms var(--ease-spring) both}
.hero-copy > :nth-child(2){animation-delay:90ms}
.hero-copy > :nth-child(3){animation-delay:180ms}
.hero-copy > :nth-child(4){animation-delay:270ms}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.hero-visual{justify-self:center;width:100%;max-width:460px;animation:heroIn 1200ms var(--ease-spring) 200ms both}
@media(min-width:1024px){.hero-visual{justify-self:end}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ─── STATEMENT ─── */
.statement{max-width:62rem}
.section .statement-title{font-size:clamp(32px,4.8vw,58px);letter-spacing:-0.04em;line-height:1.04;margin-bottom:28px}
.statement-title em{font-style:normal;color:var(--accent);text-decoration:underline;text-decoration-thickness:0.06em;text-underline-offset:0.14em;text-decoration-color:rgba(62,58,168,0.3)}

/* ─── SYSTEMS BENTO ─── */
.systems-bento{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:960px){
  .systems-bento{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px}
  .systems-group--customers{grid-column:1 / -1}
  .systems-group--customers .systems-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 40px}
}
.systems-group .bezel-core{padding:28px 24px 32px}
@media(min-width:768px){.systems-group .bezel-core{padding:40px 40px 44px}}
.systems-icon{display:block;font-size:32px;color:var(--accent);margin-bottom:20px}
.systems-group h3{font-size:22px;letter-spacing:-0.02em;margin-bottom:24px}
.systems-list{list-style:none;display:grid;gap:18px}
.systems-list li{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.systems-list strong{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:2px}
.systems-group--ops .bezel-core{background:var(--accent);box-shadow:inset 0 1px 1px rgba(255,255,255,0.15),0 30px 60px -32px rgba(62,58,168,0.65)}
.systems-group--ops .systems-icon{color:var(--accent-tint)}
.systems-group--ops h3,.systems-group--ops strong{color:#fff}
.systems-group--ops li{color:rgba(255,255,255,0.78)}
@media(min-width:960px){.systems-group--ops .systems-list{gap:22px}}
.systems-group--visibility .bezel-core{background:var(--accent-soft)}

/* ─── APPROACH TIMELINE ─── */
@media(min-width:1024px){
  .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .split .section-head{position:sticky;top:128px;margin-bottom:0}
}
.timeline{list-style:none;position:relative;padding-left:36px}
.timeline::before,.timeline::after{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line-strong)}
.timeline::after{display:none;background:var(--accent);transform-origin:top}
@supports (animation-timeline: view()){
  .timeline::after{display:block;animation:grow linear both;animation-timeline:view();animation-range:cover 15% cover 65%}
}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.timeline-step{position:relative;padding:0 0 44px}
.timeline-step:last-child{padding-bottom:0}
.timeline-step::before{content:'';position:absolute;left:-36px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-strong);z-index:1;transition:background-color 600ms var(--ease-spring),border-color 600ms var(--ease-spring),box-shadow 600ms var(--ease-spring)}
.timeline-step.visible::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.timeline-num{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-bottom:8px}
.timeline-step h3{font-size:18px;margin-bottom:6px}
.timeline-step p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:46ch}
@media(min-width:768px){.timeline-step h3{font-size:20px}.timeline-step p{font-size:16px}}

/* ─── AUDIENCE ─── */
.audience-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.audience-item{font-size:clamp(16px,2vw,20px);font-weight:500;letter-spacing:-0.01em;color:var(--ink);padding:12px 22px;background:var(--surface);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.07),0 1px 2px rgba(14,21,48,0.03)}

/* ─── LABS ─── */
.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-secondary .btn-icon{background:var(--accent-soft);color:var(--accent)}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.labs-core{display:grid;grid-template-columns:1fr;gap:40px;padding:32px 24px 36px;background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,var(--surface) 55%)}
@media(min-width:768px){.labs-core{padding:56px 56px 60px}}
@media(min-width:1024px){.labs-core{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}}
.labs-intro .lede{margin-bottom:32px}
.labs-subtitle{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-bottom:14px}
.labs-stages{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px}
.labs-stages li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink)}
.labs-stages li:not(:last-child)::after{content:'';width:18px;height:1px;background:var(--line-strong)}
.labs-areas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.labs-areas li{padding:8px 14px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.08);font-size:14px;color:var(--ink-2)}
.labs-article{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:18px 20px;border-radius:var(--radius-input);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.08);transition:box-shadow 400ms var(--ease-spring),transform 400ms var(--ease-spring)}
.labs-article:hover{box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-1px)}
.labs-article-meta{grid-column:1;font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.labs-article-title{grid-column:1;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.labs-article .icon{grid-column:2;grid-row:1 / 3;font-size:20px;color:var(--ink-2);transition:transform 400ms var(--ease-spring),color 400ms var(--ease-spring)}
.labs-article:hover .icon{transform:translate(2px,-2px);color:var(--accent)}

/* ─── QUESTIONS ─── */
.faq-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.faq-grid{grid-template-columns:1fr 1fr;gap:48px 72px}}
.faq-item{padding-top:28px;border-top:1px solid var(--line-strong)}
.faq-item h3{font-size:19px;letter-spacing:-0.015em;margin-bottom:10px}
.faq-item p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:48ch}

/* ─── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:960px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}}
.call-title{margin-top:36px;font-size:16px;letter-spacing:-0.01em}
.call-steps{list-style:none;counter-reset:step;display:grid;gap:14px;margin-top:16px}
.call-steps li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:center;font-size:16px;line-height:1.45;color:var(--ink)}
.call-steps li::before{counter-increment:step;content:counter(step);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--font-mono);font-size:13px;font-weight:500}
.contact-details{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
@media(min-width:600px){.contact-details{grid-template-columns:auto auto;justify-content:start;gap:48px}}
.contact-detail-label{display:block;margin-bottom:4px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.contact-detail a{font-size:18px;font-weight:500;letter-spacing:-0.01em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color 400ms var(--ease-spring)}
.contact-detail a:hover{color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:20px;padding:24px}
@media(min-width:768px){.contact-form{padding:36px}}
.form-row{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:600px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.form-group label{font-size:14px;font-weight:500;color:var(--ink)}
.form-group .optional{font-weight:400;color:var(--ink-3)}
.form-group input,.form-group textarea{width:100%;min-width:0;padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-input);font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);outline:none;transition:border-color 400ms var(--ease-spring),box-shadow 400ms var(--ease-spring),background-color 400ms var(--ease-spring)}
.form-group input:hover,.form-group textarea:hover{border-color:rgba(14,21,48,0.28)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px rgba(62,58,168,0.14)}
.form-group [aria-invalid="true"]{border-color:var(--danger)}
.form-group [aria-invalid="true"]:focus{border-color:var(--danger);box-shadow:0 0 0 4px rgba(178,58,48,0.14)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--ink-3);opacity:1}
.form-group textarea{resize:vertical;min-height:120px}
.field-error{font-size:13px;color:var(--danger)}
.field-error:empty{display:none}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.form-actions .btn{width:100%;justify-content:space-between}
@media(min-width:600px){.form-actions .btn{width:auto;justify-content:center}}
.form-note{font-size:13px;color:var(--ink-3)}
.form-status{font-size:14px;padding:12px 16px;border-radius:var(--radius-input);display:none}
.form-status.success{display:block;background:rgba(46,117,80,0.08);color:var(--success);border:1px solid rgba(46,117,80,0.2)}
.form-status.error{display:block;background:rgba(178,58,48,0.07);color:var(--danger);border:1px solid rgba(178,58,48,0.2)}

/* ─── FOOTER ─── */
footer{padding:40px 0 56px;border-top:1px solid var(--line)}
footer .container{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
@media(min-width:768px){footer .container{flex-direction:row;flex-wrap:wrap;justify-content:space-between;text-align:left}}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand svg{height:22px;width:auto}
.footer-brand-text{font-weight:700;font-size:14px;color:var(--ink)}
.footer-tagline{font-size:13px;color:var(--ink-3);margin-top:2px}
.footer-social{display:flex;gap:8px;align-items:center}
.footer-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink-2);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.08);transition:color 400ms var(--ease-spring),box-shadow 400ms var(--ease-spring),transform 400ms var(--ease-spring)}
.footer-social a{width:auto;height:auto;padding:8px 14px;border-radius:var(--radius-pill);font-size:14px}
.footer-social a:hover{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-1px)}
.footer-social a:active{transform:scale(0.96)}
.footer-links{display:flex;gap:4px 20px;flex-wrap:wrap;justify-content:center}
.footer-links a{font-size:14px;color:var(--ink-2);padding:4px 0;transition:color 400ms var(--ease-spring)}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:13px;color:var(--ink-3);width:100%;font-variant-numeric:tabular-nums}
@media(min-width:768px){.footer-copy{width:auto}}

/* ─── INNER PAGES ─── */
.nav-links a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:120px 0 24px}
@media(min-width:768px){.page-hero{padding:156px 0 32px}}
.page-hero::before{content:'';position:absolute;z-index:-1;width:900px;height:900px;right:-360px;top:-420px;background:radial-gradient(closest-side,rgba(62,58,168,0.1),rgba(62,58,168,0) 72%);pointer-events:none}
.page-hero h1{max-width:20em;font-size:clamp(34px,4.6vw,56px);letter-spacing:-0.04em;line-height:1.05}
.page-hero h1 .line{display:block}
.page-hero h1 .line:last-child:not(:first-child){color:var(--ink-3)}
.page-hero .hero-sub{max-width:38rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:28px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.breadcrumb li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--line-strong)}
.breadcrumb a{transition:color 400ms var(--ease-spring)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--ink-2)}
.page-meta{margin-top:16px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.prose{display:grid;gap:18px;max-width:44rem}
.prose p{font-size:17px;line-height:1.7;color:var(--ink-2)}
@media(min-width:768px){.prose p{font-size:18px}}
.feature-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:640px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{padding:26px 24px 30px;background:var(--surface);border-radius:var(--radius-core);box-shadow:inset 0 1px 1px rgba(255,255,255,0.9),0 1px 2px rgba(14,21,48,0.04)}
.feature-card h3{font-size:18px;letter-spacing:-0.015em;margin-bottom:8px}
.feature-card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.timeline-step .timeline-out{margin-top:10px;font-size:14px;color:var(--ink)}
.timeline-out span{margin-right:8px;font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.link-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:768px){.link-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.link-grid{grid-template-columns:repeat(3,1fr)}}
.link-card{display:grid;grid-template-columns:1fr auto;gap:6px 16px;height:100%;padding:22px 22px 24px;border-radius:var(--radius-core);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.08);transition:box-shadow 400ms var(--ease-spring),transform 400ms var(--ease-spring)}
.link-card:hover{box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-1px)}
.link-card-title{grid-column:1;font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;color:var(--ink)}
.link-card-desc{grid-column:1;font-size:15px;line-height:1.55;color:var(--ink-2)}
.link-card .icon{grid-column:2;grid-row:1;font-size:20px;color:var(--ink-3);transition:transform 400ms var(--ease-spring),color 400ms var(--ease-spring)}
.link-card:hover .icon{transform:translate(2px,-2px);color:var(--accent)}
.compare-wrap .bezel-core{overflow-x:auto;padding:8px 8px 12px}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;vertical-align:top}
.compare-table thead th{font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-strong)}
.compare-table thead th:nth-child(2){color:var(--accent)}
.compare-table tbody th{font-weight:500;color:var(--ink);width:26%}
.compare-table td{color:var(--ink-2)}
.compare-table tbody tr + tr > *{border-top:1px dashed var(--line-strong)}
.cta-band .bezel-core{display:grid;gap:28px;padding:32px 24px 34px;background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,var(--surface) 55%)}
@media(min-width:768px){.cta-band .bezel-core{padding:52px 56px}}
@media(min-width:1024px){.cta-band .bezel-core{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:20px 56px}}
.section .cta-band h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:14px}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@media(min-width:1024px){.cta-actions{justify-content:flex-end}}
.systems-list a,.audience-item a,.more-link{transition:color 400ms var(--ease-spring)}
.systems-list a:hover{text-decoration:underline;text-underline-offset:0.2em}
.audience-item a:hover,.more-link:hover{color:var(--accent)}
.more-link{display:inline-block;margin-top:40px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-strong)}

/* ─── SERIF LAYER (Labs) ─── */
/* Geist carries information; Newsreader carries ideas. h1 and h2 only -
   h3 and below stay sans so component labels match the parent exactly.
   Sits after the ported rules so it wins at equal specificity. */
h1,h2{font-family:var(--font-serif);font-weight:380;letter-spacing:-0.03em}
h1 em,h2 em{font-style:italic;font-weight:340}
.section h2{letter-spacing:-0.03em}
.hero h1,.page-hero h1{font-weight:380;letter-spacing:-0.03em}
.statement-title{font-family:var(--font-serif);font-weight:380}
.statement-title em{font-style:italic}

/* ─── NAV AND MENU (Labs) ─── */
.nav-logo-text .labs{color:var(--accent)}
.menu-links .mono{display:block;margin-bottom:2px;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent)}
/* The open menu's column measures 824.1px: 112px top padding, 570.1px of
   links, the CTA's 40px margin and 54px height, and 48px bottom padding.
   .menu is position:fixed inset:0 and html.menu-open sets overflow:hidden, so
   anything past the viewport cannot be reached at all. Measured at 390px wide:
   the CTA's bottom sits 9.9px INSIDE a 844px viewport, 42.1px below a 740px
   one, 78.6px below 667px; and at 568px the centring pushes the first link to
   top:-16.1px, off the top edge as well. Real phone viewports are shorter than
   the device again once the browser chrome shows, so this is most phones.
   safe centring keeps the design's centred column whenever it fits and falls
   back to flex-start the moment it does not, so nothing is pushed off the top;
   overflow-y then makes the remainder reachable.
   Specificity (0,1,0) - identical to the ported .menu at :145 - winning on
   source order alone. justify-content is the only ported declaration
   overridden; overflow-y and overscroll-behavior are additions.
   Note for the QA harness: per CSS overflow, a non-visible overflow-y makes
   overflow-x compute to auto, so tools/qa.py's exempt() will skip .menu's
   descendants from the element-level 390px check. Nothing inside the menu
   overflows today - measured - and .menu is fixed, so it never contributed to
   the page-level scrollWidth assertion either way. */
.menu{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain}

/* ─── NAV BAND (Labs) ─── */
/* The home page's nav. The ported rules flip to a max-content desktop pill
   at 860px; with seven links and the CTA in one run that pill measured
   ~1009px of evenly spaced items with no grouping, crowding the CTA and
   running off the right edge just above the old 1073.98px bound. The home
   bar is now organised in three zones on a full-width bar aligned to the
   page container: brand left, links centred, the single CTA right.
   - Contact is dropped from the desktop links: the CTA beside it goes to
     the same #contact, so it was a duplicate (.nav-link--dup). It stays in
     the markup, in the mobile menu and in the footer.
   - .nav-sep is a hairline between the four in-page sections and the two
     standalone pages (Product, Research), so the run reads as two groups.
   Between 860px and the desktop bound the mobile layout holds - brand, CTA,
   hamburger - restoring the values the base rules carry below 860px. The
   bound is the measured minimum of the grid (see the comment in
   assets/site.js, DESKTOP_NAV; change the two together). Every selector is
   scoped by the --menu modifiers, so the eight inner pages, which carry
   .nav-links--always and a short pill, are untouched. */
.nav-sep{display:none}
@media(min-width:860px) and (max-width:1151.98px){
  .nav-inner--menu{width:auto;gap:12px}
  .nav-logo--menu{margin-right:auto}
  .nav-links{display:none}
  .nav-toggle{display:inline-block}
  .menu{display:flex}
}
@media(min-width:1152px){
  .nav-inner--menu{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);width:auto;max-width:calc(var(--max-w) - 24px);gap:24px;padding:6px 6px 6px 20px}
  .nav-logo--menu{margin-right:0;justify-self:start}
  .nav-inner--menu .nav-links{align-items:center;gap:4px}
  .nav-inner--menu .nav-links a{padding:8px 12px}
  .nav-inner--menu .nav-link--dup{display:none}
  .nav-inner--menu .nav-sep{display:block;width:1px;height:16px;margin:0 8px;background:var(--line-strong)}
  .nav-inner--menu .nav-cta{justify-self:end}
}

/* ─── NIGHT BAND (Labs) ─── */
/* The contact section is the site's only dark surface. The parent has no
   equivalent, so these rules are Labs-authored rather than ported. */
.section--night{background:var(--night);color:var(--on-night-2)}
.section--night h2,.section--night h3,.section--night strong{color:var(--on-night)}
.section--night .lede,.section--night p{color:var(--on-night-2)}
.section--night .pill-label{background:rgba(255,255,255,0.07);color:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}
.section--night .bezel{background:rgba(255,255,255,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.section--night .bezel-core{background:rgba(255,255,255,0.03);box-shadow:inset 0 1px 1px rgba(255,255,255,0.06)}
.section--night .contact-details{border-top-color:rgba(255,255,255,0.12)}
.section--night .contact-detail-label{color:var(--on-night-2)}
.section--night .contact-detail a{color:var(--on-night);overflow-wrap:anywhere}
.section--night .contact-detail a:hover{color:var(--accent-tint)}
.section--night .call-steps li{color:var(--on-night)}
.section--night .call-steps li::before{background:rgba(255,255,255,0.10);color:var(--accent-tint)}
.section--night .form-group label{color:var(--on-night)}
.section--night .form-group .optional{color:var(--on-night-2)}
.section--night .form-group input,.section--night .form-group textarea{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.16);color:var(--on-night)}
.section--night .form-group input::placeholder,.section--night .form-group textarea::placeholder{color:var(--on-night-2)}
.section--night .form-group input:hover,.section--night .form-group textarea:hover{border-color:rgba(255,255,255,0.3)}
.section--night .form-group input:focus,.section--night .form-group textarea:focus{border-color:var(--accent-tint);background:rgba(255,255,255,0.07);box-shadow:0 0 0 4px rgba(201,198,242,0.18)}
.section--night .form-note{color:var(--on-night-2)}
.section--night .btn-primary{background:var(--on-night);color:var(--night);box-shadow:0 16px 32px -16px rgba(0,0,0,0.6)}
.section--night .btn-primary .btn-icon{background:rgba(12,14,19,0.14)}
.section--night .btn-primary:hover{background:#fff}
.section--night :focus-visible{outline-color:var(--accent-tint)}
.section--night .form-success .mono{color:var(--accent-tint)}

/* Status pill: the ported rule hides .form-status until success or error,
   so the script's Sending message needs its own visible state. */
.form-status.pending{display:block;background:rgba(14,21,48,0.05);color:var(--ink-2)}
.section--night .form-status.pending{background:rgba(255,255,255,0.07);color:var(--on-night-2)}

/* ─── TINT BAND (Labs) ─── */
/* The old site alternated tinted sections; the parent has no equivalent. */
.section--tint{background:linear-gradient(180deg,var(--bg) 0%,#EDEFF4 50%,var(--bg) 100%)}

/* ─── FOOTER WORDMARK (Labs) ─── */
/* Oversized lockup under the footer columns. No parent equivalent. */
.footer-mark{font-family:var(--font-serif);font-weight:380;font-size:clamp(44px,14vw,180px);line-height:0.9;letter-spacing:-0.04em;color:var(--line);text-align:center;user-select:none;overflow:hidden;white-space:nowrap}
.footer-col-title{display:block;width:100%;margin-bottom:8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}

/* ─── HERO PILL SEPARATOR (Labs) ─── */
.pill-label span + span::before{content:'·';margin:0 8px;opacity:0.45}
.pill-label b{margin-right:8px;font-weight:500}
/* The hero pill's three runs measure 420.03px on one line - 158.41 + 59.22 +
   174.41 of content plus the pill's own 28px of padding - so they need a
   460.03px viewport to fit a container with 20px gutters. Below that the
   ported .pill-label carries no flex-wrap, so the three flex items shrink
   instead and each run breaks INSIDE itself, staggered by align-items:center.
   flex-wrap makes the pill break BETWEEN runs: measured as exactly two lines
   at every width from 320 to 459 - runs 1 and 2, then run 3.
   The separator is a ::before on the FOLLOWING run, so a wrapped run carries
   it to the head of the new line, where it separates nothing and reads as a
   stray bullet. It is switched off here and the runs are spaced with trailing
   padding instead, which - unlike margin-left or column-gap - is not applied
   at the start of a wrapped line, so line 2 stays flush with line 1.
   Specificity: .pill-label is (0,1,0), identical to the ported rule at :101,
   and wins on source order alone; flex-wrap is an addition, not an override.
   .pill-label span is (0,1,1) and .pill-label span + span::before is (0,1,3) -
   no ported rule reaches inside .pill-label, so neither overrides anything
   ported; the ::before rule simply re-declares the Labs rule three lines above
   at identical specificity, later in source.
   Only the hero pill has <span> children. The seven section eyebrows and the
   404 pill are <b> plus a text node, and the seven inner-page pills a single
   text node, so neither rule matches them and flex-wrap finds nothing to wrap. */
@media(max-width:459.98px){
  .pill-label{flex-wrap:wrap}
  .pill-label span{padding-right:14px}
  .pill-label span + span::before{content:none}
  /* Runs 1 and 2 always share line 1 (measured 320-459), so the separator
     between them is kept - without it "studio India" read as one phrase -
     and only run 3, the one that wraps, loses it. 158.41 + 23 + 59.22 + 28
     of padding is 268.63px, inside the 280px column at 320. The two-line
     block takes the input radius: a 999px radius on two lines pinches the
     text against the curve. */
  .hero .pill-label{row-gap:2px;border-radius:var(--radius-input)}
  .hero .pill-label span:first-child{padding-right:0}
  .hero .pill-label span:nth-child(2)::before{content:'·'}
}

/* ─── DOT FUNNEL (Labs) ─── */
/* data-n dots are laid down and data-keep survive. The survivors turn
   accent and the rest fade, so the figure reads as a filter. */
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:opacity 700ms var(--ease-spring),background-color 700ms var(--ease-spring),transform 700ms var(--ease-spring);transition-delay:calc(var(--d,0) * 35ms)}
.dots.resolved .dot{opacity:0.12;transform:scale(0.7)}
.dots.resolved .dot.keep{opacity:1;transform:none;background:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .dots .dot{opacity:0.12;transform:scale(0.7)}
  .dots .dot.keep{opacity:1;transform:none;background:var(--accent)}
}

.funnel-core{display:grid;gap:20px;padding:28px 26px 30px;background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,var(--surface) 58%)}
@media(min-width:768px){.funnel-core{padding:36px 34px 38px}}

/* The [hidden] attribute loses to .contact-form's display:flex, so the
   swap to the success panel needs these explicitly. */
.contact-form[hidden],.form-success[hidden]{display:none}
.form-success{display:grid;gap:10px;padding:24px}
@media(min-width:768px){.form-success{padding:36px}}
.form-success .mono{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent)}
.form-status a{color:inherit;text-decoration:underline}

/* ─── TERRITORIES AND TOOLKIT (Labs) ─── */
/* Territory names stay h3 for the outline. Placed after the ported region so
   they beat .systems-group h3 (equal specificity, later source wins). */
.systems-list h3{font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.feature-label{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent);margin-bottom:12px}
.feature-list{list-style:none;display:grid;gap:6px}
.feature-list li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.cta-band-title{font-family:var(--font-serif);font-weight:380;font-size:clamp(22px,2.6vw,32px);letter-spacing:-0.03em;line-height:1.15;color:var(--ink);margin-bottom:12px}

.feature-grid--4{grid-template-columns:1fr}
@media(min-width:640px){.feature-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feature-grid--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.cta-band--stacked .bezel-core{grid-template-columns:1fr}}
.cta-band--stacked{margin-top:24px}

/* ─── ORIGIN AND NOTES (Labs) ─── */
.labs-stages .mono{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-right:6px;min-width:22px}
.labs-stages .is-lab .name{color:var(--accent);font-weight:600}
.labs-stages .is-lab .mono{color:var(--accent)}
.labs-articles{list-style:none;display:grid;gap:10px}
.labs-article{grid-template-rows:auto auto auto;padding:20px 22px 22px;align-items:start}
.labs-article-meta{display:flex;gap:12px;align-items:baseline}
.labs-article-title{font-family:var(--font-sans);font-size:17px;letter-spacing:-0.01em}
.labs-article-title a{color:var(--ink)}
.labs-article:hover .labs-article-title a{color:var(--accent)}
.labs-article-sum{grid-column:1;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.labs-article .icon{grid-row:1 / 4;color:var(--ink-3)}
.labs-article:hover .icon{color:var(--accent)}
.contact-grid p + p{margin-top:16px}
.more-link .icon{margin-left:8px}
.labs-intro .btn-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px}
.labs-stages{flex-direction:column;align-items:stretch;gap:0;margin-bottom:0}
.labs-stages li{padding:14px 0;border-bottom:1px solid var(--line)}
.labs-stages li:first-child{padding-top:0}
.labs-stages li:last-child{border-bottom:0}
.labs-stages li:not(:last-child)::after{content:none}

/* ─── REVEAL (Labs) ─── */
.js :is(.reveal,.systems-group,.timeline-step,.audience-item,.faq-item,.feature-card,.link-card,.labs-article){opacity:0;translate:0 40px;filter:blur(8px);transition:opacity 900ms var(--ease-spring),translate 900ms var(--ease-spring),filter 900ms var(--ease-spring);transition-delay:calc(var(--d,0) * 80ms)}
.js :is(.reveal,.systems-group,.timeline-step,.audience-item,.faq-item,.feature-card,.link-card,.labs-article).visible{opacity:1;translate:none;filter:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;transition-delay:0ms!important}
  .js :is(.reveal,.systems-group,.timeline-step,.audience-item,.faq-item,.feature-card,.link-card,.labs-article){opacity:1;translate:none;filter:none}
  .timeline::after{display:block;animation:none!important;transform:none}
}

/* ─── JOURNAL (Labs) ─── */
/* Folded in from the deleted assets/journal.css. The notes keep the serif
   reading voice (Newsreader); everything around them takes the parent's
   shell. Placed last so it wins ported rules by source order alone. */
/* Breadcrumb: the markup carries a literal "/" span, so the ported
   pseudo-element separator is switched off rather than doubled. */
.breadcrumb li:not(:last-child)::after{content:none}
.breadcrumb li > span[aria-hidden="true"]{margin-left:8px;color:var(--line-strong)}

/* Nav on pages with three short links and no mobile menu */
.nav-links--always{display:flex;gap:2px}
@media(max-width:639px){
  .nav-links--always .hide-sm{display:none}
  .nav-links--always a{padding:9px 10px}
}
/* The wordmark is dropped only where the links would crowd it. Measured
   .nav-inner max-content with the wordmark showing: 369.83px on the eight
   inner pages, which needs a 401.83px viewport once .nav keeps its 16px
   gutter each side - so at 320, 360 and 390 the three links shrink and crowd.
   The home page's pill holds the brand glyph, the wordmark and the hamburger
   only (.nav-cta is display:none below 600px): 217.63px, inside 320px with
   70.37px to spare. Hiding the wordmark there left a glyph and a toggle with
   a void between them, which is the reported defect, so the rule is scoped
   off the home page - its .nav-logo carries the --menu modifier Task 14 added.
   Specificity (0,3,0): .nav-logo and :not(.nav-logo--menu) are two classes
   (:not() takes its argument's specificity), .nav-logo-text a third; one
   element, no ids. It outranks the ported .nav-logo-text at :127, which is
   (0,1,0), but overrides nothing in it - that rule sets font-weight,
   font-size, color and letter-spacing and this one sets position, width,
   height, margin, overflow, clip and white-space. No ported rule declares any
   of those on .nav-logo-text, so this wins no cascade contest against the
   ported layer; it is the same Labs rule, narrowed. */
@media(max-width:419px){
  .nav-logo:not(.nav-logo--menu) .nav-logo-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* Mono labels inside journal blocks */
.article-meta .mono,.brief .mono,.about-lab .mono,.related .mono{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0;line-height:1.4}

/* Reading column. minmax(0,1fr): a wide table scrolls in its own box
   and never widens the page. */
.prose{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:44rem}
.prose p{font-family:var(--font-serif);font-size:18px;line-height:1.7;color:var(--ink-2)}
.prose > p:first-child{font-size:clamp(21px,2.2vw,24px);line-height:1.5;color:var(--ink)}
.prose h2{margin-top:18px;font-size:clamp(26px,3vw,34px);line-height:1.12}
.prose h3{font-size:19px;letter-spacing:-0.015em;line-height:1.3}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:0.06em;text-underline-offset:0.16em;text-decoration-color:rgba(62,58,168,0.35);transition:text-decoration-color 400ms var(--ease-spring)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{display:grid;gap:10px;padding-left:0;list-style:none}
.prose li{font-family:var(--font-serif);font-size:18px;line-height:1.65;color:var(--ink-2);padding-left:26px;position:relative}
.prose ul li::before{content:'';position:absolute;left:8px;top:0.7em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.prose ol{counter-reset:item}
.prose ol li{counter-increment:item}
.prose ol li::before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:0.45em;font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.prose blockquote{padding-left:22px;border-left:2px solid var(--accent-tint);font-family:var(--font-serif);font-size:20px;line-height:1.6;color:var(--ink)}
.prose blockquote p{font-size:inherit;line-height:inherit;color:inherit}
.prose blockquote footer,.prose blockquote cite{display:block;margin-top:10px;font-family:var(--font-sans);font-style:normal;font-size:14px;color:var(--ink-3)}
.prose cite{font-style:normal}

/* In brief: the quotable takeaways */
.brief-core{padding:24px 26px 28px;background:var(--accent-soft)}
.brief .mono{margin-bottom:14px;color:var(--accent)}
.brief ul,.prose .brief ul{display:grid;gap:12px;list-style:none;padding:0}
.brief li,.prose .brief li{font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--ink);padding-left:22px}
.brief li::before,.prose .brief ul li::before{left:4px;top:0.6em}

/* ─── NOTE TABLES (Labs) ─── */
/* The notes use the parent's .compare-wrap scroll bezel and .compare-table.
   Only two things the ported region has no equivalent for are added: a
   caption, which the notes carry and .compare-table styles nothing for, and
   one wider minimum for the four-column comparison. Extensions, not
   overrides - neither beats a ported declaration. */
.compare-table caption{caption-side:top;text-align:left;padding:4px 10px 12px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.compare-table--wide{min-width:760px}

/* Closing blocks: questions, sources, who wrote the note */
.prose > .faq,.prose > .sources,.prose > .about-lab{margin-top:24px}
.prose .faq h2,.prose .sources h2{margin-top:0;margin-bottom:18px}
.sources li,.sources a{overflow-wrap:anywhere}
.prose .sources ol{gap:0}
.prose .sources li{padding-top:12px;padding-bottom:12px;font-family:var(--font-sans);font-size:14px;line-height:1.55}
.prose .sources li::before{top:calc(12px + 0.2em)}
.about-lab{padding:28px 26px 30px;background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,var(--surface) 55%);border-radius:var(--radius-core)}
.about-lab .mono{margin-bottom:12px;color:var(--ink-3)}
.prose .about-lab p:not(.mono){font-size:16px;line-height:1.6}

/* Article shell */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:96px}
@media(min-width:1024px){.article-grid{grid-template-columns:minmax(0,5fr) minmax(0,12fr);gap:64px;align-items:start}}
@media(min-width:1024px){.article-meta{position:sticky;top:128px}}
.article-meta dl{display:grid;gap:16px}
.article-meta dt{margin-bottom:2px;color:var(--ink-3)}
.article-meta dd{font-size:15px;color:var(--ink)}
.article-meta dd a{color:var(--accent)}
.sample-note{margin-top:20px;padding:2px 0 2px 16px;border-left:2px solid var(--accent-tint);font-size:14px;line-height:1.55;color:var(--ink-3);max-width:32ch}
.sample-note b{font-weight:500;color:var(--ink-2)}

/* Research index: each entry is a link card whose title link covers the card */
.entries-wrap{padding-top:40px;padding-bottom:88px}
@media(min-width:768px){.entries-wrap{padding-top:56px;padding-bottom:120px}}
.entries{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:768px){.entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
.entry{position:relative;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:26px 26px 28px}
.entry-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.entry-meta .tag{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3)}
.entry-meta .tag::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.entry-title{font-family:var(--font-serif);font-weight:380;font-size:clamp(22px,2.2vw,27px);letter-spacing:-0.025em;line-height:1.15}
.entry-title a::after{content:'';position:absolute;inset:0;border-radius:var(--radius-core)}
.entry-title a:focus-visible{outline:none}
.entry:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.entry-read{display:inline-flex;align-items:center;gap:8px;grid-column:1;margin-top:6px;font-size:14px;font-weight:500;color:var(--accent)}
.entry-read .icon{font-size:1em;color:currentColor}
.entry:hover .icon{transform:none}

/* Related, closing CTA */
.related{padding-bottom:96px}
.related-inner{display:grid;gap:18px;padding:32px 26px 34px;background:radial-gradient(120% 90% at 100% 0%,var(--accent-soft) 0%,var(--surface) 55%);border-radius:var(--radius-core)}
@media(min-width:768px){.related-inner{padding:48px 48px 52px}}
.related h2.mono{color:var(--ink-3)}
.related ul{list-style:none;display:grid;gap:10px}
.related a{display:grid;gap:4px;padding:18px 20px;background:var(--surface);border-radius:var(--radius-input);box-shadow:inset 0 0 0 1px rgba(14,21,48,0.08);transition:box-shadow 400ms var(--ease-spring),transform 400ms var(--ease-spring)}
.related a:hover{box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-1px)}
.related a .mono{color:var(--accent)}
.related .t{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.cta-inner{display:grid;gap:4px;padding:32px 24px 36px}
@media(min-width:768px){.cta-inner{padding:52px 56px 56px}}
.cta-inner > .pill-label{justify-self:start}
.cta-inner > div p:not(.pill-label){max-width:52ch;margin-bottom:28px}

/* ─── 404 (Labs) ─── */
/* The error page's only inline link. Ported a{color:inherit} is (0,0,1);
   this is (0,1,1), so it wins on specificity, not just source order. */
.hero-sub a{color:var(--accent);text-decoration:underline;text-decoration-thickness:0.06em;text-underline-offset:0.16em;text-decoration-color:rgba(62,58,168,0.35);transition:text-decoration-color 400ms var(--ease-spring)}
.hero-sub a:hover{text-decoration-color:var(--accent)}

/* ─── 404 LAYOUT (Labs) ─── */
/* The original error page centred its content in the viewport: body was a
   flex box with align-items:center and main carried padding-block:64px. It
   centred with no footer present, so centring was that page's design rather
   than a side effect of having chrome.
   The centring container is the HERO, not <main>, and that choice is load
   bearing. Ported .page-hero::before (:314) is the decorative radial glow:
   900x900, anchored top:-420px right:-360px, and clipped by the hero's own
   ported overflow:hidden (:312). Centre on <main> and the hero starts
   mid-viewport, which drops that clip edge into open background - a hard
   horizontal line across the right third, measured as a 16/255 step at
   1440x900. Every other page starts .page-hero at the document top, where the
   clip edge is hidden above the viewport. Centring on the hero puts it back
   there, so the wash stays as designed. Overriding the hero's overflow was the
   alternative and is wrong twice over: it overrides a ported declaration, and
   a 900px glow offset right would escape and threaten the 390px overflow gate.
   min-height uses svh - the SMALL viewport height - so the block is centred
   against the viewport as it is with a mobile browser's chrome showing. vh
   overshoots that by the toolbar height and pushes the button under the fold;
   dvh re-centres the block every time the URL bar collapses. It stays a
   min-height, so taller content at 390px simply grows past it.
   Grid, not flex: the default justify-items:stretch keeps .container full
   width, so ported .container (:76) needs no width patch and no (0,2,0)
   selector has to reach past it.
   .error-hero is (0,1,0) - EQUAL to ported .page-hero (0,1,0), never greater -
   and wins only by sitting later in the source; media queries add no
   specificity, so this one rule also overrides the min-width:768px branch at
   :313. min-height, display and align-content have no counterpart on
   .page-hero, so they are additions; only padding-block overrides, and the
   longhand leaves the ported padding-inline:0 standing. The ported 156px top /
   32px bottom is what a page with a nav above it needs; here it would offset
   the centred block by 124px. 64px is symmetric - as the original was. */
.error-hero{min-height:100svh;display:grid;align-content:center;padding-block:64px}