/* ==========================================================================
   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.18;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.9vw,46px);line-height:1.2}
h3{font-size:22px;line-height:1.34;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.
   It is opaque and it is painted after the line above it, so the headings
   that carry one need enough leading for a descender ("p", "g", "y") on the
   line above to clear the top of the box. That is why h1/h2/h3 are not set
   any tighter than they are. */
.hl{
  display:inline;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
   ---------------------------------------------------------------------- */
/* [hidden] is an attribute selector, the same specificity as a class, so
   the browser's own [hidden]{display:none} loses to whichever comes later
   in the cascade -- and that is this rule. Without the second line the
   form stayed on screen under the thank-you panel. */
.form{display:grid;gap:16px}
.form[hidden]{display:none}
.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)}
/* a line that states what the plan does NOT have: a cross, not a tick */
.plan li.no{color:var(--faint)}
.plan li.no::before{content:"\00d7";color:var(--faint);font-size:13px;line-height:1.35}
.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{
  /* 25% smaller than it used to run: the graphic is the lead-in to the
     audience blocks below it now, not the centrepiece of the section */
  max-width:75%;margin:22px auto 26px;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:480px}

/* 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:450px}
}
@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}
}


/* -------------------------------------------------------------------------
   28  Komplee and OpsCon product pages  (kp-)
   The prototype's page, moved in whole. OpsCon shares every component and
   is reskinned by scoping the teal tokens to navy under main.oc, so nothing
   here is duplicated for the second product.
   ---------------------------------------------------------------------- */
/* =========================================================================
   Komplee and OpsCon page styles. Everything is prefixed kp- so nothing here
   can reach the other pages. OpsCon reuses every component under main.oc,
   which swaps the teal tokens for navy ones (see the end of this block), which share css/styles.css and js/main.js. The
   shared tokens (--teal, --navy, --mint, --line...) are reused, never
   redefined. Every scene ships FINISHED in the markup; the script only
   rewinds it and plays it forward, so no-script and reduced-motion readers
   see the complete picture.
   ====================================================================== */

/* ---- hero: copy left, the Partner Portal console right ---------------- */
.kp-hero{padding:76px 0 40px;text-align:left}
.kp-hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.kp-hero h1{max-width:none;margin:18px 0 0;font-size:clamp(38px,4.6vw,58px)}
.kp-hero .lede{margin:20px 0 0;max-width:520px}
.kp-hero .hero-actions{justify-content:flex-start;margin-top:26px}
.kp-hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding:0;list-style:none}
.kp-hero-facts li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.kp-hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}

.kp-console{
  position:relative;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  display:grid;grid-template-columns:150px 1fr;min-height:430px;font-size:12px;
}
.kp-rail{background:#0f2735;color:#cfe0dd;padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.kp-rail .kp-rail-t{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#7fd0c4;margin:10px 4px 4px;font-weight:600}
.kp-rail a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:11.5px;color:#cfe0dd;transition:background .2s,color .2s}
.kp-rail a svg{width:12px;height:12px;flex:none;opacity:.8}
.kp-rail a.on{background:rgba(255,255,255,.1);color:#fff}
.kp-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px}
.kp-brand i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#1d969e,#5fd7b4);display:grid;place-items:center;color:#fff;font:600 11px var(--display)}
.kp-brand b{font-size:12px;color:#fff;font-weight:600}
.kp-stage{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;position:relative}
.kp-stage-bar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.kp-stage-bar b{color:var(--ink);font-weight:600}
.kp-stage-bar .pill{margin-left:auto;font-size:10.5px;padding:3px 9px}
.kp-prompt{
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:12px 14px;
  min-height:64px;font-size:13.5px;line-height:1.45;color:var(--ink);background:#fbfbf9;
}
.kp-prompt .builder-caret{height:1em}
.kp-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kp-steps li{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:#f6f8f7;
  opacity:.28;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;
}
.kp-steps li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none;background:#fff;transition:background .3s,border-color .3s}
.kp-steps li i svg{width:9px;height:9px;opacity:0;transition:opacity .3s}
.kp-steps li span{color:var(--ink-soft)}
.kp-steps li em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.kp-steps li.done{opacity:1;transform:none}
.kp-steps li.done i{background:var(--teal);border-color:var(--teal)}
.kp-steps li.done i svg{opacity:1}
.kp-steps li.busy{opacity:1;transform:none}
.kp-steps li.busy i{border-color:var(--teal);border-top-color:transparent;animation:kp-spin .8s linear infinite}
@keyframes kp-spin{to{transform:rotate(360deg)}}
.kp-live{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--mint);color:var(--teal-700);font-weight:500;font-size:12px;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.kp-live.show{opacity:1;transform:none}
.kp-live .dot{background:#34a67f;box-shadow:0 0 0 3px rgba(52,166,127,.18)}
.kp-live b{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:11px}
.kp-console .kp-no-js-note{display:none}

/* ---- use Komplee in two ways: two tabs, one panel showing ---------------- */
.kp-journey{padding:0}
.kp-journey-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.kp-journey-head .eyebrow{margin:0}
.kp-journey-head p{margin:7px 0 0;color:var(--muted);font-size:14.5px;max-width:520px}
/* The head is a space-between flex row, which would push the tabs to the
   right whenever they share a line with the heading. margin-right:auto
   takes that free space instead, so the tabs stay left at every width,
   wrapped or not. */
.kp-ways-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--canvas-soft);margin-right:auto}
.kp-ways-tabs button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:600 14px var(--display);color:var(--muted);letter-spacing:-.01em;transition:background .18s,color .18s,box-shadow .18s;
}
.kp-ways-tabs button svg{width:15px;height:15px;flex:none}
.kp-ways-tabs button:hover{color:var(--ink)}
.kp-ways-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(12,42,48,.25)}
.kp-ways-tabs button[data-way="software"][aria-selected="true"]{background:var(--navy-700)}
.kp-ways-tabs button[data-way="consulting"][aria-selected="true"]{background:var(--teal-700)}
.kp-way{--way:var(--teal);--way-deep:var(--teal-700);--way-soft:var(--teal-50);display:none;animation:kp-way-in .35s ease both}
.kp-way.on{display:block}
.kp-way[data-way="software"]{--way:var(--navy-700);--way-deep:var(--navy);--way-soft:#e7edf2}
@keyframes kp-way-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kp-way-top{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.kp-way-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--way),var(--way-deep));box-shadow:0 10px 24px -12px var(--way-deep);
}
.kp-way-icon svg{width:21px;height:21px}
.kp-way-top h3{margin:0;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.02em;color:var(--ink)}
.kp-way-top p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.kp-way-paths{display:grid;gap:18px;padding-top:20px}
.kp-way-path .kp-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kp-way-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px;margin:0;padding:0;list-style:none}
.kp-way-flow li{display:inline-flex;align-items:center;gap:6px}
.kp-way-flow li::after{content:"\2192";color:var(--faint);font-size:14px;margin-left:2px}
.kp-way-flow li:last-child::after{content:none}
.kp-way-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:border-color .16s,background .16s;
}
.kp-way-chip svg{width:14px;height:14px;color:var(--muted)}
.kp-way-chip:hover{border-color:var(--way);background:var(--way-soft)}
.kp-way-go{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;background:var(--way);color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 1px 2px rgba(12,42,48,.25);transition:background .16s,transform .16s;
}
.kp-way-go:hover{background:var(--way-deep);transform:translateY(-1px)}
/* ---- the per-tab process strip (steps 0-4, auto-advances) ----------------- */
.kp-way-strip{margin-top:18px}
.kp-way-strip .kp-n{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.kp-journey-ctl{display:inline-flex;align-items:center;gap:8px;font:400 12px var(--display);letter-spacing:0;text-transform:none;color:var(--faint)}
.kp-journey-ctl button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .16s}
.kp-journey-ctl button:hover{background:var(--canvas)}
.kp-journey-track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative;list-style:none;margin:0;padding:0;counter-reset:kp 0}
.kp-journey-track::before{content:"";position:absolute;left:10%;right:10%;top:19px;height:2px;background:var(--line);z-index:0}
.kp-journey-track li{position:relative;z-index:1;counter-increment:kp}
.kp-journey-track button{width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:center;display:grid;justify-items:center;gap:8px;color:var(--muted)}
.kp-journey-track button::before{
  content:counter(kp);width:38px;height:38px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);
  display:grid;place-items:center;font:600 13px var(--display);color:var(--muted);transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.kp-journey-track li.out button::before{content:"\2193"}
.kp-journey-track b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.kp-journey-track small{display:block;font-size:11px;color:var(--faint);margin-top:2px;line-height:1.3}
.kp-journey-track li.on button::before{background:var(--way);border-color:var(--way);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px var(--way-soft)}
.kp-journey-track li.was button::before{background:var(--way-soft);border-color:var(--way);color:var(--way-deep)}
.kp-journey-track li.on b{color:var(--way-deep)}
.kp-journey-cap{margin-top:20px;padding:14px 18px;border-radius:var(--r-md);background:var(--canvas-soft);border:1px solid var(--line-soft);display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.kp-journey-cap .kp-n{display:block;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--way-deep);text-transform:uppercase}
.kp-journey-cap p{font-size:14.5px;color:var(--ink-soft);margin:0;transition:opacity .3s}
.kp-journey-cap p.fade{opacity:0}
.kp-journey-cap a{white-space:nowrap}
.kp-journey-bar{height:3px;background:var(--line-soft);border-radius:2px;margin-top:14px;overflow:hidden}
.kp-journey-bar i{display:block;height:100%;width:0;background:var(--way);border-radius:2px}
.kp-way.playing .kp-journey-bar i{animation:kp-bar var(--kp-tick,3600ms) linear infinite}
@keyframes kp-bar{from{width:0}to{width:100%}}
.kp-way-quick{margin-top:12px;font-size:13px;color:var(--muted)}
.kp-way-quick b{color:var(--ink-soft);font-weight:600}
/* chapters are shared between the two tabs; hidden ones simply do not render */
.kp-chapter[hidden]{display:none}
/* output scene: the client's application, with agents */
.kp-modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.kp-modgrid span{padding:8px 6px;border-radius:8px;background:#f7f9f8;border:1px solid var(--line-soft);font-size:9.5px;font-weight:600;color:var(--ink);text-align:center;display:grid;gap:4px;justify-items:center}
.kp-modgrid span i{width:16px;height:16px;border-radius:5px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center}
.kp-modgrid span i svg{width:10px;height:10px}
.kp-agents{margin-top:10px;display:grid;gap:6px}
.kp-agents h5{margin:0 0 2px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);font-weight:500}
.kp-agent{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;border:1px solid var(--line-soft);background:var(--surface);font-size:10.5px}
.kp-agent>i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font:600 10px var(--display);background:var(--teal);flex:none}
.kp-agent.k>i{background:var(--navy-700)}.kp-agent.r>i{background:#c9722a}
.kp-agent b{display:block;font-size:10.5px;color:var(--ink)}
.kp-agent small{display:block;font-size:9.5px;color:var(--faint);margin-top:1px}
.kp-agent em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;color:var(--teal-700);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kp-agent em .dot{background:var(--teal);width:6px;height:6px;border-radius:50%;display:inline-block}
.is-live .kp-agent em .dot{animation:kp-blink 1.2s ease-in-out infinite}
@keyframes kp-blink{50%{opacity:.3}}
/* output scene: the PDF assessment */
.kp-pdf{width:100%;max-width:400px;position:relative}
.kp-pdf .page{background:#fff;border-radius:10px;padding:20px 22px 18px;box-shadow:0 18px 44px rgba(12,42,48,.18);border:1px solid var(--line-soft)}
.kp-pdf .page h5{margin:0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);font-weight:500}
.kp-pdf .page h4{margin:6px 0 0;font-size:15px;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.kp-pdf .page .sub{font-size:10px;color:var(--muted);margin-top:3px}
.kp-pdf ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.kp-pdf ol li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;font-size:10.5px;color:var(--ink)}
.kp-pdf ol li i{width:18px;height:18px;border-radius:5px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center;font:600 9px var(--display)}
.kp-pdf ol li small{color:var(--faint);font-family:var(--mono);font-size:9px}
.kp-pdf .lines{margin-top:12px;display:grid;gap:5px}
.kp-pdf .lines span{height:5px;border-radius:3px;background:#e9ecea;display:block;transform-origin:left}
.kp-pdf .lines span.w80{width:80%}.kp-pdf .lines span.w60{width:60%}
.kp-pdf .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:9.5px;color:var(--faint);font-family:var(--mono)}
.kp-pdf .dl{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--ink);color:#fff;font:600 10px var(--display)}
.kp-pdf .dl svg{width:10px;height:10px}
.kp-pdf .stamp{position:absolute;right:-8px;top:14px;transform:rotate(6deg);padding:5px 9px;border-radius:7px;border:2px solid var(--teal-700);color:var(--teal-700);font:700 9.5px var(--display);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.9)}
.kp-pdf .tag{position:absolute;left:-8px;top:-8px;padding:3px 7px;border-radius:5px;background:#c9722a;color:#fff;font:700 9px var(--display);letter-spacing:.08em}



/* ---- chapters: "Step N of 8", copy one side, a scene the other -------- */
.kp-chapters{display:grid;gap:26px}
.kp-chapter{
  display:grid;grid-template-columns:.92fr 1.08fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);
  scroll-margin-top:96px;
}
.kp-chapter.flip .kp-copy{order:2}
.kp-chapter.flip .kp-scene{order:1}
.kp-copy{padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
.kp-stepno{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700);margin-bottom:16px;
}
.kp-stepno i{width:26px;height:26px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font:600 12px var(--display);color:var(--teal-700);letter-spacing:0}
.kp-copy h3{font-size:clamp(24px,2.4vw,31px);letter-spacing:-.03em}
.kp-copy p{margin-top:14px;color:var(--muted);max-width:440px}
.kp-copy .kp-dummies{
  margin-top:18px;padding:12px 14px;border-radius:var(--r-md);background:#fff8ee;border:1px solid #f0dcc1;
  font-size:13.5px;color:#7a4a1c;display:flex;gap:10px;align-items:flex-start;line-height:1.5;
}
.kp-copy .kp-dummies b{color:#94521c;font-weight:600}
.kp-copy .kp-dummies svg{flex:none;width:16px;height:16px;margin-top:3px;color:#c9722a}
.kp-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.kp-tool{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:500;color:var(--ink-soft);
}
.kp-tool i{width:16px;height:16px;border-radius:5px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center}
.kp-tool i svg{width:10px;height:10px}
.kp-tool small{color:var(--faint);font-weight:400}
/* a chapter's "Watch this step" chip: the same pill, but it opens the clip */
button.kp-tool{cursor:pointer;font-family:inherit;line-height:inherit;transition:border-color .16s,background .16s}
button.kp-tool:hover{border-color:var(--line-strong);background:var(--canvas)}
.kp-tool-play i{background:var(--teal);color:#fff}
.kp-tool-play i svg{width:8px;height:8px;margin-left:1px}
main.oc .kp-tool-play i{background:var(--navy)}

.kp-scene{
  position:relative;min-height:380px;padding:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(145deg,var(--v1,#1d969e),var(--v2,#0d4a55));
}
.kp-scene::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;
}
.kp-scene.v-navy{--v1:#123950;--v2:#071722}
.kp-scene.v-mint{--v1:#d8ede6;--v2:#aed6cc}
.kp-scene.v-sand{--v1:#e8d2b8;--v2:#c9722a}
.kp-scene.v-deep{--v1:#0e3d3c;--v2:#071722}
.kp-scene .mock{max-width:440px}
/* a caption riding on the scene saying what is happening, dummies style */
.kp-say{
  position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:center;pointer-events:none;
}
.kp-say span{
  background:rgba(7,23,34,.82);color:#e7f2ef;font-size:11.5px;padding:6px 12px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.kp-say span.show{opacity:1;transform:none}
.v-mint .kp-say span,.v-sand .kp-say span{background:rgba(12,42,48,.86)}

/* the generic animation vocabulary: things appear in order, bars grow,
   cells fill, ticks pop. All keyed on .is-live so they play on entry. */
.kp-a{opacity:0;transform:translateY(6px)}
.is-live .kp-a{animation:kp-in .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes kp-in{to{opacity:1;transform:none}}
.kp-grow{transform-origin:left;transform:scaleX(0)}
.is-live .kp-grow{animation:kp-growx .9s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes kp-growx{to{transform:scaleX(1)}}
.kp-pop{opacity:0;transform:scale(.5)}
.is-live .kp-pop{animation:kp-popin .35s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes kp-popin{to{opacity:1;transform:scale(1)}}
.is-still .kp-a,.is-still .kp-pop{opacity:1;transform:none}
.is-still .kp-grow{transform:none}

/* scene 0: sign up, three demo slots, the five-day clock */
.kp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.kp-slot{border:1.5px dashed var(--line-strong);border-radius:10px;padding:10px;min-height:86px;display:flex;flex-direction:column;gap:5px;background:#fbfbf9}
.kp-slot b{font-size:12px;color:var(--ink);font-weight:600}
.kp-slot small{font-size:10px;color:var(--faint);line-height:1.35}
.kp-slot .pill{font-size:9.5px;padding:2px 7px;margin-top:auto;align-self:flex-start}
.kp-slot.filled{border-style:solid;border-color:#a9d7ce;background:#fff}
.kp-slot.free{justify-content:center;align-items:center;text-align:center;color:var(--faint)}
.kp-slot.free b{color:var(--faint);font-weight:500;font-size:11.5px}
.kp-clock{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:6px}
.kp-clock i{height:6px;border-radius:3px;background:#e9eeec;overflow:hidden;display:block;position:relative}
.kp-clock i::after{content:"";position:absolute;inset:0;background:var(--teal);transform:scaleX(0);transform-origin:left}
.is-live .kp-clock i::after{animation:kp-growx .6s ease forwards;animation-delay:calc(1.4s + var(--n) * .45s)}
.is-still .kp-clock i::after{transform:none}

/* scene 1: the scoping draft and the client link */
.kp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);padding:0 2px;margin-bottom:12px}
.kp-tabs span{font-size:10.5px;padding:6px 9px;color:var(--faint);border-bottom:2px solid transparent}
.kp-tabs span.on{color:var(--teal-700);border-color:var(--teal);font-weight:500}
.kp-q{display:grid;gap:8px}
.kp-q div{display:grid;grid-template-columns:1fr 92px;gap:10px;align-items:center;font-size:11.5px;color:var(--ink-soft)}
.kp-q div i{height:22px;border-radius:6px;background:#f2f4f2;border:1px solid var(--line-soft);position:relative;overflow:hidden}
.kp-q div i::after{
  content:attr(data-a);position:absolute;inset:0;padding:0 8px;line-height:22px;font-size:10.5px;color:var(--ink);
  background:#fff;opacity:0;transform:translateX(-6px);
}
.is-live .kp-q div i::after{animation:kp-in .4s ease forwards;animation-delay:calc(2.2s + var(--n) * .5s)}
.is-still .kp-q div i::after{opacity:1;transform:none}
.kp-link{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;border-radius:9px;
  background:var(--mint);color:var(--teal-700);font-family:var(--mono);font-size:10.5px;
}
.kp-link svg{width:12px;height:12px;flex:none}
.kp-link em{margin-left:auto;font-style:normal;font-family:var(--body);font-weight:500;font-size:10.5px}
.kp-prog{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11px;color:var(--muted)}
.kp-prog .track{flex:1;height:6px;border-radius:3px;background:#e9eeec;overflow:hidden}
.kp-prog .fill{display:block;height:100%;background:var(--teal);border-radius:3px}
.kp-prog b{font-family:var(--mono);font-weight:500;color:var(--ink);min-width:70px;text-align:right}

/* scene 2: the structure builder */
.kp-ladder{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:10.5px}
.kp-ladder span{padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-weight:500}
.kp-ladder span.lvl{background:var(--teal-50);border-color:#c5e3e3;color:var(--teal-700)}
.kp-ladder span.add{border-style:dashed;color:var(--faint)}
.kp-ladder i{color:var(--faint);font-style:normal}
.kp-tree{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp-unit{border:1px solid var(--line);border-radius:10px;background:#fbfbf9;padding:8px;min-height:120px;transition:border-color .3s,box-shadow .3s}
.kp-unit b{display:block;font-size:11px;color:var(--ink);font-weight:600;margin-bottom:7px}
.kp-unit small{display:block;font-size:9.5px;color:var(--faint);margin:-5px 0 7px}
.kp-site{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:7px;background:#fff;border:1px solid var(--line-soft);font-size:10.5px;color:var(--ink-soft);margin-bottom:5px}
.kp-site::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--teal)}
.kp-site.ghost{opacity:0;visibility:hidden}
.kp-drag{position:absolute;left:4%;top:74px;width:27%;margin:0;box-shadow:0 8px 20px rgba(4,16,22,.18);z-index:2}
.is-live .kp-drag{animation:kp-dragmove 8s ease-in-out infinite}
@keyframes kp-dragmove{
  0%,22%{left:4%;top:74px;transform:none}
  28%{transform:scale(1.05) rotate(-2deg)}
  46%{left:36.5%;top:80px;transform:scale(1.05) rotate(1deg)}
  52%,100%{left:36.5%;top:74px;transform:none}}
.is-live .kp-unit.target{animation:kp-target 8s ease-in-out infinite}
@keyframes kp-target{0%,26%{border-color:var(--line);box-shadow:none}34%,50%{border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,150,158,.15)}56%,100%{border-color:var(--line);box-shadow:none}}
.is-still .kp-drag{left:36.5%;top:74px}

/* scene 3: the builder conversation and the one switch */
.kp-chat{width:100%;max-width:430px;display:grid;gap:9px}
.kp-switch{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface);box-shadow:0 8px 26px rgba(4,16,22,.2);font-size:12px;color:var(--ink-soft);
}
.kp-switch b{color:var(--ink);font-weight:600;display:block;font-size:12.5px}
.kp-switch small{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.kp-toggle{margin-left:auto;width:36px;height:20px;border-radius:10px;background:#d8dedc;position:relative;flex:none;transition:background .3s}
.kp-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s}
.kp-toggle.on{background:var(--teal)}
.kp-toggle.on::after{transform:translateX(16px)}
.is-live .kp-toggle{animation:kp-tog 9s steps(1) infinite}
@keyframes kp-tog{0%,44%{background:#d8dedc}45%,100%{background:var(--teal)}}
.is-live .kp-toggle::after{animation:kp-togk 9s ease infinite}
@keyframes kp-togk{0%,44%{transform:none}48%,100%{transform:translateX(16px)}}
.kp-sitecount{display:flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink)}
.kp-sitecount i{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);display:grid;place-items:center;font-style:normal;color:var(--muted)}

/* scene 4: twelve months, six sites, evidence, your own standard */
.kp-heat{display:grid;grid-template-columns:56px repeat(12,1fr);gap:3px;align-items:center;font-size:9.5px;color:var(--muted)}
.kp-heat .hd{font-size:8.5px;text-align:center;color:var(--faint);letter-spacing:.04em}
.kp-heat .rn{font-size:10px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}
.kp-cell{aspect-ratio:1;border-radius:3px;background:#e9eeec;position:relative}
.kp-cell::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--teal);opacity:0}
.is-live .kp-cell.f::after{animation:kp-fill .35s ease forwards;animation-delay:calc(.6s + (var(--r) * 12 + var(--c)) * .045s)}
.kp-cell.p::after{background:#7fc9cb}
.is-live .kp-cell.p::after{animation:kp-fill .35s ease forwards;animation-delay:calc(.6s + (var(--r) * 12 + var(--c)) * .045s)}
@keyframes kp-fill{to{opacity:1}}
.is-still .kp-cell.f::after,.is-still .kp-cell.p::after{opacity:1}
.kp-evid{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 9px;border-radius:8px;background:#f7f9f8;font-size:10.5px;color:var(--ink-soft)}
.kp-evid svg{width:12px;height:12px;color:var(--teal-700);flex:none}
.kp-evid .tag{margin-left:auto}
.kp-map{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.kp-map h5{margin:0 0 7px;font:600 10.5px var(--display);color:var(--ink);letter-spacing:.02em}
.kp-map div{display:grid;grid-template-columns:1fr 16px 1fr 20px;gap:6px;align-items:center;font-size:10.5px;color:var(--ink-soft);padding:4px 0}
.kp-map div i{color:var(--faint);font-style:normal;text-align:center}
.kp-map div em{font-style:normal;color:var(--teal-700)}
.kp-map div .tick{width:16px;height:16px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.kp-map div .tick svg{width:9px;height:9px}
.kp-map div .tick.person{background:var(--navy)}

/* scene 5: roles matrix, the sign-off route */
.kp-matrix{display:grid;grid-template-columns:96px repeat(4,1fr);gap:4px;font-size:10px;align-items:center}
.kp-matrix .h{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);text-align:center;padding-bottom:2px}
.kp-matrix .r{font-size:10.5px;color:var(--ink);font-weight:500;padding-right:4px}
.kp-matrix .r small{display:block;font-weight:400;color:var(--faint);font-size:9px}
.kp-perm{height:24px;border-radius:6px;background:#f0f3f2;display:grid;place-items:center;font-size:9.5px;color:var(--faint)}
.kp-perm.w{background:var(--mint);color:var(--teal-700);font-weight:500}
.kp-perm.r{background:#e0e7ec;color:var(--navy);font-weight:500}
.kp-perm.x{background:#f8ebdf;color:#94521c;text-decoration:line-through}
.kp-route{display:flex;align-items:stretch;gap:4px;margin-top:14px}
.kp-route span{flex:1;padding:7px 6px;border-radius:8px;background:#f7f9f8;border:1px solid var(--line-soft);text-align:center;position:relative;transition:background .3s,border-color .3s}
.kp-route span b{display:block;font-size:10px;color:var(--ink);font-weight:600}
.kp-route span small{display:block;font-size:8.5px;color:var(--faint);line-height:1.3;margin-top:2px}
.kp-route span.lit{background:var(--mint);border-color:#a9d7ce}
.kp-route span.lock{background:var(--ink);border-color:var(--ink)}
.kp-route span.lock b{color:#fff}
.kp-route span.lock small{color:rgba(255,255,255,.65)}
.kp-route i{align-self:center;color:var(--faint);font-style:normal;font-size:11px}
.is-live .kp-route span:not(.lock){animation:kp-route 9s ease infinite}
.is-live .kp-route span:nth-child(1){--d:.2s}.is-live .kp-route span:nth-child(3){--d:1.4s}
.is-live .kp-route span:nth-child(5){--d:2.6s}.is-live .kp-route span:nth-child(7){--d:3.8s}
.is-live .kp-route span:not(.lock){animation-delay:var(--d)}
@keyframes kp-route{0%{background:#f7f9f8;border-color:var(--line-soft)}6%,60%{background:var(--mint);border-color:#a9d7ce}70%,100%{background:#f7f9f8;border-color:var(--line-soft)}}
.is-live .kp-route span.lock{animation:kp-lock 9s ease infinite}
@keyframes kp-lock{0%,54%{background:#f7f9f8;border-color:var(--line-soft)}60%,88%{background:var(--ink);border-color:var(--ink)}95%,100%{background:#f7f9f8;border-color:var(--line-soft)}}
.is-live .kp-route span.lock b{animation:kp-lockt 9s ease infinite}
.is-live .kp-route span.lock small{animation:kp-locks 9s ease infinite}
@keyframes kp-lockt{0%,54%{color:var(--ink)}60%,88%{color:#fff}95%,100%{color:var(--ink)}}
@keyframes kp-locks{0%,54%{color:var(--faint)}60%,88%{color:rgba(255,255,255,.65)}95%,100%{color:var(--faint)}}

/* scene 6: five risk families for one site */
.kp-fams{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.kp-fam{background:#f7f9f8;border-radius:10px;padding:9px 8px;text-align:center;min-height:104px;display:flex;flex-direction:column;gap:4px}
.kp-fam small{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kp-fam b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.kp-fam .band{font-size:9px;font-weight:500;padding:2px 6px;border-radius:var(--r-pill);align-self:center}
.kp-fam .band.hi{background:#f8ebdf;color:#94521c}
.kp-fam .band.md{background:#fff3d6;color:#8a6a1a}
.kp-fam .band.lo{background:var(--mint);color:var(--teal-700)}
.kp-fam .band.tx{background:#e0e7ec;color:var(--navy)}
.kp-fam .kp-dial{height:4px;border-radius:2px;background:#e3e8e6;overflow:hidden;margin-top:auto}
.kp-fam .kp-dial i{display:block;height:100%;width:var(--w);background:var(--teal);border-radius:2px}
.kp-fam .kp-dial i.hi{background:var(--signal)}
.kp-fam .kp-dial i.md{background:#d9a441}
.kp-never{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:8px;background:#fff8ee;border:1px solid #f0dcc1;font-size:10.5px;color:#7a4a1c}
.kp-never b{font-weight:600}

/* scene 7: the order form */
.kp-order{display:grid;gap:6px}
.kp-orow{display:grid;grid-template-columns:1fr 84px 42px 52px;gap:8px;align-items:center;font-size:10.5px;color:var(--ink-soft)}
.kp-orow .track{height:7px;border-radius:4px;background:#e9eeec;overflow:hidden}
.kp-orow .fill{display:block;height:100%;width:var(--w);background:var(--teal);border-radius:4px}
.kp-orow .fill.base{background:var(--navy)}
.kp-orow b,.kp-orow em{font-family:var(--mono);font-style:normal;font-size:10px;text-align:right;color:var(--muted)}
.kp-orow.sum{border-top:1px solid var(--line);padding-top:7px;margin-top:3px;color:var(--ink);font-weight:600}
.kp-orow.sum b,.kp-orow.sum em{color:var(--ink);font-weight:500;font-size:11px}
.kp-crew{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:10.5px;color:var(--muted)}
.kp-peeps{display:flex;gap:4px;align-items:flex-end}
.kp-peep{width:14px;height:22px;border-radius:7px 7px 3px 3px;background:var(--teal);position:relative}
.kp-peep::before{content:"";position:absolute;top:-8px;left:3px;width:8px;height:8px;border-radius:50%;background:inherit}
.kp-peep.v{background:var(--navy)}
.kp-days{display:flex;gap:3px;list-style:none;margin:0 0 4px;padding:0}
.kp-days li{width:22px;height:22px;border-radius:5px;background:#e9eeec;display:grid;place-items:center;font:500 9.5px var(--mono);color:var(--muted);position:relative;overflow:hidden}
.kp-days li::after{content:"";position:absolute;inset:0;background:var(--teal);opacity:0}
.kp-days li.half::after{width:50%}
.is-live .kp-days li::after{animation:kp-fill .3s ease forwards;animation-delay:calc(3s + var(--n) * .18s)}
.is-still .kp-days li::after{opacity:1}
.is-live .kp-days li{animation:kp-daytxt .3s ease forwards;animation-delay:calc(3s + var(--n) * .18s)}
@keyframes kp-daytxt{to{color:#fff}}
.kp-days li.half{color:var(--muted) !important}

/* scene 8: brand, console, credits */
.kp-run{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:470px}
.kp-run .mock{max-width:none;font-size:11.5px}
.kp-brandmock .mock-bar{transition:background .5s}
.kp-acc{width:14px;height:14px;border-radius:4px;display:inline-block;background:var(--teal);vertical-align:middle;margin-right:6px}
.kp-appbar{height:26px;border-radius:7px 7px 0 0;background:var(--teal);display:flex;align-items:center;gap:6px;padding:0 8px;color:#fff;font-size:9.5px;font-weight:600}
.kp-appbar i{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.85);display:block}
.kp-appbody{border:1px solid var(--line-soft);border-top:0;border-radius:0 0 7px 7px;padding:8px;display:grid;gap:5px}
.kp-appbody span{height:8px;border-radius:4px;background:#eef1f0}
.kp-appbody span.acc{background:var(--teal);width:40%}
.kp-appbody span.w60{width:60%}
.kp-swatches{display:flex;gap:5px;margin-top:8px}
.kp-swatches i{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong)}
.is-live .kp-appbar,.is-live .kp-appbody span.acc,.is-live .kp-acc{animation:kp-hue 12s steps(1) infinite}
@keyframes kp-hue{0%,32%{background:#1d969e}33%,65%{background:#6b3fa0}66%,100%{background:#c9722a}}
.is-live .kp-swatches i{animation:kp-ring 12s steps(1) infinite}
.kp-swatches i:nth-child(1){background:#1d969e}.kp-swatches i:nth-child(2){background:#6b3fa0}.kp-swatches i:nth-child(3){background:#c9722a}
.kp-swatches i:nth-child(1){--a:0%;--b:32%}
@keyframes kp-ring{0%{box-shadow:0 0 0 1px var(--line-strong)}}
.is-live .kp-swatches i:nth-child(1){animation-name:kp-ring1}
.is-live .kp-swatches i:nth-child(2){animation-name:kp-ring2}
.is-live .kp-swatches i:nth-child(3){animation-name:kp-ring3}
@keyframes kp-ring1{0%,32%{box-shadow:0 0 0 2px var(--ink)}33%,100%{box-shadow:0 0 0 1px var(--line-strong)}}
@keyframes kp-ring2{0%,32%{box-shadow:0 0 0 1px var(--line-strong)}33%,65%{box-shadow:0 0 0 2px var(--ink)}66%,100%{box-shadow:0 0 0 1px var(--line-strong)}}
@keyframes kp-ring3{0%,65%{box-shadow:0 0 0 1px var(--line-strong)}66%,100%{box-shadow:0 0 0 2px var(--ink)}}
.kp-meter{margin-top:4px}
.kp-meter .track{height:10px;border-radius:5px;background:#e9eeec;position:relative;overflow:hidden}
.kp-meter .fill{position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--teal),#5fd7b4);border-radius:5px;transform-origin:left}
.kp-meter .mark{position:absolute;top:-3px;bottom:-3px;left:80%;width:2px;background:var(--signal)}
.kp-meter .lbl{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-top:4px;font-family:var(--mono)}
.kp-warn{display:flex;align-items:center;gap:7px;margin-top:8px;padding:6px 8px;border-radius:7px;background:#f8ebdf;color:#94521c;font-size:10px;font-weight:500;opacity:0}
.is-live .kp-warn{animation:kp-in .4s ease forwards;animation-delay:2.4s}
.is-still .kp-warn{opacity:1}
.kp-caps{display:grid;gap:5px;margin-top:10px}
.kp-caps div{display:grid;grid-template-columns:1fr 60px 40px;gap:8px;align-items:center;font-size:10.5px;color:var(--ink-soft)}
.kp-caps .track{height:5px;border-radius:3px;background:#e9eeec;overflow:hidden}
.kp-caps .fill{display:block;height:100%;width:var(--w);background:var(--navy);border-radius:3px}
.kp-caps b{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--muted);text-align:right}

/* ---- the portal: one rail, four groups, tools as tiles ---------------- */

/* ---- pricing for a partner ------------------------------------------- */
.kp-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.kp-plans .plan{padding:24px}
.kp-plans .plan h3{font-size:17px}
.kp-plans .plan .amt b{font-size:32px}
.kp-plans .plan li{font-size:12.5px}
.kp-plans .plan.featured::before{content:"Opens the Knowledge Agent"}
.kp-plans .plan .btn{margin:16px 0}
.kp-whose{
  margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.kp-whose div{padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--muted);line-height:1.55}
.kp-whose b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px;font-size:14px}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1040px){
  .kp-hero .wrap{grid-template-columns:1fr;gap:34px}
  .kp-hero{text-align:center}
  .kp-hero .lede{margin-inline:auto}
  .kp-hero .hero-actions{justify-content:center}
  .kp-hero-facts{justify-content:center}
  .kp-console{min-height:0}
  .kp-journey-head{align-items:flex-start}
  .kp-journey-track{gap:14px 6px}
  .kp-journey-track::before{display:none}
  .kp-chapter{grid-template-columns:1fr}
  .kp-chapter.flip .kp-copy{order:1}
  .kp-chapter.flip .kp-scene{order:2}
  .kp-scene{min-height:340px}
  .kp-plans{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kp-console{grid-template-columns:1fr}
  .kp-rail{display:none}
  .kp-ways-tabs{display:flex;width:100%}
  .kp-ways-tabs button{flex:1;justify-content:center;padding:9px 8px;font-size:13px;line-height:1.25}
  .kp-ways-tabs button svg{display:none}
  .kp-way-top{grid-template-columns:1fr}
  .kp-way-icon{width:52px;height:52px;border-radius:14px}
  .kp-journey-track{grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .kp-journey-cap{grid-template-columns:1fr}
  .kp-modgrid{grid-template-columns:repeat(2,1fr)}
  .kp-copy{padding:30px 22px}
  .kp-scene{padding:18px;min-height:300px}
  .kp-plans,.kp-whose{grid-template-columns:1fr}
  .kp-run{grid-template-columns:1fr}
  .kp-fams{grid-template-columns:repeat(3,1fr)}
  .kp-heat{grid-template-columns:44px repeat(12,1fr)}
  .kp-matrix{grid-template-columns:78px repeat(4,1fr)}
  .kp-say{display:none}
}
@media (prefers-reduced-motion:reduce){
  .is-live .kp-a,.is-live .kp-grow,.is-live .kp-pop,.is-live .kp-clock i::after,.is-live .kp-q div i::after,
  .is-live .kp-drag,.is-live .kp-unit.target,.is-live .kp-toggle,.is-live .kp-toggle::after,
  .is-live .kp-cell.f::after,.is-live .kp-cell.p::after,.is-live .kp-route span,.is-live .kp-route span.lock b,
  .is-live .kp-route span.lock small,.is-live .kp-days li,.is-live .kp-days li::after,.is-live .kp-appbar,
  .is-live .kp-appbody span.acc,.is-live .kp-acc,.is-live .kp-swatches i,.is-live .kp-warn,
  .kp-way,.kp-way.playing .kp-journey-bar i,.kp-steps li.busy i{animation:none !important}
  .kp-a,.kp-pop,.kp-warn,.kp-q div i::after,.kp-clock i::after,.kp-cell.f::after,.kp-cell.p::after,.kp-days li::after{opacity:1 !important;transform:none !important}
  .kp-grow{transform:none !important}
  .kp-drag{left:36.5% !important;top:74px !important}
  .kp-toggle{background:var(--teal) !important}.kp-toggle::after{transform:translateX(16px) !important}
}

/* the logo above the hero copy, same size as the old product heroes */
.kp-hero .hero-logo{margin:0 0 18px}
.kp-hero h1{font-size:clamp(34px,4vw,52px)}
.split-copy h3 .hl,.split-copy h3 .hl-navy,.kp-copy h3 .hl,.kp-hero h1 .hl,.kp-hero h1 .hl-navy{padding:0 .18em}
.kp-hero .kp-tagline{
  display:block;margin-top:18px;font-family:var(--display);font-size:clamp(17px,1.6vw,21px);
  font-weight:600;letter-spacing:-.02em;color:var(--ink-soft);line-height:1.3;
}
.kp-brand img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.kp-brand img.k{width:auto;height:14px}

/* OpsCon: the same page in the navy family. Everything kp- reads its
   colour from the teal tokens, so redefining them under main.oc reskins
   the console, the chapters, the tiles and the buttons in one place. */
main.oc{
  --teal:var(--navy-700);--teal-600:var(--navy-700);--teal-700:var(--navy);
  --teal-50:#e7edf2;--mint:#dbe4ec;
}
main.oc .kp-hero-facts li::before{background:var(--signal)}
main.oc .kp-rail{background:#071722}
main.oc .kp-rail .kp-rail-t{color:#9fbfd0}
main.oc .kp-live{background:#dbe4ec;color:var(--navy)}
main.oc .kp-live .dot{background:var(--signal);box-shadow:0 0 0 3px rgba(201,114,42,.2)}
main.oc .kp-ways-tabs button[data-way="software"][aria-selected="true"]{background:var(--navy)}
main.oc .kp-ways-tabs button[data-way="consulting"][aria-selected="true"]{background:#2a6f7a}
main.oc .kp-way{--way:#2a6f7a;--way-deep:#1c4f57;--way-soft:#e2f0ee}
main.oc .kp-way[data-way="software"]{--way:var(--navy-700);--way-deep:var(--navy);--way-soft:#e7edf2}
main.oc .kp-scene.v-navy{--v1:#123950;--v2:#071722}
main.oc .kp-scene{--v1:#123950;--v2:#071722}
main.oc .kp-scene.v-mint{--v1:#d9e5ec;--v2:#a9c0cf}
main.oc .kp-scene.v-sand{--v1:#e8d2b8;--v2:#c9722a}
main.oc .kp-scene.v-deep{--v1:#0e3d3c;--v2:#071722}
main.oc .kp-agent>i{background:var(--navy-700)}
main.oc .kp-agent.k>i{background:#2a6f7a}
main.oc .kp-agent.r>i{background:var(--signal)}
main.oc .kp-pdf .stamp{border-color:var(--navy);color:var(--navy)}
main.oc .kp-pdf .tag{background:var(--signal)}
main.oc .kp-plans .plan.featured{border-color:var(--navy-700);box-shadow:0 18px 46px rgba(11,30,44,.16)}
main.oc .kp-plans .plan.featured::before{background:var(--navy-700)}
main.oc .kp-modgrid span i,main.oc .kp-tool i,main.oc .kp-pdf ol li i{background:#e7edf2;color:var(--navy)}
main.oc .kp-stepno,main.oc .kp-stepno i{color:var(--navy)}
main.oc .kp-stepno i{background:#dbe4ec}

/* OpsCon-only scene furniture: the live map inside a chapter, the alert
   ladder, the sitrep. Everything else is the shared kp- vocabulary. */
.kp-radar{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(93,206,178,.28),transparent 48%),linear-gradient(150deg,#0e3d3c,#071722);
  border:1px solid rgba(255,255,255,.12)}
.kp-radar::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}
.kp-radar .ring,.kp-radar .ping{left:50%;top:50%}
.kp-radar .kp-sweep{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;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))}
.is-live .kp-radar .kp-sweep{animation:ov-sweep 5.5s linear infinite}
.kp-radar .map-tag{font-size:10px}
.kp-radar .map-tag b{font-size:12.5px}
.kp-ladder-rungs{display:grid;gap:8px;margin-top:10px}
.kp-rung{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;background:#f7f9f8;border:1px solid var(--line-soft);font-size:11px;color:var(--ink-soft)}
.kp-rung i{font-family:var(--mono);font-size:10px;color:var(--faint)}
.kp-rung b{display:block;font-size:11.5px;color:var(--ink)}
.kp-rung small{display:block;font-size:9.5px;color:var(--faint)}
.kp-rung .tag{font-size:9.5px}
.kp-rung.hot{border-color:#f0c9a8;background:#fff8ee}
.kp-rung.hot .tag{background:var(--signal);color:#fff;border-color:var(--signal)}
.kp-layers{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}
.kp-layer{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid var(--line-soft);background:var(--surface);font-size:10.5px;color:var(--ink)}
.kp-layer i{width:22px;height:12px;border-radius:7px;background:#d8dedc;position:relative;flex:none;transition:background .3s}
.kp-layer i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:#fff;transition:transform .3s}
.kp-layer.on i{background:#2a6f7a}.kp-layer.on i::after{transform:translateX(10px)}
.kp-layer small{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--faint)}
.kp-layer.off{color:var(--faint)}

/* -------------------------------------------------------------------------
   29  Full-circle radars  (home OpsCon visual, About "Our roots")
   The rings used to run past the edges of a 4:3 box. Both stages are now
   square, so every ring closes, and the About radar gets the same sweep
   the home one has.
   ---------------------------------------------------------------------- */
.radar-wrap{aspect-ratio:1/1;max-width:420px;margin-inline:auto}
.radar-wrap::after{
  content:"";position:absolute;left:48%;top:52%;width:92%;aspect-ratio:1;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));
  animation:ov-sweep 5.5s linear infinite;pointer-events:none;
}
.radar-wrap .ring,.radar-wrap .ping,.radar-wrap::after{left:50%;top:50%}
.radar-wrap .ring.r3{width:94%}
.radar-wrap .map-tag{z-index:1}
.ov-map{min-height:0;aspect-ratio:1/1}
.ov-ring,.ov-site,.ov-sweep{top:50%}
.ov-ring.r3,.ov-sweep{width:94%;padding-top:94%}
/* a light crosshair so the disc reads as a scope, not a target */
.ov-map::after{
  content:"";position:absolute;left:50%;top:50%;width:94%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(rgba(159,216,205,.16),rgba(159,216,205,.16)) 50% 0/1px 100% no-repeat,
             linear-gradient(rgba(159,216,205,.16),rgba(159,216,205,.16)) 0 50%/100% 1px no-repeat;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.radar-wrap::after{animation:none}}

/* -------------------------------------------------------------------------
   30  Client cards  (home, "Who we work with")
   The description line is gone. In its place a marker sits in the top-right
   corner carrying the solution areas as icons, and the client name gets a
   small flag for the country it operates in.
   ---------------------------------------------------------------------- */
.ind-card{padding-bottom:22px}
.ind-card .pill{max-width:calc(100% - 92px)}
.ind-mark{
  position:absolute;top:14px;right:14px;z-index:1;display:flex;gap:4px;
  padding:5px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ind-mark span{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);
}
.ind-mark span svg{width:13px;height:13px}
.ind-mark span[data-k="sustainability"]{background:#2f7665}
.ind-mark span[data-k="climate"]{background:#1d969e}
.ind-mark span[data-k="operational"]{background:#c9722a}
.ind-mark span[data-k="early"]{background:#8a3b1c}
.ind-mark span[data-k="compliance"]{background:#103244}
.ind-card h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ind-card .flag{display:inline-block;width:22px;height:15px;border-radius:2.5px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.ind-card .flag svg{display:block;width:100%;height:100%}
.ind-card .ind-tags{position:relative;margin:0;font-size:12px;color:rgba(255,255,255,.72);line-height:1.5}
.ind-key{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:12.5px;color:var(--muted)}
.ind-key span{display:inline-flex;align-items:center;gap:7px}
.ind-key i{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:#fff}
.ind-key i svg{width:10px;height:10px}
.ind-key i[data-k="sustainability"]{background:#2f7665}
.ind-key i[data-k="climate"]{background:#1d969e}
.ind-key i[data-k="operational"]{background:#c9722a}
.ind-key i[data-k="early"]{background:#8a3b1c}
.ind-key i[data-k="compliance"]{background:#103244}
.rail-foot{align-items:flex-start;flex-wrap:wrap;gap:12px}

/* -------------------------------------------------------------------------
   31  Pricing: who is paying, the ladder comparison, the limits modal
   ---------------------------------------------------------------------- */
.who-seg{display:flex;justify-content:center;margin-top:14px}
.who-seg .seg button{padding-inline:22px}
[data-audience]{display:none}
[data-sites-ctl][hidden]{display:none}
[data-audience].on{display:block}
/* the two lines under the hero telling which price list is showing */
.who-lede{max-width:720px;margin:0 auto;text-align:center}

/* partner price list: the four cards, then who pays for what */
.kp-plans .plan .amt{margin-top:14px}
.kp-plans .plan .amt .cur{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1}
.kp-plans .plan .amt b{font-size:32px}
.kp-plans .plan .amt .payg{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1.3;padding:5px 0}
.kp-plans .plan .btn{margin:16px 0}
.kp-plans .plan .desc{min-height:0}
.kp-whose a{display:inline-block;margin-top:6px}

/* the ladder: three columns, each stating what it adds to the one before.
   The full row-by-row table stays behind a toggle. */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin-top:8px}
.ladder-col{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 22px;display:flex;flex-direction:column;gap:14px;
}
.ladder-col.featured{border-color:var(--teal);box-shadow:0 18px 46px rgba(29,150,158,.12)}
.ladder-col h3{font-size:18px;display:flex;align-items:baseline;gap:10px}
.ladder-col h3 small{font-size:12.5px;font-weight:500;color:var(--faint)}
.ladder-col .ladder-from{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--teal-700);
  padding:5px 10px;border-radius:var(--r-pill);background:var(--teal-50);align-self:flex-start;
}
.ladder-col .ladder-from svg{width:11px;height:11px}
.ladder-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ladder-col li{display:grid;grid-template-columns:18px 1fr;gap:9px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.ladder-col li i{width:18px;height:18px;border-radius:6px;background:var(--mint);color:var(--teal-700);display:grid;place-items:center;margin-top:1px}
.ladder-col li i svg{width:10px;height:10px}
.ladder-col li b{color:var(--ink);font-weight:600}
.ladder-col li.up i{background:var(--teal);color:#fff}
.ladder-col .ladder-for{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.ladder-col .ladder-for b{color:var(--ink);font-weight:600}
.ladder-arrow{
  position:absolute;left:-19px;top:34px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;z-index:1;
}
.ladder-arrow svg{width:10px;height:10px}
.ladder-same{
  margin-top:18px;padding:14px 18px;border-radius:var(--r-md);background:var(--canvas-soft);border:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--muted);
}
.ladder-same b{color:var(--ink);font-weight:600;margin-right:4px}
.ladder-same span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);font-size:12.5px}
.ladder-same span::before{content:"\2713";color:var(--teal);font-size:11px}
.ctable-toggle{display:flex;justify-content:center;margin-top:22px}
.ctable-wrap[hidden]{display:none}
.ctable-wrap{margin-top:22px}
@media (max-width:900px){
  .ladder{grid-template-columns:1fr}
  .ladder-arrow{left:26px;top:-11px;transform:rotate(90deg)}
}

/* the limits modal: one table per product, the head carries which one */
.lmodal .modal-panel{width:min(880px,100%)}
.lmodal .modal-body{padding:6px 22px 22px}
.lmodal .ctable-row{grid-template-columns:1.7fr repeat(3,1fr);gap:14px;padding:13px 4px}
.lmodal .ctable .lbl small{max-width:none}
.lmodal .modal-foot p{max-width:none}
[data-limits-panel][hidden]{display:none}
@media (max-width:640px){
  .lmodal .ctable-row{grid-template-columns:1fr;gap:6px}
  .lmodal .ctable-row.head .v{display:none}
  .lmodal .ctable .v::before{content:attr(data-l) ": ";color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
}

/* -------------------------------------------------------------------------
   32  Mobile: the expertise stage fits the screen
   Below 680px the graphic used to scroll sideways; now it scales down so
   the brain and the sphere sit centred in view.
   ---------------------------------------------------------------------- */
@media (max-width:680px){
  .xp-stage{overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:auto;display:flex;justify-content:center}
  .xp-stage svg{min-width:0;width:100%;max-width:100%}
}

/* =========================================================================
   OPSCON SCENE WIDGETS
   Three set pieces that the generic mock vocabulary could not carry:
   the live command console, and the solar forecast report. Both are dark
   panels sitting on the scene gradient, so their colours are written out
   rather than taken from the light-surface tokens.
   ====================================================================== */

/* ---- the command console: one operating picture -------------------- */
.occ{
  width:100%;max-width:462px;border-radius:12px;overflow:hidden;
  background:#0b1f2b;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 44px rgba(4,14,20,.5);color:#cfe0e6;
}
.occ-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0f2b3a;border-bottom:1px solid rgba(255,255,255,.1)}
.occ-bar b{font-size:11.5px;color:#fff;font-weight:600;letter-spacing:-.01em}
.occ-mark{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#3fb9ae,#1d6f7e);flex:none}
.occ-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:600 8.5px var(--mono);letter-spacing:.14em;color:#7fe3c6}
.occ-live i{width:5px;height:5px;border-radius:50%;background:#3ddc97;display:block}
.occ-clock{font-family:var(--mono);font-size:9px;color:#8fb0bd}

.occ-map{position:relative;aspect-ratio:360/172;background:#07161f}
@supports not (aspect-ratio:1){.occ-map{height:176px}}
.occ-map svg{display:block;width:100%;height:100%}
.occ-chips{position:absolute;left:8px;top:8px;display:grid;gap:4px}
.occ-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;background:rgba(6,20,28,.7);border:1px solid rgba(255,255,255,.13);font-size:8.5px;color:#b8cdd6}
.occ-chip i{width:5px;height:5px;border-radius:50%;background:#3ddc97;display:block}
.occ-chip.off{color:#5e7d89}
.occ-chip.off i{background:#3a525d}
.occ-scalebar{position:absolute;right:9px;bottom:8px;font-family:var(--mono);font-size:8px;color:#7d9aa6;border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:2px}

.occ-alert{
  display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:10px;color:#f3c79b;
  background:rgba(201,114,42,.17);border-top:1px solid rgba(224,138,60,.45);border-bottom:1px solid rgba(255,255,255,.07);
}
.occ-alert svg{width:12px;height:12px;flex:none;color:#e08a3c}
.occ-alert b{color:#ffdcb8;font-weight:600}
.occ-alert .own{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:#cfa87f;white-space:nowrap}

.occ-fc{padding:9px 10px 4px}
.occ-fc h6{margin:0 0 7px;font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d9aa6}
.occ-row{display:grid;grid-template-columns:1fr repeat(4,34px);gap:5px;align-items:center;padding:2px 0;font-size:9.5px}
.occ-row span:first-child{color:#d3e3e9}
.occ-row.head{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:#6f8c99;padding-bottom:3px}
.occ-row.head span{text-align:center}
.occ-row.head span:first-child{text-align:left}
.occ-cell{height:16px;border-radius:4px;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-style:normal}
.occ-cell.lo{background:rgba(63,185,174,.22);color:#9fe6da}
.occ-cell.md{background:rgba(217,164,65,.28);color:#f2d5a2}
.occ-cell.hi{background:rgba(201,90,42,.55);color:#ffe2cb}

.occ-key{display:flex;gap:11px;margin-top:7px;padding-top:6px;border-top:1px solid rgba(126,214,200,.1);font:500 8.5px var(--mono);color:#7d9aa6}
.occ-key span{display:inline-flex;align-items:center;gap:5px}
.occ-key i{width:12px;height:9px;border-radius:2px;flex:none}
.occ-foot{
  display:flex;gap:9px;flex-wrap:wrap;padding:7px 10px;font-family:var(--mono);font-size:8px;
  letter-spacing:.07em;color:#6f8c99;border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);
}
.occ-foot .ok{color:#7fe3c6;margin-left:auto}

@keyframes occ-blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes occ-sweep{to{transform:rotate(360deg)}}
@keyframes occ-pulse{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes occ-ping{0%{transform:scale(.45);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.is-live .occ-live i{animation:occ-blink 1.8s ease-in-out infinite}
.is-live .occ-sweep{transform-origin:206px 130px;animation:occ-sweep 7s linear infinite}
.is-live .occ-blob{animation:occ-pulse 3.6s ease-in-out infinite}
.is-live .occ-eye{transform-origin:300px 44px;animation:occ-sweep 11s linear infinite}
.occ-sweep,.occ-eye{transform-box:view-box}
.occ-ping{transform-box:fill-box;transform-origin:center}
.is-live .occ-ping{animation:occ-ping 2.6s ease-out infinite}

/* ---- a heading inside a mock body ---------------------------------- */
.kp-h5{margin:12px 0 6px;font:600 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bar .fill.warn{background:var(--signal)}

/* ---- the solar forecast report ------------------------------------- */
.solr{
  width:100%;max-width:440px;border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 20px 44px rgba(12,42,48,.22);color:var(--ink-soft);
}
.solr-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.solr-bar b{display:block;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.solr-bar small{display:block;font-size:9px;color:var(--faint);line-height:1.35}
.solr-ico{width:22px;height:22px;border-radius:7px;background:var(--mint);color:var(--teal-700);display:grid;place-items:center;flex:none}
.solr-ico svg{width:13px;height:13px}
.solr-risk{margin-left:auto;font:600 8px var(--mono);letter-spacing:.12em;padding:3px 8px;border-radius:var(--r-pill);background:var(--mint);color:var(--teal-700);white-space:nowrap}

.solr-head{display:flex;align-items:flex-start;gap:12px;padding:12px 12px 10px}
.solr-head b{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:5px}
.solr-head em{font-style:normal;font-size:12px;font-weight:500;color:var(--faint);letter-spacing:0}
.solr-head p{margin:0;font-size:10px;line-height:1.5;color:var(--muted)}

.solr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.solr-stats div{background:var(--surface);padding:8px 9px}
.solr-stats small{display:block;font:600 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.solr-stats b{display:block;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-top:3px}
.solr-stats em{display:block;font-style:normal;font-size:8px;color:var(--faint);margin-top:2px;line-height:1.3}

.solr-chart{position:relative;padding:10px 12px 20px}
.solr-cap{display:flex;justify-content:space-between;align-items:baseline;font-size:9px;color:var(--faint);margin-bottom:4px}
.solr-cap b{font-size:9.5px;font-weight:600;color:var(--ink-soft)}
.solr-cap em{font-style:normal;font-family:var(--mono);font-size:8px}
.solr-chart svg{display:block;width:100%;height:84px;overflow:visible}
.solr-band{fill:var(--teal);fill-opacity:.10}
.solr-area{fill:var(--teal);fill-opacity:.24}
.solr-line{fill:none;stroke:var(--teal);stroke-width:1.6;vector-effect:non-scaling-stroke}
.solr-peak{position:absolute;top:18px;transform:translateX(-50%);font-family:var(--mono);font-size:8px;color:var(--teal-700);white-space:nowrap}
.solr-peak i{display:block;width:5px;height:5px;border-radius:50%;background:var(--teal);margin:0 auto 3px}
.solr-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7.5px;color:var(--faint);margin-top:4px}
.solr-axis i{font-style:normal}

.solr-h{margin:0;padding:0 12px;font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.solr-why{display:grid;gap:5px;padding:7px 12px 11px}
.solr-why div{display:grid;grid-template-columns:1fr 64px 34px;gap:8px;align-items:center;font-size:9.5px;color:var(--ink-soft)}
.solr-why i{height:4px;border-radius:2px;display:block;width:var(--w);transform-origin:left}
.solr-why i.neg{background:var(--signal)}
.solr-why i.pos{background:var(--teal)}
.solr-why b{font-family:var(--mono);font-size:9px;font-weight:500;text-align:right;color:var(--muted)}

.solr-next{border-top:1px solid var(--line-soft);padding:8px 12px}
.solr-nrow{display:grid;grid-template-columns:52px 1fr 40px 36px;gap:8px;align-items:center;font-size:9.5px;color:var(--ink-soft);padding:2px 0}
.solr-nrow span:nth-child(3),.solr-nrow span:nth-child(4){font-family:var(--mono);font-size:9px;text-align:right}
.solr-nrow.on{font-weight:600;color:var(--ink)}
.solr-nrow.head{font:600 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-bottom:3px}
.solr-nrow.head span:nth-child(3),.solr-nrow.head span:nth-child(4){font-size:7.5px}

.solr-foot{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line-soft);background:var(--tint);font-size:9px;color:var(--faint)}
.solr-foot .dl{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);background:var(--teal);color:#fff;font-weight:500;font-size:9px}

@media (max-width:640px){
  .solr-stats{grid-template-columns:repeat(2,1fr)}
  .occ-row{grid-template-columns:1fr repeat(4,30px)}
}


/* =========================================================================
   CREDIT VALUE DEMO (pricing)
   A question typed into the Assistant, the dashboard that comes back, and
   what the same page costs commissioned. It runs on the generic [data-scene]
   observer, so it replays whenever it scrolls into view.
   ====================================================================== */
.cvd{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.cvd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.cvd-chat{padding:20px;border-right:1px solid var(--line-soft);background:var(--tint);display:flex;flex-direction:column;gap:9px}
.cvd-head{display:flex;align-items:center;gap:8px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.cvd-dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.cvd-time{margin-left:auto;letter-spacing:.06em}
.cvd-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;background:var(--surface);border:1px solid var(--line-soft);color:var(--ink-soft)}
.cvd-msg b{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700);margin-bottom:4px}
.cvd-msg.me{align-self:flex-end;background:var(--ink);border-color:var(--ink);color:#fff;border-bottom-right-radius:5px}
.cvd-msg.sys{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);background:var(--mint);border-color:#a9d7ce;border-radius:var(--r-pill);padding:7px 13px}
.cvd-msg.sys i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.is-live .cvd-msg.sys i{animation:occ-blink 1.4s ease-in-out infinite}
.cvd-spend{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:var(--r-md);background:var(--mint);border:1px solid #a9d7ce}
.cvd-cr{font-size:12px;color:var(--teal-700)}
.cvd-cr b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.03em}
.cvd-usd{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-left:auto}
.cvd-sec{font-family:var(--mono);font-size:11px;color:var(--teal-700)}

.cvd-dash{padding:20px;display:flex;align-items:center;justify-content:center;background:
  repeating-linear-gradient(115deg,rgba(12,42,48,.025) 0 6px,transparent 6px 14px),var(--canvas)}
.cvd-dash .mock{max-width:100%;width:100%}
.cvd-tbl{margin-top:10px;display:grid;gap:3px}
.cvd-tr{display:grid;grid-template-columns:1fr 74px 30px 46px;gap:8px;align-items:center;font-size:11px;color:var(--ink-soft);padding:3px 0}
.cvd-tr.head{font:600 8px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line-soft);padding-bottom:5px}
.cvd-tr b{font-family:var(--mono);font-size:10px;font-weight:500;text-align:right;color:var(--muted)}
.cvd-sc{font-style:normal;font-family:var(--mono);font-size:9.5px;text-align:center;border-radius:4px;padding:2px 0}
.cvd-sc.hi{background:#f8ebdf;color:#94521c}
.cvd-sc.md{background:#fff3d6;color:#8a6a1a}
.cvd-sc.lo{background:var(--mint);color:var(--teal-700)}

.cvd-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;padding:18px 20px 6px;border-top:1px solid var(--line-soft)}
.cvd-card{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.cvd-card.now{border-color:#a9d7ce;background:var(--mint)}
.cvd-card.was{background:var(--canvas)}
.cvd-k{display:block;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cvd-card.now .cvd-k{color:var(--teal-700)}
.cvd-card b{display:block;font-family:var(--display);font-size:clamp(26px,3.2vw,34px);font-weight:600;letter-spacing:-.035em;color:var(--ink);margin:6px 0 4px;line-height:1}
.cvd-card.was b{color:#8a4e1c}
.cvd-meta{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.cvd-mid{align-self:center;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cvd-note{margin:0;padding:12px 20px 18px;font-size:12px;line-height:1.55;color:var(--faint)}

@media (max-width:880px){
  .cvd-top{grid-template-columns:1fr}
  .cvd-chat{border-right:0;border-bottom:1px solid var(--line-soft)}
  .cvd-vs{grid-template-columns:1fr;gap:10px}
  .cvd-mid{justify-self:center}
}


/* ---- the solar console being assembled (OpsCon, Builder) ------------ */
.solc{
  width:100%;max-width:400px;border-radius:12px;overflow:hidden;background:#0d2230;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 44px rgba(4,14,20,.5);color:#cfe0e6;
}
.solc-bar{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#123044;border-bottom:1px solid rgba(255,255,255,.1)}
.solc-bar b{display:block;font-size:11.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.solc-bar small{display:block;font-family:var(--mono);font-size:8.5px;color:#89aab8;margin-top:1px}
.solc-mark{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#f0b429,#e08a3c);flex:none}
.solc-state{margin-left:auto;font:600 8px var(--mono);letter-spacing:.14em;color:#7fe3c6;padding:3px 8px;border-radius:20px;background:rgba(63,220,151,.12)}
.solc-ask{
  display:flex;gap:7px;align-items:flex-start;margin:10px 11px;padding:9px 11px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);font-size:10.5px;line-height:1.45;color:#dbe9ee;
}
.solc-ask i{font-style:normal;color:#5fe3d0;font-weight:700}
.solc-list{padding:0 8px 4px;display:grid;gap:2px;max-height:none}
.solc-grp{padding:9px 4px 4px;font:600 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6f8c99}
.solc-mod{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:8px}
.solc-mod:first-of-type{background:rgba(255,255,255,.05);box-shadow:inset 2px 0 0 #5fe3d0}
.solc-ico{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none;color:#bcd6de}
.solc-ico svg{width:13px;height:13px}
.solc-txt{min-width:0;flex:1}
.solc-txt b{display:block;font-size:10.5px;font-weight:600;color:#f2f7f8;letter-spacing:-.01em}
.solc-txt small{display:block;font-size:8.5px;color:#8fb0bd;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.solc-dot{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal}
.solc-dot.ok{background:#3ddc97}
.solc-dot.warn{background:#d9a441}
.solc-dot.bad{background:#e0603c}
.is-live .solc-dot.bad{animation:occ-blink 1.7s ease-in-out infinite}
.solc-foot{
  display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 11px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.08em;color:#7d9aa6;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
}
.solc-foot b{color:#e8f3f5;font-size:10px}
.solc-foot .ok{margin-left:auto;color:#7fe3c6}

/* ---- the modelling run (OpsCon, Model) ----------------------------- */
.mdl{
  width:100%;max-width:440px;border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 20px 44px rgba(12,42,48,.24);
}
.mdl-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.mdl-bar b{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mdl-mark{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,var(--teal),#2f5f72);flex:none}
.mdl-state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:600 8px var(--mono);letter-spacing:.14em;color:var(--teal-700);background:var(--mint);padding:3px 9px;border-radius:20px}
.mdl-state i{width:5px;height:5px;border-radius:50%;background:var(--teal);display:block}
.is-live .mdl-state i{animation:occ-blink 1.3s ease-in-out infinite}
.mdl-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border-bottom:1px solid var(--line-soft)}
.mdl-spec div{background:var(--surface);padding:8px 10px}
.mdl-spec small{display:block;font:600 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mdl-spec b{display:block;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin-top:3px}
.mdl-spec em{display:block;font-style:normal;font-size:8.5px;color:var(--faint);margin-top:1px}
.mdl .kp-route{margin:11px 12px 0}
.mdl-log{padding:11px 12px 4px}
.mdl-log h6,.mdl-h{margin:0 0 6px;font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mdl-h{padding:8px 12px 0}
.mdl-step{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;font-size:10.5px;color:var(--ink-soft);padding:2.5px 0}
.mdl-step i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-strong);display:block;position:relative}
.mdl-step i.ok{background:var(--teal);border-color:var(--teal)}
.mdl-step i.ok::after{content:"";position:absolute;left:3px;top:3.2px;width:5px;height:2.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.mdl-step i.run{border-color:var(--teal);border-top-color:transparent}
.is-live .mdl-step i.run{animation:mdl-spin .9s linear infinite}
@keyframes mdl-spin{to{transform:rotate(360deg)}}
.mdl-step em{font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--faint)}
.mdl .bars{padding:0 12px}
.mdl-curve{padding:10px 12px 2px}
.mdl-cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.mdl-cap b{font:600 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mdl-cap em{font-style:normal;font-family:var(--mono);font-size:8px;color:var(--faint)}
.mdl-curve svg{display:block;width:100%;height:58px}
.mdl-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);margin-top:11px;border-top:1px solid var(--line-soft)}
.mdl-out div{background:var(--tint);padding:9px 10px}
.mdl-out small{display:block;font:600 7.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mdl-out b{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-top:3px}


/* ---- the spend calculator (pricing) -------------------------------- */
.calc-shell{margin-top:6px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.calc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.calc-in{padding:24px;border-right:1px solid var(--line-soft)}
.calc-in h3{font-size:17px;margin:0 0 4px}
.calc-lead{font-size:13px;color:var(--muted);margin:0 0 16px}
.calc-row{display:grid;grid-template-columns:1fr 132px 78px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line-soft)}
.calc-row:last-child{border-bottom:0}
.calc-lbl b{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.calc-lbl small{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.calc-row input[type=range]{width:100%;accent-color:var(--teal);cursor:pointer}
.calc-val{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
.calc-val em{display:block;font-style:normal;font-size:10.5px;color:var(--faint);margin-top:1px}
.calc-out{padding:24px;background:var(--tint);display:flex;flex-direction:column;gap:14px}
.calc-k{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.calc-big{font-family:var(--display);font-size:clamp(36px,4.4vw,46px);font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1}
.calc-per{font-size:15px;font-weight:500;color:var(--faint);margin-left:6px}
.calc-cr{font-family:var(--mono);font-size:12.5px;color:var(--teal-700);margin-top:7px}
.calc-cover{padding:13px 15px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.calc-cover b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.calc-cover span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block}
.calc-meter{height:9px;border-radius:5px;background:#e9eeec;overflow:hidden;margin:9px 0 7px}
.calc-meter i{display:block;height:100%;background:var(--teal);border-radius:5px;transition:width .22s ease}
.calc-meter i.over{background:var(--signal)}
.calc-note{font-size:12px;color:var(--faint);line-height:1.55;margin:auto 0 0}
@media (max-width:960px){
  .calc{grid-template-columns:1fr}
  .calc-in{border-right:0;border-bottom:1px solid var(--line-soft)}
}
@media (max-width:560px){
  .calc-row{grid-template-columns:1fr 78px;row-gap:7px}
  .calc-row input[type=range]{grid-column:1/-1;order:3}
}


/* ---- the GIS view demo (pricing, OpsCon) --------------------------- */
.gisv{width:100%;border-radius:12px;overflow:hidden;background:#0b1f2b;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(4,14,20,.42);color:#cfe0e6}
.gisv-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0f2b3a;border-bottom:1px solid rgba(255,255,255,.1)}
.gisv-bar b{font-size:11.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.gisv-mark{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,#3fb9ae,#1d6f7e);flex:none}
.gisv-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:600 8.5px var(--mono);letter-spacing:.14em;color:#7fe3c6}
.gisv-live i{width:5px;height:5px;border-radius:50%;background:#3ddc97;display:block}
.is-live .gisv-live i{animation:occ-blink 1.8s ease-in-out infinite}
.gisv-map{position:relative;aspect-ratio:340/150;background:#0a1b24}
.gisv-map svg{display:block;width:100%;height:100%}
.is-live .gisv-clouds{animation:gisv-drift 9s ease-in-out infinite alternate}
@keyframes gisv-drift{from{transform:translateX(0)}to{transform:translateX(-16px)}}
.gisv-chips{position:absolute;left:8px;top:8px;display:grid;gap:4px}
.gisv-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;background:rgba(6,20,28,.72);border:1px solid rgba(255,255,255,.13);font-size:8.5px;color:#b8cdd6}
.gisv-chip i{width:5px;height:5px;border-radius:50%;background:#3ddc97;display:block}
.gisv-chip.off{color:#5e7d89}.gisv-chip.off i{background:#3a525d}
.gisv-player{display:flex;align-items:center;gap:9px;padding:9px 10px 5px}
.gisv-play{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;color:#cfe0e6}
.gisv-play svg{width:9px;height:9px}
.gisv-track{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.gisv-fill{position:absolute;inset:0;width:0;border-radius:3px;background:linear-gradient(90deg,#1d6f7e,#5fe3d0)}
.gisv-head{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(95,227,208,.5)}
.is-live .gisv-fill{animation:gisv-run 6s linear infinite}
.is-live .gisv-head{animation:gisv-head 6s linear infinite}
@keyframes gisv-run{from{width:4%}to{width:94%}}
@keyframes gisv-head{from{left:4%}to{left:94%}}
.gisv-speed{font:600 9px var(--mono);letter-spacing:.06em;color:#7fe3c6;background:rgba(63,220,151,.14);padding:3px 7px;border-radius:20px;flex:none}
.gisv-scale{display:flex;justify-content:space-between;padding:0 10px 8px;font-family:var(--mono);font-size:7.5px;color:#6f8c99}
.gisv-foot{display:flex;gap:9px;flex-wrap:wrap;padding:7px 10px;font-family:var(--mono);font-size:8px;letter-spacing:.07em;color:#6f8c99;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.gisv-foot .ok{color:#7fe3c6;margin-left:auto}

/* the credit breakdown under the chat */
.cvd-break{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:10px;padding:11px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:11.5px;color:var(--muted);line-height:1.45}
.cvd-break b{color:var(--ink);font-weight:600}
.cvd-break em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--teal-700);text-align:right}
.cvd-break .tot{border-top:1px solid var(--line-soft);padding-top:6px;margin-top:2px}
.cvd-break em.tot{color:var(--ink);font-weight:600}


/* ---- the two-audience blocks on the home page ---------------------- */
.who-head{text-align:center;margin:52px 0 20px}
.who-head .eyebrow{display:block;margin:0 0 8px}
.who-head h2{font-size:clamp(26px,3.2vw,36px)}
.who-two{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.who-two .card{padding:26px}
.who-two .eyebrow{margin:0 0 8px;display:block}
.who-two h3{font-size:19px;letter-spacing:-.02em}
.who-two p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6}
.who-both{
  margin-top:18px;padding:22px 26px;border-radius:var(--r-lg);text-align:center;
  background:var(--ink);color:rgba(255,255,255,.82);
}
.who-both b{display:block;font-family:var(--display);font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.03em;color:#fff;margin-bottom:8px}
.who-both p{margin:0 auto;max-width:640px;font-size:14.5px;line-height:1.6}
@media (max-width:860px){
  .who-two{grid-template-columns:1fr}
  .xp-stage{max-width:100%}
}

/* a paid-extra tag on a plan line, so "one-off setup fee" reads as a
   condition of the feature rather than as a parenthesis after it */
.fee{
  display:inline-block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--signal-50,#f8ebdf);color:#94521c;white-space:nowrap;
  width:fit-content;margin-top:5px;
}
/* on a plan card the tag sits on its own line under the feature it qualifies */
.plan li > span{display:block}
/* same in a comparison-table cell: the tick says the feature is available,
   the tag underneath says it is not in the monthly price */
.ctable .v .fee{display:block;margin-top:5px}
/* in the on-every-plan strip it rides alongside the label */
.ladder-same .fee{margin:0 0 0 7px;vertical-align:middle}

/* the one thing a reader needs to know about paying for credits */
.pay-choice{
  padding:22px 26px;border-radius:var(--r-lg);background:var(--tint);border:1px solid var(--line);
}
.pay-choice h3{font-size:clamp(18px,2.1vw,22px);letter-spacing:-.02em;color:var(--ink)}
.pay-choice p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:680px}
.pay-choice .pay-note{margin-top:7px;font-size:13.5px;color:var(--faint)}

/* ---- About: the two split panels read as one stack ------------------- */
/* Why we exist and Our roots are two cards in a row. Two full section
   paddings put a 208px void between them; one gap is enough. */
#why{padding-bottom:26px}
#roots{padding-top:26px}

/* -------------------------------------------------------------------------
   Legal pages (privacy, terms, data processing, security)
   Long prose with a contents rail. Measure is capped so a clause stays
   readable, and every [BLANK] is marked so nothing unfilled ships quietly.
   ---------------------------------------------------------------------- */
.legal-date{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--faint)}
.legal-date a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}

.legal-grid{display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;align-items:start}
.legal-toc{position:sticky;top:92px}
.legal-toc nav{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.legal-toc nav a{
  font-size:13px;line-height:1.4;color:var(--muted);padding:5px 10px;
  border-left:2px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.legal-toc nav a:hover{color:var(--ink);background:var(--tint);border-left-color:var(--teal)}
.legal-also{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.legal-also a{display:block;font-size:13px;color:var(--muted);padding:4px 0}
.legal-also a:hover{color:var(--ink)}
.legal-also a.on{color:var(--teal-700);font-weight:600}

.legal > section{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line-soft)}
.legal > section:last-child{border-bottom:0;margin-bottom:0}
.legal h2{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.025em;scroll-margin-top:96px}
.legal h3{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:22px}
.legal p{margin-top:13px;color:var(--ink-soft);font-size:15px;line-height:1.72;max-width:66ch}
.legal h2 + p,.legal h3 + p{margin-top:11px}
.legal ul{margin-top:13px;display:flex;flex-direction:column;gap:8px;max-width:66ch;list-style:none;padding-left:0}
.legal li{
  position:relative;padding-left:20px;color:var(--ink-soft);font-size:15px;line-height:1.66;
}
.legal li::before{
  content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--teal);opacity:.55;
}
.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
.legal .legal-note{
  margin-top:16px;padding:16px 20px;border-radius:var(--r-lg);
  background:var(--tint);border-left:3px solid var(--teal);color:var(--ink-soft);
}
/* a blank waiting to be filled in, so it cannot be missed in a proof-read */
.legal .fill,.legal-note .fill{
  font-style:normal;font-family:var(--mono);font-size:12.5px;font-weight:500;
  background:var(--signal-50,#f8ebdf);color:#94521c;
  padding:1px 6px;border-radius:var(--r-sm);
}

@media (max-width:920px){
  .legal-grid{grid-template-columns:1fr;gap:26px}
  .legal-toc{position:static}
  .legal-toc nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .legal-toc nav a{border-left:0;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
  .legal-also a{display:inline-block;margin-right:16px}
}

/* ---- investor logos ------------------------------------------------- */
/* Three logos with very different proportions: a three-line stacked mark,
   a single-line wordmark and a near-square mark. Matching their heights
   would make the wordmark tower over the rest, so each carries its own --h,
   set so all three cover roughly the same area of ink. The tiles are one
   height, so the row still reads as a row. */
.logos-investors{gap:14px}
.logos-investors .logo-slot{
  display:grid;place-items:center;height:88px;min-width:190px;padding:16px 26px;
  border-radius:var(--r-lg);
}
.logos-investors img{
  height:var(--h);width:auto;max-width:100%;object-fit:contain;display:block;
}
@media (max-width:620px){
  .logos-investors .logo-slot{min-width:0;width:100%;height:80px}
}

/* ---- section rhythm: one gap between sections, not two ---------------- */
/* Two full-width sections stack two 104px paddings into a 208px void,
   while a page opens at about 80px under the nav and the last block meets
   the footer at 96px. Where the background does not change there is no
   band edge to justify the double gap, so the pair shares one: 104 + 40,
   which still reads as a break without the hole. A band boundary keeps
   its full padding on both sides, because there the edge is the point. */
.section:not(.band) + .section:not(.band):not(.cta-band),
.section.band + .section.band{padding-top:40px}

/* ---- the client logo row --------------------------------------------- */
/* Eighteen logos whose proportions run from 6.3:1 to 0.6:1. Matching their
   heights would leave the wordmarks towering over the square marks, so each
   carries its own --h, set from its measured ink coverage so all of them
   cover about the same area. The scrolling itself is the shared .marquee
   machinery: the list is duplicated and the track slides exactly -50%, so
   the loop has no seam. */
.marquee.clients{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee.clients .marquee-track{gap:0;align-items:center;animation-duration:64s}
.marquee.clients img{
  height:var(--h);width:auto;flex:none;
  margin:0 42px;                 /* the gap lives here so it never doubles at the seam */
  opacity:.82;
  filter:saturate(.92);
  transition:opacity .2s ease, filter .2s ease;
}
.marquee.clients img:hover{opacity:1;filter:none}
@media (max-width:700px){
  .marquee.clients img{margin:0 26px}
  .marquee.clients .marquee-track{animation-duration:46s}
}

/* ---- the logo band, straight under the hero's trust line -------------- */
/* The line above it already names who these are, so the row carries no
   heading of its own. It needs real air on both sides instead: without a
   heading there is nothing to separate it from the hero above or the fork
   below, and a bare strip of marks reads as part of whatever it touches. */
/* The logos belong to the trust line above them, so they sit close to it and
   keep their distance from what follows. That is the opposite of the even
   spacing this band had when it was its own section with its own heading.
   .hero is shared with the product pages, so its 60px bottom padding is
   pulled back here rather than reduced at the source. */
.clients-band{margin-top:-26px;padding:0 0 48px}
/* .who-head brought its own 52px top margin from when it followed the
   platform cards. Here it opens a section that already has padding, so the
   margin would stack on top of it. */
#who .who-head{margin-top:0}
@media (max-width:700px){
  .clients-band{margin-top:-18px;padding:0 0 34px}
}

/* ---- the two fork cards, each with its own little story --------------- */
/* Three panels and two arrows: both sides of the fork are a sequence, not a
   picture. Everything is CSS on the shared [data-scene] runner, so it
   restarts when the block scrolls in and sits at its finished state under
   prefers-reduced-motion. */
.wsc{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;
  gap:8px;margin-bottom:20px;padding:16px 14px;
  background:var(--tint);border-radius:var(--r-lg);
}
.wsc-p{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.wsc-cap{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);text-align:center;line-height:1.3;
  /* "Agents deliver the need" needs two lines. Bottom-aligning a fixed
     two-line box keeps every plate on the same line whatever the caption
     length, which a plain wrap would not. */
  min-height:2.6em;display:flex;align-items:flex-end;justify-content:center;
}
.wsc-arw{width:15px;height:15px;color:var(--teal);opacity:.5;flex:none}

/* --- panel bodies: one shared plate, different innards ----------------- */
.wsc-bub,.wsc-signin,.wsc-win,.wsc-agents,.wsc-chart,.wsc-pdf,.wsc-build{
  width:100%;height:62px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);display:flex;
}

/* 1a. the ask */
.wsc-bub{
  align-items:center;padding:0 9px;font-size:9.5px;line-height:1.35;
  color:var(--ink-soft);text-align:left;
}
.wsc-car{
  display:inline-block;width:1px;height:9px;margin-left:2px;vertical-align:-1px;
  background:var(--teal);
}
.is-live .wsc-car{animation:wsc-blink 1s steps(2) infinite}
@keyframes wsc-blink{50%{opacity:0}}

/* 1b. their branded sign-in */
.wsc-signin{flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 12px}
.wsc-mark{width:13px;height:13px;border-radius:4px;background:var(--teal);flex:none}
.wsc-fld{width:100%;height:5px;border-radius:2px;background:var(--line-soft)}
.wsc-go{width:100%;height:8px;border-radius:3px;background:var(--teal);margin-top:1px}

/* 1c. the app they log into */
.wsc-win{flex-direction:column;overflow:hidden;padding:0}
.wsc-bar{height:9px;background:var(--line-soft);flex:none}
.wsc-body{display:flex;flex:1;min-height:0}
.wsc-side{width:12px;background:var(--navy);flex:none;opacity:.82}
.wsc-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;flex:1}
.wsc-grid i{border-radius:2px;background:var(--mint)}

/* 2a. the agents inside it */
.wsc-agents{flex-direction:column;justify-content:center;gap:5px;padding:0 9px;position:relative}
.wsc-agents i{height:6px;border-radius:3px;background:var(--line-soft)}
.wsc-agents i.on{background:var(--teal)}
/* This row is both a .kp-a (fade up on entry) and a pulse. A second rule
   would REPLACE kp-in rather than add to it -- .kp-a's base transform would
   then never clear and the row would sit 6px below its siblings for good.
   So both animations are declared together. */
.is-live .wsc-agents i.on{
  animation:kp-in .5s ease var(--d,0s) forwards,
            wsc-pulse 1.5s ease-in-out .9s infinite;
}
@keyframes wsc-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* 2b. the dashboard they draw */
.wsc-chart{align-items:flex-end;gap:4px;padding:7px 9px}
.wsc-chart i{
  flex:1;border-radius:2px 2px 0 0;background:var(--teal);opacity:.72;
  height:var(--h);transform:scaleY(0);transform-origin:bottom;
}
.is-live .wsc-chart i{animation:wsc-rise .6s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d)}
@keyframes wsc-rise{to{transform:scaleY(1)}}
.is-still .wsc-chart i{transform:none}

/* 2c. what gets filed */
.wsc-pdf{flex-direction:column;justify-content:center;gap:4px;padding:0 10px;position:relative}
.wsc-ln{height:4px;border-radius:2px;background:var(--line-soft)}
.wsc-ln.s{width:62%}
.wsc-pdf em{
  position:absolute;right:7px;bottom:6px;font-style:normal;
  font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.06em;
  padding:2px 5px;border-radius:4px;background:var(--signal-50,#f8ebdf);color:#94521c;
}

@media (max-width:900px){
  .wsc{grid-template-columns:1fr auto 1fr;gap:7px 6px;row-gap:12px}
  .wsc .wsc-p:last-child{grid-column:1 / -1}
  .wsc .wsc-arw:last-of-type{display:none}
}
@media (max-width:560px){
  .wsc{padding:14px 12px}
  .wsc-bub{font-size:9px}
}


/* ======================================================================
   SCENE KIT  --  the rebuilt step scenes on Komplee and OpsCon.
   Entrances come from .kp-a / .kp-pop / .kp-grow so the [data-scene]
   runner rewinds and replays them like every other scene on the site.
   ====================================================================== */
.sc{width:100%;max-width:430px;display:grid;gap:9px}
.sc .mock{max-width:none}
.kp-scene .sc .mock{max-width:none}

/* a file, a dataset or an upload landing in the panel */
.sc-drop{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;background:#f7f9f8;border:1px solid var(--line-soft)}
.sc-drop>svg{width:15px;height:15px;color:var(--teal-700);flex:none}
.sc-drop b{display:block;font-size:11px;color:var(--ink);font-weight:600;line-height:1.3}
.sc-drop small{display:block;font-size:9.5px;color:var(--faint);margin-top:1px}
.sc-drop .tag{margin-left:auto;flex:none}

/* "this becomes that" rows */
.sc-map{margin-top:10px;display:grid;gap:5px}
.sc-map div{display:grid;grid-template-columns:1fr 14px auto;gap:7px;align-items:center;font-size:10.5px;color:var(--ink-soft)}
.sc-map div i{font-style:normal;color:var(--faint);text-align:center}
.sc-map div em{font-style:normal;color:var(--teal-700);font-family:var(--mono);font-size:10px}

/* the saved artefact */
.sc-card{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 10px;border-radius:9px;border:1px solid var(--line-soft);background:var(--surface)}
.sc-card .ico{width:24px;height:24px;border-radius:7px;background:var(--navy-700);color:#fff;display:grid;place-items:center;font:600 10px var(--display);flex:none}
.sc-card b{display:block;font-size:11px;color:var(--ink);line-height:1.3}
.sc-card small{display:block;font-size:9.5px;color:var(--faint);margin-top:1px}
.sc-card .tag{margin-left:auto;flex:none}

/* the one click that turns it into an application */
.sc-go{position:relative;margin:11px 0 0;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--ink);color:#fff;font:600 10.5px var(--display)}
.sc-cur{position:absolute;right:-13px;bottom:-12px;width:13px;height:13px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));opacity:0;transform:translateY(6px)}
/* entrance AND tap in one shorthand, so the tap cannot replace the entrance */
.is-live .sc-cur{animation:kp-in .4s ease var(--d,0s) forwards,sc-tap 1.1s ease var(--t,0s) 2}
@keyframes sc-tap{0%,100%{transform:none}45%{transform:translate(-2px,-2px) scale(.86)}}
.is-still .sc-cur{opacity:1;transform:none}

/* the application that comes out the other end */
.sc-app{margin-top:11px;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;background:var(--surface)}
.sc-app .kp-appbar{border-radius:0}
.sc-app .kp-modgrid{margin:8px;gap:5px}
.sc-app .kp-modgrid span{font-size:9px;padding:7px 4px}

/* wider answer column for longer typed answers */
.sc-q2 div{grid-template-columns:1fr 118px}

/* ---- Builder: the conversation beside the workflow it is filling in ---- */
.sc-build{width:100%;max-width:430px;display:grid;gap:10px}
.sc-build .kp-chat{max-width:none}
.sc-build .bubble{font-size:11.5px;padding:9px 11px}
.sc-wf{list-style:none;margin:0;padding:9px;display:grid;gap:5px;border-radius:12px;background:var(--surface);box-shadow:0 10px 30px rgba(4,16,22,.22)}
.sc-wf li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;padding:6px 7px;border-radius:8px;background:#f7f9f8}
.sc-wf li>i{width:18px;height:18px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.sc-wf li>i::after{content:"";width:7px;height:4px;border:1.8px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.sc-wf li b{display:block;font-size:10.5px;color:var(--ink);font-weight:600}
.sc-wf li small{display:block;font-size:9.5px;color:var(--faint);margin-top:1px}
.sc-wf li em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--teal-700)}
.sc-wf li.on{background:var(--ink)}
.sc-wf li.on>i{background:#fff}
.sc-wf li.on>i::after{border-color:var(--ink)}
.sc-wf li.on b{color:#fff}
.sc-wf li.on small{color:rgba(255,255,255,.62)}
.sc-wf li.on em{color:#8fe3cf}

/* ---- the agents working inside a delivered application --------------- */
.sc-ag{width:100%;max-width:430px;display:grid;gap:8px}
.sc-msg{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;padding:9px 10px;border-radius:11px;background:var(--surface);box-shadow:0 8px 24px rgba(4,16,22,.2)}
.sc-av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font:600 10px var(--display)}
.sc-av.a1{background:var(--navy-700)}
.sc-av.a2{background:var(--teal)}
.sc-av.a3{background:#2f8f6c}
.sc-av.a4{background:#c9722a}
.sc-msg b{display:block;font-size:10px;color:var(--faint);font-weight:500}
.sc-msg p{margin:2px 0 0;font-size:11.5px;color:var(--ink);line-height:1.4}
.sc-file{display:flex;align-items:center;gap:8px;margin-left:32px;padding:7px 10px;border-radius:9px;background:var(--mint);color:var(--teal-700);font-family:var(--mono);font-size:10px}
.sc-file .tag{margin-left:auto;background:#fff}
.sc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sc-chips i{font-style:normal;font-family:var(--mono);font-size:9px;padding:3px 7px;border-radius:999px;background:#f2f6f4;border:1px solid var(--line-soft);color:var(--ink-soft)}
.sc-bars{display:flex;align-items:flex-end;gap:4px;height:46px;margin-top:7px}
.sc-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--teal),#7fc9cb);transform-origin:bottom;transform:scaleY(0)}
.is-live .sc-bars i{animation:sc-rise .6s cubic-bezier(.2,.8,.3,1) var(--d,0s) forwards}
@keyframes sc-rise{to{transform:none}}
.is-still .sc-bars i{transform:none}
.sc-bars i.n2{background:linear-gradient(to top,#3f7fa3,#a6d4e8)}
.sc-legend{display:flex;gap:10px;margin-top:6px;font-size:9px;color:var(--faint);font-family:var(--mono)}
.sc-legend span{display:inline-flex;align-items:center;gap:4px}
.sc-legend i{width:7px;height:7px;border-radius:2px;background:var(--teal);display:block}
.sc-legend i.n2{background:#6aa8c6}

/* ---- picking an agent, running a check, handing over the result ------ */
.sc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sc-tiles span{position:relative;padding:9px 5px;border-radius:9px;background:rgba(255,255,255,.9);border:1px solid rgba(12,42,48,.1);font:600 9.5px var(--display);color:var(--ink);text-align:center;display:grid;gap:5px;justify-items:center}
.sc-tiles span u{width:20px;height:20px;border-radius:6px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center;text-decoration:none}
.sc-tiles span u svg{width:12px;height:12px}
.sc-tiles span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sc-tiles span.on u{background:rgba(255,255,255,.16);color:#fff}
.sc-chk{display:grid;gap:5px;margin-top:2px}
.sc-chk div{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ink-soft)}
.sc-tick{width:15px;height:15px;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.sc-tick::after{content:"";width:6px;height:3.5px;border:1.7px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.sc-tick.warn{background:var(--signal)}
.sc-chk div small{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--faint)}
.sc-outs{display:flex;gap:6px;margin-top:11px}
.sc-outs span{flex:1;display:grid;gap:4px;justify-items:center;padding:8px 4px;border-radius:9px;background:#f7f9f8;border:1px solid var(--line-soft);font:600 9.5px var(--display);color:var(--ink)}
.sc-outs span svg{width:13px;height:13px;color:var(--teal-700)}
.sc-outs span.selected{background:var(--ink);border-color:var(--ink);color:#fff}
.sc-outs span.selected svg{color:#fff}

/* ---- OpsCon: parameters, thresholds, and the picture they produce ---- */
.sc-cc{width:100%;max-width:430px;display:grid;gap:9px}
.sc-cc .kp-chat{max-width:none}
.sc-cc .bubble{font-size:11.5px;padding:9px 11px}
.sc-params{display:flex;flex-wrap:wrap;gap:6px}
.sc-params span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.93);border:1px solid rgba(12,42,48,.1);font:600 10px var(--display);color:var(--ink)}
.sc-params span svg{width:11px;height:11px;color:var(--navy)}
.sc-panel{border-radius:12px;background:#07161f;border:1px solid rgba(126,214,200,.16);overflow:hidden}
.sc-panel h6{margin:0;padding:8px 11px;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7fb4c4;border-bottom:1px solid rgba(126,214,200,.12)}
.sc-thr{display:grid;gap:6px;padding:9px 11px}
.sc-thr div{display:grid;grid-template-columns:78px 1fr auto;gap:9px;align-items:center;font-size:10px;color:#cfe3e8;font-family:var(--mono)}
.sc-thr .scale{display:flex;gap:3px;height:7px}
.sc-thr .scale i{flex:1;border-radius:2px;transform-origin:left;transform:scaleX(0)}
.is-live .sc-thr .scale i{animation:kp-growx .5s cubic-bezier(.2,.8,.3,1) var(--d,0s) forwards}
.is-still .sc-thr .scale i{transform:none}
.sc-thr .scale i.g{background:#3fae86}
.sc-thr .scale i.y{background:#e0b23c}
.sc-thr .scale i.r{background:#d05b3a}
.sc-thr em{font-style:normal;color:#8fd8c8;font-size:9.5px}
.sc-gis{position:relative;line-height:0}
.sc-gis svg{width:100%;height:auto;display:block}
.sc-gis .sc-chips2{position:absolute;left:8px;top:8px;display:grid;gap:4px;line-height:1.2}
.sc-chips2 span{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:rgba(7,22,31,.78);border:1px solid rgba(126,214,200,.22);font:500 8.5px var(--mono);color:#bcdbe3}
.sc-chips2 span i{width:6px;height:6px;border-radius:2px;background:#5fe3d0;display:block}
.sc-chips2 span.n2 i{background:#e08a3c}
.sc-chips2 span.n3 i{background:#ffe9a8}
.sc-time{display:flex;align-items:center;gap:0;padding:7px 11px 9px;border-top:1px solid rgba(126,214,200,.12)}
.sc-time span{flex:1;text-align:center;font:500 8.5px var(--mono);color:#7fb4c4;position:relative;padding-top:11px}
.sc-time span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:rgba(126,214,200,.3)}
.sc-time span.on{color:#f3d3b2}
.sc-time span.on::before{background:#e08a3c;width:2px}
.sc-time .bar{position:absolute;left:11px;right:11px;height:2px;background:rgba(126,214,200,.18);border-radius:2px}

/* the eye of the storm tracking along its path */
.sc-storm{transform-box:fill-box;transform-origin:center}
.is-live .sc-storm{animation:sc-track 7s cubic-bezier(.4,0,.6,1) .9s infinite}
@keyframes sc-track{0%{transform:translate(0,0)}100%{transform:translate(var(--tx,-76px),var(--ty,42px))}}
.is-still .sc-storm{transform:translate(calc(var(--tx,-76px) / 2),calc(var(--ty,42px) / 2))}
.sc-swirl{transform-box:fill-box;transform-origin:center}
.sc-bolt{transform-box:fill-box;transform-origin:center}
.sc-glow{opacity:0}
.is-live .sc-glow{animation:sc-flash 1.7s ease var(--d,0s) infinite}
@keyframes sc-flash{0%,100%{opacity:0}18%{opacity:1}40%{opacity:.25}}
.is-still .sc-glow{opacity:.5}
.is-live .sc-swirl{animation:sc-spin 3.4s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}

/* ---- OpsCon: the needs a console is configured around ---------------- */
.sc-needs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc-needs div{display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.93);border:1px solid rgba(12,42,48,.1)}
.sc-needs div u{width:20px;height:20px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;text-decoration:none;flex:none}
.sc-needs div u svg{width:11px;height:11px}
.sc-needs b{display:block;font-size:10px;color:var(--ink);font-weight:600;line-height:1.25}
.sc-needs small{display:block;font-size:9px;color:var(--faint);margin-top:1px}
.sc-pub{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#0e3d3c;color:#fff;font:600 10.5px var(--display)}
.sc-cock{border-radius:11px;overflow:hidden;background:#07161f;border:1px solid rgba(126,214,200,.16)}
.sc-cock .sc-ctop{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(126,214,200,.12);font:600 10px var(--display);color:#dcecef}
.sc-cock .sc-ctop i{width:8px;height:8px;border-radius:50%;background:#5fe3d0;flex:none}
.sc-cock .sc-ctop em{margin-left:auto;font-style:normal;font:500 8.5px var(--mono);color:#7fb4c4}
.sc-cgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:rgba(126,214,200,.12)}
.sc-cgrid>div{background:#07161f;padding:8px 9px}
.sc-cgrid h6{margin:0 0 6px;font:500 8px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6ea7b8}
.sc-ctab{display:grid;gap:3px;font-family:var(--mono);font-size:9px;color:#bcdbe3}
.sc-ctab div{display:grid;grid-template-columns:1fr auto auto auto;gap:4px;align-items:center}
.sc-ctab i{font-style:normal;text-align:center;border-radius:2px;padding:1px 0;background:rgba(95,227,208,.16);color:#8fe3cf}
.sc-ctab i.md{background:rgba(224,178,60,.2);color:#f0d49a}
.sc-ctab i.hi{background:rgba(208,91,58,.26);color:#f3b49a}

@media (max-width:860px){
  .sc,.sc-build,.sc-ag,.sc-cc{max-width:400px}
}
@media (max-width:560px){
  .sc-tiles{grid-template-columns:repeat(2,1fr)}
  .sc-needs{grid-template-columns:1fr}
  .sc-cgrid{grid-template-columns:1fr}
}


/* ======================================================================
   SCENE KIT ADDITIONS
   ====================================================================== */

/* the Agent assembling the app, between the ask and the sign-in */
.wsc-build{flex-direction:column;justify-content:center;gap:5px;padding:0 10px;position:relative}
.wsc-bl{height:6px;border-radius:3px;background:var(--teal);opacity:.72;transform-origin:left}
.wsc-bl.w70{width:70%}
.wsc-bl.w85{width:85%}
.wsc-tick{
  position:absolute;right:6px;bottom:6px;width:13px;height:13px;border-radius:50%;
  background:var(--teal);display:grid;place-items:center;
}
.wsc-tick::after{content:"";width:5px;height:3px;border:1.6px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* ---- Komplee, Scoping: the approved proposal deploys a sign-in ------- */
.sc-deploy{margin-top:11px;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;background:var(--surface)}
.sc-deploy .kp-appbar{border-radius:0}
.sc-login{display:grid;justify-items:center;gap:5px;padding:12px 14px 11px}
.sc-login .logo{width:20px;height:20px;border-radius:6px;background:var(--navy-700)}
.sc-login b{font-size:10.5px;color:var(--ink);font-weight:600}
.sc-login .fld{width:72%;height:7px;border-radius:3px;background:#eef1ef}
.sc-login .btn2{width:72%;height:15px;border-radius:5px;background:var(--teal);color:#fff;font:600 8.5px var(--display);display:grid;place-items:center;letter-spacing:.04em}
.sc-login small{font-family:var(--mono);font-size:8.5px;color:var(--faint)}

/* ---- Komplee, Start Delivering: every result on one SaaS console ----- */
.sc-saas{border-radius:11px;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px rgba(4,16,22,.24)}
.sc-saas .kp-appbar{border-radius:0}
.sc-dash{display:flex;min-height:0}
.sc-dnav{width:16px;background:var(--navy);display:grid;align-content:start;gap:4px;padding:6px 3px;flex:none}
.sc-dnav i{height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.sc-dnav i.on{background:#5fe3d0}
.sc-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px;flex:1}
.sc-dt{border:1px solid var(--line-soft);border-radius:7px;padding:5px 6px;display:grid;gap:4px;align-content:start;background:#fbfcfb}
.sc-dt b{font-size:8px;font-weight:600;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.sc-dbars{display:flex;align-items:flex-end;gap:3px;height:26px}
.sc-dbars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:var(--teal);opacity:.8;transform-origin:bottom;transform:scaleY(0)}
.is-live .sc-dbars i{animation:sc-rise .55s cubic-bezier(.2,.8,.3,1) var(--d,0s) forwards}
.is-still .sc-dbars i{transform:none}
.sc-dline{height:26px}
.sc-dline svg{width:100%;height:100%;display:block;overflow:visible}
.sc-dline path{stroke:var(--teal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.is-live .sc-dline path{animation:sc-draw 1.1s ease var(--d,0s) forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
.is-still .sc-dline path{stroke-dashoffset:0}
.sc-dring{
  width:26px;height:26px;border-radius:50%;justify-self:center;
  background:conic-gradient(var(--teal) 0 82%,#e9eeec 82% 100%);
  display:grid;place-items:center;
}
.sc-dring::after{content:"";width:16px;height:16px;border-radius:50%;background:#fbfcfb}
.sc-dkpi{font:600 17px var(--display);letter-spacing:-.03em;color:var(--ink);line-height:26px}
.sc-dkpi u{text-decoration:none;font-size:10px;color:var(--faint)}

/* ---- Komplee, Start Consulting: the PDF, downloaded and opened ------- */
.sc-dl{display:flex;align-items:center;gap:8px;margin-top:11px;padding:7px 10px;border-radius:9px;background:#f7f9f8;border:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.sc-dl svg{width:12px;height:12px;color:var(--teal-700);flex:none}
.sc-dl .tag{margin-left:auto;flex:none}
.sc-doc{position:relative;margin-top:10px;background:#fff;border:1px solid var(--line-soft);border-radius:9px;padding:13px 14px 11px;box-shadow:0 12px 30px rgba(12,42,48,.14)}
.sc-doc .ptag{position:absolute;left:-7px;top:-7px;padding:3px 7px;border-radius:5px;background:#c9722a;color:#fff;font:700 8.5px var(--display);letter-spacing:.08em}
.sc-doc b{display:block;font:600 12px var(--display);color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.sc-doc small{display:block;font-size:9.5px;color:var(--faint);margin-top:3px}
.sc-doc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.sc-doc ol li{display:grid;grid-template-columns:15px 1fr auto;gap:7px;align-items:center;font-size:10px;color:var(--ink-soft)}
.sc-doc ol li i{width:15px;height:15px;border-radius:4px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center;font:600 8px var(--display);font-style:normal}
.sc-doc ol li span{font-family:var(--mono);font-size:8.5px;color:var(--faint)}


/* ---- OpsCon, Model: fetch frequency, strikes, and the rule ------------ */
.sc-freq{background:var(--surface);border-radius:11px;padding:10px 12px 9px;box-shadow:0 10px 28px rgba(4,16,22,.18)}
.sc-fq-top{display:flex;align-items:baseline;gap:7px}
.sc-fq-top b{font-size:11.5px;color:var(--ink);font-weight:600}
.sc-fq-top span{font-size:9.5px;color:var(--faint)}
.sc-fq-top .tag{margin-left:auto}
.sc-fq-track{position:relative;height:16px;margin:9px 0 3px}
.sc-fq-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#e9eeec}
.sc-fq-fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:12.5%;border-radius:2px;background:var(--teal)}
.is-live .sc-fq-fill{animation:sc-fill .9s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
@keyframes sc-fill{to{width:62.5%}}
.is-still .sc-fq-fill{width:62.5%}
.sc-fq-pip{position:absolute;top:50%;left:12.5%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 2px 6px rgba(4,16,22,.28)}
.is-live .sc-fq-pip{animation:sc-drag .9s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
@keyframes sc-drag{to{left:62.5%}}
.is-still .sc-fq-pip{left:62.5%}
.sc-fq-marks{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:9px;color:var(--faint);text-align:center}
.sc-fq-marks span.was{text-decoration:line-through}
.sc-fq-marks span.on{color:var(--faint)}
.is-live .sc-fq-marks span.on{animation:sc-lit .4s ease var(--d,0s) forwards}
@keyframes sc-lit{to{color:var(--teal-700)}}
.is-still .sc-fq-marks span.on{color:var(--teal-700)}

.sc-rule{background:var(--surface);border-radius:11px;padding:10px 12px;box-shadow:0 10px 28px rgba(4,16,22,.18)}
.sc-rule-top{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.sc-rule-top svg{width:13px;height:13px;color:var(--signal)}
.sc-rule-top b{font-size:11.5px;color:var(--ink);font-weight:600}
.sc-rule-top .tag{margin-left:auto}
.sc-rule-row{display:grid;grid-template-columns:54px 1fr;gap:9px;align-items:center;padding:6px 0 0;font-size:10.5px}
.sc-rule-row span{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase}
.sc-rule-row em{font-style:normal;color:var(--ink-soft)}
.sc-rule-row em.mail{position:relative;display:inline-block;font-family:var(--mono);font-size:10px;color:var(--teal-700);background:var(--mint);border-radius:6px;padding:3px 8px}
.sc-rule-row em.mail .sc-cur{color:var(--ink);right:-11px;bottom:-10px}


/* the contact form's success state: the form goes, this takes its place */
.form-thanks{
  display:grid;gap:12px;justify-items:start;padding:26px 24px;
  background:var(--mint);border-radius:var(--r-lg);border:1px solid #aedad1;
}
.form-thanks[hidden]{display:none}
.form-thanks:focus{outline:none}
.form-thanks-tick{
  width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;
}
.form-thanks-tick svg{width:18px;height:18px}
.form-thanks h3{margin:0;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.form-thanks p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:46ch}
.form-thanks .btn{margin-top:4px}


/* the sending meter: an envelope carried along a filling track, shown
   between the click and the answer */
.form-sending{display:grid;gap:10px;padding:22px 24px;background:var(--mint);border-radius:var(--r-lg);border:1px solid #aedad1}
.form-sending[hidden]{display:none}
.fs-track{position:relative;height:5px;border-radius:3px;background:#bfded6;overflow:visible}
.fs-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--teal)}
.fs-mail{position:absolute;top:50%;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  padding:4px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 3px 10px rgba(12,42,48,.25)}
.fs-label{font-size:13.5px;color:var(--ink-soft)}
.form-sending.is-live .fs-fill{animation:fs-fill 2.4s cubic-bezier(.25,.9,.35,1) forwards}
.form-sending.is-live .fs-mail{animation:fs-move 2.4s cubic-bezier(.25,.9,.35,1) forwards,fs-tip 1s ease-in-out infinite}
@keyframes fs-fill{0%{width:0}35%{width:46%}70%{width:74%}100%{width:92%}}
@keyframes fs-move{0%{left:0}35%{left:46%}70%{left:74%}100%{left:92%}}
@keyframes fs-tip{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){
  .form-sending.is-live .fs-fill{animation:none;width:60%}
  .form-sending.is-live .fs-mail{animation:none;left:60%}
}


/* A hyphenated compound is one word. "AI-powered" was breaking after the
   hyphen and leaving "AI-" hanging at the end of a line. A no-break hyphen
   (U+2011) would do it, but it depends on the webfont carrying that glyph;
   this does not. */
.nb{white-space:nowrap}