/* ==========================================================================
   Komunidad — design system
   Structure & layout language adapted from the Hercules landing-page pattern,
   rendered in the Komunidad brand palette (teal / deep navy on warm paper).

   Sections
     01  Tokens
     02  Reset & base
     03  Layout helpers
     04  Texture
     05  Navigation
     06  Buttons, pills, chips
     07  Headings & highlight boxes
     08  Hero + prompt builder
     09  Case-study carousel
     10  Split feature cards
     11  Mock UI widgets
     12  Marquees
     13  Grids, lists, stats
     14  Testimonials
     15  FAQ
     16  Forms
     17  Pricing
     18  CTA band
     19  Footer
     20  Responsive
     21  Motion preferences
   ========================================================================== */

/* -------------------------------------------------------------------------
   01  Tokens
   ---------------------------------------------------------------------- */
:root{
  /* surfaces */
  --canvas:      #f6f6f2;   /* warm paper, page background          */
  --canvas-soft: #fbfbf8;   /* lighter band                          */
  --surface:     #ffffff;   /* cards                                 */
  --tint:        #eaf1ee;   /* tinted band (footer, CTA)             */
  --tint-deep:   #dfeae6;

  /* brand */
  --teal:        #1d969e;
  --teal-600:    #16797f;
  --teal-700:    #115f65;
  --teal-50:     #e2f2f2;
  --mint:        #c9e9e2;   /* highlight-box fill                    */
  --navy:        #0b1e2c;   /* dark panels                           */
  --navy-700:    #103244;
  --deep:        #071722;
  --signal:      #c9722a;   /* alerts / overdue only                 */
  --signal-50:   #f8ebdf;

  /* text */
  --ink:         #0c2a30;   /* headings                              */
  --ink-soft:    #33504f;
  --muted:       #61756f;
  --faint:       #8a9a94;

  /* lines */
  --line:        #e3e4dd;
  --line-soft:   #edeee8;
  --line-strong: #d3d6cd;

  /* shape */
  --r-sm: 8px;
  --r:    12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* elevation */
  --sh-sm: 0 1px 2px rgba(12,42,48,.06);
  --sh:    0 4px 16px rgba(12,42,48,.07);
  --sh-md: 0 10px 34px rgba(12,42,48,.09);
  --sh-lg: 0 24px 70px rgba(12,42,48,.12);

  /* type */
  --display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --body:    "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gutter: 26px;
  --section: 104px;
}

/* -------------------------------------------------------------------------
   02  Reset & base
   ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-soft);
  font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* -------------------------------------------------------------------------
   03  Layout helpers
   ---------------------------------------------------------------------- */
.wrap{width:min(1180px,calc(100% - 44px));margin-inline:auto}
.wrap-narrow{width:min(860px,calc(100% - 44px));margin-inline:auto}
.section{padding:var(--section) 0}
.section-sm{padding:64px 0}
.section-tight{padding-top:36px}
.band{background:var(--canvas-soft);border-block:1px solid var(--line-soft)}
.center{text-align:center}
.stack-sm > * + *{margin-top:10px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* two-column section header: heading left, supporting copy right */
.section-head{
  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;
  align-items:end;margin-bottom:44px;
}
.section-head p{margin:0;color:var(--muted);font-size:16.5px;max-width:460px}
.section-head.center{display:block;text-align:center;max-width:720px;margin-inline:auto}
.section-head.center p{margin-inline:auto;max-width:620px}

.eyebrow{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-600);margin-bottom:14px;
}

/* -------------------------------------------------------------------------
   04  Texture — faint diagonal cross-hatch over the paper canvas
   ---------------------------------------------------------------------- */
.hatch{position:relative;isolation:isolate}
.hatch::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(12,42,48,.045) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(-45deg, rgba(12,42,48,.045) 0 1px, transparent 1px 74px);
}
.hatch-fade::before{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 100%);
}

/* -------------------------------------------------------------------------
   05  Navigation — floating rounded bar
   ---------------------------------------------------------------------- */
.nav-shell{position:sticky;top:0;z-index:80;padding:14px 0 0}
.nav{
  width:min(1180px,calc(100% - 44px));margin-inline:auto;
  display:flex;align-items:center;gap:8px;
  height:62px;padding:0 10px 0 16px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh);
}
/* The bar stays 62px tall, and the lockup is split into its two parts so each
   can be sized for its own job:

     wordmark — matched to the nav links. The lettering is 31px tall in the
       source crop with a 22px x-height, so 31 x (8/22) = 11.3px puts its
       x-height on exactly the 8px of the 14px nav text.
     mark — sized for the bar rather than for the wordmark. At 34px it clears
       the bar by 14px top and bottom instead of the 7.6px it had when both
       were locked to the single lockup's proportions.

   The full lockup (assets/komunidad-logo.png) is still used in the footer,
   where there is room for its natural proportions. */
.nav-logo{display:flex;align-items:center;gap:10px;flex:none;margin-right:6px}
.nav-logo img{width:auto;flex:none}
.nav-logo .logo-mark{height:34px}
.nav-logo .logo-word{height:11.3px}
.nav-links{display:flex;gap:4px;margin-left:18px}
.nav-links a{
  padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  color:var(--muted);transition:background .16s,color .16s;
}
.nav-links a:hover{background:var(--teal-50);color:var(--teal-700)}
.nav-links a[aria-current="page"]{color:var(--ink);background:#f1f2ec}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.nav-toggle{
  display:none;margin-left:auto;width:40px;height:38px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);cursor:pointer;
  align-items:center;justify-content:center;gap:4px;flex-direction:column;
}
.nav-toggle i{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px}
.nav-drawer{
  display:none;width:min(1180px,calc(100% - 44px));margin:8px auto 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:10px;
}
.nav-drawer.open{display:block}
.nav-drawer a{display:block;padding:11px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav-drawer a:hover{background:var(--canvas)}
.nav-drawer .drawer-actions{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.nav-drawer .btn{width:100%;justify-content:center}

/* -------------------------------------------------------------------------
   06  Buttons, pills, chips
   ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:14px;font-weight:500;letter-spacing:-.005em;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 1px 2px rgba(17,95,101,.3)}
.btn-primary:hover{background:var(--teal-600)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--navy)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--canvas);border-color:var(--faint)}
.btn-quiet{background:transparent;color:var(--muted)}
.btn-quiet:hover{color:var(--ink);background:#f1f2ec}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#f0f2ee}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:var(--r)}
.btn .arr{font-size:13px;transition:transform .16s}
.btn:hover .arr{transform:translateX(2px)}

/* small status / label pills */
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border-radius:var(--r-pill);font-size:12px;font-weight:500;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.pill-teal{background:var(--teal-50);border-color:#c5e3e3;color:var(--teal-700)}
.pill-mint{background:var(--mint);border-color:#aedad1;color:#0f5f58}
.pill-signal{background:var(--signal-50);border-color:#eccfb2;color:#94521c}
.pill-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#eaf4f1}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot-live{background:#34a67f;box-shadow:0 0 0 3px rgba(52,166,127,.18)}

/* selectable chips (hero tabs, try-it row) */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;
  transition:border-color .16s,color .16s,background .16s,box-shadow .16s;
}
.chip:hover{border-color:var(--teal);color:var(--teal-700)}
.chip[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.chip-soft{border-radius:var(--r-pill);padding:7px 13px 7px 11px;font-size:12.5px}
.chip-soft .play{
  width:15px;height:15px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);
  display:grid;place-items:center;flex:none;transition:background .16s,color .16s;
}
.chip-soft:hover .play{background:var(--teal);color:#fff}
.chip-label{font-size:13px;color:var(--faint);padding-right:4px}

/* product marks inside the hero category chips — the colour mark on the
   resting chip, the white mark once the chip is selected and goes dark */
.chip-ic{height:15px;width:auto;flex:none;display:block}
.chip-ic-on{display:none}
.chip[aria-selected="true"] .chip-ic{display:none}
.chip[aria-selected="true"] .chip-ic-on{display:block}

/* -------------------------------------------------------------------------
   07  Headings & highlight boxes
   ---------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(40px,5.6vw,64px);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.9vw,46px);line-height:1.06}
h3{font-size:22px;line-height:1.24;letter-spacing:-.022em}
h4{font-size:16px;line-height:1.3;letter-spacing:-.015em}
p{margin:0}
.lede{font-size:18.5px;line-height:1.55;color:var(--muted)}
.lede-sm{font-size:16px;color:var(--muted)}

/* the tinted "marker" box around a word inside a heading */
.hl{
  display:inline-block;background:var(--mint);color:var(--teal-700);
  border-radius:var(--r-sm);padding:0 .22em;margin:0 -.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hl-navy{background:#dde7ee;color:var(--navy)}
.hl-sand{background:var(--signal-50);color:#94521c}
.on-dark .hl{background:rgba(201,233,226,.2);color:#bfe9df}

/* -------------------------------------------------------------------------
   08  Hero + prompt builder
   ---------------------------------------------------------------------- */
.hero{padding:88px 0 60px;text-align:center}
.hero h1{max-width:900px;margin-inline:auto}
.hero .lede{max-width:600px;margin:20px auto 0}
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}

.builder{
  max-width:760px;margin:30px auto 0;text-align:left;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
}
.builder-body{padding:22px 22px 0}
.builder-prompt{
  min-height:82px;font-size:17.5px;line-height:1.5;color:var(--ink);
  border:0;outline:0;background:transparent;width:100%;resize:none;font-family:inherit;
}
.builder-prompt::placeholder{color:var(--faint)}
.builder-foot{
  display:flex;align-items:center;gap:12px;padding:12px 16px 14px 20px;
  border-top:1px solid var(--line-soft);
}
.builder-tools{display:flex;gap:16px;margin-right:auto;color:var(--faint);font-size:12.5px;flex-wrap:wrap}
.builder-tools span{display:inline-flex;align-items:center;gap:6px;cursor:default}

/* Build-now flow — the four stages of an application, running left to right
   under the prompt. The lit stage advances on a 6s loop; JS only adds
   .is-on, so with JS off every stage simply reads in its resting state. */
.buildflow{gap:5px;align-items:center;row-gap:6px;font-size:12px}
.buildflow .bf-label{font-weight:600;color:var(--ink);letter-spacing:-.01em;padding-right:2px;white-space:nowrap}
.buildflow .bf-step{
  gap:6px;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;
  border:1px solid transparent;color:var(--muted);
  transition:color .3s,background .3s,border-color .3s;
}
.buildflow .bf-dot{
  width:6px;height:6px;border-radius:50%;flex:none;background:var(--line-strong);
  transition:background .3s,box-shadow .3s,transform .3s;
}
.buildflow .bf-arrow{color:var(--line-strong);font-size:11px;margin:0 -1px}
.buildflow .bf-step.is-on{
  color:var(--teal-700);background:var(--teal-50);border-color:var(--mint);
}
.buildflow .bf-step.is-on .bf-dot{background:var(--teal);box-shadow:0 0 0 3px rgba(29,150,158,.16);transform:scale(1.1)}
.buildflow .bf-last.is-on{color:#fff;background:var(--ink);border-color:var(--ink)}
.buildflow .bf-last.is-on .bf-dot{background:var(--mint);box-shadow:0 0 0 3px rgba(201,233,226,.25)}
/* The four stages plus the button never fit on one line at any width the
   builder is used at, so the flow always takes a row of its own and the
   button sits under it, right-aligned. */
.builder-foot{flex-wrap:wrap}
.buildflow{flex:1 0 100%;margin-right:0;margin-bottom:4px}
.builder-foot > .btn{margin-left:auto}
@media (max-width:560px){
  .buildflow .bf-arrow{display:none}
  .buildflow{gap:5px}
}
@media (prefers-reduced-motion:reduce){
  .buildflow .bf-step,.buildflow .bf-dot{transition:none}
}
.builder-caret{display:inline-block;width:2px;height:1.05em;background:var(--teal);vertical-align:-.16em;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-trust{margin-top:34px;font-size:13px;color:var(--faint)}

/* compact page hero for interior pages */
.page-hero{padding:74px 0 46px;max-width:840px}
.page-hero h1{font-size:clamp(36px,4.6vw,54px)}
.page-hero .lede{margin-top:18px;max-width:620px}
.page-hero.center{margin-inline:auto;text-align:center}
.page-hero.center .lede{margin-inline:auto}

/* -------------------------------------------------------------------------
   09  Case-study carousel
   ---------------------------------------------------------------------- */
.rail{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 20px;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.case-card{
  position:relative;flex:0 0 clamp(280px,32%,362px);scroll-snap-align:start;
  aspect-ratio:4/4.5;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-md);color:#fff;display:flex;flex-direction:column;
  justify-content:flex-end;padding:22px;isolation:isolate;
}
/* stand-in "photography": layered brand gradients, no stock images needed */
.case-card::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(150deg,var(--c1,#12626b),var(--c2,#0b1e2c));
}
.case-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    linear-gradient(to top, rgba(4,16,22,.82) 6%, rgba(4,16,22,.16) 52%, transparent 78%);
}
.case-card .pill{position:absolute;top:18px;left:18px}
.case-card h3{color:#fff;font-size:26px;margin-bottom:16px}
.case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case-metrics b{display:block;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.case-metrics span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:3px}
/* -------------------------------------------------------------------------
   09b  Industry cards  (home, "Who we work with")
   The case-study card shape and the same horizontal rail, carrying all
   sixteen industries. Each card is a blueprint: one big white line drawing,
   no container and no border, stroked hairline-thin over a faint grid, with
   the name and descriptor under it. Nothing here sets the gradient — that is
   the --c1 / --c2 pair carried inline, same as .case-card.
   ---------------------------------------------------------------------- */
.ind-card{justify-content:flex-end}
/* blueprint grid instead of the diagonal hatch the case cards use */
.ind-card::after{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 34px),
    linear-gradient(to top, rgba(4,16,22,.88) 8%, rgba(4,16,22,.28) 46%, transparent 72%);
}
.ind-card .pill{z-index:1}
.ind-art{
  position:absolute;left:0;right:0;top:15%;
  display:grid;place-items:center;pointer-events:none;
  color:#fff;opacity:.92;
}
.ind-art svg{
  width:min(62%,190px);height:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.22));
}
.ind-card h3{position:relative;font-size:20px;line-height:1.24;margin:0 0 7px}
.ind-card p{position:relative;margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.78)}
@media (max-width:560px){
  .ind-art svg{width:min(58%,150px)}
  .ind-card h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.ind-card{transition:none}}

.rail-foot{display:flex;flex-direction:column;align-items:center;gap:16px}
.rail-dots{display:flex;gap:6px}
.rail-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.rail-dots i.on{width:22px;border-radius:var(--r-pill);background:var(--teal)}
.text-link{
  font-size:14px;font-weight:500;color:var(--teal-700);
  border-bottom:1px solid #b6d9d8;padding-bottom:2px;
}
.text-link:hover{border-color:var(--teal)}

/* -------------------------------------------------------------------------
   10  Split feature cards — visual panel + copy panel
   ---------------------------------------------------------------------- */
.splits{display:grid;gap:22px}
.split{
  display:grid;grid-template-columns:1.06fr .94fr;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);
}
.split-visual{
  position:relative;min-height:330px;padding:28px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--v1,#12626b),var(--v2,#0b1e2c));
}
.split-visual.v-teal{--v1:#1d969e;--v2:#0d4a55}
.split-visual.v-navy{--v1:#123950;--v2:#071722}
.split-visual.v-mint{--v1:#d8ede6;--v2:#aed6cc}
.split-visual.v-sand{--v1:#e8d2b8;--v2:#c9722a}
.split-visual::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
}
.split-copy{padding:44px 44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.split-copy h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em}
.split-copy p{margin-top:14px;color:var(--muted);max-width:420px}
.split-copy .text-link,.split-copy .btn{margin-top:22px;align-self:flex-start}
.split.reverse .split-visual{order:2}
.split.reverse .split-copy{order:1;padding:44px 40px 44px 44px}

/* -------------------------------------------------------------------------
   11  Mock UI widgets (all dummy data)
   ---------------------------------------------------------------------- */
.mock{
  position:relative;width:100%;max-width:400px;background:var(--surface);
  border-radius:var(--r-md);box-shadow:0 18px 50px rgba(4,16,22,.28);
  overflow:hidden;font-size:12px;color:var(--ink-soft);
}
.mock-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;font-weight:500;color:var(--muted);background:#fbfbf9;
}
.mock-bar strong{font-weight:600;color:var(--ink);font-size:12.5px}
.mock-body{padding:13px}

.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:#f6f8f7;border-radius:var(--r-sm);padding:10px}
.kpi small{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kpi b{display:block;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em;margin-top:4px;color:var(--ink)}
.kpi em{font-style:normal;font-size:10px;color:#2f8f6c}
.kpi em.down{color:var(--signal)}

.spark{display:flex;align-items:flex-end;gap:5px;height:66px;margin-top:12px}
.spark i{flex:1;background:linear-gradient(to top,var(--teal),#7fc9cb);border-radius:3px 3px 0 0;display:block}
.axis{display:flex;justify-content:space-between;font-size:9px;color:var(--faint);margin-top:6px}

.rows{display:grid;gap:7px;margin-top:12px}
.row-line{display:flex;align-items:center;gap:9px;padding:8px 9px;background:#f7f9f8;border-radius:var(--r-sm)}
.row-line .av{width:21px;height:21px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;flex:none}
.row-line .av.n2{background:var(--navy)}
.row-line .av.n3{background:var(--signal)}
.row-line span{font-size:11.5px}
.row-line .tag{margin-left:auto;font-size:10px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}

.bars{display:grid;gap:8px;margin-top:4px}
.bar{display:grid;grid-template-columns:76px 1fr 40px;align-items:center;gap:9px;font-size:11px}
.bar .track{height:7px;border-radius:5px;background:#e9eeec;overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:5px;background:var(--teal)}
.bar .fill.alt{background:var(--navy)}
.bar .fill.warn{background:var(--signal)}
.bar b{font-family:var(--mono);font-size:10.5px;font-weight:500;text-align:right;color:var(--muted)}

/* radar / map widget for OpsCon */
.radar-wrap{position:relative;width:100%;max-width:400px;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:radial-gradient(circle at 48% 52%,rgba(93,206,178,.3),transparent 46%),linear-gradient(150deg,#0e3d3c,#071722)}
.radar-wrap::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;
}
.ring{position:absolute;left:48%;top:52%;transform:translate(-50%,-50%);border:1px solid rgba(146,226,205,.3);border-radius:50%}
.ring.r1{width:34%;aspect-ratio:1}
.ring.r2{width:62%;aspect-ratio:1}
.ring.r3{width:92%;aspect-ratio:1}
.ping{position:absolute;left:48%;top:52%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#5fd7b4;box-shadow:0 0 0 0 rgba(95,215,180,.5);animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,215,180,.45)}70%{box-shadow:0 0 0 36px rgba(95,215,180,0)}100%{box-shadow:0 0 0 0 rgba(95,215,180,0)}}
.map-tag{
  position:absolute;background:rgba(255,255,255,.95);color:var(--ink);
  border-radius:var(--r-sm);padding:7px 10px;font-size:10px;line-height:1.25;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.map-tag b{display:block;font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.map-tag.t1{left:14px;top:14px}
.map-tag.t2{right:14px;top:22px}
.map-tag.t3{right:18px;bottom:16px}
.map-tag.alert{background:var(--signal);color:#fff}

/* big number panel */
.bignum{text-align:center;color:#fff;position:relative}
.bignum small{display:block;font-size:12px;color:rgba(255,255,255,.66);letter-spacing:.04em}
.bignum b{display:block;font-family:var(--mono);font-size:clamp(30px,4.4vw,46px);font-weight:500;letter-spacing:-.02em;margin-top:6px}
.bignum .line{width:min(300px,80%);height:64px;margin:0 auto 18px;position:relative}
.bignum .line svg{width:100%;height:100%;overflow:visible}

/* chat / agent transcript */
.chatmock{width:100%;max-width:372px;display:grid;gap:9px}
.bubble{background:var(--surface);border-radius:var(--r-md);padding:11px 13px;font-size:12.5px;box-shadow:0 8px 26px rgba(4,16,22,.2)}
.bubble.me{background:var(--ink);color:#fff;margin-left:38px}
.bubble.sys{display:flex;align-items:center;gap:8px;color:var(--teal-700);background:var(--mint);box-shadow:none;font-size:11.5px}
.bubble.sys .dot{background:var(--teal)}
.bubble strong{display:block;font-size:11px;color:var(--faint);font-weight:500;margin-bottom:4px}
.bubble.me strong{color:rgba(255,255,255,.6)}

/* -------------------------------------------------------------------------
   12  Marquees — scrolling capability tags
   ---------------------------------------------------------------------- */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee + .marquee{margin-top:10px}
.marquee-track{display:flex;gap:10px;width:max-content;animation:slide 44s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee.fast .marquee-track{animation-duration:32s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tag{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 16px 9px 13px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:13.5px;font-weight:500;color:var(--ink-soft);box-shadow:var(--sh-sm);
}
/* Flat line icons: one stroke weight, inherit colour from the row tone. */
.tag .ico{flex:none;color:var(--teal);opacity:.9}
.tag.n2 .ico{color:var(--navy)}
.tag.n3 .ico{color:var(--signal)}

/* -------------------------------------------------------------------------
   13  Grids, lists, stats
   ---------------------------------------------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.card-hover:hover{border-color:var(--line-strong);box-shadow:var(--sh-md);transform:translateY(-2px)}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:14.5px}
.card .eyebrow{margin-bottom:18px}
.card-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-700);font-size:17px;line-height:1;margin-bottom:18px;
}
.card-icon.navy{background:#e0e7ec;color:var(--navy)}
.card-icon.sand{background:var(--signal-50);color:#94521c}
.card-dark{background:var(--ink);border-color:var(--ink);color:#e7efec}
.card-dark h3{color:#fff}
.card-dark p{color:rgba(231,239,236,.72)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;position:relative;
}
.step b{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.06em}
.step h3{font-size:20px;margin:26px 0 8px}
.step p{color:var(--muted);font-size:14.5px}
.step.on{background:var(--mint);border-color:#a9d7ce}
.step.on b{color:var(--teal-700)}

/* linked list rows */
.list-rows{border-top:1px solid var(--line)}
.list-rows a,.list-rows > div{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 6px;border-bottom:1px solid var(--line);
  transition:padding-left .18s,background .18s;
}
.list-rows a:hover{padding-left:14px;background:linear-gradient(90deg,rgba(226,242,242,.7),transparent)}
.list-rows .t{display:block;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.015em}
.list-rows .d{display:block;font-size:14px;color:var(--muted);max-width:560px;margin-top:4px}
.list-rows .arr{color:var(--teal);font-size:15px;flex:none}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.stat{padding:28px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(28px,3.2vw,38px);font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1}
.stat span{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* "Our impact" — the same stat grid with an explanation under each figure,
   a fill bar, and counters that run once when the block scrolls into view.
   The JS writes the number; the markup ships with 0 so nothing is blank if
   it never runs, and reduced motion jumps straight to the final value. */
.impact-stats{align-items:stretch}
.impact-stats .stat{display:flex;flex-direction:column;padding:30px 24px 26px}
.impact-stats .stat-num{
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--ink) 30%,var(--teal-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.impact-stats .stat-label{font-size:13.5px;font-weight:500;color:var(--ink);margin-top:10px;line-height:1.4}
.impact-stats .stat-note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.55;margin-bottom:16px}
.impact-stats .stat-bar{
  display:block;height:3px;border-radius:2px;background:var(--line);
  overflow:hidden;margin-top:auto;
}
.impact-stats .stat-bar b{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--mint));
  transition:width 1.25s cubic-bezier(.22,.7,.3,1) .12s;
}
.impact-stats.is-counted .stat-bar b{width:var(--w,70%)}
@media (max-width:1040px){.impact-stats{grid-template-columns:repeat(2,1fr)}
  .impact-stats .stat:nth-child(2n){border-right:0}
  .impact-stats .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:640px){.impact-stats{grid-template-columns:1fr}
  .impact-stats .stat{border-right:0;border-bottom:1px solid var(--line)}
  .impact-stats .stat:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){.impact-stats .stat-bar b{transition:none}}

/* split "two-up" copy columns inside a section */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.cols-2 > div{padding:30px 40px 30px 0;border-bottom:1px solid var(--line)}
.cols-2 > div:nth-child(odd){border-right:1px solid var(--line)}
.cols-2 > div:nth-child(even){padding-left:40px;padding-right:0}
.cols-2 h3{font-size:21px;margin:14px 0 8px}
.cols-2 p{color:var(--muted);font-size:14.5px;max-width:430px}

/* logo strip */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.logo-slot{
  padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:13px;font-weight:500;color:var(--faint);letter-spacing:-.01em;
}

/* -------------------------------------------------------------------------
   13b  Journey timeline — a continuous axis with entries alternating above
        and below it, scrolling horizontally, newest first
   ---------------------------------------------------------------------- */
.tline{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  /* bleed to the viewport edge so the axis reads as continuing off-screen */
  margin-right:calc((100vw - min(1180px,100%)) / -2);
  padding-right:24px;
}
.tline::-webkit-scrollbar{display:none}
.tline:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:var(--r)}

.tline-track{
  display:flex;align-items:center;width:max-content;position:relative;height:470px;
  /* an <ol> carries a 40px inline-start padding by default — reset all of it
     or the first marker sits off the axis origin */
  list-style:none;margin:0;padding:0;
}
/* the axis itself */
.tline-track::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);
}

/* year marker — sits on the axis, its background masking the line behind it */
.tline-year{
  flex:none;width:124px;position:relative;z-index:3;text-align:center;
  scroll-snap-align:start;
}
.tline-year b{
  display:block;font-family:var(--display);font-size:27px;font-weight:600;
  letter-spacing:-.04em;color:var(--ink);line-height:1.1;
  background:var(--canvas);padding:6px 10px 2px;
}
.tline-year span{
  display:block;font-size:9.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);line-height:1.35;
  background:var(--canvas);padding:0 8px 6px;
}
.tline-year.is-now b{color:var(--teal-700)}
.tline-year.is-now span{color:var(--teal)}

/* one entry = one node on the axis with a card above or below it */
.tline-item{flex:none;width:252px;position:relative;height:100%}
.tline-node{
  position:absolute;top:50%;left:14px;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);
  z-index:2;transition:border-color .18s,box-shadow .18s;
}
.tline-item:hover .tline-node{border-color:var(--teal);box-shadow:0 0 0 4px rgba(29,150,158,.12)}

.tline-card{
  position:absolute;left:14px;width:226px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px;transition:border-color .18s,box-shadow .18s,transform .18s;
}
.tline-item:hover .tline-card{border-color:var(--line-strong);box-shadow:var(--sh)}
/* the stem joining card to node */
.tline-card::after{
  content:"";position:absolute;left:4px;width:1px;height:20px;background:var(--line-strong);
}
.tline-item.up .tline-card{bottom:calc(50% + 24px)}
.tline-item.up .tline-card::after{top:100%}
.tline-item.up:hover .tline-card{transform:translateY(-2px)}
.tline-item.down .tline-card{top:calc(50% + 24px)}
.tline-item.down .tline-card::after{bottom:100%}
.tline-item.down:hover .tline-card{transform:translateY(2px)}

.tline-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.tline-month{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
.tline-card h3{font-size:15px;line-height:1.3;letter-spacing:-.02em}
.tline-card p{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* carousel controls, parked in the section header */
.rail-ctrl{display:flex;gap:8px;align-self:end}
.rail-ctrl button{
  width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;transition:background .16s,border-color .16s,opacity .16s;
}
.rail-ctrl button:hover:not(:disabled){background:var(--canvas);border-color:var(--faint)}
.rail-ctrl button:disabled{opacity:.35;cursor:default}
.section-head.with-ctrl{grid-template-columns:1.15fr .85fr auto}

@media (max-width:900px){
  .tline{margin-right:-16px;padding-right:16px}
  .tline-track{height:500px}
  .tline-year{width:96px}
  .tline-year b{font-size:22px}
  .tline-item{width:224px}
  .tline-card{width:200px}
  .section-head.with-ctrl{grid-template-columns:1fr}
  .rail-ctrl{align-self:start}
}
@media (max-width:640px){
  .tline-track{height:520px}
  .tline-item{width:208px}
  .tline-card{width:186px}
}

/* -------------------------------------------------------------------------
   14  Testimonials
   ---------------------------------------------------------------------- */
.quotes{columns:3;column-gap:18px}
.quote{
  break-inside:avoid;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;margin-bottom:18px;
}
.quote p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.quote footer{display:flex;align-items:center;gap:10px;margin-top:18px}
.quote .av{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.quote .av.n2{background:var(--navy)}
.quote .av.n3{background:var(--signal)}
.quote .who b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.quote .who span{display:block;font-size:12px;color:var(--faint)}

/* -------------------------------------------------------------------------
   15  FAQ
   ---------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 6px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;
  font-size:16.5px;font-weight:500;color:var(--ink);letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--teal);font-weight:400;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 44px 22px 6px;color:var(--muted);font-size:15px}

/* -------------------------------------------------------------------------
   16  Forms
   ---------------------------------------------------------------------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);font-size:14.5px;
  transition:border-color .16s,box-shadow .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,150,158,.13);
}
.field textarea{min-height:120px;resize:vertical}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--faint)}

/* -------------------------------------------------------------------------
   17  Pricing — product switch, plan cards, comparison tables, AI credits
   ---------------------------------------------------------------------- */

/* segmented control, used for the product switch and the billing period */
.seg{
  display:inline-flex;gap:4px;padding:4px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);
}
.seg button{
  border:0;background:none;cursor:pointer;border-radius:var(--r-pill);
  padding:8px 18px;font-size:13.5px;font-weight:500;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;
  transition:background .16s,color .16s;white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--ink);color:#fff}
.seg-lg button{padding:10px 22px;font-size:14.5px}
.seg .tagline{font-size:11px;opacity:.75;font-weight:400}
.seg button[aria-selected="true"] .tagline{color:#9fd8cd;opacity:1}
/* product mark inside a platform tab: colour at rest, white once the tab
   goes dark. Same two-image swap as the hero chips. */
.seg-ic{height:17px;width:auto;flex:none;display:block}
.seg-ic-on{display:none}
.seg button[aria-selected="true"] .seg-ic{display:none}
.seg button[aria-selected="true"] .seg-ic-on{display:block}

.price-controls{
  display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  padding:8px 0 4px;
}
.ctrl-group{display:flex;align-items:center;gap:12px}
.ctrl-label{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* sites stepper */
.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);padding:3px}
.stepper button{
  width:32px;height:32px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:17px;line-height:1;color:var(--muted);display:grid;place-items:center;
  transition:background .16s,color .16s;
}
.stepper button:hover:not(:disabled){background:var(--canvas);color:var(--ink)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper input{
  width:52px;border:0;background:none;text-align:center;font-family:var(--mono);
  font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:0}
.hint{font-size:12.5px;color:var(--faint);text-align:center;margin-top:10px}

/* plan cards */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;display:flex;flex-direction:column;
}
.plan.featured{border-color:var(--teal);box-shadow:0 18px 46px rgba(29,150,158,.16);position:relative}
.plan.featured::before{
  content:"Most popular";position:absolute;top:-11px;left:28px;
  background:var(--teal);color:#fff;font-size:11px;font-weight:500;
  padding:4px 11px;border-radius:var(--r-pill);
}
.plan h3{font-size:19px}
.plan .desc{font-size:13px;color:var(--muted);margin-top:6px;min-height:36px}
.plan .amt{display:flex;align-items:baseline;gap:3px;margin:20px 0 2px}
.plan .amt .cur{font-size:19px;font-weight:500;color:var(--ink)}
.plan .amt b{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1}
.plan .amt .per{font-size:13px;color:var(--faint);margin-left:5px}
.plan .total{font-size:12.5px;color:var(--teal-700);min-height:18px}
.plan .btn{margin:20px 0;justify-content:center}
.plan ul{list-style:none;margin:0;padding:18px 0 0;display:grid;gap:9px;border-top:1px solid var(--line-soft)}
.plan li{display:flex;gap:9px;font-size:13px;color:var(--ink-soft);line-height:1.45}
.plan li::before{content:"\2713";color:var(--teal);font-size:11.5px;line-height:1.6;flex:none}
.plan li.agents{margin-top:4px;padding-top:12px;border-top:1px dashed var(--line);color:var(--teal-700);font-weight:500}
.plan li.agents::before{content:"\2726";color:var(--teal)}
.plan .limits{margin-top:14px;font-size:12px;color:var(--faint);text-align:center}
.plan .limits a{border-bottom:1px solid var(--line-strong)}

/* comparison tables */
.ctable{border-top:1px solid var(--line)}
.ctable-row{
  display:grid;grid-template-columns:2fr repeat(3,1fr);gap:20px;
  padding:16px 6px;border-bottom:1px solid var(--line);align-items:start;font-size:13.5px;
}
.ctable-row.head{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;align-items:center;padding:12px 6px;
}
.ctable-row.head .v{color:var(--ink)}
.ctable .lbl{color:var(--ink);font-weight:500}
.ctable .lbl small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45;max-width:460px}
.ctable .v{color:var(--ink-soft);font-size:13px;line-height:1.4}
.ctable .v.no{color:var(--faint)}
.ctable .v.yes{color:var(--teal-700);font-weight:500}
.ctable .v .mark{margin-right:5px}

/* AI credits */
.agent-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.agent-item{display:flex;gap:12px;padding:15px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.agent-item b{display:block;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.agent-item p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:4px}
.agent-ico{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--teal-50);color:var(--teal-700);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;
}
.agent-ico.n2{background:#e0e7ec;color:var(--navy)}
.agent-ico.n3{background:var(--signal-50);color:#94521c}

.allow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.allow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.allow.featured{border-color:var(--teal);box-shadow:0 14px 36px rgba(29,150,158,.13)}
.allow h4{font-size:17px}
.allow .amt{display:flex;align-items:baseline;gap:3px;margin:14px 0 2px}
.allow .amt b{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1}
.allow .amt .cur{font-size:16px;font-weight:500;color:var(--ink)}
.allow .amt .per{font-size:12.5px;color:var(--faint);margin-left:4px}
.allow .credits{font-family:var(--mono);font-size:13px;color:var(--teal-700);margin-top:6px}
.allow dl{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);display:grid;gap:11px}
.allow dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.allow dd{margin:3px 0 0;font-size:13px;color:var(--ink-soft);line-height:1.45}

.buys{border-top:1px solid var(--line)}
.buys-row{
  display:grid;grid-template-columns:110px 2fr 150px 130px;gap:18px;
  padding:14px 6px;border-bottom:1px solid var(--line);align-items:start;
}
.buys-row.head{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:12px 6px}
.buys .agent{font-size:13px;font-weight:500;color:var(--ink)}
.buys .act{font-size:13.5px;color:var(--ink);font-weight:500}
.buys .act small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;max-width:440px}
.buys .cr{font-family:var(--mono);font-size:13px;color:var(--teal-700)}
.buys .usd{font-family:var(--mono);font-size:13px;color:var(--muted)}

.price-note{
  font-size:13px;color:var(--muted);text-align:center;max-width:760px;
  margin:26px auto 0;line-height:1.6;
}
.price-note a{color:var(--teal-700);border-bottom:1px solid #b6d9d8}

[data-product]{display:none}
[data-product].on{display:block}

@media (max-width:900px){
  .price-grid,.allow-grid,.agent-list{grid-template-columns:1fr}
  .price-controls{gap:18px;flex-direction:column;align-items:stretch}
  .ctrl-group{justify-content:space-between}
  .seg{width:100%;justify-content:center}
  .ctable-row{grid-template-columns:1fr;gap:8px;padding:16px 6px}
  .ctable-row.head{display:none}
  .ctable .v::before{content:attr(data-l) " · ";color:var(--faint);font-weight:500}
  .buys-row{grid-template-columns:1fr;gap:6px}
  .buys-row.head{display:none}
  .buys .cr::before{content:"Credits · ";color:var(--faint)}
  .buys .usd::before{content:"About · ";color:var(--faint)}
  .buys .agent{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}
}

/* -------------------------------------------------------------------------
   18  CTA band
   ---------------------------------------------------------------------- */
.cta-band{
  background:linear-gradient(180deg,var(--canvas) 0%,var(--tint) 45%,var(--tint-deep) 100%);
  border-top:1px solid var(--line);padding:92px 0 96px;text-align:center;
}
.cta-band h2{max-width:760px;margin-inline:auto}
.cta-band .lede{max-width:560px;margin:18px auto 0}
.cta-dark{
  background:var(--ink);border-radius:var(--r-xl);color:#fff;padding:52px;
  display:flex;align-items:end;justify-content:space-between;gap:40px;text-align:left;
}
.cta-dark h2{color:#fff;max-width:640px}
.cta-dark .eyebrow{color:#8fd8cd}
.cta-dark p{color:rgba(255,255,255,.7);margin-top:14px;max-width:520px}

/* -------------------------------------------------------------------------
   18b  Modals — shared shell, then the video and auth variants
   ---------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.modal.is-open{display:flex}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(8,30,34,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal-panel{
  position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);
  background:var(--surface);border-radius:var(--r-lg);overflow:auto;
  box-shadow:0 40px 100px rgba(4,16,22,.45);
  display:flex;flex-direction:column;
  animation:modal-in .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.modal-head{
  display:flex;align-items:flex-start;gap:14px;padding:18px 16px 16px 22px;
  border-bottom:1px solid var(--line-soft);
}
.modal-head .eyebrow{margin:0}
.modal-head h3{font-size:18px;margin-top:4px}
.modal-close{
  margin-left:auto;width:36px;height:36px;flex:none;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;transition:background .16s,color .16s;
}
.modal-close:hover{background:var(--canvas);color:var(--ink)}
.modal-foot{
  display:flex;align-items:center;gap:16px;padding:16px 22px;
  border-top:1px solid var(--line-soft);
}
.modal-foot p{font-size:13.5px;color:var(--muted);margin:0}
.modal-foot .btn{margin-left:auto;flex:none}
body.modal-lock{overflow:hidden}

/* --- video variant ---------------------------------------------------- */
.vmodal-stage{background:var(--canvas);position:relative;aspect-ratio:1200/750;flex:none}
.vmodal-stage video{width:100%;height:100%;display:block;object-fit:contain;background:var(--canvas)}
.vmodal-timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(12,42,48,.08)}
.vmodal-timer i{display:block;height:100%;width:0;background:var(--teal)}

/* --- auth variant ----------------------------------------------------- */
.amodal .modal-panel{width:min(560px,100%)}
.auth-body{padding:20px 22px 22px}
.auth-lede{margin:0 0 14px;font-size:14px;color:var(--muted);padding:0;float:none}

/* Launch state: no providers to sign in with yet, so the modal shows the two
   lockups with the same [data-countdown] component the home page uses, and one
   email field to hold a place. One clock in main.js drives every countdown on
   the page, modal ones included. */
.auth-launch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.auth-plat{
  display:flex;flex-direction:column;gap:9px;
  padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
.auth-plat:first-child{background:linear-gradient(170deg,var(--teal-50),var(--surface) 62%);border-color:#bfe0da}
.auth-plat:last-child{background:linear-gradient(170deg,#e8edf1,var(--surface) 62%);border-color:#c2d0d8}
.auth-logo{display:block;height:34px;width:auto;max-width:100%;align-self:flex-start}
.auth-plat-desc{font-size:11.5px;line-height:1.45;color:var(--muted);min-height:2.9em}
.auth-plat .countdown{margin-top:auto}
.auth-plat .cd-cell{min-width:34px}
.auth-plat .cd-num{height:30px;font-size:14px}
.auth-plat .cd-sep{height:30px}

.auth-notify{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.auth-notify input{
  flex:1 1 200px;min-width:0;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);
}
.auth-notify input::placeholder{color:var(--faint)}
.auth-notify input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.auth-notify .btn{flex:0 0 auto}
.auth-fine{margin:10px 0 0;font-size:12px;color:var(--faint);text-align:center}
.auth-fine.is-ok{color:var(--teal-700)}

/* visually hidden, still read out */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.auth-foot{flex-wrap:wrap;gap:8px 16px}
.auth-foot a{color:var(--teal-700);border-bottom:1px solid #b6d9d8;padding-bottom:1px}

@media (max-width:640px){
  .modal{padding:14px}
  .modal-head{padding:14px 12px 12px 16px}
  .modal-head h3{font-size:15.5px}
  .modal-foot{padding:14px 16px;flex-wrap:wrap;gap:12px}
  .modal-foot .btn{margin-left:0;width:100%;justify-content:center}
  .auth-body{padding:16px}
  .auth-lede{font-size:13px}
  .auth-launch{grid-template-columns:1fr}
  .auth-plat-desc{min-height:0}
  .auth-notify .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .modal-panel{animation:none}
}

/* -------------------------------------------------------------------------
   19  Footer
   ---------------------------------------------------------------------- */
footer.site{background:var(--tint);border-top:1px solid var(--line-strong);padding:56px 0 34px}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.foot-brand img{height:46px;margin-bottom:14px}  /* wordmark matched to the 13.5px footer links */
.foot-brand p{font-size:13.5px;color:var(--muted);max-width:270px}
.foot-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:14px}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-soft);padding:5px 0}
.foot-col a:hover{color:var(--teal-700)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-strong);
  font-size:12.5px;color:var(--faint);
}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}

/* -------------------------------------------------------------------------
   20  Responsive
   ---------------------------------------------------------------------- */
@media (max-width:1040px){
  .quotes{columns:2}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--section:74px;--r-xl:24px}
  .nav-links,.nav-actions{display:none}
  .nav-toggle{display:flex}
  .section-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .section-head p{max-width:none}
  .split,.split.reverse .split-visual,.split.reverse .split-copy{grid-template-columns:1fr;order:initial}
  .split-visual{min-height:280px;order:1}
  .split-copy,.split.reverse .split-copy{order:2;padding:32px 28px}
  .steps,.grid-3,.price-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .cols-2 > div,.cols-2 > div:nth-child(even){padding:26px 0;border-right:0;padding-left:0}
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .cta-dark{display:block;padding:34px}
  .cta-dark .btn{margin-top:26px}
  .compare-row{grid-template-columns:1fr;gap:6px}
  .compare-row.head{display:none}
  .compare-row .v::before{content:attr(data-l) " · ";color:var(--faint);font-family:var(--body)}
}
@media (max-width:640px){
  .wrap,.wrap-narrow,.nav,.nav-drawer{width:calc(100% - 32px)}
  .hero{padding:58px 0 40px}
  .quotes{columns:1}
  .case-card{flex-basis:80%}
  .builder-tools{display:none}
  .field-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0}
  .foot-top{grid-template-columns:1fr 1fr}
}

/* -------------------------------------------------------------------------
   21  Motion preferences
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .marquee-track{animation:none;transform:none}
  .builder-caret{display:none}
}

/* -------------------------------------------------------------------------
   18  Expertise stage — the low-poly brain meeting the platform sphere
   Generated by stages.py: the brain is a real Delaunay triangulation of the
   silhouette polygon, so the cell count and shape come from the build, not
   from here. Everything below is presentation only.
   ---------------------------------------------------------------------- */
.xp-stage{
  margin:26px 0 30px;overflow-x:auto;
  /* the capability icons inside the sphere key off this; without it they
     inherit no stroke colour and disappear */
  --chip-ico:#7fd0c4;
}
.xp-stage svg{display:block;width:100%;height:auto;min-width:640px}

/* the two halves sliding together, and the tint where they overlap */
.xp-lobe{animation:xp-move 7.6s ease-in-out infinite}
.xp-lobe.xp-r{animation-name:xp-move-r}
@keyframes xp-move{0%,100%{transform:translateX(-56px)}44%,76%{transform:translateX(0)}}
@keyframes xp-move-r{0%,100%{transform:translateX(56px)}44%,76%{transform:translateX(0)}}
.xp-lens{opacity:0;animation:xp-lensin 7.6s ease-in-out infinite}
@keyframes xp-lensin{0%,38%{opacity:0}52%,76%{opacity:1}90%,100%{opacity:0}}

/* the seal struck in the overlap */
.xp-seal{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:xp-sealin 7.6s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes xp-sealin{
  0%,50%{opacity:0;transform:scale(.6) rotate(-12deg)}
  61%,76%{opacity:1;transform:scale(1) rotate(0)}
  90%,100%{opacity:0;transform:scale(1) rotate(0)}}
.xp-ring{font:600 8.4px var(--display);fill:var(--teal-700)}
.xp-ticks line{stroke:var(--teal);stroke-width:1.1;opacity:.32}
.xp-side{font:600 13.5px var(--display);text-anchor:middle;letter-spacing:-.01em}
.xp-sub{font:400 11.5px var(--display);fill:var(--faint);text-anchor:middle}

/* brain cells: a third of them hover on their own staggered delays */
.xp-cell{fill:var(--f,#e4f2ed);stroke:#2b8b8f;stroke-width:.7;stroke-linejoin:round}
.xp-hov{animation:xp-hover 7.6s ease-in-out infinite}
@keyframes xp-hover{0%,54%,100%{fill:var(--f)}20%,36%{fill:#6cc4b8}}
.xp-lit{fill:#cfe9e1;stroke:#57b3b2;animation:xp-litcell 15.2s ease-in-out infinite}
@keyframes xp-litcell{
  0%{fill:#cfe9e1;stroke:#2b8b8f}
  4%,17%{fill:#1d969e;stroke:#8fe0d4}
  24%,100%{fill:#cfe9e1;stroke:#2b8b8f}}
.xp-rim{fill:none;stroke:#2b8b8f;stroke-width:1.7;stroke-linejoin:round}

/* the expertise label riding on whichever cluster is lit */
.xp-lab{opacity:0;animation:xp-labin 15.2s ease-out infinite}
.xp-lab rect{fill:var(--surface);stroke:var(--teal);stroke-width:1.3}
.xp-lab text{font:600 11.5px var(--display);fill:var(--teal-700);text-anchor:middle}
@keyframes xp-labin{
  0%{opacity:0;transform:translateY(5px)}
  5%,17%{opacity:1;transform:none}
  23%,100%{opacity:0;transform:none}}

/* sphere: circuitry etched in, capability rows riding over it */
.xp-pcb{opacity:.5}
.xp-etch-cut path,.xp-etch-cut rect{fill:none;stroke:#04131c;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;opacity:.52}
.xp-etch-lit path,.xp-etch-lit rect{fill:none;stroke:#54c8bb;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;opacity:.3}
.xp-pad-cut circle{fill:#04131c;opacity:.5}
.xp-pad-lit circle{fill:none;stroke:#54c8bb;stroke-width:1;opacity:.28}
.xp-chip-bg{fill:rgba(9,28,38,.55);stroke:rgba(255,255,255,.16);stroke-width:1}
.xp-chip-t{font:500 11.5px var(--display);fill:#e6f1ef}
.xp-row{animation:xp-slide var(--dur) linear infinite}
.xp-row[style*="--dir:1"]{animation-direction:reverse}
@keyframes xp-slide{from{transform:translateX(0)}to{transform:translateX(calc(var(--w) * -1))}}

/* -------------------------------------------------------------------------
   19  Agent line — the agents assembling a deliverable
   One 14s cycle: each agent lights, sends a pulse down its lane, and drops
   a line into the build panel; the three outputs tick off at the end.
   ---------------------------------------------------------------------- */
.ag-stage{
  display:grid;grid-template-columns:274px 68px minmax(230px,1fr) 290px;
  gap:0 16px;align-items:start;margin-top:26px;
}
.ag-col h4{
  margin:0 0 10px;height:24px;line-height:24px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
}
.ag-list,.ag-outs,.ag-rows{list-style:none;margin:0;padding:0}

/* agents */
.ag-card{
  display:flex;align-items:center;gap:10px;height:46px;margin-bottom:6px;
  padding:0 12px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
  animation:ag-wake 14s ease-in-out infinite;animation-delay:calc(var(--i) * 1.4s);
}
.ag-card:last-child{margin-bottom:0}
.ag-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--tint);color:var(--teal-700)}
.ag-txt{min-width:0;display:block;line-height:1.25}
.ag-txt b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.ag-txt span{display:block;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);margin-left:auto}
@keyframes ag-wake{
  0%,100%{border-color:var(--line);box-shadow:var(--sh-sm)}
  2%,8%{border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,150,158,.1)}
  11%{border-color:var(--line);box-shadow:var(--sh-sm)}}
.ag-card .ag-dot{animation:ag-dot 14s ease-in-out infinite;animation-delay:calc(var(--i) * 1.4s)}
@keyframes ag-dot{0%,100%{background:var(--line)}2%,8%{background:var(--teal)}11%{background:var(--line)}}

/* lanes */
.ag-flow{margin-top:34px;height:358px}
.ag-flow svg{width:100%;height:100%;display:block;overflow:visible}
.ag-lane{fill:none;stroke:var(--line);stroke-width:1.2}
.ag-pulse{
  fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:9 100;stroke-dashoffset:9;opacity:0;
  animation:ag-flow 14s linear infinite;animation-delay:calc(var(--i) * 1.4s);
}
@keyframes ag-flow{
  0%{stroke-dashoffset:9;opacity:0}
  1%{opacity:1}
  9%{stroke-dashoffset:-100;opacity:1}
  10%,100%{stroke-dashoffset:-100;opacity:0}}

/* build panel */
.ag-build{
  margin-top:34px;min-height:358px;display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:var(--navy);
  background-image:radial-gradient(120% 90% at 30% 0,#173c4e 0,#0a1c28 68%);
  padding:16px 18px 18px;
}
.ag-build-bar{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.ag-build-bar b{font-size:12.5px;font-weight:600;color:#e6f1ef;letter-spacing:-.01em}
.ag-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#7fd0c4}
.ag-live i{width:6px;height:6px;border-radius:50%;background:#5fd7b4;
  animation:blink 1.6s ease-in-out infinite}
.ag-rows{flex:1;padding-top:12px}
.ag-row{
  display:flex;align-items:flex-start;gap:9px;padding:10px 0;
  font-size:12.5px;line-height:1.35;color:#cfe0dd;opacity:0;
  animation-duration:14s;animation-timing-function:ease-out;animation-iteration-count:infinite;
}
.ag-row i{flex:none;width:6px;height:6px;border-radius:2px;background:#5fd7b4;margin-top:5px}
.ag-row:nth-child(1){animation-name:ag-row0}
.ag-row:nth-child(2){animation-name:ag-row1}
.ag-row:nth-child(3){animation-name:ag-row2}
.ag-row:nth-child(4){animation-name:ag-row3}
.ag-row:nth-child(5){animation-name:ag-row4}
.ag-row:nth-child(6){animation-name:ag-row5}
.ag-row:nth-child(7){animation-name:ag-row6}
@keyframes ag-row0{0%,4%{opacity:0;transform:translateY(7px)}8%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row1{0%,14%{opacity:0;transform:translateY(7px)}18%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row2{0%,24%{opacity:0;transform:translateY(7px)}28%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row3{0%,34%{opacity:0;transform:translateY(7px)}38%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row4{0%,44%{opacity:0;transform:translateY(7px)}48%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row5{0%,54%{opacity:0;transform:translateY(7px)}58%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ag-row6{0%,64%{opacity:0;transform:translateY(7px)}68%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.ag-progress{height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:14px}
.ag-progress i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#1d969e,#5fd7b4);animation:ag-fill 14s linear infinite}
@keyframes ag-fill{0%,4%{width:0}68%,92%{width:100%}97%,100%{width:0}}

/* outputs */
.ag-outputs{margin-top:0}
.ag-out{
  position:relative;display:flex;align-items:flex-start;gap:11px;
  padding:14px 15px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-sm);margin-bottom:12px;
}
.ag-out:last-child{margin-bottom:0}
.ag-out-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:10px;background:var(--mint);color:var(--teal-700)}
.ag-out-txt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.ag-out-txt span{display:block;font-size:11.5px;line-height:1.45;color:var(--muted)}
.ag-tick{
  position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;opacity:0;transform:scale(.5);
  animation-duration:14s;animation-timing-function:cubic-bezier(.2,.8,.3,1);
  animation-iteration-count:infinite;
}
.ag-tick svg{width:11px;height:11px}
.ag-out:nth-child(1) .ag-tick{animation-name:ag-tick0}
.ag-out:nth-child(2) .ag-tick{animation-name:ag-tick1}
.ag-out:nth-child(3) .ag-tick{animation-name:ag-tick2}
@keyframes ag-tick0{0%,70%{opacity:0;transform:scale(.5)}74%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes ag-tick1{0%,76%{opacity:0;transform:scale(.5)}80%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes ag-tick2{0%,82%{opacity:0;transform:scale(.5)}86%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}

@media (max-width:1040px){
  .ag-stage{grid-template-columns:1fr 1fr;gap:20px}
  .ag-flow{display:none}
  .ag-build,.ag-outputs{margin-top:0}
  .ag-build{min-height:0}
  .ag-agents{grid-column:1 / -1}
  .ag-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
  .ag-card{margin-bottom:0}
}
@media (max-width:680px){
  .ag-stage{grid-template-columns:1fr}
  /* The stage keeps a minimum width so the labels stay readable; on a phone
     it scrolls sideways instead of shrinking. The fade hints at that. */
  .xp-stage{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25));
            mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.25));
  }
  .xp-stage svg{min-width:600px}
}
@media (prefers-reduced-motion:reduce){
  .xp-lobe,.xp-lens,.xp-seal,.xp-hov,.xp-lit,.xp-lab,.xp-row,
  .ag-card,.ag-card .ag-dot,.ag-pulse,.ag-row,.ag-progress i,.ag-tick,.ag-live i{
    animation:none !important;
  }
  .xp-lens,.xp-seal,.xp-lab,.ag-row,.ag-tick{opacity:1 !important;transform:none !important}
  .xp-lit{fill:#1d969e;stroke:#8fe0d4}
  .ag-pulse{opacity:0 !important}
  .ag-progress i{width:100%}
}

/* What each product is used to deliver, inside its own split box. */
.use-list{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:14px}
.use-list li{padding-left:16px;border-left:2px solid var(--mint)}
.use-list .eyebrow{margin-bottom:5px}
.use-list b{display:block;font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:4px}
.use-list p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
.split-visual.v-navy ~ .split-copy .use-list li{border-left-color:#bcd3d6}

/* -------------------------------------------------------------------------
   20  Product logo + launch countdown (home, product splits)
   The logos are plain <img> tags pointing at assets/komplee-logo.png and
   assets/opscon-logo.png — the supplied lockups, trimmed and sized at 2x for
   retina. White-on-dark versions sit beside them as *-logo-white.png, and the
   icon-only marks as *-mark.png / *-mark-white.png.
   The product is the thing being sold here, so the lockup is deliberately
   large — it leads the panel rather than sitting on it as an eyebrow.
   ---------------------------------------------------------------------- */
/* .split-copy is a flex column, so a block child stretches to the full width
   unless it opts out — align-self is what keeps the logo at its own size. */
.prod-logo{display:block;align-self:flex-start;height:58px;width:auto;margin:0 0 22px;max-width:100%}
@media (max-width:760px){.prod-logo{height:46px;margin-bottom:18px}}

/* the same lockup leading a product page hero, larger still */
.hero-logo{display:block;height:72px;width:auto;max-width:100%;margin:0 auto 22px}
.hero-logo.on-dark{height:72px}
@media (max-width:760px){.hero-logo{height:54px}}

.launch-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.countdown{display:flex;flex-direction:column;gap:6px}
.cd-kicker{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);
}
.countdown.navy .cd-kicker{color:var(--navy)}
.cd-cells{display:flex;align-items:flex-start;gap:5px}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:38px}
.cd-num{
  position:relative;display:block;width:100%;height:34px;overflow:hidden;
  border-radius:9px;background:var(--tint);border:1px solid var(--mint);
  font-family:var(--mono);font-size:16px;font-weight:500;color:var(--teal-700);
  font-variant-numeric:tabular-nums;
}
.countdown.navy .cd-num{background:#e7edf0;border-color:#cbd8dd;color:var(--navy)}
/* Each digit pair lives in its own <i>. On a tick the old one rolls up and out
   while the new one rolls in from below, so only the unit that changed moves. */
.cd-num i{
  position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
}
.cd-sep{width:3px;height:34px;margin-top:0;align-self:flex-start;
  background:radial-gradient(circle,var(--line) 1.5px,transparent 1.6px) 0 11px/3px 12px repeat-y}
.cd-lbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.cd-live{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--teal-700);font-size:12.5px;font-weight:600;
}
.cd-live i{width:7px;height:7px;border-radius:50%;background:var(--teal);
  animation:blink 1.6s ease-in-out infinite}

@media (max-width:520px){
  .launch-row{gap:16px}
  .cd-cell{min-width:34px}
  .cd-num{height:31px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .cd-live i{animation:none}
}

/* -------------------------------------------------------------------------
   21  Project timeline  (services, "Scope and timelines")
   A Gantt over a 24-week scale. Every row carries two bars on the one track:
   the outline behind is the conventional duration, the solid bar in front is
   what the same scope takes with the agents doing the assembly. Both are
   positioned from --s (start) and --w (width) as percentages of the scale,
   computed in tools/build_timeline.py — never write them by hand.
   The bars grow from zero when the chart scrolls into view (.is-running,
   set by main.js), staggered by --d.
   ---------------------------------------------------------------------- */
.gantt{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-sm);overflow:hidden;
}
.gt-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px 20px;flex-wrap:wrap;
  padding:18px 22px 16px;border-bottom:1px solid var(--line-soft);
}
.gt-legend{display:flex;gap:18px;flex-wrap:wrap}
.gt-key{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.gt-key i{width:22px;height:9px;border-radius:3px;flex:none}
.gt-key .k-now{background:linear-gradient(90deg,var(--teal),#3fb9ae)}
.gt-key .k-was{border:1px dashed var(--line-strong);background:repeating-linear-gradient(115deg,rgba(12,42,48,.05) 0 3px,transparent 3px 7px)}

/* The week scale sits in the body as its own row, in the track column, so its
   percentages land in exactly the same coordinate space as the bars. */
.gt-ruler{padding-bottom:2px}
.gt-scale{position:relative;height:14px}
.gt-scale span{
  position:absolute;left:var(--s);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;
}
.gt-scale span:first-child{transform:none}
.gt-scale span:last-child{transform:translateX(-100%)}

.gt-body{position:relative;padding:14px 22px 18px}
.gt-row{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:center;padding:6px 0}
.gt-label{display:flex;flex-direction:column;gap:4px;min-width:0}
.gt-label b{font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.gt-phase{
  align-self:flex-start;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);
}
.gt-phase.p-scope{background:var(--mint);color:var(--teal-700)}
.gt-phase.p-build{background:var(--teal-50);color:var(--teal-700)}
.gt-phase.p-hand{background:#e7edf0;color:var(--navy)}
.gt-phase.p-run{background:#d6ece4;color:#1d5e4f}
/* durations shown beside the row name — only where the bars are too narrow
   to carry their own label (see the 560px block below) */
.gt-dur{
  display:none;align-items:baseline;gap:6px;font-family:var(--mono);
  font-size:10.5px;color:var(--teal-700);white-space:nowrap;flex:none;
}
.gt-dur em{font-style:normal;color:var(--faint);text-decoration:line-through}

/* the track carries the faint week grid so a bar can be read against it */
.gt-track{
  position:relative;height:30px;border-radius:7px;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px calc(100% / var(--cols,6))),
    var(--canvas);
}
.gt-was,.gt-bar{
  position:absolute;top:50%;left:var(--s);width:var(--w);
  transform:translateY(-50%);border-radius:6px;
  display:flex;align-items:center;
}
.gt-was{
  height:26px;border:1px dashed var(--line-strong);
  background:repeating-linear-gradient(115deg,rgba(12,42,48,.05) 0 3px,transparent 3px 7px);
}
.gt-was i{
  position:absolute;right:8px;font-style:normal;font-family:var(--mono);
  font-size:9.5px;color:var(--faint);white-space:nowrap;
}
.gt-bar{
  height:20px;padding:0 9px;box-shadow:0 1px 3px rgba(12,42,48,.16);
  background:linear-gradient(90deg,var(--teal),#3fb9ae);
}
.gt-bar.p-scope{background:linear-gradient(90deg,#2f7665,#5bbfa6)}
.gt-bar.p-hand{background:linear-gradient(90deg,var(--navy),#2f5f72)}
.gt-bar.p-run{background:linear-gradient(90deg,#1d5e4f,#3f9e7f)}
.gt-bar i{
  font-style:normal;font-family:var(--mono);font-size:10px;color:#fff;
  white-space:nowrap;opacity:.95;
}

/* the sweep: a playhead crossing the chart once the bars have drawn */
.gt-now{
  position:absolute;top:10px;bottom:14px;left:calc(22px + 256px);width:1.5px;
  background:linear-gradient(to bottom,transparent,var(--teal),transparent);
  opacity:0;pointer-events:none;
}

/* Resting state: the bars have no width, and .is-running (set by main.js when
   the chart scrolls into view) grows them to --w. Width rather than scaleX,
   so the duration label inside a bar is not stretched with it. */
.gantt[data-gantt] .gt-bar,
.gantt[data-gantt] .gt-was{width:0;overflow:hidden}
.gantt.is-running .gt-was{
  width:var(--w);
  transition:width .7s cubic-bezier(.22,.7,.3,1) var(--d,0ms);
}
.gantt.is-running .gt-bar{
  width:var(--w);
  transition:width .85s cubic-bezier(.22,.7,.3,1) calc(var(--d,0ms) + 220ms);
}
.gantt.is-running .gt-now{animation:gt-sweep 3.2s ease-in-out 1s 1 forwards}
@keyframes gt-sweep{
  0%{opacity:0;left:calc(22px + 256px)}
  10%{opacity:.8}
  86%{opacity:.8}
  100%{opacity:0;left:calc(100% - 22px)}
}

.gt-foot{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:16px 22px 18px;border-top:1px solid var(--line-soft);background:var(--tint);
}
.gt-total{display:flex;align-items:baseline;gap:9px;flex:none}
.gt-total-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700)}
.gt-total b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.gt-total-was{font-size:12.5px;color:var(--faint);text-decoration:line-through}
.gt-foot p{margin:0;font-size:12.5px;color:var(--muted);flex:1 1 320px}

@media (max-width:860px){
  .gt-row{grid-template-columns:1fr;gap:6px;padding:9px 0}
  .gt-label{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap}
  .gt-ruler .gt-label{display:none}
  .gt-now{display:none}
}
@media (max-width:560px){
  .gt-head,.gt-body,.gt-foot{padding-left:16px;padding-right:16px}
  /* the bars are too short here for a legible label inside them, so the
     durations move up into the row label instead */
  .gt-was i,.gt-bar i{display:none}
  .gt-dur{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .gantt[data-gantt] .gt-bar{width:var(--w)}
  .gantt[data-gantt] .gt-was{width:var(--w)}
  .gantt.is-running .gt-bar,
  .gantt.is-running .gt-was{transition:none}
  .gantt.is-running .gt-now{animation:none;opacity:0}
}

/* -------------------------------------------------------------------------
   22  Scoping picker  (services)
   Two cards, one per platform. Picking one swaps the panel for a placeholder
   confirmation — the real scoping forms are not connected yet, so the flow
   deliberately ends there rather than pretending to submit anything.
   ---------------------------------------------------------------------- */
.smodal .modal-panel{width:min(720px,100%)}
.scope-body{padding:20px 22px 22px}
.scope-pick{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
/* a class that sets display beats the UA [hidden] rule, so say it explicitly */
.scope-pick[hidden],.scope-done[hidden]{display:none}
.scope-card{
  display:flex;flex-direction:column;gap:11px;text-align:left;cursor:pointer;
  padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(170deg,var(--teal-50),var(--surface) 62%);
  font:inherit;color:var(--ink);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.scope-card.opscon{background:linear-gradient(170deg,#e8edf1,var(--surface) 62%)}
.scope-card:hover{border-color:#8fc9c0;box-shadow:var(--sh-md);transform:translateY(-2px)}
.scope-card.opscon:hover{border-color:#9db2bf}
.scope-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.scope-logo{display:block;height:32px;width:auto;max-width:100%;align-self:flex-start}
.scope-desc{font-size:12.5px;color:var(--muted);line-height:1.45}
.scope-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.scope-list li{
  position:relative;padding-left:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.4;
}
.scope-list li::before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;
  background:var(--teal);opacity:.55;
}
.scope-card.opscon .scope-list li::before{background:var(--navy)}
.scope-go{
  margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--teal-700);
  display:inline-flex;align-items:center;gap:6px;
}
.scope-card.opscon .scope-go{color:var(--navy)}
.scope-card:hover .arr{transform:translateX(3px)}

.scope-done{text-align:center;padding:26px 10px 8px;display:grid;justify-items:center;gap:10px}
.scope-tick{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--mint);color:var(--teal-700);
}
.scope-done h4{font-size:18px;letter-spacing:-.02em;margin:0}
.scope-done p{margin:0;max-width:420px;font-size:13.5px;color:var(--muted);line-height:1.55}
.scope-done .btn{margin-top:8px}

@media (max-width:640px){
  .scope-pick{grid-template-columns:1fr}
  .scope-body{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .scope-card{transition:none}
  .scope-card:hover{transform:none}
}

/* -------------------------------------------------------------------------
   23  Pricing flow  (services, "How we price")
   Two phases side by side: everything the scoping form does on its own, then
   the part a person does once you want to proceed. The divider between them
   carries the condition, so the split reads as a decision rather than a gap.
   ---------------------------------------------------------------------- */
.pflow{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.pflow-phase{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:24px 24px 26px;box-shadow:var(--sh-sm);
}
.pflow-phase.manual{background:linear-gradient(175deg,#eef2f4,var(--surface) 55%);border-color:#ccd8de}
.pflow-phase-head{padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:18px}
.pflow-phase-head h3{font-size:19px;letter-spacing:-.025em;margin:10px 0 6px}
.pflow-phase-head p{margin:0;font-size:12.5px;color:var(--faint)}
.pflow-tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.pflow-tag.auto{background:var(--mint);color:var(--teal-700)}
.pflow-tag.man{background:#dde5ea;color:var(--navy)}
.pflow-tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.pflow-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pflow-steps li{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start}
.pflow-n{
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--teal-700);
  background:var(--teal-50);border:1px solid var(--mint);border-radius:8px;
  height:26px;display:grid;place-items:center;
}
.pflow-phase.manual .pflow-n{background:#e3eaee;border-color:#c6d3da;color:var(--navy)}
.pflow-steps b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pflow-steps p{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.pflow-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pchip{
  font-size:11px;font-weight:500;padding:4px 9px;border-radius:var(--r-pill);
  background:var(--canvas);border:1px solid var(--line);color:var(--ink-soft);
}

/* the divider: a rule with the condition set into it */
.pflow-arrow{
  position:relative;display:grid;place-items:center;width:132px;flex:none;
}
.pflow-arrow::before{
  content:"";position:absolute;left:50%;top:26px;bottom:26px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent);
}
.pflow-arrow span{
  position:relative;max-width:104px;text-align:center;padding:10px 8px;
  background:var(--tint);border-radius:var(--r-sm);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;
}

.pflow-note{
  display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap;margin-top:26px;
  padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);
}
.pflow-note h3{font-size:20px;letter-spacing:-.025em;margin:6px 0 0}
.pflow-note > div{flex:0 1 340px}
.pflow-note p{margin:0;flex:1 1 360px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.pflow-note .text-link{margin-left:4px;white-space:nowrap}

@media (max-width:980px){
  .pflow{grid-template-columns:1fr}
  .pflow-arrow{width:auto;padding:16px 0}
  .pflow-arrow::before{left:26px;right:26px;top:50%;bottom:auto;width:auto;height:1px;
    background:linear-gradient(to right,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent)}
  .pflow-arrow span{max-width:none}
}
@media (max-width:560px){
  .pflow-phase{padding:20px 18px 22px}
  .pflow-note{padding:20px 18px}
}
.pflow-close{
  margin-top:auto;padding:16px 16px 15px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
}
.pflow-close b{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.pflow-close span{font-size:12.5px;line-height:1.55;color:var(--muted)}
.pflow-phase.manual{display:flex;flex-direction:column}
.pflow-phase.manual .pflow-steps{margin-bottom:22px}

/* Agent stage tabs (home) — the stage is display:grid, so the UA [hidden]
   rule loses to it; say it explicitly. The tab strip is the same .seg
   control the pricing page uses. */
.ag-tabs{display:flex;justify-content:center;margin:0 0 26px}
.ag-stage[hidden]{display:none}

/* -------------------------------------------------------------------------
   24  About page figures  ("Why we exist")
   Two drawn statistics rather than stock photography: a 100-dot matrix with
   45 lit, and a ring gauge at 45%. Both are CSS and inline SVG, so they
   re-colour with the palette and stay sharp at any size. The .figure shell
   borrows the .mock card the product visuals use.
   ---------------------------------------------------------------------- */
.figure{
  position:relative;width:100%;max-width:400px;background:var(--surface);
  border-radius:var(--r-md);box-shadow:0 18px 50px rgba(4,16,22,.28);
  overflow:hidden;font-size:12px;color:var(--ink-soft);
}
.fig-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;font-weight:500;color:var(--muted);background:#fbfbf9;
}
.fig-bar strong{color:var(--ink);font-weight:600}
.fig-body{padding:16px 15px 18px}

/* one dot per 1% of the world's population; the lit ones are the 3.6bn */
.dotgrid{
  display:grid;grid-template-columns:repeat(20,1fr);gap:4px;
}
.dotgrid i{
  display:block;aspect-ratio:1;border-radius:50%;background:var(--line);
}
.dotgrid i.on{background:var(--teal)}
.fig-legend{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.5}
.fig-legend b{color:var(--ink);font-weight:600}
.fig-legend .sw{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--line);margin-right:7px;vertical-align:1px;
}
.fig-legend .sw.on{background:var(--teal)}

.fig-split{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft)}
.fig-stat{display:flex;align-items:center;gap:13px}
.arcwrap{position:relative;width:54px;height:54px;flex:none;display:grid;place-items:center}
.arcwrap svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.arcwrap circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.arc-bg{stroke:var(--line)}
.arc-fg{
  stroke:var(--teal);stroke-dasharray:var(--p) 100;
}
.arcwrap em{
  position:relative;font-style:normal;font-family:var(--display);
  font-size:14px;font-weight:600;letter-spacing:-.03em;color:var(--teal-700);
}
.fig-stat-txt{font-size:12px;color:var(--muted);line-height:1.5}
.fig-stat-txt b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* investor slots: obviously empty, so nobody mistakes them for real logos */
.logos-placeholder .logo-slot{
  border-style:dashed;color:var(--faint);font-style:italic;
}

/* -------------------------------------------------------------------------
   25  Product split visuals  (home, #products)
   One per platform, each filling its column rather than floating a small
   card in the middle of it. Both are HTML and CSS only — no images, no
   canvas — so they re-colour with the palette and stay sharp anywhere.
   Markup comes from tools/build_product_visuals.py.
   ---------------------------------------------------------------------- */
.kv-wrap,.ov-wrap{align-items:center;padding:26px}
/* Content-sized and centred rather than stretched: there is enough in each
   visual now to fill most of the column, and stretching past that just opens
   voids between the blocks on tall viewports. */
.kviz,.oviz{
  position:relative;z-index:1;width:100%;align-self:center;
  display:flex;flex-direction:column;gap:14px;
}

/* --- Komplee: a reporting year filling in ------------------------------ */
/* Twelve month cells fill one by one on a 14s loop, the card counts up with
   them, the figures tick, and the stamp lands once the year is complete. */
/* the year block is a fixed band at the top; the activity trail below takes
   the slack, so the visual fills its column instead of floating a small card
   in the middle of it */
.kv-year{position:relative;display:flex;align-items:stretch;flex:0 0 auto;height:104px}
.kv-months{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;width:100%;height:100%}
.kv-months i{
  position:relative;display:block;height:100%;border-radius:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}
.kv-months i::after{
  content:"";position:absolute;inset:0;background:var(--mint);
  transform:scaleY(0);transform-origin:bottom;
}
.kv-months em{
  position:absolute;left:0;right:0;bottom:8px;display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.55);z-index:1;
}
.kviz.is-on .kv-months i::after{
  animation:kv-fill 14s linear infinite;
  animation-delay:calc(var(--n) * .42s);
}
@keyframes kv-fill{
  0%,1%{transform:scaleY(0)}
  4%,72%{transform:scaleY(1)}
  76%,100%{transform:scaleY(0)}
}
.kviz.is-on .kv-months em{animation:kv-lbl 14s linear infinite;animation-delay:calc(var(--n) * .42s)}
@keyframes kv-lbl{0%,3%{color:rgba(255,255,255,.55)}6%,74%{color:var(--teal-700)}78%,100%{color:rgba(255,255,255,.55)}}

.kv-stamp{
  position:absolute;right:-6px;top:50%;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(4,16,22,.35);
  opacity:0;transform:translate(6px,-50%) rotate(-7deg) scale(1.25);
}
.kviz.is-on .kv-stamp{animation:kv-stamp 14s linear infinite}
@keyframes kv-stamp{
  0%,58%{opacity:0;transform:translate(6px,-50%) rotate(-7deg) scale(1.25)}
  62%,74%{opacity:1;transform:translate(6px,-50%) rotate(-7deg) scale(1)}
  78%,100%{opacity:0;transform:translate(6px,-50%) rotate(-7deg) scale(1)}
}

.kv-card{background:var(--surface);border-radius:var(--r-md);padding:15px 16px 16px;box-shadow:0 14px 40px rgba(4,16,22,.24)}
.kv-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kv-card-head b{font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.kv-badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--teal-50);
  font-size:10.5px;font-weight:600;color:var(--teal-700);
}
.kv-badge i{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:blink 1.6s ease-in-out infinite}
.kv-card p{margin:7px 0 12px;font-size:11.5px;color:var(--muted)}
.kv-bar{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.kv-bar i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),#3fb9ae);
}
.kviz.is-on .kv-bar i{animation:kv-bar 14s linear infinite}
@keyframes kv-bar{0%{width:0}62%{width:100%}74%{width:100%}78%,100%{width:0}}

/* the activity trail — one line per step, ticked off in order; it grows to
   fill whatever height the copy column leaves over */
.kv-trail{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.kv-trail li{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  opacity:.4;
}
.kv-trail li i{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);position:relative;
}
.kv-trail li i::after{
  content:"";position:absolute;inset:2.5px;border-radius:50%;
  background:var(--mint);transform:scale(0);
}
.kv-trail li span{font-size:11.5px;color:rgba(255,255,255,.9);line-height:1.35}
.kviz.is-on .kv-trail li{animation:kv-trail 14s linear infinite;animation-delay:calc(var(--n) * 1.5s)}
@keyframes kv-trail{0%,1%{opacity:.4}5%,74%{opacity:1}78%,100%{opacity:.4}}
.kviz.is-on .kv-trail li i::after{animation:kv-tick 14s linear infinite;animation-delay:calc(var(--n) * 1.5s)}
@keyframes kv-tick{0%,2%{transform:scale(0)}7%,74%{transform:scale(1)}78%,100%{transform:scale(0)}}

.kv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kv-stat{
  padding:12px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
}
.kv-stat span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.kv-stat b{display:block;margin-top:5px;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.kv-caption{
  align-self:center;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(4,16,22,.45);color:rgba(255,255,255,.88);font-size:11.5px;
}

/* --- OpsCon: a live operating picture --------------------------------- */
.oviz{gap:12px}
.ov-map{
  position:relative;min-height:300px;border-radius:var(--r-md);
  background:radial-gradient(120% 100% at 50% 55%, rgba(31,140,132,.28), rgba(4,16,22,.55) 70%);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;
}
.ov-ring{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(159,216,205,.26);
}
.ov-ring.r1{width:38%;padding-top:38%}
.ov-ring.r2{width:64%;padding-top:64%}
.ov-ring.r3{width:92%;padding-top:92%}
.ov-site{
  position:absolute;left:50%;top:52%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:#5fd7b4;
  box-shadow:0 0 0 0 rgba(95,215,180,.5);
}
.oviz.is-on .ov-site{animation:ov-ping 2.6s ease-out infinite}
@keyframes ov-ping{0%{box-shadow:0 0 0 0 rgba(95,215,180,.45)}70%,100%{box-shadow:0 0 0 22px rgba(95,215,180,0)}}
/* the sweep: a wedge rotating over the rings */
.ov-sweep{
  position:absolute;left:50%;top:52%;width:92%;padding-top:92%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg, rgba(95,215,180,.22), rgba(95,215,180,0) 58deg, rgba(95,215,180,0));
}
.oviz.is-on .ov-sweep{animation:ov-sweep 5.5s linear infinite}
@keyframes ov-sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}

.ov-track{position:absolute;inset:0;width:100%;height:100%}
.ov-path{fill:none;stroke:var(--signal);stroke-width:1.4;stroke-dasharray:5 5;opacity:.75}
.ov-storm{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linecap:round}
.ov-eye{fill:var(--signal);stroke:none}
.oviz.is-on .ov-storm{animation:ov-storm 12s linear infinite}
/* the storm walks the track toward the site, then resets off-frame */
@keyframes ov-storm{
  0%{transform:translate(312px,34px) rotate(0deg);opacity:0}
  6%{opacity:1}
  62%,74%{transform:translate(196px,74px) rotate(190deg);opacity:1}
  80%,100%{transform:translate(196px,74px) rotate(190deg);opacity:0}
}

.ov-tag{
  position:absolute;display:flex;flex-direction:column;gap:2px;
  padding:8px 11px;border-radius:9px;background:var(--surface);
  box-shadow:0 8px 24px rgba(4,16,22,.4);max-width:56%;
}
.ov-tag b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ov-tag span{font-size:10px;color:var(--muted);white-space:nowrap}
.ov-tag.t-site{left:12px;top:12px}
.ov-tag.t-rain{left:12px;top:44%}
.ov-tag.t-page{right:12px;bottom:14px;background:var(--signal)}
.ov-tag.t-page b{color:#fff}
.ov-tag.t-page span{color:rgba(255,255,255,.82)}
/* rainfall crosses its threshold, then the duty officer is paged */
.oviz.is-on .t-rain{animation:ov-breach 12s linear infinite}
@keyframes ov-breach{
  0%,40%{background:var(--surface)}
  46%,86%{background:var(--signal)}
  92%,100%{background:var(--surface)}
}
.oviz.is-on .t-rain b,.oviz.is-on .t-rain span{animation:ov-breach-txt 12s linear infinite}
@keyframes ov-breach-txt{
  0%,40%{color:var(--ink)}
  46%,86%{color:#fff}
  92%,100%{color:var(--ink)}
}
.oviz.is-on .t-page{opacity:0;animation:ov-page 12s linear infinite}
@keyframes ov-page{
  0%,52%{opacity:0;transform:translateY(6px)}
  58%,88%{opacity:1;transform:translateY(0)}
  94%,100%{opacity:0;transform:translateY(0)}
}

.ov-forecast{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.ov-day{
  padding:11px 6px;border-radius:var(--r-sm);text-align:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
}
.ov-day b{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.025em;color:#fff}
.ov-day span{display:block;margin-top:3px;font-size:10px;color:rgba(255,255,255,.62)}
.ov-day.is-over b{color:var(--signal-300,#f0a868)}
.ov-caption{
  align-self:center;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(4,16,22,.5);color:rgba(255,255,255,.88);font-size:11.5px;
}

@media (max-width:900px){
  .kv-year{height:76px}
  .kv-stamp{right:auto;left:50%;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
  .kviz.is-on .kv-stamp{animation-name:kv-stamp-c}
  @keyframes kv-stamp-c{
    0%,58%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1.25)}
    62%,74%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
    78%,100%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
  }
}
@media (max-width:560px){
  .kv-wrap,.ov-wrap{padding:18px}
  .kv-months em{display:none}
  .kv-stat b{font-size:20px}
  .ov-tag{max-width:64%}
  .ov-map{min-height:210px}
}
@media (prefers-reduced-motion:reduce){
  .kviz.is-on .kv-months i::after,.kviz.is-on .kv-months em,
  .kviz.is-on .kv-stamp,.kviz.is-on .kv-bar i,
  .kviz.is-on .kv-trail li,.kviz.is-on .kv-trail li i::after,
  .oviz.is-on .ov-site,.oviz.is-on .ov-sweep,.oviz.is-on .ov-storm,
  .oviz.is-on .t-rain,.oviz.is-on .t-rain b,.oviz.is-on .t-rain span,
  .oviz.is-on .t-page,.kv-badge i{animation:none}
  /* show the finished state instead of animating toward it */
  .kv-months i::after{transform:scaleY(1)}
  .kv-months em{color:var(--teal-700)}
  .kv-bar i{width:100%}
  .kv-stamp{opacity:1;transform:translate(6px,-50%) rotate(-7deg) scale(1)}
  .kv-trail li{opacity:1}
  .kv-trail li i::after{transform:scale(1)}
  .ov-storm{transform:translate(196px,74px) rotate(190deg)}
  .t-rain{background:var(--signal)}
  .t-rain b,.t-rain span{color:#fff}
  .t-page{opacity:1}
}

/* -------------------------------------------------------------------------
   26  Pricing additions  (custom agent card, ingestion note)
   ---------------------------------------------------------------------- */
/* the custom agent sits in the same row as the built-in ones but reads as an
   offer rather than an inclusion — dashed edge, and its fee on the label */
.agent-item.agent-custom{
  border-style:dashed;border-color:var(--line-strong);
  background:linear-gradient(170deg,var(--teal-50),var(--surface) 70%);
}
.agent-ico.custom{background:var(--ink);color:#fff}
.agent-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--teal-700);
  font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:2px;
}

/* pay-as-you-go ingestion: a single standing rule, so it gets its own band
   rather than being one card among the three below it */
.ingest-note{
  display:flex;align-items:flex-start;gap:14px;margin-top:30px;
  padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid var(--mint);background:var(--tint);
}
.ingest-ico{
  width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--mint);color:var(--teal-700);
}
.ingest-note b{display:block;font-size:14.5px;letter-spacing:-.015em;color:var(--ink)}
.ingest-note p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
@media (max-width:560px){
  .ingest-note{padding:16px 16px 18px;gap:11px}
  .agent-tag{margin-left:0;margin-top:4px}
}


/* -------------------------------------------------------------------------
   27  Implementation timeline comparison  (services, #timeline)
   Two charts rather than one, because the two stories are no longer on the
   same order of magnitude: eight DAYS above, eighteen MONTHS below. Each
   carries its own ruler and its own total. Merging them onto a shared axis
   would make the AI bars a hairline — the asymmetry is the argument.
   Markup and all the durations come from tools/build_timeline.py.
   ---------------------------------------------------------------------- */
.tl-compare{display:grid;gap:18px}
.tl-now{--cols:8}
.tl-was{--cols:6}
.tl-was .gt-body{background:linear-gradient(180deg,rgba(201,114,42,.05),transparent 60%)}

.gt-head .tl-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tl-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.tl-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tl-badge.now{background:var(--mint);color:var(--teal-700)}
.tl-badge.was{background:var(--signal-50,#f5e6d8);color:#8a4e1c}
.tl-total{display:flex;align-items:baseline;gap:8px}
.tl-total b{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.tl-total span{font-size:12px;color:var(--faint)}
.tl-total.was b{color:#8a4e1c}
.tl-caption{margin:0;flex:1 1 300px;min-width:240px;font-size:12.5px;color:var(--muted);line-height:1.55}

/* the conventional bars carry a range: solid to the low end, hatched on to
   the high end, so "3 to 6 months" is one bar and not two */
.gt-bar.p-old{background:linear-gradient(90deg,#b4661f,#d89552)}
.gt-range{
  position:absolute;top:50%;left:var(--s);width:var(--w);height:26px;
  transform:translateY(-50%);border-radius:6px;
  border:1px dashed rgba(201,114,42,.55);
  background:repeating-linear-gradient(115deg,rgba(201,114,42,.1) 0 3px,transparent 3px 8px);
}
.gantt[data-gantt] .gt-range{width:0;overflow:hidden}
.gantt.is-running .gt-range,
.tl-compare.is-running .gt-range{
  width:var(--w);
  transition:width .9s cubic-bezier(.22,.7,.3,1) var(--d,0ms);
}
/* the comparison wrapper carries data-gantt, so .is-running lands on it */
.tl-compare[data-gantt] .gt-bar{width:0;overflow:hidden}
.tl-compare.is-running .gt-bar{
  width:var(--w);
  transition:width .85s cubic-bezier(.22,.7,.3,1) calc(var(--d,0ms) + 200ms);
}

.gt-note{font-size:11.5px;color:var(--faint);line-height:1.4}
.gt-dur.was{color:#8a4e1c}
.tl-was .gt-label b{font-size:14px}

.tl-foot{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:22px;
  padding:22px 26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--tint);
}
/* flex:none stopped this shrinking, so the long trailing clause pushed the
   band past the viewport on narrow screens — let it wrap instead */
.tl-foot-figure{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;flex:0 1 auto;min-width:0;max-width:100%}
.tl-foot-was{min-width:0}
.tl-foot-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700)}
.tl-foot-figure b{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.tl-foot-was{font-size:12.5px;color:var(--faint)}
.tl-foot p{margin:0;flex:1 1 320px;font-size:12.5px;line-height:1.6;color:var(--muted)}

@media (max-width:860px){
  .tl-total b{font-size:22px}
  .tl-foot{padding:18px 18px 20px;gap:14px}
  .tl-foot-figure b{font-size:24px}
}
@media (max-width:560px){
  .gt-head .tl-side{gap:10px}
  .tl-caption{flex-basis:100%}
  .tl-foot-figure{gap:6px}
  .tl-foot-was{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .tl-compare[data-gantt] .gt-bar,.gantt[data-gantt] .gt-range{width:var(--w)}
  .tl-compare.is-running .gt-bar,.tl-compare.is-running .gt-range{transition:none}
}