/* ============================================================
   P1 SITE — the public marketing site.

   2026-09 REDESIGN. Layout language taken from the public-safety
   SaaS pattern (the user pointed at active911.com): a dark header
   and hero over a product picture, then LIGHT, roomy content
   bands — product cards, who-we-serve cards, a phase strip, a
   trust band, a lime call to action — and a dark multi-column
   footer. Our identity stays: graphite + hi-vis lime, and the
   "ring to clear" call card as the hero picture instead of a
   stock photo.

   LIME ON WHITE: bright lime (#B6F13F) is a FILL colour here —
   buttons, bars, badges — always with near-black type on it.
   Lime TEXT on a light ground uses --lime-ink, the deep olive
   that reads; bright lime text on white does not.

   Class vocabulary is unchanged from the previous design (band,
   band-head, entry, bullets, callout, probs, deep, close, page-
   head, eyebrow, chev …) so every page built on it restyles
   without markup changes. The previous file is kept at
   _backups/website-before-redesign-2026-09-14/.

   Shared by index.html and the public pages under /pages. The
   header and footer are injected by js/site-shell.js.
   ============================================================ */
:root{
  /* light content ground */
  --ground:#FFFFFF;
  --tint:#F4F6F2;           /* alternate band — a faint warm grey, not blue */
  --panel:#FFFFFF;
  --raised:#EEF1EC;
  --line:#E2E6E0;
  --line-2:#CDD3CB;

  --ink:#0F1412;
  --dim:#3E4643;
  --mute:#6A726F;

  /* dark chrome — header, hero, footer, the product picture */
  --night:#0E1112;
  --night-2:#161A1B;
  --night-3:#1D2223;
  --night-line:#272D2E;
  --night-line-2:#3A4243;
  --night-ink:#F3F6F5;
  --night-dim:#A2ABAA;
  --night-mute:#6E7877;

  --lime:#B6F13F;           /* fills, bars, badges — with --on-lime type */
  --lime-hover:#C7F758;
  --on-lime:#0B0E06;
  --lime-ink:#3F6212;       /* lime as TEXT on a light ground */
  --lime-wash:#F0FAD9;

  --amber:#FFB020;
  --red:#E5484D;
  --green:#2E9E4F;

  --sans:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r:12px;
  --r-sm:8px;
  --pad:clamp(20px,5vw,40px);
  --shadow:0 1px 2px rgba(15,20,18,.05), 0 8px 24px rgba(15,20,18,.07);
  --shadow-lg:0 2px 4px rgba(15,20,18,.06), 0 24px 60px rgba(15,20,18,.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ text-wrap:balance; margin:0; }
a{ color:inherit; }
img{ max-width:100%; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lime-ink);
}
.dark .eyebrow, .eyebrow.on-dark{ color:var(--lime); }

/* The chevron — apparatus striping. A thin divider under dark bands. */
.chev{
  height:6px;
  background-image:repeating-linear-gradient(-55deg, var(--lime) 0 10px, transparent 10px 26px);
  opacity:.9; background-color:var(--night);
}

/* ══════════════ HEADER (dark) ══════════════ */
.util{ background:var(--night); border-bottom:1px solid var(--night-line); color:var(--night-mute); }
.util-in{ display:flex; align-items:center; justify-content:flex-end; gap:22px; height:34px; }
.util a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--night-mute); text-decoration:none;
}
.util a:hover{ color:var(--night-ink); }
.util .sp{ margin-left:auto; }
@media (max-width:640px){ .util .hide-sm{ display:none; } }

.nav{ position:sticky; top:0; z-index:60; background:var(--night); border-bottom:1px solid var(--night-line); color:var(--night-ink); }
.nav.stuck{ box-shadow:0 8px 24px rgba(0,0,0,.25); }
.nav-in{ display:flex; align-items:center; gap:6px; height:70px; }
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:14px; letter-spacing:.2em; font-weight:700;
  text-decoration:none; white-space:nowrap; color:var(--night-ink);
}
.brand em{ font-style:normal; color:var(--lime); }
.brand svg, .brand .brand-logo{ width:36px; height:36px; flex:none; display:block; }
.nav-links{ display:flex; gap:2px; margin-left:26px; }
.nav-item{ position:relative; }
.nav-btn{
  font-family:inherit; font-size:15px; font-weight:560; color:var(--night-dim);
  background:transparent; border:0; padding:24px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  border-bottom:2px solid transparent;
}
.nav-btn:hover, .nav-item.open .nav-btn{ color:var(--night-ink); }
.nav-item.open .nav-btn{ border-bottom-color:var(--lime); }
.nav-btn svg{ width:11px; height:11px; opacity:.6; transition:transform .16s; }
.nav-item.open .nav-btn svg{ transform:rotate(180deg); }
.nav-btn:focus-visible{ outline:2px solid var(--lime); outline-offset:-2px; }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-signin{
  font-size:14.5px; font-weight:600; color:var(--night-dim); text-decoration:none; padding:10px 12px;
}
.nav-signin:hover{ color:var(--night-ink); }

/* Menus open on the dark header as LIGHT cards — easier to read, and they look like the pages. */
.mega{
  position:absolute; top:100%; left:0; display:none; z-index:70;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; min-width:720px; box-shadow:var(--shadow-lg);
}
.nav-item.open .mega{ display:block; }
.mega-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.mega-col h4{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime-ink); margin:0 0 2px;
}
.mega-col .when{
  font-size:12px; color:var(--mute); display:block;
  margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.mega-col a{ display:block; font-size:13px; color:var(--mute); text-decoration:none; padding:7px 8px; margin:0 -8px;
  line-height:1.35; border-radius:var(--r-sm); }
.mega-col a:hover{ background:var(--tint); }
.mega-col a b{ display:block; font-weight:640; color:var(--ink); font-size:14px; }
.mega-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mega-foot span{ font-size:13px; color:var(--mute); }
.mega-narrow{ min-width:320px; }
.mega-narrow .mega-cols{ grid-template-columns:1fr; gap:0; }

/* Phone and tablet: a menu button and a full-width sheet. */
.nav-toggle{
  display:none; margin-left:8px; background:transparent; border:1px solid var(--night-line-2);
  color:var(--night-ink); border-radius:var(--r-sm); width:42px; height:40px; cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }
@media (max-width:1060px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-grid; place-items:center; }
  .nav-signin{ display:none; }
}
/* On a phone the demo button lives in the menu sheet — beside the logo it wraps onto two lines. */
@media (max-width:480px){ .nav-cta > .btn-primary{ display:none; } }
.nav-sheet{
  display:none; background:var(--night-2); border-bottom:1px solid var(--night-line);
  max-height:calc(100vh - 104px); overflow:auto;
}
.nav-sheet.open{ display:block; }
.nav-sheet .wrap{ padding-block:10px 22px; }
.nav-sheet details{ border-bottom:1px solid var(--night-line); }
.nav-sheet summary{
  list-style:none; cursor:pointer; padding:15px 0; font-weight:620; color:var(--night-ink);
  display:flex; justify-content:space-between;
}
.nav-sheet summary::-webkit-details-marker{ display:none; }
.nav-sheet summary::after{ content:"+"; color:var(--lime); font-weight:700; }
.nav-sheet details[open] summary::after{ content:"–"; }
.nav-sheet a{ display:block; padding:9px 0 9px 12px; color:var(--night-dim); text-decoration:none; font-size:15px; }
.nav-sheet a:hover{ color:var(--night-ink); }
.nav-sheet .sheet-links{ padding-bottom:10px; }
.nav-sheet .sheet-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* ══════════════ BUTTONS ══════════════ */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
  font-size:15px; font-weight:650; padding:12px 20px; border-radius:999px;
  text-decoration:none; cursor:pointer; border:1px solid var(--line-2);
  color:var(--ink); background:#fff; line-height:1.2;
  transition:background .15s, border-color .15s, transform .15s;
}
.btn:hover{ border-color:var(--ink); }
.btn svg{ width:16px; height:16px; }
.btn-primary{
  background:var(--lime); color:var(--on-lime); border-color:var(--lime); font-weight:750;
}
.btn-primary:hover{ background:var(--lime-hover); border-color:var(--lime-hover); color:var(--on-lime); }
.btn-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-dark:hover{ background:#26302C; border-color:#26302C; }
.btn-ghost{ background:transparent; color:var(--night-ink); border-color:var(--night-line-2); }
.btn-ghost:hover{ background:var(--night-3); border-color:var(--night-mute); }
.btn:focus-visible{ outline:2px solid var(--lime-ink); outline-offset:3px; }
.dark .btn:focus-visible, .nav .btn:focus-visible{ outline-color:var(--lime); }
.link-arrow{
  display:inline-flex; align-items:center; gap:6px; font-weight:650; font-size:14.5px;
  color:var(--lime-ink); text-decoration:none;
}
.link-arrow::after{ content:"→"; transition:transform .15s; }
.link-arrow:hover::after{ transform:translateX(3px); }
.dark .link-arrow{ color:var(--lime); }

/* ══════════════ DARK BANDS: hero + interior page heads ══════════════ */
.dark{ background:var(--night); color:var(--night-ink); position:relative; overflow:hidden; }
.dark p{ color:var(--night-dim); }

/* A faint grid and a lime glow — atmosphere behind the product picture, nothing more. */
.hero, .page-head{ background:var(--night); color:var(--night-ink); position:relative; overflow:hidden; }
.hero::before, .page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}
.hero::after, .page-head::after{
  content:""; position:absolute; width:720px; height:720px; right:-160px; top:-260px; pointer-events:none;
  background:radial-gradient(circle, rgba(182,241,63,.16), transparent 62%);
}
.hero > .wrap, .page-head > .wrap{ position:relative; z-index:1; }
.hero .eyebrow, .page-head .eyebrow{ color:var(--lime); }

.hero{ padding:clamp(52px,8vw,96px) 0 clamp(56px,8vw,96px); }
.hero-grid{ display:grid; gap:clamp(38px,5vw,64px); grid-template-columns:1fr; align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:1.02fr .98fr; } }
.hero h1{
  font-size:clamp(2.6rem,6.4vw,4.4rem); line-height:1; letter-spacing:-.045em;
  font-weight:800; margin:18px 0 0; max-width:15ch;
}
.hero h1 .hi{ color:var(--lime); }
.hero p.lede{ font-size:clamp(1.02rem,1.6vw,1.2rem); color:var(--night-dim); margin:22px 0 0; max-width:48ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero .btn:not(.btn-primary){ background:transparent; color:var(--night-ink); border-color:var(--night-line-2); }
.hero .btn:not(.btn-primary):hover{ background:var(--night-3); border-color:var(--night-mute); }
.hero-note{
  font-size:13.5px; color:var(--night-mute); margin-top:28px; display:flex; gap:10px 22px; flex-wrap:wrap;
}
.hero-note span{ display:inline-flex; align-items:center; gap:8px; }
.hero-note span::before{
  content:""; width:16px; height:16px; border-radius:50%; flex:none;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0E06' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ── the product picture: a live call, not a stock photo ── */
.stage{ position:relative; }
.call{
  border:1px solid var(--night-line-2); border-radius:var(--r); background:var(--night-2); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(182,241,63,.05);
  color:var(--night-ink);
}
.call-top{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--night-line); background:var(--night-3);
}
.call-top .dots{ display:flex; gap:6px; margin-right:6px; }
.call-top .dots i{ width:9px; height:9px; border-radius:50%; background:var(--night-line-2); display:block; }
.call-id{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.07em; }
.pip{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,.2); }
.call-live{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#FF7A7E; margin-left:auto;
}
.call-body{ padding:16px 18px 8px; }
.field{ display:grid; grid-template-columns:80px 1fr; gap:12px; padding:7px 0; align-items:baseline; margin:0; }
.field dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--night-mute); }
.field dd{ margin:0; font-size:14.5px; color:var(--night-dim); }
.field dd b{ font-weight:650; color:var(--night-ink); }
.field dd .sec{ color:var(--lime); font-family:var(--mono); font-size:12.5px; }

.timeline{ border-top:1px solid var(--night-line); margin-top:10px; padding:13px 18px 18px; }
.tl-row{
  display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center;
  padding:7px 0 7px 13px; border-left:2px solid var(--night-line);
  opacity:.28; transition:opacity .4s ease, border-color .4s ease;
}
.tl-row.on{ opacity:1; border-left-color:var(--lime); }
.tl-row .t{ font-family:var(--mono); font-size:11px; color:var(--night-mute); font-variant-numeric:tabular-nums; }
.tl-row.on .t{ color:var(--lime); }
.tl-row .s{ font-size:13.5px; color:var(--night-dim); }
.tl-row.on .s{ color:var(--night-ink); }
.tl-row .u{ font-family:var(--mono); font-size:10.5px; color:var(--night-mute); }
@media (prefers-reduced-motion: reduce){ .tl-row{ opacity:1; transition:none; } }

/* Two small chips floating off the card: the unit, and the area. */
.chip-float{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:#fff; color:var(--ink); border-radius:var(--r-sm); padding:10px 13px;
  box-shadow:var(--shadow-lg); font-size:13px; line-height:1.25;
}
.chip-float b{ display:block; font-size:13.5px; }
.chip-float small{ color:var(--mute); font-size:11.5px; }
.chip-float .badge{
  font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.06em;
  padding:5px 8px; border-radius:6px; background:var(--lime); color:var(--on-lime);
}
.chip-float .badge.amber{ background:#FFE3A3; color:#5C3B00; }
.chip-a{ left:-28px; bottom:-26px; }
.chip-b{ right:-22px; top:-44px; }
@media (max-width:1100px){ .chip-a{ left:10px; bottom:-22px; } .chip-b{ right:10px; top:-20px; } }
@media (max-width:560px){ .chip-float{ display:none; } }

/* ══════════════ LIGHT BANDS ══════════════ */
.band{ padding:clamp(56px,7vw,96px) 0; }
.band.alt{ background:var(--tint); }
.band-head{ max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }
.band-head.center{ margin-inline:auto; text-align:center; }
.band-head h2{
  font-size:clamp(1.9rem,3.8vw,2.75rem); letter-spacing:-.04em; line-height:1.06;
  font-weight:780; margin-top:14px;
}
.band-head p{ color:var(--dim); margin:16px 0 0; font-size:1.05rem; }

/* ── product cards ── */
.cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:700px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .cards.four{ grid-template-columns:repeat(4,1fr); } .cards.three{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
a.card{ text-decoration:none; }
a.card:hover, .card.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.card .ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--night); color:var(--lime); margin-bottom:18px; flex:none;
}
.card .ico svg{ width:24px; height:24px; }
.card .kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-ink); font-weight:700; }
.card h3{ font-size:1.22rem; letter-spacing:-.025em; font-weight:740; margin-top:6px; }
.card p{ color:var(--dim); font-size:15px; margin:10px 0 0; }
.card ul{ list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:8px; }
.card li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--dim); }
.card li::before{
  content:""; position:absolute; left:0; top:.28em; width:15px; height:15px; border-radius:50%;
  background:var(--lime-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6212' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.card .link-arrow{ margin-top:auto; padding-top:20px; }

/* ── who-we-serve tiles: dark, iconographic, like the section photographs they replace ── */
.serve{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .serve{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .serve{ grid-template-columns:repeat(4,1fr); } }
.serve a{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:250px;
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--night-ink);
  padding:24px; background:var(--night);
  isolation:isolate; transition:transform .18s, box-shadow .18s;
}
.serve a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(182,241,63,.20), transparent 55%),
    repeating-linear-gradient(-55deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--night-3), var(--night));
}
.serve a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.serve .big{ position:absolute; top:22px; right:22px; width:64px; height:64px; color:var(--lime); opacity:.9; }
.serve h3{ font-size:1.35rem; letter-spacing:-.03em; font-weight:760; }
.serve p{ margin:8px 0 0; font-size:14.5px; color:var(--night-dim); }
.serve .link-arrow{ color:var(--lime); margin-top:14px; }

/* ── phase strip: ring to clear ── */
.steps{ display:grid; gap:18px; grid-template-columns:1fr; counter-reset:step; }
@media (min-width:760px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; position:relative; box-shadow:var(--shadow); }
.step .when{ font-family:var(--mono); font-size:11px; color:var(--mute); display:flex; justify-content:space-between; }
.step .when b{ color:var(--lime-ink); letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; }
.step h3{ font-size:1.18rem; letter-spacing:-.025em; font-weight:740; margin-top:14px; }
.step p{ color:var(--dim); font-size:14.5px; margin:8px 0 0; }
.step .bar{ height:4px; border-radius:4px; background:var(--line); margin-top:18px; overflow:hidden; }
.step .bar i{ display:block; height:100%; background:var(--lime); border-radius:4px; }

/* ── the trust band (dark) — the standards we report to, in place of logo walls ── */
.trust{ background:var(--night); color:var(--night-ink); }
.trust .wrap{ padding-block:clamp(48px,6vw,78px); }
.trust-grid{ display:grid; gap:1px; background:var(--night-line); border:1px solid var(--night-line); border-radius:var(--r); overflow:hidden; grid-template-columns:1fr 1fr; }
@media (min-width:900px){ .trust-grid{ grid-template-columns:repeat(4,1fr); } }
.trust-cell{ background:var(--night-2); padding:24px 22px; }
.trust-cell b{ display:block; font-family:var(--mono); font-size:1.5rem; letter-spacing:.02em; color:var(--lime); font-weight:800; }
.trust-cell span{ display:block; margin-top:6px; font-size:14px; color:var(--night-dim); line-height:1.5; }
.trust h2{ font-size:clamp(1.8rem,3.6vw,2.5rem); letter-spacing:-.04em; line-height:1.06; font-weight:780; margin:14px 0 0; max-width:22ch; }
.trust p.lead{ color:var(--night-dim); max-width:60ch; margin:14px 0 clamp(26px,3vw,36px); }

/* ── split: text beside a picture or list ── */
.split{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:960px){ .split{ grid-template-columns:1fr 1fr; } }

/* ── integration tiles ── */
.tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.tile{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; }
.tile .ico{ width:36px; height:36px; border-radius:9px; background:var(--lime-wash); color:var(--lime-ink); display:grid; place-items:center; flex:none; }
.tile .ico svg{ width:19px; height:19px; }
.tile b{ display:block; font-size:14.5px; font-weight:650; }
.tile small{ display:block; color:var(--mute); font-size:12.5px; line-height:1.35; }

/* problems — numbered cards */
.probs{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px){ .probs{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .probs{ grid-template-columns:repeat(3,1fr); } }
.prob{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 24px; }
.prob .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--red); display:block; margin-bottom:10px; font-weight:700; }
.prob h3{ font-size:16px; font-weight:700; letter-spacing:-.012em; }
.prob p{ font-size:14.5px; color:var(--mute); margin:8px 0 0; }

/* phases (long form, interior) */
.phase{ display:grid; gap:clamp(18px,3vw,46px); grid-template-columns:1fr; padding:clamp(32px,4vw,46px) 0; border-top:1px solid var(--line); }
@media (min-width:920px){ .phase{ grid-template-columns:220px 1fr; } }
.phase-key .stage{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lime-ink); display:block; }
.phase-key h3{ font-size:1.4rem; letter-spacing:-.035em; font-weight:740; margin-top:9px; }
.phase-body p{ margin:0 0 20px; color:var(--dim); max-width:60ch; }
.feats{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:640px){ .feats{ grid-template-columns:1fr 1fr; } }
.feat{ background:var(--tint); border-radius:var(--r-sm); padding:16px 18px; }
.feat b{ display:block; font-size:14.5px; font-weight:660; }
.feat span{ display:block; font-size:13.5px; color:var(--mute); margin-top:5px; line-height:1.5; }

/* ── the lime band ── */
.deep{ background:var(--lime); color:var(--on-lime); }
.deep .wrap{ padding-block:clamp(56px,8vw,92px); }
.deep .eyebrow{ color:#2F4406; }
.deep h2{
  font-size:clamp(2rem,4.6vw,3.1rem); letter-spacing:-.045em; line-height:1.03;
  font-weight:800; margin-top:14px; max-width:20ch;
}
.deep p{ color:#26350A; max-width:58ch; margin:20px 0 0; font-size:1.05rem; }
.deep-grid{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:clamp(30px,4vw,44px); }
@media (min-width:760px){ .deep-grid{ grid-template-columns:repeat(3,1fr); } }
.deep-cell{ background:rgba(255,255,255,.42); border:1px solid rgba(11,14,6,.12); border-radius:var(--r); padding:22px; }
.deep-cell b{ display:block; font-size:15.5px; font-weight:760; }
.deep-cell span{ display:block; font-size:14px; color:#2A3A0B; margin-top:7px; line-height:1.55; }
.deep .btn:not(.btn-dark){ background:transparent; border-color:rgba(11,14,6,.35); color:var(--on-lime); }
.deep .btn:not(.btn-dark):hover{ background:rgba(255,255,255,.35); border-color:var(--on-lime); }

/* ── the closing call to action ── */
.close{ padding:clamp(56px,8vw,92px) 0; }
.close-card{
  background:var(--night); color:var(--night-ink); border-radius:calc(var(--r) + 6px);
  padding:clamp(34px,5vw,56px); position:relative; overflow:hidden;
  display:grid; gap:24px; grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .close-card{ grid-template-columns:1.3fr auto; } }
.close-card::after{
  content:""; position:absolute; width:520px; height:520px; right:-160px; bottom:-260px;
  background:radial-gradient(circle, rgba(182,241,63,.22), transparent 62%); pointer-events:none;
}
.close-card > *{ position:relative; }
.close-card .eyebrow{ color:var(--lime); }
.close h2{ font-size:clamp(1.9rem,4vw,2.7rem); letter-spacing:-.045em; line-height:1.05; font-weight:790; max-width:18ch; margin-top:12px; }
.close p{ color:var(--night-dim); margin:14px 0 0; max-width:54ch; }
.close .hero-actions{ margin-top:0; }
.close .btn:not(.btn-primary){ background:transparent; color:var(--night-ink); border-color:var(--night-line-2); }
.close .btn:not(.btn-primary):hover{ background:var(--night-3); }
/* A plain .close with no card — older interior pages — still reads. */
.close > .wrap > h2 + p{ color:var(--dim); }

/* ══════════════ FOOTER (dark) ══════════════ */
.foot{ background:var(--night); color:var(--night-dim); border-top:1px solid var(--night-line); }
.foot-top{ display:grid; gap:34px; grid-template-columns:1fr; padding-block:clamp(44px,6vw,64px) 34px; }
@media (min-width:760px){ .foot-top{ grid-template-columns:1.4fr repeat(4,1fr); } }
.foot-brand p{ font-size:14px; color:var(--night-mute); margin:14px 0 0; max-width:32ch; }
.foot h5{
  margin:0 0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--night-ink); font-weight:700;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot li a{ color:var(--night-mute); text-decoration:none; font-size:14px; }
.foot li a:hover{ color:var(--lime); }
.foot-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.foot-badges span{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--night-line-2); color:var(--night-dim); border-radius:6px; padding:5px 8px;
}
.foot-bottom{ border-top:1px solid var(--night-line); padding-block:18px 30px; display:flex; gap:14px 24px; flex-wrap:wrap; align-items:center; }
.foot-bottom small{ font-size:12.5px; color:var(--night-mute); }
.foot-bottom .sp{ margin-left:auto; }
.foot-bottom a{ color:var(--night-mute); font-size:12.5px; text-decoration:none; }
.foot-bottom a:hover{ color:var(--night-ink); }

/* ══════════════ INTERIOR PAGES ══════════════ */
.page-head{ padding:clamp(48px,7vw,84px) 0 clamp(40px,5vw,64px); }
.page-head h1{
  font-size:clamp(2.2rem,5.2vw,3.5rem); letter-spacing:-.045em; line-height:1.03;
  font-weight:800; margin:16px 0 0; max-width:20ch;
}
.page-head p{ color:var(--night-dim); margin:18px 0 0; max-width:60ch; font-size:1.08rem; }
.page-head .hero-actions .btn:not(.btn-primary){ background:transparent; color:var(--night-ink); border-color:var(--night-line-2); }
/* A page head's chevron sits between it and the light page. */
.page-head + .chev{ background-color:var(--night); }

/* an entry: one anchored feature or audience */
.entry{
  display:grid; gap:clamp(14px,3vw,40px); grid-template-columns:1fr;
  padding:clamp(28px,3.5vw,42px) 0; border-top:1px solid var(--line);
  scroll-margin-top:120px;
}
.entry:first-child{ border-top:0; }
@media (min-width:920px){ .entry{ grid-template-columns:270px 1fr; } }
.entry-key .tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime-ink); display:inline-block; font-weight:700;
  background:var(--lime-wash); border-radius:6px; padding:4px 8px;
}
.entry-key h2{ font-size:1.4rem; letter-spacing:-.03em; font-weight:760; margin-top:12px; }
.entry-body > p{ margin:0 0 16px; color:var(--dim); max-width:64ch; }
.entry-body > p:last-child{ margin-bottom:0; }
.bullets{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.bullets li{ position:relative; padding-left:28px; color:var(--dim); font-size:15.5px; max-width:64ch; }
.bullets li::before{
  content:""; position:absolute; left:0; top:.3em; width:17px; height:17px; border-radius:50%;
  background:var(--lime-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F6212' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.bullets li b{ color:var(--ink); font-weight:650; }

.callout{
  border:1px solid var(--line); border-left:4px solid var(--lime);
  border-radius:var(--r-sm); padding:16px 18px; background:var(--tint); margin-top:20px;
}
.callout p{ margin:0; font-size:15px; color:var(--dim); }
.callout b{ color:var(--ink); }

/* ── spec table (deployment requirements) ── */
.spec{ width:100%; border-collapse:collapse; font-size:14.5px; }
.spec th, .spec td{ text-align:left; padding:11px 16px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ width:36%; color:var(--mute); font-weight:600; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding-top:14px; }
.spec td{ color:var(--ink); }

/* ── forms (contact) ── */
.form{ display:grid; gap:16px; }
.form-row{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form label{ display:block; font-size:13.5px; font-weight:620; color:var(--dim); margin-bottom:6px; }
.form input, .form select, .form textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 13px; outline:none;
}
.form textarea{ resize:vertical; min-height:150px; }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--lime-ink); box-shadow:0 0 0 3px var(--lime-wash); }
.form button{ justify-self:start; }
.aside-cards{ display:grid; gap:14px; align-content:start; }
.aside-card{ display:flex; gap:14px; align-items:flex-start; background:var(--tint); border-radius:var(--r); padding:18px; }
.aside-card .ico{ width:40px; height:40px; border-radius:10px; background:var(--night); color:var(--lime); display:grid; place-items:center; flex:none; }
.aside-card .ico svg{ width:20px; height:20px; }
.aside-card h4{ font-size:15px; }
.aside-card p{ margin:3px 0 0; color:var(--dim); font-size:14.5px; }
.aside-card a{ color:var(--lime-ink); font-weight:600; }

/* ── the sign-in page belongs to the PORTAL, not the marketing site ──
   It loads console.css after this file, which re-points these variables on
   :root when the portal's light theme is on (its own blue accent). With the
   dark theme it keeps the previous dark console palette. Scoped that way so
   this redesign changes nothing about how sign-in looks in either theme. */
.auth-page{
  --r:2px;
  background:var(--ground); color:var(--ink);
  min-height:100vh; display:grid; grid-template-rows:auto 1fr auto;
}
:root:not([data-theme="light"]) .auth-page{
  --ground:#0E1112; --panel:#161A1B; --raised:#1D2223; --line:#272D2E; --line-2:#3A4243;
  --ink:#F3F6F5; --dim:#A2ABAA; --mute:#6E7877;
}
.auth-page .brand{ color:var(--ink); }
.auth-top{ border-bottom:1px solid var(--line); }
.auth-top-in{ display:flex; align-items:center; height:60px; gap:16px; }
.auth-top .back{
  margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); text-decoration:none;
}
.auth-top .back:hover{ color:var(--ink); }
.auth-main{ display:grid; place-items:center; padding:clamp(28px,6vw,64px) var(--pad); }
.auth-card{ width:100%; max-width:428px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.auth-card .chev{ opacity:.85; border-top:0; background-color:transparent; }
.auth-inner{ padding:clamp(24px,4vw,34px); }
.auth-card .eyebrow{ color:var(--lime); }
.auth-card h2{ font-size:1.5rem; letter-spacing:-.035em; font-weight:760; margin:14px 0 0; }
.auth-card .sub{ color:var(--mute); font-size:14.5px; margin:8px 0 0; }
.seg{ display:grid; grid-template-columns:1fr 1fr; margin:24px 0 22px; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.seg-btn{ font-family:inherit; font-size:13.5px; font-weight:600; padding:11px 10px; background:transparent; border:0; border-right:1px solid var(--line-2); color:var(--mute); cursor:pointer; }
.seg-btn:last-child{ border-right:0; }
.seg-btn:hover{ color:var(--ink); background:var(--raised); }
.seg-btn.active{ background:var(--lime); color:#0B0E06; font-weight:750; }
.seg-btn:focus-visible{ outline:2px solid var(--lime); outline-offset:-3px; }
.auth-form .field-row{ margin-bottom:13px; }
.auth-form label{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.auth-form input{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--ground); border:1px solid var(--line-2); border-radius:var(--r); padding:12px 13px; outline:none; }
.auth-form input::placeholder{ color:var(--mute); }
.auth-form input:focus{ border-color:var(--lime); }
.auth-submit{ width:100%; margin-top:8px; font-family:inherit; font-size:15px; font-weight:750; padding:13px; background:var(--lime); color:#0B0E06; border:1px solid var(--lime); border-radius:var(--r); cursor:pointer; }
.auth-submit:hover:not(:disabled){ background:#C7F758; border-color:#C7F758; }
.auth-submit:disabled{ opacity:.6; cursor:default; }
.auth-submit:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.auth-error{ display:none; border:1px solid rgba(255,79,61,.4); background:rgba(255,79,61,.13); color:#FF4F3D; border-radius:var(--r); padding:11px 13px; font-size:14px; margin-bottom:16px; }
.auth-error.show{ display:block; }
.auth-foot{ padding:20px var(--pad) 34px; text-align:center; }
.auth-foot p{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:0; }
.auth-help{ margin-top:18px; font-size:13.5px; color:var(--mute); text-align:center; }
.auth-help a{ color:var(--lime); text-decoration:none; }
.auth-help a:hover{ text-decoration:underline; }

/* utility */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }

/* ── status pills (integrations) ── */
.pill{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; border-radius:999px; padding:4px 9px; background:var(--lime-wash); color:var(--lime-ink);
}
.pill.native{ background:var(--night); color:var(--lime); }
.pill.planned{ background:#FFF4DB; color:#7A5200; }
.card .card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card .card-top .ico{ margin-bottom:18px; }
.group-title{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); font-weight:700;
  margin:clamp(34px,4vw,48px) 0 16px; padding-top:18px; border-top:1px solid var(--line); }
.group-title:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* ── About: our team (filled by js/team.js) ───────────────── */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr)); gap:20px; }
.team-card{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow);
}
.team-photo{ flex:none; width:120px; height:120px; border-radius:var(--r); overflow:hidden; background:var(--lime-wash); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-initials{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size:2.2rem; font-weight:760; letter-spacing:-.02em; color:var(--lime-ink);
}
.team-body{ min-width:0; }
.team-card h3{ font-size:1.22rem; letter-spacing:-.025em; font-weight:740; }
.team-title{
  margin:4px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime-ink); font-weight:700;
}
.team-bio{ margin:12px 0 0; color:var(--dim); font-size:15px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
@media (max-width:520px){
  .team-card{ flex-direction:column; gap:16px; }
  .team-photo{ width:96px; height:96px; }
}