/* Devplan marketing — Brand alignment v2
   Same layouts as before, restyled to match the Devplan brand:
   white paper, cobalt accent, Geist sans-only, near-black dark sections.
   Variable names from the previous version (--teal, --paper-edge, etc.)
   are intentionally retained so existing inline `style="..."` attributes
   in page markup continue to render correctly — they are just remapped
   to the brand palette.
*/

/* ────────────────────────────────────────────────────────────
   Design tokens — brand
   ──────────────────────────────────────────────────────────── */
:root{
  /* Paper system — clean neutral, no warmth */
  --paper:        #FFFFFF;
  --paper-2:      #FAFAFB;     /* card / inset surface — very light */
  --paper-3:      #FCFCFD;     /* very subtle layering */
  --paper-edge:   #ECECEE;     /* hairline strong */

  /* Ink */
  --ink:          #0A0A0B;     /* near black */
  --ink-2:        #1A1A1C;
  --ink-dim:      #52525A;
  --ink-faint:    #8A8A92;
  --ink-ghost:    #B6BAC0;

  /* Brand accent — cobalt */
  --accent:       #1F3DFF;
  --accent-2:     #2D49FF;
  --accent-soft:  rgba(31, 61, 255, 0.10);
  --accent-soft-2:rgba(31, 61, 255, 0.16);
  --accent-on-dark:#5A77FF;    /* lighter cobalt for text on dark surfaces */

  /* Legacy "teal" aliases → all mapped to cobalt brand accent.
     Kept so inline style="color:var(--teal)" still works. */
  --teal:         var(--accent);
  --teal-2:       var(--accent-2);
  --teal-3:       var(--accent-on-dark);
  --teal-ink:     #0A0A0B;            /* footer / deep panel background */
  --teal-soft:    var(--accent-soft);
  --teal-soft-2:  var(--accent-soft-2);

  /* "On dark" tokens used by the dark sections + footer */
  --on-teal:      #FFFFFF;
  --on-teal-dim:  rgba(255,255,255,0.62);
  --on-teal-rule: rgba(255,255,255,0.10);
  --on-teal-rule-strong: rgba(255,255,255,0.18);

  /* Amber — kept for warnings + a touch of warmth on dark panels */
  --amber:        #C18A35;
  --amber-2:      #E6A437;
  --amber-soft:   rgba(230, 164, 55, 0.14);

  /* Hairlines */
  --rule:         rgba(10, 10, 11, 0.08);
  --rule-2:       rgba(10, 10, 11, 0.14);
  --rule-strong:  rgba(10, 10, 11, 0.22);

  /* Type — Geist for everything. `--serif` alias kept for compatibility,
     but it just falls through to Geist sans (so headlines look modern). */
  --sans:         "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif:        "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --maxw:         1320px;
  --content-w:    920px;
  --gutter:       clamp(20px, 4vw, 56px);

  /* Motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

/* ────────────────────────────────────────────────────────────
   Reset & base
   ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  background:var(--paper);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","ss03","cv11";
  position:relative;
  overflow-x:hidden;
}

::selection{ background:var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; padding:0; }
img,svg{ display:block; max-width:100%; }

/* ────────────────────────────────────────────────────────────
   Typography utilities — Geist throughout, weight + tracking for hierarchy
   ──────────────────────────────────────────────────────────── */
.serif{ font-family:var(--sans); }   /* legacy alias — no italics anymore */
.mono{ font-family:var(--mono); }

/* Eyebrow */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px; background:var(--ink-dim);
}
.eyebrow.no-rule::before{ display:none; }
.eyebrow.on-teal{ color:var(--on-teal-dim); }
.eyebrow.on-teal::before{ background:var(--on-teal-dim); }

/* Display heading — Geist tight & light */
.display{
  font-family:var(--sans);
  font-weight:340;
  font-size:clamp(30px, 4.25vw, 62px);
  line-height:1.04;
  letter-spacing:-0.034em;
  color:var(--ink);
  margin:0;
}
.display .it{ color:var(--accent); font-weight:500; font-style:normal; }
.display .dim{ color:var(--ink-faint); font-weight:320; }

.h2{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(25px, 3vw, 40px);
  line-height:1.08;
  letter-spacing:-0.028em;
  color:var(--ink);
  margin:0;
}
.h2 .it{ color:var(--accent); font-weight:400; font-style:normal; }
.h2 .dim{ color:var(--ink-faint); font-weight:340; }

.h3{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(20px, 1.9vw, 25px);
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}

.lede{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.6;
  letter-spacing:-0.005em;
  color:var(--ink-dim);
  max-width:62ch;
}
.lede strong{ color:var(--ink); font-weight:500; }

.kicker{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ────────────────────────────────────────────────────────────
   Layout primitives
   ──────────────────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}
.shell-narrow{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}

section{ position:relative; }
.section{ padding-block:clamp(72px, 9vw, 144px); position:relative; }
.section-sm{ padding-block:clamp(48px, 6vw, 96px); position:relative; }

/* The hero already provides ample bottom padding — collapse the top
   padding of the next-following section so it doesn't double up. */
.hero + .section,
.hero + .section-sm{
  padding-top:clamp(8px, 1.5vw, 24px);
}
/* Even tighter when the next section is a stat strip or similar
   "continuation" of the hero (homepage). */
.hero + .section-sm.hero-followup{
  padding-top:0;
  padding-bottom:clamp(48px, 5vw, 80px);
  margin-top:clamp(-48px, -4vw, -16px);
}

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

/* On-dark surfaces (formerly surface-teal) */
.surface-teal{
  background:#0A0A0B;
  color:var(--on-teal);
  position:relative;
}
/* subtle radial tint inside dark sections so they read as Devplan, not generic */
.surface-teal::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 110% 0%, rgba(31,61,255,0.12), transparent 60%);
  pointer-events:none;
}
.surface-teal > *{ position:relative; }
.surface-teal a{ color:var(--on-teal); }
.surface-teal .h2,
.surface-teal .h3,
.surface-teal .display{ color:var(--on-teal); }
.surface-teal .lede{ color:var(--on-teal-dim); }

/* ────────────────────────────────────────────────────────────
   Nav
   ──────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,0.84);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink);
  transition:opacity .2s var(--ease);
}
.nav-logo:hover{ opacity:.7; }
.nav-logo-mark{
  width:22px; height:22px; flex-shrink:0;
  color:var(--accent);
}
.nav-logo-text{
  font-family:var(--sans);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.018em;
  color:var(--ink);
}

.nav-meta{ display:flex; align-items:center; gap:4px; }

.nav-link{
  font-size:13.5px; font-weight:500;
  color:var(--ink-dim);
  padding:9px 14px;
  letter-spacing:-0.005em;
  border-radius:6px;
  position:relative;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover, .nav-link.is-open{ color:var(--ink); background:rgba(10,10,11,.04); }
.nav-link.is-active{ color:var(--ink); }
.nav-link.has-dropdown::after{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  margin-left:6px; vertical-align:1px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.55;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-link.has-dropdown.is-open::after{ transform:rotate(-135deg) translate(-1px,-1px); opacity:1; }

.nav-divider{
  width:1px; height:18px; background:var(--rule-2); margin:0 8px;
}

.nav-login{
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  padding:9px 14px;
  letter-spacing:-0.005em;
  border-radius:6px;
  transition:background .2s var(--ease);
}
.nav-login:hover{ background:rgba(10,10,11,.04); }

.nav-cta{
  font-size:13.5px; font-weight:500;
  color:#fff; background:var(--ink);
  padding:10px 16px; border-radius:6px;
  letter-spacing:-0.005em;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ink);
  transition:background .25s var(--ease), border-color .25s var(--ease);
  margin-left:10px;
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); }
.nav-cta .arrow{ transition:transform .25s var(--ease); }
.nav-cta:hover .arrow{ transform:translateX(3px); }

/* Dropdown panel */
.nav-dropdown-wrap{ position:relative; }
.nav-dropdown{
  position:absolute; top:100%; left:-12px;
  margin-top:14px;            /* visual gap between button and panel */
  min-width:520px;
  background:var(--paper);
  border:1px solid var(--rule-2);
  border-radius:14px;
  box-shadow:0 32px 80px -20px rgba(10,10,11,.18), 0 8px 24px -8px rgba(10,10,11,.10);
  padding:12px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:80;
}
/* Invisible hover-bridge that fills the gap above the panel.
   Without this, moving the cursor from the button to the panel
   crosses dead space and triggers mouseleave on the wrap. */
.nav-dropdown::before{
  content:"";
  position:absolute;
  left:-12px; right:-12px;        /* slightly wider than panel to catch diagonals */
  top:-24px; height:24px;         /* taller than the 14px gap for margin of error */
  background:transparent;
  pointer-events:auto;
}
.nav-dropdown-wrap.is-open .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.nav-dd-item{
  display:flex; flex-direction:column; gap:4px;
  padding:14px;
  border-radius:10px;
  transition:background .2s var(--ease);
}
.nav-dd-item:hover{ background:var(--paper-2); }
.nav-dd-item .dd-eyebrow{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.nav-dd-item .dd-title{
  font-family:var(--sans); font-weight:500;
  font-size:15px; letter-spacing:-0.015em; color:var(--ink);
  margin:2px 0 4px;
}
.nav-dd-item .dd-sub{
  font-size:12.5px; color:var(--ink-dim); line-height:1.45;
}
.nav-dd-item.dd-overview{
  grid-column:1 / -1;
  background:var(--ink);
  color:var(--on-teal);
}
.nav-dd-item.dd-overview .dd-title{ color:#fff; font-size:16px; }
.nav-dd-item.dd-overview .dd-sub{ color:var(--on-teal-dim); }
.nav-dd-item.dd-overview .dd-eyebrow{ color:var(--accent-on-dark); }
.nav-dd-item.dd-overview:hover{ background:#171719; }

@media (max-width: 860px){
  .nav-link:not(.has-dropdown), .nav-login, .nav-divider{ display:none; }
  .nav-dropdown{ display:none; }
}
@media (max-width: 540px){
  .nav-link{ display:none; }
}

/* ────────────────────────────────────────────────────────────
   Buttons / CTAs
   ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  padding:12px 18px;
  border-radius:8px;
  letter-spacing:-0.005em;
  line-height:1;
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn-primary{
  background:var(--ink); color:#fff;
  border-color:var(--ink);
}
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }

.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--rule-2);
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(10,10,11,.03); }

.btn-on-teal{
  background:#fff; color:var(--ink);
  border-color:#fff;
}
.btn-on-teal:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

.btn-ghost-on-teal{
  background:transparent;
  color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.22);
}
.btn-ghost-on-teal:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.46);
}

.btn-link{
  font-family:var(--sans);
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  padding-bottom:3px;
  border-bottom:1px solid var(--rule-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.btn-link:hover{ border-color:var(--accent); color:var(--accent); }
.btn-link .arrow{ transition:transform .25s var(--ease); }
.btn-link:hover .arrow{ transform:translateX(3px); }

.btn-link.on-teal{ color:#fff; border-color:var(--on-teal-rule); }
.btn-link.on-teal:hover{ border-color:var(--accent-on-dark); color:var(--accent-on-dark); }

/* ────────────────────────────────────────────────────────────
   Hero
   ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-top:clamp(64px, 10vw, 144px);
  padding-bottom:clamp(56px, 8vw, 112px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:clamp(36px, 5vw, 80px);
  align-items:end;
}
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
}

.hero-eyebrow{ margin-bottom:32px; }

.hero-title{
  font-family:var(--sans);
  font-weight:320;
  font-size:clamp(35px, 4.9vw, 68px);
  line-height:1.02;
  letter-spacing:-0.036em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;           /* let the browser pick equal-length break points */
}
.hero-title .it{ color:var(--accent); font-weight:500; font-style:normal; }
.hero-title .dim{ color:var(--ink-faint); font-weight:280; }
.hero-title .accent{ color:var(--accent); }

.hero-sub{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-size:clamp(14px, 1.15vw, 16px);
  line-height:1.4;
  color:var(--ink);
  margin:20px 0 0;
  max-width:36ch;
  letter-spacing:-0.012em;
}
/* On dark surfaces the hero-sub stays readable in white */
.surface-teal .hero-sub{ color:#fff; }

.hero-body{
  font-size:14.5px; line-height:1.6; letter-spacing:-0.005em;
  color:var(--ink-dim);
  max-width:50ch;
  margin:0;
}

.hero-actions{
  display:flex; align-items:center; gap:16px;
  margin-top:36px;
  flex-wrap:wrap;
}

/* Hero meta row — used when the title spans the full width and the
   body copy + CTAs sit beneath it as a horizontal pairing. */
.hero-meta{
  display:grid;
  grid-template-columns:1.3fr auto;
  gap:clamp(36px, 5vw, 80px);
  align-items:end;
  margin-top:clamp(28px, 3vw, 40px);
}
.hero-meta .hero-actions{ margin-top:0; flex-shrink:0; }
@media (max-width: 860px){
  .hero-meta{ grid-template-columns:1fr; gap:24px; align-items:start; }
}

/* Numbered section marker */
.section-num{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:24px;
}
.section-num .n{
  color:var(--ink);
  font-weight:600;
}

/* ────────────────────────────────────────────────────────────
   Stat strip
   ──────────────────────────────────────────────────────────── */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  background:var(--rule);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stat{
  background:var(--paper);
  padding:32px clamp(20px, 2vw, 32px);
  display:flex; flex-direction:column; gap:6px;
}
.stat-n{
  font-family:var(--sans);
  font-weight:340;
  font-size:clamp(24px, 2.4vw, 32px);
  line-height:1; letter-spacing:-0.036em;
  color:var(--ink);
}
.stat-n.accent{ color:var(--accent); }
.stat-n .small{ font-size:.5em; color:var(--ink-faint); vertical-align:baseline; margin-left:4px; font-weight:400; }
.stat-label{
  font-size:13.5px; color:var(--ink); line-height:1.35; font-weight:500;
  letter-spacing:-0.005em;
}
.stat-note{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:4px;
}

.stats.on-teal{
  background:var(--on-teal-rule);
  border-color:var(--on-teal-rule);
}
.stats.on-teal .stat{ background:#0A0A0B; }
.stats.on-teal .stat-n{ color:#fff; }
.stats.on-teal .stat-n.accent{ color:var(--accent-on-dark); }
.stats.on-teal .stat-label{ color:#fff; }
.stats.on-teal .stat-note{ color:var(--on-teal-dim); }

/* ────────────────────────────────────────────────────────────
   Integration logo strip
   ──────────────────────────────────────────────────────────── */
.logo-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
  padding:28px 0;
}
.logo-strip-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
  flex-basis:100%;
  margin-bottom:4px;
}
.logo-strip .logo-name{
  font-family:var(--sans);
  font-weight:500;
  font-size:15px; letter-spacing:-0.012em;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  line-height:1;
}
.logo-strip .logo-name svg,
.logo-strip .logo-name img{
  width:22px; height:22px; display:block; flex-shrink:0;
}
.logo-strip .logo-name .sep{ display:none; }

/* ────────────────────────────────────────────────────────────
   Section headers
   ──────────────────────────────────────────────────────────── */
.section-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:980px;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.section-head .lede{ max-width:64ch; }

/* ────────────────────────────────────────────────────────────
   Quote cards
   ──────────────────────────────────────────────────────────── */
.quote-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
@media (max-width: 960px){ .quote-grid{ grid-template-columns:1fr; } }

.quote-card{
  background:transparent;
  border:0;
  border-left:1px solid var(--rule);
  border-radius:0;
  padding:clamp(36px, 4vw, 48px) clamp(24px, 2.6vw, 36px);
  display:flex; flex-direction:column; gap:20px;
  position:relative;
  transition:background .25s var(--ease);
}
.quote-card:first-child{ border-left:0; }
.quote-card:hover{ background:var(--paper-2); transform:none; }
.quote-card::before{
  content:"";
  position:relative; top:0; left:0;
  width:18px; height:2px;
  background:var(--accent);
  margin-bottom:4px;
}
@media (max-width: 960px){
  .quote-card{ border-left:0; border-top:1px solid var(--rule); }
  .quote-card:first-child{ border-top:0; }
}
.quote-card .q{
  font-family:var(--sans);
  font-weight:420;
  font-size:16px; line-height:1.5;
  color:var(--ink);
  letter-spacing:-0.012em;
  position:relative;
  margin:0;
}
.quote-card .who{
  font-size:12.5px; line-height:1.5; color:var(--ink-dim);
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.quote-card .who strong{ color:var(--ink); font-weight:500; }

/* Featured quote — large editorial type on plain paper. No floating card. */
.quote-feature{
  background:transparent;
  color:var(--ink);
  border-radius:0;
  padding:clamp(56px, 7vw, 96px) 0;
  display:block;
  position:relative;
}
.quote-feature::before{ display:none; }

/* Dot-matrix quotation mark — rendered by JS as a grid of <span class="qmark-dot">
   elements that gently repel away from the cursor as it crosses the section. */
.quote-feature .qmark{
  display:block;
  position:relative;
  height:auto;
  margin:0 0 clamp(28px, 3vw, 40px);
  pointer-events:none;
  color:transparent;        /* hide the literal " character fallback */
  font-size:0;
  line-height:0;
}
.qmark-dot{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--accent);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.surface-teal .qmark-dot{
  background:rgba(255,255,255,0.55);
}

/* Standalone dot-matrix icon block (e.g. integrations "Don't see yours?"
   plug). The element is sized by JS via cols * pitch / rows * pitch and
   the dots inside use the shared .qmark-dot styling. */
.dotmatrix-block{
  display:inline-block;
  pointer-events:none;
}
.dotmatrix-block .qmark-dot{
  width:5px; height:5px;       /* slightly chunkier than the quote dots */
}
.quote-feature .q{
  font-family:var(--sans);
  font-weight:340;
  font-size:clamp(28px, 3.6vw, 52px);
  line-height:1.15;
  letter-spacing:-0.03em;
  color:var(--ink);
  max-width:28ch;
  margin:0;
  text-wrap:balance;
}
.quote-feature .who{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:clamp(28px, 3vw, 40px);
}

/* Dark-surface variant — same scale, white text on the inherited dark bg. */
.surface-teal .quote-feature{
  color:#fff;
}
.surface-teal .quote-feature .q{ color:#fff; }
.surface-teal .quote-feature .who{ color:var(--on-teal-dim); }

/* ────────────────────────────────────────────────────────────
   Comparison table (Claude+MCP vs Devplan)
   Default = light. Inside .surface-teal, the dark overrides apply.
   ──────────────────────────────────────────────────────────── */
.compare{
  border:1px solid var(--rule-2);
  border-radius:14px;
  overflow:hidden;
  background:var(--paper-2);
}
.compare-row{
  display:grid;
  grid-template-columns:1fr 1.3fr 1.3fr;
  border-top:1px solid var(--paper-edge);
}
.compare-row:first-child{ border-top:0; }
.compare-cell{
  padding:18px 22px;
  font-size:13px; line-height:1.55;
  color:var(--ink);
  border-left:1px solid var(--paper-edge);
}
.compare-cell:first-child{ border-left:0; }
.compare-cell.h{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  background:var(--paper-3);
}
.compare-cell.h .h-vs{ color:var(--ink-faint); }
.compare-cell.row-h{
  font-family:var(--sans); font-weight:500;
  font-size:14px; letter-spacing:-0.015em;
  color:var(--ink);
  background:var(--paper-3);
}
.compare-cell.neg{ color:var(--ink-dim); }
.compare-cell.pos{
  color:var(--ink);
  background:rgba(31,61,255,0.04);
}
.compare-cell.pos strong{ color:var(--accent); font-weight:600; }

/* Dark variant — applies when nested inside .surface-teal */
.surface-teal .compare{
  background:rgba(255,255,255,0.02);
  border-color:var(--on-teal-rule);
}
.surface-teal .compare-row{ border-top-color:var(--on-teal-rule); }
.surface-teal .compare-cell{
  color:#fff;
  border-left-color:var(--on-teal-rule);
}
.surface-teal .compare-cell.h{
  color:var(--on-teal-dim);
  background:rgba(255,255,255,0.04);
}
.surface-teal .compare-cell.h .h-vs{ color:var(--on-teal-dim); opacity:.7; }
.surface-teal .compare-cell.row-h{
  color:#fff;
  background:rgba(255,255,255,0.04);
}
.surface-teal .compare-cell.neg{ color:var(--on-teal-dim); }
.surface-teal .compare-cell.pos{
  color:#fff;
  background:rgba(255,255,255,0.04);
}
.surface-teal .compare-cell.pos strong{ color:#fff; font-weight:650; }

@media (max-width: 820px){
  .compare-row{ grid-template-columns:1fr; }
  .compare-cell{ border-left:0; border-top:1px solid var(--paper-edge); }
  .compare-cell.row-h{ border-top:0; }
  .surface-teal .compare-cell{ border-top-color:var(--on-teal-rule); }
}

/* ────────────────────────────────────────────────────────────
   Product cards (Weaver / Insights / Specs)
   ──────────────────────────────────────────────────────────── */
.product-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
@media (max-width:960px){ .product-cards{ grid-template-columns:1fr; } }
.product-card{
  padding:clamp(40px, 4vw, 56px) clamp(28px, 3vw, 40px);
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid var(--rule);
  position:relative;
  transition:background .25s var(--ease);
}
.product-card:first-child{ border-left:0; }
@media (max-width:960px){
  .product-card{ border-left:0; border-top:1px solid var(--rule); }
  .product-card:first-child{ border-top:0; }
}
.product-card:hover{ background:var(--paper-2); }
.product-card-head{
  display:flex; align-items:center; justify-content:space-between;
}
.product-card-name{
  font-family:var(--sans);
  font-weight:500;
  font-size:25px; letter-spacing:-0.026em;
  color:var(--ink);
}
.product-card-num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--ink-faint);
}
.product-card-tag{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.product-card-body{
  font-size:14px; line-height:1.55;
  color:var(--ink-dim);
  flex:1;
  margin-top:-11px;          /* halves the gap immediately below the product name */
}
.product-card-link{
  font-size:13.5px; font-weight:500;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  padding-bottom:3px;
  border-bottom:1px solid var(--rule-2);
  align-self:flex-start;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.product-card-link:hover{ border-color:var(--accent); color:var(--accent); }
.product-card-link .arrow{ transition:transform .25s var(--ease); }
.product-card-link:hover .arrow{ transform:translateX(3px); }

/* ────────────────────────────────────────────────────────────
   Capability row (alternating, with visual placeholder)
   ──────────────────────────────────────────────────────────── */
.cap{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:center;
  padding-block:clamp(56px, 7vw, 96px);
  border-top:1px solid var(--rule);
}
.cap:first-of-type{ border-top:0; padding-top:0; }
.cap.reverse .cap-text{ order:2; }
.cap.reverse .cap-visual{ order:1; }
@media (max-width: 960px){
  .cap{ grid-template-columns:1fr; gap:36px; }
  .cap.reverse .cap-text{ order:1; }
  .cap.reverse .cap-visual{ order:2; }
}
.cap-eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  margin-bottom:18px;
  display:flex; align-items:baseline; gap:12px;
}
.cap-eyebrow .cnum{ color:var(--ink-faint); font-weight:400; }
.cap-title{
  font-family:var(--sans);
  font-weight:430;
  font-size:clamp(22px, 2.25vw, 30px);
  line-height:1.15; letter-spacing:-0.026em;
  color:var(--ink);
  margin:0 0 18px;
}
.cap-title .it{ color:var(--accent); font-weight:550; font-style:normal; }
.cap-title .dim{ color:var(--ink-faint); font-weight:380; }
.cap-body{
  font-size:14px; line-height:1.6; color:var(--ink-dim);
  letter-spacing:-0.005em;
  max-width:52ch;
}
.cap-body strong{ color:var(--ink); font-weight:500; }

.cap-visual{
  position:relative;
  aspect-ratio: 4 / 3;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  overflow:hidden;
}
.cap-visual .visual-label{
  position:absolute; top:18px; left:20px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cap-visual.dark{
  background:#0A0A0B;
  border-color:#1A1A1C;
}
.cap-visual.dark .visual-label{ color:var(--on-teal-dim); }
.cap-visual.dark::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 80% 20%, rgba(31,61,255,0.18), transparent 60%);
  pointer-events:none;
}

/* ────────────────────────────────────────────────────────────
   Mock UI primitives (used inside cap-visual)
   ──────────────────────────────────────────────────────────── */
.mock{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:14px;
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--sans);
  font-size:12px;
  overflow:hidden;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
}

/* Daily digest mock — editorial digest with The big thing, Shipped
   highlights, Needs your attention sections plus source-attribution chips */
.mock.mock-digest{
  padding:16px 18px;
  gap:0;
  overflow-y:auto;
}
.mock-digest-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid var(--paper-edge);
  margin-bottom:12px;
}
.mock-digest-eye{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.mock-digest-livedot{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  animation:dp-mock-pulse 2.6s ease-in-out infinite;
}
.mock-digest-date{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mock-digest-block{
  display:flex; flex-direction:column;
  gap:6px;
  padding:10px 0;
  border-top:1px solid var(--paper-edge);
}
.mock-digest-block:first-of-type{ border-top:0; padding-top:2px; }
.mock-digest-section{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.mock-digest-lede{
  font-size:11.5px; line-height:1.5;
  color:var(--ink); margin:0;
  letter-spacing:-0.005em;
}
.mock-digest-lede strong{ color:var(--ink); font-weight:600; }
.mock-digest-list{
  list-style:none; padding:0; margin:2px 0 0;
  display:flex; flex-direction:column; gap:6px;
}
.mock-digest-list li{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:8px; align-items:start;
  font-size:11px; line-height:1.45;
}
.mock-digest-bullet{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-top:6px;
  flex-shrink:0;
}
.mock-digest-bullet[data-kind="ship"]{ background:var(--accent); }
.mock-digest-bullet[data-kind="risk"]{ background:var(--amber-2); }
.mock-digest-bullet[data-kind="opp"]{ background:var(--accent-on-dark); }
.mock-digest-text{
  color:var(--ink);
  min-width:0;
}
.mock-digest-chips{
  display:inline-flex; gap:3px; flex-shrink:0; align-items:center;
  margin-top:1px;
}
.mock-digest-chip{
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  background:var(--paper-2);
  padding:2px 5px; border-radius:3px;
  white-space:nowrap;
}
.mock-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:6px;
  background:var(--paper-2);
  font-size:11.5px;
  line-height:1.35;
}
.mock-row .dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--accent);
}
.mock-row .dot.warn{ background:var(--amber-2); }
.mock-row .dot.muted{ background:var(--ink-ghost); }
.mock-row .label{ color:var(--ink); font-weight:500; }
.mock-row .meta{
  margin-left:auto; font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.06em;
}
.mock-row .src{
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.04em;
}

/* Devplan home mockup — sits inside the homepage hero visual frame.
   Static HTML mirroring the prototype Home view. */
.dp-mock{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(720px, 90%);
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:12px;
  box-shadow:0 32px 80px -28px rgba(10,10,11,.22), 0 8px 24px -8px rgba(10,10,11,.08);
  font-family:var(--sans);
  overflow:hidden;
}
.dp-mock-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-bottom:1px solid var(--paper-edge);
  background:var(--paper-3);
}
.dp-mock-bar-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.dp-mock-bar-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
  color:var(--accent);
  font-size:12px; line-height:1;
}
.dp-mock-bar-spacer{ flex:1; }
.dp-mock-bar-meta{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.dp-mock-body{ padding:20px 22px 22px; }
.dp-mock-h1{
  font-family:var(--sans);
  font-weight:600;
  font-size:22px; letter-spacing:-0.022em;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 6px;
}
.dp-mock-sub{
  font-size:13px; line-height:1.55;
  color:var(--ink-dim);
  margin:0 0 18px;
  max-width:52ch;
}
.dp-mock-card{
  border:1px solid var(--paper-edge);
  border-radius:10px;
  padding:14px;
  background:var(--paper);
  box-shadow:0 2px 6px -3px rgba(10,10,11,.06);
}
.dp-mock-card-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.dp-mock-card-ic{
  width:22px; height:22px;
  border-radius:6px;
  background:var(--accent-soft);
  color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  flex-shrink:0;
}
.dp-mock-card-title{
  font-size:13.5px; font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.dp-mock-card-eyebrow{
  margin-left:auto;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.dp-mock-textarea{
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:10px 12px;
  font-size:12px; line-height:1.5;
  color:var(--ink-faint);
  background:var(--paper-3);
  min-height:72px;
}
.dp-mock-actions{
  display:flex; align-items:center; gap:6px;
  margin-top:10px;
  flex-wrap:wrap;
}
.dp-mock-mini{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--paper-edge);
  padding:5px 10px;
  border-radius:6px;
}
.dp-mock-mini-ic{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint);
}
.dp-mock-hint{
  font-size:11px; color:var(--ink-faint);
  margin-left:4px;
}
.dp-mock-spacer{ flex:1; }
.dp-mock-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:12px; font-weight:500;
  color:#fff; background:var(--ink);
  padding:6px 12px; border-radius:6px;
}
.dp-mock-cta .arrow{ font-family:var(--mono); }
.dp-mock-brief{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--paper-edge);
}
.dp-mock-brief-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:6px;
}
.dp-mock-live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  animation:dp-mock-pulse 2.6s ease-in-out infinite;
}
@keyframes dp-mock-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.5; }
}
.dp-mock-brief-title{
  font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:-0.012em;
  color:var(--ink);
}

/* Project-detail mock variant — used as the home hero visual. */
.dp-mock--project .dp-mock-bar{ background:var(--paper); border-bottom:1px solid var(--paper-edge); }
.dp-mock-chat-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11px; font-weight:500;
  color:var(--accent);
  background:var(--accent-soft);
  padding:4px 10px; border-radius:999px;
}
.dp-mock-chat-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(31,61,255,0.16);
}
.dp-mock-meta-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.dp-mock-status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber-2);
  box-shadow:0 0 0 3px rgba(230,164,55,0.18);
  flex-shrink:0;
}
.dp-mock-meta-sep{ color:var(--ink-ghost); }
.dp-mock--project .dp-mock-h1{
  font-size:20px;
  margin-bottom:8px;
}
.dp-mock--project .dp-mock-sub{
  font-size:12.5px;
  margin-bottom:10px;
}
.dp-mock-detect{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.dp-mock-detect strong{ color:var(--ink); font-weight:600; }
.dp-mock-spark{
  color:var(--accent);
  font-size:11px;
}
.dp-mock-release-pill{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
  background:var(--paper-2);
  padding:3px 8px; border-radius:4px;
  border:1px solid var(--paper-edge);
}
.dp-mock-brief-card{
  background:var(--accent-soft);
  border:1px solid rgba(31,61,255,0.16);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
}
.dp-mock-brief-card .dp-mock-brief-eyebrow{
  color:var(--accent);
  margin-bottom:6px;
}
.dp-mock-brief-body{
  font-size:12.5px; line-height:1.55;
  color:var(--ink);
  margin:0;
}
.dp-mock-brief-body strong{ color:var(--ink); font-weight:600; }
.dp-mock-ac-head{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:8px;
}
.dp-mock-ac-label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.dp-mock-ac-count{
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint);
}
.dp-mock-ac-list{
  display:flex; flex-direction:column; gap:5px;
}
.dp-mock-ac-row{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:6px;
  background:var(--paper-2);
  font-size:12px;
  color:var(--ink-dim);
  line-height:1.4;
}
.dp-mock-ac-row.warn{
  background:rgba(230,164,55,0.10);
  color:var(--ink);
}
.dp-mock-chk{
  width:14px; height:14px;
  border-radius:4px;
  border:1px solid var(--ink-ghost);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600;
  background:transparent;
  color:transparent;
  flex-shrink:0;
}
.dp-mock-chk.done{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.dp-mock-chk.warn{
  background:var(--amber-2);
  border-color:var(--amber-2);
  color:#fff;
}

/* Slack-style notification (homepage hero visual) */
.slack-notif{
  position:absolute;
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:10px;
  box-shadow:0 24px 56px -20px rgba(10,10,11,.22), 0 6px 18px -6px rgba(10,10,11,.08);
  padding:14px 16px 16px;
  width:min(360px, 92%);
  font-family:var(--sans);
}
.slack-notif .sn-head{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-dim);
  margin-bottom:8px;
}
.slack-notif .sn-avatar{
  width:22px; height:22px; border-radius:5px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:12px; font-weight:600;
}
.slack-notif .sn-name{ font-weight:600; color:var(--ink); font-size:12.5px; }
.slack-notif .sn-app{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--accent);
  padding:2px 5px; border-radius:3px;
}
.slack-notif .sn-time{ margin-left:auto; font-size:11px; color:var(--ink-faint); }
.slack-notif .sn-body{
  font-size:13.5px; line-height:1.5; color:var(--ink);
  letter-spacing:-0.005em;
}
.slack-notif .sn-body strong{ color:var(--ink); font-weight:600; }
.slack-notif .sn-body .ref{ color:var(--accent); font-weight:500; }
.slack-notif .sn-evidence{
  margin-top:10px;
  display:flex; flex-direction:column; gap:5px;
  padding-top:10px; border-top:1px solid var(--paper-edge);
}
.slack-notif .sn-ev-row{
  font-size:11.5px; color:var(--ink-dim);
  display:flex; align-items:center; gap:8px;
}
.slack-notif .sn-ev-row .ic{
  width:14px; height:14px; border-radius:3px;
  background:var(--paper-2);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; color:var(--ink-faint);
}

/* ────────────────────────────────────────────────────────────
   Knowledge graph (Weaver hero visual) — pure SVG composition
   ──────────────────────────────────────────────────────────── */
.weaver-graph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.weaver-graph svg{ width:100%; height:100%; }

/* ────────────────────────────────────────────────────────────
   Insight cards / query tables
   ──────────────────────────────────────────────────────────── */
.insight-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:12px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.insight-card:hover{ border-color:var(--rule-2); transform:translateY(-2px); }
.insight-card .ic-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
}
.insight-card .ic-tag{
  background:var(--accent-soft); color:var(--accent);
  padding:3px 8px; border-radius:4px;
  font-weight:500;
}
.insight-card .ic-tag.risk{ background:rgba(230,164,55,.14); color:#A67116; }
.insight-card .ic-tag.opp{ background:var(--accent-soft); color:var(--accent); }
.insight-card .ic-title{
  font-family:var(--sans); font-weight:500;
  font-size:16px; line-height:1.3; letter-spacing:-0.02em;
  color:var(--ink);
}
.insight-card .ic-body{
  font-size:13.5px; color:var(--ink-dim); line-height:1.5;
}
.insight-card .ic-sources{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:auto; padding-top:12px;
  border-top:1px solid var(--paper-edge);
}
.insight-card .src-chip{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  background:var(--paper-2);
  padding:3px 7px; border-radius:3px;
}

/* Two-column table — for queries / sub-capabilities */
.dl-table{
  border-top:1px solid var(--rule-2);
}
.dl-row{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 56px);
  padding:24px 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.dl-row .dl-q{
  font-family:var(--sans); font-weight:500;
  font-size:16px; letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.35;
}
.dl-row .dl-q .it{ color:var(--accent); font-style:normal; font-weight:500; }
.dl-row .dl-a{
  font-size:14px; line-height:1.55; color:var(--ink-dim);
}
.dl-row .dl-a strong{ color:var(--ink); font-weight:500; }
.dl-row .dl-src{
  display:block;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:8px;
}
@media (max-width:780px){
  .dl-row{ grid-template-columns:1fr; gap:10px; }
}

/* Insight type table */
.itype-table{ border-top:1px solid var(--rule-2); }
.itype-row{
  display:grid;
  grid-template-columns:200px 1fr 200px;
  gap:clamp(20px, 3vw, 48px);
  padding:22px 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.itype-row .it-type{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
}
.itype-row .it-ex{
  font-family:var(--sans); font-weight:450;
  font-size:15px; line-height:1.45; letter-spacing:-0.015em;
  color:var(--ink);
}
.itype-row .it-src{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); line-height:1.5;
}
@media (max-width:820px){
  .itype-row{ grid-template-columns:1fr; gap:6px; }
}

/* ────────────────────────────────────────────────────────────
   Pillars (3-up)
   ──────────────────────────────────────────────────────────── */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--rule-2);
}
@media (max-width:960px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  padding:44px clamp(20px, 2.4vw, 36px) 52px;
  border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:14px;
}
.pillar:first-child{ border-left:0; }
@media (max-width:960px){
  .pillar{ border-left:0; border-top:1px solid var(--rule); }
  .pillar:first-child{ border-top:0; }
}
.pillar-num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; color:var(--ink-faint);
}
.pillar-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(21px, 1.75vw, 25px);
  line-height:1.2; letter-spacing:-0.022em;
  color:var(--ink);
  margin:6px 0 10px;
}
.pillar-title .it{ color:var(--accent); font-style:normal; font-weight:600; }
.pillar-body{
  font-size:14.5px; line-height:1.55; color:var(--ink-dim);
}

/* ────────────────────────────────────────────────────────────
   Three-pillars on dark (Weaver moat)
   ──────────────────────────────────────────────────────────── */
.moat-pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--on-teal-rule);
  border-bottom:1px solid var(--on-teal-rule);
}
@media (max-width:960px){ .moat-pillars{ grid-template-columns:1fr; } }
.moat-pillar{
  padding:36px clamp(20px, 2vw, 32px) 40px;
  border-left:1px solid var(--on-teal-rule);
}
.moat-pillar:first-child{ border-left:0; }
@media (max-width:960px){
  .moat-pillar{ border-left:0; border-top:1px solid var(--on-teal-rule); }
  .moat-pillar:first-child{ border-top:0; }
}
.moat-pillar h4{
  font-family:var(--sans);
  font-weight:450;
  font-size:21px; line-height:1.25; letter-spacing:-0.022em;
  color:#fff; margin:0 0 10px;
}
.moat-pillar h4 .it{ color:#fff; font-style:normal; font-weight:650; }
.moat-pillar p{
  font-size:13px; line-height:1.55;
  color:var(--on-teal-dim); margin:0;
}

/* ────────────────────────────────────────────────────────────
   Process / step flow
   ──────────────────────────────────────────────────────────── */
.flow{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--on-teal-rule);
}
@media (max-width:960px){ .flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; } }
.flow-step{
  padding:36px clamp(20px, 2vw, 32px) 44px;
  border-left:1px solid var(--on-teal-rule);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}
.flow-step:first-child{ border-left:0; }
.flow-step.is-highlight{
  background:rgba(31,61,255,0.08);
}
@media (max-width:960px){
  .flow-step{ border-left:0; border-top:1px solid var(--on-teal-rule); }
  .flow-step:first-child, .flow-step:nth-child(2){ border-top:0; }
}
@media (max-width:560px){
  .flow-step:nth-child(2){ border-top:1px solid var(--on-teal-rule); }
}
.flow-num{
  font-family:var(--sans);
  font-weight:320;
  font-size:32px; line-height:.95; letter-spacing:-0.04em;
  color:rgba(255,255,255,0.55);
}
.flow-num .it{ font-style:normal; }
.flow-title{
  font-family:var(--sans); font-weight:550;
  font-size:15px; line-height:1.25; letter-spacing:-0.018em;
  color:#fff;
}
.flow-body{
  font-size:12.5px; line-height:1.55; color:var(--on-teal-dim);
}

/* ────────────────────────────────────────────────────────────
   Role table
   ──────────────────────────────────────────────────────────── */
.role-table{
  border-top:1px solid var(--on-teal-rule);
}
.role-row{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:clamp(20px, 4vw, 56px);
  padding:22px 0;
  border-bottom:1px solid var(--on-teal-rule);
  align-items:start;
}
.role-row .role-name{
  font-family:var(--sans); font-weight:500;
  font-size:17px; letter-spacing:-0.02em;
  color:#fff;
}
.role-row .role-feed{
  font-size:14px; line-height:1.55; color:var(--on-teal-dim);
}
.role-row .role-feed .dot{
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--on-teal-dim);
  margin:0 12px; vertical-align:middle;
}
@media (max-width:780px){
  .role-row{ grid-template-columns:1fr; gap:8px; }
}

/* ────────────────────────────────────────────────────────────
   Integration filter rail + card grid
   ──────────────────────────────────────────────────────────── */
.filter-rail{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:clamp(20px, 2vw, 28px);
}
.filter-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--rule-2);
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  letter-spacing:-0.005em;
  font-feature-settings:"ss01","ss03","cv11";
}
.filter-chip:hover{
  color:var(--ink);
  background:var(--paper-2);
  border-color:var(--rule-strong);
}
.filter-chip.is-active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.filter-chip.is-active:hover{
  background:var(--accent);
  border-color:var(--accent);
}
.filter-chip .count{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  color:var(--ink-faint);
  letter-spacing:.04em;
}
.filter-chip.is-active .count{ color:rgba(255,255,255,0.66); }

.int-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px;
}
.int-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:12px;
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:12px;
  min-height:140px;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.int-card:hover{
  border-color:var(--rule-strong);
  transform:translateY(-1px);
  box-shadow:0 8px 24px -16px rgba(10,10,11,.18);
}
.int-card[hidden]{ display:none; }
.int-card-head{
  display:flex; align-items:center; gap:12px;
}
.int-card-mark{
  width:36px; height:36px;
  border-radius:8px;
  background:var(--paper-2);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:var(--sans); font-weight:600; font-size:14px;
  color:var(--ink);
  letter-spacing:-0.01em;
  overflow:hidden;
}
.int-card-mark svg,
.int-card-mark img{ width:22px; height:22px; display:block; }
.int-card-text{ flex:1; min-width:0; }
.int-card-name{
  font-family:var(--sans); font-weight:600; font-size:14.5px;
  color:var(--ink); letter-spacing:-0.012em;
  line-height:1.2;
}
.int-card-cat{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:3px;
}
.int-card-desc{
  font-size:13px; line-height:1.5;
  color:var(--ink-dim);
  margin:0;
}
.int-card.is-soon{
  background:var(--paper-2);
  border-style:dashed;
}
.int-card.is-soon .int-card-name{ color:var(--ink-dim); }

/* ────────────────────────────────────────────────────────────
   CTA block
   ──────────────────────────────────────────────────────────── */
.cta-block{
  background:#0A0A0B;
  color:var(--on-teal);
  padding:clamp(64px, 9vw, 144px) 0 clamp(64px, 9vw, 128px);
  position:relative; overflow:hidden;
}
.cta-block::before{
  content:""; position:absolute;
  inset:0;
  /* corner cobalt ambiance (the brand dot field is drawn by the
     cursor-reactive .cta-bg-canvas below) */
  background:
    radial-gradient(46% 70% at 0% 100%, rgba(31,61,255,0.20), transparent 65%),
    radial-gradient(40% 60% at 100% 0%, rgba(31,61,255,0.10), transparent 65%);
  pointer-events:none;
}
/* Cursor-reactive dot field — same engine as the hero. Sits above the
   corner glows, below the drifting ::after glow and the content. */
.cta-bg-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
/* A soft cobalt light that slowly drifts across the dot field, brightening
   the dots it passes (screen blend) — a quiet, on-brand shimmer. */
.cta-block::after{
  content:""; position:absolute;
  width:65%; aspect-ratio:1; left:18%; top:6%;
  background:radial-gradient(closest-side, rgba(31,61,255,0.30), transparent 72%);
  filter:blur(10px);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:ctaGlowDrift 18s ease-in-out infinite alternate;
}
@keyframes ctaGlowDrift{
  0%   { transform:translate(-24%, 12%) scale(1);    opacity:.5; }
  50%  { transform:translate(20%, -8%)  scale(1.25); opacity:.9; }
  100% { transform:translate(2%, 8%)    scale(1.08); opacity:.6; }
}
@media (prefers-reduced-motion: reduce){
  .cta-block::after{ animation:none; }
}
.cta-inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:end;
  position:relative; z-index:1;
}
@media (max-width:820px){
  .cta-inner{ grid-template-columns:1fr; gap:24px; align-items:start; }
}
.cta-block .h2{
  color:#fff; max-width:22ch;
  font-size:clamp(31px, 3.75vw, 50px);    /* +25% over the default .h2 scale */
  line-height:1.06;
}
.cta-block .h2 .it{ color:#fff; font-weight:650; }
.cta-block .lede{ color:var(--on-teal-dim); margin-top:14px; }

/* ───── Dark-surface emphasis: never use blue text on black.
   Differentiate via weight + white. ───── */
.surface-teal .h2 .it,
.surface-teal .display .it,
.surface-teal .hero-title .it,
.surface-teal .cap-title .it,
.surface-teal .pillar-title .it{
  color:#fff;
  font-weight:650;
}
.surface-teal .h2 .dim,
.surface-teal .display .dim,
.surface-teal .hero-title .dim{
  color:rgba(255,255,255,0.45);
  font-weight:280;
}
.surface-teal .locked-line{
  color:#fff;
  font-weight:650;
}
.surface-teal .section-num .n{
  color:#fff;
  font-weight:500;
}
.surface-teal .compare-cell.pos strong{
  color:#fff;
  font-weight:650;
}
/* Nav-dropdown dark overview card — drop blue eyebrow */
.nav-dd-item.dd-overview .dd-eyebrow{
  color:rgba(255,255,255,0.55);
}

/* ────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────── */
.site-footer{
  background:#0A0A0B;
  color:var(--on-teal-dim);
  padding-top:clamp(72px, 8vw, 120px);
  padding-bottom:32px;
  position:relative;
  z-index:2;
  border-top:1px solid #0A0A0B;
}
/* Footer grid — fits brand + 4 nav columns on one row at desktop so
   nothing widows. (v3 footer had 3 nav columns and used 2fr 1fr 1fr 1fr;
   v4 added a fifth so we grow to 5 columns and slim the brand to 1.6fr.)
   At tablet the brand spans the full row above a 4-up nav grid. */
.foot-top{
  display:grid;
  grid-template-columns:1.7fr repeat(4, 1fr) auto;
  gap:clamp(24px, 3.2vw, 48px);
  padding-bottom:clamp(48px, 5vw, 72px);
  border-bottom:1px solid var(--on-teal-rule);
}
@media (max-width:1100px){
  .foot-top{
    grid-template-columns:repeat(4, 1fr);
    gap:48px 36px;
  }
  .foot-brand{ grid-column:1 / 4; }
  .foot-col--trust{ grid-column:4; grid-row:1; align-self:start; }
}
@media (max-width:640px){
  .foot-top{ grid-template-columns:repeat(2, 1fr); }
  .foot-brand,
  .foot-col--trust{ grid-column:auto; grid-row:auto; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:420px){
  .foot-top{ grid-template-columns:1fr; }
}
.foot-brand{ display:flex; flex-direction:column; gap:0; }
.foot-brand-row{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
}
.foot-brand-mark{
  width:22px; height:22px; flex-shrink:0;
  color:var(--accent);
}
.foot-brand .foot-mark{
  font-family:var(--sans);
  font-weight:600;
  font-size:17px;
  line-height:1; letter-spacing:-0.018em;
  color:#fff; margin:0;
}
.foot-brand .foot-tag{
  font-family:var(--sans);
  font-weight:400;
  font-size:14px; line-height:1.55;
  color:var(--on-teal-dim);
  margin:0 0 24px;
  max-width:32ch;
  letter-spacing:-0.005em;
}

/* Footer newsletter signup */
.foot-newsletter{
  display:flex; flex-direction:column;
  gap:10px;
  max-width:340px;
}
/* SOC 2 trust column — last column in the footer row, holds just the
   OneLeet-hosted SVG badge. Header label stays consistent with the
   other nav columns; the badge itself gets a subtle hover lift. */
.foot-col--trust{
  align-self:start;
  min-width:140px;
}
.foot-trust-badge{
  display:inline-block;
  line-height:0;
  transition:transform .2s ease, opacity .2s ease;
  opacity:.92;
}
.foot-trust-badge:hover,
.foot-trust-badge:focus-visible{
  transform:translateY(-2px);
  opacity:1;
  outline:none;
}
.foot-trust-badge img{
  width:120px; height:auto;
  display:block;
}
.foot-newsletter-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.foot-newsletter-row{
  display:flex; align-items:stretch;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--on-teal-rule);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.foot-newsletter-row:focus-within{
  border-color:rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.06);
}
.foot-newsletter input{
  flex:1; min-width:0;
  background:transparent;
  border:0; outline:none;
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:-0.005em;
  padding:10px 12px;
}
.foot-newsletter input::placeholder{
  color:rgba(255,255,255,0.36);
}
.foot-newsletter button{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.55);
  border:0; border-left:1px solid var(--on-teal-rule);
  padding:0 16px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .2s var(--ease), color .2s var(--ease);
  letter-spacing:-0.005em;
}
.foot-newsletter button .arrow{
  transition:transform .25s var(--ease);
}
.foot-newsletter button:hover{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.foot-newsletter button:hover .arrow{ transform:translateX(3px); }
.foot-col h5{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:#fff; font-weight:500;
  margin:0 0 18px;
}
.foot-col ul{ list-style:none; padding:0; margin:0; }
.foot-col li{ margin:0 0 10px; }
.foot-col a{
  font-size:14px; color:var(--on-teal-dim);
  letter-spacing:-0.005em;
  transition:color .2s var(--ease);
}
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-teal-dim);
}
.foot-bottom a{
  color:var(--on-teal-dim);
  transition:color .2s var(--ease);
}
.foot-bottom a:hover{ color:#fff; }
.foot-bottom .links{ display:flex; gap:24px; flex-wrap:wrap; }

/* ────────────────────────────────────────────────────────────
   Misc utilities
   ──────────────────────────────────────────────────────────── */
.gap-xs{ height:14px; }
.gap-sm{ height:24px; }
.gap-md{ height:48px; }
.gap-lg{ height:80px; }

.center-text{ text-align:center; }
.muted{ color:var(--ink-dim); }
.dim{ color:var(--ink-faint); }
.teal{ color:var(--accent); }

/* Locked-line — the verbatim spec copy. No italics; cobalt accent. */
.locked-line{
  font-family:var(--sans);
  font-weight:500;
  color:var(--accent);
  font-style:normal;
  letter-spacing:-0.01em;
}

/* Anti-DIY surface */
.antidiy-head{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:end;
  margin-bottom:clamp(48px, 6vw, 80px);
}
@media (max-width:860px){ .antidiy-head{ grid-template-columns:1fr; gap:24px; } }

/* MCP/agent surface pills */
.agent-surfaces{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:32px;
}
.agent-surfaces .pill{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
  border:1px solid var(--on-teal-rule);
  padding:8px 14px; border-radius:999px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.agent-surfaces .pill:hover{ background:rgba(255,255,255,.06); border-color:var(--accent-on-dark); }

/* Suggested-projects accent card */
.sugg-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:32px;
  display:flex; flex-direction:column; gap:18px;
}
.sugg-card .sc-tag{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.sugg-card .sc-title{
  font-family:var(--sans); font-weight:500;
  font-size:18px; letter-spacing:-0.022em;
  color:var(--ink); line-height:1.3;
}
.sugg-card .sc-evidence{
  font-size:13.5px; color:var(--ink-dim); line-height:1.55;
}
.sugg-card .sc-cta{
  align-self:flex-start;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid var(--accent-soft-2);
  border-radius:999px;
  transition:background .2s var(--ease);
}
.sugg-card .sc-cta:hover{ background:var(--accent-soft); }

/* Spec mock */
.mock-spec{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
  overflow:hidden;
}
.mock-spec h6{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 4px; font-weight:500;
}
.mock-spec .spec-title{
  font-family:var(--sans); font-weight:500; font-size:14px;
  color:var(--ink); letter-spacing:-0.015em; line-height:1.3;
}
.mock-spec .ac-list{
  display:flex; flex-direction:column; gap:6px;
  margin-top:4px;
}
.mock-spec .ac-row{
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--ink-dim);
  padding:6px 8px; border-radius:5px;
  background:var(--paper-2);
}
.mock-spec .ac-row .chk{
  width:12px; height:12px; border-radius:3px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:8px; flex-shrink:0;
}
.mock-spec .ac-row.todo .chk{ background:transparent; border:1px solid var(--ink-ghost); }
.mock-spec .ac-row.warn .chk{ background:var(--amber-2); }
.mock-spec .ac-row .meta{
  margin-left:auto; font-family:var(--mono); font-size:9.5px;
  color:var(--ink-faint); letter-spacing:.04em;
}

/* Estimate mock */
.mock-est{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:18px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
}
.mock-est .est-head{
  display:flex; justify-content:space-between; align-items:baseline;
}
.mock-est .est-num{
  font-family:var(--sans); font-weight:320;
  font-size:34px; letter-spacing:-0.04em;
  color:var(--ink);
}
.mock-est .est-num .unit{ font-size:14px; color:var(--ink-faint); margin-left:4px; font-weight:400; }
.mock-est .est-conf{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  background:var(--accent-soft);
  padding:3px 8px; border-radius:4px;
}
.mock-est .est-track{
  height:24px; border-radius:4px;
  background:linear-gradient(90deg,
    var(--paper-2) 0%, var(--paper-2) 22%,
    var(--accent-soft) 22%, var(--accent-soft) 72%,
    var(--paper-2) 72%);
  position:relative;
  overflow:hidden;
}
.mock-est .est-track::before{
  content:""; position:absolute;
  top:0; bottom:0; left:38%;
  width:2px; background:var(--accent);
}
.mock-est .est-labels{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mock-est .est-foot{
  margin-top:auto;
  font-size:11px; color:var(--ink-dim);
  line-height:1.5;
  padding-top:8px; border-top:1px dashed var(--paper-edge);
}

/* Pulse mock */
/* Updates mock — editorial daily-digest layout with date rail, summary
   bullets, and rich update cards. Modeled on the prototype's Updates page. */
.mock-updates{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
  overflow:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
}
.mu-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:8px;
  border-bottom:1px solid var(--paper-edge);
}
.mu-head-eye{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
}
.mu-head-meta{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mu-day{
  display:grid; grid-template-columns:64px 1fr;
  gap:14px;
  padding:10px 0 4px;
  border-top:1px solid var(--paper-edge);
}
.mu-day:first-of-type{ border-top:0; padding-top:2px; }
.mu-day-rail{
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0;
}
.mu-day-friendly{
  font-size:11px; font-weight:600;
  color:var(--accent);
  letter-spacing:-0.005em;
}
.mu-day-date{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mu-day-body{
  display:flex; flex-direction:column; gap:8px;
  min-width:0;
}
.mu-section-eye{
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.mu-summary{
  display:flex; flex-direction:column; gap:4px;
}
.mu-summary ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:3px;
}
.mu-summary li{
  font-size:11px; line-height:1.45;
  color:var(--ink);
  letter-spacing:-0.005em;
  padding-left:10px;
  position:relative;
}
.mu-summary li::before{
  content:""; position:absolute;
  left:0; top:7px;
  width:3px; height:3px; border-radius:50%;
  background:var(--ink-faint);
}
.mu-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:6px;
  padding:9px 11px 10px;
  display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s var(--ease);
}
.mu-card:hover{ border-color:var(--rule-2); }
.mu-card-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mu-card-head h6{
  margin:0;
  font-family:var(--sans); font-weight:600;
  font-size:11.5px; letter-spacing:-0.008em;
  color:var(--ink);
}
.mu-card-tag{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid color-mix(in oklch, var(--accent) 22%, transparent);
}
.mu-card-tag[data-tag="release"]{
  background:color-mix(in oklch, #2eb67d 12%, var(--paper));
  color:#0b6d4a;
  border-color:color-mix(in oklch, #2eb67d 28%, transparent);
}
.mu-card-tag[data-tag="drift"]{
  background:var(--amber-soft);
  color:#7a5417;
  border-color:color-mix(in oklch, var(--amber-2) 30%, transparent);
}
.mu-card-tag[data-tag="new"]{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:color-mix(in oklch, var(--accent) 22%, transparent);
}
.mu-card p{
  font-size:11px; line-height:1.5;
  color:var(--ink-dim);
  margin:0;
  letter-spacing:-0.003em;
}
.mu-card-foot{
  display:flex; gap:4px; flex-wrap:wrap;
  margin-top:2px;
}
.mu-chip{
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.06em;
  color:var(--ink-dim);
  background:var(--paper-2);
  padding:2px 5px; border-radius:3px;
  white-space:nowrap;
}

/* Market-intel mock */
.mock-market{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:18px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
}
.mock-market .mm-head{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.mock-market .mm-card{
  display:grid; grid-template-columns:auto 1fr;
  gap:10px; align-items:start;
  padding:10px; border-radius:6px;
  background:var(--paper-2);
}
.mock-market .mm-card .icon{
  width:24px; height:24px; border-radius:5px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:11px; font-weight:600;
  flex-shrink:0;
}
.mock-market .mm-card h6{
  font-family:var(--sans); font-weight:500; font-size:13px;
  color:var(--ink); margin:0 0 2px; letter-spacing:-0.015em;
}
.mock-market .mm-card p{
  font-size:11px; color:var(--ink-dim); margin:0; line-height:1.45;
}

/* Feature catalog mock */
.mock-catalog{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:14px;
  display:grid; grid-template-columns:120px 1fr;
  gap:10px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
  overflow:hidden;
}
.mock-catalog .cat-tree{
  display:flex; flex-direction:column; gap:2px;
  border-right:1px solid var(--paper-edge);
  padding-right:8px;
}
.mock-catalog .cat-item{
  font-size:11.5px; padding:5px 8px; border-radius:4px;
  color:var(--ink-dim); display:flex; align-items:center; gap:6px;
}
.mock-catalog .cat-item.active{ background:var(--accent-soft); color:var(--accent); font-weight:500; }
.mock-catalog .cat-item .ic{
  width:10px; height:10px; border-radius:2px;
  background:currentColor; opacity:.5;
}
.mock-catalog .cat-detail{
  display:flex; flex-direction:column; gap:8px;
}
.mock-catalog .cat-detail h6{
  font-family:var(--sans); font-weight:500; font-size:14px;
  color:var(--ink); margin:0; letter-spacing:-0.015em;
}
.mock-catalog .cat-detail .meta{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.mock-catalog .cat-detail .meta div{
  font-size:10.5px; color:var(--ink-dim);
  padding:5px 7px; background:var(--paper-2); border-radius:4px;
}
.mock-catalog .cat-detail .meta strong{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; display:block; margin-bottom:1px;
}

/* Ask-Weaver chat mock */
/* Agent chat mock — live streaming demo with real input.
   JS in marketing.html drives a scripted Q&A loop and also lets the
   visitor type and submit; canned reply triggers via keyword match. */
.mock-ask{
  position:absolute; inset:48px 24px 24px 24px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:12px 12px 10px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 18px 36px -16px rgba(10,10,11,.18);
  overflow:hidden;
}
.mock-ask .ask-stream{
  flex:1; min-height:0;
  overflow-y:auto;
  display:flex; flex-direction:column;
  gap:8px;
  padding-right:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--paper-edge) transparent;
}
.mock-ask .ask-stream::-webkit-scrollbar{ width:4px; }
.mock-ask .ask-stream::-webkit-scrollbar-thumb{ background:var(--paper-edge); border-radius:2px; }
.mock-ask .ask-bubble{
  font-family:var(--sans);
  font-size:13px; line-height:1.4;
  letter-spacing:-0.008em;
  padding:8px 12px;
  border-radius:10px;
  max-width:88%;
  white-space:pre-wrap;
  animation:ask-bubble-in .26s var(--ease-out) both;
}
@keyframes ask-bubble-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
.mock-ask .ask-bubble.q{
  align-self:flex-end;
  background:var(--paper-2);
  color:var(--ink);
  border-radius:10px 10px 2px 10px;
  font-weight:450;
}
.mock-ask .ask-bubble.a{
  align-self:flex-start;
  background:var(--accent);
  color:#fff;
  border-radius:10px 10px 10px 2px;
  font-size:12.5px;
}
.mock-ask .ask-bubble.a strong{ color:#fff; font-weight:600; }
.mock-ask .ask-caret{
  display:inline-block;
  width:1px; height:1em;
  background:currentColor;
  margin-left:1px;
  vertical-align:-2px;
  animation:ask-caret 1s steps(2) infinite;
}
@keyframes ask-caret{
  50%{ opacity:0; }
}
.mock-ask .ask-thinking{
  display:inline-flex; gap:3px; padding:2px 0;
}
.mock-ask .ask-thinking i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.8);
  animation:ask-thinking 1.1s ease-in-out infinite;
}
.mock-ask .ask-thinking i:nth-child(2){ animation-delay:.16s; }
.mock-ask .ask-thinking i:nth-child(3){ animation-delay:.32s; }
@keyframes ask-thinking{
  0%, 80%, 100%{ opacity:.3; transform:scale(.8); }
  40%{ opacity:1; transform:scale(1); }
}
.mock-ask .ask-src{
  display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;
  opacity:0;
  animation:ask-src-in .35s var(--ease-out) .15s both;
}
@keyframes ask-src-in{
  to{ opacity:1; }
}
.mock-ask .ask-src span{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.06em;
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
  padding:2px 5px; border-radius:3px;
}
.mock-ask .ask-input-row{
  display:flex; align-items:center; gap:6px;
  margin-top:auto;
  padding:4px 4px 4px 10px;
  border:1px solid var(--paper-edge);
  border-radius:7px;
  background:var(--paper);
  transition:border-color .2s var(--ease);
}
.mock-ask .ask-input-row:focus-within{
  border-color:var(--rule-2);
}
.mock-ask .ask-input-real{
  flex:1; min-width:0;
  border:0; outline:none;
  background:transparent;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:-0.005em;
  color:var(--ink);
  padding:6px 0;
}
.mock-ask .ask-input-real::placeholder{
  color:var(--ink-faint);
}
.mock-ask .ask-input-send{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  border:0; border-radius:5px;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  transition:background .18s var(--ease);
  padding:0;
  flex-shrink:0;
}
.mock-ask .ask-input-send:hover{ background:var(--accent); }
.mock-ask .ask-input-send svg{ width:14px; height:14px; display:block; }

/* ────────────────────────────────────────────────────────────
   Intelligence Layer — scroll-driven particle vortex (platform § 03)
   Ported from website-visibility/product.html. Canvas is full-bleed and
   sticky; section is 180vh so the vortex has scroll-distance to crystallize.
   ──────────────────────────────────────────────────────────── */
.intelligence{
  position:relative;
  height:110vh;          /* pinned travel — vortex is delayed (idle until
                            the section is ~pinned) and finishes right as
                            it unpins (~0.56), so no trailing black void */
  background:#0A0A0B;
  color:#fff;
  isolation:isolate;
  overflow:hidden;
  z-index:2;
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
.intelligence-stage{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
}
.intelligence canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.intelligence-vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 36% 28% at 50% 55%, rgba(10,10,11,.94) 0%, rgba(10,10,11,.78) 50%, rgba(10,10,11,.0) 100%),
    linear-gradient(180deg, #0A0A0B 0%, transparent 14%, transparent 86%, #0A0A0B 100%),
    radial-gradient(ellipse 60% 50% at 18% 50%, rgba(31,61,255,.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 82% 50%, rgba(255,80,180,.08), transparent 70%);
  z-index:1;
}
.intelligence-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:2;
  text-align:center;
  padding:0 clamp(20px, 5vw, 56px);
  opacity:var(--reveal, 0);
  transform:translateY(calc(40px + (1 - var(--reveal, 0)) * 14px));
  transition:opacity .15s linear, transform .15s linear;
  will-change:opacity, transform;
}
.intelligence-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:16px;
}
.intelligence-eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-on-dark);
  box-shadow:0 0 0 4px rgba(90,119,255,0.25);
}
.intelligence-title{
  font-family:var(--sans);
  font-weight:200;
  font-size:clamp(48px, 7.5vw, 108px);
  line-height:.92;
  letter-spacing:-0.045em;
  color:#fff;
  margin:0 0 16px;
  text-shadow:
    0 4px 60px rgba(31,61,255,.32),
    0 0 120px rgba(31,61,255,.18);
}
.intelligence-lede{
  font-family:var(--sans);
  font-size:clamp(15px, 1.4vw, 19px);
  line-height:1.55;
  color:#D8DADE;
  max-width:60ch;
  margin:0 auto;
  letter-spacing:-0.005em;
  text-shadow:0 1px 12px rgba(10,10,11,.55);
}
.intelligence-lede strong{ color:#fff; font-weight:500; }
.intelligence-availability{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.60);
  margin:12px auto 0;
  text-shadow:0 1px 8px rgba(10,10,11,.55);
}
.intelligence-meta{
  margin-top:22px;
  display:inline-flex; gap:clamp(16px, 2.4vw, 32px);
  flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:#9DA0A6;
  text-shadow:0 1px 8px rgba(10,10,11,.55);
}
.intelligence-meta span{ display:inline-flex; align-items:center; gap:8px; }
.intelligence-meta i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:background .45s ease, box-shadow .45s ease;
}
.intelligence-pipeline span{
  opacity:.65;
  transition:opacity .45s ease, color .45s ease, transform .45s ease;
}
.intelligence-pipeline span.on{
  opacity:1;
  color:#fff;
}
.intelligence-pipeline span.on i{
  background:var(--accent-on-dark);
  box-shadow:0 0 10px rgba(90,119,255,.7);
}
.intelligence-pipeline span:not(:last-child)::after{
  content:""; width:14px; height:1px;
  background:rgba(255,255,255,.10);
  display:inline-block;
  margin-left:clamp(6px, 1vw, 14px);
  vertical-align:middle;
}
@media (max-width: 720px){
  .intelligence{ height:135vh; }
  .intelligence-meta{ font-size:10px; gap:10px; }
  .intelligence-pipeline span:not(:last-child)::after{ width:8px; margin-left:6px; }
}

/* Clickable wrapper — used on home where the whole vortex section
   links to /product/weaver/. */
.intelligence-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.intelligence-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(18px, 2.4vw, 28px);
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  letter-spacing:-0.005em;
  color:rgba(255,255,255,0.78);
  text-shadow:0 1px 8px rgba(10,10,11,.55);
  transition:color .2s ease, transform .2s ease;
}
.intelligence-cta .arrow{
  display:inline-block;
  transition:transform .2s ease;
}
.intelligence-link:hover .intelligence-cta{
  color:#fff;
}
.intelligence-link:hover .intelligence-cta .arrow{
  transform:translateX(4px);
}
.intelligence-link:focus-visible{
  outline:2px solid var(--accent-on-dark);
  outline-offset:-6px;
}

/* Home Weaver vortex: pull the CTA out of the centered stack and pin it
   below the animated graph, on the black field at the bottom of the stage. */
.v4-weaver-stage .intelligence-cta{
  position:absolute;
  left:50%;
  bottom:clamp(40px, 8vh, 88px);
  transform:translateX(-50%);
  margin-top:0;
}
@media (max-width: 720px){
  .v4-weaver-stage .intelligence-cta{ bottom:clamp(32px, 6vh, 64px); }
}

/* Anchor offset for sticky nav */
[id]{ scroll-margin-top:80px; }

@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0; transform:translateY(12px);
    animation:reveal .9s var(--ease-out) forwards;
  }
  .reveal.d-1{ animation-delay:.08s; }
  .reveal.d-2{ animation-delay:.16s; }
  .reveal.d-3{ animation-delay:.24s; }
  .reveal.d-4{ animation-delay:.32s; }
}
@keyframes reveal{
  to{ opacity:1; transform:translateY(0); }
}

/* Footer needs its own stacking context so its background doesn't peek through
   any overlapping cards. The nav and main keep their original stacking. */
.site-footer{ position:relative; z-index:1; }

.bleed{ width:100vw; margin-inline:calc(50% - 50vw); }

.cap-list{ display:flex; flex-direction:column; }

/* ────────────────────────────────────────────────────────────
   Split section head (h2/lede on left, marks list on right) —
   used by § 04 Define intent
   ──────────────────────────────────────────────────────────── */
.section-head--split{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
  max-width:none;
  margin-bottom:clamp(48px, 6vw, 72px);
}
@media (max-width: 880px){
  .section-head--split{ grid-template-columns:1fr; gap:28px; }
}
.section-lede{
  font-size:clamp(15px, 1.3vw, 17px);
  line-height:1.55;
  color:var(--ink-dim);
  max-width:60ch;
  margin:14px 0 0;
}
.section-lede strong{ color:var(--ink); font-weight:500; }
.define-marks{
  list-style:none;
  margin:6px 0 0; padding:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 28px;
}
@media (max-width: 560px){ .define-marks{ grid-template-columns:1fr; } }
.define-marks li{
  font-family:var(--sans);
  font-size:14px; line-height:1.4;
  color:var(--ink);
  display:flex; gap:12px; align-items:baseline;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.define-marks li span{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em;
  color:var(--ink-faint);
  font-weight:500;
  flex-shrink:0;
}

/* ────────────────────────────────────────────────────────────
   Mock — Priority detail with suggested projects
   Used in § 04 Define intent. Devplan does the rest.
   ──────────────────────────────────────────────────────────── */
.mock-priority{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:clamp(28px, 3.6vw, 44px);
  box-shadow:0 24px 56px -28px rgba(10,10,11,.16);
  max-width:920px;
  display:flex; flex-direction:column;
  gap:18px;
}
.mock-priority-head{
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.mock-priority-tags{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.mp-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
  padding:5px 10px;
  border-radius:4px;
  background:rgba(193,138,53,.10);
  color:#8A5D1F;
}
.mp-pill .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.mp-pill--pain{ background:rgba(214,84,30,.10); color:#A1331F; }
.mp-meta{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-dim);
}
.mp-sev{
  margin-left:auto;
  display:inline-flex; gap:3px;
}
.mp-sev span{
  width:6px; height:14px; border-radius:1px;
  background:rgba(10,10,11,.14);
}
.mp-sev-3 span{ background:#A1331F; }
.mp-sev-3 span:first-child{ background:#A1331F; }
.mock-priority-title{
  font-family:var(--sans);
  font-weight:430;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.2; letter-spacing:-0.022em;
  color:var(--ink);
  margin:6px 0 4px;
}
.mock-priority-body{
  padding-top:14px;
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:8px;
}
.mp-label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.mp-blurb{
  margin:0; font-size:13.5px; line-height:1.55;
  color:var(--ink-dim); max-width:62ch;
}

.mp-projects{
  list-style:none;
  margin:6px 0 0; padding:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--rule);
}
.mp-project{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.mp-project:last-child{ border-bottom:0; }
.mp-ix{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; color:var(--ink-faint);
  font-weight:500;
}
.mp-project-name{
  font-family:var(--sans); font-size:15px;
  font-weight:500; color:var(--ink);
  letter-spacing:-0.012em;
  line-height:1.35;
}
.mp-project-sub{
  margin-top:4px;
  font-size:12.5px; color:var(--ink-dim);
  line-height:1.5;
}
.mp-project-meta{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:4px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em;
}
.mp-window{ color:var(--ink); font-weight:500; }
.mp-conf{
  padding:2px 7px; border-radius:4px;
  font-size:10.5px; letter-spacing:.08em;
  font-weight:600;
}
.mp-conf--hi{ background:rgba(31,61,255,.10); color:#0F2A8C; }
.mp-conf--med{ background:rgba(193,138,53,.12); color:#8A5D1F; }

.mock-priority-foot{
  margin-top:8px;
  padding-top:18px;
  border-top:1px dashed var(--rule-2);
  display:flex; flex-direction:column; gap:6px;
}
.mp-foot-eye{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.mp-foot-text{
  font-size:13px; line-height:1.55;
  color:var(--ink-dim); max-width:72ch;
}

@media (max-width: 720px){
  .mp-project{ grid-template-columns: 32px 1fr; }
  .mp-project-meta{ grid-column: 2; flex-direction:row; align-self:start; }
  .mp-sev{ margin-left:0; }
}


/* ════════════════════════════════════════════════════════════
   June 2026 content rebuild.
   Classes remain prefixed `v4-` to avoid broad rename churn.
   ════════════════════════════════════════════════════════════ */

/* ── v4 Nav: 3-dropdown extension over the existing .nav primitives ─ */
.nav-v4 .nav-link-button{
  background:transparent; border:0; padding:0;
  font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  color:inherit;
}
.nav-caret{
  font-size:14px; line-height:1;
  color:var(--ink-dim);
  transition:transform .18s ease;
  margin-top:-1px;
}
.nav-dropdown-wrap{
  position:relative;
  display:inline-flex; align-items:center;
}
.nav-dropdown-wrap::before{
  /* invisible hover bridge so cursor can move from button to panel */
  content:"";
  position:absolute; left:0; right:0;
  top:100%; height:14px;
  z-index:1;
}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:-20px;
  min-width:400px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  box-shadow:0 30px 60px -28px rgba(10,10,11,.24), 0 2px 12px -4px rgba(10,10,11,.06);
  padding:14px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:80;
}
/* Section eyebrow above the items — gives the dropdown a heading. */
.nav-dd-eyebrow{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  padding:6px 12px 10px;
  margin:0 2px;
  border-bottom:1px solid var(--rule);
  margin-bottom:6px;
}
/* CTA row at the bottom of each dropdown. */
.nav-dd-foot{
  margin-top:6px;
  padding:10px 12px 4px;
  border-top:1px solid var(--rule);
  display:flex; justify-content:flex-end;
}
.nav-dd-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:-0.005em;
  color:var(--accent);
  text-decoration:none;
  transition:gap .18s ease;
}
.nav-dd-cta:hover{ gap:10px; }
.nav-dropdown-wrap.open .nav-dropdown,
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-dropdown-wrap.open .nav-caret,
.nav-dropdown-wrap:hover .nav-caret{
  transform:rotate(180deg);
}
/* Each item is a 2-column row: cobalt icon tile + name/description.
   Hover bumps the icon tile and shifts the text right slightly so
   the item feels alive. */
.nav-dropdown-item{
  display:grid;
  grid-template-columns: 32px 1fr;
  align-items:start;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--ink);
  transition:background .14s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible{
  background:var(--paper-2);
  outline:none;
}
.nav-dd-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:8px;
  /* Brand dot-grid texture behind the glyph — a fine cobalt dot matrix
     (~5×5 within the tile) layered over the soft-cobalt fill. Subtle on
     purpose: the recognizable glyph stays the focus. */
  background:
    radial-gradient(circle, rgba(31,61,255,.20) 0.6px, transparent 0.9px) center / 6px 6px,
    rgba(31,61,255,.10);
  color:var(--accent);
  transition:background .14s ease, transform .14s ease;
  flex-shrink:0;
}
.nav-dd-icon svg{ width:18px; height:18px; display:block; position:relative; }
.nav-dropdown-item:hover .nav-dd-icon{
  /* Dots flip to white so the matrix carries onto the cobalt fill. */
  background:
    radial-gradient(circle, rgba(255,255,255,.30) 0.6px, transparent 0.9px) center / 6px 6px,
    var(--accent);
  color:#fff;
  transform:translateY(-1px);
}
.nav-dd-text{
  display:flex; flex-direction:column;
  gap:3px;
  min-width:0;
}
.nav-dd-name{
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  letter-spacing:-0.005em;
  color:var(--ink);
}
.nav-dd-desc{
  font-size:12.5px; line-height:1.4;
  color:var(--ink-dim);
}
/* v4 nav layout: tighten gaps so 3 dropdowns + Pricing + login + CTA fit
   on one line at desktop widths; collapse to logo + CTA on mobile so the
   nav doesn't try to wrap. */
.nav-v4 .nav-meta{ gap:6px; }
/* Unify font-size across nav items — Pricing was inheriting the
   13.5px base from .nav-link while dropdown buttons used font:inherit
   and rendered at 16px (the body base). Match both to a single nav
   size so they read as one row. */
.nav-v4 .nav-link,
.nav-v4 .nav-link-button,
.nav-v4 .nav-login{
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-0.005em;
  padding:8px 12px;
  white-space:nowrap;
}
.nav-v4 .nav-login{ margin-left:4px; }
.nav-v4 .nav-cta{ margin-left:8px; white-space:nowrap; }
.nav-v4 .nav-divider{ margin:0 4px; }
@media (max-width: 980px){
  .nav-v4 .nav-meta{ gap:4px; }
  .nav-v4 .nav-link, .nav-v4 .nav-link-button, .nav-v4 .nav-login{ padding:8px 10px; font-size:13.5px; }
}
/* ── Mobile menu (hamburger → slide-down panel) ──────────────────── */
.nav-burger{
  display:none;
  width:42px; height:42px;
  margin:0; padding:0;
  border:0; border-radius:10px;
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.nav-burger:hover{ background:rgba(10,10,11,.04); }
.nav-burger-box{ display:flex; flex-direction:column; gap:4px; width:20px; }
.nav-burger-bar{
  height:2px; width:100%; border-radius:2px;
  background:currentColor;
  transition:transform .24s var(--ease), opacity .18s var(--ease);
}
.nav-v4.is-mobile-open .nav-burger-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-v4.is-mobile-open .nav-burger-bar:nth-child(2){ opacity:0; }
.nav-v4.is-mobile-open .nav-burger-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 820px){
  .nav-burger{ display:inline-flex; }

  /* .nav-meta becomes a full-width slide-down panel below the 64px bar. */
  .nav-v4 .nav-meta{
    position:fixed;
    top:64px; left:0; right:0;
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px var(--gutter) 28px;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    box-shadow:0 24px 48px -28px rgba(10,10,11,.22);
    transform:translateY(-10px);
    opacity:0; visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .nav-v4.is-mobile-open .nav-meta{
    transform:none; opacity:1; visibility:visible;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }

  /* Top-level rows go full-width, left-aligned. Stack the dropdown
     below its button (the wrap is a flex row on desktop). */
  .nav-v4 .nav-meta > .nav-dropdown-wrap{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .nav-v4 .nav-meta .nav-link,
  .nav-v4 .nav-meta .nav-link-button,
  .nav-v4 .nav-meta .nav-login{
    display:flex; align-items:center;
    width:100%;
    justify-content:space-between;
    text-align:left;
    padding:13px 8px;
    font-size:16px;
  }

  /* Dropdowns render inline (accordion), not as floating popovers. */
  .nav-v4 .nav-meta .nav-dropdown{
    position:static;
    opacity:1; visibility:visible; transform:none;
    width:100%; min-width:0;
    box-shadow:none; border:0;
    padding:2px 0 8px 8px;
    pointer-events:auto;
    display:none;
  }
  .nav-v4 .nav-meta .nav-dropdown-wrap.open .nav-dropdown{ display:block; }
  .nav-v4 .nav-meta .nav-dropdown-wrap::before{ display:none; }
  .nav-v4 .nav-meta .nav-dd-foot{ display:none; }
  .nav-v4 .nav-meta .nav-dropdown-item{ padding:9px 8px; }

  .nav-v4 .nav-meta .nav-divider{ display:none; }
  .nav-v4 .nav-meta .nav-login{ margin:6px 0 0; }
  .nav-v4 .nav-meta .nav-cta{
    margin:14px 0 0;
    width:100%;
    justify-content:center;
    padding:14px;
    font-size:15px;
  }

  /* Caret points down; rotates when its accordion is open. */
  .nav-v4 .nav-meta .nav-caret{ transition:transform .2s var(--ease); }
  .nav-v4 .nav-meta .nav-dropdown-wrap.open .nav-caret{ transform:rotate(180deg); }
}

/* ── v4 Hero ─────────────────────────────────────────────────────── */
.v4-hero{
  padding:clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* Cursor-reactive dot field — see JS for behavior. Pinned behind the
   hero content. Transparent on its own; intentionally subtle. */
.v4-hero-bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}
.v4-hero .shell{ position:relative; z-index:1; }
/* Side-by-side layout: text wrapper on the left, mock on the right.
   The text wrapper is its own flex column so its spacing is fully
   independent of the mock's height. (The old grid stretched rows to
   match the taller mock, pushing the text items apart.) */
.v4-hero .shell{
  display:flex;
  align-items:center;
  gap:clamp(36px, 5vw, 80px);
}
.v4-hero-text{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.v4-hero-text .v4-hero-actions{ margin:8px 0 0; }
.v4-hero-text .v4-hero-pills{ margin:4px 0 0; }
.v4-hero-text > *{ margin:0; }
@media (max-width: 980px){
  .v4-hero .shell{ flex-direction:column; align-items:stretch; gap:clamp(28px, 4vw, 48px); }
}
.v4-hero-title{
  font-family:var(--sans);
  font-size:clamp(36px, 4.4vw, 64px);   /* trimmed from 48–96 → 36–64 */
  line-height:1.04;
  letter-spacing:-0.022em;
  font-weight:450;
  color:var(--ink);
  max-width:18ch;
  margin:0;
}
.v4-hero-title .it{
  font-style:normal;
  color:var(--accent);
}
.v4-hero-sub{
  margin:0;
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.55;
  color:var(--ink-dim);
  max-width:54ch;
  letter-spacing:-0.005em;
}
.v4-hero-actions{
  margin:0;
  display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.v4-hero-pills{
  margin:0;
  padding:0; list-style:none;
  display:inline-flex; flex-wrap:wrap; gap:14px 24px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.v4-hero-pills li{
  display:inline-flex; align-items:center; gap:8px;
}
.v4-pill-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(31,61,255,.12);
}
.v4-hero-stage{
  flex:1.05 1 0;
  min-width:0;
  margin:0;
  position:relative;
}
/* Hero brief mock fills the stage column instead of staying centered
   inside a 780px max-width frame. Re-centers below 980px. */
.v4-hero-stage .v4-brief{ max-width:none; margin:0; }
@media (max-width: 980px){
  .v4-hero-stage{ flex:1 1 auto; }
  .v4-hero-stage .v4-brief{ max-width:780px; margin:0 auto; }
}

/* ── Hero flow graphic — sources → animated threads → shared context.
   No card chrome. Atmospheric cobalt glow blends with the hero bg
   (cursor-reactive dot field) for depth. */
.v4-hero-flow{
  position:relative;
  aspect-ratio: 16/10;
  min-height:380px;
  isolation:isolate;
}
/* Same flow graphic reused inside a bento cell mock (e.g. Daily Pulse).
   The cell card supplies the surface; the flow fills it. */
/* Flow graphic sits directly on the gray panel — no card chrome.
   Doubled class to beat the later .v4-cell-mock base rule. */
.v4-cell-mock.v4-cell-mock--flow{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}
.v4-hero-flow--cell{
  width:100%; height:100%;
  aspect-ratio:16/11;
  min-height:300px;
}
.v4-flow-paths{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}
/* Floating source cloud — ~14 logo-only glyphs scattered across the
   left/center at varying scale, opacity, and blur so they read as a
   field of tools at different depths (not a labeled list). Each glyph
   is placed via --x/--y and styled by depth via --s/--o/--b. */
.v4-flow-cloud{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}
.v4-flow-glyph{
  position:absolute;
  left:var(--x); top:var(--y);
  width:46px; height:46px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--paper-edge);
  display:flex; align-items:center; justify-content:center;
  transform:scale(var(--s, 1));
  transform-origin:center;
  opacity:var(--o, 1);
  filter:blur(var(--b, 0px));
  box-shadow:
    0 1px 2px rgba(10,10,11,.04),
    0 10px 28px -18px rgba(10,10,11,.22);
  animation:v4flowFloat 7s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
.v4-flow-glyph svg{ width:24px; height:24px; display:block; }
@keyframes v4flowFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -7px; }
}

/* Convergence: a stack of rotating insight cards. All cards occupy the
   same box (absolute, stacked); JS swaps .is-active to cross-fade +
   slide vertically so insights appear to scroll up through Devplan.
   The atmospheric halo behind sits in the SVG (v4hf-target-glow). */
.v4-flow-target{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:42%;
  min-width:240px;
  height:168px;
  z-index:3;
}
.v4-flow-card{
  position:absolute; inset:0;
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:22px 22px 24px;
  box-shadow:
    0 1px 2px rgba(10,10,11,.04),
    0 22px 48px -24px rgba(31,61,255,.18),
    0 8px 24px -16px rgba(10,10,11,.08);
  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.v4-flow-card.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Outgoing card slides up and out (set briefly by JS) */
.v4-flow-card.is-leaving{
  opacity:0;
  transform:translateY(-14px) scale(.98);
}
.v4-flow-card-eye{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:18px;
}
.v4-flow-card-dot{
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.v4-flow-card-bars{ display:flex; flex-direction:column; gap:10px; }
.v4-flow-card-bars i{
  display:block;
  height:8px; border-radius:4px;
  background:rgba(10,10,11,.06);
}
.v4-flow-card-bars i.is-accent{ background:var(--accent); opacity:.92; }
.v4-flow-card-bars i.is-amber{ background:#E6A437; opacity:.92; }
.v4-flow-card-bars i.is-green{ background:#2C9460; opacity:.92; }

@media (max-width: 980px){
  .v4-hero-flow{ aspect-ratio:auto; min-height:440px; }
}
@media (max-width: 640px){
  .v4-flow-glyph{ width:38px; height:38px; }
  .v4-flow-glyph svg{ width:20px; height:20px; }
  .v4-flow-target{ width:48%; min-width:180px; height:150px; }
}
@media (prefers-reduced-motion: reduce){
  .v4-flow-paths circle[animatemotion]{ display:none; }
  .v4-flow-glyph{ animation:none; }
  .v4-flow-card{ transition:opacity .3s ease; transform:none; }
  .v4-flow-card.is-active{ transform:none; }
  .v4-flow-card.is-leaving{ transform:none; }
}

/* ── v4 Hero · Brief mock (Status / Risks / Decisions) ───────────── */
.v4-brief{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:18px;
  box-shadow:0 30px 60px -32px rgba(10,10,11,.22), 0 2px 12px -2px rgba(10,10,11,.06);
  padding:clamp(20px, 2.4vw, 30px);
  max-width:780px;
  margin:0 auto;
  overflow:hidden;
}
.v4-brief-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:18px;
}
.v4-brief-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500;
}
.v4-live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(31,61,255,.16);
  animation:v4Pulse 1.8s ease-in-out infinite;
}
@keyframes v4Pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(31,61,255,.16); }
  50%{ box-shadow:0 0 0 5px rgba(31,61,255,.04); }
}
.v4-brief-meta{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.v4-brief-section{
  margin:14px 0;
  opacity:0; transform:translateY(8px);
  transition:opacity .42s ease, transform .42s ease;
}
.v4-brief-section.v4-in{
  opacity:1; transform:translateY(0);
}
.v4-brief-label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.v4-brief-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.v4-brief-list li{
  font-size:14px; line-height:1.5;
  color:var(--ink);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px; align-items:start;
}
.v4-brief-tag{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px;
  white-space:nowrap;
}
.tag-ok  { background:rgba(44,148,96,.12); color:#1e6e44; }
.tag-warn{ background:rgba(230,164,55,.14); color:#8d5a06; }
.tag-risk{ background:rgba(214,84,30,.12); color:#a1331f; }
.tag-dec { background:rgba(31,61,255,.10); color:#1f3dff; }

/* ── v4 Brief · digest variant (Daily Pulse hero) ──────────────────
   Four editorial sections, each with a colored left rail + eyebrow and
   a "N sources" chip. */
.v4-digest{
  padding-left:16px;
  border-left:2px solid var(--digest-c, var(--accent));
}
.v4-digest--risk{ --digest-c:#d6541e; }
.v4-digest--ok  { --digest-c:#2c9460; }
.v4-digest--warn{ --digest-c:#caa23c; }
.v4-digest--dec { --digest-c:#1f3dff; }
.v4-digest-eye{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--digest-c, var(--accent));
  margin-bottom:9px;
}
.v4-digest-eye::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--digest-c, var(--accent)); flex-shrink:0;
}
.v4-digest-body{
  margin:0;
  font-size:13.5px; line-height:1.55;
  color:var(--ink-dim);
}
.v4-digest-body strong{ color:var(--ink); font-weight:600; }
.v4-digest-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:9px;
}
.v4-digest-list li{
  position:relative; padding-left:15px;
  font-size:13.5px; line-height:1.5; color:var(--ink-dim);
}
.v4-digest-list li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:4px; height:4px; border-radius:50%;
  background:var(--ink-faint);
}
/* Sources chip — overlapping source marks + count */
.v4-src-chip{
  display:inline-flex; align-items:center; gap:6px;
  vertical-align:middle; white-space:nowrap;
  margin-left:5px;
  padding:2px 9px 2px 4px;
  border:1px solid var(--paper-edge); border-radius:999px;
  background:var(--paper);
  font-family:var(--sans); font-size:11px; font-weight:500;
  color:var(--ink-faint);
  letter-spacing:0;
}
.v4-src-ics{ display:inline-flex; }
.v4-src-ic{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid var(--paper-edge);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; margin-left:-5px;
}
.v4-src-ics .v4-src-ic:first-child{ margin-left:0; }
.v4-src-ic svg{ width:11px; height:11px; display:block; }

/* ── v4 Trust strip ─────────────────────────────────────────────── */
.v4-trust{
  padding:clamp(32px,4vw,52px) 0;
}
.v4-trust-inner{
  display:flex; flex-direction:row;
  align-items:center;
  gap:clamp(16px, 2vw, 32px);
}
.v4-trust-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap; flex-shrink:0;
}
.v4-trust-logos{
  list-style:none; padding:0; margin:0;
  flex:1;
  display:flex; flex-wrap:nowrap;
  gap:clamp(14px, 2.2vw, 32px);
  align-items:center; justify-content:flex-end;
}
.v4-trust-logos li{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:22px;
}
/* Greyscale lockup — each logo grayscale + lower opacity by default,
   colors back on hover. */
.v4-trust-logos img{
  max-height:100%;
  width:auto;
  max-width:110px;
  object-fit:contain;
  filter:grayscale(100%) brightness(0);
  opacity:.55;
  transition:opacity .2s ease, filter .2s ease;
}
.v4-trust-logos li:hover img{
  filter:grayscale(0%);
  opacity:1;
}
@media (max-width: 880px){
  .v4-trust-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
  .v4-trust-logos{ flex-wrap:wrap; justify-content:flex-start; gap:14px 20px; }
  .v4-trust-logos li{ flex:none; height:20px; }
}

/* ── v4 Problem ────────────────────────────────────────────────── */
/* Full-bleed light gray bg on the Problem section. */
.v4-problem{ background:var(--paper-2); }
.v4-problem-title{ margin:18px 0 0; max-width:24ch; }
/* Keep "Not alignment." together — it drops to the next line as a unit
   rather than splitting across the wrap. */
.v4-problem-title .it{ white-space:nowrap; }
.v4-problem-lede{ max-width:64ch; margin-top:22px; }
.v4-quote-row{
  margin-top:clamp(40px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
/* Editorial line-grid quote cards: no card chrome, just a thin top rule.
   Heavier cobalt rule on hover-row would be a nice touch but for now the
   uniform 1px rule reads as a clean three-up callout. */
.v4-quote-card{
  margin:0;
  background:transparent;
  border:0;
  border-top:1px solid var(--rule-strong);
  border-radius:0;
  padding:22px 0 0;
  position:relative;
}
.v4-quote-card blockquote{
  margin:0;
  font-family:var(--sans);
  font-size:17px; line-height:1.45;
  color:var(--ink);
  letter-spacing:-0.005em;
  font-weight:400;
}
.v4-quote-card blockquote::before{ content:"\201C"; font-size:36px; color:var(--accent); line-height:0; margin-right:2px; position:relative; top:14px; }
.v4-quote-card figcaption{
  margin-top:18px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:10px;
}
.v4-quote-card figcaption strong{ color:var(--ink); font-weight:500; }
.v4-quote-card figcaption .sep{ color:var(--ink-faint); opacity:.5; }
@media (max-width: 880px){ .v4-quote-row{ grid-template-columns:1fr; } }

/* ── v4 Before vs After ─────────────────────────────────────────── */
.v4-baf-title{ margin:0 0 8px; max-width:none; }
.v4-baf-citation{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 clamp(28px,3.5vw,44px);
}
.v4-baf-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(20px, 2.4vw, 36px);
}
@media (max-width: 880px){ .v4-baf-grid{ grid-template-columns:1fr; } }
.v4-baf-col{ display:flex; flex-direction:column; gap:20px; }
.v4-baf-col--before{
  padding-top:clamp(24px, 2.8vw, 36px);
}
/* "With Devplan" side gets a paper card so it visually pops over the
   bare "Without Devplan" side. */
.v4-baf-col--after{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:18px;
  padding:clamp(24px, 2.8vw, 36px);
  box-shadow:
    0 30px 60px -32px rgba(31,61,255,.22),
    0 2px 12px -4px rgba(10,10,11,.06);
  position:relative;
}
.v4-baf-col-head{ display:flex; align-items:center; gap:10px; }
.v4-baf-eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:#a1331f;
  font-weight:600;
}
.v4-baf-eyebrow--after{ color:#1e6e44; }
.v4-baf-list{ list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px; }
.v4-baf-list li{
  font-size:15px; line-height:1.5;
  color:var(--ink);
  display:grid; grid-template-columns:auto 1fr;
  gap:12px; align-items:start;
}
.v4-bullet{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  font-size:11px; font-weight:600;
  flex-shrink:0;
}
.v4-bullet--no{ background:rgba(214,84,30,.14); color:#a1331f; }
.v4-bullet--yes{ background:rgba(44,148,96,.16); color:#1e6e44; }
.v4-baf-mock{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:0;
  overflow:hidden;
}

/* Slack mock */
.v4-baf-mock--slack{ background:#fafbfc; }
.v4-slack-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
}
.v4-slack-msg{
  display:grid; grid-template-columns: 32px 1fr;
  gap:10px; padding:10px 16px;
  align-items:start;
}
.v4-slack-msg--unread{ background:rgba(31,61,255,.04); border-left:3px solid var(--accent); padding-left:13px; }
.v4-slack-avatar{
  width:32px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:var(--ink);
}
.v4-slack-name{
  font-size:13px; font-weight:500; color:var(--ink);
  margin-bottom:2px;
}
.v4-slack-time{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-faint); font-weight:400;
  margin-left:8px;
}
.v4-slack-body p{
  margin:0;
  font-size:13.5px; line-height:1.45;
  color:var(--ink);
}
.v4-slack-typing{
  display:flex; align-items:center; gap:6px;
  padding:12px 16px 16px;
  font-family:var(--sans); font-size:12px; font-style:italic;
  color:var(--ink-faint);
}
.v4-slack-typing span{
  width:5px; height:5px; border-radius:50%;
  background:var(--ink-faint);
  animation:v4Bounce 1.1s ease-in-out infinite;
}
.v4-slack-typing span:nth-child(2){ animation-delay:.15s; }
.v4-slack-typing span:nth-child(3){ animation-delay:.30s; }
@keyframes v4Bounce{ 0%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-3px); opacity:1; } }

/* Pulse mock (shared structure for hero + after) */
.v4-baf-mock--pulse{ background:var(--paper); }
.v4-pulse-head{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.v4-pulse-routed{ margin-left:auto; color:var(--ink-faint); }
.v4-pulse-rows{ list-style:none; padding:8px 0; margin:0; }
.v4-pulse-rows li{
  display:grid; grid-template-columns: auto 1fr;
  gap:12px; align-items:start;
  padding:10px 16px;
  font-size:13.5px; line-height:1.5; color:var(--ink);
}
.v4-pulse-tag{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px; white-space:nowrap;
  min-width:88px; justify-content:center;
}
.v4-pulse-tag.tag-ok{ background:rgba(44,148,96,.12); color:#1e6e44; }
.v4-pulse-tag.tag-warn{ background:rgba(230,164,55,.14); color:#8d5a06; }
.v4-pulse-tag.tag-risk{ background:rgba(214,84,30,.12); color:#a1331f; }
.v4-pulse-foot{
  padding:10px 16px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── v4 Stacked features ───────────────────────────────────────────
   Shared layout for home (.v4-features / .v4-feature) AND for all
   product-page bentos (.v4-bento / .v4-cell). Each row: text-left
   (1fr), mock-right (2fr). Dot-grid paper fills the right column as
   one continuous panel down the entire features block. */
.v4-features-section{ padding-bottom:0; }
.v4-bento-title{ margin:0; max-width:24ch; }
/* Features title: no width cap so it sits on one line when it fits and
   wraps gracefully when the viewport is too narrow (never overflows). */
.v4-features-title{ margin:0; max-width:none; }

.v4-features,
.v4-bento{
  --v4-feature-panel-start: calc(44% + clamp(6px, 0.9vw, 16px));
  position:relative;
  margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--rule);
  /* Left 42% stays white (paper) for the text column; right 58% is a
     very-light gray. The fine dot grid is painted by ::before, clipped
     to the gray region only (see below). */
  background:
    linear-gradient(
      to right,
      var(--paper) 0%,
      var(--paper) var(--v4-feature-panel-start),
      #F4F4F6 var(--v4-feature-panel-start),
      #F4F4F6 100%
    );
  /* Reset legacy bento styles. */
  display:block;
  grid-template-columns:none;
  gap:0;
  border-radius:0;
  overflow:visible;
  border-left:0;
  border-right:0;
  border-bottom:0;
}
/* Sub-page bentos sit inside .shell; break them out to full-bleed so the
   gray dot panel runs edge-to-edge like the home features. Content stays
   aligned via .v4-cell's max-width:var(--maxw). (.v4-features is already
   full-width on the home — it's a direct section child.) */
.v4-bento{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
/* Fine dot grid, confined to the gray right region (42% → 100%).
   Small dots, dense tile. Sits behind the feature rows (z-index 0;
   rows are z-index 1). */
.v4-features::before,
.v4-bento::before{
  content:"";
  position:absolute;
  top:0; bottom:0; right:0; left:var(--v4-feature-panel-start);
  background:radial-gradient(circle, rgba(10,10,11,.085) 0.9px, transparent 1.25px) 0 0 / 13px 13px;
  pointer-events:none;
  z-index:0;
}

.v4-feature,
.v4-cell{
  display:grid;
  /* 1fr / 1.3fr ≈ 43% / 57% — more breathing room on the text side
     than the prior 1/3 - 2/3. Matches the bg split below. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap:clamp(40px, 5vw, 88px);
  align-items:center;
  padding:clamp(56px,7vw,112px) clamp(24px, 4vw, 56px);
  /* Match the shell's --maxw so feature rows align with the section
     header (which lives in .shell) on screens wider than the cap. */
  max-width:var(--maxw);
  margin:0 auto;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  overflow:visible;
  position:relative;
  z-index:1;                 /* above the ::before dot grid */
  background:transparent;
  grid-auto-rows:auto;
}
.v4-feature:last-child,
.v4-cell:last-child{ border-bottom:0; }

@media (max-width:880px){
  .v4-feature,
  .v4-cell{
    grid-template-columns:1fr;
    gap:clamp(28px, 4vw, 40px);
    padding:clamp(48px,6vw,72px) clamp(20px, 4vw, 36px);
  }
  .v4-features,
  .v4-bento{
    /* Columns stack — no gray right column, so drop the dot panel
       entirely (plain paper) rather than dotting the whole thing. */
    background:var(--paper);
  }
  .v4-features::before,
  .v4-bento::before{ display:none; }
}

.v4-feature-text,
.v4-cell-text{
  display:flex; flex-direction:column; gap:14px;
  max-width:42ch;
  /* Extra breathing room on the right so copy doesn't crowd the visual. */
  padding-right:clamp(24px, 4vw, 72px);
}
@media (max-width:880px){
  .v4-feature-text,
  .v4-cell-text{ padding-right:0; }
}

.v4-feature-label,
.v4-cell-label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  /* Demoted from cobalt — when 4+ labels stack across the page the
     repeated accent reads as visual noise. Mono uppercase already
     distinguishes them as eyebrows. */
  color:var(--ink-faint);
  margin:0;
}
.v4-feature-h,
.v4-cell-h3{
  font-family:var(--sans);
  font-size:clamp(28px, 2.6vw, 36px);
  font-weight:450;
  line-height:1.15;
  letter-spacing:-0.018em;
  color:var(--ink);
  margin:0;
}
.v4-feature-body,
.v4-cell-body{
  margin:0;
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.55;
  color:var(--ink-dim);
}
.v4-feature-link,
.v4-cell-link{
  margin-top:8px;
  font-family:var(--sans); font-size:14.5px; font-weight:500;
  letter-spacing:-0.005em;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:gap .18s ease, color .18s ease;
  border-bottom:0;
  padding-bottom:0;
}
.v4-feature-link:hover,
.v4-cell-link:hover{ gap:12px; color:var(--accent); }

.v4-feature-visual{
  position:relative;
  min-width:0;
  display:flex; align-items:center; justify-content:flex-end;
  background:transparent;
  padding:0;
  min-height:0;
}
.v4-feature-visual > .v4-cell-mock,
.v4-cell > .v4-cell-mock{
  width:100%;
  max-width:560px;
  margin:0 0 0 auto;
  justify-self:end;
}

/* Legacy cell modifiers are now no-ops in the stacked layout. */
/* --xl is a no-op in the stacked layout (legacy class). */
.v4-cell--xl{ grid-column:auto; align-items:center; }
.v4-cell--light{ background:transparent; }
.v4-cell--dark{ background:transparent; color:var(--ink); }
/* Reset dark-context text overrides — alt cells are now light too. */
.v4-cell--dark .v4-cell-label{ color:var(--ink-dim); }
.v4-cell--dark .v4-cell-body{ color:var(--ink-dim); }
.v4-cell--dark .v4-cell-link{ color:var(--ink); }
.v4-cell-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500;
  display:block; margin-bottom:14px;
}
.v4-cell-h3{
  font-family:var(--sans);
  font-size:clamp(22px, 2vw, 26px);
  font-weight:450;
  line-height:1.2;
  letter-spacing:-0.018em;
  margin:0 0 14px;
}
.v4-cell-body{
  font-size:16px; line-height:1.55;
  color:var(--ink-dim);
  margin:0 0 18px;
}
.v4-cell-link{
  font-family:var(--sans); font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:gap .18s ease;
}
.v4-cell-link:hover{ gap:12px; }
/* 2×2 holds at all desktop / tablet widths. Stack 1-up only on phones. */
@media (max-width: 640px){
  .v4-bento{ grid-template-columns: 1fr; }
}

/* Subtle scroll-reveal on each cell's mock — fades up when the cell
   enters viewport. JS toggles .v4-in on the mock via IntersectionObserver.
   Once the mock is visible, inner UI parts stagger in on top. */
.v4-cell-mock{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.v4-cell-mock.v4-in{ opacity:1; transform:translateY(0); }

/* Inner UI element stagger — applies to common list-row and header
   selectors across all mock variants. Each child fades up after the
   mock itself appears. Up to 6 staggered children, then a flat tail. */
@keyframes v4-inner-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
.v4-cell-mock.v4-in .v4-pulse-head,
.v4-cell-mock.v4-in .v4-pulse-rows > li,
.v4-cell-mock.v4-in .v4-status-head,
.v4-cell-mock.v4-in .v4-status-ac > li,
.v4-cell-mock.v4-in .v4-status-foot,
.v4-cell-mock.v4-in .v4-history-day,
.v4-cell-mock.v4-in .v4-history-list > li,
.v4-cell-mock.v4-in .v4-ask-q,
.v4-cell-mock.v4-in .v4-ask-a,
.v4-cell-mock.v4-in .v4-mc-row,
.v4-cell-mock.v4-in .v4-ing-row,
.v4-cell-mock.v4-in .v4-rt-source,
.v4-cell-mock.v4-in .v4-rt-out,
.v4-cell-mock.v4-in .v4-mock-channels .v4-ch-row,
.v4-cell-mock.v4-in .v4-srch-bar,
.v4-cell-mock.v4-in .v4-srch-results > li,
.v4-cell-mock.v4-in .v4-bars-group,
.v4-cell-mock.v4-in .v4-bars-row,
.v4-cell-mock.v4-in .v4-daily-row,
.v4-cell-mock.v4-in .v4-alert,
.v4-cell-mock.v4-in .v4-dash-head,
.v4-cell-mock.v4-in .v4-dash-row,
.v4-cell-mock.v4-in .v4-th-list > li,
.v4-cell-mock.v4-in .v4-fa-head,
.v4-cell-mock.v4-in .v4-fa-stats > .v4-fa-stat{
  animation:v4-inner-in .42s ease-out both;
}
/* Stagger via nth-of-type so each row appears after the previous.
   Base delay 0.20s lets the mock fade up first; +0.08s per row. */
.v4-cell-mock.v4-in *:nth-child(1){ animation-delay:.20s; }
.v4-cell-mock.v4-in *:nth-child(2){ animation-delay:.28s; }
.v4-cell-mock.v4-in *:nth-child(3){ animation-delay:.36s; }
.v4-cell-mock.v4-in *:nth-child(4){ animation-delay:.44s; }
.v4-cell-mock.v4-in *:nth-child(5){ animation-delay:.52s; }
.v4-cell-mock.v4-in *:nth-child(6){ animation-delay:.60s; }
.v4-cell-mock.v4-in *:nth-child(n+7){ animation-delay:.68s; }

@media (prefers-reduced-motion: reduce){
  .v4-cell-mock{ opacity:1; transform:none; transition:none; }
  .v4-cell-mock.v4-in *{ animation:none !important; }
}

/* (override below) Mock surfaces inside cells */
.v4-cell-mock{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 40px -28px rgba(10,10,11,.22);
}
/* Dark mock override removed — .v4-cell--dark is now the grid-paper
   alt (light) and mocks render with their light defaults. */

/* Status mock — defaults target a LIGHT bento cell. Dark overrides
   live below for .v4-cell--dark contexts (home bento Cell 2). */
.v4-mock-status{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.v4-status-head{ display:flex; justify-content:space-between; align-items:baseline; }
.v4-status-project{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); }
.v4-status-conf{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent); }
.v4-status-ac{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--ink); }
.v4-status-ac li{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.v4-status-ac .v4-ac-sha{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); }
.v4-ac{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  font-size:10px; font-weight:600;
}
.v4-ac--done{ background:rgba(44,148,96,.16); color:#1e6e44; }
.v4-ac--prog{ background:rgba(10,10,11,.06); color:var(--ink-dim); font-size:14px; line-height:1; }
.v4-ac--risk{ background:rgba(214,84,30,.14); color:#a1331f; }
.v4-status-foot{ padding-top:10px; border-top:1px solid var(--rule); }
.v4-status-risk{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:#a1331f; }

/* ── Emphasized 4-row AC list (home) — each requirement is its own
   bordered row with a state icon, name, and a status chip. Markup
   carries the final state; .v4-st-anim (JS) replays from "queued". ── */
.v4-status-ac--lg{ gap:8px; }
.v4-status-ac--lg li{
  grid-template-columns:auto 1fr auto;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:#fff;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-0.005em;
  transition:border-color .3s ease, background .3s ease;
}
.v4-status-ac--lg .v4-ac-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-size:12px; font-weight:600; line-height:1;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.v4-status-ac--lg .v4-ac-name{ min-width:0; }
.v4-status-ac--lg .v4-ac-chip{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  white-space:nowrap;
  transition:background .3s ease, color .3s ease;
}
/* state looks (also the no-JS / reduced-motion final state) */
.v4-status-ac--lg li.is-done .v4-ac-ic{ background:rgba(44,148,96,.16); color:#1e6e44; }
.v4-status-ac--lg li.is-done .v4-ac-ic::before{ content:"✓"; }
.v4-status-ac--lg li.is-done .v4-ac-chip{ background:rgba(44,148,96,.12); color:#1e6e44; }
.v4-status-ac--lg li.is-done .v4-ac-chip::before{ content:attr(data-chip); }
.v4-status-ac--lg li.is-review{ border-color:rgba(31,61,255,.35); }
.v4-status-ac--lg li.is-review .v4-ac-ic{ background:rgba(31,61,255,.12); color:var(--accent); }
.v4-status-ac--lg li.is-review .v4-ac-ic::before{ content:"●"; font-size:9px; }
.v4-status-ac--lg li.is-review .v4-ac-chip{ background:rgba(31,61,255,.10); color:var(--accent); }
.v4-status-ac--lg li.is-review .v4-ac-chip::before{ content:"In review"; }
.v4-status-ac--lg li.is-risk .v4-ac-ic{ background:rgba(214,84,30,.14); color:#a1331f; }
.v4-status-ac--lg li.is-risk .v4-ac-ic::before{ content:"!"; }
.v4-status-ac--lg li.is-risk .v4-ac-chip{ background:rgba(214,84,30,.10); color:#a1331f; }
.v4-status-ac--lg li.is-risk .v4-ac-chip::before{ content:"Descoped"; }

/* animation pre-state: rows look queued until .is-set replays them */
.v4-st-anim .v4-status-ac--lg li:not(.is-set){ border-color:var(--rule); }
.v4-st-anim .v4-status-ac--lg li:not(.is-set) .v4-ac-ic{
  background:rgba(10,10,11,.05); color:var(--ink-faint);
}
.v4-st-anim .v4-status-ac--lg li:not(.is-set) .v4-ac-ic::before{ content:"●"; font-size:9px; }
.v4-st-anim .v4-status-ac--lg li:not(.is-set) .v4-ac-chip{
  background:rgba(10,10,11,.05); color:var(--ink-faint);
}
.v4-st-anim .v4-status-ac--lg li:not(.is-set) .v4-ac-chip::before{ content:"Queued"; }
.v4-st-anim .v4-status-ac--lg li.is-set .v4-ac-ic{ animation:v4AcPop .42s cubic-bezier(.2,1.6,.4,1); }
@keyframes v4AcPop{
  0%{ transform:scale(.55); }
  60%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
.v4-st-anim [data-st-foot]{
  opacity:0; transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.v4-st-anim [data-st-foot].is-shown{ opacity:1; transform:none; }

/* Dark-context overrides (used on home bento Cell 2). */
/* Dark-context status overrides removed — .v4-cell--dark is the
   light grid-paper alt now; status mock defaults work on it. */

/* Slack-style mock — Ask Devplan inside a Slack channel thread.
   Channel header at top, then a user message + a Devplan bot reply
   with citation chips. Inherits the .v4-cell-mock fade-up and the
   inner-stagger animations from the global rules. */
.v4-mock-slack{
  padding:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:#fff;
  min-height:420px;
}
.v4-slk-head{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--rule);
  background:#FAFAFB;
}
.v4-slk-channel-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  font-family:var(--sans); font-weight:600;
  font-size:14px; line-height:1;
  color:var(--ink-faint);
}
.v4-slk-channel-name{
  font-family:var(--sans); font-size:14px; font-weight:500;
  color:var(--ink);
  letter-spacing:-0.005em;
}
.v4-slk-channel-meta{
  margin-left:auto;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em;
  color:var(--ink-faint);
}
.v4-slk-thread{
  padding:14px 16px 16px;
  display:flex; flex-direction:column;
  gap:14px;
}
.v4-slk-msg{
  display:grid; grid-template-columns: 36px 1fr;
  gap:10px;
  align-items:flex-start;
}
.v4-slk-av{
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.04em;
  color:var(--ink);
  overflow:hidden;
}
.v4-slk-av--bot{
  background:var(--accent);
  color:#fff;
}
.v4-slk-av--bot svg{ width:20px; height:20px; }
.v4-slk-body{ min-width:0; }
.v4-slk-meta{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:3px;
}
.v4-slk-name{
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:-0.005em;
  color:var(--ink);
}
.v4-slk-app{
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.10em;
  padding:1px 5px; border-radius:3px;
  background:rgba(10,10,11,.06);
  color:var(--ink-dim);
}
.v4-slk-time{
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:.04em;
}
.v4-slk-text{
  margin:0;
  font-size:14px; line-height:1.5;
  color:var(--ink);
}
.v4-slk-text strong{ font-weight:600; color:var(--ink); }
.v4-slk-mention{
  display:inline-block;
  background:rgba(31,61,255,.10);
  color:var(--accent);
  padding:1px 6px; border-radius:4px;
  font-weight:500;
  margin-right:2px;
}
.v4-slk-cites{
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:4px;
}
.v4-slk-cite{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.08em;
  padding:2px 7px; border-radius:4px;
  background:rgba(31,61,255,.08);
  color:var(--accent);
}
/* ── Slack-ier chrome: star, date divider, reactions, composer ── */
.v4-slk-star{
  font-size:13px; line-height:1;
  color:var(--ink-faint);
}
.v4-slk-divider{
  display:flex; align-items:center; gap:10px;
  margin:-2px 0 0;
}
.v4-slk-divider::before,
.v4-slk-divider::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
.v4-slk-divider span{
  font-family:var(--sans); font-size:11px; font-weight:600;
  color:var(--ink-dim);
  padding:2px 10px;
  border:1px solid var(--rule); border-radius:999px;
}
.v4-slk-typing-bubble{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 12px;
  background:rgba(10,10,11,.05);
  border-radius:10px;
  margin-top:2px;
}
.v4-slk-typing-bubble i{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-faint);
  animation:v4SlkDot 1.1s ease-in-out infinite;
}
.v4-slk-typing-bubble i:nth-child(2){ animation-delay:.18s; }
.v4-slk-typing-bubble i:nth-child(3){ animation-delay:.36s; }
@keyframes v4SlkDot{
  0%, 60%, 100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-4px); opacity:1; }
}
.v4-slk-reactions{
  margin-top:8px;
  display:flex; gap:4px;
}
.v4-slk-react{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; line-height:1;
  padding:3px 8px;
  border:1px solid rgba(31,61,255,.30);
  border-radius:999px;
  background:rgba(31,61,255,.06);
}
.v4-slk-react em{
  font-style:normal;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  color:var(--accent);
}
.v4-slk-composer{
  display:flex; align-items:center; gap:10px;
  margin:auto 14px 14px;
  padding:9px 12px;
  border:1px solid rgba(10,10,11,.12);
  border-radius:9px;
  color:var(--ink-faint);
}
.v4-slk-comp-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--rule);
  font-size:13px; line-height:1;
}
.v4-slk-comp-text{
  font-family:var(--sans); font-size:13px;
  color:var(--ink-faint);
}
.v4-slk-comp-send{
  margin-left:auto;
  width:14px; height:14px;
  color:rgba(31,61,255,.45);
}

/* ── Conversation animation states. JS adds .v4-slk-anim at init (skipped
   for prefers-reduced-motion / no-JS, which get the full static thread);
   steps then appear as .is-shown lands on each. ── */
.v4-slk-anim [data-slk-step]{
  opacity:0;
  transform:translateY(5px);
  transition:opacity .3s ease, transform .3s ease;
}
.v4-slk-anim [data-slk-step].is-shown{
  opacity:1;
  transform:none;
}
.v4-slk-anim [data-slk-step="typing"]{ display:none; }
.v4-slk-anim [data-slk-step="typing"].is-shown{ display:grid; }
/* caret while the user message types */
.v4-slk-anim [data-slk-type].is-typing::after{
  content:"";
  display:inline-block;
  width:2px; height:1em;
  background:var(--ink);
  margin-left:1px;
  vertical-align:text-bottom;
  animation:v4SlkCaret .8s steps(1) infinite;
}
@keyframes v4SlkCaret{ 50%{ opacity:0; } }

/* Ask Devplan mock (legacy static Q&A — kept for bento cell variants) */
.v4-mock-ask{ padding:18px; display:flex; flex-direction:column; gap:14px; }
.v4-ask-q{
  align-self:flex-end;
  background:var(--paper-2);
  padding:10px 14px; border-radius:12px 4px 12px 12px;
  font-size:13.5px;
  max-width:80%;
}
.v4-ask-a{
  background:rgba(31,61,255,.05);
  border:1px solid rgba(31,61,255,.14);
  padding:14px; border-radius:4px 12px 12px 12px;
  max-width:90%;
}
.v4-ask-a p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink); }
.v4-ask-cites{ margin-top:10px; display:flex; flex-wrap:wrap; gap:4px; }
.v4-ask-cite{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.10em;
  padding:2px 7px; border-radius:4px;
  background:rgba(31,61,255,.10); color:var(--accent);
}

/* ── v4 Chat window — Ask Devplan hero ────────────────────────────
   Full chat window UI (topbar / scrollable stream / input row), wired
   to the [data-agent-chat] script so messages stream in with caret +
   thinking-dots + cited-source chips, and the input accepts visitor
   questions with keyword-routed canned replies. */
.v4-chat{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:16px;
  box-shadow:
    0 30px 60px -32px rgba(10,10,11,.22),
    0 2px 12px -4px rgba(10,10,11,.06);
  display:flex; flex-direction:column;
  overflow:hidden;
  min-height:440px;
  max-height:560px;
}
.v4-chat-topbar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--rule-2);
  background:var(--paper-2);
}
.v4-chat-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(31,61,255,.16);
  animation:v4-chat-pulse 1.8s ease-in-out infinite;
}
@keyframes v4-chat-pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(31,61,255,.16); }
  50%{    box-shadow:0 0 0 5px rgba(31,61,255,.04); }
}
.v4-chat-title{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
}
.v4-chat-status{
  margin-left:auto;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.v4-chat-stream{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:18px 16px;
  display:flex; flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
  scrollbar-color:var(--paper-edge) transparent;
}
.v4-chat-stream::-webkit-scrollbar{ width:4px; }
.v4-chat-stream::-webkit-scrollbar-thumb{ background:var(--paper-edge); border-radius:2px; }
/* Bubble shapes — class names match what the agent-chat JS appends. */
.v4-chat .ask-bubble{
  font-family:var(--sans);
  font-size:14px; line-height:1.45;
  letter-spacing:-0.005em;
  padding:10px 14px;
  border-radius:14px;
  max-width:86%;
  white-space:pre-wrap;
  animation:v4-chat-bubble-in .26s ease-out both;
}
@keyframes v4-chat-bubble-in{
  from{ opacity:0; transform:translateY(4px); }
  to{   opacity:1; transform:translateY(0); }
}
.v4-chat .ask-bubble.q{
  align-self:flex-end;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  color:var(--ink);
  border-radius:14px 14px 4px 14px;
}
.v4-chat .ask-bubble.a{
  align-self:flex-start;
  background:var(--accent);
  color:#fff;
  border-radius:14px 14px 14px 4px;
  font-size:13.5px;
}
.v4-chat .ask-bubble.a strong{ color:#fff; font-weight:600; }
.v4-chat .ask-caret{
  display:inline-block;
  width:1.5px; height:1em;
  background:currentColor;
  margin-left:2px;
  vertical-align:-2px;
  animation:v4-chat-caret 1s steps(2) infinite;
}
@keyframes v4-chat-caret{ 50%{ opacity:0; } }
.v4-chat .ask-thinking{
  display:inline-flex; gap:4px; padding:4px 0;
}
.v4-chat .ask-thinking i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.85);
  animation:v4-chat-thinking 1.1s ease-in-out infinite;
}
.v4-chat .ask-thinking i:nth-child(2){ animation-delay:.16s; }
.v4-chat .ask-thinking i:nth-child(3){ animation-delay:.32s; }
@keyframes v4-chat-thinking{
  0%,80%,100%{ opacity:.35; transform:scale(.8); }
  40%{        opacity:1;   transform:scale(1); }
}
.v4-chat .ask-src{
  display:flex; gap:4px; margin-top:9px; flex-wrap:wrap;
  opacity:0;
  animation:v4-chat-src-in .35s ease-out .15s both;
}
@keyframes v4-chat-src-in{ to{ opacity:1; } }
.v4-chat .ask-src span{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.06em;
  background:rgba(255,255,255,.20);
  color:rgba(255,255,255,.95);
  padding:2px 6px; border-radius:3px;
}
.v4-chat-input-row{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px 10px 14px;
  border-top:1px solid var(--rule-2);
  background:var(--paper);
}
.v4-chat-input{
  flex:1; min-width:0;
  border:0; outline:none;
  background:transparent;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:-0.005em;
  color:var(--ink);
  padding:8px 0;
}
.v4-chat-input::placeholder{ color:var(--ink-faint); }
.v4-chat-send{
  width:36px; height:36px;
  border:0; border-radius:8px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background .15s ease, transform .15s ease;
}
.v4-chat-send:hover{ transform:translateY(-1px); }
.v4-chat-send .arrow{ display:inline-block; line-height:1; }

/* Change History mock — light variant (was authored for dark cells;
   now lives on the grid-paper alt). */
.v4-mock-history{ padding:18px; display:flex; flex-direction:column; gap:10px; }
.v4-history-day{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--ink-faint);
}
.v4-history-list{ list-style:none; padding:0 0 0 10px; margin:0 0 6px;
  border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px; }
.v4-history-list li{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  align-items:start; position:relative;
}
.v4-history-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  margin-top:4px;
  margin-left:-15px;
  box-shadow:0 0 0 3px var(--paper);
}
.v4-history-title{ font-size:13px; color:var(--ink); }
.v4-history-src{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--ink-faint); margin-top:2px; }

/* ── v4 Weaver section ───────────────────────────────────────────── */
/* Text block sits on black so it flows seamlessly into the canvas
   vortex below — no light-to-dark seam. */
.v4-weaver-section{
  background:#0A0A0B;
  color:#fff;
  padding-top:clamp(28px, 3.5vw, 52px);  /* tighter top */
  padding-bottom:0;
  margin-bottom:0;
}
.v4-weaver-section .section-num,
.v4-weaver-section .section-num .n{
  color:rgba(255,255,255,.55);
}
.v4-weaver-section .section-num span:last-child{ color:rgba(255,255,255,.78); }
.v4-weaver-title{
  margin:18px 0 0; max-width:28ch;
  color:#fff;
}
.v4-weaver-title .it{ color:#fff; }
.v4-weaver-lede{
  max-width:64ch;
  margin-top:22px;
  margin-bottom:0;   /* vortex stage starts right below */
  color:rgba(255,255,255,.74);
}
.v4-weaver-lede strong{ color:#fff; font-weight:500; }
.v4-weaver-stage{ margin-top:0; }

/* ── v4 Comparison table ─────────────────────────────────────────── */
.v4-compare-title{ margin:18px 0 0; max-width:28ch; }
.v4-compare-lede{ max-width:62ch; margin-top:22px; margin-bottom:clamp(40px,5vw,56px); }
.v4-compare-table{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:16px;
  overflow:hidden;
}
.v4-cmp-row{
  display:grid;
  grid-template-columns: 220px 1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.v4-cmp-row:last-child{ border-bottom:0; }
.v4-cmp-row > div{ padding:20px 22px; font-size:14px; line-height:1.5; color:var(--ink); }
.v4-cmp-head > div{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
  background:var(--paper-2);
}
.v4-cmp-head > .v4-cmp-dp{ color:var(--accent); background:rgba(31,61,255,.06); }
.v4-cmp-cap{ font-family:var(--sans); font-weight:500; color:var(--ink); }
.v4-cmp-mark{
  display:inline-block;
  width:10px; height:10px; border-radius:50%;
  margin-right:10px;
  vertical-align:middle;
}
.v4-cmp-mark--no{ background:#d6541e; box-shadow:0 0 0 3px rgba(214,84,30,.14); }
.v4-cmp-mark--yes{ background:#2c9460; box-shadow:0 0 0 3px rgba(44,148,96,.14); }
.v4-cmp-row > .v4-cmp-dp:not(:first-child):not(.v4-cmp-head .v4-cmp-dp){ background:rgba(31,61,255,.03); }
@media (max-width: 720px){
  .v4-cmp-row{ grid-template-columns:1fr; }
  .v4-cmp-head{ display:none; }
  .v4-cmp-cap{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:0; }
}

/* ── v4 Social proof ─────────────────────────────────────────────── */
.v4-proof-section{ padding-top:0; }
.v4-proof-title{ margin:18px 0 0; max-width:24ch; }
.v4-proof-grid{
  margin-top:clamp(40px,5vw,56px);
  display:grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap:24px;
}
@media (max-width: 880px){ .v4-proof-grid{ grid-template-columns:1fr; } }
.v4-proof-stat{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:28px 24px;
}
.v4-proof-n{
  font-family:var(--sans);
  font-size:clamp(48px, 6vw, 72px);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.v4-proof-n .small{ font-size:.36em; font-weight:400; color:var(--ink-dim); margin-left:6px; vertical-align:baseline; }
.v4-proof-body{ margin-top:16px; font-size:14.5px; line-height:1.55; color:var(--ink-dim); }
.v4-proof-quote{
  margin:0;
  background:#0A0A0B;
  color:#fff;
  border-radius:14px;
  padding:28px 26px;
  display:flex; flex-direction:column;
  justify-content:space-between;
}
.v4-proof-quote blockquote{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.35;
  letter-spacing:-0.012em;
  color:#fff;
}
.v4-proof-quote blockquote::before{ content:"\201C"; color:var(--accent-on-dark); font-size:38px; line-height:0; margin-right:2px; position:relative; top:14px; }
.v4-proof-quote figcaption{
  margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:10px;
}
.v4-proof-quote figcaption strong{ color:#fff; font-weight:500; }
.v4-proof-quote figcaption .sep{ color:rgba(255,255,255,.30); }

/* ── v4 Trust section ──────────────────────────────────────────────
   Five pillars in a row + Trust Center link + SOC 2 badge. Pillars
   collapse to 2-up then 1-up on narrow screens. */
.v4-trust-section{ background:var(--paper-2); }
.v4-trust-section-title{ margin:18px 0 0; max-width:22ch; }
/* Bordered grid — each pillar is a cell with hairline rules between
   them (Attio-style). Container draws the top+left edges, each cell
   draws its right+bottom edge, so the grid stays fully closed at any
   column count as it collapses on narrower screens. */
.v4-trust-pillars{
  list-style:none; padding:0;
  margin:clamp(40px,5vw,64px) 0 0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
@media (max-width:1100px){
  .v4-trust-pillars{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:680px){
  .v4-trust-pillars{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  .v4-trust-pillars{ grid-template-columns:1fr; }
}
.v4-trust-pillar{
  display:flex; flex-direction:column;
  gap:12px;
  padding:clamp(22px,2.4vw,30px);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:background .18s ease;
}
.v4-trust-pillar:hover{ background:var(--paper-2); }
.v4-trust-pillar-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px;
  background:rgba(31,61,255,.10);
  color:var(--accent);
}
.v4-trust-pillar-ic svg{ width:20px; height:20px; display:block; }
.v4-trust-pillar-name{
  font-family:var(--sans);
  font-size:16px; font-weight:500;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin:4px 0 0;
}
.v4-trust-pillar-body{
  margin:0;
  font-size:14.5px; line-height:1.5;
  color:var(--ink-dim);
}
/* Trust Center link + SOC 2 badge row */
.v4-trust-section-foot{
  margin-top:clamp(40px, 5vw, 64px);
  padding-top:clamp(28px, 3vw, 36px);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.v4-trust-section-link{
  font-family:var(--sans);
  font-size:15px; font-weight:500;
  letter-spacing:-0.005em;
  color:var(--accent);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:gap .18s ease;
}
.v4-trust-section-link:hover{ gap:12px; }

/* ── v4 Integrations pills ───────────────────────────────────────── */
.v4-int-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:center;
  margin-top:clamp(32px,4vw,52px);
}
@media (max-width:880px){
  .v4-int-wrap{ grid-template-columns:1fr; }
  .v4-int-visual{ display:none; }
}
.v4-int-visual svg{
  width:100%; max-width:480px; height:auto; display:block; margin:0 auto;
}
.v4-int-title{ margin:18px 0 0; max-width:32ch; }
/* "No behavior change required." always sits on its own line. */
.v4-int-title .it{ display:block; }
.v4-int-pills{
  list-style:none; padding:0;
  margin:clamp(36px,4vw,56px) 0 0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.v4-int-pills li{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:14px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--ink);
  padding:9px 4px;
  background:transparent;
  border:0;
  border-radius:0;
}
.v4-int-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  flex-shrink:0;
}
.v4-int-mark svg,
.v4-int-mark img{ width:22px; height:22px; display:block; }
.v4-int-pill-more{
  background:transparent;
  color:var(--ink-faint);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:9px 4px;
}

/* ── v4 Stub page (Pricing) ──────────────────────────────────────── */
.v4-stub-section{
  padding:clamp(80px,10vw,144px) 0;
  text-align:left;
}
.v4-stub-title{
  font-family:var(--sans);
  font-size:clamp(36px,5vw,60px);
  font-weight:450; line-height:1.05;
  letter-spacing:-0.022em;
  margin:18px 0 0; max-width:22ch;
}
.v4-stub-lede{
  margin-top:24px;
  font-size:clamp(16px,1.4vw,19px); line-height:1.55;
  color:var(--ink-dim);
  max-width:64ch;
}
.v4-stub-actions{
  margin-top:36px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}

/* ════════════════════════════════════════════════════════════
   V4 — shared shapes for product + use-case pages
   ════════════════════════════════════════════════════════════ */

/* Hero (per product / use-case) — text-left / mock-right via grid areas
   so existing markup (5 sibling children of .shell) stays untouched. */
.v4-page-hero{
  padding:clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
}
/* Two-column flex: text wrapper on the left, mock on the right. The
   wrapper is its own flex column so the text rhythm is fully isolated
   from the mock's height. */
.v4-page-hero .shell{
  display:flex;
  align-items:flex-start;
  gap:clamp(36px, 5vw, 80px);
}
.v4-ph-text{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
/* Reset legacy grid-era margins inside the wrapper; spacing comes
   entirely from the wrapper's gap. CTA gets a touch more breathing room. */
.v4-ph-text > *{ margin:0; }
.v4-ph-text .v4-ph-cta{ margin-top:8px; }
.v4-ph-stage{
  flex:1.05 1 0;
  min-width:0;
  margin:0;
  position:relative;
}
/* Defeat the inline max-width:NNNpx; margin:0 auto on hero mocks so they
   fill their flex column at desktop. They re-center on mobile via the
   stack rules below. */
.v4-ph-stage > [style*="max-width"]{ max-width:none !important; margin:0 !important; }
@media (max-width: 980px){
  .v4-page-hero .shell{ flex-direction:column; align-items:stretch; gap:clamp(28px, 4vw, 48px); }
  .v4-ph-text, .v4-ph-stage{ flex:1 1 auto; }
  .v4-ph-stage > [style*="max-width"]{ max-width:820px !important; margin:0 auto !important; }
}

.v4-ph-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  margin-bottom:20px;
}
.v4-ph-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(31,61,255,.14);
}
.v4-ph-title{
  font-family:var(--sans);
  font-size:clamp(30px, 3.6vw, 48px);    /* trimmed from 38–68 → 30–48 */
  font-weight:450;
  line-height:1.08;
  letter-spacing:-0.020em;
  color:var(--ink);
  max-width:22ch;
  margin:0;
}
.v4-ph-title .it{ font-style:normal; color:var(--accent); }
.v4-ph-body{
  margin-top:clamp(20px,2.4vw,28px);
  font-size:clamp(16px,1.2vw,18px); line-height:1.55;
  color:var(--ink-dim);
  max-width:62ch;
}
.v4-ph-cta{ margin-top:clamp(28px,3.2vw,40px); display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; }
.v4-ph-stage{ margin-top:0; }

/* Generic section spacing inside v4 pages */
.v4-page-section{
  padding:clamp(56px,7vw,100px) 0;
}
.v4-page-section .section-num{ margin-bottom:18px; }
.v4-page-h2{
  font-family:var(--sans);
  font-size:clamp(30px,3.6vw,48px);
  font-weight:450; line-height:1.1;
  letter-spacing:-0.018em;
  color:var(--ink);
  max-width:26ch;
  margin:0 0 18px;
}
.v4-page-h2 .it{ font-style:normal; color:var(--accent); }
.v4-page-lede{
  font-size:clamp(16px,1.3vw,18px); line-height:1.55;
  color:var(--ink-dim);
  max-width:64ch;
  margin:0 0 clamp(32px,4vw,48px);
}

/* How It Works — 3-step flow */
.v4-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:clamp(18px, 2.4vw, 32px);
  margin-top:clamp(36px,4.4vw,56px);
  position:relative;
}
@media (max-width:880px){ .v4-steps{ grid-template-columns:1fr; } }
/* Editorial line-grid: each step gets a top rule and a big typographic
   step number rather than a pill on a paper card. */
.v4-step{
  background:transparent;
  border:0;
  border-top:1px solid var(--rule-strong);
  border-radius:0;
  padding:20px 0 0;
  position:relative;
}
.v4-step-n{
  display:block;
  width:auto; height:auto;
  background:transparent; border:0; border-radius:0;
  font-family:var(--mono); font-size:11px;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  padding:0;
}
.v4-step-h{
  font-family:var(--sans); font-size:20px;
  font-weight:500; letter-spacing:-0.012em;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 10px;
}
.v4-step-body{
  font-size:16px; line-height:1.55;
  color:var(--ink-dim);
  margin:0;
}

/* Powered by Weaver — dark block */
/* Full-bleed black band: the wrapping section carries the background
   edge-to-edge while the .v4-powered grid stays constrained to the
   shell width, so it reads as a full-width band rather than a floating
   rounded card. */
.v4-page-section:has(> .shell > .v4-powered){
  background:#0A0A0B;
}
.v4-powered{
  color:#fff;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:clamp(24px, 3vw, 48px);
  align-items:center;
}
@media (max-width:880px){ .v4-powered{ grid-template-columns:1fr; } }
.v4-powered-eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:14px;
}
.v4-powered h3{
  font-family:var(--sans);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:450; line-height:1.15;
  letter-spacing:-0.018em;
  color:#fff;
  margin:0 0 14px;
}
.v4-powered-body{
  font-size:15px; line-height:1.55;
  color:rgba(255,255,255,.74);
  margin:0;
}
.v4-powered-stats{
  display:flex; flex-direction:column; gap:18px;
}
.v4-powered-stat{
  border-left:2px solid var(--accent-on-dark);
  padding-left:16px;
}
.v4-powered-stat-n{
  font-family:var(--sans);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:400;
  line-height:1;
  color:#fff;
  letter-spacing:-0.022em;
}
.v4-powered-stat-n .small{ font-size:.5em; color:rgba(255,255,255,.6); margin-left:4px; }
.v4-powered-stat-l{
  margin-top:8px;
  font-size:13.5px; color:rgba(255,255,255,.74);
  line-height:1.45;
}

/* Related features — 3-up cards */
.v4-related-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:24px;
}
@media (max-width:880px){ .v4-related-grid{ grid-template-columns:1fr; } }
.v4-related-card{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:24px 22px;
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.v4-related-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(31,61,255,.18);
}
.v4-related-name{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  margin-bottom:12px;
}
.v4-related-title{
  font-family:var(--sans); font-size:16px;
  font-weight:500; letter-spacing:-0.005em;
  color:var(--ink);
  margin:0 0 12px;
  line-height:1.35;
}
.v4-related-arrow{
  margin-top:auto;
  color:var(--ink-faint);
  font-size:18px;
  display:inline-flex; align-items:center; gap:4px;
}
.v4-related-card:hover .v4-related-arrow{ color:var(--accent); }

/* Use case: pain-list (Without Devplan) */
.v4-pain-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:clamp(24px,3vw,48px);
  align-items:start;
}
@media (max-width:880px){ .v4-pain-grid{ grid-template-columns:1fr; } }
.v4-pain-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.v4-pain-list li{
  font-size:15px; line-height:1.5;
  color:var(--ink);
  display:grid; grid-template-columns:auto 1fr;
  gap:12px; align-items:start;
}
.v4-pain-bullet{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:rgba(214,84,30,.14); color:#a1331f;
  font-size:11px; font-weight:600;
  flex-shrink:0;
}
.v4-pain-quote{
  background:#0A0A0B;
  color:#fff;
  border-radius:14px;
  padding:28px 26px;
  margin:0;
}
.v4-pain-quote blockquote{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.35; letter-spacing:-0.012em;
  color:#fff;
}
.v4-pain-quote blockquote::before{ content:"\201C"; color:var(--accent-on-dark); font-size:38px; line-height:0; position:relative; top:14px; margin-right:2px; }
.v4-pain-quote figcaption{
  margin-top:18px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.v4-pain-quote figcaption strong{ color:#fff; font-weight:500; }
.v4-pain-quote figcaption .sep{ color:rgba(255,255,255,.30); margin:0 6px; }

/* Use case: 3 solutions — line-grid treatment, same as how-it-works. */
.v4-sol-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:clamp(20px, 2.4vw, 36px);
  margin-top:clamp(36px,4.4vw,56px);
}
@media (max-width:880px){ .v4-sol-grid{ grid-template-columns:1fr; } }
.v4-sol-card{
  background:transparent;
  border:0;
  border-top:1px solid var(--rule-strong);
  border-radius:0;
  padding:20px 0 0;
}
.v4-sol-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  margin-bottom:14px;
}
.v4-sol-body{
  font-size:16px; line-height:1.55;
  color:var(--ink); margin:0;
}
.v4-sol-body strong{ color:var(--ink); font-weight:500; }

/* Use case: Features You Will Use Most */
.v4-feat-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-top:24px;
}
@media (max-width:680px){ .v4-feat-grid{ grid-template-columns:1fr; } }
.v4-feat-row{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:22px;
  display:flex; flex-direction:column; gap:8px;
}
.v4-feat-name{
  font-family:var(--sans);
  font-size:15px; font-weight:500;
  color:var(--ink);
}
.v4-feat-desc{
  font-size:13.5px; line-height:1.5;
  color:var(--ink-dim);
}
.v4-feat-link{
  margin-top:6px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--accent); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}

/* Daily Pulse: Role 3-up mock */
.v4-mock-roles3{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:14px;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:14px;
}
@media (max-width:640px){ .v4-mock-roles3{ grid-template-columns:1fr; } }
.v4-mock-role{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:10px;
  padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.v4-mock-role-head{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid var(--rule);
  padding-bottom:6px;
}
.v4-mock-role ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.v4-mock-role li{
  font-size:12px; line-height:1.4;
  color:var(--ink);
}
.v4-mock-role .v4-mr-tag{
  display:inline-block;
  font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:1px 6px; border-radius:3px;
  margin-right:6px;
  vertical-align:middle;
}

/* Automation flow (tools → Weaver → output) */
.v4-mock-flow{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:center;
  padding:24px;
}
.v4-mock-flow .v4-flow-node{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}
.v4-flow-icon{
  width:44px; height:44px; border-radius:10px;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:13px;
  color:var(--ink);
}
.v4-flow-icon.is-weaver{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 0 24px rgba(31,61,255,.22);
}
.v4-mock-flow .v4-flow-arrow{
  font-family:var(--mono); color:var(--ink-faint); font-size:16px;
}
@media (max-width:640px){
  .v4-mock-flow{ grid-template-columns:1fr; }
  .v4-mock-flow .v4-flow-arrow{ display:none; }
}

/* MCP / dual usage mocks */
.v4-mock-dual{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:16px;
}
@media (max-width:640px){ .v4-mock-dual{ grid-template-columns:1fr; } }
.v4-dual-pane{
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:8px;
  padding:14px;
  font-family:var(--mono); font-size:12px;
  line-height:1.55;
  color:var(--ink);
}
.v4-dual-label{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px;
  font-weight:600;
}
.v4-dual-pane pre{ margin:0; white-space:pre-wrap; font-size:11px; color:var(--ink); line-height:1.5; }
.v4-dual-pane.is-dark{ background:#0A0A0B; color:#cfd2d8; border-color:rgba(255,255,255,.10); }
.v4-dual-pane.is-dark pre,
.v4-dual-pane.is-dark .v4-dual-label{ color:#cfd2d8; }

/* Auto Status hero/page mocks */
.v4-mock-dashboard{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:18px;
}
.v4-dash-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  margin-bottom:14px;
}
.v4-dash-title{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); }
.v4-dash-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-faint); }
.v4-dash-row{
  display:grid; grid-template-columns: auto 1fr auto;
  gap:14px; align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-size:13.5px;
}
.v4-dash-row:last-child{ border-bottom:0; }
.v4-dash-bullet{
  width:8px; height:8px; border-radius:50%;
}
.v4-dash-bullet.is-ok{ background:#2c9460; box-shadow:0 0 0 3px rgba(44,148,96,.14); }
.v4-dash-bullet.is-warn{ background:#e6a437; box-shadow:0 0 0 3px rgba(230,164,55,.14); }
.v4-dash-bullet.is-risk{ background:#d6541e; box-shadow:0 0 0 3px rgba(214,84,30,.14); }
.v4-dash-meta-r{ font-family:var(--mono); font-size:10.5px; letter-spacing:.10em; color:var(--ink-dim); }

/* Risk alert stack — multiple flagged items in one card. Dark surface
   only (only used inside .v4-cell--dark on Risk Surfacing). */
.v4-mock-alert-stack{
  padding:0;
  background:#15151A;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.v4-alert{
  padding:13px 16px;
  display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v4-alert:last-child{ border-bottom:0; }
.v4-alert-row{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:12px;
}
.v4-alert-sev{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px;
  min-width:44px; text-align:center;
}
.v4-alert--high .v4-alert-sev{ background:rgba(214,84,30,.22); color:#ff8a66; }
.v4-alert--med  .v4-alert-sev{ background:rgba(230,164,55,.20); color:#ffc14d; }
.v4-alert--low  .v4-alert-sev{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.55); }
.v4-alert-title{ font-size:13px; color:#fff; line-height:1.35; }
.v4-alert-time{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.4);
}
.v4-alert-detail{
  margin-left:56px;
  font-size:12px; line-height:1.4;
  color:rgba(255,255,255,.55);
}

/* Daily updates — stacked per-project plain-language updates. */
.v4-mock-daily{
  padding:0;
  background:#15151A;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.v4-daily-row{
  padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v4-daily-row:last-child{ border-bottom:0; }
.v4-daily-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px;
}
.v4-daily-name{ font-family:var(--sans); font-size:13.5px; font-weight:500; color:#fff; }
.v4-daily-date{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.v4-daily-body{
  margin:0;
  font-size:12.5px; line-height:1.5;
  color:rgba(255,255,255,.78);
}
.v4-daily-flag{ color:#ff8a66; }
.v4-daily-ok{ color:#7be3a6; }

/* Risk alert "Slack message" mock (legacy single-alert version, used
   elsewhere — kept for compatibility). */
.v4-mock-alert{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:18px 20px;
  display:grid; grid-template-columns: 36px 1fr;
  gap:14px;
}
.v4-alert-avatar{
  width:36px; height:36px; border-radius:6px;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.05em;
}
.v4-alert-name{ font-size:13.5px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.v4-alert-name .time{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-left:8px; font-weight:400; letter-spacing:.06em; }
.v4-alert-msg{
  font-size:14px; line-height:1.5;
  color:var(--ink);
}
.v4-alert-msg strong{ font-weight:500; color:var(--ink); }
.v4-alert-meta{
  margin-top:8px;
  display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* Delivery confidence mock */
.v4-mock-conf{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.v4-conf-head{
  display:flex; justify-content:space-between; align-items:baseline;
}
.v4-conf-date{ font-family:var(--sans); font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-0.02em; }
.v4-conf-pct{ font-family:var(--mono); font-size:13px; color:var(--accent); }
.v4-conf-bar{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 94%, var(--paper-2) 94%);
}
.v4-conf-trend{
  display:flex; gap:3px; height:32px; align-items:end;
}
.v4-conf-trend i{
  flex:1; background:var(--paper-2);
  border-radius:2px 2px 0 0;
}
.v4-conf-trend i.is-on{ background:var(--accent); opacity:.7; }
.v4-conf-foot{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* Hero timeline (Change History) */
.v4-mock-timeline-hero{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:24px;
}
.v4-th-title{
  font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--ink); margin:0 0 18px;
}
.v4-th-list{
  list-style:none; padding:0 0 0 18px; margin:0;
  border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:14px;
}
.v4-th-list li{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
}
.v4-th-list li::before{
  content:""; position:absolute;
  left:-24px; top:4px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--paper);
}
.v4-th-h{ font-size:13.5px; color:var(--ink); }
.v4-th-h strong{ font-weight:500; }
.v4-th-src{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* Decision capture / code change / feature area mocks */
.v4-mock-decision{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:12px;
  padding:18px 20px;
}
.v4-dec-eyebrow{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-on-dark, var(--accent));
  margin-bottom:8px;
}
.v4-dec-title{ font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink); margin:0 0 6px; }
.v4-dec-reason{ font-size:13px; color:var(--ink-dim); margin:0 0 12px; }
.v4-dec-src{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase;
  padding:5px 10px; border-radius:4px;
  background:rgba(31,61,255,.08); color:var(--accent);
}

.v4-mock-codechange{
  background:#0A0A0B;
  color:#fff;
  border-radius:12px;
  padding:18px 20px;
  font-family:var(--mono);
}
.v4-cc-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; }
.v4-cc-sha{ color:#5A77FF; }
.v4-cc-author{ color:rgba(255,255,255,.7); }
.v4-cc-msg{ color:#fff; flex:1; min-width:200px; }
.v4-cc-ticket{ color:rgba(255,255,255,.5); }
.v4-cc-spec{
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:11.5px;
  color:rgba(255,255,255,.65);
}

.v4-mock-featurearea{
  background:#0A0A0B;
  color:#fff;
  border-radius:12px;
  padding:18px 20px;
}
.v4-fa-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px;
}
.v4-fa-title{ font-family:var(--sans); font-size:15px; font-weight:500; color:#fff; }
.v4-fa-period{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:rgba(255,255,255,.5); }
.v4-fa-stats{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:12px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.v4-fa-stat{ text-align:left; }
.v4-fa-stat-n{ font-family:var(--sans); font-size:20px; font-weight:400; color:#fff; line-height:1; letter-spacing:-0.02em; }
.v4-fa-stat-l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:6px; }
.v4-fa-note{ margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.74); line-height:1.5; }

/* Daily Pulse: 3 delivery channels (Slack / email / in-app) — same
   pulse, three surfaces. Stacked compact rows with brand mark + preview. */
.v4-mock-channels{
  padding:14px;
  display:flex; flex-direction:column;
  gap:2px;
}
.v4-ch-row{
  display:grid;
  grid-template-columns: 32px 1fr;
  align-items:center;
  gap:12px;
  padding:11px 8px;
  border-radius:8px;
}
.v4-ch-row + .v4-ch-row{
  border-top:1px solid var(--rule);
  border-radius:0;
}
.v4-ch-mark{
  width:32px; height:32px;
  border-radius:7px;
  background:var(--paper-2);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.v4-ch-mark svg{ width:18px; height:18px; display:block; }
.v4-ch-mark--devplan{ background:var(--accent); }
.v4-ch-mark--devplan svg{ color:#fff; }
.v4-ch-mark--email svg{ width:20px; height:20px; }
.v4-ch-body{ min-width:0; }
.v4-ch-head{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:3px;
}
.v4-ch-name{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  color:var(--ink);
}
.v4-ch-meta{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.10em;
  color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v4-ch-preview{
  font-size:13px; line-height:1.4;
  color:var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v4-ch-preview strong{ color:var(--ink); font-weight:500; }

/* Weaver page mocks: ingestion counts */
.v4-mock-ingest{
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:14px;
  padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.v4-ing-row{
  display:grid; grid-template-columns: 90px 1fr auto;
  align-items:center; gap:14px;
  padding:8px 0;
  border-bottom:1px solid var(--rule);
}
.v4-ing-row:last-child{ border-bottom:0; }
.v4-ing-tool{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500;
}
.v4-ing-bar{ height:6px; border-radius:3px; background:var(--paper-2); position:relative; overflow:hidden; }
.v4-ing-bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:3px; }
.v4-ing-n{
  font-family:var(--mono); font-size:11px;
  color:var(--ink);
}

/* Memory vs session comparison */
.v4-mock-memcompare{
  background:#0A0A0B;
  color:#fff;
  border-radius:14px;
  padding:22px;
}
.v4-mc-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.v4-mc-row:last-child{ margin-bottom:0; }
.v4-mc-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.v4-mc-track{ display:flex; gap:4px; height:18px; }
.v4-mc-track.is-session i{
  flex:1; background:rgba(255,255,255,.16); border-radius:2px;
}
.v4-mc-track.is-session i:nth-child(even){ background:transparent; }
.v4-mc-track.is-weaver i{
  flex:1; background:var(--accent); border-radius:2px; opacity:.7;
}
.v4-mc-track.is-weaver i:last-child{ background:#5A77FF; opacity:1; }

/* Routing diagram (Weaver) */
.v4-mock-routing{
  background:#0A0A0B;
  color:#fff;
  border-radius:14px;
  padding:22px;
}
.v4-rt-source{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.10em;
  color:#fff;
  margin-bottom:18px;
}
.v4-rt-source-dot{ width:8px; height:8px; border-radius:50%; background:#ff8a66; }
.v4-rt-outs{ display:flex; flex-direction:column; gap:10px; }
.v4-rt-out{
  display:grid; grid-template-columns: 110px 1fr auto;
  gap:14px; align-items:center;
  padding:10px 14px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
}
.v4-rt-out-role{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.v4-rt-out-action{ color:rgba(255,255,255,.92); }
.v4-rt-out-state{ font-family:var(--mono); font-size:10px; letter-spacing:.10em; color:#7be3a6; }
.v4-rt-out.is-muted .v4-rt-out-state{ color:rgba(255,255,255,.36); }

/* Change History: search-results mock for the "Onboarding accelerator"
   cell. Search bar at top + 4 categorized result rows (spec / decision
   / commit / people). The PEOPLE row anchors the "who to talk to"
   promise from the cell copy. */
.v4-mock-search{
  padding:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.v4-srch-bar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--rule-2);
  background:var(--paper-2);
}
.v4-srch-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  color:var(--ink-faint);
}
.v4-srch-q{
  font-family:var(--sans); font-size:14px;
  color:var(--ink); font-weight:450;
  letter-spacing:-0.005em;
}
.v4-srch-kbd{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.10em;
  color:var(--ink-faint);
  padding:2px 6px; border-radius:4px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
}
.v4-srch-results{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.v4-srch-results li{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
}
.v4-srch-results li:last-child{ border-bottom:0; }
.v4-srch-cat{
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:3px 7px; border-radius:4px;
  background:var(--paper-2);
  text-align:center;
}
.v4-srch-cat--accent{
  color:var(--accent);
  background:rgba(31,61,255,.08);
}
.v4-srch-title{
  font-size:13.5px; line-height:1.4;
  color:var(--ink);
  display:flex; align-items:center; gap:8px;
  min-width:0;
}
.v4-srch-title > *{ flex-shrink:0; }
.v4-srch-src{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.v4-srch-av{
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; font-weight:600;
  color:var(--ink);
  margin-right:-6px;
  border:2px solid var(--paper);
}
.v4-srch-av:last-of-type{ margin-right:8px; }
.v4-srch-people-meta{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Ask Devplan: cost / latency comparison bars — MCP vs Devplan.
   Two grouped sections, each with a mono label and two horizontal
   bars + values. Devplan bars are cobalt; MCP bars are quiet gray.
   Widths set inline; the fills scale-grow in via CSS animation. */
.v4-mock-bars{
  padding:22px;
  display:flex; flex-direction:column;
  gap:22px;
}
.v4-bars-group{ display:flex; flex-direction:column; gap:10px; }
.v4-bars-label{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:2px;
}
.v4-bars-row{
  display:grid;
  grid-template-columns: 120px 1fr 64px;
  align-items:center;
  gap:14px;
}
.v4-bars-name{
  font-family:var(--sans); font-size:13px;
  color:var(--ink-dim);
}
.v4-bars-bar{
  height:10px; border-radius:5px;
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  overflow:hidden;
  position:relative;
}
.v4-bars-fill{
  display:block;
  height:100%;
  border-radius:4px;
  transform-origin:left center;
  /* Grows on reveal (see per-bar stagger near the end of the file). */
  transform:scaleX(0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.v4-bars-fill--mcp{ background:#a8acb6; }     /* quiet gray baseline */
.v4-bars-fill--dp{
  background:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.v4-bars-val{
  font-family:var(--mono); font-size:13px;
  color:var(--ink); text-align:right;
}
.v4-bars-val--accent{ color:var(--accent); font-weight:500; }
@media (max-width: 540px){
  .v4-bars-row{ grid-template-columns: 100px 1fr 56px; gap:10px; }
  .v4-bars-name{ font-size:12px; }
}
@media (prefers-reduced-motion: reduce){
  .v4-bars-fill{ animation:none; }
}

/* What to Ask — larger query chips with staggered float so each pill
   drifts independently at its own elevation. Creates a "constellation
   of questions" feel without overwhelming the eye. */
.v4-mock-queries{
  display:flex; flex-wrap:wrap;
  gap:clamp(14px, 1.6vw, 22px);
  margin-top:28px;
  padding:clamp(28px, 3vw, 44px) 4px;     /* room for the float amplitude */
  align-items:center;
}
.v4-mock-queries li{
  list-style:none;
  font-family:var(--sans);
  font-size:clamp(17px, 1.5vw, 21px);
  font-weight:450;
  line-height:1.3;
  letter-spacing:-0.008em;
  padding:14px 24px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  color:var(--ink);
  cursor:default;
  box-shadow:0 8px 20px -12px rgba(10,10,11,.16);
  animation:v4q-float 6s ease-in-out infinite alternate;
  will-change:transform, box-shadow;
}
.v4-mock-queries li::before{ content:"\201C"; color:var(--accent); margin-right:4px; font-weight:600; }
.v4-mock-queries li::after{ content:"\201D"; color:var(--accent); margin-left:2px; font-weight:600; }

/* Each chip floats with its own amplitude, duration, and delay so the
   group reads as alive but not mechanical. CSS variables keep the
   keyframes shared. */
.v4-mock-queries li{
  --v4q-amp: 8px;
  --v4q-rest-shadow: 0 6px 16px -10px rgba(10,10,11,.18);
  --v4q-lift-shadow: 0 20px 40px -18px rgba(31,61,255,.22);
}
.v4-mock-queries li:nth-child(1){ animation-duration:5.2s; animation-delay:0s;    --v4q-amp:8px;  }
.v4-mock-queries li:nth-child(2){ animation-duration:7.0s; animation-delay:.6s;   --v4q-amp:14px; }
.v4-mock-queries li:nth-child(3){ animation-duration:6.0s; animation-delay:1.4s;  --v4q-amp:6px;  }
.v4-mock-queries li:nth-child(4){ animation-duration:6.6s; animation-delay:.3s;   --v4q-amp:11px; }
.v4-mock-queries li:nth-child(5){ animation-duration:5.8s; animation-delay:2.0s;  --v4q-amp:7px;  }
.v4-mock-queries li:nth-child(6){ animation-duration:7.4s; animation-delay:1.0s;  --v4q-amp:13px; }

@keyframes v4q-float{
  0%   { transform:translateY(0);                box-shadow:var(--v4q-rest-shadow); }
  100% { transform:translateY(calc(var(--v4q-amp) * -1)); box-shadow:var(--v4q-lift-shadow); }
}

@media (prefers-reduced-motion: reduce){
  .v4-mock-queries li{ animation:none; transform:none; }
}

/* Tech details (Weaver "Under the hood") — pillar cards with cobalt
   accent stripe, mono step number, icon, larger title, and a spec
   list below the body. Heavier than the editorial line-grid because
   these are the page's credibility moment. */
.v4-tech-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:clamp(18px, 2vw, 28px);
  margin-top:clamp(36px, 4vw, 56px);
}
@media (max-width:880px){ .v4-tech-grid{ grid-template-columns:1fr; } }
.v4-tech-card{
  background:transparent;
  border:0;
  border-radius:0;
  padding:4px 0 0;
  display:flex; flex-direction:column;
  gap:14px;
}
.v4-tech-num{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em;
  color:var(--ink-faint);
}
.v4-tech-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  background:rgba(31,61,255,.10);
  color:var(--accent);
  margin-top:-2px;
}
.v4-tech-icon svg{ width:22px; height:22px; display:block; }
.v4-tech-name{
  font-family:var(--sans);
  font-size:clamp(20px, 1.8vw, 24px);
  font-weight:500;
  letter-spacing:-0.014em;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}
.v4-tech-body{
  font-size:15.5px; line-height:1.55;
  color:var(--ink-dim);
  margin:0;
}
.v4-tech-body strong{ color:var(--ink); font-weight:500; }
/* Spec list — small typographic detail block that makes each card
   feel like a real spec page, not just a paragraph. */
.v4-tech-spec{
  list-style:none; padding:14px 0 0; margin:0;
  border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-dim);
}
.v4-tech-spec li{ display:flex; align-items:baseline; gap:8px; }
.v4-tech-spec li::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  transform:translateY(-2px);
}
.v4-tech-spec code{
  font-family:var(--mono); font-size:11px;
  background:var(--paper-2);
  padding:1px 5px; border-radius:3px;
  color:var(--ink);
}
.v4-tech-spec-out{ color:var(--accent); }
.v4-tech-spec-out::before{ background:var(--accent); box-shadow:0 0 0 3px rgba(31,61,255,.18); }


/* ── v4 Team (hidden page) — cobalt-dot halftone portraits ─────────── */
.v4-team-title{ margin:18px 0 0; max-width:22ch; }
.v4-team-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 72px);
  max-width:860px;
  margin-top:clamp(40px, 5vw, 64px);
}
@media (max-width:680px){ .v4-team-wrap{ grid-template-columns:1fr; max-width:340px; } }
.v4-team-card{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.v4-team-portrait{
  position:relative;
  width:100%;
  max-width:300px;
  aspect-ratio:1;
  background:#fff;
  border:1px solid var(--paper-edge);
  border-radius:16px;
  overflow:hidden;
}
.v4-team-portrait canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.v4-team-name{
  font-family:var(--sans);
  font-size:21px; font-weight:600;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.v4-team-role{
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink-faint);
  margin-top:3px;
}

/* ── Per-element bar/block grow on reveal (capabilities mocks) ──────
   All gated on the shared .v4-cell-mock.v4-in reveal so each element
   grows individually, staggered, when the mock scrolls into view. */

/* Cost / latency comparison — scaleX, 4 fills staggered */
.v4-cell-mock.v4-in .v4-bars-fill{ transform:scaleX(1); }
.v4-mock-bars .v4-bars-group:nth-of-type(1) .v4-bars-row:nth-child(2) .v4-bars-fill{ transition-delay:.10s; }
.v4-mock-bars .v4-bars-group:nth-of-type(1) .v4-bars-row:nth-child(3) .v4-bars-fill{ transition-delay:.22s; }
.v4-mock-bars .v4-bars-group:nth-of-type(2) .v4-bars-row:nth-child(2) .v4-bars-fill{ transition-delay:.34s; }
.v4-mock-bars .v4-bars-group:nth-of-type(2) .v4-bars-row:nth-child(3) .v4-bars-fill{ transition-delay:.46s; }

/* Ingest source bars — scaleX, 5 rows staggered */
.v4-ing-bar i{ transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.v4-cell-mock.v4-in .v4-ing-bar i{ transform:scaleX(1); }
.v4-ing-row:nth-child(1) .v4-ing-bar i{ transition-delay:.06s; }
.v4-ing-row:nth-child(2) .v4-ing-bar i{ transition-delay:.16s; }
.v4-ing-row:nth-child(3) .v4-ing-bar i{ transition-delay:.26s; }
.v4-ing-row:nth-child(4) .v4-ing-bar i{ transition-delay:.36s; }
.v4-ing-row:nth-child(5) .v4-ing-bar i{ transition-delay:.46s; }

/* Confidence trend — scaleY, 8 bars staggered left→right */
.v4-conf-trend i{ transform:scaleY(0); transform-origin:bottom; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.v4-cell-mock.v4-in .v4-conf-trend i{ transform:scaleY(1); }
.v4-conf-trend i:nth-child(1){ transition-delay:.05s; }
.v4-conf-trend i:nth-child(2){ transition-delay:.13s; }
.v4-conf-trend i:nth-child(3){ transition-delay:.21s; }
.v4-conf-trend i:nth-child(4){ transition-delay:.29s; }
.v4-conf-trend i:nth-child(5){ transition-delay:.37s; }
.v4-conf-trend i:nth-child(6){ transition-delay:.45s; }
.v4-conf-trend i:nth-child(7){ transition-delay:.53s; }
.v4-conf-trend i:nth-child(8){ transition-delay:.61s; }

/* Memory comparison — each block pops in, staggered left→right */
.v4-mc-track i{ transform:scale(0); transform-origin:center; transition:transform .34s cubic-bezier(.34,1.56,.64,1); }
.v4-cell-mock.v4-in .v4-mc-track i{ transform:scale(1); }
.v4-mc-track i:nth-child(1){ transition-delay:.04s; }
.v4-mc-track i:nth-child(2){ transition-delay:.09s; }
.v4-mc-track i:nth-child(3){ transition-delay:.14s; }
.v4-mc-track i:nth-child(4){ transition-delay:.19s; }
.v4-mc-track i:nth-child(5){ transition-delay:.24s; }
.v4-mc-track i:nth-child(6){ transition-delay:.29s; }
.v4-mc-track i:nth-child(7){ transition-delay:.34s; }
.v4-mc-track i:nth-child(8){ transition-delay:.39s; }
.v4-mc-track i:nth-child(9){ transition-delay:.44s; }
.v4-mc-track i:nth-child(10){ transition-delay:.49s; }
.v4-mc-track i:nth-child(11){ transition-delay:.54s; }
.v4-mc-track i:nth-child(12){ transition-delay:.59s; }

@media (prefers-reduced-motion: reduce){
  .v4-bars-fill,
  .v4-ing-bar i,
  .v4-conf-trend i,
  .v4-mc-track i{ transform:none !important; transition:none; }
}

/* ── Weaver "summarize vs knows" mock — one question, two answers ──── */
.v4-mock-knows{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.v4-knows-q{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500; color:var(--ink);
  padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.v4-knows-q-ic{
  flex-shrink:0;
  width:20px; height:20px; border-radius:50%;
  background:rgba(10,10,11,.06); color:var(--ink-dim);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
}
.v4-knows-a{
  border-radius:10px;
  padding:12px 14px;
  border:1px solid var(--paper-edge);
}
.v4-knows-a--generic{ background:var(--paper-2); }
.v4-knows-a--weaver{
  background:rgba(31,61,255,.04);
  border-color:rgba(31,61,255,.22);
}
.v4-knows-who{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  margin-bottom:7px;
  display:flex; align-items:baseline; gap:8px;
}
.v4-knows-who span{
  font-weight:400; letter-spacing:.06em;
  color:var(--ink-faint);
}
.v4-knows-a--weaver .v4-knows-who{ color:var(--accent); }
.v4-knows-text{
  margin:0; font-size:13px; line-height:1.5;
}
.v4-knows-a--generic .v4-knows-text{ color:var(--ink-faint); }
.v4-knows-a--weaver  .v4-knows-text{ color:var(--ink-dim); }
.v4-knows-a--weaver  .v4-knows-text strong{ color:var(--ink); font-weight:600; }
.v4-knows-meta{
  display:flex; align-items:center; gap:7px;
  margin-top:9px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
}
.v4-knows-meta--none{ color:var(--ink-faint); }
.v4-knows-meta--src { color:#1e6e44; }
.v4-knows-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.v4-knows-meta--none .v4-knows-dot{ background:var(--ink-faint); opacity:.5; }
.v4-knows-meta--src  .v4-knows-dot{ background:#2c9460; box-shadow:0 0 0 3px rgba(44,148,96,.16); }

/* Light variant of the routing mock — for the Engineering Managers hero
   (sits on the light hero stage, matching the other use-case heroes). */
.v4-mock-routing--light{ background:var(--paper); color:var(--ink); }
.v4-mock-routing--light .v4-rt-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--rule);
}
.v4-mock-routing--light .v4-rt-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:500;
}
.v4-mock-routing--light .v4-rt-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.v4-mock-routing--light .v4-rt-source{
  background:rgba(214,84,30,.08);
  border-color:rgba(214,84,30,.22);
  color:var(--ink);
}
.v4-mock-routing--light .v4-rt-out{
  background:var(--paper-2);
  border-color:var(--paper-edge);
}
.v4-mock-routing--light .v4-rt-out-role{ color:var(--ink-faint); }
.v4-mock-routing--light .v4-rt-out-action{ color:var(--ink); }
.v4-mock-routing--light .v4-rt-out-state{ color:#1e6e44; }
.v4-mock-routing--light .v4-rt-out.is-muted .v4-rt-out-state{ color:var(--ink-faint); }
.v4-mock-routing--light .v4-rt-out.is-muted .v4-rt-out-action{ color:var(--ink-faint); }

/* ════════════════════════════════════════════════════════════════
   Pricing page
   ════════════════════════════════════════════════════════════════ */
.v4-pr-hero{ padding-bottom:clamp(8px,1.5vw,16px); }
.v4-pr-hero .shell{ text-align:center; }
.v4-pr-hero .section-num{ justify-content:center; }
.v4-pr-h1{ max-width:none; margin:14px auto 0; }
/* No width cap so it sits on one line on wide screens; balance the wrap
   when it does break on narrower viewports. */
.v4-pr-hero-sub{ margin-left:auto; margin-right:auto; max-width:none; text-wrap:balance; }

/* ── Plans ── */
.v4-pr-plans-section{ padding-top:clamp(32px,4vw,56px); }
.v4-pr-plans{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(28px,3vw,40px);
  align-items:start;
}
@media (max-width:820px){ .v4-pr-plans{ grid-template-columns:1fr; } }
.v4-pr-plan{
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  border-radius:18px;
  padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column;
}
.v4-pr-plan--featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 28px 56px -34px rgba(31,61,255,.30);
}
.v4-pr-plan--dark{
  background:#0A0A0B; border-color:#0A0A0B; color:#fff;
}
.v4-pr-badge{
  align-self:flex-start;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:5px 10px; border-radius:6px;
  margin-bottom:18px;
}
.v4-pr-badge--dark{ color:#fff; background:rgba(255,255,255,.12); }
.v4-pr-plan-name{
  font-family:var(--sans); font-size:21px; font-weight:600;
  letter-spacing:-0.018em; color:var(--ink); margin:0;
}
.v4-pr-plan--dark .v4-pr-plan-name{ color:#fff; }
.v4-pr-plan-tagline{
  font-size:14.5px; line-height:1.5; color:var(--ink-dim); margin:6px 0 0;
}
.v4-pr-plan--dark .v4-pr-plan-tagline{ color:rgba(255,255,255,.7); }
.v4-pr-starting{
  display:block; margin-top:22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.v4-pr-price{ display:flex; align-items:baseline; gap:8px; margin-top:22px; }
.v4-pr-plan--dark .v4-pr-price{ margin-top:6px; }
.v4-pr-amount{
  font-family:var(--sans); font-size:clamp(40px,5vw,56px);
  font-weight:450; letter-spacing:-0.03em; line-height:1; color:var(--ink);
}
.v4-pr-plan--dark .v4-pr-amount{ color:#fff; }
.v4-pr-period{ font-size:15px; color:var(--ink-faint); }
.v4-pr-plan--dark .v4-pr-period{ color:rgba(255,255,255,.55); }
.v4-pr-price-note{
  margin:10px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--accent);
}
.v4-pr-plan--dark .v4-pr-price-note{ color:var(--accent-on-dark, #5A77FF); }

/* Tier select */
.v4-pr-select-wrap{ margin-top:20px; }
.v4-pr-select-label{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.v4-pr-select-box{ position:relative; }
.v4-pr-select{
  width:100%;
  appearance:none; -webkit-appearance:none;
  font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--paper-edge); border-radius:10px;
  padding:12px 38px 12px 14px;
  cursor:pointer;
}
.v4-pr-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.v4-pr-select-caret{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--ink-faint); font-size:12px;
}

/* Plan CTA */
.v4-pr-cta{ margin-top:22px; width:100%; justify-content:center; }
.v4-pr-cta--outline{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.v4-pr-cta--outline:hover{ background:#fff; color:#0A0A0B; border-color:#fff; }

/* Features list */
.v4-pr-features{
  list-style:none; padding:0; margin:24px 0 0;
  display:flex; flex-direction:column; gap:11px;
  border-top:1px solid var(--rule); padding-top:22px;
}
.v4-pr-plan--dark .v4-pr-features{ border-top-color:rgba(255,255,255,.12); }
.v4-pr-features li{
  position:relative; padding-left:26px;
  font-size:14px; line-height:1.5; color:var(--ink-dim);
}
.v4-pr-plan--dark .v4-pr-features li{ color:rgba(255,255,255,.78); }
.v4-pr-features li::before{
  content:""; position:absolute; left:0; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%231F3DFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.v4-pr-plan--dark .v4-pr-features li::before{
  background-color:rgba(90,119,255,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23889Cff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Calculator ── */
.v4-pr-calc{
  display:grid; grid-template-columns:1fr 320px;
  gap:clamp(24px,3vw,44px); align-items:start;
  margin-top:clamp(28px,3vw,40px);
}
@media (max-width:920px){ .v4-pr-calc{ grid-template-columns:1fr; } }
.v4-pr-calc-rows{
  border:1px solid var(--paper-edge); border-radius:16px;
  background:var(--paper); overflow:hidden;
}
.v4-pr-row{
  display:grid; grid-template-columns:1fr auto auto;
  gap:clamp(16px,2.4vw,32px); align-items:center;
  padding:16px clamp(16px,2vw,22px);
  border-bottom:1px solid var(--rule);
}
.v4-pr-row:last-child{ border-bottom:0; }
.v4-pr-row-name{ font-size:14.5px; font-weight:500; color:var(--ink); }
.v4-pr-row-range{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em;
  color:var(--ink-faint); margin-top:3px;
}
/* Segmented Low/Med/High control */
.v4-pr-seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--paper-2); border:1px solid var(--paper-edge);
  border-radius:9px;
}
.v4-pr-seg label{ position:relative; cursor:pointer; }
.v4-pr-seg input{ position:absolute; opacity:0; pointer-events:none; }
.v4-pr-seg span{
  display:block; padding:6px 13px; border-radius:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim);
  transition:background .14s ease, color .14s ease;
}
.v4-pr-seg input:checked + span{ background:var(--accent); color:#fff; }
.v4-pr-seg label:hover input:not(:checked) + span{ background:rgba(10,10,11,.05); color:var(--ink); }
.v4-pr-seg input:focus-visible + span{ box-shadow:0 0 0 2px var(--accent-soft-2); }
.v4-pr-sub{
  font-family:var(--mono); font-size:13.5px; color:var(--ink);
  text-align:right; min-width:54px;
}
@media (max-width:560px){
  .v4-pr-row{ grid-template-columns:1fr auto; }
  .v4-pr-sub{ grid-column:2; grid-row:1; align-self:start; }
  .v4-pr-seg{ grid-column:1 / -1; }
}

/* Summary panel */
.v4-pr-calc-summary{
  position:sticky; top:88px;
  background:var(--paper-2);
  border:1px solid var(--paper-edge); border-radius:16px;
  padding:24px;
}
.v4-pr-sum-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.v4-pr-sum-total{
  font-family:var(--sans); font-size:clamp(38px,4.4vw,52px);
  font-weight:450; letter-spacing:-0.03em; line-height:1; color:var(--ink);
  margin-top:8px;
}
.v4-pr-sum-unit{ font-size:13px; color:var(--ink-faint); margin-top:6px; }
.v4-pr-sum-rec{
  margin-top:20px; padding:16px;
  background:var(--accent-soft); border:1px solid var(--accent-soft-2);
  border-radius:12px;
}
.v4-pr-sum-rec-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.v4-pr-sum-rec-name{
  font-family:var(--sans); font-size:22px; font-weight:600;
  letter-spacing:-0.02em; color:var(--ink); margin-top:6px;
}
.v4-pr-sum-rec-note{ font-size:13px; color:var(--ink-dim); margin-top:3px; }
.v4-pr-calc-summary .v4-pr-cta{ margin-top:18px; }

/* ── Callouts ── */
.v4-pr-callouts-section{ padding-top:clamp(8px,1vw,16px); }
.v4-pr-callouts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
@media (max-width:680px){ .v4-pr-callouts{ grid-template-columns:1fr; } }
.v4-pr-callout{
  border:1px solid var(--paper-edge); border-radius:14px;
  background:var(--paper); padding:24px;
}
.v4-pr-callout-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px;
  background:var(--accent-soft); color:var(--accent); margin-bottom:14px;
}
.v4-pr-callout-ic svg{ width:20px; height:20px; }
.v4-pr-callout-h{
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:-0.01em; color:var(--ink); margin:0 0 6px;
}
.v4-pr-callout-body{ font-size:14px; line-height:1.55; color:var(--ink-dim); margin:0; }

/* ── FAQ ── */
.v4-pr-faq{ margin-top:clamp(24px,3vw,36px); border-top:1px solid var(--rule); }
.v4-pr-faq-item{ border-bottom:1px solid var(--rule); }
.v4-pr-faq-q{
  width:100%; cursor:pointer; appearance:none; background:transparent; border:0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px; text-align:left;
  font-family:var(--sans); font-size:clamp(15px,1.2vw,17px); font-weight:500;
  letter-spacing:-0.01em; color:var(--ink);
}
.v4-pr-faq-icon{
  position:relative; flex-shrink:0; width:16px; height:16px;
}
.v4-pr-faq-icon::before,
.v4-pr-faq-icon::after{
  content:""; position:absolute; background:var(--ink-faint);
  transition:transform .25s var(--ease, ease), opacity .2s ease;
}
.v4-pr-faq-icon::before{ left:0; top:7px; width:16px; height:2px; }      /* horizontal */
.v4-pr-faq-icon::after { left:7px; top:0; width:2px; height:16px; }      /* vertical */
.v4-pr-faq-item.is-open .v4-pr-faq-icon::after{ transform:scaleY(0); opacity:0; }
.v4-pr-faq-item.is-open .v4-pr-faq-icon::before{ background:var(--accent); }
.v4-pr-faq-a{
  overflow:hidden; max-height:0;
  transition:max-height .3s ease;
}
.v4-pr-faq-item.is-open .v4-pr-faq-a{ max-height:320px; }
.v4-pr-faq-a p{
  margin:0; padding:0 4px 22px;
  font-size:14.5px; line-height:1.6; color:var(--ink-dim); max-width:68ch;
}

/* Sections 03 + 04: use dark grey for .it spans instead of cobalt */
.v4-compare-section .h2 .it,
.v4-trust-section .h2 .it { color: #A0A0A6; }

/* Daily Digest pulse rows — 6-step sequential animation (tag, then text, per row).
   Suppresses the default li-level v4-inner-in for the pulse mock and instead
   animates each .v4-pulse-tag and > div as separate sequential steps. */

/* li shows immediately — children carry the animation */
.v4-mock-pulse.v4-in .v4-pulse-rows > li { animation: none; opacity: 1; transform: none; }

/* Initial hidden state */
.v4-mock-pulse .v4-pulse-rows .v4-pulse-tag,
.v4-mock-pulse .v4-pulse-rows > li > div { opacity: 0; }

/* Fire when card enters viewport */
.v4-cell-mock.v4-in .v4-pulse-rows .v4-pulse-tag,
.v4-cell-mock.v4-in .v4-pulse-rows > li > div {
  animation: v4-inner-in 0.32s ease-out both;
}

/* Row 1: FLAGGED tag → text */
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(1) .v4-pulse-tag { animation-delay: 0.22s; }
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(1) > div          { animation-delay: 0.48s; }
/* Row 2: DELAY tag → text */
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(2) .v4-pulse-tag { animation-delay: 0.74s; }
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(2) > div          { animation-delay: 1.00s; }
/* Row 3: SIGNAL tag → text */
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(3) .v4-pulse-tag { animation-delay: 1.26s; }
.v4-cell-mock.v4-in .v4-pulse-rows > li:nth-child(3) > div          { animation-delay: 1.52s; }

/* Hero secondary / alt CTA — de-emphasised text link below the primary button */
.v4-hero-alt-cta {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0;
  transition: color .15s;
}
.v4-hero-alt-cta:hover { color: var(--ink-dim); }

/* Footer request access text link */
.foot-request-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 6px;
  color: inherit;
  opacity: 0.75;
  border-bottom: 0;
  transition: opacity .15s;
}
.foot-request-link:hover {
  opacity: 1;
  text-decoration: none;
}