/* ==========================================================================
   Bitsized — single shared stylesheet
   Tokens -> base -> components -> page sections -> responsive
   ========================================================================== */

@import url("/fonts/fonts.css");

/* ---- Tokens ------------------------------------------------------------ */
:root{
  /* Brand colour primitives — five approved colours, fixed */
  --ultra-900:#0E1D50;--ultra-800:#142A75;--ultra-700:#1D3A9E;--ultra-600:#2A4CBE;--ultra-500:#3F63D8;
  --ultra-400:#6D89E3;--ultra-300:#9BAFEE;--ultra-200:#C6D2F6;--ultra-100:#E3E9FB;--ultra-050:#F1F4FD;

  --bottle-900:#0B2116;--bottle-800:#132F20;--bottle-700:#1B3F2C;--bottle-600:#26573C;--bottle-500:#34734F;
  --bottle-400:#5A9A73;--bottle-300:#8FBEA1;--bottle-200:#C3DCCC;--bottle-100:#E4F0E9;--bottle-050:#F1F8F4;

  --chart-700:#5E6A12;--chart-600:#7E8C1E;--chart-500:#A8B92C;--chart-400:#C9DA3A;
  --chart-300:#DBE87A;--chart-200:#E9F2AE;--chart-100:#F4F8D8;

  --n-000:#FFFFFF;--n-025:#FAF8F3;--n-050:#F4F1EA;--n-100:#EAE6DC;--n-200:#D9D4C7;--n-300:#BDB7A9;
  --n-400:#97928A;--n-500:#6D6860;--n-600:#57534C;--n-700:#3B3833;--n-800:#24221F;--n-900:#12161B;--n-950:#0A0C0F;

  --positive-700:#14563A;--positive-600:#1B6B47;--positive-100:#E1F0E8;
  --caution-700:#7A4E00;--caution-600:#96600A;--caution-100:#F8ECD5;
  --critical-700:#8E1F17;--critical-600:#AC2A20;--critical-100:#F9E5E3;

  /* Semantic surfaces / text / actions / borders */
  --surface-page:var(--n-050);--surface-raised:var(--n-000);--surface-sunken:var(--n-100);
  --surface-card:var(--n-000);--surface-inverse:var(--n-900);
  --text-heading:var(--n-900);--text-body:var(--n-700);--text-muted:var(--n-500);--text-faint:var(--n-400);
  --text-on-inverse:var(--n-050);--text-on-inverse-muted:rgba(244,241,234,0.68);
  --text-link:var(--ultra-700);--text-link-hover:var(--ultra-900);--text-link-onink:var(--chart-300);
  --action-primary:var(--n-900);--action-primary-hover:var(--n-800);--action-primary-press:var(--n-950);
  --action-accent:var(--ultra-700);--action-accent-hover:var(--ultra-800);--action-accent-press:var(--ultra-900);
  --action-quiet-hover:var(--n-100);--action-disabled-bg:var(--n-100);--action-disabled-text:var(--n-400);
  --border-subtle:var(--n-100);--border-default:var(--n-200);--border-onink:rgba(244,241,234,0.16);
  --border-focus:var(--ultra-700);--critical-fg:var(--critical-700);
  --status-caution-bg:var(--caution-100);--status-caution-fg:var(--caution-700);

  /* Type */
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-text:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --size-display:84px;--lh-display:1.0;--tracking-display:-0.03em;
  --size-h1:52px;--lh-h1:1.08;--tracking-h1:-0.028em;
  --size-h2:36px;--lh-h2:1.15;--tracking-h2:-0.025em;
  --size-h3:24px;--lh-h3:1.22;--tracking-h3:-0.02em;
  --size-lead:20px;--lh-lead:1.55;--tracking-lead:-0.008em;
  --size-body:16px;--lh-body:1.62;
  --size-body-sm:13.5px;--lh-sm:1.56;
  --size-label:11px;--tracking-label:0.16em;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* Spacing (4px base) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  /* Layout */
  --layout-max:1200px;--layout-measure:68ch;--layout-pad:64px;--layout-pad-sm:20px;
  --section-y:96px;--section-y-sm:56px;
  --header-h:72px;--header-h-sm:60px;

  /* Shape / elevation / motion / focus */
  --radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;
  --bite-lg:18px;--bite-md:12px;
  --clip-bite-lg:polygon(0 0,calc(100% - var(--bite-lg)) 0,100% var(--bite-lg),100% 100%,0 100%);
  --clip-bite-md:polygon(0 0,calc(100% - var(--bite-md)) 0,100% var(--bite-md),100% 100%,0 100%);
  --shadow-1:0 1px 2px rgba(18,22,27,0.06),0 1px 1px rgba(18,22,27,0.04);
  --shadow-2:0 4px 12px rgba(18,22,27,0.09),0 1px 2px rgba(18,22,27,0.05);
  --dur-1:120ms;--dur-2:200ms;--ease-standard:cubic-bezier(0.2,0.8,0.2,1);
  --focus-color:var(--ultra-700);--focus-color-onink:var(--chart-400);
  --ring-focus:0 0 0 2px var(--n-000),0 0 0 4px var(--focus-color);
  --ring-focus-onink:0 0 0 2px var(--n-900),0 0 0 4px var(--focus-color-onink);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--size-body);line-height:var(--lh-body);font-weight:var(--weight-regular)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);margin:0;font-weight:var(--weight-semibold);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--dur-1) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:var(--space-4);top:-48px;background:var(--surface-raised);color:var(--text-link);padding:var(--space-3) var(--space-4);z-index:100;transition:top var(--dur-1) var(--ease-standard);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.skip-link:focus{top:0}

.container{max-width:var(--layout-max);margin:0 auto;padding-inline:var(--layout-pad)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:24px var(--section-y)}
.section--top-tight{padding-block:var(--section-y) 24px}
.section--card{background:var(--surface-raised);border-block:1px solid var(--border-subtle)}
.section--dark{background:var(--n-900)}

/* ---- Buttons / links / tags / badges ------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-text);font-weight:var(--weight-semibold);font-size:var(--size-body-sm);line-height:1;background:var(--action-primary);color:var(--n-000);border:1px solid transparent;border-radius:var(--radius-sm);padding:0 var(--space-5);height:44px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--action-primary-hover);color:var(--n-000)}
.btn:active{background:var(--action-primary-press)}
.btn--accent{background:var(--action-accent)}.btn--accent:hover{background:var(--action-accent-hover);color:var(--n-000)}
.btn--secondary{background:transparent;color:var(--text-heading);border-color:var(--n-900)}.btn--secondary:hover{background:var(--n-900);color:var(--n-000)}
.btn--onink{background:var(--n-050);color:var(--n-900);border-color:transparent}.btn--onink:hover{background:var(--n-000);color:var(--n-900)}
.btn--sm{height:44px;padding:0 var(--space-4);font-size:var(--size-label);letter-spacing:.02em}
.btn--lg{height:54px;padding:0 var(--space-6);font-size:var(--size-body)}
.btn--bite{clip-path:var(--clip-bite-md);border-radius:0}
.btn--bite.btn--lg{clip-path:var(--clip-bite-lg)}

.link{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.link:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
.link--arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---- Header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;background:rgba(244,241,234,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-8);width:100%;max-width:var(--layout-max);margin:0 auto;padding-inline:var(--layout-pad)}
.site-header__logo{display:flex;align-items:center;flex:none;line-height:0}
.site-header__logo img{height:24px;display:block}
.site-header__nav{display:flex;gap:var(--space-6);margin-left:auto}
.site-header__link{font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--text-body);text-decoration:none;padding:var(--space-2) 0;position:relative}
.site-header__link:hover{color:var(--text-heading)}
.site-header__link[aria-current]{color:var(--text-heading)}
.site-header__link[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--action-accent)}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3);flex:none}
.lang-switch{display:flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-left:var(--space-2)}
.lang-switch__item{color:var(--text-muted);text-decoration:none;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.lang-switch__item:hover{color:var(--text-heading);background:var(--action-quiet-hover)}
.lang-switch__item[aria-current]{color:var(--text-heading);font-weight:var(--weight-semibold)}
.lang-switch__sep{color:var(--border-default)}
.site-header__burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-heading);cursor:pointer;flex:none}
.site-header__burger:hover{background:var(--action-quiet-hover)}
.site-header__burger svg{display:block}
.site-header__burger .icon-close{display:none}
.site-header--open .site-header__burger .icon-menu{display:none}
.site-header--open .site-header__burger .icon-close{display:block}

/* ---- Footer ---------------------------------------------------------------- */
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse-muted);padding-block:var(--space-16) var(--space-8)}
.site-footer__inner{max-width:var(--layout-max);margin:0 auto;padding-inline:var(--layout-pad)}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-10)}
.site-footer__logo img{height:26px;display:block}
.site-footer__blurb{margin-top:var(--space-4);font-size:var(--size-body-sm);line-height:var(--lh-sm);max-width:38ch}
.site-footer__coltitle{font-size:var(--size-label);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--chart-400);margin-bottom:var(--space-4)}
.site-footer__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__list a{color:var(--text-on-inverse);text-decoration:none;font-size:var(--size-body-sm);border-bottom:1px solid transparent}
.site-footer__list a:hover{border-bottom-color:currentColor}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;align-items:center;margin-top:var(--space-16);padding-top:var(--space-5);border-top:1px solid var(--border-onink);font-size:var(--size-label)}
.site-footer__bottom a{color:var(--text-on-inverse);text-decoration:none}
.site-footer__bottom a:hover{text-decoration:underline}

/* ---- Section header / CTA block -------------------------------------------- */
.section-head{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--layout-measure)}
.section-head__title{font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--tracking-h2)}

.cta-block{position:relative;overflow:hidden;background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--space-16) var(--layout-pad)}
.cta-block__stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-width:var(--layout-max);margin:0 auto;padding-bottom:var(--space-12);border-bottom:1px solid var(--border-onink)}
.cta-block__stats strong{display:block;font-family:var(--font-display);font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--chart-400)}
.cta-block__stats span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--text-on-inverse-muted)}
.cta-block__inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-8);max-width:var(--layout-max);margin:0 auto;padding-top:var(--space-12)}
.cta-block__title{font-size:var(--size-h1);line-height:var(--lh-h1);letter-spacing:var(--tracking-h1);color:var(--n-000);max-width:22ch}
.cta-block__text{margin-top:var(--space-4);color:var(--text-on-inverse-muted);font-size:var(--size-lead);line-height:var(--lh-lead);max-width:44ch}
.cta-block__shape{position:absolute;right:-40px;bottom:-40px;width:280px;height:280px;opacity:.9;pointer-events:none}

.h2{font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--tracking-h2)}

/* ---- Hero ------------------------------------------------------------------ */
.hero{padding:104px 0 96px}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16);align-items:center}
.hero__grid>*{min-width:0}
.hero__title{font-size:var(--size-display);line-height:var(--lh-display);letter-spacing:var(--tracking-display);max-width:13ch}
.hero__lead{font-size:var(--size-lead);line-height:var(--lh-lead);letter-spacing:var(--tracking-lead);color:var(--text-body);margin-top:28px;max-width:56ch}
.hero__actions{display:flex;gap:var(--space-5);margin-top:var(--space-8);flex-wrap:wrap;align-items:center}
.hero__proof{font:var(--weight-medium) var(--size-body-sm)/1.6 var(--font-mono),monospace;letter-spacing:.03em;color:var(--text-muted);margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}

.page-hero{padding:var(--section-y) 0 var(--space-20)}
.page-hero__title{font-size:var(--size-h1);line-height:var(--lh-h1);letter-spacing:var(--tracking-h1);max-width:22ch}
.page-hero__lead{font-size:var(--size-lead);line-height:var(--lh-lead);letter-spacing:var(--tracking-lead);color:var(--text-body);margin-top:var(--space-6);max-width:64ch}
.page-hero--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--space-16);align-items:end}
.page-hero--split>*{min-width:0}

/* ---- Bit selector figure (home hero) --------------------------------------- */
.bit-figure{margin:0;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);display:grid;gap:0}
.bit-figure__label{font:var(--weight-medium) 11px/1 var(--font-mono),monospace;letter-spacing:.12em;color:var(--text-faint)}
.bit-figure__candidates{display:grid;gap:var(--space-2);margin-top:14px}
.bit-figure__candidate{border:1px solid var(--border-subtle);padding:12px 14px;font-size:var(--size-body-sm);line-height:1.4;color:var(--text-faint)}
.bit-figure__connector{height:28px;display:grid;justify-items:start;padding-left:18px}
.bit-figure__connector span{width:1px;height:100%;background:var(--n-200);display:block}
.bit-figure__selected{border:1px solid var(--ultra-700);background:var(--ultra-050)}
.bit-figure__selected-head{background:var(--ultra-700);padding:14px 18px;display:flex;justify-content:space-between;gap:var(--space-4);align-items:baseline}
.bit-figure__selected-head span:first-child{font:var(--weight-medium) 11px/1 var(--font-mono),monospace;letter-spacing:.12em;color:var(--n-000)}
.bit-figure__selected-head span:last-child{font:var(--weight-medium) 11px/1 var(--font-mono),monospace;letter-spacing:.1em;color:var(--ultra-200)}
.bit-figure__selected-body{padding:var(--space-4) 18px;display:grid;gap:10px}
.bit-figure__row{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline}
.bit-figure__row dt{font:var(--weight-medium) 11px/1.4 var(--font-mono),monospace;letter-spacing:.08em;color:var(--text-muted);margin:0}
.bit-figure__row dd{margin:0;font-size:var(--size-body-sm);line-height:1.5;color:var(--text-heading)}
.bit-figure__pills{display:flex;gap:var(--space-2);align-items:center;padding-top:6px;border-top:1px solid var(--ultra-100)}
.bit-figure__pill{padding:6px 10px;font:var(--weight-medium) 11px/1 var(--font-mono),monospace;letter-spacing:.1em}
.bit-figure__pill--pass{background:var(--chart-400);color:var(--n-900)}
.bit-figure__pill--live{background:var(--bottle-700);color:var(--bottle-100)}
.bit-figure__next{border:1px dashed var(--n-300);padding:14px 18px;font:var(--weight-medium) 11px/1 var(--font-mono),monospace;letter-spacing:.12em;color:var(--text-faint)}
.bit-figure__caption{font:var(--weight-medium) 11.5px/1.6 var(--font-mono),monospace;letter-spacing:.03em;color:var(--text-muted);margin-top:var(--space-5)}

/* ---- Two-column text + content sections ------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-16);align-items:start}
.split--wide-right{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.split>*{min-width:0}
.split__heading{font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--tracking-h2);max-width:22ch}
/* Display-size variant of .split__heading. Must stay a class, not an inline
   style, so the size steps below can reach it. Long Dutch compounds are wider
   than the narrow left column of .split--wide-right, so headings using this
   carry ­ at their syllable boundaries. */
.split__heading--xl{font-size:var(--size-h1);line-height:var(--lh-h1);letter-spacing:var(--tracking-h1);max-width:none}
.split__lead{font-size:18px;line-height:1.65;color:var(--text-body);margin-top:var(--space-5);max-width:52ch}
.split__sub{font-size:16px;line-height:1.6;color:var(--text-muted);margin-top:var(--space-6);max-width:52ch}

/* ---- Contrast pairs (classic vs Bitsized) ----------------------------------- */
.contrast{border-top:1px solid var(--border-subtle)}
.contrast-row{display:grid;gap:6px;padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle)}
.contrast-row__old{font-size:15px;line-height:1.5;color:var(--text-faint);text-decoration:line-through;text-decoration-color:var(--n-300)}
.contrast-row__new{font-family:var(--font-display);font-size:22px;line-height:1.3;letter-spacing:-.015em;color:var(--text-heading)}

/* ---- Anatomy / definition list rows ----------------------------------------- */
.anatomy-row{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--n-100);align-items:baseline}
.anatomy-row:last-child{border-bottom:none}
.anatomy-row dt{font:var(--weight-medium) 11px/1.4 var(--font-mono),monospace;letter-spacing:.1em;color:var(--ultra-700);margin:0}
.anatomy-row dd{margin:0;font-size:16px;line-height:1.55;color:var(--text-heading)}

/* ---- Card grids -------------------------------------------------------------- */
.grid{display:grid;gap:var(--space-6)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--2>.bit-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.grid--5-flush{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--border-subtle)}
.grid--4-flush{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #33363B}

.example-card{background:var(--n-025);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:26px;display:grid;gap:14px;align-content:start}
.example-card h2,.example-card h3{font-size:24px;line-height:1.22;letter-spacing:-.02em}
.example-card p{font-size:16px;line-height:1.6;color:var(--text-body)}

.step-cell{padding:28px 24px 0 0;display:grid;gap:10px;align-content:start}
.step-cell__no{font:var(--weight-medium) 11.5px/1 var(--font-mono),monospace;letter-spacing:.08em;color:var(--text-faint)}
.step-cell h3{font-size:24px;line-height:1.22;letter-spacing:-.02em}
.step-cell p{font-size:16px;line-height:1.6;color:var(--text-body)}

.feature-list{list-style:none;border-top:1px solid var(--border-subtle)}
.feature-list li{padding:18px 0;border-bottom:1px solid var(--border-subtle);font-size:18px;line-height:1.5;color:var(--text-heading);max-width:70ch}
.feature-list--tight li{padding:14px 0;font-size:16px;line-height:1.55}

/* ---- Dark "run & improve" band on Home -------------------------------------- */
.support-band{padding:var(--section-y) 0;background:var(--n-900)}
.support-band .split__heading, .support-band h2{color:var(--n-000)}
.support-band__lead{font-size:20px;line-height:1.6;color:var(--n-050);max-width:60ch}
.support-cell{padding:28px var(--space-8) 0 0;display:grid;gap:12px;align-content:start}
.support-cell h3{color:var(--n-000);font-size:24px;line-height:1.22;letter-spacing:-.02em}
.support-cell p{color:#C9C4BA;font-size:16px;line-height:1.6}
.support-band__note{color:#C9C4BA;font-size:16px;line-height:1.6;margin-top:var(--space-14, 56px);border-left:1px solid #33363B;padding-left:var(--space-5);max-width:70ch}

/* ---- Proof / document list ---------------------------------------------------- */
.doc-list{list-style:none;border-top:1px solid var(--border-subtle)}
.doc-list li{padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.doc-list strong{display:block;font-family:var(--font-display);font-size:18px;line-height:1.3;font-weight:var(--weight-semibold);letter-spacing:-.012em;color:var(--text-heading)}
.doc-list span{display:block;margin-top:4px;font-size:15px;line-height:1.55;color:var(--text-muted)}
.note{font-size:16px;line-height:1.6;color:var(--text-muted);border-left:2px solid var(--chart-400);padding-left:var(--space-5);max-width:70ch}
.proof-note strong{color:var(--text-heading);font-weight:var(--weight-semibold)}

/* ---- Bit cards (What we build) ------------------------------------------------ */
.bit-card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.bit-card__head{border-bottom:1px solid var(--border-subtle);padding:18px 24px;display:flex;justify-content:space-between;gap:var(--space-4);align-items:baseline}
.bit-card__head span:first-child{font:var(--weight-medium) 11px/1.3 var(--font-mono),monospace;letter-spacing:.12em;color:var(--text-heading)}
.bit-card__tag{font:var(--weight-medium) 11px/1.3 var(--font-mono),monospace;letter-spacing:.1em;color:var(--critical-fg)}
.bit-card__tag--result{color:var(--bottle-700);white-space:nowrap}
.bit-card__body{padding:6px 24px 20px}
.bit-card .anatomy-row dt.accent{color:var(--bottle-700)}
.bit-card .anatomy-row dd.muted{color:var(--text-muted)}
.bit-card__method{padding:14px 24px;border-top:1px solid var(--border-subtle);font-size:14px;color:var(--text-muted)}
.bit-card__result{font-family:var(--font-display);font-size:var(--size-h2);line-height:1.1;letter-spacing:-.02em;color:var(--bottle-700);padding:4px 24px 20px}
.bit-card__result span{display:block;margin-top:6px;font-family:var(--font-text);font-size:14px;font-weight:var(--weight-medium);letter-spacing:0;color:var(--text-muted)}

/* ---- Stages (How it works) ---------------------------------------------------- */
.stage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--space-16);padding:var(--space-16) 0;border-bottom:1px solid var(--border-subtle);align-items:start}
.stage:last-child{border-bottom:none}
.stage__no{font:var(--weight-medium) 11.5px/1 var(--font-mono),monospace;letter-spacing:.08em;color:var(--text-faint)}
.stage h2{font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--tracking-h2);margin-top:var(--space-4)}
.stage p{font-size:18px;line-height:1.65;color:var(--text-body);margin-top:var(--space-5)}
.stage__list-label{font:var(--weight-semibold) 11px/1 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.stage p.stage__note{font-size:16px;line-height:1.6;color:var(--text-muted);background:var(--n-025);border:1px solid var(--border-subtle);padding:16px 18px;margin-top:var(--space-4)}

.acceptance-card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px var(--space-6) var(--space-6)}
.acceptance-row{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--n-100);align-items:baseline}
.acceptance-row:last-child{border-bottom:none}
.acceptance-row dt{font:var(--weight-medium) 11px/1.4 var(--font-mono),monospace;letter-spacing:.1em;color:var(--ultra-700);margin:0}
.acceptance-row dd{margin:0;font-size:16px;line-height:1.55;color:var(--text-heading)}

.panel{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:36px}
.panel--sunken{background:var(--n-025)}
.panel h2{font-size:24px;line-height:1.22;letter-spacing:-.02em}
.panel .feature-list{margin-top:var(--space-6)}
.panel .feature-list li{color:var(--text-heading)}
.panel--sunken .feature-list li{color:var(--text-muted)}

/* ---- Ordered numbered step row (incident steps / next steps) ------------------- */
.numbered-row{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--border-subtle);margin-top:var(--space-10)}
.numbered-row li{padding:var(--space-6) var(--space-6) 0 0;display:grid;gap:10px;align-content:start}
.numbered-row span:first-child{font:var(--weight-medium) 11.5px/1 var(--font-mono),monospace;letter-spacing:.08em;color:var(--text-faint)}
.numbered-row span:last-child{font-size:16px;line-height:1.55;color:var(--text-heading)}

/* ---- Expertise groups ---------------------------------------------------------- */
.group-row{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,6fr);gap:var(--space-8);padding:var(--space-10) 0;border-bottom:1px solid var(--border-subtle);align-items:start}
.group-row__no{font:var(--weight-medium) 11.5px/1.4 var(--font-mono),monospace;letter-spacing:.06em;color:var(--text-faint);padding-top:6px}
.group-row h2{font-size:24px;line-height:1.25;letter-spacing:-.02em}
.group-row__control{font-size:16px;line-height:1.6;color:var(--text-muted);margin-top:12px}
.group-row__text{font-size:18px;line-height:1.6;color:var(--text-body);max-width:60ch}
.group-row__tags{font-size:14px;line-height:1.5;color:var(--text-muted);margin-top:var(--space-4)}
.group-row__examples{font-size:15px;line-height:1.5;color:var(--text-muted);margin-top:var(--space-4)}

/* ---- Banner (About placeholder notice) ------------------------------------------ */
.banner{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-sm);border-left:2px solid var(--caution-700);background:var(--status-caution-bg);color:var(--status-caution-fg);font-size:var(--size-body-sm);line-height:var(--lh-sm)}
.banner__icon{flex:none;margin-top:2px}
.banner strong{display:block;font-weight:var(--weight-bold)}
.banner span{display:block;margin-top:2px}

/* ---- Contact page --------------------------------------------------------------- */
.booking-panel{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:40px}
.cal-embed{width:100%;min-height:700px;overflow:auto;background:var(--n-025);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.cal-embed__fallback{margin:0;padding:var(--space-8);font-size:14px;line-height:1.6;color:var(--text-muted);text-align:center}
.cal-embed:has(cal-inline) .cal-embed__fallback,
.cal-embed:has(iframe) .cal-embed__fallback{display:none}

/* ---- Simple content page (Privacy / 404) ---------------------------------------- */
.prose{max-width:var(--layout-measure)}
.prose h2{font-size:24px;letter-spacing:-.02em;margin-top:var(--space-12)}
.prose p, .prose li{font-size:16px;line-height:1.65;color:var(--text-body);margin-top:var(--space-4)}
.prose ul{padding-left:1.2em;list-style:disc}
.prose a{color:var(--text-link)}

.error-page{padding:var(--space-24) 0;text-align:left}
.error-page__code{font:var(--weight-semibold) 11.5px/1 var(--font-mono),monospace;letter-spacing:.12em;color:var(--text-muted)}
.error-page h1{font-size:var(--size-h1);margin-top:var(--space-5)}
.error-page p{font-size:var(--size-lead);color:var(--text-body);margin-top:var(--space-5);max-width:56ch}
.error-page .btn{margin-top:var(--space-8)}

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width:1024px){
  .grid--4, .grid--3, .grid--5-flush, .grid--4-flush{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__title{font-size:64px}
  .split__heading--xl{font-size:40px}
}

/* Header collapses earlier than the rest of the layout: five nav items plus the
   call-to-action need more room than the content grid does. */
@media (max-width:900px){
  /* The 4fr column is down to ~210px here, too narrow for body text or a
     display heading, so this variant collapses before the plain .split does. */
  .split--wide-right{grid-template-columns:1fr;gap:var(--space-8)}

  .site-header{height:var(--header-h-sm)}
  .site-header__nav{display:none}
  .site-header__actions{margin-left:auto}
  .site-header__burger{display:inline-flex}
  .site-header--open{height:auto}
  .site-header--open .site-header__inner{flex-wrap:wrap}
  .site-header--open .site-header__logo{order:1}
  .site-header--open .site-header__actions{order:2}
  .site-header--open .site-header__burger{order:3}
  .site-header--open .site-header__nav{order:4;flex:1 0 100%;display:flex;flex-direction:column;gap:0;margin:0;padding:var(--space-2) 0 var(--space-5)}
  .site-header--open .site-header__link{padding:var(--space-3) 0;border-top:1px solid var(--border-subtle);font-size:16px}
  .site-header--open .lang-switch{margin-left:0;padding:var(--space-3) 0;border-top:1px solid var(--border-subtle)}
  .site-header--open .lang-switch__item{padding-left:0}
}

@media (max-width:768px){
  .container{padding-inline:var(--layout-pad-sm)}
  .section{padding-block:var(--section-y-sm)}
  .section--tight{padding-block:20px var(--section-y-sm)}
  .section--top-tight{padding-block:var(--section-y-sm) 20px}

  .site-header__inner{padding-inline:var(--layout-pad-sm);gap:var(--space-4)}

  .site-footer__top{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .site-footer__inner{padding-inline:var(--layout-pad-sm)}

  .hero{padding:var(--space-12) 0 var(--space-12)}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-10)}
  .hero__title{font-size:44px;max-width:none}

  .page-hero{padding:var(--space-12) 0 var(--space-10)}
  .page-hero__title{font-size:36px}
  .page-hero--split{grid-template-columns:1fr}

  .split, .split--wide-right{grid-template-columns:1fr;gap:var(--space-8)}
  .split__heading{max-width:none}
  .split__heading--xl{font-size:34px}

  .grid--4,.grid--3,.grid--2,.grid--5-flush,.grid--4-flush{grid-template-columns:1fr;gap:var(--space-4)}
  .grid--5-flush, .grid--4-flush{border-top:none;gap:var(--space-8)}
  .step-cell,.support-cell{padding:var(--space-6) 0 0;border-top:1px solid var(--border-subtle)}

  .stage{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-10) 0}

  .numbered-row{grid-template-columns:1fr;border-top:none;gap:var(--space-6);margin-top:var(--space-6)}
  .numbered-row li{padding:var(--space-5) 0 0;border-top:1px solid var(--border-subtle)}

  .group-row{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-8) 0}

  .cta-block{padding:var(--space-10) var(--layout-pad-sm)}
  .cta-block__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);padding-bottom:var(--space-8)}
  .cta-block__stats strong{font-size:34px}
  .cta-block__title{font-size:var(--size-h2)}
  .cta-block__inner{align-items:flex-start;padding-top:var(--space-8)}
  .cta-block__shape{width:140px;height:140px;right:-20px;bottom:-20px;opacity:.5}

  .booking-panel{padding:var(--space-6)}
  .cal-embed{min-height:520px}
}

@media (max-width:480px){
  .site-footer__top{grid-template-columns:1fr}
  .site-footer__bottom{align-items:flex-start;flex-direction:column}
  .bit-figure{padding:var(--space-5)}
  .anatomy-row{grid-template-columns:72px 1fr;gap:var(--space-3)}
  .booking-panel{padding:var(--space-5)}
}