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

:root{
  /* ground */
  --ground:#08070F; --surface:#141221; --surface-2:#1C1930; --surface-3:#252140;

  /* ink. --ink-3 is #8683A0 and not darker: it has to clear 4.5:1 on --surface-2,
     the deepest card fill. #6E6B85 looked right and measured 3.33:1. */
  --ink:#FFFFFF; --ink-2:#A5A3B8; --ink-3:#8683A0;

  /* 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 - the tints, all >=4.5:1 on the ground */
  --violet-t:#A78BFA; --blue-t:#7CA8FF; --sky-t:#38BDF8; --amber-t:#FBBF24;
  --cyan-t:#22D3EE;

  /* No magenta. The first pass ran indigo->violet->magenta->orange->amber and read as
     pink, which is both Accenture's palette and not ours. Cooled to violet->blue->sky. */
  --spectrum:linear-gradient(90deg,#3B1E7A,#6D28D9,#2563EB,#0EA5E9);

  /* lines */
  --rule:#241F3D; --rule-2:#332C52; --rule-hi:#443A68;

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


*,*::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:clamp(2.1rem,3.4vw,2.95rem);letter-spacing:-.028em;line-height:1.12}
.d2{font-size:clamp(1.75rem,3vw,2.6rem);letter-spacing:-.026em;line-height:1.14}
.d3{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.02em;font-weight:700;line-height:1.28}
.d4{font-size:1.2rem;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}
.lead{font-size:clamp(1.13rem,1.3vw,1.3rem);line-height:1.72;color:var(--ink-2);max-width:62ch}
.sm{font-size:1.06rem;line-height:1.72;color:var(--ink-2)}

.mono{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--violet-t);margin:0 0 18px}
.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)}
}

::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: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:1.02rem;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:.9rem;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:calc(100% - 8px);left:50%;translate:-50% 0;
  width:min(560px,86vw);padding:10px;margin:0;list-style:none;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav li.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{
  display:block;padding:12px 14px;border-radius:var(--r-sm);
  transition:background .22s var(--ease);
}
.menu a:hover{background:var(--surface-2)}
.menu .n{display:block;font-weight:600;color:var(--ink);font-size:.94rem;margin-bottom:2px}
.menu .d{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.4}

.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:.9rem;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:.72rem;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:.9rem;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. */

.head{max-width:62ch;margin-bottom:clamp(28px,4vh,46px)}
.head .lead{margin-top:18px}
.rowend{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(32px,4.5vh,56px)}
.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:.92rem;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:.92rem;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: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(--indigo)}
.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(--sky);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:.95rem;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:.92rem;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:.9rem;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:1.35rem;letter-spacing:-.02em;color:var(--ink)}
.agcol .ct{color:var(--ink-3)}
.prog{font-size:1.02rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:16px 16px 14px;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.prog:hover{border-color:var(--rule-hi);transform:translateX(3px);background:var(--surface-2)}
.prog .ph{color:var(--ink-3);margin-bottom:8px;display:block}
.prog .tp{font-size:.92rem;line-height:1.45;font-weight:500;color:var(--ink);margin-bottom:10px}
.prog .syn{font-size:.85rem;line-height:1.55;color:var(--ink-2);margin:0}
.prog summary{cursor:pointer;list-style:none}
.prog summary::-webkit-details-marker{display:none}
.prog .tog{color:var(--violet-t);font-size:.8rem;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.prog[open] .tog .pm{transform:rotate(45deg)}
.prog .pm{display:inline-block;transition:transform .3s var(--ease)}
.prog .bd{padding-top:12px;margin-top:12px;border-top:1px solid var(--rule)}

/* ---- /programs/: the full record ------------------------------------------- */
/* The landing band teases with the synopsis folded into a <details>. This page is
   the opposite - every synopsis is open - so the same plate needs reading width
   instead of a 190px index column. */
.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:1.02rem;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:.72rem;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:.85rem;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:.9rem;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:.88rem;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}
.marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee figure{flex:0 0 auto;width:clamp(126px,13vw,168px);margin:0 clamp(12px,1.5vw,20px) 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:18px;
  display:grid;place-items:center;aspect-ratio:1;transition:border-color .3s var(--ease)}
.marquee figure:hover{border-color:var(--rule-hi)}
/* the seals are dark-on-white artwork, so they need a light plate on a dark page */
.marquee img{max-height:100%;width:auto;object-fit:contain}
@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)}
.stats .fig{font-family:Inter,sans-serif;font-weight:700;font-size:clamp(2.1rem,4.6vw,3.4rem);
  letter-spacing:-.035em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.stats .l{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin-top:10px;display:block;max-width:22ch}

/* ---- prose / lists ---------------------------------------------------------------- */
.bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bul li{position:relative;padding-left:22px;font-size:.93rem;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:.93rem}
.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:.72rem;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:.9rem;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:.89rem;line-height:1.62}
.person a.li{display:inline-flex;margin-top:15px;font-size:.85rem;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:.8rem;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:.86rem;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:.95rem;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:.9rem;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:#0C0A17;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. */
: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)}
.mfill.c-ok{background:var(--ok)}.mfill.c-alert{background:var(--alert)}
.mfill.c-warn{background:var(--amber)}.mfill.c-sky{background:var(--sky)}
.mfill.c-amber{background:var(--amber)}.mfill.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:#120F22;
  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(--violet)}
.cns-id span{font-size:.78rem;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:.7rem;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:.66rem;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:.84rem;line-height:1.6;color:var(--ink-3);padding:11px 13px;
  background:#120F22;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:#120F22;padding:13px 14px;display:grid;gap:5px;align-content:start}
.kpi .k{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.kpi .v{font-family:'JetBrains Mono',monospace;font-size:1.42rem;font-weight:700;
  line-height:1.15;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi .n{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--ink-3);
  line-height:1.45}

.cns-plot,.cns-panel{background:#120F22;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:.72rem;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:#120F22;border:1px solid var(--rule);border-radius:var(--r-sm)}
.fhd{padding:9px 12px;border-bottom:1px solid var(--rule);font-size:.66rem;
  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:.8rem}
.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:.72rem;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:.66rem;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:.86rem}
.mrow b{font-weight:600;color:var(--ink)}
.mrow span{font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:0}
.mtrack{height:4px;background:#221D3A;overflow:hidden;border-radius:2px}
.mfill{height:100%;transition:width .9s var(--ease)}
.mnote{font-family:'JetBrains Mono',monospace;font-size:.66rem;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:.66rem;letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:6px}
.dhead h4{font-size:1.06rem;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:#120F22;padding:11px 12px;display:grid;gap:5px}
.dcell .k{font-size:.66rem;letter-spacing:.12em;color:var(--ink-3)}
.dcell .v{font-size:.82rem;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
.dwhy{background:#120F22;border:1px solid var(--rule);padding:13px;border-radius:var(--r-sm)}
.dwhy .k{font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);display:block;margin-bottom:8px}
.dwhy p{font-size:.9rem;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:.66rem;
  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:.78rem;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:.9rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.tlb span{font-size:.84rem;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:#120F22}
.tnode{padding:5px 12px;font-size:.78rem;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:#0C0A17}
.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:.72rem;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:.78rem;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:#120F22}
.cl-find h4{font-size:.96rem;font-weight:700;letter-spacing:-.012em;line-height:1.4;color:var(--ink)}
.cl-find p{font-size:.84rem;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:.96rem;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0}
.fmeta span span{font-size:.6rem;letter-spacing:.1em;color:var(--ink-3)}
.cl-foot{border-top:1px solid var(--rule);padding:11px 13px;display:grid;gap:8px;background:#120F22}
.cl-foot .mono{font-size:.72rem;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:#120F22;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:.72rem;color:var(--ink-3);text-transform:none;letter-spacing:0}
.fcard b{font-size:.9rem;font-weight:600;color:var(--ink-2);line-height:1.45}
.fc-n{font-size:.66rem;color:var(--ink-3)}

.cell-wrap{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:center;
  background:#120F22;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:#120F22;font-size:.72rem;
  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:#120F22;padding:12px 13px}
.pdot{width:8px;height:8px;background:currentColor;margin-top:7px;flex:none;border-radius:1px}
.prow b{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.prow span{font-size:.84rem;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:.76rem;
  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:.72rem;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 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:1.02rem;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}
.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:1.06rem;font-weight:700;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.012em}
.ppt span{font-size:1rem;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:.74rem;letter-spacing:.14em;display:block;margin-bottom:14px}
.scard h3{margin-bottom:10px}
.ssub{font-size:.98rem;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:.96rem;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:1.05rem;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:16px}
  .specs{grid-template-columns:1fr;gap:20px}
  .hero{min-height:0}
}