/* ============================================================================
   COMPREO — Editorial Enterprise Design System
   One stylesheet, inherited by every page. Root-relative; serve from web root.
   Aesthetic: warm editorial paper, serif display (Source Serif 4) + humanist
   sans body (Source Sans 3) with IBM Plex Mono for code/labels, a single
   disciplined teal accent, hairline rules, generous whitespace, and a
   signature "process spine" motif.
   ========================================================================== */

/* ----------------------------------- Tokens ----------------------------- */
:root {
  /* Paper & ink */
  --paper:      #FBFAF6;
  --paper-2:    #F4F1E8;
  --paper-3:    #EDE9DD;
  --ink:        #15211C;
  --ink-soft:   #3D4843;
  --ink-mute:   #5E6862;
  --line:       #E5E0D3;
  --line-2:     #D7D1C1;
  --white:      #FFFFFF;

  /* Brand ramp — teal (classic-professional, lightened per CXO feedback). */
  --teal-900:#073A2F;
  --teal-800:#0C5A47;   /* deepest solid — teal section bg, gradients, primary hover */
  --teal-700:#0A7058;   /* deep — links, eyebrows, button hover */
  --teal-600:#0C8A6C;   /* primary brand — buttons / fills */
  --teal-500:#13A282;   /* accent / hairline tick */
  --teal-400:#4FB89B;
  --teal-300:#8FD2C0;
  --teal-100:#D6EAE2;
  --teal-50: #EBF4F0;

  /* Functional */
  --focus: #13A282;

  /* Typography */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale */
  --fs-hero:  clamp(2.05rem, 0.85rem + 4.9vw, 5.1rem);
  --fs-h1:    clamp(2.3rem, 1.5rem + 2.9vw, 3.6rem);
  --fs-h2:    clamp(1.9rem, 1.4rem + 1.9vw, 2.85rem);
  --fs-h3:    clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --fs-h4:    1.28rem;
  --fs-lede:  clamp(1.12rem, 1rem + 0.5vw, 1.38rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* Spacing (8pt) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;  --s-10: 8rem;

  /* Structure */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 7vw, 7rem);

  --r-sm: 5px; --r: 8px; --r-lg: 10px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20,32,28,.05), 0 10px 30px -18px rgba(20,32,28,.25);
  --shadow-2: 0 2px 6px rgba(20,32,28,.06), 0 28px 60px -28px rgba(20,32,28,.30);
  --ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--teal-700);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------- Reset ------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
::selection { background: var(--teal-600); color:#fff; }

/* Atmospheric grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------- Typography --------------------------- */
/* Classic textbook hierarchy: headings BOLD, key terms BOLD, body regular. */
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.006em; font-optical-sizing: auto; color: var(--ink); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height:1.12; }
h4 { font-size: var(--fs-h4); font-weight:700; letter-spacing:-0.003em; }
p { color: var(--ink-soft); }
strong, b { color: var(--ink); font-weight: 700; }
.display { font-size: var(--fs-hero); line-height: 1.0; letter-spacing: -0.02em; }
.serif { font-family: var(--serif); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); font-weight:400; }
.muted { color: var(--ink-mute); }
.balance { text-wrap: balance; }
.measure { max-width: 62ch; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: var(--teal-700);
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background: var(--teal-500); }
.eyebrow--plain::before{ display:none; }

a.link { color: var(--teal-700); font-weight:600; border-bottom:1px solid var(--teal-300);
  transition: border-color .2s var(--ease), color .2s var(--ease); }
a.link:hover { color: var(--teal-600); border-color: var(--teal-600); }

.arrow-link{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  color: var(--teal-700); font-size: var(--fs-sm); }
.arrow-link svg, .arrow-link .ar{ transition: transform .25s var(--ease); }
.arrow-link:hover .ar{ transform: translateX(4px); }

/* ---------------------------------- Layout ------------------------------ */
.container { width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem,5vw,4rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: #EAEFEC; }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }
.section--ink p{ color:#B6C2BC; }
.section--teal { background: var(--teal-800); color:#EAF4F0; }
.section--teal h2,.section--teal h3{ color:#fff; }
.divider { height:1px; background: var(--line); border:0; }

.grid { display:grid; gap: var(--s-6); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
.section-head { max-width: 64ch; margin-bottom: clamp(2rem,4vw,3.25rem); }
.section-head .lede { margin-top: var(--s-4); }
.center { text-align:center; } .center .eyebrow{ justify-content:center; }
.center .section-head{ margin-inline:auto; }

/* ---------------------------------- Buttons ----------------------------- */
.btn { --bg:var(--teal-600); --fg:#fff; --bd:var(--teal-600);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.97rem; letter-spacing:.005em;
  padding:.82rem 1.4rem; border-radius: var(--r-sm); cursor:pointer;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }
.btn--primary{ --bg:var(--teal-700); --bd:var(--teal-700); }
.btn--primary:hover{ --bg:var(--teal-800); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2); }
.btn--ghost:hover{ --bd:var(--ink); }
.btn--on-ink{ --bg:#fff; --fg:var(--ink); --bd:#fff; }
.btn--on-ink.btn--ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.35); }
.btn--lg{ padding:1rem 1.7rem; font-size:1.02rem; }
.btn--sm{ padding:.6rem 1.05rem; font-size:.88rem; }
.btn .ar{ transition: transform .25s var(--ease); }
.btn:hover .ar{ transform: translateX(3px); }

/* ------------------------------- Header / Nav --------------------------- */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(251,250,246,.82);
  backdrop-filter: saturate(140%) blur(12px); border-bottom:1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease); }
.site-header.is-stuck{ border-color: var(--line); background:rgba(251,250,246,.94); }
.nav{ display:flex; align-items:center; gap: clamp(1rem,2.4vw,2.2rem);
  height:72px; }
.brand{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; color:var(--ink); line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:700; font-size:1.4rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; }
.brand__rule{ width:100%; height:2px; background:var(--teal-600); margin:.3rem 0; border-radius:2px;
  transition: background .2s var(--ease); }
.brand__sub{ font-family:var(--sans); font-weight:600; font-size:.55rem; text-transform:uppercase;
  letter-spacing:.215em; color:var(--ink-mute); white-space:nowrap; }
.brand:hover .brand__rule{ background:var(--teal-500); }
.site-footer .brand__name{ color:#fff; } .site-footer .brand__sub{ color:#8A958F; }
.nav__spacer{ flex:1; }
.nav__links{ display:flex; align-items:center; gap:.3rem; }
.nav__item{ position:relative; }
.nav__link{ display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .8rem;
  font-weight:500; font-size:.97rem; color:var(--ink-soft); border-radius: var(--r-sm);
  transition: color .18s var(--ease), background .18s var(--ease); cursor:pointer; }
.nav__link:hover, .nav__item.is-open .nav__link{ color:var(--ink); background:var(--paper-2); }
.nav__link[aria-current="page"]{ color:var(--teal-700); }
.nav__caret{ width:9px; height:9px; transition: transform .2s var(--ease); opacity:.7; }
.nav__item.is-open .nav__caret{ transform: rotate(180deg); }
.nav__actions{ display:flex; align-items:center; gap:.6rem; }

/* Mega menu */
.mega{ position:absolute; top:calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  min-width:min(620px,86vw); background:var(--white); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-5);
  opacity:0; visibility:hidden; pointer-events:none; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index:120; }
.nav__item.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.mega--left{ left:0; transform: translateX(0) translateY(6px); }
.nav__item.is-open .mega--left{ transform: translateX(0) translateY(0); }
.mega__grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-2) var(--s-5); }
.mega__col-title{ font-family:var(--sans); font-size:var(--fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-mute); padding:.4rem .6rem; }
.mega__link{ display:flex; gap:.7rem; padding:.6rem; border-radius: var(--r-sm);
  transition: background .15s var(--ease); }
.mega__link:hover{ background:var(--paper-2); }
.mega__ico{ width:34px;height:34px;flex:none; border-radius:8px; display:grid;place-items:center;
  background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100); }
.mega__ico svg{ width:17px;height:17px; }
.mega__t{ font-weight:600; font-size:.95rem; color:var(--ink); line-height:1.2; }
.mega__d{ font-size:var(--fs-xs); color:var(--ink-mute); margin-top:2px; }
.mega__foot{ margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; }
.mega__code{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--teal-700); }

.nav__toggle{ display:none; width:42px;height:42px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:transparent; cursor:pointer; place-items:center; }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; display:block; width:18px;height:2px;background:var(--ink); position:relative; transition:.2s var(--ease); }
.nav__toggle span::before{ position:absolute; top:-6px; } .nav__toggle span::after{ position:absolute; top:6px; }

/* ---------------------------------- Hero -------------------------------- */
.hero{ position:relative; padding-block: clamp(3.5rem,7vw,6.5rem) clamp(3rem,5vw,4.5rem); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(15,130,104,.11), transparent 70%),
    linear-gradient(180deg, rgba(244,241,232,.5), transparent 30%); }
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-weight:700; overflow-wrap:break-word; }
.br-lg{ display:inline; }
@media (max-width:600px){ .br-lg{ display:none; } }
.hero .lede{ margin-top: var(--s-5); max-width:54ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap: .9rem; margin-top: var(--s-6); }
.hero__meta{ margin-top: var(--s-6); display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; color:var(--ink-mute); font-size:var(--fs-sm); }

/* The signature process spine */
.spine{ margin-top: clamp(2.5rem,5vw,3.5rem); padding-top: var(--s-5); border-top:1px solid var(--line); }
.spine__label{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--ink-mute); letter-spacing:.04em; }
.spine__track{ margin-top:var(--s-4); display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.spine__node{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem;
  color:var(--ink-soft); padding:.4rem .2rem; }
.spine__dot{ width:9px;height:9px;border-radius:50%; background:var(--teal-500); flex:none;
  box-shadow:0 0 0 4px var(--teal-50); }
.spine__conn{ width:clamp(18px,4vw,46px); height:1px; background:var(--line-2); }

/* --------------------------------- Cards -------------------------------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease); position:relative; }
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--line-2); }
.card__ico{ width:46px;height:46px;border-radius:11px; display:grid;place-items:center;
  background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100); margin-bottom: var(--s-4); }
.card__ico svg{ width:22px;height:22px; }
.card h3{ font-size: var(--fs-h3); }
.card h4{ margin-bottom:.4rem; }
.card p{ font-size:var(--fs-sm); margin-top:.5rem; }
.card__foot{ margin-top: var(--s-5); }
.card--link:hover{ border-color: var(--teal-300); }
.card--feature{ display:flex; flex-direction:column; }
.card__tag{ position:absolute; top:var(--s-5); right:var(--s-5); font-family:var(--mono);
  font-size:var(--fs-xs); color:var(--teal-700); }

/* Solution card (image-led) */
.solcard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition: transform .25s var(--ease), box-shadow .3s var(--ease); }
.solcard:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); }
.solcard__top{ aspect-ratio: 16/10; background:linear-gradient(135deg,var(--teal-800),var(--teal-600));
  position:relative; color:#fff; padding:var(--s-5); display:flex; align-items:flex-end; }
.solcard__top::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0); background-size:18px 18px; }
.solcard__kicker{ position:relative; z-index:1; font-family:var(--serif); font-weight:700;
  font-size:2.4rem; line-height:1; opacity:.55; letter-spacing:-0.02em; }
.solcard__body{ padding: var(--s-6); }
.solcard__body h3{ font-size:1.5rem; }

/* ---------------------------- Process flow diagram ---------------------- */
.flow{ position:relative; }
.flow__scroll{ display:flex; gap:0; overflow-x:auto; padding-bottom:var(--s-4);
  scrollbar-width:thin; scroll-snap-type:x proximity; }
.flow__stage{ scroll-snap-align:start; flex:1 0 auto; min-width:160px; max-width:230px;
  position:relative; padding: var(--s-5) var(--s-4); border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); margin-right:34px;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease); }
.flow__stage:last-child{ margin-right:0; }
.flow__stage::after{ content:""; position:absolute; top:50%; right:-34px; width:34px; height:1px;
  background:var(--line-2); }
.flow__stage:last-child::after{ display:none; }
.flow__stage::before{ content:""; position:absolute; top:50%; transform:translate(0,-50%);
  width:7px;height:7px; border-top:1px solid var(--teal-500); border-right:1px solid var(--teal-500);
  rotate:45deg; right:-12px; }
.flow__stage:last-child::before{ display:none; }
.flow__stage:hover{ border-color:var(--teal-300); box-shadow:var(--shadow-1); transform:translateY(-2px); }
.flow__n{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--teal-700); }
.flow__stage h4{ font-family:var(--sans); font-weight:700; font-size:1rem; margin:.4rem 0 .3rem; }
.flow__stage p{ font-size:var(--fs-xs); color:var(--ink-mute); line-height:1.45; }
.flow__code{ font-family:var(--mono); font-size:.82rem; color:var(--ink-mute); letter-spacing:.02em;
  display:flex; flex-wrap:wrap; gap:.3rem; margin-top:var(--s-4); }
.flow__code b{ color:var(--teal-700); font-weight:500; }

/* --------------------------------- Stats -------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
.stat__n{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:700;
  line-height:1; letter-spacing:-0.02em; color:var(--teal-700); }
.section--ink .stat__n, .section--teal .stat__n{ color:#fff; }
.stat__l{ margin-top:.6rem; font-size:var(--fs-sm); color:var(--ink-mute); }
.section--ink .stat__l{ color:#9DAaA4; }

/* ------------------------------ Split feature --------------------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper-2); box-shadow:var(--shadow-1); }
.checklist{ display:grid; gap:.75rem; margin-top:var(--s-5); }
.checklist li{ display:flex; gap:.7rem; font-size:var(--fs-sm); color:var(--ink-soft); }
.checklist .ck{ width:20px;height:20px;flex:none; border-radius:50%; background:var(--teal-50);
  color:var(--teal-700); display:grid; place-items:center; border:1px solid var(--teal-100); margin-top:1px; }
.checklist .ck svg{ width:11px;height:11px; }

/* --------------------------- Participants (modules) --------------------- */
.participants{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--white);
  font-weight:600; font-size:.88rem; transition: border-color .2s var(--ease), color .2s; }
.chip:hover{ border-color:var(--teal-400); color:var(--teal-700); }
.chip__k{ font-family:var(--mono); font-size:.74rem; color:var(--teal-700); }
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .7rem; border-radius:var(--r-pill);
  background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-100);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; }

/* ----------------------------------- Tabs ------------------------------- */
.tabs__nav{ display:flex; gap:.4rem; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:var(--s-6); }
.tabs__btn{ padding:.7rem 1.1rem; font-weight:600; font-size:var(--fs-sm); color:var(--ink-mute);
  background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer; margin-bottom:-1px;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.tabs__btn:hover{ color:var(--ink); }
.tabs__btn.is-active{ color:var(--teal-700); border-color:var(--teal-600); }
.tabs__panel{ display:none; min-height:7.5rem; } .tabs__panel.is-active{ display:block; animation: fade-flat .35s var(--ease); }

/* -------------------------------- Accordion ----------------------------- */
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{ width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:1.3rem 0; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  font-family:var(--serif); font-size:1.18rem; color:var(--ink); }
.acc__sign{ width:22px;height:22px;flex:none; position:relative; }
.acc__sign::before,.acc__sign::after{ content:""; position:absolute; background:var(--teal-600); transition:.25s var(--ease); }
.acc__sign::before{ top:10px; left:3px; width:16px; height:2px; }
.acc__sign::after{ top:3px; left:10px; width:2px; height:16px; }
.acc__item.is-open .acc__sign::after{ transform:rotate(90deg); opacity:0; }
.acc__panel{ overflow:hidden; max-height:0; transition:max-height .35s var(--ease); }
.acc__panel p{ padding:0 0 1.3rem; font-size:var(--fs-sm); max-width:68ch; }

/* --------------------------------- Tables ------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); }
table.table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:600px; }
.table th,.table td{ text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); }
.table thead th{ font-family:var(--sans); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-mute); background:var(--paper-2); }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--paper); }
.table td .mono{ font-family:var(--mono); color:var(--teal-700); }

/* --------------------------------- CTA band ----------------------------- */
.cta-band{ position:relative; overflow:hidden; background:var(--ink); color:#fff; border-radius:var(--r-lg); padding: clamp(2.5rem,6vw,4.5rem); }
.cta-band::after{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background: radial-gradient(50% 80% at 85% 20%, rgba(15,130,104,.42), transparent 70%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; } .cta-band p{ color:#B6C2BC; max-width:52ch; }
.cta-band__actions{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:.9rem; }

/* ------------------------------- Breadcrumb ----------------------------- */
.crumbs{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-xs); color:var(--ink-mute); }
.crumbs a:hover{ color:var(--teal-700); }
.crumbs .sep{ opacity:.5; }

/* --------------------------------- Forms -------------------------------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--s-4); }
.field label{ font-size:var(--fs-sm); font-weight:600; }
.field label .req{ color:var(--teal-600); }
.input{ width:100%; padding:.8rem 1rem; background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus{ border-color:var(--teal-500); box-shadow: var(--ring); outline:none; }
textarea.input{ min-height:120px; resize:vertical; }

/* --------------------------------- Trust -------------------------------- */
.trust{ display:flex; flex-wrap:wrap; align-items:center; gap: clamp(1.5rem,4vw,3.5rem); }
.trust__logo{ font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink-mute);
  letter-spacing:-.01em; transition:color .2s; }
.trust__logo:hover{ color:var(--ink); }

/* ------------------------------ Quote / testimonial --------------------- */
.quote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.28;
  letter-spacing:-.01em; color:var(--ink); font-weight:400; }
.quote__by{ margin-top:var(--s-5); font-family:var(--sans); font-size:var(--fs-sm); color:var(--ink-mute); }
.quote__by b{ color:var(--ink); }

/* --------------------------------- Footer ------------------------------- */
.site-footer{ background:var(--ink); color:#B6C2BC; padding-block: clamp(3.5rem,6vw,5rem) var(--s-6); }
.site-footer a{ color:#B6C2BC; transition:color .18s var(--ease); }
.site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: var(--s-6); }
.footer__brand .brand{ color:#fff; }
.footer__brand p{ color:#8C9892; font-size:var(--fs-sm); margin-top:var(--s-4); max-width:32ch; }
.footer__col h5{ font-family:var(--sans); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.12em; color:#8A958F; margin-bottom:var(--s-4); font-weight:700; }
.footer__col li{ margin-bottom:.65rem; font-size:var(--fs-sm); }
.footer__bottom{ margin-top: var(--s-8); padding-top: var(--s-5); border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:var(--fs-xs); color:#8A958F; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; }
.footer__legal a{ font-size:var(--fs-xs); color:#8A958F; }
.footer__legal a:hover{ color:#fff; }
.footer__brand .brand__name{ color:#fff; }

/* --------------------------------- Reveal ------------------------------- */
/* Hidden-initial state is gated behind .js — without JS, content stays visible. */
.js [data-reveal]{ opacity:0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal-stagger] > *{ opacity:0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
[data-reveal-stagger].is-in > *{ opacity:1; transform:none; }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay:.03s; }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:.07s; }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:.11s; }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:.15s; }
[data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:.19s; }
[data-reveal-stagger].is-in > *:nth-child(6){ transition-delay:.23s; }
@keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes fade-flat{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-stagger]>*{ opacity:1!important; transform:none!important; transition:none!important; }
  .btn:hover,.card:hover,.solcard:hover{ transform:none; }
}

/* --------------------------------- Utilities ---------------------------- */
.mt-2{margin-top:var(--s-2)} .mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)} .mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0}
.flex{display:flex} .items-center{align-items:center} .gap-3{gap:var(--s-3)} .gap-4{gap:var(--s-4)}
.wrap{flex-wrap:wrap} .between{justify-content:space-between}
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:200; background:#fff; padding:.6rem 1rem; border-radius:var(--r-sm); box-shadow:var(--shadow-2); }

/* --------------------------------- Responsive --------------------------- */
@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .split{ grid-template-columns:1fr; } .split--reverse .split__media{ order:0; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .nav__links, .nav__actions .btn--ghost{ display:none; }
  .nav__toggle{ display:grid; }
  .cols-3,.cols-4,.cols-2{ grid-template-columns:1fr; }
  .mega__grid{ grid-template-columns:1fr; }
  /* Mobile nav drawer */
  .nav__links.is-open{ display:flex; position:fixed; inset:72px 0 0; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; padding:var(--s-5) var(--gutter);
    overflow-y:auto; border-top:1px solid var(--line); }
  .nav__links.is-open .nav__item{ border-bottom:1px solid var(--line); }
  .nav__links.is-open .nav__link{ padding:1rem .2rem; font-size:1.1rem; }
  .nav__links.is-open .mega{ position:static; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; box-shadow:none; border:0; padding:.2rem 0 1rem; min-width:0; background:transparent; }
  .nav__links.is-open .mega__grid{ gap:0; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; gap:var(--s-5); }
  .hero__cta .btn{ width:100%; }
  /* Keep a compact demo CTA in the sticky header so the conversion path persists. */
  .nav__actions .btn--primary{ display:inline-flex; padding:.55rem .9rem; font-size:.85rem; }
}