/* =========================================================================
   EDMUND AI — homepage v3 (brand-aligned)
   - Light mode, Space Grotesk + DM Sans + JetBrains Mono
   - Single accent: purple #6c5ce7
   - Asymmetric, editorial, technical
   ========================================================================= */

/* =========================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Opt every page into the browser's native View Transitions API so internal
   navigation gets a smooth crossfade instead of a hard flash. Each page
   still fully reloads under the hood (scripts re-run as normal), only the
   visual swap is animated — so this stays compatible with Cookiebot/GSAP/
   the i18n walker/megabar/inline calculator JS without any glue code.

   Browser support (May 2026):
   - Chrome / Edge 126+        ✓
   - Safari 18+ (iOS 18+)      ✓
   - Firefox: in flight        — falls back to instant nav, no transition
   ========================================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: edmund-fade-out; }
::view-transition-new(root) { animation-name: edmund-fade-in; }

@keyframes edmund-fade-out {
  to { opacity: 0; }
}
@keyframes edmund-fade-in {
  from { opacity: 0; }
}

/* Respect reduced-motion: skip the crossfade, snap straight to the new page. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- TOKENS --- */
:root{
  --navy:#252e3d;        /* synced with edmundai.com — primary dark navy */
  --navy-deep:#10314d;   /* synced — deep blue-navy used in dark strips */
  --navy-soft:#343f52;   /* synced — secondary navy */
  --ink-2:#5a6478;
  --ink-3:#8b95a8;

  --purple:#605dba;       /* synced with edmundai.com — muted secondary purple */
  --purple-deep:#311c74;  /* synced — deep purple */
  --purple-soft:#8b7cf7;  /* kept — only used for soft accents on dark CTA */
  --lavender:#e7e6fa;
  --lavender-tint:#f5f4ff;

  --paper:#ffffff;
  --paper-2:#fafaf9;
  --paper-3:#f4f4f2;
  --rule:#e8e7e4;
  --rule-strong:#d4d2cd;

  --ok:#1f8a5a;
  --warn:#a96308;

  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'DM Sans', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  --shadow-1: 0 1px 0 rgba(26,31,46,.04), 0 8px 24px -12px rgba(26,31,46,.10);
  --shadow-2: 0 1px 0 rgba(26,31,46,.04), 0 28px 64px -28px rgba(26,31,46,.18);

  /* Edmund main brand gradient (#7145FC → #f8adf0) */
  --brand-purple: #7145FC;   /* confirmed against edmundai.com */
  --brand-pink:   #f8adf0;   /* synced with edmundai.com — slightly more saturated than prior #f8adf0 */
  --grad-brand:   linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-pink) 100%);
  --grad-brand-h: linear-gradient(90deg,  var(--brand-purple) 0%, var(--brand-pink) 100%);
  --grad-brand-v: linear-gradient(180deg, var(--brand-purple) 0%, var(--brand-pink) 100%);
  --grad-soft:    linear-gradient(90deg, rgba(113,69,252,.28), rgba(248,173,240,.55));

  --container: 1320px;
}

/* Skip-to-content link — visually hidden until focused via keyboard */
.skip-to-content{
  position:fixed;
  top:12px;
  left:12px;
  z-index:9999;
  padding:10px 16px;
  background:var(--navy);
  color:#fff;
  font:600 14px/1 var(--f-body, system-ui, sans-serif);
  text-decoration:none;
  border-radius:8px;
  box-shadow:0 8px 24px -8px rgba(26,31,46,.35);
  transform:translateY(-150%);
  transition:transform .18s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--brand-purple);
  outline-offset:2px;
}
/* Make the main landmark focus ring discreet when the skip link jumps to it */
#main:focus{outline:none}
#main:focus-visible{outline:none}

/* Reusable gradient-text utility */
.grad-text{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.55;
  color:var(--navy);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02","cv11";
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* page-wide column rule motif (very subtle industrial gridline) */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(26,31,46,.025) calc(50% - .5px), rgba(26,31,46,.025) calc(50% + .5px), transparent calc(50% + .5px));
  z-index:0;
  opacity:0;
}
@media (min-width: 1180px){ body::before{opacity:1} }

/* --- LAYOUT PRIMITIVES --- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;position:relative;z-index:1}
@media (max-width:720px){ .wrap{padding:0 20px} }

.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow .tick{
  font-family:var(--f-mono);font-size:11px;font-weight:600;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

h1,h2,h3,h4{font-family:var(--f-display);color:var(--navy);letter-spacing:-.02em}
h1{font-weight:600;font-size:clamp(40px, 6vw, 76px);line-height:1.02}
h2{font-weight:600;font-size:clamp(30px, 3.6vw, 52px);line-height:1.05}
h3{font-weight:600;font-size:clamp(22px, 2vw, 28px);line-height:1.15}
h4{font-weight:600;font-size:18px;line-height:1.3}
p{color:var(--ink-2)}
.lede{font-size:clamp(17px, 1.4vw, 21px);line-height:1.55;color:var(--ink-2);max-width:62ch}

/* --- BUTTONS --- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-.005em;
  border-radius:10px;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background: var(--grad-brand);
  background-size: 130% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 8px 22px -8px rgba(113,69,252,.45),
    0 1px 0 rgba(26,31,46,.10);
  transition: transform .18s ease, box-shadow .25s ease, background-position .45s ease;
}
.btn-primary:hover{
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 12px 28px -8px rgba(113,69,252,.55),
    0 1px 0 rgba(26,31,46,.10);
}
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{
  color:var(--navy);
  border:1px solid var(--rule-strong);
  background:var(--paper);
}
.btn-ghost:hover{ border-color:var(--navy); }
.btn .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arrow{ transform: translateX(3px) }

.kbd{
  font-family:var(--f-mono);font-size:11px;
  padding:2px 7px;border-radius:5px;border:1px solid var(--rule);
  background:var(--paper-2);color:var(--ink-2);
}

/* =========================================================================
   ANCHOR SCROLLING
   When a megabar link points at #thinks / #agents / #case / #voices /
   #manifesto / #demo, the browser scrolls so the target's top sits at
   y=0 — directly under the sticky nav. scroll-margin-top tells the
   browser to leave room for the nav (~72px) plus a little breathing.
   ========================================================================= */
section[id], div[id].demo {
  scroll-margin-top: 88px;
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color: var(--rule); background: rgba(255,255,255,.92); }
.nav-inner{
  display:flex;align-items:center;gap:24px;
  height:68px;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:720px){ .nav-inner{padding:0 20px} }

.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.01em;
  color:var(--navy);
}
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  position:relative;flex-shrink:0;
}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-word{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--navy);
  line-height:1;
}
.footer .brand-word{color:#fff}
.brand small{
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
  margin-left:2px;
}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:14px}
.nav-link{
  padding:8px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--navy);
  display:inline-flex;align-items:center;gap:6px;
  transition: background .15s ease;
}
.nav-link:hover{background:var(--paper-2)}
.nav-link svg{width:11px;height:11px;opacity:.55}

.nav-spacer{flex:1}

.nav-utility{display:flex;align-items:center;gap:14px}
.lang{
  display:inline-flex;gap:0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);
}
.lang > *{padding:0 6px;border-right:1px solid var(--rule);color:var(--ink-3);text-decoration:none;cursor:pointer;transition:color .15s ease}
.lang > *:last-child{border-right:0}
.lang > .on,.lang > .active{color:var(--navy);font-weight:600;cursor:default}
.lang > a:hover{color:var(--brand-purple)}
.lang > a:focus-visible{outline:2px solid var(--brand-purple);outline-offset:2px;border-radius:2px}
.nav-login{font-size:14px;font-weight:500;color:var(--navy)}
.nav-login:hover{color:var(--purple)}

@media (max-width:980px){
  .nav-links{display:none}
  .lang{display:none}
}

/* Browser-language auto-suggest card — bottom-right corner toast.
   Only appears when the browser language differs from active AND the user
   has not yet manually clicked the language switcher. */
.i18n-suggest{
  position:fixed;
  right:20px;bottom:20px;
  display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 14px;
  background:var(--paper);
  color:var(--navy);
  border:1px solid var(--rule-strong);
  border-radius:14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 22px 50px -18px rgba(26,31,46,.22),
    0 2px 8px -2px rgba(26,31,46,.08);
  font-family:var(--f-body);
  opacity:0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,1.18,.36,1);
  z-index:1000;
  max-width:calc(100vw - 40px);
}
.i18n-suggest.i18n-suggest-in{ opacity:1; transform: translate3d(0, 0, 0); }
.i18n-suggest.i18n-suggest-leaving{ opacity:0; transform: translate3d(0, 12px, 0); }

.i18n-suggest-badge{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  background: var(--grad-brand);
  color:#fff;
  font-family:var(--f-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 12px -4px rgba(113,69,252,.45);
}

.i18n-suggest-text{
  display:flex;flex-direction:column;line-height:1.2;
  padding-right:4px;
}
.i18n-suggest-title{
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  letter-spacing:.005em;
}
.i18n-suggest-title strong{
  color:var(--navy);font-weight:600;margin-left:2px;
}
.i18n-suggest-sub{
  font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.05em;color:var(--ink-3);
  margin-top:3px;
}

.i18n-suggest-accept{
  appearance:none;border:0;cursor:pointer;
  padding:8px 14px;border-radius:8px;
  background: var(--grad-brand);
  color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 6px 14px -4px rgba(113,69,252,.55);
  transition: transform .12s ease, box-shadow .22s ease;
}
.i18n-suggest-accept:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 10px 18px -6px rgba(113,69,252,.6);
}
.i18n-suggest-accept:active{ transform: translateY(0); }
.i18n-suggest-accept:focus-visible{ outline:2px solid var(--brand-purple); outline-offset:2px; }

.i18n-suggest-dismiss{
  appearance:none;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:8px;
  color:var(--ink-3);
  transition:color .15s ease, background .15s ease;
}
.i18n-suggest-dismiss:hover{ color:var(--navy); background:var(--paper-3); }
.i18n-suggest-dismiss:focus-visible{ outline:2px solid var(--brand-purple); outline-offset:2px; }

@media (max-width:520px){
  .i18n-suggest{
    right:12px; left:12px; bottom:12px;
    padding:10px 8px 10px 12px;
    gap:10px;
  }
  .i18n-suggest-badge{ width:28px; height:28px; font-size:10.5px; }
  .i18n-suggest-title{ font-size:13px; }
  .i18n-suggest-sub{ display:none; }
  .i18n-suggest-accept{ padding:7px 12px; font-size:12px; }
}
@media (prefers-reduced-motion: reduce){
  .i18n-suggest{ transition:none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  padding: 88px 0 56px;
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:64px;
  align-items:start;
}
.hero-grid > *{ min-width: 0; max-width: 100%; }
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
}

.hero-line{
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:32px;
}
.hero-line .live{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ok);font-weight:500;
}
.hero-line .live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow: 0 0 0 0 rgba(31,138,90,.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(31,138,90,.45)}
  70%{box-shadow:0 0 0 9px rgba(31,138,90,0)}
  100%{box-shadow:0 0 0 0 rgba(31,138,90,0)}
}
.hero-line .sep{color:var(--ink-3);opacity:.6}

.hero h1{
  margin-bottom: 22px;
  font-size: clamp(40px, 5.6vw, 68px);
  overflow-wrap: break-word;
}
.hero-copy{ min-width: 0 }
.hero h1 em{ font-style: italic; color: var(--brand-purple); font-weight: 500; }

.hero-sub{
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:54ch;
  margin-bottom:36px;
}
.hero-sub b{color:var(--navy);font-weight:600}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-meta{
  margin-top:36px;
  display:flex;flex-wrap:wrap;gap:28px 36px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-2);
  border-top:1px solid var(--rule);
  padding-top:24px;
}
.hero-meta .num{
  color:var(--navy);font-weight:600;font-size:18px;
  font-family:var(--f-display);letter-spacing:-.01em;
  display:block;margin-bottom:2px;
}
.hero-meta .lbl{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}

/* === Hero chat demo === */
.demo{
  position:relative;
  background: var(--paper);
  border:1px solid var(--rule);
  border-radius:18px;
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.demo-bar{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--rule);
  background: var(--paper-2);
}
.demo-bar .dots{display:flex;gap:6px;margin-right:8px}
.demo-bar .dots span{width:9px;height:9px;border-radius:50%;background:var(--rule-strong)}
.demo-bar .path{
  font-family:var(--f-mono);font-size:12px;color:var(--ink-2);letter-spacing:.02em;
}
.demo-bar .path .slash{color:var(--ink-3);margin:0 4px}
.demo-bar .meta{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;color:var(--ok);
}
.demo-bar .meta::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow: 0 0 0 0 rgba(31,138,90,.45);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(31,138,90,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(31,138,90,0);   }
  100% { box-shadow: 0 0 0 0 rgba(31,138,90,0);     }
}
@media (prefers-reduced-motion: reduce){
  .demo-bar .meta::before{ animation:none }
}

.demo-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--rule);
  background: var(--paper);
  overflow-x:auto;
  scrollbar-width:none;
}
.demo-tabs::-webkit-scrollbar{display:none}

/* Per-tab progress pips — 5 dots between tab strip and panel body. The
   active pip expands and fills with the brand gradient; prior pips stay
   filled to show "completed" position in the rotation. */
.demo-pips{
  display:flex;justify-content:center;align-items:center;gap:8px;
  padding:11px 18px 10px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:opacity .3s ease;
}
.demo-pips.is-hidden{opacity:0;pointer-events:none}
.pip{
  position:relative;display:inline-block;
  width:7px;height:7px;border-radius:99px;
  background:var(--rule-strong);
  overflow:hidden;
  transition:width .42s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.pip.is-done{ background:transparent; }
.pip.is-on{
  width:56px;
  background:rgba(113,69,252,.12);
  box-shadow: 0 0 0 1px rgba(113,69,252,.10);
}
.pip-fill{
  position:absolute;inset:0;
  background:var(--grad-brand);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
  border-radius:inherit;
}
.pip.is-done .pip-fill{
  transform:scaleX(1);
  background:linear-gradient(135deg, rgba(113,69,252,.55), rgba(248,173,240,.55));
}
@media (prefers-reduced-motion: reduce){
  .demo-pips{display:none}
}

/* Aurora glow sitting behind the chat card. Subtle, slow drift. */
.demo-wrap{
  position:relative;
  isolation:isolate;
}
.demo-aura{
  position:absolute;
  inset:-32px -28px -40px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 50% at 18% 8%, rgba(113,69,252,.22), transparent 65%),
    radial-gradient(42% 55% at 88% 92%, rgba(248,173,240,.18), transparent 65%),
    radial-gradient(30% 40% at 60% 30%, rgba(139,124,247,.10), transparent 70%);
  filter:blur(28px);
  border-radius:36px;
  opacity:.95;
  animation: demo-aura-drift 18s ease-in-out infinite alternate;
}
.demo-wrap > .demo{ position:relative; z-index:1; }
@keyframes demo-aura-drift {
  0%   { transform: translate3d(0,0,0)        scale(1);    opacity:.85 }
  50%  { transform: translate3d(8px,-6px,0)   scale(1.04); opacity:1   }
  100% { transform: translate3d(-6px,4px,0)   scale(1.02); opacity:.9  }
}
@media (prefers-reduced-motion: reduce){
  .demo-aura{ animation:none }
}
.tab{
  flex-shrink:0;
  padding:14px 18px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;
  color:var(--ink-2);
  border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  display:inline-flex;align-items:center;gap:8px;
}
.tab .agent-tag{
  font-size:9.5px;padding:2px 6px;border-radius:4px;
  background:var(--paper-3);color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
}
.tab.is-on{color:var(--navy);border-bottom-color:var(--purple)}
.tab.is-on .agent-tag{
  background:var(--lavender);color:var(--purple-deep);
  box-shadow: 0 0 0 1px rgba(113,69,252,.20), 0 0 14px -4px rgba(113,69,252,.40);
}
.tab .agent-tag{ transition: background .2s ease, color .2s ease, box-shadow .25s ease; }
.tab:hover{color:var(--navy)}

.demo-body{
  padding:22px 22px 14px;
  background: var(--paper);
}
.bubble{
  max-width:92%;
  padding:14px 16px;
  border-radius:12px;
  line-height:1.5;
  font-size:14.5px;
  margin-bottom:14px;
}
.bubble.user{
  margin-left:auto;
  background: var(--navy);
  color: #f0f1f6;
  border-bottom-right-radius:4px;
  font-family:var(--f-body);
}
.bubble.bot{
  background: var(--paper-2);
  border:1px solid var(--rule);
  color: var(--navy);
  border-bottom-left-radius:4px;
  position:relative;
}
.bubble.bot strong{font-weight:600}
.bubble.bot p + p{margin-top:8px}
.bubble.bot ul{padding-left:18px;margin:8px 0 4px}
.bubble.bot li{margin:4px 0;color:var(--ink-2);font-size:14px}
.bubble.bot li b{color:var(--navy);font-weight:600}

/* ---- "thinking…" pulse before the bot starts streaming ----
   Positioned absolutely so it overlays the (opacity:0) bubble content
   instead of pushing it down. Avoids a ~15px layout shift when removed. */
.bot-thinking{
  position:absolute;
  top:14px;
  left:16px;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 2px 6px;
  pointer-events:none;
}
.bot-thinking span{
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--ink-3);
  animation: bot-think 1.15s ease-in-out infinite;
}
.bot-thinking span:nth-child(2){ animation-delay:.15s; background:var(--purple); }
.bot-thinking span:nth-child(3){ animation-delay:.30s; background:var(--brand-purple); }
@keyframes bot-think{
  0%, 80%, 100% { opacity:.35; transform: translateY(0) scale(.85); }
  40%           { opacity:1;   transform: translateY(-3px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .bot-thinking{ display:none }
}

/* ---- streaming reveal (motion.dev-style word stagger) ---- */
.bubble.bot .stream-w{
  opacity:0;
  display:inline-block;
  transform:translateY(3px);
  filter:blur(2px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1), filter .32s ease;
}
.bubble.bot.is-revealed .stream-w{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Block containers (<li>, top-level <p>) collapse until their first word
   starts streaming. Using max-height (not just opacity) so they don't
   reserve layout space — the bubble grows into the content as it reveals
   instead of showing a tall empty area waiting for bullets to appear.
   max-height: 240px is generous enough for any block content in the demo. */
.bubble.bot .stream-block{
  opacity:0;
  max-height:0;
  overflow:hidden;
  transform:translateY(3px);
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.2,.7,.3,1),
    max-height .45s cubic-bezier(.22,1,.36,1);
}
.bubble.bot.is-revealed .stream-block{
  opacity:1;
  max-height:240px;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .bubble.bot .stream-block{ opacity:1; max-height:none; transform:none; transition:none }
}
/* Code block + citations fade up after prose finishes streaming. */
.bubble.bot .code,
.bubble.bot .cite{
  opacity:0;
  transform:translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.bubble.bot .code.stream-reveal,
.bubble.bot .cite.stream-reveal{
  opacity:1;
  transform:translateY(0);
}
.bubble.bot .cite.stream-reveal a{
  animation: cite-pop .42s cubic-bezier(.22,1.2,.36,1) backwards;
}
.bubble.bot .cite.stream-reveal a:nth-child(1){animation-delay:.04s}
.bubble.bot .cite.stream-reveal a:nth-child(2){animation-delay:.14s}
.bubble.bot .cite.stream-reveal a:nth-child(3){animation-delay:.24s}
.bubble.bot .cite.stream-reveal a:nth-child(4){animation-delay:.34s}
@keyframes cite-pop{
  from{opacity:0;transform:translateY(6px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Blinking caret while the bot is "still typing" — pinned to the bubble. */
.bubble.bot.streaming::after{
  content:"";
  display:inline-block;
  width:5px;height:1.05em;margin-left:3px;
  vertical-align:-2px;
  background: linear-gradient(180deg, var(--brand-purple), var(--brand-pink));
  border-radius:2px;
  animation: stream-caret 1.05s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(113,69,252,.45);
}
@keyframes stream-caret{
  0%, 100% { opacity:1;  transform: scaleY(1); }
  50%      { opacity:.15; transform: scaleY(.92); }
}

@media (prefers-reduced-motion: reduce){
  .bubble.bot .stream-w,
  .bubble.bot .code,
  .bubble.bot .cite{ opacity:1; transform:none; transition:none }
  .bubble.bot.streaming::after{ display:none }
  .bubble.bot .cite.stream-reveal a{ animation:none }
}

.code{
  margin-top:10px;
  background: var(--navy-deep);
  color: #d8dcec;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.65;
  padding:14px 16px;
  border-radius:8px;
  overflow-x:auto;
}
.code .ln{color:#4a5170;display:inline-block;width:1.6em;user-select:none}
.code .kw{color:#c4b5ff}
.code .str{color:#a6e3b9}
.code .num{color:#ffb38a}
.code .cm{color:#586280;font-style:italic}
.code .fn{color:#9bd1ff}

.cite{
  margin-top:12px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.cite a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;
  padding:5px 9px;border-radius:6px;
  background:var(--paper-3);color:var(--ink-2);
  border:1px solid var(--rule);
  display:inline-flex;align-items:center;gap:6px;
}
.cite a:hover{ background:var(--lavender);color:var(--purple-deep);border-color:var(--lavender) }
.cite a::before{
  content:"";width:6px;height:6px;border-radius:1px;background:var(--grad-brand-v);
}

.demo-input{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  border-top:1px solid var(--rule);
  background:var(--paper-2);
}
.demo-input .field{
  flex:1;
  font-family:var(--f-body);font-size:14px;color:var(--ink-3);
}
.demo-input .send{
  width:34px;height:34px;border-radius:8px;
  background: var(--grad-brand);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 4px 14px -4px rgba(113,69,252,.55);
  transition: transform .18s ease, box-shadow .25s ease;
}
.demo-input .send:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 8px 18px -6px rgba(113,69,252,.65);
}
.demo-input .send svg{width:14px;height:14px}

/* =========================================================================
   TRUST BAR
   ========================================================================= */
.trust{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background: var(--paper-2);
  padding: 28px 0;
  margin-top: 40px;
}
.trust-inner{
  display:grid;grid-template-columns: 220px 1fr;align-items:center;gap:36px;
}
.trust-eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.45;
}
.trust-eyebrow b{display:block;color:var(--navy);font-weight:600;margin-bottom:2px;}
.trust-marquee{
  position:relative;overflow:hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.trust-track{
  display:flex;align-items:center;gap:64px;
  width:max-content;
  animation: marquee 56s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.trust:hover .trust-track{ animation-play-state: paused }

/* Logo wall — grayscale at rest, brand-color on hover */
.logo{
  flex-shrink:0;
  height:28px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  filter:grayscale(100%) opacity(.55);
  transition:filter .25s ease, opacity .25s ease, transform .25s cubic-bezier(.2,.85,.25,1);
}
.logo:hover{
  filter:grayscale(0%) opacity(1);
  transform:translateY(-1px);
}
/* Smaller bump for bigger glyphs to keep visual rhythm */
.logo[data-shrink]{ height:22px }

@media (max-width:760px){
  .trust-inner{grid-template-columns:1fr;gap:18px}
}

/* =========================================================================
   MANIFESTO STRIP
   ========================================================================= */
.manifesto{
  padding: 88px 0 72px;
}
.manifesto h2{
  font-size:clamp(28px, 4.5vw, 64px);
  font-weight:500;
  line-height:1.04;
  max-width:22ch;
}
.manifesto h2 .strike{
  color:var(--ink-3);
  font-weight:400;
}
.strike{
  position:relative; display:inline-block;
}
.strike::after{
  content:""; position:absolute; left:-2px; right:-2px; top:55%;
  height:2px; background: var(--rule-strong);
  transform: scaleX(1); transform-origin: left center;
  transition: transform .9s cubic-bezier(.7,0,.3,1);
  will-change: transform;
}
.has-js .strike::after { transform: scaleX(0); }
.strike.is-out::after { transform: scaleX(1); }
.manifesto h2 mark{
  background: transparent;color:var(--brand-purple);font-weight:600;
}
.manifesto-foot{
  margin-top:36px;
  display:flex;flex-wrap:wrap;gap:14px 28px;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-2);letter-spacing:.04em;
}

/* =========================================================================
   SECTION DEFAULTS
   ========================================================================= */
section{position:relative}
.section{padding: 96px 0}
.section-head{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;
  margin-bottom:64px;
}
@media (max-width:900px){
  .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:42px}
}

/* =========================================================================
   THE PAIN — asymmetric editorial
   ========================================================================= */
.pain{
  background: var(--paper-2);
}
.pain-grid{
  display:grid;grid-template-columns: 1fr 1fr; gap:80px;
  align-items:start;
}
@media (max-width:980px){ .pain-grid{grid-template-columns:1fr;gap:42px} }
.pain h2{margin-bottom:20px}
.pain .lede{margin-bottom:0}
.pain-points{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
}
.pain-point{
  padding:24px 0;
  border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns: 56px 1fr 28px;gap:18px;align-items:start;
  cursor:pointer;
  transition: padding .25s cubic-bezier(.2,.7,.2,1);
}
.pain-point .num{
  font-family:var(--f-mono);font-size:12px;color:var(--purple);
  font-weight:600;letter-spacing:.04em;padding-top:8px;
}
.pain-point h3{
  margin:0;font-size:20px;
  transition: color .2s ease;
}
.pain-point-body{
  display:grid;
  grid-template-rows: 0fr;
  opacity:0;
  transition:
    grid-template-rows .6s cubic-bezier(.32,.72,0,1),
    opacity .45s cubic-bezier(.32,.72,0,1),
    margin-top .55s cubic-bezier(.32,.72,0,1);
}
.pain-point-body > p{
  overflow:hidden;
  min-height:0;
  font-size:15.5px;line-height:1.55;color:var(--ink-2);
  margin:0;
}
.pain-point-toggle{
  align-self:center;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);
  transition: color .3s cubic-bezier(.32,.72,0,1), transform .55s cubic-bezier(.32,.72,0,1);
}
.pain-point-toggle svg{ width:14px; height:14px; }
.pain-point:hover h3,
.pain-point.is-open h3{ color:var(--brand-purple); }
.pain-point:hover .pain-point-toggle,
.pain-point.is-open .pain-point-toggle{
  color:var(--brand-purple);
  transform:rotate(180deg);
}
.pain-point:hover .pain-point-body,
.pain-point:focus-visible .pain-point-body,
.pain-point.is-open .pain-point-body{
  grid-template-rows: 1fr;
  opacity:1;
  margin-top:12px;
}
.pain-point:focus-visible{ outline: 2px solid var(--brand-purple); outline-offset: 4px; border-radius: 4px; }
.pain-banner{
  margin-top:48px;
  padding:22px 28px 22px 31px;
  border:1px solid var(--rule);
  background:var(--paper);
  border-radius:0 10px 10px 0;
  display:flex;align-items:flex-start;gap:14px;
  position:relative;
}
.pain-banner::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background: var(--grad-brand-v);
}
.pain-banner .arrow{
  font-family:var(--f-mono);font-size:18px;line-height:1.2;font-weight:600;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pain-banner p{
  color:var(--navy);font-size:16.5px;line-height:1.5;
}
.pain-banner b{font-weight:600}

/* =========================================================================
   PROCESS — 4 verbs, horizontal industrial timeline
   ========================================================================= */
.process .section-head{margin-bottom:56px}
.process-rail{
  position:relative;
  display:grid;grid-template-columns:repeat(4, 1fr);gap:28px;
}
.process-rail::before{
  content:"";
  position:absolute;left:0;right:0;top:24px;
  height:1px;background:var(--rule);
  z-index:0;
  transform: scaleX(var(--line-progress, 1));
  transform-origin: left center;
  will-change: transform;
}
.step{
  position:relative;z-index:1;
  padding-right:18px;
}
.step .pin{
  width:48px;height:48px;border-radius:12px;
  background:var(--paper);border:1px solid var(--rule);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:600;font-size:13px;color:var(--purple);
  margin-bottom:20px;
  box-shadow: var(--shadow-1);
}
.step h3{font-size:21px;margin-bottom:10px}
.step p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.step .verb{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;display:block;
}
@media (max-width:900px){
  .process-rail{grid-template-columns:1fr;gap:14px}
  .process-rail::before{display:none}
  .step{padding:22px 0;border-bottom:1px solid var(--rule)}
  .step:last-child{border-bottom:0}
}

/* =========================================================================
   AGENTS — alternating capability rows with realistic UI mocks
   ========================================================================= */
.agents{
  background: var(--paper);
}
.agents-head{margin-bottom:24px}
.agents-rows{display:flex;flex-direction:column;gap:0}
.agent-row{
  display:grid;grid-template-columns: 1fr 1fr; gap:80px;
  align-items:center;
  padding:80px 0;
  border-bottom:1px solid var(--rule);
}
.agent-row:last-child{border-bottom:0}
.agent-row.flip{ grid-template-columns: 1fr 1fr; }
.agent-row.flip .agent-copy{order:2}
.agent-row.flip .agent-mock{order:1}
@media (max-width:980px){
  .agent-row, .agent-row.flip{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .agent-row.flip .agent-copy{order:1}
  .agent-row.flip .agent-mock{order:2}
}
.agent-tag-line{
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom:14px;display:inline-flex;align-items:center;gap:10px;
}
.agent-tag-line .num{
  -webkit-text-fill-color: var(--ink-3);
  color: var(--ink-3);
  background: none;
}
.agent-copy h3{font-size:clamp(26px, 2.4vw, 36px);margin-bottom:14px;letter-spacing:-.02em}
.agent-copy p{font-size:16.5px;line-height:1.55;max-width:46ch;margin-bottom:20px}
.agent-copy .stack{
  display:flex;flex-wrap:wrap;gap:8px;
}
.agent-copy .stack span{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-2);
  padding:5px 10px;border-radius:6px;
  border:1px solid var(--rule);
  background:var(--paper-2);
}

/* generic mock card */
.mock{
  background: var(--paper);
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow: var(--shadow-1);
  overflow:hidden;
}
.mock-bar{
  padding:12px 14px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);
  background:var(--paper-2);
}
.mock-bar .lbl{font-weight:600;color:var(--navy);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.mock-bar .pill{
  margin-left:auto;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  padding:3px 8px;border-radius:5px;
  background:var(--lavender);color:var(--purple-deep);
}
.mock-body{padding:18px}

/* PLC mock */
.plc-tree{display:flex;flex-direction:column;gap:2px;font-family:var(--f-mono);font-size:13px}
.plc-tree .row{
  display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;
  color:var(--ink-2);
}
.plc-tree .row.hi{
  background: linear-gradient(90deg, rgba(113,69,252,.16), rgba(248,173,240,.18));
  color: var(--navy);
  font-weight:600;
}
.plc-tree .row .ic{
  width:14px;height:14px;border-radius:3px;background:var(--rule-strong);flex-shrink:0;
}
.plc-tree .row.hi .ic{ background: var(--grad-brand-v) }
.plc-tree .row .addr{margin-left:auto;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.plc-tree .row.indent{padding-left:26px}
.plc-tree .row.indent2{padding-left:46px}

/* EPLAN mock */
.eplan{
  position:relative;
  height:240px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(26,31,46,.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,31,46,.05) 23px 24px),
    var(--paper);
  border-radius:8px;
  border:1px solid var(--rule);
  overflow:hidden;
}
.cab{
  position:absolute;border:1.5px solid var(--navy);background:var(--paper);
  border-radius:3px;
}
.cab .cab-l{
  position:absolute;left:-32px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10px;color:var(--ink-3);letter-spacing:.04em;
}
.cab1{left:24px;top:30px;width:84px;height:160px}
.cab2{left:140px;top:48px;width:86px;height:96px}
.cab3{left:262px;top:30px;width:78px;height:160px}
.cab .row{
  height:18px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;font-family:var(--f-mono);font-size:9.5px;color:var(--ink-2);
}
.cab .row:last-child{border-bottom:0}
.cab .row.hot{
  background: linear-gradient(90deg, rgba(113,69,252,.18), rgba(248,173,240,.20));
  color:var(--navy);font-weight:600;
}
.cab .row .id{font-weight:500}
.eplan-cross{
  position:absolute;top:60px;left:308px;
  width:28px;height:28px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 11px, var(--paper) 11px 12px, transparent 12px) padding-box,
    var(--grad-brand) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 0 6px rgba(170,124,244,.18);
}
.eplan-cross::after{
  content:"-94B1";position:absolute;left:38px;top:5px;
  font-family:var(--f-mono);font-size:11px;font-weight:600;white-space:nowrap;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eplan-meta{
  margin-top:14px;
  display:flex;gap:18px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);
}
.eplan-meta b{color:var(--navy);font-weight:600}

/* SQL chart */
.chart{
  height:160px;display:flex;align-items:flex-end;gap:6px;
  padding:0 4px;
}
.chart .bar{
  flex:1;background:var(--rule-strong);border-radius:2px 2px 0 0;
  position:relative;
}
.chart .bar.hi{
  background: var(--grad-brand-v);
  box-shadow: 0 0 18px -4px rgba(170,124,244,.6);
}
.chart .bar.warn{background:#e8b46f}
.chart-meta{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);
  margin-top:8px;letter-spacing:.04em;
}
.chart-fact{
  margin-top:14px;padding:10px 12px;border-radius:8px;
  background:var(--lavender);color:var(--purple-deep);
  font-family:var(--f-mono);font-size:11.5px;
}
.chart-fact b{font-weight:600}

/* doc agent */
.doc-snip{
  font-family:var(--f-body);font-size:13.5px;line-height:1.55;color:var(--ink-2);
  padding:16px 18px;background:var(--paper-2);border-radius:8px;
  border:1px solid var(--rule);
  position:relative;
}
.doc-snip .hl{
  background:var(--lavender);color:var(--purple-deep);
  padding:1px 4px;border-radius:3px;
}
.doc-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-2);
}
.doc-foot a{
  color:var(--purple-deep);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
}
.doc-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.doc-list .doc{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);
  padding:8px 10px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);
}
.doc-list .doc .ext{
  font-size:9.5px;font-weight:600;color:var(--paper);
  background:var(--navy);padding:2px 5px;border-radius:3px;letter-spacing:.06em;
}
.doc-list .doc .name{color:var(--navy);font-weight:500}
.doc-list .doc .pg{margin-left:auto;color:var(--ink-3)}

/* journal */
.jrnl{
  background:#fff8ec;
  border:1px dashed #c8a050;
  border-radius:6px;
  padding:18px 16px 14px;
  font-family:'Caveat',var(--f-body);
  position:relative;
}
.jrnl::before{
  content:"";position:absolute;left:0;right:0;top:32px;
  height:1px;background:rgba(200,160,80,.25);
}
.jrnl-line{font-size:14px;color:#5a4a26;line-height:1.7;border-bottom:1px solid rgba(200,160,80,.18);padding:6px 0}
.jrnl-line:last-child{border-bottom:0}
.jrnl-line .date{display:inline-block;width:60px;color:#9a7a36;font-size:12px;font-family:var(--f-mono)}
.jrnl-out{
  margin-top:14px;padding:12px 14px;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--rule);
  font-family:var(--f-body);font-size:14px;line-height:1.55;color:var(--navy);
}
.jrnl-out b{color:var(--purple-deep);font-weight:600}

/* =========================================================================
   §04 CASE STUDIES — editorial industrial spec sheet
   Scoped to homepage carousel (.cases). Subpages use cs-* namespace.
   ========================================================================= */

/* Section frame — subtle off-white band + brand hairline opener */
.section.cases{ background: var(--paper-2); }
.section.cases::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(113,69,252,.38) 30%,
    rgba(248,173,240,.38) 70%,
    transparent 100%);
}

/* Factory photo — sits inside the right aside, above the testimonial */
.case-photo{
  position: relative;
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
}
.case-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.case-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(26,31,46,.08);
}
@media (max-width: 980px){
  .case-photo{ aspect-ratio: 16 / 9; margin: 0 0 20px; }
}

/* Industrial spec strip — top of every slide */
.case-spec{
  display: grid;
  grid-template-columns: 96px 1fr 1.4fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.case-spec-field{
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.case-spec-field:first-child{ padding-left: 0; }
.case-spec-field:last-child{ border-right: 0; padding-right: 0; }
.case-spec-field dt{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 7px;
}
.case-spec-field dd{
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.005em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-spec-field:first-child dd{
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: .04em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.case-spec-logo{
  display: block;
  height: auto;
  width: auto;
  max-height: 18px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: .92;
}
@media (max-width: 980px){
  .case-spec-logo{ max-height: 16px; }
}
@media (max-width: 980px){
  .case-spec{ grid-template-columns: 72px 1fr 1fr; padding: 16px 0; }
  .case-spec-field:nth-child(4){ display: none; }
  .case-spec-field{ padding: 0 16px; }
}
@media (max-width: 600px){
  .case-spec{
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    padding: 18px 0;
  }
  .case-spec-field{ padding: 0; border-right: 0; }
  .case-spec-field:nth-child(4){ display: flex; }
}

/* Asymmetric body grid — wider copy column, narrower pull-quote */
.cases .case-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(48px, 5.5vw, 96px);
  align-items: start;
}
@media (max-width: 980px){
  .cases .case-grid{ grid-template-columns: 1fr; gap: 44px; }
}

/* Slide headline — h3 inside slide */
.case-h{
  margin: 2px 0 22px;
  text-wrap: balance;
}

/* Body copy — justified block, lede emphasis */
.cases .case-body .lede{
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--navy);
  max-width: 62ch;
  margin: 0 0 18px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: justify;
  hyphens: auto;
}
.cases .case-body p{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 62ch;
  text-align: justify;
  hyphens: auto;
}
.cases .case-body p b{ color: var(--navy); font-weight: 600; }
.cases .case-body p:last-of-type{ margin-bottom: 0; }
.case-cta-row{ margin-top: clamp(24px, 2.6vw, 36px); text-align: left; }

/* Right-aside pull-quote — gradient left rule, no card, sticky on desktop */
.case-aside{
  align-self: start;
}
.case-pull{
  position: relative;
  padding: 6px 0 0 28px;
  margin: 0;
}
.case-pull::before{
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--grad-brand-v);
}
.case-pull blockquote{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 1.65vw, 24px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 22px;
  quotes: "\201C" "\201D";
}
.case-pull blockquote::before{ content: open-quote; margin-right: 2px; }
.case-pull blockquote::after{ content: close-quote; margin-left: 1px; }

/* Attribution — stacked typography, no avatar ornament */
.case-attrib{
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.case-attrib .who{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  letter-spacing: -.005em;
}
.case-attrib .role{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: .04em;
  margin-top: 4px;
}

/* Brand logo at the top of a slide's body — anchors the company visually */
.case-brand-logo{
  display: block;
  height: auto;
  max-height: 36px;
  width: auto;
  max-width: 200px;
  margin: 0 0 22px;
  opacity: .9;
}

/* Stats row — gradient micro-tick + tabular nums + larger numerals */
.case-stats{
  list-style: none;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.case-stats--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cases .case-stat{
  position: relative;
  padding: 32px 28px 28px;
  border-right: 1px solid var(--rule);
  margin: 0;
  transition: transform .35s cubic-bezier(.2, .85, .25, 1);
}
.cases .case-stat:last-child{ border-right: 0; }
.cases .case-stat::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 28px;
  background: var(--grad-brand-h);
  transform-origin: left center;
  transition:
    transform .7s cubic-bezier(.2, .85, .25, 1),
    width .55s cubic-bezier(.2, .85, .25, 1);
}
.cases .case-stat:nth-child(2)::before{ width: 22px; }
.cases .case-stat:nth-child(3)::before{ width: 34px; }
.cases .case-stat:nth-child(4)::before{ width: 18px; }
/* JS-gated initial state — tick stays hidden until ScrollTrigger flips .is-revealed */
.has-js .cases .case-stat::before{ transform: scaleX(0); }
.has-js .cases .case-stat.is-revealed::before{ transform: scaleX(1); }
/* Hover — tick spans the full cell, tile lifts, underline draws, label brightens */
.cases .case-stat:hover{ transform: translateY(-2px); }
.cases .case-stat:hover::before{ width: 100%; }

.cases .case-stat .big{
  font-family: var(--f-display);
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  position: relative;
}
.cases .case-stat .big::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--grad-brand-h);
  transition: width .55s cubic-bezier(.2, .85, .25, 1) .05s;
}
.cases .case-stat:hover .big::after{ width: 100%; }
.cases .case-stat .lbl{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
  max-width: 22ch;
  transition: color .35s ease;
}
.cases .case-stat:hover .lbl{ color: var(--ink-2); }

@media (prefers-reduced-motion: reduce){
  .cases .case-stat,
  .cases .case-stat::before,
  .cases .case-stat .big::after,
  .cases .case-stat .lbl{ transition: none; }
  .cases .case-stat:hover{ transform: none; }
  .has-js .cases .case-stat::before{ transform: scaleX(1); }
}
.case-stat-unit{
  font-family: var(--f-mono);
  font-size: .34em;
  vertical-align: baseline;
  color: var(--brand-purple);
  font-weight: 600;
  letter-spacing: .04em;
}
@media (max-width: 980px){
  .case-stats{ grid-template-columns: repeat(2, 1fr); }
  .cases .case-stat{ border-right: 1px solid var(--rule); }
  .cases .case-stat:nth-child(2n){ border-right: 0; }
  .cases .case-stat:nth-child(-n+2){ border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px){
  .case-stats{ grid-template-columns: 1fr; }
  .cases .case-stat{ border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px 0; }
  .cases .case-stat:last-child{ border-bottom: 0; }
}

/* Bottom CTA — kicker note above button, hairline divider on top */
.cases .case-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.cases .case-cta-note{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cases .case-cta-note::before{
  content: "";
  width: 24px;
  height: 1px;
  background: var(--grad-brand-h);
}

/* Mega-bar muted state for "coming soon" case cards — preserved utility */
.megabar-case--muted{
  opacity: .68;
  filter: saturate(0.75);
}
.megabar-case--muted:hover{ opacity: .9; filter: saturate(1); }

/* =========================================================================
   STATS BANNER
   ========================================================================= */
.stats{
  padding: 96px 0;
  background:var(--paper);
}
.stats .anchor{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);
  margin-bottom:36px;
  display:flex;align-items:center;gap:12px;
}
.stats .anchor::before{
  content:"";width:24px;height:1px;background:var(--rule-strong);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
}
@media (max-width:780px){.stats-grid{grid-template-columns:1fr}}
.stat{
  padding:36px 0 32px;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  padding-right:24px;
}
.stat:last-child{border-right:0;padding-right:0}
@media (max-width:780px){
  .stat:nth-child(2n){border-right:0;padding-right:0;padding-left:24px}
  .stat:nth-child(odd){padding-right:24px}
}
.stat .n{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(40px, 4.6vw, 64px);letter-spacing:-.025em;color:var(--navy);
  line-height:1;
}
.stat .n .u{
  font-family:var(--f-mono);font-size:.36em;font-weight:600;letter-spacing:.04em;
  margin-left:4px;vertical-align:.5em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat .lbl{
  margin-top:14px;
  font-family:var(--f-body);font-size:14px;color:var(--ink-2);line-height:1.45;
  max-width:24ch;
}

/* =========================================================================
   VOICES — datasheet-card testimonial wall
   Unified paper-card style for every quote. Emphasis comes from a tag chip,
   sequence number, spec strip and brand-gradient hairline, never from
   background color. Asymmetric 12-col grid kept for visual rhythm.
   ========================================================================= */
.voices{
  background:var(--paper-2);
}
.voice-wall{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
}

/* Card shell — datasheet vocabulary: paper-tone bg, hairline border,
   gradient ::before strip at top, soft drop shadow, paper highlight inset */
.voice{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:22px 24px 20px;
  display:flex;flex-direction:column;
  min-height:240px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 32px -16px rgba(37,46,61,.06);
  transition: transform .22s cubic-bezier(.2,.7,.2,1),
              box-shadow .22s ease, border-color .22s ease;
}
.voice::before{ display: none; }
.voice:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,
              0 18px 40px -18px rgba(37,46,61,.12);
  border-color: var(--rule-strong);
}
.voice:hover::before{ opacity:.85; }

/* Featured card — heavier hairline + slightly richer paper */
.voice.voice--featured{
  background: linear-gradient(180deg, #fbf9ff 0%, var(--paper) 60%);
}
.voice.voice--featured::before{ height:3px; opacity:.85; }
.voice.voice--featured .voice-quote{
  font-size:20px; line-height:1.38;
}

/* Pending sign-off card — slightly muted paper to mark provisional status */
.voice.voice--pending{
  background: linear-gradient(180deg, #f8f7fb 0%, var(--paper) 70%);
}

/* Dark variant — inverted navy card for grid contrast */
.voice.voice--dark{
  background: var(--navy);
  border-color: transparent;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 36px -18px rgba(26,31,46,.32);
}
.voice.voice--dark::before{ opacity:.45; }
.voice.voice--dark .voice-quote{ color:#fff; }
.voice.voice--dark .voice-glyph{ color:#E8B3EC; opacity:.85; }
.voice.voice--dark .who{ border-top-color: rgba(255,255,255,.12); }
.voice.voice--dark .who .name{ color:#fff; }
.voice.voice--dark .who .role{ color: rgba(255,255,255,.65); }
.voice.voice--dark .voice-logo{ filter: grayscale(1) brightness(0) invert(1); opacity:.55; }
.voice.voice--dark:hover .voice-logo{ opacity:.8; filter: grayscale(1) brightness(0) invert(1); }

/* Gradient variant — brand purple→pink card, for elevating a KPI metric */
.voice.voice--grad{
  background: linear-gradient(150deg, #7145FC 0%, #E8B3EC 145%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(26,31,46,.06),
    0 14px 36px -18px rgba(113,69,252,.38);
}
.voice.voice--grad::before{ display:none; }
.voice.voice--grad .voice-quote{ color:#fff; }
.voice.voice--grad .voice-glyph{ color:#fff; opacity:.65; }
.voice.voice--grad .who{ border-top-color: rgba(255,255,255,.22); }
.voice.voice--grad .who .name{ color:#fff; }
.voice.voice--grad .who .role{ color: rgba(255,255,255,.78); }
.voice.voice--grad .voice-logo{ filter: brightness(0) invert(1); opacity:.7; }

/* Big metric block — sits below .who on a gradient card */
.voice-metric{
  margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex; gap:28px; flex-wrap:wrap;
}
.voice-metric .m-num{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(26px, 2.8vw, 32px); line-height:1; color:#fff;
  letter-spacing:-0.01em;
}
.voice-metric .m-label{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.06em; color: rgba(255,255,255,.78);
  margin-top:6px;
}

/* Card head: sequence number, optional tag chip, optional logo */
.voice-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:16px;
}
.voice-num{
  font-family:var(--f-mono); font-size:10px; font-weight:700;
  color:var(--purple); letter-spacing:.10em;
}
.voice-tag{
  font-family:var(--f-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.10em;
  padding:3px 7px; border-radius:4px;
  border:1px solid transparent;
}
.voice-tag--pinned{
  color:var(--purple-deep);
  background: rgba(113,69,252,.08);
  border-color: rgba(113,69,252,.18);
}
.voice-tag--kpi{
  color:#0a4d2e;
  background: rgba(20,140,80,.08);
  border-color: rgba(20,140,80,.20);
}
.voice-tag--scale{
  color:var(--ink-2);
  background: rgba(37,46,61,.05);
  border-color: rgba(37,46,61,.14);
}
.voice-tag--pending{
  color:var(--ink-2);
  background: rgba(168,117,200,.08);
  border-color: rgba(168,117,200,.22);
  font-style:italic;
}
.voice-logo{
  margin-left:auto;
  height:28px; max-width:130px; width:auto;
  opacity:.65;
  filter: grayscale(1);
  transition: opacity .22s ease, filter .22s ease;
}
.voice:hover .voice-logo{ opacity:.85; filter:grayscale(0); }

/* Quote — open-glyph + body */
.voice-quote{
  font-family:var(--f-display); font-weight:500; font-size:17px;
  line-height:1.45; color:var(--navy);
  margin:0 0 18px; flex:1 1 auto;
  position:relative;
}
.voice-glyph{
  font-family: Georgia, "Times New Roman", serif;
  font-size:34px; line-height:0;
  color: var(--brand-purple);
  opacity:.35;
  margin-right:4px;
  vertical-align:-12px;
}

/* Who row — kept from original */
.voice .who{
  display:flex; flex-direction:column; gap:2px;
  padding-top:14px; border-top:1px solid var(--rule);
}
.voice .who .name{ font-weight:600; font-size:14px; color:var(--navy); }
.voice .who .role{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-2);
  letter-spacing:.02em; margin-top:2px;
}

/* Spec strip — substance row at the bottom, mono caps */
.voice-spec{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:12px; padding-top:10px;
  border-top:1px dashed rgba(37,46,61,.14);
  font-family:var(--f-mono); font-size:10px;
  color:var(--ink-2); letter-spacing:.04em;
}
.voice-spec-item{ white-space:nowrap; }
.voice-spec-key{
  font-weight:700; color:var(--purple);
  letter-spacing:.10em; margin-right:4px;
}
.voice-spec-sep{ color:var(--rule-strong); }

/* Asymmetric grid spans — kept from original for rhythm */
.voice-wall .v1{ grid-column: span 7; }
.voice-wall .v2{ grid-column: span 5; }
.voice-wall .v3{ grid-column: span 4; }
.voice-wall .v4{ grid-column: span 5; }
.voice-wall .v5{ grid-column: span 3; }
@media (max-width:980px){
  .voice-wall{ grid-template-columns:1fr; }
  .voice-wall > *{ grid-column: span 1 !important; }
}

@media (prefers-reduced-motion: reduce){
  .voice, .voice::before, .voice-logo{ transition:none; }
}

/* Floating cursor — factory photo + rotating "read case study" ring.
   Activated on hover over voice cards that carry data-voice-cursor. */
.voice[data-voice-cursor]{ cursor: none; }
.voice[data-voice-cursor]:focus-visible{ cursor: pointer; }
@media (hover: none){
  .voice[data-voice-cursor]{ cursor: auto; }
}
.voice-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  display: none;
}
.voice-cursor.is-ready{ display: block; }
.voice-cursor-stage{
  position: absolute;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition:
    transform 620ms cubic-bezier(.16,1,.3,1),
    opacity 480ms cubic-bezier(.4,0,.2,1);
}
.voice-cursor.is-active .voice-cursor-stage{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.voice-cursor-photo{
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background-color: var(--paper-2);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 28px 56px -22px rgba(13,13,24,.45),
    0 8px 18px rgba(13,13,24,.18);
}
.voice-cursor-ring{
  position: absolute;
  inset: 0;
  animation: voice-cursor-spin 14s linear infinite;
}
.voice-cursor-ring text{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  fill: var(--navy);
  transition: fill 200ms ease;
}
.voice-cursor.is-on-dark .voice-cursor-ring text{ fill: #fff; }
@keyframes voice-cursor-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .voice-cursor-ring{ animation: none; }
  .voice-cursor-stage{ transition: opacity 150ms ease; }
}

/* =========================================================================
   POC + ICP combined
   ========================================================================= */
.engage{
  padding: 96px 0;
}
.engage-grid{
  display:grid;grid-template-columns: 1fr 1fr; gap:80px;
}
@media (max-width:980px){.engage-grid{grid-template-columns:1fr;gap:42px}}
.poc-list{
  list-style:none;
  border-top:1px solid var(--rule);
  margin-top:28px;
}
.poc-list li{
  padding:24px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start;
}
.poc-list .num{
  font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.04em;
  padding-top:4px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.poc-list h4{font-size:18px;margin-bottom:6px}
.poc-list p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

.icp{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:16px;
  padding:32px 30px;
}
.icp h4{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);margin-bottom:16px;
}
.icp ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.icp li{
  font-size:15px;line-height:1.5;color:var(--navy);
  display:flex;gap:12px;align-items:flex-start;
}
.icp li::before{
  content:"";flex-shrink:0;
  width:14px;height:14px;border-radius:50%;
  margin-top:5px;
  background:
    radial-gradient(circle at 50% 50%, var(--brand-pink) 0 3.5px, transparent 4px) padding-box,
    var(--grad-brand) border-box;
  border: 1.5px solid transparent;
}
.icp.no li::before{
  background:
    linear-gradient(45deg, transparent 45%, var(--rule-strong) 45%, var(--rule-strong) 55%, transparent 55%) padding-box,
    var(--rule-strong) border-box;
  border: 1.5px solid var(--rule-strong);
}
.icp + .icp{margin-top:18px}
.icp .foot{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-2);font-style:italic;
}

/* =========================================================================
   SECURITY STRIP
   ========================================================================= */
.sec{
  background:var(--navy-deep);color:#e7e9f0;
  padding:42px 0;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--navy);
}
.sec-inner{
  display:grid;grid-template-columns: auto 1fr auto;gap:36px;align-items:center;
}
@media (max-width:780px){.sec-inner{grid-template-columns:1fr;gap:18px}}
.sec h3{color:#fff;font-size:20px;font-weight:500;letter-spacing:-.01em}
.sec h3 b{font-weight:600}
.sec-badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;
  padding:8px 12px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#d8dcec;
}
.badge .ok{
  width:6px;height:6px;border-radius:50%;background:var(--purple-soft);
}
.badge.prep .ok{background:#e8b46f}
.sec a.link{
  font-family:var(--f-body);font-size:14px;color:#fff;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px;
}
.sec a.link:hover{border-bottom-color:#fff}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.cta{
  background:var(--navy-deep);color:#fff;
  padding: 120px 0;
  position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;
  inset: -240px -160px auto auto;
  width:640px;height:640px;
  background:
    radial-gradient(closest-side, rgba(248,173,240,.20), transparent 70%),
    radial-gradient(closest-side at 60% 40%, rgba(113,69,252,.16), transparent 70%);
  pointer-events:none;
  filter: blur(8px);
}
.cta::after{
  content:"";position:absolute;
  inset: auto auto -180px -120px;
  width:420px;height:420px;
  background: radial-gradient(closest-side, rgba(108,92,231,.18), transparent 70%);
  pointer-events:none;
}
.cta-inner{display:grid;grid-template-columns: 1fr 1fr;gap:60px;align-items:end}
@media (max-width:980px){.cta-inner{grid-template-columns:1fr;gap:32px}}
.cta h2{
  color:#fff;font-weight:500;
  font-size:clamp(34px, 5vw, 72px);line-height:1.02;letter-spacing:-.025em;
}
.cta h2 em{font-style:normal;color:var(--purple-soft);font-weight:600}
.cta p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.55;margin-top:18px;max-width:46ch}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
/* dark CTA uses the global gradient .btn-primary; only the ghost button needs an override */
.cta .btn-ghost{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.25);
}
.cta .btn-ghost:hover{border-color:#fff}
.cta-meta{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);
  margin-top:6px;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  background:#0c0e16;color:#a8aebc;padding:72px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap:42px;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h5{
  color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
}
.footer .desc{font-size:14.5px;line-height:1.55;color:#a8aebc;max-width:32ch;margin:14px 0 20px}
.footer .brand{color:#fff}
.footer .brand-mark{background:var(--purple);color:#fff}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer li a{font-size:14px;color:#a8aebc;transition: color .15s ease}
.footer li a:hover{color:#fff}
.footer-bot{
  margin-top:56px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
  font-family:var(--f-mono);font-size:11px;color:#6a7184;letter-spacing:.04em;
}
.footer-bot a:hover{color:#fff}
.footer-bot .legal{display:flex;gap:18px;flex-wrap:wrap}

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
/* .reveal initial state is set by .has-js gating so non-JS users see content. */
.reveal{will-change: opacity, transform}

/* SVG arrows */
.ar{display:inline-block;line-height:0;vertical-align:middle}
.ar svg{width:16px;height:16px}

/* ============== JS-gated initial states (GSAP animates from these) ============== */
.has-js .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
.has-js .hero-line, .has-js .hero h1, .has-js .hero-sub,
.has-js .hero-ctas, .has-js .hero-meta, .has-js .demo {
  opacity: 0; transform: translateY(22px); will-change: opacity, transform;
}
.has-js .voice { opacity: 0; transform: translateY(24px) scale(.985); will-change: opacity, transform; }
.has-js .step .pin { opacity: 0; transform: scale(.85); will-change: opacity, transform; }
.has-js .plc-tree .row, .has-js .doc-list .doc, .has-js .jrnl-line {
  opacity: 0; transform: translateX(-10px); will-change: opacity, transform;
}
.has-js .eplan .cab { opacity: 0; transform: translateY(12px); will-change: opacity, transform; }
.has-js .eplan-cross { opacity: 0; transform: scale(0); will-change: opacity, transform; }
.has-js .chart .bar { transform: scaleY(0); transform-origin: bottom; will-change: transform; }
/* hero highlight initial state set on .hero h1 em above (background-size 0) */
.has-js .process-rail { --line-progress: 0; }

/* =========================================================================
   MULTI-PAGE SITE ADDITIONS
   ========================================================================= */

/* --- Real logo image (replaces inline SVG sparkle) --- */
.brand-img{ height: 36px; width: auto; display: block; }
/* Footer-light variant: logo already lives on a light bg in colour, so
   the legacy invert filter is now a no-op. Kept as a hook for any other
   placement that needs a tonal pass later. */
.brand-img-light{ filter: none; }
@media (max-width: 720px){ .brand-img{ height: 30px } }

/* --- Mobile nav toggle + drawer --- */
.nav-toggle{
  display: none;
  width: 40px; height: 40px; border-radius: 8px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--rule); cursor: pointer;
  margin-left: 4px;
}
.nav-toggle span{
  display: block; width: 18px; height: 1.5px; background: var(--navy);
  transition: transform .25s ease, opacity .15s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity: 0 }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg) }

.nav-mobile{
  position: fixed; top: 68px; left: 0; right: 0;
  height: calc(100dvh - 68px);
  max-height: calc(100dvh - 68px);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              visibility 0s linear .45s;
  z-index: 49;
  visibility: hidden;
  overflow: hidden;
  overscroll-behavior: contain;
}
.nav-mobile.is-open{
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              visibility 0s linear 0s;
}
/* Soft fade hint at the bottom edge — signals "more below" when scrollable. */
.nav-mobile::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247,245,237,0) 0%, var(--paper) 92%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.nav-mobile.is-open.is-scrollable::after{ opacity: 1; }
.nav-mobile-inner{
  height: 100%;
  overflow-y: auto;
  padding: 4px 0 32px;
  -webkit-overflow-scrolling: touch;
  /* Faint dot grid: distinctive editorial backdrop, low cost. */
  background-image: radial-gradient(circle at 1px 1px, rgba(13,13,24,.06) 1px, transparent 0);
  background-size: 26px 26px;
  background-position: 0 0;
}

@media (max-width: 980px){
  .nav-toggle{ display: inline-flex }
  .nav-utility .lang, .nav-utility .nav-login, .nav-utility .nav-demo-btn{ display: none }
}

/* --- Sub-page: form --- */
.page-hero{ padding: 96px 0 32px; border-bottom: 1px solid var(--rule); background: var(--paper-2) }
.page-hero h1{ font-size: clamp(36px, 5vw, 64px); line-height: 1.04; margin-top: 14px; max-width: 22ch }
.page-hero .lede{ font-size: clamp(17px, 1.4vw, 20px); max-width: 56ch; margin-top: 20px }
@media (max-width: 600px){
  .page-hero{ padding: 56px 0 24px }
  .page-hero h1{ font-size: clamp(28px, 7vw, 40px); max-width: none }
  .page-hero .lede{ font-size: 16px; margin-top: 14px }
}

/* Code blocks: shrink type on small viewports so syntax-highlighted samples
   read without aggressive horizontal scrolling. */
@media (max-width: 600px){
  .code{ font-size: 11.5px; padding: 12px 14px }
}

.form-shell{ padding: 64px 0 96px }
.form-grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start }
@media (max-width: 980px){ .form-grid{ grid-template-columns: 1fr; gap: 48px } }

.book-form{ display: flex; flex-direction: column; gap: 18px }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 720px){ .field-row{ grid-template-columns: 1fr } }
.field{ display: flex; flex-direction: column; gap: 6px }
.field label{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
.field label .req{ color: var(--brand-purple); margin-left: 2px }
.field input, .field select, .field textarea{
  font-family: var(--f-body); font-size: 15px; line-height: 1.4;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--navy);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 0;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(113,69,252,.12);
}
.field textarea{ resize: vertical; min-height: 110px }

/* ---- Custom select dropdown ---- */
.cdrop{ position: relative; }
.cdrop-native{
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
}
.cdrop-trigger{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: var(--f-body); font-size: 15px; line-height: 1.4;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cdrop-trigger:hover{ border-color: var(--ink-3); }
.cdrop.is-open .cdrop-trigger,
.cdrop-trigger:focus-visible{
  outline: 0;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(113,69,252,.12);
}
.cdrop-value{
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cdrop-value.is-placeholder{ color: var(--ink-3); }
.cdrop-chev{
  flex-shrink: 0;
  width: 10px; height: 6px;
  color: var(--ink-2);
  margin-left: 10px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), color .15s ease;
}
.cdrop.is-open .cdrop-chev{ transform: rotate(180deg); color: var(--brand-purple); }
.cdrop-panel{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 30;
  list-style: none;
  margin: 0; padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 40px -12px rgba(26,31,46,.18),
    0 4px 10px -3px rgba(26,31,46,.08);
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.cdrop.is-open .cdrop-panel{
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.cdrop-option{
  font-family: var(--f-body); font-size: 14.5px; line-height: 1.4;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--navy);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  transition: background .12s ease, color .12s ease;
}
.cdrop-flag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  width: 22px;
  flex-shrink: 0;
  margin-right: 8px;
}
.cdrop-option-text{ flex: 1; min-width: 0; }
.cdrop-option:hover,
.cdrop-option.is-focused{ background: var(--paper-2); }
.cdrop-option[aria-selected="true"]{
  background: rgba(113,69,252,.08);
  color: var(--brand-purple);
  font-weight: 500;
}
.cdrop-option[aria-selected="true"]::after{
  content: "";
  width: 14px; height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237145FC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  flex-shrink: 0;
}
.field.has-error .cdrop-trigger{
  border-color: #c53030;
  box-shadow: 0 0 0 3px rgba(197,48,48,.10);
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color: #c53030;
  box-shadow: 0 0 0 3px rgba(197,48,48,.10);
}
.field .err{ display: none; font-size: 13px; color: #c53030 }
.field.has-error .err{ display: block }
.book-form button[type=submit]{ align-self: flex-start; margin-top: 8px }

.book-status{
  margin-top: 14px; padding: 14px 18px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(113,69,252,.06), rgba(248,173,240,.10));
  border: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.5; color: var(--navy);
  display: none;
}
.book-status.is-success{ display: block; border-color: rgba(113,69,252,.25) }
.book-status.is-error{ display: block; color: #c53030; border-color: rgba(197,48,48,.25); background: rgba(197,48,48,.06) }

.form-aside{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 30px;
}
.form-aside h3{ font-size: 18px; margin-bottom: 14px }
.form-aside ul{ list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px }
.form-aside li{ display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.form-aside li::before{
  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-brand); margin-top: 8px;
}
/* =========================================================================
   CONTACT PAGE — Jakub card on the left, form on the right, sales team below
   ========================================================================= */
.contact-shell{
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.contact-grid{
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
}
.contact-card{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 18px 26px;
  position: sticky;
  top: 88px;
}
.contact-card-photo{
  margin-bottom: 18px;
  border-radius: 14px;
}
.contact-card-tag--overlay{
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}
.contact-card .contact-card-cta{
  margin: 0 0 22px;
  width: 100%;
}
.contact-card .contact-details{
  margin: 0;
}
@media (max-width: 900px){
  .contact-card{ position: static; }
}
.contact-card-mark{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.contact-avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: white;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  overflow: hidden;
}
.contact-avatar img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.contact-card-tag{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
}
.contact-card-name{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 4px;
}
.contact-card-role{
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.contact-card-cta{
  width: 100%; justify-content: center;
  margin-bottom: 22px;
}
.contact-details{
  list-style: none;
  margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column;
  gap: 14px;
}
.contact-details li{
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--navy);
  line-height: 1.4;
}
.contact-det-key{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.contact-det-val{
  color: var(--navy);
  text-decoration: none;
}
.contact-det-val:hover{ color: var(--brand-purple); }

.contact-form-head{
  margin-bottom: 28px;
}
.contact-form-head h2{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 10px 0 0;
}
.contact-form-lede{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 56ch;
}
.contact-form-disclaimer{
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.contact-form-disclaimer a{
  color: var(--brand-purple);
}

/* Sales section */
.contact-sales{
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
  background: var(--paper);
}
.contact-section-head{
  text-align: left;
  margin-bottom: 36px;
  max-width: 720px;
}
.contact-section-head h2{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 8px 0 12px;
}
.contact-sales-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
@media (max-width: 460px){
  .contact-sales-grid{ grid-template-columns: 1fr; max-width: 360px; }
}
.contact-sales-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-sales-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.contact-sales-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.contact-sales-meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 56px 26px 22px;
  background: linear-gradient(to top,
    rgba(11,16,32,0.82) 0%,
    rgba(11,16,32,0.55) 45%,
    rgba(11,16,32,0) 100%);
  color: #fff;
}
.contact-sales-name{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 4px;
}
.contact-sales-role{
  font-family: var(--f-body);
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.contact-sales-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--navy);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.contact-sales-cta:hover{
  background: var(--paper-2);
  border-color: var(--navy);
}
.contact-sales-cta:hover .contact-sales-arrow{
  transform: translate(2px,-2px);
}
.contact-sales-arrow{
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}

/* What happens next */
.contact-next{
  padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 9vw, 120px);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.contact-next-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  max-width: 920px;
}
@media (max-width: 760px){
  .contact-next-list{ grid-template-columns: 1fr; }
}
.contact-next-list > li{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding-top: 4px;
}
.contact-next-num{
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--brand-purple);
  padding-top: 3px;
}
.contact-next-body h3{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.3;
}
.contact-next-body p{
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.form-aside .contact{
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-2);
}
.form-aside .contact a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px }

/* =========================================================================
   404 — on-brand "trace unavailable" page
   ========================================================================= */
.err-page{
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
  text-align: center;
}
.err-page .wrap{ max-width: 880px; }

.err-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 32px;
}
.err-badge-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-purple);
  box-shadow: 0 0 0 4px rgba(113,69,252,.12);
}
.err-badge-sep{ color: var(--rule-strong); }

.err-h{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(54px, 8vw, 104px);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 0 0 28px;
}
.err-h em{
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.err-dek{
  font-family: var(--f-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto 36px;
}

.err-actions{
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Quick-links band */
.err-links{
  padding: clamp(56px, 7vw, 88px) 0 clamp(72px, 9vw, 112px);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.err-links-title{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 28px;
  text-align: center;
}
.err-links-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px){
  .err-links-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .err-links-grid{ grid-template-columns: 1fr; }
}
.err-link{
  position: relative;
  display: block;
  padding: 24px 24px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease, border-color .25s ease;
}
.err-link:hover{
  transform: translateY(-3px);
  border-color: var(--rule-strong);
  box-shadow: 0 14px 32px -12px rgba(37,46,61,.15);
}
.err-link-num{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: 14px;
  display: block;
}
.err-link-title{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 6px;
}
.err-link-desc{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.err-link-arrow{
  position: absolute;
  right: 22px; top: 22px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-3);
  transition: color .2s ease, transform .25s cubic-bezier(.2,.85,.25,1);
}
.err-link:hover .err-link-arrow{
  color: var(--brand-purple);
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .err-link, .err-link-arrow{ transition: none; }
}

/* =========================================================================
   BRAIN — pinned scrollytelling section with the 6 storyboard slides
   ========================================================================= */
.brain{
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.brain-track{
  /* Total scroll length = ~80vh per slide × 6 = 480vh */
  height: 480vh;
  position: relative;
}
.brain-pin{
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 56px 0 32px;
}
.brain-pin .wrap{ width: 100%; }

.brain-head{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  align-items: end;
  margin-bottom: 22px;
}
.brain-head h2{
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05; max-width: 22ch;
  margin-top: 14px;
}
@media (max-width: 900px){
  .brain-head{ grid-template-columns: 1fr; gap: 16px }
}

.brain-stage{
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  max-height: 62vh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #0d0d18;
  box-shadow: var(--shadow-2);
}
.brain-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.7,0,.3,1);
}
.brain-slide.is-on{ opacity: 1; pointer-events: auto }

.brain-progress{
  margin-top: 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brain-dots{ display: inline-flex; gap: 6px }
.brain-dots .dot{
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--rule-strong);
  border: 0; padding: 0; cursor: pointer;
  transition: background .25s ease, transform .15s ease;
}
.brain-dots .dot:hover{ transform: scaleY(1.6) }
.brain-dots .dot.is-on{ background: var(--brand-purple) }

.brain-counter{
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase;
}
.brain-counter .curr{
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.brain-hint{
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase;
  margin-left: auto;
  opacity: .7;
}

@media (max-width: 720px){
  .brain-track{ height: 360vh }
  .brain-stage{ aspect-ratio: 4/3; max-height: 70vh }
  .brain-pin{ padding: 32px 0 24px }
  .brain-hint{ display: none }
}

/* If the user prefers reduced motion, the section becomes a simple stacked grid */
@media (prefers-reduced-motion: reduce){
  .brain-track{ height: auto }
  .brain-pin{ position: static; height: auto; padding: 80px 0 }
  .brain-stage{ margin-bottom: 12px }
  .brain-slide{ position: relative; opacity: 1; pointer-events: auto }
  .brain-slide + .brain-slide{ margin-top: 12px }
  .brain-stage{ aspect-ratio: auto; height: auto }
}

/* =========================================================================
   THINKS — components extracted from edmund_thinks.html
   Question card → trace list → traced answer card
   Full interactive flow lives at /how-edmund-thinks.html
   ========================================================================= */
.thinks{
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.thinks-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .thinks-grid{ grid-template-columns: 1fr; gap: 16px }
}
.thinks-step{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.thinks-step .step-tag{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.thinks-step .step-tag i{
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.dot-coral{ background: #ff5e1a; box-shadow: 0 0 6px rgba(255,94,26,.6); animation: pulse 1.6s ease-in-out infinite; }
.dot-indigo{ background: var(--brand-purple); box-shadow: 0 0 6px rgba(113,69,252,.5); }
.dot-grad{ background: var(--grad-brand); }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

.thinks-step .step-q{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -.012em;
}
.thinks-step .step-meta{
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* Trace list */
.trace-list{ list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.trace-list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--navy);
}
.trace-list li > i{
  width: 10px; height: 10px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 0 8px currentColor;
}
.trace-list li b{ font-weight: 600; font-size: 13px }
.trace-list li .file{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
}

/* Answer card — accent variant */
.thinks-answer{
  background:
    linear-gradient(135deg, rgba(113,69,252,.04), rgba(248,173,240,.06)),
    var(--paper);
  border-color: rgba(113,69,252,.20);
  box-shadow: 0 18px 44px -16px rgba(113,69,252,.18);
}
.thinks-answer .ans-q{
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--brand-purple);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.thinks-answer .ans-body{
  font-size: 14px;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 14px;
}
.thinks-answer .ans-body code{
  font-family: var(--f-mono);
  font-size: 12px;
  background: rgba(113,69,252,.10);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--brand-purple);
  font-weight: 500;
}
.thinks-answer .ans-meta{ list-style: none; margin: 8px 0 14px; padding: 0; }
.thinks-answer .ans-meta li{
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.3;
}
.thinks-answer .ans-meta li::before{
  content: ""; position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 1px;
  background: var(--ink-3);
}
.thinks-answer .ans-cite{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.thinks-answer .ans-cite .cite{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  padding: 5px 9px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.thinks-answer .ans-cite .cite i{
  width: 8px; height: 8px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

.thinks-cta{
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.thinks-meta{
  font-size: 14px;
  color: var(--ink-2);
}


/* =========================================================================
   THINKS-FLOW — multi-section scroll with canvas node cluster

/* === Bring thinks-flow tokens onto the homepage brand === */
.thinks-flow{
  --paper:        #fafaf9;
  --paper-warm:   #faf8f3;
  --paper-cool:   #f4f4f2;
  --ink:          #1a1f2e;
  --ink-dim:      #5a6478;
  --ink-faint:    #8b95a8;
  --indigo:       #7145FC;
  --indigo-deep:  #5a3fc8;
  --indigo-soft:  #efe9ff;
  --lavender:     #a880ff;
  --blue:         #4998ee;
  --coral:        #f8adf0;
  --grey:         #8c92a8;
  --rule:         rgba(26,31,46,.10);
  --rule-strong:  rgba(26,31,46,.20);

  background: var(--paper-2, #fafaf9);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: #1a1f2e;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

/* Scale headings down to fit between the homepage hero and the agents section */
.thinks-flow .ch.hero h1{ font-size: clamp(36px, 4.4vw, 56px); }
.thinks-flow .ch h2{ font-size: clamp(26px, 2.4vw, 36px); }

/* The section sits inside index.html — no fullscreen mast/scroll-prog needed */
.thinks-flow .narrative{ padding: 96px 64px; }
.thinks-flow .ch{ min-height: 86vh; }
.thinks-flow .ch.hero{ min-height: 90vh; }

/* Make the brain frame less glassy and more on-brand (less cream-paper energy) */
.thinks-flow .brain-frame{
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 22px 56px -16px rgba(26,31,46,.15);
}
.thinks-flow .brain-frame::before{
  background: linear-gradient(155deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 100%);
}

/* Pattern stat — use brand pink instead of coral */
.thinks-flow .pattern-stat{ box-shadow: 0 18px 38px -14px rgba(248,173,240,.30), 0 1px 0 rgba(255,255,255,.85) inset; }
.thinks-flow .pattern-stat .pn{ color: #7145FC; }
.thinks-flow .pattern-stat .pn-halo{ border-color: rgba(113,69,252,.25); }
.thinks-flow .pattern-stat .pn-halo.h2{ border-color: rgba(113,69,252,.18); }
.thinks-flow .pattern-stat .pn-halo.h3{ border-color: rgba(248,173,240,.40); }

/* Coda CTA buttons — use the homepage brand-gradient styling */
.thinks-flow .cta-primary{
  background: linear-gradient(135deg, #7145FC 0%, #f8adf0 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(113,69,252,.45);
}
.thinks-flow .cta-primary:hover{
  background: linear-gradient(135deg, #f8adf0 0%, #7145FC 100%);
  border-color: transparent;
  box-shadow: 0 12px 28px -8px rgba(113,69,252,.55);
}
   Components extracted from edmund_thinks.html and scoped under .thinks-flow
   ========================================================================= */
.thinks-flow{
  --paper:#f5f1e8;
  --paper-warm:#f9f3e2;
  --paper-cool:#ece4f3;
  --ink:#0d0d18;
  --ink-dim:#5b5d70;
  --ink-faint:#9b9da9;
  --indigo:#7145FC;
  --indigo-deep:#3b22d6;
  --indigo-soft:#ece6ff;
  --lavender:#a880ff;
  --blue:#4998ee;
  --coral:#f8adf0;
  --amber:#f0b820;
  --grey:#8c92a8;
  --rule:rgba(13,13,24,.10);
  --rule-strong:rgba(13,13,24,.20);
  --sans:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}
/* paper backdrop */
/* scroll progress bar — thin indigo bar at very top of viewport */
/* top mast */
/* chapter pill — shows "01 / 04 · Context linking" in the mast as you scroll */
/* split layout */
.split{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:100vh;padding:0;max-width:1700px;margin:0 auto}

/* narrative left column */
.narrative{padding:120px 64px 120px;display:flex;flex-direction:column;gap:0}
.narrative .ch{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;
  border-top:1px dashed var(--rule);
  position:relative}
.narrative .ch:first-child{border-top:none}
.narrative .ch.hero{min-height:92vh}

/* hero */
.ch.hero h1{font-family:var(--sans);font-weight:700;font-size:64px;letter-spacing:-0.035em;line-height:1.02;color:var(--ink);margin-bottom:18px}
.ch.hero h1 em{font-style:italic;font-weight:500;color:var(--indigo)}
.ch.hero .lede{font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--ink-dim);max-width:480px;margin-bottom:34px}
.ch.hero .lede b{color:var(--ink);font-weight:600}
.q-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.55);border-radius:14px;padding:16px 18px;max-width:480px;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 28px -8px rgba(13,13,24,.18)}
.q-card .qk{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:8px;display:inline-flex;align-items:center;gap:6px}
.q-card .qk::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.q-card .qbody{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--ink);line-height:1.35;letter-spacing:-0.012em}
.scroll-hint{margin-top:42px;font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:8px}
.scroll-hint::before{content:"";display:inline-block;width:1px;height:32px;background:linear-gradient(180deg,var(--ink-faint),transparent);
  animation:scroll-bounce 2.6s ease-in-out infinite}
@keyframes scroll-bounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}

/* chapter blocks — dramatic numerals + flush header rule */
.ch .ch-num{font-family:var(--mono);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:14px;position:relative}
.ch .ch-num .num-mark{font-family:var(--sans);font-weight:700;font-size:78px;letter-spacing:-0.05em;line-height:0.85;color:transparent;
  -webkit-text-stroke:1.2px var(--indigo);
  text-stroke:1.2px var(--indigo);
  display:inline-block;margin-right:12px;
  background:linear-gradient(180deg, transparent 0%, transparent 50%, rgba(113,69,252,.04) 100%);
  -webkit-background-clip:text;background-clip:text}
.ch .ch-num .num-label{display:inline-flex;flex-direction:column;gap:2px}
.ch .ch-num .num-label .small{color:var(--ink-faint);font-weight:600}
.ch .ch-num .num-label .big{font-size:11px;letter-spacing:.32em;color:var(--ink);font-weight:700}
.ch .ch-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, var(--rule) 0%, transparent 100%);align-self:center}

.ch h2{font-family:var(--sans);font-weight:700;font-size:42px;letter-spacing:-0.026em;line-height:1.05;color:var(--ink);margin-bottom:14px}
.ch h2 em{font-style:italic;font-weight:500;color:var(--indigo)}
.ch p.lede{font-family:var(--sans);font-size:15.5px;line-height:1.55;color:var(--ink-dim);max-width:480px;margin-bottom:26px}
.ch p.lede b{color:var(--ink);font-weight:600}
.ch p.lede code{font-family:var(--mono);font-size:.9em;background:rgba(13,13,24,.06);padding:2px 6px;border-radius:3px;color:var(--ink)}

/* trace step rows */
.trace-step{display:grid;grid-template-columns:14px 1fr auto;column-gap:11px;align-items:center;
  background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);
  border:1px solid var(--rule);border-radius:8px;padding:10px 14px;margin-bottom:8px;max-width:480px;
  font-family:var(--sans);font-size:13px;color:var(--ink);font-weight:500;
  opacity:0;transform:translateX(-8px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.85,.25,1)}
.trace-step.in{opacity:1;transform:translateX(0)}
.trace-step i{width:10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.7) inset, 0 0 8px currentColor}
.trace-step .label{line-height:1.2}
.trace-step .file{font-family:var(--mono);font-size:11px;color:var(--ink-dim);font-weight:500;letter-spacing:.02em}

/* pattern stat block — animated halo, larger numeral, more drama */
.pattern-stat{margin-top:8px;display:inline-flex;align-items:flex-end;gap:18px;position:relative;
  background:rgba(255,255,255,0.65);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--rule);border-radius:14px;padding:20px 26px;
  box-shadow:0 18px 38px -14px rgba(248,173,240,.18), 0 1px 0 rgba(255,255,255,.85) inset;
  opacity:0;transform:translateY(8px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.85,.25,1)}
.pattern-stat.in{opacity:1;transform:translateY(0)}
.pattern-stat .pn-wrap{position:relative;display:inline-flex;align-items:flex-end;line-height:1}
.pattern-stat .pn{font-family:var(--sans);font-weight:700;font-size:74px;letter-spacing:-0.045em;color:var(--coral);line-height:0.85;font-variant-numeric:tabular-nums;position:relative;z-index:2}
.pattern-stat .pn-halo{position:absolute;top:50%;left:50%;width:100px;height:100px;
  border-radius:50%;border:1px solid rgba(248,173,240,.25);
  transform:translate(-50%,-50%);
  animation:halo 2.6s ease-out infinite}
.pattern-stat .pn-halo.h2{animation-delay:0.86s;border-color:rgba(248,173,240,.18)}
.pattern-stat .pn-halo.h3{animation-delay:1.73s;border-color:rgba(248,173,240,.12)}
@keyframes halo{
  0%   { transform:translate(-50%,-50%) scale(.6); opacity:.7 }
  100% { transform:translate(-50%,-50%) scale(1.6); opacity:0  }
}
.pattern-stat .pl{font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--ink-dim);max-width:230px;padding-bottom:6px}
.pattern-stat .pl b{color:var(--ink);font-weight:600}

/* answer card */
.answer-card{background:rgba(255,255,255,0.78);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:22px 24px 20px;max-width:540px;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 18px 44px -12px rgba(13,13,24,.22), 0 6px 16px -6px rgba(13,13,24,.12);
  opacity:0;transform:translateY(12px);transition:opacity .65s ease, transform .65s cubic-bezier(.2,.85,.25,1)}
.answer-card.in{opacity:1;transform:translateY(0)}
.answer-card .a-meter{font-family:var(--mono);font-size:9px;letter-spacing:.30em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.answer-card .a-meter .live{display:inline-flex;align-items:center;gap:6px}
.answer-card .a-meter .live::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;animation:pulse 1.6s ease-in-out infinite}
.answer-card .a-meter .ts{color:var(--ink-faint);letter-spacing:.18em;font-weight:500}
.answer-card .a-q{font-family:var(--sans);font-style:italic;font-weight:500;font-size:15px;color:var(--indigo-deep);line-height:1.4;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.answer-card .a-.answer-card .a-body p{margin-bottom:10px}
.answer-card .a-body p:last-child{margin-bottom:0}
.answer-card .a-body code{font-family:var(--mono);font-size:11.5px;background:rgba(13,13,24,.06);padding:2px 6px;border-radius:4px;color:var(--ink)}
.answer-card .a-body ul{list-style:none;margin:8px 0 14px 0}
.answer-card .a-body ul li{padding:5px 0 5px 18px;position:relative;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.answer-card .a-body ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--ink-faint)}
.answer-card .a-body ul li code{padding:1px 5px;font-size:11px}
.answer-card .a-body b{color:var(--ink);font-weight:600}
.answer-card .a-citations{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:6px}
.answer-card .a-citations .cite{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:rgba(13,13,24,.04);border:1px solid var(--rule);border-radius:5px;padding:5px 9px;line-height:1;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:7px}
.answer-card .a-citations .cite i{width:7px;height:7px;border-radius:2px}

/* coda */
.ch.coda{min-height:62vh;justify-content:flex-start;padding-top:88px}
.ch.coda h3{font-family:var(--sans);font-weight:700;font-size:36px;letter-spacing:-0.022em;line-height:1.15;color:var(--ink);margin-bottom:10px;max-width:480px}
.ch.coda h3 em{font-style:italic;font-weight:500;color:var(--indigo)}
.ch.coda .csub{font-family:var(--sans);font-size:14.5px;color:var(--ink-dim);line-height:1.55;max-width:460px;margin-bottom:30px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.cta-primary,.cta-ghost{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:16px 24px;border-radius:9px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  transition:background .18s, color .18s, transform .15s cubic-bezier(.2,.85,.25,1), border-color .18s, box-shadow .2s;
  cursor:pointer;border:1px solid;position:relative;overflow:hidden}
.cta-primary{background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:0 12px 24px -8px rgba(13,13,24,.30)}
.cta-primary .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.85,.25,1)}
.cta-primary:hover{background:var(--indigo);border-color:var(--indigo);
  box-shadow:0 14px 28px -8px rgba(113,69,252,.40)}
.cta-primary:hover .arrow{transform:translateX(4px)}
.cta-primary:active{transform:translateY(1px)}
.cta-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.cta-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* brain panel */
.brain-panel{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.brain-frame{position:relative;width:100%;height:88vh;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,0.58);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 22px 56px -12px rgba(13,13,24,.18), 0 6px 18px -6px rgba(13,13,24,.10)}
.brain-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%)}
#thinks-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* state badge floating top-left of brain */
.brain-meter{position:absolute;top:18px;left:20px;z-index:3;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.brain-meter .live{display:inline-flex;align-items:center;gap:6px;color:var(--coral)}
.brain-meter .live::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;animation:pulse 1.6s ease-in-out infinite}
.brain-meter .state-name{color:var(--ink);transition:color .25s}
.brain-meter .sep{color:var(--ink-faint);opacity:.5}

/* state hint */
.brain-state-hint{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);pointer-events:none;opacity:.85}
.brain-state-hint .pos-dots{display:inline-flex;gap:5px}
.brain-state-hint .pos-dots span{width:6px;height:6px;border-radius:50%;background:rgba(13,13,24,.15);transition:background .22s}
.brain-state-hint .pos-dots span.on{background:var(--indigo)}

/* silo legend pill row inside brain frame */
.brain-legend{position:absolute;top:18px;right:20px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.brain-legend .ll{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;line-height:1;padding:5px 8px;background:rgba(255,255,255,.7);border-radius:5px;border:1px solid var(--rule);transition:opacity .35s, color .25s}
.brain-legend .ll i{width:8px;height:8px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.7) inset}
.brain-legend .ll.dim{opacity:.35}

/* responsive — stack on small viewports */
@media (max-width:1024px){
  .split{grid-template-columns:1fr}
  .narrative{padding:80px 24px 80px}
  .brain-panel{position:relative;height:60vh;padding:16px}
  .brain-frame{height:60vh}
  .ch.hero h1{font-size:42px}
  .ch h2{font-size:28px}
}
.thinks-flow{ position: relative; }
.thinks-flow .split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1700px; margin: 0 auto; }
.thinks-flow .narrative{ padding: 100px 64px; }
.thinks-flow .brain-panel{ position: sticky; top: 0; height: 100vh; }
@media (max-width: 1024px){
  .thinks-flow .split{ grid-template-columns: 1fr; }
  .thinks-flow .narrative{ padding: 60px 24px; }
  .thinks-flow .brain-panel{ position: relative; height: 60vh; padding: 16px; }
  .thinks-flow .brain-frame{ height: 60vh; }
}


/* =========================================================================
   INNER-SHADOW / 3D plastic feel on key surfaces
   ========================================================================= */

/* Chat demo panel — feels like a real screen */
.demo{
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(26,31,46,.06);
}
.demo-bar{ box-shadow: none; }
.demo .code{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.30);
}
.demo-input{ box-shadow: none; }

/* Agent mock cards — subtle inset top highlight */
.mock,
.voice,
.form-aside,
.icp,
.thinks-step,
.thinks-flow .q-card,
.thinks-flow .answer-card,
.thinks-flow .pattern-stat,
.thinks-flow .trace-step,
.thinks-flow .brain-frame{
  box-shadow: var(--shadow-1, 0 1px 0 rgba(26,31,46,.04), 0 8px 24px -12px rgba(26,31,46,.10));
}

/* Stat banner cells */
.stats-grid .stat{
  box-shadow: none;
}

/* Trust marquee — recessed strip */
.trust{
  box-shadow: none;
}

/* Sec badges — small plastic chips */
.sec .badge{
  box-shadow: none;
}

/* Buttons — top-edge inset highlight (already partial on primary) */
.btn-ghost{ /* flat — no inset shadow */ }
.btn-primary{
  /* gradient + glow only — keep the magnetic + scrubbed background hover; no insets */
  box-shadow:
    0 8px 22px -8px rgba(113,69,252,.45),
    0 1px 0 rgba(26,31,46,.10);
}

/* =========================================================================
   FINAL CTA — drift mesh + cursor spotlight + beam sweep
   ========================================================================= */

/* Disable old radial pseudos — replaced by layered divs */
.cta::before, .cta::after{ display: none !important; }
.cta{ overflow: hidden; }

.cta-mesh{
  position: absolute;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(113,69,252,.30), transparent 60%),
    radial-gradient(closest-side at 82% 72%, rgba(248,173,240,.22), transparent 60%),
    radial-gradient(closest-side at 70% 22%, rgba(168,128,255,.14), transparent 65%);
  filter: blur(48px);
  animation: cta-drift 24s ease-in-out infinite alternate;
}
@keyframes cta-drift{
  0%   { transform: translate3d(0,0,0)        scale(1.00) }
  50%  { transform: translate3d(2%, -2%, 0)   scale(1.04) }
  100% { transform: translate3d(-2%, 2%, 0)   scale(1.02) }
}

.cta-spot{
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(248,173,240,.22), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
  mix-blend-mode: screen;
}
.cta:hover .cta-spot{ opacity: 1 }

.cta-beam{
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(248,173,240,.22), transparent);
  transform: skewX(-12deg);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.cta.in-view .cta-beam{
  animation: cta-sweep 1.8s cubic-bezier(.7,0,.3,1) .4s forwards;
}
@keyframes cta-sweep{
  0%   { left: -30%; opacity: 0 }
  10%  { opacity: 1 }
  90%  { opacity: 1 }
  100% { left: 130%; opacity: 0 }
}

@media (prefers-reduced-motion: reduce){
  .cta-mesh, .cta-beam{ animation: none }
}

/* CTA content sits above the layered effects */
.cta > .wrap{ position: relative; z-index: 2; }

/* The grid in the CTA is dark variant + slightly more visible */
.cta .bp-grid{
  --gs:  rgba(255,255,255,.07);
  --gsm: rgba(255,255,255,.13);
}


/* =========================================================================
   ICP-FOCUSED COPY ADDITIONS (post-PDF audit)
   - Cost-of-downtime line in manifesto
   - Must-have test section
   - Management impact section
   ========================================================================= */

/* Manifesto cost block — clean stacked layout, no gradient bar, brand-gradient stat number */
.manifesto-cost{
  margin-top: 40px;
  padding: 28px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  max-width: 760px;
}
.manifesto-cost .cost-num{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 64px);
  letter-spacing: -.028em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.manifesto-cost .cost-lede{
  font-size: 17px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 500;
  margin: 0;
}
.manifesto-cost .cost-bet{
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.manifesto-cost .cost-bet b{ color: var(--navy); font-weight: 600; }

/* Must-have test section */
.musthave{
  background: var(--paper);
}
/* §02b — The fit test (interactive checklist) */

.must-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.must-head .lede{ margin-top: 0; max-width: 50ch; }
@media (max-width: 820px){
  .must-head{ grid-template-columns: 1fr; gap: 20px; }
}

/* The list — single column, hairline-ruled, no card-boxes */
.must-list{
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.must-item{
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
}
.must-item::before{
  /* subtle brand-tint fill that draws in from the left when checked */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(113,69,252,.04), rgba(248,173,240,.02) 60%, transparent);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}
.must-item:has(.must-cb:checked)::before{ opacity: 1; }

.must-row{
  display: grid;
  grid-template-columns: 72px 26px 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px) 8px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: padding-left .25s cubic-bezier(.2,.85,.25,1);
}
.must-row:hover{ padding-left: 12px; }
@media (max-width: 720px){
  .must-row{ grid-template-columns: 52px 24px 1fr; gap: 14px; padding: 22px 6px; }
  .must-row:hover{ padding-left: 8px; }
}

/* Number — baseline-aligned to the .must-h first line */
.must-num{
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* aligns to the cap-height of the 26px display heading at line-height 1.18 */
  padding-top: 10px;
  user-select: none;
}

/* Custom checkbox — vertically centered with the heading first line */
.must-check{
  position: relative;
  display: inline-block;
  width: 26px; height: 26px;
  /* (heading line-height = ~30px; checkbox = 26px → 2px to center;
     plus 2px nudge for the heading's optical center) */
  margin-top: 4px;
}
.must-cb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.must-cb-mark{
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 7px;
  background: var(--paper);
  transition:
    border-color .18s ease,
    background .25s cubic-bezier(.2,.85,.25,1),
    transform .25s cubic-bezier(.2,.85,.25,1),
    box-shadow .25s ease;
}
/* Hide the check via opacity (zero risk of subpixel artifact from currentColor) */
.must-cb-mark svg{
  width: 14px; height: 14px;
  color: #fff;
  opacity: 0;
  transform: scale(.4) rotate(-6deg);
  transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.must-row:hover .must-cb-mark{
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 4px rgba(113,69,252,.06);
}
.must-cb:checked ~ .must-cb-mark{
  border-color: transparent;
  /* solid brand-purple — a 90deg gradient compresses too tight on a 26px square
     and reads as "left half darker than right" rather than as a real gradient */
  background: var(--brand-purple);
  transform: scale(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 6px 14px -6px rgba(113,69,252,.45);
}
.must-cb:checked ~ .must-cb-mark svg{
  opacity: 1;
  transform: scale(1) rotate(0);
}
.must-cb:focus-visible ~ .must-cb-mark{
  outline: 2px solid var(--brand-purple);
  outline-offset: 3px;
}

.must-content{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.must-h{
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--navy);
  line-height: 1.18;
  transition: color .2s ease;
}
.must-cb:checked ~ .must-content .must-h{
  color: var(--brand-purple);
}
.must-body{
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

/* Verdict bar — quiet by default, lights up brand-side when any box is ticked */
.must-verdict{
  margin-top: clamp(20px, 3vw, 36px);
  padding: 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.must-verdict.is-fit{
  border-color: rgba(113,69,252,.32);
  background: linear-gradient(135deg, rgba(113,69,252,.07) 0%, rgba(248,173,240,.05) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 36px -16px rgba(113,69,252,.22);
}
.must-verdict-key{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color .25s ease;
}
.must-verdict.is-fit .must-verdict-key{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.must-verdict-text{
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Push the verdict CTA to the far right of the flex row. */
.must-verdict [data-must-cta]{ margin-left: auto; }
.must-verdict [data-must-cta][hidden]{ display: none; }
/* Hide the alternate state spans cleanly */
.must-verdict [hidden]{ display: none; }

@media (prefers-reduced-motion: reduce){
  .must-row, .must-cb-mark, .must-cb-mark svg, .must-item::before, .must-verdict, .must-h{ transition: none; }
}

/* Management impact section */
.mgmt{
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.mgmt-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 12px;
}
@media (max-width: 980px){ .mgmt-grid{ grid-template-columns: 1fr; gap: 16px } }
.mgmt-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.mgmt-card .mgmt-num{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  font-weight: 600; margin-bottom: 16px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.mgmt-card h3{
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.18; letter-spacing: -.015em;
  margin-bottom: 12px;
  color: var(--navy);
}
.mgmt-card p{
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}


/* =========================================================================
   RESULTS — merged Mgmt + Stats (placed right after Hero)
   3 cards: each pairs a stat number with a management headline + body.
   Cohort anchor line attribuites the source.
   ========================================================================= */
.results{
  background: var(--paper-2);
  padding: 96px 0;
}
.results-anchor{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.results-anchor .rule{
  width: 32px; height: 1px; background: var(--rule-strong); display: block;
}
.results-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 980px){ .results-grid{ grid-template-columns: 1fr; gap: 16px } }
.result-card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
}
.result-stat{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(40px, 4.6vw, 60px);
  letter-spacing: -.025em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  display: inline-flex; align-items: baseline; gap: 4px;
  /* Fixed-width digits — stops the number from jittering as it counts up
     (proportional digits have different widths; 1 narrower than 8 etc.) */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.result-unit{
  font-family: var(--f-mono);
  font-size: .28em;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--brand-purple);
  -webkit-text-fill-color: var(--brand-purple);
  vertical-align: .5em;
  margin-left: 2px;
  margin-bottom: .35em;
}
.result-lbl{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 10px;
  margin-bottom: 22px;
}
.result-card h3{
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: 10px;
  color: var(--navy);
}
.result-card p{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Footer ISO badge chips — relocated from the killed Security strip */
.footer-badges{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.fchip{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: .04em;
  color: #b8bdcc;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 5px 9px;
  border-radius: 6px;
}
.fchip .ok{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-purple);
}
.fchip.prep .ok{ background: #e8b46f }
@media (max-width: 720px){
  .footer-badges{ margin-bottom: 8px }
}


/* =========================================================================
   PAIN SECTION — restructure: section-head on top, 2-col (points + viz) below
   ========================================================================= */
.pain .section-head{
  margin-bottom: 36px;
}
.pain .pain-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: start;
}
@media (max-width: 980px){
  .pain .pain-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.pain-viz{
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pain-svg{
  width: 100%; height: auto; display: block;
}
.pain-viz-cap{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 8px 0 14px;
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================================
   CASE STUDY — multi-plant ring visualization (replaces case-thumbs)
   ========================================================================= */
.case-ring{
  margin-top: 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 14px 18px;
  display: flex; flex-direction: column; align-items: center;
}
.case-ring svg{
  width: 100%; height: auto;
  max-width: 380px;
  display: block;
}
.case-ring-cap{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 6px;
  text-align: center;
}

/* =========================================================================
   FOOTER — canvas dot-grid backdrop (barely visible, cursor-reactive)
   ========================================================================= */
.footer{ position: relative; isolation: isolate; overflow: hidden; }
.footer #footer-grid{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.footer .wrap{ position: relative; z-index: 1; }


/* =========================================================================
   AGENT MOCK — chat-sidebar-style fault session list (replaces PLC tree)
   ========================================================================= */
.session-list{
  display: flex; flex-direction: column; gap: 6px;
}
.session{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  transition: background .15s ease, border-color .15s ease;
}
.session:hover{ background: var(--paper); border-color: var(--rule-strong); }
.session.hi{
  background: linear-gradient(90deg, rgba(113,69,252,.06), rgba(248,173,240,.08));
  border-color: rgba(113,69,252,.18);
}
.session .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule-strong);
}
.session.hi .dot{ background: var(--brand-purple); box-shadow: 0 0 6px rgba(113,69,252,.5); }
.session-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.session-text b{
  font-family: var(--f-body);
  font-size: 13px; font-weight: 500;
  color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-text .when{
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* =========================================================================
   ENGAGE — 7-week Gantt timeline + phase cards + ICP compare
   ========================================================================= */
.engage{ padding: 96px 0; background: var(--paper); position: relative; isolation: isolate; overflow: hidden; }
/* Cursor-gravity dot grid backdrop (see #engage-grid block in script.js) */
.engage > #engage-grid{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.engage > .wrap{ position: relative; z-index: 1; }

.gantt{
  margin: 36px 0 48px;
  position: relative;
}
.gantt-ruler{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.gantt-ruler span{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
  border-left: 1px solid var(--rule);
  padding-left: 12px;
  font-weight: 500;
}
.gantt-ruler span:first-child{ border-left: 0; padding-left: 0; }
.gantt-bars{
  position: relative;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr; /* 1wk, 5wks, 1wk = 7 cols */
  gap: 12px;
}
.gantt-bar{
  position: relative;
  height: 64px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(113,69,252,.4);
  overflow: hidden;
}
.gantt-bar::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%);
  pointer-events: none;
}
.gantt-bar.phase-1{ background: linear-gradient(135deg, #7145FC, #9d6cfa); }
.gantt-bar.phase-2{ background: linear-gradient(135deg, #9d6cfa, #d295e4); }
.gantt-bar.phase-3{ background: linear-gradient(135deg, #d295e4, #f8adf0); }
@media (max-width: 720px){
  .gantt-bars{ grid-template-columns: 1fr; gap: 8px; height: auto; }
  .gantt-bar{ height: 48px; }
  .gantt-ruler{ display: none; }
}

.phase-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
@media (max-width: 980px){ .phase-cards{ grid-template-columns: 1fr; gap: 16px; } }
.phase-card{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px;
  display: flex; flex-direction: column;
}
.phase-card .phase-num{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.phase-card h4{
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  color: var(--navy);
}
.phase-card p{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 14px;
  flex: 1;
}
.phase-deliverable{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy);
}
.phase-deliverable b{ color: var(--brand-purple); font-weight: 600; margin-right: 4px; }

.icp-compare{
  max-width: 720px;
  margin: 0 auto 36px;
}
.icp-col{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 30px;
}
.icp-col h4{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 600;
}
.icp-col.yes h4{ color: var(--brand-purple); }
.icp-col.no h4{ color: var(--ink-3); }
.icp-col ul{ list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; }
.icp-col li{
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
  display: flex; gap: 12px; align-items: flex-start;
}
.icp-col.yes li::before{
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 50%;
  margin-top: 4px;
  background:
    radial-gradient(circle at 50% 50%, #f8adf0 0 3.5px, transparent 4px) padding-box,
    var(--grad-brand) border-box;
  border: 1.5px solid transparent;
}
.icp-col.no li::before{
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 50%;
  margin-top: 4px;
  background:
    linear-gradient(45deg, transparent 45%, var(--rule-strong) 45%, var(--rule-strong) 55%, transparent 55%) padding-box,
    var(--rule-strong) border-box;
  border: 1.5px solid var(--rule-strong);
}
.icp-foot{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
}

.engage-cta{
  text-align: center;
  margin-top: 16px;
}

/* Hide the now-unused old engage-grid + poc-list styles cleanly (they have no markup hits anymore) */


/* =========================================================================
   SECTION RHYTHM — single source of truth for inter-section dividers
   Each section gets a 1px top rule UNLESS overridden (e.g. dark CTA, footer)
   ========================================================================= */
section + section{
  border-top: 1px solid var(--rule);
}
/* Dark CTA needs a light divider (rule on navy is invisible). Footer same. */
section.cta{
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Manifesto bottom rule so it doesn't visually merge into Pain when bg is similar */
.manifesto{ /* keeps existing padding */ }

/* Standardize section vertical rhythm baseline. Hero + Manifesto + CTA stay custom. */
.section{ padding: 96px 0; }
.musthave{ padding: 96px 0; }   /* was implicit via .section */

@media (max-width: 720px){
  .section{ padding: 64px 0; }
  .musthave{ padding: 64px 0; }
  .results{ padding: 64px 0 !important; }
  .engage{ padding: 64px 0 !important; }
}

/* The case-stat grid was 2-col with internal borders; ensure no doubled lines if a stat sits at the section seam */


/* =========================================================================
   EVENTS & MEDIA — two-column section above Engage
   ========================================================================= */
.events{ background: var(--paper); }

/* Empty-state card while the 2026 calendar is being confirmed */
.events-empty{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 56px 32px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
}
.events-empty-mark{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: 18px;
}
.events-empty-mark .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-brand);
}
.events-empty-h{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 14px;
}
.events-empty-p{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 auto 26px;
  max-width: 520px;
}
.events-empty-ctas{
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.events-empty--compact{
  padding: 32px 28px;
  max-width: 720px;
  margin: 32px auto 0;
  background: transparent;
  border: 1px dashed var(--rule);
}
.events-empty--compact .events-empty-h{
  font-size: clamp(20px, 2.2vw, 24px);
  margin-bottom: 8px;
}
.events-empty--compact .events-empty-p{
  font-size: 14.5px;
  margin-bottom: 16px;
}

/* ── Featured event card — minimalist: photo left, body right ─────── */
.event-feature-card{
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, transform .22s cubic-bezier(.2,.85,.25,1);
}
@media (max-width: 820px){
  .event-feature-card{ grid-template-columns: 1fr; }
}
.event-feature-card:hover{
  border-color: rgba(113,69,252,.35);
  transform: translateY(-2px);
}
.event-feature-photo{
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  min-height: 280px;
}
@media (max-width: 820px){
  .event-feature-photo{ aspect-ratio: 16 / 9; min-height: 0; max-height: 240px; }
}
.event-feature-photo img{
  position: absolute; inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .7s cubic-bezier(.2,.85,.25,1);
}
.event-feature-card:hover .event-feature-photo img{ transform: scale(1.02); }
.event-feature-body{
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 600px){
  .event-feature-body{ padding: 18px 18px 20px; }
}
.event-feature-mark{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: 12px;
}
.event-feature-mark .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-brand);
}
.event-feature-eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.event-feature-title{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 12px;
}
.event-feature-meta{
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.event-feature-meta li{
  display: inline-flex; align-items: center;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink-2);
}
.event-feature-meta li + li::before{
  content: "·";
  margin-right: 10px;
  color: var(--ink-3);
}
.event-feature-blurb{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 60ch;
}
.event-feature-cta{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--brand-purple);
}
.event-feature-cta .arrow{ transition: transform .25s cubic-bezier(.2,.85,.25,1); }
.event-feature-card:hover .event-feature-cta .arrow{ transform: translateX(3px); }
.event-feature-card:hover{
  transform: translateY(-2px);
  border-color: rgba(113,69,252,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -30px rgba(113,69,252,.30);
}
/* ── Event detail page (event-praha-2026-06.html) ─────────────────── */
.event-hero{ padding: 88px 0 56px; }
.event-back{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 22px;
  transition: color .15s ease;
}
.event-back:hover{ color: var(--brand-purple); }
.event-hero-grid{
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1100px){
  .event-hero-grid{ grid-template-columns: 1fr 400px; gap: 40px; }
}
@media (max-width: 900px){
  .event-hero-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.event-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
  margin-bottom: 16px;
}
.event-hero-eyebrow .tick{ color: var(--brand-purple); }
.event-hero-title{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 18px;
}
.event-hero-lede{
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 60ch;
}
.event-hero-facts{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
@media (max-width: 600px){
  .event-hero-facts{ grid-template-columns: 1fr; }
}
.event-hero-facts li{
  display: flex; flex-direction: column;
  gap: 4px;
}
.event-fact-key{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.event-fact-val{
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--ink);
}
.event-hero-ctas{
  display: inline-flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-start;
}

/* Disabled "Request a seat" with explanatory note below */
.event-cta-wrap{ display: inline-flex; flex-direction: column; gap: 8px; }
.btn.is-disabled,
.btn[disabled]{
  background: var(--paper-3, #ece9e1);
  background-image: none;
  color: var(--ink-3);
  border-color: var(--rule);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}
.btn.is-disabled .arrow,
.btn[disabled] .arrow{ opacity: .55; }
.event-cta-note{
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ink-3);
  max-width: 280px;
  line-height: 1.45;
}

.event-hero-side{ position: sticky; top: 88px; }
@media (max-width: 900px){
  .event-hero-side{ position: static; }
}
.event-date-card{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 22px 22px;
  text-align: center;
}
.event-date-mark{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: 14px;
}
.event-date-mark .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-brand);
}
.event-date-day{
  font-family: var(--f-display);
  font-size: 80px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.event-date-mon{
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-top: 8px;
}
.event-date-time{
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.event-date-loc{
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* Hero photo card — replaces the old top-of-page banner image.
   Portrait crop of the speaker shot, plus a clean caption strip
   carrying the Hosted-with logo lockup. */
.event-hero-photo{
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow:
    0 28px 56px -22px rgba(13,13,24,.22),
    0 4px 12px rgba(13,13,24,.05);
}
.event-hero-photo-img{
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--paper-2);
}
.event-hero-photo-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}
.event-hero-photo-img::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,24,0) 65%, rgba(13,13,24,.18) 100%),
    linear-gradient(180deg, rgba(113,69,252,.04), rgba(13,13,24,0) 35%);
  pointer-events: none;
}
.event-hero-photo-meta{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.event-hero-photo-meta-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-right: 14px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.event-hero-photo-meta-hosts{
  display: inline-flex; align-items: center; gap: 12px;
}
.event-hero-photo-meta-hosts img{ display: block; }
.event-hero-photo-meta-hosts img:first-of-type{ height: 20px; width: auto; }
.event-hero-photo-meta-hosts img:last-of-type{ height: 22px; width: auto; border-radius: 4px; }
.event-hero-photo-meta-x{
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  opacity: .55;
}
@media (max-width: 900px){
  .event-hero-photo{ max-width: 480px; margin: 0 auto; width: 100%; }
}

/* Detail page section blocks */
.event-section{ padding: 64px 0; }
.event-section--alt{ background: var(--paper-2); }
.event-narrow{ max-width: 760px; margin: 0 auto; }
.event-section-eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
  margin-bottom: 12px;
}
.event-section-h{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 18px;
}
.event-section-p{
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 14px;
}

/* About-the-day two-column block (room photo + copy) */
.event-about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1100px){
  .event-about-grid{ gap: 40px; }
}
@media (max-width: 900px){
  .event-about-grid{ grid-template-columns: 1fr; gap: 28px; }
}
.event-about-photo{
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow:
    0 28px 56px -22px rgba(13,13,24,.18),
    0 4px 12px rgba(13,13,24,.04);
}
.event-about-photo img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.event-about-body{ max-width: 56ch; }
@media (max-width: 900px){
  .event-about-body{ max-width: none; }
}

/* Top-of-page header banner photo */
.event-banner{
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 520px;
  overflow: hidden;
  background: var(--paper-2);
}
.event-banner img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.event-banner::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,24,0) 60%, rgba(13,13,24,.32) 100%);
  pointer-events: none;
}
.event-banner-hosts{
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 14px 30px rgba(13,13,24,.18);
}
.event-banner-hosts-label{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  padding-right: 14px;
}
.event-banner-host{
  display: inline-flex; align-items: center;
}
.event-banner-host img{
  display: block;
  height: 22px;
  width: auto;
}
.event-banner-host:last-child img{ height: 26px; border-radius: 6px; }
@media (max-width: 720px){
  .event-banner{ aspect-ratio: 4 / 3; max-height: 360px; }
  .event-banner-hosts{ gap: 12px; padding: 8px 14px; bottom: 14px; }
  .event-banner-hosts-label{ display: none; }
}

/* Single illustrative photo block (between sections) */
.event-photos{
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.event-photo{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  position: relative;
}
.event-photo--solo{
  max-width: 980px;
  margin: 0 auto;
}
.event-photo img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  transition: transform .7s cubic-bezier(.2,.85,.25,1);
}
.event-photo:hover img{ transform: scale(1.02); }

/* Speakers grid */
.event-speakers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 30px;
}
@media (max-width: 760px){
  .event-speakers{ grid-template-columns: 1fr; }
}
.event-speaker{
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-speaker-chip{
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1;
}
.event-speaker-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.event-speaker-chips > .event-speaker-chip{ margin-bottom: 0; }
.event-speaker-chip img{
  display: block;
  width: 18px; height: 18px;
  border-radius: 4px;
  object-fit: contain;
}
.event-speaker-chip--edmund{
  background: rgba(113, 69, 252, .07);
  color: var(--brand-purple);
  border: 1px solid rgba(113, 69, 252, .18);
}
.event-speaker-chip--edmund img{ background: transparent; }
.event-speaker-chip--partner{
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.event-speaker-chip--partner img{ object-fit: contain; }
.event-speaker-chip--mark{ padding: 4px 14px; }
.event-speaker-chip--mark img{
  width: auto; height: 18px;
  max-width: 120px;
  border-radius: 0;
  mix-blend-mode: multiply;
}
.event-speaker-chip--customer{
  background: rgba(73, 152, 238, .07);
  color: #2f7dc7;
  border: 1px solid rgba(73, 152, 238, .22);
}
.event-speaker-chip--customer img{ object-fit: contain; }
.event-speaker-name{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.012em;
  color: var(--navy);
  line-height: 1.15;
}
.event-speaker-role{
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--brand-purple);
  margin-top: 4px;
}
.event-speaker-bio{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 12px 0 0;
}

/* Agenda */
.event-agenda{
  list-style: none;
  padding: 0;
  margin: 24px 0 12px;
  border-top: 1px solid var(--rule);
}
.event-agenda li{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.event-agenda-when{
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-purple);
  white-space: nowrap;
  padding-top: 1px;
}
.event-agenda-body{
  display: flex; flex-direction: column;
  gap: 4px;
}
.event-agenda-what{
  font-family: var(--f-body);
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 500;
}
.event-agenda-by{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 2px;
}
.event-agenda-desc{
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 4px 0 0;
}
.event-agenda-points{
  list-style: none;
  padding: 0;
  margin: 6px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-agenda-points li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  padding: 0;
  border: 0;
  align-items: baseline;
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.event-agenda-points li::before{
  content: "·";
  color: var(--brand-purple);
  font-weight: 700;
  text-align: center;
}
@media (max-width: 600px){
  .event-agenda li{ grid-template-columns: 1fr; gap: 4px; }
  .event-agenda-points li{ grid-template-columns: 14px 1fr; }
}
.event-agenda-note{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 14px 0 0;
}

.events-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 980px){
  .events-grid{ grid-template-columns: 1fr; gap: 40px; }
}

.events-col-title{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-purple);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
.events-col-title .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-brand);
  display: inline-block;
}

/* Events list — date card on the left, details on the right */
.events-list{ list-style: none; padding: 0; margin: 0; }
.event{
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.event:first-child{ padding-top: 4px; }
.event:last-child{ border-bottom: 0; padding-bottom: 4px; }

.event-when{
  text-align: center;
  padding-right: 22px;
  border-right: 1px solid var(--rule);
}
.event-day{
  font-family: var(--f-display);
  font-size: 30px; line-height: 1;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.02em;
}
.event-month{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-top: 6px;
}
.event-year{
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: .04em;
}

.event-meta{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.event-name{
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -.012em;
}
.event-loc{
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: .04em;
}
.event-link{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--brand-purple);
  text-decoration: none;
  margin-top: 8px;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.event-link:hover{ border-bottom-color: var(--brand-purple); }

/* Press list — pull-quote style */
.press-list{ list-style: none; padding: 0; margin: 0; }
.press{
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.press:first-child{ padding-top: 4px; }
.press:last-child{ border-bottom: 0; padding-bottom: 4px; }
.press-source{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.press blockquote{
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.42;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 12px;
  font-style: italic;
}
.press-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.press-date{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.press-link{
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--brand-purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.press-link:hover{ border-bottom-color: var(--brand-purple); }


/* =========================================================================
   NAV DROPDOWN — "Case studies" hover panel with industries + featured cases
   ========================================================================= */
.nav-dropdown{ position: relative; }
.nav-dropdown > .nav-link{
  display: inline-flex; align-items: center;
  cursor: default;  /* parent is the menu trigger; the link itself still navigates */
}
.nav-dropdown-panel{
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px -20px rgba(26,31,46,.20),
    0 6px 18px -8px rgba(26,31,46,.10);
  width: 720px;
  max-width: calc(100vw - 32px);
  padding: 22px 24px;
  z-index: 100;
  margin-top: 10px;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* tiny upward arrow connecting trigger to panel */
.nav-dropdown-panel::before{
  content: "";
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.dropdown-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
}

.dropdown-heading{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 14px;
}

/* Industries — 2-col list */
.dropdown-industries ul{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}
.dropdown-industries a{
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
}
.dropdown-industries a:hover{ background: var(--paper-2); }
.ind-name{
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.005em;
}
.ind-desc{
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: .02em;
}

/* Featured — case cards */
.dropdown-featured{ display: flex; flex-direction: column; gap: 8px; }
.case-card{
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.case-card:hover{
  border-color: rgba(113,69,252,.35);
  background: var(--paper);
  transform: translateY(-1px);
}
.case-card-featured{
  background: linear-gradient(135deg, rgba(113,69,252,.06), rgba(248,173,240,.06)), var(--paper);
  border-color: rgba(113,69,252,.20);
}
.case-card .case-tag{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.case-card .case-title{
  font-family: var(--f-display);
  font-size: 14px; font-weight: 600;
  color: var(--navy);
  letter-spacing: -.01em;
}
.case-card .case-stat{
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: .02em;
  line-height: 1.4;
}

/* Hide dropdown on mobile — drawer handles the small-screen nav */
@media (max-width: 980px){
  .nav-dropdown-panel{ display: none !important; }
}

/* =========================================================================
   MEGABAR — multi-column hover panel navigation
   ========================================================================= */

.megabar{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
}
.megabar-item{ position: relative; }

.megabar-trigger{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy);
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.megabar-trigger:hover,
.megabar-item.is-open > .megabar-trigger{
  color: var(--brand-purple);
  background: var(--paper-2);
}
/* Top-level link variant — no dropdown panel (e.g. Brain). */
a.megabar-trigger--link{
  text-decoration: none;
}

.megabar-chev{
  width: 10px; height: 6px;
  opacity: .55;
  transition: transform .2s ease;
}
.megabar-item.is-open .megabar-chev{ transform: rotate(180deg); opacity: .9; }

/* Panel container — centered under trigger */
.megabar-panel{
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px -20px rgba(26,31,46,.20),
    0 6px 18px -8px rgba(26,31,46,.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.megabar-item.is-open > .megabar-panel{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Tiny upward arrow connector */
.megabar-panel::before{
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-top-left-radius: 2px;
}
/* Hover bridge — bridge the gap so cursor doesn't trigger close */
.megabar-panel::after{
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.megabar-panel--product   { width: 820px; max-width: calc(100vw - 32px); }
.megabar-panel--solutions { width: 720px;  max-width: calc(100vw - 32px); }
.megabar-panel--company   { width: 580px;  max-width: calc(100vw - 32px); }

/* Edge-anchoring override for the leftmost trigger — Product panel is wide
   enough that center-anchoring on the trigger pushes it off-screen on
   typical desktop viewports. Anchor to the trigger's left edge instead. */
.megabar-panel--product{
  left: 0;
  transform: translateX(0) translateY(-6px);
}
.megabar-item.is-open > .megabar-panel--product{
  transform: translateX(0) translateY(0);
}
.megabar-panel--product::before{
  left: 30px;
  transform: translateX(0) rotate(45deg);
}

.megabar-panel-inner{ padding: 18px; }

.megabar-grid{ display: grid; gap: 10px; }
.megabar-grid--3         { grid-template-columns: 1fr 1fr 1fr; }
.megabar-grid--solutions { grid-template-columns: 280px 1fr; gap: 18px; }
.megabar-grid--2         { grid-template-columns: 1fr 1fr; gap: 12px; }

.megabar-section{
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px;
  background: var(--paper);
}
.megabar-section--bare{
  border: 0;
  padding: 0;
  background: transparent;
}
.megabar-section-title{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 4px 4px 8px;
}

/* Link rows — icon · title/desc · arrow */
.megabar-link{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
  position: relative;
}
.megabar-link:hover{ background: var(--paper-2); }
.megabar-icon{
  display: grid;
  place-items: center;
  height: 34px; width: 34px;
  flex-shrink: 0;
  align-self: center;
  color: var(--brand-purple);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(113,69,252,.07) 0%, rgba(248,173,240,.07) 100%);
  border: 1px solid rgba(113,69,252,.10);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.megabar-icon svg{ width: 18px; height: 18px; }
.megabar-link:hover .megabar-icon{
  background: linear-gradient(135deg, rgba(113,69,252,.18) 0%, rgba(248,173,240,.16) 100%);
  border-color: rgba(113,69,252,.24);
}
.megabar-link-content{
  flex: 1;
  min-width: 0;
  padding-right: 14px;
}
.megabar-link-title{
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.005em;
}
.megabar-link-desc{
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--ink-2);
  letter-spacing: .01em;
  margin-top: 1px;
}
.megabar-link-arrow{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-size: 13px;
  color: var(--brand-purple);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.megabar-link:hover .megabar-link-arrow{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Industry rows — denser variant */
.megabar-industry-list{ display: grid; gap: 0; }
.megabar-industry{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.megabar-industry:hover{ background: var(--paper-2); }
.megabar-industry-content{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.megabar-industry-icon{
  display: grid;
  place-items: center;
  height: 30px; width: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(113,69,252,.07) 0%, rgba(248,173,240,.07) 100%);
  border: 1px solid rgba(113,69,252,.08);
  color: var(--brand-purple);
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.megabar-industry:hover .megabar-industry-icon{
  background: linear-gradient(135deg, rgba(113,69,252,.18) 0%, rgba(248,173,240,.16) 100%);
  border-color: rgba(113,69,252,.22);
}
.megabar-industry-icon svg{ width: 16px; height: 16px; }
.megabar-industry-text{ display: flex; flex-direction: column; gap: 0; min-width: 0; }
.megabar-industry-title{
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.005em;
  line-height: 1.2;
}
.megabar-industry-desc{
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .01em;
  color: var(--ink-2);
  line-height: 1.2;
  margin-top: 1px;
}
.megabar-industry-arrow{
  font-size: 12px;
  color: var(--brand-purple);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.megabar-industry:hover .megabar-industry-arrow{
  opacity: 1;
  transform: translateX(2px);
}

/* Industries we don't have a case study for yet — muted, non-interactive,
   with a small "Soon" tag in place of the hover arrow. */
.megabar-industry.is-soon{
  pointer-events: none;
  cursor: default;
}
.megabar-industry.is-soon .megabar-industry-icon{
  background: var(--paper-3);
  border-color: var(--rule);
  color: var(--ink-3);
}
.megabar-industry.is-soon .megabar-industry-title{ color: var(--ink-2); }
.megabar-industry.is-soon .megabar-industry-desc { color: var(--ink-3); }
.megabar-industry-soon{
  font-family: var(--f-mono);
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
/* Mobile menu — same is-soon dim treatment, no badge slot here. */
.meg-mobile-content a.is-soon{
  color: var(--ink-3);
  pointer-events: none;
  cursor: default;
}
.meg-mobile-content a.is-soon::after{
  content: "Soon";
  font-family: var(--f-mono);
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
}

/* Case study cards — image-bg with gradient overlay */
.megabar-cases-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.megabar-cases-grid--3{
  grid-template-columns: 1fr;
  gap: 10px;
}
.megabar-cases-grid--3 .megabar-case{ min-height: 120px; }
.megabar-cases-label{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0 2px;
}
.megabar-cases-stack{ display: grid; gap: 10px; }
.megabar-case{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  border-radius: 12px;
  padding: 14px;
  background-color: #1a1426;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: white;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 180px;
  overflow: hidden;
  isolation: isolate;
}
.megabar-case::before{
  content: '';
  position: absolute;
  inset: 0;
  /* Brand purple gradient overlay — base depth for every card */
  background:
    radial-gradient(ellipse at top right, rgba(248,173,240,.18) 0%, transparent 55%),
    linear-gradient(135deg, rgba(45,20,90,.88) 0%, rgba(85,40,150,.78) 55%, rgba(120,55,190,.68) 100%);
  border-radius: 12px;
  z-index: 0;
  transition: background .35s ease;
}
/* Premium gradient ring at the card edge — subtle sheen at top-left + bottom-right */
.megabar-case::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(248,173,240,.38) 0%, rgba(255,255,255,.08) 25%, transparent 50%, rgba(255,255,255,.06) 75%, rgba(113,69,252,.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: .85;
  transition: opacity .25s ease;
}
.megabar-case:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -16px rgba(113,69,252,.55);
}
.megabar-case:hover::before{
  background:
    radial-gradient(ellipse at top right, rgba(248,173,240,.28) 0%, transparent 60%),
    linear-gradient(135deg, rgba(113,69,252,.62) 0%, rgba(180,95,220,.55) 55%, rgba(248,173,240,.40) 100%);
}
.megabar-case:hover::after{ opacity: 1; }
.megabar-case-header{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.megabar-case-company{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.megabar-case-name{
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.megabar-case-tag{
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(15,8,25,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.megabar-case-logo{
  display: block;
  height: auto;
  max-height: 22px;
  width: auto;
  max-width: 130px;
  padding: 6px 10px;
  background: rgba(255,255,255,.96);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.04);
  object-fit: contain;
}
.megabar-case-desc{
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-size: 11.5px;
  line-height: 1.35;
  color: white;
  font-weight: 500;
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.megabar-case--featured::before{
  /* Featured: vibrant brand-gradient (purple → pink), glow weighted to the bottom-right */
  background:
    radial-gradient(ellipse at bottom right, rgba(248,173,240,.34) 0%, transparent 50%),
    linear-gradient(135deg, rgba(113,69,252,.68) 0%, rgba(190,95,235,.55) 50%, rgba(248,173,240,.42) 100%);
}
.megabar-case--featured:hover::before{
  background:
    radial-gradient(ellipse at bottom right, rgba(248,173,240,.44) 0%, transparent 55%),
    linear-gradient(135deg, rgba(113,69,252,.75) 0%, rgba(200,105,240,.65) 50%, rgba(248,173,240,.52) 100%);
}
/* Photo cards — soft top vignette + strong bottom band so header & description both read cleanly */
.megabar-case--photo::before{
  background:
    linear-gradient(180deg,
      rgba(8,5,15,.55) 0%,
      rgba(8,5,15,.18) 22%,
      rgba(8,5,15,.10) 48%,
      rgba(8,5,15,.55) 72%,
      rgba(8,5,15,.94) 100%);
}
.megabar-case--photo:hover::before{
  background:
    linear-gradient(180deg,
      rgba(8,5,15,.45) 0%,
      rgba(8,5,15,.12) 22%,
      rgba(113,69,252,.18) 48%,
      rgba(113,69,252,.60) 72%,
      rgba(113,69,252,.92) 100%);
}
.megabar-case--photo .megabar-case-name,
.megabar-case--photo .megabar-case-tag,
.megabar-case--photo .megabar-case-desc{
  text-shadow: 0 1px 3px rgba(0,0,0,.70);
}

/* Social link tweaks */
.megabar-link--social .megabar-icon{ color: inherit; }

/* Hide megabar on mobile — drawer handles small screens */
@media (max-width: 980px){
  .megabar{ display: none; }
  .megabar-panel{ display: none !important; }
}

/* Responsive sizing for narrower desktops */
@media (max-width: 1280px){
  .megabar-panel--product   { width: 760px; }
  .megabar-panel--solutions { width: 860px; }
  .megabar-panel--company   { width: 540px; }
  .megabar-grid--solutions  { grid-template-columns: 260px 1fr; }
}
@media (max-width: 1100px){
  .megabar-panel--product   { width: 700px; }
  .megabar-panel--solutions { width: 780px; }
  .megabar-grid--solutions  { grid-template-columns: 240px 1fr; }
}

/* =========================================================================
   MEGABAR — mobile drawer (collapsible sections)
   ========================================================================= */

/* Top-level rows: collapsible sections + direct links share the same
   editorial layout — §0X mono number, big display label, chevron / arrow. */
.nav-mobile .meg-mobile-section,
.nav-mobile .meg-mobile-direct{
  border-top: 1px solid var(--rule);
  margin: 0;
}
.nav-mobile .meg-mobile-section:first-of-type,
.nav-mobile .meg-mobile-direct:first-of-type{ border-top: 0; }

.nav-mobile .meg-mobile-toggle,
.nav-mobile .meg-mobile-direct{
  display: grid;
  grid-template-columns: 34px 1fr 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--f-display);
}
.nav-mobile .meg-num{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  align-self: center;
  line-height: 1;
}
.nav-mobile .meg-label{
  font-family: var(--f-display);
  font-size: clamp(20px, 5.6vw, 24px);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1;
  text-align: left;
}
.nav-mobile .meg-chev,
.nav-mobile .meg-arr{
  width: 18px; height: 18px;
  color: var(--ink-3);
  justify-self: end;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              color .25s ease;
}
.nav-mobile .meg-arr{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}
.nav-mobile .meg-mobile-direct:hover .meg-label,
.nav-mobile .meg-mobile-toggle:hover .meg-label{ color: var(--brand-purple); }
.nav-mobile .meg-mobile-direct:hover .meg-arr,
.nav-mobile .meg-mobile-toggle:hover .meg-chev{ color: var(--brand-purple); }
.nav-mobile .meg-mobile-section.is-open .meg-chev{
  transform: rotate(180deg);
  color: var(--brand-purple);
}
.nav-mobile .meg-mobile-section.is-open .meg-num{ color: var(--brand-purple); }

.nav-mobile .meg-mobile-content{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .42s cubic-bezier(.22,1,.36,1),
              opacity .3s ease;
}
.nav-mobile .meg-mobile-section.is-open .meg-mobile-content{
  max-height: 1400px;
  opacity: 1;
}
.nav-mobile .meg-mobile-group{ padding: 4px 0 16px; }
.nav-mobile .meg-mobile-group:first-child{ padding-top: 0; }
.nav-mobile .meg-mobile-group-title{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
  padding: 10px 2px 8px;
}
.nav-mobile .meg-mobile-group a{
  display: block;
  padding: 11px 14px;
  margin: 3px 0;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  background: rgba(255,255,255,.65);
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.nav-mobile .meg-mobile-group a:hover{
  background: var(--paper);
  border-color: var(--rule-strong);
  transform: translateX(2px);
}

/* Primary CTA + footer strip below the link list */
.nav-mobile .nav-mobile-cta,
.nav-mobile .nav-mobile-cta span,
.nav-mobile .nav-mobile-cta .arrow{
  color: #fff;
}
.nav-mobile .nav-mobile-cta{
  margin: 22px 0 0;
  width: 100%;
  justify-content: center;
}
.nav-mobile-footer{
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-mobile-lang{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-mobile-lang a{
  color: var(--ink-3);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 2px;
  transition: color .2s;
}
.nav-mobile-lang a.on,
.nav-mobile-lang a.active{ color: var(--navy); }
.nav-mobile-lang a:hover{ color: var(--brand-purple); }
.nav-mobile-lang .sep{ color: var(--rule-strong); }

.nav-mobile-connect{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-mobile-connect a{
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: .02em;
  padding: 4px 0;
  transition: color .2s;
}
.nav-mobile-connect a:hover{ color: var(--brand-purple); }

/* Stagger reveal — rows slide up on open. Index from the inline --meg-i. */
.nav-mobile .meg-mobile-section,
.nav-mobile .meg-mobile-direct,
.nav-mobile .nav-mobile-cta,
.nav-mobile .nav-mobile-footer{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.nav-mobile.is-open .meg-mobile-section,
.nav-mobile.is-open .meg-mobile-direct,
.nav-mobile.is-open .nav-mobile-cta,
.nav-mobile.is-open .nav-mobile-footer{
  opacity: 1;
  transform: translateY(0);
}
.nav-mobile.is-open .meg-mobile-section{ transition-delay: calc(60ms + (var(--meg-i, 0) - 1) * 50ms); }
.nav-mobile.is-open .meg-mobile-direct{ transition-delay: calc(60ms + (var(--meg-i, 0) - 1) * 50ms); }
.nav-mobile.is-open .nav-mobile-cta{ transition-delay: 420ms; }
.nav-mobile.is-open .nav-mobile-footer{ transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce){
  .nav-mobile .meg-mobile-section,
  .nav-mobile .meg-mobile-direct,
  .nav-mobile .nav-mobile-cta,
  .nav-mobile .nav-mobile-footer{
    transition: opacity .15s ease;
    transform: none;
  }
  .nav-mobile.is-open .meg-mobile-section,
  .nav-mobile.is-open .meg-mobile-direct,
  .nav-mobile.is-open .nav-mobile-cta,
  .nav-mobile.is-open .nav-mobile-footer{ transition-delay: 0s; }
}

/* =========================================================================
/* =========================================================================
   §07 — THE SESSION
   Light-mode CTA. A 3-step trace visualization replaces the old spec table.
   One primary action, one quiet secondary. Space Grotesk + JetBrains Mono.
   ========================================================================= */

.c07{
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(37,46,61,.045) 1px, transparent 1.5px) 0 0 / 28px 28px,
    var(--paper);
  color: var(--ink-2);
  padding: clamp(96px, 11vw, 160px) 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--rule);
}
/* faded brand-gradient hairline at the very top */
.c07::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(113,69,252,.55) 30%,
    rgba(248,173,240,.55) 70%,
    transparent 100%);
}
/* soft brand-gradient warm-up at top of section */
.c07::after{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 220px; width: 100%;
  background: linear-gradient(180deg, rgba(113,69,252,.035) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.c07 .wrap{ position: relative; z-index: 1; }

/* SPEC BAR */
.c07-bar{
  display: inline-flex; align-items: center;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 56px);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.c07-num{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.c07-bar-sep{ color: var(--rule-strong); font-weight: 400; }
.c07-bar-tag{ color: var(--ink-2); }

/* HEAD */
.c07-head{
  max-width: 64ch;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.c07-h{
  font-family: var(--f-display);
  font-size: clamp(38px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--navy);
  margin-bottom: 24px;
}
.c07-h em{
  font-style: normal;
}
.c07-sub{
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.005em;
  max-width: 50ch;
}

/* =========== THE TRACE — 3 cards + 2 arrows =========== */
.c07-trace{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: clamp(56px, 7vw, 88px);
}
@media (max-width: 920px){
  .c07-trace{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .c07-arrow svg{ transform: rotate(90deg); }
  .c07-arrow{ justify-self: center; }
}

.c07-step{
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 32px -16px rgba(37,46,61,.08);
  transition: transform .25s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease;
}
.c07-step:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -16px rgba(37,46,61,.14);
}
.c07-step::before{
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--rule-strong);
}
.c07-step-input::before{
  background: linear-gradient(90deg, var(--ink-3), var(--rule-strong));
}
.c07-step-trace::before{
  background: var(--grad-brand-h);
}
.c07-step-output::before{
  background: linear-gradient(90deg, #2a9d5f, #5cd28a);
}

.c07-step-head{
  display: inline-flex; align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.c07-step-num{
  color: var(--ink-3);
}
.c07-step-trace .c07-step-num,
.c07-step-input .c07-step-num,
.c07-step-output .c07-step-num{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.c07-step-key{
  color: var(--ink-2);
}

.c07-step-label{
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--navy);
  margin-top: -2px;
}

/* INPUT step — looks like a maintenance lead's prompt */
.c07-step-quote{
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  color: var(--navy);
  letter-spacing: -.005em;
  margin: 6px 0 0;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
}

/* TRACE step — 4 source rows with subtle pulse dots */
.c07-sources{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.c07-sources li{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.c07-src-tag{
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(113,69,252,.08);
  color: var(--brand-purple);
  border: 1px solid rgba(113,69,252,.18);
}
.c07-src-detail{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .005em;
  color: var(--ink-2);
}
.c07-src-pulse{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-purple);
  opacity: .35;
  animation: c07-src-flash 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
.c07-sources li:nth-child(1) .c07-src-pulse{ animation-delay: 0s; }
.c07-sources li:nth-child(2) .c07-src-pulse{ animation-delay: .35s; }
.c07-sources li:nth-child(3) .c07-src-pulse{ animation-delay: .70s; }
.c07-sources li:nth-child(4) .c07-src-pulse{ animation-delay: 1.05s; }
@keyframes c07-src-flash{
  0%, 60%, 100% { opacity: .25; transform: scale(1); }
  20% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(113,69,252,.10); }
}

/* OUTPUT step — the traced answer */
.c07-step-answer{
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--navy);
  margin: 0;
  padding: 14px 16px;
  background: rgba(42,157,95,.05);
  border: 1px solid rgba(42,157,95,.20);
  border-radius: 10px;
}
.c07-step-answer b{
  color: var(--navy);
  font-weight: 600;
  background: rgba(248,173,240,.18);
  padding: 1px 4px;
  border-radius: 3px;
}
.c07-cited{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ARROWS between cards */
.c07-arrow{
  display: grid; place-items: center;
  width: 56px;
}
.c07-arrow svg{
  width: 56px; height: 12px;
  display: block;
  opacity: .6;
}
@media (max-width: 920px){
  .c07-arrow{ width: auto; padding: 4px 0; }
  .c07-arrow svg{ width: 12px; height: 56px; }
}

/* =========== FINISH — single primary CTA + trust =========== */
.c07-finish{
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 56ch;
}

.c07-big-cta{
  display: inline-flex; align-items: center;
  gap: 14px;
  padding: 20px 26px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #0c0d12;
  background: var(--grad-brand-h);
  border: 1px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 16px 36px -14px rgba(113,69,252,.45);
  transition: transform .2s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease;
  will-change: transform;
}
.c07-big-cta:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 22px 50px -16px rgba(113,69,252,.55);
}
.c07-big-cta:active{ transform: translateY(0) scale(.985); }
.c07-big-cta-arrow{
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  transition: transform .2s cubic-bezier(.2,.85,.25,1);
}
.c07-big-cta-arrow svg{ width: 18px; height: 18px; display: block; }
.c07-big-cta:hover .c07-big-cta-arrow{ transform: translateX(4px); }

.c07-trust{
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin: 0;
}

.c07-quiet{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(113,69,252,.25);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.c07-quiet:hover{
  color: var(--brand-purple);
  border-bottom-color: var(--brand-purple);
}

@media (prefers-reduced-motion: reduce){
  .c07-step{ transition: none; }
  .c07-src-pulse{ animation: none; opacity: .6; }
  .c07-big-cta, .c07-big-cta-arrow{ transition: none; }
}

/* =========================================================================
   FOOTER · LIGHT-MODE INDUSTRIAL SPEC
   Warm off-white, generous spacing, subtle engineering-paper grid.
   Space Grotesk + JetBrains Mono only.
   ========================================================================= */

.ft{
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(37,46,61,.045) 1px, transparent 1.5px) 0 0 / 28px 28px,
    var(--paper-2);
  color: var(--ink-2);
  padding: clamp(80px, 9vw, 128px) 0 32px;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--rule);
}
/* Top hairline: subtle brand-gradient line */
.ft::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(113,69,252,.55) 35%,
    rgba(248,173,240,.55) 65%,
    transparent 100%);
}
/* Soft brand-gradient warm-up at top of section */
.ft::after{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 200px; width: 100%;
  background: linear-gradient(180deg, rgba(113,69,252,.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.ft .wrap{ position: relative; z-index: 1; }

/* Old logo override — light mode shows full-color logo, not inverted */
.ft .brand-img-light{ filter: none; }

/* =========== TOP SPEC BAR =========== */
.ft-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ft-bar-left, .ft-bar-right{
  display: inline-flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
/* Was a gradient-clipped wordmark; now an inline logo image */
.ft-bar-mark{
  height: 22px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 720px){
  .ft-bar-mark{ height: 20px; }
}
.ft-bar-sep{ color: var(--rule-strong); font-weight: 400; }
.ft-bar-tag, .ft-bar-build{ color: var(--ink-2); }
.ft-bar-status{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2);
}
.ft-bar-status .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a9d5f;
  box-shadow: 0 0 0 0 rgba(42,157,95,.4);
  animation: ft-light-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ft-light-pulse{
  0%   { box-shadow: 0 0 0 0   rgba(42,157,95,.45) }
  70%  { box-shadow: 0 0 0 9px rgba(42,157,95,0)   }
  100% { box-shadow: 0 0 0 0   rgba(42,157,95,0)   }
}

/* =========== MAIN — brand zone + sitemap =========== */
.ft-main{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(48px, 6vw, 112px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px){
  .ft-main{ grid-template-columns: 1fr; gap: 48px; }
}

.ft-mark{ display: flex; flex-direction: column; gap: 28px; max-width: 42ch; }
.ft-logo{ display: inline-block; }
.ft-logo .brand-img{ height: clamp(56px, 6vw, 84px); width: auto; display: block; }

/* Sitemap — 3 columns, /0X numbered headers */
.ft-sitemap{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 640px){
  .ft-sitemap{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 420px){
  .ft-sitemap{ grid-template-columns: 1fr; gap: 24px; }
}
.ft-col{ display: flex; flex-direction: column; gap: 12px; }
.ft-col h6{
  display: flex; align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.ft-col-num{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ft-col a{
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy);
  text-decoration: none;
  transition: color .15s ease, transform .2s cubic-bezier(.2,.85,.25,1);
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content;
  max-width: 100%;
}
.ft-col a:hover{
  color: var(--brand-purple);
  transform: translateX(2px);
}
.ft-tag{
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(113,69,252,.10);
  color: var(--brand-purple);
  border: 1px solid rgba(113,69,252,.22);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ft-out{
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* =========== COMPLIANCE / SPEC BLOCK — subtle brand tint =========== */
.ft-spec{
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 32px clamp(20px, 3vw, 36px);
  margin-top: -1px;
  background: rgba(113,69,252,.025);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.ft-spec-row{
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 640px){
  .ft-spec-row{ grid-template-columns: 1fr; gap: 8px; }
}
.ft-spec-key{
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ft-spec-val{
  display: inline-flex; flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--navy);
}
.ft-spec-val a{
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(113,69,252,.35);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.ft-spec-val a:hover{
  color: var(--brand-purple);
  border-bottom-color: var(--brand-purple);
}

/* ISO chips — light-mode premium badges */
.ft-iso{
  display: inline-flex; align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 8px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(37,46,61,.04);
}
.ft-iso .ok{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2a9d5f;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(42,157,95,.12);
}
.ft-iso.pending{ color: var(--ink-2); }
.ft-iso.pending .ok{
  background: #d18a3a;
  box-shadow: 0 0 0 2px rgba(209,138,58,.12);
}

/* =========== BOTTOM LEGAL ROW =========== */
.ft-base{
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-weight: 500;
}
@media (max-width: 720px){
  .ft-base{ grid-template-columns: 1fr; gap: 14px; }
  .ft-legal, .ft-lang{ justify-self: start; }
}
.ft-copy{
  display: inline-flex; flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.ft-copy-mark{
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.ft-made-in{
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: .02em;
}
.ft-made-in em{
  font-family: var(--f-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.005em;
  margin: 0 1px;
}
.ft-legal{
  display: inline-flex; gap: 14px;
  align-items: center;
  justify-self: center;
}
.ft-base-sep{ color: var(--rule-strong); font-weight: 400; }
.ft-legal a{
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease;
}
.ft-legal a:hover{ color: var(--brand-purple); }
.ft-lang{
  display: inline-flex; gap: 12px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  justify-self: end;
}
.ft-lang span.active{
  color: var(--navy);
  font-weight: 700;
}
.ft-lang a{
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.ft-lang a:hover{ color: var(--brand-purple); }

/* Scroll-to-top pill in the spec bar */
.ft-totop{
  display: inline-flex; align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, transform .25s cubic-bezier(.2,.85,.25,1);
}
.ft-totop svg{ width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2,.85,.25,1); }
.ft-totop:hover{
  color: var(--brand-purple);
  border-color: rgba(113,69,252,.35);
  transform: translateY(-1px);
}
.ft-totop:hover svg{ transform: translateY(-2px); }

/* Brand-zone inline CTA — "Talk to a founder" */
.ft-cta{
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  text-decoration: none;
  width: fit-content;
  max-width: 100%;
  transition: border-color .18s ease, transform .25s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease;
}
.ft-cta-mono{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(113,69,252,.85);
}
.ft-cta-label{
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--navy);
}
.ft-cta-arrow{
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-3);
  transition: transform .25s cubic-bezier(.2,.85,.25,1), color .18s ease;
}
.ft-cta:hover{
  border-color: rgba(113,69,252,.35);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -16px rgba(113,69,252,.25);
}
.ft-cta:hover .ft-cta-arrow{ transform: translateX(3px); color: var(--brand-purple); }

@media (prefers-reduced-motion: reduce){
  .c07-bar-runtime .dot,
  .ft-bar-status .dot{ animation: none; box-shadow: none; }
  .c07-cta, .c07-cta-arrow, .c07-link, .c07-link-arrow,
  .ft-col a, .ft-cta, .ft-cta-arrow, .ft-totop, .ft-totop svg{ transition: none; }
}

/* =========================================================================
   §04 — CASE STUDY CAROUSEL
   ========================================================================= */

.cases{ position: relative; }

/* Header — eyebrow + title left, nav controls right */
.cases-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 720px){
  .cases-head{ grid-template-columns: 1fr; gap: 24px; }
  .cases-nav{ justify-self: start; }
}
.cases-head-text h2{
  margin-top: 18px;
  max-width: 24ch;
}

/* Nav pill */
.cases-nav{
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
}
.cases-counter{
  display: inline-flex; align-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-2);
  padding: 0 12px 0 16px;
}
.cases-counter .cur{ color: var(--navy); }
.cases-counter-sep{ color: var(--rule-strong); margin: 0 4px; }
.cases-counter-total{ color: var(--ink-3); }

.cases-arrow{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.85,.25,1);
}
.cases-arrow svg{ width: 16px; height: 16px; display: block; }
.cases-arrow:hover{
  border-color: var(--brand-purple);
  color: var(--brand-purple);
  transform: translateY(-1px);
}
.cases-arrow:active{ transform: translateY(0) scale(.96); }
.cases-arrow:focus-visible{
  outline: 2px solid var(--brand-purple);
  outline-offset: 2px;
}

/* Slide stage — all slides stacked in same grid cell */
.cases-stage{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.case-slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.85,.25,1), visibility 0s linear .35s;
  pointer-events: none;
}
.case-slide.is-active{
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.85,.25,1), visibility 0s;
  z-index: 1;
}

/* Slide-internal headline (h3 instead of original h2 for semantic correctness inside the grouped section) */
.case-h{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 8px 0 16px;
}

/* Dot indicators */
.cases-dots{
  display: flex; justify-content: center;
  gap: 8px;
  margin-top: clamp(32px, 5vw, 56px);
}
.cases-dot{
  width: 28px; height: 4px;
  background: var(--rule);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, width .3s cubic-bezier(.2,.85,.25,1);
}
.cases-dot:hover{ background: var(--ink-3); }
.cases-dot.is-active{
  background: var(--grad-brand-h);
  width: 56px;
}
.cases-dot.is-active:hover{ background: var(--grad-brand-h); }
.cases-dot:focus-visible{
  outline: 2px solid var(--brand-purple);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .case-slide{ transition: opacity 0s, visibility 0s; transform: none; }
  .cases-arrow, .cases-dot{ transition: none; }
}

/* =========================================================================
   ABOUT PAGE — industrial spec
   ========================================================================= */

/* Shared section paddings */
.ab-hero, .ab-numbers, .ab-founders, .ab-origin, .ab-roadmap, .ab-backers,
.ab-offices, .ab-hiring{
  position: relative;
}

/* Eyebrow / mono key — used across sections */
.ab-eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(37,46,61,.55);
  margin-bottom: 14px;
}
.ab-section-head{
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 56ch;
}
.ab-h2{
  font-family: var(--f-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 8px 0 14px;
}
.ab-section-lede{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

/* ============== HERO ============== */
.ab-hero{
  background: var(--paper);
  padding: clamp(96px, 10vw, 144px) 0 clamp(72px, 8vw, 104px);
  border-bottom: 1px solid var(--rule);
}
.ab-hero::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(113,69,252,.45) 30%,
    rgba(248,173,240,.45) 70%,
    transparent 100%);
}

/* Spec bar */
.ab-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(48px, 6vw, 72px);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(37,46,61,.55);
}
.ab-bar-left, .ab-bar-right{
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ab-bar-num{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ab-bar-sep{ color: var(--rule-strong); font-weight: 400; }
.ab-bar-tag{ color: rgba(37,46,61,.62); }
.ab-bar-status{
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(37,46,61,.62);
}
.ab-bar-status .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #2a9d5f;
  box-shadow: 0 0 0 0 rgba(42,157,95,.4);
  animation: ab-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes ab-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(42,157,95,.4) }
  70%  { box-shadow: 0 0 0 8px rgba(42,157,95,0) }
  100% { box-shadow: 0 0 0 0 rgba(42,157,95,0) }
}

/* Headline */
.ab-h{
  font-family: var(--f-display);
  font-size: clamp(38px, 5.4vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--navy);
  max-width: 16ch;
}
.ab-lede{
  font-family: var(--f-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 32px;
}

/* ============== NUMBERS STRIP — dark band ============== */
.ab-numbers{
  background: #0c0d12;
  color: #e8e6df;
  padding: clamp(48px, 6vw, 80px) 0;
}
.ab-num-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.ab-num-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){
  .ab-num-grid,
  .ab-num-grid--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .ab-num-grid,
  .ab-num-grid--3{ grid-template-columns: 1fr; }
}

/* Mission + Values cards (two-column glass cards under the about hero) */
.ab-mv{
  padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 4vw, 56px);
  background: var(--paper);
}
.ab-mv-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 800px){
  .ab-mv-grid{ grid-template-columns: 1fr; }
}
.ab-mv-card{
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper-2);
}
.ab-mv-key{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
  margin-bottom: 14px;
}
.ab-mv-h{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 12px;
}
.ab-mv-body{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* "+16" avatar variant for the Knights card */
.ab-avatar--knights{
  background: var(--grad-brand) !important;
  color: white !important;
  font-family: var(--f-display);
  font-weight: 700;
}
.ab-num-cell{
  position: relative;
  padding: 8px 28px 8px 0;
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 28px;
}
.ab-num-cell:first-child{ border-left: 0; padding-left: 0; }
@media (max-width: 900px){
  .ab-num-cell{
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,.08);
    padding-bottom: 32px;
  }
  .ab-num-cell:nth-child(2n+1){ border-left: 0; padding-left: 0; }
}
@media (max-width: 540px){
  .ab-num-cell{
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px;
  }
  .ab-num-cell:first-child{ border-top: 0; padding-top: 0; }
}
.ab-num-key{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,173,240,.85);
  margin-bottom: 14px;
}
.ab-num-val{
  font-family: var(--f-display);
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 10px;
}
.ab-num-suf{
  font-size: .55em;
  font-weight: 400;
  color: rgba(248,173,240,.85);
  margin-left: 2px;
  vertical-align: 4px;
}
.ab-num-lbl{
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(232,230,223,.62);
  letter-spacing: .005em;
  max-width: 28ch;
}

/* ============== FOUNDERS ============== */
.ab-founders{
  padding: clamp(72px, 8vw, 120px) 0;
  background: var(--paper);
}
.ab-founders-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 820px){
  .ab-founders-grid{ grid-template-columns: 1fr; gap: 16px; }
}
.ab-founder{
  position: relative;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.85,.25,1);
}
.ab-founder:hover{
  border-color: rgba(113,69,252,.32);
  transform: translateY(-2px);
}
.ab-founder-mark{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.ab-avatar{
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-brand-h);
  color: #0c0d12;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow: hidden;
}
.ab-avatar img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ab-founder-tag{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(113,69,252,.85);
  padding: 4px 8px;
  border: 1px solid rgba(113,69,252,.22);
  border-radius: 6px;
  background: rgba(113,69,252,.06);
}
.ab-founder-name{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 4px;
}
.ab-founder-role{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.ab-founder-bio{
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ============== ORIGIN ============== */
.ab-origin{
  padding: clamp(72px, 8vw, 120px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ab-origin-grid{
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 820px){
  .ab-origin-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.ab-origin-side{
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.ab-origin-key{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.ab-origin-val{
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
.ab-origin-sub{
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.ab-origin-body p{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 18px;
  max-width: 56ch;
}
.ab-origin-body p:last-child{ margin-bottom: 0; }
.ab-origin-body p b{ color: var(--navy); font-weight: 600; }

/* ============== ROADMAP ============== */
.ab-roadmap{
  padding: clamp(72px, 8vw, 120px) 0;
  background: var(--paper);
}
.ab-roadmap-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.ab-roadmap-item{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px){
  .ab-roadmap-item{ grid-template-columns: 1fr; gap: 12px; }
}
.ab-roadmap-marker{
  display: flex; align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.ab-roadmap-tag{
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.ab-roadmap-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-brand-h);
  flex-shrink: 0;
}
.ab-roadmap-h{
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
.ab-roadmap-body p{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ============== BACKERS ============== */
.ab-backers{
  padding: clamp(72px, 8vw, 104px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
}
.ab-backers-grid{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 820px){
  .ab-backers-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .ab-backers-grid{ grid-template-columns: 1fr; }
}
.ab-backer{
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--paper);
  transition: background .25s ease;
}
.ab-backer:hover{ background: var(--paper-2); }
.ab-backer-tag{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(113,69,252,.85);
}
.ab-backer-name{
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce){
  .ab-bar-status .dot{ animation: none; box-shadow: none; }
  .ab-founder, .ab-backer{ transition: none; }
}

/* =========================================================================
   CASE-STUDY DETAIL PAGE — editorial customer story
   Inspired by Stripe customer stories: photo-led hero, restrained typography,
   clean section breaks, no engineering datasheet chrome.
   ========================================================================= */

/* ── HERO ───────────────────────────────────────────────────────────────── */
.cs-hero{
  position: relative;
  background: var(--paper);
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 5vw, 64px);
}
.cs-hero .wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px){
  .cs-hero .wrap{ grid-template-columns: 1fr; gap: 40px; }
}

.cs-hero-text{ min-width: 0; }

.cs-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color .2s ease;
}
.cs-back:hover{ color: var(--navy); }
.cs-back-arrow{
  font-size: 16px;
  transition: transform .2s ease;
}
.cs-back:hover .cs-back-arrow{ transform: translateX(-3px); }

.cs-customer-logo{
  height: 32px;
  width: auto;
  max-width: 180px;
  margin-bottom: 28px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.cs-h{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 24px;
}
.cs-h em{ font-style: normal; }
.cs-h .grad-text{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.cs-dek{
  font-family: var(--f-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
}

.cs-hero-photo{
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-3);
  box-shadow: 0 18px 50px -20px rgba(37,46,61,.25);
}
@media (max-width: 900px){
  .cs-hero-photo{ aspect-ratio: 16 / 10; }
}

/* ── META STRIP ─────────────────────────────────────────────────────────── */
.cs-meta{
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
  background: var(--paper);
}
.cs-meta .wrap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 800px){
  .cs-meta .wrap{ grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
.cs-meta-cell{
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.cs-meta-label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cs-meta-value{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy);
  font-weight: 500;
}

/* ── STATS ──────────────────────────────────────────────────────────────── */
.cs-stats{
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--paper-2);
}
.cs-stats .wrap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.cs-stats--3 .wrap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px){
  .cs-stats .wrap,
  .cs-stats--3 .wrap{ grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
.cs-stat{
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.cs-stat-num{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(38px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
}
.cs-stat-num span{
  font-weight: 500;
  color: var(--ink-2);
  font-size: .55em;
  margin-left: 2px;
  letter-spacing: 0;
}
.cs-stat-lbl{
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 22ch;
}

/* ── VIDEO BAND (between stats and body) ───────────────────────────────── */
.cs-video{
  padding: clamp(40px, 5vw, 72px) 0 clamp(16px, 2vw, 32px);
  background: var(--paper);
}
.cs-video .wrap{ max-width: 1100px; }
.cs-video-frame{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d18;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 48px -20px rgba(13,13,24,.22), 0 6px 16px -8px rgba(13,13,24,.10);
}
.cs-video-frame video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0d0d18;
}
.cs-video-cap{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cs-video-tag{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-purple);
  font-weight: 600;
  flex-shrink: 0;
}
.cs-video-text{ color: var(--ink-2); }

/* ── BODY ───────────────────────────────────────────────────────────────── */
.cs-body{
  padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
  background: var(--paper);
}
.cs-body .wrap{
  max-width: 720px;
}
.cs-section{
  margin-bottom: clamp(48px, 5vw, 72px);
}
.cs-section:last-child{ margin-bottom: 0; }
.cs-section h2{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 24px;
}
.cs-section p{
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--navy);
  margin: 0 0 20px;
}
.cs-section p:last-child{ margin-bottom: 0; }
.cs-section p b{
  color: var(--navy);
  font-weight: 600;
}

/* "What Edmund read" inline list */
.cs-sources{
  margin: 32px 0 8px;
  padding: 28px;
  background: var(--paper-2);
  border-radius: 10px;
  border: 1px solid var(--rule);
}
.cs-sources-title{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.cs-sources-list{
  list-style: none;
  margin: 0; padding: 0;
}
.cs-sources-list li{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
}
.cs-sources-list li:first-child{ border-top: 0; padding-top: 0; }
.cs-sources-list li:last-child{ padding-bottom: 0; }
.cs-source-key{
  font-weight: 600;
  color: var(--navy);
}
.cs-source-val{ color: var(--ink-2); }
@media (max-width: 600px){
  .cs-sources-list li{ grid-template-columns: 1fr; gap: 4px; }
}

/* ── QUOTE BAND ─────────────────────────────────────────────────────────── */
.cs-quote-band{
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cs-quote-band .wrap{ max-width: 820px; }
.cs-quote{ margin: 0; position: relative; }
.cs-quote::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: calc(100% - 80px);
  background: var(--grad-brand-v);
  border-radius: 2px;
}
.cs-quote p{
  padding-left: 28px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 32px;
}
.cs-quote-attrib{
  padding-left: 28px;
  display: flex; align-items: center; gap: 16px;
}
.cs-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: white;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.cs-quote-who{ display: flex; flex-direction: column; }
.cs-quote-name{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}
.cs-quote-role{
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--ink-2);
}

/* ── MORE STORIES ───────────────────────────────────────────────────────── */
.cs-more{
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--paper);
}
.cs-more-title{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0 0 40px;
}
.cs-more-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 700px){
  .cs-more-grid{ grid-template-columns: 1fr; }
}
.cs-more-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease, border-color .25s ease;
}
.cs-more-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -12px rgba(37,46,61,.18);
  border-color: var(--rule-strong);
}
.cs-more-photo{
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-3);
}
.cs-more-body{ padding: 24px 24px 26px; }
.cs-more-name{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.cs-more-desc{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  .cs-back, .cs-back-arrow, .cs-more-card{ transition: none; }
}

/* =========================================================================
   §02 — MTTR BREAKDOWN (the 80/20 visualization)
   Two horizontal bars at the same time-scale: same potential 60 min, very
   different fills. Diagnosis without Edmund is wasted-time hatching;
   Edmund's compressed slice is brand-pink; repair is brand-purple solid;
   the recovered minutes are a light hatched "saved" zone with a callout.
   ========================================================================= */

.mttr{
  margin: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 32px -16px rgba(37,46,61,.06);
}

.mttr-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
}
.mttr-eyebrow{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mttr-scale{
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.mttr-scale span{
  padding: 0 14px;
  border-left: 1px dashed rgba(37,46,61,.10);
}
.mttr-scale span:first-child{ border-left: 0; padding-left: 0; }
.mttr-scale span:last-child{ padding-right: 0; }

/* Each row: label column on the left, the bar on the right */
.mttr-row{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 14px;
}
.mttr-row:last-of-type{ margin-bottom: 0; }
.mttr-row-label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: center;
}
.mttr-num{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.mttr-tag{
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--navy);
  line-height: 1.1;
}
.mttr-time{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* The bar: flex container of segments at proportional widths */
.mttr-bar{
  display: flex;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.mttr-seg{
  flex: 0 0 var(--w);
  width: var(--w);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.mttr-seg-key{
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mttr-seg-num{
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 2px;
}
.mttr-seg-note{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  margin-top: 3px;
}

/* Narrow viewports — segments can be as small as 17% of ~320px (~55px wide).
   On the smallest viewports we hide the eyebrow label on the squeezed
   segments and let the number breathe; wide segments keep both. */
@media (max-width: 600px){
  .mttr-bar{ height: 68px; border-radius: 8px; }
  .mttr-seg{ padding: 8px 8px; align-items: center; text-align: center; }
  .mttr-seg-key{
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mttr-seg-num{
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 2px;
  }
  .mttr-seg-note{ font-size: 9.5px; }
  /* Skinny segments: drop the eyebrow label, let the number stand alone.
     Tighten padding further so a short value like "~10 m" actually fits. */
  .mttr-seg[style*='--w:17%'],
  .mttr-seg[style*='--w:10%'],
  .mttr-seg[style*='--w:15%']{ padding: 8px 4px; }
  .mttr-seg[style*='--w:17%'] .mttr-seg-key,
  .mttr-seg[style*='--w:10%'] .mttr-seg-key,
  .mttr-seg[style*='--w:15%'] .mttr-seg-key{ display: none; }
  .mttr-seg[style*='--w:17%'] .mttr-seg-num,
  .mttr-seg[style*='--w:10%'] .mttr-seg-num,
  .mttr-seg[style*='--w:15%'] .mttr-seg-num{
    margin-top: 0;
    font-size: 12px;
    letter-spacing: -.02em;
  }
}

/* "Diagnosis" without Edmund — wasted time, dim hatched */
.mttr-seg--diag{
  background:
    repeating-linear-gradient(135deg,
      rgba(37,46,61,.10) 0px, rgba(37,46,61,.10) 7px,
      rgba(37,46,61,.04) 7px, rgba(37,46,61,.04) 14px),
    var(--paper-2);
}
.mttr-seg--diag .mttr-seg-key,
.mttr-seg--diag .mttr-seg-note{ color: var(--ink-2); }
.mttr-seg--diag .mttr-seg-num{ color: var(--navy); }

/* "Repair" — productive, brand-purple solid */
.mttr-seg--fix{
  background: linear-gradient(135deg, #7145FC 0%, #8c63fd 100%);
}
.mttr-seg--fix .mttr-seg-key{ color: rgba(255,255,255,.78); }
.mttr-seg--fix .mttr-seg-num{ color: #fff; }

/* "Diagnosis" with Edmund — Edmund's compressed slice in brand-pink */
.mttr-seg--diag-edm{
  background: linear-gradient(135deg, #f8adf0 0%, #f5c2ed 100%);
}
.mttr-seg--diag-edm .mttr-seg-key{ color: rgba(15,17,21,.62); }
.mttr-seg--diag-edm .mttr-seg-num{ color: var(--navy); }

/* "Time returned" — recovered, light brand-tinted hatched */
.mttr-seg--saved{
  background:
    repeating-linear-gradient(135deg,
      rgba(113,69,252,.10) 0px, rgba(113,69,252,.10) 8px,
      rgba(248,173,240,.05) 8px, rgba(248,173,240,.05) 16px),
    var(--paper);
  border-left: 1px dashed rgba(113,69,252,.32);
}

/* ---- Reveal animation ---- motion.dev-style staggered clip sweep ----
   Each segment starts clipped from the right; .is-reveal opens them in
   sequence: Without Edmund (diag, repair) → With Edmund (diag, repair,
   saved). Children fade in slightly after their segment opens. */
.mttr-row .mttr-seg{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.0s cubic-bezier(.22,1,.36,1);
  will-change: clip-path;
}
.mttr-row .mttr-seg-key,
.mttr-row .mttr-seg-num,
.mttr-row .mttr-seg-note{
  opacity:0;
  transform: translateY(4px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.mttr.is-reveal .mttr-row .mttr-seg{ clip-path: inset(0 0 0 0); }
.mttr.is-reveal .mttr-row .mttr-seg-key,
.mttr.is-reveal .mttr-row .mttr-seg-num,
.mttr.is-reveal .mttr-row .mttr-seg-note{
  opacity:1; transform: translateY(0);
}

/* Stagger: row 1 (Without Edmund) fires first, row 2 (With Edmund) after. */
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(1){ transition-delay:.10s }
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(2){ transition-delay:.55s }
.mttr.is-reveal .mttr-row--edm           .mttr-seg:nth-child(1){ transition-delay:1.05s }
.mttr.is-reveal .mttr-row--edm           .mttr-seg:nth-child(2){ transition-delay:1.35s }
.mttr.is-reveal .mttr-row--edm           .mttr-seg:nth-child(3){ transition-delay:1.65s }
/* Text inside lags the bar slightly */
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(1) .mttr-seg-key,
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(1) .mttr-seg-num{ transition-delay:.45s }
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(2) .mttr-seg-key,
.mttr.is-reveal .mttr-row:not(.mttr-row--edm) .mttr-seg:nth-child(2) .mttr-seg-num{ transition-delay:.90s }
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(1) .mttr-seg-key,
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(1) .mttr-seg-num{ transition-delay:1.40s }
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(2) .mttr-seg-key,
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(2) .mttr-seg-num{ transition-delay:1.70s }
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(3) .mttr-seg-key,
.mttr.is-reveal .mttr-row--edm .mttr-seg:nth-child(3) .mttr-seg-num{ transition-delay:2.00s }

/* "Saved" segment gets a one-time shine sweep after it opens — draws the
   eye to the −80% payoff. */
.mttr-seg--saved{ overflow:hidden; }
.mttr-seg--saved::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:50%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%);
  transform: translateX(-150%);
  pointer-events:none;
}
.mttr.is-reveal .mttr-seg--saved::after{
  animation: mttr-shine 1.6s ease-in-out 2.5s 1 forwards;
}
@keyframes mttr-shine{
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(420%); }
}

/* Callout — −80% bumps in at the end of the sequence with a soft scale-up. */
.mttr-callout{
  opacity:0;
  transform: scale(.94);
  transform-origin: left center;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1.2,.36,1);
}
.mttr.is-reveal .mttr-callout{
  opacity:1; transform: scale(1);
  transition-delay: 2.10s;
}

@media (prefers-reduced-motion: reduce){
  .mttr-row .mttr-seg,
  .mttr-row .mttr-seg-key,
  .mttr-row .mttr-seg-num,
  .mttr-row .mttr-seg-note,
  .mttr-callout{
    clip-path: none;
    opacity:1;
    transform:none;
    transition:none;
  }
  .mttr-seg--saved::after{ display:none }
}
.mttr-seg--saved .mttr-seg-key{ color: var(--brand-purple); }
.mttr-seg--saved .mttr-seg-num{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Footer — −80% callout + small citation */
.mttr-foot{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 720px){
  .mttr-foot{ grid-template-columns: 1fr; gap: 12px; }
}
.mttr-callout{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.mttr-callout-num em{
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(44px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mttr-callout-text{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.005em;
  max-width: 48ch;
}
.mttr-cite{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  line-height: 1.45;
  max-width: 38ch;
}

/* Mobile: hide the scale, soften the row, keep the bar horizontal */
@media (max-width: 720px){
  .mttr-row{ grid-template-columns: 1fr; gap: 10px; }
  .mttr-bar{ height: 68px; }
  .mttr-seg-note{ display: none; }
  .mttr-seg-num{ font-size: 13px; }
  .mttr-seg-key{ font-size: 9px; }
  .mttr-scale{ display: none; }
  .mttr-head{ padding-bottom: 14px; margin-bottom: 18px; }
}
@media (max-width: 480px){
  .mttr-bar{ height: 60px; }
  .mttr-seg{ padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .mttr-seg{ transition: none; }
}

/* =========================================================================
   §02b — STANDARD CHAOTIC PROCEDURE
   Datasheet card matching §02 MTTR: hairline-bordered paper card with brand
   accent at top, mono spec header, dot-grid content area, mono footnote.
   The activity boxes use the SAME diagonal hatching as the MTTR diagnosis
   segment — visual continuity says "these are the bricks the 80% bar is
   made of."
   ========================================================================= */

.chaos{
  background: var(--paper-2);
}

/* The card — same outer treatment as .mttr */
.chaos-card{
  position: relative;
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 32px -16px rgba(37,46,61,.06);
  overflow: hidden;
  isolation: isolate;
}
.chaos-card::before{
  /* hairline brand-gradient at the very top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(113,69,252,.55) 30%,
    rgba(248,173,240,.55) 70%,
    transparent 100%);
  z-index: 2;
}

/* Spec header — matches .mttr-head */
.chaos-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 22px clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chaos-card-key{ color: var(--ink-2); }
.chaos-card-key strong{
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.chaos-card-meta{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink-3);
}
.chaos-card-meta .sep{ color: var(--rule-strong); }
.chaos-card-meta b{
  color: var(--navy);
  font-weight: 700;
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: -.005em;
  text-transform: none;
}

/* Content area — engineering-paper dot grid */
.chaos-card-body{
  background:
    radial-gradient(circle at 1px 1px, rgba(37,46,61,.045) 1px, transparent 1.5px) 0 0 / 28px 28px,
    var(--paper);
  padding: clamp(18px, 2vw, 28px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chaos-card-body svg{
  display: block;
  width: 100%;
  min-width: 1100px;
  height: auto;
}
@media (max-width: 1100px){
  .chaos-card-body{
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  .chaos-card-body svg{ min-width: 1280px; }
}

/* Footer caption — hairline above + mono key + soft sentence */
.chaos-card-foot{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.005em;
}
.chaos-card-foot-key{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--grad-brand-h);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  flex-shrink: 0;
}
.chaos-card-foot-text{ flex: 1 1 0; min-width: 0; }
.chaos-card-foot-text b{
  color: var(--navy);
  font-weight: 600;
}

/* SVG-level hover on boxes — non-positional only.
   A translateY here breaks arrow-to-box termination because the arrows
   are anchored to the original box coordinates, not the transformed ones.
   Brightness + brand-purple drop-shadow gives feedback without moving the box. */
.chaos-svg .chaos-box{
  transition: filter .22s ease, opacity .22s ease;
  cursor: default;
}
.chaos-svg .chaos-box:hover{
  filter:
    brightness(1.05)
    drop-shadow(0 5px 10px rgba(113,69,252,.20));
}

/* Hover-to-isolate: when ANY box is hovered, peers dim and the spaghetti
   arrows fade so the hovered activity reads as a single brick again.
   Pure opacity, no transforms — arrows stay anchored to their boxes. */
.chaos-svg:has(.chaos-box:hover) .chaos-box:not(:hover){
  opacity: 0.42;
}
.chaos-svg:has(.chaos-box:hover) .chaos-arrows path,
.chaos-svg:has(.chaos-box:hover) .chaos-arrows-back path{
  opacity: 0.18;
  transition: opacity .22s ease;
}
.chaos-svg .chaos-arrows path,
.chaos-svg .chaos-arrows-back path{
  transition: opacity .22s ease;
}

@media (prefers-reduced-motion: reduce){
  .chaos-svg .chaos-box,
  .chaos-svg .chaos-arrows path,
  .chaos-svg .chaos-arrows-back path{ transition: none; }
}

/* =========================================================================
   ABOUT — Edmund's Knights cell (4th in founders grid)
   ========================================================================= */
.ab-founder--knights{
  background: linear-gradient(180deg, #fbf9ff 0%, var(--paper) 70%);
  border-color: rgba(113,69,252,.20);
}
.ab-avatar--knights{
  background: linear-gradient(135deg, var(--purple) 0%, var(--lavender) 100%);
  color: #fff;
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 18px;
}

/* Origin — knight metaphor line, slightly emphasized */
.ab-origin-knight{
  font-style: italic;
  color: var(--purple-deep);
  border-left: 2px solid var(--lavender);
  padding-left: 14px;
  margin-top: 12px;
}

/* =========================================================================
   ABOUT — Offices section
   ========================================================================= */
.ab-offices{
  padding: 96px 0;
}
.ab-offices-grid{
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ab-office{
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 32px -16px rgba(37,46,61,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ab-office::before{
  content:""; position:absolute; left:14px; right:14px; top:0; height:2px;
  background: linear-gradient(90deg, #7145FC 0%, #E8B3EC 100%);
  opacity: .35; border-radius: 0 0 2px 2px;
  transition: opacity .22s ease;
}
.ab-office:hover{
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(37,46,61,.12);
  border-color: var(--rule-strong);
}
.ab-office:hover::before{ opacity: .85; }
.ab-office-tag{
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  color: var(--purple); letter-spacing: .10em;
}
.ab-office-addr{
  font-family: var(--f-mono); font-size: 12px; line-height: 1.6;
  color: var(--navy);
}
.ab-office-meta{
  margin-top: auto;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-2); letter-spacing: .04em;
  padding-top: 12px;
  border-top: 1px dashed rgba(37,46,61,.14);
}
.ab-office--planned{
  background: linear-gradient(180deg, #f8f7fb 0%, var(--paper) 70%);
  border-style: dashed;
}
.ab-office--planned .ab-office-tag{ color: var(--ink-2); }
@media (max-width: 980px){
  .ab-offices-grid{ grid-template-columns: 1fr; }
}

/* =========================================================================
   ABOUT — Hiring section
   ========================================================================= */
.ab-hiring{
  padding: 96px 0;
  background: var(--paper-2);
}
.ab-roles{
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; gap: 12px;
}
.ab-role{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ab-role:hover{
  transform: translateY(-1px);
  border-color: var(--rule-strong);
  box-shadow: 0 12px 32px -16px rgba(37,46,61,.10);
}
.ab-role-tag{
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  color: var(--purple); letter-spacing: .10em;
}
.ab-role-title{
  font-family: var(--f-display); font-size: 18px; font-weight: 600;
  color: var(--navy);
}
.ab-role-meta{
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-2); letter-spacing: .04em;
  margin-top: 2px;
}
.ab-role-cta{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  color: var(--purple); letter-spacing: .04em;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(113,69,252,.25);
  border-radius: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.ab-role-cta:hover{
  background: rgba(113,69,252,.06);
  border-color: rgba(113,69,252,.50);
}
.ab-role-cta .arrow{ transition: transform .15s ease; }
.ab-role-cta:hover .arrow{ transform: translateX(2px); }
@media (max-width: 720px){
  .ab-role{ grid-template-columns: 1fr; gap: 8px; }
  .ab-role-cta{ justify-self: start; }
}

/* =========================================================================
   ABOUT — Technologická Inkubace acknowledgment (under backers)
   ========================================================================= */
.ab-incubation-note{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px dashed rgba(37,46,61,.14);
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.ab-incubation-key{
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: .10em;
}
.ab-incubation-note b{
  color: var(--navy);
  font-weight: 600;
}

/* =========================================================================
   I18N — smooth language-switch transition
   - Modern browsers (Chrome 111+, Safari 18+, Edge): View Transitions API
     handles the crossfade automatically. We just slow the default 250ms
     animation slightly so the new strings ease in instead of snapping.
   - Older browsers: i18n.js adds .i18n-swapping to <body>; we fade keyed
     elements out/in via opacity transitions on [data-i18n].
   - prefers-reduced-motion users skip the animation entirely (i18n.js also
     gates this and short-circuits to instant swap).
   ========================================================================= */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

[data-i18n]{
  transition: opacity 180ms ease-out, filter 180ms ease-out;
}
body.i18n-swapping [data-i18n]{
  opacity: 0;
  filter: blur(.4px);
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration: 1ms; }
  [data-i18n]{ transition: none; }
  body.i18n-swapping [data-i18n]{ opacity: 1; filter: none; }
}

/* =========================================================================
   Grant publicity strip
   ========================================================================= */
.grants{
  padding: 36px 0 56px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.grants-statement{
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: center;
  max-width: 78ch;
  margin: 0 auto 28px;
}
.grants-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.grants-row img{
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  opacity: .92;
  transition: opacity .2s ease;
}
.grants-row img:hover{ opacity: 1; }
@media (max-width: 720px){
  .grants{ padding: 28px 0 44px; }
  .grants-row{ gap: 20px 28px; }
}