/* Vroom Analytics studio site — v4: terracotta/cream system */
:root{
  --terra:#c0562f; --terra-dk:#9a3f20;
  --cream:#faf3e8; --cream-2:#f3e9d6;
  --ink:#201612; --muted:#6f5f52;
  --bg:#faf3e8; --card:#fffdf8;
  --line:#e8dcc8; --radius:12px; --radius-lg:16px; --max:1080px;
  --radius-btn:10px; /* v1.21: the one button radius — every tier references it */
  --bark:#3d2b1f; --coal:#2b2119; --parchment:#f0e6d4; /* dark surfaces + code */
  --leaf:#1e6f43; --mist:#f4faf6; --lake:#2f6f9f; --amber:#f0b429; /* status hues */
  --clay:#8a6d4f; --saddle:#5b4a36; /* warm grays */
  --terra-lt:#e8936b; --cream-lt:#f5c9a8; /* legible on dark surfaces */
  --shadow:0 14px 34px rgba(32,22,18,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky-cta{transition:none}}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
a{color:var(--terra);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--terra);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header — floating pill nav */
header.site{position:sticky;top:12px;z-index:50;background:transparent}
header.site .wrap{max-width:1360px} /* v1.15: room for the full 10-link nav */
.nav-pill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(250,243,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 22px;
  box-shadow:0 10px 30px rgba(32,22,18,.10)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;
  color:var(--ink);font-size:15px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px}
.brand-mark{width:30px;height:30px;border-radius:8px}
nav.links{display:flex;gap:18px;align-items:center;font-size:15px}
nav.links a{color:var(--ink);white-space:nowrap}
nav.links .btn-shiny{white-space:nowrap;flex-shrink:0}
/* ---- v1.21 button system: one computed style per tier, site-wide ----
   .btn-shiny (+ .alt dark, + .btn-sm compact) = PRIMARY conversion action:
     assessment, quote, try/run demo, form submits — the thing we most want clicked.
   .btn = STANDARD solid CTA: supporting actions, card CTAs, hero scroll links.
   .btn.ghost = TERTIARY outline: the quieter alternative next to a primary.
   .btn-sm = compact tier for tight spaces (consent). .btn.ghost-on-dark = named
     variant for dark surfaces (consent banner).
   Never restyle a tier from a context selector — add a named variant instead. */
.btn{display:inline-block;background:var(--terra);color:#fff!important;font-weight:700;
  padding:12px 24px;border-radius:var(--radius-btn);border:0;cursor:pointer;font-size:16px}
.btn:hover{background:var(--terra-dk);text-decoration:none}
.btn.ghost{background:transparent;color:var(--terra)!important;border:2px solid var(--terra)}
.btn.ghost:hover{background:var(--terra);color:#fff!important}
.btn-sm{font-size:14.5px;padding:10px 20px}
.btn.ghost-on-dark{background:transparent;color:var(--cream-lt)!important;border:2px solid var(--terra-lt)}
.btn.ghost-on-dark:hover{background:var(--terra-lt);color:var(--ink)!important}

/* v1.21: shiny = the PRIMARY conversion tier (assessment, quote, try/run demo).
   Kept exactly as the demo-first buttons visitors already know. */
.btn-shiny{display:inline-flex;align-items:center;gap:.55rem;color:#fff!important;font-weight:800;
  font-size:16.5px;padding:.9rem 1.7rem;border-radius:14px;border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(135deg,#d4683c 0%,#b34a24 100%);
  box-shadow:0 4px 14px rgba(192,86,47,.38),inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease}
.btn-shiny:hover{color:#fff!important;text-decoration:none;transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(192,86,47,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-shiny::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-shiny:hover::after,.btn-shiny:focus-visible::after{left:135%}
.btn-shiny.alt{background:linear-gradient(135deg,#4a3826 0%,#2e2115 100%);
  box-shadow:0 4px 14px rgba(61,43,31,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-shiny.alt:hover{box-shadow:0 8px 24px rgba(61,43,31,.5),inset 0 1px 0 rgba(255,255,255,.22)}
/* compact primary for the header CTA — same tier, smaller footprint */
.btn-shiny.btn-sm{font-size:15px;padding:.62rem 1.2rem;border-radius:12px}
.btn-shiny:disabled{opacity:.55;cursor:default}

/* v1.21: ONE cta-row component. Spacing belongs to the component:
   30px above the buttons, 14px between them, wraps on narrow screens.
   Replaces the retired proof-button row and bare <p><a class="btn"> heroes. */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;align-items:center}

/* blog event lede — the customer scene that opens every post */
.event{font-size:1.06rem;line-height:1.6;border-left:3px solid var(--terra);
  padding:.2rem 0 .2rem 1rem;margin:1.1rem 0 1.3rem;color:var(--ink)}
.event strong{color:var(--terra)}

/* compact honest pilot note on homepage service blocks */
.pilot-note{font-size:.92rem;color:#6b5b45;margin:.5rem 0 0}
.pilot-note a{font-weight:700}

/* newsletter discount incentive */
.nl-discount{display:inline-block;background:#1e6f43;color:#fff;font-weight:800;
  border-radius:999px;padding:.35rem 1rem;margin:.6rem 0 .2rem;font-size:1rem}

/* hero — light cream */
.hero{padding:88px 0 64px;color:var(--ink);background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M26 24h4v8h-4zM24 26h8v4h-8z' fill='%23c0562f' fill-opacity='0.05'/%3E%3C/svg%3E"),
  linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em;
  max-width:16ch;color:var(--ink)}
.hl-terra{color:var(--terra)}
.hero p.lede{font-size:19px;color:var(--muted);max-width:640px;margin:0}
.hero .cta-row{margin-top:30px}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terra);margin-bottom:16px}

/* trust strip */
.trust-strip{background:var(--terra);color:#fff}
.trust-strip-in{display:flex;gap:10px 28px;justify-content:space-between;flex-wrap:wrap;
  padding:15px 24px;font-size:15px}
.trust-strip-in span{font-weight:700;white-space:nowrap}
.trust-strip-in span::before{content:"✓ ";font-weight:800}
/* v1.34: kb-callout folded into the RAG service block (2026-09-23) */
/* get-started: one conversion section — demos, demo-on-your-site, assessment-or-brief, how-it-works */
#get-started{background:var(--cream)}
.gs-block{margin-top:56px}
.gs-block:first-of-type{margin-top:40px}
.gs-block h2{font-size:clamp(24px,3.4vw,32px)}
.unsure-banner{margin-top:56px;padding:28px 32px;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:var(--card)}
.unsure-banner h3{margin:0 0 8px;font-size:22px}
.unsure-banner p{margin:0 0 16px;max-width:640px}
/* the discount button lives on its own CTA row, never inline mid-sentence */
.unsure-banner .cta-line{margin:22px 0 0}
/* pricing summary: one scan of the menu */
.price-list{display:grid;gap:16px;margin:32px 0 8px}
.price-row{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;padding:20px 24px}
.price-row-main h3{margin:0 0 4px;font-size:19px}
.price-row-main p{margin:0;color:var(--ink-soft);font-size:15.5px}
.price-row-price{margin:0;white-space:nowrap;font-size:16px}
.price-row-links{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
.care-note{margin:24px 0 0;max-width:720px;font-size:16px}
.cta-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:19px;margin:26px 0 0}
/* pair: standard/ghost tier sized to sit next to a shiny primary in a cta-line —
   same footprint (matches .btn-shiny metrics), quieter voice. Named variant on
   purpose: tiers are never restyled from a context selector. */
.btn-pair{font-size:16.5px;padding:.9rem 1.7rem}
/* cta-note: the reassurance that used to sit between buttons — now its own line
   so text and buttons never interleave mid-sentence */
.cta-note{margin:10px 0 0;font-size:15.5px;color:var(--ink-soft);max-width:640px}
.founder-note{margin-top:32px;max-width:700px}
.founder-note .sig{font-weight:700;margin-top:8px}
@media(max-width:720px){.price-row{grid-template-columns:1fr}.price-row-price{white-space:normal}}

/* sections — one rhythm so every section breathes the same */
section{padding:72px 0}
/* every fragment target lands below the floating pill header */
[id]{scroll-margin-top:84px}
section.band{background:var(--cream-2)}
section.divider{border-top:1px solid var(--line)}
h2{font-size:clamp(24px,3.4vw,32px);margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
/* h2like: h3 elements that carry h2 visual weight (heading hierarchy stays correct) */
.h2like{font-size:clamp(24px,3.4vw,32px);margin:0 0 12px;color:var(--ink);letter-spacing:-.01em;font-weight:700}
.sub{color:var(--muted);max-width:680px;margin:0 0 32px}
.quiet{color:var(--muted);font-size:.92em}

/* ---- one card system: every boxed component shares border, radius, shadow ---- */
.svc,.founder-card,.demo-card,.price-row,.beehiiv{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:var(--card)}
.pilots-box{background:var(--cream-2);padding:36px}
.care-strip{padding:36px}
.care-strip .go{font-weight:600;font-size:15px}
.enemy-box{border-left:4px solid var(--terra);padding:28px 32px}
.founding-window{margin:8px 0 40px;padding:28px 32px;border:1px solid var(--line);border-left:4px solid var(--terra);border-radius:var(--radius-lg);box-shadow:var(--shadow);background:var(--card)}
.founding-window h3{margin:0 0 10px;font-size:24px}
.founding-window p{margin:0 0 12px;max-width:680px}
.founding-window .window-close{margin-bottom:16px}
.founding-window .cta-row{margin:0}
.proof-close{justify-content:center;margin-top:40px}
.beehiiv{background:var(--terra);border-color:transparent}

/* cards */
.grid{display:grid;gap:20px}
.grid>*{min-width:0} /* let scrollable children (pricing tables) shrink on narrow screens */
.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid.cols3,.grid.cols4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column}
.card>*{min-width:0} /* flex items must shrink so .table-scroll scrolls instead of overflowing */
.card h3{margin:0 0 8px;font-size:20px;color:var(--ink)}
.card .price{font-weight:700;color:var(--terra);margin:0 0 10px}
.card p{color:var(--muted);font-size:15.5px;margin:0 0 16px;flex:1}
.card .go{font-weight:600;font-size:15px}

/* demo library — elevated proof section */
.demo-promo{background:var(--cream-2);border-radius:24px;margin:0 12px}
.demo-promo .wrap{padding-top:56px;padding-bottom:56px}
.demo-promo h2{color:var(--ink)}
.demo-promo .sub{color:var(--muted)}
.demo-promo .card{box-shadow:0 14px 34px rgba(32,22,18,.10)}

/* steps — bordered cards in the same system as everything else */
.step{display:flex;gap:16px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.step .n{flex:0 0 40px;height:40px;border-radius:50%;background:var(--terra);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.step h3{margin:2px 0 6px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* pricing table */
table.plans{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15.5px}
table.plans th,table.plans td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.plans th{background:var(--terra);color:#fff;font-size:15px}
table.plans tr:last-child td{border-bottom:0}
table.plans td.price{font-weight:700;color:var(--terra);white-space:nowrap}

/* promise box */
.trust{background:var(--cream-2);color:var(--ink);border-radius:var(--radius);padding:32px;
  border:1px solid var(--line)}
.trust h2{color:var(--ink)}
.trust ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:16px}
.trust li::marker{color:var(--terra)}

/* enemy box — opinionated positioning */
.enemy-box{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.enemy-box h2{margin-bottom:10px}
.enemy-box p{margin:0;color:var(--muted);font-size:17px;max-width:72ch}
.enemy-box strong{color:var(--ink)}

/* about */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
.about-grid img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}

/* form — full-width card like every other card; fields in a 2-col grid on desktop */
form.quote{max-width:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:36px}
form.quote .f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
form.quote .f-row:first-child{margin-top:0}
form.quote .f-field{min-width:0}
form.quote .f-field.full{grid-column:1/-1}
@media(max-width:640px){form.quote .f-row{grid-template-columns:1fr}}
form.quote label{display:block;font-weight:600;margin:0 0 6px;font-size:15px}
form.quote input,form.quote select,form.quote textarea{width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:inherit;background:#fff}
form.quote textarea{min-height:140px;resize:vertical}
/* form craft: visible focus, consistent inputs, success + error states */
form.quote input:focus-visible,form.quote select:focus-visible,form.quote textarea:focus-visible,
.beehiiv-form input:focus-visible,.chat-input input:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
form.quote .hp,.beehiiv-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.beehiiv-form input{font-size:15.5px}
/* assessment questionnaire: numbered question groups */
form.quote fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
form.quote fieldset:last-of-type{margin-bottom:8px}
form.quote legend{font-size:18px;font-weight:700;margin:0 0 12px;padding:0;color:var(--ink)}
form.quote legend strong{color:var(--terra);margin-right:6px}
form.quote .muted{color:var(--muted);font-weight:400;font-size:15px}
form.quote .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media(max-width:640px){form.quote .check-grid{grid-template-columns:1fr}}
form.quote .check-grid label{display:flex;align-items:center;gap:10px;font-weight:500;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;cursor:pointer}
form.quote .check-grid input{width:auto;margin:0;accent-color:var(--terra)}
.nl-err{display:none;font-size:14px;font-weight:600;color:#fff;margin:0 0 10px}
.quote-success{background:#f4efe1;border:1px solid #d9c9a3;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:40px 32px;text-align:center}
.qs-check{width:56px;height:56px;border-radius:50%;background:var(--terra);color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.quote-success h3{margin:0 0 8px;font-size:22px;color:var(--ink)}
.quote-success p{margin:0 0 8px;color:var(--muted);font-size:16px}
.quote-success .qs-next{font-size:14.5px;margin:12px 0 0}
.form-note{font-size:14px;color:var(--muted);margin-top:14px}
.form-ok{display:none;background:#f4efe1;border:1px solid #d9c9a3;color:#5a4a2e;
  border-radius:8px;padding:16px;margin-top:16px}
.form-err{display:none;background:#fdecec;border:1px solid #f3b7b7;color:#a33;
  border-radius:8px;padding:16px;margin-top:16px}

/* newsletter / beehiiv */
.beehiiv{color:#fdf3e8;padding:44px 36px;text-align:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M26 24h4v8h-4zM24 26h8v4h-8z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E")}
.beehiiv h2{color:#fff}
.beehiiv .sub{margin-left:auto;margin-right:auto;color:#f3d9c2}
.beehiiv-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 14px}
.beehiiv-form input{padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;min-width:200px;font-family:inherit}
.beehiiv-form input::placeholder{color:#eecfae}
.beehiiv-note{font-size:13.5px;color:#f0d3b4;margin:0}

/* footer */
footer.site{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:14.5px}
footer.site .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap}

/* page hero (interior) — light cream */
.page-hero{padding:64px 0 40px;color:var(--ink);background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M26 24h4v8h-4zM24 26h8v4h-8z' fill='%23c0562f' fill-opacity='0.05'/%3E%3C/svg%3E"),
  linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.page-hero h1{font-size:clamp(28px,4.4vw,40px);margin:0 0 12px;letter-spacing:-.01em;color:var(--ink)}
.page-hero p{color:var(--muted);max-width:680px;margin:0}
.page-logo{display:block;width:132px;height:132px;border-radius:20px;margin:0 0 20px}
.badge{display:inline-block;background:var(--terra);color:#fff;font-weight:700;font-size:13px;
  padding:4px 12px;border-radius:999px;margin-bottom:12px}
ul.check{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
ul.check li{padding-left:28px;position:relative}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--terra);font-weight:700}
.note{background:#fdf6e9;border:1px solid #e8d5ae;border-radius:8px;padding:14px 18px;
  font-size:15px;color:#6f5a33;margin:24px 0}
.runs-on{font-size:.95rem;background:linear-gradient(135deg,#fffdf7 0%,#fdf1dc 100%);
  border:1px solid #e8d5ae;border-radius:12px;padding:14px 16px;margin:14px 0 0;
  color:#5c4a2c;line-height:1.55;
  box-shadow:0 3px 12px rgba(192,86,47,.12), inset 0 1px 0 #fff}
.runs-on .ro-head{display:flex;align-items:center;gap:8px;font-weight:800;color:#c0562f;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.runs-on .ro-head svg{width:17px;height:17px;flex:none}
.runs-on .go{white-space:nowrap;font-weight:700}

/* blog */
.blog-list{display:grid;gap:18px;margin:8px 0 8px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.post-card .date{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--terra);margin-bottom:8px}
.post-card h2{margin:0 0 8px}
.post-card h2 a{color:var(--ink)}
.post-card p{color:var(--muted);margin:0 0 14px}
.post-card .go{font-weight:600}
article.post{max-width:740px}
article.post .date{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--terra);margin-bottom:10px}
article.post h1{font-size:clamp(30px,4.6vw,44px);letter-spacing:-.02em;color:var(--ink);
  margin:0 0 20px;line-height:1.15}
article.post h2{margin:32px 0 10px}
article.post p{margin:0 0 18px;font-size:17.5px;color:var(--ink)}
article.post p strong{color:var(--ink)}
.post-cta{margin-top:36px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--terra);border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px}

/* consent banner */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);
  color:#f5ead9;border-top:2px solid var(--terra);box-shadow:0 -8px 30px rgba(32,22,18,.25)}
#consent-banner[hidden]{display:none}
.consent-in{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;gap:18px;
  align-items:center;justify-content:space-between}
.consent-in p{margin:0;font-size:14.5px;flex:1}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
/* consent buttons use the compact tiers: btn-sm + ghost-on-dark (named variant) */

/* ---- mobile nav, demos, FAQ, AEO, responsive tables ---- */

/* hamburger */
.nav-toggle{display:none;background:#fffdf8;border:1px solid var(--line);border-radius:999px;
  padding:9px 11px;cursor:pointer;line-height:0;flex-shrink:0}
.nav-toggle svg{display:block;width:22px;height:22px}
.nav-toggle:focus-visible{outline:2px solid var(--terra);outline-offset:2px}

@media(max-width:1340px){
  .nav-toggle{display:block}
  nav.links{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--cream);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 20px;
    border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 34px rgba(32,22,18,.14);z-index:60}
  nav.links.open{display:flex}
  nav.links a{padding:12px 4px;border-top:1px solid var(--line);font-size:16px;white-space:normal}
  nav.links a:first-child{border-top:0}
  nav.links .btn-shiny{margin-top:12px;justify-content:center}
}

@media(max-width:760px){
  .hero{padding:60px 0 44px}
  .hero h1{max-width:100%}
  section{padding:64px 0}
  form.quote{padding:24px}
  .trust-strip-in{justify-content:flex-start}
  .trust-strip-in span{font-size:14px}
  .consent-in{flex-direction:column;align-items:stretch}
  .consent-actions .btn-sm{flex:1;text-align:center}
  .beehiiv{padding:32px 22px}
  .demo-card{padding:28px 22px}
  .demo-promo{margin:0;border-radius:0}
}

/* responsive tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card)}
.table-scroll table.plans{border:0;min-width:620px}

/* pricing tables become stacked cards on phones — no horizontal scroll */
@media(max-width:640px){
  .table-scroll{overflow:visible;border:0;background:none;padding:0}
  .table-scroll table.plans{min-width:0;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--card)}
  table.plans tr:first-child{display:none}
  table.plans,table.plans tbody,table.plans tr,table.plans td{display:block;width:100%}
  table.plans tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.plans tr:last-child{border-bottom:0}
  table.plans td{border:0;padding:9px 18px}
  table.plans td.plan-name{font-size:19px;font-weight:800;padding-bottom:0}
  table.plans td[data-label]::before{content:attr(data-label);display:block;font-size:12px;
    font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  table.plans td.price{font-size:22px;padding-top:2px}
}

/* FAQ (answer-first, AEO) */
.faq{display:grid;gap:14px;margin:8px 0 8px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px}
.faq-item h3{margin:0 0 8px;font-size:17.5px;color:var(--ink)}
.faq-item p{margin:0;color:var(--muted);font-size:15.5px}
.faq-item p strong{color:var(--ink)}

/* demo: automation workflow stepper — one card system */
.demo-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;margin:28px 0;box-shadow:var(--shadow)}
.demo-block h2{color:var(--ink)}
.demo-block .demo-label{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--terra);border-radius:999px;
  padding:4px 12px;margin-bottom:14px}
.demo-note{font-size:13.5px;color:var(--muted);margin:10px 0 0}

/* demo: automation workflow simulator — pick a workflow, run it, see the math */
.workflow-sim{margin:18px 0 6px}
.sim-picker{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.sim-pick{border:2px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;cursor:pointer}
.sim-pick:hover{border-color:var(--terra)}
.sim-pick.active{background:var(--terra);border-color:var(--terra);color:#fff}
.sim-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.sim-step{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;opacity:.45;transition:opacity .3s,border-color .3s}
.sim-step.done{opacity:1}
.sim-step.running{opacity:1;border-color:var(--terra);box-shadow:0 0 0 3px rgba(198,93,59,.18)}
.sim-step.fail{border-color:#b3261e}
.sim-step.fail .n{background:#b3261e}
.sim-step .t{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;
  font-size:15px;margin-bottom:4px}
.sim-step .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--terra);color:#fff;font-size:12.5px;font-weight:700;flex:none}
.sim-step.done .n{background:var(--terra)}
.sim-step .d{color:var(--muted);font-size:13.5px;line-height:1.45;margin:0 0 8px}
.sim-payload{display:grid;gap:6px;margin:8px 0 0;padding:10px 12px;background:var(--card);
  border:1px dashed var(--line);border-radius:8px;font-size:13.5px}
.sim-payload .row{display:flex;gap:8px}
.sim-payload .k{font-weight:700;color:var(--ink);flex:none;min-width:86px}
.sim-payload .v{color:var(--muted)}
.sim-payload .v.sms{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:8px 12px;color:var(--ink);font-style:italic}
.sim-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0 6px}
/* the Run control is the block's primary action: btn-shiny tier, no restyle */
.sim-timer{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.sim-math{margin:14px 0 4px;padding:14px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:10px}
.sim-math label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14.5px;font-weight:600;color:var(--ink)}
.sim-math input[type=range]{flex:1;min-width:160px;accent-color:var(--terra)}
.sim-math output{font-weight:700;color:var(--terra);font-size:16px}
.sim-math p{margin:10px 0 0;font-size:14.5px;color:var(--muted)}
.sim-math p strong{color:var(--ink)}
.sim-apps{font-size:14px;color:var(--muted);margin:12px 0 0}
.sim-apps strong{color:var(--ink)}
.sim-apps .chip{display:inline-block;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:3px 12px;margin:3px 4px 3px 0;font-size:13px;color:var(--ink)}
@media(max-width:640px){
  .sim-step{padding:12px 13px}
  .sim-payload .k{min-width:0}
  .sim-controls .btn-shiny{width:100%}
}

/* demo: chatbot widget — sits inside a demo-card, shares the card border language */
.chat-demo{max-width:640px;margin:20px 0 8px;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:#fff}
.chat-demo .chat-head{background:var(--terra);color:#fff;padding:14px 18px;font-weight:700;font-size:15px}
.chat-demo .chat-head small{display:block;font-weight:400;color:#f0cdb4;font-size:12.5px;margin-top:2px}
.chat-log{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:220px;max-height:320px;overflow-y:auto;background:#faf5ea}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.chat-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--terra);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fff}
.chat-quick button{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--terra);
  background:#fff;color:var(--terra);cursor:pointer}
.chat-quick button:hover{background:#fbe9dc}
.chat-input{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14.5px;min-width:0}
.chat-input button{padding:10px 16px;border-radius:8px;border:0;background:var(--terra);color:#fff;
  font-weight:600;cursor:pointer;font-size:14.5px}

/* demo: voice call flow + audio — elevated */
.call-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.call-step{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:13.5px}
.call-step .t{font-weight:700;color:var(--ink);display:block;margin-bottom:4px}
@media(max-width:760px){.call-flow{grid-template-columns:1fr 1fr}}
audio.demo-audio{width:100%;max-width:560px;margin:12px 0}
.transcript{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px 20px;
  font-size:14.5px;display:grid;gap:8px;margin:12px 0}
.transcript .who{font-weight:700;color:var(--terra)}
.transcript .caller .who{color:var(--terra-dk)}
.voice-demo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;margin:28px 0;box-shadow:var(--shadow)}

/* answer-first summary box (AEO) */
.answer-box{background:#fbf3e6;border-left:4px solid var(--terra);border-radius:0 10px 10px 0;
  padding:16px 20px;margin:20px 0;font-size:16px}
.answer-box strong{color:var(--ink)}

/* ---- one-pager v1.7.1: hero art, services, flow demo, pilots, sticky CTA ---- */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-art{width:100%;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(192,86,47,.14)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:520px}}

.svc{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;
  padding:32px;margin:0 0 28px}
.svc>*{min-width:0} /* let .table-scroll shrink + scroll on narrow screens */
.svc h3{margin:0 0 8px;font-size:22px}
.svc .price{font-weight:700;color:var(--terra);margin:0 0 10px}
.svc-body>p{color:var(--muted);font-size:15.5px}
.svc-img{width:100%;aspect-ratio:3/2;border-radius:10px;border:1px solid var(--line)}
.arch-note{font-size:13px;color:var(--muted);font-style:italic;margin:8px 0 0}
.svc .table-scroll{margin:18px 0 14px}
.svc .go{font-weight:600;font-size:15px}
@media(max-width:860px){.svc{grid-template-columns:1fr}.svc-img{max-width:420px}}

/* demo cards — full-width, one card system, pricing order */
.demo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:36px;margin:0 0 28px}
.demo-card:last-child{margin-bottom:0}
.demo-card .demo-label{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--terra);border-radius:999px;
  padding:4px 12px;margin-bottom:14px}
.demo-links{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:22px}
.demo-links .go{font-weight:600;font-size:15px}
.demo-price{margin:8px 0 0;font-size:16.5px}
/* personal demo form */
.alt-path{margin:22px 0 0;color:var(--muted);font-size:16px}



.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:150;display:none;
  transform:translateY(140%);transition:transform .3s ease}
.sticky-cta.show{transform:translateY(0)}
/* sticky CTA = primary tier, full-width on mobile; layout only, no restyle */
.sticky-cta .btn-shiny{display:block;text-align:center}
@media(max-width:760px){.sticky-cta{display:block}}

/* v1.9.2 high-value homepage: imageless service blocks, proof link rows,
   demand panel, full menu, demo grid */
.svc.single{display:block}
.svc.single .svc-body{max-width:820px}
.link-row{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.link-row .lr{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.tiers{font-weight:600;color:var(--ink);font-size:15px;margin:10px 0 0}
.price-note{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:4px}
/* v1.10 proof-led service blocks: demo first, then how-it-works visual,
   write-up, code — plus the honest client-story slot */
.proof-steps{list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line);display:grid;gap:14px}
.proof-steps li{display:flex;gap:14px;align-items:flex-start}
.proof-steps .ps-n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--terra);
  color:#faf3e8;font-weight:700;font-size:14px;display:flex;align-items:center;
  justify-content:center;margin-top:2px}
.proof-steps .ps-sub{color:var(--muted);font-size:14.5px}
.client-story{margin:16px 0 0;padding:12px 16px;border:1px dashed var(--line);
  border-radius:var(--radius);font-size:14.5px;color:var(--muted);background:var(--bg)}
.cs-kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terra);margin-right:8px}
.cs-note{font-size:13px;font-style:italic}
.same-for-you{margin:16px 0 0;font-size:16px}
.arch-cap{font-size:13px;color:var(--muted);margin-top:8px}
/* credibility band */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.cred-grid>*{min-width:0}
@media(max-width:860px){.cred-grid{grid-template-columns:1fr}}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.demo-grid>*{min-width:0}
@media(max-width:860px){.demo-grid{grid-template-columns:1fr}}
.demand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:28px 0}
.demand-grid>*{min-width:0}
@media(max-width:1000px){.demand-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.demand-grid{grid-template-columns:1fr}}
.demand-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:24px}
.demand-card .stat{font-size:26px;font-weight:800;color:var(--terra);margin:0 0 8px}
.demand-card p{color:var(--muted);font-size:14.5px;margin:0}
.tech-chips-label{font-weight:700;margin:8px 0 0}
.tech-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;margin-bottom:28px}
.tech-chips span{font-size:13.5px;font-weight:700;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;color:var(--ink)}
.menu-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.menu-list li{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;font-size:15px;color:var(--muted)}
.menu-list li strong{color:var(--ink)}
.menu-list .go{float:right;font-weight:600;font-size:14px;margin-left:16px}
/* v1.12 visual-first service blocks: illustration, problem -> outcome,
   icon workflow, obvious keyword chips — customer language, not developer */
.problem{margin:10px 0 4px}
.outcome{margin:0 0 6px;font-size:16.5px;color:var(--ink)}
.outcome strong{color:var(--terra)}
.flow-icons{display:flex;gap:16px;align-items:stretch;margin:18px 0 4px;
  list-style:none;padding:0}
.fi{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;position:relative;padding:12px 6px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;min-width:0}
.fi:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:38%;
  color:var(--terra);font-weight:800;font-size:15px;z-index:1}
.fi-ic{width:34px;height:34px;color:var(--terra);flex:none}
.fi-label{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
@media(max-width:560px){.flow-icons{flex-wrap:wrap}.fi{flex:1 1 40%}.fi:not(:last-child)::after{display:none}
.chip{padding:4px 12px;font-size:14px}}
.stack{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;
  padding:12px 14px;background:#fffdf7;border:1px solid var(--line);border-radius:12px}
.stack-label{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:2px}
.chip{font-size:15px;font-weight:800;color:var(--terra);background:#fff;
  border:2px solid var(--terra);border-radius:999px;padding:5px 16px;white-space:nowrap}
/* v1.13 problem-first funnel: problem picker nav, named step chains,
   buyer-approval lines, who-it's-for lines — borrowed from hey.com,
   listingbott, and alertmouse */
#problem-picker{padding:28px 0;border-bottom:1px solid var(--line);background:var(--card)}
.pp-label{font-weight:700;margin:0 0 12px;color:var(--ink);font-size:17px}
.pp-chips{display:flex;flex-wrap:wrap;gap:10px}
.pp-chips a{display:inline-block;font-size:15px;font-weight:700;color:var(--terra);
  background:#fff;border:2px solid var(--terra);border-radius:999px;padding:8px 18px}
.pp-chips a:hover{background:var(--terra);color:#fff;text-decoration:none}
.flow-name{margin:16px 0 0;font-size:14.5px;font-weight:700;color:var(--terra);
  letter-spacing:.01em}
.for-who{margin:8px 0 0;font-size:14.5px;color:var(--muted);font-style:italic}
.approve{margin:12px 0 0;padding:10px 14px;background:#fffdf7;
  border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:0 10px 10px 0;font-size:14.5px;color:var(--ink)}
.approve strong{color:var(--terra)}
/* demand-section keyword chips: bigger and bolder — obvious at a glance */
.tech-chips span{font-size:15px;font-weight:800;background:#fff;border:2px solid var(--terra);
  border-radius:999px;padding:8px 18px;color:var(--terra)}
@media(min-width:761px){.sticky-cta{display:none!important}}

/* ============ v1.21 uniform design system ============
   One button system (tiers above), one type scale (.hero/.page-hero/article
   h1 + single h2 rule), one spacing scale below. Page-specific <style>
   blocks were migrated here so every page paints from the same tokens. */

/* spacing scale — the only sanctioned one-off gaps (replaces inline margins) */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-0{margin-bottom:0}

/* narrow measure for doc-style pages */
.wrap.narrow{max-width:760px}

/* hidden svg sprite */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* article CTA card internals (replaces inline <p> margins) */
.post-cta .lead{margin:0 0 14px}
.post-cta .links{margin:14px 0 0}

/* dark CTA band — one class, used by proof + demo + code pages */
.cta-band{background:var(--bark);border-radius:14px;padding:1.6rem;color:var(--cream);margin-top:1rem}
.cta-band h2{color:var(--cream);margin-top:0}
.cta-band .sub{color:var(--line)}
.cta-band p{color:var(--line)}

/* small print — renamed from the colliding .note (style.css .note is a box) */
.fineprint{font-size:.88rem;color:var(--clay)}

/* ---- proof hub ---- */
.proof-hero-lede{max-width:44rem}
.proof-grid{margin:1.6rem 0 2rem}
.proof-card .proof-label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);margin-bottom:.5rem}
.proof-card ul.proof-links{list-style:none;margin:0 0 1rem;padding:0}
.proof-card ul.proof-links li{margin:.45rem 0;font-size:15px}
.proof-card ul.proof-links .k{font-weight:700;color:var(--ink)}
.proof-card .card-cta{margin-top:auto;padding-top:.4rem}
.proof-note{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;font-size:.92rem;color:var(--muted);margin:0 0 1.6rem}

/* ---- staging strip (shared by demo/code pages) ---- */
.staging-strip{background:var(--bark);color:var(--cream);font-size:.85rem;padding:.55rem 0;text-align:center}
.staging-strip strong{color:var(--amber)}

/* ---- demo pages: cards, tags, steppers, live boxes ---- */
.ad-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ad-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.ad-card h3{margin-top:0}
.ad-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.18rem .65rem;margin-bottom:.5rem}
.ad-tag.live{background:var(--leaf);color:#fff}
.ad-tag.illus{background:var(--line);color:var(--saddle)}
.ad-tag.human{background:var(--lake);color:#fff}
.stepper{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.stepper button{border:1px solid var(--terra);background:var(--card);color:var(--terra);border-radius:999px;padding:.45rem .95rem;font-weight:700;cursor:pointer}
.stepper button[aria-selected="true"]{background:var(--terra);color:var(--cream)}
.bp-node{border-left:3px solid var(--terra);padding:.35rem 0 .35rem .9rem;margin:.4rem 0;position:relative}
.bp-node::before{content:"↓";position:absolute;left:-0.62rem;top:-0.85rem;color:var(--terra);font-weight:700}
.bp-node:first-child::before{content:""}
.bp-node .who{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--clay);font-weight:700}
.livebox{border:2px solid var(--leaf);border-radius:var(--radius);padding:1.2rem;background:var(--mist)}
.sample-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.sample-row button{border:1px solid var(--leaf);background:#fff;color:var(--leaf);border-radius:8px;padding:.5rem .8rem;cursor:pointer;font-size:.9rem;text-align:left;max-width:100%;min-width:0;overflow-wrap:anywhere}
.sample-row button:hover{background:var(--leaf);color:#fff}
/* v1.25: recently-asked / most-popular question chips on /faq/ */
.activity-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
.activity-cols h3{margin:0 0 .6rem;font-size:1.05rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--terra);background:#fff;color:var(--saddle);border-radius:999px;padding:.45rem .9rem;cursor:pointer;font-size:.88rem;text-align:left;max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
/* v1.33: kill the legacy white-space:nowrap (.chip, demand-section era) for
   activity chips — long visitor questions must wrap, never run off-screen.
   Also stop the grid column blowing out around an un-wrapped chip. */
.activity-cols>*{min-width:0}
.chip:hover{background:var(--terra);color:#fff}
.chip-n{display:inline-block;margin-left:.4rem;font-size:.75rem;font-weight:700;opacity:.75}
.chip-answer{flex:0 0 100%;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;margin-top:.25rem;font-size:.95rem;overflow-wrap:anywhere}
.chip-answer a{color:var(--terra);overflow-wrap:anywhere}
.how-figure{margin:2.2rem auto 0;max-width:920px}
.how-figure img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)}
.how-figure figcaption{margin-top:.7rem;font-size:.92rem;color:var(--muted);text-align:center}
.about-body{max-width:800px;margin:2.2rem auto 0}
@media(max-width:700px){.activity-cols{grid-template-columns:1fr}}
#inquiry-input{width:100%;min-height:110px;border:1px solid var(--line);border-radius:8px;padding:.7rem;font:inherit;box-sizing:border-box}
#run-agent-btn{margin-top:.7rem}
.run-timeline{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.run-step{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--card)}
.run-step .rs-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.run-step .rs-title{font-weight:700}
.rs-tag{font-size:.7rem;color:var(--clay);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pill{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:.15rem .6rem;background:var(--line);color:var(--saddle)}
.pill.running{background:var(--amber);color:var(--bark)}
.pill.done{background:var(--leaf);color:#fff}
.pill.failed{background:var(--terra-dk);color:#fff}
.pill.retrying{background:var(--terra);color:#fff}
.pill.waiting{background:var(--lake);color:#fff}
.pill.skipped{background:var(--clay);color:#fff}
.rs-detail{margin:.45rem 0 0;font-size:.92rem}
.rs-detail .draft{background:#fff;border:1px dashed var(--leaf);border-radius:8px;padding:.8rem;white-space:pre-wrap;margin-top:.5rem;font-size:.88rem}
.gate-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.gate-row[hidden]{display:none}
.break-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1rem}
.price-strip{display:flex;flex-wrap:wrap;gap:1rem;margin:1.2rem 0}
.price-card{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem}
.price-card .p{font-size:1.35rem;font-weight:800;color:var(--terra);margin:.2rem 0}
.price-card h3{margin:0 0 .2rem}
.kv{display:grid;grid-template-columns:110px 1fr;gap:.4rem .8rem;margin:.6rem 0}
.kv dt{font-weight:700;color:var(--saddle)}
.boundary{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.boundary .yes{border-top:4px solid var(--leaf)}
.boundary .no{border-top:4px solid var(--terra)}
table.costs{width:100%;border-collapse:collapse;font-size:.92rem}
table.costs th,table.costs td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top}

/* ---- RAG demo ---- */
.rag-box{border:2px solid var(--leaf);border-radius:var(--radius);padding:1.2rem;background:var(--mist)}
#rag-q,#faq-q{width:100%;min-height:64px;border:1px solid var(--line);border-radius:8px;padding:.7rem;font:inherit;box-sizing:border-box;background:#fff}
#rag-ask{margin-top:.7rem}
.rag-trace-title{margin-top:1.6rem;margin-bottom:.3rem;font-size:1.02rem}
.trace-sub{margin:0 0 .5rem}
.rag-trace{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.7rem}
.rag-passage{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;background:var(--card)}
.rag-passage .rs-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rag-passage .doc{font-weight:700}
.rag-passage .score{font-size:.72rem;color:var(--clay);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rag-passage blockquote{margin:.5rem 0 0;padding:.6rem .8rem;border-left:3px solid var(--leaf);background:#fff;font-size:.9rem}
.rag-answer{border:2px solid var(--terra);border-radius:10px;padding:1rem 1.2rem;background:var(--card);margin-top:1rem}
.rag-answer h3{margin-top:0;color:var(--terra)}
.rag-answer.refused{border-color:var(--clay)}
.rag-answer.refused h3{color:var(--clay)}
.rag-answer cite{font-style:normal;font-size:.8rem;color:var(--clay)}
.how-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1rem}
.how-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem}
.how-card .n{display:inline-block;background:var(--terra);color:var(--cream);font-weight:800;border-radius:999px;width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;margin-bottom:.4rem}

/* ---- code pages ---- */
.status-box{border:2px solid var(--leaf);border-radius:var(--radius);padding:1.1rem 1.3rem;background:var(--mist);margin:1.2rem 0}
.status-box h2{margin-top:0;color:var(--leaf)}
.file-tree{background:var(--coal);color:var(--parchment);border-radius:10px;padding:1rem 1.2rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;overflow-x:auto;white-space:pre;line-height:1.55}
.code{background:var(--coal);color:var(--parchment);border-radius:10px;padding:1rem 1.2rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;overflow-x:auto;white-space:pre;line-height:1.5}
.excerpt{margin:1.4rem 0}
.excerpt h3{margin-bottom:.4rem}
.excerpt p.fineprint{margin-top:.4rem}
.demo-links{margin-top:1rem;font-size:.95rem}
.dl-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:1rem 0}

/* ---- doc-style pages (demo-voice-how-it-runs) ---- */
.doc-topbar{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.doc-topbar a{color:var(--terra-dk);text-decoration:none;font-weight:600}
ol.flow{margin:0;padding-left:22px}
ol.flow li{margin:0 0 10px}
.doc-foot{margin-top:32px;font-size:14px;color:var(--muted)}
.doc-foot a{color:var(--terra-dk)}
table.doc{width:100%;border-collapse:collapse;font-size:15px}
table.doc th,table.doc td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.doc th{color:var(--muted);font-weight:600}
/* kicker links inherit — no inline color needed */
.kicker a{color:inherit}

/* ---- v1.23 FAQ page + site-wide chat bubble ---- */
/* v1.27: the FAQ ask-box renders as a chat thread reusing .chat-msg bubbles —
   no card chrome of its own, just breathing room below the Ask button. */
.chat-log.faq-chat{max-height:none;overflow:visible;background:transparent;border:0;padding:0;margin-top:1rem}
#faq-ask-block .sample-row{margin-top:.9rem}
#faq-static .faq-item .fineprint{margin-top:.6rem}

/* Floating text chat bubble (dogfood: the same /api/site-chat we sell).
   z-index 150: below the consent banner (200), above page content. */
#site-chat-bubble{position:fixed;right:1.1rem;bottom:1.1rem;z-index:150;
  background:var(--terra);color:#fff;border:none;border-radius:999px;
  padding:.8rem 1.25rem;font-weight:700;font-size:.95rem;cursor:pointer;
  box-shadow:0 4px 14px rgba(32,22,18,.28)}
#site-chat-bubble:hover{background:var(--terra-dk)}
#site-chat-panel{position:fixed;right:1.1rem;bottom:4.7rem;z-index:150;
  width:min(340px,calc(100vw - 2rem));max-height:min(480px,72vh);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 34px rgba(32,22,18,.25);
  display:flex;flex-direction:column;overflow:hidden}
#site-chat-panel[hidden]{display:none}
#site-chat-panel .chat-log{min-height:180px;max-height:none;flex:1}
/* While the consent banner is up, ride above it instead of hiding behind. */
#site-chat-bubble.above-consent{bottom:7.2rem}
#site-chat-panel.above-consent{bottom:10.8rem}
@media(max-width:760px){
  /* Mobile: when the full-width sticky CTA is showing, the bubble floats
     above it so neither covers the other. */
  #site-chat-bubble.above-sticky{right:.8rem;bottom:4.6rem;padding:.7rem 1.05rem}
  #site-chat-panel.above-sticky{right:.8rem;bottom:8rem}
  #site-chat-bubble.above-consent{bottom:9.5rem}
  #site-chat-panel.above-consent{bottom:13rem}
}

/* ---- Knowledge Base demo (/knowledge/) ---- */
.stat-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 6px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px 18px;min-width:118px}
.stat strong{display:block;font-size:24px;font-weight:800;color:var(--terra);line-height:1.2}
.stat span{font-size:13px;color:var(--muted)}
.src-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.src-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.src-card a.src-url{display:block;margin:10px 0 6px;font-size:14px;overflow-wrap:anywhere}
.src-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--terra);
  background:rgba(192,86,47,.1);border:1px solid rgba(192,86,47,.3);
  border-radius:999px;padding:3px 12px;margin-bottom:8px}
a.cite{display:inline-block;font-size:13px;font-weight:600;color:var(--terra);
  text-decoration:none;border-bottom:1px dotted var(--terra);margin-right:10px}
a.cite:hover{text-decoration:underline}
/* kb curated answers + live demo trace: every cited claim shows its source site's brand mark */
a.cite .cite-logo,.src-badge .cite-logo{height:16px;width:auto;vertical-align:-3px;margin-right:5px}
a.cite .cite-wordmark,.src-badge .cite-wordmark{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-right:5px}
a.cite .cite-dmark,.src-badge .cite-dmark{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;background:#6B1D2A;color:#fff;
  font-size:10px;font-weight:800;margin-right:5px;vertical-align:-3px}

/* v1.36: knowledge page visual merge diagram — sites in, one base out */
.kb-merge{display:flex;align-items:stretch;gap:14px;margin:22px 0;padding:18px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.kb-merge-sites{flex:1;display:flex;flex-direction:column;gap:10px}
.kb-merge-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra)}
.kb-merge-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kb-site-chip{display:flex;align-items:center;justify-content:center;min-height:52px;
  background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.kb-site-chip .founder-brand{margin-bottom:0;min-height:0;justify-content:center}
.kb-site-chip .founder-logo{height:30px}
.kb-site-chip .founder-wordmark{font-size:11px}
.kb-merge-arrow{align-self:center;font-size:32px;color:var(--terra);font-weight:700;flex:none}
.kb-merge-base{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--ink);color:#fff;border-radius:12px;padding:16px 12px;text-align:center}
.kb-merge-base .kb-merge-label{color:var(--sand)}
.kb-base-icon{font-size:28px}
.kb-merge-base strong{font-size:14px}
@media(max-width:560px){
  .kb-merge{flex-direction:column}
  .kb-merge-arrow{transform:rotate(90deg);align-self:center}
}

/* ---- Founding clients showcase ---- */
.founder-card blockquote{margin:14px 0 0;padding:14px 16px;border-left:3px solid var(--terra);
  background:rgba(192,86,47,.06);border-radius:0 10px 10px 0;font-size:15px;line-height:1.55}
.founder-card blockquote cite{display:block;margin-top:10px;font-size:13px;color:var(--muted);font-style:normal}
.founder-card blockquote cite em{font-style:italic}

/* v1.35: founding-clients brand marks + captions */
.founder-brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:10px}
.founder-logo{height:38px;width:auto;display:block}
/* v1.37: bigger logos for DC + Habinex (Anish: make them bigger) */
.founder-logo-lg{height:56px}
/* v1.39: clickable founder brands (Clarity dead-click on Habinex logo, 2026-09-28) */
.founder-brand-link{display:block;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit}
.founder-brand-link:hover .founder-brand{filter:brightness(.95)}
.founder-brand-link:hover .founder-wordmark{text-decoration:underline}
.founder-brand-link:hover .founder-name{text-decoration:underline}
.founder-mark-lg{width:56px;height:56px;font-size:30px;border-radius:12px}
.founder-mark{width:38px;height:38px;border-radius:8px;background:#6B1D2A;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,'Times New Roman',serif;font-size:20px;flex:none}
.founder-wordmark{font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.founder-name{font-weight:700;font-size:16px;color:var(--ink)}
.founder-caption{font-size:15px;line-height:1.55;color:var(--ink);
  border-left:3px solid var(--terra);padding-left:12px;margin:0 0 14px}
/* v1.37: testimonial quote bubble + prominent proof link (Anish: quote in a bubble/border, proof more prominent) */
.founder-quote{position:relative;margin:0 0 16px;padding:16px 18px 16px 20px;font-size:15px;line-height:1.6;color:var(--ink);
  background:#fffdf8;border:1px solid var(--line);border-left:4px solid var(--terra);border-radius:0 14px 14px 14px;
  box-shadow:0 2px 8px rgba(60,40,20,.06)}
.founder-quote::before{content:"\201C";position:absolute;top:2px;left:8px;font-size:36px;line-height:1;color:var(--terra);opacity:.35;font-family:Georgia,serif}
.founder-proof{display:inline-block;margin:6px 0 2px;padding:10px 18px;background:var(--terra);color:#fff !important;
  font-weight:700;font-size:15px;border-radius:10px;text-decoration:none;box-shadow:0 2px 6px rgba(192,86,47,.3)}
.founder-proof:hover{background:#a84a28;color:#fff !important}
@media(max-width:560px){.founder-logo{height:32px}.founder-mark{width:32px;height:32px;font-size:17px}}
.demo-gif{max-width:100%;height:auto;border-radius:12px;border:1px solid #e3d9cc}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.calc-field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.calc-field input,.calc-field select{width:100%;padding:10px 12px;border:1px solid #d9cfc2;border-radius:10px;font-size:15px;background:#fff}
.calc-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.calc-card{background:#fbf7f0;border:1px solid #e7dccb;border-radius:12px;padding:16px}
.calc-card h3{margin:0 0 8px;font-size:16px}
.calc-card .num{font-size:26px;font-weight:800;color:var(--terra)}
.calc-verdict{background:#f3efe6;border-left:4px solid var(--terra);border-radius:0 12px 12px 0;padding:14px 18px;margin:18px 0}