/* ═══════════════════════════════════════════════════════════════════
   HONCH - v4 palette, HELD ON PURPOSE.

   The brand kit is Ember #E0623A primary, Forest #1E453E co-lead, Chalk
   #F2F6F3 ground. This site ran on those for a day and Anthony has asked
   to go back to v4's blue while the site is still being built: the
   palette is a decision to make once, deliberately, not while the copy
   and the sections underneath it are still moving.

   SO THIS IS TEMPORARY AND IT IS MEANT TO BE EASY TO UNDO. The brand
   values are still defined below, under their own names, and --action
   is the single line that decides which of them the site wears. Point
   --action / --action-h at --ember / --ember-d and the whole site is on
   brand again; nothing else needs touching.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --paper-warm:#FCFCFA;
  --cream:#FAF7F1;
  --chalk:#F2F6F3;               /* brand ground, kept defined and unused */
  --ink:#0A0B0D;
  --ink-soft:#16181C;
  --tx:#0A0B0D;
  --tx-2:#565C64;
  --tx-3:#8A9098;
  --line:#E9E9E5;
  --line-2:#F2F2EE;
  --volt:#4560F5;
  --ember:#E0623A;               /* legacy, retained for edition accents */
  --ember-d:#C9481F;
  /* Honch brand v1 (29 Sep) - indigo primary, coral+green as signal lanes */
  --indigo:#5B4FE0;  --indigo-d:#4A3FD0;  --indigo-light:#7A70F0;
  --coral:#E5603F;   --green:#2E9E6B;
  --forest:#1E453E;              /* brand co-lead */
  --forest-d:#16332E;
  /* THE ONE LINE THAT SWITCHES THE SITE. Indigo, per the 29 Sep brand pack. */
  --action:var(--indigo); --action-h:var(--indigo-d); --on-action:#FFFFFF;
  --volt-wash:#EFF2FE;
  --on-dark:#F6F6F3;
  --on-dark-2:#A0A6AE;
  --r:18px;
  --r-lg:26px;
  --shadow:0 1px 2px rgba(10,11,13,.04), 0 30px 60px -34px rgba(10,11,13,.28);
  --shadow-lg:0 2px 4px rgba(10,11,13,.05), 0 60px 110px -46px rgba(10,11,13,.34);
  --f:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Headlines only. Figtree is the face monday.com uses - geometric, open,
     with a taller x-height than Poppins, which is what makes it read modern
     at a smaller size rather than shouty at a large one. Poppins sits behind
     it as the nearest fallback. Both want far less negative tracking than
     Schibsted - see .d0-.d3 below. */
  --fd:"Figtree","Poppins",var(--f);
  --m:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--tx);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.sec{padding:150px 0}
.sec.tight{padding:104px 0}
.sec.pull{padding-top:64px}
.cream{background:var(--cream)}


/* ── type ─────────────────────────────────────────────────────────── */
.d0,.d1,.d2,.d3,.stat-n,.prose h2,.prose h3,.ia-s h3,.log-i h3,.fun-cap h2{font-family:var(--fd)}
.stat-n,.fun-cap h2{font-weight:600}
/* Sized down to the monday.com register. Their hero runs about 56px, not 75,
   and the confidence comes from the weight and the space around it rather
   than from scale. Figtree also runs heavier than Schibsted at the same
   number, so the two biggest sizes stay at 500. */
.d0{font-size:clamp(36px,4.3vw,58px);line-height:1.08;letter-spacing:-.02em;font-weight:500;margin:0}
.d1{font-size:clamp(32px,3.7vw,50px);line-height:1.12;letter-spacing:-.018em;font-weight:500;margin:0}
.d2{font-size:clamp(25px,2.7vw,36px);line-height:1.18;letter-spacing:-.014em;font-weight:600;margin:0}
.d3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:600;margin:0}
.lede{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--tx-2);margin:0;max-width:46ch}
.tx-2{color:var(--tx-2);margin:0}
.small{font-size:14.5px;color:var(--tx-3);margin:0}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.volt{color:var(--action)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 22px}
.centre{text-align:center}
.centre .lede{margin-left:auto;margin-right:auto}
.gap{color:var(--ember);border-bottom:1.5px dashed rgba(224,98,58,.5)}

/* ── buttons: ink, not orange ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;
  border-radius:999px;font-size:17px;font-weight:600;letter-spacing:-.01em;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s;white-space:nowrap}
.btn svg{width:17px;height:17px;transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--action);color:var(--on-action)}
.btn-p:hover{background:var(--action-h);transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(10,11,13,.42)}
.btn-s{background:transparent;color:var(--ink);border-color:rgba(10,11,13,.2)}
.btn-s:hover{border-color:var(--ink);transform:translateY(-2px)}


.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.reassure{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--tx-3);margin:0}
.reassure b{color:var(--tx-2);font-weight:500}

/* ── nav ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;gap:34px;height:74px;
  max-width:1240px;margin:0 auto;padding:0 32px}
.mark{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.045em}
.mark .mk{width:26px;height:26px;display:block;flex:none}
.mark .logo-img{height:34px;width:auto;display:block}
.nav-l{display:flex;gap:26px;font-size:15.5px;font-weight:500;color:var(--tx-2)}
.nav-l a:hover{color:var(--ink)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav .btn{height:44px;padding:0 22px;font-size:15.5px}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding:104px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:30px;align-items:flex-start}

/* animated hero panel */
.stage{position:relative;height:640px}
.card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow)}
.feed{top:0;left:0;right:0;height:392px;padding:0;overflow:hidden}
.feed-h{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.feed-t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 4px rgba(224,98,58,.16);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.feed-c{font-family:var(--m);font-size:11.5px;color:var(--tx-3);margin-left:auto}
.rail{padding:10px 0;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent 96%)}
.track{animation:scroll 26s linear infinite}
@keyframes scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.row{display:flex;align-items:center;gap:13px;padding:11px 22px}
.sq{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;letter-spacing:-.02em}
.row-m{min-width:0;flex:1}
.row-n{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-d{display:block;font-size:12.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-family:var(--m);font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:6px;flex:none}

/* the match card that floats over the feed */
.match{left:-26px;right:-26px;bottom:0;padding:24px;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);background:#fff}
.match-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.match-l{font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--volt);background:var(--volt-wash);padding:5px 9px;border-radius:6px}
.match-co{font-size:22px;font-weight:700;letter-spacing:-.028em;margin:0 0 6px;
  transition:opacity .4s, transform .4s}
.match-w{font-size:15px;color:var(--tx-2);margin:0 0 18px;min-height:44px;
  transition:opacity .4s, transform .4s}
.meter{height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-bottom:8px}
.meter i{display:block;height:100%;background:var(--action);border-radius:99px;
  width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.match-f{display:flex;align-items:baseline;gap:8px;margin-bottom:18px}
.match-f b{font-family:var(--m);font-size:15px}
.match-f span{font-size:13px;color:var(--tx-3)}
.draft{background:var(--paper-warm);border:1px solid var(--line-2);border-radius:14px;padding:15px 17px}
.draft-l{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 7px}
.draft-t{font-size:14.5px;line-height:1.5;margin:0;min-height:66px}
.caret{display:inline-block;width:2px;height:15px;background:var(--volt);
  vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.fade-in{animation:fade .5s both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── trust row ────────────────────────────────────────────────────── */
.trust{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:44px 0}
.trust p{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx-2);margin:0 0 30px}
.logos{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.logo-sl{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:.32}
.logos .logo-sl:hover{opacity:.65}

/* ── segmented control ───────────────────────────────────────────── */
.seg{display:inline-flex;padding:6px;background:var(--paper-warm);border:1px solid var(--line);
  border-radius:999px;gap:4px;flex-wrap:wrap;justify-content:center}
.seg button{height:44px;padding:0 20px;border:0;background:transparent;border-radius:999px;
  font-family:inherit;font-size:15.5px;font-weight:600;color:var(--tx-2);cursor:pointer;
  letter-spacing:-.012em;transition:background .18s,color .18s;display:flex;align-items:center;gap:8px}
.seg button i{width:8px;height:8px;border-radius:3px;background:currentColor;opacity:.85;display:block}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--action);color:var(--on-action)}

/* ── ask panel ───────────────────────────────────────────────────── */
.ask{margin:44px auto 0;max-width:840px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;text-align:left}
.ask-h{display:flex;align-items:center;gap:11px;padding:18px 24px;border-bottom:1px solid var(--line-2)}
.ask-t{font-weight:700;font-size:15.5px;letter-spacing:-.015em}
.ask-b{padding:26px 24px}
.ask-q{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.field{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);
  border-radius:14px;padding:5px 5px 5px 18px;background:#fff}
.field input{flex:1;border:0;outline:0;font-family:inherit;font-size:16px;height:50px;
  background:transparent;color:var(--tx)}
.field input::placeholder{color:var(--tx-3)}
.go{width:46px;height:46px;border-radius:11px;border:0;background:var(--action);color:var(--on-action);
  cursor:pointer;display:grid;place-items:center;flex:none}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;color:var(--tx-2)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.ask-f{display:flex;align-items:center;gap:9px;padding:15px 24px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--tx-3);background:var(--paper-warm)}

/* ── generic layout helpers ──────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split.top{align-items:start}
.stack{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.tile{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:#fff;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.tile .n{font-family:var(--m);font-size:12px;color:var(--tx-3);margin:0 0 26px}
.tile h3{font-size:20px;font-weight:700;letter-spacing:-.024em;margin:0 0 10px}
.tile p{font-size:15.5px;color:var(--tx-2);margin:0;line-height:1.55}




.rule{height:1px;background:var(--line-2);border:0;margin:0}

/* ── numbers band (light, hairlines, no slab) ───────────────────── */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band div{padding:44px 34px}
.band div:first-child{padding-left:0}
.band div+div{border-left:1px solid var(--line)}
.band b{display:block;font-size:clamp(36px,4.2vw,58px);font-weight:700;letter-spacing:-.038em;
  line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.band em{display:block;width:26px;height:3px;border-radius:9px;background:var(--action);margin-bottom:16px}
.band div>span{font-size:15px;color:var(--tx-2);display:block;max-width:22ch}

/* ── equation ────────────────────────────────────────────────────── */
.eq{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  font-size:clamp(20px,2.3vw,31px);font-weight:700;letter-spacing:-.028em}
.eq s{text-decoration:none;color:var(--action);font-size:.8em;font-weight:600}

/* ── quote (no box) ──────────────────────────────────────────────── */
.pull{max-width:22ch;font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1.14;
  letter-spacing:-.03em;margin:0}
.attrib{font-size:14.5px;color:var(--tx-3);margin:18px 0 0}

/* ── editions ────────────────────────────────────────────────────── */
.ed{display:flex;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line-2);
  transition:padding-left .2s}
.ed:hover{padding-left:12px}
.ed-n{font-size:19px;font-weight:650;letter-spacing:-.022em}
.ed-d{font-size:15px;color:var(--tx-3);margin-left:auto;font-family:var(--m)}
.ed-a{color:var(--tx-3);transition:transform .2s,color .2s}
.ed:hover .ed-a{transform:translateX(4px);color:var(--ink)}

/* ── footer ──────────────────────────────────────────────────────── */
.ft{background:var(--paper);color:var(--tx);padding:84px 0 44px;border-top:1px solid var(--line)}
.ft-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.ft-h{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 18px}
.ft-l{display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--tx-2)}
.ft-l a:hover{color:var(--ink)}
.ft-b{display:flex;align-items:center;gap:18px;margin-top:64px;padding-top:26px;
  border-top:1px solid var(--line-2);font-size:14px;color:var(--tx-3);flex-wrap:wrap}


@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr;gap:52px}
  .stage{height:470px}
  .g3,.g2,.band,.ft-g{grid-template-columns:1fr}
  .band div{padding:26px 0}
  .band div+div{border-left:0;border-top:1px solid var(--line)}
  .sec{padding:104px 0}
  .match{left:0;right:0}
}
@media (prefers-reduced-motion:reduce){
  .track{animation:none}.dot{animation:none}.caret{animation:none}
}

/* ── scroll-converge: the market falls into the dashboard ────────── */
.cvg{position:relative;height:320vh}
.cvg-stick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;
  padding-top:150px;box-sizing:border-box}
.cvg-head{position:absolute;top:74px;left:0;right:0;text-align:center;z-index:4;
  padding:0 32px;transition:opacity .3s}
.cvg-head h2{font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.028em;
  font-weight:800;margin:0 auto;max-width:22ch}
.cvg-head p{margin:14px auto 0;color:var(--tx-2);font-size:16.5px;max-width:52ch}
.cvg-field{position:absolute;inset:0}
.sig{position:absolute;width:252px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:15px 16px;box-shadow:var(--shadow);will-change:transform,opacity}
.sig-t{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.sig-t span{font-family:var(--m);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px}
.sig-c{font-size:14.5px;font-weight:700;letter-spacing:-.018em;margin:0 0 3px}
.sig-d{font-size:12.5px;color:var(--tx-2);margin:0;line-height:1.4}
/* the dashboard everything lands in */
.cvg-dash{position:relative;z-index:3;width:min(780px,88vw);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;will-change:transform,opacity}
.dash-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.dash-mk{width:18px;height:18px;display:block;flex:none}
.dash-t{font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.dash-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--m);
  font-size:10.5px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.1em}
.dash-nums{display:grid;grid-template-columns:repeat(5,1fr)}
.dash-nums div{padding:16px 18px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.dash-nums div:last-child{border-right:0}
.dash-nums b{display:block;font-family:var(--m);font-size:21px;font-weight:600;letter-spacing:-.03em;margin-bottom:5px}
.dash-nums span{font-size:11.5px;color:var(--tx-3);display:block;line-height:1.3}
.dash-rows{padding:6px 0 8px}
.dash-row{display:flex;align-items:center;gap:12px;padding:10px 18px;opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s}
.dash-row.in{opacity:1;transform:none}
.dash-sq{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:700}
.dash-m{flex:1;min-width:0}
.dash-n{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.015em}
.dash-w{display:block;font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-f{font-family:var(--m);font-size:11.5px;color:var(--action);flex:none}
.cvg-foot{position:absolute;bottom:52px;left:0;right:0;text-align:center;z-index:4;
  font-family:var(--m);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-3);opacity:0;transition:opacity .4s}
@media (max-width:900px){
  .cvg{height:240vh}
  .sig:nth-child(n+6){display:none}
  .sig{width:210px}
  .dash-nums{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.cvg{height:auto}.cvg-stick{height:auto;padding:120px 0}.cvg-field{display:none}}

/* ── client logo scroller ───────────────────────────────────────── */
.rail-x{overflow:hidden;padding:6px 0 2px;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail-t{display:flex;align-items:center;gap:64px;width:max-content;
  animation:railslide 48s linear infinite}
.rail-x:hover .rail-t{animation-play-state:paused}
@keyframes railslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lg{display:flex;align-items:center;height:38px;flex:none;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.lg:hover{filter:grayscale(0);opacity:1}
.lg-i{max-height:34px;width:auto;display:block}
.lg.has .lg-t{display:none}
.lg-t{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--tx);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.rail-t{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:40px}}

@media (max-height:760px){
  .cvg-head h2{font-size:26px}
  .cvg-head p{font-size:14.5px}
  .cvg-stick{padding-top:112px}
  .cvg-foot{bottom:26px}
}

/* ── rhythm: tighter sections, two tinted interruptions ──────────── */
.sec{padding:118px 0}
.sec.tight{padding:88px 0}
.tint{background:#F5F7FE;border-top:1px solid #E7ECFB;border-bottom:1px solid #E7ECFB}
.deep{background:#F0F3FD;border-top:1px solid #E1E8FA;border-bottom:1px solid #E1E8FA}
.deep .lede{max-width:56ch}

/* ── the results wall ────────────────────────────────────────────── */
.res{margin-top:22px;border-top:1px solid var(--line-2);padding-top:20px;text-align:left}
.res-work{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--tx-2);padding:8px 0 14px}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--action);animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.res-h{font-size:16.5px;margin:0 0 14px;font-weight:600;letter-spacing:-.018em}
.res-h b{font-family:var(--m);color:var(--action)}
.res-h .small{font-weight:400;margin-left:6px}
.res-row{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.res-sq{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:12.5px;font-weight:700;background:var(--tx-3)}
.res-m{flex:1;min-width:0}
.res-n{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.018em}
.res-w{display:block;font-size:14px;color:var(--tx-2);line-height:1.45;margin-top:2px}
.res-f{font-family:var(--m);font-size:12.5px;color:var(--action);flex:none;padding-top:3px}
.res-op{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-warm);
  border:1px solid var(--line-2);font-size:14px;line-height:1.5}
.res-op b{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:5px;font-family:var(--m);font-weight:500}
.wall{position:relative;margin-top:8px;min-height:168px;padding-top:8px}
.wall-blur{filter:blur(5px);opacity:.5;pointer-events:none;user-select:none}
.wall-blur .res-sq{background:var(--line)}
.wall-blur .res-n,.wall-blur .res-w{background:var(--line-2);border-radius:5px;height:12px;margin-top:5px}
.wall-blur .res-n{width:38%}.wall-blur .res-w{width:66%}
.wall-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:13px;text-align:center}
.wall-t{margin:0;font-size:15px;color:var(--tx-2)}
.wall-t b{font-family:var(--m);color:var(--tx)}
.wall-c .btn{height:48px;font-size:16px}

/* ── proof ───────────────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics div{padding:38px 32px}
.metrics div:first-child{padding-left:0}
.metrics div+div{border-left:1px solid var(--line)}
.metrics b{display:block;font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;
  line-height:1;margin-bottom:14px}
.metrics div>span{font-size:15px;color:var(--tx-2);display:block;max-width:26ch}
.story{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:#fff}
.story blockquote{margin:0 0 22px;font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.022em}
.story figcaption{display:flex;align-items:center;gap:14px}
.story-w{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;color:var(--tx-3);
  border:1px dashed var(--line);padding:7px 11px;border-radius:6px}

/* ── how it works ────────────────────────────────────────────────── */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.flow li{background:#fff;padding:30px;display:flex;flex-direction:column;gap:9px}
.flow-n{font-family:var(--m);font-size:11.5px;color:var(--action)}
.flow b{font-size:18.5px;letter-spacing:-.022em}
.flow span:last-child{font-size:15px;color:var(--tx-2);line-height:1.5}
@media (max-width:900px){
  .metrics{grid-template-columns:1fr}.metrics div{padding:26px 0}
  .metrics div+div{border-left:0;border-top:1px solid var(--line)}
  .flow{grid-template-columns:1fr}
}



/* ═══════════════════════════════════════════════════════════════════
   INNER PAGES - additions to v4 for the full site. Same tokens, same
   discipline: white ground, ink action, volt emphasis, ember for live.
   Edition colour arrives as --ed on the page hero and is used sparingly.
   ═══════════════════════════════════════════════════════════════════ */

/* nav: dropdowns + mobile */
.nav-l{align-items:center}
.nav-l a.on{color:var(--ink);font-weight:600}
.nav-signin{font-size:15.5px;font-weight:500;color:var(--tx-2)}
.nav-item{position:relative;display:inline-flex;align-items:center;height:74px}
.nav-panel{position:absolute;top:calc(100% - 12px);left:-16px;min-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow-lg);padding:12px;display:none;z-index:90}
.nav-panel.wide{min-width:720px}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{display:block}
.np-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.np-grid.one{grid-template-columns:1fr}
.np-i{display:flex;gap:12px;padding:11px 13px;border-radius:12px;align-items:flex-start;color:inherit}
.np-i:hover{background:var(--paper-warm)}
.np-sq{width:10px;height:10px;border-radius:3px;flex:none;margin-top:6px}
.np-t{font-size:14.5px;font-weight:650;letter-spacing:-.015em;display:block;color:var(--ink)}
.np-d{font-size:13px;color:var(--tx-3);display:block;margin-top:2px;line-height:1.4}
.np-foot{display:flex;align-items:center;gap:8px;margin-top:6px;padding:12px 13px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--tx-3)}
.np-foot a{color:var(--action);font-weight:600}
.burger{display:none;flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);margin-left:auto}
.mnav{display:none;border-bottom:1px solid var(--line);background:#fff;padding:10px 24px 22px}
.mnav.open{display:block}
.mnav-h{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin:16px 0 8px}
.mnav-l{display:flex;flex-direction:column;gap:1px}
.mnav-l a{padding:9px 10px;border-radius:8px;font-size:15.5px;font-weight:500;color:var(--tx)}
.mnav-l a:hover{background:var(--paper-warm)}
@media (max-width:1080px){
  .nav-l{display:none}.nav-r .btn-s,.nav-signin{display:none}.burger{display:flex}
  .nav-in{gap:12px;padding:0 20px}.nav-r{margin-left:auto;gap:10px}.nav .btn{padding:0 16px}
}

/* page hero */
.hero.ph{padding:96px 0 88px}
.hero.ph.solo .hero-copy{max-width:60ch}
.hero.ph .d0{max-width:16ch}
.hero.ph.solo .d0{font-size:clamp(42px,5.4vw,72px)}
.ed-eb{color:var(--ed,var(--tx-3))}
.kicker{font-size:16.5px;color:var(--tx-2);margin:0;max-width:52ch;padding-left:16px;border-left:3px solid var(--ed,var(--action))}
.hero-vis{min-width:0}
@media (max-width:1000px){.hero.ph{padding:64px 0 56px}}

/* body text + left heads */
.tile .n:empty{display:none}
.body{font-size:17px;line-height:1.62;max-width:62ch}
.shead-l{margin-bottom:56px;max-width:60ch}
.shead-l .lede{max-width:56ch}
.split.rev>*:first-child{order:2}
@media (max-width:1000px){.split.rev>*:first-child{order:0}}

/* ticks */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{display:flex;gap:11px;font-size:16px;color:var(--tx-2);line-height:1.5}
.ticks li::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--action);flex:none;margin-top:9px}

/* faq */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:20px 26px;cursor:pointer;font-weight:650;font-size:17px;letter-spacing:-.015em;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--tx-3);font-weight:400;font-size:22px}
.faq details[open] summary::after{content:"-"}
.faq .a{padding:0 26px 22px;font-size:16px;line-height:1.6;color:var(--tx-2);max-width:70ch}

/* note */
.note{border-left:3px solid var(--action);background:var(--volt-wash);padding:18px 22px;border-radius:0 14px 14px 0;max-width:72ch}
.note p{margin:0;font-size:15.5px;line-height:1.55;color:var(--tx-2)}
.note b{color:var(--ink)}

/* product frame + rows */
.frame{background:#fff;border:1px solid #E8EAEE;border-radius:14px;box-shadow:0 1px 2px rgba(23,35,61,.05),0 30px 60px -34px rgba(10,11,13,.25);overflow:hidden;position:relative;font-family:'Inter',var(--f)}
.frame::before{content:"";position:absolute;top:0;left:0;height:2px;width:32%;background:linear-gradient(90deg,transparent,rgba(201,80,43,.85),transparent);animation:hscan 3.6s linear infinite;z-index:2}
@media (prefers-reduced-motion:reduce){.frame::before{display:none}}
.frame-bar{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.frame-t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#666C74}
.frame-c{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;color:#8B9199;text-transform:uppercase;letter-spacing:.14em}
.frame-b{padding:6px 0}
.rws{display:flex;flex-direction:column}
.rw{display:flex;align-items:center;gap:13px;padding:12px 20px;border-bottom:1px solid var(--line-2)}
.rw:last-child{border-bottom:0}
.rw-m{flex:1;min-width:0}
.rw-n{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-d{display:block;font-size:12.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-r{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:700;color:#0E1013;flex:none}
.frame .pad{padding:18px 20px}
.frame .kv{padding:8px 20px 14px}

/* evidence block */
.ev{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--paper-warm)}
.ev-l{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin:0 0 10px}
.ev blockquote{margin:0 0 12px;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:-.012em}
.ev-s{margin:0;font-size:13px;color:var(--tx-3)}

/* crumb, kv, tables */
.crumb{font-size:13.5px;color:var(--tx-3);margin:0 0 22px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--tx-3)}.crumb a:hover{color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:14.5px;margin:0}
.kv dt{color:var(--tx-3)}.kv dd{margin:0;color:var(--ink);font-weight:500}
.scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cmp th{text-align:left;padding:15px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);font-weight:600;border-bottom:1px solid var(--line);background:var(--paper-warm)}
.cmp td{padding:15px 20px;border-bottom:1px solid var(--line-2);color:var(--tx-2);vertical-align:top;line-height:1.45}
.cmp tr:last-child td{border-bottom:0}
.cmp td.y{color:var(--ink);font-weight:600}
.mk{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-4px}
.mk.yes{background:var(--volt-wash);color:var(--action)}
.mk.no{background:var(--line-2);color:var(--tx-3)}

/* pricing */
.price-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-c{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:32px;display:flex;flex-direction:column;gap:16px}
.price-c.hi{border:1.5px solid var(--action);box-shadow:0 2px 10px rgba(69,96,245,.08),0 24px 52px -26px rgba(69,96,245,.35)}
.price-k{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin:0}
.price-c.hi .price-k{color:var(--action)}
.price-n{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0}
.price-n small{font-size:16px;font-weight:500;color:var(--tx-3);letter-spacing:0;margin-left:4px}
.price-for{font-size:15.5px;color:var(--tx-2);margin:0;min-height:44px}
.price-c .ticks li{font-size:15px}
.price-c .btn{margin-top:auto;justify-content:center}
@media (max-width:1000px){.price-g{grid-template-columns:1fr}}

/* directory + timeline mocks used on edition pages */
.dir{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-top:1px solid var(--line-2)}
.dir-l{border-right:1px solid var(--line-2);padding:8px 0}
.dir-r{padding:18px 20px}
.dir-i{display:flex;align-items:center;gap:12px;padding:10px 20px;font-size:14px}
.dir-i.on{background:var(--paper-warm);font-weight:650}
.dir-i .ct{margin-left:auto;font-family:var(--m);font-size:12px;color:var(--tx-3);white-space:nowrap}
.dir-bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;flex:none;width:80px}
.dir-bar i{display:block;height:100%;background:var(--ed,var(--action));border-radius:99px}
.conf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-3)}
.conf i{width:8px;height:8px;border-radius:50%;display:block}
.conf.hi i{background:#12864A}.conf.md i{background:#B85B18}.conf.lo i{background:var(--tx-3)}
.tl{display:flex;flex-direction:column;border-left:2px solid var(--line);margin:8px 0 8px 26px}
.tl-i{position:relative;padding:12px 20px 14px 26px}
.tl-i::before{content:"";position:absolute;left:-7px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--ed,var(--action));border:2px solid #fff}
.tl-i.soon::before{background:var(--ember)}
.tl-d{font-family:var(--m);font-size:11.5px;color:var(--tx-3);display:block;margin-bottom:4px}
.tl-n{font-size:14.5px;font-weight:650;letter-spacing:-.015em;display:block}
.tl-s{font-size:13px;color:var(--tx-2);display:block;margin-top:2px}
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pillrow span{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--tx-2)}
.pillrow span.hi{border-color:var(--ed,var(--action));color:var(--ed,var(--action));font-weight:600}
@media (max-width:760px){.dir{grid-template-columns:1fr}.dir-l{border-right:0;border-bottom:1px solid var(--line-2)}}

/* edition index tiles */
.edx{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.edx a{display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.edx a::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.edx a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.edx .sq{width:34px;height:34px;border-radius:10px;font-size:13px}
.edx b{font-size:18px;letter-spacing:-.022em;font-weight:700}
.edx span.s{font-size:14px;color:var(--tx-2);line-height:1.45}
.edx span.c{margin-top:auto;font-family:var(--m);font-size:12px;color:var(--tx-3)}
@media (max-width:1100px){.edx{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.edx{grid-template-columns:1fr}}

/* logos band reused on inner pages */
.trust.inner{border-top:0;padding:28px 0 8px}

/* quote strip */
.qstrip{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:900px){.qstrip{grid-template-columns:1fr}}

/* legal / prose pages */
.prose{max-width:72ch;margin:0 auto}
.prose h2{font-size:26px;letter-spacing:-.025em;margin:44px 0 12px}
.prose h3{font-size:19px;letter-spacing:-.02em;margin:28px 0 8px}
.prose p,.prose li{font-size:16.5px;line-height:1.65;color:var(--tx-2)}
.prose ul{padding-left:22px}
.prose strong{color:var(--ink)}

/* changelog */
.log{border-left:2px solid var(--line);margin-left:8px;display:flex;flex-direction:column;gap:0}
.log-i{position:relative;padding:0 0 38px 30px}
.log-i::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--action);border:2px solid #fff}
.log-d{font-family:var(--m);font-size:12px;color:var(--tx-3);display:block;margin-bottom:8px}
.log-i h3{margin:0 0 10px;font-size:20px;letter-spacing:-.022em}
.log-i ul{margin:0;padding-left:20px;color:var(--tx-2);font-size:15.5px;line-height:1.6}

/* role cards */
.role{display:flex;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line-2)}
.role b{font-size:18px;letter-spacing:-.02em}
.role span{color:var(--tx-3);font-size:14.5px}
.role .ed-a{margin-left:auto}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--tx-2);font-weight:500}
.form input,.form select,.form textarea{height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font-family:inherit;font-size:15.5px;color:var(--tx);background:#fff}
.form textarea{height:120px;padding:12px 14px;resize:vertical}
.form .full{grid-column:1/-1}
@media (max-width:700px){.form{grid-template-columns:1fr}}

/* 404 */
.big404{font-size:clamp(96px,18vw,220px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--line);margin:0}

/* util */
.mt0{margin-top:0}.mt2{margin-top:26px}.mt3{margin-top:44px}.mt4{margin-top:64px}
.centre .body{margin-left:auto;margin-right:auto}
.hairline{border-top:1px solid var(--line-2)}
.tint .tile,.deep .tile,.cream .tile{border-color:transparent;box-shadow:0 1px 3px rgba(10,11,13,.04),0 14px 34px -22px rgba(10,11,13,.18)}
.tint .frame,.deep .frame{border-color:transparent}
.sec.pullup{padding-top:40px}

/* band column counts (classes, so the mobile rule can win) */
.band.c2{grid-template-columns:repeat(2,1fr)}
.band.c3{grid-template-columns:repeat(3,1fr)}
.band.c5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.band.c2,.band.c3,.band.c5{grid-template-columns:1fr}}

.rw .sq{width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid #EAECF0;color:#666C74;font-size:10px;font-weight:700;letter-spacing:.02em}
.rw .tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;background:transparent!important;padding:0;border-radius:0;display:inline-flex;align-items:center;gap:6px}
.rw .tag::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;display:inline-block}
.kv dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding-top:3px}

/* ── LIVE SIGNAL TICKER ─────────────────────────────────────────────────────
   Read at a glance, a row has to say WHAT FIRED and WHERE. So the trigger is
   a coloured chip at the front, the brand is the only bold thing, and the
   detail is quiet. Logos come from the platform's own /logos endpoint and
   remove themselves if they 404, so a missing one costs alignment and nothing
   else. */
.tk{display:flex;align-items:stretch;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden}
.tk-lab{flex:none;display:flex;align-items:center;gap:9px;padding:0 20px;
    background:var(--ink);color:#fff;font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tk-lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--action);
    box-shadow:0 0 0 0 rgba(69,96,245,.7);animation:tk-pulse 2.4s infinite}
@keyframes tk-pulse{70%{box-shadow:0 0 0 7px rgba(69,96,245,0)}100%{box-shadow:0 0 0 0 rgba(69,96,245,0)}}
.tk-vp{flex:1;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
/* 240s. It was 64, then 190, and both still read as motion rather than
   information. A strip you cannot finish reading a row of is decoration. */
.tk-track{display:flex;width:max-content;animation:tk-roll 240s linear infinite}
.tk:hover .tk-track{animation-play-state:paused}
@keyframes tk-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-run{display:flex;align-items:center}
.tk-i{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;white-space:nowrap;
    font-size:14px;border-right:1px solid var(--line-2)}
/* THE TRIGGER, which is the word Ant wants seen first. */
.tk-tg{font-style:normal;font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;padding:4px 8px;border-radius:5px;flex:none}
.tk-new_hire{background:#EEF1FF;color:#2E4BFF}
.tk-company_signal{background:#E6F5EF;color:#0E7C5A}
.tk-job_intent{background:#FDF3E3;color:#9A6612}
.tk-sponsorship{background:#FBEFEA;color:#C9481F}
.tk-logo{width:20px;height:20px;border-radius:4px;object-fit:contain;background:#fff;flex:none}
.tk-co{font-weight:700;color:var(--tx);letter-spacing:-.012em}
.tk-s{color:var(--tx-3)}
.tk-s::before{content:"·";margin-right:10px}
.tk-w{font-family:var(--m);font-style:normal;font-size:10.5px;color:var(--tx-3);text-transform:lowercase}
@media (max-width:760px){.tk-lab{display:none}.tk-i{padding:12px 20px;font-size:13px}}
@media (prefers-reduced-motion:reduce){
  .tk-track{animation:none}.tk-vp{overflow-x:auto}.tk-run:nth-child(2){display:none}
}

/* ── TRUSTED BY ─────────────────────────────────────────────────────────────
   The monday.com strip: the claim sits on the left behind a rule, the logos
   roll past it. Centred above the row it reads as an announcement and takes a
   band of its own; set beside them it is a caption, which is all it needs to
   be - the logos are the evidence.

   Real client SVGs from assets/logos/. Each <img> carries its own width and
   height, computed at build time from the file: the marks range from boxy
   (SAP, Sage) to very long (AdviserPlus), one global height makes half of them
   look wrong, and Chrome sizes a viewBox-only SVG from its own default box if
   the width is left off. Full colour, not greyscale - these are real customers
   and the colour is the point. */
.tb{padding:30px 0;background:var(--paper);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
.tb-row{display:flex;align-items:center;gap:36px}
/* The rule hangs off the LABEL, not the viewport. A mask starts transparent at
   its own left edge and takes the element's border with it, so a border-left
   on .tb-vp is invisible. */
.tb-l{flex:none;margin:0;width:238px;padding-right:36px;border-right:1px solid var(--line);
    font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.05em;
    text-transform:uppercase;color:var(--tx)}
.tb-vp{flex:1;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 50px,#000 calc(100% - 90px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 50px,#000 calc(100% - 90px),transparent)}
.tb-track{display:flex;width:max-content;animation:tb-roll 64s linear infinite}
.tb:hover .tb-track{animation-play-state:paused}
@keyframes tb-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tb-run{display:flex;align-items:center}
.tb-m{margin:0 30px;flex:none;object-fit:contain;opacity:.88;transition:opacity .2s}
.tb:hover .tb-m,.tb-m:hover{opacity:1}
/* Cooper Parry's purple ground is baked into the artwork, so it gets a corner
   radius to read as a badge, not a bleed. Named tb-block, not chip: .chip is
   already a white pill with padding and a border, and it was winning - the
   logo came out letterboxed inside a white box. */
.tb-m.tb-block{border-radius:5px}
@media (max-width:860px){
  .tb-row{display:block}
  .tb-l{width:auto;margin:0 0 16px;padding-right:0;border-right:0;
        text-align:center;font-size:12px}
  .tb-l br{display:none}
  .tb-m{margin:0 24px}
}
@media (prefers-reduced-motion:reduce){.tb-track{animation:none}.tb-run:nth-child(2){display:none}}

/* ── HOMEPAGE: proposition, editions breakdown, outreach ────────────────── */
.stat-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:72px;
  padding-top:40px;border-top:1px solid var(--line)}
.stat-hero>div{display:flex;flex-direction:column;gap:6px}
.stat-n{font-size:clamp(38px,4.4vw,58px);line-height:1;font-weight:800;letter-spacing:-.035em;
  color:var(--ember)}
.stat-l{font-size:14.5px;color:var(--tx-2);max-width:20ch}
@media (max-width:760px){.stat-hero{grid-template-columns:1fr;gap:26px}}

.ia{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ia-s{padding:30px 28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.ia-n{font-family:var(--m);font-size:12px;font-weight:600;color:var(--ember);
  letter-spacing:.1em;display:block;margin-bottom:16px}
.ia-s h3{margin:0 0 10px}
.ia-s p{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:900px){.ia{grid-template-columns:1fr}}


/* MCP is the one thing on this page a competitor cannot copy this quarter. */
.tile-hero{background:var(--forest);border-color:var(--forest)}
.tile-hero h3,.tile-hero p{color:var(--on-dark)}
.tile-hero .n{color:var(--ember)}


/* The concession line. Set apart because a claim that admits a weakness has to
   look deliberate, not like a caveat somebody squeezed into a paragraph. */
.ia-hon{margin-top:44px;padding:30px 34px;border-left:4px solid var(--action);
  background:var(--paper);border-radius:0 var(--r) var(--r) 0}
.ia-hon p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--tx-2);max-width:62ch}
.ia-hon b{color:var(--tx);font-weight:650}
.ia-s h3 em{font-style:italic;color:var(--action)}

/* ── EDITIONS, THE HUBSPOT SHAPE ────────────────────────────────────────────
   Argument on the left with the CTAs under it, the five markets as cards on
   the right. The split is what lets each card be two lines instead of a
   paragraph: the case has already been made once, on the left. */
.hb{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.hb-copy{position:sticky;top:96px}
.hb-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hb-c{display:flex;flex-direction:column;gap:11px;padding:22px 22px 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;transition:border-color .18s,box-shadow .18s,transform .18s}
.hb-c:hover{border-color:var(--edc);box-shadow:var(--shadow);transform:translateY(-2px)}
.hb-t{display:flex;align-items:center;gap:10px}
.hb-i{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:13px;flex:none}
.hb-n{font-size:16.5px;font-weight:700;letter-spacing:-.015em;color:var(--tx)}
.hb-l{display:flex;gap:9px;font-size:14px;line-height:1.5;color:var(--tx-2)}
.hb-l i{flex:none;margin-top:3px}
.hb-l svg{width:13px;height:13px;color:var(--edc)}
.hb-go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:650;color:var(--action)}
/* The fifth card sits alone on the last row; letting it span keeps the block
   from ending on a gap, which reads as a missing product. */
.hb-c:last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}
.hb-c:last-child .hb-l{flex:1;min-width:220px}
@media (max-width:1040px){.hb{grid-template-columns:1fr;gap:38px}.hb-copy{position:static}}
@media (max-width:620px){.hb-g{grid-template-columns:1fr}
  .hb-c:last-child{flex-direction:column;align-items:flex-start;gap:11px}}


/* ═══════════════════════════════════════════════════════════════════
   THE INSTRUMENT - the product's own design system, scoped under .hi
   Ported from frontend/honch-instrument.css so the marketing site shows
   the real dashboard vocabulary: 13px rows, hairlines, 9-10px mono
   micro-labels, square dots (never pills), the ten-segment fit bar,
   Space Grotesk company names, and the ember scanline - the pulse.
   ═══════════════════════════════════════════════════════════════════ */
.hi{
  --hi-page:#F7F8FA;--hi-surface:#fff;--hi-surface-2:#FBFBFC;--hi-surface-3:#F6F7F8;--hi-rail:#FAFAFA;
  --hi-line:#E8EAEE;--hi-line-soft:#F0F1F4;--hi-line-btn:#E2E5EA;--hi-line-tile:#EAECF0;--hi-seg-empty:#DDE0E5;
  --hi-ink:#0E1013;--hi-ink-2:#3A3F46;--hi-ink-3:#666C74;--hi-ink-4:#8B9199;--hi-ink-5:#B0B6BE;
  --hi-btn:#14161A;--hi-btn-fg:#fff;--hi-accent:#5B4FE0;--hi-focus:#2F6FED;
  --hi-chip-2:#F4F5F7;--hi-chip-3:#EDEEF1;
  --hi-fit-hi:#2E9E6B;--hi-fit-mid:#E5603F;--hi-fit-lo:#9AA0A8;
  --hi-hire-dot:#5B4FE0;--hi-hire-fg:#4A3FD0;--hi-promo-dot:#5B4FE0;--hi-promo-fg:#4A3FD0;
  --hi-fund-dot:#E5603F;--hi-fund-fg:#C2431F;--hi-exp-dot:#2E9E6B;--hi-exp-fg:#23744F;
  --hi-acq-dot:#E5603F;--hi-acq-fg:#C2431F;--hi-give-dot:#2E9E6B;--hi-give-fg:#23744F;
  --hi-dev-dot:#2E9E6B;--hi-dev-fg:#23744F;--hi-own-dot:#5B4FE0;--hi-own-fg:#4A3FD0;
  --hi-r:14px;--hi-r-sm:8px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13.5px;line-height:1.5;
  color:var(--hi-ink);text-align:left;
}
.hi *{box-sizing:border-box}
.hi .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.hi .mi{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.hi .mi-9{font-size:9px}
.hi .hi-h1{font-family:'Space Grotesk','Inter',system-ui,sans-serif;margin:0;font-size:24px;font-weight:600;letter-spacing:-.035em;color:var(--hi-ink)}
.hi .hi-sub{font-size:13px;color:var(--hi-ink-3);margin:4px 0 0}
.hi .hi-sub b{color:var(--hi-ink);font-weight:600}

/* the app window */
.hi-app{display:flex;background:var(--hi-page);border:1px solid var(--hi-line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(10,11,13,.04),0 40px 80px -40px rgba(10,11,13,.35)}
.hi-side{width:212px;flex:none;background:var(--hi-rail);border-right:1px solid var(--hi-line);padding:10px 8px 14px}
.hi-main{flex:1;min-width:0;padding:22px 24px 8px}
.hi-app.compact .hi-side{display:none}
.hi-app.compact .hi-main{padding:18px 20px 6px}
@media (max-width:1000px){.hi-side{display:none}}

/* rail */
.hi .hi-qa{display:flex;align-items:center;gap:8px;margin:2px 2px 8px;padding:7px 9px;border:1px solid var(--hi-line);border-radius:var(--hi-r-sm);
  background:var(--hi-surface);color:var(--hi-ink-3);font-size:12.5px;font-weight:500}
.hi .hi-qa kbd{margin-left:auto;font-size:10.5px;color:var(--hi-ink-4);font-family:inherit;border:1px solid var(--hi-line);border-radius:4px;padding:1px 5px;background:var(--hi-surface-2)}
.hi .snav-section{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--hi-ink-4);padding:14px 9px 5px}
.hi .snav-item{display:flex;align-items:center;gap:9px;min-height:30px;padding:0 9px;border-radius:7px;color:var(--hi-ink-2);font-size:13px;font-weight:500}
.hi .snav-item.on{background:var(--hi-surface-3);color:var(--hi-ink);font-weight:600}
.hi .snav-item .cnt{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--hi-ink-4);font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.hi .dot8{width:8px;height:8px;border-radius:3px;flex:none;display:inline-block}

/* header: provenance + h1 + tune line */
.hi .prov{display:flex;align-items:center;gap:8px;color:var(--hi-ink-4);margin-bottom:8px}
.hi .pulse-d{width:7px;height:7px;border-radius:50%;background:var(--hi-accent);display:inline-block;animation:hpulse 2.1s ease-in-out infinite}
@keyframes hpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.hi .hi-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.hi .hi-head .grow{flex:1;min-width:0}
.hi .hi-tools{display:flex;gap:8px;flex:none;padding-top:22px}

/* market read strip */
.hi .mkt{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 16px;background:var(--hi-surface);border:1px solid var(--hi-line);
  border-radius:var(--hi-r);margin:0 0 14px}
.hi .mkt .mi{color:var(--hi-ink-4);padding-top:3px}
.hi .mkt p{margin:0;font-size:13px;color:var(--hi-ink-2);line-height:1.5}
.hi .mkt .ai{margin-top:4px;color:var(--hi-ink-4)}
.hi .mkt .ai b{color:var(--hi-ink-2);font-weight:600;margin-right:8px}

/* tabs */
.hi .tabs{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--hi-line);margin-bottom:12px}
.hi .tab{display:inline-flex;align-items:center;gap:7px;padding:0 1px 10px;border-bottom:2px solid transparent;font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:13.5px;font-weight:500;color:var(--hi-ink-4)}
.hi .tab .cnt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:var(--hi-chip-2);color:var(--hi-ink-4)}
.hi .tab.on{border-bottom-color:var(--hi-ink);color:var(--hi-ink);font-weight:600}
.hi .tab.on .cnt{background:var(--hi-chip-3);color:var(--hi-ink-2)}

/* the card + the row */
.hi .hcard{background:var(--hi-surface);border:1px solid var(--hi-line);border-radius:var(--hi-r);box-shadow:0 1px 2px rgba(23,35,61,.05);overflow:hidden;position:relative}
.hi .hrow,.hi .hrow-head{display:grid;grid-template-columns:32px minmax(0,1fr) 128px 118px 70px 120px;gap:0 13px;align-items:center}
.hi-app.compact .hrow,.hi-app.compact .hrow-head{grid-template-columns:30px minmax(0,1fr) 116px 108px 58px;gap:0 12px}
.hi .hrow{position:relative;padding:12px 16px;border-top:1px solid var(--hi-line-soft)}
.hi .hrow:hover{background:var(--hi-surface-2)}
.hi .hrow-head{position:relative;overflow:hidden;padding:10px 16px 8px;border-bottom:1px solid var(--hi-line-soft)}
.hi .hrow-head>div{color:var(--hi-ink-4)}
.hi .hrow-head .r,.hi .fitc{text-align:right}
.hi .hr-tile{width:32px;height:32px;border-radius:9px;background:var(--hi-surface);border:1px solid var(--hi-line-tile);display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--hi-ink-3);letter-spacing:.02em}
.hi-app.compact .hr-tile{width:30px;height:30px}
.hi .hr-cell{min-width:0}
.hi .hr-co{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--hi-ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hr-why{font-size:12.5px;color:var(--hi-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hr-who{font-size:12.5px;font-weight:500;color:var(--hi-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hr-role{color:var(--hi-ink-4);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hsig{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.hi .hsig-d{width:6px;height:6px;border-radius:2px;flex:none}
.hi .hsig-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hi .hsig-new_hire .hsig-d{background:var(--hi-hire-dot)}.hi .hsig-new_hire .hsig-l{color:var(--hi-hire-fg)}
.hi .hsig-promotion .hsig-d{background:var(--hi-promo-dot)}.hi .hsig-promotion .hsig-l{color:var(--hi-promo-fg)}
.hi .hsig-funding .hsig-d{background:var(--hi-fund-dot)}.hi .hsig-funding .hsig-l{color:var(--hi-fund-fg)}
.hi .hsig-expansion .hsig-d{background:var(--hi-exp-dot)}.hi .hsig-expansion .hsig-l{color:var(--hi-exp-fg)}
.hi .hsig-acquisition .hsig-d{background:var(--hi-acq-dot)}.hi .hsig-acquisition .hsig-l{color:var(--hi-acq-fg)}
.hi .hsig-giving .hsig-d{background:var(--hi-give-dot)}.hi .hsig-giving .hsig-l{color:var(--hi-give-fg)}
.hi .hsig-ex_client_leaver .hsig-d{background:var(--hi-give-dot)}.hi .hsig-ex_client_leaver .hsig-l{color:var(--hi-give-fg)}
.hi .hsig-development .hsig-d{background:var(--hi-dev-dot)}.hi .hsig-development .hsig-l{color:var(--hi-dev-fg)}
.hi .hsig-client_signal .hsig-d{background:var(--hi-own-dot)}.hi .hsig-client_signal .hsig-l{color:var(--hi-own-fg)}
.hi .st{white-space:nowrap}.hi .st-new{color:var(--hi-accent)}.hi .st-quiet{color:var(--hi-ink-4)}
.hi .fit-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--hi-ink);line-height:1}
.hi .fitbar{display:flex;gap:2px;justify-content:flex-end;margin-top:5px;height:9px}
.hi .fitbar i{width:3px;height:9px;border-radius:1px;align-self:flex-end;background:var(--hi-fit-lo)}
.hi .fitbar i.e{height:5px;background:var(--hi-seg-empty)}
.hi .fitbar.hi i:not(.e){background:var(--hi-fit-hi)}
.hi .fitbar.mid i:not(.e){background:var(--hi-fit-mid)}
.hi .hr-act{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.hi .b{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:var(--hi-r-sm);border:1px solid var(--hi-line-btn);background:var(--hi-surface);
  color:var(--hi-ink-2);font-size:12px;font-weight:600;white-space:nowrap}
.hi .b.prim{background:var(--hi-btn);border-color:var(--hi-btn);color:var(--hi-btn-fg);font-family:'Space Grotesk','Inter',system-ui,sans-serif}
.hi .b.grey{background:var(--hi-ink-4);border-color:var(--hi-ink-4);color:#fff}
.hi .hcard-foot{padding:10px 16px;border-top:1px solid var(--hi-line-soft);background:var(--hi-surface-2);display:flex;align-items:center;gap:14px;font-size:12px;color:var(--hi-ink-4)}

/* the pulse: an ember scanline across the top of the table */
@keyframes hscan{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.hi .scanline{position:absolute;top:0;left:0;height:2px;width:32%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,80,43,.85),transparent);animation:hscan 3.6s linear infinite}
/* rows arriving - used by the hero and the funnel */
.hi .hrow.arrive{animation:hi-arrive .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes hi-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hi .scanline{display:none}.hi .pulse-d{animation:none}.hi .hrow.arrive{animation:none}}

/* left rail live count tick */
@keyframes hfade{0%{opacity:.25}50%{opacity:.9}100%{opacity:.25}}
.hi .tick-live{animation:hfade 2.6s ease-in-out infinite}

/* ── marketing-side: a browser-style window for real screengrabs ─────── */
.shot{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(10,11,13,.08);
  box-shadow:0 2px 4px rgba(10,11,13,.06),0 48px 90px -40px rgba(10,11,13,.45)}
.shot img{display:block;width:100%;height:auto}
.shot .scanline{position:absolute;top:0;left:0;height:2px;width:32%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(224,98,58,.9),transparent);animation:hscan 3.6s linear infinite}
.shot-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F3F4F6;border-bottom:1px solid rgba(10,11,13,.06)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#D5D8DE;display:block}
.shot-bar .url{margin-left:10px;flex:1;height:20px;border-radius:6px;background:#fff;font-family:var(--m);font-size:10.5px;color:#8B9199;display:flex;align-items:center;padding:0 10px}
.on-dark .shot{border-color:rgba(255,255,255,.14);box-shadow:0 2px 4px rgba(0,0,0,.2),0 60px 110px -40px rgba(0,0,0,.6)}

/* ── colour panels - monday's move done Honch's way: the page stays white,
      the colour is a rounded panel that holds the product, text beside it. ── */
.block{padding:64px 0}
.block-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:center}
.block-grid.rev>*:first-child{order:2}
.panel{position:relative;border-radius:28px;padding:44px 0 0 44px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end}
.panel .shot{border-radius:16px 0 0 0;border-right:0;border-bottom:0;box-shadow:0 30px 80px -30px rgba(10,11,13,.45);transform:none;margin:0;width:100%}
.panel .shot img{aspect-ratio:1440/900;object-fit:cover;object-position:top left}
.block-grid.rev .panel{padding:44px 44px 0 0;justify-content:flex-end}
.block-grid.rev .panel .shot{border-radius:0 16px 0 0;border-left:0;border-right:1px solid rgba(10,11,13,.08)}
.panel .float{position:absolute;z-index:3;background:#fff;border-radius:14px;box-shadow:0 20px 50px -20px rgba(10,11,13,.45);padding:12px 14px;font-family:'Inter',var(--f);font-size:13px;color:#0E1013}
.panel .float .mi{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#8B9199;display:block;margin-bottom:5px}
.panel .float b{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:-.015em}
.panel .float .chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;padding:0;border:0;color:#C9502B}
.panel .float .chip::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
.panel .cursor{position:absolute;z-index:4;display:flex;align-items:flex-start;gap:0}
.panel .cursor svg{width:18px;height:18px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.panel .cursor span{margin:14px 0 0 -4px;background:#0E1013;color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.pn-volt{background:#5B4FE0}
.pn-ember{background:#5B4FE0}
.pn-pink{background:#E0568C}
.pn-green{background:#1F9B58}
.pn-purple{background:#8A4FD6}
.pn-teal{background:#12A6B8}
.pn-orange{background:#E5603F}
.pn-ink{background:var(--forest)}   /* Forest is the co-lead and the dark ground; near-black was v4 avoiding a brand colour */
.pn-forest{background:#1E453E}
.block .stat{display:flex;gap:28px;flex-wrap:nowrap;margin-top:6px}
.block .stat b{font-size:26px}
.block .stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.block .stat span{display:block;font-size:13.5px;color:var(--tx-3);margin-top:6px}
.block .lnk{color:var(--action);font-weight:600;display:inline-flex;align-items:center;gap:8px}
@media (max-width:1000px){.block{padding:40px 0}.block-grid{grid-template-columns:1fr;gap:28px}.block-grid.rev>*:first-child{order:0}.panel{min-height:0;padding:28px 0 0 28px}.block-grid.rev .panel{padding:28px 28px 0 0}.panel .float,.panel .cursor{display:none}}

/* ── hero panel: the dashboard, layered ─────────────────────────────── */
.hero-panel{position:relative;border-radius:28px;min-height:560px;background:radial-gradient(120% 120% at 10% -8%, rgba(122,112,240,.24), transparent 48%),radial-gradient(120% 120% at 95% 106%, rgba(91,79,224,.16), transparent 50%),radial-gradient(110% 110% at 88% 4%, rgba(46,158,107,.05), transparent 42%),#F7F5FF}
.hero-panel .clip{position:absolute;inset:0;border-radius:28px;overflow:hidden;padding:40px 0 0 40px}
.hero-panel .hi-app{border-radius:16px 0 0 0;border:0;box-shadow:0 30px 80px -30px rgba(10,11,13,.5);min-width:640px}
.hero-panel .hi-app.compact .hi-main{padding:16px 18px 6px}
.hero-panel .fade{display:none}
.hero-panel .float{position:absolute;z-index:3;background:#fff;border-radius:14px;box-shadow:0 24px 60px -24px rgba(10,11,13,.55);padding:12px 14px;font-family:'Inter',var(--f);font-size:13px;color:#0E1013;animation:hfloat 6s ease-in-out infinite}
.hero-panel .float:nth-of-type(2){animation-delay:-2s}.hero-panel .float:nth-of-type(3){animation-delay:-4s}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-panel .float .mi{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#8B9199;display:block;margin-bottom:5px}
.hero-panel .float b{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:-.015em}
.hero-panel .float p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#3A3F46;max-width:34ch}
.hero-panel .float .live{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#3A3F46}
.hero-panel .float .live i{width:7px;height:7px;border-radius:50%;background:#C9502B;display:block;animation:hpulse 2.1s ease-in-out infinite}
.hero-panel .cursor{position:absolute;z-index:4;display:flex;align-items:flex-start}
.hero-panel .cursor svg{width:18px;height:18px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.hero-panel .cursor span{margin:14px 0 0 -4px;background:#0E1013;color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.hero .hero-vis{margin-right:-120px}
@media (max-width:1000px){.hero .hero-vis{margin-right:0}.hero-panel{min-height:0;padding:22px 0 0 22px}.hero-panel .hi-app{min-width:0}.hero-panel .float,.hero-panel .cursor{display:none}}
@media (prefers-reduced-motion:reduce){.hero-panel .float{animation:none}}

/* ── the funnel: a live feed, two gates, one dashboard ──────────────── */
.fun{position:relative;height:380vh}
.fun-stick{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper)}
.fun-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.fun-copy{position:absolute;left:0;right:0;top:0;padding:72px 32px 0;z-index:3;pointer-events:none}
.fun-copy .in{max-width:1240px;margin:0 auto;position:relative;min-height:150px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start}
.fun-caps{position:relative;min-height:150px}
.fun-cap{position:absolute;left:0;right:0;top:0;transition:opacity .4s,transform .4s;opacity:0;transform:translateY(6px)}
.fun-cap.on{opacity:1;transform:none}
.fun-cap .eyebrow{margin-bottom:12px}
.fun-cap h2{font-size:clamp(28px,3.2vw,44px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 10px;max-width:20ch}
.fun-cap p{margin:0;color:var(--tx-2);font-size:16px;max-width:44ch}
.fun-count{text-align:right;font-variant-numeric:tabular-nums}
.fun-count b{display:block;font-family:var(--m);font-size:clamp(40px,5.2vw,72px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.fun-count span{display:block;font-family:var(--m);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-top:10px}
.fun-dash{position:absolute;left:50%;bottom:-24px;width:min(860px,92vw);transform:translateX(-50%);opacity:0;z-index:2}
.fun-dash .hi-app{box-shadow:0 2px 4px rgba(10,11,13,.05),0 70px 120px -50px rgba(10,11,13,.4)}
.fun-foot,.fun-legend{display:none}
@media (max-width:900px){.fun{height:300vh}.fun-copy{padding-top:60px}.fun-copy .in{grid-template-columns:1fr}.fun-count{text-align:left}.fun-dash{width:96vw;bottom:-10px}}
@media (prefers-reduced-motion:reduce){.fun{height:auto}.fun-stick{height:auto;padding:80px 0 40px;position:static}.fun-cv{display:none}.fun-copy{position:static;padding:0 32px 32px}.fun-cap{position:static;opacity:1;transform:none;margin-bottom:28px}.fun-dash{position:static;transform:none;opacity:1;margin:0 auto}}


/* ── brand colour blooming over the white dashboard on arrive (29 Sep) ─────── */
.hi .hrow.arrive{animation:hi-arrive .55s cubic-bezier(.2,.8,.2,1) both, hi-flash 1.2s ease-out}
@keyframes hi-flash{0%{background:rgba(91,79,224,.13)}100%{background:transparent}}
.hi .hrow.arrive .hsig-d{animation:hi-dot .65s ease}
@keyframes hi-dot{0%{transform:scale(0)}60%{transform:scale(1.7)}100%{transform:scale(1)}}
.hi .hrow.arrive .fitbar i:not(.e){animation:hi-fill .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hi-fill{from{height:0}}
@media (prefers-reduced-motion:reduce){
  .hi .hrow.arrive{animation:none}
  .hi .hrow.arrive .hsig-d,.hi .hrow.arrive .fitbar i:not(.e){animation:none}
}

/* == which buyers do you target - varied product surfaces (30 Sep, v3) ======
   Five DISTINCT surfaces so no two clicks look alike: tilted tables (HR,
   Sponsorship), a flat straight-on search screen (Marketing), a live
   dashboard (Finance), a tilted alerts feed (Corporate). Colour comes from
   the UI (per-entity tiles, the edition accent --wb, data pills). */
.bz-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.bz-tab{appearance:none;-webkit-appearance:none;border:1.5px solid var(--line);background:#fff;color:var(--tx-2);font:inherit;font-weight:600;font-size:14px;line-height:1;padding:11px 18px;border-radius:999px;cursor:pointer;transition:all .18s}
.bz-tab:hover{border-color:var(--wb);color:var(--ink)}
.bz-tab.on{background:var(--wb);border-color:var(--wb);color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--wb) 60%,transparent)}

.bz-stage{position:relative;perspective:2000px}
.bz-panel{display:none;position:relative;border-radius:28px;padding:52px 66px 46px;background:radial-gradient(120% 90% at 50% -20%, color-mix(in srgb,var(--wb) 16%,#fff), transparent 62%), linear-gradient(180deg,#FBFBFE,#F4F5FA)}
.bz-panel.on{display:block}
.bz-hold{position:relative;z-index:1;max-width:860px;margin:0 auto;transform:translate(calc(var(--px,0)*7px), calc(var(--py,0)*5px));transition:transform .25s ease-out}
.bz-frame{position:relative;transform-origin:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
/* tilted window (HR, Sponsorship, Corporate) */
.bz-tilt{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg) scale(.97)}
.bz-hold:hover .bz-tilt{transform:perspective(1600px) rotateY(0deg) rotateX(0deg) scale(1)}
.bz-panel.play .bz-tilt{animation:bz-rise .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes bz-rise{from{opacity:0;transform:perspective(1600px) rotateY(-17deg) rotateX(7deg) translateY(28px) scale(.93)}to{opacity:1;transform:perspective(1600px) rotateY(-9deg) rotateX(3deg) scale(.97)}}
/* flat straight-on screen (Marketing, Finance) */
.bz-flat{transform:none}
.bz-hold:hover .bz-flat{transform:translateY(-4px)}
.bz-panel.play .bz-flat{animation:bz-rise-flat .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes bz-rise-flat{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* the app window */
.ap{background:#fff;border:1px solid #EAECF2;border-radius:16px;box-shadow:0 60px 120px -40px rgba(18,22,40,.55),0 8px 24px -8px rgba(18,22,40,.12),0 3px 8px rgba(18,22,40,.05);overflow:visible}
.ap-top{display:flex;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid #F0F2F6;border-radius:16px 16px 0 0;background:#fff}
.ap-logo{font-family:'Space Grotesk','Inter',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;color:#14161A}
.ap-search{flex:1;max-width:340px;margin:0 auto;display:flex;align-items:center;gap:9px;border:1px solid #E7EAF0;border-radius:9px;padding:8px 12px}
.ap-mag{width:15px;height:15px;flex:none}.ap-mag svg{width:15px;height:15px;display:block}
.ap-ph{font-size:13px;color:#9aa3b2}
.ap-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.ap-bell{position:relative;width:20px;height:20px}.ap-bell svg{width:20px;height:20px;display:block}
.ap-bell i{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--wb);border:1.5px solid #fff}
.ap-av{width:28px;height:28px;border-radius:50%;background:#F1F3F7;display:flex;align-items:center;justify-content:center}
.ap-av svg{width:16px;height:16px}
/* nav row */
.ap-nav{display:flex;gap:24px;padding:0 20px;border-bottom:1px solid #F0F2F6;background:#FCFCFE}
.ap-nav-i{font-size:12.5px;font-weight:600;color:#9aa3b2;padding:12px 0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ap-nav-i.on{color:var(--wb);border-bottom-color:var(--wb)}
.ap-body{padding:20px 22px 24px}
/* title + toolbar */
.ap-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.ap-h{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em;color:#14161A}
.ap-sub{font-size:14px;color:#9aa3b2;margin-top:1px}
.ap-tb{display:flex;align-items:center;gap:10px;flex:none}
.ap-filter{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#5A6472;border:1px solid #E7EAF0;border-radius:8px;padding:7px 12px}
.ap-view{display:inline-flex;gap:3px}
.ap-view i{width:5px;height:5px;border-radius:1.5px;background:#c4cad4}
.ap-view i:first-child{background:var(--wb)}

/* table (HR + Sponsorship) */
.bzt{border:1px solid #EEF0F5;border-radius:12px;overflow:visible}
.bzt-head,.bzt-row{display:grid;grid-template-columns:1fr 168px 116px 40px;align-items:center}
.bzt-head{background:#FAFBFD;border-bottom:1px solid #EEF0F5;border-radius:12px 12px 0 0}
.bzt-h{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b2;padding:11px 16px;display:flex;align-items:center;gap:5px}
.bzt-h+.bzt-h{border-left:1px solid #F0F2F6}
.bzt-chev{width:12px;height:12px;color:#c4cad4;flex:none}
.bzt-row{border-top:1px solid #F3F5F8;position:relative;background:#fff}
.bzt-row:first-child{border-top:0}
.bzt-c1{display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:0}
.bzt-c{padding:12px 16px;border-left:1px solid #F3F5F8;font-size:13px;color:#3A4048;min-width:0}
.bzt-tile{width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.bzt-nm{min-width:0}
.bzt-name{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:14.5px;color:#14161A;letter-spacing:-.01em}
.bzt-desc{display:block;font-size:12.5px;color:#9aa3b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bzt-more{color:#c4cad4;font-weight:800;letter-spacing:1px;text-align:center;padding:0}
.bzt-count{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-weight:600;color:#14161A}
.bzt-dot{width:8px;height:8px;border-radius:50%;flex:none}
.bzt-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:4px 10px;border-radius:7px;background:color-mix(in srgb,var(--pc) 15%,#fff);color:color-mix(in srgb,var(--pc) 72%,#000)}
.bzt-sig{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;gap:6px}
.bzt-sig::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
/* the lifted "just moved" row - pulled up out of the table */
.bzt-row.hot{z-index:4;background:#fff;border-radius:12px;outline:1px solid #EDEFF4;transform:scale(1.035);transform-origin:left center;margin:8px 0;box-shadow:0 34px 64px -24px rgba(18,22,40,.42),0 6px 16px -6px rgba(18,22,40,.14)}
.bzt-row.hot::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--rc,var(--wb))}
.bz-panel.play .bzt-row.hot{animation:bz-lift .6s .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes bz-lift{from{transform:scale(1) translateY(8px);box-shadow:0 0 0 rgba(0,0,0,0)}to{transform:scale(1.035);box-shadow:0 34px 64px -24px rgba(18,22,40,.42),0 6px 16px -6px rgba(18,22,40,.14)}}

/* HR software directory */
.bzd{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.bzd-i{display:flex;align-items:center;gap:12px;padding:8px 4px}
.bzd-bar{height:6px;border-radius:99px;background:#EEF0F4;overflow:hidden;flex:none;width:120px}
.bzd-bar i{display:block;height:100%;background:var(--wb);border-radius:99px;transform-origin:left}
.bz-panel.play .bzd-bar i{animation:bz-fill .9s .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes bz-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bzd-n{font-size:14px;font-weight:600;color:#14161A}
.bzd-ct{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:#9aa3b2}

/* Marketing: flat company-search screen */
.mkt-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;color:#9aa3b2}
.mkt-meta span:first-child{font-weight:600;color:#5A6472}
.mkt{border:1px solid #EEF0F5;border-radius:12px;overflow:hidden}
.mkt-row{display:flex;align-items:center;gap:13px;padding:13px 16px;border-top:1px solid #F3F5F8;position:relative;transition:background .22s ease,box-shadow .22s ease}
.mkt-row:first-child{border-top:0}
.mkt-row::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--wb);opacity:0;transition:opacity .22s}
.mkt-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.mkt-nm b{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:14.5px;color:#14161A;letter-spacing:-.01em}
.mkt-nm span{font-size:12.5px;color:#9aa3b2}
.mkt-reveal{display:flex;align-items:center;gap:8px;font-size:12px;color:#5A6472;background:#F6F7FB;border-radius:8px;white-space:nowrap;overflow:hidden;max-width:0;padding:0;opacity:0;transition:max-width .3s ease,padding .3s ease,opacity .25s ease}
.mkt-reveal img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.mkt-sig{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mkt-row:hover,.mkt-row.on{background:color-mix(in srgb,var(--wb) 7%,#fff);box-shadow:0 16px 32px -20px rgba(18,22,40,.42);z-index:2}
.mkt-row:hover::before,.mkt-row.on::before{opacity:1}
.mkt-row:hover .mkt-reveal,.mkt-row.on .mkt-reveal{max-width:230px;padding:5px 10px;opacity:1}

/* Finance: live dashboard */
.fk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.fk{border:1px solid #EEF0F5;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px;background:#fff}
.fk-l{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b2}
.fk-n{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:28px;letter-spacing:-.02em;color:#14161A;line-height:1;font-variant-numeric:tabular-nums}
.fk-d{font-size:11.5px;font-weight:600;color:#22A85A;display:inline-flex;align-items:center;gap:4px}
.fk-bars{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:4px}
.fk-bars i{width:6px;border-radius:2px;height:var(--h);transform-origin:bottom;transform:scaleY(0);background:color-mix(in srgb,var(--wb) 28%,#EAF2EC)}
.fk-bars i:last-child{background:var(--wb)}
.bz-panel.play .fk-bars i{animation:bz-grow .7s cubic-bezier(.2,.8,.2,1) both}
.bz-panel.play .fk-bars i:nth-child(1){animation-delay:.30s}
.bz-panel.play .fk-bars i:nth-child(2){animation-delay:.36s}
.bz-panel.play .fk-bars i:nth-child(3){animation-delay:.42s}
.bz-panel.play .fk-bars i:nth-child(4){animation-delay:.48s}
.bz-panel.play .fk-bars i:nth-child(5){animation-delay:.54s}
.bz-panel.play .fk-bars i:nth-child(6){animation-delay:.60s}
@keyframes bz-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fchart{border:1px solid #EEF0F5;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.fchart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.fchart-t{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:13.5px;color:#14161A}
.fchart-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;color:#9aa3b2}
.fchart svg{display:block;width:100%;height:64px}
.fc-area{fill:color-mix(in srgb,var(--wb) 12%,transparent);opacity:1}
.fc-line{fill:none;stroke:var(--wb);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bz-panel.play .fc-line{stroke-dasharray:640;stroke-dashoffset:640;animation:fc-draw 1s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fc-draw{to{stroke-dashoffset:0}}
.bz-panel.play .fc-area{opacity:0;animation:fc-fade .8s .5s ease forwards}
@keyframes fc-fade{to{opacity:1}}

/* alerts / movements feed (Corporate + Finance) */
.al{border:1px solid #EEF0F5;border-radius:12px;overflow:hidden}
.al-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-top:1px solid #F3F5F8}
.al-row:first-child{border-top:0}
.al-ico{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.al-ico svg{width:18px;height:18px}
.al-face{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover}
.al-m{flex:1;min-width:0}
.al-t{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:14.5px;color:#14161A}
.al-d{display:block;font-size:12.5px;color:#9aa3b2}
.al-w{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.06em;color:#b3bac6}

/* floating annotation cards + dotted connectors (HR, Sponsorship) */
.bz-call{position:absolute;z-index:6;background:#fff;border-radius:14px;box-shadow:0 28px 60px -20px rgba(18,22,40,.52),0 2px 6px rgba(18,22,40,.06);padding:11px 14px;display:flex;gap:11px;align-items:center;max-width:250px}
.bz-panel.play .bz-call{animation:bz-pop .55s ease both, bz-bob 6s ease-in-out 1.1s infinite}
.bz-panel.play .bz-call:nth-of-type(3){animation-delay:.16s,1.25s}
.bz-panel.play .bz-call:nth-of-type(4){animation-delay:.3s,1.4s}
@keyframes bz-pop{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes bz-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bz-wire{position:absolute;top:6px;pointer-events:none}
.bz-call.t-left .bz-wire{right:100%;margin-right:-8px}
.bz-call.t-right .bz-wire{left:100%;margin-left:-8px}
.bz-wpath{stroke:var(--wb);fill:none}
.bz-wdot{fill:var(--wb)}
.bz-whalo{fill:var(--wb);opacity:.16}
.bz-panel.play .bz-wire{animation:bz-pop .5s .25s ease both}
.bz-call.t-down::after,.bz-call.t-up::after{content:"";position:absolute;width:13px;height:13px;background:#fff;transform:rotate(45deg)}
.bz-call.t-down::after{left:26px;bottom:-6px;box-shadow:3px 3px 8px -4px rgba(18,22,40,.25)}
.bz-call.t-up::after{left:26px;top:-6px;box-shadow:-3px -3px 8px -4px rgba(18,22,40,.18)}
.bz-face{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(18,22,40,.06)}
.bz-ico{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.bz-ico svg{width:19px;height:19px}
.bz-ct b{font-size:13.5px;color:#14161A;font-weight:700;display:block;line-height:1.2}
.bz-csub{margin:3px 0 0;font-size:11.5px;color:#5A6472}

.bz-cta{margin-top:38px;text-align:center;position:relative;z-index:1}
.bz-cta a{display:inline-flex;gap:8px;align-items:center;background:var(--wb);color:#fff;font-weight:700;font-size:14.5px;padding:14px 28px;border-radius:999px;box-shadow:0 20px 42px -18px color-mix(in srgb,var(--wb) 70%,transparent);transition:transform .18s,box-shadow .18s}
.bz-cta a:hover{transform:translateY(-2px);box-shadow:0 26px 50px -18px color-mix(in srgb,var(--wb) 75%,transparent)}
.bz-cta a span{transition:transform .18s}.bz-cta a:hover span{transform:translateX(3px)}
.bz-hon{max-width:760px;margin:46px auto 0;text-align:center}
.bz-hon p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--tx-2);margin:0}
.bz-hon b{color:var(--ink);font-weight:700}

@media (max-width:1000px){.bz-panel{padding:22px 14px}.ap{overflow:hidden}.bzt{overflow:hidden}.bz-tilt,.bz-flat,.bz-hold:hover .bz-tilt,.bz-hold:hover .bz-flat{transform:none}.bz-hold{transform:none}.bz-call{display:none}.bzt-row.hot{transform:none;margin:0;box-shadow:none;outline:0;border-radius:0}.bzt-head,.bzt-row{grid-template-columns:1fr 110px 70px 30px}.fk-row{grid-template-columns:1fr}.mkt-reveal{display:none}.ap-search,.ap-nav{display:none}}
@media (prefers-reduced-motion:reduce){.bz-panel.play .bz-tilt,.bz-panel.play .bz-flat,.bz-panel.play .bzt-row.hot,.bz-panel.play .bzd-bar i,.bz-panel.play .bz-call,.bz-panel.play .bz-wire,.bz-panel.play .fk-bars i,.bz-panel.play .fc-line,.bz-panel.play .fc-area{animation:none!important}.fk-bars i{transform:scaleY(1)}.fc-line{stroke-dashoffset:0}.fc-area{opacity:1}}

/* == homepage sections: signals grid + MCP/AI (30 Sep) ======================
   Prefixed sg- / mx- so nothing leaks into the shared stylesheet. */

/* ── signals we track ─────────────────────────────────────────────────────── */
.sg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sg-card{border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;background:#fff;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sg-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--lane) 45%,var(--line));box-shadow:0 20px 40px -26px color-mix(in srgb,var(--lane) 70%,transparent)}
.sg-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--lane);box-shadow:0 10px 22px -12px var(--lane);margin-bottom:15px}
.sg-ic svg{display:block}
.sg-n{font-family:var(--fd);font-weight:700;font-size:16.5px;letter-spacing:-.02em;color:var(--ink)}
.sg-d{font-size:13.5px;line-height:1.5;color:var(--tx-2);margin:7px 0 14px}
.sg-eg{display:inline-flex;align-items:center;font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--lane) 78%,#000);background:color-mix(in srgb,var(--lane) 12%,#fff);border-radius:7px;padding:5px 9px}
.sg-more{text-align:center;margin:36px auto 0;max-width:60ch;font-size:15px;color:var(--tx-2)}
.sg-more a{color:var(--action);font-weight:600;white-space:nowrap}
.sg-more a:hover{text-decoration:underline}

/* ── MCP / use your own AI ─────────────────────────────────────────────────── */
.mx{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.mx-flows{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.mx-flow{display:flex;align-items:center;gap:9px}
.mx-hub,.mx-chip{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 14px -4px rgba(10,11,13,.16),0 1px 3px rgba(10,11,13,.08)}
.mx-hub{box-shadow:0 6px 18px -4px color-mix(in srgb,#5B4FE0 40%,transparent),0 1px 3px rgba(10,11,13,.1)}
.mx-chip svg{display:block}
.mx-arrow{flex:none;margin:0 3px}
.mx-bul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.mx-bul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink)}
.mx-bul li svg{flex:none;margin-top:3px}

/* chat mockup (dark) */
.mx-chat{background:#0F1216;border-radius:22px;padding:22px;box-shadow:0 50px 100px -40px rgba(10,11,13,.55),0 6px 20px -8px rgba(10,11,13,.3);color:#E8EAED}
.mx-head{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.mx-head svg{display:block}
.mx-name{font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:-.01em;color:#fff}
.mx-mcp{margin-left:auto;font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.1em;color:#A6ADBB;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px 8px}
.mx-q{align-self:flex-end;margin:0 0 16px auto;max-width:80%;width:fit-content;background:#2A2F37;color:#F2F4F7;font-size:14px;line-height:1.45;padding:11px 15px;border-radius:14px 14px 4px 14px}
.mx-a-l{display:block;font-size:13px;color:#A6ADBB;margin-bottom:12px}
.mx-list{display:flex;flex-direction:column;gap:8px}
.mx-row{display:flex;align-items:center;gap:12px;background:#171B21;border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:11px 13px}
.mx-co{font-family:var(--fd);font-weight:600;font-size:14px;color:#F2F4F7;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-sig{font-family:var(--m);font-size:10.5px;font-weight:700;letter-spacing:.03em;color:color-mix(in srgb,var(--sc) 55%,#fff);background:color-mix(in srgb,var(--sc) 26%,#0F1216);border-radius:6px;padding:4px 8px;white-space:nowrap;flex:none}
.mx-fit{font-family:var(--m);font-weight:700;font-size:14px;color:#4FC08A;flex:none;font-variant-numeric:tabular-nums}
.mx-draft{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:#8E86F5}
.mx-in{display:flex;align-items:center;gap:10px;margin-top:18px;background:#171B21;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 12px 12px 15px}
.mx-in>span:first-child{flex:1;font-size:13.5px;color:#7A8290}
.mx-send{width:32px;height:32px;border-radius:9px;background:#5B4FE0;display:flex;align-items:center;justify-content:center;flex:none}

@media (max-width:960px){
  .sg-grid{grid-template-columns:repeat(2,1fr)}
  .mx{grid-template-columns:1fr;gap:36px}
  .mx-flows{align-items:flex-start}
}
@media (max-width:560px){
  .sg-grid{grid-template-columns:1fr}
}