@font-face{
  font-family: 'ClioMono';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/PlexMono-500.woff2') format('woff2');
}
@font-face{
  font-family: 'ClioMono';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/PlexMono-700.woff2') format('woff2');
}
@font-face{
  font-family: 'ClioSans';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/PlexSans-400.woff2') format('woff2');
}
@font-face{
  font-family: 'ClioSans';
  font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/PlexSans-600.woff2') format('woff2');
}
@font-face{
  font-family: 'Archivo';
  font-weight: 600 700; font-style: normal; font-display: swap;
  font-stretch: 85% 110%;
  src: url('../fonts/Archivo-var.woff2') format('woff2');
}

/* ==========================================================================
   ClioIQ design system — "Instrument panel"
   The product's thesis is that the CRM is a story people tell and the calls
   are the instrument reading. So: quiet dark surfaces, one confident accent,
   data set in mono with real typographic care, argument set in sans.
   Mono is reserved for numbers, labels and metadata — that is what makes it
   read as *data* rather than as decoration.
   Fixed dark theme. No light mode, no toggle.
   ========================================================================== */
:root{
  /* --- page: warm off-white. Pure #FFF reads cheap and clinical; a warm
         paper white reads like a well-printed document, which is the product. --- */
  --paper:        #FBFAF7;
  --paper-alt:    #F4F2EC;
  --paper-raised: #FFFFFF;
  --paper-high:   #EEEBE3;

  /* --- lines: warm greys, never blue-grey, or the paper turns cold --- */
  --rule:         #E6E2D8;
  --rule-strong:  #D3CDBF;
  --rule-loud:    #B0A896;

  /* --- ink --- */
  --ink:       #15171B;
  --ink-dim:   #494E57;
  --ink-faint: #61666E;
  --ink-ghost: #8B9099;

  /* --- accent: a deep ink blue for structure and links. Reads authoritative
         on paper where a bright blue would read like a consumer app. --- */
  --accent:        #1D4E89;
  --accent-strong: #143A69;
  --accent-deep:   #0F2C50;
  --cat-blue:      #1D4E89;
  --cat-rose:      #A85F56;

  /* --- amber is the signature. Nobody else in this category owns it. --- */
  --highlighter:      #E8A31E;
  --highlighter-ink:  #1A1200;
  --ledger-green:     #17714A;
  --flag:             #BE3B27;

  /* --- action: dark ink button on paper = maximum contrast --- */
  --action:      #15171B;
  --action-hi:   #000000;
  --action-ink:  #FBFAF7;

  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* on paper the lit edge is white, and shadows are soft and neutral */
  --hairline: inset 0 1px 0 rgba(255,255,255,0.9);
  --e-1: 0 1px 2px rgba(21,23,27,0.06);
  --e-2: 0 8px 24px -10px rgba(21,23,27,0.16);
  --e-3: 0 30px 64px -28px rgba(21,23,27,0.30);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  --s-9: 72px; --s-10: 96px;
  --section:    clamp(72px, 9vw, 128px);
  --section-sm: clamp(56px, 6vw, 88px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* --- Product surfaces stay dark and sit *inset* into the paper page.
       Re-declaring the same token names flips a whole component with no
       change to its own CSS — and no markup change across 40 pages.
       The result: the only dark mass on the page is the product itself. --- */
.surface-dark,
.call-visual,
.ledger-demo,
.copilot,
.statement,
.cta-band{
  --paper:        #0B0E15;
  --paper-alt:    #11151F;
  --paper-raised: #171C29;
  --paper-high:   #1F2634;
  --rule:         #272E3E;
  --rule-strong:  #39425600;
  --rule-strong:  #394256;
  --rule-loud:    #4C5670;
  --ink:          #F2F4F7;
  --ink-dim:      #B4BCC8;
  --ink-faint:    #8F98A6;
  --ink-ghost:    #666F7E;
  --accent:        #7DB2F0;
  --accent-strong: #A6CCF7;
  --accent-deep:   #2C5F9E;
  --highlighter:   #F5B841;
  --ledger-green:  #6FD39B;
  --flag:          #F0705B;
  --action:        #F5F7FA;
  --action-hi:     #FFFFFF;
  --action-ink:    #0B0E15;
  --hairline: inset 0 1px 0 rgba(255,255,255,0.06);
  color-scheme: dark;
  color: var(--ink);
}


*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "ClioSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--highlighter); color: var(--highlighter-ink); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
p{ margin: 0; }

/* --- Type scale. Headings are sans now: mono at display size is a
       readability tax and reads "terminal", not "enterprise". Weight 600 at
       tight tracking carries the authority instead. --- */
h1,h2,h3,h4{
  margin: 0; font-weight: 600;
  text-wrap: balance;
  letter-spacing: -0.028em;
  line-height: 1.08;
}
h3,h4{ letter-spacing: -0.018em; line-height: 1.25; }

.mono{ font-family: "ClioMono", ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; }
.tab{ font-variant-numeric: tabular-nums; }

/* the one label style used by every eyebrow, stamp and column header */
.eyebrow, .mega-col-label, .col-head, .logo-strip-label, .hub-side-label,
.statement-col-title, .funnel-head, .foot-col-label, .feature-nav-label,
.proof-label, .tag-label, .savings-side-label, .marquee-label{
  font-family: "ClioMono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 900px){ .wrap{ padding: 0 28px; } }
@media (max-width: 560px){ .wrap{ padding: 0 20px; } }

:focus-visible{
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--action); color: var(--action-ink);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600; font-size: 14px;
}
.skip-link:focus{ left: 0; }

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

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.scrolled{
  border-bottom-color: var(--rule);
  background: color-mix(in oklab, var(--paper) 94%, transparent);
}
section[id]{ scroll-margin-top: 92px; }
.ledger-card[id], .section-head[id]{ scroll-margin-top: 110px; }

.topbar-inner{ display: flex; align-items: center; gap: var(--s-6); height: 68px; }
.logo{
  display: flex; align-items: center; gap: 10px;
  font-family: "ClioMono", monospace;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--ink);
}
.logo img{ height: 26px; width: auto; display: block; }

nav.primary{ display: flex; align-items: center; gap: 2px; flex: 1; }
nav.primary details{ position: relative; }
nav.primary summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-dim);
  transition: color .18s var(--ease), background .18s var(--ease);
}
nav.primary summary::-webkit-details-marker{ display: none; }
nav.primary summary:hover{ color: var(--ink); background: var(--paper-alt); }
nav.primary details[open] summary{ color: var(--ink); background: var(--paper-raised); }
nav.primary summary .chev{ transition: transform .22s var(--ease); opacity: .65; }
nav.primary details[open] summary .chev{ transform: rotate(180deg); opacity: 1; }

.plain-link{
  padding: 9px 13px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink-dim);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.plain-link:hover{ color: var(--ink); background: var(--paper-alt); }
.plain-link.active{ color: var(--ink); }

.mega-panel{
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 620px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--e-3), var(--hairline);
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  border-radius: var(--r-lg);
  animation: mega-in .2s var(--ease-out);
}
@keyframes mega-in{ from{ opacity: 0; transform: translateY(-6px); } }
.mega-panel.two-col{ grid-template-columns: repeat(2, 1fr); min-width: 460px; }
.mega-panel.one-col{ grid-template-columns: 1fr; min-width: 280px; }
.mega-col-label{
  color: var(--ink-faint);
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.mega-col a{
  display: block; padding: 9px 10px; margin: 0 -10px;
  border-radius: var(--r-sm);
  transition: background .16s var(--ease);
}
.mega-col a:hover{ background: var(--paper-high); }
.mega-link-title{
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: color .16s var(--ease);
}
.mega-link-desc{ font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.45; }
.mega-col a:hover .mega-link-title{ color: var(--accent-strong); }

/* ==========================================================================
   Buttons — one shape language, real press + hover feedback
   ========================================================================== */
.auth-actions{ display: flex; align-items: center; gap: 10px; }
.btn{
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:active{ transform: translateY(1px); }

.btn-ghost{ color: var(--ink); border-color: var(--rule-strong); background: transparent; }
.btn-ghost:hover{ background: var(--paper-raised); border-color: var(--rule-loud); }

/* Primary action. Highest contrast object on the page — nothing else
   competes with it. Amber is freed to mean "attention" everywhere else. */
.btn-solid, .btn-mark{
  background: var(--action); color: var(--action-ink);
  box-shadow: var(--e-1);
}
.btn-solid:hover, .btn-mark:hover{
  background: var(--action-hi);
  box-shadow: 0 6px 20px -6px rgba(245,247,250,0.3), var(--e-1);
  transform: translateY(-1px);
}
.btn-solid:active, .btn-mark:active{ transform: translateY(0); box-shadow: var(--e-1); }

.btn-lg{ padding: 14px 26px; font-size: 15.5px; border-radius: var(--r-md); }

.nav-toggle{ display: none; }
.mobile-panel{ display: none; }
@media (max-width: 1040px){
  nav.primary, .auth-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: inline-flex; min-height: 44px; }
  .topbar-inner > .auth-actions{ margin-left: auto; }
  .topbar-inner{ gap: var(--s-4); }
  .mobile-panel.open{
    display: block; position: fixed; inset: 68px 0 0 0; z-index: 39;
    background: var(--paper); overflow-y: auto; padding: var(--s-5) 28px var(--s-8);
    animation: panel-in .24s var(--ease-out);
  }
  @keyframes panel-in{ from{ opacity: 0; transform: translateY(-8px); } }
  .mobile-panel details{ border-bottom: 1px solid var(--rule); }
  .mobile-panel summary{
    padding: 18px 0; font-size: 16px; font-weight: 600; cursor: pointer;
    list-style: none; display: flex; align-items: center; justify-content: space-between;
  }
  .mobile-panel summary::-webkit-details-marker{ display: none; }
  .mobile-panel summary::after{
    content: "+"; font-family: "ClioMono", monospace; color: var(--ink-faint); font-size: 18px;
  }
  .mobile-panel details[open] summary::after{ content: "\2212"; }
  .mobile-panel .mega-panel{
    position: static; min-width: 0; grid-template-columns: 1fr;
    border: none; box-shadow: none; background: transparent;
    padding: 0 0 var(--s-4); animation: none; gap: var(--s-4);
  }
  .mobile-panel .mega-col{ padding-bottom: var(--s-2); }
  .mobile-panel .mega-col a{ padding: 11px 12px; margin: 0 -12px; }
  .mobile-panel a.plain-link{
    display: block; padding: 18px 0; border-bottom: 1px solid var(--rule);
    border-radius: 0; font-size: 16px; font-weight: 600; color: var(--ink);
  }
  .mobile-panel .auth-actions{ margin-top: var(--s-6); flex-direction: column; align-items: stretch; }
  .mobile-panel .auth-actions .btn{ text-align: center; padding: 15px 22px; font-size: 16px; }
}

/* ==========================================================================
   Hero
   The one place on the site that gets atmosphere: a single low-opacity
   radial and a faint grid. Restraint is the point — no gradient stacking.
   ========================================================================== */
.hero{ position: relative; padding: clamp(56px, 7vw, 96px) 0 var(--section-sm); overflow: hidden; }
.hero::before{
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 780px;
  background:
    radial-gradient(58% 52% at 20% 0%, rgba(232,163,30,0.10), transparent 70%),
    radial-gradient(48% 50% at 86% 8%, rgba(29,78,137,0.07), transparent 72%);
  pointer-events: none; z-index: 0;
}
.hero::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(21,23,27,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,27,0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 60% at 50% 0%, #000 30%, transparent 78%);
}
.hero > *{ position: relative; z-index: 1; }

.eyebrow{ color: var(--accent); margin-bottom: var(--s-4); }

/* positioning line as a pill — reads as a live status, which is the product */
.hero-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 12px; border-radius: var(--r-full);
  border: 1px solid var(--rule-strong); background: var(--paper-raised);
  box-shadow: var(--hairline);
  font-family: "ClioMono", monospace; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: var(--s-5);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hero-badge:hover{ border-color: var(--rule-loud); color: var(--ink); }
.hero-badge .live{
  width: 7px; height: 7px; border-radius: 50%; background: var(--ledger-green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ledger-green) 22%, transparent);
  animation: pulse 2s ease-in-out infinite; flex-shrink: 0;
}

.hero h1{
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.03; letter-spacing: -0.035em;
  max-width: 17ch;
}
.hero h1 .accent{
  color: var(--ink);
  background-image: linear-gradient(180deg, transparent 58%, var(--highlighter) 58%, var(--highlighter) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: marker 1s var(--ease-out) .35s forwards;
  padding-inline: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@keyframes marker{ to{ background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce){ .hero h1 .accent{ background-size: 100% 100%; animation: none; } }
.hero-sub{
  margin-top: var(--s-5); max-width: 54ch;
  font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.62; color: var(--ink-dim);
}
.hero-actions{ display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.hero-actions .btn{ padding: 14px 26px; font-size: 15.5px; border-radius: var(--r-md); }

/* trust row — replaces the old floating timer line with real reassurance */
.hero-trust{
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.hero-trust span{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-faint);
}
.hero-trust svg{ width: 14px; height: 14px; color: var(--ledger-green); flex-shrink: 0; }

.hero-meta{
  margin-top: var(--s-3); font-family: "ClioMono", monospace; font-size: 12.5px;
  color: var(--ink-faint); display: flex; align-items: center; gap: 8px; justify-content: center;
}
.rec-dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--flag);
  animation: pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .3; } }

.hero-grid{ display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 1040px){ .hero-grid{ grid-template-columns: 1fr; gap: var(--s-8); } }

/* ==========================================================================
   Call visual
   ========================================================================== */
.call-visual{
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--e-3), var(--hairline);
}
@media (max-width: 1040px){ .call-visual{ max-width: 480px; margin-inline: auto; } }

.proof-visual{ display: flex; flex-direction: column; align-items: center; gap: var(--s-4); margin-top: var(--s-7); }
.proof-visual .call-visual{ width: 100%; max-width: 500px; }
.proof-visual .copilot{ width: 100%; max-width: 600px; }
.proof-visual .statement{ width: 100%; max-width: 680px; }
.proof-caption{ font-size: 13px; color: var(--ink-faint); text-align: center; max-width: 500px; }

.call-visual-head{
  display: flex; align-items: center; gap: var(--s-3); padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-high);
  font-family: "ClioMono", monospace; font-size: 11.5px; color: var(--ink-dim);
}
.win-dots{ display: flex; gap: 6px; }
.win-dots .dot{ width: 9px; height: 9px; border-radius: 50%; opacity: .85; }
.win-dots .dot.red{ background: var(--flag); }
.win-dots .dot.amber{ background: var(--highlighter); }
.win-dots .dot.green{ background: var(--ledger-green); }
.call-visual-head .live-tag{
  margin-left: auto; font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--flag);
  border: 1px solid color-mix(in oklab, var(--flag) 45%, transparent);
  background: color-mix(in oklab, var(--flag) 12%, transparent);
  border-radius: var(--r-xs); padding: 2px 7px;
}
.call-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.call-tile{
  background: var(--paper); aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3); position: relative;
}
.call-tile .avatar-mark{
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-weight: 700; font-size: 16px;
  color: var(--paper); background: var(--av, var(--ink-faint));
}
.call-tile .avatar-mark.photo{ background: none; overflow: hidden; }
.call-tile .avatar-mark.photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.call-tile .tile-name{ font-size: 11.5px; color: var(--ink-dim); font-family: "ClioMono", monospace; }
.call-tile:not(.bot-tile) .tile-name{
  position: absolute; left: 10px; bottom: 10px;
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule-strong);
  color: var(--ink); padding: 3px 9px; border-radius: var(--r-xs); font-size: 10.5px;
}
.call-tile.speaking{ box-shadow: inset 0 0 0 2px var(--accent); }
.call-tile.speaking .tile-name{
  background: var(--accent); color: var(--action-ink); border-color: var(--accent); font-weight: 700;
}
.call-tile.more .avatar-mark{ background: transparent; border: 1.5px dashed var(--rule-loud); color: var(--ink-faint); }
.call-tile.bot-tile{ background: var(--paper-alt); }
.avatar-mark.bot-mark{ background: var(--paper-raised); border: 1px solid var(--rule-loud); }
.avatar-mark.bot-mark img{ width: 30px; height: 30px; object-fit: contain; }
.call-tile.bot-tile .tile-name{ color: var(--accent); display: flex; align-items: center; gap: 6px; justify-content: center; }
.wave{ display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.wave span{ width: 2px; border-radius: 1px; background: var(--accent); animation: wave 1s ease-in-out infinite; }
.wave span:nth-child(2){ animation-delay: .12s; } .wave span:nth-child(3){ animation-delay: .24s; }
.wave span:nth-child(4){ animation-delay: .36s; } .wave span:nth-child(5){ animation-delay: .48s; }
@keyframes wave{ 0%,100%{ height: 3px; } 50%{ height: 13px; } }
.call-controls{
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-3); border-top: 1px solid var(--rule); background: var(--paper-high);
}
.call-controls .ctrl{
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule-loud);
  display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
}
.call-controls .ctrl.end{ background: var(--flag); border-color: var(--flag); color: #1A0B08; }

/* ==========================================================================
   Transcript → risk register
   ========================================================================== */
.ledger-demo{
  margin-top: var(--s-8);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--e-2), var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px){ .ledger-demo{ grid-template-columns: 1fr; } }
.ledger-demo .col{ padding: 0; min-height: 320px; display: flex; flex-direction: column; }
.ledger-demo .col + .col{ border-left: 1px solid var(--rule); background: var(--paper-alt); }
@media (max-width: 860px){ .ledger-demo .col + .col{ border-left: none; border-top: 1px solid var(--rule); } }
.col-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
}
.col-head .stamp{
  font-size: 10px; letter-spacing: .1em; font-weight: 700; padding: 3px 8px;
  border: 1px solid currentColor; border-radius: var(--r-xs);
}
.col-raw .stamp{ color: var(--ink-faint); }
.col-filed .stamp{
  color: var(--ledger-green); border-color: color-mix(in oklab, var(--ledger-green) 45%, transparent);
  background: color-mix(in oklab, var(--ledger-green) 10%, transparent);
}

.transcript{ padding: var(--s-4) 20px; flex: 1; display: flex; flex-direction: column; gap: var(--s-3); }
.tline{
  font-family: "ClioMono", monospace; font-size: 13px; line-height: 1.6; color: var(--ink-dim);
  opacity: 0; transform: translateY(4px);
  animation: reveal .45s var(--ease-out) forwards;
}
.tline .who{
  color: var(--ink-ghost); margin-right: 9px; font-size: 10.5px;
  letter-spacing: .09em; font-weight: 700;
}
.tline .tag{
  background: var(--highlighter); color: var(--highlighter-ink);
  padding: 1px 5px; border-radius: 3px; font-weight: 700;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@keyframes reveal{ to{ opacity: 1; transform: translateY(0); } }

.ledger-table{ padding: var(--s-3) 20px var(--s-4); flex: 1; }
.lrow{
  display: grid; grid-template-columns: 104px 1fr 84px; gap: var(--s-3);
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  font-size: 13px; opacity: 0; animation: reveal .45s var(--ease-out) forwards;
}
.lrow:last-child{ border-bottom: none; }
.lrow .field{
  font-family: "ClioMono", monospace; color: var(--ink-faint);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; padding-top: 2px;
}
.lrow .val{ color: var(--ink); }
.lrow .owner{ text-align: right; color: var(--accent); font-family: "ClioMono", monospace; font-size: 11.5px; }

/* ==========================================================================
   Copilot — full-bleed band so it reads as a different chapter of the page
   ========================================================================== */
.copilot-wrap{
  padding: var(--section) 0;
  background: var(--paper-alt);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.copilot-layout{ display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 1000px){ .copilot-layout{ grid-template-columns: 1fr; } }
.copilot-layout .section-head{ margin-bottom: var(--s-6); }

.copilot-points{ display: flex; flex-direction: column; gap: var(--s-1); }
.copilot-point{
  display: flex; gap: var(--s-3); padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.copilot-point .cp-icon{
  width: 30px; height: 30px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-high); border: 1px solid var(--rule-strong); color: var(--accent);
}
.copilot-point .cp-icon svg{ width: 15px; height: 15px; }
.copilot-point strong{ display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.copilot-point p{ font-size: 13.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.5; }

.copilot{
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--paper-raised); overflow: hidden;
  box-shadow: var(--e-3), var(--hairline);
}
.copilot-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 13px 18px; border-bottom: 1px solid var(--rule); background: var(--paper-high);
  font-family: "ClioMono", monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
.mode-badge{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "ClioMono", monospace; font-size: 11.5px; text-transform: none; letter-spacing: 0;
  padding: 4px 12px; border: 1px solid var(--rule-loud); border-radius: var(--r-full); color: var(--ink-dim);
}
.mode-badge .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--ledger-green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ledger-green) 20%, transparent);
}
.copilot-body{ padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-height: 460px; }
@media (max-width: 640px){ .copilot-body{ min-height: 540px; padding: var(--s-4); } }

.co-msg{ display: flex; gap: var(--s-3); max-width: 640px; }
.co-msg.user{ margin-left: auto; flex-direction: row-reverse; }
.co-avatar{
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-size: 9.5px; font-weight: 700;
}
.co-msg.user .co-avatar{ background: var(--paper-high); border: 1px solid var(--rule-loud); color: var(--ink-dim); }
.co-msg.ai .co-avatar{ background: var(--accent); color: var(--action-ink); }
.co-bubble{
  background: var(--paper-high); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; line-height: 1.6; color: var(--ink-dim);
}
.co-msg.user .co-bubble{
  background: var(--action); color: var(--action-ink); border-color: transparent; font-weight: 500;
}

.co-cards{
  display: flex; flex-direction: column; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
  margin-top: var(--s-2); max-width: 540px;
}
.co-card-item{
  background: var(--paper-high); padding: 12px 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  transition: background .18s var(--ease);
}
.co-card-item:hover{ background: var(--paper-raised); }
.co-card-item strong{ font-size: 13.5px; color: var(--ink); }
.co-card-item p{ font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; line-height: 1.45; }
.co-badge{
  font-family: "ClioMono", monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 9px; border-radius: var(--r-xs); white-space: nowrap; margin-top: 1px;
  border: 1px solid transparent;
}
.co-badge.risk{ background: color-mix(in oklab, var(--flag) 15%, transparent); color: var(--flag); border-color: color-mix(in oklab, var(--flag) 32%, transparent); }
.co-badge.sched{ background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent-strong); border-color: color-mix(in oklab, var(--accent) 32%, transparent); }
.co-badge.due{ background: color-mix(in oklab, var(--highlighter) 16%, transparent); color: var(--highlighter); border-color: color-mix(in oklab, var(--highlighter) 34%, transparent); }

.co-divider{
  display: flex; align-items: center; gap: var(--s-3); margin: 2px 0;
  font-family: "ClioMono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint);
}
.co-divider::before, .co-divider::after{ content: ""; flex: 1; height: 1px; background: var(--rule); }
.co-citation{
  margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 7px;
  font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-faint);
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: var(--r-full); background: var(--paper-alt);
}
.co-citation::before{ content: "\2197"; color: var(--accent); }

.co-sync-fields{
  margin-top: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-alt); overflow: hidden;
}
.co-sync-row{
  display: grid; grid-template-columns: 104px 1fr; gap: var(--s-3);
  padding: 9px 14px; border-bottom: 1px solid var(--rule);
}
.co-sync-row:last-child{ border-bottom: none; }
.co-sync-row .field{
  font-family: "ClioMono", monospace; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint);
}
.co-sync-row .val{ font-size: 13px; color: var(--ink); font-weight: 500; }

.co-steps{ margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.co-steps li{ position: relative; padding: 5px 0 5px 22px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.co-steps li::before{
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.co-steps li strong{ color: var(--ink); font-weight: 600; }

.co-turn{ display: flex; flex-direction: column; gap: var(--s-5); }
.co-turn.co-out{ animation: co-turn-out .4s var(--ease) forwards; }
@keyframes co-turn-out{ to{ opacity: 0; transform: translateY(-8px); } }
.co-reveal{ opacity: 0; transform: translateY(8px); }
.co-reveal.in{ animation: reveal .45s var(--ease-out) forwards; }

.co-typing{
  display: inline-flex; align-items: center; gap: 5px; padding: 14px 18px;
  background: var(--paper-high); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.co-typing span{ width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); animation: co-bounce 1.1s infinite ease-in-out; }
.co-typing span:nth-child(2){ animation-delay: .15s; }
.co-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes co-bounce{ 0%, 60%, 100%{ transform: translateY(0); opacity: .35; } 30%{ transform: translateY(-5px); opacity: 1; } }

.co-action{
  margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-3); max-width: 540px;
  font-size: 13px; color: var(--ink-dim);
  background: var(--paper-alt); border: 1px dashed var(--rule-loud);
  border-radius: var(--r-md); padding: 11px 14px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.co-action .confirm-btn{
  margin-left: auto; flex-shrink: 0; background: var(--action); color: var(--action-ink);
  font-weight: 700; font-size: 12px; padding: 6px 14px; border-radius: var(--r-sm);
  transition: transform .15s var(--ease);
}
.co-action .confirm-btn.pressed{ transform: scale(0.92); }
.co-action.done{
  border-style: solid; border-color: color-mix(in oklab, var(--ledger-green) 50%, transparent);
  background: color-mix(in oklab, var(--ledger-green) 9%, var(--paper-alt));
}
.co-synced{
  display: flex; align-items: center; gap: 8px;
  font-family: "ClioMono", monospace; font-size: 12.5px; color: var(--ledger-green);
}

/* ==========================================================================
   Section head — one rhythm for every section on the site
   ========================================================================== */
.section-head{ max-width: 680px; margin-bottom: var(--s-8); }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head .eyebrow{ margin-bottom: var(--s-3); }
.section-head h2{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08; letter-spacing: -0.032em;
}
.section-head p{
  margin-top: var(--s-4); color: var(--ink-dim);
  font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; max-width: 58ch;
}
.section-head.center p{ margin-inline: auto; }

/* ==========================================================================
   Integration hub
   ========================================================================== */
.logo-strip-wrap{ padding: var(--section) 0; border-bottom: 1px solid var(--rule); }
.logo-strip-label{ color: var(--ink-faint); text-align: center; margin-bottom: var(--s-8); }
.logo-chip{
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 18px; box-shadow: var(--hairline);
}
.logo-chip img{ height: 20px; width: auto; max-width: 92px; object-fit: contain; display: block; }

.hub-section-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 940px){ .hub-section-grid{ grid-template-columns: 1fr; } }

.hub-diagram{ position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin: 0 auto; }
@media (max-width: 640px){ .hub-diagram{ display: none; } }
.hub-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-svg line{
  stroke: var(--rule-loud); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round;
  animation: hub-flow 3s linear infinite;
}
@keyframes hub-flow{ to{ stroke-dashoffset: -18; } }

.hub-center{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--paper-raised); border: 1px solid var(--rule-loud);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px var(--paper), var(--e-2); z-index: 2;
}
.hub-center img{ width: 38px; height: 38px; object-fit: contain; }
.hub-center::after{
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0;
  animation: hub-ping 3s ease-out infinite;
}
@keyframes hub-ping{ 0%{ transform: scale(0.9); opacity: .5; } 80%,100%{ transform: scale(1.55); opacity: 0; } }

.hub-node{
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  z-index: 2; opacity: 0; animation: hub-in .55s var(--ease-out) forwards;
}
@keyframes hub-in{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.hub-badge{
  width: 54px; height: 54px; border-radius: var(--r-lg);
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px var(--paper), var(--e-1), var(--hairline);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.hub-node:hover .hub-badge{ transform: translateY(-3px); border-color: var(--rule-loud); }
.hub-badge img{ width: 26px; height: 26px; object-fit: contain; }
.hub-node-label{ font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

.hub-mobile{ display: none; }
@media (max-width: 640px){ .hub-mobile{ display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; } }

.hub-side-label{ color: var(--ink-faint); margin-bottom: var(--s-3); }
.hub-side h3{ font-size: clamp(22px, 2.4vw, 30px); max-width: 18ch; }
.hub-side > p{ margin-top: var(--s-3); color: var(--ink-dim); font-size: 15.5px; max-width: 46ch; }
.sync-list{ margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.sync-row{
  display: flex; align-items: center; gap: var(--s-3); padding: 15px 0;
  border-bottom: 1px solid var(--rule); font-size: 14px;
}
.sync-row .dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sync-row .dot.live{ background: var(--ledger-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ledger-green) 20%, transparent); }
.sync-row .dot.sched{ background: var(--highlighter); box-shadow: 0 0 0 3px color-mix(in oklab, var(--highlighter) 20%, transparent); }
.sync-row strong{ font-weight: 600; }
.sync-row span.status{
  margin-left: auto; font-family: "ClioMono", monospace; font-size: 11.5px;
  color: var(--ink-faint); text-align: right;
}

/* ==========================================================================
   Statement of pipeline — the money shot, so it gets the most elevation
   ========================================================================== */
.statement-wrap{ padding-block: var(--section); }
.statement{
  border: 1px solid var(--rule-strong); border-radius: var(--r-xl);
  background: var(--paper-raised); overflow: hidden;
  box-shadow: var(--e-3), var(--hairline);
}
.statement-head{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  padding: 16px var(--s-5); border-bottom: 1px solid var(--rule); background: var(--paper-high);
  font-family: "ClioMono", monospace; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
.statement-head .filed{
  color: var(--ledger-green); display: inline-flex; align-items: center; gap: 7px;
  text-transform: none; letter-spacing: .04em;
}
.statement-head .filed::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ledger-green) 20%, transparent);
}
.statement-stats{ display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
@media (max-width: 860px){ .statement-stats{ grid-template-columns: repeat(2, 1fr); } }
.statement-stat{ padding: var(--s-5); border-left: 1px solid var(--rule); }
.statement-stat:first-child{ border-left: none; }
@media (max-width: 860px){
  .statement-stat:nth-child(odd){ border-left: none; }
  .statement-stat:nth-child(n+3){ border-top: 1px solid var(--rule); }
}
.statement-stat .label{
  font-family: "ClioMono", monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint);
}
.statement-stat .value{
  font-family: "ClioMono", monospace; font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; margin-top: var(--s-2);
  line-height: 1.1;
}
.statement-stat .value.flag{ color: var(--flag); }
.statement-stat .delta{ font-size: 12.5px; margin-top: 6px; color: var(--ledger-green); }
.statement-stat .delta.warn{ color: var(--flag); }

.funnel-block{ padding: var(--s-5); border-bottom: 1px solid var(--rule); }
.funnel-head{ color: var(--ink-faint); margin-bottom: var(--s-4); }
.funnel-rows{ display: flex; flex-direction: column; gap: var(--s-3); }
.funnel-row{ display: grid; grid-template-columns: 100px 1fr 56px; align-items: center; gap: var(--s-3); }
.funnel-row .stage{ font-size: 13.5px; color: var(--ink-dim); }
.funnel-row .bar-track{ height: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-full); overflow: hidden; }
.funnel-row .bar{
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left; animation: bar-grow 1s var(--ease-out) both;
}
@keyframes bar-grow{ from{ transform: scaleX(0); } }
.funnel-row .bar.won{ background: linear-gradient(90deg, color-mix(in oklab, var(--ledger-green) 55%, #000), var(--ledger-green)); }
.funnel-row .count{ text-align: right; font-size: 13.5px; color: var(--ink); font-weight: 600; }
@media (max-width: 480px){ .funnel-row{ grid-template-columns: 78px 1fr 46px; gap: var(--s-2); } }

@media (max-width: 640px){
  .statement-stat{ padding: 20px 18px; }
  .statement-stat .label{ font-size: 11px; line-height: 1.4; }
  .funnel-block{ padding: 22px 18px; }
  .funnel-rows{ gap: var(--s-4); }
  .statement-col{ padding: 20px 18px; }
}

.statement-body{ display: grid; grid-template-columns: 1.3fr 1fr; }
@media (max-width: 860px){ .statement-body{ grid-template-columns: 1fr; } }
.statement-col{ padding: var(--s-5); }
.statement-col + .statement-col{ border-left: 1px solid var(--rule); }
@media (max-width: 860px){ .statement-col + .statement-col{ border-left: none; border-top: 1px solid var(--rule); } }
.statement-col-title{ color: var(--ink-faint); margin-bottom: var(--s-3); }

.risk-row{
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4);
  padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.risk-row:last-child{ border-bottom: none; }
.risk-row .acct{ font-weight: 600; }
.risk-row .amt{ font-family: "ClioMono", monospace; color: var(--ink-dim); font-size: 13px; }
.risk-score{
  font-family: "ClioMono", monospace; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-xs); border: 1px solid transparent; min-width: 38px; text-align: center;
}
.risk-score.high{ background: color-mix(in oklab, var(--flag) 14%, transparent); color: var(--flag); border-color: color-mix(in oklab, var(--flag) 30%, transparent); }
.risk-score.mid{ background: color-mix(in oklab, var(--highlighter) 16%, transparent); color: var(--highlighter); border-color: color-mix(in oklab, var(--highlighter) 32%, transparent); }

.rep-row{
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--s-3);
  padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.rep-row:last-child{ border-bottom: none; }
.rep-mark{
  font-family: "ClioMono", monospace; font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: var(--r-sm); text-align: center; padding: 5px 0;
}
.rep-row .name{ font-weight: 600; }
.rep-row .meta{ display: block; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.rep-row .rev{ font-family: "ClioMono", monospace; color: var(--ink); font-size: 13.5px; font-weight: 700; }

/* ==========================================================================
   Flow — a real timeline with a connecting rail, not five equal boxes
   ========================================================================== */
.flow-wrap{ padding-block: 0 var(--section); }
.flow{ display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); position: relative; }
.flow-node{ position: relative; padding-top: var(--s-7); }
.flow-node::before{
  content: ""; position: absolute; left: 38px; right: calc(-1 * var(--s-4)); top: 19px;
  height: 1px; background: var(--rule-strong);
}
.flow-node:last-child::before{ display: none; }
@media (max-width: 940px){
  .flow{ grid-template-columns: 1fr; gap: 0; }
  .flow-node{ padding: 0 0 var(--s-6) 56px; }
  .flow-node::before{
    left: 19px; right: auto; top: 38px; bottom: 0;
    width: 1px; height: auto;
  }
}
.flow-node .n{
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper-raised); border: 1px solid var(--rule-loud);
  display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-size: 12px; font-weight: 700; color: var(--accent);
  box-shadow: 0 0 0 6px var(--paper); z-index: 1;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.flow-node:hover .n{ border-color: var(--accent); transform: scale(1.06); }
.flow-node h4{ font-size: 16px; margin-bottom: 6px; }
.flow-node p{ font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }
.flow-node .arrow{ display: none; }

/* ==========================================================================
   Proof / metric band
   ========================================================================== */
.proof{ border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-alt); }
.proof-grid{ display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px){ .proof-grid{ grid-template-columns: 1fr; } }
.proof-item{ padding: var(--s-7) var(--s-6); border-left: 1px solid var(--rule); }
.proof-item:first-child{ border-left: none; }
@media (max-width: 800px){
  .proof-item{ border-left: none; border-top: 1px solid var(--rule); }
  .proof-item:first-child{ border-top: none; }
}
.proof-label{ color: var(--ink-faint); }
.proof-value{
  font-family: "ClioMono", monospace; font-size: clamp(28px, 3vw, 38px);
  font-weight: 700; letter-spacing: -0.03em; margin-top: var(--s-2);
}
.proof-was{ font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
.proof-was::before{ content: "was "; }

/* ==========================================================================
   Contrast — asymmetric on purpose. The "real" side is the answer, so it
   carries the accent border and the elevation; the CRM side recedes.
   ========================================================================== */
.contrast{ padding-block: var(--section); }
.contrast-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  align-items: stretch; position: relative;
}
@media (max-width: 820px){ .contrast-grid{ grid-template-columns: 1fr; } }
.contrast-panel{
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
  display: flex; flex-direction: column;
}
/* The CRM side recedes through surface + muted ink, not opacity — dimming a
   whole panel would drag its text under the contrast floor. */
.contrast-panel.draft{ background: transparent; border-style: dashed; }
.contrast-panel.draft q{ color: var(--ink-faint); }
.contrast-panel.filed{
  background: var(--paper-raised);
  border-color: var(--rule-strong);
  box-shadow: var(--e-2), var(--hairline);
  position: relative; overflow: hidden;
}
.contrast-panel.filed::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--highlighter), var(--flag));
}
.contrast-panel .stamp-lg{
  display: inline-flex; align-self: flex-start; align-items: center;
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .12em; font-weight: 700;
  padding: 5px 11px; border-radius: var(--r-xs); margin-bottom: var(--s-5);
}
.contrast-panel.draft .stamp-lg{ color: var(--ink-faint); border: 1px solid var(--rule-strong); }
.contrast-panel.filed .stamp-lg{ color: var(--highlighter-ink); background: var(--highlighter); }
.contrast-panel q{
  display: block; font-size: 16px; line-height: 1.55; color: var(--ink-dim);
  margin: 0 0 var(--s-3); quotes: none;
}
.contrast-panel.filed q{ color: var(--ink); }
.contrast-panel .rec{
  font-size: 13.5px; color: var(--ledger-green); margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--rule); font-family: "ClioMono", monospace; line-height: 1.5;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.ledger-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 940px){ .ledger-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ledger-grid{ grid-template-columns: 1fr; } }
.ledger-grid.four{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .ledger-grid.four{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .ledger-grid.four{ grid-template-columns: 1fr; } }
.ledger-card{
  background: var(--paper-alt); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ledger-card:hover{
  border-color: var(--rule-strong); background: var(--paper-raised);
  transform: translateY(-3px); box-shadow: var(--e-2), var(--hairline);
}
.ledger-card:target{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ledger-card.wide{ grid-column: 1 / -1; }
.ledger-card .tag-label{
  color: var(--accent); display: inline-flex; align-items: center; gap: 8px;
}
.ledger-card .tag-label::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.ledger-card h3{ font-size: 19px; margin-top: var(--s-3); line-height: 1.3; }
.ledger-card p{ margin-top: var(--s-3); color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
.card-link{
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4);
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.card-link:hover{ gap: 10px; color: var(--accent-strong); }
.card-link svg{ width: 13px; height: 13px; }

/* icon tile used on feature cards */
.card-icon{
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--paper-high); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  margin-bottom: var(--s-4); box-shadow: var(--hairline);
}
.card-icon svg{ width: 19px; height: 19px; }

/* ==========================================================================
   Module index
   ========================================================================== */
.index{ padding-block: 0 var(--section); }
.index-list{ border-top: 1px solid var(--rule); }
.index-row{
  display: grid; grid-template-columns: 72px 1fr 1.4fr; gap: var(--s-5);
  padding: var(--s-6) var(--s-3); border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(12px);
  position: relative;
  transition: background .25s var(--ease);
}
.index-row::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.index-row:hover{ background: var(--paper-alt); }
.index-row:hover::after{ transform: scaleY(1); }
.index-row.in{ animation: reveal .55s var(--ease-out) forwards; }
@media (max-width: 780px){
  .index-row{ grid-template-columns: 44px 1fr; gap: var(--s-3); }
  .index-row .index-desc{ grid-column: 2; }
}
.index-num{
  font-family: "ClioMono", monospace; color: var(--ink-ghost); font-size: 13px;
  font-weight: 700; letter-spacing: .06em; padding-top: 5px;
  transition: color .25s var(--ease);
}
.index-row:hover .index-num{ color: var(--accent); }
.index-title{ font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.index-desc{ color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; max-width: 58ch; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position: relative; overflow: hidden;
  background: var(--paper);
  padding-block: var(--section);
}
.cta-band::before{
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 520px;
  background: radial-gradient(50% 60% at 50% 100%, rgba(125,178,240,0.16), transparent 70%);
  pointer-events: none;
}
.cta-band-inner{
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-5);
}
.cta-band h2{ font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.035em; max-width: 18ch; color: var(--ink); }
.cta-band p{ color: var(--ink-dim); max-width: 48ch; font-size: 17px; margin-top: var(--s-3); }
.cta-band .btn{ padding: 15px 30px; font-size: 16px; border-radius: var(--r-md); }
.cta-note{ font-family: "ClioMono", monospace; font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; }

/* ==========================================================================
   Sub-page heroes + long-form body
   ========================================================================== */
.page-hero{ padding-block: var(--section-sm); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-hero::before{
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 460px;
  background: radial-gradient(50% 60% at 30% 0%, rgba(125,178,240,0.09), transparent 70%);
  pointer-events: none;
}
.page-hero > *{ position: relative; }
.page-hero h1{ font-size: clamp(32px, 4.4vw, 54px); max-width: 20ch; letter-spacing: -0.035em; }
.page-hero p{ margin-top: var(--s-5); max-width: 58ch; color: var(--ink-dim); font-size: 17px; line-height: 1.6; }

.back-link{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-faint); margin: var(--s-6) 0 0;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.back-link:hover{ color: var(--ink); gap: 10px; }
.back-link svg{ width: 13px; height: 13px; }

.feature-hero{ padding-block: var(--s-5) var(--section-sm); border-bottom: 1px solid var(--rule); }
.feature-hero .eyebrow{ display: flex; align-items: center; gap: var(--s-2); color: var(--accent); }
.feature-hero .eyebrow .sep{ color: var(--rule-loud); }
.feature-hero h1{ font-size: clamp(32px, 4.4vw, 52px); max-width: 21ch; letter-spacing: -0.035em; margin-top: var(--s-3); }
.feature-hero p{ margin-top: var(--s-4); max-width: 62ch; color: var(--ink-dim); font-size: 17px; line-height: 1.6; }

.feature-body{ padding-block: var(--section-sm); max-width: 70ch; }
.feature-body h2{ font-size: clamp(22px, 2.2vw, 28px); margin-top: var(--s-8); letter-spacing: -0.025em; }
.feature-body h2:first-child{ margin-top: 0; }
.feature-body p{ margin-top: var(--s-4); color: var(--ink-dim); font-size: 16px; line-height: 1.72; }
.feature-body p strong{ color: var(--ink); font-weight: 600; }
.feature-body ul{ margin: var(--s-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.feature-body ul li{ padding-left: 24px; position: relative; color: var(--ink-dim); font-size: 16px; line-height: 1.6; }
.feature-body ul li::before{
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.feature-body ol.doc-steps{
  margin: var(--s-4) 0 0; padding: 0; list-style: none; counter-reset: doc-step;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.feature-body ol.doc-steps li{
  padding-left: 30px; position: relative; color: var(--ink-dim);
  font-size: 16px; line-height: 1.6; counter-increment: doc-step;
}
.feature-body ol.doc-steps li::before{
  content: counter(doc-step); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper-high); border: 1px solid var(--rule-strong);
  color: var(--accent); font-family: "ClioMono", monospace; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.article-meta{ margin-top: var(--s-4); font-family: "ClioMono", monospace; font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; }
.feature-visual-wrap{ padding-block: 0 var(--section-sm); }

.feature-nav{ border-top: 1px solid var(--rule); padding-block: var(--s-7) var(--section-sm); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.feature-nav-label{ width: 100%; color: var(--ink-faint); margin-bottom: var(--s-1); }
.feature-nav a{
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-4) var(--s-4);
  color: var(--ink); flex: 1; min-width: 200px; background: var(--paper-alt);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.feature-nav a:hover{ border-color: var(--rule-strong); background: var(--paper-raised); transform: translateY(-2px); }
.feature-nav a strong{ font-size: 14.5px; font-weight: 600; }
.feature-nav a span{ font-size: 12.5px; color: var(--ink-faint); }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-toggle{
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: var(--s-5); padding: 4px; background: var(--paper-alt);
}
.pricing-toggle button{
  font-size: 13.5px; font-weight: 600; padding: 9px 16px; background: transparent;
  color: var(--ink-faint); border: none; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pricing-toggle button.active{ background: var(--paper-high); color: var(--ink); box-shadow: var(--e-1); }
.pricing-toggle button:hover:not(.active){ color: var(--ink); }
.pricing-toggle .save-badge{
  font-family: "ClioMono", monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--highlighter); color: var(--highlighter-ink); padding: 3px 7px;
  border-radius: var(--r-xs); font-weight: 700;
}
.price-monthly{ display: none; }
html.billing-monthly .price-yearly{ display: none; }
html.billing-monthly .price-monthly{ display: inline; }

.price-table{
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-alt); box-shadow: var(--e-2), var(--hairline);
}
.price-row{ display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.price-row:last-child{ border-bottom: none; }
.price-row > div{ padding: 16px 18px; border-left: 1px solid var(--rule); font-size: 14px; }
.price-row > div:first-child{
  border-left: none; color: var(--ink-dim);
  font-family: "ClioMono", monospace; font-size: 12.5px;
}
.price-row.head > div{ font-weight: 700; font-size: 15px; color: var(--ink); background: var(--paper-high); }
.price-row.head > div:first-child{ background: transparent; }
.price-row.group-label > div{
  background: var(--paper-raised); font-family: "ClioMono", monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; padding: 10px 18px;
}
.price-row.group-label > div:first-child{ color: var(--accent); font-weight: 700; }
.price-row > div a:not(.btn){ color: inherit; border-bottom: 1px dotted var(--ink-faint); }
.price-row > div a:not(.btn):hover{ color: var(--ink); border-bottom-color: var(--ink); }
.hint{ cursor: help; color: var(--ink-faint); font-size: 12.5px; border-bottom: 1px dotted var(--ink-faint); }
.hint:hover{ color: var(--ink); }
.price-table .price-row > div:nth-child(4){ background: rgba(232,163,30,0.07); }
.pop-badge{
  display: inline-block; margin-left: var(--s-2); font-family: "ClioMono", monospace;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--highlighter); color: var(--highlighter-ink);
  padding: 3px 8px; border-radius: var(--r-xs); vertical-align: middle; font-weight: 700;
}
@media (max-width: 760px){ .price-table{ overflow-x: auto; } .price-row{ min-width: 820px; } }

.savings-band{
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--paper-alt); padding: var(--s-7); box-shadow: var(--hairline);
}
.savings-copy{ max-width: 640px; margin-bottom: var(--s-6); }
.savings-copy h2{ margin: var(--s-2) 0 var(--s-3); font-size: clamp(22px, 2.4vw, 30px); }
.savings-copy p{ color: var(--ink-dim); font-size: 15px; line-height: 1.6; }
.savings-compare{ display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); align-items: start; }
.savings-side-label{ color: var(--ink-faint); margin-bottom: var(--s-3); }
.savings-side-label.clio{ color: var(--accent); }
.savings-vs{
  align-self: center; font-family: "ClioMono", monospace; font-size: 11px; font-weight: 700;
  color: var(--ink-faint); border: 1px solid var(--rule-strong); border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  margin-top: 30px; background: var(--paper-raised);
}
.savings-table{ border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.savings-row{
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: 13px 16px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink-dim);
}
.savings-row:last-child{ border-bottom: none; }
.savings-row.total{ background: var(--paper-high); color: var(--ink); font-weight: 700; }
.savings-clio-card{
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 6%, var(--paper-raised));
  border-radius: var(--r-md); padding: var(--s-5); height: 100%;
}
.savings-clio-price{ font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.savings-clio-price span{ font-size: 12.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.savings-clio-list{
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-2); font-size: 14px; color: var(--ink-dim);
}
.savings-clio-list li{ padding-left: 22px; position: relative; }
.savings-clio-list li::before{ content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.savings-total-note{
  margin-top: var(--s-5); font-family: "ClioMono", monospace; font-size: 15px; font-weight: 700;
  color: var(--highlighter-ink); background: var(--highlighter);
  display: inline-block; padding: 10px 18px; border-radius: var(--r-sm);
}
.savings-footnote{ margin-top: var(--s-4); font-size: 12px; color: var(--ink-faint); max-width: 640px; line-height: 1.55; }
@media (max-width: 760px){
  .savings-band{ padding: var(--s-5); }
  .savings-compare{ grid-template-columns: 1fr; }
  .savings-vs{ margin: 0 auto; }
}

.startup-band{
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--paper-alt); padding: var(--s-7); box-shadow: var(--hairline);
}
.startup-band-head{ max-width: 640px; margin-bottom: var(--s-6); }
.startup-band-head h2{ margin: var(--s-2) 0 var(--s-3); font-size: clamp(22px, 2.4vw, 30px); }
.startup-band-head p{ color: var(--ink-dim); font-size: 15px; line-height: 1.6; }
.startup-cards{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.startup-card{
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5);
  background: var(--paper-raised); display: flex; flex-direction: column;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.startup-card:hover{ border-color: var(--rule-strong); transform: translateY(-2px); }
.startup-card-head{ margin-bottom: var(--s-3); }
.startup-card-title{ font-weight: 600; color: var(--ink); font-size: 16px; }
.startup-card-price{ font-size: 26px; font-weight: 700; color: var(--ink); margin-top: var(--s-2); letter-spacing: -0.03em; }
.startup-card-price span{ font-size: 12.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.startup-card-credits{
  display: inline-block; margin-top: var(--s-2); font-family: "ClioMono", monospace; font-size: 11px;
  color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: var(--r-xs); padding: 5px 9px;
}
.startup-card > p{ color: var(--ink-dim); font-size: 14px; margin: var(--s-3) 0 var(--s-4); line-height: 1.55; }
.startup-list{
  list-style: none; padding: 0; margin: 0 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2); font-size: 14px; color: var(--ink-dim);
}
.startup-list a{ color: inherit; border-bottom: 1px dotted var(--ink-faint); }
.startup-list a:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.startup-card .btn{ margin-top: auto; }
.startup-addon-note{ margin-top: var(--s-5); font-size: 13px; color: var(--ink-faint); line-height: 1.55; }
.startup-addon-note a{ color: var(--accent); border-bottom: 1px dotted var(--accent); }
.startup-addon-note a:hover{ color: var(--accent-strong); }
@media (max-width: 760px){ .startup-cards{ grid-template-columns: 1fr; } .startup-band{ padding: var(--s-5); } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{
  max-width: 820px; border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper-alt); box-shadow: var(--hairline);
}
.faq-item{ border-bottom: 1px solid var(--rule); }
.faq-item:last-child{ border-bottom: none; }
.faq-item summary{
  list-style: none; cursor: pointer; padding: 18px var(--s-5);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  transition: background .18s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .chev{ color: var(--ink-faint); flex-shrink: 0; transition: transform .22s var(--ease); }
.faq-item[open] summary{ color: var(--ink); background: var(--paper-raised); }
.faq-item[open] summary .chev{ transform: rotate(180deg); color: var(--accent); }
.faq-item summary:hover{ background: var(--paper-raised); }
.faq-item p{ padding: 0 var(--s-5) var(--s-5); color: var(--ink-dim); font-size: 15px; line-height: 1.68; }

/* ==========================================================================
   Demo modal
   ========================================================================== */
.demo-modal-overlay{
  display: none; position: fixed; inset: 0; z-index: 80;
  background: rgba(21,23,27,0.48);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: var(--s-5);
}
.demo-modal-overlay.open{ display: flex; animation: fade-in .2s var(--ease-out); }
@keyframes fade-in{ from{ opacity: 0; } }
.demo-modal{
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl); padding: var(--s-6);
  box-shadow: var(--e-3), var(--hairline);
  animation: modal-in .28s var(--ease-out);
}
@keyframes modal-in{ from{ opacity: 0; transform: translateY(14px) scale(.98); } }
.demo-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.demo-modal-head h3{ font-size: 21px; letter-spacing: -0.025em; }
.demo-modal-head p{ margin-top: 7px; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.demo-modal-close{
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
  flex-shrink: 0; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.demo-modal-close:hover{ color: var(--ink); border-color: var(--rule-loud); background: var(--paper-high); }
.demo-modal-body{ margin-top: var(--s-5); }
.demo-field{ margin-bottom: var(--s-4); }
.demo-field label{ display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 7px; font-weight: 500; }
.demo-field label .req{ color: var(--accent); }
.demo-field input, .demo-field textarea{
  width: 100%; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  padding: 12px 14px; font: inherit; font-size: 14.5px; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.demo-field input::placeholder, .demo-field textarea::placeholder{ color: var(--ink-ghost); }
.demo-field input:focus, .demo-field textarea:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.demo-field textarea{ resize: vertical; min-height: 84px; }
.demo-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 480px){ .demo-field-row{ grid-template-columns: 1fr; } }
.demo-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.demo-modal .btn{ width: 100%; text-align: center; margin-top: var(--s-2); padding: 14px 22px; font-size: 15.5px; }
.demo-modal-error{ margin-top: var(--s-3); font-size: 13px; color: var(--flag); display: none; }
.demo-modal-error.show{ display: block; }
.demo-modal-success{ display: none; text-align: center; padding: var(--s-5) 0; }
.demo-modal-success.show{ display: block; }
.demo-modal-success .check{
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in oklab, var(--ledger-green) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--ledger-green) 45%, transparent);
  color: var(--ledger-green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-4);
}
.demo-modal-success h3{ font-size: 19px; }
.demo-modal-success p{ margin-top: var(--s-2); color: var(--ink-dim); font-size: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ padding: var(--s-9) 0 var(--s-7); border-top: 1px solid var(--rule); background: var(--paper-alt); }
.foot-grid{ display: flex; justify-content: space-between; gap: var(--s-7); flex-wrap: wrap; }
.foot-tag{ font-size: 13.5px; color: var(--ink-faint); max-width: 30ch; line-height: 1.6; }
.foot-tag .logo{ margin-bottom: var(--s-3); }
.foot-social{ display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.foot-social a{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-faint); transition: color .16s var(--ease), border-color .16s var(--ease); }
.foot-social a:hover{ color: var(--ink); border-color: var(--ink-faint); }
.foot-social svg{ width: 16px; height: 16px; }
.foot-cols{ display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.foot-col{ display: flex; flex-direction: column; gap: 10px; }
.foot-col-label{ color: var(--ink-faint); margin-bottom: var(--s-1); }
.foot-col a{ font-size: 14px; color: var(--ink-dim); transition: color .16s var(--ease); }
.foot-col a:hover{ color: var(--ink); }
.foot-bottom{
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-faint); font-family: "ClioMono", monospace;
  flex-wrap: wrap; gap: var(--s-3); letter-spacing: .03em;
}

/* ==========================================================================
   Scroll reveal utility (JS adds .in)
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(16px); }
.reveal.in{ animation: reveal .6s var(--ease-out) forwards; }

/* ==========================================================================
   Late additions / overrides
   ========================================================================== */
.hero-visual{ display: flex; flex-direction: column; }
.proof-grid > .proof-item:first-child{ padding-left: 0; }
.proof-grid > .proof-item:last-child{ padding-right: 0; }
@media (max-width: 800px){
  .proof-grid > .proof-item{ padding-left: 0; padding-right: 0; }
}
.proof-desc{ margin-top: var(--s-3); font-size: 14px; color: var(--ink-dim); line-height: 1.6; max-width: 34ch; }
.proof-desc a{ color: var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.proof-desc a:hover{ color: var(--accent-strong); border-bottom-color: currentColor; }

/* Long single-word headings must never overflow on small screens */
h1, h2, h3, .index-title, .ledger-card h3{ overflow-wrap: break-word; }

/* Tap targets on touch devices */
@media (hover: none){
  .foot-col a, .mega-col a{ padding-block: 10px; }
}

@media (max-width: 560px){
  .topbar-inner > .auth-actions{ display: none; }
  .nav-toggle{ margin-left: auto; }
}

/* ==========================================================================
   Light-theme corrections
   ========================================================================== */

/* assets/logo.png is drawn light (38% of its opaque pixels are near-white,
   effectively none are dark) — it was made for a dark canvas. Rather than
   filter/invert it and distort the brand colour, give the mark its own dark
   tile. Reads as a deliberate lockup and keeps the artwork exact. */
/* superseded: the mark is now ink-coloured artwork at its own aspect ratio,
   so it needs neither a tile nor a square box. See the lockup rule below. */
.logo img{ height: 32px; width: 32px; object-fit: contain; }

/* same reason: the hub centre held a light mark on what is now white paper */
.hub-center{
  background: var(--action); border-color: transparent;
  box-shadow: 0 0 0 12px var(--paper), var(--e-2);
}
.hub-center::after{ border-color: var(--accent); }

/* Integration marks are full-colour SVGs; on paper they need a plain white
   chip with a warm hairline, not the dark chip they sat on before. */
.logo-chip, .hub-badge{ background: #FFFFFF; }

/* Section bands: alternate paper/oat so the page has a rhythm you can feel
   when scrolling, instead of one uninterrupted sheet. */
.copilot-wrap{ background: var(--paper-alt); }
.logo-strip-wrap{ background: var(--paper); }
.proof{ background: var(--paper-alt); }

/* Dark product panels sit *on* the paper, so they cast a real shadow and get
   a little more radius than page-level cards. */
.call-visual, .ledger-demo, .copilot, .statement{
  box-shadow: var(--e-3);
}

/* The CTA band is the only full-bleed dark section: a deliberate finale. */
.cta-band{ color: var(--ink); }
.cta-band .btn-mark{ background: var(--action); color: var(--action-ink); }
.cta-band .btn-mark:hover{ background: var(--action-hi); }

/* ==========================================================================
   ============  HOMEPAGE v2 — new architecture  ============
   Everything below is scoped to body so the other 39 pages keep the
   design system they already have and nothing regresses.
   ========================================================================== */

/* --- extend the dark-surface scope to the new product panels --- */
.risk-panel, .story-visual-card, .finale, .tab-panel-frame{
  --paper:        #0B0E15;
  --paper-alt:    #11151F;
  --paper-raised: #171C29;
  --paper-high:   #1F2634;
  --rule:         #272E3E;
  --rule-strong:  #394256;
  --rule-loud:    #4C5670;
  --ink:          #F2F4F7;
  --ink-dim:      #B4BCC8;
  --ink-faint:    #8F98A6;
  --ink-ghost:    #666F7E;
  --accent:        #7DB2F0;
  --accent-strong: #A6CCF7;
  --accent-deep:   #2C5F9E;
  --highlighter:   #F5B841;
  --ledger-green:  #6FD39B;
  --flag:          #F0705B;
  --action:        #F5F7FA;
  --action-hi:     #FFFFFF;
  --action-ink:    #0B0E15;
  --hairline: inset 0 1px 0 rgba(255,255,255,0.06);
  color-scheme: dark;
  color: var(--ink);
}

/* ---------- announcement bar ---------- */
.announce{
  background: var(--action); color: var(--action-ink);
  font-size: 13.5px; position: relative; z-index: 45;
}
.announce[hidden]{ display: none; }
.announce-inner{
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 11px 48px 11px var(--s-5); flex-wrap: wrap;
}
.announce .pill{
  font-family: "ClioMono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--highlighter); color: var(--highlighter-ink);
  padding: 3px 8px; border-radius: var(--r-xs);
}
.announce a{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.announce a u{ text-decoration: none; border-bottom: 1px solid currentColor; }
.announce a svg{ width: 12px; height: 12px; transition: transform .2s var(--ease); }
.announce a:hover svg{ transform: translateX(3px); }
.announce-close{
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center; opacity: .6;
}
.announce-close:hover{ opacity: 1; background: rgba(255,255,255,.12); }

/* ---------- hero v2 ---------- */
.hero-v2{ position: relative; padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6vw, 96px); overflow: hidden; }
.hero-v2::before{
  content: ""; position: absolute; inset: -30% -20% auto -20%; height: 900px; z-index: 0;
  background:
    radial-gradient(46% 44% at 18% 4%, rgba(232,163,30,0.16), transparent 68%),
    radial-gradient(42% 46% at 82% 0%, rgba(29,78,137,0.12), transparent 70%);
  pointer-events: none;
}
.hero-v2::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(21,23,27,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,27,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(84% 58% at 50% 0%, #000 28%, transparent 76%);
  -webkit-mask-image: radial-gradient(84% 58% at 50% 0%, #000 28%, transparent 76%);
}
.hero-v2 > *{ position: relative; z-index: 1; }
.hero-v2-grid{ display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
@media (max-width: 1060px){ .hero-v2-grid{ grid-template-columns: 1fr; gap: var(--s-8); } }

.hero-v2 h1{
  font-size: clamp(40px, 5.6vw, 72px); line-height: 1.0;
  letter-spacing: -0.042em; max-width: 16ch;
}
.hero-v2 .hero-sub{ margin-top: var(--s-5); max-width: 52ch; font-size: clamp(16.5px, 1.25vw, 18.5px); }

/* social proof row with stacked avatars */
.hero-people{ display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.avatar-stack{ display: flex; }
.avatar-stack img{
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--paper); margin-left: -10px; background: var(--paper-high);
}
.avatar-stack img:first-child{ margin-left: 0; }
.hero-people p{ font-size: 13.5px; color: var(--ink-faint); line-height: 1.45; }
.hero-people strong{ color: var(--ink); font-weight: 600; }

/* the product window, with a live risk card breaking out of its corner */
.hero-window{
  position: relative;
  animation: hero-window-in .8s var(--ease-out) .15s both;
  will-change: transform;
}
@keyframes hero-window-in{ from{ opacity: 0; } }
.hero-window .call-visual{ transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
@media (max-width: 1060px){ .hero-window .call-visual{ transform: none; max-width: 520px; margin-inline: auto; } }

.float-card{
  width: 100%;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg); padding: var(--s-4);
  box-shadow: var(--e-2);
  animation: float-in .7s var(--ease-out) .9s both;
}

@keyframes float-in{ from{ opacity: 0; transform: translateY(18px) scale(.96); } }
.float-card .fc-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  font-family: "ClioMono", monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.float-card .fc-live{ display: inline-flex; align-items: center; gap: 5px; color: var(--flag); }
.float-card .fc-acct{ font-weight: 600; font-size: 14.5px; margin-top: var(--s-3); }
.float-card .fc-meter{
  height: 6px; border-radius: var(--r-full); background: var(--paper-high);
  margin-top: var(--s-3); overflow: hidden;
}
.float-card .fc-meter span{
  display: block; height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--highlighter), var(--flag));
  width: 74%; transform-origin: left; animation: meter 1.1s var(--ease-out) 1.5s both;
}
@keyframes meter{ from{ transform: scaleX(0); } }
.float-card .fc-foot{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--s-2); font-size: 12px; color: var(--ink-faint);
}
.float-card .fc-score{ font-family: "ClioMono", monospace; font-weight: 700; font-size: 20px; color: var(--flag); }

/* ---------- stat ticker under the hero ---------- */
.ticker{
  margin-top: clamp(30px, 3.4vw, 48px);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px){ .ticker{ grid-template-columns: repeat(2, 1fr); } }
.ticker-item{ padding: var(--s-5) var(--s-5) 0; border-left: 1px solid var(--rule); }
.ticker-item:first-child{ border-left: none; padding-left: 0; }
@media (max-width: 860px){
  .ticker-item:nth-child(odd){ border-left: none; padding-left: 0; }
  .ticker-item:nth-child(n+3){ border-top: 1px solid var(--rule); padding-top: var(--s-5); }
}
.ticker-num{
  font-family: "ClioMono", monospace; font-weight: 700;
  font-size: clamp(34px, 3.8vw, 50px); letter-spacing: -0.03em; line-height: 1;
}
.ticker-num .suf{ color: var(--ink-faint); font-weight: 500; }
.ticker-label{ margin-top: var(--s-3); font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; max-width: 26ch; }

/* each stat carries a meter so the row reads as measured, not just typed */
.ticker-meter{
  height: 4px; border-radius: 999px; background: #E9EAF4;
  margin-top: var(--s-4); overflow: hidden; max-width: 88%;
}
.ticker-meter i{
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: currentColor;
  transition: width 1.1s var(--ease-out) .15s;
}
.ticker-item.in .ticker-meter i{ width: var(--w); }
.ticker-item:nth-child(1) .ticker-meter{ color: var(--accent); }
.ticker-item:nth-child(2) .ticker-meter{ color: var(--violet); }
.ticker-item:nth-child(3) .ticker-meter{ color: #0F766E; }
.ticker-item:nth-child(4) .ticker-meter{ color: #B45309; }
@media (prefers-reduced-motion: reduce){
  .ticker-meter i{ transition: none; width: var(--w); }
}

/* ---------- logo marquee ---------- */
.marquee-wrap{ padding-block: var(--section-sm); border-bottom: 1px solid var(--rule); }
.marquee-label{ text-align: center; color: var(--ink-faint); margin-bottom: var(--s-6); }
.marquee{
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
/* logos only — every mark in the strip is a wordmark, so repeating the name
   beside it just said everything twice */
.marquee-item{ display: flex; align-items: center; flex-shrink: 0; opacity: .72; transition: opacity .25s var(--ease); }
.marquee-item:hover{ opacity: 1; }
.marquee-item img{ height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; }
/* The parent brand runs at full strength rather than the muted third-party
   opacity. Its mark is an icon rather than a wordmark, so it keeps the name
   beside it — the same lockup the CognixAI Hub site uses. */
.marquee-item.hub{ opacity: 1; gap: 9px; }
.marquee-item.hub img{ height: 30px; }
.marquee-item.hub b{
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---------- interactive product tabs ---------- */
.showcase{ padding-block: var(--section); }
.tabs{
  display: flex; gap: var(--s-1); padding: 5px; margin: 0 auto var(--s-7);
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-full); width: max-content; max-width: 100%;
  box-shadow: var(--e-1); overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display: none; }
.tab-btn{
  padding: 11px 22px; border-radius: var(--r-full); font-size: 14.5px; font-weight: 600;
  color: var(--ink-faint); white-space: nowrap; border: none; background: transparent;
  transition: color .2s var(--ease), background .25s var(--ease);
}
.tab-btn:hover{ color: var(--ink); }
.tab-btn[aria-selected="true"]{ background: var(--action); color: var(--action-ink); }
/* All four panels are stacked in the same grid cell rather than swapped in
   and out of flow. The tallest one sets the height once, so switching tabs
   cross-fades in place and nothing below the section jumps — and the ledger
   demo filling itself in can't resize the box either. */
.tab-panels{ display: grid; }
.tab-panels > .tab-panel{ grid-area: 1 / 1; }
.tab-panel{
  display: block;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.tab-panel.active{
  visibility: visible; opacity: 1; pointer-events: auto;
  animation: tab-in .45s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .tab-panel{ transition: none; }
  .tab-panel.active{ animation: none; }
}
@keyframes tab-in{ from{ opacity: 0; transform: translateY(14px); } }
.tab-grid{ display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 1000px){ .tab-grid{ grid-template-columns: 1fr; } }
.tab-copy h3{ font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; }
.tab-copy > p{ margin-top: var(--s-4); color: var(--ink-dim); font-size: 16px; line-height: 1.65; }
.tab-list{ list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tab-list li{ position: relative; padding-left: 28px; font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
.tab-list li::before{
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
}
.tab-list li::after{
  content: ""; position: absolute; left: 6px; top: 9px; width: 5px; height: 8px;
  border: solid var(--accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

/* ---------- risk panel (tab 2 visual) ---------- */
.risk-panel{
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--e-3);
}
.risk-panel-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 15px var(--s-5); border-bottom: 1px solid var(--rule); background: var(--paper-high);
  font-family: "ClioMono", monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
.risk-body{ padding: var(--s-5); }
.risk-hero{ display: flex; align-items: center; gap: var(--s-5); }
.gauge{ position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.gauge svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .track{ fill: none; stroke: var(--paper-high); stroke-width: 9; }
.gauge .dial{
  fill: none; stroke: var(--flag); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 289; stroke-dashoffset: 289;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.gauge.in .dial{ stroke-dashoffset: 75; }
.gauge-val{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-weight: 700; font-size: 28px; color: var(--flag);
}
.gauge-val small{ font-size: 9.5px; letter-spacing: .12em; color: var(--ink-faint); font-weight: 500; margin-top: 2px; }
.risk-hero h4{ font-size: 19px; }
.risk-hero p{ margin-top: 6px; font-size: 13.5px; color: var(--ink-faint); }
.risk-hero .amt{ font-family: "ClioMono", monospace; font-size: 15px; color: var(--ink); margin-top: var(--s-3); display: block; }
.risk-signals{ margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.signal{
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-3); align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px;
}
.signal:last-child{ border-bottom: none; }
.signal .ic{
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-size: 10px; font-weight: 700;
  background: color-mix(in oklab, var(--flag) 16%, transparent); color: var(--flag);
}
.signal.warn .ic{ background: color-mix(in oklab, var(--highlighter) 18%, transparent); color: var(--highlighter); }
.signal strong{ font-weight: 600; display: block; }
.signal em{ font-style: normal; color: var(--ink-faint); font-size: 12.5px; }
.signal .when{ font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-ghost); white-space: nowrap; }

/* ---------- sticky scroll story ---------- */
.story{ padding-block: var(--section); border-top: 1px solid var(--rule); }
.story-grid{ display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 1000px){ .story-grid{ grid-template-columns: 1fr; } }

.story-step{
  padding-block: var(--s-6);
  border-left: 2px solid var(--rule);
  padding-left: var(--s-6); position: relative;
  transition: border-color .4s var(--ease);
}
@media (min-width: 1001px){ .story-step{ min-height: 38vh; display: flex; flex-direction: column; justify-content: center; } }
.story-step .n{
  position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-size: 9.5px; font-weight: 700; color: var(--ink-ghost);
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
@media (max-width: 1000px){ .story-step .n{ top: var(--s-6); transform: none; } }
.story-step h3{ font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.028em; color: var(--ink-ghost); transition: color .4s var(--ease); }
.story-step p{ margin-top: var(--s-3); color: var(--ink-ghost); font-size: 15.5px; line-height: 1.6; max-width: 44ch; transition: color .4s var(--ease); }
.story-step.is-active{ border-left-color: var(--accent); }
.story-step.is-active .n{ border-color: var(--accent); background: var(--accent); color: #fff; }
.story-step.is-active h3{ color: var(--ink); }
.story-step.is-active p{ color: var(--ink-dim); }

.story-visual{ position: sticky; top: 108px; }
@media (max-width: 1000px){ .story-visual{ position: static; margin-bottom: var(--s-7); } }
.story-visual-card{
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl); box-shadow: var(--e-3);
  min-height: 400px; display: grid; place-items: center; padding: var(--s-6);
  position: relative; overflow: hidden;
}
.story-slide{
  display: none; width: 100%;
}
.story-slide.active{ display: block; animation: tab-in .5s var(--ease-out); }
.story-slide .slide-kicker{
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4);
}
.slide-lines{ display: flex; flex-direction: column; gap: var(--s-3); }
.slide-line{
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--paper-high); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 13px 16px; font-size: 13.5px; color: var(--ink-dim);
}
.slide-line .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.slide-line .dot.green{ background: var(--ledger-green); }
.slide-line .dot.amber{ background: var(--highlighter); }
.slide-line .dot.red{ background: var(--flag); }
.slide-line strong{ color: var(--ink); font-weight: 600; }
.slide-line .tail{ margin-left: auto; font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.slide-big{
  font-family: "ClioMono", monospace; font-weight: 700; font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--s-3);
}
.slide-big.flag{ color: var(--flag); }
.slide-big.green{ color: var(--ledger-green); }
.slide-note{ font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }

/* ---------- bento grid ---------- */
.bento-wrap{ padding-block: var(--section); border-top: 1px solid var(--rule); }
.bento{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4);
}
@media (max-width: 1000px){ .bento{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .bento{ grid-template-columns: 1fr; } }
.bento-card{
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 2;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento-card.wide{ grid-column: span 3; }
.bento-card.full{ grid-column: span 6; }
@media (max-width: 1000px){
  .bento-card, .bento-card.wide{ grid-column: span 1; }
  .bento-card.full{ grid-column: span 2; }
}
@media (max-width: 620px){ .bento-card.full{ grid-column: span 1; } }
.bento-card::before{
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(29,78,137,0.09), transparent 68%);
  transition: opacity .35s var(--ease);
}
.bento-card:hover{ border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: var(--e-2); }
.bento-card:hover::before{ opacity: 1; }
.bento-num{
  font-family: "ClioMono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-ghost); margin-bottom: var(--s-4);
}
.bento-card h3{ font-size: 19px; letter-spacing: -0.022em; }
.bento-card p{ margin-top: var(--s-3); font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }
.bento-icon{
  width: 38px; height: 38px; border-radius: var(--r-md); margin-bottom: var(--s-4);
  background: var(--paper-high); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.bento-icon svg{ width: 18px; height: 18px; }
.bento-visual{ margin-top: auto; padding-top: var(--s-5); }
.mini-bars{ display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.mini-bars span{
  flex: 1; border-radius: 3px 3px 0 0; background: var(--rule-strong);
  transform-origin: bottom; transition: background .3s var(--ease);
}
.bento-card:hover .mini-bars span{ background: var(--accent); }

/* ==========================================================================
   Talk-ratio plot
   A read-out, not decoration: stacked rep/customer bars against a 50%
   reference line, with the sentiment trend drawn over the top. Bars grow
   and the line draws itself once the card scrolls into view.
   ========================================================================== */
.plot{
  background: #FBFBFE; border: 1px solid #ECEDF7; border-radius: 10px;
  padding: 12px 13px 10px;
}
.plot-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plot-title{
  font-family: "ClioMono", monospace; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.plot-delta{
  font-family: "ClioMono", monospace; font-size: 10px; font-weight: 700; color: #0F766E;
  background: #E6FAF6; border: 1px solid #C7EFE7; border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}

.plot-body{ display: flex; gap: 8px; margin-top: 10px; }
.plot-yaxis{
  display: flex; flex-direction: column; justify-content: space-between;
  height: 78px; font-family: "ClioMono", monospace; font-size: 8.5px;
  color: var(--ink-ghost); text-align: right; flex: none;
}
.plot-area{ position: relative; flex: 1; height: 78px; min-width: 0; }

/* gridlines, with the 50% mark dashed as the reference */
.plot-grid{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.plot-grid i{ display: block; height: 1px; background: #E7E9F4; }
.plot-grid i.ref{ background: repeating-linear-gradient(90deg, #C9CDE6 0 4px, transparent 4px 8px); }

/* stacked bars: the fill is rep share, the track is the customer's */
.plot-bars{ position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.plot-bars span{
  position: relative; flex: 1; height: 0; border-radius: 3px 3px 0 0;
  background: #DDE0F0; overflow: hidden;
  transition: height .75s var(--ease-out);
}
.plot-bars span b{
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--r);
  background: var(--accent); border-radius: 0 0 2px 2px;
}
.bento-card.in .plot-bars span{ height: 100%; }
.plot-bars span:nth-child(2){ transition-delay:.05s } .plot-bars span:nth-child(3){ transition-delay:.1s }
.plot-bars span:nth-child(4){ transition-delay:.15s } .plot-bars span:nth-child(5){ transition-delay:.2s }
.plot-bars span:nth-child(6){ transition-delay:.25s } .plot-bars span:nth-child(7){ transition-delay:.3s }
.plot-bars span:nth-child(8){ transition-delay:.35s } .plot-bars span:nth-child(9){ transition-delay:.4s }
.plot-bars span:nth-child(10){ transition-delay:.45s }

/* sentiment trend drawn over the bars */
.plot-line{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot-line polyline{
  fill: none; stroke: #B45309; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.4s var(--ease-out) .35s;
}
.bento-card.in .plot-line polyline{ stroke-dashoffset: 0; }

.plot-legend{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.lg{ display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink-faint); }
.lg::before{ content: ""; width: 8px; height: 8px; border-radius: 2px; }
.lg.rep::before{ background: var(--accent); }
.lg.cust::before{ background: #DDE0F0; }
.lg.line::before{ width: 10px; height: 2px; border-radius: 999px; background: #B45309; }

@media (prefers-reduced-motion: reduce){
  .plot-bars span{ transition: none; height: 100%; }
  .plot-line polyline{ transition: none; stroke-dashoffset: 0; }
}
.mini-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip{
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .06em;
  padding: 4px 9px; border-radius: var(--r-full);
  border: 1px solid var(--rule-strong); color: var(--ink-faint);
}

/* ---------- findings ---------- */
.finds{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 820px){ .finds{ grid-template-columns: 1fr; } }
.find-card{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-6);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.find-card::before{
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(232,163,30,0.10), transparent 66%);
  transition: opacity .35s var(--ease);
}
.find-card:hover{ border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: var(--e-2); }
.find-card:hover::before{ opacity: 1; }
.find-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.find-tag::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.find-card h3{ font-size: 18px; margin-top: var(--s-3); line-height: 1.35; }
.find-card p{ margin-top: var(--s-3); font-size: 14.5px; color: var(--ink-dim); line-height: 1.62; }

/* ---------- trust strip ---------- */
.trust{ padding-block: var(--section-sm); border-top: 1px solid var(--rule); background: var(--paper-alt); }
.trust-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 820px){ .trust-grid{ grid-template-columns: 1fr; gap: var(--s-5); } }
.trust-item{ display: flex; gap: var(--s-4); }
.trust-item .ti{
  width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  box-shadow: var(--hairline);
}
.trust-item .ti svg{ width: 18px; height: 18px; }
.trust-item strong{ display: block; font-size: 15px; font-weight: 600; }
.trust-item p{ margin-top: 5px; font-size: 13.5px; color: var(--ink-faint); line-height: 1.55; }
.trust-item a{ color: var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }

/* ---------- finale ---------- */
.finale{
  position: relative; overflow: hidden;
  background: var(--paper); padding-block: clamp(80px, 10vw, 140px);
}
.finale::before{
  content: ""; position: absolute; inset: auto -20% -70% -20%; height: 640px; pointer-events: none;
  background: radial-gradient(46% 60% at 50% 100%, rgba(125,178,240,0.20), transparent 70%);
}
.finale::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
}
.finale-inner{ position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.finale h2{ font-size: clamp(34px, 5vw, 62px); letter-spacing: -0.04em; max-width: 17ch; line-height: 1.02; }
.finale p{ color: var(--ink-dim); font-size: clamp(16px, 1.3vw, 18.5px); max-width: 46ch; }
.finale .btn{ padding: 16px 34px; font-size: 16px; border-radius: var(--r-md); }
.finale-note{ font-family: "ClioMono", monospace; font-size: 12px; color: var(--ink-faint); letter-spacing: .06em; }

/* ---------- shared motion ---------- */
.up{ opacity: 0; transform: translateY(22px); }
.up.in{ animation: up-in .7s var(--ease-out) forwards; }
@keyframes up-in{ to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .up{ opacity: 1; transform: none; }
  .float-card, .float-card .fc-meter span{ animation: none; }
  .hero-window .call-visual{ transform: none; }
}

/* ==========================================================================
   ==================  HOMEPAGE v3  ==================
   White base, indigo accent taken from the product app, colour bands between
   sections, and all four product mockups redrawn as LIGHT device-framed
   panels. Scoped to body.home; the other 39 pages are untouched.
   ========================================================================== */
body{
  --paper:        #FFFFFF;
  --paper-alt:    #F6F7FB;
  --paper-raised: #FFFFFF;
  --paper-high:   #EEF0F8;

  --rule:         #E7E9F2;
  --rule-strong:  #D5DAE8;
  --rule-loud:    #AEB6CC;

  --ink:          #0E1020;
  --ink-dim:      #474C63;
  --ink-faint:    #5F657E;
  --ink-ghost:    #868DA5;

  /* the product app's accent, so signup does not feel like a different company */
  --accent:        #4F46E5;
  --accent-strong: #3730A3;
  --accent-deep:   #312E81;
  --accent-soft:   #EEEDFF;
  --violet:        #7C3AED;
  --teal:          #0D9488;
  --teal-soft:     #E6FAF6;
  --rose-soft:     #FFF0F1;
  --amber-soft:    #FFF7E6;

  --highlighter:     #FFD34D;
  --highlighter-ink: #241A00;
  --ledger-green:    #0F766E;
  --flag:            #DC2626;

  --action:     #0E1020;
  --action-hi:  #000000;
  --action-ink: #FFFFFF;

  --hairline: inset 0 1px 0 rgba(255,255,255,0.9);
  --e-1: 0 1px 2px rgba(14,16,32,0.06);
  --e-2: 0 10px 30px -12px rgba(14,16,32,0.16);
  --e-3: 0 34px 70px -30px rgba(14,16,32,0.30);
  background: var(--paper);
}

/* --- colour bands. Each section owns a tint so the page has rhythm you can
       feel while scrolling, instead of one flat sheet. --- */
/* These sections are .wrap elements (max-width 1200, centred), so a plain
   background would stop at the content edge. Paint the band with a viewport-
   wide pseudo behind an isolated stacking context instead. */
body [class*="tint-"]{ position: relative; z-index: 0; }
body [class*="tint-"]::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  left: 50%; transform: translateX(-50%); width: 100vw;
}
body .tint-indigo::before{ background: linear-gradient(180deg, #F2F3FF 0%, #FFFFFF 68%); }
body .tint-rose::before  { background: linear-gradient(180deg, #FFF3F4 0%, #FFFFFF 68%); }
body .tint-mint::before  { background: linear-gradient(180deg, #EDFBF7 0%, #FFFFFF 68%); }
body .tint-amber::before { background: linear-gradient(180deg, #FFF7E8 0%, #FFFFFF 68%); }
body .tint-slate::before { background: #F5F6FB; }

/* --- device frame: a soft gradient surround so a light panel still reads as
       "product" against a light page. --- */
body .mock{
  position: relative; border-radius: 26px; padding: 12px;
  background:
    linear-gradient(140deg, rgba(79,70,229,0.20), rgba(124,58,237,0.10) 42%, rgba(13,148,136,0.08) 78%),
    var(--paper-high);
  box-shadow: var(--e-3);
}
body .mock-inner{
  background: #fff; border: 1px solid var(--rule);
  border-radius: 18px; overflow: hidden;
}
body .mock-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #FBFBFE, #F6F7FB);
}
body .mock-bar .dots{ display: flex; gap: 5px; }
body .mock-bar .dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
body .mock-bar .ttl{ font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
body .mock-bar .live{
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: "ClioMono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--flag); background: var(--rose-soft);
  border: 1px solid #FBD5D5; border-radius: var(--r-full); padding: 3px 9px;
}

/* ==========================================================================
   MOCKUP 1 — live call. Horizontal presence row, not a dark 2x2 video grid.
   ========================================================================== */
body .call-visual{
  --paper: #fff; --paper-alt: #F6F7FB; --paper-raised: #fff; --paper-high: #EEF0F8;
  --rule: #E7E9F2; --rule-strong: #D5DAE8; --rule-loud: #AEB6CC;
  --ink: #0E1020; --ink-dim: #474C63; --ink-faint: #5F657E;
  --accent: #4F46E5; --flag: #DC2626; --ledger-green: #0D9488;
  color: var(--ink);
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  transform: none;
}
body .call-roster{ display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); }
body .rost{ display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
body .rost .pic{
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--rule-strong); background: var(--paper-high);
}
body .rost .pic img{ width: 100%; height: 100%; object-fit: cover; display: block; }
body .rost.on .pic{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
body .rost .nm{ font-size: 11.5px; color: var(--ink-faint); text-align: center; line-height: 1.3; }
body .rost.on .nm{ color: var(--ink); font-weight: 600; }
body .rost.bot .pic{
  border-style: dashed; border-color: var(--accent);
  display: flex; align-items: center; justify-content: center; background: var(--accent-soft);
}
body .rost.bot .pic img{ width: 26px; height: 26px; object-fit: contain; }

body .call-wave{
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 var(--s-5); padding: 13px 16px;
  background: var(--accent-soft); border: 1px solid #DEDBFF; border-radius: var(--r-md);
}
body .call-wave .wave{ height: 20px; gap: 3px; }
body .call-wave .wave span{ width: 3px; background: var(--accent); }
@keyframes wave{ 0%,100%{ height: 4px; } 50%{ height: 20px; } }
body .call-wave .lbl{ font-size: 12.5px; color: var(--accent-strong); font-weight: 600; }
body .call-wave .tm{ margin-left: auto; font-family: "ClioMono", monospace; font-size: 12px; color: var(--ink-faint); }

body .call-foot{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
body .call-foot .chip{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: var(--r-full); padding: 6px 12px;
}
body .call-foot .chip .d{ width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ==========================================================================
   MOCKUP 2 — transcript feed with insight chips pulled out to the side
   ========================================================================== */
body .ledger-demo{
  --paper: #fff; --paper-alt: #FAFBFE; --paper-raised: #fff; --paper-high: #EEF0F8;
  --rule: #E7E9F2; --rule-strong: #D5DAE8;
  --ink: #0E1020; --ink-dim: #474C63; --ink-faint: #5F657E; --ink-ghost: #868DA5;
  --accent: #4F46E5; --highlighter: #FFD34D; --ledger-green: #0D9488; --flag: #DC2626;
  color: var(--ink);
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 0;
}
@media (max-width: 720px){ body .ledger-demo{ grid-template-columns: 1fr; } }
body .ledger-demo .col{ min-height: 0; }
body .ledger-demo .col + .col{ border-left: 1px solid var(--rule); background: #FAFBFE; }
@media (max-width: 720px){ body .ledger-demo .col + .col{ border-left: none; border-top: 1px solid var(--rule); } }
body .col-head{
  padding: 13px 18px; border-bottom: 1px solid var(--rule); color: var(--ink-faint);
  background: linear-gradient(180deg,#FBFBFE,#F6F7FB);
}
body .col-raw .stamp{ color: var(--ink-faint); border-color: var(--rule-strong); }
body .col-filed .stamp{ color: var(--teal); border-color: #9FE3D8; background: var(--teal-soft); }

body .transcript{ padding: var(--s-4) 18px; gap: 11px; }
body .tline{
  font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim);
  padding-left: 12px; border-left: 2px solid var(--rule-strong);
}
body .tline .who{
  display: block; margin: 0 0 3px; font-family: "ClioMono", monospace;
  font-size: 10px; letter-spacing: .12em; font-weight: 700; color: var(--ink-ghost);
}
body .tline .tag{
  background: #FFF1C2; color: #4A3500; box-shadow: inset 0 -0.6em 0 #FFE08A;
  padding: 0 3px; border-radius: 3px; font-weight: 600;
}
body .ledger-table{ padding: var(--s-4) 18px; }
body .lrow{
  display: block; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); background: #fff; box-shadow: var(--e-1);
}
body .lrow .field{
  font-family: "ClioMono", monospace; font-size: 9.5px; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase; padding: 0;
}
body .lrow .val{ font-size: 13.5px; color: var(--ink); font-weight: 600; margin-top: 4px; }
body .lrow .owner{ text-align: left; font-size: 11px; color: var(--ink-ghost); margin-top: 3px; }

/* ==========================================================================
   MOCKUP 3 — Copilot, light
   ========================================================================== */
body .copilot{
  --paper: #fff; --paper-alt: #FAFBFE; --paper-raised: #fff; --paper-high: #F4F5FA;
  --rule: #E7E9F2; --rule-strong: #D5DAE8; --rule-loud: #AEB6CC;
  --ink: #0E1020; --ink-dim: #474C63; --ink-faint: #5F657E; --ink-ghost: #868DA5;
  --accent: #4F46E5; --accent-strong: #3730A3;
  --highlighter: #B45309; --ledger-green: #0D9488; --flag: #DC2626;
  --action: #4F46E5; --action-ink: #fff;
  color: var(--ink);
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}
body .copilot-head{
  background: linear-gradient(180deg,#FBFBFE,#F6F7FB); color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}
body .mode-badge{ border-color: var(--rule-strong); color: var(--ink-dim); background: #fff; }
body .mode-badge .dot{ background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
body .co-bubble{ background: var(--paper-high); border-color: var(--rule); color: var(--ink-dim); }
body .co-msg.user .co-bubble{ background: var(--accent); color: #fff; border-color: transparent; }
body .co-msg.ai .co-avatar{ background: var(--accent); color: #fff; }
body .co-msg.user .co-avatar{ background: var(--paper-high); border: 1px solid var(--rule-strong); color: var(--ink-faint); }
body .co-cards{ background: var(--rule); border-color: var(--rule); }
body .co-card-item{ background: #fff; }
body .co-card-item:hover{ background: var(--paper-alt); }
body .co-badge.risk{ background: var(--rose-soft); color: #B91C1C; border-color: #FBD5D5; }
body .co-badge.sched{ background: var(--accent-soft); color: var(--accent-strong); border-color: #DEDBFF; }
body .co-badge.due{ background: var(--amber-soft); color: #92400E; border-color: #FBE3B5; }
body .co-citation{ background: var(--paper-alt); border-color: var(--rule); color: var(--ink-faint); }
body .co-citation::before{ color: var(--accent); }
body .co-sync-fields{ background: var(--paper-alt); border-color: var(--rule); }
body .co-steps li::before{ background: var(--accent); }
body .co-action{ background: var(--accent-soft); border-color: #CFCBFF; color: var(--accent-strong); }
body .co-action .confirm-btn{ background: var(--accent); color: #fff; }
body .co-action.done{ background: var(--teal-soft); border-color: #9FE3D8; }
body .co-synced{ color: #0F766E; }
body .co-typing{ background: var(--paper-high); border-color: var(--rule); }

/* ==========================================================================
   MOCKUP 4 — analytics, light, with pastel KPI tiles and a real chart
   ========================================================================== */
body .statement{
  --paper: #fff; --paper-alt: #FAFBFE; --paper-raised: #fff; --paper-high: #F4F5FA;
  --rule: #E7E9F2; --rule-strong: #D5DAE8;
  --ink: #0E1020; --ink-dim: #474C63; --ink-faint: #5F657E;
  --accent: #4F46E5; --ledger-green: #0D9488; --flag: #DC2626; --highlighter: #B45309;
  color: var(--ink);
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}
body .statement-head{
  background: linear-gradient(180deg,#FBFBFE,#F6F7FB);
  border-bottom: 1px solid var(--rule); color: var(--ink-faint);
}
body .statement-head .filed{ color: #0F766E; }
body .statement-head .filed::before{ background: currentColor; box-shadow: 0 0 0 3px var(--teal-soft); }

body .statement-stats{
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-3);
  padding: var(--s-5); border-bottom: 1px solid var(--rule); background: transparent;
}
@media (max-width: 860px){ body .statement-stats{ grid-template-columns: repeat(2,1fr); } }
body .statement-stat{
  padding: var(--s-4); border: 1px solid var(--rule); border-left: 1px solid var(--rule);
  border-radius: var(--r-md); background: var(--paper-alt);
}
body .statement-stat:nth-child(1){ background: var(--accent-soft); border-color: #DEDBFF; }
body .statement-stat:nth-child(2){ background: var(--teal-soft); border-color: #BDEDE4; }
body .statement-stat:nth-child(3){ background: var(--amber-soft); border-color: #FBE3B5; }
body .statement-stat:nth-child(4){ background: var(--rose-soft); border-color: #FBD5D5; }
body .statement-stat:nth-child(n+3){ border-top: 1px solid; }
body .statement-stat .label{ color: var(--ink-faint); letter-spacing: .08em; }
body .statement-stat .value{ font-size: clamp(22px,2.2vw,28px); color: var(--ink); }
body .statement-stat:nth-child(1) .value{ color: var(--accent-strong); }
body .statement-stat:nth-child(2) .value{ color: #0F766E; }
body .statement-stat .value.flag{ color: #B91C1C; }
body .statement-stat .delta{ color: #0F766E; font-size: 11.5px; }
body .statement-stat .delta.warn{ color: #B91C1C; }

body .funnel-block{ padding: var(--s-5); border-bottom: 1px solid var(--rule); }
body .funnel-head{ color: var(--ink-faint); }
body .funnel-row .bar-track{ background: var(--paper-high); border-color: var(--rule); }
body .funnel-row .bar{ background: linear-gradient(90deg, var(--accent), #7C3AED); }
body .funnel-row .bar.won{ background: linear-gradient(90deg,#0D9488,#34D399); }
body .funnel-row .stage{ color: var(--ink-dim); }

body .statement-body{ display: grid; grid-template-columns: 1fr; }
body .statement-col + .statement-col{ border-left: none; border-top: 1px solid var(--rule); }
body .statement-col-title{ color: var(--ink-faint); }
body .risk-row{ border-bottom: 1px solid var(--rule); }
body .risk-score.high{ background: var(--rose-soft); color: #B91C1C; border-color: #FBD5D5; }
body .risk-score.mid{ background: var(--amber-soft); color: #92400E; border-color: #FBE3B5; }
body .rep-mark{ background: var(--accent-soft); color: var(--accent-strong); border-color: #DEDBFF; }
body .rep-row{ border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   Page-level component recolour under the white theme
   ========================================================================== */
body .hero-v2::before{
  background:
    radial-gradient(48% 46% at 16% 0%, rgba(79,70,229,0.18), transparent 68%),
    radial-gradient(44% 48% at 84% 4%, rgba(124,58,237,0.13), transparent 70%),
    radial-gradient(40% 40% at 55% 0%, rgba(13,148,136,0.08), transparent 70%);
}
body .hero-v2::after{
  background-image:
    linear-gradient(to right, rgba(14,16,32,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,16,32,0.045) 1px, transparent 1px);
}

/* the marker swipe never applied: the rule targeted .hero, the markup is .hero-v2 */
body .hero-v2 h1 .accent{
  color: var(--ink); position: relative;
  background-image: linear-gradient(180deg, transparent 56%, #FFD34D 56%, #FFD34D 95%, transparent 95%);
  background-repeat: no-repeat; background-size: 0% 100%;
  animation: marker 1s var(--ease-out) .45s forwards;
  padding-inline: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@media (prefers-reduced-motion: reduce){
  body .hero-v2 h1 .accent{ background-size: 100% 100%; animation: none; }
}

/* headline was running to five lines and eating the whole viewport */
body .hero-v2 h1{ font-size: clamp(34px, 4.1vw, 56px); max-width: 20ch; line-height: 1.04; }
body .hero-v2{ padding-block: clamp(40px,4.5vw,68px) clamp(48px,5vw,80px); }
body .hero-v2-grid{ grid-template-columns: 1fr 1.06fr; align-items: center; }
@media (max-width: 1060px){ body .hero-v2-grid{ grid-template-columns: 1fr; } }

/* float card moved clear of the call panel instead of overlapping it */

@media (max-width: 1060px){  }
body .float-card .fc-meter{ background: var(--paper-high); }
body .float-card .fc-meter span{ background: linear-gradient(90deg,#F59E0B,#DC2626); }
body .float-card .fc-score{ color: #B91C1C; }

body .hero-badge{
  background: #fff; border-color: var(--rule-strong); color: var(--ink-dim);
  box-shadow: var(--e-1); letter-spacing: .08em;
}
body .hero-badge .live{ background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
body .eyebrow{ color: var(--accent); }
body .ticker{ border-color: var(--rule); }
body .ticker-num{ color: var(--ink); }
body .ticker-item:nth-child(1) .ticker-num{ color: var(--accent); }
body .ticker-item:nth-child(2) .ticker-num{ color: var(--violet); }
body .ticker-item:nth-child(3) .ticker-num{ color: #0F766E; }
body .ticker-item:nth-child(4) .ticker-num{ color: #B45309; }

/* the mark is now ink-coloured artwork, so it needs no tile behind it */
body .marquee-wrap{ border-bottom: 1px solid var(--rule); }
body .marquee-item img{ filter: none; }

body .contrast-panel.draft{ background: #fff; border-style: dashed; border-color: var(--rule-strong); }
body .contrast-panel.filed{ background: #fff; border-color: #FBD5D5; box-shadow: var(--e-2); }
body .contrast-panel.filed::before{ background: linear-gradient(90deg,#F59E0B,#DC2626); }
body .contrast-panel.filed .stamp-lg{ background: #DC2626; color: #fff; }
body .contrast-panel .rec{ color: #0F766E; border-top-color: var(--rule); }

body .tabs{ background: #fff; border-color: var(--rule-strong); }
body .tab-btn[aria-selected="true"]{ background: var(--accent); color: #fff; }
body .tab-list li::before{ background: var(--accent-soft); border-color: #DEDBFF; }
body .tab-list li::after{ border-color: var(--accent); }

body .story-step.is-active{ border-left-color: var(--accent); }
body .story-step.is-active .n{ background: var(--accent); border-color: var(--accent); color: #fff; }
body .story-visual-card{
  --paper: #fff; --paper-alt: #FAFBFE; --paper-raised: #fff; --paper-high: #F4F5FA;
  --rule: #E7E9F2; --rule-strong: #D5DAE8;
  --ink: #0E1020; --ink-dim: #474C63; --ink-faint: #5F657E;
  --accent: #4F46E5; --ledger-green: #0D9488; --flag: #DC2626; --highlighter: #F59E0B;
  color: var(--ink); background: #fff; border-color: var(--rule-strong); box-shadow: var(--e-2);
}
body .slide-line{ background: var(--paper-alt); border-color: var(--rule); }
body .slide-big.flag{ color: #B91C1C; }
body .slide-big.green{ color: #0F766E; }

body .bento-card{ background: #fff; border-color: var(--rule); }
body .bento-card::before{ background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(79,70,229,0.10), transparent 66%); }
body .bento-icon{ background: var(--accent-soft); border-color: #DEDBFF; color: var(--accent); }
body .bento-card:nth-child(2) .bento-icon{ background: #F3E8FF; border-color: #E4D4FB; color: var(--violet); }
body .bento-card:nth-child(3) .bento-icon{ background: var(--teal-soft); border-color: #BDEDE4; color: #0F766E; }
body .bento-card:nth-child(4) .bento-icon{ background: var(--amber-soft); border-color: #FBE3B5; color: #B45309; }
body .bento-card:nth-child(5) .bento-icon{ background: var(--rose-soft); border-color: #FBD5D5; color: #B91C1C; }
body .mini-bars span{ background: var(--rule-strong); }
body .bento-card:hover .mini-bars span{ background: var(--violet); }
body .mini-chip{ border-color: var(--rule-strong); color: var(--ink-faint); background: var(--paper-alt); }

body .find-card{ background: #fff; border-color: var(--rule); }
body .find-card::before{ background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,0.10), transparent 64%); }
body .find-card:nth-child(1) .find-tag{ color: var(--accent); }
body .find-card:nth-child(2) .find-tag{ color: var(--violet); }
body .find-card:nth-child(3) .find-tag{ color: #B91C1C; }
body .find-card:nth-child(4) .find-tag{ color: #0F766E; }

body .trust{ background: transparent; border-top: 1px solid var(--rule); }
body .trust-item .ti{ background: var(--accent-soft); border-color: #DEDBFF; color: var(--accent); }
body .trust-item:nth-child(2) .ti{ background: var(--teal-soft); border-color: #BDEDE4; color: #0F766E; }
body .trust-item:nth-child(3) .ti{ background: var(--amber-soft); border-color: #FBE3B5; color: #B45309; }

/* finale: the one deep-colour moment on the page */
body .finale{
  background: linear-gradient(160deg, #1B1A4E 0%, #312E81 45%, #4F46E5 100%);
  color: #fff;
}
body .finale::before{
  background: radial-gradient(44% 58% at 50% 100%, rgba(255,255,255,0.20), transparent 70%);
}
body .finale h2{ color: #fff; }
body .finale p{ color: rgba(255,255,255,0.82); }
body .finale-note{ color: rgba(255,255,255,0.62); }
body .finale .btn-mark{ background: #fff; color: #221F63; }
body .finale .btn-mark:hover{ background: #F3F4FF; }

body footer{ background: var(--paper-alt); border-top: 1px solid var(--rule); }
body .announce{ background: linear-gradient(90deg,#312E81,#4F46E5 55%,#7C3AED); color: #fff; }
body .announce .pill{ background: #FFD34D; color: #241A00; }
body .topbar{ background: rgba(255,255,255,0.82); }
body .topbar.scrolled{ background: rgba(255,255,255,0.94); }
body .btn-ghost{ background: #fff; }


/* ==========================================================================
   Display typeface
   Plex Sans was doing both the argument and the headline, which is why the
   hero read as generic. A separate display face carries the headline; body
   copy stays Plex Sans. Swap the one variable below to change it.
   ========================================================================== */
:root{
  --font-display: "Archivo", "ClioSans", ui-sans-serif, system-ui, sans-serif;
}
h1, h2,
.hero-v2 h1, .section-head h2, .finale h2, .cta-band h2, .page-hero h1, .feature-hero h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.032em;
}
body .hero-v2 h1{
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 18ch;
  font-weight: 700;
  font-variation-settings: "wdth" 105;
}
body .section-head h2, body .finale h2{
  font-weight: 700; letter-spacing: -0.034em;
  font-size: clamp(28px, 3.4vw, 44px);
}
/* the marker swipe sits lower under a serif's baseline */
body .hero-v2 h1 .accent{
  background-image: linear-gradient(180deg, transparent 57%, #FFD34D 57%, #FFD34D 95%, transparent 95%);
}

/* ==========================================================================
   Logo lockup
   assets/logo.png is transparent but its "C" is drawn white, so on a white bar
   half the monogram disappears. Until there is a dark-ink version of the mark,
   it gets a solid brand tile — which reads as an intentional app icon rather
   than a patch. NOTE the specificity: an earlier body rule was overriding
   the plain .logo img rule, which is what painted the white box on the dark bar.
   ========================================================================== */
/* Two things were wrong here. The mark is a wide lockup (368x215 once its
   transparent margin is cropped), so forcing it into a 30x30 box drew the
   artwork at roughly 18x11px — that was the mushiness. And because the
   original is drawn white-on-transparent for a dark bar, it needed a dark
   tile to be visible on white paper, which read as a sticker stuck on the
   header. The mark is now recoloured to ink for a light bar (the blue
   counter kept), so it sits straight on the header with no tile at all —
   the same way it sat on the dark bar before. */
/* The supplied icon is a finished square app icon on its own dark ground —
   it is used exactly as delivered. No tile, no padding, no crop, no recolour:
   the only thing CSS does is set the display size and round the corners the
   way an app icon is normally presented. */
.logo img, body .logo img{
  background: none;
  padding: 0;
  height: 32px; width: 32px;
  border-radius: 8px;
  object-fit: contain;
}

/* ==========================================================================
   Float card — was sitting on top of the roster and the transcribe bar.
   Now it hangs off the bottom-left corner, clear of all panel content.
   ========================================================================== */
body .hero-window{ padding-bottom: 56px; }

@media (max-width: 1060px){
  body .hero-window{ padding-bottom: 48px; }
  
}
@media (max-width: 480px){
  
  body .hero-window{ padding-bottom: 0; }
}

/* ==========================================================================
   Motion — site-wide
   Applied through classes that site.js adds at runtime, so all 39 sub-pages
   get it without editing their markup. Everything here is disabled under
   prefers-reduced-motion.
   ========================================================================== */

/* staggered entrance for anything JS tags as revealable */
.rv{ opacity: 0; transform: translateY(18px); }
.rv.rv-in{ animation: rv-up .62s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes rv-up{ to{ opacity: 1; transform: none; } }

/* cursor spotlight — reused on every card type across the site */
.spot{ position: relative; isolation: isolate; overflow: hidden; }
.spot::after{
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
              color-mix(in oklab, var(--accent) 12%, transparent), transparent 66%);
  transition: opacity .35s var(--ease);
}
.spot:hover::after{ opacity: 1; }

/* lift on the shared card components used by the sub-pages */
.ledger-card, .feature-nav a, .startup-card, .faq-item{
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease), background .28s var(--ease);
}
.ledger-card:hover, .startup-card:hover{ transform: translateY(-4px); box-shadow: var(--e-2); }
.feature-nav a:hover{ transform: translateY(-3px); box-shadow: var(--e-1); }

/* animated underline on inline prose links */
.feature-body a:not(.btn):not(.card-link){
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .32s var(--ease);
}
.feature-body a:not(.btn):not(.card-link):hover{ background-size: 100% 1.5px; }

/* buttons get a travelling sheen on hover */
.btn-solid, .btn-mark{ position: relative; overflow: hidden; }
.btn-solid::after, .btn-mark::after{
  content: ""; position: absolute; top: 0; bottom: 0; left: -120%; width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-solid:hover::after, .btn-mark:hover::after{ animation: sheen .75s var(--ease); }
@keyframes sheen{ to{ left: 140%; } }

/* arrows lean forward on hover */
.card-link svg, .btn svg{ transition: transform .25s var(--ease); }
.card-link:hover svg, .btn:hover svg{ transform: translateX(3px); }

/* the page-hero gets the same soft field as the homepage hero */
.page-hero, .feature-hero{ position: relative; overflow: hidden; }
.feature-hero::before{
  content: ""; position: absolute; inset: -60% -20% auto -20%; height: 420px; z-index: -1;
  background: radial-gradient(46% 54% at 22% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.page-hero > *, .feature-hero > *{ position: relative; }

/* pricing + faq rows respond to the pointer */
.price-row:not(.head):not(.group-label):hover > div{ background: color-mix(in oklab, var(--accent) 4%, transparent); }
.price-row > div{ transition: background .2s var(--ease); }
.faq-item:hover{ background: color-mix(in oklab, var(--accent) 3%, transparent); }

/* thin scroll-progress bar under the topbar */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60;
  background: linear-gradient(90deg, var(--accent), #7C3AED);
  transition: width .1s linear; pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .rv{ opacity: 1; transform: none; }
  .spot::after{ display: none; }
  .btn-solid::after, .btn-mark::after{ display: none; }
  .scroll-progress{ display: none; }
  .ledger-card:hover, .startup-card:hover, .feature-nav a:hover{ transform: none; }
}


/* ==========================================================================
   Deal-risk card — in normal flow, not floated
   It used to be absolutely positioned over the call panel. Any absolute
   overlay on a panel whose height changes with content will collide sooner
   or later, so it now sits below the panel as a real sibling. No z-index,
   no clipping, and it reflows correctly at every width.
   ========================================================================== */
body .hero-window{
  padding-bottom: 0;
  display: flex; flex-direction: column; gap: var(--s-4);
}
body .float-card{
  position: static; left: auto; right: auto; bottom: auto; top: auto;
  transform: none; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: #fff; border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg); box-shadow: var(--e-2);
}
body .float-card .fc-head{
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
}
body .float-card .fc-acct{ grid-column: 1; margin-top: 0; white-space: nowrap; }
body .float-card .fc-meter{
  grid-column: 2; margin-top: 0; height: 7px; min-width: 90px;
}
body .float-card .fc-foot{
  grid-column: 3; margin-top: 0; display: flex; align-items: center; gap: var(--s-3);
}
body .float-card .fc-score{ font-size: 24px; line-height: 1; }
@media (max-width: 620px){
  body .float-card{ grid-template-columns: 1fr auto; }
  body .float-card .fc-meter{ grid-column: 1 / -1; order: 3; }
  body .float-card .fc-foot{ grid-column: 2; }
}

/* The notetaker tile had a pale indigo fill, so the mark's white "C" vanished
   into it and only the "Q" read. Same root cause as the topbar: the asset is
   drawn light. Dark fill, brand ring. */
body .rost.bot .pic{
  background: #0E1020;
  border-color: var(--accent);
  border-style: dashed;
}
body .rost.bot .pic img{ width: 28px; height: 28px; }

/* ==========================================================================
   Hero field — flat tint, no grid
   The blueprint grid and the radial washes are removed. The hero now sits on
   one flat light tint, the same family as the section bands further down, and
   is separated from the white page by a single hairline rather than a fade.
   ========================================================================== */
body .hero-v2{
  background: #F1F2FE;
  border-bottom: 1px solid var(--rule);
}
body .hero-v2::before,
body .hero-v2::after{ display: none !important; }

/* the panel needs to keep separating from the tint behind it */
body .hero-v2 .mock{
  background: #FFFFFF;
  border: 1px solid #DCDDF4;
  padding: 10px;
}
body .hero-v2 .mock-inner{ border: 1px solid #E7E8F6; }
body .float-card{ background: #FFFFFF; border-color: #DCDDF4; }

/* ==========================================================================
   Tighter chrome
   ========================================================================== */
.topbar-inner{ height: 56px; gap: var(--s-5); }
.logo{ font-size: 15.5px; gap: 8px; }
.logo img, body .logo img{ height: 28px; width: 28px; }
nav.primary summary, .plain-link{ padding: 7px 11px; font-size: 14px; }
.topbar .btn{ padding: 8px 15px; font-size: 14px; }
section[id]{ scroll-margin-top: 76px; }
@media (max-width: 1040px){
  .mobile-panel.open{ inset: 56px 0 0 0; }
  .topbar .btn{ min-height: 40px; }
}

/* ==========================================================================
   Scroll-step motion, extended
   The "How it works" section reads well because the page reveals one idea at
   a time as you arrive at it. The same mechanic is applied to headlines and
   to the product showcase below.
   ========================================================================== */

/* a rule draws itself under each section head as it arrives */
body .section-head{ position: relative; padding-bottom: var(--s-5); }
body .section-head::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent);
  transition: width 1s cubic-bezier(.16,1,.3,1) .2s;
}
body .section-head.in::after,
body .section-head.up.in::after{ width: 72px; }

/* the showcase advances itself while you are looking at it */
body .tabs{ position: relative; }
body .tab-btn{ position: relative; overflow: hidden; }
body .tab-btn .tprog{
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: currentColor; opacity: .55;
}
body .tab-btn[aria-selected="true"] .tprog.run{
  animation: tprog var(--tdur, 5200ms) linear forwards;
}
@keyframes tprog{ to{ width: 100%; } }

/* NOTE: a sticky section head was tried here and removed. Pinning a heading
   with no background over a scrolling card grid means the cards pass straight
   underneath it. Sticky only works when the pinned element is opaque and owns
   its own column — not across full-width content. */

@media (prefers-reduced-motion: reduce){
  body .section-head::after{ width: 72px; transition: none; }
  body .tab-btn .tprog{ display: none; }
}

/* ==========================================================================
   Card hover — flat, no radial wash
   The cursor-following spotlight was a gradient bloom under the pointer. It
   is removed everywhere; hover now reads through border, fill and a small
   lift only.
   ========================================================================== */
.bento-card::before,
.find-card::before,
.spot::after,
body .bento-card::before,
body .find-card::before{
  content: none !important;
  display: none !important;
  background: none !important;
}

body .bento-card,
body .find-card,
.ledger-card, .startup-card, .feature-nav a{
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
body .bento-card:hover,
body .find-card:hover{
  background: var(--paper-alt);
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}

/* ==========================================================================
   Sub-pages — same system as the homepage
   The palette, mockups and card treatments were promoted from body.home to
   body above, so every page now shares them. What follows is the structure
   the inner pages need on top: a tinted hero band, a real article measure,
   and the same flat card behaviour.
   ========================================================================== */

/* hero band matches the homepage hero exactly */
.page-hero, .feature-hero{
  background: #F1F2FE;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.page-hero::before, .feature-hero::before{ display: none !important; }
.page-hero h1, .feature-hero h1{
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.036em; line-height: 1.04;
  font-size: clamp(32px, 4.2vw, 56px);
}
.feature-hero .eyebrow{ color: var(--accent); }
.back-link{ margin-top: var(--s-5); }

/* long-form measure and rhythm */
.feature-body{ max-width: 72ch; }
.feature-body h2{
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 2.3vw, 30px);
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.feature-body h2:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.feature-body ul li::before{ background: var(--accent); }
.feature-body ol.doc-steps li::before{
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* cards on inner pages behave like the homepage bento cells */
.ledger-grid{ gap: var(--s-4); }
.ledger-card{
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  transition: border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.ledger-card:hover{
  background: var(--paper-alt);
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}
.ledger-card h3{
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 102;
  letter-spacing: -0.024em; font-size: 19px;
}
.ledger-card .tag-label{ color: var(--accent); }

/* nav cards at the foot of feature pages */
.feature-nav a{ background: var(--paper-raised); border-color: var(--rule); }
.feature-nav a:hover{ background: var(--paper-alt); border-color: var(--rule-strong); transform: translateY(-2px); }

/* pricing + faq pick up the same ink and accent */
.price-row.head > div{ background: var(--paper-high); color: var(--ink); }
.price-row.group-label > div:first-child{ color: var(--accent); }
.price-table .price-row > div:nth-child(3){ background: rgba(79,70,229,0.045); }
.pop-badge, .pricing-toggle .save-badge{ background: var(--accent); color: #fff; }
.savings-total-note{ background: var(--accent); color: #fff; }
.savings-clio-card{ border-color: var(--accent); background: var(--paper-raised); }
.savings-clio-list li::before{ color: var(--accent); }
.startup-card-credits{ color: var(--accent); border-color: var(--accent); background: transparent; }
.faq-item[open] summary .chev{ color: var(--accent); }

/* section heads on inner pages get the same drawn rule */
.section-head::after{ background: var(--accent); }

/* the closing band on inner pages matches the homepage finale */
.cta-band{ background: var(--ink); color: var(--paper-raised); }
.cta-band h2{ color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.036em; }
.cta-band p{ color: rgba(255,255,255,0.78); }
.cta-band .btn-mark{ background: #fff; color: var(--ink); border-color: #fff; }
.cta-band .btn-mark:hover{ background: var(--accent); color: #fff; border-color: var(--accent); }
.cta-note{ color: rgba(255,255,255,0.6); }

/* ==========================================================================
   Inner-page sections + contents rail
   ========================================================================== */
.feature-body{ max-width: none; }

.fcontents{
  margin: 0 0 var(--s-9);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6);
  align-items: start;
}
@media (max-width: 820px){ .fcontents{ grid-template-columns: 1fr; gap: var(--s-3); } }
.fcontents-label{
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fcontents ol{
  margin: 0; padding: 0; list-style: none; counter-reset: fc;
  columns: 2; column-gap: var(--s-7);
}
@media (max-width: 820px){ .fcontents ol{ columns: 1; } }
.fcontents li{ counter-increment: fc; break-inside: avoid; margin-bottom: 9px; }
.fcontents a{
  display: flex; gap: 12px; font-size: 14.5px; color: var(--ink-dim);
  line-height: 1.45; transition: color .18s var(--ease);
}
.fcontents a::before{
  content: counter(fc, decimal-leading-zero);
  font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-ghost);
  flex-shrink: 0; padding-top: 2px; transition: color .18s var(--ease);
}
.fcontents a:hover{ color: var(--ink); }
.fcontents a.on{ color: var(--ink); font-weight: 600; }
.fcontents a.on::before{ color: var(--accent); }

.fsec{
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6);
  padding: var(--s-8) 0;
  border-top: 1px solid var(--rule);
}
.fsec:first-of-type{ border-top: none; padding-top: 0; }
@media (max-width: 820px){ .fsec{ grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-7) 0; } }

.fsec-head{ position: relative; }
@media (min-width: 821px){ .fsec-head{ position: sticky; top: 84px; } }
.fsec-num{
  display: block; font-family: "ClioMono", monospace; font-size: 11px;
  letter-spacing: .16em; color: var(--ink-ghost); margin-bottom: var(--s-3);
}
.fsec.seen .fsec-num{ color: var(--accent); }
.fsec-head h2{
  margin: 0 !important; padding: 0 !important; border: none !important;
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 104;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.028em;
}
.fsec-body{ max-width: 68ch; }
.fsec-body > *:first-child{ margin-top: 0 !important; }
.fsec-body p{ font-size: 16.5px; line-height: 1.72; }

/* ==========================================================================
   Reading spine
   A single line runs down the whole article with a node per section. The line
   fills as you scroll and the node of the section you are reading lights up,
   so long pages have a sense of position instead of just stacking.
   ========================================================================== */
@media (min-width: 821px){
  .fbody-main{ position: relative; padding-left: 46px; }
  .fbody-main::before{
    content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px;
    width: 2px; background: #E9EBF6; border-radius: 2px;
  }
  .fspine{
    position: absolute; left: 13px; top: 8px; width: 2px; height: 0;
    background: var(--accent); border-radius: 2px;
    transition: height .15s linear;
  }
  .fsec{ position: relative; }
  .fsec-node{
    position: absolute; left: -46px; top: var(--s-8);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid #E3E5F2;
    font-family: "ClioMono", monospace; font-size: 10px; font-weight: 700;
    color: var(--ink-ghost);
    transition: background .3s var(--ease), border-color .3s var(--ease),
                color .3s var(--ease), transform .3s var(--ease);
  }
  .fsec:first-of-type .fsec-node{ top: 0; }
  .fsec.reading .fsec-node{
    background: var(--accent); border-color: var(--accent); color: #fff;
    transform: scale(1.12);
  }
  .fsec.seen:not(.reading) .fsec-node{ border-color: #C3C8EC; color: var(--accent); }
  /* the number already shown in the heading column is redundant now */
  .fsec .fsec-num{ display: none; }
}
@media (max-width: 820px){ .fsec-node, .fspine{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .fspine, .fsec-node{ transition: none; }
}

@media (prefers-reduced-motion: reduce){
  .fsec-head{ position: static !important; }
}

/* ==========================================================================
   Sync panel — integration pages
   ========================================================================== */
.sync-panel .sp-top{
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border-bottom: 1px solid var(--rule);
}
.sync-panel .sp-logo{
  width: 46px; height: 46px; border: 1px solid var(--rule-strong);
  border-radius: var(--r-md); background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sync-panel .sp-logo img{ width: 26px; height: 26px; object-fit: contain; }
.sync-panel .sp-arrow{ color: var(--ink-ghost); font-family: "ClioMono", monospace; font-size: 15px; }
.sync-panel .sp-state{
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: "ClioMono", monospace; font-size: 11px; letter-spacing: .1em;
  color: var(--teal); border: 1px solid #BDEDE4; background: var(--teal-soft);
  border-radius: var(--r-full); padding: 4px 11px;
}
.sync-panel .sp-state i{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sync-panel .sp-rows{ padding: var(--s-3) var(--s-5) var(--s-5); }
.sp-row{
  display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center;
  gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px;
}
.sp-row:last-child{ border-bottom: none; }
.sp-row .f{ font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.sp-row .a{ color: var(--ink); font-weight: 600; }
.sp-row .x{ color: var(--ink-ghost); font-family: "ClioMono", monospace; }
.sp-row .ok{ color: var(--teal); font-family: "ClioMono", monospace; font-size: 11px; }
@media (max-width: 560px){ .sp-row{ grid-template-columns: 1fr auto; } .sp-row .x{ display: none; } }

/* ==========================================================================
   Account record — CRM / customer-intelligence pages
   ========================================================================== */
.acct-panel .ap-top{
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border-bottom: 1px solid var(--rule);
}
.acct-panel .ap-mark{
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid #DEDBFF; color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: "ClioMono", monospace; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.acct-panel .ap-name{ font-weight: 600; font-size: 16px; }
.acct-panel .ap-sub{ font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.acct-panel .ap-tag{
  margin-left: auto; font-family: "ClioMono", monospace; font-size: 10.5px;
  letter-spacing: .1em; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--amber-soft); color: #92400E; border: 1px solid #FBE3B5;
}
.acct-panel .ap-grid{ display: grid; grid-template-columns: repeat(2,1fr); }
@media (max-width: 560px){ .acct-panel .ap-grid{ grid-template-columns: 1fr; } }
.ap-cell{ padding: var(--s-4) var(--s-5); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ap-cell:nth-child(2n){ border-right: none; }
.ap-cell .k{ font-family: "ClioMono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ap-cell .v{ font-size: 14.5px; color: var(--ink); margin-top: 5px; font-weight: 500; }
.ap-src{
  padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: 8px;
  font-family: "ClioMono", monospace; font-size: 11px; color: var(--ink-faint);
}
.ap-src::before{ content: "\2197"; color: var(--accent); }

/* ==========================================================================
   CTA band — literal colours, not tokens
   .cta-band sits inside the dark-surface token block, so var(--ink) resolves
   to a LIGHT value there. Setting the background to var(--ink) produced white
   text on light grey. Anything that must be dark regardless of scope is now
   written as a literal.
   ========================================================================== */
.cta-band{
  background: #12141F !important;
  color: #FFFFFF !important;
  border: none;
}
.cta-band h2{ color: #FFFFFF !important; }
.cta-band p, .cta-band .cta-band-inner > div > p{ color: rgba(255,255,255,0.80) !important; }
.cta-note, .cta-band .cta-note{ color: rgba(255,255,255,0.60) !important; }
.cta-band .btn-mark, .cta-band .btn-solid{
  background: #FFFFFF !important; color: #12141F !important; border-color: #FFFFFF !important;
}
.cta-band .btn-mark:hover, .cta-band .btn-solid:hover{
  background: #4F46E5 !important; color: #FFFFFF !important; border-color: #4F46E5 !important;
}
.cta-band .btn-ghost{
  color: #FFFFFF !important; border-color: rgba(255,255,255,0.35) !important; background: transparent !important;
}
.cta-band .btn-ghost:hover{ background: rgba(255,255,255,0.12) !important; }
.cta-band a:not(.btn){ color: #FFFFFF !important; }

/* same guard for the homepage finale */
.finale{ background: #12141F !important; color: #FFFFFF !important; }
.finale h2{ color: #FFFFFF !important; }
.finale p{ color: rgba(255,255,255,0.80) !important; }
.finale-note{ color: rgba(255,255,255,0.60) !important; }
.finale .btn-mark{ background: #FFFFFF !important; color: #12141F !important; border-color: #FFFFFF !important; }
.finale .btn-mark:hover{ background: #4F46E5 !important; color: #FFFFFF !important; border-color: #4F46E5 !important; }



/* ==========================================================================
   Page hero band — full bleed
   .page-hero / .feature-hero also carry .wrap, so a background on them only
   painted the 1200px content column and stopped dead at its edges. The band
   is drawn by a viewport-wide pseudo behind an isolated stacking context.
   ========================================================================== */
.page-hero, .feature-hero{
  background: transparent !important;
  position: relative;
  z-index: 0;
  border-bottom: none;
}
.page-hero::after, .feature-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #F1F2FE;
  border-bottom: 1px solid var(--rule);
  z-index: -1;
  pointer-events: none;
}
.page-hero > *, .feature-hero > *{ position: relative; }

/* the homepage hero band uses the same mechanism so both edges match */
.hero-v2{
  background: transparent !important;
  position: relative; z-index: 0; border-bottom: none;
}
.hero-v2::before{
  content: "" !important;
  display: block !important;
  position: absolute; inset: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  background: #F1F2FE;
  border-bottom: 1px solid var(--rule);
  z-index: -1; pointer-events: none;
}

/* ==========================================================================
   Hero band — the actual fix
   Two earlier rules set `overflow: hidden` on .page-hero / .feature-hero (it
   was there for radial washes that no longer exist). An element's own
   overflow clips its pseudo-elements, so the 100vw band was being cut back to
   the 1200px content box — which is the mismatched edge on Pricing and FAQ.
   Overflow is released and the band is painted with a box-shadow spread as
   well, so it holds even if a future rule re-clips the pseudo.
   ========================================================================== */
.page-hero, .feature-hero{
  overflow: visible !important;
  background: #F1F2FE !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: 0 0 0 100vmax #F1F2FE;
  clip-path: inset(0 -100vmax);
}
.page-hero::after, .feature-hero::after{ display: none !important; }
.page-hero > *, .feature-hero > *{ position: relative; z-index: 1; }

/* the homepage hero band uses the identical mechanism */
.hero-v2{
  overflow: visible !important;
  background: #F1F2FE !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: 0 0 0 100vmax #F1F2FE;
  clip-path: inset(0 -100vmax);
}
.hero-v2::before, .hero-v2::after{ display: none !important; }
.hero-v2 > *{ position: relative; z-index: 1; }

/* ==========================================================================
   Breathing room under the hero band
   The section that follows carries an inline `padding-block: 0 …`, which beats
   any stylesheet rule. The gap is therefore set as margin on the hero itself —
   it sits outside the painted band, so it reads as clean white space and no
   inline style can cancel it.
   ========================================================================== */
.page-hero, .feature-hero{
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* ==========================================================================
   ==================  THE CALL RECORD  ==================
   Idea: ClioIQ writes in the margin of your call. So the hero is one record —
   the call at the top, the transcript running underneath, and a margin rail
   down the right where each detection is pinned to the moment that caused it,
   joined by a leader line. Not floating satellites, not scattered cards: a
   single document being annotated while you watch.
   ========================================================================== */
.cr-hero{
  background: linear-gradient(180deg, #F2F3FF 0%, #FFFFFF 62%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(36px, 4vw, 68px) 0;
}
.cr-grid{
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 3.2vw, 54px); align-items: center;
}
@media (max-width: 1080px){ .cr-grid{ grid-template-columns: 1fr; } }

.cr-copy .eyebrow{ color: var(--accent); font-size: 12px; letter-spacing: .16em; }
.cr-copy h1{
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "wdth" 102;
  font-size: clamp(52px, 5.8vw, 78px); line-height: 1.0;
  letter-spacing: -0.04em; margin-top: var(--s-4); max-width: 15ch;
}
.cr-copy h1 .accent{
  background: linear-gradient(180deg, transparent 58%, #FFD34D 58%, #FFD34D 95%, transparent 95%);
  padding-inline: 3px;
}
.cr-copy .sub{ margin-top: var(--s-4); max-width: 46ch; font-size: 18.5px; line-height: 1.58; color: var(--ink-dim); }
.cr-copy .acts{ display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.cr-copy .meta{
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: 14px; color: var(--ink-faint);
}
.cr-copy .meta span{ display: inline-flex; align-items: center; gap: 7px; }
.cr-copy .meta svg{ width: 14px; height: 14px; color: var(--teal); }

/* buttons scale with the larger hero type */
.cr-copy .acts .btn{ font-size: 15px; padding: 14px 24px; }

/* ---- the record ---- */
.cr{
  border: 1px solid #E1E3EF; border-radius: 14px; background: #fff;
  box-shadow: 0 26px 54px -32px rgba(18,20,45,.32);
  overflow: hidden; min-width: 0;
}
.cr-head{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid #EDEEF5; background: #FBFBFE;
  font-size: 12.5px; color: var(--ink-dim);
}
.cr-head .rec{
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: "ClioMono", monospace; font-size: 10.5px; letter-spacing: .1em;
  color: #C4302B; background: #FDECEA; border: 1px solid #F8D5D0;
  border-radius: 999px; padding: 3px 10px;
}
.cr-head .rec i{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }

.cr-vids{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #EDEEF5; }
@media (max-width: 560px){ .cr-vids{ grid-template-columns: 1fr; } }
.cr-vid{ position: relative; background: #0F1020; aspect-ratio: 16/10; overflow: hidden; }
.cr-vid video{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.cr-vid .who{
  position: absolute; left: 9px; bottom: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(12,12,26,.58); backdrop-filter: blur(6px);
  padding: 4px 10px; border-radius: 999px;
}
.cr-vid .who .lvl{ display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.cr-vid .who .lvl i{ width: 2px; background: #6EE7B7; border-radius: 1px; animation: crlvl 1s ease-in-out infinite; }
.cr-vid .who .lvl i:nth-child(2){ animation-delay:.12s } .cr-vid .who .lvl i:nth-child(3){ animation-delay:.24s }
@keyframes crlvl{ 0%,100%{ height:2px } 50%{ height:9px } }
.cr-vid.muted .who .lvl{ display: none; }
.cr-vid.muted::after{ content: ""; position: absolute; inset: 0; background: rgba(10,11,24,.28); }

/* transcript + margin */
.cr-body{ display: grid; grid-template-columns: minmax(0,1fr) 232px; }
@media (max-width: 720px){ .cr-body{ grid-template-columns: 1fr; } }
.cr-tr{ padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 176px; }
.cr-ln .hd{ font-size: 11px; font-weight: 600; color: var(--ink); }
.cr-ln .hd s{ text-decoration: none; float: right; font-family: "ClioMono", monospace; font-size: 10px; color: var(--ink-ghost); font-weight: 400; }
.cr-ln .sp{ font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); margin-top: 3px; }
.cr-ln .sp mark{ background: #FFF1C2; color: #4A3500; padding: 0 3px; border-radius: 3px; }

.cr-margin{
  border-left: 1px dashed #DCDEEB; background: #FBFBFE;
  padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 720px){ .cr-margin{ border-left: none; border-top: 1px dashed #DCDEEB; } }
.cr-margin .lbl{
  font-family: "ClioMono", monospace; font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.cr-margin .lbl b{ color: var(--accent); font-weight: 700; }
.cr-note{
  position: relative; background: #fff; border: 1px solid #E4E6F0;
  border-left: 3px solid #E8A33C; border-radius: 8px; padding: 8px 10px;
}
.cr-note.bad{ border-left-color: #D4483F; }
/* leader line back to the transcript */
.cr-note::before{
  content: ""; position: absolute; left: -15px; top: 14px; width: 12px;
  border-top: 1px dashed #CFD2E2;
}
.cr-note .k{ font-family: "ClioMono", monospace; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.cr-note .v{ font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 3px; line-height: 1.35; }
.cr-note .t{ font-family: "ClioMono", monospace; font-size: 9.5px; color: var(--ink-ghost); margin-top: 4px; }

/* Deal risk gets the same card treatment as the other margin notes, so it
   reads as a finished row rather than a trailing, unboxed line. */
.cr-score{
  margin-top: auto; background: #fff; border: 1px solid #E4E6F0;
  border-left: 3px solid #D4483F; border-radius: 8px;
  padding: 10px 12px; max-width: 100%; box-sizing: border-box;
}
.cr-score-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cr-score .k{ font-family: "ClioMono", monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.cr-score .n{ flex: none; font-family: "ClioMono", monospace; font-size: 20px; font-weight: 700; color: #C4302B; line-height: 1; }
.cr-bar{ height: 5px; border-radius: 999px; background: #ECEEF6; overflow: hidden; margin-top: 8px; width: 100%; }
.cr-bar i{ display: block; height: 100%; width: 74%; border-radius: 999px; background: linear-gradient(90deg,#E8A33C,#D4483F); }

/* ==========================================================================
   Pipeline band — the four jobs, then the proof numbers
   These used to be two flat rows of text separated by a large dead gap. They
   are now one band: cards on a connecting rail, then a numbers row where each
   stat carries a meter so the row has something to look at.
   ========================================================================== */
.pipeline-band{
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F6FE 45%, #FFFFFF 100%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(52px, 6vw, 92px);
}
.pipe-head{ max-width: 34ch; margin-bottom: clamp(28px, 3.4vw, 48px); }
.pipe-head .eyebrow{ color: var(--accent); }
.pipe-head h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.1vw, 42px); line-height: 1.08;
  letter-spacing: -0.032em; margin-top: var(--s-3);
}

/* the four cards, sitting on a rail that reads left-to-right */
.cr-strip{
  position: relative;
  display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.6vw,22px);
}
/* the rail: a hairline running behind the icon row */
@media (min-width: 901px){
  .cr-strip::before{
    content: ""; position: absolute; left: 0; right: 0; top: 42px; height: 1px;
    background: repeating-linear-gradient(90deg, #D5D8EC 0 6px, transparent 6px 12px);
    z-index: 0;
  }
}
@media (max-width: 900px){ .cr-strip{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .cr-strip{ grid-template-columns: 1fr; } }

.cr-item{
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 18px 20px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cr-item:hover{
  transform: translateY(-4px);
  border-color: #C9CDF0;
  box-shadow: 0 18px 38px -22px rgba(18,20,45,.34);
}
.cr-item .ico{
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: #EEF0FF; border: 1px solid #DFE2FA; color: var(--accent);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.cr-item .ico svg{ width: 19px; height: 19px; }
.cr-item:hover .ico{ background: var(--accent); color: #fff; border-color: transparent; }
.cr-item .n{
  font-family: "ClioMono", monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--ink-ghost); display: block; margin-top: 15px;
}
.cr-item b{ display: block; font-size: 15px; font-weight: 700; margin-top: 5px; letter-spacing: -0.01em; }
.cr-item p{ font-size: 13px; color: var(--ink-faint); line-height: 1.55; margin-top: 6px; }

/* --- each card carries a small picture of what that step actually produces,
       drawn in CSS so it stays sharp and costs nothing to load --- */
.pipe-viz{
  margin-top: 14px; padding: 10px; border-radius: 9px;
  background: #FAFAFE; border: 1px solid #ECEDF7;
  min-height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}

/* 01 — calendar rows */
.pv-row{ display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-dim); }
.pv-row.dim{ opacity: .5; }
.pv-dot{ width: 6px; height: 6px; border-radius: 50%; background: #CFD2E2; flex: none; }
.pv-dot.ok{ background: #16A34A; }
.pv-t{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "ClioMono", monospace; }
.pv-tag{
  flex: none; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: #EDEEF6; color: var(--ink-faint); font-weight: 700;
}
.pv-tag.join{ background: #E7F6EC; color: #15803D; }

/* 02 — transcript line + tags */
.pv-line{ font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.pv-line em{ font-style: normal; background: #FFF1C2; color: #4A3500; padding: 0 3px; border-radius: 3px; }
.pv-chips{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pv-chip{
  font-family: "ClioMono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; border: 1px solid #E1E3F0; background: #fff; color: var(--ink-faint);
}
.pv-chip.red{ border-color: #F3CFCC; color: #C4302B; }
.pv-chip.amber{ border-color: #F0DCB8; color: #A96A0B; }

/* 03 — risk score, meter and trend */
.pv-score{ display: flex; align-items: baseline; justify-content: space-between; }
.pv-k{ font-family: "ClioMono", monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pv-n{ font-family: "ClioMono", monospace; font-size: 22px; font-weight: 700; color: #C4302B; line-height: 1; }
.pv-meter{ height: 4px; border-radius: 999px; background: #ECEEF6; overflow: hidden; }
.pv-meter i{ display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#E8A33C,#D4483F); transition: width 1s var(--ease-out) .2s; }
.cr-item.in .pv-meter i{ width: 74%; }
.pv-spark{ display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 2px; }
.pv-spark span{
  flex: 1; height: 0; border-radius: 2px 2px 0 0; background: #DFE1EE;
  transition: height .7s var(--ease-out);
}
.cr-item.in .pv-spark span{ height: var(--h); }
.cr-item.in .pv-spark span:nth-child(5){ background: #E8A33C; }
.cr-item.in .pv-spark span:nth-child(6){ background: #D4483F; }
.pv-spark span:nth-child(2){ transition-delay:.06s } .pv-spark span:nth-child(3){ transition-delay:.12s }
.pv-spark span:nth-child(4){ transition-delay:.18s } .pv-spark span:nth-child(5){ transition-delay:.24s }
.pv-spark span:nth-child(6){ transition-delay:.3s }

/* 04 — CRM fields written back */
.pv-fld{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; padding-bottom: 5px; border-bottom: 1px dashed #E4E6F2;
}
.pv-fk{ font-family: "ClioMono", monospace; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.pv-fv{ font-weight: 700; color: var(--ink); }
.pv-sync{ display: flex; align-items: center; gap: 6px; font-family: "ClioMono", monospace; font-size: 9.5px; color: #15803D; }

@media (prefers-reduced-motion: reduce){
  .pv-meter i{ transition: none; width: 74%; }
  .pv-spark span{ transition: none; height: var(--h); }
}

@media (prefers-reduced-motion: reduce){
  .cr-vid .who .lvl i, .cr-head .rec i{ animation: none; }
}

/* ==========================================================================
   Call frame — window chrome
   Traffic-light dots, a boxed LIVE tag, name chips per tile, a ring on whoever
   is speaking, and a control bar at the foot. Structure taken from the app
   frame; colours stay the site's own light palette.
   ========================================================================== */
.cr-head .dots{ display: flex; gap: 6px; margin-right: 4px; }
.cr-head .dots i{ width: 9px; height: 9px; border-radius: 50%; }
.cr-head .dots i:nth-child(1){ background: #F0655B; }
.cr-head .dots i:nth-child(2){ background: #F5BE4F; }
.cr-head .dots i:nth-child(3){ background: #5FC97F; }
.cr-head .title{ font-family: "ClioMono", monospace; font-size: 12px; color: var(--ink-dim); }
.cr-head .rec{
  border-radius: 4px; padding: 2px 8px; font-weight: 700;
  background: transparent; border: 1px solid #E8A9A2; color: #C4302B;
}

/* tiles */
.cr-vid{ transition: box-shadow .35s var(--ease); }
.cr-vid.speaking{ box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.cr-vid .who{
  border-radius: 6px; background: rgba(255,255,255,.94); color: var(--ink);
  border: 1px solid rgba(0,0,0,.06); font-family: "ClioMono", monospace;
  font-size: 10.5px; font-weight: 500; padding: 4px 9px;
}
.cr-vid.speaking .who{ background: var(--accent); color: #fff; border-color: transparent; }
.cr-vid.speaking .who .lvl i{ background: #fff; }
.cr-vid:not(.speaking) .who .lvl{ display: none; }
.cr-vid.muted::after{ content: none; }
.cr-vid:not(.speaking){ filter: saturate(.9) brightness(.94); }

/* control bar */
.cr-ctrl{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px; border-top: 1px solid #EDEEF5; background: #FBFBFE;
}
.cr-ctrl span{
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #DDDFEA; background: #fff; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
}
.cr-ctrl span svg{ width: 14px; height: 14px; }
.cr-ctrl span.end{ background: #E5473D; border-color: #E5473D; color: #fff; }

.cr-score .n{ font-variant-numeric: tabular-nums; }

.cr-score .n{ font-variant-numeric: tabular-nums; }
.cr-margin .lbl b{ font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hero fits the first screen
   The record was taller than the viewport, so "Deal risk 74" fell below the
   fold on shorter windows. The call block is now measured against viewport
   height rather than fixed pixels: the tiles, transcript and margin each get
   a vh-based clamp, so the whole record scales to fit whatever screen it
   lands on. svh is used so mobile browser chrome doesn't cause a jump.
   ========================================================================== */
.cr-hero{ padding-block: clamp(14px, 2.2vh, 36px) 0; }

@media (min-width: 1081px){
  .cr-grid{
    min-height: calc(100vh - 56px - clamp(28px, 4.4vh, 72px));
    min-height: calc(100svh - 56px - clamp(28px, 4.4vh, 72px));
    align-content: center;
  }
}

/* tiles scale with the screen instead of a fixed 16:10. object-position
   keeps the top of frame (faces) in view on the rare screen short enough
   to crop from the bottom. */
.cr-vid{
  aspect-ratio: auto;
  height: clamp(180px, 25vh, 300px);
  height: clamp(180px, 25svh, 300px);
}

/* transcript and margin tighten up on short screens */
.cr-tr{
  min-height: clamp(104px, 14vh, 168px);
  min-height: clamp(104px, 14svh, 168px);
  padding: clamp(10px, 1.3vh, 15px) 16px;
  gap: clamp(7px, 1.1vh, 12px);
}
.cr-margin{ padding: clamp(10px, 1.3vh, 15px) 14px clamp(11px, 1.4vh, 16px); gap: clamp(6px, .9vh, 10px); }
.cr-note{ padding: clamp(6px, .85vh, 9px) 10px; }
.cr-note .t{ margin-top: 2px; }
.cr-score{ padding-top: clamp(8px, 1.1vh, 12px); }
.cr-ctrl{ padding: clamp(8px, 1.1vh, 12px); }
.cr-head{ padding: clamp(8px, 1.1vh, 11px) 15px; }

/* the caption strip sits after the fold by design */
.cr-strip{ margin-top: clamp(20px, 2.6vh, 44px); }

/* left column keeps pace so it never forces the row taller than the record */
@media (min-width: 1081px) and (max-height: 860px){
  .cr-copy h1{ font-size: clamp(40px, 4.4vw, 62px); }
  .cr-copy .sub{ font-size: 16.5px; margin-top: var(--s-3); }
  .cr-copy .acts{ margin-top: var(--s-5); }
  .cr-copy .meta{ margin-top: var(--s-5); padding-top: var(--s-3); }
}

/* ==========================================================================
   Hero alignment
   Copy and record are centred against each other, and the record's internal
   columns line up: the transcript's first line and the margin's first note
   share a baseline, and the margin column is a fixed width so the leader
   lines meet their notes at the same offset on every row.
   ========================================================================== */
@media (min-width: 1081px){
  .cr-grid{ align-items: center; }
  .cr-copy{ align-self: center; }
  .cr{ align-self: center; }
}

/* transcript / margin share a top edge */
.cr-body{ align-items: stretch; }
.cr-tr, .cr-margin{ padding-top: clamp(11px, 1.4vh, 16px); }
.cr-margin{ display: flex; flex-direction: column; }

/* first row of each column starts level */
.cr-tr > .cr-ln:first-child,
.cr-margin > .lbl{ margin-top: 0; }
.cr-margin .lbl{ min-height: 16px; display: flex; align-items: center; }
.cr-tr .cr-ln .hd{ min-height: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-tr .cr-ln .hd s{ float: none; }

/* the score block pins to the bottom so both columns end flush */
.cr-score{ margin-top: auto; }

/* leader lines meet the notes at a consistent offset */
.cr-note::before{ top: 13px; }

/* control bar centres on the record, not the video grid */
.cr-ctrl{ justify-content: center; }

/* name chips align to the same inset on both tiles */
.cr-vid .who{ left: 10px; bottom: 10px; }

/* ==========================================================================
   Tab panel staging
   Rows arrive in sequence each time a tab is opened. Only opacity and a small
   translate are animated, so the panel's height — already fixed by the
   tallest panel in the stack — is never affected.
   ========================================================================== */
.tab-panel .stagger{
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.tab-panel .stagger.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .tab-panel .stagger{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Live transcript
   Lines arrive one at a time and transcribe themselves, the way a caption
   feed does. The frame is fixed: JS measures each speech block at its
   finished size and pins that height before emptying it, so typing only
   refills reserved space — the line, the column and the record never resize.
   Without JS the three lines simply render as static text.
   ========================================================================== */
#crTranscript{ overflow: hidden; position: relative; justify-content: flex-start; }
#crTranscript .cr-ln{ flex: none; }

#crTranscript.is-live .cr-ln{
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
#crTranscript.is-live .cr-ln.shown{ opacity: 1; transform: none; }

/* the speaker of the current line steps forward */
#crTranscript.is-live .cr-ln.now .hd{ color: var(--accent); }
#crTranscript.is-live .cr-ln.now .sp{ color: var(--ink); }

/* the pinned height means nothing below can shift while text arrives */
#crTranscript.is-live .cr-ln .sp{ overflow: hidden; }

/* caret on the line being transcribed right now */
#crTranscript.is-live .cr-ln.typing .sp::after{
  content: ""; display: inline-block; width: 1px; height: .95em;
  margin-left: 1px; vertical-align: -0.12em;
  background: var(--accent); animation: caret .9s step-end infinite;
}

/* a caret while a Copilot question is being typed out */
.co-bubble.typing::after{
  content: ""; display: inline-block; width: 1px; height: 1em;
  margin-left: 2px; vertical-align: -0.15em;
  background: currentColor; animation: caret .9s step-end infinite;
}
@keyframes caret{ 0%,100%{ opacity: 1 } 50%{ opacity: 0 } }

@media (prefers-reduced-motion: reduce){
  #crTranscript.is-live .cr-ln{ opacity: 1; transform: none; transition: none; }
  #crTranscript.is-live .cr-ln.typing .sp::after,
  .co-bubble.typing::after{ display: none; }
}

/* ==========================================================================
   MOBILE
   Everything above is written desktop-first, so this block is where the
   layout is brought down to phone widths. It is deliberately last so it wins
   without needing !important, and it is organised by what actually breaks:
   type that was sized for a 1400px column, grids with fixed tracks, and the
   few places a stacked layout would otherwise leave a screen of white space.
   ========================================================================== */

/* nothing may push the page sideways. clip rather than hidden so the sticky
   topbar and the sticky story panel keep working. */
html{ overflow-x: clip; }
body{ overflow-x: clip; }
img, video, svg, canvas{ max-width: 100%; }

@media (max-width: 1080px){
  /* the hero headline is sized against a wide column; give it its own scale
     once the record drops underneath the copy */
  .cr-copy h1{ font-size: clamp(34px, 8.2vw, 54px); max-width: 20ch; }
  .cr-copy .sub{ font-size: 16.5px; max-width: 56ch; }
  .cr-grid{ gap: var(--s-7); }
  .cr-hero{ padding-block: var(--s-6) 0; }
  /* the vh-based record sizing is only meaningful when it sits beside the
     copy — on a stacked layout it just makes the tiles short and wide */
  .cr-vid{ height: auto; aspect-ratio: 16/10; }
  .cr-tr{ min-height: 0; }
}

@media (max-width: 900px){
  /* Stacking all four product panels in one grid cell is what keeps the
     desktop box from resizing between tabs. On a phone the panels differ in
     height by hundreds of pixels, so the tallest would leave a screenful of
     blank under the short ones. Swap back to showing only the active panel. */
  .tab-panels{ display: block; }
  .tab-panels > .tab-panel{ grid-area: auto; }
  .tab-panel{ display: none; visibility: visible; opacity: 1; }
  .tab-panel.active{ display: block; }

  /* the tab strip scrolls rather than wrapping into a ragged block */
  .tabs{
    width: 100%; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* fade the trailing edge so a clipped last tab reads as "swipe for
       more" instead of looking like a layout bug */
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
  }
  .tabs::-webkit-scrollbar{ display: none; }
  .tab-btn{ padding: 11px 16px; font-size: 13.5px; }
}

@media (max-width: 760px){
  /* generous desktop section rhythm is too much scrolling on a phone */
  :root{
    --section: clamp(56px, 12vw, 80px);
    --section-sm: clamp(44px, 9vw, 64px);
  }
  h1{ letter-spacing: -0.03em; }
  .section-head h2, .pipe-head h2{ font-size: clamp(24px, 6.4vw, 32px); }
  .pipe-head{ max-width: none; }

  /* four-up rows become two-up */
  .cr-strip{ grid-template-columns: repeat(2, 1fr); }
  .ticker{ grid-template-columns: repeat(2, 1fr); }
  .ticker-item{ padding-left: 0; }
  .ticker-item:nth-child(even){ padding-left: var(--s-4); }

  /* the record's margin column sits under the transcript, so its notes read
     as a list rather than a rail — drop the leader lines that point at text
     which is no longer beside them */
  .cr-note::before{ display: none; }
  .cr-margin{ gap: 8px; }

  /* buttons go full width so they are easy to hit */
  .cr-copy .acts{ gap: var(--s-2); }
  .cr-copy .acts .btn{ flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 560px){
  .cr-strip{ grid-template-columns: 1fr; }
  .ticker{ grid-template-columns: 1fr; }
  .ticker-item{ padding-left: 0 !important; border-left: none; }
  .ticker-item + .ticker-item{ border-top: 1px solid var(--rule); }

  /* two stacked 16:10 tiles is a lot of screen — go wider and shorter */
  .cr-vid{ aspect-ratio: 16/8.5; }

  .cr-copy .meta{ gap: var(--s-2) var(--s-4); font-size: 13px; }
  .plot-yaxis{ display: none; }
  .fcontents ol{ columns: 1; }
}

/* touch targets: anything tappable gets a real 44px hit area */
@media (pointer: coarse){
  .btn, .tab-btn, .nav-toggle, .mobile-panel a,
  .fcontents a, .index-row, .feature-nav a{ min-height: 44px; }
  .btn, .tab-btn{ display: inline-flex; align-items: center; justify-content: center; }
  /* hover styling never resolves on touch, so don't let it stick after a tap */
  .cr-item:hover{ transform: none; box-shadow: none; }
}