@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-var.woff2') format('woff2-variations'),url('/assets/fonts/Inter-var.woff2') format('woff2');}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2-variations'),url('/assets/fonts/JetBrainsMono-var.woff2') format('woff2');}

/* ============================================================================
   THEME. 2026-09-22: Aaron wants the site light - "just a hair, like a 1% gray"
   - because a lighter ground makes the panels pop. Aswin wants a toggle. So the
   palette is semantic and flips: LIGHT IS THE DEFAULT on bare :root, dark is an
   override, and a visitor on system-dark who has expressed no preference gets
   dark too.

   Every contrast pair below was measured, not guessed. Worst case in light is
   --ink-3 on --surface-2 at 5.15:1; worst in dark is the same pair at 7.39:1.

   Code blocks are the exception that does not flip. A source listing and a diff
   stay dark in both themes, the way a code block does on any documentation site,
   so they carry their own --code / --code-ink pair.
   ============================================================================ */
:root{
  /* ground - light */
  --ground:#F6F7F9; --surface:#FFFFFF; --surface-2:#EEF1F5; --surface-3:#E2E7EE;

  /* ink - light */
  --ink:#0D1219; --ink-2:#3E4856; --ink-3:#5B6675;

  /* console surfaces - light. The shell and panels go white; only the code
     listing and the diff stay dark. */
  --panel:#FFFFFF; --console:#FFFFFF; --tab-on:#ECEFF4; --row-hi:#FBF4E6;
  --col-hi:#EFF4FB; --dot:#C9D0D9; --track:#E2E7EE;

  /* spectral ramp, FILL tier - gradients, glows, large display. Not for body text. */
  --indigo:#3B1E7A; --violet:#6D28D9; --blue:#2563EB; --sky:#0EA5E9; --amber:#F59E0B;

  /* spectral ramp, TEXT tier - light. Darkened from the dark-theme tints, which
     sit at 1.5-2:1 on white and are unreadable there. */
  --violet-t:#6D28D9; --blue-t:#1D4ED8; --sky-t:#0369A1; --amber-t:#92400E;
  --cyan-t:#0E7490;
  --ok:#166534; --alert:#B91C1C;

  --spectrum:linear-gradient(90deg,#3B1E7A,#6D28D9,#2563EB,#0EA5E9);

  /* lines - light */
  --rule:#E3E7ED; --rule-2:#D1D8E0; --rule-hi:#B6C0CC;

  /* code blocks - identical in both themes */
  --code:#0E1420; --code-ink:#C8D2E0; --code-ink-hi:#FFFFFF; --gutter:#8A93A6;
  --code-add:#8FDCB4; --code-del:#F0A8A8;
  --plate:#F2F5FA;
  --cns-h:720px;
  --bar-bg:rgba(255,255,255,.78); --bar-bg-2:rgba(255,255,255,.94);
  --bloom-1:.07; --bloom-2:.06; --bloom-3:.05;

  --shell:min(1280px,92vw);
  --bar:72px;
  --r:14px; --r-sm:10px;

  /* Accenture's house curve, measured off their site. A timing function is a
     technique, not a brand asset. */
  --ease:cubic-bezier(.85,0,0,1);
  --t:.55s;

  /* TYPE SCALE. 2026-09-21: "the size of the font needs to be consistent throughout the
     website. That must be a must." The product consoles on this site ran to 23 distinct
     sizes, most of them between 9.6px and 12.8px. Everything in the console, panel and
     feature-row layers now resolves to one of these eight, and --fs-label is the floor. */
  --fs-display:clamp(2.7rem,4.3vw,3.5rem); /* 43-56  page title            */
  --fs-h2:clamp(2.2rem,3.1vw,2.75rem);     /* 35-44  section heading       */
  --fs-h3:1.8125rem;                       /* 29     sub heading           */
  --fs-h4:1.5rem;                          /* 24     card heading          */
  --fs-lead:1.4375rem;                     /* 23     lead paragraph        */
  --fs-body:1.375rem;                      /* 22     body                  */
  --fs-sm:1.25rem;                         /* 18     secondary             */
  --fs-label:1.125rem;                         /* 16     mono labels. THE FLOOR */

  /* 72 carries a fourth ink step. This site fixed --ink-3 at #8683A0 precisely because
     anything darker misses 4.5:1 on --surface-2, so --ink-4 aliases it rather than
     reintroducing the value that was already measured and rejected. */
  --ink-4:var(--ink-3);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 18px/1.72 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

h1,h2,h3,h4{margin:0;font-family:Inter,sans-serif;font-weight:700;line-height:1.02;text-wrap:balance}
/* Sentence case, and much calmer sizes.
   Aswin, 44:50 area: "too many caps". Every display size here was text-transform:uppercase.
   Aaron, 45:49, on the locations block: "'5 offices' looks like a font of 29 ... 'San Jose,
   California' looks like a font of 8. The disparity is way too big ... what you want is
   just a slight difference." .d1 was 106px against 17px body, a 6:1 step. It is now 67px
   at the top of its clamp and the card tiers came up, which lands the worst pairing near
   1.4:1. Corelight, which Aswin named twice as the reference, sets its page title around
   56px in sentence case - this is deliberately in that register. */
/* Sized to the hero's left column, not to the viewport. At 67px the headline broke over
   four lines in a 34rem column, which is a worse version of the wrapping Aswin objected
   to at 46:55. 47px fits 'Applied AI research for' on one line. */
.d1{font-size:var(--fs-display);letter-spacing:-.028em;line-height:1.12}
.d2{font-size:var(--fs-h2);letter-spacing:-.026em;line-height:1.14}
.d3{font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:700;line-height:1.28}
.d4{font-size:var(--fs-h4);letter-spacing:-.014em;font-weight:700;line-height:1.4}
p{margin:0 0 1.1em;max-width:64ch;text-wrap:pretty;color:var(--ink-2)}
p:last-child{margin-bottom:0}
/* 62ch forced "…a single-/focused company." onto a second line with half the shell empty
   beside it, which the review picked out by name. Leads now run to the column they are in. */
/* 90ch, not 78. The offices lead is 83 characters and was breaking "…cannot be a /
   single-focused company." with half the shell empty beside it - called out twice in
   review. Long enough to hold a two-sentence lead on one line, short enough that a real
   paragraph still gets a readable measure. */
.lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-2);max-width:90ch}
.sm{font-size:var(--fs-body);line-height:1.72;color:var(--ink-2)}

.mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
/* Section eyebrows were 13px and the review called them "really small, looks really bad".
   These label every section on the page, so they carry more weight than their size implied. */
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--violet-t);margin:0 0 16px;
  font-size:var(--fs-sm);letter-spacing:.16em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--spectrum);border-radius:2px}

/* Gradient type. -webkit-text-fill-color:transparent hides the real colour, so a
   fallback colour is set first for any engine that does not support the clip. */
.grad{
  color:var(--violet-t);
  background:var(--spectrum);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{-webkit-text-fill-color:currentColor;background:none;color:var(--violet-t)}
}

/* ---- dark ---------------------------------------------------------------- */
:root[data-theme="dark"]{
  --ground:#08070F; --surface:#141221; --surface-2:#1C1930; --surface-3:#252140;
  --ink:#FFFFFF; --ink-2:#C6C4D6; --ink-3:#ABA8C0;
  --panel:#120F22; --console:#0C0A17; --tab-on:#1A1630; --row-hi:#1E1733;
  --col-hi:#181430; --dot:#2A2440; --track:#221D3A;
  --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
  --cyan-t:#22D3EE;
  --ok:#5FBE8E; --alert:#E08585;
  --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;
  --gutter:#8A7EB5;
  --bar-bg:rgba(8,7,15,.72); --bar-bg-2:rgba(8,7,15,.92);
  --bloom-1:.28; --bloom-2:.22; --bloom-3:.16;
}
/* System-dark, for a visitor who has not chosen. Guarded so an explicit light
   choice still wins. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#08070F; --surface:#141221; --surface-2:#1C1930; --surface-3:#252140;
    --ink:#FFFFFF; --ink-2:#C6C4D6; --ink-3:#ABA8C0;
    --panel:#120F22; --console:#0C0A17; --tab-on:#1A1630; --row-hi:#1E1733;
    --col-hi:#181430; --dot:#2A2440; --track:#221D3A;
    --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
    --cyan-t:#22D3EE;
    --ok:#5FBE8E; --alert:#E08585;
    --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;
    --gutter:#8A7EB5;
    --bar-bg:rgba(8,7,15,.72); --bar-bg-2:rgba(8,7,15,.92);
    --bloom-1:.28; --bloom-2:.22; --bloom-3:.16;
  }
}

::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-t);outline-offset:3px;border-radius:3px}
input,textarea{caret-color:var(--violet-t)}


/* ---- top bar ------------------------------------------------------------ */
.top{
  position:fixed;inset:0 0 auto;z-index:80;height:var(--bar);
  background:var(--bar-bg);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.top.scrolled{border-bottom-color:var(--rule);background:var(--bar-bg-2)}
.top .in{width:var(--shell);margin:0 auto;height:100%;display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}

/* ---- the brand mark ------------------------------------------------------ */
/* On the home page the wordmark is always shown. On every other page only the
   mark shows, and the wordmark unfurls on hover or focus as the affordance for
   "this takes you home". The width transition animates from 0, so it needs a
   fixed max-width rather than `auto`, which is not animatable. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{height:30px;width:auto;flex:0 0 auto}
.brand .word{
  font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-body);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;
}
.brand.compact .word{
  max-width:0;opacity:0;transform:translateX(-6px);
  transition:max-width var(--t) var(--ease),opacity .3s var(--ease),transform var(--t) var(--ease);
}
.brand.compact:hover .word,.brand.compact:focus-visible .word{max-width:220px;opacity:1;transform:none}
.brand.compact:hover img,.brand.compact:focus-visible img{transform:rotate(-8deg) scale(1.06)}
.brand img{transition:transform var(--t) var(--ease)}

/* The header CTA sat at flex:0 1 auto, so between the 820px mobile breakpoint and about
   1150px the nav would win the space and squeeze the button from 183px to 82px, cutting
   its own label. The button holds its size now and the nav tightens instead. */
.top .cta{flex:none}
@media (max-width:1150px){
  .nav{gap:10px}
  .brand .word{font-size:var(--fs-sm)}
}

/* ---- nav + products dropdown -------------------------------------------- */
.nav{display:flex;gap:clamp(12px,1.6vw,24px);margin-left:auto;align-items:center;height:100%}
.nav > li{list-style:none;height:100%;display:flex;align-items:center;position:relative}
.nav a,.nav button{
  text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .22s var(--ease);
}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.nav li.open .caret{transform:rotate(225deg) translateY(-2px)}

.menu{position:absolute;top:100%;left:-18px;padding-top:12px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:70}
.nav>li.open .menu{opacity:1;visibility:visible;transform:none}
.msheet{display:grid;gap:clamp(16px,2vw,28px);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:18px 20px;box-shadow:0 30px 64px -22px rgba(0,0,0,.85)}
/* One group is a single narrow column; two groups get a column each, wide enough that
   the longest description does not clip. */
.msheet.c1{grid-template-columns:minmax(260px,max-content)}
.msheet.c2{grid-template-columns:repeat(2,minmax(268px,max-content))}
.menu .d{white-space:normal}
.mcol{display:grid;gap:6px;align-content:start}
.mhd{font-size:var(--fs-label);letter-spacing:.05em;color:var(--ink-3);padding:0 10px 8px;
  text-transform:none;
  white-space:nowrap;
  border-bottom:1px solid var(--rule);margin-bottom:6px}
.mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mcol li a{display:block;padding:8px 10px;border-radius:var(--r-sm);border-left:2px solid transparent;
  transition:background .16s,border-color .16s}
.mcol li a:hover{background:var(--surface-2);border-left-color:var(--violet-t)}
.menu .n{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.menu .d{display:block;font-size:var(--fs-label);color:var(--ink-3);margin-top:2px;line-height:1.45}

.burger{
  display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding:76px 0 32px;position:relative}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum)}
.foot .in{width:var(--shell);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.foot img{height:38px;width:auto;margin-bottom:16px}
.foot .tag{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);max-width:34ch}
.foot h4{color:var(--ink-3);margin-bottom:14px;font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{text-decoration:none;font-size:var(--fs-sm);color:var(--ink-2);transition:color .22s var(--ease)}
.foot ul a:hover{color:var(--violet-t)}
.foot-base{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3)}


main{padding-top:var(--bar)}
.sec{padding:clamp(56px,7.5vh,96px) 0;position:relative}
.sec > .in{width:var(--shell);margin:0 auto;position:relative;z-index:1}
.sec.tight{padding:clamp(48px,7vh,90px) 0}
.b-ground{background:var(--ground)}
.b-surface{background:var(--surface)}
.b-deep{background:linear-gradient(180deg,var(--ground),var(--surface-2))}

/* a hairline spectral divider between bands */
.edge{position:relative}
/* No decorative rule on section tops.
   This painted a spectrum hairline across the top of every .edge section. Because the
   header carries its own border, any .edge section scrolled to the top of the viewport
   showed two rules a dozen pixels apart - the "why is there a double line" in the
   2026-09-16 review. The band change already separates the sections; the extra rule was
   only ever decoration. */

/* Centred, and wide enough not to break a short headline.
   2026-09-21 review: "Fourteen federal" was landing on its own line with the right half
   of the shell empty beside it - "why can't you just centralize this ... you might as
   well just centralize the whole page because it looks better that way." */
.head{max-width:min(62rem,100%);margin:0 auto clamp(32px,4.5vh,52px);text-align:center;
  display:grid;justify-items:center}
.head .lead{margin-top:18px;margin-left:auto;margin-right:auto;text-align:center;
  max-width:70ch}
/* Stacked and centred. Splitting the heading left and a text link right was what put a
   lone "All certifications" link out in the empty right-hand half. */
.rowend{display:grid;justify-items:center;gap:20px;text-align:center;
  margin-bottom:clamp(32px,4.5vh,52px)}
.rowend .head{margin-bottom:0}

/* ---- certifications cards ------------------------------------------------ */
/* Aaron, 2026-09-22: logo left, title right, truncated body with an animated expand. */
.org-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;
  margin-bottom:12px}
.org-head h3{margin:0}
.org-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;transition:none}
.org.open .org-body{-webkit-line-clamp:unset;display:block}
.org-more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;cursor:pointer;
  background:none;border:0;padding:0;color:var(--violet-t);font-family:inherit;
  font-size:var(--fs-label);font-weight:600}
.org-more .ar{transition:transform .3s var(--ease)}
.org.open .org-more .ar{transform:rotate(180deg)}

/* ---- imagery placeholder ------------------------------------------------- */
.imgslot{aspect-ratio:16/9;display:grid;place-items:center;border-radius:var(--r);
  border:1px dashed var(--rule-2);background:var(--surface-2)}
.imgslot span{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0}

/* ---- sticky demo CTA ----------------------------------------------------- */
/* Aswin, 2026-09-22: a Request a Demo / Request a Callback that stays reachable on
   scroll. One form; the heading changes with the ask. */
.sticky-cta{position:fixed;right:0;top:50%;transform:translateY(-50%) translateX(0);
  z-index:70;text-decoration:none;background:var(--violet);color:#fff;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;
  padding:16px 12px;border-radius:10px 0 0 10px;writing-mode:vertical-rl;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sticky-cta.show{opacity:1;pointer-events:auto}
.sticky-cta:hover{filter:brightness(1.1);transform:translateY(-50%) translateX(-3px)}
@media (max-width:820px){
  .sticky-cta{top:auto;bottom:16px;right:16px;writing-mode:horizontal-tb;
    border-radius:999px;padding:12px 20px;transform:none}
  .sticky-cta:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---- cookie notice ------------------------------------------------------- */
.cookie[hidden]{display:none}
.cookie{position:fixed;left:16px;bottom:16px;z-index:90;max-width:min(430px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:18px 20px;box-shadow:0 22px 50px -18px rgba(0,0,0,.45);display:grid;gap:14px}
.cookie p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0;max-width:none}
.cookie-act{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:10px 18px;font-size:var(--fs-label)}

/* ---- resources + global presence grids ----------------------------------- */
.ress,.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(16px,2vw,24px)}
.res,.loc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px 26px;display:grid;align-content:start;gap:8px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.res:hover,.loc:hover{border-color:var(--rule-hi);transform:translateY(-2px)}
.loc.hq{border-color:var(--violet)}
.res .lbl,.loc .lbl{font-size:var(--fs-label);letter-spacing:.12em;color:var(--violet-t)}
.res h3,.loc h3{margin:0}
.res p,.loc p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0;max-width:none}

/* One form, and the heading follows the ask. Aswin, 2026-09-22. */
.ask-demo .form-head h1::after{content:" a demo"}

/* ---- hero: 75 / 25, full width ------------------------------------------- */
/* The centred shell wasted the first screen. This one spans the viewport with its
   own gutters, copy on the left three quarters, product boxes down the right. */
.sec.wide > .hwrap{width:100%;max-width:none;margin:0;padding:0 clamp(24px,4vw,64px);
  display:grid;grid-template-columns:3fr 1fr;gap:clamp(28px,3.4vw,56px);align-items:center;
  position:relative;z-index:1}
.hero .stage{max-width:none}
.hero .d1{max-width:18ch}
.hero .lead{max-width:62ch}
.hboxes{display:grid;gap:12px;align-content:center}
.hbox{display:grid;gap:7px;align-content:start;text-decoration:none;padding:18px 20px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.hbox:hover{border-color:var(--violet);transform:translateY(-2px)}
.hbox h2{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.018em;margin:0;color:var(--ink)}
.hbox p{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);margin:0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hbox .go{margin-top:2px}
.hbox.empty{background:none;border-style:dashed;opacity:.72}
.hbox.empty span{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0}
.hbox.empty p{color:var(--ink-3)}
@media (max-width:1100px){
  .sec.wide > .hwrap{grid-template-columns:1fr;gap:34px}
  .hboxes{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
}

/* ---- certifications link ------------------------------------------------- */
.certlink{display:flex;justify-content:center;margin:0 0 clamp(22px,3vh,34px)}
.certlink .btn{gap:11px}
.certlink svg{flex:none}

/* ---- theme toggle -------------------------------------------------------- */
.themed{display:grid;place-items:center;width:38px;height:38px;flex:none;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.themed:hover{border-color:var(--rule-hi);color:var(--ink);background:var(--surface-2)}
.themed svg{grid-area:1/1;fill:none;stroke:currentColor;stroke-width:1.7}
.t-moon{fill:currentColor;stroke:none}
/* Show the destination, not the current state: a light page offers the moon. */
.t-moon{display:block} .t-sun{display:none}
:root[data-theme="dark"] .t-moon{display:none}
:root[data-theme="dark"] .t-sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t-moon{display:none}
  :root:not([data-theme="light"]) .t-sun{display:block}
}

/* ---- buttons ------------------------------------------------------------- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  white-space:nowrap;
  font-size:var(--fs-sm);font-weight:500;line-height:1;padding:15px 26px;border-radius:999px;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn.pri{background:var(--violet);color:#fff;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn.pri:hover{background:var(--blue);transform:translateY(-2px)}
.btn.sec{border-color:var(--rule-hi);color:var(--ink)}
.btn.sec:hover{border-color:var(--violet-t);color:var(--violet-t);transform:translateY(-2px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--violet-t);
  font-size:var(--fs-sm);font-weight:500;transition:gap .3s var(--ease)}
.tlink:hover{gap:14px}


/* ---- hero ---------------------------------------------------------------- */
/* min-height is gone. It forced a full viewport before the fold whatever the content was,
   which is the "unnecessary spaces at the top" Aswin raised at 4:19: "I wanted to bring up
   the maximum content in a minimum space." */
.hero{padding:clamp(40px,6vh,80px) 0 clamp(36px,5vh,64px);overflow:hidden}
.hero .in{width:var(--shell);margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);
  align-items:center}
.hero-grid .stage{max-width:42rem}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-grid .stage{max-width:none}
}
.hero .d1{margin:0 0 22px}
.hero .lead{margin-bottom:30px}

/* the ambient spectral bloom behind the hero. Desktop only - it is the one piece
   of pure atmosphere on the page and a phone gets the flat composition instead. */
.bloom{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bloom i{position:absolute;border-radius:50%;filter:blur(110px);opacity:var(--bloom-1)}
.bloom i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-10vw;background:var(--indigo)}
.bloom i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:6vw;background:var(--blue);opacity:var(--bloom-2)}
.bloom i:nth-child(3){width:30vw;height:30vw;right:14vw;bottom:-12vw;background:var(--sky);opacity:var(--bloom-3)}
@media (max-width:900px),(hover:none){ .bloom{display:none} }

/* ---- staged load reveal --------------------------------------------------- */
/* Srini's "when you go to it, it opens up". Sequenced, not simultaneous: rule,
   then eyebrow, then each headline line, then body, then buttons. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stage > *{opacity:0;animation:rise .9s var(--ease) forwards}
.stage > *:nth-child(1){animation-delay:.05s}
.stage > *:nth-child(2){animation-delay:.17s}
.stage > *:nth-child(3){animation-delay:.29s}
.stage > *:nth-child(4){animation-delay:.41s}
.stage > *:nth-child(5){animation-delay:.53s}
.hero .d1 .ln{display:block;overflow:hidden}
.hero .d1 .ln > span{display:block;opacity:0;animation:rise 1s var(--ease) forwards}
.hero .d1 .ln:nth-child(1) > span{animation-delay:.2s}
.hero .d1 .ln:nth-child(2) > span{animation-delay:.32s}
.hero .d1 .ln:nth-child(3) > span{animation-delay:.44s}

/* Vertical rhythm inside a stage. 2026-09-22: "the spacing on the left side seems too
   congested." The headline carried margin-bottom:0, so the lead sat flush against it,
   and .stats carried margin-bottom:0, so the button collided with the facts row. The
   rhythm was coming from whatever each child happened to set, which for two of them was
   nothing. */
.stage .d1{margin-bottom:20px}
.stage .lead{margin-bottom:32px}
.stage .stats{margin-bottom:36px}
.stage .stats + .btnrow{margin-top:0}

/* ---- scroll reveal -------------------------------------------------------- */
/* Gated on .js, which an inline script sets on <html> before first paint. Without
   that gate the starting state is opacity:0 and any JS failure - script error,
   blocked bundle, JS disabled, a crawler - leaves every section below the fold
   permanently invisible. Hiding content is only safe once you know you can unhide it. */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
/* Named dl* and NOT d1..d5: .d1-.d4 are the type-scale classes, so a reveal delay
   called .d2 silently gave every delayed element 3.9rem uppercase display type. */
.rv.dl1{transition-delay:.09s} .rv.dl2{transition-delay:.18s} .rv.dl3{transition-delay:.27s}
.rv.dl4{transition-delay:.36s} .rv.dl5{transition-delay:.45s}

/* ---- spec strip ----------------------------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);
  margin-top:clamp(34px,5vh,60px);padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--rule)}
.specs dt{color:var(--ink-3);margin-bottom:9px}
.specs dd{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);font-weight:500}

/* ---- cards, the Accenture pattern ----------------------------------------- */
/* Square corners, image bleeding to the edge, caps label, and a CTA cover that
   rises on hover. The whole card lifts and the image scales inside its own
   overflow box so the crop tightens rather than the card growing. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,1.8vw,22px)}
.card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.card .shot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,7,15,.85));opacity:.7;transition:opacity var(--t) var(--ease)}
.card .body{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.card .lbl{color:var(--violet-t)}
.card h3{color:var(--ink)}
.card p{font-size:var(--fs-sm);line-height:1.58;margin:0;flex:1}
.card .meta{color:var(--ink-3);padding-top:12px;border-top:1px solid var(--rule)}
/* the spectral edge that wipes across the top on hover */
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);z-index:2}
a.card:hover{transform:translateY(-8px);border-color:var(--rule-hi);
  box-shadow:0 34px 70px -30px rgba(37,99,235,.42)}
a.card:hover::before{transform:scaleX(1)}
a.card:hover .shot img{transform:scale(1.07)}
a.card:hover .shot::after{opacity:.45}
.card .go{display:inline-flex;align-items:center;gap:7px;color:var(--violet-t);
  font-size:var(--fs-sm);font-weight:500;transition:gap .3s var(--ease)}
a.card:hover .go{gap:13px}
@media (prefers-reduced-motion:reduce){
  a.card:hover{transform:none}
  a.card:hover .shot img{transform:none}
}

/* ---- agency columns: the site 7 signature ---------------------------------- */
/* Aaron's proposal on the 09-01 call, which Srini approved: a column per agency
   with the programmes cascading beneath it. Different structure from site 6's TRL
   ladder, and it staggers naturally on scroll. */
.agencies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(12px,1.5vw,20px);align-items:start}
/* The landing carries only the first few programmes, so auto-fit would stretch two
   columns across the whole shell and read as though there were only two agencies.
   Capped and left-aligned there; the full six-column grid lives at /programs/. */
/* Was capped at 320px, so two field groups sat in the left third and the right two thirds
   of the shell were blank - the "on the right side everything is empty" problem again, and
   visible in the 09-16 review screenshots. Columns now share the full width. */
.agencies.brief{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  justify-content:start}
.agcol{display:flex;flex-direction:column;gap:10px}
.agcol > .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:12px;border-bottom:2px solid;margin-bottom:2px}
.agcol .ag{font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-h4);letter-spacing:-.02em;color:var(--ink)}
.agcol .ct{color:var(--ink-3)}
.prog{font-size:var(--fs-body);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:20px 22px;display:grid;gap:9px;align-content:start;
  transition:border-color .25s,background .25s}
.prog:hover{border-color:var(--rule-hi);background:var(--surface-2)}
.prog .ph{color:var(--violet-t);display:block;font-size:var(--fs-label);letter-spacing:.14em}
.prog .tp{font-size:var(--fs-h4);font-weight:700;line-height:1.45;letter-spacing:-.014em;
  color:var(--ink)}
.prog .syn{font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);margin:0;max-width:none}
.prog .syn + .syn{color:var(--ink-3);font-size:var(--fs-sm);margin-top:4px}
.progrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
  gap:clamp(14px,2vw,22px);align-items:start}
.progrid .prog{font-size:var(--fs-body);padding:clamp(20px,2.3vw,28px)}
.progrid .dom{color:var(--violet-t);display:block;margin-bottom:14px}
.progrid h3{margin-bottom:12px}
.progrid .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.progrid .tags span{padding:7px 13px;border:1px solid var(--rule-2);border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.progrid .pt{margin:17px 0 0;padding-top:15px;border-top:1px solid var(--rule);
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink-3)}

/* ---- big-type field list ---------------------------------------------------- */
.fields{display:grid;margin-top:clamp(26px,4vh,48px)}
.fields > *{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(18px,2.4vh,28px) 0;border-top:1px solid var(--rule);position:relative}
.fields > *:last-child{border-bottom:1px solid var(--rule)}
.fields .f{font-family:Inter,sans-serif;font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1;
  transition:color .4s var(--ease),transform .4s var(--ease)}
.fields > *:hover .f{transform:translateX(10px)}
.fields .s{color:var(--ink-3);font-size:var(--fs-sm);text-align:right}
/* each field takes the next stop on the ramp, so the list reads as a spectrum */
.fields > *:nth-child(1):hover .f{color:var(--violet-t)}
.fields > *:nth-child(2):hover .f{color:var(--violet-t)}
.fields > *:nth-child(3):hover .f{color:var(--blue-t)}
.fields > *:nth-child(4):hover .f{color:var(--sky-t)}
.fields > *:nth-child(5):hover .f{color:var(--sky-t)}
.fields > *:nth-child(6):hover .f{color:var(--cyan-t)}
.fields > *:nth-child(7):hover .f{color:var(--amber-t)}

/* ---- the record: three programmes as image cards -------------------------- */
.rechead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;margin-bottom:14px}
.rechead .eyebrow{margin-bottom:12px}
.rechead h2{margin:0}
.reclink{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  text-decoration:none;padding:16px 20px;border:1px solid var(--rule-2);
  border-radius:var(--r);background:var(--surface);max-width:420px;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.reclink:hover{border-color:var(--violet);background:var(--surface-2);transform:translateY(-2px)}
.rl-glyph{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  width:42px;height:42px;flex:none}
.rl-glyph i{background:var(--violet-t);border-radius:2px;opacity:.5;
  transition:opacity .25s var(--ease)}
.reclink:hover .rl-glyph i{opacity:.9}
.rl-glyph i:nth-child(3),.rl-glyph i:nth-child(5),.rl-glyph i:nth-child(7){opacity:.85}
/* The ninth tile is replaced by the remainder, so the glyph counts the record rather
   than being decoration that happens to sit next to a number. */
.rl-glyph b{position:absolute;right:-7px;bottom:-7px;font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-label);font-weight:700;color:var(--ink);background:var(--violet);
  border-radius:999px;padding:1px 6px;line-height:1.35}
.rl-text{display:grid;gap:3px;min-width:0}
.rl-text b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.rl-text span{font-size:var(--fs-label);color:var(--ink-3);line-height:1.4}
.rl-go{font-size:var(--fs-h4);color:var(--violet-t);transition:transform .3s var(--ease)}
.reclink:hover .rl-go{transform:translateX(5px)}
@media (max-width:680px){.reclink{max-width:none;width:100%}}

.pgcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);
  margin-top:clamp(30px,4vh,46px)}
.pgcard{display:grid;grid-template-rows:auto 1fr;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pgcard:hover{border-color:var(--rule-hi);transform:translateY(-3px)}
.pgshot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.pgshot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.pgcard:hover .pgshot img{transform:scale(1.04)}
/* The agency chip sits on the photograph, so it needs its own ground rather than
   relying on whatever the image happens to be doing behind it. */
.pgshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,15,.62) 0%,rgba(8,7,15,0) 42%,rgba(8,7,15,.55) 100%)}
.pgag{position:absolute;top:13px;left:14px;z-index:2;font-size:var(--fs-label);
  letter-spacing:.14em;font-weight:600}
.pgbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px}
.pgdom{font-size:var(--fs-label);letter-spacing:.11em;color:var(--ink-3)}
.pgtitle{font-size:var(--fs-h4);font-weight:700;line-height:1.3;letter-spacing:-.018em;
  color:var(--ink);margin:0}
.pgblurb{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);margin:0;max-width:none}
.pgcard .go{margin-top:auto;padding-top:11px}

@media (max-width:1000px){.pgcards{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .pgcards{grid-template-columns:1fr}
  .rechead{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---- locations --------------------------------------------------------------- */

.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(12px,1.6vw,20px)}
.loc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.loc:hover{border-color:var(--rule-hi);transform:translateY(-4px)}
.loc .k{color:var(--violet-t);display:block;margin-bottom:12px}
.loc h3{margin-bottom:7px}
.loc .a{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin:0}
.loc.hq{border-color:var(--violet)}
.loc.hq .k{color:var(--sky-t)}

/* ---- partner carousel ---------------------------------------------------------- */
/* Spacing is margin-right on each item, NOT flex gap: with gap the track measures
   2N*W+(2N-1)*G but the duplicate sits at N*(W+G), so translateX(-50%) lands half a
   gap short and the loop visibly jumps once per cycle. */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;width:max-content;animation:marq 48s linear infinite}
/* Deliberately no hover pause: it must keep moving. */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-25%)}}
/* An actual light plate. The comment underneath this rule has always said the seals need
   one, but the rule set background:var(--surface), which is dark - so NSTIC, a navy ship
   silhouette on transparency, rendered as a near-invisible smudge (2026-09-21 review:
   "you cannot read the logo at all"). These are federal seals drawn for white paper;
   putting them on white is what they were made for, and it makes all eight consistent. */
.marquee figure{flex:0 0 auto;width:clamp(126px,13vw,168px);margin:0 clamp(12px,1.5vw,20px) 0 0;
  background:var(--plate);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:16px;display:grid;place-items:center;aspect-ratio:1;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.marquee figure:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(0,0,0,.9)}
.marquee img{max-height:100%;width:auto;object-fit:contain;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:14px}
  .mtrack figure{margin:0}
  .mtrack figure[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- stats ---------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:22px}
.stats>div{border-top:1px solid var(--rule-2);padding-top:14px}
.stats .fig{font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-.018em;line-height:1.25;display:block}
.stats .l{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);margin-top:6px;display:block;
  max-width:30ch;font-family:Inter,sans-serif;letter-spacing:0;text-transform:none}

/* ---- prose / lists ---------------------------------------------------------------- */
.bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bul li{position:relative;padding-left:22px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--spectrum)}
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th,.spec td{text-align:left;padding:17px 0;border-top:1px solid var(--rule);vertical-align:top}
.spec th{width:32%;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-3);padding-right:26px}
.spec td{color:var(--ink-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--rule)}
.ruled{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0 clamp(22px,3vw,48px)}
.ruled > div{padding:clamp(22px,2.6vh,30px) 0;border-top:1px solid var(--rule)}
.ruled h3{margin-bottom:10px}
.ruled p{font-size:var(--fs-sm);line-height:1.6;max-width:34ch;margin:0}

/* ---- people / orgs ------------------------------------------------------------------ */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,2vw,22px)}
.person,.org{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(22px,2.5vw,30px);transition:border-color .3s var(--ease)}
.person:hover,.org:hover{border-color:var(--rule-hi)}
.person .role{color:var(--violet-t);display:block;margin:8px 0 15px}
.person p,.org p{font-size:var(--fs-sm);line-height:1.62}
.person a.li{display:inline-flex;margin-top:15px;font-size:var(--fs-sm);color:var(--violet-t);text-decoration:none}
.person a.li:hover{text-decoration:underline}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,2vw,22px)}
.org .plate{width:66px;height:66px;display:grid;place-items:center;background:#fff;
  border-radius:var(--r-sm);padding:9px;margin-bottom:16px}
.org .plate img{max-width:100%;max-height:100%;object-fit:contain}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{padding:9px 15px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---- forms ---------------------------------------------------------------------------- */
.form{display:grid;gap:17px;max-width:540px}
.form label{display:grid;gap:8px;font-size:var(--fs-sm);font-weight:500}
.form input,.form textarea{padding:14px 16px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-sm);width:100%;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.form input:user-invalid{border-color:#F87171}
.form textarea{resize:vertical;min-height:140px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{font-size:var(--fs-sm);min-height:1.4em;margin:0}
.status.ok{color:var(--ok)} .status.err{color:var(--alert)}

/* ---- media ------------------------------------------------------------------------------ */
.figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.figcap{margin-top:14px;color:var(--ink-3)}


/* ======================================================================
   PRODUCT CONSOLES
   Fills the right-hand column Aswin said was empty (10:01, 10:10) and stands in for the
   CNRT / Vanguard / CodeLens dashboards Aaron asked for at 19:21. Corelight, which Aswin
   named twice, uses this exact layout: copy left, the product's own interface right, dark
   ground. Built in site 7's spectral palette so it reads as part of this site.
   ====================================================================== */

.cns{background:var(--console);border:1px solid var(--rule-2);position:relative;
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}

/* console tone set. Site 7 has no ok/alert tokens, so they are declared here and measured
   on #0C0A17: #5FBE8E is 7.4:1, #E08585 is 6.4:1, both safe on readouts. */
.c-ok{color:var(--ok)}.c-alert{color:var(--alert)}.c-warn{color:var(--amber-t)}
.c-sky{color:var(--sky-t)}.c-violet{color:var(--violet-t)}.c-amber{color:var(--amber-t)}
.c-dim{color:var(--ink-3)}
.cbarfill.c-ok{background:var(--ok)}.cbarfill.c-alert{background:var(--alert)}
.cbarfill.c-warn{background:var(--amber)}.cbarfill.c-sky{background:var(--sky)}
.cbarfill.c-amber{background:var(--amber)}.cbarfill.c-dim{background:var(--rule-2)}

/* bar. Never wraps: a badge dropping to a second line is the same defect Aswin called out
   at 46:55 ("each headers it's going 2 line"). */
.cns-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:11px 14px;background:var(--panel);
  border-bottom:1px solid var(--rule);min-width:0}
.cns-id{display:flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto}
.cns-id i{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none}
.cns-id i:first-child{background:var(--violet)}
.cns-id span{font-size:var(--fs-label);color:var(--ink-3);margin-left:6px;white-space:nowrap;
  flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
.ctabs{display:flex;gap:2px;flex:none}
.ctab{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.05em;
  padding:5px 10px;color:var(--ink-3);border:1px solid transparent;border-radius:4px}
.ctab.on{color:var(--ink);background:var(--tab-on);border-color:var(--rule-2)}
/* ---- fixed console geometry ---------------------------------------------- */
/* Every console is the same height and that height never changes, so no console can
   move the page under the reader. 2026-09-22: "make sure each diagram image is fixed
   and isnt altering the page length ... and make sure they are all the same size."
   The active view scrolls internally when it is taller; the shell never resizes. */
.cns{height:var(--cns-h);display:grid;grid-template-rows:auto 1fr}
.cns-body{overflow:hidden;min-height:0;align-content:start}
.cns-body > .cns-view.on{overflow-y:auto;min-height:0;max-height:100%;scrollbar-width:thin}
@media (max-width:1000px){:root{--cns-h:560px}}
/* ---- console footer bar -------------------------------------------------- */
/* The run control belongs in its own bar, full width, flush to the bottom edge.
   2026-09-22: "look at how horrible the alignment is of Run Scan 9 Stages Resumable." */
.cns-foot{position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 15px;border-top:1px solid var(--rule);background:var(--panel);
  margin:0 -15px -15px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.cns-body.flush .cns-foot{margin:0;border-radius:0}
.cns-stat{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0;
  text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-running] .cns-stat,[data-alarm] .cns-stat{color:var(--ink)}

/* ---- live packet bars ---------------------------------------------------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:56px;padding:8px 12px 10px}
.bars i{flex:1;background:var(--sky-t);border-radius:2px 2px 0 0;height:var(--h);
  transform-origin:bottom;animation:barpulse 1.9s var(--ease) infinite;
  animation-delay:var(--d);opacity:.85}
@keyframes barpulse{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.18)}}
[data-alarm] .bars i{background:var(--alert);animation-duration:.55s}
@media (prefers-reduced-motion:reduce){.bars i{animation:none}}

/* ---- scan traversal ------------------------------------------------------ */
/* A scan that changes nothing on screen is not a demo. The file being read and the
   line being read both light up as the pass walks the repository. */
.tnode[data-file].reading{background:color-mix(in srgb,var(--violet) 16%,transparent);
  color:var(--ink);border-left-color:var(--violet-t)}
.tnode[data-file].done{color:var(--ink-2)}
.cline.reading{background:color-mix(in srgb,var(--violet) 18%,transparent)}
.cline.reading .gsev{background:var(--violet-t)}
/* An attack has to be visible in the picture, not only in the numbers.
   2026-09-22: "If I click Simulate Ransomware, you should see red in the diagram.
   You should see the waves going." */
.tr-spike{opacity:0;transition:opacity .45s var(--ease)}
[data-alarm] .cns-trace{color:var(--alert)}
[data-alarm] .tr-spike{opacity:1}
[data-alarm] .tr-move:not(.tr-spike){opacity:0}
[data-alarm] .cns-trace .tr-move{animation-duration:2.4s}
[data-alarm]{box-shadow:0 0 0 1px var(--alert), 0 26px 60px -28px rgba(224,133,133,.55)}
[data-alarm] .cns-bar{background:color-mix(in srgb, var(--alert) 12%, var(--panel))}
.cns-trace,.tr-spike,[data-alarm]{transition:color .4s var(--ease),box-shadow .4s var(--ease)}
/* Vanguard: the running step pulses so the campaign reads as moving. */
@keyframes pstep-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pstep.run{animation:pstep-pulse 1s ease-in-out infinite}
.pstep.run b{color:var(--amber-t)}
.pstep.done b{color:var(--ok)}
.pstep.blocked b{color:var(--alert)}
[data-running] .cns-bar{background:color-mix(in srgb, var(--amber-t) 12%, var(--panel))}
button.ctab{cursor:pointer;background:none;transition:color .18s,background .18s,border-color .18s}
button.ctab:hover{color:var(--ink);background:var(--surface-2)}
.cns-view{display:none}
.cns-view.on{display:grid;gap:11px}
.cns-body.flush .cns-view.on{gap:0}
.cns-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:2px}
.cns .cns-act{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.06em;padding:10px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--violet);background:var(--violet);color:#fff;
  transition:filter .2s,opacity .2s}
.cns .cns-act:hover{filter:brightness(1.12)}
.cns .cns-act[disabled]{opacity:.62;cursor:default}
.cns-hint{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0}
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule)}
.pstep{background:var(--panel);padding:13px 12px;display:grid;gap:5px;justify-items:start}
.pstep b{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.pstep > span:last-child{font-size:var(--fs-label);color:var(--ink-3);
  font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:0}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--rule-hi);transition:background .3s}
.pstep.run .pdot{background:var(--amber-t)}
.pstep.done .pdot{background:var(--ok)}
.pstep.blocked .pdot{background:var(--alert)}
@media (max-width:820px){.path{grid-template-columns:1fr 1fr}}
.cns-badge{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.11em;padding:4px 9px;flex:none;margin-left:auto;
  border:1px solid currentColor;
  border-radius:4px;white-space:nowrap}

.cns-body{padding:15px;display:grid;gap:11px}
.cns-body.flush{padding:0;gap:0}
.cns-note{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);padding:11px 13px;
  background:var(--panel);border-left:2px solid var(--violet);text-transform:none;letter-spacing:0}
.dim{color:var(--ink-3)}

.cns-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.kpi{background:var(--panel);padding:13px 14px;display:grid;gap:5px;align-content:start}
.kpi .k{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.kpi .v{font-family:'JetBrains Mono',monospace;font-size:var(--fs-h4);font-weight:700;
  line-height:1.15;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi .n{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-3);
  line-height:1.45}

.cns-plot,.cns-panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.plot-hd{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border-bottom:1px solid var(--rule);font-size:var(--fs-label);color:var(--ink-2);letter-spacing:.04em}
.cns-trace{position:relative;height:84px;overflow:hidden;color:var(--sky-t)}
.cns-trace svg{width:200%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .cns.run .tr-move{animation:tracemove 26s linear infinite}
}
@keyframes tracemove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cns-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:36px 21px}

.cns-feed{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.fhd{padding:9px 12px;border-bottom:1px solid var(--rule);font-size:var(--fs-label);
  letter-spacing:.14em;color:var(--ink-3)}
.frows{display:grid}
.frow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:9px 12px;border-bottom:1px solid rgba(36,31,61,.7);font-size:var(--fs-label);
  height:calc(1.5 * var(--fs-label) + 19px);box-sizing:border-box}
.frow:last-child{border-bottom:0}
.frow.new{animation:rowin .45s var(--ease)}
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ft{color:var(--violet-t);font-size:var(--fs-label);flex:none;font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.fm{color:var(--ink-2);min-width:0;line-height:1.5;display:-webkit-box;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fs{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.1em;flex:none}

.mtr{display:grid;gap:7px}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:var(--fs-sm)}
.mrow b{font-weight:600;color:var(--ink)}
.mrow span{font-size:var(--fs-label);color:var(--ink-3);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.cbar{height:4px;background:var(--track);overflow:hidden;border-radius:2px}
.cbarfill{height:100%;transition:width .9s var(--ease)}
.mnote{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-3);line-height:1.45}

.dhead{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding-bottom:13px;border-bottom:1px solid var(--rule)}
.dlabel{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:6px}
.dhead h4{font-size:var(--fs-body);font-weight:700;letter-spacing:-.016em;color:var(--ink)}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.dcell{background:var(--panel);padding:11px 12px;display:grid;gap:5px}
.dcell .k{font-size:var(--fs-label);letter-spacing:.12em;color:var(--ink-3)}
.dcell .v{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.dwhy{background:var(--panel);border:1px solid var(--rule);padding:13px;border-radius:var(--r-sm)}
.dwhy .k{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:8px}
.dwhy p{font-size:var(--fs-sm);line-height:1.66;color:var(--ink-2);max-width:none;margin:0}
.dbars{display:grid;gap:14px}

.seggrid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;padding:13px}
.devgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:13px}
.seg,.dev{aspect-ratio:1;background:currentColor;opacity:.55;border-radius:1px;
  transition:opacity .4s,color .4s}
.seg.c-ok,.dev.c-ok{opacity:.3}
.seg.flip,.dev.flip{opacity:1}
.cns-legend{display:flex;gap:18px;flex-wrap:wrap;padding:0 13px 12px;font-size:var(--fs-label);
  color:var(--ink-3);letter-spacing:.06em}
.cns-legend span{display:inline-flex;align-items:center;gap:7px}
.cns-legend i{width:8px;height:8px;background:currentColor;flex:none;border-radius:1px}

.cns-timeline{display:grid}
.tlrow{display:grid;grid-template-columns:auto auto 1fr;gap:13px;align-items:start;
  padding:12px 0;border-bottom:1px solid rgba(36,31,61,.7)}
.tlrow:last-child{border-bottom:0}
.tlt{font-size:var(--fs-label);color:var(--ink-3);padding-top:2px;font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.tldot{width:8px;height:8px;background:currentColor;margin-top:7px;flex:none;border-radius:1px}
.tlb b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:2px}
.tlb span{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}

.cl-wrap{display:grid;grid-template-columns:150px 1fr;min-height:262px}
.cl-tree{border-right:1px solid var(--rule);padding:12px 0;display:grid;align-content:start;
  background:var(--panel)}
.tnode{padding:5px 12px;font-size:var(--fs-label);color:var(--ink-3);white-space:pre;
  border-left:2px solid transparent;text-transform:none;letter-spacing:0}
.tnode.dir{color:var(--ink-2);font-weight:600}
.tnode.hit{border-left-color:currentColor;background:rgba(109,40,217,.12)}
.cl-code{padding:12px 0;overflow-x:auto;background:var(--code)}
.cline{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;
  padding:2px 14px 2px 0}
.cline.hot{background:rgba(224,133,133,.09)}
.gsev{width:3px;align-self:stretch;background:transparent}
.cline.hot .gsev{background:currentColor}
.cno{font-size:var(--fs-label);color:var(--gutter);width:32px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.cl-code code{font-size:var(--fs-label);line-height:1.78;color:var(--code-ink);white-space:pre;
  overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace}
.cline.hot code{color:var(--code-ink-hi)}
.cl-find{grid-column:1 / -1;border-top:1px solid var(--rule);padding:14px;display:grid;gap:9px;
  align-content:start;background:var(--panel)}
.cl-find h4{font-size:var(--fs-sm);font-weight:700;letter-spacing:-.012em;line-height:1.4;color:var(--ink)}
.cl-find p{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);max-width:none;margin:0}
.cl-find .cns-badge{justify-self:start}
.fmeta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:4px;padding-top:11px;
  border-top:1px solid var(--rule)}
.fmeta>span{display:grid;gap:3px}
.fmeta b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0}
.fmeta span span{font-size:var(--fs-label);letter-spacing:.1em;color:var(--ink-3)}
.cl-foot{border-top:1px solid var(--rule);padding:11px 13px;display:grid;gap:8px;background:var(--panel)}
.cl-foot .mono{font-size:var(--fs-label);text-transform:none;letter-spacing:0}
.cl-foot b{color:var(--ink);font-variant-numeric:tabular-nums}

.fcards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule)}
.fcard{background:var(--panel);padding:13px;display:grid;gap:8px;align-content:start}
.fc-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.fc-where{font-size:var(--fs-label);color:var(--ink-3);text-transform:none;letter-spacing:0}
.fcard b{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);line-height:1.45}
.fc-n{font-size:var(--fs-label);color:var(--ink-3)}

.cell-wrap{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--rule);padding:14px;border-radius:var(--r-sm)}
.cell-svg{width:100%;height:auto}
.cs-tank{fill:none;stroke:var(--rule-2);stroke-width:1}
.cs-fluid{fill:rgba(109,40,217,.1)}
.cs-plate rect{fill:#1C1734;stroke:var(--violet);stroke-width:.8}
.cs-ion circle{fill:var(--sky-t);opacity:.85}
.cs-flow path{fill:none;stroke:var(--violet);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .cns.run .cs-ion circle{animation:ionflow 3.4s ease-in-out infinite}
  .cns.run .cs-ion circle:nth-child(2){animation-delay:.5s}
  .cns.run .cs-ion circle:nth-child(3){animation-delay:1s}
  .cns.run .cs-ion circle:nth-child(4){animation-delay:1.6s}
  .cns.run .cs-ion circle:nth-child(5){animation-delay:2.2s}
}
@keyframes ionflow{0%{transform:translateX(0);opacity:0}12%{opacity:.9}
  88%{opacity:.9}100%{transform:translateX(92px);opacity:0}}
.cs-lbl{fill:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.13em}
.cell-side{display:grid;gap:14px}
.cell-side.wide{grid-template-columns:repeat(3,1fr);gap:18px}
.cns-steps{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.cns-steps span{flex:1;text-align:center;padding:9px 6px;background:var(--panel);font-size:var(--fs-label);
  color:var(--ink-3);letter-spacing:.06em;transition:color .4s,background .4s}
.cns-steps span.on{color:var(--violet-t);background:var(--tab-on)}

.cns-policy{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.prow{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  background:var(--panel);padding:12px 13px}
.pdot{width:8px;height:8px;background:currentColor;margin-top:7px;flex:none;border-radius:1px}
.prow b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:2px}
.prow span{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55}

/* carousel. Aswin, 19:59: "you can have that screenshot in the carousel, left and right." */
.carousel{display:grid;gap:11px}
.cslide[hidden]{display:none}
.cslide{animation:slidein .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.cslide{animation:none}}
@keyframes slidein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.cnav{display:flex;align-items:center;gap:14px}
.carrow{width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule-2);color:var(--ink-2);
  border-radius:var(--r-sm);transition:border-color .2s,color .2s}
.carrow:hover{border-color:var(--violet-t);color:var(--violet-t)}
.ccaps{position:relative;flex:1;min-width:0;height:1.3em}
.ccap{position:absolute;inset:0;font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--ink-3);opacity:0;transition:opacity .3s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ccap.on{opacity:1}
.cdots{display:flex;gap:7px;flex:none}
.cdot{width:7px;height:7px;padding:0;border:0;cursor:pointer;background:var(--rule-2);
  border-radius:50%;transition:background .25s,transform .25s}
.cdot.on{background:var(--violet-t);transform:scale(1.25)}
.cns-preview{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);color:var(--ink-3);
  line-height:1.6;margin:0;max-width:none}

@media (max-width:1180px){
  .ctabs{display:none}
  .cl-wrap{grid-template-columns:118px 1fr}
  .cl-find{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule)}
  .dgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .cns-kpis{grid-template-columns:1fr}
  .cell-wrap,.cell-side.wide,.fcards,.cl-wrap{grid-template-columns:1fr}
  .cl-tree{border-right:0;border-bottom:1px solid var(--rule);grid-auto-flow:column;
    overflow-x:auto;padding:8px 0}
  .seggrid{grid-template-columns:repeat(10,1fr)}
  .devgrid{grid-template-columns:repeat(12,1fr)}
  .frow{grid-template-columns:auto 1fr;row-gap:3px}
  .frow .fs{grid-column:2}
}

/* --- product feature rows. Corelight's shape: a heading and a paragraph beside a
   visual, alternating sides. Replaces four numbered steps of bulleted lists, which the
   2026-09-16 review correctly said was still a list in a 2x2 costume. ------------- */
/* NOT .frow / .frows: those are the console's event-feed rows. Reusing the names put the
   feed's grid and border rules on every product feature. */
.feats{display:grid;gap:clamp(48px,7vh,92px)}
.feat>*{min-width:0}
.feat{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);
  align-items:start}
.feat.b .fcopy{order:2}
.feat.b .fvis{order:1}
.fcopy{max-width:42rem}
.fcopy .d3{margin-bottom:20px}
.fkick{margin-bottom:18px}
/* The middle tier the column was missing: heading, then one sentence that lands the
   claim, then the supporting paragraph. The left rule is the same idiom the console
   notes use, which ties the two halves of the row together without adding a colour. */
.ftake{font-size:var(--fs-lead);line-height:1.45;color:var(--ink);font-weight:600;
  letter-spacing:-.012em;margin:0 0 20px;padding-left:16px;
  border-left:2px solid var(--violet-t);max-width:34ch}
.fbody{font-size:var(--fs-body);line-height:1.72;color:var(--ink-2);margin:0;max-width:52ch}
/* The panels are taller than the copy, so top-aligning moved the void to the bottom of
   the text column rather than removing it. Pinning the copy turns that space into
   something the layout is using: the argument stays in view while its evidence scrolls
   past it. Only above the single-column breakpoint, and only where the row is actually
   taller than the copy - sticky is inert otherwise. */
@media (min-width:1001px){
  .fcopy{position:sticky;top:calc(var(--bar) + 56px);align-self:start}
}
.fcopy h3{margin-bottom:16px}
.fcopy p{font-size:var(--fs-body);line-height:1.78;color:var(--ink-2);max-width:60ch;margin:0}
.fvis .figure{margin:0;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
@media (max-width:1000px){
  .feat,.feat.b{grid-template-columns:1fr;gap:26px}
  .feat.b .fcopy,.feat.b .fvis{order:0}
  .fcopy{max-width:none}
}

/* product hero: copy left, its console right */
.phero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,64px);align-items:center}
.phero>*{min-width:0}
.phero .stage{max-width:42rem}
@media (max-width:1000px){.phero{grid-template-columns:1fr;gap:30px}.phero .stage{max-width:none}}
@media (max-width:820px){.phero .cns,.fvis .cns{overflow-x:auto}}

/* the joint venture is named as one, in the heading. 2026-09-16 review: Vulcan Ventura
   "should be joint QV or joint adjacent JV or something like that, just to come off
   better", which is Aaron's point from 33:39 restated. */
.jvtag{display:block;font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--violet-t);margin-bottom:12px}

/* --- product showcase: every product once, copy left, its console right ---------- */
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:clamp(26px,4vh,44px);
  overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{padding:15px 22px;border:0;background:none;font-size:var(--fs-body);font-weight:600;
  color:var(--ink-3);cursor:pointer;white-space:nowrap;position:relative;transition:color .2s}
.ptabs button:hover{color:var(--ink-2)}
.ptabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--violet-t);transform:scaleX(0);transition:transform .3s var(--ease)}
.ptabs button[aria-selected="true"]{color:var(--ink)}
.ptabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ppanel[hidden]{display:none}
.pgrid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,3.6vw,58px);align-items:center}
.pcopy{max-width:34rem}
.pconsole{min-width:0}
.cf-turnstile{min-height:65px}
.pcopy .lbl{color:var(--violet-t);display:block;margin-bottom:14px}
.pcopy h3{margin-bottom:16px}
.pcopy .lead{margin-bottom:24px}
.ppts{display:grid;gap:0;margin-bottom:28px}
.ppt{padding:15px 0;border-top:1px solid var(--rule)}
.ppt b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.012em}
.ppt span{font-size:var(--fs-body);line-height:1.66;color:var(--ink-2)}
@media (max-width:1080px){
  .pgrid{grid-template-columns:1fr;gap:30px}
  .pcopy{max-width:none}
}

/* Product "how it works": cards, never a list. Aswin, 12:12. */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.sgrid.three{grid-template-columns:repeat(3,1fr)}
.scard{background:var(--surface);padding:clamp(22px,2.4vw,30px);display:grid;
  align-content:start;gap:0;transition:background .25s}
.scard:hover{background:var(--surface-2)}
.snum{color:var(--violet-t);font-size:var(--fs-label);letter-spacing:.14em;display:block;margin-bottom:14px}
.scard h3{margin-bottom:10px}
.ssub{font-size:var(--fs-sm);line-height:1.66;color:var(--ink-2);margin:0 0 4px;max-width:none}
.spts{display:grid;margin-top:14px}
.spt{display:flex;gap:11px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--rule)}
.sdot{width:5px;height:5px;background:var(--violet-t);flex:none;margin-top:9px;
  border-radius:50%}
.spt span:last-child{font-size:var(--fs-sm);line-height:1.66;color:var(--ink-2)}
@media (max-width:860px){.sgrid,.sgrid.three{grid-template-columns:1fr}}

/* --- CyberNeuro-RT placements + triage ------------------------------------ */
.dep{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.dep-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,1.2fr) auto;
  gap:16px;align-items:center;background:var(--panel);padding:14px 15px}
.dep-n{display:grid;gap:3px}
.dep-n b{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.dep-hw{font-size:var(--fs-label);color:var(--ink-3)}
.dep-bar{display:grid;gap:6px}
.dep-note{font-size:var(--fs-label);color:var(--ink-3)}

.tq{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.tq-row{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--panel);padding:14px 15px}
.tq-rank{font-size:var(--fs-h4);font-weight:700;color:var(--ink-3);line-height:1.1;width:20px}
.tq-body{display:grid;gap:8px;min-width:0}
.tq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tq-where{font-size:var(--fs-label);color:var(--ink-2)}
.tq-why{font-size:var(--fs-sm);line-height:1.55;color:var(--ink);margin:0;max-width:none}
.tq-sup{display:flex;align-items:baseline;gap:12px;padding:13px 15px;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm)}
.tq-supn{font-size:var(--fs-h4);font-weight:700;color:var(--violet-t);line-height:1}
.tq-supl{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-3)}

@media (max-width:820px){
  .dep-row{grid-template-columns:1fr auto;row-gap:10px}
  .dep-row .dep-bar{grid-column:1 / -1}
}

/* --- PANELS: other screens of the same product -------------------------------------
   These sit in the feature rows and share the console's chrome, density and tokens.
   Ported from site 72, retinted to this site's violet ground: the panel fill is
   .cns-panel's #120F22 rather than 72's slate, and the one accent button is --violet
   rather than --blue. Same idea, this site's palette. -------------------------------- */
.cns-split{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.prow-k{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:14px;
  background:var(--panel);padding:13px 15px;align-items:baseline}
.prow-k .rk{font-size:var(--fs-label);letter-spacing:.11em;color:var(--ink-3);
  overflow-wrap:anywhere;line-height:1.35}
/* Not `.rv`: that is the scroll-reveal class and sets opacity:0 until an observer adds
   `.vis`. Panel cells are never observed, so naming them .rv made them invisible. */
.prow-k .pv{font-size:var(--fs-sm);color:var(--ink);font-weight:600}

.scope-list{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.scope-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 15px;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink)}
.scope-row.out{color:var(--ink-3)}
.scope-row .mono{font-size:var(--fs-sm)}

.envs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.env{background:var(--panel);padding:15px;display:grid;gap:11px;align-content:start}
.env.idle{opacity:.6}
.env-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.env-top .mono{font-size:var(--fs-label);color:var(--ink);letter-spacing:.1em}
.env-meta{font-size:var(--fs-label);color:var(--ink-3);line-height:1.5}
.env-note{font-size:var(--fs-label);color:var(--ink-3)}

.lib{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.lib-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(90px,1.1fr) auto;
  gap:16px;align-items:center;background:var(--panel);padding:14px 15px}
.lib-name{font-size:var(--fs-sm);color:var(--ink);font-weight:600}

.vf-head{display:grid;gap:7px}
.vf-head h4{font-size:var(--fs-h4);font-weight:700;color:var(--ink);letter-spacing:-.016em}
.vf-head .mono{font-size:var(--fs-label)}
.vf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.vf-col{background:var(--panel);padding:15px;display:grid;gap:10px;align-content:start;
  justify-items:start}
.vf-col.agree{background:var(--col-hi)}
.vf-k{font-size:var(--fs-label);letter-spacing:.13em;color:var(--ink-3)}
.vf-col p{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2);margin:0;max-width:none}
.vf-rejects{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.vf-rej{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:14px;
  align-items:center;padding:13px 15px;border-top:1px solid var(--rule)}
.vf-rej .mono{font-size:var(--fs-label);color:var(--ink-3)}
.vf-why{font-size:var(--fs-sm);color:var(--ink-3)}

.stages{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.st-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:center;
  background:var(--panel);padding:12px 15px}
.st-row.resumed{background:var(--row-hi)}
.st-ck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(95,190,142,.18);color:var(--ok);font-size:var(--fs-label);line-height:1}
.st-ck.run{background:rgba(251,191,36,.18);border:2px solid var(--amber-t)}
.st-ck.wait{background:none;border:2px solid var(--rule-hi)}
.st-n{font-size:var(--fs-label);color:var(--ink-3);width:14px}
.st-name{font-size:var(--fs-sm);color:var(--ink)}
.st-dur{font-size:var(--fs-label);color:var(--ink-3)}
.st-dur.dim{color:var(--ink-3)}

.diff{background:var(--code);border:1px solid var(--rule);border-radius:var(--r-sm);
  overflow:hidden}
.dline{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:6px 15px;align-items:baseline}
.dline code{font-size:var(--fs-sm);white-space:pre;overflow-x:auto;color:var(--code-ink)}
.dline .dn{font-size:var(--fs-label);color:var(--gutter);width:30px;text-align:right}
.dline.del{background:rgba(224,133,133,.12)}
.dline.del code{color:var(--code-del)}
.dline.add{background:rgba(95,190,142,.11)}
.dline.add code{color:var(--code-add)}

/* `.mono` in this design is a LABEL style: uppercase with wide tracking. That is right
   for "AUTHORISED BY" and wrong for anything literal - source code, a hostname, a file
   path, a reference id. Those read as shouting and, worse, as inaccurate: memcpy is not
   MEMCPY. Reset wherever the monospace is carrying real content. */
.diff code,.dline .dn,.scope-row .mono,.vf-head .mono,.vf-rej .mono,
.prow-k .pv.mono,.act,.env-meta,.env-note,.st-dur,.cns-note,.cns-id span,
.dep-hw,.dep-note,.tq-where,
.cl-code code,.cno,.tnode,.fc-where{text-transform:none;letter-spacing:0}
.env-top .mono,.rk,.vf-k,.fhd{text-transform:uppercase}

.acts{display:flex;gap:10px;flex-wrap:wrap}
.act{font-size:var(--fs-label);padding:9px 15px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--rule-2);color:var(--ink-2);font-family:'JetBrains Mono',monospace}
.act:first-child{background:var(--violet);border-color:var(--violet);color:#fff}

@media (max-width:820px){
  .envs,.vf-grid{grid-template-columns:1fr}
  .lib-row{grid-template-columns:1fr auto;gap:10px}
  .lib-row .cbar{grid-column:1 / -1}
  .prow-k{grid-template-columns:1fr;gap:5px}
  .vf-rej{grid-template-columns:1fr auto}
  .st-row{grid-template-columns:auto auto 1fr;row-gap:6px}
  .st-row .st-dur,.st-row .cns-badge{grid-column:3}
}


@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .specs{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:820px){
  .nav,.top .cta{display:none;position:fixed;inset:var(--bar) 0 auto;background:var(--ground);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    margin:0;padding:16px 4vw;gap:0;height:auto;max-height:calc(100svh - var(--bar));overflow-y:auto}
  .top.open .nav{display:flex}
  .nav > li{height:auto;display:block;border-bottom:1px solid var(--rule)}
  .nav > li:last-child{border-bottom:0}
  .nav a,.nav button{padding:15px 0;font-size:var(--fs-body);width:100%;justify-content:space-between}
  /* the dropdown becomes an inline accordion rather than a floating panel */
  .menu{position:static;translate:none;width:auto;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;display:none;grid-template-columns:1fr;padding:0 0 12px}
  .nav li.open .menu{display:grid}
  .menu a{padding:11px 14px;background:var(--surface);margin-bottom:4px}
  .burger{display:flex}
  .top.open .cta{display:flex;position:static;border:0;padding:14px 4vw 20px;justify-content:center}
  .fields .s{text-align:left;width:100%}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:var(--fs-body)}
  .specs{grid-template-columns:1fr;gap:20px}
  .hero{min-height:0}
}