/* FlowBots.ai — Runbook direction
   Design system. Every value below is a token; nothing is ad hoc.
   Palette approved by Justine 2026-09-08. #38BADF is logo artwork only and never carries text. */

:root{
  /* Background tokens — Gate 1 */
  --bg-base:#FFFFFF;
  --bg-soft:#F1F5F7;
  --bg-dark:#0A1628;
  --bg-accent:#2E96B7;
  --bg-footer:#071120;

  /* Ink */
  --ink:#0A1628;          /* 18.13:1 on white */
  --ink-2:#4C5F71;        /* 6.94:1 on white  */
  --ink-3:#5F7186;        /* 5.01:1 on white, 4.75:1 on BG-SOFT */
  --on-dark:#FFFFFF;      /* 18.13:1 on navy  */
  --on-dark-2:#A9BED2;    /* 9.42:1 on navy   */
  --cta:#267B96;          /* 4.82:1 both ways */
  --pill:#22708A;         /* 4.85:1 on tint   */
  --art:#38BADF;          /* artwork only     */
  --rule:#DCE4EA;
  --rule-dark:#1B3048;

  /* Spacing tokens — Gate 2. Desktop column. */
  --s-xs:8px; --s-s:16px; --s-m:28px; --s-l:48px; --s-xl:72px; --s-2xl:104px;

  /* Structure. 1160 approved by Justine 2026-09-15: 1080 squeezed the hero
     console to ~420px and crowded the header; wider than this brings back
     the dead width fixed on 2026-09-08. */
  --rail:84px;
  --wrap:1160px;
  /* Hero and header only, approved by Justine 2026-09-15: at 1160 the hero
     sat in a band with ~360px of empty white each side on an 1880px screen.
     Sections below keep --wrap. */
  --wrap-hero:1440px;
  --r:6px;
  --r-lg:10px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media(max-width:1024px){:root{--s-m:24px;--s-l:40px;--s-xl:56px;--s-2xl:80px;--rail:64px}}
@media(max-width:760px){:root{--s-s:12px;--s-m:20px;--s-l:32px;--s-xl:48px;--s-2xl:64px;--rail:0px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-base);color:var(--ink);
  font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cta);text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.021em;line-height:1.18}
h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.03em;line-height:1.14}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:19px;letter-spacing:-.012em;line-height:1.35}
h4{font-size:16px;font-weight:600;letter-spacing:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px;border-radius:3px}

/* ---------- CTA component. One spec, three ground variations. ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 28px;border-radius:var(--r);border:1.5px solid transparent;
  font:600 17px/1 var(--font);letter-spacing:-.006em;text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.btn-p{background:var(--cta);color:#fff}
.btn-p:hover{background:#1F6980}
.btn-s{background:transparent;color:var(--cta);border-color:var(--cta)}
.btn-s:hover{background:#EAF2F5}
/* on BG-DARK */
.on-dark .btn-p{background:var(--bg-accent);color:var(--ink)}
.on-dark .btn-p:hover{background:#3FA6C6}
.on-dark .btn-s{color:#fff;border-color:#42607E}
.on-dark .btn-s:hover{background:#132743}
/* on BG-ACCENT */
.on-accent .btn-p{background:var(--ink);color:#fff}
.on-accent .btn-p:hover{background:#16283F}
.on-accent .btn-s{color:var(--ink);border-color:#123243}
.on-accent .btn-s:hover{background:rgba(255,255,255,.22)}
.btn:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
@media(max-width:760px){.btn{height:48px;padding:0 24px;font-size:16px;width:100%}}

/* Header items never wrap. Below 1201 the number becomes an icon (the label
   stays in the accessibility tree) so the row still fits down to 1025. */
.nav-act .btn,.nav-act .tel{white-space:nowrap}
@media(max-width:1200px){
  .nav-in .nav-links{gap:20px}
  .nav-act .tel{min-width:44px;justify-content:center}
  .nav-act .tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;
  color:var(--ink);font-weight:600;font-size:16px;text-decoration:none}
.tel:hover{color:var(--cta)}
.on-dark .tel,.on-accent .tel{color:#fff}
.on-accent .tel{color:var(--ink)}
.ico{width:20px;height:20px;flex:none}
.ico-s{width:17px;height:17px;flex:none}

/* ---------- Header ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:var(--s-m);height:74px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-m)}
.nav .nav-in{max-width:var(--wrap-hero)}
.brand{display:flex;align-items:center;flex:none;min-height:44px}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-act{display:flex;align-items:center;gap:var(--s-s);margin-left:var(--s-m)}
.nav-tog{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink)}
.mnav{display:none;border-top:1px solid var(--rule);padding:var(--s-s) var(--s-m) var(--s-m)}
.mnav a{display:flex;align-items:center;min-height:48px;padding:12px 0;color:var(--ink);
  text-decoration:none;font-weight:500;border-bottom:1px solid var(--rule)}
@media(max-width:1024px){
  .nav-links,.nav-act{display:none}
  .nav-tog{display:inline-flex}
  .mnav[data-open]{display:block}
}

/* ---------- The rail. The structural signature of this direction. ---------- */
.band{border-bottom:1px solid var(--rule)}
.band-in{display:grid;grid-template-columns:var(--rail) 1fr;gap:0;
  max-width:var(--wrap);margin:0 auto;padding:var(--s-xl) var(--s-m)}
.rail{position:relative;padding-right:var(--s-m)}
.rail-n{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.rail-l{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);writing-mode:vertical-rl;
  transform:rotate(180deg);white-space:nowrap}
.rail::after{content:"";position:absolute;left:0;top:34px;bottom:0;width:1px;background:var(--rule)}
.body{min-width:0}
/* Sections 02-15, 2026-09-15 (Justine): the number column runs out to the
   hero's 1440 frame so every number lines up with "01", while the content
   keeps its 1160 position. The two 1fr spacers split whatever the wider
   frame adds, so the content column lands exactly where it was; at or below
   1160 they collapse to 0 and the grid is the old rail | content. */
.band:not(.hero) .band-in{max-width:var(--wrap-hero);
  grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,calc(var(--wrap) - 2 * var(--s-m) - var(--rail))) minmax(0,1fr)}
.band:not(.hero) .body{grid-column:3}
.lede{margin-top:var(--s-m);max-width:62ch;margin-left:auto;margin-right:auto;font-size:18px;color:var(--ink-2)}
/* Section head: centred band. A 22ch heading in a 1000px column left 464px
   of dead width beside every H2 on the page. */
.head{max-width:760px;margin:0 auto;text-align:center}
.head .lede{margin-left:auto;margin-right:auto}
.sec-h{max-width:26ch;margin:0 auto}
/* every content block is centred in its column, so leftover width is
   symmetric margin rather than a void on the right */
.rows,.trace,.tl,.faq,.people,.split,.cards,.vs,.tiles,.inds,.form-grid,.endorse,.act-c,.cc{
  margin-left:auto;margin-right:auto}

/* dark + accent grounds */
.b-base{background:var(--bg-base)}
.b-soft{background:var(--bg-soft);border-bottom-color:#E1E9ED}
.b-dark{background:var(--bg-dark);border-bottom-color:var(--rule-dark)}
.b-accent{background:var(--bg-accent);border-bottom-color:rgba(10,22,40,.2)}
.on-dark{color:var(--on-dark)}
.on-dark .rail-n,.on-dark .rail-l{color:var(--on-dark-2)}
.on-dark .rail::after{background:var(--rule-dark)}
.on-dark .lede{color:var(--on-dark-2)}
.on-dark a{color:var(--art-ink)}
.on-accent{color:var(--ink)}
.on-accent .rail-n,.on-accent .rail-l{color:#12303F}
.on-accent .rail::after{background:rgba(10,22,40,.3)}
.on-accent .lede{color:#0E2634}

@media(max-width:760px){
  .band-in{grid-template-columns:1fr;padding:var(--s-xl) var(--s-m)}
  .band:not(.hero) .band-in{grid-template-columns:1fr}
  .band:not(.hero) .body{grid-column:auto}
  .rail{display:flex;align-items:center;gap:10px;padding:0 0 var(--s-m)}
  .rail-l{writing-mode:horizontal-tb;transform:none;margin-top:0}
  .rail::after{display:none}
  .sec-h{max-width:none}
}

/* ---------- Hero ---------- */
.hero .band-in{max-width:var(--wrap-hero);padding-top:var(--s-2xl);padding-bottom:var(--s-2xl)}
/* 42 / 58 only from 1440 up. Measured: at 1361 the 42% column was 487px and
   the H1 broke onto four lines, pushing the trust line from 740 to 874px.
   At 1440 it is 519px and holds three. Below that it stays 50 / 50. */
.hero-grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:var(--s-l);align-items:start}
@media(max-width:1439px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:#E6EFF3;
  color:var(--pill);font-size:13px;font-weight:600;letter-spacing:.01em}
.hero h1{margin-top:var(--s-m)}
.u{background:linear-gradient(transparent 68%,rgba(46,150,183,.34) 0);padding:0 2px}
.hero-sub{margin-top:var(--s-m);max-width:52ch;font-size:19px;line-height:1.65;color:var(--ink-2)}
.hero-act{display:flex;flex-wrap:wrap;gap:var(--s-s);margin-top:var(--s-l)}
/* Section-level CTAs sit centred; the hero's stays with its text column. */
.act-c{display:flex;flex-direction:column;align-items:center;gap:var(--s-s);
  margin-top:var(--s-l);text-align:center}
.act-c .hero-micro{margin-top:0}
.hero-micro{margin-top:var(--s-s);font-size:15px;color:var(--ink-3)}
/* UVP strip — HIPAA / SOC 2 / experience, verbatim from the live site */
.uvps{display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-s)}
.uvp{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r);
  background:#E9F1F4;color:var(--pill);font-size:14px;font-weight:600;line-height:1.3}
.uvp svg{width:15px;height:15px;flex:none}

/* trust element at the decision group */
.hero-trust{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-xs) var(--s-s);
  margin-top:var(--s-s);font-size:15px;color:var(--ink-2)}
.hero-trust b{font-weight:700;color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:var(--cta)}
.stars svg{width:15px;height:15px}
/* 2026-09-15, Justine: the UVP pills moved up under the rating line, into
   the space that sat empty beneath the text column, and the stats row now
   stands alone in this strip, centred on the full hero width. */
.hero-grid .uvps{margin-top:var(--s-l)}
.hero-foot{margin-top:var(--s-xl);padding-top:var(--s-m);border-top:1px solid var(--rule);
  display:flex;justify-content:center}
.hero-stats{display:flex;justify-content:center;gap:var(--s-xl);text-align:center}
@media(max-width:860px){.hero-stats{gap:var(--s-l)}}
.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.stat span{display:block;margin:4px auto 0;font-size:14px;color:var(--ink-3);max-width:20ch}

/* run log — the hero's right column */
.log{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.log-h{display:flex;align-items:center;gap:10px;padding:14px var(--s-m);
  background:var(--bg-dark);color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em}
.dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;flex:none}
.log-h .path{color:var(--on-dark-2);font-weight:500;margin-left:auto;font-size:12px}
.log-l{display:grid;grid-template-columns:1fr auto;gap:4px var(--s-s);
  padding:var(--s-m);border-bottom:1px solid var(--rule)}
.log-l:last-child{border-bottom:0}
.log-l b{font-size:15px;font-weight:600}
.log-l time{grid-row:1;grid-column:2;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.log-l span{grid-column:1/-1;font-size:14px;color:var(--ink-2)}
/* Two columns only while each gets its full 486px. Below 1181 the console
   dropped to ~410px and every card title wrapped again. */
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr;gap:var(--s-l)}}
@media(max-width:760px){
  .hero-stats{flex-wrap:wrap;gap:var(--s-m) var(--s-l)}
  .hero-act .btn{width:100%}
}

/* ---------- Generic content blocks ---------- */
.rows{margin-top:var(--s-l);border-top:1px solid var(--rule);max-width:940px}
.on-dark .rows,.on-dark .row{border-color:var(--rule-dark)}
.row{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--s-m) var(--s-l);
  padding:var(--s-m) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row .figure{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--cta);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.row h3{margin-bottom:6px}
.row .rc{min-width:0}
.on-dark .row .figure{color:var(--art-ink)}
.row .figure small{display:block;margin-top:4px;font-size:12px;font-weight:500;
  letter-spacing:0;color:var(--ink-3);line-height:1.35}
.on-dark .row .figure small{color:var(--on-dark-2)}
.row p{font-size:16px;color:var(--ink-2)}
.on-dark .row p{color:var(--on-dark-2)}
@media(max-width:900px){.row{grid-template-columns:132px minmax(0,1fr);gap:var(--s-s) var(--s-m)}}
@media(max-width:640px){
  .row{grid-template-columns:1fr;gap:var(--s-xs);padding:var(--s-m) 0}
  .row .figure{white-space:normal}
  .row .figure small{display:inline;margin-left:8px}
}

/* two-day comparison */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-l);margin-top:var(--s-l)}
.col-h{display:flex;align-items:center;gap:10px;padding-bottom:var(--s-s);
  border-bottom:2px solid var(--rule);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.col-good .col-h{border-bottom-color:var(--cta);color:var(--cta)}
.step{display:grid;grid-template-columns:96px 1fr;gap:var(--s-s);padding:14px 0;
  border-bottom:1px solid var(--rule);font-size:16px}
.step time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.step span{color:var(--ink-2)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:var(--s-l)}}

/* four systems */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-m);margin-top:var(--s-l)}
.card{padding:var(--s-m);border:1px solid var(--rule-dark);border-radius:var(--r);
  background:#0D1D33}
.card .quote{margin-top:var(--s-xs);font-size:15px;color:var(--art-ink)}
.card p{margin-top:var(--s-s);font-size:15px;color:var(--on-dark-2)}
.card ul{margin-top:var(--s-s);display:grid;gap:6px}
.card li{position:relative;padding-left:18px;font-size:15px;color:var(--on-dark-2)}
.card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1.5px;background:var(--art)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* numbered trace */
.trace{margin-top:var(--s-l);display:grid;gap:0}
.trace{max-width:760px}
.tr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-m);padding:var(--s-m) 0;
  border-bottom:1px solid var(--rule)}
.tr b{font-size:14px;font-weight:700;color:var(--cta);font-variant-numeric:tabular-nums}
.tr h3{margin-bottom:4px}
.tr p{font-size:16px;color:var(--ink-2)}
@media(max-width:760px){.tr{grid-template-columns:40px 1fr;gap:var(--s-s)}}

/* automations + industries grids */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-s);margin-top:var(--s-l)}
.tile{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile span{display:block;padding:12px 14px;font-size:14px;font-weight:600;line-height:1.35}
@media(max-width:1024px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}

.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-m);margin-top:var(--s-l)}
.ind{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.ind img{aspect-ratio:16/9;object-fit:cover;width:100%}
.ind-b{padding:var(--s-m)}
.ind-b ul{margin-top:var(--s-s);display:flex;flex-wrap:wrap;gap:6px}
.ind-b li{padding:5px 10px;border-radius:999px;background:#E9F1F4;color:var(--pill);
  font-size:13px;font-weight:600}
@media(max-width:900px){.inds{grid-template-columns:1fr}}

/* pricing comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-m);margin-top:var(--s-l)}
.vs-c{padding:var(--s-m);border:1px solid var(--rule-dark);border-radius:var(--r)}
.vs-c.good{border-color:var(--art);background:#0D1D33}
.vs-c ul{margin-top:var(--s-s);display:grid;gap:10px}
.vs-c li{position:relative;padding-left:24px;font-size:15px;color:var(--on-dark-2)}
.vs-c li::before{content:"–";position:absolute;left:4px;color:#7C90A6}
.vs-c.good li::before{content:"✓";color:var(--art-ink);font-weight:700}
.note{margin-top:var(--s-m);font-size:16px;color:var(--on-dark-2)}
@media(max-width:760px){.vs{grid-template-columns:1fr}}

/* endorsement */
.endorse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-l);
  margin-top:var(--s-l);align-items:center;max-width:940px}
.endorse img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--rule)}
.endorse .lede{margin-top:0}
@media(max-width:760px){.endorse{grid-template-columns:1fr;gap:var(--s-m)}
  .endorse img{max-width:320px}}

/* founders */
.people{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-m);margin-top:var(--s-l);max-width:900px}
.person{padding:var(--s-m);border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff}
.person img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:top center;
  border:3px solid var(--bg-soft)}
.person h3{margin-top:var(--s-m)}
.person p{margin-top:var(--s-s);font-size:16px;color:var(--ink-2)}
@media(max-width:760px){.people{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:var(--s-l);border-top:1px solid var(--rule);max-width:820px}
.q{border-bottom:1px solid var(--rule)}
.q summary{display:flex;align-items:center;gap:var(--s-s);padding:var(--s-m) 0;
  cursor:pointer;list-style:none;font-size:18px;font-weight:600}
.q summary .qt{flex:1;min-width:0}
.q summary::-webkit-details-marker{display:none}
.q .tag{flex:none;padding:4px 9px;border-radius:4px;background:#E9F1F4;color:var(--pill);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.q .chev{margin-left:auto;flex:none;transition:transform .18s ease}
.q[open] .chev{transform:rotate(180deg)}
.q p{padding:0 0 var(--s-m);font-size:16px;color:var(--ink-2);max-width:74ch}
@media(prefers-reduced-motion:reduce){.q .chev{transition:none}}

/* assessment form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-m);margin-top:var(--s-l);
  align-items:start}
.assure{display:grid;gap:12px;margin-top:var(--s-m)}
.assure li{position:relative;padding-left:26px;font-size:16px;color:var(--on-dark-2)}
.assure li::before{content:"✓";position:absolute;left:0;color:var(--art-ink);font-weight:700}
form{display:grid;gap:var(--s-s);min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-s);min-width:0}
.fld{display:grid;gap:6px;min-width:0}
.fld label{font-size:14px;font-weight:600;color:var(--on-dark)}
.fld label .opt{font-weight:400;color:var(--on-dark-2)}
.fld input,.fld textarea{min-width:0;width:100%;height:48px;padding:0 14px;border-radius:var(--r);
  border:1.5px solid #395574;background:#0D1D33;color:#fff;font:400 16px/1 var(--font)}
.fld textarea{height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#7C90A6}
.fld input:focus,.fld textarea:focus{border-color:var(--art);outline:none}
.err{font-size:14px;color:#FFB4A8;display:none}
.fld[data-bad] input,.fld[data-bad] textarea{border-color:#FF8A75}
.fld[data-bad] .err{display:block}
.privacy{font-size:14px;color:var(--on-dark-2)}
.sent{padding:var(--s-m);border:1.5px solid var(--art);border-radius:var(--r);
  background:#0D1D33;font-size:16px}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
@media(max-width:560px){.f2{grid-template-columns:1fr}}

/* close */
.close-in{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-xl);align-items:center}
.close-act{display:flex;flex-wrap:wrap;gap:var(--s-s);margin-top:var(--s-m)}
@media(max-width:900px){.close-in{grid-template-columns:1fr;gap:var(--s-l)}}

/* footer */
.foot{background:var(--bg-footer);color:var(--on-dark-2);padding:var(--s-xl) 0 var(--s-l)}
.foot-g{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s-l)}
.foot h3{color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-s)}
.foot ul{display:grid;gap:0}
.foot a{color:var(--on-dark-2);text-decoration:none;font-size:15px;display:inline-flex;
  align-items:center;justify-content:flex-start;min-height:44px;min-width:44px;padding:4px 0}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .blurb{font-size:15px;max-width:34ch;margin-top:var(--s-s)}
.foot-logo{display:inline-flex;align-items:center;min-height:44px;margin-bottom:var(--s-s)}
.foot-b{margin-top:var(--s-xl);padding-top:var(--s-m);border-top:1px solid #16273D;
  font-size:14px;display:flex;flex-wrap:wrap;gap:var(--s-s);justify-content:space-between}
@media(max-width:1024px){.foot-g{grid-template-columns:1fr 1fr;gap:var(--s-l)}}
@media(max-width:560px){.foot-g{grid-template-columns:1fr}}

/* sticky mobile bar */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  padding:10px var(--s-m) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--rule)}
.sticky .btn{flex:1;min-width:0}
.sticky-tel{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:var(--r);border:1.5px solid var(--cta);color:var(--cta)}
@media(max-width:1024px){.sticky{display:flex}body{padding-bottom:76px}}



/* ---------- Hero console. Layout follows the live site's
   .hero-command-center: one dark monitor (call transcript left, actions
   right, stats beneath), a four-tile channel strip under it, and toasts
   floating over its edges. Rebuilt in the approved palette. ---------- */
/* Every injected icon carries .i and is bounded here, not by whatever
   happens to contain it. An unbounded SVG fills its parent. */
svg.i{width:16px;height:16px;flex:none}
.cc{position:relative;min-width:0}
.cc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12px;
  font-weight:700;letter-spacing:.06em;color:var(--ink-3)}

.cc-mon{position:relative;z-index:1;border-radius:16px 16px 0 0;overflow:hidden;
  background:#060E1C;color:#fff;box-shadow:0 18px 50px rgba(10,22,40,.34)}
.cc-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0A1526;
  border-bottom:1px solid #172C46;font-size:11px}
.cc-bar em{width:9px;height:9px;border-radius:50%;background:#2B3F5B;flex:none}
.cc-bar .u{margin-left:8px;color:var(--on-dark-2);font-style:normal}
.cc-bar .lv{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:999px;background:#123449;color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em}
.cc-bar .lv s{width:6px;height:6px;border-radius:50%;background:#4ADE80;text-decoration:none}

.cc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px;
  background:#060E1C}
.cc-call{padding:18px;min-width:0;background:#0C1A2E;border-radius:12px;
  border:1px solid #172C46}
.cc-who{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.cc-who b{font-size:15px;font-weight:700}
.cc-who span{font-size:12px;color:var(--on-dark-2)}
.cc-who .t{margin-left:auto;font-size:13px;font-weight:600;color:var(--art-ink);
  font-variant-numeric:tabular-nums}
.cc-gauge{display:flex;align-items:center;gap:12px;margin:16px 0;padding:12px;
  background:#08131F;border-radius:10px;border:1px solid #172C46}
.cc-ring{position:relative;width:52px;height:52px;flex:none;border-radius:50%;
  background:conic-gradient(var(--art) 0turn .62turn,#1A3350 .62turn 1turn)}
.cc-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#08131F}
.cc-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;z-index:1}
.cc-wave{display:flex;align-items:flex-end;gap:3px;height:40px;flex:1;min-width:0}
.cc-wave i{flex:1;min-width:2px;border-radius:2px;background:linear-gradient(180deg,var(--art),#1E4A66);height:30%}
.cc-tx{display:grid;gap:16px;min-width:0}
.cc-tx div{min-width:0}
.cc-tx em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--art-ink);margin-bottom:5px}
.cc-tx em.c{color:#9FB4CA}
.cc-tx p{font-size:13.5px;line-height:1.55;color:#E4ECF4}

.cc-out{padding:16px;min-width:0;background:#0C1A2E;border-radius:12px;border:1px solid #172C46}
.cc-out>em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--on-dark-2);margin-bottom:14px}
.cc-a{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;padding:11px 10px;
  margin-bottom:8px;background:#08131F;border-radius:8px;border:1px solid #16293F}
.cc-a svg{width:14px;height:14px;color:#4ADE80;margin-top:3px}
.cc-a b{display:block;font-size:12.5px;font-weight:600;color:#fff;line-height:1.35}
.cc-a span{display:block;font-size:11px;color:var(--on-dark-2);line-height:1.45;margin-top:4px}
.cc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px;text-align:center}
.cc-stats>div{padding:10px 2px;background:#08131F;border-radius:8px;border:1px solid #16293F}
.cc-stats b{display:block;font-size:13.5px;font-weight:700;color:var(--art-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cc-stats span{display:block;font-size:9px;font-weight:700;letter-spacing:.07em;
  color:var(--on-dark-2);margin-top:3px}

.cc-ch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:2px;
  position:relative;z-index:1}
.cc-c{padding:14px 14px;background:#0C1A2E;min-width:0;border-top:1px solid #172C46}
.cc-c:first-child{border-bottom-left-radius:14px}
.cc-c:last-child{border-bottom-right-radius:14px}
.cc-c em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.07em;color:var(--on-dark-2)}
.cc-c em s{width:6px;height:6px;border-radius:50%;background:#4ADE80;text-decoration:none;flex:none}
.cc-c b{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#fff}

/* Toasts float on the monitor's top and bottom edges, as on the live site.
   2026-09-15: they used to sit over the monitor body and hid console text.
   Each now overlaps the frame by 8px only, less than the 14px of padding
   before any text starts, and hangs 16px past the sides into free gutter.
   .cc-frame is the positioning box so the offsets track the monitor, not
   the heading above it. */
.cc-head{margin-bottom:80px}
.cc-frame{position:relative;margin-bottom:84px}
.cc-toasts{position:absolute;inset:0 -16px;z-index:2;pointer-events:none}
/* time sits under the text, not in a third column: a third column left
   ~124px for the text and every toast title wrapped */
.cc-t{position:absolute;display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 12px;
  align-items:start;width:min(256px,calc(50% - 6px));padding:11px 14px;border-radius:11px;background:#0B1526;
  border:1px solid #1D3450;box-shadow:0 10px 28px rgba(10,22,40,.4)}
.cc-t i{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;background:rgba(74,222,128,.14);color:#4ADE80}
.cc-t i svg{width:14px;height:14px}
.cc-t b{display:block;font-size:12px;font-weight:600;color:#fff;line-height:1.3}
.cc-t span{display:block;font-size:11px;color:var(--on-dark-2);line-height:1.4;margin-top:3px}
.cc-t time{grid-column:2;font-size:10px;line-height:1.3;color:#8299B0;white-space:nowrap}
/* the top toast is alone on its edge, so it takes a wider box than the two
   that share the bottom edge; at 253px its second line wrapped */
.cc-t:nth-child(1){bottom:calc(100% - 8px);right:0;width:min(284px,100%)}
.cc-t:nth-child(2){top:calc(100% - 8px);left:0}
.cc-t:nth-child(3){top:calc(100% + 16px);right:0}
@media(max-width:1024px){
  .cc-head{margin-bottom:10px}
  .cc-frame{margin-bottom:0}
  .cc-toasts{position:static;inset:auto;display:grid;gap:8px;margin-bottom:10px}
  .cc-t{position:static;width:auto;box-shadow:none}
}
@media(max-width:560px){
  .cc-body{grid-template-columns:1fr}
  .cc-call{border-right:0;border-bottom:1px solid var(--rule-dark)}
  .cc-ch{grid-template-columns:1fr 1fr}
  .cc-c:first-child{border-bottom-left-radius:0}
  .cc-c:nth-child(3){border-bottom-left-radius:14px}
  .cc-c:nth-child(4){border-bottom-right-radius:14px}
}

/* motion: transform and opacity only, no layout shift, off under reduced motion */
@keyframes ccIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ccPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.74)}}
@keyframes ccWave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.motion-on .cc-t{animation:ccIn .55s cubic-bezier(.23,1,.32,1) both}
.motion-on .cc-t:nth-child(1){animation-delay:.25s}
.motion-on .cc-t:nth-child(2){animation-delay:.55s}
.motion-on .cc-t:nth-child(3){animation-delay:.85s}
.motion-on .cc-a{animation:ccIn .5s cubic-bezier(.23,1,.32,1) both}
.motion-on .cc-a:nth-of-type(1){animation-delay:.35s}
.motion-on .cc-a:nth-of-type(2){animation-delay:.55s}
.motion-on .cc-a:nth-of-type(3){animation-delay:.75s}
.motion-on .cc-a:nth-of-type(4){animation-delay:.95s}
.motion-on .cc-bar .lv s,.motion-on .cc-c em s{animation:ccPulse 2.4s ease-in-out infinite}
.motion-on .cc-c:nth-child(2) em s{animation-delay:.4s}
.motion-on .cc-c:nth-child(3) em s{animation-delay:.8s}
.motion-on .cc-c:nth-child(4) em s{animation-delay:1.2s}
.motion-on .cc-wave i{transform-origin:bottom;animation:ccWave 1.15s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .motion-on .cc-t,.motion-on .cc-a,.motion-on .cc-bar .lv s,
  .motion-on .cc-c em s,.motion-on .cc-wave i{animation:none}
}

/* ---------- Section 05: timeline process map ---------- */
.tl{position:relative;margin-top:var(--s-l);max-width:600px;padding-left:46px}
.tl::before{content:"";position:absolute;left:16px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--cta),rgba(38,123,150,.22))}
.tl-i{position:relative;padding:0 0 var(--s-l) 0}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:"";position:absolute;left:-37px;top:4px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--cta);box-shadow:0 0 0 5px #fff}
.tl-n{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--cta);
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.tl-i h3{margin-bottom:5px}
.tl-i p{font-size:16px;color:var(--ink-2)}
@media(max-width:560px){.tl{padding-left:36px}.tl::before{left:10px}.tl-i::before{left:-32px}}

/* Preview-honesty notice. The form has no endpoint; say so before anyone types. */
.warn{margin-top:var(--s-m);padding:14px 16px;border-radius:var(--r);
  border:1.5px solid #E0A96D;background:#2A1F12;color:#F5D9B8;font-size:15px;line-height:1.5}
.warn strong{color:#FFE9CC}
.warn a{color:#FFCE8F;display:inline-flex;align-items:center;min-height:44px}
form .warn{margin-top:0}

/* "Example" marker on the operations log — it is illustrative, not a live feed. */
.tagx{flex:none;padding:3px 8px;border-radius:4px;background:#2E96B7;color:#0A1628;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Inline phone links are conversion elements — give them a real hit area on mobile. */
p a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}