/* ============================================================
   VeroMass — Design System & Shared Styles
   Inspired by Schrödinger's clean, professional aesthetic.
   Maintains VeroMass brand (emerald accent, navy dark tones).
   ============================================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:#fff;font-family:var(--sans);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Respect a reduced-motion preference: an unguarded page-load fade still
   animates for users who have explicitly asked the OS to stop animation. */
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  .fcard,.fcard .fic,.hero .statstrip .s{transition:none}
  html{scroll-behavior:auto}
}
img{max-width:100%;height:auto}
/* No global underline: nav items, the logo and pill buttons are all <a>, so the
   UA default was underlining every one of them. Prose links opt back in below. */
a{color:var(--emerald-lt);transition:.15s;text-decoration:none}
a:hover{color:#7BE8B8}
/* body-copy links keep an underline for affordance */
.sec-p a,.phero-sub a,.hero-sub a,.pagehead p a,p.lede a,.prose a{text-decoration:underline;text-underline-offset:2px}
::selection{background:rgba(14,156,107,.3)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
input,textarea{font:inherit}

/* ---------- Design Tokens ---------- */
:root{
  /* Backgrounds — unified dark palette */
  --paper:#0D1128;     /* main page bg — deep midnight */
  --panel:#151A33;     /* card, surface */
  --panel-2:#11152E;   /* alt surface */
  --sunk:#0E122A;      /* input, search bg */
  --rail:#131830;      /* sidebar, tool nav */

  /* Text — light on dark */
  --ink:#FFFFFF;       /* primary text */
  --ink-2:rgba(255,255,255,.72);     /* secondary */
  --muted:rgba(255,255,255,.48);     /* muted */
  --faint:rgba(255,255,255,.3);     /* very subtle */

  /* Brand — Emerald (VeroMass signature) */
  --emerald:#0E9C6B;
  --emerald-ink:#4FD9A0;   /* lighter emerald for text on dark */
  --emerald-wash:rgba(14,156,107,.15);
  --emerald-lt:#4FD9A0;

  /* Navy — dark sections (deeper than page bg) */
  --navy:#090C1E;
  --navy-2:#070A18;
  --navy-3:#1A1F38;

  /* Utility colors */
  --cyan:#3BC7DB; --cyan-wash:rgba(59,199,219,.12);
  --amber:#D4A043; --amber-wash:rgba(212,160,67,.12);
  --red:#D45A4A; --red-wash:rgba(212,90,74,.12);

  /* Borders & Shadows — subtle light lines on dark */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 3px 12px rgba(0,0,0,.25);
  --shadow-lg:0 2px 6px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);

  /* Spacing */
  --radius:8px;
  --pill:72px;
  --sec:100px;
  --sec-sm:60px;
  --maxw:1400px;   /* landing hero is tuned to this — do not narrow globally */

  /* Typography */
  /* Reference typeface is Graphik, a commercially licensed family (Commercial
     Type) -- not something to embed or link to. Inter is the standard free
     substitute designers reach for to match Graphik's proportions (similar
     x-height, neutral grotesque forms), and the reference runs one family for
     everything rather than a separate display/body pairing. */
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Cascadia Code",ui-monospace,"Consolas",monospace;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:1200px){.wrap{padding:0 48px}}
@media(min-width:1440px){.wrap{padding:0 64px}}
/* Deliberately no full-bleed override at very wide viewports: letting .wrap go
   to 100% stretched every line length past a readable measure. */

/* ---------- Band (page sections) ---------- */
.band{padding:var(--sec) 0;background:var(--paper)}
.band.alt{background:var(--panel-2)}
.band.dark{background:var(--navy-2);color:#fff}
.band.dark .sec-eyebrow .ln{background:rgba(255,255,255,.18)}
.band.dark .sec-h{color:#fff}
.band.dark .sec-p{color:rgba(255,255,255,.65);line-height:1.45}

.band.narrow{padding:var(--sec-sm) 0}

/* ---------- Section Headers ---------- */
.sec-eyebrow{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px}
.sec-eyebrow .ln{width:32px;height:1px;background:var(--line-2)}
.sec-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--emerald);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--emerald) 55%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.sec-h{font-family:var(--display);font-weight:900;font-size:clamp(28px,2.8vw,44px);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:16px;color:var(--ink)}
.sec-h.lg{font-size:clamp(34px,3.6vw,56px)}
.sec-p{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:74ch}
.sec-p.wide{max-width:82ch}
.sec-p + .sec-p{margin-top:16px}

/* Every section keeps the same left edge — centring only the prose blocks
   broke alignment against the grid sections above and below them. */

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:0 40px;height:64px;background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .3s}
/* measured on the reference: nav height is a flat 78px, not responsive-stepped */
@media(min-width:1200px){.nav{height:78px;padding:0 60px}}
@media(min-width:1440px){.nav{height:78px;padding:0 80px}}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.25)}
.nav .logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:900;
  font-size:18px;color:#fff;flex:none}
.nav .logo svg{width:22px;height:22px;color:var(--emerald)}
.nav .navlinks{display:flex;align-items:center;gap:2px}
.nav .navlinks a{display:block;padding:6px 14px;border-radius:6px;font-size:var(--t-nav);
  font-weight:600;color:rgba(255,255,255,.6);transition:.15s}
.nav .navlinks a:hover,.nav .navlinks a.on{color:#fff;background:rgba(255,255,255,.07)}
.nav .nav-actions{display:flex;align-items:center;gap:10px}
.nav .btn{font-size:13px;font-weight:600;padding:7px 14px;border-radius:7px;
  border:1px solid rgba(255,255,255,.24);color:#fff;transition:.15s;font-family:var(--display)}
.nav .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nav .btn.primary{background:var(--emerald);border-color:var(--emerald);color:#fff}
.nav .btn.primary:hover{background:#0BB47B;border-color:#0BB47B}

/* Hamburger — hidden on desktop */
.nav .hamburger{display:none;width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.8);flex:none;align-items:center;justify-content:center}
.nav .hamburger svg{width:18px;height:18px}

@media(max-width:900px){
  .nav{padding:0 20px}
  .nav .navlinks{display:none}
  .nav .btn{display:none}
  .nav .btn.primary{display:inline-flex}
  .nav .hamburger{display:flex}

  /* open state: drop the links into a panel under the bar */
  body.nav-open .nav .navlinks{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:64px;left:0;right:0;
    background:var(--navy);border-bottom:1px solid rgba(255,255,255,.10);
    padding:8px 20px 16px;box-shadow:0 18px 40px rgba(0,0,0,.35);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  body.nav-open .nav .navlinks a{padding:14px 8px;border-radius:8px;font-size:15px}
  body.theme-light.nav-open .nav .navlinks{
    background:#fff;border-bottom-color:rgba(18,18,45,.10);
    box-shadow:0 18px 40px rgba(18,18,45,.12);
  }
  /* the sub-nav sits directly under the bar, so push it out of the way */
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;min-height:620px;padding:120px 0 80px;
  display:flex;align-items:center;background:#0E132F}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 46% 52% at 70% 44%,rgba(64,104,214,.55) 0%,transparent 62%),
    radial-gradient(ellipse 58% 44% at 50% 110%,rgba(150,112,208,.60) 0%,transparent 58%),
    radial-gradient(ellipse 40% 40% at 95% 80%,rgba(124,99,196,.38) 0%,transparent 64%),
    radial-gradient(ellipse 74% 64% at 2% 0%,rgba(13,14,38,.94) 0%,transparent 54%),
    linear-gradient(135deg,#0E1029 0%,#141C4E 36%,#22347E 60%,#4A47A0 80%,#7C63B4 100%)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,26,.92) 0%,rgba(10,10,26,.80) 36%,rgba(12,14,36,.48) 60%,rgba(12,14,36,.25) 100%),
    linear-gradient(180deg,rgba(10,10,26,.68) 0%,transparent 24%,transparent 72%,rgba(10,10,26,.50) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-h{font-family:var(--display);font-weight:900;font-size:clamp(38px,4vw,72px);
  line-height:1.12;letter-spacing:-.01em;margin:0 0 24px;color:#fff}
.hero-h .hl{color:#9FD9F5}
.hero-sub{font-size:18px;line-height:1.6;color:rgba(255,255,255,.76);margin:0 0 36px;max-width:580px}
.hero-sub b{color:#fff}
.hero-vis{position:relative;justify-self:center;width:100%;max-width:540px;
  aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.hero-vis svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 30px 70px rgba(6,10,40,.5));
  animation:molFloat 16s ease-in-out infinite;will-change:transform}
@keyframes molFloat{0%,100%{transform:translateY(-10px) rotate(-1deg)}50%{transform:translateY(10px) rotate(1deg)}}

/* Hero molecule — flowing bond electrons */
.hero-vis .bond{stroke-dasharray:8 4;animation:bondFlow 3s linear infinite}
.hero-vis .bond-slow{stroke-dasharray:6 6;animation:bondFlow 4s linear infinite}
@keyframes bondFlow{to{stroke-dashoffset:-24}}

/* Hero molecule — atom groups glow */
.hero-vis .atom{animation:atomGlow 4s ease-in-out infinite}
.hero-vis .o-atoms{animation-delay:-.8s}
.hero-vis .c-atoms{animation-delay:-2.4s}
.hero-vis .g-atoms{animation-delay:-3.6s}
@keyframes atomGlow{0%,100%{opacity:.65;filter:brightness(1)}50%{opacity:1;filter:brightness(1.35)}}

/* Hero molecule — halo pulse */
.hero-vis .halo{animation:haloPulse 6s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.3}50%{opacity:.6}}

@media(prefers-reduced-motion:reduce){.hero-vis svg{animation:none}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .statstrip{display:flex;gap:40px;margin-top:52px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.13)}
.hero .statstrip .s{transition:.2s;cursor:default;padding:4px 0}
.hero .statstrip .s:hover{transform:translateY(-2px)}
.hero .statstrip .s b{display:block;font-family:var(--display);font-size:24px;font-weight:900;color:#fff;line-height:1.2}
.hero .statstrip .s span{font-size:13px;color:rgba(255,255,255,.45)}
.hero .statstrip .s b em{font-style:normal;color:var(--emerald-lt)}
@media(max-width:960px){
  .hero{min-height:0;padding:100px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-vis{max-width:320px;display:none}
  .hero .statstrip{gap:24px;flex-wrap:wrap}
}

/* ---------- Buttons ---------- */
.cta-lg{display:inline-flex;align-items:center;gap:16px;border-radius:var(--pill);
  font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.02em;padding:8px 12px 8px 24px;transition:.2s;border:0;
  position:relative;overflow:hidden;z-index:1;min-height:56px}
@media(min-width:1440px){.cta-lg{padding:12px 32px;gap:48px;min-height:64px}}
.cta-lg .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.22);transition:.2s;position:relative;z-index:1}
.cta-lg .ic svg{width:14px;height:14px}
.cta-lg:hover .ic{transform:translateX(4px)}
.cta-lg::before{content:'';position:absolute;top:100%;left:50%;width:100%;height:800%;
  border-radius:50%;background:rgba(18,18,45,.5);transform:translate(-50%,0) scale(1);
  transition:transform .5s ease-in-out;z-index:-1}
.cta-lg:hover::before,.cta-lg:focus::before{transform:translate(-50%,-50%) scale(1.4)}
.cta-lg.primary{background:var(--emerald);color:#fff}
.cta-lg.primary:hover{background:var(--emerald)}
.cta-lg.ghost{border:1px solid rgba(255,255,255,.26);color:#fff;background:transparent}
.cta-lg.ghost::before{background:rgba(18,18,45,.5)}
.cta-lg.ghost:hover{border-color:#fff;background:transparent}
.cta-lg.ghost .ic{background:rgba(255,255,255,.14)}

.btn{font-family:var(--display);font-size:13px;font-weight:600;padding:8px 16px;
  border-radius:7px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  transition:.15s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--emerald);color:var(--emerald-ink)}
.btn.primary{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.btn.primary:hover{opacity:.9}

/* ---------- Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.card .ch{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;
  font-size:14px;display:flex;align-items:center;gap:10px}
.card .cb{padding:20px}

/* Feature cards */
.fcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:28px;transition:transform .25s ease,box-shadow .25s ease,border-color .2s;
  box-shadow:var(--shadow);will-change:transform,box-shadow}
.fcard:hover{border-color:var(--emerald);
  transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.fcard .fic{width:40px;height:40px;border-radius:10px;background:var(--emerald-wash);
  color:var(--emerald-ink);display:grid;place-items:center;margin-bottom:16px;transition:transform .25s ease}
.fcard:hover .fic{transform:scale(1.08)}
.fcard .fic svg{width:20px;height:20px}
.fcard h3{font-family:var(--display);font-size:17px;font-weight:800;margin-bottom:8px}
.fcard p{font-size:14px;line-height:1.45;color:var(--ink-2)}

/* ---------- Grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;gap:24px}
}
@media(min-width:901px)and(max-width:1100px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}

/* ---------- Split sections ---------- */
.rsplit{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;position:relative}
.rsplit-content{padding:60px 60px 60px 0}
.rsplit-media{position:relative;min-height:400px;display:grid;place-items:center;
  background:var(--panel-2);border-radius:12px;overflow:hidden}
.rsplit.flip .rsplit-content{padding:60px 0 60px 60px;order:2}
.rsplit.flip .rsplit-media{order:1}
@media(max-width:900px){
  .rsplit{grid-template-columns:1fr}
  .rsplit-content,.rsplit.flip .rsplit-content{padding:32px 0}
  .rsplit-media{min-height:280px}
}

/* ---------- Footer ---------- */
.sitefoot{background:var(--navy-2);color:rgba(255,255,255,.58);padding:64px 0 32px;font-size:13.5px}
.sitefoot .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.sitefoot .fbrand .logo{display:flex;align-items:center;gap:8px;font-family:var(--display);
  font-weight:900;font-size:17px;color:#fff;margin-bottom:12px}
.sitefoot .fbrand .logo svg{width:20px;height:20px;color:var(--emerald)}
.sitefoot .fbrand p{font-size:13px;line-height:1.6;max-width:320px}
.sitefoot h3,.sitefoot h4{color:#fff;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:16px}
.sitefoot a{display:block;padding:4px 0;color:rgba(255,255,255,.5);transition:.15s;font-size:13px}
.sitefoot a:hover{color:#fff}
.sitefoot .fbot{border-top:1px solid rgba(255,255,255,.07);padding-top:20px;
  display:flex;justify-content:space-between;font-size:12.5px}
@media(max-width:768px){
  .sitefoot .fg{grid-template-columns:1fr 1fr;gap:24px}
  .sitefoot .fbrand{grid-column:1/-1}
}

/* ---------- CTA Band ---------- */
.ctaband{padding:calc(var(--sec) * .7) 0;background:var(--navy);color:#fff;text-align:center;
  position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(14,156,107,.2) 0%,transparent 60%)}
.ctaband .wrap{position:relative;z-index:1}
.ctaband h2{font-family:var(--display);font-size:clamp(24px,3vw,38px);font-weight:900;margin-bottom:12px}
.ctaband p{color:rgba(255,255,255,.55);max-width:560px;margin:0 auto 28px;font-size:15px;line-height:1.6}
.ctaband .cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Misc ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--emerald-ink);margin-bottom:12px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex:none}

.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-48{margin-bottom:48px}
.text-center{text-align:center}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.mono{font-family:var(--mono)}

/* ---------- Page Header (interior pages) ---------- */
.pagehead{background:#0E132F;color:#fff;padding:120px 0 56px;position:relative;overflow:hidden}
.pagehead .overlay{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 50% 60% at 70% 40%,rgba(64,104,214,.30) 0%,transparent 60%),
    linear-gradient(135deg,#0E1029 0%,#141C4E 50%,#22347E 100%)}
.pagehead .wrap{position:relative;z-index:1}
/* Centered, matching the reference: no breadcrumb (it doesn't use one),
   centered h1, centered lead paragraph at a readable measure. */
.pagehead{text-align:center}
.pagehead .wrap-inner,.pagehead .wrap{max-width:100%}
.pagehead h1{font-family:var(--display);font-size:clamp(30px,3.4vw,52px);font-weight:900;
  letter-spacing:-.01em;margin:0 auto 16px;max-width:20ch}
.pagehead p{font-size:18px;color:rgba(255,255,255,.66);max-width:56ch;line-height:1.6;margin:0 auto}
.pagehead .breadcrumb{display:none}

/* ---------- Placeholder page ---------- */
.ph-page{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:50vh;text-align:center;padding:80px 24px}
.ph-page .ph-icon{width:64px;height:64px;border-radius:16px;background:var(--panel);
  border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--faint);margin-bottom:20px}
.ph-page h2{font-family:var(--display);font-size:24px;font-weight:800;margin-bottom:8px}
.ph-page p{color:var(--muted);max-width:400px}

/* ---------- Hero compact (smaller hero for some pages) ---------- */
.hero-compact{position:relative;overflow:hidden;color:#fff;padding:120px 0 60px;
  background:#0E132F}
.hero-compact .bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 50% 50% at 70% 50%,rgba(64,104,214,.25) 0%,transparent 60%),
    linear-gradient(135deg,#0E1029 0%,#141C4E 50%,#22347E 100%)}
.hero-compact .wrap{position:relative;z-index:1}
.hero-compact h1{font-family:var(--display);font-size:clamp(28px,3.2vw,48px);font-weight:900;
  letter-spacing:-.01em;margin-bottom:10px}
.hero-compact p{font-size:17px;color:rgba(255,255,255,.64);max-width:600px;line-height:1.6}

/* ---------- Section heading aliases (used by several pages) ----------
   Brought in line with .sec-h: this was still the pre-Inter 900-weight
   treatment, so networking/pricing/science rendered a heavier, differently
   sized heading than every other page on the site. */
.band-h{font-family:var(--display);font-weight:400;font-size:var(--t-h2);
  line-height:1.1667;letter-spacing:-.02em;margin-bottom:12px;color:var(--ink)}
.band-lede{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:680px}

/* ---------- Section wrapper (used by science, networking, pricing) ---------- */
.sec-head{margin-bottom:40px}
@media(max-width:768px){.sec-head{margin-bottom:28px}}

/* ---------- Scroll-reveal animations ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),
  transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.active{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Evidence / stat highlight cards (science page) ---------- */
.stat-highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
@media(max-width:768px){.stat-highlight{grid-template-columns:1fr}}
.sh-card{text-align:center;padding:24px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow)}
/* large stat numerals follow the same light-weight display treatment as the
   homepage statement-metrics figures, rather than the old bold Lato style */
.sh-card .sh-num{font-family:var(--display);font-size:clamp(36px,3.6vw,52px);font-weight:400;
  letter-spacing:-.02em;color:var(--emerald-ink);line-height:1;margin-bottom:4px}
.sh-card .sh-lbl{font-size:13px;color:var(--muted);line-height:1.5}
.sh-card .sh-sub{font-size:11.5px;color:var(--faint);margin-top:6px;font-family:var(--mono)}

/* ---------- Gate cards (science page) ---------- */
.gate-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;
  box-shadow:var(--shadow);transition:.2s}
.gate-card:hover{box-shadow:var(--shadow-lg)}
.gate-card .gn{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gate-card .gn .g-num{width:32px;height:32px;border-radius:8px;background:var(--emerald-wash);
  color:var(--emerald-ink);display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}
.gate-card .gn h3{font-family:var(--display);font-size:17px;font-weight:800}
.gate-card .gp{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:16px}
.gate-card .g-metric{background:var(--panel-2);border-radius:10px;padding:14px 16px;margin-top:12px}
.gate-card .g-metric .gm-row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.gate-card .g-metric .gm-row span{color:var(--muted)}
.gate-card .g-metric .gm-row b{font-family:var(--mono);color:var(--ink);font-weight:600}

/* ---------- Publication cards (science + resources pages) ---------- */
.pub-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;
  box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column;gap:8px}
.pub-card:hover{box-shadow:var(--shadow-lg)}
.pub-card .pub-tag{font-family:var(--mono);font-size:10.5px;color:var(--emerald-ink);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pub-card h3,.pub-card h4{font-family:var(--display);font-size:15px;font-weight:800;line-height:1.35}
.pub-card .pub-authors{font-size:13px;color:var(--muted);line-height:1.5}
.pub-card .pub-journal{font-size:12px;color:var(--faint);font-family:var(--mono)}
.pub-card .pub-link{margin-top:auto;font-size:13px;font-weight:600;color:var(--emerald-ink);
  display:inline-flex;align-items:center;gap:6px;transition:.15s}
.pub-card .pub-link:hover{color:#0BB47B}

/* ---------- Feature highlights ---------- */
.feat-block{margin-top:48px}
.feat-block .feat-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.feat-block .feat-item:last-child{border-bottom:0}
.feat-item .fi-icon{width:36px;height:36px;border-radius:9px;background:var(--emerald-wash);
  color:var(--emerald-ink);display:grid;place-items:center;flex:none}
.feat-item h3,.feat-item h4{font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:4px}
.feat-item p{font-size:14px;color:var(--ink-2);line-height:1.45}

/* ============================================================
   LIGHT THEME — interior & product pages
   ------------------------------------------------------------
   Applied via <body class="theme-light">, so the landing page
   keeps its dark hero and this reverts by removing one class.
   Mirrors the reference site, whose product pages run white
   with navy ink while the homepage hero stays dark.
   ============================================================ */
body.theme-light{
  --paper:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#F4F6F9;
  --sunk:#EDF1F5;
  --rail:#F7F9FB;
  --ink:#12122D;
  --ink-2:rgba(18,18,45,.74);
  --muted:rgba(18,18,45,.56);
  --faint:rgba(18,18,45,.38);
  --line:rgba(18,18,45,.10);
  --line-2:rgba(18,18,45,.18);
  --emerald-ink:#0A7A53;
  --emerald-wash:rgba(14,156,107,.10);
  --shadow:0 1px 2px rgba(18,18,45,.04),0 3px 12px rgba(18,18,45,.06);
  --shadow-lg:0 2px 6px rgba(18,18,45,.06),0 18px 44px rgba(18,18,45,.10);
  /* Narrower measure for text-led interior pages. Scoped here rather than on
     :root because 1400px is what the landing hero is tuned to — narrowing it
     globally wrapped that headline to four lines and stacked its CTAs. */
  --maxw:1280px;
  background:var(--paper);
  color:var(--ink);
}
body.theme-light a{color:var(--emerald-ink)}
body.theme-light a:hover{color:#0BB47B}
body.theme-light ::selection{background:rgba(14,156,107,.18)}
/* `body.theme-light a` (0,1,2) outranks bare component classes like .pc-link
   (0,1,0), so anything that must stay white on a dark band is re-scoped here. */
body.theme-light .pc-link,
body.theme-light .pc-link:hover,
body.theme-light .prodgrid .cta-doc,
body.theme-light .band.dark .cta-doc,
body.theme-light .ctaband .cta-doc,
body.theme-light .band.dark a.cta-lg,
body.theme-light .prodgrid a.cta-lg,
body.theme-light .ctaband a.cta-lg,
body.theme-light .sitefoot a{color:#fff}
/* every dark surface, not just .band.dark — .ctaband and .prodgrid are dark too */
body.theme-light .ctaband .cta-lg.ghost,
body.theme-light .prodgrid .cta-lg.ghost{border-color:rgba(255,255,255,.26);color:#fff}
body.theme-light .ctaband .cta-lg.ghost:hover,
body.theme-light .prodgrid .cta-lg.ghost:hover{border-color:#fff}
body.theme-light .ctaband .cta-lg.ghost .ic,
body.theme-light .prodgrid .cta-lg.ghost .ic{background:rgba(255,255,255,.14)}
body.theme-light .sitefoot a:hover{color:var(--emerald-lt)}
body.theme-light .cta-lg.primary{color:#fff}
body.theme-light .cta-doc{color:#12122D}

/* nav inverts to white on light pages (the reference does the same) */
body.theme-light .nav{background:#fff;border-bottom:1px solid rgba(18,18,45,.10)}
body.theme-light .nav.scrolled{box-shadow:0 2px 14px rgba(18,18,45,.07)}
body.theme-light .nav .logo{color:var(--ink)}
body.theme-light .nav .navlinks a{color:rgba(18,18,45,.66)}
body.theme-light .nav .navlinks a:hover,
body.theme-light .nav .navlinks a.on{color:var(--ink);background:rgba(18,18,45,.05)}
body.theme-light .nav .btn{border-color:rgba(18,18,45,.22);color:var(--ink);background:transparent}
body.theme-light .nav .btn:hover{border-color:var(--ink);background:rgba(18,18,45,.04)}
body.theme-light .nav .btn.primary{background:var(--emerald);border-color:var(--emerald);color:#fff}
body.theme-light .nav .hamburger{border-color:rgba(18,18,45,.2);color:rgba(18,18,45,.75)}

/* dark bands still read correctly inside a light page */
body.theme-light .band.dark{background:var(--navy-2);color:#fff}
body.theme-light .band.dark .sec-h{color:#fff}
body.theme-light .band.dark .sec-p{color:rgba(255,255,255,.68)}
body.theme-light .band.dark .fcard,
body.theme-light .band.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
body.theme-light .band.dark .fcard p{color:rgba(255,255,255,.7)}

/* on a light surface the ghost button needs dark ink, not white */
body.theme-light .cta-lg.ghost{border-color:rgba(18,18,45,.26);color:var(--ink)}
body.theme-light .cta-lg.ghost:hover{border-color:var(--ink)}
body.theme-light .cta-lg.ghost .ic{background:rgba(18,18,45,.08)}
body.theme-light .band.dark .cta-lg.ghost{border-color:rgba(255,255,255,.26);color:#fff}
body.theme-light .band.dark .cta-lg.ghost .ic{background:rgba(255,255,255,.14)}

/* ============================================================
   SECTION SUB-NAV — dark bar beneath the main nav
   ============================================================ */
/* .subnav (a second, dark bar stacked under the main nav on product pages)
   was removed: the Platform mega-menu already links Identification / Target
   Fishing / Networking / Batch API / Documentation, so the second bar was
   pure duplication -- two navigation bars stacked on every product page. */

/* ============================================================
   PRODUCT HERO — light "white-view" variant
   Reference geometry: 723px copy column, h1 80/900/lh 88,
   sub 20/lh 30, product visual sitting to the right.
   ============================================================ */
/* Centered, single-column product hero -- matches the reference pattern:
   centered eyebrow, centered h1, centered lead paragraph at a readable
   measure, centered CTA(s). No side-by-side visual in the hero itself; any
   product image moves to an .altrow section below (see further down). */
.phero{position:relative;overflow:hidden;min-height:0;display:block;
  padding:130px 0 84px;background:#fff;text-align:center}
.phero-wash{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%,rgba(199,236,222,.42) 0%,transparent 62%),
    radial-gradient(ellipse 58% 60% at 92% 92%,rgba(226,214,244,.42) 0%,transparent 60%),
    linear-gradient(180deg,#F7FBF9 0%,#FFFFFF 46%,#FBFAFD 100%)}
.phero .wrap{position:relative;z-index:2;width:100%}
.phero-grid{max-width:700px;margin:0 auto}
.phero .peyebrow{font-family:var(--display);font-size:var(--t-eyebrow,16px);font-weight:500;
  color:var(--emerald-ink,#0A7A53);margin-bottom:18px}
.phero h1{font-family:var(--display);font-weight:400;font-size:var(--t-display,clamp(38px,4.6vw,60px));
  line-height:1.1;letter-spacing:-.02em;color:#0B1533;margin:0 0 20px}
.phero .phero-sub{font-size:19px;line-height:1.55;color:#3A4664;margin:0 auto 36px;max-width:56ch}
.phero-actions{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
/* the side visual is retired from the hero; kept in the DOM (hidden) only
   where a page hasn't yet been given an .altrow replacement */
.phero-vis{display:none}
@media(max-width:600px){.phero{padding:112px 0 60px}.phero .phero-sub{font-size:17px}}
@media(max-width:900px){.phero{min-height:0;padding:104px 0 64px}.phero .phero-sub{font-size:18px}}

/* documentation-style CTA: outlined arrow disc + uppercase label */
.cta-doc{display:inline-flex;align-items:center;gap:16px;font-family:var(--display);
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  color:#12122D;background:none;padding:0;min-height:0}
.cta-doc .ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(18,18,45,.30);
  display:grid;place-items:center;flex:none;transition:.2s;background:transparent}
.cta-doc .ic svg{width:15px;height:15px}
.cta-doc:hover{color:#12122D}
.cta-doc:hover .ic{border-color:#12122D;background:rgba(18,18,45,.05);transform:translateX(3px)}
.band.dark .cta-doc,.prodgrid .cta-doc{color:#fff}
.band.dark .cta-doc .ic,.prodgrid .cta-doc .ic{border-color:rgba(255,255,255,.34)}
.band.dark .cta-doc:hover,.prodgrid .cta-doc:hover{color:#fff}
.band.dark .cta-doc:hover .ic,.prodgrid .cta-doc:hover .ic{border-color:#fff;background:rgba(255,255,255,.10)}

/* ============================================================
   PRODUCT CARD GRID — dark band of rounded product cards
   ============================================================ */
.prodgrid{position:relative;padding:var(--sec) 0;color:#fff;
  background:
    radial-gradient(ellipse 58% 62% at 80% 38%,rgba(42,74,158,.50) 0%,transparent 62%),
    radial-gradient(ellipse 50% 50% at 12% 92%,rgba(90,72,168,.34) 0%,transparent 62%),
    linear-gradient(150deg,#0B0E22 0%,#111838 55%,#1A2856 100%)}
.prodgrid .sec-h{color:#fff}
.prodgrid .sec-p{color:rgba(255,255,255,.68)}
.prodgrid .sec-eyebrow{color:rgba(255,255,255,.5)}
.prodgrid .sec-eyebrow .ln{background:rgba(255,255,255,.22)}
.prodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media(max-width:1100px){.prodcards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.prodcards{grid-template-columns:1fr}}
.pcard{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:34px 32px;display:flex;flex-direction:column;
  min-height:280px;transition:.22s}
.pcard:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.18);
  transform:translateY(-3px)}
.pcard.feature{background:linear-gradient(150deg,rgba(64,104,200,.26),rgba(255,255,255,.05))}
.pcard h3{font-family:var(--display);font-weight:900;font-size:23px;color:#fff;
  line-height:1.2;margin-bottom:14px}
.pcard p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.72);margin-bottom:26px}
.pcard .pc-links{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pc-link{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);
  font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.pc-link:hover{color:#fff}
.pc-link .ic{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  display:grid;place-items:center;flex:none;transition:.2s}
.pc-link .ic svg{width:14px;height:14px}
.pc-link:hover .ic{border-color:#fff;background:rgba(255,255,255,.10);transform:translateX(3px)}
.pcard .pc-soon{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.42);border:1px dashed rgba(255,255,255,.22);
  border-radius:6px;padding:7px 12px;align-self:flex-start}

/* ============================================================
   PLACEHOLDER — visible, labelled slot for artwork still to come
   ============================================================ */
.ph-slot{border:1px dashed var(--line-2);border-radius:14px;background:var(--panel-2);
  display:grid;place-items:center;text-align:center;padding:40px 28px;min-height:220px}
.ph-slot .ph-label{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7;max-width:36ch}
.ph-slot .ph-label b{display:block;font-family:var(--display);font-size:13.5px;
  color:var(--ink-2);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.prodgrid .ph-slot,.band.dark .ph-slot{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.prodgrid .ph-slot .ph-label,.band.dark .ph-slot .ph-label{color:rgba(255,255,255,.55)}
.prodgrid .ph-slot .ph-label b,.band.dark .ph-slot .ph-label b{color:rgba(255,255,255,.8)}

/* ============================================================
   PAGE HEADER — compact light header for content pages
   ============================================================ */
/* Wash lives on .pagehead itself so every existing page picks it up without
   needing an extra layer div (they ship a .overlay child, not .phero-wash). */
body.theme-light .pagehead{position:relative;overflow:hidden;padding:150px 0 70px;
  background:
    radial-gradient(ellipse 52% 74% at 2% 14%,rgba(196,231,245,.46) 0%,transparent 62%),
    radial-gradient(ellipse 56% 78% at 94% 88%,rgba(226,214,244,.52) 0%,transparent 60%),
    linear-gradient(115deg,#F2FAFD 0%,#FFFFFF 48%,#FBF7FD 100%)}
body.theme-light .pagehead .overlay{display:none}
.pagehead .wrap{position:relative;z-index:2}
body.theme-light .pagehead .breadcrumb{color:rgba(18,18,45,.55);font-size:13px;margin-bottom:18px}
body.theme-light .pagehead .breadcrumb a{color:var(--emerald-ink)}
.pagehead h1{font-family:var(--display);font-weight:900;font-size:clamp(36px,4vw,60px);
  line-height:1.12;letter-spacing:-.015em;color:#12122D;margin:0 0 18px;max-width:20ch}
.pagehead p{font-size:19px;line-height:1.5;color:rgba(18,18,45,.7);max-width:64ch}
@media(max-width:900px){.pagehead{padding:112px 0 52px}.pagehead p{font-size:17px}}

/* ============================================================
   ENTERPRISE SYSTEM  — v2
   ------------------------------------------------------------
   Design principles adopted from Benchling's public marketing UI.
   Principles only; no Benchling assets, colours, icons or copy.

   The four that change the feel most:
   1. Display type is LARGE + LIGHT (weight 400) with tight negative
      tracking, not heavy. Heavy display weight is what read as dated.
   2. Buttons are small, quiet, sentence case. Not uppercase shouting
      with oversized arrow discs.
   3. Ink is a single deep navy used for text AND dark bands, so the
      palette stays disciplined.
   4. Generous, even whitespace; the product visual carries the page.
   ============================================================ */
:root{
  /* -- ink & accent (VeroMass navy + emerald retained) -- */
  --vm-ink:#0B1533;          /* display + body ink, and dark band bg */
  --vm-ink-soft:#3A4664;
  --vm-accent:#0E9C6B;       /* VeroMass emerald stays the brand accent */
  --vm-accent-ink:#0A7A53;
  --vm-accent-pale:#D8F1E7;

  /* -- type scale (large + light) -- */
  /* Measured directly off the reference (getComputedStyle): h1 60/400/lh66/
     tracking -1.2px; h2 48/400/lh56; nav + body 16/400. */
  --t-display:clamp(38px,4.6vw,60px);
  --t-h2:clamp(28px,3.3vw,48px);
  --t-h3:clamp(19px,1.5vw,22px);
  --t-lead:clamp(17px,1.25vw,19px);
  --t-body:16px;
  --t-small:14px;
  --t-eyebrow:16px;
  --t-nav:16px;

  /* -- spacing scale (8px base) -- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  /* -- shell --
     NOTE: --maxw is deliberately NOT redefined here. The reference measures
     1440px, but the landing hero above is tuned to 1400px and carries an
     explicit "do not narrow globally" note, so that value stands. */
  --btn-r:50px;
}

/* ---------- display type: large, light, tightly tracked ---------- */
.hero-h,
.phero h1,
.pagehead h1,
.sec-h,
.pipeanim h2,
.rsplit-copy h2,
.vband-copy h2,
.ctaband h2{
  font-weight:400;
  /* -1.2px measured on a 60px h1 ~= -.02em; using em keeps it proportional
     at the smaller sizes h2/h3 share this rule set with. */
  letter-spacing:-.02em;
}
/* h1: measured 60/400/lh66 (1.1) / tracking -1.2px */
.hero-h{font-size:var(--t-display);line-height:1.1}
.phero h1{font-size:var(--t-display);line-height:1.1}
.pagehead h1{font-size:clamp(34px,3.6vw,50px);line-height:1.1}
/* h2: measured 48/400/lh56 (1.1667) */
.sec-h,.pipeanim h2,.rsplit-copy h2,.vband-copy h2,.ctaband h2{
  font-size:var(--t-h2);line-height:1.1667}
.sec-h.lg{font-size:clamp(32px,3.6vw,52px)}
/* sub-headings stay a touch heavier so hierarchy survives the lighter display */
.fcard h3,.pcard h3,.res h3,.res h4,.feat-item h3,.feat-item h4,.gate-card .gn h3{
  font-weight:600;letter-spacing:-.01em}
.pcard h3{font-size:21px}

/* leads read at a comfortable measure */
.hero-sub,.phero .phero-sub,.pagehead p,.sec-p{
  font-size:var(--t-lead);line-height:1.55;font-weight:400}
.sec-p{max-width:68ch}

/* eyebrow: quiet, accent-coloured, sentence case */
/* `.phero .peyebrow` (0,2,0) outranks a bare `.peyebrow`, so the descendant
   form is needed here or the eyebrow stays uppercase. */
.phero .peyebrow,.sec-eyebrow{
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:0;text-transform:none}
.phero .peyebrow{color:var(--vm-accent-ink)}
.sec-eyebrow{color:var(--vm-ink-soft)}
body.theme-light .sec-eyebrow{color:var(--vm-ink-soft)}
.sec-eyebrow .ln{width:24px}

/* ---------- buttons: small, quiet, sentence case ---------- */
.cta-lg{
  border-radius:var(--btn-r);
  text-transform:none;
  font-weight:500;
  font-size:var(--t-small);
  letter-spacing:0;
  padding:14px 24px;
  min-height:46px;
  gap:10px;
}
@media(min-width:1440px){.cta-lg{padding:14px 26px;gap:10px;min-height:48px}}
/* the oversized arrow disc was the loudest thing on the page — retire it,
   keep a small inline chevron that animates on hover */
.cta-lg .ic{
  width:auto;height:auto;background:none!important;border:0;border-radius:0;
  display:inline-flex;align-items:center;transition:transform .18s ease}
.cta-lg .ic svg{width:14px;height:14px}
.cta-lg:hover .ic{transform:translateX(3px)}
.cta-lg::before{display:none}          /* kill the ripple pseudo-element */
.cta-lg.primary{background:var(--vm-accent);color:#fff}
.cta-lg.primary:hover{background:#0BB47B}
.cta-lg.sky{background:var(--vm-ink);color:#fff;height:auto;padding:14px 24px;font-size:var(--t-small)}
.cta-lg.sky:hover{background:#16224a}
.cta-lg.sky .ic{width:auto;height:auto;background:none}
.cta-lg.pale{background:var(--vm-accent-pale);color:var(--vm-accent-ink)}
.cta-lg.pale:hover{background:#C8EBDD}

/* documentation link: no heavy outlined disc, just a quiet chevron */
.cta-doc{font-size:var(--t-small);font-weight:500;text-transform:none;letter-spacing:0;gap:8px}
.cta-doc .ic{width:auto;height:auto;border:0;background:none;transition:transform .18s ease}
.cta-doc .ic svg{width:14px;height:14px}
.cta-doc:hover .ic{transform:translateX(3px);background:none;border:0}

/* product-card links follow the same restraint */
.pc-link{font-size:var(--t-small);font-weight:500;text-transform:none;letter-spacing:0;gap:8px}
.pc-link .ic{width:auto;height:auto;border:0;background:none;transition:transform .18s ease}
.pc-link .ic svg{width:14px;height:14px}
.pc-link:hover .ic{transform:translateX(3px);background:none;border:0}

/* nav buttons: quiet pills.
   Measured on the reference: height 46px, padding 14px 24px, font-size 14px.
   The previous 9px 18px / 13.5px combo computed to ~37-38px tall -- visibly
   smaller and squatter than the reference's more generous pill. */
.nav .btn{border-radius:var(--btn-r);text-transform:none;font-weight:500;
  font-size:14px;letter-spacing:0;padding:14px 24px;line-height:1}

/* ---------- accessibility: skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--vm-ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
  font-size:14px;font-weight:500}
.skip-link:focus{left:0}
/* a visible focus ring everywhere — keyboard-first is an enterprise expectation */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--vm-accent);outline-offset:3px;border-radius:4px}
body.theme-light a:focus-visible,body.theme-light button:focus-visible{
  outline-color:var(--vm-accent-ink)}

/* ---------- density & rhythm ---------- */
.band{padding:var(--s-7) 0}
.band.narrow{padding:var(--s-6) 0}
@media(min-width:1200px){.band{padding:var(--s-8) 0}}

/* ============================================================
   HOME v3 — enterprise SaaS homepage system
   ------------------------------------------------------------
   Structure mirrors the reference's public homepage narrative:
   announcement bar -> light hero with product frame -> customer
   proof -> statement band -> alternating text/media -> tabbed
   explorer -> closing breaker.
   Principles only. No reference assets, colours, icons or copy.
   VeroMass emerald + navy retained throughout.
   ============================================================ */

/* ---------- light homepage hero ---------- */
.home-hero{position:relative;overflow:hidden;background:#fff;
  padding:150px 0 88px}
.home-hero .hh-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 60% at 0% 6%,rgba(199,236,222,.55) 0%,transparent 62%),
    radial-gradient(ellipse 54% 64% at 100% 82%,rgba(214,228,246,.55) 0%,transparent 62%),
    linear-gradient(118deg,#F4FBF8 0%,#FFFFFF 46%,#F6F8FD 100%)}
.home-hero .wrap{position:relative;z-index:2}
.hh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center}
@media(max-width:1080px){.hh-grid{grid-template-columns:1fr;gap:40px}}
.hh-copy{max-width:620px}
.hh-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:#0A7A53;background:#E7F5EF;border:1px solid rgba(14,156,107,.22);
  padding:6px 14px;border-radius:50px;margin-bottom:26px}
.hh-eyebrow i{width:6px;height:6px;border-radius:50%;background:#0E9C6B}
/* measured: 60/400/lh66(1.1)/tracking -1.2px */
.home-hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:var(--t-display);line-height:1.1;color:#0B1533;margin:0 0 22px}
.home-hero h1 em{font-style:normal;color:#0A7A53}
.hh-sub{font-size:19px;line-height:1.55;color:#3A4664;margin:0 0 34px;max-width:56ch}
.hh-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hh-note{margin-top:20px;font-size:13.5px;color:#67718C}

/* product frame — reads as software, not decoration */
.hh-frame{border-radius:14px;overflow:hidden;background:#0B1533;
  border:1px solid rgba(11,21,51,.10);
  box-shadow:0 2px 6px rgba(11,21,51,.06),0 34px 70px rgba(11,21,51,.20)}
.hh-frame-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:#141E3E;border-bottom:1px solid rgba(255,255,255,.08)}
.hh-frame-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.hh-frame-bar .hh-url{margin-left:10px;font-family:var(--mono);font-size:11px;
  color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-frame-body{position:relative;aspect-ratio:16/11;display:grid;place-items:center;
  background:radial-gradient(ellipse 60% 60% at 60% 40%,rgba(64,104,214,.20),transparent 65%),#0B1533}
.hh-frame-body svg{width:82%;height:82%;overflow:visible}

/* ---------- customer proof strip ---------- */
.proof{background:#fff;padding:44px 0 8px;border-top:1px solid rgba(11,21,51,.07)}
.proof .proof-label{text-align:center;font-size:13px;color:#67718C;margin-bottom:26px;
  letter-spacing:.02em}
.proof-row{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.proof-row .proof-item{font-family:var(--display);font-weight:700;font-size:17px;
  color:#9AA3B8;letter-spacing:-.01em;opacity:.85;transition:.2s}
.proof-row .proof-item:hover{opacity:1;color:#67718C}
@media(max-width:760px){.proof-row{gap:28px}.proof-row .proof-item{font-size:15px}}

/* ---------- statement band (navy) ---------- */
.statement{background:#0B1533;color:#fff;padding:var(--s-7,96px) 0;position:relative;overflow:hidden}
.statement::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 82% 40%,rgba(14,156,107,.18),transparent 62%)}
.statement .wrap{position:relative;z-index:2}
.statement-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:960px){.statement-grid{grid-template-columns:1fr;gap:32px}}
.statement h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(27px,3.1vw,42px);line-height:1.18;color:#fff;margin:0 0 18px}
.statement p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.74);margin:0 0 28px;max-width:52ch}
.statement-metrics{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:12px;overflow:hidden}
.statement-metrics .m{background:#0B1533;padding:26px 24px}
.statement-metrics .m b{display:block;font-family:var(--display);font-weight:400;
  font-size:34px;letter-spacing:-.03em;color:#fff;line-height:1.1;margin-bottom:6px}
.statement-metrics .m span{font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.4}
.statement-metrics .m b em{font-style:normal;color:#4FD9A0}

/* ---------- alternating text + media rows ---------- */
.altrow{padding:var(--s-7,96px) 0;background:#fff}
.altrow.tint{background:#F7F9FC}
.altrow-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.altrow:nth-of-type(even) .altrow-grid{direction:rtl}
.altrow:nth-of-type(even) .altrow-grid > *{direction:ltr}
@media(max-width:960px){
  .altrow-grid{grid-template-columns:1fr;gap:32px;direction:ltr!important}
  .altrow-grid > *{direction:ltr!important}
}
.altrow .ar-eyebrow{font-size:14px;font-weight:600;color:#0A7A53;margin-bottom:14px}
.altrow h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(26px,2.9vw,38px);line-height:1.18;color:#0B1533;margin:0 0 16px;max-width:20ch}
.altrow p{font-size:17px;line-height:1.6;color:#3A4664;margin:0 0 22px;max-width:52ch}
.altrow .ar-list{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
.altrow .ar-list li{display:flex;gap:11px;font-size:15.5px;color:#3A4664;line-height:1.5}
.altrow .ar-list li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#0E9C6B;margin-top:8px;flex:none}
.ar-media{border-radius:20px;overflow:hidden;border:1px solid rgba(11,21,51,.10);
  background:#F4F7FB;box-shadow:0 2px 6px rgba(11,21,51,.05),0 22px 46px rgba(11,21,51,.09);
  aspect-ratio:4/3;display:grid;place-items:center}
.ar-media svg{width:78%;height:78%;overflow:visible}
/* real photography fills and crops rather than insetting like a diagram */
.ar-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- tabbed explorer ---------- */
.explorer{padding:var(--s-7,96px) 0;background:#F7F9FC}
.explorer-head{text-align:center;max-width:680px;margin:0 auto 44px}
.explorer h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(27px,3.1vw,42px);line-height:1.18;color:#0B1533;margin:0 0 14px}
.explorer-head p{font-size:17px;line-height:1.55;color:#3A4664;margin:0}
.tablist{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:34px}
.tablist button{font-family:var(--display);font-size:14.5px;font-weight:500;
  padding:10px 20px;border-radius:50px;color:#3A4664;background:transparent;
  border:1px solid transparent;transition:.18s;white-space:nowrap}
.tablist button:hover{background:rgba(11,21,51,.05);color:#0B1533}
.tablist button[aria-selected="true"]{background:#0B1533;color:#fff;border-color:#0B1533}
.tabpanel{display:none;background:#fff;border:1px solid rgba(11,21,51,.09);border-radius:16px;
  overflow:hidden;box-shadow:0 2px 6px rgba(11,21,51,.05),0 22px 50px rgba(11,21,51,.08)}
.tabpanel[data-active="true"]{display:grid;grid-template-columns:1fr 1.1fr;
  animation:tabIn .3s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.tabpanel[data-active="true"]{grid-template-columns:1fr}}
.tabpanel .tp-copy{padding:40px 40px 44px}
.tabpanel .tp-copy h3{font-family:var(--display);font-weight:500;font-size:23px;
  letter-spacing:-.02em;color:#0B1533;margin:0 0 14px}
.tabpanel .tp-copy p{font-size:16px;line-height:1.6;color:#3A4664;margin:0 0 22px}
.tabpanel .tp-media{background:#0B1533;display:grid;place-items:center;min-height:300px;
  background-image:radial-gradient(ellipse 60% 60% at 55% 45%,rgba(64,104,214,.22),transparent 65%)}
.tabpanel .tp-media svg{width:80%;height:80%;overflow:visible}
.tabpanel .tp-media .ph-label{color:rgba(255,255,255,.6)}

/* ---------- closing breaker ---------- */
.breaker{padding:var(--s-7,96px) 0;background:#0B1533;color:#fff;text-align:center;
  position:relative;overflow:hidden}
.breaker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(14,156,107,.20),transparent 62%)}
.breaker .wrap{position:relative;z-index:2}
.breaker h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(28px,3.3vw,44px);line-height:1.16;color:#fff;margin:0 auto 16px;max-width:20ch}
.breaker p{font-size:17.5px;line-height:1.55;color:rgba(255,255,255,.72);
  margin:0 auto 32px;max-width:54ch}
.breaker .hh-actions{justify-content:center}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .tabpanel[data-active="true"]{animation:none}
}

/* ============================================================
   MEGA NAVIGATION
   ------------------------------------------------------------
   Column-based dropdown panels with a featured card, matching the
   reference's information architecture. Implemented with the full
   disclosure ARIA contract (aria-expanded / aria-controls / Escape /
   focus return) which the reference's own menu omits.
   ============================================================ */

.nav{position:fixed;top:0;left:0;right:0;z-index:100}
.navlinks{position:static}

/* trigger button sits inline with the plain links */
.nav .navlinks .navtrigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:50px;font-family:var(--sans);
  font-size:var(--t-nav);font-weight:500;color:inherit;background:transparent;
  border:0;cursor:pointer;transition:background .16s ease,color .16s ease}
.nav .navtrigger .chev{width:11px;height:11px;transition:transform .2s ease;flex:none}
.nav .navtrigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
body.theme-light .nav .navtrigger{color:rgba(18,18,45,.72)}
body.theme-light .nav .navtrigger:hover,
body.theme-light .nav .navtrigger[aria-expanded="true"]{color:#0B1533;background:rgba(11,21,51,.06)}
body:not(.theme-light) .nav .navtrigger{color:rgba(255,255,255,.7)}
body:not(.theme-light) .nav .navtrigger:hover,
body:not(.theme-light) .nav .navtrigger[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.10)}

/* ---------- panel ---------- */
.megapanel{
  position:fixed;left:0;right:0;z-index:99;
  background:#fff;border-bottom:1px solid rgba(11,21,51,.10);
  box-shadow:0 18px 44px rgba(11,21,51,.10);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility is a DISCRETE property: giving it a duration makes it flip at
     the midpoint, leaving the panel hidden for ~90ms after opening — long
     enough that .focus() lands on nothing and keyboard users are stranded.
     Flip it instantly on open; delay it to the end of the fade on close. */
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  overflow:hidden}
.megapanel[data-open="true"]{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s}
.megapanel .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 320px;
  gap:40px;padding-top:38px;padding-bottom:40px;align-items:start}
.megapanel.cols-3 .wrap{grid-template-columns:repeat(3,minmax(0,1fr)) 320px}
.megapanel.cols-2 .wrap{grid-template-columns:repeat(2,minmax(0,1fr)) 320px}

.mega-col h3{font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:#0A7A53;margin:0 0 16px;letter-spacing:0}
.mega-col a{display:block;padding:7px 0;font-size:15.5px;line-height:1.35;
  color:#0B1533;transition:color .15s ease}
.mega-col a:hover{color:#0A7A53}
.mega-col a .mc-note{display:block;font-size:13px;color:#67718C;margin-top:2px}
.mega-col a.is-soon{color:#67718C;pointer-events:none}
.mega-col a.is-soon::after{content:"In development";display:inline-block;margin-left:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#67718C;border:1px dashed rgba(11,21,51,.22);border-radius:5px;padding:2px 6px;vertical-align:middle}

/* featured card */
.mega-feature{background:#F5F7FB;border:1px solid rgba(11,21,51,.08);
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:14px}
.mega-feature .mf-tile{border-radius:10px;background:#0B1533;aspect-ratio:16/9;
  display:grid;place-items:center;overflow:hidden;
  background-image:radial-gradient(ellipse 60% 60% at 60% 40%,rgba(14,156,107,.28),transparent 65%)}
.mega-feature .mf-tile svg{width:64%;height:64%;overflow:visible}
.mega-feature .mf-link{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  font-size:15px;font-weight:500;line-height:1.35;color:#0B1533;padding:0 4px 4px}
.mega-feature .mf-link:hover{color:#0A7A53}
.mega-feature .mf-link svg{width:16px;height:16px;flex:none;margin-top:2px;transition:transform .18s ease}
.mega-feature .mf-link:hover svg{transform:translateX(3px)}

/* backdrop dims the page while a panel is open */
.mega-scrim{position:fixed;inset:0;z-index:98;background:rgba(11,21,51,.28);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
body.mega-open .mega-scrim{opacity:1;visibility:visible}

@media(prefers-reduced-motion:reduce){
  .megapanel{transition:opacity .01ms,visibility .01ms;transform:none}
  .megapanel[data-open="true"]{transform:none}
  .nav .navtrigger .chev{transition:none}
}

/* below the desktop breakpoint the panels collapse into the mobile sheet */
@media(max-width:900px){
  .megapanel,.mega-scrim{display:none}
  .nav .navlinks .navtrigger{display:none}
  body.nav-open .nav .navlinks .navtrigger{
    display:flex;width:100%;justify-content:space-between;padding:14px 8px;
    font-size:15px;border-radius:8px}
  body.nav-open .megapanel{
    display:block;position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent}
  body.nav-open .megapanel:not([data-open="true"]){display:none}
  body.nav-open .megapanel .wrap{grid-template-columns:1fr;gap:20px;padding:6px 8px 14px}
  body.nav-open .mega-feature{display:none}
  body.theme-light.nav-open .megapanel .mega-col a{color:#0B1533}
  body:not(.theme-light).nav-open .megapanel .mega-col h3{color:#4FD9A0}
  body:not(.theme-light).nav-open .megapanel .mega-col a{color:rgba(255,255,255,.82)}
}

/* ============================================================
   LIGHT PAGE TAIL — closing CTA + footer
   ------------------------------------------------------------
   Measured on the reference: footer background rgb(255,255,255),
   text rgb(0,6,80), links rgb(0,13,181). There is no dark band at
   the foot of the page at all, so the navy breaker + navy footer
   were the last of the old dark design still shipping.
   ============================================================ */

/* ---------- closing CTA, now light and centred ---------- */
.breaker{
  background:#fff;color:#0B1533;text-align:center;position:relative;overflow:hidden;
  padding:var(--s-7,96px) 0 calc(var(--s-7,96px) + 40px)}
.breaker::after{content:none}
/* The motif is background, not content: keep it in the lower band and well
   under the copy, or it competes with the headline instead of supporting it. */
.breaker .peaks{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;
  pointer-events:none;opacity:.42}
@media(max-width:760px){.breaker .peaks{height:34%;opacity:.3}}
.breaker .wrap{position:relative;z-index:2}
.breaker h2{color:#0B1533;font-weight:400;letter-spacing:-.03em}
.breaker p{color:#3A4664}
.breaker .cta-lg.primary{background:#0B1533;color:#fff}
.breaker .cta-lg.primary:hover{background:#16224a}
.breaker .cta-lg.pale{background:#fff;color:#0B1533;border:1px solid rgba(11,21,51,.18)}
.breaker .cta-lg.pale:hover{background:#F5F7FB;border-color:rgba(11,21,51,.3)}

/* ---------- trusted-by strip ---------- */
.trusted{background:#fff;padding:8px 0 var(--s-6,64px);text-align:center}
.trusted h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,26px);
  letter-spacing:-.02em;color:#0B1533;margin:0 0 30px}
.trusted-row{display:flex;align-items:center;justify-content:center;gap:60px;flex-wrap:wrap}
.trusted-row span{font-family:var(--display);font-weight:600;font-size:17px;
  color:#A6AEC2;letter-spacing:-.01em;transition:color .2s}
.trusted-row span:hover{color:#67718C}
@media(max-width:760px){.trusted-row{gap:26px}.trusted-row span{font-size:14px}}

/* ---------- footer: light ---------- */
.sitefoot{background:#fff;color:#3A4664;border-top:1px solid rgba(11,21,51,.10);
  padding:var(--s-6,64px) 0 34px}
.sitefoot .fg{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:48px}
@media(max-width:900px){.sitefoot .fg{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.sitefoot .fg{grid-template-columns:1fr}}
.sitefoot .fbrand .logo{color:#0B1533;margin-bottom:14px;display:inline-flex}
.sitefoot .fbrand .logo svg{color:#0E9C6B}
.sitefoot .fbrand p{color:#67718C;max-width:34ch;line-height:1.6;font-size:14.5px}
.sitefoot h3,.sitefoot h4{color:#0B1533;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.sitefoot a{display:block;padding:6px 0;color:#3A4664;font-size:14.5px;transition:color .15s}
.sitefoot a:hover{color:#0A7A53}
.sitefoot .fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(11,21,51,.10);
  font-size:13.5px;color:#8A93A8}

/* the light-theme override block previously forced footer links white for the
   dark footer — retire that now the footer itself is light */
body.theme-light .sitefoot a{color:#3A4664}
body.theme-light .sitefoot a:hover{color:#0A7A53}

/* ---------- dotted peak motif ----------
   Original VeroMass motif: stippled chromatographic peaks, echoing the
   spectra the product works with rather than borrowing another company's
   background graphic. Drawn as SVG so it scales without artefacts. */
.peaks svg{width:100%;height:100%;display:block}