/* =========================================================
   Ormi Labs — design tokens
   Values transcribed from the Figma 1920 desktop frame.
   ========================================================= */
:root{
  /* colour */
  --bg:#FAFAFA;
  --ink:#0A0A0A;
  --ink-2:#525252;
  --mute:#7E8181;
  --mute-2:#B2B3B3;
  --line:#E3E3E3;
  --card:#FFFFFF;
  --surface:#F2F2F2;
  --panel:#1D1D1D;
  --panel-line:rgba(227,227,227,.07);
  --green:#418354;
  --green-1:#66AD7A;
  --green-2:#478558;
  --green-3:#3D6B49;
  --green-4:#32583D;
  --tag:#EFF8F1;

  /* gradients */
  --grad-green:linear-gradient(180deg,#66AD7A -18.75%,#478558 100%);
  --grad-dark:linear-gradient(180deg,#2B2B2B -0.89%,#0A0A0A 100%);
  --grad-grey:linear-gradient(180deg,#FCFCFC 0%,#F4F4F4 100%);
  --grad-num:linear-gradient(181.84deg,#525252 21.45%,#0A0A0A 98.45%);
  --grad-img:linear-gradient(180deg,#7CAC89 0%,#4A895C 100%);

  /* shadow */
  --sh-btn:0 4px 4px rgba(0,0,0,.25);
  --sh-btn-grey:0 4px 4px rgba(204,204,204,.25);
  --sh-modal:0 2px 40px -2px rgba(131,131,131,.08);

  /* radius */
  --r-card:24px;
  --r-panel:20px;
  --r-nav:16px;
  --r-btn:12px;
  --r-pill:32px;

  /* layout */
  --max:1200px;
  --gutter:clamp(20px,12.08vw,232px);
  --nav-gutter:clamp(20px,9.58vw,184px);
  --section-gap:140px;

  --font:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Shared rhythm: all component gaps resolve to this four-pixel scale. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
}

/* =========================================================
   Base
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  font-weight:var(--weight-regular);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:48px;
}

/* The UA rule for [hidden] is display:none, but ANY author `display`
   declaration outranks it. Several components below set display, so
   without this the hidden attribute silently stops working on them. */
[hidden]{display:none !important}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:100;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;
}
.skip-link:focus{left:16px}

:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* =========================================================
   Type scale
   ========================================================= */
h1{
  font-size:clamp(2.25rem, 1.5rem + 1.39vw, 3.25rem);
  font-weight:var(--weight-semibold);line-height:1.35;letter-spacing:-.02em;
}
.h-lg{font-size:clamp(1.75rem, 1.5rem + 0.69vw, 2.625rem);font-weight:var(--weight-semibold);line-height:1.35;letter-spacing:-.02em}
.h-lg-38{font-size:clamp(1.625rem, 1.45rem + 0.52vw, 2.375rem);font-weight:var(--weight-semibold);line-height:1.35;letter-spacing:-.02em}
.h-md{font-size:clamp(1.375rem, 1.25rem + 0.42vw, 2rem);font-weight:var(--weight-semibold);line-height:1.35}
.lede{font-size:clamp(1rem, 0.9rem + 0.35vw, 1.25rem);line-height:1.5}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:48px;padding:0 16px;border-radius:var(--r-btn);
  font-size:16px;font-weight:var(--weight-medium);line-height:1;
  border:1px solid transparent;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  white-space:nowrap;
}
/* Icons passed to button() are inline <svg> with a viewBox and no intrinsic
   size, so without this they fall back to the SVG default of 300x150 and blow
   the button apart. The chevron stack has its own sizing. */
.btn > svg:not(.chev){width:16px;height:16px;flex:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(0);filter:brightness(.97)}

.btn-green{background:var(--grad-green);border-color:var(--green);color:#FAFAFA;box-shadow:var(--sh-btn)}
.btn-dark{background:var(--grad-dark);border-color:#383838;color:#FAFAFA;box-shadow:var(--sh-btn)}
.btn-grey{background:var(--grad-grey);border-color:var(--surface);color:var(--ink);box-shadow:var(--sh-btn-grey)}

.btn.lg{height:56px;padding:0 20px}
.btn.sm{height:40px;padding:0 12px;font-size:14px;border-radius:10px;gap:8px}
.btn.sm .ico{width:16px;height:16px;color:var(--mute-2)}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 8px;border-radius:var(--r-btn);
  font-size:16px;font-weight:500;color:var(--ink);
}
.btn-ghost:hover{background:rgba(10,10,10,.04)}
.btn-ghost .ico{width:16px;height:16px}

/* animated triple chevron */
.chev-stack{display:inline-flex;align-items:center;width:36px;flex:none}
.chev-stack svg{width:16px;height:16px;margin:0 -6px;color:#fff}
.chev-stack svg:nth-child(1){opacity:.3}
.chev-stack svg:nth-child(2){opacity:.6}
.chev-stack svg:nth-child(3){opacity:.85}
.chev-stack.flip{transform:rotate(180deg)}
.btn:hover .chev-stack svg{animation:chevPulse .9s ease-in-out infinite}
.btn:hover .chev-stack svg:nth-child(2){animation-delay:.1s}
.btn:hover .chev-stack svg:nth-child(3){animation-delay:.2s}
@keyframes chevPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* pill tag */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  height:20px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--tag);font-size:14px;color:var(--ink);
}
/* Scoped to anchors: a span.tag is a label, not a target, so it must not
   light up under the cursor. */
a.tag:hover{background:#E2F2E7}

/* =========================================================
   Placeholders — swap for Figma exports (see ASSETS.md)
   ========================================================= */
.ph-img,.ph-logo{
  position:relative;
  background:
    repeating-linear-gradient(45deg,rgba(10,10,10,.025) 0 8px,transparent 8px 16px),
    var(--surface);
  border:1px dashed #CFCFCF;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph-img::after,.ph-logo::after{
  content:attr(data-ph);
  font-size:12px;font-weight:500;letter-spacing:.02em;
  color:#9A9A9A;text-align:center;padding:8px;
}
.ph-logo{width:150px;height:40px}
.ph-logo.sm{width:100px;height:34px}

/* =========================================================
   Navbar
   ========================================================= */
.navbar-container{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:8px var(--nav-gutter) 0;
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  max-width:var(--max);margin:0 auto;height:58px;
  padding:8px 8px 8px 16px;
  background:rgba(250,250,250,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--r-nav);
}
.nav-logo{flex:none;color:var(--ink);display:flex;align-items:center}
.nav-logo svg,.nav-logo img{width:93px;height:32px;display:block}

.nav-tabs{display:flex;align-items:center;gap:24px;list-style:none}
.nav-tab{
  display:inline-flex;align-items:center;gap:4px;
  font-size:16px;font-weight:500;line-height:1;color:var(--mute);
  white-space:nowrap;
  transition:color .15s ease;
}
.nav-tab:hover{color:var(--ink)}
.nav-tab .chev{width:20px;height:20px;transition:transform .2s ease}
.nav-tab:hover .chev{transform:translateY(2px)}

.nav-actions{display:flex;align-items:center;gap:16px;flex:none}

.nav-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* open tab turns green, chevron flips */
.nav-tab[aria-expanded="true"]{color:var(--green)}
.nav-tab[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* =========================================================
   Mega menus
   ========================================================= */
.nav-panels{position:relative;max-width:var(--max);margin:0 auto}

.nav-panel{
  position:absolute;top:10px;z-index:60;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-nav);
  box-shadow:0 12px 40px -8px rgba(10,10,10,.12);
  padding:16px;
  animation:panelIn .16s ease both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* narrow panels are centred under their tab.
   main.js overwrites --x with the tab's centre on open. */
.nav-panel:not(.wide){
  --x:50%;
  left:var(--x);
  transform:translateX(-50%);
  width:min(740px,calc(100vw - 2 * var(--nav-gutter)));
  animation-name:panelInCentred;
}
@keyframes panelInCentred{
  from{opacity:0;transform:translateX(-50%) translateY(-6px)}
  to{opacity:1;transform:translateX(-50%)}
}

/* Keep wide menus inside the shared site canvas. */
.nav-panel.wide{
  left:50%;right:auto;
  width:min(var(--max),calc(100vw - 32px));
  transform:translateX(-50%);
  animation-name:panelInCentred;
}

.panel-grid{display:grid;gap:40px}
.panel-grid.platform{grid-template-columns:386px 1fr 1fr}
.panel-grid.developers{grid-template-columns:400px 1fr 1fr}
.panel-grid.split-menu{grid-template-columns:1fr 330px}

/* link columns */
.panel-col{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.panel-col h3{
  font-size:15px;font-weight:400;color:#9A9A9A;margin-bottom:12px;
}
.panel-col > a{
  font-size:16px;color:var(--ink);width:fit-content;
  transition:color .15s ease;
}
.panel-col > a:hover{color:var(--green)}

/* icon + title + description rows */
.panel-rich{display:flex;gap:16px;align-items:flex-start}
.rich-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
}
.rich-icon svg{width:20px;height:20px}
.nav-rich-icon{width:45px;height:44px;flex:none;object-fit:contain}
.rich-text{display:flex;flex-direction:column;gap:4px}
.rich-text strong{font-size:16px;font-weight:500;color:var(--ink)}
.rich-text span{font-size:14px;line-height:1.45;color:var(--mute)}
.panel-rich:hover .rich-text strong{color:var(--green)}

/* featured promo card */
.promo{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-btn);
  overflow:hidden;background:var(--card);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.promo:hover{border-color:#D4D4D4;box-shadow:0 6px 20px -8px rgba(10,10,10,.12)}
.promo-img{
  display:block;width:100%;height:210px;flex:none;
  border:0;border-radius:0;
  background:
    linear-gradient(0deg,rgba(0,0,0,.02),rgba(0,0,0,.02)),
    repeating-linear-gradient(0deg,rgba(10,10,10,.05) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,rgba(10,10,10,.05) 0 1px,transparent 1px 28px),
    var(--surface);
}

.promo-img:not(.ph-img){object-fit:cover}
.promo-body{display:flex;flex-direction:column;gap:8px;padding:16px}
.promo-title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.promo-desc{font-size:15px;line-height:1.45;color:var(--mute)}
.promo-body .btn{margin-top:8px;align-self:flex-start}

.split-menu .promo-img{height:180px}

/* =========================================================
   Mobile menu
   ========================================================= */
/* second guard: the drawer belongs to the burger, which only exists
   below 1025px. Never render it on desktop, whatever its hidden state. */
@media (min-width:1025px){
  .mobile-menu{display:none !important}
}

.mobile-menu{
  max-width:var(--max);margin:8px auto 0;padding:16px;
  display:flex;flex-direction:column;gap:20px;
  max-height:calc(100vh - 90px);overflow-y:auto;
  background:rgba(250,250,250,.98);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--r-nav);
}
.mm-group{display:flex;flex-direction:column;gap:2px}
.mm-group h3{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mute);padding:0 8px 6px;
}
.mobile-menu a{padding:10px 8px;font-size:16px;font-weight:500;border-radius:8px}
.mobile-menu a:hover{background:rgba(10,10,10,.04)}
.mm-solo{font-size:16px;font-weight:600 !important}
.mobile-menu-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.mobile-menu-actions .btn{width:100%}

/* =========================================================
   Content shell
   ========================================================= */
.content{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--section-gap);
  /* --page-top is set per page on <main>; the production site uses
     180px on most pages, 200 on home, 240 on pricing, 140 on contact. */
  padding:var(--page-top, 180px) var(--gutter) var(--page-bottom, 100px);
}
.content > section{width:100%;max-width:var(--max)}

/* =========================================================
   Full-bleed escape hatch

   `.content > section{max-width:var(--max)}` has specificity (0,1,1).
   A bare `.red-band{max-width:100vw}` is (0,1,0) and loses — the element
   stays 1456px and only the margins apply, so it shifts instead of growing.
   Any full-width band must be selected as a CHILD of .content to outrank it.

   calc(50% - 50vw) is measured against the viewport, not the container, so
   this holds at any monitor width — 1440, 1920, 2560, ultrawide.
   ========================================================= */
.content > .full-bleed{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}

/* Sections narrower than the default column need the same treatment for the
   same reason — a bare `.foo{max-width:850px}` is (0,1,0) and loses. */
.content > .narrow{max-width:850px;margin-inline:auto}


/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:100px;overflow:visible;}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;position:relative;z-index:2}
.hero-copy h1{max-width:840px}
.hero-copy .lede{max-width:791px}
.hero-buttons{display:flex;gap:16px;margin-top:8px}
.hero-buttons .btn{min-width:194px}

/* Single decorative object, left edge — assets/hero/orb-left.webp.
   Reference site positions it at left:-30px / top:144px against a full-width
   wrapper. Our .hero is inset by --gutter, so the gutter is cancelled first;
   top is rebased because the reference measures from the banner wrapper
   (h1 at 200px) while we measure from .hero (h1 at 100px). Same 56px gap.
   Blur is baked into the PNG — do not add a CSS filter. */
/* Two independent source layers: their crop is constrained by the viewport,
   never by the content column or migration grid. */
.hero-art{position:absolute;z-index:1;display:block;pointer-events:none;user-select:none}
.hero-art-left{width:clamp(220px,23.3vw,298px);height:auto;left:calc(50% - 50vw);top:-92px}
.hero-art-right{width:clamp(360px,39vw,500px);height:auto;right:calc(50% - 50vw);top:228px}

/* ---------- migration grid ---------- */
.migrations{
  display:grid;grid-template-columns:repeat(3,1fr);
  width:100%;position:relative;z-index:2;
}
.mig-group{position:relative;padding:38px 24px 24px;border:2px solid var(--line)}
.mig-group + .mig-group{border-left-width:1px}
.mig-group:not(:last-child){border-right-width:1px}

.mig-head{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 16px;white-space:nowrap;
}
.mig-head h2{font-size:20px;font-weight:600;line-height:1.35}

.mig-body{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;justify-items:center}
.mig-cell{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:125px}
/* Anchor for the hover card. Only cells that have one get positioning, so the
   rest stay untouched. */
.mig-cell.has-quote{position:relative;cursor:pointer}

/* ---------- case-study hover card ----------
   Class is `case-tip`, not `quote-card`: that name is already taken by the
   why-ormi pull-quote block further down this file, and because that rule
   comes later its `width:100%` won, collapsing this card to the width of its
   grid column.

   Appears above the logo on hover. pointer-events:none is load-bearing: the
   card overlaps the logo it belongs to, and without it the card would sit
   between the cursor and the "Case study" link, so moving toward the link
   would dismiss the card and swallow the click. */
.case-tip{
  position:absolute;left:50%;bottom:calc(100% + 16px);
  transform:translateX(-50%) translateY(4px);
  width:400px;max-width:min(400px, calc(100vw - 32px));
  background:var(--card);border-radius:24px;padding:24px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  text-align:left;z-index:50;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.mig-cell.has-quote:hover .case-tip,
.mig-cell.has-quote:focus-within .case-tip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .case-tip{transition:none}
}

.ct-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ct-logo{width:128px;height:36px;object-fit:contain;flex:none}
.ct-tags{display:flex;gap:8px;font-size:14px;color:var(--ink)}
.ct-tag{background:#F3F3F3;padding:4px 8px;border-radius:16px;white-space:nowrap}
.ct-quote{font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:16px}
.ct-by{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}
.ct-role{font-weight:600;color:var(--ink)}
.ct-author{color:var(--mute)}
/* Rotated square poking out of the bottom edge, same fill as the card. */
.ct-arrow{
  position:absolute;left:50%;bottom:-8px;
  width:16px;height:16px;background:var(--card);
  transform:translateX(-50%) rotate(45deg);
}
/* hook for the real logo: keeps every mark on the same optical baseline */
/* A restrained mark size keeps the proof strip light within the narrower
   shared canvas while preserving a consistent optical baseline. */
.mig-logo{width:auto;max-width:125px;height:32px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:opacity .15s ease,filter .15s ease}
/* Aura was replaced by Balancer in this grid; balancer.svg needs no nudge —
   its ink lands 124x23.5, mid-pack against the other marks. */
.mig-logo[data-logo="noks"]{transform:scale(.78)}
.mig-logo[data-logo="solv"]{transform:scale(.82)}
.mig-cell:hover .mig-logo{filter:none;opacity:1}

/* =========================================================
   Stats
   ========================================================= */
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}
.stat{display:flex;flex-direction:column;align-items:center;gap:8px;width:204px;text-align:center}
.stat-pre{font-size:18px;color:var(--ink)}
.stat-num{
  font-size:38px;font-weight:600;line-height:1.35;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--grad-num);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.stat-post{font-size:18px;color:var(--mute)}

/* =========================================================
   Centred text band
   ========================================================= */
.band{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.band-center{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;width:100%}
.band .h-lg,.band-center .h-lg{max-width:880px}
.band-sub{font-size:18px;max-width:880px}
.band .btn{margin-top:8px}

/* =========================================================
   Product cards
   ========================================================= */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product-img .inner::after{color:rgba(255,255,255,.9)}
.product-text{display:flex;flex-direction:column;gap:8px}
.product-text h3{font-size:22px;font-weight:600;line-height:1}
.product-text p{font-size:18px}

/* =========================================================
   Testimonial
   ========================================================= */
.testimonial{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:start;padding-block:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testimonial-intro{display:flex;flex-direction:column;align-items:flex-start}
.testimonial-eyebrow{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.testimonial-logo{height:32px;width:auto;object-fit:contain;margin:0 0 28px}
.testimonial h2{max-width:560px;margin:0;text-align:left}
.testimonial-proof{padding-left:clamp(0px,4vw,56px);border-left:1px solid var(--line)}
.testimonial blockquote{max-width:720px;margin:0;font-size:22px;font-weight:400;line-height:1.5;text-align:left;color:var(--ink-2)}
.testimonial blockquote span{color:var(--green);font-size:1.35em;font-weight:600;line-height:0;vertical-align:-.15em}
.testimonial-attribution{display:flex;flex-direction:column;gap:2px;margin-top:28px;color:var(--mute)}
.testimonial-attribution span:first-child{font-size:16px;font-weight:600;color:var(--ink)}
.testimonial-attribution span:last-child{font-size:15px}
.testimonial .attribution{margin-top:28px;font-size:16px;color:var(--mute)}
.testimonial-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:16px;font-weight:600;color:var(--green);transition:gap .2s ease,color .2s ease}
.testimonial-link:hover{gap:12px;color:#3D6B49}
@media (max-width:768px){.testimonial{grid-template-columns:1fr;gap:32px;padding-block:48px}.testimonial-proof{padding-left:0;border-left:0}.testimonial h2{max-width:100%}.testimonial blockquote{font-size:19px}}

/* =========================================================
   Feature cards
   ========================================================= */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{
  display:flex;flex-direction:column;gap:16px;
  padding:24px;background:var(--card);border-radius:var(--r-card);
}
.feature-img{width:100%;height:273px;object-fit:contain;border-radius:20px;background:var(--bg)}
.feature-text{display:flex;flex-direction:column;gap:8px}
.feature-text h3{font-size:20px;font-weight:600;line-height:1.35}
.feature-text p{font-size:16px}

/* =========================================================
   Split sections (layers diagram / status panel)
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.split.data-stack-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split-text{display:flex;flex-direction:column;gap:24px}
.split-text p{font-size:20px}
.split-buttons{display:flex;gap:16px;margin-top:8px}
.split-media{min-height:600px;border-radius:var(--r-card)}
.split-media.tall{min-height:700px}

/* ---------- status panel ---------- */

.toggle::after{
  content:"";position:absolute;top:2px;right:3px;width:45px;height:31px;border-radius:21px;
  background:linear-gradient(268.36deg,#141616 1.06%,#222 98.6%);
  box-shadow:inset .75px 0 1.29px rgba(68,139,86,.44),0 2px 3px rgba(0,0,0,.5);
}

.status-icon svg{width:24px;height:24px}
.status-card h3{font-size:18px;font-weight:600;color:#E0E0E0}

.bars i{width:4px;height:24px;border-radius:1px;background:var(--green-1);flex:none}
.bars i.f1{background:var(--green-2)}
.bars i.f2{background:var(--green-3)}
.bars i.f3{background:var(--green-4)}

/* =========================================================
   Chains grid
   ========================================================= */
/* full-bleed: cancels the .content gutter. Selector is scoped to
   .content > so it outranks `.content > section{max-width:1456px}`. */
.content > .chains{position:relative;display:flex;justify-content:center;width:100%}

/* ---------- chain grid ----------
   A fixed rows x cols grid of tiles with logos pinned to named cells. The
   logos sit in a second grid layered exactly over the first, so a logo lines
   up with its tile without either knowing about the other.

   At rest each logo is pushed out from the centre by --ox/--oy (computed at
   build time, one pair per logo) and blurred. Hovering any tile settles that
   row and its neighbours back onto their tiles. */
.chain-grid-wrap{position:relative;display:inline-block;max-width:100%}

.chain-tiles,
.chain-logos{
  display:grid;
  grid-template-columns:repeat(var(--cols), var(--tile));
  grid-auto-rows:var(--tile);
  gap:var(--gap);
}
.chain-logos{position:absolute;inset:0;pointer-events:none;z-index:2}

/* One tile size drives both grids, so they can never drift apart. */
.chain-grid-wrap{--tile:74px}
.chain-tile{
  width:var(--tile);height:var(--tile);border-radius:12px;background:#F2F2F2;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.04);
}
.chain-tile.is-edge{background:#F8F8F8}

.chain-logo{
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(var(--ox), var(--oy), 0);
  filter:blur(var(--blur));
  transition:transform var(--dur) var(--ease), filter var(--dur);
}
.chain-logo img{width:var(--tile);height:var(--tile);max-width:none;display:block}

/* Settled: the hovered row and its neighbours return to their tiles. main.js
   sets --hover on the wrapper; the comparison is done in CSS so there is no
   per-element class churn on every pointer move. */
.chain-grid-wrap[data-hover] .chain-logo.is-near{
  transform:translate3d(0,0,0);
  filter:blur(0);
}

.chains-overlay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
/* The page-coloured plate that punches a hole in the tile field goes on a
   single wrapper. Putting it on the heading and the button separately meant
   the button's own background was overwritten with the page colour — and
   since it carries near-white text, it vanished entirely. */
.chains-overlay-inner{
  pointer-events:auto;background:var(--bg);
  padding:33px 45px;text-align:center;
}
.chains-overlay h2{margin:0 0 16px;font-weight:600;color:var(--ink)}

/* Flat black, matching the source. Not --grad-dark, which the shared
   .btn-dark uses. */
.btn-chains{
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:46px;border-radius:12px;
  background:var(--ink);color:#fff;font-weight:500;line-height:1.5;
  transition:background .3s ease;
}
.btn-chains:hover{background:#282828}

@media (prefers-reduced-motion:reduce){
  .chain-logo{transition:none}
}

/* Below 1200 the tiles step down; below 768 the grid is rebuilt by main.js at
   6 columns with the logos unspread, matching the source's mobile branch. */
@media (max-width:1680px){ .chain-grid-wrap{--tile:64px} }
@media (max-width:1440px){ .chain-grid-wrap{--tile:54px} }
@media (max-width:1200px){ .chain-grid-wrap{--tile:44px} }
@media (max-width:1024px){ .chain-grid-wrap{--tile:34px} }
@media (max-width:768px){
  .chain-grid-wrap{--tile:55px}
  .chain-logo{transform:none;filter:none}
}

/* =========================================================
   Case studies
   ========================================================= */
.cases{display:flex;flex-direction:column;align-items:center;gap:60px}
.case-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.case-card{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-card);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--sh-modal)}
/* Layers are absolutely positioned, so the cover reserves height itself.
   Ratio comes from the base artwork upstream (case-img2.svg, 286x226). */
.case-cover{position:relative;aspect-ratio:286/226;overflow:hidden;background:#F0F0F0;border-radius:0;border:0}
.case-cover::after{content:none}
.case-logos{
  display:flex;align-items:center;gap:12px;
  padding:20px;background:rgba(255,255,255,.5);border-radius:14px;
}
.case-logos .x{font-size:18px;color:#070707}
.case-body{display:flex;flex-direction:column;justify-content:space-between;gap:16px;flex:1;padding:16px 24px}
.case-body h3{font-size:20px;font-weight:600;line-height:1.35}
.case-body .btn{align-self:flex-start}

/* =========================================================
   FAQ
   ========================================================= */
.faq{position:relative;display:flex;flex-direction:column;align-items:center;gap:60px;overflow:visible}
.faq > h2,.faq-list{position:relative;z-index:1}
.faq-list{display:flex;flex-direction:column;gap:16px;width:100%}
.faq-art{
  position:absolute;z-index:0;display:block;pointer-events:none;user-select:none;
  width:clamp(150px,12vw,230px);height:auto;
  top:24px;right:calc(50% - 50vw + 16px);
}

.accordion{background:var(--card);border-radius:var(--r-btn);overflow:hidden}
.accordion summary{
  display:flex;align-items:center;gap:24px;
  padding:16px 32px;cursor:pointer;list-style:none;
}
.accordion summary::-webkit-details-marker{display:none}
.acc-q{font-size:20px;font-weight:600;line-height:1.35}
.acc-icon{position:relative;width:24px;height:24px;flex:none}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.acc-icon::before{left:5px;right:5px;top:11px;height:1.75px}
.acc-icon::after{top:5px;bottom:5px;left:11px;width:1.75px}
.accordion[open] .acc-icon::after{transform:scaleY(0);opacity:0}

.acc-a{padding:0 32px 20px 80px;display:flex;flex-direction:column;gap:10px}
.acc-a p{font-size:18px}

/* =========================================================
   Investors
   ========================================================= */
.investors{display:flex;flex-direction:column;align-items:center;gap:60px}
/* The logo row is a marquee; it brings its own 870px cap and centring, so it
   must not inherit the 24px bottom margin the other two instances use. */
.investors .marquee{margin:0 auto}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--ink);color:#fff;width:100%}
.footer-inner{width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto}

/* top block carries a soft light source at the top-left */
.footer-cta{
  padding:80px 0;
  background:
    radial-gradient(90% 130% at 12% -20%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.06) 32%,
      rgba(255,255,255,.015) 58%,
    transparent 82%),
    var(--ink);
}
.footer-cta-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:64px}
.footer-cta-text{display:flex;flex-direction:column;gap:20px;max-width:640px}
.footer-cta-text h2{font-size:38px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.footer-cta-text h2 .accent{color:var(--green-1)}
.footer-cta-text p{font-size:19px;line-height:1.6;color:#D4D4D4;max-width:600px}
.footer-cta-action{flex:none;padding-top:4px}

.signup-form{
  display:flex;align-items:center;gap:8px;
  padding:2px 8px 2px 16px;height:56px;
  background:rgba(22,22,22,.3);border:.5px solid #474747;border-radius:8px;
}
.signup-form input{
  flex:1;min-width:0;background:none;border:0;color:#fff;font-size:18px;font-weight:300;
}
.signup-form input::placeholder{color:var(--mute-2)}
.signup-form input:focus{outline:none}
.signup-form button{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;background:#509563;border-radius:4px;color:#FAFAFA;
  transition:background .15s ease;
}
.signup-form button:hover{background:#5FA872}
.signup-form button svg{width:24px;height:24px}
.signup-note{font-size:14px;color:#D4D4D4}
.signup-status{margin-top:12px;font-size:14px;line-height:1.5}
.signup-status.ok{color:#8ED4A0}
.signup-status.err{color:#F2A0A0}
/* The Brevo form and its target iframe are transport only — never visible,
   never focusable. `hidden` on the wrapper covers non-CSS cases too. */
.sib-host{display:none}

.footer-links{
  display:grid;
  grid-template-columns:minmax(220px,1fr) repeat(5,auto);
  gap:48px;align-items:start;
  padding:64px 0 40px;
}
.footer-brand{display:flex;flex-direction:column;gap:36px}
.footer-logo{color:#fff;display:flex;align-items:center}
.footer-logo svg,.footer-logo img{width:93px;height:32px;display:block}
.socials{display:flex;align-items:center;gap:12px}
.socials a{color:#fff;opacity:.92;transition:opacity .15s ease,transform .15s ease}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.socials svg{width:24px;height:24px}

.footer-col{display:flex;flex-direction:column;gap:12px;min-width:130px}
.footer-col h3{
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:#fff;margin-bottom:6px;
}
.footer-col a{font-size:15px;color:var(--mute-2);transition:color .15s ease}
.footer-col a:hover{color:#fff}

.footer-legal{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 0 32px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-legal p{font-size:14px;color:#fff}

/* =========================================================
   Responsive — 1440
   ========================================================= */
@media (max-width:1440px){
  :root{--section-gap:120px}
  h1{font-size:46px}
  .h-lg{font-size:38px}
  .h-lg-38{font-size:34px}
  .split{gap:64px}
}

/* =========================================================
   Responsive — 1200
   ========================================================= */
@media (max-width:1200px){
  .nav-tabs{gap:16px}
  .nav-tab{font-size:15px}
  .migrations{grid-template-columns:1fr;gap:0}
  .mig-group + .mig-group{border-left-width:2px;border-top-width:1px}
  .mig-group:not(:last-child){border-right-width:2px;border-bottom-width:1px}
  .features{grid-template-columns:1fr;max-width:760px;margin:0 auto}
  .case-cards{grid-template-columns:1fr;max-width:760px;margin:0 auto}

  .panel-grid{gap:28px}
  .panel-grid.platform{grid-template-columns:320px 1fr 1fr}
  .panel-grid.developers{grid-template-columns:320px 1fr 1fr}

  .footer-links{grid-template-columns:repeat(3,1fr);gap:40px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:1320px) and (min-width:1025px){
  .navbar{gap:24px}
  .nav-tabs{gap:16px}
  .nav-tab{font-size:15px}
  .nav-actions{gap:12px}
}

/* =========================================================
   Responsive — 1024 (tablet)
   ========================================================= */
@media (max-width:1024px){
  :root{--section-gap:100px}
  .nav-tabs,.nav-actions,.nav-panels{display:none}
  .nav-burger{display:flex}
  .navbar{justify-content:space-between;gap:16px}
  .footer-cta-inner{flex-direction:column;gap:32px}
  .footer-cta-action{padding-top:0}

  h1{font-size:40px}
  .h-lg{font-size:34px}
  .h-md{font-size:28px}

  .hero{gap:72px}

  .products{grid-template-columns:1fr}
  .split,.split.data-stack-split{grid-template-columns:1fr;gap:48px}
  .split-media{min-height:420px}
  .split-media.tall{min-height:480px}
  .data-stack-split .data-layer-anim{transform:none}
  .split-reverse     
  .stats{gap:32px}
  .footer-cta-inner{gap:48px}
  .footer-links{gap:40px}
}

/* =========================================================
   Responsive — 768 (mobile)
   ========================================================= */
@media (max-width:768px){
  /* Source uses 100px on most pages, 114px on pricing and the chain list. */
  .content{--page-top:100px !important;padding-bottom:60px}
  :root{--section-gap:80px;--r-card:20px}
  body{padding-top:40px}
  .navbar-container{padding-top:6px}

  /* Reference site hides the hero object at 768, not 1024. */
  .hero-art{display:none}
  .faq-art{display:none}

  h1{font-size:32px}
  .h-lg{font-size:28px}
  .h-lg-38{font-size:26px}
  .h-md{font-size:24px}
  .lede,.band-sub,.split-text p,.acc-a p{font-size:16px}

  .content{padding:56px var(--gutter)}
  .hero{gap:56px}
  .hero-buttons{flex-direction:column;width:100%}
  .hero-buttons .btn{width:100%}

  .mig-body{gap:28px 16px}
  .mig-cell{min-width:0}
  /* Upstream hides the card below 768px — there is no hover to trigger it. */
  .case-tip{display:none}
  .ph-logo{width:100%;max-width:150px}

  .stats{gap:28px}
  .stat{width:100%;max-width:280px}
  .stat-num{font-size:32px}

  .product-card,.feature-card{padding:16px}
  .feature-img{height:200px}
  .product-text h3{font-size:20px}
  .product-text p,.feature-text p{font-size:16px}

        .toggle::after{width:36px;height:24px}

  .chains-overlay-inner{padding:16px 20px}

  .accordion summary{padding:16px;gap:16px}
  .acc-q{font-size:17px}
  .acc-a{padding:0 16px 16px 56px}

  
  .footer-cta{padding:56px 0}
  .footer-cta-text h2{font-size:28px}
  .footer-cta-text p{font-size:17px}
  .footer-cta-action .btn{width:100%}

  .footer-links{padding:48px 0 32px;grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-legal{flex-direction:column;gap:12px;align-items:flex-start;text-align:left}
}

/* =========================================================
   Motion preferences
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* =========================================================
   Pricing page

   Rebuilt from src/pages/Pricing.tsx on origin/main. Every price, feature
   line and table value is transcribed — do not invent.

   The previous version of this block described a Community/Developer/
   Enterprise lineup taken from an abandoned branch. That has not been the
   live pricing page for a long time.
   ========================================================= */

/* The page background is a touch darker than the site default so the white
   panels read as raised. Set per page via --page-bg on <main>. */
.content{background:var(--page-bg, transparent)}

/* `.content > section` is (0,1,1); a bare class is (0,1,0) and loses, so the
   width cap has to be written as a child selector to take effect. */
.content > .pricing-section{max-width:var(--max)}
/* Structural pricing rows share the same outer grid as the footer. Text inside
   each plan remains left-aligned and constrained by the card padding. */
.content > .price-grid-wrap{max-width:var(--max)}
.content > .price-hero{max-width:870px}
.content > .price-panels{max-width:var(--max)}

.price-hero{text-align:center;padding-bottom:48px}
.price-hero h1{margin-bottom:24px}
.price-hero .lede{
  max-width:768px;margin:0 auto 8px;
  font-size:20px;line-height:1.6;color:var(--ink-2);
}

/* ---------- plan cards ---------- */
.price-grid-wrap{padding-bottom:24px}
/* auto-fit rather than a fixed four-up: below ~1140px the cards wrap to two
   and then one, which is what the source does. */
.price-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  align-items:stretch;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border-radius:16px;
  padding:28px 24px 24px;text-align:left;
  border:2px solid var(--card);
}
.price-card.is-featured{border-color:#509563}

/* The ribbon is a rotated bar clipped by a 120px square in the corner. */
.pc-ribbon{
  position:absolute;top:0;right:0;width:120px;height:120px;
  overflow:hidden;pointer-events:none;border-radius:0 14px 0 0;
}
.pc-ribbon span{
  position:absolute;top:14px;right:-30px;transform:rotate(45deg);
  background:#509563;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 32px;text-align:center;
}

.pc-plan{font-size:24px;font-weight:400;line-height:1.5;color:var(--ink);margin-bottom:4px}
.pc-price{display:flex;align-items:flex-end;gap:4px;margin-bottom:4px}
.pc-amount{font-size:40px;font-weight:400;line-height:40px;letter-spacing:-1.5px;color:#1A1917}
.pc-suffix{font-size:16px;font-weight:400;color:var(--ink)}
.pc-sub{font-size:13px;line-height:1.5;color:#6B6860;margin-bottom:16px}

.pc-cta{
  display:block;text-align:center;padding:10px;border-radius:8px;
  font-size:14px;font-weight:500;margin-bottom:20px;
  transition:opacity .2s ease;
}
.pc-cta:hover{opacity:.9}
.pc-cta-normal{background:#FAFAFA;color:#000;border:1px solid var(--line)}
.pc-cta-gray{background:#525252;color:#fff}
.pc-cta-green{background:#509563;color:#FAFAFA}

.pc-features{list-style:none;display:flex;flex-direction:column;gap:16px;padding:0 8px}
.pc-features li{display:flex;align-items:flex-start;gap:8px;font-size:16px;color:#374151}
.pc-features .ico-check{flex:none;margin-top:2px}

/* Pushed to the bottom so cards of differing feature counts still line up. */
.pc-trusted{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.price-card .pc-trusted{margin-top:20px}
.pc-trusted-label{
  font-size:13px;font-weight:500;text-transform:uppercase;color:var(--mute);
  margin-bottom:8px;
}
.pc-trusted-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 8px}
.pc-trusted-row img{object-fit:contain;height:auto;max-width:100%}

.price-footnote{font-size:15px;color:#6B6860;margin-top:8px;line-height:1.5}

/* ---------- white panels: predictability, billing, estimator ---------- */
.price-panels{display:block;padding-bottom:60px}
.price-panel{
  background:var(--card);border:1px solid #E4E2DD;border-radius:16px;
  padding:24px 32px;margin-bottom:48px;
}
.price-panel:last-child{margin-bottom:0}
.pb-heading{font-size:20px;font-weight:600;line-height:1.35;color:var(--ink)}
.pb-body{font-size:14px;line-height:1.5;color:var(--mute);margin-top:12px}
.pb-body-sub{margin-bottom:32px}

.pb-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.pb-point{
  background:#FAFAFA;border-radius:16px;padding:19px 20px 22px;
  display:flex;flex-direction:column;gap:4px;min-height:108px;
}
.pb-point-title{font-size:14px;font-weight:700;line-height:1.5;color:var(--ink)}
.pb-point-body{font-size:14px;line-height:1.5;color:var(--mute)}

.pb-banner{
  margin-top:20px;background:#509563;border-radius:16px;
  padding:24px 32px;min-height:100px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.pb-banner-copy{display:flex;align-items:center;gap:20px}
.pb-banner-icon{
  flex:none;width:44px;height:44px;background:#66AD7A;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.pb-banner h3{font-size:20px;font-weight:600;line-height:1.35;color:#fff}
.pb-banner p{font-size:14px;line-height:1.5;color:#fff}
.pb-banner-cta{
  flex:none;display:flex;align-items:center;justify-content:center;
  min-width:103px;height:40px;padding:0 14px;white-space:nowrap;
  background:#FAFAFA;border:1px solid var(--line);border-radius:10px;
  font-size:14px;font-weight:500;color:var(--ink);
  transition:background .2s ease;
}
.pb-banner-cta:hover{background:#F0F0F0}

.pb-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.pb-rate{
  background:#FAFAFA;border:1px solid transparent;border-radius:16px;
  padding:19px 20px 22px;min-height:134px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.pb-rate.is-featured{background:#FAFAF8;border-color:#509563}
.pb-rate-label{font-size:16px;font-weight:600;line-height:1.5;text-transform:uppercase;color:var(--mute)}
.pb-rate.is-featured .pb-rate-label{color:#509563}
.pb-rate-amount{
  font-size:24px;font-weight:700;line-height:38.4px;letter-spacing:-.5px;
  color:var(--ink);text-align:center;
}
.pb-rate-unit{font-size:14px;font-weight:400;color:var(--mute);margin-left:4px}
.pb-rate-note{font-size:14px;line-height:1.5;color:var(--mute)}

.pb-example{
  margin-top:24px;background:#FAFAFA;border-radius:10px;padding:16px 20px;
  font-size:14px;line-height:1.5;color:var(--mute);
}
.pb-example b{color:var(--ink)}

/* ---------- cost estimator ---------- */
.est-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:32px}
.est-field{display:flex;flex-direction:column;gap:8px}
.est-field label{font-size:16px;font-weight:600;line-height:1.5;text-transform:uppercase;color:var(--mute)}
.est-field select{
  height:48px;width:100%;padding:12px 32px 12px 20px;
  border:1px solid #EBEBEB;border-radius:8px;background:var(--card);
  font:inherit;font-size:15px;line-height:20px;color:#1A1917;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  /* Native arrow is removed by appearance:none, so draw one back in. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%237E8181' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
}
.est-field select:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}

.est-result{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:100px;padding:24px 32px;margin-bottom:24px;
  background:var(--tag);border:1px solid #D0E7D7;border-radius:16px;
}
.est-result-label{display:block;font-size:16px;line-height:1.5;color:var(--ink)}
.est-result-detail{display:block;font-size:14px;line-height:1.5;color:var(--mute)}
.est-total{display:flex;align-items:baseline;gap:4px}
.est-total #est-total{font-size:32px;font-weight:700;line-height:38.4px;letter-spacing:-.5px;color:var(--ink)}
.est-total-unit{font-size:14px;line-height:1.5;color:var(--mute)}
.est-note{text-align:center;font-size:16px;line-height:1.5;color:#6B6860}
.est-note a{color:#2D6A4F;text-decoration:underline}

/* ---------- comparison table ---------- */
.price-compare{padding:48px 0 60px}
.price-compare-head{text-align:center;margin-bottom:32px}
.price-compare-head h2{margin-bottom:10px}
.price-compare-head p{font-size:16px;line-height:1.5;color:var(--ink)}

.cmp-frame{border:1px solid var(--line);border-radius:16px;overflow:hidden}
/* Horizontal scroll rather than a squeeze: four columns of values stop being
   readable long before they stop fitting. */
.cmp-scroll{overflow-x:auto}
.cmp-table{width:100%;min-width:600px;border-collapse:collapse;background:var(--card)}

.cmp-table thead th{
  padding:12px 16px;background:#FAFAFA;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}
.cmp-table thead th:first-child{width:26%;text-align:left;font-weight:600}
.cmp-table thead th:not(:first-child){width:18.5%;text-align:center;font-weight:700}
.cmp-table thead th.is-featured{color:#509563}

.cmp-section td{
  padding:16px;background:#FAFAFA;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);
}
.cmp-table tbody tr:not(.cmp-section){border-bottom:1px solid #F3F4F6}
.cmp-table tbody th{
  padding:12px 16px;text-align:left;
  font-size:16px;font-weight:500;color:var(--ink);
}
.cmp-table tbody td{padding:12px 16px;text-align:center}
.cmp-cell{display:flex;align-items:center;justify-content:center}
.cmp-cell span{font-size:14px;color:var(--ink)}
/* Both icons carry their colour inline so they render correctly if the
   stylesheet fails; these rules only pin the box. */
.cmp-cell .ico-check,.cmp-cell .ico-dash{flex:none}
.ico-dash{display:block}

/* ---------- support add-ons ---------- */
.price-support{padding-bottom:60px}
.price-support .price-compare-head{margin-bottom:48px}
.price-support .price-compare-head p{color:#6B6860}
.support-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;width:100%}
.support-card{
  width:100%;max-width:none;min-width:0;
  background:var(--card);border:1px solid #E4E2DD;border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.support-card.is-featured{border-color:#509563;background:#F4FAF6}
.sc-head{min-height:60px}
.sc-head h3{font-size:20px;font-weight:600;line-height:1.35;color:var(--ink)}
.sc-price{display:flex;align-items:baseline;gap:4px}
.sc-amount{font-size:20px;color:#509563}
.sc-suffix{font-size:12px;color:#509563}
.sc-stats{display:grid;grid-template-columns:repeat(2,1fr);row-gap:16px}
.sc-stat{min-width:0}
.sc-stat-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sc-stat-value{
  display:flex;align-items:center;gap:4px;
  font-size:14px;font-weight:500;color:var(--ink);
}
.sc-stat-value .ico-check{width:20px;height:20px;flex:none}

/* ---------- FAQ + closing cards ---------- */
.price-hero + *,
.faq-heading-c{text-align:center}
.faq.pricing-section{gap:48px;padding-bottom:60px}

/* These answers carry markdown lists, bold runs and links, unlike the
   homepage FAQ which is paragraphs only. */
.acc-a-rich{display:block}
.acc-a-rich p{font-size:18px;line-height:1.6}
.acc-a-rich p + p,
.acc-a-rich ul{margin-top:16px}
.acc-a-rich ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.acc-a-rich li{font-size:18px;line-height:1.6}
.acc-a-rich a{text-decoration:underline}
.acc-a-rich b,.acc-a-rich strong{font-weight:600}

.learn-more{width:100%;text-align:center}
.learn-more.pricing-section{padding-bottom:60px}
.learn-more h2{margin-bottom:48px}
.lm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.lm-card{
  background:var(--card);border-radius:24px;padding:24px;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;
}
/* Artwork is a contained background image, not an <img>, matching the source. */
.lm-art{
  width:100%;height:clamp(160px, 14vw, 265px);border-radius:24px;
  margin-bottom:25px;background:center/contain no-repeat var(--lm-art);
}
/* Custom Environment needs a dark ground for its transparent artwork. The
   inner panel matches the adjacent artwork's visual height, while the outer
   box remains shared so both cards' text begins on the same baseline. */
.lm-art-dark{position:relative;background:none}
.lm-art-dark::before{
  content:"";position:absolute;top:50%;left:0;width:100%;height:clamp(160px,14vw,208px);
  transform:translateY(-50%);border-radius:24px;background:#141414;
}
.lm-art-dark::after{
  content:"";position:absolute;inset:0;background:center/contain no-repeat var(--lm-art);
}
.lm-card h3{font-size:22px;font-weight:600;line-height:1.35;margin-bottom:8px;color:var(--ink)}
.lm-card p{font-size:clamp(0.875rem, 0.85rem + 0.17vw, 1rem);line-height:1.5}
/* Flat #509563, not the site's gradient button — these cards use
   bg-button-btn-color upstream. */
.lm-btn{
  display:inline-flex;align-items:center;margin-top:24px;
  height:46px;padding:0 15px;border-radius:12px;
  background:#509563;color:#fff;font-weight:500;
  font-size:clamp(0.875rem, 0.85rem + 0.17vw, 1rem);line-height:1.5;
  transition:background .15s ease;
}
.lm-btn:hover{background:#3E744D}
.lm-btn:active{transform:translateY(1px)}

/* ---------- breakpoints ---------- */
@media (max-width:1024px){
  .pb-points,.pb-rates{grid-template-columns:1fr}
  .support-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-panel{padding:24px 20px}
  .pb-banner{flex-direction:column;align-items:flex-start}
  .pb-banner-cta{align-self:stretch}
}
@media (max-width:768px){
  .est-controls,.lm-grid,.support-row{grid-template-columns:1fr}
  .est-result{flex-direction:column;align-items:flex-start;gap:12px}
  .price-compare{padding-top:32px}
  .acc-a-rich p,.acc-a-rich li{font-size:16px}
  .lm-card{padding:16px}
  .lm-art{height:125px}
  .lm-art-dark::before{height:125px}
}

/* =========================================================
   Long-form prose (terms, policies)
   ========================================================= */
.prose{max-width:800px;margin:0 auto;}
.prose-updated{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:16px}
.prose h1{font-size:52px;font-weight:700;line-height:1.35;margin-bottom:24px}
.prose h2{font-size:32px;font-weight:600;line-height:1.35;margin:40px 0 16px}
.prose h3{font-size:24px;font-weight:600;line-height:1.4;margin:32px 0 16px}
.prose p{font-size:20px;font-weight:300;line-height:1.6;margin-bottom:16px}
.prose strong{font-weight:600}
.prose ul,.prose ol{margin:0 0 16px 24px}
.prose li{font-size:20px;font-weight:300;line-height:1.6;margin-bottom:8px}
.prose a{text-decoration:underline}

/* =========================================================
   404
   ========================================================= */
.notfound{display:flex;flex-direction:column;align-items:center;text-align:center;padding:80px 0 152px}
.notfound h1{font-size:52px;font-weight:500;margin-bottom:24px}
.notfound p{font-size:24px;font-weight:300;line-height:1.5;margin-bottom:32px}

@media (max-width:768px){
  .prose h1{font-size:32px}
  .prose h2{font-size:26px}
  .prose h3{font-size:21px}
  .prose p,.prose li{font-size:17px}
  .notfound{padding:40px 0}
  .notfound h1{font-size:40px}
  .notfound p{font-size:20px}
}

/* =========================================================
   Contact page
   ========================================================= */
/* MUST be `.content > .contact`, not `.contact`.
   `.content > section{max-width:var(--max)}` is (0,1,1); a bare class is
   (0,1,0) and loses. The 576px cap below was written months ago and never
   took effect — the card was rendering at the full 1456px column, which is
   roughly 150 characters of line length across the labels. */
.content > .contact{
  display:flex;flex-direction:column;align-items:center;
  max-width:576px;margin-inline:auto;
}
.contact-copy{text-align:center;margin-bottom:48px}
.contact-copy h1{margin-bottom:24px}
.contact-copy .lede{font-size:20px;line-height:1.5}
.contact-card{width:100%;background:var(--card);border-radius:16px;padding:32px 40px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;grid-column:1 / -1}
.field-half{grid-column:span 1}
.field label{font-size:14px;font-weight:500}
/* The asterisk is decorative — `required` is what assistive tech reads, so
   announcing "star" on top of it is just noise. */
.field label .req{color:var(--mute);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);font-size:16px;color:var(--ink);resize:vertical
}
.field textarea{min-height:132px;line-height:1.5}
/* Native select chrome doesn't match the inputs, so the arrow is replaced
   with the site's own chevron. */
.field select{
  appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:14px 14px;
}
/* Until a reason is chosen the select is still empty and `required`, so it
   matches :invalid — that is the hook for greying the placeholder the same
   way a real placeholder attribute would be. */
.field select:required:invalid{color:var(--mute)}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.contact-submit{
  grid-column:1 / -1;height:46px;border-radius:var(--r-btn);
  background:var(--grad-dark);color:#fff;font-size:16px;font-weight:500;
  transition:opacity .2s ease
}
.contact-submit:hover{opacity:.9}
.contact-submit[disabled]{opacity:.6;cursor:default}
.form-status{grid-column:1 / -1;font-size:15px;line-height:1.5}
.form-status.ok{color:var(--green)}
.form-status.err{color:#B3261E}

@media (max-width:768px){
  .contact-card{padding:24px}
  .contact-form{grid-template-columns:1fr}
  .field-half{grid-column:1 / -1}
  .contact-copy{margin-bottom:32px}
}

/* =========================================================
   About page
   ========================================================= */
.about-hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px;margin:0 auto;}
.about-hero h1{margin-bottom:24px}
.about-hero .lede{font-size:20px;line-height:1.6;color:var(--ink-2)}

.people{display:flex;flex-direction:column;align-items:center;width:100%}
.people h2{text-align:center}
/* The two headings are spaced differently upstream: mb-[24px] over the
   executive cards, mb-[60px] over the logo strip. One shared 48px rule split
   the difference and matched neither. */
.people-exec h2{margin-bottom:24px}
.people-team h2{margin-bottom:60px}
/* Executives: centred wrap with fixed 312px cards, matching the source's
   `flex flex-wrap justify-center gap-6`. */
.people-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;width:100%;max-width:var(--max);margin-inline:auto}
.people-grid-exec > .person{flex:0 0 312px;max-width:312px}

/* Team: a real 4-column grid, 960px wide, each 180px card centred in its
   222px column. The last row fills from the left and stops — it does NOT
   centre. Wrapping flex looks almost identical at 8 people and wrong at 7,
   which is exactly the case this page has. */
.people-grid-team{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--max);margin-inline:auto;justify-items:center;
}
.people-grid-team > .person{width:180px}

.person-lg{text-align:left}

.person{display:flex;flex-direction:column;gap:16px}
/* Only the executive cards are cards. The team portraits sit straight on the
   page background with no panel and no padding — this rule used to give both
   a white background and 24px of padding, which boxed every team member. */
.person-lg{background:var(--card);border-radius:16px;padding:16px}
.person-sm{text-align:center;align-items:center}
.person h3{font-size:22px;font-weight:600;line-height:1.5}
.person-sm h3{font-size:18px}
/* The role sits in body ink; only the biography is muted. These two were
   both set to --ink-2, which flattened the contrast between them. */
.person-title{font-size:16px;font-weight:400;line-height:1.5;color:var(--ink)}
.person-text{
  font-size:clamp(0.875rem, 0.85rem + 0.17vw, 1rem);
  line-height:1.5;color:var(--mute);margin-top:8px;
}
/* Name/role on the left, socials pinned right, biography underneath. */
.person-body{display:flex;flex-direction:column;min-width:0}
.person-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.person-id{display:flex;flex-direction:column;min-width:0}
.person-socials{display:flex;align-items:center;gap:8px;margin-top:16px;flex:none}
.person-socials a{display:inline-flex;color:var(--ink);transition:color .3s ease}
.person-socials a:hover{color:var(--mute)}
.person-socials svg{width:24px;height:24px;display:block}
/* Team portraits carry no socials, so their head row just centres. */
.person-sm .person-head{justify-content:center}
.person-sm .person-id{align-items:center}

/* Portrait placeholder — same dashed treatment as the other unexported assets */
.ph-portrait{
  width:100%;aspect-ratio:1;border-radius:16px;
  border:1px dashed var(--mute-2);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--mute);text-align:center;padding:8px
}
.ph-portrait::after{content:attr(data-ph)}
.person-sm .ph-portrait{max-width:180px}

/* Partner strip under the Custom Environment hero. The button row above it
   carries mb-[80px]; the caption sits 24px under the logos with 80px below. */
.hero-partners{width:100%;margin-top:80px;display:flex;flex-direction:column;align-items:center}
.hero-partners .marquee{margin:0 auto 24px}
.hero-partners-note{
  font-size:clamp(0.875rem, 0.85rem + 0.17vw, 1rem);
  font-weight:500;line-height:1;color:var(--mute-2);text-align:center;
  margin-bottom:80px;
}
@media (max-width:768px){
  .hero-partners{margin-top:24px}
  .hero-partners .marquee{margin-bottom:16px}
  .hero-partners-note{margin-bottom:40px}
}

/* ---------- logo marquee ----------
   Scrolls right to left. --set-w and --dur are written per instance at build
   time from the PNG headers, so no JS measurement is needed; see marquee() in
   build.mjs. The track holds several copies of the set and shifts by exactly
   one set width, which makes the wrap point invisible. */
/* Upstream: the logo wrapper carries mb-[60px] and the portrait grid below it
   opens with pt-[60px], so the gap under the strip is 120px — it steps down
   with viewport width. The heading's own margin supplies the gap above, so
   there is no top margin here. Getting this wrong the first time pushed the
   strip down into the portraits with no separation at all. */
.marquee{width:100%;max-width:var(--mq-max, 870px);margin:0 auto 120px;position:relative;display:block}
.marquee-track{
  display:flex;align-items:center;width:fit-content;gap:var(--gap,40px);
  animation:marquee-scroll var(--dur,20s) linear infinite;
  will-change:transform;backface-visibility:hidden;
}
@keyframes marquee-scroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(calc(-1 * var(--set-w,0px)),0,0)}
}
/* A moving logo strip carries no information, so stopping it costs nothing. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}
.marquee-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.marquee-item img{height:32px;width:auto;display:block;object-fit:contain;user-select:none;pointer-events:none}

/* Edge fades so logos dissolve rather than being cut off. Upstream hardcodes
   white; this uses the page background so the band actually blends. */
.mask-fade{overflow:hidden}
.mask-fade::before,.mask-fade::after{
  content:"";position:absolute;top:0;width:100px;height:100%;z-index:2;pointer-events:none;
}
.mask-fade::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.mask-fade::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}

/* =========================================================
   Why Ormi / Our Technology
   ========================================================= */
.kicker{
  display:inline-block;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:90px;
  font-size:16px;font-weight:400;line-height:1.5;padding:8px 18px;margin-bottom:24px
}
.wide-media{width:100%;min-height:420px;border-radius:var(--r-card);margin-top:48px}

/* Width comes from .narrow — see the escape-hatch block above. */
.why-quote{display:flex;flex-direction:column;align-items:center}
.quote-features{display:flex;justify-content:space-between;gap:24px;width:100%;margin-bottom:80px}
.qf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:150px}
.qf-icon{width:88px;height:88px;border-radius:16px;background:var(--card)}
.qf h3{font-size:16px;font-weight:600;line-height:1.35}

.quote-card{background:var(--card);border-radius:16px;padding:48px 40px;width:100%}
.quote-logo{height:32px;width:auto;margin-bottom:40px}
.quote-logo[src$="somnia-current.png"]{height:44px;border-radius:8px}
.quote-card h3{font-size:32px;font-weight:600;line-height:1.35;margin-bottom:16px}
.quote-card blockquote{margin-bottom:40px}
.quote-card blockquote p{font-size:16px;line-height:1.5}
.quote-foot{display:flex;justify-content:space-between;align-items:center;gap:24px}
.quote-author{font-size:18px;font-weight:500;margin-bottom:8px}
.quote-role{font-size:16px;color:#707070}

.sh-items{display:flex;justify-content:center;gap:48px;margin-top:48px;flex-wrap:wrap}
.sh-item{display:flex;flex-direction:column;align-items:center;gap:16px}
.sh-icon{width:64px;height:64px;border-radius:16px}
.sh-item h3{font-size:18px;font-weight:600}

/* The self-healing proof needs its own narrower reading measure and larger
   icon anchors. A generic centred band let its headline run too wide and
   collapsed the three proof points into a small cluster. */
.self-healing-band .h-lg{max-width:620px}
.self-healing-band .band-sub{max-width:820px}
.self-healing-band .sh-items{width:min(830px,100%);justify-content:space-between;gap:24px;margin-top:56px}
.self-healing-band .sh-item{gap:24px}
.self-healing-band .sh-icon{width:88px;height:88px;padding:24px;border-radius:16px;background:var(--card);object-fit:contain}
.self-healing-band .sh-item h3{font-size:16px}

.red-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;margin-top:48px;text-align:left}
.red-card{background:var(--card);border-radius:var(--r-card);padding:32px}
.red-card h3{font-size:22px;font-weight:600;line-height:1.4;margin-bottom:12px}
.red-card p{font-size:17px;line-height:1.6;color:var(--ink-2)}

.check-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:8px 0 4px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.6}
.check-list li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:1200px){
  .red-cards{grid-template-columns:1fr}
}
@media (max-width:768px){
  .quote-features{gap:12px;margin-bottom:40px}
  .qf-icon{width:64px;height:64px}
  .quote-card{padding:24px}
  .quote-card h3{font-size:24px}
  .quote-foot{flex-direction:column;align-items:flex-start}
  .wide-media{min-height:240px;margin-top:32px}
  .sh-items{gap:24px}
}

/* =========================================================
   Product pages (0xGraph, 0xAPI)
   ========================================================= */
/* Widths transcribed from 0xgraph.tsx: h1 is w-[870px], the sub w-[768px].
   Capping the section at 900px instead let the headline run to one long line
   rather than wrapping to two, and left the sub far too wide. */
.product-hero{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.product-hero h1{max-width:870px;margin-bottom:24px}
.product-hero .lede{max-width:768px;font-size:20px;line-height:1.6;color:var(--ink-2);margin-bottom:32px}
.product-hero .hero-buttons{margin-bottom:80px}

.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;width:100%;margin-top:48px}
.pstat{display:flex;flex-direction:column;gap:12px;text-align:center}
.pstat-num{
  font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  background:var(--grad-num);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent
}
.pstat-label{font-size:16px;line-height:1.5;color:var(--mute)}

.tagged-features{display:flex;flex-direction:column;align-items:center;width:100%}
.tagged-features h2{margin-bottom:48px;text-align:center}
/* Two columns, each its own flex-col — cards stack within a column and do
   NOT equalise across columns, so a short card beside a tall one stays short.

   But the COLUMNS do stretch to each other (grid default align-items:stretch),
   and upstream every card carries h-full. The visible effect is that the last
   card in each column absorbs the leftover height, so both columns end flush.
   I had align-items:start, which killed the stretch and left a ragged bottom. */
.tf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%;align-items:stretch}
.tf-col{display:flex;flex-direction:column;gap:24px}
/* Last card in each column takes the slack, so the two columns bottom out level. */
.tf-col > .tf-card:last-child{flex:1}
.tf-card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-card);padding:32px;overflow:hidden}
/* Source: inline-flex, px-[18px] py-[8px], rounded-[90px], 0.5px #00000033
   border, bg #fafafa, with a 20px sparkle before the label. I had it as a
   small green chip with no icon. */
.tf-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:90px;
  border:.5px solid rgba(0,0,0,.2);background:var(--bg);
  font-size:18px;font-weight:500;line-height:1.5;color:var(--ink)
}
.tf-tag img{width:20px;height:20px;flex:none}
.tf-card h3{font-size:22px;font-weight:600;line-height:1.35;margin-top:24px;margin-bottom:8px}
.tf-card p{font-size:20px;font-weight:400;line-height:1.5;color:#474747;margin-bottom:24px}
/* The media area grows into whatever height the stretched card has spare and
   centres the artwork in it. Upstream this is `flex items-center justify-center`
   around a `w-full object-contain` image. As a plain block the artwork hugged
   the text and every bit of slack piled up underneath it. */
.tf-media{
  flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;margin-top:24px;
}
.tf-media > svg,.tf-media > img{width:100%;height:auto;object-fit:contain}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;margin-top:48px;text-align:left}
.step{display:flex;flex-direction:column;gap:12px;background:var(--card);border-radius:var(--r-card);padding:32px}
.step-num{font-size:14px;font-weight:600;color:var(--green)}
.step h3{font-size:22px;font-weight:600;line-height:1.4}
.step p{font-size:17px;line-height:1.6;color:var(--ink-2)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%;margin-top:48px;text-align:left}
.tile{display:flex;flex-direction:column;gap:12px;background:var(--card);border-radius:var(--r-card);padding:28px}
.tile h3{font-size:20px;font-weight:600;line-height:1.4}
.tile p{font-size:16px;line-height:1.6;color:var(--ink-2)}

.link-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.link-card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.link-card-media{min-height:200px}
.link-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px}
.link-card h3{font-size:20px;font-weight:600;line-height:1.4}
.link-card p{font-size:16px;line-height:1.6;color:var(--ink-2);flex:1}

@media (max-width:1200px){
  .tf-grid,.steps,.link-cards{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .tiles{grid-template-columns:1fr}
  .tf-card,.step,.tile{padding:24px}
  .pstat-num{font-size:36px}
  .product-hero .lede{font-size:18px}
}

/* Centred variant of the check list, for full-width bands */
.check-list-center{align-items:center;margin-top:32px}
.check-list-center li{max-width:520px;width:100%;text-align:left}
.cta-note{font-size:16px;line-height:1.6;color:var(--mute);max-width:600px;margin-top:20px}

/* Tiles fall to 3-up when there are six of them rather than four */
.tiles:has(> .tile:nth-child(6)){grid-template-columns:repeat(3,1fr)}
@media (max-width:1200px){.tiles:has(> .tile:nth-child(6)){grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.tiles:has(> .tile:nth-child(6)){grid-template-columns:1fr}}

/* =========================================================
   Chain directory + per-chain pages
   ========================================================= */
/* "Trusted by Leading Companies" — on the directory and on every detail page.
   The source animates these two by hand rather than through its <Marquee>
   component, at 10s for a translateX(-115%) pass that runs the strip off the
   edge and leaves a gap before it loops. Using the same seamless marquee as
   the other three strips instead: same direction, no gap. */
.chain-trusted{display:flex;flex-direction:column;width:100%}
.trusted-h{
  font-size:20px;font-weight:400;line-height:1.25;color:var(--ink);
  margin-bottom:16px;text-align:left;
}
/* Left-aligned here, not centred, and it steps down with the viewport the way
   the source's max-w utilities do. */
.chain-trusted .marquee,
.trusted-label + .marquee{margin:0 0 24px}
@media (max-width:1680px){
  .chain-trusted .marquee,.trusted-label + .marquee{--mq-max:972px}
}
@media (max-width:1440px){
  .chain-trusted .marquee,.trusted-label + .marquee{--mq-max:852px}
}
@media (max-width:1200px){
  .chain-trusted .marquee,.trusted-label + .marquee{--mq-max:732px}
}

/* "<N> more networks available" */
.chain-more{display:flex;flex-direction:column;width:100%}
.chain-more-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:32px;flex-wrap:wrap;
}
.chain-more-head h2{margin:0 0 8px}
.chain-more-head p{margin:0;color:var(--mute);font-size:18px;line-height:1.5}

/* Latest Integrations — four cards, not pills. Icon and product tags on one
   row, chain name, then network tags. */
.latest-integrations{align-items:flex-start;text-align:left}
.latest-integrations .h-lg,.latest-integrations .band-sub{max-width:none;margin-inline:0;text-align:left}
.latest-chains{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%;margin-top:40px}
.latest-card{
  display:flex;flex-direction:column;text-align:left;
  background:var(--card);border-radius:24px;padding:15px 20px;
  transition:box-shadow .2s ease;
}
.latest-card:hover{box-shadow:var(--sh-modal)}
.lc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lc-icon{width:35px;height:35px;border-radius:50%;object-fit:contain;flex:none}
.lc-tags{display:flex;gap:5px}
.lc-tag{
  display:flex;align-items:center;gap:2px;white-space:nowrap;
  padding:7px 8px;border:1px solid rgba(0,0,0,.125);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font-size:14px;font-weight:500;
}
.lc-tag img{width:14px;height:14px}
.latest-card h3{font-size:22px;font-weight:600;line-height:1.5;color:var(--ink);margin:32px 0}
.lc-nets{display:flex;gap:8px}
.lc-net{padding:5.5px 12px;border-radius:4px;font-size:18px;line-height:1.4;white-space:nowrap}
.lc-net-main{background:rgba(80,149,99,.0625);color:#3D6B49}
.lc-net-test{background:rgba(102,169,231,.0625);color:#325B81}
@media (max-width:1024px){.latest-chains{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.latest-chains{grid-template-columns:1fr;gap:16px}}
.chain-icon{width:32px;height:32px;border-radius:8px}

.chain-table-wrap{display:flex;flex-direction:column;width:100%;scroll-margin-top:100px}
.chain-explore-h{text-align:left;margin-bottom:24px}

/* Filters left, search right — this was the other way round. The filter
   buttons sit inside one white pill rather than being separate outlines. */
.chain-filters{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:44px}
.chain-cats{
  display:flex;flex-wrap:wrap;gap:12px;
  background:var(--card);padding:6px 8px;border-radius:90px;
}
.cat-btn{
  padding:11px 24px;border:0;border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);
  font-size:16px;font-weight:500;transition:background .2s ease,color .2s ease;
}
.cat-btn:hover{background:var(--panel);color:#fff}
.cat-btn.is-on{background:var(--panel);color:#fff}

.chain-search{position:relative;display:flex;align-items:center}
.chain-search svg{
  position:absolute;left:16px;width:24px;height:24px;color:#9CA3AF;pointer-events:none;
}
.chain-search input{
  width:300px;padding:12px 16px 12px 45px;
  border:1px solid #E5E7EB;border-radius:var(--r-pill);background:var(--card);
  font:inherit;font-size:20px;
}
.chain-search input:focus{outline:none;border-color:#E5E7EB}

/* Rows are cards, not table rows: a plain text header then one white card
   per chain, 16px apart. */
.chain-list{display:flex;flex-direction:column;gap:16px}
.chain-head-row,
.chain-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:center}
.chain-head-row{padding:8px 18px}
.chain-head-row span{font-size:20px;font-weight:500;color:var(--ink)}
.chain-row{
  background:var(--card);border-radius:12px;padding:22px 24px;
  transition:box-shadow .2s ease;
}
.chain-row:hover{box-shadow:var(--sh-modal)}
.cr-chain{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:500;color:var(--ink)}
.cr-chain img{width:32px;height:32px;border-radius:50%}
.cr-nets{display:flex;gap:8px;flex-wrap:wrap}
.cl-net{padding:5px 8px;border-radius:4px;font-size:18px;font-weight:500;white-space:nowrap}
.cl-net-main{background:rgba(80,149,99,.0625);color:#3D6B49}
.cl-net-test{background:rgba(102,169,231,.0625);color:#325B81}
.chain-row .avail{width:24px;height:24px}

/* Six per page, as upstream. */
.chain-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.pager-btn{
  display:flex;align-items:center;gap:8px;
  padding:13px 24px;border:1px solid rgba(10,10,10,.125);border-radius:var(--r-pill);
  background:transparent;font-size:18px;font-weight:500;color:var(--ink);
  transition:background .2s ease;
}
.pager-btn:hover:not(:disabled){background:var(--card)}
.pager-btn:disabled{opacity:.5;cursor:not-allowed}
.pager-btn svg{width:20px;height:20px}
.pager-status{font-size:18px;color:var(--ink)}

@media (max-width:768px){
  .chain-filters{flex-direction:column;align-items:stretch}
  .chain-cats{order:2;background:transparent;padding:0;gap:8px}
  .chain-search{order:1}
  .chain-search input{width:100%;font-size:16px}
  .chain-head-row{display:none}
  .chain-row{grid-template-columns:1fr;gap:8px;padding:16px 8px}
  .pager-btn{padding:8px 16px;font-size:14px}
}


.net-pill{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface);font-size:14px;font-weight:400}
.net-pill.on{background:var(--tag);color:var(--green)}
.chain-empty{text-align:center;padding:40px;color:var(--mute);font-size:17px}

/* "Need another chain?" — a compact dark conversion panel at the end of the
   directory, with the floating chain artwork continuing outside its edge. */
.content > .request-chain{position:relative;max-width:var(--max);overflow:visible}
.request-chain{display:flex;flex-direction:column;align-items:center;width:100%;padding:58px 64px 54px;border-radius:32px;background:#000;color:#fff}
.request-chain h2{margin:0 0 36px;text-align:center;color:#fff;font-size:36px;font-weight:500;line-height:1.1}
.request-cards{display:grid;grid-template-columns:repeat(2,1fr);width:100%}
.request-card{
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:0;padding:28px 48px 18px;
}
.request-card + .request-card{border-left:1px solid #3A3A38}
.request-card-type{margin:0 0 18px!important;color:#6DCA88!important;font-size:18px!important;font-weight:500!important;line-height:1.5!important}
.request-card p{max-width:440px;margin:0;font-size:18px;font-weight:400;line-height:1.5;color:#C6C9C5}
.request-card .btn{height:48px;margin-top:25px;padding:13px 18px;font-size:16px;line-height:1}
/* The source anchors this ribbon to the page edge, independently from the
   centered panel. That keeps it from visually pulling the panel rightward. */
.request-decor{position:absolute;z-index:-1;width:360px;height:360px;right:calc(50% - 50vw - 55px);bottom:-115px;transform:rotate(-37.24deg);pointer-events:none}
@media (max-width:768px){
  .content > .request-chain{max-width:100%}
  .request-chain{padding:42px 24px;border-radius:20px}
  .request-chain h2{margin-bottom:26px;font-size:26px}
  .request-cards{grid-template-columns:1fr}
  .request-card{min-height:0;padding:26px 0}
  .request-card + .request-card{border-top:1px solid #3A3A38;border-left:0}
  .request-card p{font-size:16px}
  .request-decor{display:none}
}

.chain-detail{display:flex;flex-direction:column;width:100%}
.chain-detail-intro{align-items:center;max-width:820px;margin:0 auto;text-align:center}
.back-link{align-self:flex-start;font-size:16px;color:var(--mute);margin-bottom:28px}
.back-link:hover{color:var(--ink)}
.chain-identity{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:22px}
.chain-identity img{width:40px;height:40px;object-fit:contain}
.chain-name{font-size:32px;font-weight:600;letter-spacing:-.04em}
.chain-cat{font-size:15px;color:var(--mute);background:var(--surface);padding:5px 11px;border-radius:var(--r-pill)}
.chain-detail-intro h1{max-width:720px;margin:0 0 16px;font-size:clamp(38px,4vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.045em}
.chain-detail .lede{max-width:760px;margin:0;font-size:19px;line-height:1.6;color:var(--ink-2)}
.chain-detail .hero-buttons{margin-top:28px}

.chain-product-section{display:flex;flex-direction:column;width:100%;padding-top:48px;border-top:1px solid var(--line)}
.chain-product-section>h2{margin:0 0 30px;font-size:28px;font-weight:600;letter-spacing:-.035em}
.chain-product-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:32px}
.chain-product-card,.chain-info-card{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--card);padding:40px}
.chain-product-card h3{margin:0 0 12px;font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.035em}
.chain-product-card>p{margin:0;color:var(--ink-2);font-size:18px;line-height:1.6}
.chain-product-checks{display:flex;flex-direction:column;gap:18px;margin:38px 0 34px;padding:0;list-style:none}
.chain-product-checks li{display:flex;align-items:center;gap:12px;font-size:18px;line-height:1.4}
.chain-product-checks img{width:24px;height:24px;flex:none}
.chain-product-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:36px}
.chain-metric{display:flex;min-height:140px;flex-direction:column;justify-content:flex-start;border-radius:20px;background:#F4FAF6;padding:18px}
.chain-metric span{display:flex;align-items:center;height:22px;margin-bottom:20px;color:var(--green);font-size:22px;line-height:1}
.chain-metric strong{display:block;min-height:44px;font-size:16px;font-weight:500;line-height:1.35}
.chain-product-card .hero-buttons{margin-top:auto;justify-content:flex-start}
.chain-info-card{gap:32px}
.chain-info-card>div{display:flex;flex-direction:column;gap:8px}
.chain-info-card h3{margin:0;font-size:16px;font-weight:600}
.chain-info-card p,.chain-info-card a{margin:0;color:var(--ink-2);font-size:18px;line-height:1.45}
.chain-info-card a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.chain-network-badges,.chain-product-badges{display:flex;flex-wrap:wrap;gap:8px}
.chain-network-badge{padding:5.5px 12px;border-radius:4px;font-size:18px;line-height:1.4;white-space:nowrap}
.chain-network-badge-main{background:rgba(80,149,99,.0625);color:#3D6B49}
.chain-network-badge-test{background:rgba(102,169,231,.0625);color:#325B81}
.chain-product-badge{display:flex;align-items:center;gap:3px;width:max-content;padding:7px 10px;border:1px solid rgba(0,0,0,.125);border-radius:var(--r-pill);font-size:14px;font-weight:500}
.chain-product-badge img{width:14px;height:14px}
.chain-all-networks{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:56px 0 8px}
.chain-all-networks h2{margin:0 0 8px;font-size:30px;font-weight:600;letter-spacing:-.035em}
.chain-all-networks p{margin:0;color:var(--mute);font-size:18px}

@media (max-width:900px){
  .chain-product-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .chain-filters input{min-width:0;width:100%}
  .chain-detail-intro{align-items:flex-start;text-align:left}
  .chain-identity{justify-content:flex-start}
  .chain-name{font-size:28px}
  .chain-detail-intro h1{font-size:36px}
  .chain-detail .lede{font-size:17px}
  .chain-detail .hero-buttons{justify-content:flex-start}
  .chain-product-section{padding-top:36px}
  .chain-product-section>h2{font-size:24px}
  .chain-product-card,.chain-info-card{padding:24px}
  .chain-product-card h3{font-size:26px}
  .chain-product-card>p{font-size:17px}
  .chain-product-checks{margin:30px 0 26px;gap:14px}
  .chain-product-checks li{font-size:16px}
  .chain-product-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain-metric{min-height:106px;padding:16px}
  .chain-info-card{gap:22px}
  .chain-all-networks{align-items:flex-start;flex-direction:column;padding-top:40px}
  .chain-all-networks h2{font-size:25px}
}

/* Trusted-by logo row — chain directory */
.trusted{width:100%}
.trusted-label{font-size:20px;font-weight:300;line-height:1.25;margin-bottom:16px}
@media (max-width:768px){.trusted-logos{gap:20px}}

/* Real artwork (not placeholders) inside centred bands */
.band-art{max-width:100%;margin:40px auto 0;border-radius:var(--r-card)}
.band-art.wide{width:100%;background:var(--card);padding:32px}
.tile-icon{width:48px;height:48px;margin-bottom:4px}

/* ---------- 0xAPI: illustration-led feature compositions ---------- */
.api-section{display:flex;flex-direction:column;width:100%}
.api-section > .h-lg{max-width:590px;margin:0 auto 60px;text-align:center}
.api-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;width:100%}
.api-feature-col{display:flex;flex-direction:column;gap:32px}
.api-feature-card,.api-why-card,.api-why-wide{
  background:var(--card);border-radius:var(--r-card);padding:32px;text-align:left;
}
.api-feature-card{display:flex;flex-direction:column;flex:1}
.api-feature-card h3,.api-why-card h3,.api-why-wide h3{
  font-size:22px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:8px;
}
.api-feature-card p,.api-why-card p,.api-why-wide p{
  font-size:20px;font-weight:400;line-height:1.5;color:#474747;
}
.api-feature-art{display:flex;align-items:center;justify-content:center;margin-top:24px}
.api-feature-art{flex:1;min-height:160px}
.api-feature-art img,.api-why-art img{width:100%;height:auto;object-fit:contain}
.api-features > .btn{align-self:center;margin-top:48px}
.api-why-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;width:100%;margin-bottom:32px}
.api-why{align-items:stretch}
.api-why-card{display:flex;flex-direction:column}
.api-why-art{display:flex;align-items:center;justify-content:center;margin-top:auto;min-height:164px}
.api-why-wide{display:flex;align-items:center;gap:32px}
.api-why-wide-copy{flex:1}
.api-why-wide-art{display:flex;flex:1;align-items:center;justify-content:center}
.api-why-wide-art img{width:100%;max-width:300px;height:auto;object-fit:contain}

@media (max-width:1200px){
  .api-feature-grid{gap:24px}
  .api-feature-col{gap:24px}
  .api-why-top{gap:24px}
}
@media (max-width:768px){
  .api-section > .h-lg{margin-bottom:32px}
  .api-feature-grid,.api-why-top{grid-template-columns:1fr}
  .api-feature-col{gap:24px}
  .api-feature-card,.api-why-card,.api-why-wide{padding:16px 24px}
  .api-feature-card h3,.api-why-card h3,.api-why-wide h3{font-size:20px}
  .api-feature-card p,.api-why-card p,.api-why-wide p{font-size:16px}
  .api-feature-art,.api-why-art{min-height:0}
  .api-why-top{margin-bottom:24px}
  .api-why-wide{flex-direction:column;gap:16px}
  .api-why-wide-art{width:100%}
}
/* Four columns, each item capped at 170px and centred in its track — the
   source uses `justify-between` across a flex row with max-w-[170px] items. */
.perf-points{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%;margin-top:48px;justify-items:center}
.perf-point{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:170px}
/* 88px, not 56 — these were rendering at roughly two-thirds size. */
.perf-point img{width:88px;height:88px;margin-bottom:24px}
.perf-point h3{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
@media (max-width:1200px){.perf-points{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .perf-points{grid-template-columns:1fr}
  .band-art.wide{padding:16px}
}

/* Real partner / previous-employer logos */
.company-logo{height:32px;width:auto;object-fit:contain}

/* =========================================================
   Why Ormi — section-specific layout
   ========================================================= */
.why-hero{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;}
.why-hero h1{max-width:870px;margin-bottom:24px}
.why-hero .lede{max-width:580px;font-size:20px;line-height:1.5}
.why-hero-art{width:100%;margin-top:100px}

/* Single redundancy card sitting under the graphic */

/* Global uptime: copy sits over the arc artwork */

/* Dedicated: three picture cards with captions */
.ded-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;margin-top:24px}
.ded-card{background:var(--card);border-radius:var(--r-card);padding:24px}
.ded-card img{width:100%;height:auto;border-radius:var(--r-card);background:var(--bg);margin-bottom:25px}
.ded-card p{font-size:16px;line-height:1.5;text-align:center}
/* Must out-specify `.band .btn{margin-top:8px}` (0,2,0), so it is scoped to
   .band too and sits later in the file. 8px would leave the button visually
   attached to the card row rather than closing the section. */
.band .ded-cta{margin-top:40px}

@media (max-width:1024px){
  .why-hero-art{margin-top:48px}
  }
@media (max-width:768px){
  .ded-cards{grid-template-columns:1fr}
  .why-hero-art{margin-top:32px}
  }

/* ---------- Why Ormi: "True redundancy" card ---------- */
/* Full-bleed graph-paper band; the card floats on top of it. */
/* Full-bleed grid field. It sits directly under the orb artwork with no
   section gap, so the data streams above appear to run down into it. */
.content > .red-band{
  /* Positioning context for .grid-flow. Without this the packet layer
     resolves against whatever ancestor happens to be positioned and lands
     off-screen. */
  position:relative;
  margin-top:calc(-1 * var(--section-gap));
  /* The following uptime module already has the shared content gap. Keep a
     visible transition, but bring the dome close enough to read as the next
     step in the same reliability story. */
  margin-bottom:calc(-1 * var(--section-gap) + 24px);
  display:flex;align-items:center;justify-content:center;
  padding:120px 20px 72px;overflow:hidden;background-repeat:repeat
}
.red-band .red-card{width:min(560px,calc(100vw - 40px));background:#FCFCFC;padding:40px;text-align:center}
.red-band .red-card .kicker{margin-bottom:14px}
.red-band .red-card h3{margin:0 auto 14px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.03em}
.red-p{font-size:17px;line-height:1.5}
.red-p-body{max-width:470px;margin:0 auto;color:#474D48}
.red-proof{margin-top:18px;color:#509563;font-size:15px;font-weight:600}
.red-outcome{max-width:430px;margin:14px auto 0;color:#7E8181;font-size:15px;line-height:1.45}


@media (max-width:1024px){
  .why-hero-art{margin-top:48px}
  .why-global-copy{padding-top:26vw}
}
@media (max-width:768px){
  .content > .red-band{margin-bottom:calc(-1 * var(--section-gap) + 40px);padding:60px 16px 48px}
  .red-band .red-card{padding:28px 24px}
  .red-band .red-card h3{font-size:24px}
  .red-p{font-size:16px}
  .why-global-copy{padding-top:24vw}
}



/* =========================================================
   Orb field — "No single point of failure. Ever"
   Inlined rather than an <img> so each light point animates
   on its own.

   Per orb: a blurred bloom, a saturated ring, a near-white
   core, and a stem that brightens with it. The white centre
   against a saturated surround is what reads as neon —
   brightening one flat dot just reads as fading.

   The whole palette is these five values. Change them here;
   nothing else needs touching.
   ========================================================= */
:root{
  --orb-neon:#79C043;        /* bloom + background wash */
  --orb-halo-fill:#A6DC5B;   /* saturated ring */
  --orb-ring-fill:#E4F5CB;   /* pale outer ring */
  --orb-core-fill:#F6FFE6;   /* near-white centre */
  --orb-stem:#79C043;        /* line running down from each orb */
}

.orb-field{width:100%}
.orb-field svg{width:100%;height:auto;overflow:visible}

.orb-bloom,
.orb-halo,
.orb-ring,
.orb-core{
  transform-box:fill-box;
  transform-origin:center;
  animation:orb-core-pulse 3.2s ease-in-out infinite;
  /* Not a round fraction of the duration — a clean fraction resyncs the
     orbs into one collective pulse, which reads as flicker. */
  animation-delay:calc(var(--i, 0) * -0.29s);
}
.orb-bloom{animation-name:orb-bloom-pulse}
.orb-halo{animation-name:orb-halo-pulse}
.orb-ring{animation-name:orb-ring-pulse}

/* Stem brightens slightly in time with its own orb. */
.orb-stem{
  animation:orb-stem-pulse 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.29s);
}


/* Soft blobs already in the artwork — slower, never fully fade, so there's
   a steady wash of light behind the points. */
.orb-glow{
  transform-box:fill-box;transform-origin:center;
  animation:orb-wash 7s ease-in-out infinite;
}

@keyframes orb-bloom-pulse{
  0%,100%{opacity:.30;transform:scale(.85)}
  50%    {opacity:.85;transform:scale(1.50)}
}
@keyframes orb-halo-pulse{
  0%,100%{opacity:.45;transform:scale(1)}
  50%    {opacity:1;   transform:scale(1.35)}
}
@keyframes orb-ring-pulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%    {opacity:.7;  transform:scale(1.15)}
}
@keyframes orb-core-pulse{
  0%,100%{opacity:.90;transform:scale(.96)}
  50%    {opacity:1;   transform:scale(1.12)}
}
@keyframes orb-stem-pulse{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}
@keyframes orb-wash{
  0%,100%{opacity:.40}
  50%    {opacity:.75}
}

/* Motion is decorative — hold a bright frame rather than switching it off. */
@media (prefers-reduced-motion:reduce){
  .orb-bloom,.orb-halo,.orb-ring,.orb-core,.orb-stem,.orb-glow{animation:none}
  .orb-bloom{opacity:.55;transform:scale(1.2)}
  .orb-halo{opacity:.75}
  .orb-ring{opacity:.5}
  .orb-core{opacity:1}
  .orb-stem{opacity:.8}
  .orb-glow{opacity:.55}
}

/* =========================================================
   Why Ormi — "Global uptime, backed by engineers"

   The artwork is inlined so the arcs can move. Five rings
   expand out from the dome's centre on a shared cycle, each
   offset by one slot, so a new wave starts as the previous
   one reaches the edge — a continuous ripple rather than a
   repeating burst.

   The copy sits over the artwork, so the rings are pushed
   behind it and never cross the text.
   ========================================================= */
:root{
  --wave-stroke:#79C043;
  /* One wave every --wave-duration / ring-count. At 9s across 3 rings that's
     a wave every 3s. Faster reads as system activity; the copy here says
     "always online", which wants a heartbeat, not a pulse rate. */
  --wave-duration:9s;
}

/* This used to pull the next section up by 36px (140 gap -> 104), which was
   tuned when Case Studies followed — a left-aligned block whose heading sat
   low in its own box. Custom Environments now follows, opening with a centred
   two-line h2, and 104px read as crowding the dome. Back to the page rhythm. */
.why-global{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.why-global-art{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.why-global-art svg{width:100%;max-width:988px;height:auto}
.why-global-copy{position:relative;z-index:1;width:550px;max-width:100%;text-align:center;padding-top:300px}
.why-global-copy h2{margin-bottom:24px}
.why-global-copy .band-sub{font-size:18px}

/* Scale about the dome's own centre, not the viewBox origin. */
.wave-ring{
  transform-box:view-box;
  transform-origin:502px 433px;
  opacity:0;
  animation:wave-out var(--wave-duration) linear infinite;
  /* Evenly spaced starts: ring i begins i/n through the cycle. */
  animation-delay:calc(var(--i) / var(--n) * var(--wave-duration) * -1);
}

/* The dome outline is structure, not decoration — it holds the headline.
   Deliberately static: a container that breathes feels unstable. */
.wave-arc{opacity:.7}

/* Starts at the dome's own radius (305/420 = .73) so each wave appears to
   leave the dome's surface. Starting near zero hides the ring behind the
   opaque dome, then pops it into view at the edge. */
@keyframes wave-out{
  0%  {opacity:0;   transform:scale(.73)}
  15% {opacity:.5}
  70% {opacity:.18}
  100%{opacity:0;   transform:scale(1.06)}
}

@media (max-width:1024px){
  .why-global-copy{padding-top:30vw}
}
@media (max-width:768px){
  .why-global-copy{padding-top:34vw}
}

/* Expanding rings are exactly the kind of motion to drop here. */
@media (prefers-reduced-motion:reduce){
  .wave-ring{display:none}
  .wave-arc{animation:none;opacity:.8}
}

/* =========================================================
   Data packets travelling the grid

   Short bright segments running along the grid rules behind
   the redundancy card. Positions are multiples of the 45px
   tile, measured from the band's top-left — which, because
   the band is full-bleed, is the viewport's left edge. So
   they sit on a line at any monitor width.

   Horizontals cross the full viewport; verticals cross the
   band. Both animate transform only, so they composite
   without triggering layout.
   ========================================================= */
.grid-flow{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  /* Behind the card, above the grid. */
  z-index:0;
}
.red-band > .red-card{position:relative;z-index:1}

.pkt{
  position:absolute;display:block;
  opacity:0;
  animation-duration:var(--dur, 8s);
  animation-delay:var(--delay, 0s);
  animation-timing-function:cubic-bezier(.45,0,.55,1);
  animation-iteration-count:infinite;
}

/* Horizontal: 1px tall, travels the full width of the viewport. */
.pkt-h{
  left:0;height:1px;width:180px;
  filter:drop-shadow(0 0 3px var(--wave-stroke));
  background:linear-gradient(90deg,
    transparent 0%,
    var(--wave-stroke) 45%,
    var(--orb-core-fill) 62%,
    var(--wave-stroke) 72%,
    transparent 100%);
  animation-name:pkt-across;
}

/* Vertical: 1px wide, travels the height of the band. */
.pkt-v{
  top:0;width:1px;height:150px;
  filter:drop-shadow(0 0 3px var(--wave-stroke));
  background:linear-gradient(180deg,
    transparent 0%,
    var(--wave-stroke) 45%,
    var(--orb-core-fill) 62%,
    var(--wave-stroke) 72%,
    transparent 100%);
  animation-name:pkt-down;
}

/* 100vw rather than 100% — the band is full-bleed, so they match, and vw
   keeps the travel correct if the band ever gains padding. */
@keyframes pkt-across{
  0%      {opacity:0;  transform:translateX(-180px)}
  8%      {opacity:1}
  85%     {opacity:1}
  100%    {opacity:0;  transform:translateX(100vw)}
}
@keyframes pkt-down{
  0%      {opacity:0;  transform:translateY(-150px)}
  10%     {opacity:.9}
  82%     {opacity:.9}
  100%    {opacity:0;  transform:translateY(760px)}
}

/* Travelling elements are the clearest case for dropping motion entirely. */
@media (prefers-reduced-motion:reduce){
  .grid-flow{display:none}
}

/* =========================================================
   Data particles on the hero diagram

   Each dot rides one connector string via offset-path, using
   the same `d` as the string itself — so it tracks the curve
   exactly rather than approximating it with a translate.

   Direction comes from the geometry, not a guess: the left
   fan feeds the router (0→100%), the right fan leaves it
   (100→0%). Duration scales with wire length so everything
   moves at roughly one speed.
   ========================================================= */
.why-hero-art svg{width:100%;height:auto}

.flow-dot{
  fill:var(--wave-stroke);
  offset-rotate:0deg;          /* a circle needs no banking */
  offset-distance:var(--from, 0%);
  animation:flow-along var(--dur, 4s) linear infinite;
  animation-delay:var(--delay, 0s);
  filter:drop-shadow(0 0 3px var(--wave-stroke));
}

/* --from and --to are where the particle starts and stops, as offset-distance.
   Direction is carried by those values, so there is only one keyframe. */
@keyframes flow-along{
  0%      {offset-distance:var(--from, 0%); opacity:0}
  5%      {opacity:1}
  92%     {opacity:1}
  100%    {offset-distance:var(--to, 100%); opacity:0}
}

@media (max-width:1024px){.why-hero-art{margin-top:48px}}
@media (max-width:768px){.why-hero-art{margin-top:32px}}

@media (prefers-reduced-motion:reduce){
  .flow-dots{display:none}
}

/* Real logos and portraits, replacing their placeholders */
.investor-logo{height:40px;width:auto;max-width:130px;object-fit:contain}
.portrait{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:10px}
.person-sm .portrait{max-width:180px}

.lockup-logo{height:24px;width:auto;object-fit:contain}

/* ---------- Product cards (homepage) ----------
   Source is a plain white card with the artwork sitting on it. The green
   gradient well and the 01/02 badge were inventions of the first rebuild —
   the "0xGraph" label is baked into the SVG itself. Hovering crossfades to
   the -hover variant, matching the React component's image swap. */
.product-card{background:var(--card);color:var(--ink);padding:24px;border-radius:var(--r-card)}
.product-media{position:relative;margin:0 auto 32px}
.product-media img{display:block;width:100%;height:auto;transition:opacity .3s ease}
.pm-hover{position:absolute;inset:0;opacity:0}
.product-card:hover .pm-hover{opacity:1}
.product-card:hover .pm-base{opacity:0}
.product-text h3{font-size:clamp(1.125rem, 1rem + 0.25vw, 1.375rem);font-weight:600;line-height:1.5;margin-bottom:8px}
.product-text p{line-height:1.5;text-align:left}

/* =========================================================
   Layers stack — "A vertically integrated stack"
   Eleven pieces that drop in one at a time on a shared 9.5s
   cycle, each offset by its own delay. Positions, timings
   and the keyframe are transcribed from the production
   stylesheet (styles/homeDataLayer.scss), not eyeballed.
   ========================================================= */
.data-layer-anim{position:relative;contain:layout paint}
/* The layered stack is weighted toward the bottom of its absolute canvas.
   Raise its visual mass to the same vertical centre as the adjacent copy,
   while preserving the shared section rhythm around the module. */
.data-stack-split .data-layer-anim{transform:translateY(-80px)}
.data-layer-anim .data-step{
  position:absolute;opacity:0;
  animation:dropInCycle 9.5s ease-in-out both;
  max-width:100%;height:auto;pointer-events:none;
}
@keyframes dropInCycle{
  0%  {opacity:0;transform:translateY(-30%)}
  15% {opacity:0;transform:translateY(-30%)}
  30% {opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}
/* Holding the landed frame keeps the stack readable without motion. */
@media (prefers-reduced-motion:reduce){
  .data-layer-anim .data-step{animation:none;opacity:1;transform:none}
}

/* ---------- Status panel (homepage) ----------
   One artwork with three uptime bars wiping to full width over it. The clip
   percentages differ per bar, which is what stops them reading as one block.
   Transcribed from styles/homeHyperscale.scss. */
.status-media{position:relative;width:100%}
.status-panel-art{width:100%;height:auto;display:block}
.update-time-overlay{
  position:absolute;bottom:17.5%;height:30px;width:23.33%;z-index:2;
  /* Parked at the start width. Without this the bars sit at full width until
     the animation begins, so the wipe has nothing to travel from. */
  clip-path:polygon(0 0, var(--from,55%) 0, var(--from,55%) 100%, 0 100%);
}
/* main.js adds .bars-run when the panel scrolls into view. Naming the
   animation here rather than on .update-time-overlay is what keeps it from
   playing on page load and finishing before the section is ever reached. */
.status-media.bars-run .update-time-overlay{
  animation-name:updateTimeWipe;
  animation-timing-function:cubic-bezier(.25,.46,.45,.94);
  animation-fill-mode:forwards;
}
@keyframes updateTimeWipe{
  0%  {clip-path:polygon(0 0, var(--from,55%) 0, var(--from,55%) 100%, 0 100%)}
  50% {clip-path:polygon(0 0, var(--mid,80%) 0, var(--mid,80%) 100%, 0 100%)}
  100%{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
}
@media (prefers-reduced-motion:reduce){
  /* Skip straight to the landed state — full-width bars, no wipe. */
  .update-time-overlay,
  .status-media.bars-run .update-time-overlay{animation:none;clip-path:none}
}

/* ---------- Case study covers ----------
   Layered composition: glass renders positioned around the card with the
   ormi x partner lockup centred on top. Sizes and positions from
   CaseStudies.tsx's imgArr. */
/* Layers are absolutely positioned, so the cover reserves height itself.
   Ratio comes from the base artwork upstream (case-img2.svg, 286x226). */
.case-cover .cl{position:absolute;object-fit:contain;max-width:100%;max-height:100%}
.cl-top-left{top:0;left:0}
.cl-top-right{top:0;right:0}
.cl-bottom-left{bottom:0;left:0}
.cl-bottom-right{bottom:0;right:0}
.cl-left-center{top:50%;left:0;transform:translateY(-50%)}
.cl-center{top:50%;left:50%;transform:translate(-50%,-50%);max-width:88%}

/* =========================================================
   Decorative floating shapes
   Soft glass forms in the page margins. Absolutely positioned
   against <main>, behind all content, and — as upstream —
   hidden below 1200px where they'd crowd the layout.
   ========================================================= */
.content{position:relative}

/* `.content > *` and `.decor-layer` are both (0,1,0), so whichever is
   declared last wins. The stacking rule was overriding the decor layer's
   position:absolute, turning it into a flex item — it then took up height
   AND earned a --section-gap, pushing the whole page down ~150px.
   Scoped as a child selector so it outranks the blanket rule. */
.content > .decor-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor{position:absolute;object-fit:contain}
.content > *{position:relative;z-index:1}
@media (max-width:1200px){.content > .decor-layer{display:none}}

.avail{width:20px;height:20px;display:inline-block}

.th-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:8px}
.field-with-icon{position:relative;display:block}
.field-with-icon img{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.6}
.field-with-icon input{padding-left:42px}

/* ---------- Pricing: closing contact block ---------- */
.pricing-contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--card);border-radius:var(--r-card);padding:60px 40px;width:100%}
.pc-copy h2{margin-bottom:24px}
.pc-copy .lede{color:var(--ink-2)}
.pc-art{width:100%;max-width:400px;height:auto;justify-self:center}
@media (max-width:1024px){.pricing-contact{grid-template-columns:1fr;padding:32px 24px}.pc-art{display:none}}

/* ---------- Product hero: notice bar + dashboard screenshots ---------- */
/* White card, left-aligned in the column (self-start), 628px cap, 45px icon.
   I had it centred with a green fill and a small icon — all three wrong. */
.hero-notice{display:flex;align-items:center;gap:16px;align-self:flex-start;
  background:var(--card);border-radius:var(--r-btn);padding:12px;
  max-width:628px;font-size:16px;font-weight:300;line-height:1.5;text-align:left}
.hero-notice img{width:45px;height:45px;flex:none}
.hero-notice a{text-decoration:underline}

/* Two overlapping dashboard shots — light behind, dark offset in front.
   Both are absolutely positioned, so they contribute NO height. The container
   has to reserve it or the next section renders on top.

   aspect-ratio, not a fixed min-height: the images are 776x429 (0.553 h/w) at
   62% of the container, and the lower one is offset 16% down, so the required
   height is 0.62 x 0.553 / (1 - 0.16) = 40.8% of the width. Expressed as a
   ratio it holds at every column width instead of only one. */
.hero-screens{position:relative;width:100%;margin-top:56px;aspect-ratio:2.45}
.hero-screens .hs{position:absolute;width:62%;height:auto;border-radius:12px}
.hero-screens .hs-1{top:0;left:0;z-index:0}
.hero-screens .hs-2{top:16%;right:0;z-index:1}
@media (max-width:1024px){
  .hero-screens{aspect-ratio:auto;display:flex;flex-direction:column;gap:16px}
  .hero-screens .hs{position:static;width:100%}
}

/* ---------- Launch steps, side-by-side variant (GraphLaunch) ---------- */
.steps-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;width:100%;margin-top:48px;text-align:left}
.steps-col{display:flex;flex-direction:column;gap:32px}
.steps-col .step{background:none;padding:0}
.steps-art{width:100%;height:auto}
@media (max-width:1024px){
  .steps-split{grid-template-columns:1fr;gap:32px}
}


/* =========================================================
   "Built for high-load" — packets running the rails

   The artwork is vector (designer export), so the green cubes
   ARE the animated elements rather than duplicates drawn over
   a flat image. Each one slides between the ends of the rail
   it already sits on; --from/--to are computed at build time
   from the real rail geometry.
   ========================================================= */
.hl-art{width:100%;height:auto;display:block}
.hl-pkt{
  animation:hl-run var(--dur,3.5s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
}
@keyframes hl-run{
  from{transform:translateX(var(--from,0))}
  to  {transform:translateX(var(--to,0))}
}
@media (prefers-reduced-motion:reduce){
  .hl-pkt{animation:none}
}

/* =========================================================
   0xGraph feature-card artwork

   Vector exports from the designer, animated in place — the
   moving element IS the element, never a copy drawn over a
   static one. Each animation starts from the position the
   export already has, so frame zero matches the still.
   ========================================================= */
.fa{width:100%;height:auto;display:block}

/* 1 — a band of light sweeps left to right across the field.
   --d follows each square's x position, written at build time, so the delay
   tracks the geometry rather than an arbitrary sequence. An earlier version
   scattered the offsets, which averaged out into a shimmer too faint to see. */
.sq{
  animation:fa-sweep 4s ease-in-out infinite;
  /* --d is a delay fraction written at build time: largest at the left edge,
     zero at the right. Negative delay advances the animation, so the biggest
     value peaks first — which is what makes the band travel left to right. */
  animation-delay:calc(var(--d, 0) * -4s);
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes fa-sweep{
  0%,55%,100%{opacity:.3;  transform:scale(.88)}
  18%        {opacity:1;   transform:scale(1.18)}
}

/* 2 — chart lines draw themselves, back panel first.
   pathLength="100" normalises the dash maths across three different paths. */
.dash-line{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:fa-draw 6s ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes fa-draw{
  0%{stroke-dashoffset:100}
  35%,85%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}

/* 3 — dots orbit the rings they already sit on. --delay is negative and
   derived from each dot's current angle, so nothing jumps on load. */
.orb-dot{
  offset-rotate:0deg;
  animation:fa-orbit var(--dur,24s) linear infinite;
  animation-delay:var(--delay,0s);
}
@keyframes fa-orbit{from{offset-distance:0%}to{offset-distance:100%}}

@media (prefers-reduced-motion:reduce){
  .sq,.dash-line,.orb-dot{animation:none}
  .dash-line{stroke-dashoffset:0}
}

/* =========================================================
   Security & compliance
   ========================================================= */
.security-hero{position:relative;z-index:0;overflow:visible;min-height:570px;padding:var(--space-5) 20px 0}
.security-hero-content{position:relative;z-index:1;width:min(900px,100%);margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
/* No caps anywhere on this page. The wide .14em tracking existed to open up
   uppercase micro-type; on sentence case it just looks stretched, so it drops
   to .02em and the size goes up a notch to hold the same optical weight. */
.security-hero .kicker{margin:0 0 var(--space-6);padding:7px 14px;background:#e2f0e6;border-color:#c2dfcb;color:#317247;font-size:11px;font-weight:var(--weight-semibold);line-height:1;letter-spacing:.02em}
.security-hero .kicker::before{content:"";display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;border-radius:50%;background:currentColor}
.security-hero h1{max-width:760px;margin:0}
.security-hero h1 span{color:var(--green)}
.security-hero .lede{max-width:650px;margin-top:var(--space-6);color:var(--mute);font-size:16px;line-height:1.5}
.security-hero-art{position:absolute;z-index:0;display:block;pointer-events:none;user-select:none}
.security-hero-art-left{width:298px;height:298px;left:-76px;top:0;opacity:.7}
.security-hero-art-right{z-index:2;width:500px;height:auto;right:0;top:320px;opacity:1}
.security-hero-actions{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-6);flex-wrap:wrap}
.security-hero-actions .btn{height:42px;padding-inline:20px;font-size:14px}
.security-hero-actions .ico{width:16px;height:16px;flex:none}
.security-hero-actions .btn:first-child{min-width:216px}
.security-hero-actions .btn:last-child{min-width:176px}
.security-trusted{position:relative;z-index:1;width:min(1360px,calc(100% - 40px));margin:66px auto 0}
.security-trusted img{width:100%;height:auto;mix-blend-mode:multiply}

.security-controls{position:relative;z-index:1;width:min(1296px,100%);margin-inline:auto}
.security-eyebrow{display:block;margin:0 0 var(--space-4);padding:0;border:0;background:transparent;color:#397854;font-size:12px;font-weight:var(--weight-medium);letter-spacing:.02em;line-height:1.2}
.security-eyebrow::before,.security-eyebrow::after{content:"";display:inline-block;width:14px;height:1px;margin:0 7px 3px;background:currentColor}
.security-section-head{max-width:600px;margin-bottom:48px}
.security-section-head .h-lg{margin:0;line-height:1.2}
.security-controls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.security-control-card{min-height:290px;padding:28px 24px;border:0;border-radius:16px;background:#f2f2f2;display:flex;flex-direction:column;align-items:flex-start}
.security-control-icon{width:42px;height:42px;display:grid;place-items:center}
.security-control-icon img{max-width:100%;max-height:100%;object-fit:contain}
.security-control-card h3{margin:28px 0 10px;font-size:15px;font-weight:500;line-height:1.25}
.security-control-card p{margin:0;font-size:12px;line-height:1.48;color:var(--mute)}

.security-wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
/* Infrastructure and compliance deliberately share one uninterrupted colour
   field, matching the supplied security-page art direction. */
.security-gradient-field{margin-top:calc(-1 * var(--section-gap) + var(--space-5));background:linear-gradient(180deg,#fafafa 0%,#d8e8e4 15%,#c4d8d2 40%,#bdd1cc 65%,#b9cbcc 85%,#b5c8c2 100%)}
.security-infrastructure{background:transparent;padding:80px 0 0;margin:0}
.security-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.security-stat{min-height:180px;padding:28px;border-radius:18px;background:#f7fbf9;display:flex;flex-direction:column;justify-content:space-between}
.security-stat strong{display:block;font-size:clamp(2.25rem,1.8rem + 1.3vw,3.25rem);font-weight:var(--weight-medium);letter-spacing:-.05em;line-height:1}
.security-stat span{max-width:240px;color:var(--mute);font-size:15px;line-height:1.45}
.security-infra-head{text-align:center;max-width:650px;margin:100px auto 56px}
.security-infra-head .h-lg{margin:0;line-height:1.16}
.security-infra-rows{display:flex;flex-direction:column;gap:16px;padding-bottom:var(--space-6)}
.security-infra-row{display:grid;grid-template-columns:42% 1fr;min-height:270px;border-radius:22px;overflow:hidden;background:#fff}
.security-infra-art{position:relative;min-height:100%;overflow:hidden;background:#fff}
.security-infra-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.security-infra-art::before,.security-infra-art::after,.security-infra-art i{content:"";position:absolute;display:block}
.security-infra-network::before{width:260px;height:260px;top:50%;left:50%;border:1px solid rgba(79,156,105,.42);border-radius:50%;transform:translate(-50%,-50%)}
.security-infra-network::after{width:150px;height:150px;top:50%;left:50%;border:1px solid rgba(79,156,105,.52);border-radius:50%;transform:translate(-50%,-50%)}
.security-infra-network i:nth-child(1),.security-infra-network i:nth-child(2),.security-infra-network i:nth-child(3){width:18px;height:18px;border-radius:50%;background:var(--green);box-shadow:0 0 0 8px rgba(79,156,105,.14)}
.security-infra-network i:nth-child(1){top:31%;left:26%}.security-infra-network i:nth-child(2){right:23%;bottom:28%}.security-infra-network i:nth-child(3){left:49%;bottom:20%}
.security-infra-failover::before{width:140px;height:140px;border:2px solid var(--green);border-left-color:transparent;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.security-infra-failover::after{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid var(--green);top:34%;left:56%;transform:rotate(45deg)}
.security-infra-failover i:nth-child(1),.security-infra-failover i:nth-child(2){width:58px;height:58px;border:1px solid rgba(79,156,105,.55);background:#fff;border-radius:14px;top:50%;transform:translateY(-50%)}
.security-infra-failover i:nth-child(1){left:18%}.security-infra-failover i:nth-child(2){right:18%}.security-infra-failover i:nth-child(3){width:46%;height:1px;background:var(--green);top:50%;left:27%}
.security-infra-monitoring::before{width:62%;height:46%;border:1px solid rgba(79,156,105,.6);border-radius:12px;top:27%;left:19%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.15))}
.security-infra-monitoring::after{width:48%;height:1px;left:26%;top:53%;background:var(--green);box-shadow:18px -26px 0 -0.4px var(--green),40px 14px 0 -.4px var(--green),78px -18px 0 -.4px var(--green),112px 8px 0 -.4px var(--green)}
.security-infra-monitoring i:nth-child(1){width:10px;height:10px;background:var(--green);border-radius:50%;top:31%;left:25%}.security-infra-monitoring i:nth-child(2){width:10px;height:10px;background:var(--green);border-radius:50%;right:25%;bottom:29%}.security-infra-monitoring i:nth-child(3){display:none}
.security-infra-copy{padding:48px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.security-infra-copy > span{font-size:14px;font-weight:var(--weight-medium);color:var(--green);letter-spacing:.06em}
.security-infra-copy h3{margin:var(--space-3) 0 var(--space-4);font-size:clamp(1.75rem,1.5rem + .55vw,2.4rem);font-weight:var(--weight-medium);letter-spacing:-.03em;line-height:1.15}
.security-infra-copy p{max-width:540px;margin:0;font-size:16px;line-height:1.55;color:var(--mute)}

.security-compliance{background:transparent;padding:var(--space-8) 0 104px;text-align:center}
.security-compliance .h-lg{margin:0;font-size:clamp(2rem,1.7rem + .8vw,2.75rem);line-height:1.12}
.security-compliance-sub{max-width:640px;margin:var(--space-5) auto calc(var(--space-8) + var(--space-1));color:#17211d;font-size:15px;line-height:1.5}
.security-audits{display:flex;flex-direction:column;gap:18px;text-align:left}
.security-audit-row{display:grid;grid-template-columns:122px minmax(0,1fr);gap:18px;align-items:stretch}
.security-audit-group{display:flex;align-items:flex-start;gap:8px;margin:24px 0 0;color:#17211d;font-size:13px;font-weight:600;line-height:1}.security-audit-group span{width:7px;height:7px;margin-top:2px;border-radius:50%}.security-audit-row.is-in-progress .security-audit-group span{background:#5aa774;box-shadow:0 0 0 3px rgba(90,167,116,.15)}.security-audit-row.is-planned .security-audit-group span{background:#f5f7f6;box-shadow:0 0 0 1px rgba(23,33,29,.1)}

/* "In progress" reads as live work, so its dots pulse. Only the green ones —
   Planned is a static grey dot and should stay still.
   Animating the halo (box-shadow spread) rather than opacity keeps the dot
   itself at full strength; a fading dot reads as a rendering fault, an
   expanding ring reads as a heartbeat. 2.4s is slow enough to notice without
   pulling the eye off the cards. */
@keyframes audit-pulse{
  0%   {box-shadow:0 0 0 3px rgba(90,167,116,.15)}
  55%  {box-shadow:0 0 0 7px rgba(90,167,116,0)}
  100% {box-shadow:0 0 0 3px rgba(90,167,116,0)}
}
.security-audit-row.is-in-progress .security-audit-group span{
  animation:audit-pulse 2.4s ease-out infinite;
}
/* The status pill's own dot is a ::before, so it pulses on the same clock. */
@keyframes audit-dot-pulse{
  0%,100%{opacity:1}
  50%    {opacity:.25}
}
.security-audit-card:not(.is-planned) .security-audit-status::before{
  animation:audit-dot-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .security-audit-row.is-in-progress .security-audit-group span,
  .security-audit-card:not(.is-planned) .security-audit-status::before{animation:none}
}
.security-audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.security-audit-card{position:relative;min-height:146px;padding:26px 28px;border:1px solid #4b9466;border-radius:14px;background:#fff}
.security-audit-card.is-planned{border-color:#629a70}.security-audit-status{position:absolute;right:28px;top:27px;display:inline-flex;height:24px;align-items:center;padding:0 10px;border:1px solid #b8d9c3;border-radius:999px;background:#f3faf5;color:#3c8757;font-size:11px;font-weight:500}.security-audit-status::before{content:"";width:4px;height:4px;margin-right:5px;border-radius:50%;background:currentColor}.security-audit-card.is-planned .security-audit-status{border-color:#e0e3e0;background:#f7f8f7;color:#949a96}
.security-audit-icon{display:block;width:28px;height:28px;color:#42935d}.security-audit-icon svg{display:block;width:24px;height:24px}.security-audit-icon.shield,.security-audit-icon.certificate{color:#42935d}.security-audit-icon.lock{color:#9f7acd}
.security-audit-card h3{margin:21px 0 6px;font-size:16px;font-weight:500;line-height:1.25}.security-audit-card p{margin:0;color:#7c817e;font-size:13px;line-height:1.45}

.security-report{margin-top:calc(-1 * var(--section-gap));padding:104px 20px;background:#fafafa url("/assets/security/report-background.png") center/cover no-repeat}
.security-report-inner{width:min(760px,100%);margin-inline:auto;text-align:center}
.security-report h2{margin:0;font-size:clamp(2rem,1.65rem + 1vw,3rem);letter-spacing:-.04em;line-height:1.1}.security-report p{max-width:600px;margin:var(--space-5) auto var(--space-6);color:var(--mute);line-height:1.55}
.security-report-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

.security-explore{width:min(1600px,calc(100% - 40px));margin-inline:auto;text-align:center}.security-explore .h-lg{margin:0;line-height:1.16}.security-explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:78px;text-align:left}
.security-explore-card{position:relative;min-height:194px;padding:30px;border:0;border-radius:16px;background:#f0f0f0;display:block;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}.security-explore-card:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}.security-explore-icon{display:flex;align-items:center;width:34px;height:34px}.security-explore-icon img{display:block;max-width:34px;max-height:34px;width:auto;height:auto}.security-explore-arrow{position:absolute;top:32px;right:30px;display:grid;place-items:center;width:30px;height:30px;border:1px solid #c8cbcb;border-radius:50%;color:#8f9292}.security-explore-arrow svg{width:16px;height:16px}.security-explore-card h3{margin:19px 0 10px;font-size:17px;font-weight:400;line-height:1.25}.security-explore-card p{margin:0;max-width:420px;font-size:15px;line-height:1.5;color:#898d8d}

@media (max-width:1024px){
  .security-logos{grid-template-columns:repeat(5,minmax(0,1fr))}
  .security-controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .security-audit-row{grid-template-columns:104px minmax(0,1fr)}
  .security-infra-row{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .security-hero{min-height:0;padding:24px 16px 0}.security-hero .lede{margin-top:var(--space-5)}.security-trusted{width:100%;margin-top:56px}.security-hero-art-left{left:-170px;top:0}.security-hero-art-right{width:260px;height:auto;right:0;top:280px}
  .security-section-head{margin-bottom:32px}.security-controls-grid,.security-stats,.security-explore-grid{grid-template-columns:1fr}.security-audit-row,.security-audit-grid{grid-template-columns:1fr}.security-audit-group{margin:8px 0}.security-control-card{min-height:auto;padding:22px}.security-control-card h3{margin-top:22px}
  .security-wrap{width:min(100% - 32px,1200px)}.security-infrastructure{padding-top:56px}.security-stats{gap:12px}.security-stat{min-height:148px;padding:22px}.security-infra-head{margin:72px auto 36px}.security-infra-rows{padding-bottom:64px}.security-infra-row{grid-template-columns:1fr}.security-infra-art{min-height:180px}.security-infra-copy{padding:32px 24px}.security-compliance{padding-bottom:72px}.security-audit-card{min-height:160px}.security-report{padding:72px 16px}.security-explore-grid{margin-top:32px}
}

/* =========================================================
   /ormi-vs-goldsky — comparison landing page

   Built from a flattened Figma export ("Comparison page 2026 Mar v3 1920"),
   in which all text was outlined to paths. Every measurement here was taken
   off the rendered artwork at 1920 rather than read from the file.

   The page runs on a 1456px column with its own vertical rhythm, so meta.md
   sets --section-gap:0 and each section carries its own padding.
   ========================================================= */

.vs-accent{color:#4E9463}
.vs-hero-field,
.vs-white-field,
.vs-grey-field,
.vs-band,
.vs-scale-field{--vs-content-width:min(var(--max),calc(100vw - 40px))}
.vs-kicker{
  font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:none;
  color:#4E9463;text-align:center;margin-bottom:16px;
}

/* ---------- hero ---------- */
.vs-hero{
  position:relative;display:flex;flex-direction:column;align-items:center;
  /* The design leaves 238px between the CTAs and the mosaic, but it fills that
     space with glass fragments on the left. Without them it reads as dead
     space, so the hand-off is tightened: 56px here plus the mosaic's own 64px
     top padding gives 120px, down from 184px. */
  text-align:center;padding:24px 0 56px;
}
.vs-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tag);color:#3D6B49;border-radius:var(--r-pill);
  padding:6px 14px;margin-bottom:32px;
  font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;align-self:center;
}
.vs-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#4E9463}
.vs-hero h1{
  font-size:clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  font-weight:600;line-height:1.2;letter-spacing:-.02em;margin-bottom:20px;
}
.vs-hero .lede{font-size:17px;color:var(--mute);max-width:620px;margin-bottom:36px}
/* The hero artwork lives on a viewport-level layer, independently of the
   content column. Do not clip this wrapper: the original glass object is a
   complete floating render, not a cropped edge decoration. */
.vs-hero-field{position:relative;overflow:visible}
.vs-hero-field > .vs-hero{position:relative;z-index:1}
.vs-hero-art{position:absolute;height:auto;pointer-events:none;z-index:0}
.vs-hero-art-right{
  width:clamp(260px,18vw,340px);
  right:clamp(16px,2vw,40px);
  top:-76px;
  opacity:.26;
  filter:saturate(.72);
}

/* ---------- voices mosaic ---------- */
.vs-voices{background:#FAFAFA;padding:64px 0 80px}
.vs-voices-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  width:min(var(--max),calc(100vw - 40px));max-width:none;margin-inline:auto;padding-inline:0;
}
/* Two halves, each with its own row heights — the design's right column does
   not line up with the left, so one shared grid cannot express it. */
.vs-voices-left{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;isolation:isolate}
.vs-voices-right{display:flex;flex-direction:column;gap:16px}
.vs-voices-right > .is-grow{flex:1}
/* Spans the left block's two columns. */
.vs-voices-left > .is-wide{grid-column:1 / -1}
.vs-tile{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  background:#F2F2F2;border-radius:16px;min-height:210px;padding:24px;
}
/* Logo with no card behind it — sits directly on the section background. */
.vs-tile.is-bare{background:none;padding:0}

.vs-voices-art{
  /* It floats above the card surface but remains behind the logo artwork,
     matching the source rather than being clipped into either card. */
  position:absolute;z-index:3;pointer-events:none;
  width:clamp(720px,55vw,1057px);height:auto;
  left:clamp(-390px,-21vw,-240px);top:-96px;
  opacity:.3;
}
.vs-tile img{position:relative;z-index:4;max-width:70%;height:auto;max-height:52px;object-fit:contain}
/* The logo tile stays grounded. Its customer story rises from below the card
   surface on hover/focus, which is calmer than an abrupt 3D card flip. */
.vs-reveal-card{
  position:relative;z-index:2;min-height:210px;overflow:hidden;margin:0;
  border-radius:16px;outline:none;
}
.vs-reveal-front{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#F2F2F2;padding:24px;
}
.vs-reveal-front img{max-width:70%;height:auto;max-height:52px;object-fit:contain}
/* The supplied Balancer asset uses a champagne fill. The comparison mosaic
   uses monochrome partner marks, so render it in the same black treatment. */
/* Balancer's mark is a 106x20 lockup — a wider, shorter aspect than the
   other partners — so the shared 70%/52px cap rendered it noticeably
   smaller. Given its own cap: 202x38px against Ostium's 141x23. */
.vs-reveal-front img[src$="balancer.svg"]{max-width:100%;max-height:72px;filter:brightness(0)}
.vs-reveal-panel{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;background:var(--ink);color:#fff;padding:20px 22px;margin:0;
  transform:translateY(100%);transition:transform .48s cubic-bezier(.2,.75,.25,1);
}
.vs-reveal-card:hover .vs-reveal-panel,.vs-reveal-card:focus .vs-reveal-panel,.vs-reveal-card:focus-within .vs-reveal-panel{transform:translateY(0)}
.vs-reveal-card:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.vs-quote{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  background:var(--ink);color:#fff;border-radius:16px;padding:28px 32px;margin:0;
}
/* No line clamp. It was capping the panel at four lines, which silently cut
   the end off any longer quote — the Pendle one lost half its text. Set a
   size that fits the longest quote in the block instead, with overflow as a
   last-resort valve rather than a truncation. */
.vs-reveal-panel p{font-size:13px;line-height:1.45;overflow:auto}
.vs-quote p{font-size:16px;line-height:1.55}
.vs-story-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.vs-story-footer cite{font-size:14px;font-style:normal;color:rgba(255,255,255,.75)}
.vs-reveal-panel .vs-story-footer{align-items:flex-start;flex-direction:column;gap:8px}
.vs-story-link{
  display:inline-flex;align-items:center;gap:8px;flex:none;border-radius:8px;
  background:var(--green);color:#fff;padding:9px 12px;font-size:13px;font-weight:600;
  line-height:1;text-decoration:none;transition:filter .2s ease,transform .2s ease;
}
.vs-story-link:hover{color:#fff;filter:brightness(.94);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.vs-reveal-panel,.vs-story-link{transition:none}}

/* ---------- six reason cards ---------- */
.vs-reasons{display:flex;flex-direction:column;align-items:center;padding:100px 0}
.vs-reasons h2{text-align:center;margin-bottom:56px;line-height:1.25}
.vs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}
/* The last two centre themselves under the row of four. */
.vs-cards > :nth-child(5){grid-column:2}
.vs-card{
  display:flex;flex-direction:column;
  background:#F2F2F2;border-radius:16px;padding:28px 24px 32px;
}
.vs-card-icon{display:block;width:24px;height:24px;color:var(--ink);margin-bottom:36px}
.vs-card-icon svg{width:100%;height:100%;display:block}
.vs-card h3{font-size:15px;font-weight:600;line-height:1.4;margin-bottom:10px;color:var(--ink)}
.vs-card p{font-size:14px;line-height:1.55;color:var(--mute)}

/* ---------- comparison table ---------- */
/* Background fields.
   Each is a full-bleed wrapper with a capped inner column, the same shape the
   /security page uses for .security-gradient-field. Sampling the design's
   backdrop down its length gives these stops; a CSS gradient rather than the
   exported raster, so it scales to any section height without stretching.

   Page backdrop, top to bottom:
     hero + voices   #FAFAFA (page default)
     reasons         #FFFFFF
     table -> scale  the green wash below
     FAQ             #F2F2F2
     explore         #FFFFFF   */
.vs-white-field{background:#FFFFFF}
.vs-grey-field{background:#F2F2F2}
.vs-faq-field .faq.pricing-section{gap:72px;padding-top:112px;padding-bottom:128px}
.vs-explore-field{padding:112px 0 80px;background:#fff}
.vs-explore-field .security-explore{width:min(var(--max),calc(100vw - 40px))}
.vs-explore-field .security-eyebrow{text-transform:none;letter-spacing:.04em}
/* ONE wash across "Why Ormi?", the reason cards and the comparison block —
   everything from that heading down to the section before the FAQ.
   Stops supplied by design; identical to .security-gradient-field, so the two
   pages share one wash rather than drifting apart.

   These used to be three separately-coloured fields: a gradient, a fade back
   to white, then the gradient starting over. The three now sit inside this
   wrapper with transparent backgrounds of their own. */
.vs-wash{
  background:linear-gradient(180deg,
    #FAFAFA 0%, #D8E8E4 15%, #C4D8D2 40%, #BDD1CC 65%, #B9CBCC 85%, #B5C8C2 100%);
}
.vs-wash > .vs-scale-field,
.vs-wash > .vs-white-field,
.vs-wash > .vs-band{background:none}
/* Inner columns. These sections are no longer direct children of .content,
   so `.content > section{max-width:var(--max)}` does not reach them and each
   field has to cap its own content. */
.vs-hero-field > .vs-hero,
.vs-white-field > *,
.vs-grey-field > *,
.vs-band-inner,.vs-scale-inner{
  width:var(--vs-content-width);max-width:none;margin-inline:auto;padding-inline:0;
  display:flex;flex-direction:column;
}

/* Keep the comparison aligned to the site's shared 1200px content column. */
.content > .vs-explore{
  width:min(var(--max),calc(100vw - 40px));max-width:none;
}

.vs-compare{padding:40px 0 48px}
.vs-table-scroll{overflow-x:auto;border-radius:16px}
.vs-table{width:100%;min-width:760px;border-collapse:collapse;background:#FCFCFC;border-radius:16px;overflow:hidden}
.vs-table th,.vs-table td{padding:18px 24px;text-align:left;vertical-align:middle}
.vs-table thead th{font-size:16px;font-weight:500;background:#EFEFEF;color:var(--ink)}
.vs-table thead .vs-col-ormi{background:#4E9463;color:#fff}
.vs-table thead .vs-col-them{color:var(--mute)}
.vs-table tbody th{width:28%;font-size:16px;font-weight:600;color:var(--ink)}
.vs-table tbody tr{border-bottom:1px solid #ECECEC}
.vs-table tbody tr:last-child{border-bottom:0}
/* The Ormi column is tinted the whole way down; Goldsky's is muted. */
.vs-table td.vs-col-ormi{background:#F4FAF6;width:34%}
.vs-table td.vs-col-them{color:var(--mute-2);width:34%}
.vs-cell{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.45}
.vs-cell .ico-check,.vs-cell .ico-cross{flex:none}
.vs-col-them .vs-cell{color:var(--mute-2)}
.vs-col-them .vs-cell .ico-check{opacity:.45}

/* ---------- architecture ---------- */
.vs-arch{display:flex;flex-direction:column;align-items:center;padding:48px 0 84px}
.vs-arch h2{text-align:center;margin-bottom:14px}
.vs-arch-sub{font-size:15px;color:var(--ink);text-align:center;margin-bottom:52px}
.vs-arch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%}
.vs-arch-card{background:var(--card);border-radius:16px;padding:32px 34px 36px}
/* Ormi's card is tinted and outlined; Goldsky's is plain white. */
.vs-arch-card.is-ormi{background:#F6FBF7;border:1px solid #D8EADD}
.vs-brand{display:flex;align-items:center;margin-bottom:22px}
.vs-brand img{height:30px;width:auto}
.vs-brand-goldsky{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.vs-brand-goldsky svg{width:32px;height:32px;flex:none}
.vs-arch-card h3{font-size:20px;font-weight:600;line-height:1.35;margin-bottom:6px;color:var(--ink)}
.vs-arch-note{font-size:13px;color:var(--mute);margin-bottom:24px}
.vs-arch-card ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:14px}
.vs-arch-card li{font-size:14px;line-height:1.55;color:var(--ink)}

/* ---------- production scale ---------- */
.vs-scale{display:flex;flex-direction:column;align-items:center;padding:76px 0 88px}
.vs-scale h2{text-align:center;margin-bottom:48px;line-height:1.25}
.vs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}
.vs-stat{background:var(--card);border-radius:16px;padding:26px 28px 30px}
.vs-stat-value{
  display:flex;align-items:center;gap:6px;
  font-size:34px;font-weight:500;line-height:1.1;color:var(--ink);margin-bottom:8px;
}
.vs-stat-arrow{font-size:20px;color:#4E9463}
.vs-stat-label{font-size:14px;color:var(--mute)}

.vs-customers{display:flex;flex-direction:column;align-items:center;padding:72px 0 96px}
.vs-cust-heading{margin:0 0 52px}
.vs-cust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.vs-cust{background:var(--card);border-radius:16px;padding:28px 30px 32px}
.vs-cust-logo{height:22px;width:auto;max-width:150px;object-fit:contain;margin-bottom:26px;opacity:.85}
.vs-cust-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.vs-cust-figure{font-size:30px;font-weight:500;line-height:1.1;color:#4E9463;margin-bottom:14px}
.vs-cust-body{font-size:13px;line-height:1.55;color:var(--mute)}

/* ---------- closing CTA ---------- */
.vs-cta{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:110px var(--gutter);
  background-repeat:no-repeat;background-size:cover;background-position:center;
}
.vs-cta h2{margin-bottom:16px}
.vs-cta > p{font-size:15px;color:var(--ink);max-width:680px;margin-bottom:32px}

/* ---------- explore cards ---------- */
.vs-explore{display:flex;flex-direction:column;align-items:center;padding:100px 0 110px}
.vs-explore h2{text-align:center;margin-bottom:52px}
.vs-explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.vs-explore-card{
  display:flex;flex-direction:column;
  background:#F2F2F2;border-radius:16px;padding:22px 24px 28px;
  transition:background .2s ease;
}
.vs-explore-card:hover{background:#EBEBEB}
.vs-explore-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.vs-explore-icon{width:22px;height:22px;color:var(--ink)}
.vs-explore-icon svg{width:100%;height:100%;display:block}
.vs-explore-arrow{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;border:1px solid var(--mute-2);color:var(--mute);
}
.vs-explore-arrow svg{width:12px;height:12px}
.vs-explore-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.vs-explore-body{font-size:13px;line-height:1.55;color:var(--mute)}

/* ---------- breakpoints ---------- */
@media (min-width:1201px) and (max-width:1440px){
  .vs-hero-art-right{width:220px;right:-8px;top:-44px}
  /* Logo with no card behind it — sits directly on the section background. */
.vs-tile.is-bare{background:none;padding:0}

.vs-voices-art{width:580px;left:-300px;top:-72px}
}
@media (max-width:1200px){
  .vs-cards{grid-template-columns:repeat(2,1fr)}
  .vs-cards > :nth-child(5){grid-column:auto}
  .vs-stats{grid-template-columns:repeat(2,1fr)}
  .vs-cust-grid{grid-template-columns:repeat(2,1fr)}
  .vs-hero-art,/* Logo with no card behind it — sits directly on the section background. */
.vs-tile.is-bare{background:none;padding:0}

.vs-voices-art{display:none}
}
@media (max-width:1024px){
  .vs-arch-grid,.vs-explore-grid{grid-template-columns:1fr}
  .vs-voices-inner{grid-template-columns:1fr}
}
@media (max-width:768px){
  .vs-cards,.vs-stats,.vs-cust-grid,.vs-voices-left{grid-template-columns:1fr}
  .vs-hero{padding-bottom:72px}
  .vs-reasons,.vs-explore{padding:64px 0}
  .vs-cta{padding:72px var(--gutter)}
  .vs-explore-field{padding:72px 0 80px}
  .vs-cust-heading{margin-top:64px}
}