/* ============================================================
   NOUS AI — design tokens
   Identity: gallery-light field, near-black ink, deep spruce
   accent, dark "instrument" panels where the engineering lives
   ============================================================ */

/* TT Commons Pro — TypeType Web licence, Regular only. */
@font-face{
  font-family:"TT Commons Pro";
  src:url("../../fonts/tt-commons-pro-regular.woff2") format("woff2"),
      url("../../fonts/tt-commons-pro-regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:        #FBFBF9;
  --bg-alt:    #F3F5F0;
  --card:      #FFFFFF;
  --ink:       #101511;
  --soft:      #5B675F;
  --faint:     #8E988F;
  --hair:      #E6E8E1;
  --hair-2:    #D8DCD2;
  --green:     #2F4A40;
  --green-deep:#1E3329;
  --tint:      #EAEFEA;
  --tint-2:    #F2F5F1;

  --night:     #0E1714;
  --night-2:   #122019;
  --night-text:#E8F0EB;
  --night-soft:#8FA59A;
  --night-hair:rgba(180,220,200,.14);
  --mint:      #9CC2B0;

  /* Knowledge-work scene backdrop: a soft warm diagonal sweep, light from the
     bottom-right (~103deg axis), a lightened take on the hero image's tone.
     --scene-wash is the flat sweep; --scene-wash-glow adds the lit highlight. */
  --scene-wash: linear-gradient(168deg, #FBF8F5 0%, #F7F3EF 40%, #F2ECE7 100%);
  --scene-wash-glow:
    radial-gradient(130% 150% at 82% 30%, rgba(255,252,248,.55) 0%, rgba(255,252,248,0) 60%),
    linear-gradient(168deg, #FCFAF7 0%, #F8F4F0 42%, #F1EBE6 100%);

  --font-display: "Instrument Sans", "Inter", -apple-system, Helvetica, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "TT Commons Pro", "Inter", -apple-system, Helvetica, sans-serif;
  --font-mono: "Instrument Sans", "Inter", -apple-system, Helvetica, sans-serif;

  --w: 1280px;
  --pad: clamp(20px, 4vw, 48px);
  --r: 8px;
  --r-lg: 14px;
  --ease: cubic-bezier(.16,.84,.3,1);
  --spring: cubic-bezier(.3,1.25,.35,1);
  --shadow: 0 1px 2px rgba(16,21,17,.04), 0 12px 40px -12px rgba(16,21,17,.10);
  --shadow-lg: 0 2px 4px rgba(16,21,17,.05), 0 32px 80px -24px rgba(16,21,17,.16);

  /* filmic demo palette — sage, dusty mauve, warm neutrals */
  --sage:        #8FA98F;
  --sage-deep:   #5F7A66;
  --mauve:       #A88E97;
  --rose-taupe:  #C0A9AB;
  --ink-warm:    #3A423C;
  --glass:       rgba(253,251,250,.66);
  --glass-rose:  rgba(244,235,236,.64);
  --glass-sage:  rgba(240,245,239,.62);
  --glass-line:  rgba(255,255,255,.72);
  --glass-hair:  rgba(58,66,60,.09);
  --shadow-glass: 0 1px 2px rgba(58,66,60,.05), 0 18px 44px -20px rgba(58,66,60,.26);
  --ease-calm:   cubic-bezier(.22,.61,.21,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter: stable; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
::selection{ background: var(--green); color:#fff; }
a{ color: inherit; }
button{ font: inherit; cursor:pointer; color:inherit; }
:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.wrap{ max-width: var(--w); margin:0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- type utilities ---------- */
.eyebrow{
  font-size: 14px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green);
}
.display{
  font-family: var(--font-serif); font-weight: 400;
  line-height: 1.08; letter-spacing: -0.022em;
}
.lede{ color: var(--soft); font-size: clamp(16px, 1.5vw, 18px); max-width: 58ch; line-height: 1.7; }
.lede b, .lede strong{ color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap: 9px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  padding: 13px 24px; border-radius: 99px;
  border: 1px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: var(--green); }
.btn-ghost{ background: var(--card); color: var(--ink); border-color: var(--hair-2); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn .arr{ transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(3px); }
.text-link{
  font-weight: 500; font-size: 14.5px; text-decoration:none; color: var(--green);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.text-link:hover{ border-bottom-color: var(--green); }
.section-link{ margin-top: clamp(20px, 3vh, 28px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 90;
  background: rgba(251,251,249,.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.site-header.scrolled{ border-bottom-color: var(--hair); background: rgba(251,251,249,.88); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height: 68px; gap: 28px; }
.brand{ text-decoration:none; display:flex; align-items:center; gap: 9px; }
.brand-logo{ height: 34px; width: auto; display:block; }
.main-nav{ display:flex; align-items:center; gap: 28px; }
.main-nav a{
  display:inline-flex; align-items:center;
  text-decoration:none; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--soft);
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--ink); }
.header-actions{ display:flex; align-items:center; gap: 18px; }
.header-actions .login{ text-decoration:none; font-size: 14px; font-weight: 500; color: var(--soft); }
.header-actions .login:hover{ color: var(--ink); }
.header-actions .btn{ padding: 9px 18px; font-size: 14px; }

.nav-toggle{ display:none; background:none; border:none; width: 42px; height: 42px; position:relative; }
.nav-toggle span{
  position:absolute; left: 10px; right: 10px; height: 1.6px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){ top: 16px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 26px; }
body.menu-open .nav-toggle span:nth-child(1){ top: 21px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ top: 21px; transform: rotate(-45deg); }
/* the open menu is a panel from the header's foot to the viewport bottom that
   scrolls on its own — the header is position:fixed, so a menu taller than the
   screen can't ride the page scroll, and the touch would fall through to the
   page behind it.
   the header's backdrop-filter makes it the containing block for this fixed
   child, so top is measured from the header's top (= the viewport top) and the
   height is set explicitly rather than via bottom:0 (which would resolve against
   the 68px header and collapse to nothing) */
.mobile-menu{
  display:none;
  position: fixed; top: 68px; left:0; right:0;
  height: calc(100dvh - 68px); max-height: calc(100vh - 68px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-top: 1px solid var(--hair);
  background: var(--bg);
}
.mobile-menu nav{
  display:flex; flex-direction:column;
  padding: 4px var(--pad) calc(40px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto;
}
.mobile-menu a:not(.btn){
  position: relative; display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; font-size: 16px; font-weight: 500; color: var(--ink);
  padding: 15px 4px; border-bottom: 1px solid var(--hair);
  transition: color .18s ease;
}
.mobile-menu a:not(.btn)::after{
  content:"\203A"; color: var(--hair-2); font-size: 19px; line-height: 1;
  transition: transform .2s var(--ease), color .2s ease;
}
.mobile-menu a:not(.btn):active{ color: var(--green); }
.mobile-menu a:not(.btn):active::after{ transform: translateX(3px); color: var(--green); }
.mobile-menu a:not(.btn):last-of-type{ border-bottom: none; }
.mobile-menu .btn{ margin: 24px 0 0; justify-content:center; height: 52px; font-size: 15px; }
body.menu-open .mobile-menu{ display:block; }
/* staggered reveal so the panel unfolds rather than snapping in */
body.menu-open .mobile-menu nav > *{ opacity:0; transform: translateY(9px); animation: menuItemIn .5s var(--ease) forwards; }
body.menu-open .mobile-menu nav > :nth-child(1){ animation-delay:.02s; }
body.menu-open .mobile-menu nav > :nth-child(2){ animation-delay:.05s; }
body.menu-open .mobile-menu nav > :nth-child(3){ animation-delay:.08s; }
body.menu-open .mobile-menu nav > :nth-child(4){ animation-delay:.11s; }
body.menu-open .mobile-menu nav > :nth-child(5){ animation-delay:.14s; }
body.menu-open .mobile-menu nav > :nth-child(6){ animation-delay:.17s; }
body.menu-open .mobile-menu nav > :nth-child(7){ animation-delay:.20s; }
body.menu-open .mobile-menu nav > :nth-child(n+8){ animation-delay:.23s; }
@keyframes menuItemIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  body.menu-open .mobile-menu nav > *{ animation-duration:.01ms; transform:none; }
}
/* lock the page behind the open menu so it doesn't scroll under it */
html:has(body.menu-open){ overflow: hidden; }

/* ============================================================
   PRODUCT-WINDOW VOCABULARY (shared by all demos)
   ============================================================ */
/* demos float directly on the page — no container chrome */
.window{ background: none; text-align: left; }
.window-bar{
  display:flex; align-items:center; gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hair);
  background: #FCFCFA;
}
.window-bar i{ width: 9px; height: 9px; border-radius: 50%; background: var(--hair-2); display:block; }
.window-bar .title{
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.window-bar .pill{
  margin-left:auto;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
  background: var(--tint); border: 1px solid #D2DDD6;
  padding: 3px 10px; border-radius: 99px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.window-bar .pill.warn{ color: #8A5A18; background: #FBF1DD; border-color: #EBD9B4; }
.mono-label{
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height: 100vh; height: 100svh;
  min-height: 640px;
  display:flex; flex-direction:column;
  padding-bottom: clamp(32px, 5vh, 64px);
  text-align:left;
  overflow:hidden;
  color: var(--ink);
  /* the scene backdrop carries the top of the hero; the bottom white fade ramps
     up quickly so the copy below the figures sits on near-white and stays
     readable, then hands off to the page background the next section sits on */
  background:
    linear-gradient(to bottom, rgba(251,251,249,0) 38%, #FBFBF9 60%),
    var(--scene-wash-glow);
}
/* the five knowledge-work stages as separate cutouts floating on the scene
   backdrop, spread across the content width and aligned on a common floor line.
   space-between pins stage 1 to the left edge and stage 5 to the right; the gap
   is the minimum breathing room between them on the narrowest screens. Each
   slice shares one source height, so a single row height keeps them to scale. */
.hero-figures{
  flex: 1 1 auto; min-height: 0;
  /* fill the content width so space-between reaches both edges (the .wrap
     max-width + auto margins would otherwise shrink-wrap it to the figures) */
  width: 100%;
  /* keep the strip clear of the fixed header (68px): the floor sets the gap on
     short viewports, where the tallest figure would otherwise rise up under the
     header's Request-a-demo button; 9vh grows the gap on taller screens */
  margin-top: clamp(100px, 9vh, 120px);
  display:flex; align-items:flex-end; justify-content:space-between;
  /* first value is the minimum distance between stages once they grow to fill
     the row; space-between hands out any width beyond that */
  gap: clamp(12px, 2vw, 40px);
}
.hero-figures img{
  /* height governs scale; the floor is low enough that five figures plus the
     minimum gaps still fit across the narrowest phones, and the ceiling keeps
     them from ballooning once the row hits its max content width. max-height
     caps them to the strip so a short viewport can't push the tallest figure
     up into the fixed header */
  height: clamp(80px, 22vw, 330px); max-height: 100%; width:auto;
  flex: 0 0 auto; object-fit:contain;
}
/* phones: tighten the minimum gap and derive the figure height from the width
   the row actually has, so all five cutouts always fit inside the padding. The
   divisor is the sum of the five figures' aspect ratios (~3.07) plus a small
   margin; height = (viewport - side padding - inter-figure gaps) / that sum.
   The row is width-bound here, so on tall screens the strip can't absorb the
   surplus height by growing; instead of letting it pool under the header, the
   strip stops flexing and the whole group — figures plus copy — centers in the
   viewport as one block (the strip's margin-top stays as the header guard). */
@media (max-width: 600px){
  .hero{ justify-content:center; }
  .hero-figures{ flex:0 0 auto; gap: clamp(7px, 2vw, 12px); }
  .hero-figures img{
    height: calc((100vw - 2 * clamp(20px, 4vw, 48px) - 4 * clamp(7px, 2vw, 12px)) / 3.2);
  }
}

/* silk-curtain WebGL backdrop (includes/_silk_curtain.html) — fills its
   positioned parent; the parent gains .curtain-on once the shader runs */
.silk-curtain{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.hero.curtain-on{ background: var(--bg); }
.hero.curtain-on::before{
  /* readability scrim: paper lift behind the copy and under the nav */
  z-index:1;
  background:
    linear-gradient(102deg, rgba(251,251,249,.62) 0%, rgba(251,251,249,.34) 32%, transparent 55%),
    linear-gradient(to bottom, rgba(251,251,249,.4) 0%, transparent 22%);
}
.hero-content{
  position:relative; z-index:1;
  flex: none; width:100%;
  margin-top: clamp(32px, 5vh, 64px);
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(48px, 6vw, 96px);
}
.hero-copy{ flex: 1 1 auto; max-width: 640px; }
.hero h1{
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 4.35vw, 60px); line-height: 1.1; letter-spacing: -0.028em;
  margin: 22px 0 26px;
}
.hero h1 .hero-br{ display:none; }
@media (min-width: 720px){ .hero h1 .hero-br{ display:inline; } }
/* below the two-line break: shrink so the heading stays within 2 lines */
@media (max-width: 719px){ .hero h1{ font-size: clamp(34px, 9.2vw, 48px); } }
.hero .lede{ color: var(--ink-warm); max-width: 72ch; margin: 0 0 38px; font-size: clamp(15px, 1.25vw, 17px); }
.hero-ctas{ display:flex; gap: 12px; justify-content:flex-start; flex-wrap:wrap; }
/* low-height screens: reclaim vertical space from the copy's spacing so the
   figure strip can reach its full width-driven size instead of being squeezed */
@media (max-height: 820px){
  .hero{ padding-bottom: clamp(20px, 3vh, 40px); }
  .hero-content{ margin-top: clamp(20px, 3vh, 40px); }
  .hero h1{ margin: 14px 0 18px; }
  .hero .lede{ margin-bottom: 22px; }
}

@keyframes riseIn{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }
.hero-copy > *{ opacity:0; animation: riseIn .9s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.15s; }
.hero-copy > *:nth-child(3){ animation-delay:.27s; }
.hero-copy > *:nth-child(4){ animation-delay:.4s; }

/* ---------- hero teaser: rotating glass vignettes on the curtain ---------- */
.hero-teaser{
  position:relative;
  flex: 0 0 clamp(320px, 29vw, 396px);
  display:grid;
  pointer-events:none;
  opacity:0; animation: riseIn 1s var(--ease) .5s forwards;
}
.t-scene{
  grid-area: 1 / 1;
  display:flex; flex-direction:column; gap: 12px;
}
/* exit pose: elements drift up and dissolve, leaving in reading order */
.t-scene > *{
  opacity:0; transform: translateY(-12px); filter: blur(5px);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.t-scene > :nth-child(2){ transition-delay: .07s; }
.t-scene > :nth-child(3){ transition-delay: .14s; }

/* entrance choreography — each element has its own motion personality */
.t-scene.active > .t-user{ animation: tSend .6s var(--spring) .25s both; }
.t-scene.active > .t-agent{ animation: tRise .6s var(--spring) .85s both; }
.t-scene.active .t-agent p{ animation: tResolve .55s var(--ease) 1.25s both; }
.t-scene.active > .t-widget{ animation: tSettle .75s var(--ease) 1.8s both; }
@keyframes tSend{
  from{ opacity:0; transform: translateX(-18px) scale(.96); filter: blur(6px); }
  to{ opacity:1; transform:none; filter:none; }
}
@keyframes tRise{
  from{ opacity:0; transform: translateY(16px) scale(.97); filter: blur(6px); }
  to{ opacity:1; transform:none; filter:none; }
}
@keyframes tResolve{
  from{ opacity:0; transform: translateY(7px); filter: blur(3px); }
  to{ opacity:1; transform:none; filter:none; }
}
@keyframes tSettle{
  0%{ opacity:0; transform: translateY(20px) scale(.95); filter: blur(6px); }
  70%{ opacity:1; transform: translateY(-3px) scale(1.004); filter: none; }
  100%{ opacity:1; transform:none; filter:none; }
}

/* one shared pane: every chat bubble across the site is the same glass, same
   corners. The teaser bubbles take this light-cream tint; .msg overrides it. */
.t-user, .t-agent, .t-widget, .msg{
  background: linear-gradient(135deg, rgba(252,250,246,.9) 0%, rgba(252,250,246,.78) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.55);
  backdrop-filter: blur(24px) saturate(1.55);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 14px 40px -16px rgba(16,21,17,.28),
    0 2px 8px rgba(16,21,17,.05);
}
.t-user{
  align-self: flex-start;
  max-width: 88%;
  padding: 12px 17px;
  font-family: var(--font-display); font-weight: 500; font-size: 14.5px;
  color: var(--ink-warm);
}
.t-agent{
  align-self: flex-end;
  width: 92%;
  padding: 14px 18px 15px;
}
.t-agent p{ font-size: 14px; line-height: 1.55; color: var(--ink); }
.t-widget{
  padding: 13px 17px 14px;
}
.t-label{
  display:block;
  font-family: var(--font-display); font-weight: 500; font-size: 11.5px;
  color: var(--soft);
  padding-bottom: 9px; margin-bottom: 12px;
  border-bottom: 1px solid var(--glass-hair);
}
.t-row{ display:flex; align-items:center; gap: 12px; }
.t-ic{
  width: 36px; height: 36px; border-radius: 11px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.5);
  color: var(--green); font-size: 17px;
}
.t-main{
  display:flex; flex-direction:column;
  font-family: var(--font-display); font-weight: 500; font-size: 13.5px;
  color: var(--ink); line-height: 1.3;
}
.t-main small{ font-weight: 400; font-size: 12px; color: var(--soft); margin-top: 2px; }
.t-val{
  margin-left:auto;
  font-family: var(--font-display); font-weight: 500; font-size: 14.5px;
  color: var(--ink);
}
@media (max-width: 999px){ .hero-teaser{ display:none; } }

/* hero product demo */
.hero-demo{
  position:relative; max-width: 980px; margin: clamp(40px, 5.5vh, 60px) auto clamp(56px, 8vh, 84px);
  opacity:0; animation: riseIn 1.1s var(--ease) .55s forwards;
}
.hero .window{
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 18px; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.hero .search-body{ padding: 22px 26px 26px; }
.search-body{
  display:grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.8fr);
  min-height: 380px; gap: clamp(28px, 4vw, 52px);
}
.search-main{ padding: 0; }
.search-input{
  display:flex; align-items:center; gap: 12px;
  border: 1px solid var(--glass-line); border-radius: 14px;
  padding: 12px 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: var(--shadow-glass);
}
.search-input svg{ flex:none; }
.search-q{ font-size: 15px; font-weight: 500; color: var(--ink); min-height: 22px; }
.search-caret{
  display:inline-block; width: 1.5px; height: 16px; background: var(--sage-deep);
  transform: translateY(3px); animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:0} }
.answer{ padding-top: 22px; }
.answer .mono-label{ display:flex; align-items:center; gap: 8px; }
.answer .mono-label .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage-deep);
}
.answer-text{
  font-size: 14.5px; color: var(--soft); margin-top: 12px; min-height: 66px; line-height: 1.7;
}
.answer-text b{ color: var(--ink); font-weight: 600; }
.cite{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 5px; background: rgba(143,169,143,.18); color: var(--sage-deep);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  transform: translateY(-1px); margin: 0 1px;
  opacity:0; transition: opacity .5s ease;
}
.cite.on{ opacity:1; }
.holdings{
  margin-top: 18px; border: 1px solid var(--glass-line); border-radius: 16px; overflow:hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: var(--shadow-glass);
}
.holdings .hrow{
  display:grid; grid-template-columns: 1.6fr .8fr .6fr;
  padding: 9px 14px; font-size: 12.5px;
  border-bottom: 1px solid var(--glass-hair);
  opacity:0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.holdings .hrow.on{ opacity:1; transform:none; }
.holdings .hrow:last-child{ border-bottom:none; }
.holdings .hhead{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); background: rgba(255,255,255,.35);
}
.holdings .hrow span:nth-child(2), .holdings .hrow span:nth-child(3){ text-align:right; font-variant-numeric: tabular-nums; }
.holdings .gain{ color: var(--sage-deep); font-weight: 600; }
.search-side{ padding: 0; }
.search-side .mono-label{ margin-bottom: 14px; }
.src{
  border: 1px solid var(--glass-line); border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  padding: 11px 13px; margin-bottom: 10px;
  opacity: .45; transition: opacity .35s ease, border-color .35s ease;
}
.src.on{ opacity: 1; border-color: rgba(143,169,143,.45); }
.src .name{ font-size: 12.5px; font-weight: 600; display:flex; align-items:center; gap: 8px; }
.src .name .fnum{
  font-family: var(--font-mono); font-size: 9px; color: var(--sage-deep);
  background: rgba(143,169,143,.16); border-radius: 5px; padding: 1px 5px;
}
.src .meta{ font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-top: 3px; letter-spacing: .06em; }
.hero-demo .replay{
  position:absolute; right: 14px; bottom: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  background:none; border:none; padding: 6px;
}
.hero-demo .replay:hover{ color: var(--green); }

/* client strip — pinned to the foot of the hero */
.clients{
  position:relative; z-index:1;
  border-top: 1px solid var(--hair);
  margin-top: auto;
  padding: 22px 0 26px;
  background: transparent;
}
.clients-inner{ display:flex; align-items:center; gap: clamp(18px, 3vw, 42px); flex-wrap:wrap; justify-content:flex-start; }
.clients .label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.clients span.c{
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: -0.01em; color: var(--soft);
  transition: color .2s ease;
}
.clients span.c:hover{ color: var(--ink); }
.clients-cta{
  margin-left:auto; white-space:nowrap; text-decoration:none;
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  color: var(--ink); border: 1px solid var(--hair-2);
  padding: 8px 16px; border-radius: 99px;
  transition: border-color .2s ease, background .2s ease;
}
.clients-cta:hover{ border-color: var(--ink); background: var(--tint); }

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section{ padding: clamp(84px, 11vh, 140px) 0; position:relative; }
.section-head{ max-width: 740px; margin-bottom: clamp(44px, 6vh, 68px); }
.section-head h2{ font-size: clamp(25px, 3.15vw, 40px); margin: 18px 0 18px; }
#why .section-head h2{ font-size: clamp(27px, 3.5vw, 45px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .lede{ margin-left:auto; margin-right:auto; }

/* .reveal / [data-stagger] entrance styles live in the MOTION UPGRADES block */
@media (prefers-reduced-motion: reduce){
  .reveal, [data-stagger] > *, .hero-copy > *, .hero-teaser, .t-scene.active > *, .t-scene.active .t-agent p, .hero-demo{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; animation:none !important; }
  .hero::before, .hero-demo::before{ animation:none !important; }
  .product-grid > *:has(> .window)::before{ animation:none !important; }
  .scene.active{ animation:none !important; }
  .gcaret, .thinking i, .skel, .window-bar .pill.swap{ animation:none !important; }
  .wf-card, .wf-card.running{ transform:none !important; }
  .wf-card.running .dot, .wf-card.running .bar::after{ animation:none !important; }
  .window.working .window-bar::after{ display:none; }
  .wstep, .dfield, .msg, .rnote, .otl li, .holdings .hrow, .profile{ filter:none !important; }
  .msg.age1, .msg.age2, .msg.age3{ opacity:1 !important; }
  .thread-track{ transition:none !important; }
  .fcheck.esc-row{ transition:none !important; }
  .hero-demo #heroWindow, .answer-text.landed, .hrow.hl{ animation:none !important; }
  .reveal .display{ clip-path:none !important; transition:none; }
}

/* ============================================================
   PRODUCT SECTIONS
   ============================================================ */
.product{ border-top: 1px solid var(--hair); }
.product-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
  row-gap: clamp(18px, 2.6vh, 32px);
}
/* full-width header row: eyebrow + heading span both columns */
.product-head{ grid-column: 1 / -1; max-width: 820px; }
.product-head h2{ font-size: clamp(25px, 3.15vw, 40px); margin: 14px 0 28px; }
.product-copy h2{ font-size: clamp(25px, 3vw, 38px); margin: 16px 0 16px; }
.product-copy .lede{ font-size: 16px; }
.product-copy .features{ list-style:none; margin: 24px 0 28px; border-top: 1px solid var(--hair); }
.product-copy .features li{
  padding: 12px 0; border-bottom: 1px solid var(--hair);
  font-size: 14.5px; display:flex; gap: 12px; align-items:baseline; color: var(--soft);
}
.product-copy .features li b{ color: var(--ink); font-weight: 600; }
.product-copy .features li::before{
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex:none; transform: translateY(-2px);
}

/* --- developers · API demo (dark code terminal) --- */
.api-grid{ align-items: center; }
/* lift the copy column above the window's blurred glow so it doesn't wash onto the CTA */
.api-grid .section-head{ margin-bottom: 0; position: relative; z-index: 1; }
/* narrower code column on desktop; collapses to one column ≤920px */
@media (min-width: 921px){
  .api-grid{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.api-window{
  position: relative;
  background:
    radial-gradient(135% 95% at 88% -12%, rgba(156,194,176,.13), transparent 55%),
    linear-gradient(168deg, #16261F 0%, var(--night) 62%);
  border: 1px solid var(--night-hair);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(156,194,176,.10);
}
.api-window .window-bar{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--night-2);
  border-bottom-color: var(--night-hair);
  padding-top: 13px; padding-bottom: 13px;
}
/* mint hairline glow along the base of the chrome bar */
.api-window .window-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(156,194,176,.4), transparent);
}
.api-window .window-bar i{ box-shadow: inset 0 1px 1px rgba(255,255,255,.16); }
.api-window .window-bar i:nth-of-type(1){ background: #7A544D; }
.api-window .window-bar i:nth-of-type(2){ background: #7A6C4D; }
.api-window .window-bar i:nth-of-type(3){ background: #4E6C58; }
.api-window .window-bar .title{ color: var(--night-soft); }
.api-window .window-bar .title::before{
  border-color: var(--mint); box-shadow: inset 0 0 0 2.2px var(--night);
}
.api-window .window-bar .pill{
  color: var(--mint);
  background: rgba(156,194,176,.10);
  border: 1px solid rgba(156,194,176,.22);
  box-shadow: inset 0 1px 0 rgba(156,194,176,.12);
}
.api-window .window-bar .pill::before{
  background: var(--mint); box-shadow: 0 0 6px rgba(156,194,176,.75);
}
.api-demo{ padding: clamp(20px, 2.2vw, 28px); }
.api-demo .code{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.95; color: #C6D8CE;
  white-space: pre-wrap; word-break: break-word; margin: 0;
  -moz-tab-size: 2; tab-size: 2;
}
.api-demo .c-mth{ color: var(--mint); font-weight: 600; letter-spacing: .02em; }
.api-demo .c-pth{ color: var(--night-text); }
.api-demo .c-key{ color: #86BBA3; }
.api-demo .c-str{ color: #9FC7B4; }
.api-demo .c-num,
.api-demo .c-bool{ color: #E0B583; }

/* --- workflow assistants demo --- */
.wf-body{ padding: 0; }
.wf-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
/* light cards at rest; the running assistant takes the bubble material */
.wf-card{
  display:flex; flex-direction:column;
  min-height: 150px;
  -webkit-user-select: none; user-select: none;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--shadow-glass);
  padding: 15px 15px 14px; position:relative;
  /* surface and text flip together the instant a card activates, so there is
     never a low-contrast frame; only the lift eases in */
  transition: border-color .44s linear, box-shadow .44s ease,
              transform .6s cubic-bezier(.22,.9,.3,1);
}
.wf-card.running{
  background:
    linear-gradient(165deg, rgba(50,78,72,.72), rgba(70,102,94,.62)),
    url("../../images/website/nous-card-bg-mint.webp") center / cover no-repeat;
  border-color: transparent;
  transform: translateY(-3px); z-index: 1;
  box-shadow:
    0 1px 2px rgba(30,51,41,.16),
    0 24px 48px -20px rgba(64,104,98,.6);
}
/* single state signal: muted at rest, pulsing while running, mint once done */
.wf-card .dot{
  position:absolute; top: 17px; right: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(58,66,60,.16);
  transition: background .5s ease;
}
.wf-card.running .dot{ background: rgba(255,255,255,.95); animation: pulseDot 1.5s ease infinite; }
.wf-card.done .dot{ background: #558078; }
@keyframes pulseDot{ 50%{ opacity:.25; } }
.wf-card h4{
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: -0.01em; margin-bottom: 4px; line-height: 1.25;
  color: var(--ink-warm); padding-right: 18px;
}
/* the workflows subpage grid spans the full wrap, so type gets more air */
#wfGridP .wf-card{ min-height: 120px; }
#wfGridP .wf-card h4{ font-size: 15px; margin-bottom: 8px; }
#wfGridP .wf-card p{ font-size: 12px; }
.wf-card p{ font-size: 10.5px; color: var(--soft); line-height: 1.42; margin-bottom: 14px; }
.wf-card.running h4{ color: #fff; }
.wf-card.running p{ color: rgba(255,255,255,.78); }
/* progress sits on a shared baseline across the row */
.wf-card .bar{
  height: 2px; background: rgba(58,66,60,.12); border-radius: 2px;
  margin-top: auto; overflow:hidden; position:relative;
  transition: background .7s ease;
}
.wf-card .bar i{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #558078, #7CA097);
  border-radius: 2px;
  opacity: 0; transition: opacity .6s ease;
}
.wf-card.running .bar{ background: rgba(255,255,255,.22); }
.wf-card.running .bar i{ background: rgba(255,255,255,.9); opacity: 1; }
.wf-card.running .bar::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: wfSheen 1.6s ease infinite;
}
@keyframes wfSheen{ to{ transform: translateX(100%); } }
/* finished work stays quietly on the board until the loop wraps */
.wf-card.done .bar i{ opacity: .5; }
.wf-log{
  margin-top: 12px; padding: 10px 15px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--shadow-glass);
  font-family: var(--font-display); font-size: 12.5px; color: var(--ink-warm);
  display:flex; align-items:center; gap: 10px;
  white-space:nowrap; overflow:hidden;
}
.wf-log .ok{
  width: 18px; height: 18px; border-radius: 50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, #558078, #7CA097);
  box-shadow: 0 2px 6px -2px rgba(70,112,105,.5);
}
.wf-log .ok i{ font-size: 11px; color: #fff; line-height: 1; }

/* --- document intelligence demo --- */
/* stretch so the demo column matches the copy column height and the card reaches the links */
#documents .product-grid{ align-items: stretch; }
.di-body{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  min-height: 0; gap: clamp(20px, 2.5vw, 34px);
}
.di-doc{ padding: 0; position:relative; display:flex; }
.di-page{
  flex: 1; min-height: 0;
  display:flex; flex-direction:column; justify-content:flex-start;
  border: 1px solid var(--glass-line); border-radius: 12px;
  background: #FBF8F3;
  box-shadow: var(--shadow-glass);
  padding: 20px 22px 14px; position:relative; overflow:hidden;
}
/* each page is a fragment of a longer document: fade the remainder into the
   folio using the page's own colour so the fade stays invisible (no gradient) */
.di-page::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height: 84px;
  background: linear-gradient(rgba(251,248,243,0), rgba(251,248,243,1) 62%);
  pointer-events:none; z-index:2;
}
.di-doc-foot{
  position:absolute; left:22px; bottom:13px; z-index:3;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.di-doc-head{ padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid var(--glass-hair); }
.di-doc-title{ font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .005em; color: var(--ink); }
.di-doc-sub{ font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }
/* fine-print body — real text, de-emphasised; the extracted spans are scattered through it */
.di-para{ font-family: Georgia, "Times New Roman", Times, serif; margin: 0 0 10px; font-size: 8.5px; line-height: 1.85; color: #9AA39A; text-align: justify; }
.di-para:last-of-type{ margin-bottom: 0; }
/* extracted entities — dim until the scan reaches them, then highlighted */
.di-hl{
  white-space: nowrap; border-radius: 3px; padding: .5px 4px;
  color: #9AA39A; background: transparent;
  transition: color .4s ease, background .4s ease, box-shadow .4s ease;
}
.di-hl.on{
  color: var(--ink); font-weight: 500;
  background: rgba(74,110,103,.15);
  box-shadow: inset 0 0 0 1px rgba(74,110,103,.32);
}
.di-clause{ font-family: var(--font-display); font-weight: 600; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); margin: 0 0 5px; }
/* the pager holds one document page at a time; pages cross-fade as the scan advances */
.di-pager{ position:relative; flex: 1 1 auto; min-height: 230px; }
.di-pageview{
  position:absolute; left:0; right:0; top:0;
  opacity:0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.di-pageview.active{ opacity:1; transform:none; }
.di-scan{
  position:absolute; left:0; right:0; top:0; height: 2px;
  background: linear-gradient(90deg, transparent, #4A6E67, transparent);
  box-shadow: 0 0 18px rgba(74,110,103,.45);
  opacity:0;
}
/* fields share the column height with the document preview */
.di-fields{ padding: 0; display:flex; flex-direction:column; gap: 0; }
.di-fhead{
  display:flex; justify-content:space-between;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  padding-bottom: 7px; border-bottom: 1px solid var(--glass-hair);
}
.dfield{
  flex: 1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--shadow-glass);
  padding: 12px 16px;
  opacity:0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.dfield.on{ opacity:1; transform:none; }
.dfield .k{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  color: var(--faint); margin-bottom: 4px;
}
.dfield .k .conf{ color: #4A6E67; font-size: 10.5px; }
.dfield .k .edited{
  color: #7A6547; background: rgba(184,158,120,.2);
  border-radius: 99px; padding: 2px 9px; font-size: 10.5px;
}
.dfield .v{ font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-warm); }
.dfield .v s{ color: var(--faint); margin-right: 8px; font-weight: 400; }
.dfield .v .new{ color: #7A6547; background: rgba(184,158,120,.2); border-radius: 6px; padding: 1px 8px; }
.dfield .v .pg{ font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-left: 8px; }
.dfield .m{ font-family: var(--font-display); font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.di-sync{
  display:flex; justify-content:flex-end;
  font-family: var(--font-display); font-size: 12px; color: #4A6E67;
  min-height: 18px;
}
/* homepage document-intelligence list: compact hairline rows instead of glass cards */
.di-fields .dfield{
  flex: none; display:block; padding: 6px 0;
  background: none; border: none; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--glass-hair);
}
.di-fields .dfield .k{ font-size: 10.5px; margin-bottom: 3px; }
.di-fields .dfield .v{ font-size: 12.5px; }
.di-fields .dfield .m{ font-size: 9px; margin-top: 2px; }
.di-fields .di-sync{ margin-top: auto; padding-top: 11px; }

/* --- agent simulation demo --- */
.sim-body{
  display:grid; grid-template-columns: minmax(0,1.7fr) minmax(0,.8fr);
  min-height: 360px; gap: clamp(24px, 3vw, 40px);
}
.sim-thread{ padding: 0; }
.sim-thread .mono-label{ color: var(--faint); margin-bottom: 13px; display:block; }
/* the sim thread lane is narrower than the standalone chat demos, so let its
   bubbles use most of the lane instead of the base 74% cap */
.sim-thread .msg{ max-width: 88%; }
/* chat message bubble — shares the exact teaser-bubble glass (.t-user/.t-agent/
   .t-widget) from the base rule; no background override, so it stays in lockstep
   with the hero teaser bubbles' colour */
.msg{
  max-width: 74%;
  padding: 13px 18px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
  opacity:0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.msg.on{ opacity:1; transform:none; }
/* recency — older messages hold presence before the oldest exits */
.msg.on.age1{ opacity:.85; }
.msg.on.age2{ opacity:.62; }
.msg.on.age3{ opacity:0; }
.msg .who{
  display:flex; align-items:baseline; gap: 7px;
  font-family: var(--font-display); font-size: 13px; font-weight: 400;
  letter-spacing: .01em; margin-bottom: 6px;
}

/* chat-style demo thread — bubbles float free */
.chat-thread{ min-height: 340px; }

/* conversation viewport: the thread slides up as new messages arrive,
   older messages exit through the top fade — at most ~3 on screen */
.thread-viewport{
  position: relative; height: 380px; overflow: hidden;
  /* horizontal breathing room so bubble shadows fade before the clip edge */
  padding: 0 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
}
/* once the thread has slid, older messages exit through a top fade */
.thread-viewport.masked{
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 48px, #000 calc(100% - 16px), transparent 100%);
}
.thread-track{
  position: relative;
  transition: transform .9s var(--ease-calm);
  will-change: transform;
}
/* session divider — marks a new visitor within the same demo thread */
.thread-sep{
  display:flex; align-items:center; gap: 12px; margin: 12px 2px 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.thread-sep::before, .thread-sep::after{ content:""; height:1px; background: var(--hair); flex:1; }
.thread-sep.on{ opacity: 1; transform: none; }
.msg.in{ margin-left:auto; }
.msg.flag{
  background: linear-gradient(135deg, rgba(244,232,208,.65) 0%, rgba(247,238,220,.4) 100%);
  border-color: #F8EFDD;
  max-width: 100%;
}
.msg.flag .who{ color: #8A6A28; }
/* inline chart inside an answer bubble: bars fill as the bubble reveals */
.msg .msg-bars{ margin-top: 12px; margin-bottom: 4px; }
.msg .msg-bars .bar{ width: 0; transition: width 1s var(--ease) .25s; }
.msg.on .msg-bars .bar{ width: var(--w); }
.msg .dq{ display:block; margin-top: 11px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.sim-side{ padding: 4px 0; display:flex; flex-direction:column; }
.sim-side .mono-label{ color: var(--faint); margin-bottom: 6px; display:flex; justify-content:space-between; }
.sim-side .mono-label .count{ color: #4A6E67; }
.fcheck{
  display:flex; align-items:center; gap: 12px;
  flex: 1 1 auto; padding: 8px 0; border-bottom: 1px solid var(--glass-hair);
  font-size: 12.5px; color: var(--soft);
}
.fcheck:last-of-type{ border-bottom:none; }
.fcheck .tick{
  width: 9px; height: 9px; border-radius: 50%; flex:none;
  border: 1.5px solid rgba(70,112,105,.28);
  transition: border-color .3s ease, background .3s ease;
}
/* the escalation row isn't part of the plan — it only appears when it happens */
.fcheck.esc-row{
  opacity:0; transform: translateY(8px);
  transition: opacity .8s var(--ease-calm), transform .8s var(--ease-calm);
}
.fcheck.esc-row.esc{ opacity:1; transform:none; }
.fcheck.on{ color: var(--ink-warm); }
.fcheck.on .tick{ border-color: rgba(70,112,105,.6); background: rgba(70,112,105,.16); color: #4A6E67; }
.fcheck.esc{ color: #7A6547; }
.fcheck.esc .tick{ border-color: rgba(178,152,112,.55); background: rgba(184,158,120,.18); color: #7A6547; }

/* ============================================================
   PRODUCTION GAP — statement + stats
   ============================================================ */
.gap{ border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.gap-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(48px, 7vh, 72px);
}
.gap-card{
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow);
}
.gap-card .who{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; }
.gap-card .ask{
  font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.4; letter-spacing: -0.02em;
}
.waterline{ display:flex; align-items:center; gap: 14px; margin: 24px 0 6px; }
.waterline::before, .waterline::after{ content:""; height: 1px; background: var(--hair); flex: 1; }
.waterline-left::before{ display:none; }
.waterline span{
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint);
}
.beneath{ list-style:none; }
.beneath li{
  display:flex; gap: 12px; align-items:baseline;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
  font-size: 13.5px; color: var(--soft);
}
.beneath li:last-child{ border-bottom:none; }
.beneath li b{ color: var(--ink); font-weight: 600; }
.beneath li::before{ content:""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--green); flex:none; }

/* ---- The iceberg: one generalised ask, ten things beneath ---- */
.gapberg{ margin: 0 auto clamp(48px, 7vh, 72px); }
.gapberg-line{
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  max-width: 640px; margin: 30px auto 0; padding: 12px 0;
}
.gapberg-line::before, .gapberg-line::after{
  content:""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--hair) 25%, var(--hair) 75%, transparent);
}
.gapberg-line .lbl{
  padding: 0 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.gapberg-line .glint{
  position: absolute; top: 50%; left: 0; width: 90px; height: 2px;
  transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(47,74,64,.45), transparent 70%);
  animation: bergGlint 5.5s linear infinite;
}
@keyframes bergGlint{
  0%{ left: -100px; opacity: 0; } 12%{ opacity: 1; }
  88%{ opacity: 1; } 100%{ left: 100%; opacity: 0; }
}

/* horizontal carousel: evenly-spaced cards spanning the full width, the centre
   one lifted into focus, gliding one place at a time — looping forever. */
/* the staged cards sit at wide translateX offsets (opacity:0 until they glide
   in); clip the strip horizontally so they never add page width, while letting
   the focal card's shadow breathe vertically */
.berg-carousel{ margin-top: 26px; overflow-x: clip; }
.berg-stage{
  position: relative; height: clamp(300px, 38vh, 344px);
  /* crisp vertical clip at the edges; negative top/bottom lets the focal shadow breathe */
  clip-path: inset(-40px 0px);
  cursor: grab; touch-action: pan-y;   /* horizontal drags drive the carousel; vertical still scrolls */
  -webkit-user-select: none; user-select: none;   /* draggable surface — never select the card text */
}
a.berg-card{ cursor: pointer; }                        /* link cards read as clickable */
.berg-stage.dragging, .berg-stage.dragging a.berg-card{ cursor: grabbing; }
.berg-stage.dragging .berg-card{ transition: none; }   /* follow the pointer 1:1 while dragging */
.berg-card{
  position: absolute; left: 50%; top: 50%; box-sizing: border-box;
  text-decoration: none; -webkit-user-drag: none; user-select: none;
  height: clamp(276px, 34vh, 324px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(28px, 2.8vw, 38px) clamp(28px, 2.8vw, 38px) clamp(40px, 4.4vw, 56px);
  border: none; border-radius: 18px;
  background-image: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
                    url("../../images/website/nous-card-bg-light.webp");
  background-repeat: no-repeat; background-size: cover; background-position: center;
  box-shadow: 0 1px 2px rgba(16,21,17,.04);
  transform: translate(-50%, -50%);
  transition: transform .65s var(--ease), opacity .65s var(--ease),
              box-shadow .65s var(--ease), border-color .65s var(--ease);
  will-change: transform, opacity;
}
/* a quiet accent that draws itself on the focused card */
.berg-card::before{
  content: ""; position: absolute; left: clamp(28px, 2.8vw, 38px); top: 0;
  width: 40px; height: 2px; border-radius: 2px; background: var(--green);
  opacity: 0; transform: scaleX(.35); transform-origin: left;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.berg-card.active{
  border-color: rgba(47,74,64,.24);
  box-shadow: 0 12px 28px -14px rgba(16,21,17,.16), 0 3px 8px -5px rgba(16,21,17,.10);
}
.berg-card.active::before{ opacity: 1; transform: scaleX(1); }
.bc-tag{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint); transition: color .55s var(--ease);
  margin-bottom: clamp(22px, 3vh, 32px);
}
.berg-card.active .bc-tag{ color: var(--green); }
.bc-title{
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.16; color: var(--ink); margin-bottom: 12px;
  transition: color .55s var(--ease);
}
.berg-card.active .bc-title{ color: var(--green-deep); }
.bc-desc{ font-size: 14px; line-height: 1.55; color: var(--soft); }

.berg-dots{ display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: clamp(18px, 2.6vh, 24px); }
.berg-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--hair);
  transition: width .45s var(--ease), background .45s var(--ease);
}
.berg-dot.done{ background: rgba(47,74,64,.4); }
.berg-dot.on{ width: 24px; border-radius: 3px; background: var(--green); }

@media (prefers-reduced-motion: reduce){
  .gapberg-line .glint{ animation: none; opacity: 0; }
}

.sources{ font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); margin-top: 18px; line-height: 1.9; letter-spacing: .02em; }

/* ============================================================
   ENGINE — four layers
   ============================================================ */
.engine .statement{
  font-size: clamp(27px, 3.5vw, 45px);
  max-width: 26ch;
  margin: 18px 0 22px;
}
.engine .statement em, .gap .display em{ font-style: normal; color: var(--green); }
/* the four layers as a ledger: one hairline row per layer,
   label | title | capabilities, reading top-down like the stack itself */
.engine-stack{
  margin-top: clamp(36px, 5vh, 52px);
  border-top: 1px solid var(--hair);
}
.engine-layer{
  display: grid;
  grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(18px, 3vw, 56px);
  align-items: baseline;
  padding: clamp(22px, 3vh, 30px) 0;
  border-bottom: 1px solid var(--hair);
}
.engine-layer .lnum{
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
  display: flex; align-items: center; gap: 9px;
}
.engine-layer .lnum::before{
  content:""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); opacity: .55;
  transition: opacity .4s var(--ease), box-shadow .4s var(--ease);
}
.engine-layer h3{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(16px, 1.35vw, 19px); letter-spacing: -0.01em;
  line-height: 1.2; color: var(--ink);
  transition: color .4s var(--ease);
}
.engine-layer ul{
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 32px); row-gap: 9px;
}
.engine-layer li{
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--soft);
}
.engine-layer li::before{
  content:""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%;
  background: var(--green); opacity: .4; transform: translateY(-2px);
}
.engine-layer:hover h3{ color: var(--green-deep); }
.engine-layer:hover .lnum::before{ opacity: 1; box-shadow: 0 0 8px 1px rgba(156,194,176,.7); }

/* ============================================================
   SECURITY
   ============================================================ */
/* teaser band: copy beside the shield emblem, echoing the dedicated page */
.sec-trust{ overflow: hidden; }
.sec-trust::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 150% at 84% 6%, rgba(156,194,176,.22) 0%, rgba(156,194,176,0) 54%),
    linear-gradient(168deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 55%);
}
.sec-trust > .wrap{ position:relative; z-index:1; }
.sec-trust-inner{
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap: clamp(30px, 5vw, 72px); align-items:center;
}
.sec-trust-copy{ max-width: 64ch; }
.sec-trust-copy h2{ font-size: clamp(30px, 3.8vw, 48px); margin: 18px 0; }
.sec-trust-copy .lede{ max-width: 62ch; margin-bottom: 22px; }

/* the seal: the glass tile from the security page, drawing itself into view */
.sx-emblem{ position:relative; }
.sec-trust .sx-emblem{
  width: clamp(140px, 15vw, 190px);
  background: rgba(255,255,255,.38);
  border-color: rgba(255,255,255,.75);
}
.sec-trust-visual{ justify-self:center; }
.sec-trust-inner{ margin-bottom: clamp(44px, 6.5vh, 72px); }
.sec-seal.will-draw .seal-body{ stroke-dasharray: 400; stroke-dashoffset: 400; }
.sec-seal.will-draw .seal-check{ stroke-dasharray: 48; stroke-dashoffset: 48; }
.sec-seal.drawn .seal-body{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s cubic-bezier(.4,.1,.3,1);
}
.sec-seal.drawn .seal-check{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s cubic-bezier(.4,.1,.3,1) 1.1s;
}
/* optional light detail layer on industry seals, drawn between body and accent */
.sec-seal .seal-fine{ opacity: .55; }
.sec-seal.will-draw .seal-fine{ stroke-dasharray: 300; stroke-dashoffset: 300; }
.sec-seal.drawn .seal-fine{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(.4,.1,.3,1) .5s;
}

/* status ticker: the controls as a quiet system readout */
.sec-ticker{
  overflow:hidden; padding: 15px 0;
  border-top: 1px solid rgba(47,74,64,.14);
  border-bottom: 1px solid rgba(47,74,64,.14);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sec-ticker-track{ display:flex; width:max-content; animation: secTick 58s linear infinite; }
.sec-ticker:hover .sec-ticker-track{ animation-play-state: paused; }
@keyframes secTick{ to{ transform: translateX(-50%); } }
.sec-tgroup{ display:flex; align-items:center; }
.sec-titem{
  display:inline-flex; align-items:center; gap: 9px; white-space:nowrap;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--ink);
}
.sec-titem i{ font-size: 15px; color: var(--green); }
.sec-titem::after{
  content:"\00B7"; color: rgba(47,74,64,.3); font-weight: 400;
  margin: 0 clamp(18px, 2.2vw, 30px);
}
@media (prefers-reduced-motion: reduce){ .sec-ticker-track{ animation:none; } }
@media (max-width: 860px){
  .sec-trust-inner{ grid-template-columns: 1fr; gap: 30px; }
  .sec-trust-visual{ display:none; }
}

/* ============================================================
   CUSTOMERS
   ============================================================ */
.customers{ border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.case-card{
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.case-card .tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 18px; }
.case-card h3{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.025em; line-height: 1.25;
  margin-bottom: 14px;
}
.case-card p{ color: var(--soft); font-size: 14.5px; }
/* ---------- editorial testimonials — auto-advancing carousel ---------- */
.testimonials{ --t-dur: 7s; position: relative;
  margin-top: clamp(60px, 7.5vw, 108px); padding-top: clamp(60px, 7.5vw, 108px); }
/* a soft hairline that fades out at both ends, centred in the whitespace */
.testimonials::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(16,21,17,.12) 4%, rgba(16,21,17,.12) 96%, transparent 100%); }
.testimonial-viewport{ overflow: hidden; }
.testimonial-track{ position: relative; display:flex; gap: clamp(40px, 5vw, 96px);
  cursor: grab; touch-action: pan-y; will-change: transform;
  transition: transform .6s var(--ease); }
.testimonials.is-dragging .testimonial-track{ cursor: grabbing; }
.testimonials.is-dragging .testimonial-track,
.testimonials.is-jumping .testimonial-track{ transition: none; }
.testimonials.is-dragging{ user-select: none; }
.testimonial{ flex: 0 0 100%; min-width: 0; margin:0;
  display:grid; grid-template-columns: clamp(150px, 17vw, 200px) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 76px); align-items:start; }
.testimonial img{ -webkit-user-drag: none; user-select: none; }
.testimonial-side{ display:flex; flex-direction:column; }
.testimonial-avatar{ width: 100%; aspect-ratio: 1 / 1; height: auto;
  border-radius: 12px; object-fit:cover; box-shadow: var(--shadow);
  margin-bottom: clamp(16px, 1.6vw, 22px); }
.testimonial-who{ display:flex; flex-direction:column; }
.testimonial-who .name{ font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19px); color: var(--ink); }
.testimonial-who .role{ color: var(--soft); font-size: 14.5px; margin-top: 5px; }
.testimonial-who .org{ color: var(--soft); font-size: 14.5px; }
.testimonial blockquote{ margin:0; padding-right: clamp(24px, 5vw, 96px); color: var(--ink);
  font-family: "Cormorant Garamond", var(--font-serif); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 33px); line-height: 1.28; letter-spacing: -0.005em; }

/* progress-bar indicators */
.testimonial-nav{ display:flex; gap: clamp(16px, 2vw, 30px); margin-top: clamp(40px, 5vw, 68px); }
.t-dot{ appearance:none; -webkit-appearance:none; border:none; margin:0; padding:0; cursor:pointer;
  flex:1 1 0; height:2px; position:relative; border-radius:2px; background: rgba(16,21,17,.14); }
.t-dot::after{ content:""; position:absolute; left:0; right:0; top:-14px; bottom:-14px; }
.t-dot i{ position:absolute; inset:0; border-radius:2px; background: var(--ink);
  transform: scaleX(0); transform-origin:left; }
.t-dot.is-done i{ transform: scaleX(1); }
.t-dot.is-active i{ animation: tFill var(--t-dur, 7s) linear forwards; }
@keyframes tFill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.testimonials.is-paused .t-dot.is-active i{ animation-play-state: paused; }

@media (max-width: 760px){
  .testimonial{ grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
  .testimonial-side{ flex-direction: row; align-items: center; gap: clamp(14px, 4vw, 20px); }
  .testimonial-avatar{ width: clamp(72px, 20vw, 96px); flex: none; margin-bottom: 0; }
  .testimonial-who{ justify-content: center; }
  .testimonial blockquote{ padding-right: 0; }
}
@media (prefers-reduced-motion: reduce){ .testimonial-track{ transition:none; } }

/* ---------- featured NHS case study ---------- */
.customers-stack{ display:flex; flex-direction:column; }
.case-nhs{
  position: relative; overflow: hidden;
  border: none; padding: 0; color: #fff;
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: stretch; min-height: clamp(420px, 40vw, 520px);
  background: #0a6ab0 url("../../images/website/nhs-background.webp") center / cover no-repeat;
}
.case-nhs-body{ position: relative; z-index: 2; display:flex; flex-direction:column;
  justify-content:center; padding: clamp(34px, 4.2vw, 68px); }
.case-nhs-logo{
  width: clamp(158px, 15vw, 196px); height: auto; margin-bottom: clamp(26px, 3.2vw, 40px);
  filter: drop-shadow(0 2px 10px rgba(0,22,55,.28));
}
.case-nhs .tag{ color: rgba(255,255,255,.80); margin-bottom: 16px; }
.case-nhs h3{ color: #fff; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(24px, 2.7vw, 40px); line-height: 1.1;
  letter-spacing: -0.02em; margin-bottom: 18px; }
.case-nhs-body p{ color: rgba(255,255,255,.92); font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.7; max-width: 42ch; }

/* deployment screenshot: vertically centred, inset with padding matching the body */
.case-nhs-media{ position: relative; display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(28px, 3vw, 52px) clamp(34px, 4.2vw, 68px); padding-left: 0; }
.case-nhs-media img{
  width: 100%; max-width: none; height: auto;
  filter: drop-shadow(0 30px 55px rgba(0,28,68,.40));
}
@media (max-width: 860px){
  .case-nhs{ grid-template-columns: 1fr; min-height: 0; }
  .case-nhs-body{ padding-bottom: clamp(18px, 4vw, 26px); }
  .case-nhs-media{ order: 2; justify-content: center;
    padding: 0 clamp(24px,6vw,44px) clamp(28px,7vw,48px); }
  .case-nhs-media img{ width: 100%; }
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles-strip{ border-top: 1px solid var(--hair); }
.principles-strip .row{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.pr{ padding-top: 22px; border-top: 2px solid var(--ink); }
.pr:hover{ border-top-color: var(--green); }
.pr .n{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--green); display:block; margin-bottom: 12px; }
.pr h3{ font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 8px; }
.pr p{ font-size: 12.5px; color: var(--soft); line-height: 1.6; }

/* ============================================================
   DEMO / CTA
   ============================================================ */
.demo{ background: var(--bg-alt); border-top: 1px solid var(--hair); }
.demo-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(40px, 6vw, 90px); align-items:start;
}
.demo-left h2{ font-size: clamp(25px, 3.15vw, 40px); margin: 18px 0 18px; }
.demo-points{ list-style:none; margin-top: 30px; border-top: 1px solid var(--hair); }
.demo-points li{
  padding: 14px 0; border-bottom: 1px solid var(--hair);
  font-size: 14.5px; color: var(--soft); display:flex; gap: 12px; align-items:baseline;
}
.demo-points li b{ color: var(--ink); font-weight: 600; }
.demo-points li::before{ content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex:none; }
.demo-form{
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field{ margin-bottom: 18px; }
.field label{
  display:block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.field input, .field textarea{
  width:100%; padding: 12px 14px;
  font: 500 15px/1.45 var(--font-body); color: var(--ink);
  background: #FCFCFA; border: 1px solid var(--hair-2); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47,74,64,.1);
}
.field textarea{ resize: vertical; min-height: 104px; }
.field .err{ display:none; color: #B0492F; font-size: 12.5px; margin-top: 6px; }
.field.invalid input{ border-color: #C96A4E; }
.field.invalid .err{ display:block; }
.demo-form .btn{ width:100%; justify-content:center; border:none; }
.form-note{ font-size: 12.5px; color: var(--faint); margin-top: 14px; text-align:center; }
.form-success{ display:none; text-align:center; padding: 48px 12px; }
.form-success.show{ display:block; }
.form-success .check{
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--green); color: var(--green);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px; font-size: 20px;
}
.form-success h3{ font-family: var(--font-display); font-weight: 500; font-size: 25px; margin-bottom: 10px; letter-spacing:-0.02em; }
.form-success p{ color: var(--soft); font-size: 14.5px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top: 1px solid var(--hair); background: #F7F8F4; }
.footer-top{
  display:grid; grid-template-columns: auto repeat(3, max-content);
  justify-content: space-between;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(52px, 8vh, 80px) 0 52px;
}
.footer-brand p{ color: var(--soft); font-size: 14.5px; max-width: 60ch; margin-top: 16px; line-height: 1.7; }
.footer-brand .social{
  margin-top: 24px; display:inline-flex; align-items:center; gap: 8px;
}
.footer-brand .social-label{ color: var(--soft); font-size: 13.5px; font-weight: 500; }
.footer-brand .social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--hair-2); color: var(--soft);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.footer-brand .social-icon:hover{ color: #fff; background: var(--ink); border-color: var(--ink); }
.footer-col h4{
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 18px;
}
.footer-col h4:not(:first-child){ margin-top: 24px; }
.footer-col a{
  display:block; text-decoration:none; color: var(--soft);
  font-size: 14px; padding: 6px 0; transition: color .15s ease;
}
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  border-top: 1px solid var(--hair);
  padding: 22px 0 30px;
  display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap:wrap;
  font-size: 13px; color: var(--soft);
}
.footer-bottom .legal{ display:flex; gap: 22px; }
.footer-bottom a{ color: var(--soft); text-decoration:none; }
.footer-bottom a:hover{ color: var(--ink); }

/* ---------- header dropdowns ---------- */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-drop-btn{
  background:none; border:none; padding:0;
  font: 500 14px/1.4 var(--font-body); color: var(--soft);
  display:inline-flex; align-items:center; gap: 5px;
  transition: color .15s ease;
}
.nav-drop-btn:hover{ color: var(--ink); }
.nav-drop-btn .chev{ font-size: 9px; transform: translateY(1px); color: var(--faint); }
.drop{
  position:absolute; top: calc(100% + 16px); left: -14px; min-width: 252px;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.drop::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-item:hover .drop, .nav-item:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
.drop a{
  display:block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink); text-decoration:none;
}
.drop a:hover{ background: var(--tint-2); }
.drop a small{ display:block; font-size: 11.5px; font-weight: 400; color: var(--faint); margin-top: 1px; }
.drop .drop-sep{ height:1px; background: var(--hair); margin: 6px 8px; }
.mobile-menu .group{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--green);
  padding: 30px 4px 4px;
}
.mobile-menu .group:first-child{ padding-top: 14px; }
/* the row after a label opens the group, so it carries no top divider clash */
.mobile-menu .group + a{ border-top: none; }

/* ---------- hero trust badges ---------- */
.hero-badges{ display:flex; gap: 10px 26px; justify-content:center; flex-wrap:wrap; margin-top: 28px; }
.hero-badges span{
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--soft);
}
.hero-badges i{ width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex:none; }
.hero-content > *:nth-child(5){ animation-delay:.5s; }

/* ---------- subpage hero ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding: clamp(132px, 17vh, 188px) 0 clamp(52px, 7vh, 76px);
  border-bottom: 1px solid var(--hair);
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  pointer-events:none;
}
.page-hero .crumb{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.page-hero .crumb a{ color: var(--green); text-decoration:none; }
.page-hero .crumb a:hover{ text-decoration:underline; }
.page-hero h1{ font-size: clamp(38px, 5vw, 66px); max-width: 17ch; margin-bottom: 20px; }
.page-hero .lede{ margin-bottom: 30px; }
.page-hero .hero-ctas{ justify-content:flex-start; }
.page-hero.dark{ background: var(--night); border-bottom-color: var(--night-hair); }
.page-hero.dark .crumb{ color: var(--night-soft); }
.page-hero.dark .crumb a{ color: var(--mint); }
.page-hero.dark h1{ color: var(--night-text); }
.page-hero.dark .lede{ color: var(--night-soft); }
.page-hero.dark .lede b{ color: var(--night-text); }
.page-hero.dark .eyebrow{ color: var(--mint); }

/* soft-ribbons backdrop on Product, Solutions, Industries & Security subpage heroes */
body.marketing .page-hero::before{
  inset: 0; width: auto; height: auto; border-radius: 0;
  background: url("../../images/website/soft-green-ribbons.webp") center / cover no-repeat;
  -webkit-mask-image: none; mask-image: none;
}
body.marketing .page-hero::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(251,251,249,.30);
}
body.marketing .page-hero .wrap{ position: relative; z-index: 1; }
/* on phones the image crops tighter, so wash it lighter for legibility */
@media (max-width: 640px){
  body.marketing .page-hero::after{ background: rgba(251,251,249,.78); }
}

/* ---------- capability grid (subpages) ---------- */
.cap-grid{
  --sx-line: rgba(47,74,64,.25);
  display:grid; grid-template-columns: repeat(3, 1fr);
}
/* hairlines between cells only — no outer frame */
.cap-cell{
  padding: clamp(26px, 3vw, 42px) clamp(24px, 2.8vw, 40px);
  border-left: 1px solid var(--sx-line); border-top: 1px solid var(--sx-line);
}
.cap-cell:nth-child(3n+1){ border-left: none; }
.cap-cell:nth-child(-n+3){ border-top: none; }
.cap-cell .mono-label{ color: var(--green); display:block; margin-bottom: 12px; }
.cap-cell h3{ font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; }
.cap-cell p{ font-size: 13.5px; color: var(--soft); line-height: 1.7; }

/* ---------- process steps ---------- */
.steps{ border-top: 1px solid var(--hair); }
.step-row{
  display:grid; grid-template-columns: 64px minmax(0,.85fr) minmax(0,1.3fr);
  gap: clamp(18px, 3vw, 44px); padding: clamp(22px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--hair); align-items:baseline;
}
.step-row .sn{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--green); }
.step-row h3{ font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.step-row p{ font-size: 14.5px; color: var(--soft); line-height: 1.7; }

/* ---------- big quote (subpages) ---------- */
.bigquote{ max-width: 880px; }
.bigquote blockquote{
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(17px, 2vw, 24px); line-height: 1.4; letter-spacing: -0.02em;
}
.bigquote blockquote b{ font-weight: 500; color: var(--green); }
.bigquote .quote-attr .name{ font-weight: 600; font-size: 14.5px; }
.bigquote .quote-attr .role{ color: var(--soft); font-size: 13px; margin-top: 2px; }

/* ---------- article ---------- */
.article-body{ max-width: 720px; margin: 0 auto; }
.article-body p{ font-size: 16.5px; line-height: 1.8; color: #2C352F; margin-bottom: 24px; }
.article-body p b{ color: var(--ink); }
.article-body h2{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.6vw, 30px); letter-spacing: -0.025em; line-height: 1.25;
  margin: 44px 0 16px;
}
.article-body ul{ margin: 0 0 24px; padding-left: 2px; list-style:none; }
.article-body ul li{
  display:flex; gap: 12px; align-items:baseline;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
  font-size: 15px; color: var(--soft); line-height: 1.65;
}
.article-body ul li b{ color: var(--ink); font-weight: 600; }
.article-body ul li::before{ content:""; width: 5px; height: 5px; border-radius:50%; border: 1px solid var(--green); flex:none; }
.article-body .pull{
  border-left: 2px solid var(--green); padding: 6px 0 6px 24px; margin: 36px 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(16px, 1.65vw, 20px); letter-spacing: -0.015em; line-height: 1.45;
}
.article-meta{
  display:flex; gap: 18px; flex-wrap:wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.article-foot{
  max-width: 720px; margin: clamp(36px, 5vh, 52px) auto 0;
  border-top: 1px solid var(--hair); padding-top: 26px;
  display:flex; justify-content:space-between; gap: 14px; flex-wrap:wrap; align-items:center;
}
.article-foot .note{ font-size: 12.5px; color: var(--faint); max-width: 46ch; }

/* ---------- request a demo ---------- */
.demo-split{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap: clamp(40px, 6vw, 96px);
  padding: calc(68px + clamp(28px, 5vh, 64px)) max(var(--pad), calc((100% - var(--w)) / 2 + var(--pad))) clamp(28px, 5vh, 64px);
}
/* drifting soft-ribbons backdrop (shared with the login page) */
.demo-split::before{
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: url("../../images/website/soft-green-ribbons.webp") center / cover no-repeat;
  animation: authPan 20s ease-in-out infinite alternate;
  will-change: transform;
}
.demo-split::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(251,251,249,.32);
}
.demo-split-copy, .demo-split-form{ position: relative; z-index: 1; }
.demo-split-copy .eyebrow{ margin-bottom: 18px; }
.demo-split-copy h1{ font-size: clamp(33px, 4vw, 54px); white-space: nowrap; margin-bottom: 20px; }
.demo-split-copy .lede{ max-width: 36ch; margin-bottom: 0; font-size: clamp(17px, 1.7vw, 20px); }
.demo-benefits{
  list-style: none; margin-top: clamp(28px, 4.5vh, 44px);
  display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); max-width: 40ch;
}
.demo-benefits li{ border-left: 2px solid var(--green); padding-left: 16px; }
.demo-benefits b{
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px;
}
.demo-benefits span{ font-size: 15px; line-height: 1.55; color: var(--faint); }
.demo-split-form{
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow);
}
.demo-split-form .field{ margin-bottom: 16px; }
.demo-split-form .field label{ color: var(--soft); }
.demo-split-form .field input, .demo-split-form .field textarea{ background: #fff; }
.demo-split-form textarea{ min-height: 84px; }
.demo-split-form:has(.form-success.show){
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.demo-success{ padding: clamp(36px, 6vh, 56px) 8px; }
.demo-success-mark{ width: 46px; height: 46px; color: var(--green); display: block; margin: 0 auto 24px; }
.demo-success-mark path{ stroke-dasharray: 30; stroke-dashoffset: 30; }
.demo-success h3{ font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
.demo-success p{ color: var(--soft); font-size: 15px; line-height: 1.65; max-width: 34ch; margin: 0 auto; }
.form-success.show .demo-success-mark path{ animation: demoCheckDraw .55s cubic-bezier(.65,0,.35,1) forwards .12s; }
@keyframes demoCheckDraw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  .demo-success-mark path{ stroke-dashoffset: 0; animation: none; }
}
.demo-split-form .btn{ width:100%; justify-content:center; border:none; margin-top: 4px; }
.form-submit-error{
  margin-top: 14px; font-size: 13px; line-height: 1.5; color: #B0492F; text-align: center;
}
.demo-split-form .form-legal{
  font-size: 12.5px; color: var(--faint); line-height: 1.6; margin-top: 14px; text-align: center;
}
.demo-split-form .form-legal a{ color: var(--green); text-decoration: underline; }
.demo-split-form .form-legal a:hover{ color: var(--ink); }

/* ---------- industry pages ---------- */
.ind-map{ border-top: 1px solid var(--hair); }
.ind-map .map-row{
  display:grid; grid-template-columns: minmax(0,.55fr) minmax(0,1.45fr);
  gap: clamp(18px, 3vw, 44px); padding: clamp(20px, 2.8vh, 30px) 0;
  border-bottom: 1px solid var(--hair); align-items:baseline;
}
.ind-map .map-row .prod{ display:block; }
.ind-map .map-row .prod a{
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.015em; color: var(--ink); text-decoration:none;
}
.ind-map .map-row .prod a:hover{ color: var(--green); }
.ind-map .map-row .prod .mono-label{ display:block; margin-top: 4px; }
.ind-map .map-row p{ font-size: 14.5px; color: var(--soft); line-height: 1.7; }

/* ---------- closing CTA band (shared across subpages) ---------- */
/* a soft hairline that fades out at both ends, mirroring the testimonials rule */
.cta-band::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width: min(var(--w), calc(100% - var(--pad) * 2)); height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(16,21,17,.12) 4%, rgba(16,21,17,.12) 96%, transparent 100%); }
.cta-band-inner{
  container-type: inline-size;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}
.cta-band-inner h2{ font-size: clamp(24px, 2.95vw, 39px); margin: 0; max-width: none; white-space: nowrap; }
.cta-band-inner .btn{ flex-shrink: 0; }
@media (max-width: 720px){
  .cta-band-inner{ flex-direction: column; align-items: flex-start; }
  /* size the heading off the column width (cqi) so it fills one line; the
     coefficient is tuned to this exact string, capped at the desktop ceiling */
  .cta-band-inner h2{ font-size: min(6.4cqi, 39px); }
  .cta-band-inner .btn{ width: 100%; justify-content: center; }
}

/* ============================================================
   MOTION UPGRADES
   ============================================================ */
/* reveals share the hero vignettes' language: rise + condense out of blur,
   transform settling on the spring curve */
.reveal{ opacity:0; transform: translateY(22px) scale(.985); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .7s var(--spring), filter .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter: blur(0); }
[data-stagger] > *{ opacity:0; transform: translateY(16px) scale(.97); filter: blur(6px);
  transition: opacity .6s var(--ease), transform .6s var(--spring), filter .6s var(--ease); }
.in[data-stagger] > *, .reveal.in [data-stagger] > *{ opacity:1; transform:none; filter: blur(0); }

/* aurora glow behind the hero demo */
.hero-demo{ z-index: 1; }
.hero-demo::before{
  content:""; position:absolute; inset: -70px -90px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 52% at 22% 28%, rgba(156,194,176,.10), transparent 70%),
    radial-gradient(38% 48% at 78% 72%, rgba(156,194,176,.16), transparent 70%);
  filter: blur(34px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{ transform: translate3d(-16px, 8px, 0) scale(1); }
  to{ transform: translate3d(18px, -10px, 0) scale(1.06); }
}

/* button lift */
.btn{ transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn-primary:hover{ box-shadow: 0 10px 26px -10px rgba(47,74,64,.5); }

/* running pill pulse */
@keyframes pillPulse{ 50%{ box-shadow: 0 0 0 6px rgba(47,74,64,.08); } }
.window-bar .pill.run{ animation: pillPulse 1.2s ease infinite; }

/* ============================================================
   HERO SCENES — search + workflow showcase
   ============================================================ */
.scene-tabs{ display:flex; gap: 8px; justify-content:center; flex-wrap:wrap; margin-bottom: 16px; }
.scene-tab{
  position:relative; overflow:hidden;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  background: var(--card); border: 1px solid var(--hair); border-radius: 99px;
  padding: 9px 18px; cursor:pointer;
  transition: color .25s ease, border-color .25s ease;
}
.scene-tab .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background: var(--tint); }
.scene-tab .lbl{ position:relative; z-index:1; }
.scene-tab.active{ color: var(--green); border-color: #D2DDD6; }
.scene-tab:hover{ color: var(--ink); }
.scene-tab.active:hover{ color: var(--green); }
.scene-stage{ position:relative; }
.scene{ display:none; }
.scene.active{ display:block; animation: sceneIn .6s var(--spring); }
@keyframes sceneIn{
  from{ opacity:0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  to{ opacity:1; transform:none; filter: blur(0); }
}

/* workflow scene steps */
.wsteps{ list-style:none; margin-top: 4px; }
.wstep{
  display:flex; gap: 11px; align-items:flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--glass-hair);
  font-size: 13px; line-height: 1.55; color: var(--soft);
  opacity:0; transform: translateY(9px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wstep:last-child{ border-bottom:none; }
.wstep.on{ opacity:1; transform:none; }
.wstep b{ color: var(--ink-warm); font-weight: 600; }
.wstep .tk{
  width: 17px; height: 17px; border-radius: 50%; flex:none; margin-top: 2px;
  border: 1px solid rgba(58,66,60,.16); background: rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  font-size: 9px; color: var(--sage-deep);
}
.wstep.done .tk{ border-color: rgba(143,169,143,.5); background: rgba(143,169,143,.14); }
.wstep.warn{ color: #8A5A18; }
.wstep.warn b{ color: #8A5A18; }
.wstep.warn .tk{ border-color: rgba(210,160,70,.45); background: rgba(232,183,86,.14); color: #8A5A18; }
.wfoot{
  margin-top: 14px; display:flex; align-items:center; gap: 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  opacity:0; transition: opacity .6s ease;
}
.wfoot.on{ opacity:1; }
.wfoot .ok{ color: var(--sage-deep); }

/* human sign-off row — the run pauses; the decision belongs to a person */
.wdecide{
  margin-top: 14px;
  display:flex; align-items:center; gap: 12px; flex-wrap:wrap;
  padding: 11px 14px;
  border: 1px solid rgba(210,160,70,.42); border-radius: 14px;
  background: rgba(232,183,86,.09);
  opacity:0; transform: translateY(10px);
  transition: opacity .8s var(--ease-calm), transform .8s var(--ease-calm);
}
.wdecide.on{ opacity:1; transform:none; }
.wdecide-label{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #8A5A18;
}
.wdecide-actions{ margin-left:auto; display:flex; gap: 8px; }
.wbtn{
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  padding: 6px 14px; border-radius: 99px; white-space:nowrap;
  border: 1px solid var(--hair-2); color: var(--ink); background: var(--card);
}
.wbtn.approve{ background: var(--green); border-color: var(--green); color:#fff; }
.bigcount{
  font-family: var(--font-display); font-weight: 500;
  font-size: 42px; letter-spacing: -0.04em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bigcount em{ font-style:normal; color: var(--green); }
.bigcount-sub{ font-size: 12px; color: var(--soft); margin: 6px 0 18px; }

/* ============================================================
   SOLUTION PAGES — callouts + simulation components
   ============================================================ */
.why{
  border-left: 2px solid var(--green); background: var(--bg-alt);
  border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 22px 0 26px;
}
.why .mono-label{ color: var(--green); display:block; margin-bottom: 8px; }
.why h3{ font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.02em; margin-bottom: 6px; }
.why h3 em{ font-style:normal; color: var(--green); }
.why p{ font-size: 13.5px; color: var(--soft); line-height: 1.65; }

/* parsed filter chips */
.fchips{ display:flex; flex-wrap:wrap; gap: 7px; margin: 12px 0 4px; }
.fchip{
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sage-deep); background: rgba(143,169,143,.14); border: 1px solid rgba(143,169,143,.35);
  border-radius: 8px; padding: 4px 9px;
  opacity:0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fchip.on{ opacity:1; transform:none; }

/* sql snippet */
.sqlbox{
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; color: var(--soft);
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  padding: 10px 14px; margin: 12px 0; opacity:0; transition: opacity .5s ease;
}
.sqlbox.on{ opacity:1; }
.sqlbox .k{ color: var(--sage-deep); }

/* horizontal answer bars */
.bars{ margin-top: 12px; }
.brow{
  display:grid; grid-template-columns: 76px 1fr 92px; gap: 10px; align-items:center;
  padding: 7px 0; font-size: 12px; color: var(--soft);
}
.brow .lab{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.bars-cap .brow{
  grid-template-columns: 74px 1fr 52px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bars-cap .brow.on{ opacity: 1; transform: none; }
.brow .track{ display:block; height: 18px; border-radius: 5px; background: var(--bg-alt); overflow:hidden; }
.brow .bar{ display:block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-deep), var(--green)); border-radius: 5px; transition: width 1.1s var(--ease); }
.brow.hot .bar{ background: linear-gradient(90deg, var(--green), #4E8A6F); }
.brow .val{ text-align:right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); opacity:0; transition: opacity .4s ease; white-space:nowrap; }
.brow .val.on{ opacity:1; }
.brow .val em{ font-style:normal; color: var(--green); }

/* document outline tree */
.otl{ list-style:none; }
.otl li{
  font-size: 12px; color: var(--soft);
  padding: 6px 0 6px 14px; border-left: 2px solid var(--hair);
  opacity:0; transform: translateX(-6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.otl li.on{ opacity:1; transform:none; }
.otl li.h{ font-weight: 600; color: var(--ink); border-left-color: var(--sage-deep); }

/* skeleton lines */
.skel{ height: 6px; border-radius: 3px; background: #E8EBE3; margin-bottom: 9px; }
.skel.w85{ width:85%; } .skel.w70{ width:70%; } .skel.w55{ width:55%; } .skel.w40{ width:40%; }

/* refine command bar */
.refinebar{
  display:flex; align-items:flex-start; gap: 9px;
  border: 1px solid var(--glass-line); background: var(--glass); border-radius: 14px;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  padding: 9px 12px; margin-top: 12px; font-size: 12px; color: var(--ink);
  opacity:0; transition: opacity .4s ease;
}
.refinebar.on{ opacity:1; }
.refinebar .tag{
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-deep); border: 1px solid rgba(143,169,143,.35); background: rgba(143,169,143,.14);
  border-radius: 6px; padding: 2px 7px; flex:none;
}

/* draft paragraph with redline swap */
.draft{
  border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  padding: 13px 15px; font-size: 12px; line-height: 1.65; color: var(--soft);
}
.draft .old{ transition: opacity .4s ease; }
.draft .old.gone{ text-decoration: line-through; opacity: .38; }
.draft .new{ display:none; color: var(--sage-deep); background: rgba(143,169,143,.16); border-radius: 5px; padding: 1px 4px; }
.draft .new.on{ display:inline; }

/* research profile card */
.profile{
  border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  padding: 16px 18px; opacity:0; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.profile.on{ opacity:1; transform:none; }
.profile h4{ font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.profile .pdesc{ font-size: 11.5px; color: var(--soft); line-height: 1.6; margin: 6px 0 10px; }
.pmeta{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 6px; }
.pmeta span{
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--hair); border-radius: 5px; padding: 3px 7px;
}
.pstat{ margin: 10px 0 0; opacity:0; transition: opacity .5s ease; }
.pstat.on{ opacity:1; }
.pstat .n{ font-family: var(--font-display); font-weight: 500; font-size: 25px; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pstat .l{ font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.ptabs{ display:flex; gap: 12px; border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 12px; flex-wrap:wrap; }
.ptabs span{ font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ptabs span.hot{ color: var(--sage-deep); }

/* agent reasoning notes (dark sim) */
.rnote{
  background: #101B17; border: 1px solid var(--night-hair); border-radius: 8px;
  padding: 10px 12px; font-size: 10.5px; line-height: 1.6; color: var(--night-soft);
  margin-bottom: 10px; opacity:0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rnote.on{ opacity:1; transform:none; }
.rnote .rt{
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mint); display:block; margin-bottom: 4px;
}

/* extraction scan sweep */
.dxwrap{ position:relative; }
.dxscan{
  position:absolute; left: 10px; right: 10px; top: 14px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sage-deep), transparent);
  opacity:0; pointer-events:none;
}
.dxscan.go{ animation: dxSweep 2.6s var(--ease); }
@keyframes dxSweep{
  0%{ top: 14px; opacity: 1; }
  100%{ top: calc(100% - 14px); opacity: 0; }
}

:root{
  --soft: cubic-bezier(.22,.9,.24,1);
  --spring: cubic-bezier(.34,1.4,.44,1);
}

/* ============================================================
   MOTION ELEGANCE — layered arrivals, working states, polish
   ============================================================ */
/* generation caret (LLM-style) */
.gcaret{
  display:inline-block; width: 7px; height: 13px; border-radius: 2px;
  background: var(--sage-deep); margin-left: 3px; transform: translateY(2px);
  animation: gpulse 1.2s ease infinite;
}
@keyframes gpulse{ 50%{ opacity: .25; } }

/* thinking dots */
.thinking{ display:inline-flex; gap: 5px; align-items:center; padding: 4px 0; }
.thinking i{
  width: 5px; height: 5px; border-radius: 50%; background: var(--sage-deep);
  opacity: .2; animation: thinkPulse 1.3s ease infinite;
}
.thinking i:nth-child(2){ animation-delay: .22s; }
.thinking i:nth-child(3){ animation-delay: .44s; }
@keyframes thinkPulse{ 35%{ opacity: 1; transform: translateY(-2px); } 70%{ opacity:.2; transform:none; } }

/* working state: sweep under the window bar */
.window .window-bar{ position: relative; }
.window.working .window-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  background-size: 36% 100%; background-repeat: no-repeat;
  animation: workSweep 1.25s ease-in-out infinite;
}
@keyframes workSweep{ from{ background-position: -60% 0; } to{ background-position: 160% 0; } }

/* pill state swap */
.window-bar .pill.swap{ animation: pillSwap .4s var(--soft); }
@keyframes pillSwap{ from{ opacity: 0; transform: translateY(5px); } to{ opacity: 1; transform: none; } }

/* refined caret */
.search-caret{ width: 2px; border-radius: 1px; box-shadow: 0 0 7px rgba(95,122,102,.45); }

/* layered arrivals: gentle fade + upward slide — a quiet demonstration */
.wstep{
  opacity:0; transform: translateY(14px);
  transition: opacity .9s var(--ease-calm), transform .9s var(--ease-calm);
}
.wstep.on{ opacity:1; transform:none; }
.wstep.on .tk{ animation: tkSoft .8s var(--ease-calm); }
@keyframes tkSoft{
  from{ transform: scale(.6); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.wstep.warn.on{ animation: warnGlow 2.2s ease; }
@keyframes warnGlow{ 0%{ background: rgba(232,183,86,.10); } 100%{ background: transparent; } }

.dfield{
  opacity:0; transform: translateY(14px) scale(.985);
  transition: opacity .9s var(--ease-calm), transform .9s var(--ease-calm);
}
.dfield.on{ opacity:1; transform:none; animation: fieldSettle 1.6s ease; }
@keyframes fieldSettle{
  0%{ border-color: rgba(70,112,105,.55); }
  100%{ border-color: var(--glass-line); }
}

.src{
  opacity: .4; transform: translateY(10px);
  transition: opacity .9s var(--ease-calm), transform .9s var(--ease-calm), border-color .9s ease;
}
.src.on{ opacity:1; transform:none; border-color: rgba(143,169,143,.45); }

.msg{
  opacity:0; transform: translateY(16px) scale(.97); filter: blur(6px);
  transition: opacity .6s var(--ease), transform .6s var(--spring), filter .6s var(--ease);
}
.msg.on{ opacity:1; transform:none; filter: blur(0); }
.msg.on.age1, .msg.on.age2, .msg.on.age3{ transition: opacity 1.6s ease; }

.rnote{
  opacity:0; transform: translateY(12px);
  transition: opacity .9s var(--ease-calm), transform .9s var(--ease-calm);
}
.rnote.on{ opacity:1; transform:none; }

.fchip{
  opacity:0; transform: translateY(8px);
  transition: opacity .7s var(--ease-calm), transform .7s var(--ease-calm);
}
.fchip.on{ opacity:1; transform: translateY(0); }

.holdings .hrow{
  opacity:0; transform: translateY(9px);
  transition: opacity .8s var(--ease-calm), transform .8s var(--ease-calm);
}
.holdings .hrow.on{ opacity:1; transform:none; }

.otl li{ transition: opacity .8s var(--ease-calm), transform .8s var(--ease-calm); }

.profile{
  transform: translateY(14px) scale(.985);
  transition: opacity .95s var(--ease-calm), transform .95s var(--ease-calm);
}
.profile.on{ transform:none; }
.pstat{ transform: translateY(8px); transition: opacity .8s var(--ease-calm), transform .8s var(--ease-calm); }
.pstat.on{ transform:none; }

.fcheck .tick{ transition: border-color .5s ease, background .5s ease, color .5s ease; }
.fcheck.on .tick, .fcheck.esc .tick{ animation: tkSoft .8s var(--ease-calm); }

/* chart bar shine sweep */
.brow .bar{ position: relative; overflow: hidden; }
.brow .bar::after{
  content:""; position:absolute; top:0; bottom:0; width: 34%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.brow.shine .bar::after{ animation: barShine 1s ease .6s forwards; }
@keyframes barShine{ to{ left: 135%; } }
.brow .val{ transform: translateX(8px); transition: opacity .5s var(--soft), transform .5s var(--soft); }
.brow .val.on{ transform:none; }
.sqlbox{ transform: translateY(6px); transition: opacity .55s var(--soft), transform .55s var(--soft); }
.sqlbox.on{ transform:none; }

/* skeleton shimmer */
.skel{
  background: linear-gradient(90deg, #E8EBE3 0%, #F3F5EE 45%, #E8EBE3 90%);
  background-size: 220% 100%;
  animation: skelShimmer 1.7s ease infinite;
}
@keyframes skelShimmer{ from{ background-position: 120% 0; } to{ background-position: -120% 0; } }

/* extraction scan: glow */
.dxscan{ box-shadow: 0 0 14px rgba(95,122,102,.4); }

/* scene stage crossfade + tab refinement */
.scene-stage{ transition: opacity .24s ease, filter .24s ease; }
.scene-tab{ transition: color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.scene-tab.active{ box-shadow: var(--shadow); }
.scene-tab .fill{ background: linear-gradient(90deg, var(--tint-2), var(--tint)); }

/* refine bar + footers settle */
.refinebar{ transform: translateY(6px); transition: opacity .5s var(--soft), transform .5s var(--soft); }
.refinebar.on{ transform:none; }
.wfoot{ transform: translateY(5px); transition: opacity .65s var(--soft), transform .65s var(--soft); }
.wfoot.on{ transform:none; }

/* ============================================================
   VISUAL DESIGN OVERHAUL — stage, chrome, instruments
   ============================================================ */

/* ---------- window chrome: none — content floats free ---------- */
/* coloured traffic lights */
.window-bar i{ width: 10px; height: 10px; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(16,21,17,.08); }
.window-bar i:nth-of-type(1){ background: #DFA79D; }
.window-bar i:nth-of-type(2){ background: #E2CF9F; }
.window-bar i:nth-of-type(3){ background: #A9CDB4; }
.sim .window-bar i:nth-of-type(1){ background: #6E4A44; }
.sim .window-bar i:nth-of-type(2){ background: #6E6244; }
.sim .window-bar i:nth-of-type(3){ background: #44604E; }
/* brand glyph beside title */
.window-bar .title{ display:inline-flex; align-items:center; gap: 8px; }
.window-bar .title::before{
  content:""; width: 10px; height: 10px; border-radius: 50%; flex:none;
  border: 1.4px solid var(--green); opacity: .75;
  box-shadow: inset 0 0 0 2.2px var(--card);
}
.sim .window-bar .title::before{ border-color: var(--mint); box-shadow: inset 0 0 0 2.2px var(--night); }
/* pills: gradient + status dot */
.window-bar .pill{
  display:inline-flex; align-items:center; gap: 6px;
  background: linear-gradient(180deg, #EDF0EC, #E4E9E4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.window-bar .pill::before{
  content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex:none;
}
.window-bar .pill.run::before{ animation: pulseDot 1s ease infinite; }
.window-bar .pill.warn{ background: linear-gradient(180deg, #FCF4E2, #F7EAD0); }
.window-bar .pill.warn::before{ background: #C8924B; }
/* inputs light up while the window works */
.search-input{ transition: border-color .4s ease, box-shadow .4s ease; box-shadow: inset 0 1px 2px rgba(16,21,17,.04); }
.window.working .search-input{
  border-color: rgba(143,169,143,.5);
  box-shadow: 0 0 0 3px rgba(143,169,143,.12), inset 0 1px 2px rgba(58,66,60,.04);
}

/* ---------- hero stage: mesh glow, blueprint grid, floating badges ---------- */
.hero-demo::before{
  inset: -110px -150px;
  background:
    radial-gradient(46% 60% at 18% 24%, rgba(47,74,64,.22), transparent 68%),
    radial-gradient(42% 56% at 84% 70%, rgba(156,194,176,.30), transparent 70%),
    radial-gradient(30% 40% at 60% 10%, rgba(226,207,159,.25), transparent 70%);
  filter: blur(44px);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.hero-demo .stage-grid{
  position:absolute; inset: -60px -90px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(47,74,64,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,74,64,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 78%);
}
.hero-demo #heroWindow{ animation: windowRise 1.2s var(--soft) .55s both; }
@keyframes windowRise{
  from{ opacity: 0; transform: perspective(1400px) rotateX(7deg) translateY(34px) scale(.985); }
  to{ opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0) scale(1); }
}
@keyframes chipFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* ---------- scene switcher: segmented control ---------- */
.scene-tabs{
  display:flex; width: max-content; max-width: 100%; flex-wrap: wrap;
  margin: 0 auto 20px; gap: 4px;
  background: #EDF0E9; border: 1px solid var(--hair);
  border-radius: 99px; padding: 5px;
  box-shadow: inset 0 1px 3px rgba(16,21,17,.05);
}
.scene-tab{
  border: none; background: transparent; border-radius: 99px;
  padding: 9px 18px; box-shadow: none;
  color: var(--soft);
}
.scene-tab .fill{ background: linear-gradient(90deg, rgba(231,241,235,0), var(--tint)); border-radius: inherit; }
.scene-tab.active{
  background: var(--card); color: var(--green-deep);
  box-shadow: 0 1px 2px rgba(16,21,17,.08), 0 4px 14px -6px rgba(16,21,17,.16);
}
.scene-tab:hover{ color: var(--ink); box-shadow:none; }
.scene-tab.active:hover{ color: var(--green-deep); box-shadow: 0 1px 2px rgba(16,21,17,.08), 0 4px 14px -6px rgba(16,21,17,.16); }

/* ---------- designed ticks: mineral fills matching the bubbles ---------- */
.wstep.done .tk, .fcheck.on .tick{
  background: linear-gradient(165deg, #558078, #7CA097);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 6px -2px rgba(70,112,105,.5);
}
.wstep.warn .tk, .fcheck.esc .tick{
  background: linear-gradient(165deg, #B79D74, #CDB995);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 6px -2px rgba(140,116,80,.4);
}
/* research-step ticks: a ring while the step runs, a filled dot when done */
.wstep .tk.tk-ico{
  border:none; background:none; box-shadow:none;
  width:auto; height:auto; margin-top: 2px;
  font-size: 11px; line-height: 1; color: var(--faint);
}
.wstep.done .tk.tk-ico{ background:none; box-shadow:none; color: var(--sage-deep); }
.tk-ico .ri-circle-fill{ display:none; }
.wstep.done .tk-ico .ri-donut-chart-line{ display:none; }
.wstep.done .tk-ico .ri-circle-fill{ display:inline-block; }
/* confidence chips */
.dfield .k .conf{
  display:inline-flex; align-items:center; gap: 5px;
  background: rgba(70,112,105,.12); border-radius: 99px; padding: 2px 8px;
}
.dfield .k .conf::before{ content:""; width: 5px; height: 5px; border-radius:50%; background: #4A6E67; }

/* ---------- chart instruments ---------- */
.brow .track{ box-shadow: inset 0 1px 3px rgba(58,66,60,.07); border: 1px solid var(--glass-hair); }
.brow .bar{ background: linear-gradient(90deg, #5F7A66, #8FA98F 60%, #A9BFA6); }
.brow.hot .bar{ box-shadow: 0 0 14px rgba(143,169,143,.5); }

/* ---------- progress ring (questionnaire) ---------- */
.ringwrap{ display:flex; align-items:center; gap: 14px; margin-bottom: 4px; }
.ring{
  width: 52px; height: 52px; border-radius: 50%; flex:none;
  background: conic-gradient(var(--sage-deep) 0%, rgba(58,66,60,.10) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
  mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
}

/* ---------- answer landing wash + row spotlight ---------- */
.answer-text{ border-radius: 8px; }
.answer-text.landed{ animation: landWash 2.6s ease; }
@keyframes landWash{
  0%{ background: linear-gradient(90deg, rgba(143,169,143,.16), rgba(196,174,178,.08)); box-shadow: -10px 0 0 0 rgba(143,169,143,.16); }
  100%{ background: transparent; box-shadow: -10px 0 0 0 transparent; }
}
.hrow.hl{ animation: rowGlow 2.6s ease; }
@keyframes rowGlow{ 0%{ background: rgba(143,169,143,.14); } 100%{ background: transparent; } }

/* ---------- editorial headline wipe ---------- */
.reveal .display{
  clip-path: inset(0 0 102% 0);
  transition: clip-path .95s var(--soft) .08s;
}
.reveal.in .display{ clip-path: inset(0 0 -10% 0); }

/* ---------- gradient accents on key phrases ---------- */
.engine .statement em, .why h3 em, .gap .display em{
  background: linear-gradient(115deg, var(--green-deep), #4E8A6F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- premium buttons ---------- */
.btn-primary{
  background: linear-gradient(180deg, #1D2822, #101511);
  border: 0; padding: 14px 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(16,21,17,.25);
}
.btn-primary:hover{
  background: linear-gradient(180deg, #355A4B, #2F4A40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px -10px rgba(47,74,64,.55);
}

/* quiet warm field behind every demo — drifts slowly so the glass
   panes have living light to refract, in the hero wash's cream family */
.product-grid > *:has(> .window){ position: relative; }
.product-grid > *:has(> .window)::before{
  content:""; position:absolute; inset: -70px -110px; z-index: -1; pointer-events:none;
  background:
    radial-gradient(52% 60% at 24% 22%, rgba(190,172,148,.14), transparent 68%),
    radial-gradient(46% 56% at 78% 78%, rgba(205,188,162,.12), transparent 70%),
    radial-gradient(40% 48% at 60% 8%, rgba(241,236,232,.6), transparent 72%);
  filter: blur(48px);
  animation: demoField 24s ease-in-out infinite alternate;
}
@keyframes demoField{
  from{ transform: translate3d(-14px, 8px, 0) scale(1); }
  to{ transform: translate3d(16px, -10px, 0) scale(1.05); }
}

/* dark page-hero adjustments */
.page-hero.dark .btn-primary{ background: var(--mint); color: var(--night); }
.page-hero.dark .btn-primary:hover{ background: #fff; }
.site-header.header-dark{ background: rgba(14,23,20,.72); }
.site-header.header-dark.scrolled{ background: rgba(14,23,20,.9); border-bottom-color: var(--night-hair); }
.site-header.header-dark .brand-logo{ filter: brightness(0) invert(1); }
.site-header.header-dark .main-nav a,
.site-header.header-dark .nav-drop-btn,
.site-header.header-dark .header-actions .login{ color: var(--night-soft); }
.site-header.header-dark .main-nav a:hover,
.site-header.header-dark .nav-drop-btn:hover,
.site-header.header-dark .header-actions .login:hover{ color: var(--night-text); }
.site-header.header-dark .btn-primary{ background: var(--mint); color: var(--night); }
.site-header.header-dark .btn-primary:hover{ background: #fff; }

/* transparent header floating over the home hero */
.site-header.over-hero{
  background: transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color: transparent;
}
/* fade in a light scrim once scrolling, so the nav never clashes with hero copy */
.site-header.over-hero.scrolled{
  background: rgba(251,251,249,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hair);
}
.site-header.header-dark .nav-toggle span{ background: var(--night-text); }

/* simpler demo windows — no chrome bar */
.window-bar{ display:none; }

/* reasoning notes share the frosted vocabulary */
.rnote{
  background: var(--glass); border-color: var(--glass-line); color: var(--soft);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-glass);
  border-radius: 14px;
}
.rnote .rt{ color: var(--sage-deep); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px){
  .engine-layer{ grid-template-columns: 150px minmax(0, 1fr); row-gap: 12px; }
  .engine-layer ul{ grid-column: 2; }
  .principles-strip .row{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1040px){
  .cap-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .cap-cell:nth-child(3n+1){ border-left: 1px solid var(--sx-line); }
  .cap-cell:nth-child(-n+3){ border-top: 1px solid var(--sx-line); }
  .cap-cell:nth-child(2n+1){ border-left: none; }
  .cap-cell:nth-child(-n+2){ border-top: none; }
}
@media (max-width: 920px){
  .main-nav, .header-actions .login{ display:none; }
  /* the demo's soft glow bleeds 110px past its box; once the grid is a single
     narrow column that spills off-screen, so keep the glow within the column */
  .product-grid > *:has(> .window)::before{ inset-inline: 0; }
  .demo-split{ grid-template-columns: minmax(0,1fr); min-height: 0; align-items:start; gap: 32px; }
  .demo-split-copy h1{ white-space: normal; }
  .demo-benefits{ display: none; }
  .step-row{ grid-template-columns: 44px 1fr; }
  .step-row p{ grid-column: 2; }
  .ind-map .map-row{ grid-template-columns: 1fr; gap: 8px; }
  .nav-toggle{ display:block; }
  .search-body{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .wf-grid{ grid-template-columns: repeat(2, 1fr); }
  .di-body{ grid-template-columns: 1fr; }
  .sim-body{ grid-template-columns: 1fr; }
  .gap-grid{ grid-template-columns: 1fr; }
  .demo-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  /* phones: the mobile menu already carries the demo CTA, so drop the header
     pill and leave a clean brand + hamburger row that never crowds the toggle */
  .header-actions .btn{ display:none; }
  .wf-grid{ grid-template-columns: 1fr; }
  /* stacked full-width cards don't need the square proportions */
  .wf-grid .wf-card{ min-height: 0; }
  .wf-grid .wf-card .bar{ margin-top: 14px; }
  .engine-layer{ grid-template-columns: 1fr; row-gap: 10px; }
  .engine-layer ul{ grid-column: 1; grid-template-columns: 1fr; }
  .cap-grid{ grid-template-columns: 1fr !important; }
  .cap-cell{ border-left: none !important; border-top: 1px solid var(--sx-line) !important; padding: 24px 0; }
  .cap-cell:first-child{ border-top: none !important; }
  .principles-strip .row{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap: 34px; }
  .holdings .hrow{ grid-template-columns: 1.4fr .9fr .7fr; font-size: 11.5px; }
}
@media (max-width: 360px){
  /* narrowest phones: tighten the chart rows so the right-aligned value column
     never spills past the demo's edge */
  .brow{ grid-template-columns: 62px 1fr 78px; gap: 8px; }
  .bars-cap .brow{ grid-template-columns: 58px 1fr 46px; }
}

/* ============================================================
   SECURITY & GOVERNANCE PAGE (sx-)
   ============================================================ */

/* security hero: text beside the floating icon tray */
.sx-hero{
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  align-items:center; gap: clamp(28px, 4vw, 64px);
}
.sx-hero-visual{ justify-self:start; padding-left: clamp(0px, 3vw, 48px); }
.sx-emblem{
  width: clamp(120px, 13vw, 168px); aspect-ratio: 1; border-radius: 34px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: clamp(22px, 2.6vw, 34px);
  display:flex; align-items:center; justify-content:center;
}
.sx-emblem svg{ width:100%; height:100%; }
@media (max-width: 900px){
  .sx-hero{ grid-template-columns: 1fr; }
  .sx-hero-visual{ display:none; }
}

/* section heads */
.sx-head{ max-width: 760px; margin: 0 0 clamp(34px, 5vh, 54px); }
.sx-head h2{ font-size: clamp(23px, 2.65vw, 35px); margin-bottom: 16px; }

/* six-item protection grid */
.sx-grid{
  --sx-line: rgba(47,74,64,.25);
  display:grid; grid-template-columns: repeat(3, 1fr);
}
/* hairlines between cells only — no outer frame */
.sx-card{
  padding: clamp(26px, 3vw, 42px) clamp(24px, 2.8vw, 40px);
  border-left: 1px solid var(--sx-line); border-top: 1px solid var(--sx-line);
}
.sx-card:nth-child(3n+1){ border-left: none; }
.sx-card:nth-child(-n+3){ border-top: none; }
.sx-card i{
  display:inline-flex; font-size: 27px; color: var(--green);
  margin-bottom: 16px;
}
.sx-card h3{
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px;
}
.sx-card p{ font-size: 13.5px; color: var(--soft); line-height: 1.7; }

/* tinted band */
.sx-band{ background: var(--tint); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

/* closed-pipeline architecture (light panel, single type voice) */
.sx-arch{
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 3.4vw, 46px) clamp(20px, 2.8vw, 40px) clamp(44px, 5.4vw, 72px);
  position:relative; overflow:hidden;
}
.sx-arch > *{ position:relative; z-index:1; }
.sx-arch .lbl{
  font-family: var(--font-display); font-size: clamp(17px, 1.45vw, 20px); font-weight: 450;
  letter-spacing: -0.01em; color: var(--green);
  display: inline-flex; align-items: center; gap: 10px;
}
.sx-arch .lbl.dim{ color: var(--faint); font-weight: 500; font-size: 12.5px; }
.sx-brand{ height: 26px; width: auto; align-self: center; opacity: .9; }
.sx-arch .lbl i{ font-size: 1.08em; line-height: 1; position: relative; top: 1.5px; }
.sx-arch .slbl{
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .01em; color: var(--green); display:block; margin-bottom: 7px;
}
.sx-arch-head{
  display:flex; justify-content:space-between; align-items:baseline; gap: 12px; flex-wrap:wrap;
  padding-bottom: 16px; margin-bottom: clamp(28px, 3.6vh, 40px);
}

/* the signal spine: five stops on one line */
.sx-stages{
  position:relative; display:grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.8vh, 30px) clamp(16px, 1.8vw, 28px);
}
.sx-stages::before{
  content:""; position:absolute; top:4px; left:4px; right:4px; height:1px;
  background: rgba(47,74,64,.16);
}
.sx-fill{
  position:absolute; top:3px; left:4px; height:3px;
  width: calc(100% - 8px); max-width: calc(100% - 8px);
  background: linear-gradient(90deg, rgba(47,74,64,.12), var(--green));
  border-radius: 3px; box-shadow: 0 0 10px rgba(47,74,64,.25);
}
.sx-arch.anim .sx-fill{ width: var(--p, 0%); }
.sx-stage{ position:relative; padding-top: 30px; }
.sx-stage .dot{
  position:absolute; top:0; left:0; width: 9px; height: 9px; border-radius:50%;
  border: 1px solid rgba(47,74,64,.45); background: var(--card);
  transition: background .5s ease, box-shadow .5s ease;
}
.sx-stage h4{
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5px;
}
.sx-stage p{ font-size: 12.5px; color: var(--soft); line-height: 1.6; }

/* cross-cutting lanes: a second track running parallel to the spine */
.sx-lanes{
  position:relative; display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(52px, 6.6vh, 80px);
}
.sx-lanes::before{
  content:""; position:absolute; top:4px; left:4px; right:4px; height:1px;
  background: rgba(47,74,64,.3);
}
.sx-lane{ position:relative; padding-top: 30px; }
.sx-lane h4{
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5px;
}
.sx-lane p{ font-size: 12.5px; color: var(--soft); line-height: 1.6; }
.hdot{
  position:absolute; left: 0; top: 0;
  width: 9px; height: 9px; border-radius:50%;
  background: #C1C9C6; /* opaque equivalent of the rail's tint, so the line doesn't show through */
}

/* animated states -- applied only when JS drives the loop */
.sx-arch.anim .sx-stage{ opacity: .35; transition: opacity .6s var(--ease); }
.sx-arch.anim .sx-stage.on{ opacity: 1; }
.sx-arch.anim .sx-stage.on .dot{ background: var(--green); box-shadow: 0 0 8px rgba(47,74,64,.35); }
.sx-arch.anim .sx-lane{ opacity: .4; transition: opacity .6s var(--ease); }
.sx-arch.anim .sx-lane.on{ opacity: 1; }

/* FAQ accordion */
.sx-faq{ max-width: 800px; border-top: 1px solid var(--hair); }
.sx-faq details{ border-bottom: 1px solid var(--hair); }
.sx-faq summary{
  display:flex; align-items:baseline; justify-content:space-between; gap: 20px;
  padding: clamp(18px, 2.4vh, 24px) 0; cursor:pointer; list-style:none;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
  letter-spacing: -0.01em; color: var(--ink);
  transition: color .25s ease;
}
.sx-faq summary:hover{ color: var(--green); }
.sx-faq summary::-webkit-details-marker{ display:none; }
.sx-faq summary::after{
  content:"+"; flex:none; font-family: var(--font-mono); font-weight: 400;
  font-size: 17px; color: var(--green);
}
.sx-faq details[open] summary::after{ content:"−"; }
.sx-faq .a{ padding: 0 0 24px; }
.sx-faq .a p{ font-size: 14px; color: var(--soft); line-height: 1.75; }
.sx-faq .a p + p{ margin-top: 10px; }
.sx-faq .a b{ color: var(--ink); font-weight: 600; }

@media (max-width: 1040px){
  .sx-grid{ grid-template-columns: repeat(2, 1fr); }
  .sx-card:nth-child(3n+1){ border-left: 1px solid var(--sx-line); }
  .sx-card:nth-child(-n+3){ border-top: 1px solid var(--sx-line); }
  .sx-card:nth-child(2n+1){ border-left: none; }
  .sx-card:nth-child(-n+2){ border-top: none; }
}
@media (max-width: 900px){
  .sx-stages{ grid-template-columns: 1fr; gap: 20px; }
  .sx-stages::before{ top:4px; bottom:4px; left:4px; right:auto; width:1px; height:auto; }
  .sx-fill{
    top:4px; left:3px; width:3px; height: calc(100% - 8px);
    max-width:none; max-height: calc(100% - 8px);
    background: linear-gradient(180deg, rgba(47,74,64,.12), var(--green));
  }
  .sx-arch.anim .sx-fill{ width:3px; height: var(--p, 0%); }
  .sx-stage{ padding-top:0; padding-left: 26px; }
  .sx-stage .dot{ top: 3px; }
  .sx-lanes{ grid-template-columns: 1fr; gap: 20px; margin-top: 22px; }
  .sx-lanes::before{ top:4px; bottom:4px; left:4px; right:auto; width:1px; height:auto; }
  .sx-lane{ padding-top:0; padding-left: 26px; }
  .hdot{ top: 3px; }
}
@media (max-width: 760px){
  .sx-grid{ grid-template-columns: 1fr; }
  .sx-card{ border-left: none !important; border-top: 1px solid var(--sx-line) !important; padding: 24px 0; }
  .sx-card:first-child{ border-top: none !important; }
}