/* ============================================================
   LEASELINE, light editorial system
   Calm off-white surfaces, one accent, real shadows.
   ============================================================ */

:root{
  /* surfaces */
  --bg:          #faf9f7;   /* warm off-white, never pure #fff */
  --surface:     #ffffff;
  --surface-alt: #f4f2ee;

  /* ink */
  --ink:         #15181d;
  --ink-mid:     #4a5158;
  --ink-dim:     #6d757e;
  --ink-faint:   #98a0a8;

  /* single brand accent + a quiet secondary */
  --accent:      #0f6e67;
  --accent-deep: #0a5450;
  --accent-soft: #e6f2f0;
  --accent-2:    #2f5fd0;

  /* semantic */
  --pos:         #167c40;
  --pos-bg:      #edfaf1;
  --pos-bd:      #bfe6cd;
  --warn:        #a8600c;
  --warn-bg:     #fdf6e9;
  --warn-bd:     #f0dcb4;
  --neg:         #b23a3a;
  --neg-bg:      #fdf1f1;
  --neg-bd:      #f0cdcd;

  --line:        rgba(21,24,29,0.09);
  --line-soft:   rgba(21,24,29,0.055);

  --shadow-sm:   0 1px 2px rgba(21,24,29,0.05), 0 2px 6px rgba(21,24,29,0.04);
  --shadow-md:   0 2px 4px rgba(21,24,29,0.04), 0 8px 20px rgba(21,24,29,0.06);
  --shadow-lg:   0 4px 8px rgba(21,24,29,0.05), 0 18px 42px rgba(21,24,29,0.09);

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);

  --font-display:'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:   'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:    'Space Grotesk', system-ui, sans-serif;

  --header-h:    72px;
  --wrap:        1200px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 32px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
}

.section{ position:relative; padding:clamp(72px,9vw,132px) 0; }

/* Two adjacent sections would otherwise stack a full bottom pad on a full
   top pad, giving 144-264px of dead vertical space at every boundary. Halve
   the top pad when a section directly follows another so the page keeps its
   rhythm without the visible blank gaps. */
.section + .section{ padding-top:clamp(28px,3.5vw,48px); }

/* ---------- Shared type ---------- */

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.025em;
  line-height:1;
  margin:0;
  color:var(--ink);
}

/* small label. Satoshi, gentle tracking (no mono, no 0.2em) */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 clamp(18px,2.4vw,26px);
}

.lede{
  max-width:62ch;
  margin:0 auto clamp(44px,5.5vw,68px);
  text-align:center;
  font-size:clamp(1.02rem,1.3vw,1.15rem);
  color:var(--ink-mid);
}
.lede-tight{ margin-bottom:clamp(32px,4vw,48px); }

.section-head{ text-align:center; margin-bottom:clamp(36px,4.5vw,58px); }

.section-title{
  font-size:clamp(1.9rem,4.4vw,3.3rem);
  max-width:24ch;
  margin:0 auto clamp(18px,2.2vw,26px);
  text-wrap:balance;
}

.fine-print{
  font-size:0.8rem;
  color:var(--ink-faint);
  text-align:center;
  margin:clamp(16px,2vw,22px) 0 clamp(44px,5.5vw,66px);
}

.ta-r{ text-align:right; }

/* numeric / tabular data keeps Space Grotesk */
.cell-num,.stat-num,.metric-num,.pcard-value{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
}

/* ---------- Card primitive ---------- */

.glass{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}

/* ============================================================
   AMBIENT WASH  (replaces grid + scanline + vignette)
   ============================================================ */

.fx-wash{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%,  rgba(15,110,103,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 8%,  rgba(47,95,208,0.04)  0%, transparent 62%);
}

main,.site-header,.site-footer,.toast-stack,.scroll-progress{ position:relative; z-index:2; }

/* ---------- Scroll progress ---------- */

.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:70;
  background:transparent;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:0%;
  background:var(--accent);
}

/* ============================================================
   STICKY HEADER
   ============================================================ */

.site-header{
  position:fixed;
  top:14px; left:0; right:0;
  z-index:50;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.nav{
  pointer-events:auto;
  width:95%;
  max-width:1480px;
  height:var(--header-h);
  padding:0 14px 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:14px;
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--shadow-md);
}

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-mark{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--accent);
  border-radius:9px;
  flex:0 0 auto;
  transition:background .6s var(--ease);
}
.brand-mark svg{ width:18px; height:18px; }
.brand:hover .brand-mark{ background:var(--accent-deep); }
.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.12rem;
  letter-spacing:-0.02em;
  text-transform:uppercase;
}

.nav-pill{
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border-radius:999px;
  background:var(--surface-alt);
}
.nav-pill a{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-mid);
  padding:8px 15px;
  border-radius:999px;
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav-pill a:hover{ color:var(--ink); background:var(--surface); box-shadow:var(--shadow-sm); }

.nav-right{ display:flex; align-items:center; gap:14px; }

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--pos);
  white-space:nowrap;
}
.status-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--pos);
  animation:pulse-dot 2s var(--ease) infinite;
  flex:0 0 auto;
}
@keyframes pulse-dot{
  0%,100%{ box-shadow:0 0 0 0 rgba(22,124,64,0.32); }
  70%    { box-shadow:0 0 0 7px rgba(22,124,64,0); }
}

.nav-toggle{
  display:none;
  width:40px; height:40px;
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  padding:0;
  place-items:center;
  gap:5px;
}
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--ink); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.01em;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease);
}
.btn:hover{ transform:translateY(-3px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* primary (solid accent) */
.btn-cyan{
  padding:12px 20px;
  font-size:0.85rem;
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn-cyan:hover{ background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:var(--shadow-md); }

/* hero primary (solid ink) */
.btn-solid{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:var(--shadow-md);
}
.btn-solid:hover{ background:#000; box-shadow:var(--shadow-lg); }
.btn-solid .btn-arrow{ width:15px; height:15px; transition:transform .6s var(--ease); }
.btn-solid:hover .btn-arrow{ transform:translateX(4px); }

/* secondary (outlined white) */
.btn-ghost{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ border-color:rgba(21,24,29,0.2); box-shadow:var(--shadow-md); }

.btn-lg{ padding:17px 30px; font-size:0.98rem; }
.btn-block{ width:100%; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:min(100svh,900px);
  display:grid;
  place-items:center;
  padding:calc(var(--header-h) + 84px) 0 clamp(72px,9vw,120px);
  overflow:hidden;
}

.hero-aura{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(15,110,103,0.07) 0%, transparent 55%),
    radial-gradient(circle at 72% 66%, rgba(47,95,208,0.05) 0%, transparent 58%);
  animation:aura 22s ease-in-out infinite alternate;
}
@keyframes aura{
  0%  { transform:translate3d(-1.5%,-1%,0) scale(1);   }
  100%{ transform:translate3d(1.5%,2%,0)  scale(1.06); }
}

.hero-inner{ position:relative; text-align:center; z-index:3; }

/* the narrative line is big, but body-font so it reads as a sentence */
.hero-eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(1.15rem,3vw,2.15rem);
  line-height:1.35;
  letter-spacing:-0.01em;
  text-transform:none;
  max-width:27ch;
  margin:0 auto clamp(14px,1.8vw,22px);
  color:var(--ink-mid);
  text-wrap:balance;
}
.eyebrow-time{
  font-family:var(--font-num);
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.hero-title{
  font-size:clamp(3rem,9.5vw,6.2rem);
  letter-spacing:-0.035em;
  margin:0 0 clamp(22px,2.8vw,32px);
  color:var(--ink);
}

.hero-sub{
  max-width:46ch;
  margin:0 auto clamp(32px,4vw,46px);
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  color:var(--ink-dim);
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* floating parallax cards (soft, low-contrast) */
.hero-shapes{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-shapes .shape{
  position:absolute;
  display:block;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  opacity:0.85;
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
.shape.s1{ width:140px; height:140px; top:17%;  left:5%;   border-radius:24px; }
.shape.s2{ width:82px;  height:82px;  top:65%;  left:12%;  }
.shape.s3{ width:110px; height:110px; top:25%;  right:7%;  border-radius:50%; }
.shape.s4{ width:60px;  height:60px;  top:72%;  right:15%; border-radius:14px; }
.shape.s5{ width:186px; height:104px; bottom:8%; left:38%; border-radius:20px; }
.shape.s6{ width:54px;  height:54px;  top:10%;  right:32%; border-radius:12px; }

.hero-fade{
  position:absolute;
  bottom:0; left:0; right:0;
  height:140px;
  background:linear-gradient(to bottom, rgba(250,249,247,0), var(--bg));
  pointer-events:none;
  z-index:2;
}

/* ============================================================
   STATS
   ============================================================ */

.stats-section{ background:var(--surface-alt); }

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);
}

.stat{ padding:clamp(22px,2.4vw,32px); }
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.stat-num{
  display:block;
  font-weight:700;
  font-size:clamp(2.4rem,4.2vw,3.4rem);
  line-height:1;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin-bottom:14px;
}

/* one accent, tonal labels (no three-neon rainbow) */
.stat-label,.metric-label{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  line-height:1.5;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.stat .stat-label{ color:var(--ink-mid); }

/* accent rule above each number */
.stat::before,.metric::before{
  content:'';
  display:block;
  width:26px; height:2px;
  border-radius:2px;
  background:var(--accent);
  margin-bottom:20px;
  opacity:0.75;
}

/* ---------- lead decay timeline ----------
   Lightweight stepper under the stats grid. No card treatment: it is
   a supporting detail, so only the nodes carry colour, fading from
   accent to faint to read as decay. */

.decay{
  max-width:58rem;
  margin:clamp(34px,4vw,52px) auto 0;
}

.decay-caption{
  margin:0 0 clamp(24px,3vw,34px);
  text-align:center;
  font-size:0.88rem;
  line-height:1.6;
  color:var(--ink-dim);
}

.decay-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.decay-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* connector: starts 4px clear of this node, stops 4px short of the next */
.decay-step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:5px;                      /* node centre (12px node) */
  left:calc(50% + 10px);
  width:calc(100% - 8px);
  height:1px;
  background:var(--line);
}

.decay-node{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--accent);
  margin-bottom:14px;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
/* intent cooling off, stage by stage */
.decay-step:nth-child(2) .decay-node{ background:rgba(15,110,103,0.65); }
.decay-step:nth-child(3) .decay-node{ background:rgba(15,110,103,0.35); }
.decay-step:nth-child(4) .decay-node{ background:var(--ink-faint); }

.decay-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.decay-label{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:6px;
}

.decay-value{
  max-width:22ch;
  font-size:0.85rem;
  line-height:1.5;
  color:var(--ink-dim);
}
.decay-step:last-child .decay-label{ color:var(--ink-mid); }

/* stack vertically rather than squeezing four columns */
@media (max-width:760px){
  .decay-track{
    grid-template-columns:1fr;
    gap:0;
  }
  .decay-step{
    flex-direction:row;
    align-items:flex-start;
    gap:14px;
    padding-bottom:22px;
  }
  .decay-step:last-child{ padding-bottom:0; }

  .decay-step:not(:last-child)::after{
    top:16px;
    left:5px;
    width:1px;
    height:calc(100% - 16px);
  }

  .decay-node{ margin-bottom:0; margin-top:5px; }

  .decay-text{ align-items:flex-start; text-align:left; }
  .decay-value{ max-width:none; }
}

/* logo row */
.logo-row{ margin-top:clamp(48px,6vw,80px); text-align:center; }
.logo-row-label{
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 24px;
}
.logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(26px,4.5vw,58px);
}
.logos li{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1rem,1.9vw,1.45rem);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  color:var(--ink);
  opacity:0.34;
  filter:grayscale(1);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.logos li:hover{ opacity:0.7; transform:translateY(-3px); }

/* ============================================================
   COVERAGE
   Literal hour count: weekday bars sit at 10/24 = 41.67%, weekends at
   a near-zero stub, giving the stated 50 (10 hours x 5 days). Every
   Leaseline bar is a full 24, giving 168 (24 x 7). Bars grow on scroll
   via the existing .reveal observer, so this needs no extra JS.
   ============================================================ */

.cov-heading{
  font-size:clamp(1.55rem,3.5vw,2.6rem);
  text-transform:none;
  letter-spacing:-0.02em;
  line-height:1.18;
  max-width:26ch;
  margin:0 auto clamp(36px,4.5vw,58px);
  text-align:center;
  text-wrap:balance;
}

.cov-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  max-width:62rem;
  margin-inline:auto;
  align-items:stretch;
}

.cov-panel{
  display:flex;
  flex-direction:column;
  padding:clamp(24px,2.6vw,34px);
}
.cov-panel:hover{ box-shadow:var(--shadow-md); }

.cov-title{
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-dim);
  margin:0 0 clamp(20px,2.4vw,28px);
}

.cov-chart{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(6px,0.9vw,10px);
}

.cov-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:0;
}

.cov-track{
  display:flex;
  align-items:flex-end;
  width:100%;
  height:clamp(94px,12vw,128px);
  background:var(--surface-alt);
  border-radius:7px;
  overflow:hidden;
}

/* Bars are drawn at full height by default. Same rule as .reveal above:
   the zero-height starting state only exists under .js-anim. */
.cov-fill{
  display:block;
  width:100%;
  height:var(--fill);
  border-radius:7px;
  background:var(--ink-faint);
}
.cov-panel-live .cov-fill{ background:var(--accent); }

/* grow on scroll, left to right, 50ms apart */
.js-anim .cov-fill{
  height:0;
  transition:height .85s var(--ease);
}
.js-anim .cov-panel.is-visible .cov-fill{ height:var(--fill); }
.cov-col:nth-child(1) .cov-fill{ transition-delay:0ms; }
.cov-col:nth-child(2) .cov-fill{ transition-delay:50ms; }
.cov-col:nth-child(3) .cov-fill{ transition-delay:100ms; }
.cov-col:nth-child(4) .cov-fill{ transition-delay:150ms; }
.cov-col:nth-child(5) .cov-fill{ transition-delay:200ms; }
.cov-col:nth-child(6) .cov-fill{ transition-delay:250ms; }
.cov-col:nth-child(7) .cov-fill{ transition-delay:300ms; }

.cov-day{
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.06em;
  line-height:1;
  color:var(--ink-faint);
}

.cov-num{
  font-family:var(--font-num);
  font-size:clamp(2.1rem,3.5vw,2.9rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin:clamp(24px,2.8vw,32px) 0 8px;
}
.cov-panel-live .cov-num{ color:var(--accent); }

.cov-cap{
  margin:0;
  font-size:0.86rem;
  line-height:1.55;
  color:var(--ink-dim);
}

@media (max-width:860px){
  .cov-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .cov-fill,
  .js-anim .cov-fill{ height:var(--fill); transition:none; }
}

/* ============================================================
   DASHBOARD SIMULATOR
   ============================================================ */

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);
}

.metric{ padding:clamp(20px,2.1vw,26px); }
.metric:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.metric-num{
  display:block;
  font-weight:700;
  font-size:clamp(2rem,3.3vw,2.7rem);
  line-height:1;
  letter-spacing:-0.035em;
  color:var(--ink);
  margin-bottom:12px;
}
.metric-label{ font-size:0.75rem; }

.dash-split{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(12px,1.5vw,18px);
  align-items:start;
}

.panel{ padding:0; overflow:hidden; }
.panel:hover{ box-shadow:var(--shadow-md); }

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px clamp(18px,2vw,24px);
  border-bottom:1px solid var(--line-soft);
  background:rgba(244,242,238,0.5);
}
.panel-title{
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.panel-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--pos);
}

.table-scroll{ overflow-x:auto; }

table.log{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}
table.log th{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:left;
  padding:12px clamp(18px,2vw,24px);
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
table.log td{
  font-size:0.86rem;
  color:var(--ink-mid);
  padding:14px clamp(18px,2vw,24px);
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
table.log td.cell-num{ font-size:0.8rem; color:var(--ink-dim); }
table.log td:first-child{ color:var(--ink); font-weight:500; }
table.log tbody tr{ transition:background .4s var(--ease); }
table.log tbody tr:hover{ background:var(--accent-soft); }
table.log tbody tr:last-child td{ border-bottom:0; }

.badge{
  display:inline-block;
  font-weight:600;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:6px;
  border:1px solid;
  white-space:nowrap;
}
.b-green{ color:var(--pos);  border-color:var(--pos-bd);  background:var(--pos-bg); }
.b-amber{ color:var(--warn); border-color:var(--warn-bd); background:var(--warn-bg); }
.b-red{   color:var(--neg);  border-color:var(--neg-bd);  background:var(--neg-bg); }
.b-gray{  color:var(--ink-dim); border-color:var(--line); background:var(--surface-alt); }

/* sparkline */
.spark-body{ padding:clamp(18px,2vw,24px); }
.spark-figure{ position:relative; }
.spark-figure svg{ display:block; width:100%; height:170px; }

/* Same rule as .reveal: the chart is fully drawn by default, and the
   undrawn starting state only exists under .js-anim. Without this the
   sparkline depended on its own observer firing, and an anchor jump past
   the dashboard left an empty chart card. */
.spark-line{
  stroke-dasharray:1000;
  stroke-dashoffset:0;
}
.spark-area{ opacity:1; }
.spark-tip{ opacity:1; }

.js-anim .spark-line{ stroke-dashoffset:1000; }
.js-anim .spark-area{ opacity:0; }
.js-anim .spark-tip{ opacity:0; }

.js-anim .spark-figure.is-drawn .spark-line{ animation:draw 2s var(--ease) forwards; }
.js-anim .spark-figure.is-drawn .spark-area{ animation:fade-in 1.2s var(--ease) .7s forwards; }
.js-anim .spark-figure.is-drawn .spark-tip{ animation:tip 1.2s var(--ease) 1.4s forwards; }

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }
@keyframes tip{
  0%  { opacity:0; }
  100%{ opacity:1; }
}

.spark-caption{
  font-weight:600;
  font-size:0.74rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:18px 0 0;
  text-align:center;
}

/* ============================================================
   COMPLIANCE NOTE
   Prose block under the dashboard card. No card wrapper; a single
   accent rule ties it to the section above it.
   ============================================================ */

.compliance{
  max-width:60ch;
  margin:clamp(44px,5.5vw,72px) auto 0;
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line-soft);
}

.compliance-title{
  font-family:var(--font-body);
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  font-weight:700;
  text-transform:none;
  letter-spacing:-0.01em;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 12px;
}

.compliance-body{
  margin:0;
  font-size:0.96rem;
  line-height:1.75;
  color:var(--ink-mid);
}

/* ============================================================
   FAQ
   Native <details> so it works keyboard-first without JS.
   ============================================================ */

/* The reduced top padding here existed only because the pricing grid
   sat above with its own vertical padding and badge overhang. With
   pricing removed, the FAQ follows the dashboard section directly and
   uses the standard .section rhythm. */

.faq-list{
  max-width:52rem;
  margin-inline:auto;
  display:grid;
  gap:0.75rem;
}

.faq-footnote{
  max-width:52rem;
  margin:clamp(24px,3vw,34px) auto 0;
  text-align:center;
  font-size:0.9rem;
  color:var(--ink-dim);
}
.faq-footnote a{
  font-weight:600;
  color:var(--accent);
  transition:color .4s var(--ease);
}
.faq-footnote a:hover{ color:var(--accent-deep); text-decoration:underline; }
.faq-footnote a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.faq-item{
  background:var(--surface);
  border-radius:1rem;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--line);
  transition:box-shadow .5s var(--ease);
}
.faq-item:hover{ box-shadow:var(--shadow-md), inset 0 0 0 1px var(--line); }
.faq-item[open]{ box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(15,110,103,0.22); }

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:1.15rem clamp(18px,2.2vw,26px);
  cursor:pointer;
  list-style:none;
  font-size:0.98rem;
  font-weight:700;
  line-height:1.45;
  color:var(--ink);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  border-radius:1rem;
}

.faq-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:var(--accent);
  transition:transform .45s var(--ease);
}
.faq-item[open] .faq-icon{ transform:rotate(180deg); }

.faq-a{
  padding:0 clamp(18px,2.2vw,26px) 1.25rem;
}
.faq-a p{
  margin:0;
  padding-top:1rem;
  border-top:1px solid var(--line-soft);
  font-size:0.94rem;
  line-height:1.7;
  color:var(--ink-mid);
}

/* ============================================================
   OTHER AUTOMATIONS
   Reuses .glass for the cards and the same 4/2/1 column rhythm
   as the stats and metric grids. No new tokens.
   ============================================================ */

.autos-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);
  align-items:stretch;
}

.auto-card{
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.2vw,28px);
}
.auto-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.auto-cat{
  display:block;
  font-weight:600;
  font-size:0.7rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--accent);
  margin-bottom:10px;
}

.auto-name{
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:-0.01em;
  line-height:1.35;
  color:var(--ink);
  margin:0 0 10px;
}

.auto-body{
  margin:0;
  font-size:0.9rem;
  line-height:1.65;
  color:var(--ink-mid);
}

.autos-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:clamp(34px,4vw,52px);
}
.autos-cta-text{
  margin:0;
  font-size:1rem;
  color:var(--ink-mid);
}

@media (max-width:1080px){
  .autos-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .autos-grid{ grid-template-columns:1fr; }
  .autos-cta{ flex-direction:column; gap:14px; }
  .autos-cta .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   BOOK A CALL MODAL
   Same overlay/card pattern as the call demo modal.
   ============================================================ */

.book-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,32px);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.book-overlay[hidden]{ display:none; }
.book-overlay.is-open{ opacity:1; }

.book-backdrop{
  position:absolute;
  inset:0;
  background:rgba(21,24,29,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  cursor:pointer;
}

.book-card{
  position:relative;
  z-index:1;
  width:min(480px,100%);
  max-height:min(90svh,760px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(0.985);
  transition:transform .5s var(--ease);
}
.book-overlay.is-open .book-card{ transform:none; }

.book-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(20px,2.4vw,26px) clamp(20px,2.6vw,28px) 0;
}
.book-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--ink);
  margin:0;
}
.book-close{
  flex:0 0 auto;
  width:34px; height:34px;
  display:grid;
  place-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink-mid);
  cursor:pointer;
  padding:0;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.book-close svg{ width:14px; height:14px; }
.book-close:hover{ color:var(--ink); border-color:rgba(21,24,29,0.2); background:var(--surface-alt); }
.book-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.book-form{
  display:grid;
  gap:14px;
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,28px) clamp(22px,2.6vw,28px);
}

.book-field{ display:grid; gap:6px; }
.book-label{
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.book-input{
  width:100%;
  font-family:var(--font-body);
  font-size:0.95rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-radius:0.75rem;
  padding:11px 13px;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.book-input:hover{ border-color:rgba(21,24,29,0.16); }
.book-input:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(15,110,103,0.12);
}
.book-textarea{ resize:vertical; min-height:80px; }

/* honeypot: hidden from people, visible to bots */
.book-gotcha{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.book-submit{ margin-top:4px; }
.book-submit[disabled]{ opacity:0.6; cursor:progress; }

.book-status{
  margin:0;
  min-height:1.2em;
  font-size:0.85rem;
  line-height:1.5;
  text-align:center;
  color:var(--ink-dim);
}
.book-status.is-ok{ color:var(--pos); }
.book-status.is-err{ color:var(--neg); }

@media (max-width:560px){
  .book-overlay{ padding:0; }
  .book-card{
    width:100%;
    height:100svh;
    max-height:100svh;
    border-radius:0;
    border:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .book-card{ transform:none; }
}

/* ============================================================
   PRICING  [PARKED]
   The pricing markup was removed from index.html while the tiers are
   being finalised. These rules are inert without it (no matching
   elements) and are kept so restoring the section is a paste, not a
   rewrite. The markup itself is recoverable from git: commit afe2e81.
   Delete this whole block if pricing is not coming back.

   Spec supplied as Tailwind utilities; translated to this
   project's plain CSS. Utility values are literal (p-8 = 2rem,
   rounded-2xl = 1rem, lg: = 1024px). teal/ink/slate map onto the
   existing tokens in :root. No new hex values introduced.
   ============================================================ */

.pricing-section{ padding-top:clamp(32px,4vw,60px); }

/* ---------- billing toggle ---------- */

.billing-toggle{
  margin-top:2rem;                 /* mt-8 */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;                     /* gap-3 */
  font-size:14px;
  font-weight:600;
  line-height:1;
}

.billing-label{ color:var(--ink-mid); }        /* slate */
.billing-label-ink{ color:var(--ink); }        /* ink   */

.billing-switch{
  position:relative;
  flex:0 0 auto;
  height:1.75rem;                  /* h-7  */
  width:3rem;                      /* w-12 */
  border:0;
  padding:0;
  border-radius:999px;
  background:var(--accent);        /* teal-700 */
  cursor:pointer;
}
.billing-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.billing-knob{
  position:absolute;
  left:0.25rem;                    /* left-1 */
  top:0.25rem;                     /* top-1  */
  width:1.25rem;                   /* 5      */
  height:1.25rem;
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease);
}
/* 3rem track − 1.25rem knob − 0.25rem inset ×2 = 1.25rem of travel */
.billing-switch[aria-checked="true"] .billing-knob{ transform:translateX(1.25rem); }

.billing-badge{
  font-size:11px;
  font-weight:700;
  line-height:1.5;
  color:var(--accent);                                 /* teal-700 */
  background:var(--accent-soft);                       /* bg-teal-50 */
  box-shadow:inset 0 0 0 1px rgba(15,110,103,0.18);    /* ring-1 ring-teal-100 */
  padding:3px 8px;
  border-radius:999px;
}

/* ---------- grid ---------- */

.price-grid{
  margin-top:3.5rem;               /* mt-14 */
  margin-inline:auto;              /* mx-auto */
  max-width:64rem;                 /* max-w-5xl */
  display:grid;
  grid-template-columns:1fr;       /* grid-cols-1 */
  align-items:center;              /* items-center */
  gap:1.5rem;                      /* gap-6 */
}
@media (min-width:640px){          /* sm: capped + centered */
  .price-grid{ max-width:28rem; }  /* max-w-md */
}
@media (min-width:1024px){         /* lg */
  .price-grid{
    max-width:64rem;               /* lg:max-w-5xl */
    grid-template-columns:repeat(3,minmax(0,1fr)); /* lg:grid-cols-3 */
    gap:1.25rem;                   /* lg:gap-5 */
  }
}

/* ---------- outer cards ---------- */

.pcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius:1rem;              /* rounded-2xl */
  padding:2rem;                    /* p-8 */
  /* shadow-card + ring-1 ring-slate-200/70 (ring = inset, no layout shift) */
  box-shadow:var(--shadow-md), inset 0 0 0 1px var(--line);
}

/* h3 inherits the display/uppercase rule globally, so reset it here */
.pcard-name{
  font-family:var(--font-body);
  font-size:1rem;                  /* base */
  font-weight:700;                 /* bold */
  text-transform:none;
  letter-spacing:0;
  line-height:1.5;
  text-align:center;
  color:var(--ink-mid);            /* slate */
  margin:0;
}

.pcard-note{
  margin:6px 0 0;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink-dim);
}

.pcard-price{
  margin:14px 0 0;
  display:flex;
  align-items:baseline;            /* baseline price row */
  justify-content:center;
  gap:6px;
}
.pcard-value{
  font-family:var(--font-num);
  font-size:3rem;                  /* text-5xl */
  font-weight:800;                 /* extrabold */
  letter-spacing:-0.025em;         /* tracking-tight */
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pcard-suffix{
  font-size:14px;
  font-weight:600;
  color:var(--ink-dim);            /* slate */
}

.pcard-caption{
  margin:10px 0 0;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
}

.pcard-list{
  margin:1.5rem 0 0;
  display:block;
}
.pcard-list li{
  display:flex;
  align-items:center;              /* items-center */
  gap:0.625rem;                    /* gap-2.5 */
  padding:0.875rem 0;              /* py-3.5 */
  border-top:1px solid var(--line-soft);   /* hairline slate-100 */
  font-size:14px;
  font-weight:600;                 /* semibold */
  line-height:1.5;
  color:var(--ink-mid);            /* slate */
}
.pcard-list li:last-child{ border-bottom:1px solid var(--line-soft); }

.pcard-check{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:var(--accent);             /* teal-600 */
}

.pcard-btn{
  margin-top:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;                      /* full-width */
  padding:0.8rem 1rem;
  border-radius:0.75rem;           /* rounded-xl */
  background:var(--accent-soft);   /* bg-teal-50 */
  box-shadow:inset 0 0 0 1px rgba(15,110,103,0.18);  /* ring-1 ring-teal-100 */
  color:var(--accent);             /* teal-700 */
  font-size:14px;
  font-weight:700;                 /* bold */
  transition:background .4s var(--ease);
}
.pcard-btn:hover{ background:rgba(15,110,103,0.12); }   /* hover bg-teal-100 */
.pcard-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- middle card: highlight ---------- */

.pcard-featured{
  z-index:10;                      /* relative z-10 */
  background:var(--accent);        /* solid teal-700 */
  box-shadow:var(--shadow-lg);     /* shadow-pop, no ring */
}

/* teal-100 / teal-200 as white-alphas so they track the brand color */
.pcard-featured .pcard-name{    color:rgba(255,255,255,0.72); }  /* teal-100 */
.pcard-featured .pcard-note{    color:rgba(255,255,255,0.62); }
.pcard-featured .pcard-value{   color:#fff; }
.pcard-featured .pcard-suffix{  color:rgba(255,255,255,0.62); }  /* teal-200 */
.pcard-featured .pcard-caption{ color:rgba(255,255,255,0.62); }  /* teal-200 */
.pcard-featured .pcard-check{   color:rgba(255,255,255,0.72); }  /* teal-200 */

.pcard-featured .pcard-list li{
  color:#fff;
  border-top-color:rgba(255,255,255,0.15);      /* white/15 hairline */
}
.pcard-featured .pcard-list li:last-child{
  border-bottom-color:rgba(255,255,255,0.15);
}

.pcard-featured .pcard-btn{
  background:#fff;
  color:var(--accent);             /* teal-700 */
  box-shadow:var(--shadow-sm);     /* soft shadow, no ring */
}
.pcard-featured .pcard-btn:hover{ background:var(--accent-soft); }  /* hover bg-teal-50 */
.pcard-featured .pcard-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.pcard-badge{
  position:absolute;
  top:-0.75rem;                    /* -top-3 */
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border-radius:999px;             /* rounded-full */
  padding:0.25rem 0.75rem;         /* px-3 py-1 */
  font-size:11px;
  font-weight:700;                 /* bold */
  text-transform:uppercase;
  letter-spacing:0.05em;           /* tracking-wider */
  line-height:1.4;
  color:var(--accent);             /* teal-700 */
  box-shadow:var(--shadow-sm);     /* soft shadow */
  white-space:nowrap;
}

@media (min-width:1024px){
  .pcard-featured{
    margin-block:-0.75rem;         /* lg:-my-3 */
    transform:scale(1.04);         /* lg:scale-[1.04] */
  }
}

/* ============================================================
   CLOSING CTA
   ============================================================ */

.closing-section{ overflow:hidden; }

.closing-aura{
  position:absolute;
  inset:-25% -10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 38% 44%, rgba(15,110,103,0.07) 0%, transparent 55%),
    radial-gradient(circle at 66% 60%, rgba(47,95,208,0.05) 0%, transparent 58%);
  animation:aura 22s ease-in-out infinite alternate;
}

.closing{
  position:relative;
  text-align:center;
  padding:clamp(44px,6.5vw,82px) clamp(24px,4vw,54px);
  max-width:880px;
  margin-inline:auto;
  border-radius:22px;
  box-shadow:var(--shadow-lg);
}
.closing:hover{ transform:translateY(-3px); }

.closing-title{
  font-size:clamp(1.85rem,4.8vw,3.5rem);
  letter-spacing:-0.03em;
  margin-bottom:clamp(16px,2vw,24px);
  text-wrap:balance;
}
.closing-sub{
  max-width:46ch;
  margin:0 auto clamp(28px,3.4vw,38px);
  color:var(--ink-dim);
  font-size:clamp(1rem,1.35vw,1.15rem);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  border-top:1px solid var(--line-soft);
  padding:28px 0;
  background:var(--surface-alt);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-size:1rem;
  color:var(--ink-dim);
}
.footer-meta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:0.74rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--pos);
}

/* contact row */
.footer-base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.footer-email{
  font-size:0.88rem;
  font-weight:600;
  color:var(--accent);
  transition:color .4s var(--ease);
}
.footer-email:hover{ color:var(--accent-deep); text-decoration:underline; }
.footer-email:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.footer-copy{
  margin:0;
  font-size:0.8rem;
  color:var(--ink-faint);
}

/* ============================================================
   TOASTS
   ============================================================ */

.toast-stack{
  position:fixed;
  top:calc(var(--header-h) + 28px);
  right:20px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(320px,calc(100vw - 40px));
  pointer-events:none;
}

.toast{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateX(120%);
  opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
  pointer-events:auto;
}
.toast.is-in{ transform:translateX(0); opacity:1; }
.toast.is-out{ transform:translateX(120%); opacity:0; }

.toast-icon{
  width:24px; height:24px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:7px;
}
.toast-icon svg{ width:13px; height:13px; }

.toast-success .toast-icon{ color:var(--pos);    background:var(--pos-bg); }
.toast-info    .toast-icon{ color:var(--accent); background:var(--accent-soft); }

.toast-msg{
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.01em;
  color:var(--ink-mid);
  line-height:1.45;
  margin:0;
}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */

/* Visible by default. Content must never depend on a scroll trigger:
   if script.js fails to load, errors, or the observer never fires, the
   page still renders in full. The hidden starting state is applied only
   under .js-anim, which the inline head script sets when it knows an
   IntersectionObserver exists to undo it. */
.reveal{ opacity:1; transform:none; }

.js-anim .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js-anim .reveal.is-visible{ opacity:1; transform:none; }

/* featured card is scaled only at lg, so preserve the scale through reveal */
@media (min-width:1024px){
  .js-anim .pcard-featured.reveal{ transform:scale(1.04) translateY(20px); }
  .pcard-featured.reveal,
  .js-anim .pcard-featured.reveal.is-visible{ transform:scale(1.04); }
}

.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
.reveal[data-delay="4"]{ transition-delay:.28s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1080px){
  .stats-grid,.metric-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dash-split{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav-pill{ display:none; }
  .nav-pill.is-open{
    display:flex;
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    padding:8px;
    border-radius:14px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:var(--shadow-lg);
  }
  .nav{ position:relative; }
  .nav-toggle{ display:grid; }
  .status-chip .status-label{ display:none; }
}

@media (max-width:760px){
  :root{ --header-h:64px; }
  .stats-grid,.metric-grid{ grid-template-columns:1fr; }
  /* .price-grid is already single-column below lg, nothing to override */
  .hero-cta .btn{ width:100%; }
  .shape.s1,.shape.s5{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  /* must out-specify .js-anim .reveal, or content stays hidden here */
  .reveal,
  .js-anim .reveal{ opacity:1; transform:none; }
  .spark-line,
  .js-anim .spark-line{ stroke-dashoffset:0; }
  .spark-area,.spark-tip,
  .js-anim .spark-area,.js-anim .spark-tip{ opacity:1; }
}

/* ============================================================
   CALL DEMO MODAL
   Additive block. Reuses the tokens defined in :root above.
   no new colors, fonts, radii or shadows introduced.
   ============================================================ */

.demo-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,32px);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.demo-overlay[hidden]{ display:none; }
.demo-overlay.is-open{ opacity:1; }

.demo-backdrop{
  position:absolute;
  inset:0;
  background:rgba(21,24,29,0.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  cursor:pointer;
}

.demo-card{
  position:relative;
  z-index:1;
  width:min(1000px,100%);
  max-height:min(88svh,860px);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:translateY(16px) scale(0.985);
  transition:transform .5s var(--ease);
}
.demo-overlay.is-open .demo-card{ transform:none; }

/* ---------- head ---------- */

.demo-head{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line-soft);
  background:rgba(244,242,238,0.5);
}

.demo-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--pos);
  margin-bottom:6px;
}
.demo-live-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--pos);
  animation:pulse-dot 2s var(--ease) infinite;
  flex:0 0 auto;
}
.demo-overlay.is-done .demo-live{ color:var(--ink-faint); }
.demo-overlay.is-done .demo-live-dot{ background:var(--ink-faint); animation:none; }

.demo-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.1rem,2vw,1.45rem);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--ink);
  margin:0;
}

.demo-close{
  flex:0 0 auto;
  width:36px; height:36px;
  display:grid;
  place-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink-mid);
  cursor:pointer;
  padding:0;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.demo-close svg{ width:15px; height:15px; }
.demo-close:hover{ color:var(--ink); border-color:rgba(21,24,29,0.2); background:var(--surface-alt); }
.demo-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- body ---------- */

.demo-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:1.55fr 1fr;
}

.demo-panel{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.demo-transcript-panel{ border-right:1px solid var(--line-soft); }

.demo-panel-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--line-soft);
}
.demo-panel-title{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}
.demo-turn,.demo-score{
  font-family:var(--font-num);
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.demo-score.is-complete{ color:var(--pos); }

/* transcript */
.demo-transcript{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.demo-empty{
  margin:auto;
  text-align:center;
  font-size:0.9rem;
  color:var(--ink-faint);
}

.demo-line{
  max-width:86%;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--line-soft);
  font-size:0.9rem;
  line-height:1.55;
  color:var(--ink-mid);
  opacity:0;
  transform:translateY(8px);
  animation:demo-line-in .5s var(--ease) forwards;
}
@keyframes demo-line-in{ to{ opacity:1; transform:none; } }

.demo-line-ai{
  align-self:flex-start;
  background:var(--accent-soft);
  border-color:rgba(15,110,103,0.16);
  border-bottom-left-radius:5px;
}
.demo-line-caller{
  align-self:flex-end;
  background:var(--surface-alt);
  border-bottom-right-radius:5px;
}
.demo-line.is-active{
  border-color:rgba(15,110,103,0.45);
  box-shadow:0 0 0 3px rgba(15,110,103,0.08);
}

.demo-speaker{
  display:block;
  font-weight:600;
  font-size:0.64rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.demo-line-ai .demo-speaker{ color:var(--accent); }
.demo-line-caller .demo-speaker{ color:var(--ink-faint); }

/* checklist */
.demo-checklist{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.demo-crit{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:0.88rem;
  line-height:1.5;
  color:var(--ink-faint);
  transition:color .5s var(--ease);
}
.demo-crit.is-met{ color:var(--ink-mid); }

.demo-crit-box{
  flex:0 0 auto;
  width:19px; height:19px;
  margin-top:3px;
  display:grid;
  place-items:center;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.demo-crit-box svg{ width:11px; height:11px; }
.demo-crit.is-met .demo-crit-box{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:scale(1.06);
}

/* ---------- foot ---------- */

.demo-foot{
  flex:0 0 auto;
  border-top:1px solid var(--line-soft);
  background:rgba(244,242,238,0.5);
}

.demo-progress{
  height:2px;
  background:var(--line-soft);
}
.demo-progress span{
  display:block;
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .4s var(--ease);
}

.demo-controls{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:clamp(14px,1.8vw,20px) clamp(18px,2.4vw,28px);
}
.demo-play{ flex:0 0 auto; }
.demo-play-icon{ width:14px; height:14px; }

.demo-note{
  margin:0;
  font-size:0.78rem;
  color:var(--ink-faint);
}
.demo-note.is-error{ color:var(--neg); }

/* ---------- page state while open ---------- */

body.demo-lock{ overflow:hidden; }

/* ---------- responsive: stack transcript above checklist ---------- */

@media (max-width:860px){
  .demo-card{ max-height:92svh; }
  .demo-body{
    grid-template-columns:1fr;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .demo-transcript-panel{
    border-right:0;
    border-bottom:1px solid var(--line-soft);
  }
  /* panels scroll with the body instead of independently */
  .demo-transcript{ overflow:visible; min-height:210px; }
  .demo-checklist{ overflow:visible; }
  .demo-line{ max-width:92%; }
}

@media (max-width:560px){
  .demo-overlay{ padding:0; }
  .demo-card{
    width:100%;
    max-height:100svh;
    height:100svh;
    border-radius:0;
    border:0;
  }
  .demo-controls{ gap:10px; }
  .demo-play{ width:100%; justify-content:center; }
  .demo-note{ text-align:center; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .demo-line{ animation:none; opacity:1; transform:none; }
  .demo-card{ transform:none; }
}