/* ===================== Design tokens ===================== */
:root{
  --bg:#FBFBF9;
  --white:#FFFFFF;
  --ink:#0B1A2B;
  --navy:#0E2A4A;
  --navy-deep:#0B1A2B;
  --navy-hover:#16385F;
  --border:#E6E7E4;
  --border-soft:#EFF1EE;
  --border-mid:#D9DDD8;
  --border-pill:#E0E3DF;
  --muted:#52626D;
  --muted-2:#43535F;
  --muted-3:#8A968F;
  --muted-4:#2C3B47;
  --faint:#B0B8B1;
  --teal:#16BFA0;
  --teal-hover:#35D3B6;
  --teal-ink:#062B24;
  --teal-deep:#0C6B58;
  --blue:#00B4FF;
  --blue-link:#0090D6;
  --panel:#F1F4F0;
  --panel-2:#FBFBF9;
  --mint:#F4FCF9;
  --mint-border:#B9E4DA;
  --hitl:#E8A13D;        /* human-in-the-loop amber */
  --hitl-soft:#FCF3E4;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Schibsted Grotesk", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--blue-link); }
::selection{ background:#BFEAFF; }

img{ max-width:100%; }

.mono{ font-family:"IBM Plex Mono", monospace; }

.wrap{ max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }

section[id]{ scroll-margin-top:90px; }

/* ===================== Utilities ===================== */
/* Justified body text (Prashant 2026-08-27): multi-line paragraphs
   justify with hyphenation; headings, list items and short captions
   don't. Inside centred sections the last line re-centres so the
   composition stays symmetric. */
.prose, .lede, .hero-sub,
.split p, .card p, .mode-card p, .panel p,
.trust-item p, .process-body p, .founder p, .mission-box p,
.booking-fallback p{
  text-align:justify;
  -webkit-hyphens:auto;
  hyphens:auto;
}
.section-center .prose, .page-hero .lede, .hero-sub, .contact-head .prose{
  text-align-last:center;
}

/* Centred section intros: headings/subs centre, components re-left */
.section-center{ text-align:center; }
.section-center .section-sub{ margin-left:auto; margin-right:auto; }
.section-center :is(.card, .mode-card, .panel, .depute-col, .check-list,
  .numbered-list, .results-panel, .step-item, .split, .founder){ text-align:left; }
.section-center .flow-tabs{ justify-content:center; }
.section-center .assure-strip{ justify-content:center; }

.prose{ font-size:17px; line-height:1.65; color:var(--muted-2); max-width:46em; margin:0 0 16px; }
.prose:last-child{ margin-bottom:0; }
.prose.small{ font-size:15px; color:var(--muted); }
.section-sub{ margin:16px 0 40px; }
.mono-label{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted-3);
}
.link-arrow{ font-size:15px; font-weight:600; color:var(--blue-link); }
.link-arrow:hover{ color:var(--navy); }
.section-foot{ margin-top:36px; }
.mb-lg{ margin-bottom:44px; }
.mt-md{ margin-top:32px; }
.h2-md{ font-size:30px; }
.hw-narrow{ max-width:22em; }
.hidden{ display:none !important; }

/* ===================== Layout shell ===================== */
.page-shell{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1; }

/* ===================== Header ===================== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,249,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding-top:12px; padding-bottom:12px;
}
.logo-link{ display:flex; align-items:center; gap:10px; flex:none; }
.logo-link img{ height:84px; width:auto; display:block; }

nav.main-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav.main-nav a.nav-link{
  padding:8px 12px; font-size:14.5px; font-weight:500; color:var(--muted); border-radius:6px;
}
nav.main-nav a.nav-link:hover{ background:#EFF1EE; color:var(--muted); }
nav.main-nav a.nav-link.active{ color:var(--navy); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-family:inherit; cursor:pointer; border-radius:8px;
  text-align:center; border:1px solid transparent;
}
.btn-primary{ padding:15px 26px; background:var(--navy); color:#fff; font-size:16px; }
.btn-primary:hover{ background:var(--navy-hover); color:#fff; }
.btn-secondary{ padding:15px 22px; font-size:16px; color:var(--navy); border-color:var(--border-mid); background:#fff; }
.btn-secondary:hover{ border-color:var(--navy); color:var(--navy); }
.btn-teal{ padding:15px 28px; background:var(--teal); color:var(--teal-ink); font-size:16px; }
.btn-teal:hover{ background:var(--teal-hover); color:var(--teal-ink); }
.btn-nav{ margin-left:10px; padding:10px 18px; background:var(--navy); color:#fff; font-size:14.5px; font-weight:600; border-radius:7px; }
.btn-nav:hover{ background:var(--navy-hover); color:#fff; }

.mobile-toggle{ display:none; background:none; border:1px solid var(--border-mid); border-radius:7px; padding:8px 10px; cursor:pointer; }

/* ===================== Sections ===================== */
.section-pad{ padding:88px 32px; }
.section-pad-sm{ padding:72px 32px 64px; }
.border-b{ border-bottom:1px solid var(--border); }
.border-t{ border-top:1px solid var(--border); }
.bg-white{ background:var(--white); }
.bg-navy{ background:var(--navy); color:#fff; }

.eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:18px;
}

h1{ font-size:50px; line-height:1.08; letter-spacing:-0.03em; font-weight:700; margin:0 0 20px; }
h2{ font-size:38px; line-height:1.1; letter-spacing:-0.025em; font-weight:700; margin:0; }
h3{ font-size:20px; font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

/* ===================== Hero (home) ===================== */
.hero{ background:linear-gradient(180deg,#FFFFFF 0%, var(--bg) 100%); border-bottom:1px solid var(--border); }
.hero-center{ padding:104px 32px 96px; text-align:center; }
/* Exactly two lines on every device: each sentence is a non-wrapping
   block, and the type size tracks the viewport so the longer line
   ("Delegate the busywork.", ~12.2em) always fits inside the padding. */
.hero-title{ margin-bottom:24px; font-size:clamp(20px, calc((100vw - 64px) / 12.4), 62px); }
.hero-title span{ display:block; white-space:nowrap; }
.hero-sub{ font-size:20px; line-height:1.55; color:var(--muted-2); margin:0 auto 36px; max-width:36em; }
.hero-ctas{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ===================== Cards / grids ===================== */
.section-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.section-head-row .section-sub{ margin-bottom:0; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.card{ border:1px solid var(--border); border-radius:14px; background:#fff; padding:30px; display:flex; flex-direction:column; gap:12px; }
.card:hover{ border-color:#C9CFC9; }
.card .accent{ width:30px; height:4px; border-radius:2px; margin-bottom:6px; }
.card p{ font-size:15.5px; line-height:1.6; color:var(--muted); }
.card-link{ margin-top:auto; padding-top:6px; font-size:14.5px; }

/* ===================== Smart Call Handling mode cards ===================== */
.mode-card{ border:1px solid var(--border); border-radius:14px; background:#fff; padding:30px; }
.mode-card:hover{ border-color:#C9CFC9; }
.mode-kicker{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:14px;
}
.mode-card h3{ font-size:22px; margin-bottom:12px; }
.mode-card p{ font-size:15.5px; line-height:1.6; color:var(--muted); }

/* ===================== How it works (home strip) ===================== */
.steps-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.step-item{ border-top:2px solid var(--navy); padding-top:20px; }
.step-item .meta{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted-3); margin-bottom:12px; }
.step-item h3{ margin:0 0 10px; }
.step-item p{ font-size:15px; line-height:1.6; color:var(--muted); }

/* ===================== Two column feature ===================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:84px 32px; }
.split.start{ align-items:start; }
.split.no-pad{ padding:0; }
.split h2{ font-size:34px; margin:0 0 18px; }
.split p{ font-size:17px; line-height:1.65; color:var(--muted-2); margin:0 0 16px; }
.split p:last-child{ margin-bottom:0; }
.list-title{ font-size:18px; margin-bottom:16px; }

/* ===================== Depute / keep columns ===================== */
.depute-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.depute-col{ border:1px solid var(--mint-border); border-radius:14px; background:var(--mint); padding:24px 28px; }
.depute-col.keep{ border-color:var(--border); background:#fff; }
.depute-col-title{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:12px;
}
.depute-col.keep .depute-col-title{ color:var(--navy); }
.depute-item{ display:flex; gap:11px; padding:8px 0; font-size:15.5px; line-height:1.5; color:var(--muted-4); }
.depute-item .tick{ color:var(--teal); flex:none; }
.depute-item .dot{ color:var(--navy); font-size:8px; line-height:2.4; flex:none; }
.depute-close{ margin-top:28px; }
.assure-strip{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.assure-item{
  padding:10px 16px; border:1px solid var(--border-pill); border-radius:999px;
  font-size:14px; color:var(--muted); background:#fff;
}
.assure-item:hover{ border-color:var(--navy); color:var(--navy); }

/* ===================== Results panel (honesty section) ===================== */
.results-panel{ border:1px dashed var(--border-mid); border-radius:14px; padding:28px; background:var(--panel-2); }
.results-panel p{ font-size:15.5px; line-height:1.6; color:var(--muted); margin:14px 0 20px; }

/* ===================== CTA band ===================== */
.cta-band{ padding:76px 32px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band h2{ font-size:32px; color:#fff; margin:0 0 10px; }
.cta-band p{ font-size:17px; color:#C3D0DC; }

/* ===================== Page hero (inner pages) ===================== */
.page-hero{ padding:76px 32px 64px; text-align:center; }
.page-hero h1{ max-width:24em; margin-left:auto; margin-right:auto; }
.page-hero .lede{ font-size:18px; line-height:1.6; color:var(--muted-2); max-width:40em; margin-left:auto; margin-right:auto; }

/* ===================== Dictionary entry (About hero) ===================== */
.dict-entry{ margin-bottom:22px; }
.dict-word{ display:block; font-size:54px; font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin-bottom:10px; }
.dict-ipa{ font-family:"IBM Plex Mono", monospace; font-size:15px; color:var(--muted-3); margin-right:10px; }
.dict-pos{ font-style:italic; font-size:15px; color:var(--muted-3); }
.dict-def{ display:block; font-size:20px; line-height:1.5; margin-top:10px; color:var(--muted-4); }

/* ===================== Checklists ===================== */
.check-list{ display:grid; gap:10px; }
.check-item{ display:flex; gap:11px; font-size:15.5px; line-height:1.5; color:var(--muted-4); }
.check-item .tick{ color:var(--teal); flex:none; }
.check-list-lined .check-item{ padding:9px 0; border-bottom:1px solid var(--border-soft); }

/* ===================== Pills ===================== */
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ padding:6px 12px; border:1px solid var(--border-pill); border-radius:999px; font-size:13.5px; color:var(--muted); background:var(--panel-2); }
.pill-lg{ padding:7px 13px; font-size:14px; color:var(--muted-4); }

/* ===================== Panels ===================== */
.panel{ border:1px solid var(--border); border-radius:14px; background:#fff; padding:28px; }
.panel h3{ margin:0 0 12px; }
.panel p{ font-size:15.5px; line-height:1.6; color:var(--muted); }

/* ===================== Discovery numbered list ===================== */
.numbered-list{ display:grid; gap:2px; }
.numbered-item{ display:grid; grid-template-columns:34px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft); align-items:baseline; }
.numbered-item .n{ font-family:"IBM Plex Mono", monospace; font-size:13px; color:var(--blue); }
.numbered-item .t{ font-size:15.5px; line-height:1.5; color:var(--muted-4); }

/* ===================== Process page ===================== */
.process-list{ max-width:900px; margin:0 auto; padding:72px 32px 96px; }
.process-item{ display:grid; grid-template-columns:100px 1fr; gap:32px; padding-bottom:44px; }
.process-item .n{ font-family:"IBM Plex Mono", monospace; font-size:28px; color:var(--blue); line-height:1; }
.process-item .when{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted-3); margin-top:8px; }
.process-body{ border-left:1px solid var(--border-pill); padding-left:32px; padding-bottom:8px; }
.process-body h2{ font-size:24px; font-weight:600; letter-spacing:-0.015em; margin:0 0 12px; }
.process-body p{ font-size:16.5px; line-height:1.65; color:var(--muted-2); margin:0 0 16px; }
.process-output{ font-size:14.5px; color:var(--navy); background:var(--panel); border-radius:8px; padding:12px 16px; display:inline-block; }
.process-output strong{ font-weight:600; }

/* ===================== About page ===================== */
.mission-box{ border:1px solid var(--navy); border-radius:14px; background:var(--navy); padding:36px; }
.mission-box .label{ font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#7FDBC8; margin-bottom:18px; }
.mission-box p{ font-size:19px; line-height:1.55; color:#fff; }

.founder-grid{ gap:40px; }
.founder .name{ font-size:20px; font-weight:600; letter-spacing:-0.01em; }
.founder .role{ font-size:14.5px; color:var(--teal); margin-top:4px; font-weight:500; }
.founder p{ font-size:15.5px; line-height:1.6; color:var(--muted); margin:14px 0; }
.founder .li-link{ font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--blue-link); }

/* ===================== Trust page ===================== */
.trust-list{ max-width:900px; margin:0 auto; padding:64px 32px 96px; }
.trust-item{ padding:28px 0; border-bottom:1px solid var(--border); }
.trust-item h2{ font-size:20px; font-weight:600; margin:0 0 10px; letter-spacing:-0.01em; }
.trust-item p{ font-size:16.5px; line-height:1.65; color:var(--muted-2); }
.trust-includes{ margin-top:44px; }
.trust-includes .mono-label{ margin-bottom:14px; display:block; }
.ico-note{ margin-top:22px; }

/* ===================== Contact / booking ===================== */
.contact-min{ min-height:70vh; }
.contact-head{ padding:64px 32px 8px; text-align:center; }
.contact-head h1{ font-size:46px; }
.contact-head .prose{ margin-left:auto; margin-right:auto; }
.booking-wrap{ padding:16px 32px 88px; }
.booking-embed{
  width:100%; height:680px; display:block;
  border:1px solid var(--border); border-radius:14px; background:#fff;
}
.booking-foot{ margin-top:18px; }
.booking-fallback{ padding:24px 0 40px; }

/* ===================== Flow diagram ===================== */
.flow-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.flow-tab{
  padding:9px 18px; border-radius:999px; font-family:"IBM Plex Mono", monospace; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; background:#fff; color:var(--muted);
  border:1px solid var(--border-mid);
}
.flow-tab.active{ background:var(--navy-deep); color:#fff; border-color:var(--navy-deep); }

.flow-panel{ border:1px solid var(--border); border-radius:16px; padding:38px 30px 26px; background:var(--panel-2); }
.flow-row{ display:flex; align-items:center; gap:0; overflow-x:auto; }
.flow-start{ display:flex; align-items:center; gap:10px; flex:none; }
.flow-box{ border-radius:9px; padding:12px 14px; width:118px; flex:none; }
.flow-box .label{ font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:5px; }
.flow-box .val{ font-size:13.5px; line-height:1.3; }
.flow-box.entry{ border:1px solid var(--teal); background:var(--mint); }
.flow-box.entry .label{ color:var(--teal-deep); }
.flow-box.entry .val{ color:var(--ink); }
.flow-box.route{ border:1px solid var(--navy-deep); background:var(--navy-deep); width:132px; }
.flow-box.route .label{ color:#7FDBC8; }
.flow-box.route .val{ color:#fff; }
.flow-connector{ width:10px; height:1px; background:var(--border-mid); flex:none; }

.flow-lanes{ display:flex; flex-direction:column; gap:18px; flex:1; min-width:520px; }
.flow-lane{ display:flex; align-items:stretch; gap:8px; min-height:82px; cursor:pointer; }
.flow-lane-name{
  width:96px; flex:none; display:flex; align-items:center; justify-content:flex-end; text-align:right;
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:0.09em; text-transform:uppercase;
  line-height:1.45; color:#C4CAC4;
}
.flow-lane.active .flow-lane-name, .flow-lane.playing .flow-lane-name{ color:var(--teal-deep); }
.flow-step{
  width:98px; flex:none; border:1px solid #EDEFEB; border-radius:9px; background:#fff;
  padding:10px 11px; display:flex; align-items:center;
}
.flow-step .t{ font-size:13px; line-height:1.28; font-weight:400; color:#C4CAC4; }
.flow-step.human{ border-style:dashed; border-color:#EAD9BC; }

/* manual selection: whole lane lights (static view) */
.flow-lane.active .flow-step{ border-color:#B9E4DA; border-style:solid; background:var(--mint); }
.flow-lane.active .flow-step .t{ color:var(--ink); font-weight:500; }
.flow-lane.active .flow-step.human{ border-color:var(--hitl); background:var(--hitl-soft); }
.flow-lane.active .flow-step:last-child{ border-color:var(--teal-deep); background:var(--teal-deep); }
.flow-lane.active .flow-step:last-child .t{ color:#fff; }

/* autoplay: steps light one by one and stay lit until the lane clears */
.flow-step.lit{ border-color:var(--teal-deep); border-style:solid; background:var(--mint); }
.flow-step.lit .t{ color:var(--ink); font-weight:500; }
.flow-step.lit.human{ border-color:var(--hitl); background:var(--hitl-soft); animation:hitl-pulse 1.6s ease-out 1; }
@keyframes hitl-pulse{
  0%{ box-shadow:0 0 0 0 rgba(232,161,61,0.45); }
  100%{ box-shadow:0 0 0 12px rgba(232,161,61,0); }
}
@media (prefers-reduced-motion: no-preference){
  .flow-step{ transition:background 0.3s, border-color 0.3s; }
  .flow-step .t{ transition:color 0.3s; }
}

.flow-legend{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:22px 0 4px; }
.flow-legend button{
  display:flex; align-items:center; gap:8px; background:none; border:none; padding:4px; cursor:pointer;
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:#C4CAC4;
}
.flow-legend button.active{ color:var(--teal-deep); }
.flow-legend .dot{ width:8px; height:8px; border-radius:50%; background:#DFE3DE; }
.flow-legend button.active .dot{ background:var(--teal-deep); }
.flow-key{
  display:flex; align-items:center; justify-content:center; gap:8px; padding-top:10px;
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted-3);
}
.flow-key .key-dot{ width:10px; height:10px; border-radius:3px; background:var(--hitl); flex:none; }
.flow-note{ margin-top:22px; padding-top:22px; border-top:1px solid var(--border); font-size:15px; line-height:1.6; color:var(--muted); text-align:center; }
.flow-after{ margin:24px auto 0; text-align:center; }

/* ===================== Consent bar ===================== */
.consent-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100; margin:0 auto; max-width:720px;
  background:#fff; border:1px solid var(--border-mid); border-radius:14px;
  box-shadow:0 12px 40px rgba(11,26,43,0.14); padding:18px 22px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.consent-bar p{ font-size:14.5px; line-height:1.5; color:var(--muted-2); flex:1 1 280px; }
.consent-actions{ display:flex; gap:10px; }
.consent-actions .btn{ padding:10px 18px; font-size:14.5px; }

/* ===================== Footer ===================== */
footer.site-footer{ border-top:1px solid var(--border); background:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding:52px 32px; }
.footer-brand img{ height:44px; width:auto; display:block; margin-bottom:16px; }
.footer-tagline{ font-size:15px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.footer-brand p{ font-size:14.5px; color:var(--muted-3); max-width:26em; line-height:1.6; }
.footer-brand p.footer-tagline{ color:var(--navy); }
.footer-col-title{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted-3); margin-bottom:14px;
}
.footer-nav{ display:flex; flex-direction:column; gap:9px; }
.footer-nav a{ font-size:14.5px; color:var(--muted); }
.footer-nav a:hover{ color:var(--blue-link); }
.footer-contact{ display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--muted); }
.footer-contact a{ color:var(--muted); }
.footer-contact a:hover{ color:var(--blue-link); }
.footer-bottom{ border-top:1px solid var(--border-soft); }
.footer-bottom-inner{ padding:20px 32px; font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--faint); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-bottom-inner a{ color:var(--faint); }
.footer-bottom-inner a:hover{ color:var(--blue-link); }

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .split, .depute-grid{ grid-template-columns:1fr; gap:36px; }
  .grid-3, .grid-2, .steps-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  h1{ font-size:38px; }
  .logo-link img{ height:64px; }
  .dict-word{ font-size:40px; }
  .founder{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
  nav.main-nav.open{ display:flex; flex-direction:column; align-items:stretch; width:100%; padding:12px 0; }
  .header-inner{ flex-wrap:wrap; }
  .mobile-toggle{ display:inline-flex; }

  /* flow diagram reflows instead of horizontal scrolling */
  .flow-row{ flex-direction:column; align-items:stretch; gap:16px; overflow:visible; }
  .flow-start{ flex-wrap:wrap; }
  .flow-lanes{ min-width:0; }
  .flow-lane{ flex-wrap:wrap; min-height:0; }
  .flow-lane-name{ width:100%; justify-content:flex-start; text-align:left; margin-bottom:2px; }
  .flow-step{ width:auto; flex:1 1 40%; }
}