@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');}

/* Palette after AptaSentry, the site Srini sent on 2026-09-17.
   He liked "the overall look and feel" and pointed at the sub-branded products, the
   statistics, and the tiered pricing with no prices shown. The colour follows: a dark navy
   ground rather than site 7's near-black purple, with blue and cyan doing the work.
   Both he and Aswin named blue as the register they expect (Aswin, 09-11 15:16: "white,
   gray and black ... blue"), and violet was never asked for.

   Every value measured on --ground:
     blue    #2F6FED  4.22:1  FILL ONLY - buttons, rules, glows. Never carries text.
     blue-t  #6BA6FF  7.79:1  safe on text
     cyan-t  #7DD3FC 11.51:1  the second tone in the display headline
     ink-3   #93A1B5  7.32:1
     ink-4   #7B8A9E  5.46:1  smallest labels
*/
:root{
  --ground:#0A0F18; --surface:#111826; --surface-2:#16202F; --surface-3:#1D293B;

  --ink:#FFFFFF; --ink-2:#C7D2E0; --ink-3:#93A1B5; --ink-4:#7B8A9E;

  --blue:#2F6FED; --blue-deep:#1D4FBF; --blue-t:#6BA6FF;
  --cyan:#22A7D0; --cyan-t:#7DD3FC;
  --violet-t:#6BA6FF;   /* kept as an alias so existing rules keep resolving */
  --sky-t:#7DD3FC; --amber:#D9A34A; --amber-t:#FBBF24;

  --ok:#4ADE80; --warn:#FBBF24; --alert:#F87171;

  /* The headline runs deep blue into light cyan, which is AptaSentry's move and the one
     piece of their look that is genuinely distinctive. */
  --spectrum:linear-gradient(90deg,#1D4FBF,#2F6FED,#22A7D0,#7DD3FC);
  --display-grad:linear-gradient(180deg,#7DD3FC,#6BA6FF);

  --rule:#1C2636; --rule-2:#263243; --rule-hi:#33435A;

  --shell:min(1240px,92vw);
  --bar:76px;
  --r:12px; --r-sm:8px;


  /* TYPE SCALE - the only sizes on this site.
     2026-09-21 review: "I need big text ... it can't be just small, big, medium, small,
     big, medium, very tiny ... the size of the font needs to be consistent throughout the
     website. That must be a must."
     Before this there were 44 distinct font sizes across 111 declarations and more than
     eighty of them were under 16px. That is why the page read as inconsistent: it was.
     Everything now resolves to one of these eight, and audit.check_type_scale fails the
     build on any size below --fs-label. */
  --fs-display:clamp(2.4rem,4vw,3.1rem);   /* 38-50  page title */
  --fs-h2:clamp(1.95rem,2.9vw,2.45rem);    /* 31-39  section heading */
  --fs-h3:1.625rem;                        /* 26     sub heading */
  --fs-h4:1.375rem;                        /* 22     card heading */
  --fs-lead:1.3125rem;                     /* 21     lead paragraph */
  --fs-body:1.25rem;                       /* 20     body */
  --fs-sm:1.125rem;                        /* 18     secondary */
  --fs-label:1rem;                         /* 16     mono labels. THE FLOOR. */

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s;
}


*,*::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:var(--fs-body)/1.7 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. */
/* Larger again. AptaSentry's hero runs near 64px and the page carries it because the
   hero is centred with nothing competing beside it. */
.d1{font-size:var(--fs-display);letter-spacing:-.03em;line-height:1.1}
.d2{font-size:var(--fs-h2);letter-spacing:-.028em;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-lead);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-label);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. */
/* A pill, not a dash-and-label. AptaSentry puts a small rounded badge above each section
   heading ("FAQ", "ALSO AVAILABLE") and it reads as a deliberate system rather than
   decoration. */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan-t);margin:0 0 20px;
  font-size:var(--fs-label);letter-spacing:.14em;padding:7px 16px;border-radius:999px;
  background:rgba(45,111,237,.12);border:1px solid rgba(107,166,255,.26)}
.eyebrow::before{display:none}
.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{background:var(--display-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;display:block;
  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)}
}

::selection{background:var(--blue);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:rgba(8,7,15,.72);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:rgba(8,7,15,.92)}
.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)}

/* ---- 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;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,38px);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:22px 24px;box-shadow:0 30px 64px -22px rgba(0,0,0,.85);width:min(640px,86vw)}
.mcol{display:grid;gap:6px;align-content:start}
.mhd{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);padding:0 10px 10px;
  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:11px 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-body);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.menu .d{display:block;font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;line-height:1.5}

.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, like the reference. Its section openers all sit on the centre line with the
   lead beneath, which is what gives the page its calm rhythm. */
.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}

/* ---- 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;
  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(--blue);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(52px,8vh,104px) 0 clamp(44px,6vh,80px);overflow:hidden;text-align:center}
.hero .stage{max-width:min(58rem,100%);margin:0 auto;display:grid;justify-items:center}
.hero .lead{text-align:center;margin-left:auto;margin-right:auto;max-width:62ch}
.hero .btnrow{justify-content:center}
.hero .in{width:var(--shell);margin:0 auto}
.hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(30px,4vw,64px);
  align-items:center}
.hero-grid .stage{max-width:36rem}
@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:.28}
.bloom i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-10vw;background:var(--blue-deep)}
.bloom i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:6vw;background:var(--blue);opacity:.22}
.bloom i:nth-child(3){width:30vw;height:30vw;right:14vw;bottom:-12vw;background:var(--cyan);opacity:.16}
@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}

/* ---- 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-lead);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-label);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:var(--fs-display);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:#B79BFB}
.fields > *:nth-child(3):hover .f{color:var(--blue-t)}
.fields > *:nth-child(4):hover .f{color:#6FBDF5}
.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)}

/* ---- 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(--blue)}
.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}
.marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 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:#F2F5FA;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:clamp(18px,3vw,44px)}
/* These held bare numerals when the copy was the 2019 spec sheet ("6", "75x"), so the
   figure was set at 54px. The rewritten facts are short phrases, and at that size "Core or
   edge" broke across three lines. 18px against a 13px label is the subtle step Aaron asked
   for at 45:49 and it stops the wrapping. */
.stats .fig{font-family:Inter,sans-serif;font-weight:700;font-size:var(--fs-body);
  letter-spacing:-.014em;line-height:1.35;display:block}
.stats .l{font-size:var(--fs-label);line-height:1.5;color:var(--ink-4);margin-top:7px;display:block;
  max-width:24ch;font-family:'JetBrains Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase}

/* ---- 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-label);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-label);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(--blue);
  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:#4ADE80} .status.err{color:#F87171}

/* ---- 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:#0C121C;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 #0C121C: #5FBE8E is 7.4:1, #E08585 is 6.4:1, both safe on readouts. */
:root{--ok:#5FBE8E;--alert:#E08585}
.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(--cyan)}
.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:12px;padding:11px 14px;background:#111926;
  border-bottom:1px solid var(--rule);flex-wrap:nowrap;min-width:0}
.cns-id{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto}
.cns-id i{width:7px;height:7px;border-radius:50%;background:#2A2440;flex:none}
.cns-id i:first-child{background:var(--blue)}
.cns-id span{font-size:var(--fs-label);color:var(--ink-3);margin-left:6px;white-space:nowrap;
  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:#1A1630;border-color:var(--rule-2)}
.cns-badge{font-family:'JetBrains Mono',monospace;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.11em;padding:4px 9px;flex:none;border:1px solid currentColor;
  border-radius:4px;white-space:nowrap}

.cns-body{padding:15px;display:grid;gap:13px}
.cns-body.flush{padding:0;gap:0}
.cns-note{font-size:var(--fs-label);line-height:1.6;color:var(--ink-3);padding:11px 13px;
  background:#111926;border-left:2px solid var(--blue);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:#111926;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:#111926;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:#111926;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:baseline;
  padding:9px 12px;border-bottom:1px solid rgba(36,31,61,.7);font-size:var(--fs-label)}
.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}
.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-label)}
.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:#221D3A;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:#111926;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-label);font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.dwhy{background:#111926;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-label);color:var(--ink-3);line-height:1.55}

.cl-wrap{display:grid;grid-template-columns:132px 1fr 212px;min-height:262px}
.cl-tree{border-right:1px solid var(--rule);padding:12px 0;display:grid;align-content:start;
  background:#111926}
.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:hidden;background:#0C121C}
.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:#453C63;width:26px;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(--ink-2);white-space:pre;
  overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace}
.cline.hot code{color:var(--ink)}
.cl-find{border-left:1px solid var(--rule);padding:13px;display:grid;gap:9px;
  align-content:start;background:#111926}
.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-label);line-height:1.6;color:var(--ink-3);max-width:none;margin:0}
.cl-find .cns-badge{justify-self:start}
.fmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;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:#111926}
.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:#111926;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:#111926;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:#17233A;stroke:var(--blue);stroke-width:.8}
.cs-ion circle{fill:var(--sky-t);opacity:.85}
.cs-flow path{fill:none;stroke:var(--blue);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:var(--fs-label);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:#111926;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:#171232}

.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:#111926;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-label);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}
}
/* ======================================================================
   FEATURE DIAGRAMS
   The third visual register. The console shows the product's screen; a diagram shows the
   mechanism. 2026-09-21: "I want something actionable that really showcases what CNRT
   does ... all three of the additional images aren't supposed to be consoles."
   Inline SVG, a few hundred bytes each. Motion is CSS only and gated on .run, so nothing
   animates off screen and everything stops under prefers-reduced-motion.
   ====================================================================== */
.dgm{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px;overflow:hidden}
.dgm svg{width:100%;height:auto;display:block;overflow:visible}

.dl{font-family:'JetBrains Mono',monospace;font-size:21px;letter-spacing:.08em;
  fill:var(--ink-2)}
.dl.dim{fill:var(--ink-4)}
.dl.strong{font-size:25px;letter-spacing:-.01em;fill:var(--ink);font-weight:700;
  font-family:Inter,sans-serif}
.dl.key{font-family:Inter,sans-serif;font-size:22px;letter-spacing:0;fill:var(--ink-3)}
.dl.hit{fill:var(--alert)}
.dl.pill{fill:var(--cyan-t);font-size:20px}

.d-axis,.d-rail{stroke:var(--rule-2);stroke-width:1}
.d-bandline{stroke:var(--rule-hi);stroke-width:1;stroke-dasharray:3 4}
.d-band{fill:rgba(47,111,237,.09)}
.d-line{fill:none;stroke:var(--cyan-t);stroke-width:1.8;stroke-linejoin:round}
.d-lead{stroke:var(--alert);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.d-hit{fill:var(--alert)}
.d-hit-ring{fill:none;stroke:var(--alert);stroke-width:1.5;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .run .d-hit-ring{animation:dpulse 2.4s ease-out infinite}
}
@keyframes dpulse{0%{r:6;opacity:.8}70%{r:19;opacity:0}100%{r:19;opacity:0}}

.d-node{fill:var(--surface-2);stroke:var(--rule-2);stroke-width:1}
.d-chip rect,.d-chip path{fill:none;stroke:var(--blue-t);stroke-width:1.6;
  stroke-linecap:round}
.d-chip rect{fill:rgba(47,111,237,.12)}

.d-dot{fill:var(--rule-hi)}
@media (prefers-reduced-motion:no-preference){
  .run .d-dot{animation:dfade 3.6s ease-in-out infinite}
}
@keyframes dfade{0%,100%{opacity:.35}50%{opacity:.85}}
.d-bar{fill:var(--blue);opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .run .d-bar{transform-origin:266px 0;animation:dgrow .7s var(--ease) both}
}
@keyframes dgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.d-card{fill:var(--surface-2);stroke:var(--rule-hi);stroke-width:1}
.d-card-dot{fill:var(--alert)}
.d-card-line{fill:var(--ink-4)}
.d-card-line.faint{fill:var(--rule-hi)}
.d-arrow{fill:none;stroke:var(--blue-t);stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round}

.d-waste rect{fill:var(--surface-3);stroke:var(--rule-hi);stroke-width:1}
.d-cell{fill:rgba(47,111,237,.06);stroke:var(--rule-2);stroke-width:1}
.d-plate{fill:var(--surface-3);stroke:var(--blue);stroke-width:1}
.d-ions circle{fill:var(--cyan-t)}
@media (prefers-reduced-motion:no-preference){
  .run .d-ions circle{animation:dion 3.2s ease-in-out infinite}
  .run .d-ions circle:nth-child(2){animation-delay:.9s}
  .run .d-ions circle:nth-child(3){animation-delay:1.8s}
}
@keyframes dion{0%{transform:translateX(0);opacity:0}15%{opacity:.95}
  85%{opacity:.95}100%{transform:translateX(100px);opacity:0}}
.d-pill{fill:rgba(47,111,237,.14);stroke:rgba(107,166,255,.3);stroke-width:1}
.d-gold{fill:#C99A3B}.d-copper{fill:#B46A43}

.d-base{fill:var(--rule-hi)}
.d-ours{fill:var(--blue)}
@media (prefers-reduced-motion:no-preference){
  .run .d-ours{transform-origin:52px 0;animation:dgrow .8s var(--ease) both}
}

.d-layer{fill:var(--surface-2);stroke:var(--rule-2);stroke-width:1}
.d-layer.prot{fill:rgba(47,111,237,.14);stroke:var(--blue)}
.d-divide{stroke:var(--blue);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.d-attack-line{stroke:var(--alert);stroke-width:1.6;stroke-dasharray:4 4}
.d-attack-head{fill:none;stroke:var(--alert);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .run .d-attack{animation:dattack 3s ease-in-out infinite}
}
@keyframes dattack{0%,100%{opacity:.35;transform:translateY(0)}
  45%{opacity:1;transform:translateY(54px)}60%{opacity:1;transform:translateY(54px)}}
.d-block{fill:var(--ground);stroke:var(--alert);stroke-width:1.6}
.d-block-x{stroke:var(--alert);stroke-width:1.6;stroke-linecap:round;
  transform-origin:320px 196px;transform:rotate(45deg)}

.d-dev{fill:var(--rule-hi)}
.d-dev.ok{fill:rgba(74,222,128,.55)}
.d-dev.stale{fill:rgba(251,191,36,.7)}
.d-dev.held{fill:rgba(248,113,113,.8)}
/* Vanguard and CodeLens diagram parts */
.d-gate{fill:rgba(47,111,237,.1);stroke:var(--blue);stroke-width:1.5}
.d-tick{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.d-tick.sm{stroke-width:3}
.d-vm{fill:var(--surface-2);stroke:var(--blue);stroke-width:1.5}
.d-vm.queued{stroke:var(--rule-hi);stroke-dasharray:6 5;fill:var(--surface)}
.d-mod{fill:var(--blue);opacity:.85}
.d-mod.pending{fill:none;stroke:var(--rule-hi);stroke-width:1.5;stroke-dasharray:3 3}
.d-stage{fill:var(--blue);opacity:.9}
.d-stage.ahead{fill:none;stroke:var(--rule-hi);stroke-width:1.5}
.d-ckpt{fill:var(--cyan-t)}
.d-choice{fill:none;stroke:var(--rule-hi);stroke-width:2}
.d-choice.on{fill:rgba(74,222,128,.16);stroke:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .run .d-mod{animation:dfade 5s ease-in-out infinite}
  .run .d-resume{animation:dattack 3s ease-in-out infinite}
}
@media (prefers-reduced-motion:no-preference){
  .run .d-dev{animation:dfade 5s ease-in-out infinite}
}

@media (max-width:640px){
  .dl{font-size:26px}
  .dl.key{font-size:27px}
  .dl.strong{font-size:30px}
}


/* --- pricing tiers. AptaSentry's shape: four columns, no prices, every one ending at a
   demo request, features grouped with ticks and crosses, one tier lifted. ---------- */
.ptiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.ptier{background:var(--surface);padding:26px 22px;display:grid;align-content:start;gap:12px}
.ptier.hi{background:var(--surface-2);position:relative}
.ptier.hi::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--spectrum)}
.ptag{color:var(--cyan-t);font-size:var(--fs-label);letter-spacing:.16em}
.ptier h3{color:var(--ink)}
.pwho{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);margin:0}
.ppr{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ptier .btn{width:100%;justify-content:center;margin-top:4px}
.pbody{display:grid;gap:20px;margin-top:10px}
.pgrp{display:grid;gap:9px}
.pgh{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-4);padding-bottom:9px;
  border-bottom:1px solid var(--rule)}
.pf{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.pf.no{color:var(--ink-4)}
.pmk{width:15px;height:15px;margin-top:3px;flex:none;position:relative}
.pf.yes .pmk::before{content:"";position:absolute;left:2px;top:4px;width:8px;height:4px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.pf.no .pmk::before,.pf.no .pmk::after{content:"";position:absolute;left:3px;top:7px;
  width:10px;height:2px;background:var(--ink-4)}
.pf.no .pmk::before{transform:rotate(45deg)}
.pf.no .pmk::after{transform:rotate(-45deg)}

.onprem{margin-top:clamp(26px,4vh,44px);padding:clamp(22px,2.6vw,34px);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.onprem h3{margin:10px 0 10px}
.onprem .sm{max-width:74ch;margin:0}
.onprem .btn{flex:none}

/* --- FAQ accordion ------------------------------------------------------------- */
.faqs{display:grid;gap:10px;max-width:min(58rem,100%);margin:0 auto}
.faq{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  transition:border-color .25s}
.faq[open]{border-color:var(--rule-hi)}
.faq summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;gap:18px;
  align-items:center;justify-content:space-between;font-size:var(--fs-body);font-weight:600;
  color:var(--ink);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:14px;height:14px;flex:none;position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--cyan-t);
  transition:transform .25s var(--ease)}
.faq .pm::before{left:0;top:6px;width:14px;height:2px}
.faq .pm::after{left:6px;top:0;width:2px;height:14px}
.faq[open] .pm::after{transform:scaleY(0)}
.faq .fa{padding:0 22px 20px}
.faq .fa p{font-size:var(--fs-body);line-height:1.74;color:var(--ink-2);max-width:72ch;margin:0}

@media (max-width:1080px){.ptiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.ptiers{grid-template-columns:1fr}.onprem{flex-direction:column;
  align-items:flex-start}}

/* --- 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{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,4vw,64px);align-items:center}
.feat.b .fcopy{order:2}
.feat.b .fvis{order:1}
.fcopy{max-width:36rem}
.fnum{display:block;color:var(--violet-t);font-size:var(--fs-sm);letter-spacing:.16em;margin-bottom:16px}
.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:1fr 1.06fr;gap:clamp(30px,4vw,60px);align-items:center}
.phero .stage{max-width:36rem}
@media (max-width:1000px){.phero{grid-template-columns:1fr;gap:30px}.phero .stage{max-width:none}}

/* 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-label);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}}


@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}
}