
/* ═══ SELF HOSTED FONTS — generated by tools/fetch-fonts.py ═══
   Was fonts.gstatic.com, which sent every visitor's IP to Google.
   Files live at /fonts/ and MUST be on the server before this page ships,
   or the page silently falls back to system fonts. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ CANONICAL TOKENS — DESIGN-CANON.md §1 (colors) §2 (spacing) §3 (radius) §4 (shadow) §5 (motion) ═══ */
:root{
  /* neutrals (§1.1) */
  --bg:#FFFFFF; --ink:#0E1014; --ink-2:#4E5159; --ink-3:#7C7F86; --ink-4:#A3A6AC;
  --line:rgba(14,16,20,0.08); --line-2:rgba(14,16,20,0.04);
  /* dark-surface neutrals (§1.2) */
  --dark:#0C2330; --dark-2:#080F14; --navy:#0D212A;
  --d-ink:#E9F0F2; --d-ink2:#93A4AD; --d-ink3:#6C7E87; --d-line:rgba(255,255,255,0.10);
  /* teal — the four canonical values (§1.3) */
  --accent:#2B9FB4;      /* on light */
  --accent-2:#1B8094;    /* deep: hover, contrast, gradient dark-stop */
  --teal:#38C0D6;        /* on dark */
  --teal-hi:#5AD1E0;     /* the one approved highlight tint */
  --accent-soft:#E5F4F7;
  /* semantics (§1.4) */
  --green:#4ED8A0; --green-deep:#2FBE8E;
  --amber:#E8A24A; --amber-deep:#C67A1E;
  --red:#F08A7A;
  /* type (§7 ledger: --fd/--fb collapsed to one token) */
  --f:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;
  --fm:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* motion (§5) */
  --ease:cubic-bezier(0.16,1,0.3,1);
  /* spacing scale (§2.1) — page chrome only; mockup interiors exempt (§2.4) */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-96:96px; --sp-128:128px;
  /* section rhythm (§2.3) */
  --sect-sm:clamp(44px,6vh,76px); --sect-md:clamp(52px,7vh,96px);
  --sect-lg:clamp(68px,9vh,116px); --sect-xl:clamp(88px,13vh,150px);
  --head-gap:clamp(32px,5vh,56px);
  /* containers (§2.2) */
  --w-std:1240px; --w-hdr:1400px; --w-ft:1320px; --gutter:24px;
  /* radius (§3) */
  --r-pill:999px; --r-hero:26px; --r-panel:24px; --r-card:20px; --r-inner:16px;
  --r-glass:14px; --r-row:12px; --r-chip:10px; --r-micro:8px; --r-icon:6px;
  /* shadows (§4) */
  --sh-card:0 1px 2px rgba(14,16,20,0.03),0 20px 40px -30px rgba(14,16,20,0.16);
  --sh-card-hover:0 1px 2px rgba(14,16,20,0.03),0 36px 58px -34px rgba(14,16,20,0.22);
  --sh-hero:0 30px 70px -34px rgba(8,24,34,0.55);
  --sh-deep:0 42px 88px -34px rgba(0,0,0,0.76),inset 0 1px 0 rgba(255,255,255,0.10);
  --sh-btn:0 14px 32px -12px rgba(14,16,20,0.45);
  --sh-btn-hover:0 20px 44px -12px rgba(43,159,180,0.45);
  --sh-pop:inset 0 1px 0 rgba(255,255,255,0.8),0 30px 70px -24px rgba(14,16,20,0.30),0 8px 24px -16px rgba(14,16,20,0.16);
  /* header */
  --hdr-h:108px; --hdr-h-min:88px;
}

/* ═══ BASE ═══ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* big-screen zoom tiers (canon §6; Safari excluded — root zoom breaks its dvh handling) */
@supports not (background:-webkit-named-image(i)){
  @media (min-width:1600px){:root{zoom:1.06;}}
  @media (min-width:1920px){:root{zoom:1.12;}}
  @media (min-width:2400px){:root{zoom:1.20;}}
}
html,body{margin:0;padding:0;}
body{font-family:var(--f);font-size:16px;/* explicit per canon §7 ledger */
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
img{max-width:100%;}
.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;}

/* page grain — fixed, pointer-events none, own layer (canon §4.5) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.025;mix-blend-mode:multiply;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

/* scroll reveal (canon §5 — the ONLY section entrance) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.09s;}.reveal.d2{transition-delay:.18s;}
.reveal.d3{transition-delay:.27s;}.reveal.d4{transition-delay:.36s;}.reveal.d5{transition-delay:.45s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none !important;}}

/* ═══ CRAFT DEFAULTS (DESIGN-DIRECTION §7) ═══ */
/* L8 mat frame: screenshots/mocks never sit on raw white */
.mat{background:#F3F5F6;border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:clamp(18px,2.4vw,32px);}
.mat--teal{background:linear-gradient(160deg,#EAF7F9,#F5FCFD);}
/* L1 two-tone subhead: lead clause ink, rest muted — subheads ONLY (tripwire #24) */
.tt{color:var(--ink-3);}
.tt b{color:var(--ink);font-weight:inherit;}
/* L5 value-shift chrome hover (no translate/scale): used by blocks via .vs */
.vs{transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease);}
.vs:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);}
/* standard dark primary pill (canon §4 --sh-btn + teal hover swap) */
.btn-dark{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:15px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;
  box-shadow:var(--sh-btn);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--sh-btn-hover);}
.btn-dark:active{transform:translateY(0) scale(0.98);}
.btn-dark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);}
.btn-dark:hover svg{transform:translateX(3px);}
/* standard white pill on dark — max ONE per dark viewport (§7 L15) */
.btn-white{display:inline-flex;align-items:center;gap:10px;padding:18px 34px;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:16px;font-weight:500;letter-spacing:-0.01em;
  box-shadow:0 20px 46px -18px rgba(0,0,0,0.65);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 28px 60px -20px rgba(0,0,0,0.75);}
.btn-white:active{transform:translateY(0) scale(0.985);}
.btn-white svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease);}
.btn-white:hover svg{transform:translateX(4px);}
/* standard containers */
.wrap{max-width:var(--w-std);margin:0 auto;padding:0 var(--gutter);}

/* ═══ BLOCK: Shell — header (Glass Adapt, interior-page variant) ═══
   Behavior: transparent+tall at top over the (light) page hero; condenses to
   frosted glass past 8px scroll; flips .on-dark ONLY while .ck or .ft sits
   behind the bar's midline (geometry test — no hero-takeover on interior pages). */
.site-hdr{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--hdr-h);
  display:flex;align-items:center;background:transparent;color:var(--ink);
  transition:height .5s var(--ease),background .45s var(--ease),
    -webkit-backdrop-filter .45s var(--ease),backdrop-filter .45s var(--ease),
    box-shadow .45s var(--ease),color .4s var(--ease);}
.site-hdr.scrolled{height:var(--hdr-h-min);background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:inset 0 -1px 0 var(--line),inset 0 1px 0 rgba(255,255,255,0.6),0 1px 24px rgba(14,16,20,0.05);}
.site-hdr.on-dark{color:#fff;}
.site-hdr.on-dark.scrolled{background:rgba(12,35,48,0.5);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.10),inset 0 1px 0 rgba(255,255,255,0.06),0 1px 24px rgba(0,0,0,0.28);}
.site-hdr-inner{width:100%;max-width:var(--w-hdr);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;}
.site-brand{display:inline-flex;align-items:center;height:36px;overflow:hidden;justify-self:start;}
.site-brand img{display:block;width:auto;transition:opacity .3s var(--ease),max-width .45s var(--ease),filter .4s var(--ease);}
.site-brand .brand-full{height:30px;max-width:260px;opacity:1;}
.site-brand .brand-icon{height:34px;max-width:0;opacity:0;filter:brightness(0);}
.site-hdr.scrolled .brand-full{max-width:0;opacity:0;}
.site-hdr.scrolled .brand-icon{max-width:56px;opacity:1;}
.site-hdr.on-dark .brand-icon{filter:brightness(0) invert(1);}
.site-nav{display:flex;align-items:center;gap:2px;justify-self:center;}
.site-hdr-actions{display:flex;align-items:center;gap:8px;justify-self:end;}
.site-link-quiet{padding:8px 6px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .25s var(--ease);}
.site-link-quiet:hover{color:var(--ink);}
.site-hdr.on-dark .site-link-quiet{color:rgba(255,255,255,0.82);}
.site-hdr.on-dark .site-link-quiet:hover{color:#fff;}
.site-cta{--gx:50%;--gy:50%;position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  transition:transform .25s var(--ease),background .4s var(--ease),color .4s var(--ease);}
.site-cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(135px circle at var(--gx) var(--gy),rgba(90,209,224,0.92),rgba(43,159,180,0) 62%);/* --teal-hi glow */
  transition:opacity .3s var(--ease);}
.site-cta:hover::before{opacity:1;}
.site-hdr.on-dark .site-cta{background:#fff;color:var(--dark);}
.site-hdr.on-dark .site-cta::before{background:radial-gradient(135px circle at var(--gx) var(--gy),rgba(43,159,180,0.55),rgba(43,159,180,0) 60%);}
.site-cta:active{transform:scale(0.98);}
.site-burger{display:none;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;color:inherit;}
.site-burger svg{width:21px;height:21px;}

/* mega-menu (locked Cohere-style recipe, tokenized) */
.nav-trigger{position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;font-size:14.5px;font-weight:500;color:var(--ink-2);
  border-radius:9px;cursor:pointer;transition:color .25s var(--ease);}
.nav-trigger::after{content:"";position:absolute;left:13px;right:25px;bottom:4px;height:1.5px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-trigger:hover{color:var(--ink);}
.nav-trigger:hover::after,.nav-trigger.active::after{transform:scaleX(1);}
.nav-caret{width:11px;height:11px;opacity:0.55;transition:transform .32s var(--ease);}
.nav-trigger.active .nav-caret{transform:rotate(180deg);}
.site-hdr.on-dark .nav-trigger{color:rgba(255,255,255,0.82);}
.site-hdr.on-dark .nav-trigger:hover,.site-hdr.on-dark .nav-trigger.active{color:#fff;}
.nav-scrim{position:fixed;inset:0;z-index:60;background:rgba(10,14,18,0.18);
  -webkit-backdrop-filter:blur(7px) saturate(105%);backdrop-filter:blur(7px) saturate(105%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s var(--ease),visibility .32s;}
.nav-scrim.show{opacity:1;visibility:visible;pointer-events:auto;}
.nav-panel{position:absolute;top:calc(100% - 6px);left:50%;
  transform:translateX(-50%) translateY(10px);transform-origin:top center;
  padding:26px;border-radius:var(--r-panel);z-index:80;background:rgba(255,255,255,0.94);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--line);box-shadow:var(--sh-pop);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .36s var(--ease),visibility .28s;}
.nav-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:18px;}
.np-grid{display:grid;gap:30px 36px;}
.panel-products .np-grid{grid-template-columns:1fr 1fr 236px;width:772px;}
.panel-solutions .np-grid{grid-template-columns:1fr 1.1fr 268px;width:820px;}
.panel-resources .np-grid{grid-template-columns:250px 1fr 1fr;width:782px;}
.panel-company .np-grid{grid-template-columns:1fr 208px;width:470px;}
.np-label{font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-4);font-family:var(--fm);padding-bottom:12px;}
.np-col{display:flex;flex-direction:column;}
.np-link{position:relative;display:block;width:fit-content;padding:9px 0;font-size:15px;font-weight:500;color:var(--ink);transition:color .2s var(--ease),transform .2s var(--ease);}
.np-link:hover{color:var(--accent-2);transform:translateX(3px);}
.np-new{margin-left:7px;font-family:var(--fm);font-size:9.5px;font-weight:600;letter-spacing:0.04em;color:var(--accent-2);background:var(--accent-soft);padding:2px 6px;border-radius:5px;vertical-align:middle;text-transform:uppercase;}
.np-feat{display:block;padding:13px 0;border-top:1px solid var(--line);}
.np-feat:first-of-type{border-top:0;padding-top:2px;}
.np-feat-tt{font-size:15px;font-weight:600;color:var(--ink);transition:color .2s var(--ease);}
.np-feat-ds{display:block;margin-top:3px;font-size:13px;color:var(--ink-3);line-height:1.4;}
.np-feat:hover .np-feat-tt{color:var(--accent-2);}
.np-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-inner);min-height:196px;padding:18px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(255,255,255,0.05);
  -webkit-clip-path:inset(0 round 16px);clip-path:inset(0 round 16px);}
.np-card-art,.np-card-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;transform:scale(1.04) translateZ(0);transition:transform .7s var(--ease),filter .5s var(--ease);will-change:transform;}
.np-card-img{object-fit:cover;display:block;}
.np-card:hover .np-card-art{transform:scale(1.12) translateZ(0);filter:brightness(1.1);}
.np-card:hover .np-card-img{transform:scale(1.12) translateZ(0);filter:brightness(1.08);}
.np-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0.62;mix-blend-mode:overlay;
  transform:scale(1.04) translateZ(0);transition:transform .7s var(--ease);will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.np-card:hover::after{transform:scale(1.12) translateZ(0);}
.np-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateZ(0);
  background:linear-gradient(to top,rgba(8,18,26,0.90) 0%,rgba(8,18,26,0.35) 46%,rgba(8,18,26,0.05) 100%),
    linear-gradient(rgba(9,26,36,0.20),rgba(9,26,36,0.20));}
.np-card-tt,.np-card-ds{position:relative;z-index:2;transform:translateZ(0);}
.np-card-tt{font-size:16px;font-weight:600;letter-spacing:-0.01em;line-height:1.25;display:inline-flex;align-items:center;gap:6px;}
.np-card-tt svg{width:15px;height:15px;transition:transform .28s var(--ease);}
.np-card:hover .np-card-tt svg{transform:translateX(4px);}
.np-card-ds{margin-top:6px;font-size:13px;color:rgba(255,255,255,0.76);line-height:1.4;}
.panel-products .np-card{min-height:218px;}
.panel-solutions .np-card{min-height:188px;}
.panel-resources .np-card{min-height:258px;}
.panel-company .np-card{min-height:150px;}
.np-card-img.tint-teal{filter:sepia(0.5) saturate(1.7) hue-rotate(150deg) brightness(0.94) contrast(1.03);}
.np-card:hover .np-card-img.tint-teal{filter:sepia(0.5) saturate(1.8) hue-rotate(150deg) brightness(0.99) contrast(1.03);}
.np-stack{display:flex;flex-direction:column;gap:10px;height:100%;}
.np-stack .np-card{flex:1;min-height:0;}
.np-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:26px;}
.np-foot a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:0.03em;color:var(--ink-2);text-transform:uppercase;font-family:var(--fm);transition:color .2s var(--ease);}
.np-foot a svg{width:13px;height:13px;transition:transform .24s var(--ease);}
.np-foot a:hover{color:var(--accent-2);}
.np-foot a:hover svg{transform:translateX(3px);}
.nav-panel.open .np-col,.nav-panel.open .np-card{animation:navColIn .44s var(--ease) backwards;}
.nav-panel.open .np-grid>*:nth-child(1){animation-delay:.02s;}
.nav-panel.open .np-grid>*:nth-child(2){animation-delay:.07s;}
.nav-panel.open .np-grid>*:nth-child(3){animation-delay:.12s;}
@keyframes navColIn{from{opacity:0;transform:translateY(8px);}}
@media (prefers-reduced-motion:reduce){
  .nav-panel.open .np-col,.nav-panel.open .np-card{animation:none;}
  .nav-panel{transition:opacity .18s var(--ease),visibility .18s;}
  .np-link:hover{transform:none;}
  .np-card-art,.np-card-img,.np-card::after{transform:none;transition:none;}
  .np-card:hover .np-card-art,.np-card:hover .np-card-img,.np-card:hover::after{transform:none;}
}

/* mobile drawer */
.site-drawer{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  padding:22px 24px 40px;background:rgba(255,255,255,0.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .4s var(--ease),visibility .35s;}
.site-drawer.open{opacity:1;visibility:visible;transform:translateY(0);}
.site-drawer-top{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h-min);}
.site-drawer-close{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);}
.site-drawer-close svg{width:22px;height:22px;}
.site-drawer nav{display:flex;flex-direction:column;margin-top:24px;}
@keyframes drawerIn{to{opacity:1;transform:translateY(0);}}
.site-drawer-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:16px;font-weight:500;}
.dacc{border-bottom:1px solid var(--line);}
.dacc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;
  font-size:26px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);padding:16px 0;text-align:left;}
.dacc-trigger .nav-caret{width:18px;height:18px;opacity:0.5;}
.dacc.open .dacc-trigger .nav-caret{transform:rotate(180deg);}
.dacc-panel{overflow:hidden;max-height:0;transition:max-height .4s var(--ease);}
.dacc-panel a{display:block;font-size:17px;font-weight:500;color:var(--ink-2);padding:11px 0 11px 2px;border:0;}
.dacc-panel a:first-child{padding-top:2px;}
.dacc-panel a:last-child{padding-bottom:18px;}
.site-drawer.open .dacc{opacity:0;transform:translateY(10px);animation:drawerIn .5s var(--ease) forwards;}
.site-drawer.open .dacc:nth-child(1){animation-delay:.06s;}
.site-drawer.open .dacc:nth-child(2){animation-delay:.12s;}
.site-drawer.open .dacc:nth-child(3){animation-delay:.18s;}
.site-drawer.open .dacc:nth-child(4){animation-delay:.24s;}
@media (max-width:860px){
  .site-nav,.site-link-quiet{display:none;}
  .site-cta{display:none;}
  .site-burger{display:inline-flex;}
  .site-hdr-inner{grid-template-columns:1fr auto;}
  .site-brand .brand-full{max-width:min(210px,58vw);}
}

/* interior-page top spacer: pages have no takeover; first section clears the fixed bar */
.page-top{padding-top:var(--hdr-h);}

/* ═══ BLOCK: ClosingKit — CTA band (.ck) + footer (.ft)  (P4: copy varies, structure never) ═══ */
.ck{position:relative;min-height:clamp(540px,72vh,780px);display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;text-align:center;color:#fff;padding:var(--sect-xl) var(--gutter);}
.ck-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--dark);}
.ck-media img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 40%;
  filter:brightness(1.5) saturate(1.12) hue-rotate(42deg);transform-origin:center;
  animation:ckdrift 30s ease-in-out infinite;will-change:transform;}
@keyframes ckdrift{0%,100%{transform:scale(1.05) translate(0,0);}50%{transform:scale(1.1) translate(-1.2%,0.8%);}}
.ck-tint{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color;background:#2280A6;opacity:.32;}
.ck-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(66% 56% at 50% 46%,rgba(7,22,31,0.68) 0%,rgba(7,22,31,0.34) 46%,rgba(7,22,31,0.02) 78%),
    linear-gradient(180deg,rgba(7,22,31,0.34) 0%,rgba(7,22,31,0.04) 32%,rgba(7,22,31,0.06) 70%,rgba(7,22,31,0.32) 100%);}
.ck-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.92;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='cn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23cn)'/%3E%3C/svg%3E");}
.ck-grain2{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.38;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='cn2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23cn2)'/%3E%3C/svg%3E");}
.ck-inner{position:relative;z-index:4;max-width:940px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4.4vh,42px);}
.ck-eyebrow{margin:0;font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.72);}
.ck-title{font-family:var(--f);font-size:clamp(40px,6.4vw,86px);font-weight:500;letter-spacing:-0.042em;line-height:1.0;margin:0;color:#fff;text-wrap:balance;
  text-shadow:0 2px 40px rgba(3,12,16,0.62),0 1px 10px rgba(3,12,16,0.5);}
@media (max-width:600px){.ck .btn-white{width:100%;max-width:340px;justify-content:center;}}
@media (prefers-reduced-motion:reduce){.ck-media img{animation:none !important;transform:scale(1.06);}}

/* footer — flat matte panel, crisp top edge (the hard cut).
   Footer greys are component-local by design (canon §1.2) — not tokens. */
.ft{position:relative;overflow:hidden;isolation:isolate;color:#93A6B0;background:var(--dark-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  padding:clamp(120px,17vh,220px) var(--gutter) clamp(46px,5.5vh,66px);}
.ft-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23fn)'/%3E%3C/svg%3E");}
.ft-grain2{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='fn2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23fn2)'/%3E%3C/svg%3E");}
.ft-glow{position:absolute;bottom:-18%;left:50%;transform:translateX(-50%);width:min(1000px,90%);height:60%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(43,159,180,0.10),rgba(43,159,180,0));filter:blur(14px);}
.ft-inner{position:relative;z-index:3;max-width:var(--w-ft);margin:0 auto;}
.ft-lead{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,5vw,100px);align-items:start;
  padding-bottom:clamp(54px,7vh,92px);border-bottom:1px solid rgba(255,255,255,0.08);}
.ft-logo{height:34px;width:auto;display:block;opacity:.96;}
.ft-statement{margin:28px 0 0;font-family:var(--f);font-size:clamp(24px,2.6vw,38px);font-weight:500;
  letter-spacing:-0.032em;line-height:1.1;color:#CBD8DE;max-width:15ch;text-wrap:balance;}
.ft-news{max-width:410px;}
.ft-sub-h{margin:0 0 9px;font-family:var(--f);font-size:16.5px;font-weight:500;letter-spacing:-0.012em;color:var(--teal);}
.ft-tag{margin:0;font-size:15px;line-height:1.62;color:#8497A1;max-width:42ch;}
.ft-form{position:relative;display:flex;align-items:center;gap:10px;max-width:330px;margin-top:22px;
  border-bottom:1px solid rgba(255,255,255,0.2);padding:7px 2px;transition:border-color .35s var(--ease);}
.ft-form:focus-within{border-color:var(--teal);}
.ft-form input{flex:1;min-width:0;border:0;outline:0;background:none;color:#EAF2F4;
  font-family:var(--f);font-size:15.5px;padding:6px 0;letter-spacing:-0.005em;}
.ft-form input::placeholder{color:#5F727B;}
.ft-form button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;color:#93A6B0;
  transition:color .3s var(--ease),transform .3s var(--ease);}
.ft-form button:hover{color:#fff;transform:translateX(2px);}
.ft-form button:active{transform:translateX(0) scale(0.9);}
.ft-form button svg{width:18px;height:18px;}
.ft-form.done{border-color:rgba(78,216,160,0.55);}
.ft-note{margin:11px 2px 0;font-size:12.5px;line-height:1.4;min-height:1.1em;color:#5F727B;
  opacity:0;transform:translateY(-3px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ft-note.show{opacity:1;transform:none;}
.ft-note.ok{color:var(--green);}
.ft-note.err{color:var(--red);}
.ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(40px,3.4vw,58px) clamp(20px,2vw,34px);padding:clamp(60px,7.5vh,100px) 0;}
.ft-col-h{font-family:var(--fm);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:#6C7E87;margin:0 0 20px;}
.ft-links{display:flex;flex-direction:column;gap:14px;}
.ft-link{position:relative;align-self:flex-start;color:#9FB2BC;font-size:15.5px;line-height:1.3;transition:color .26s var(--ease);}
.ft-link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--teal);transition:width .3s var(--ease);}
.ft-link:hover{color:#EAF2F4;}
.ft-link:hover::after{width:100%;}
.ft-new{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:var(--r-pill);font-family:var(--fm);
  font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;vertical-align:middle;
  color:var(--teal);background:rgba(56,192,214,0.14);border:1px solid rgba(56,192,214,0.28);}
.ft-social{display:flex;gap:10px;}
.ft-soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-chip);color:#93A6B0;border:1px solid rgba(255,255,255,0.11);background:rgba(255,255,255,0.02);
  transition:color .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease),transform .28s var(--ease);}
.ft-soc:hover{color:#fff;border-color:rgba(56,192,214,0.5);background:rgba(43,159,180,0.14);transform:translateY(-2px);}
.ft-soc svg{width:17px;height:17px;}
.ft-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 30px;
  padding-top:clamp(32px,4vh,48px);border-top:1px solid rgba(255,255,255,0.08);}
.ft-bar-l{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;}
.ft-bar-r{display:flex;align-items:center;flex-wrap:wrap;gap:20px 24px;}
.ft-copy{font-size:13.5px;color:#697C85;letter-spacing:-0.005em;}
.ft-copy b{color:#8FA3AD;font-weight:500;}
.ft-legal{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;}
.ft-legal a{font-size:13.5px;color:#7E9099;transition:color .26s var(--ease);}
.ft-legal a:hover{color:#EAF2F4;}
.ft-top-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#7E9099;transition:color .26s var(--ease);}
.ft-top-link:hover{color:#EAF2F4;}
.ft-top-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.ft-top-link:hover svg{transform:translateY(-3px);}
@media (max-width:1024px){
  .ft-lead{grid-template-columns:1fr;gap:clamp(38px,6vw,54px);}
  .ft-news{max-width:520px;}
  .ft-statement{max-width:20ch;}
  .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 30px;}
}
@media (max-width:680px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 26px;}}
@media (max-width:440px){
  .ft-cols{grid-template-columns:1fr;gap:32px;}
  .ft-bar{flex-direction:column;align-items:flex-start;gap:18px;}
  .ft-bar-r{gap:16px 20px;}
  .ft-form,.ft-tag{max-width:none;}
}


/* ═══════════════════════════════════════════════════════════════
   PAGE BLOCK: Blog (.bl-* index, .bp-* post)
   GENERATED by tools/gen-blog.py from Site/blog/posts/*.md.
   DO NOT EDIT THIS FILE BY HAND. Edit the generator or the Markdown,
   then re-run: python3 tools/gen-blog.py

   THE INDEX FOLLOWS THE CLIENT REFERENCE `Blog-standalone (1).html`
   SECTION FOR SECTION (client instruction 2026-08-04: "follow the HTML
   for everything other than Header and Footer"). Section order, sizes,
   colours, radii and copy are transcribed from it; the reference's inline
   styles are moved into this stylesheet, which is the house pattern, with
   the VALUES unchanged. Token remaps: --fd -> --f, --takeover -> --dark
   (identical value #0C2330), --accent-alt -> --teal (undefined in the
   reference, so it had no value there either).
   Deviations are listed in ROADMAP.md under 2026-08-04.
   ═══════════════════════════════════════════════════════════════ */
.bl-sec{padding:0 32px 24px;}
.bl-w{max-width:1280px;margin:0 auto;}
.bl-lbl{font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 20px;}

/* ── PAGE HEAD ── */
.bl-head{padding:calc(var(--hdr-h) + 64px) 32px 40px;text-align:center;}
.bl-head-in{max-width:760px;margin:0 auto;}
.bl-h1{font-size:clamp(34px,4.2vw,50px);font-weight:600;letter-spacing:-0.03em;
  line-height:1.15;margin:0 0 16px;color:var(--ink);}
.bl-h1 em{font-style:italic;color:var(--accent-2);}
.bl-sub{font-size:16px;color:var(--ink-2);margin:0 auto;max-width:56ch;line-height:1.6;}

/* ── FEATURED HERO: EDITORIAL SPLIT ── */
.bl-feat{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:20px;
  overflow:hidden;border:1px solid var(--line);max-width:1280px;margin:0 auto;}
.bl-feat-copy{background:#fff;padding:clamp(28px,3.4vw,48px);display:flex;
  flex-direction:column;justify-content:center;gap:14px;min-width:0;}
.bl-cat{width:fit-content;font-family:var(--fm);font-size:11px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-2);
  background:var(--accent-soft);padding:5px 11px;border-radius:6px;}
.bl-feat-tt{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-0.02em;
  line-height:1.25;margin:0;text-wrap:balance;color:var(--ink);transition:color .35s ease;}
.bl-feat:hover .bl-feat-tt{color:var(--accent-2);}
.bl-feat-ds{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:44ch;}
.bl-by{display:flex;align-items:center;gap:10px;margin-top:8px;}
.bl-av{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--teal));}
.bl-by span{font-family:var(--fm);font-size:12px;color:var(--ink-3);}
.bl-btn{display:inline-flex;width:fit-content;margin-top:8px;padding:12px 22px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;
  transition:background .35s var(--ease),transform .35s var(--ease);}
.bl-feat:hover .bl-btn{background:var(--accent-2);}
.bl-feat:active .bl-btn{transform:scale(0.98);}
.bl-feat-art{display:block;position:relative;min-height:340px;overflow:hidden;background:var(--navy);isolation:isolate;}
.bl-feat-tag{position:absolute;top:16px;right:16px;z-index:5;font-family:var(--fm);
  font-size:10.5px;font-weight:600;letter-spacing:0.04em;color:var(--ink);background:#fff;
  padding:5px 11px;border-radius:6px;white-space:nowrap;}

/* ── cover art ── */
.bl-cov{position:absolute;inset:0;overflow:hidden;background:var(--navy);z-index:0;}
.bl-cov svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bl-grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.55;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");}
.bl-grain2{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23m)'/%3E%3C/svg%3E");}

/* ── card thumbnail ── kept from the removed Recent Blogs block; the article grid
   and the post page's related cards both use it. */
.bl-thumb{display:block;position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:var(--accent-soft);margin-bottom:14px;box-shadow:0 1px 2px rgba(14,16,20,0.05);
  transition:transform 0.4s cubic-bezier(.4,0,.2,1);isolation:isolate;}
.bl-a-item:hover .bl-thumb{transform:scale(1.03);}

/* ── CATEGORY FILTER + SEARCH ── */
/* Top padding replaces the PULL QUOTE that used to sit here (removed 2026-08-04,
   client: reviews do not belong in the blog). Without it the dark Topic pills
   panel sat 27px above the search box. 64px is the reference's own value for
   this join, the padding its quote section carried, so the rhythm is unchanged. */
.bl-controls{padding:64px 32px 32px;}
.bl-search{display:flex;gap:10px;max-width:460px;margin-bottom:28px;}
.bl-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;font-size:14px;font-family:var(--f);color:var(--ink);background:#fff;}
.bl-search input:focus{outline:none;border-color:var(--accent);}
.bl-search button{width:46px;flex:none;border:none;background:var(--ink);color:#fff;
  border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease);}
.bl-search button:hover{background:var(--accent-2);}
.bl-search svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;}
.bl-filter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.bl-filter-h{font-size:13.5px;font-weight:600;color:var(--ink-3);}
.bl-fb{font-size:14px;font-weight:600;white-space:nowrap;padding:8px 18px;border-radius:999px;
  background:transparent;color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease);}
.bl-fb:hover{background:var(--accent-soft);color:var(--accent-2);}
.bl-fb.is-on{background:var(--ink);color:#fff;}

/* ── ARTICLE GRID ── */
/* gridCols/gridGap were UNBOUND template variables in the reference. Matched to
   its sibling 4 up grids and its 30 item placeholder count. */
.bl-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:36px 24px;padding:0 32px 48px;}
.bl-a-item{min-width:0;display:block;}
.bl-a-below{display:block;padding:18px 2px 0;}
.bl-a-cat{display:block;font-family:var(--fm);font-size:11px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px;}
.bl-a-tt{font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.35;
  margin:0 0 10px;color:var(--ink);transition:color 0.35s ease;}
.bl-a-item:hover .bl-a-tt{color:var(--accent-2);}
.bl-a-more{font-size:14px;font-weight:600;color:var(--accent-2);}
.bl-a-item.is-off{display:none;}

.bl-grid--rel{grid-template-columns:repeat(3,1fr);padding-bottom:0;}
@media (max-width:1024px){.bl-grid--rel{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.bl-grid--rel{grid-template-columns:1fr;}}

/* ── PAGINATION ── */
.bl-pager{padding:0 32px 96px;}
.bl-pager-in{max-width:1280px;margin:0 auto;display:flex;justify-content:center;
  align-items:center;gap:8px;}
.bl-pg{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--ink-2);background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease);}
.bl-pg:hover:not(:disabled):not(.is-on){background:var(--accent-soft);color:var(--accent-2);}
.bl-pg.is-arrow{color:var(--ink-3);}
.bl-pg.is-on{background:var(--ink);color:#fff;font-weight:600;}
.bl-pg:disabled{opacity:.35;cursor:default;}
.bl-pg-last{margin-left:8px;font-size:13px;font-weight:600;color:var(--ink-2);
  background:transparent;transition:color .3s var(--ease);}
.bl-pg-last:hover{color:var(--accent-2);}

/* ── empty state (0 posts / 0 matches) ── */
.bl-empty{max-width:1280px;margin:0 auto;padding:0 32px 64px;}
.bl-empty-h{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;
  letter-spacing:-0.028em;color:var(--ink);}
.bl-empty-p{margin:16px 0 0;font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:56ch;}
.bl-empty a{color:var(--accent-2);box-shadow:inset 0 -1px 0 rgba(27,128,148,.35);}
.bl-empty a:hover{box-shadow:inset 0 -2px 0 var(--accent-2);}

@media (max-width:1024px){
  .bl-grid{grid-template-columns:repeat(2,1fr);}
  .bl-feat{grid-template-columns:1fr;}
  .bl-feat-art{min-height:0;aspect-ratio:16/9;order:-1;}
}
@media (max-width:680px){
  .bl-sec,.bl-controls,.bl-empty{padding-left:20px;padding-right:20px;}
  .bl-grid{grid-template-columns:1fr;padding-left:20px;padding-right:20px;}
  .bl-head{padding-left:20px;padding-right:20px;}
  .bl-search{max-width:none;}
  .bl-pager-in{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){
  .bl-thumb,.bl-btn,.bl-feat-tt,.bl-a-tt{transition:none !important;}
}

/* ═══ POST ═══ */
.bp-head{padding:calc(var(--hdr-h) + var(--sect-md)) 0 0;}
.bp-crumb{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-size:13.5px;color:var(--ink-3);}
.bp-crumb a{color:var(--ink-3);transition:color .25s var(--ease);}
.bp-crumb a:hover{color:var(--accent-2);}
.bp-crumb i{font-style:normal;color:var(--ink-4);opacity:.7;}
.bp-h1{margin:14px 0 0;font-size:clamp(32px,4.4vw,56px);font-weight:600;letter-spacing:-0.036em;
  line-height:1.07;color:var(--ink);max-width:20ch;text-wrap:balance;}
.bp-lead{margin:22px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.58;color:var(--ink-2);max-width:56ch;}
.bp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px;
  padding-top:20px;border-top:1px solid var(--line);}
.bp-cover{position:relative;margin:clamp(30px,5vh,54px) 0 0;aspect-ratio:21/9;
  border-radius:var(--r-hero);overflow:hidden;background:var(--navy);isolation:isolate;
  box-shadow:var(--sh-card);}
.bp-cover::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  border-radius:var(--r-hero);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);}

.bp-body{padding:clamp(40px,6vh,72px) 0 var(--sect-md);}
.bp-prose{min-width:0;}
.bp-h2{margin:clamp(38px,5vh,58px) 0 18px;font-size:clamp(24px,2.4vw,32px);font-weight:600;
  letter-spacing:-0.028em;line-height:1.18;color:var(--ink);scroll-margin-top:calc(var(--hdr-h) + 20px);}
.bp-prose > .bp-h2:first-child{margin-top:0;}
.bp-h3{margin:clamp(28px,4vh,40px) 0 14px;font-size:clamp(19px,1.8vw,22px);font-weight:600;
  letter-spacing:-0.022em;line-height:1.25;color:var(--ink);scroll-margin-top:calc(var(--hdr-h) + 20px);}
.bp-p{margin:0 0 20px;font-size:17px;line-height:1.72;color:var(--ink-2);max-width:68ch;}
.bp-p:last-child{margin-bottom:0;}
.bp-p b,.bp-list b{color:var(--ink);font-weight:600;}
.bp-p a,.bp-list a{color:var(--accent-2);box-shadow:inset 0 -1px 0 rgba(27,128,148,.35);
  transition:box-shadow .25s var(--ease);}
.bp-p a:hover,.bp-list a:hover{box-shadow:inset 0 -2px 0 var(--accent-2);}
.bp-p code,.bp-list code{font-family:var(--fm);font-size:.88em;padding:2px 6px;border-radius:var(--r-icon);
  background:var(--accent-soft);color:var(--accent-2);}
.bp-list{margin:0 0 20px;padding:0;list-style:none;max-width:68ch;counter-reset:bpli;}
.bp-list li{position:relative;padding:0 0 0 26px;margin-bottom:12px;font-size:17px;
  line-height:1.66;color:var(--ink-2);}
.bp-list li:last-child{margin-bottom:0;}
.bp-list--dot li::before{content:"";position:absolute;left:3px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);}
.bp-list--num li{counter-increment:bpli;}
.bp-list--num li::before{content:counter(bpli);position:absolute;left:0;top:1px;
  font-size:13px;font-weight:600;color:var(--accent-2);}
.bp-quote{margin:clamp(30px,4vh,44px) 0;padding:0 0 0 26px;border-left:2px solid var(--accent);max-width:60ch;}
.bp-quote p{margin:0;font-size:clamp(20px,2.1vw,25px);font-weight:500;letter-spacing:-0.02em;
  line-height:1.4;color:var(--ink);}
.bp-quote cite{display:block;margin-top:14px;font-style:normal;font-size:14.5px;color:var(--ink-3);}
.bp-code{margin:0 0 24px;padding:20px 22px;border-radius:var(--r-inner);background:var(--dark);
  overflow-x:auto;max-width:68ch;}
.bp-code code{font-family:var(--fm);font-size:13.5px;line-height:1.7;color:var(--d-ink);white-space:pre;}
.bp-note{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  margin:0 0 24px;padding:18px 20px;border-radius:var(--r-inner);background:var(--accent-soft);
  border:1px solid rgba(43,159,180,.2);max-width:68ch;}
.bp-note svg{width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--accent-2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.bp-note p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);}
.bp-note--warn{background:#FDF8F1;border-color:rgba(198,122,30,.2);}
.bp-note--warn svg{stroke:var(--amber-deep);}
.bp-fig{margin:clamp(30px,4vh,44px) 0;}
.bp-fig img{width:100%;height:auto;display:block;border-radius:var(--r-card);}
.bp-fig figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-3);}
.bp-author{margin-top:clamp(40px,6vh,64px);padding-top:26px;border-top:1px solid var(--line);}
.bp-author-n{margin:0;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-0.012em;}
.bp-author-r{margin:3px 0 0;font-size:14px;color:var(--ink-3);}
.bp-rel{padding:0 0 var(--sect-md);}
.bp-rel-h{margin:0 0 clamp(20px,3vh,30px);font-size:clamp(20px,2vw,26px);font-weight:600;
  letter-spacing:-0.026em;color:var(--ink);}
@media (max-width:720px){
  .bp-h1{max-width:none;}
  .bp-cover{aspect-ratio:16/10;}
  .bp-code{max-width:none;}
}


/* ═══ WP theme addition: real featured images in the cover slot ═══
   The static blog only ever put generated SVG in .bl-cov. WordPress posts
   carry real uploads, so they need the same fill behaviour the SVG gets. */
.bl-cov img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;}
/* Fallback cover for a post with no featured image. Per-post variety comes from
   the gradient ANGLE only (--fb-a), never from hue: rotating the hue of a brand
   gradient walks straight out of the palette (the first cut turned teal into
   mustard, full bleed, on the post header). The three stops are brand tokens and
   do not move, so every fallback is navy to teal no matter the slug. */
.bl-cov--fb{background-image:linear-gradient(var(--fb-a,135deg),
  var(--dark) 0%,var(--accent-2) 58%,var(--accent) 100%);}
/* ═══ .bl-in — the prose container the blog markup has always referenced and
   nobody ever defined ═══
   gen-blog.py wraps every post's header AND body in
       <div class="bl-in bl-in--prose">
   and that class appears in no stylesheet anywhere: not shell.html, not the
   blog CSS. Zero occurrences. On the static blog it went unnoticed because both
   live posts were placeholders nobody read. Ported into the theme over 32 real
   articles it is glaring: body copy runs the full viewport width, sits flush at
   x=0, and clips at the left edge, and the cover image goes full bleed.
   This is a PRE-EXISTING defect inherited from gen-blog.py, not a porting slip.
   Measure is 68ch to match .lg-doc on the legal pages, so long-form copy reads
   identically wherever it appears on the site. */
.bl-in{width:100%;max-width:1280px;margin:0 auto;padding:0 32px;}
.bl-in--prose{max-width:calc(68ch + 64px);}
@media (max-width:680px){
  .bl-in{padding-left:20px;padding-right:20px;}
  .bl-in--prose{max-width:none;}
}

/* Category rail. The static blog had four curated categories and could wrap;
   this install has twelve non-empty ones with names like "Marketing Automation",
   which wrapped to a second line carrying a single orphan chip. A rail that
   scrolls instead of wrapping holds any number at any width, and nothing has to
   be hidden behind an arbitrary cap. */
.bl-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.bl-filter::-webkit-scrollbar{display:none;}
.bl-filter-h,.bl-filter .bl-fb{flex:0 0 auto;scroll-snap-align:start;}
.bl-pager-in a,.bl-pager-in span{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  font:500 14px/1 var(--f);color:var(--ink-2);text-decoration:none;transition:all .2s var(--ease);}
.bl-pager-in a:hover{border-color:var(--accent);color:var(--accent);}
.bl-pager-in .current{background:var(--ink);border-color:var(--ink);color:#fff;}
.bl-filter a.bl-fb{text-decoration:none;}
