/* ============================================================
   NEXI — shared design system  ·  "Dark Editorial"
   A near-black publication, not a SaaS template. No card grids,
   no decoration. Large sparse serif, ruled index lists, the
   signed receipt as the one object. Restraint is the brief.
   Cool graphite ground; the family colour shows only as marks.
   Mobile-first; 320px is first-class.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
em,i,cite,q,address{font-style:normal}

:root{
  /* ---- ground — near-black, cool (brand guidelines) ---- */
  --bg:#0D0E11;
  --bg-2:#121419;
  --surface:#171A20;

  /* ---- ink — cool soft white, never pure white (brand guidelines) ---- */
  --ink:#E7E8EC;
  --ink-2:#9A9DA6;
  --ink-3:#696D77;
  --ink-4:#42454D;

  /* ---- hairlines — the only structure ---- */
  --rule:rgba(232,233,237,.12);
  --rule-soft:rgba(232,233,237,.055);
  --rule-strong:rgba(232,233,237,.26);

  /* ---- house accent — striking blue-gray slate ---- */
  --accent:#8E9ABA;
  --accent-hi:#B6BFD7;
  --accent-dim:rgba(142,154,186,.15);

  /* ---- the family — green Verify · deep-pink Spectra · blue Horizon ---- */
  --c-verify:#5FB585;
  --c-verify-hi:#6FE7BE;
  --c-verify-dim:rgba(95,181,133,.13);
  --c-verify-wash:rgba(95,181,133,.05);
  --c-spectra:#DB3D80;
  --c-spectra-hi:#EC7FAC;
  --c-spectra-dim:rgba(219,61,128,.14);
  --c-spectra-wash:rgba(219,61,128,.055);
  --c-horizon:#5E9DF5;
  --c-horizon-hi:#92BDF9;
  --c-horizon-dim:rgba(94,157,245,.14);
  --c-horizon-wash:rgba(94,157,245,.055);

  /* ---- product accent — the HOUSE wears its own slate, never a product colour.
         green/pink/blue belong to the products; this page is the calm container.
         (Verify-only override is re-scoped onto .receipt below.) ---- */
  --pa:#8E9ABA;
  --pa-hi:#B6BFD7;
  --pa-dim:rgba(142,154,186,.15);
  --pa-wash:rgba(142,154,186,.06);

  --wrap:1060px;
  --gut:32px;
  --nav-h:62px;
  --ease:cubic-bezier(.2,.65,.2,1);

  /* ---- type — Syne carries the NEXI house wordmark. all three
     products share ONE wide display voice: Archivo Expanded. ---- */
  --font-house:'Syne',system-ui,sans-serif;
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-product:'Archivo','Hanken Grotesk',sans-serif;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
}
html,body{background:var(--bg);color:var(--ink)}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;min-height:100vh;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{-webkit-tap-highlight-color:transparent;font:inherit}
a:focus-visible,button:focus-visible{
  outline:1px solid var(--accent);outline-offset:4px;
}
img{display:block;max-width:100%}
svg{display:block}
::selection{background:rgba(232,233,237,.15);color:var(--ink)}

/* ---- a whisper of edge depth, nothing more ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(150% 100% at 50% 0%,transparent 58%,rgba(0,0,0,.42) 100%);
}

/* ---- document margin frame removed (faint side rules read as stray lines) ---- */
.frame{display:none}

/* ============================================================
   TYPE
   ============================================================ */
.display{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;
  font-weight:400;line-height:1.0;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance;
}
.title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;
  font-weight:400;font-size:clamp(30px,4.6vw,54px);line-height:1.08;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance;
}
.title .am{color:var(--accent)}
.lead{
  font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;
  color:var(--ink-2);text-wrap:pretty;font-weight:400;
}

/* ---- register line — mono, the running header ---- */
.reg{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.reg .no{color:var(--accent)}
.reg.center{justify-content:center}

/* ============================================================
   ACTIONS — no filled pills
   ============================================================ */
.act{
  display:inline-flex;align-items:center;gap:11px;
  font-family:'IBM Plex Mono',monospace;font-weight:400;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);padding:15px 24px;
  border:1px solid var(--rule-strong);border-radius:2px;
  background:transparent;cursor:pointer;white-space:nowrap;min-height:50px;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.act:hover{border-color:var(--ink);background:rgba(232,233,237,.04)}
.act.pri{border-color:var(--pa);color:var(--pa-hi)}
.act.pri:hover{border-color:var(--pa-hi);background:var(--pa-dim)}
.act .arw{transition:transform .35s var(--ease)}
.act:hover .arw{transform:translateX(4px)}

/* text link with a drawn underline */
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  padding:8px 0;position:relative;min-height:40px;
  transition:color .3s var(--ease);
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.tlink:hover{color:var(--ink)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arw{transition:transform .3s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

.actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* ============================================================
   LAYOUT
   ============================================================ */
main{position:relative;z-index:1}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(45px,5.6vw,77px) var(--gut);position:relative;
}
.sec.tight{padding-top:clamp(40px,6vw,76px)}

/* section opener — a hairline carrying the register, then the title */
.lede{margin-bottom:clamp(38px,5.5vw,70px)}
.lede .bar{
  border-top:1px solid var(--rule);padding-top:16px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,34px);
}
.lede .bar .tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.lede .lead{margin-top:18px;max-width:560px}

/* ---- reveal — slow, unhurried ---- */
.rv{opacity:0;transform:translateY(15px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}

/* ============================================================
   HERO — type-led, anchored, void around it
   ============================================================ */
.hero{
  position:relative;
  min-height:min(92vh,860px);display:flex;align-items:flex-end;
}
.hero-in{
  max-width:var(--wrap);margin:0 auto;width:100%;
  padding:clamp(110px,17vh,220px) var(--gut) clamp(60px,9vw,104px);
}
.hero .reg{margin-bottom:clamp(26px,4vw,40px)}
.hero h1{
  font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(46px,9vw,124px);line-height:.98;letter-spacing:-.03em;
  color:var(--ink);max-width:13ch;
}
.hero h1 .vf{color:var(--pa)}
/* a product name set inside the hero headline — the brand, stamped in */
.bw-verify{font-family:var(--font-product);font-weight:700;font-stretch:125%;font-size:.74em;letter-spacing:-.005em;color:var(--pa)}
.hero-sub{
  margin-top:clamp(24px,3.4vw,36px);max-width:480px;
  font-size:clamp(15.5px,1.6vw,18px);line-height:1.6;color:var(--ink-2);
  text-wrap:pretty;
}
.hero .actions{margin-top:clamp(28px,3.8vw,42px)}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .reg{animation:rise .9s .05s both var(--ease)}
.hero h1{animation:rise 1.15s .16s both var(--ease)}
.hero-sub{animation:rise 1.05s .42s both var(--ease)}
.hero .actions{animation:rise 1.05s .58s both var(--ease)}

/* ---- atmos — receipt motion band (full-frame 16:9, centered) ---- */
.atmos-sec{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.atmos{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule);border-radius:6px;background:#000;box-shadow:0 40px 90px -50px rgba(0,0,0,.82)}
.atmos::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(231,232,236,.05)}
.atmos-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* the receipt video, relocated into the type-led hero — held narrow so the void survives */
/* hero video — fills the full content frame, borderless / seamless */
.hero-atmos{
  /* --hero-bleed must track the ACTUAL hero-in gutter at every breakpoint,
     or the full-bleed video over-extends past the viewport edges and forces
     horizontal overflow on mobile (gut drops to 22/17 below). */
  --hero-bleed:var(--gut);
  max-width:none;
  width:calc(100% + var(--hero-bleed) * 2);
  margin-left:calc(-1 * var(--hero-bleed));margin-right:calc(-1 * var(--hero-bleed));
  margin-top:clamp(34px,5vw,56px);
  border:0;border-radius:0;box-shadow:none;background:transparent;
  scroll-margin-top:calc(var(--topbar-h,64px) + 16px);
  animation:rise 1.05s .72s both var(--ease);
  /* feather all four edges so the video dissolves into the page ground */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite:intersect;
}
.hero-atmos::after{display:none}
@media (max-width:720px){.hero-atmos{
  --hero-bleed:22px;
  /* FRAME 2 on mobile: the video gets its own tall screen below the hero copy,
     full-bleed to both edges (side feather dropped), object-fit:cover keeps the
     receipt centered. */
  aspect-ratio:auto;
  height:64svh;min-height:400px;
  margin-top:clamp(12px,3.5vw,20px);
  margin-bottom:clamp(30px,9vw,48px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}}
@media (max-width:430px){.hero-atmos{--hero-bleed:17px;height:60svh}}

/* ---- teaser hero (spectra / horizon — the word) ---- */
.thero{
  position:relative;
  min-height:min(94vh,900px);display:flex;align-items:center;
}
.thero-in{
  max-width:var(--wrap);margin:0 auto;width:100%;
  padding:clamp(120px,16vh,200px) var(--gut);
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.thero .reg{margin-bottom:clamp(30px,5vw,52px);animation:rise .9s .05s both var(--ease)}
.thero .word{
  font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(72px,18vw,210px);line-height:.9;letter-spacing:-.045em;
  color:var(--ink);animation:rise 1.15s .16s both var(--ease);
}
/* each teaser leads with its product name in the shared wide voice */
.word.word-spectra,.word.word-horizon{
  font-family:var(--font-product);font-weight:700;font-stretch:125%;
  font-size:clamp(54px,12.5vw,150px);letter-spacing:-.005em;line-height:.95;
}
.thero-sub{
  margin-top:clamp(28px,4vw,44px);max-width:500px;
  font-size:clamp(15.5px,1.6vw,18px);line-height:1.6;color:var(--ink-2);
  text-wrap:pretty;animation:rise 1.05s .42s both var(--ease);
}
.thero .actions{margin-top:clamp(28px,3.8vw,40px);justify-content:center;animation:rise 1.05s .58s both var(--ease)}

/* ---- page hero (team) ---- */
.phero{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(96px,15vh,170px) var(--gut) clamp(34px,5vw,56px);
}
.phero .reg{margin-bottom:clamp(22px,3.4vw,32px)}
.phero h1{
  font-family:'Fraunces',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(48px,8vw,110px);line-height:.98;letter-spacing:-.03em;color:var(--ink);
}
.phero .lead{margin-top:22px;max-width:440px;text-wrap:pretty}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:relative;z-index:60;        /* unfrozen — scrolls away with the page */
  background:transparent;
}
.nav-in{
  max-width:var(--wrap);margin:0 auto;
  padding:14px var(--gut);
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 26px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;flex:none}
/* the wordmark — a pure type mark, no icon. on a product site a
   quiet NEXI tag sits over the product name; the house stands alone. */
.lockup{display:flex;flex-direction:column;gap:3px}
.wm-house{font-family:var(--font-house);font-weight:800;color:var(--ink);line-height:1}
.wm-house.lg{font-size:16px;letter-spacing:.2em}
.wm-house.tag{
  font-size:8.5px;letter-spacing:.36em;color:var(--ink-3);
  transition:color .3s var(--ease);
}
.wm-prod{font-weight:800;color:var(--ink);line-height:1;transition:color .3s var(--ease)}
.wm-verify,.wm-spectra,.wm-horizon{
  font-family:var(--font-product);font-weight:700;font-size:17.5px;
  font-stretch:125%;letter-spacing:.03em;
}
.brand:hover .wm-prod{color:var(--pa-hi)}
.brand:hover .wm-house.tag{color:var(--ink-2)}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center}
.nav-links a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  padding:9px 14px;white-space:nowrap;transition:color .3s var(--ease);
  display:inline-flex;align-items:center;
}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a .ndot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--mk,var(--accent));margin-right:7px;flex:none;
}
.nav-cta{
  flex:none;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pa);
  display:inline-flex;align-items:center;gap:8px;padding:9px 2px;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-cta:hover{color:var(--pa-hi)}
.nav-cta .arw{transition:transform .3s var(--ease)}
.nav-cta:hover .arw{transform:translateX(3px)}

/* ---- mobile menu toggle — hidden on desktop, hamburger on mobile ---- */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:1px solid var(--rule-strong);border-radius:3px;
  background:transparent;cursor:pointer;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.nt-bars,.nt-bars::before,.nt-bars::after{
  display:block;width:18px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease),background .2s var(--ease);
}
.nt-bars{position:relative}
.nt-bars::before,.nt-bars::after{content:"";position:absolute;left:0}
.nt-bars::before{top:-6px}
.nt-bars::after{top:6px}
.nav.open .nt-bars{background:transparent}
.nav.open .nt-bars::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nt-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   THE INDEX — ruled lists, the structural workhorse
   (replaces every card grid)
   ============================================================ */
.index{}
.irow{
  display:grid;grid-template-columns:46px 1fr auto;
  gap:10px 30px;align-items:center;
  padding:clamp(26px,3.4vw,40px) 6px;
  border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease),padding-left .4s var(--ease);
}
a.irow:hover{background:rgba(232,233,237,.022);padding-left:14px}
.inum{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--ink-3);align-self:start;padding-top:7px;
}
.imain{min-width:0}
.iname{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(26px,3.6vw,44px);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);display:flex;align-items:center;gap:13px;
}
.iname .dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--mk,var(--accent));
}
/* product names in the family index — the shared wide voice, one
   size; the colour dot is what tells the three apart */
.iname.pf-verify,.iname.pf-spectra,.iname.pf-horizon{
  font-family:var(--font-product);font-weight:700;font-stretch:125%;
  font-size:clamp(21px,2.9vw,35px);letter-spacing:.012em;
}
.itag{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-3);margin-top:11px;
}
.idesc{
  font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:12px;
  max-width:62ch;text-wrap:pretty;
}
.iend{
  display:flex;align-items:center;gap:18px;justify-self:end;
}
.istate{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.istate.on{color:var(--pa)}
.iarw{
  font-size:18px;color:var(--ink-3);transition:transform .4s var(--ease),color .4s var(--ease);
}
a.irow:hover .iarw{transform:translateX(5px);color:var(--ink)}

/* compact index — properties / smaller rows */
.index.compact .irow{padding:clamp(22px,2.8vw,30px) 6px}
.index.compact .iname{font-size:clamp(20px,2.2vw,25px)}

/* price column */
.iprice{
  font-family:'Fraunces',serif;font-weight:400;font-size:clamp(20px,2.3vw,27px);
  color:var(--ink);white-space:nowrap;letter-spacing:-.01em;
}
.iflag .iprice{color:var(--pa)}
.iflag{background:var(--pa-wash)}
.iftag{
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  color:var(--pa);border:1px solid var(--pa);border-radius:2px;
  padding:3px 7px;margin-left:11px;vertical-align:middle;white-space:nowrap;
}
.igate{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}

/* ============================================================
   STATEMENT — a large serif line, alone
   ============================================================ */
.statement{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(23px,3.6vw,44px);line-height:1.22;letter-spacing:-.018em;
  color:var(--ink);max-width:20ch;text-wrap:balance;
}
.statement.wide{max-width:26ch}
.statement b{color:var(--pa);font-weight:400}
.statement .q{color:var(--ink-3)}

/* a tiny labelled note */
.note{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.75;
  color:var(--ink-3);max-width:64ch;text-wrap:pretty;
}
.note b{color:var(--ink-2);font-weight:400}

/* ============================================================
   THE RECEIPT — the one object
   ============================================================ */
.receipt{
  /* an embedded NEXI Verify artifact — it keeps Verify's green seal even on the
     house page, where every other surface speaks in the house slate */
  --pa:var(--c-verify);--pa-hi:var(--c-verify-hi);
  --pa-dim:var(--c-verify-dim);--pa-wash:var(--c-verify-wash);
  position:relative;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--rule-strong);border-radius:3px;
  box-shadow:0 50px 90px -50px #000,0 1px 0 rgba(232,233,237,.03) inset;
  max-width:436px;width:100%;
}
.receipt.solo{margin:0 auto}
.receipt-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 19px;border-bottom:1px solid var(--rule);
}
.receipt-id{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.receipt-seal{width:38px;height:38px;flex:none}
.receipt-body{padding:8px 19px 10px}
.rr{
  display:grid;grid-template-columns:78px 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--rule-soft);
  font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;
}
.rr:last-child{border-bottom:0}
.rk{color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;font-size:10px;padding-top:2px}
.rv-{color:var(--ink-2);word-break:break-word}
.rv- .ok{color:var(--pa);margin-right:4px}
.rv-[data-hash]{color:var(--ink)}
.receipt-foot{
  position:relative;padding:14px 19px 17px;border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.receipt-foot::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:radial-gradient(circle at center,var(--bg) 0 2px,transparent 2.4px);
  background-size:11px 4px;background-position:center top;
}
.receipt-status{
  display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pa);
}
.receipt-status .dot{width:6px;height:6px;border-radius:50%;background:var(--pa);flex:none}
.receipt-status.pending{color:var(--ink-3)}
.receipt-status.pending .dot{background:var(--ink-3);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.receipt-meta{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.09em;color:var(--ink-4);
}

/* receipt presented as a full moment */
.object{
  display:grid;grid-template-columns:1fr 436px;
  gap:clamp(40px,7vw,90px);align-items:center;
}
.object .copy{max-width:420px}
.object .copy .statement{margin-bottom:22px}

/* the engraved seal */
.seal{flex:none;color:var(--pa)}
.seal .tick-ring{stroke-dasharray:.6 2.55}

/* ============================================================
   TEAM
   ============================================================ */
.founders{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);position:relative;
}
/* the family thread — green · pink · blue, drawn once across the top */
.founders::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,
    transparent 6%,var(--c-verify) 27%,var(--c-spectra) 50%,
    var(--c-horizon) 73%,transparent 94%);
  opacity:.8;
}
.fcard{
  background:var(--bg);padding:32px 28px;
  display:flex;flex-direction:column;gap:20px;
  transition:background .4s var(--ease);
}
.fcard:hover{background:var(--bg-2)}
.portrait{
  width:84px;height:84px;border-radius:2px;object-fit:cover;
  border:1px solid var(--rule);background:var(--bg-2);
  filter:grayscale(1) brightness(.92) contrast(1.05);transition:filter .45s var(--ease);
}
.fcard:hover .portrait,.rmember:hover .portrait{filter:grayscale(.15) brightness(1) contrast(1)}
.mono-av{
  width:84px;height:84px;border-radius:2px;
  display:none;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:500;font-size:25px;color:var(--accent);
  background:var(--bg-2);border:1px solid var(--rule);
}
.fname{
  display:block;font-family:'Fraunces',serif;font-weight:400;
  font-size:22px;color:var(--ink);line-height:1.15;
}
.frole{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.07em;color:var(--ink-3);margin-top:10px;line-height:1.45;
}
/* founder bio — fixed 5-line height so all three cards align exactly */
.fbio{
  font-size:14px;line-height:1.62;color:var(--ink-2);text-wrap:pretty;
  height:calc(6 * 1.62em);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
}
.flink{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);transition:color .3s var(--ease);
}
.fcard:hover .flink{color:var(--c-verify-hi)}
.flink .arw{transition:transform .3s var(--ease)}
.fcard:hover .flink .arw{transform:translateX(4px)}

/* roster section label — two ends of a hairline */
.rosterlede{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:clamp(40px,5vw,64px) 0 4px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}

.roster{}
.rmember{
  display:grid;grid-template-columns:54px 1fr auto;gap:20px;align-items:center;
  padding:17px 6px;border-bottom:1px solid var(--rule);
  transition:background .4s var(--ease),padding-left .4s var(--ease);
}
.rmember:hover{background:rgba(232,233,237,.022);padding-left:12px}
.rmember .portrait,.rmember .mono-av{width:42px;height:42px}
.rmember .mono-av{font-size:14px}
.rm-name{font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--ink)}
.rm-role{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);justify-self:end;text-align:right;
  white-space:nowrap;
}

/* ---- roster catalog — expandable bios. Each person is a ruled row;
       clicking opens a panel with the full bio. Native <details>,
       so every bio sits in the DOM either way. ---- */
.person{border-bottom:1px solid var(--rule)}
.person > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:48px 1fr 44px;
  gap:8px 18px;align-items:center;padding:17px 6px;
  transition:background .4s var(--ease),padding-left .4s var(--ease);
}
.person > summary::-webkit-details-marker{display:none}
.person > summary::marker{content:""}
.person > summary:hover{background:rgba(232,233,237,.022);padding-left:13px}
.person[open] > summary{background:rgba(232,233,237,.03)}
/* the avatar inside a roster row — overrides the 84px founder portrait */
.person > summary .portrait{width:48px;height:48px;margin:0}
.person:hover > summary .portrait,
.person[open] > summary .portrait{filter:grayscale(.12) brightness(1) contrast(1)}
.p-id{min-width:0}
.p-name{
  display:block;font-family:'Fraunces','Georgia',serif;font-weight:400;
  font-size:clamp(18px,2.05vw,22px);line-height:1.16;
  letter-spacing:-.012em;color:var(--ink);
}
.p-role{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3);
  margin-top:7px;line-height:1.5;
}
.p-x{
  font-family:'IBM Plex Mono',monospace;font-size:21px;font-weight:400;
  color:var(--ink-3);line-height:1;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;justify-self:end;
  transition:transform .4s var(--ease),color .4s var(--ease);
}
.person > summary:hover .p-x{color:var(--ink)}
.person[open] > summary .p-x{transform:rotate(45deg);color:var(--c-verify-hi)}
.p-bio{overflow:hidden;animation:bioReveal .55s var(--ease) both}
@keyframes bioReveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.bio-in{padding:3px 6px 32px 66px;max-width:712px}
.bio-in p{
  font-size:15px;line-height:1.66;color:var(--ink-2);
  margin-bottom:13px;text-wrap:pretty;overflow-wrap:anywhere;
}
.bio-in p:last-of-type{margin-bottom:16px}
.bio-in .tlink{margin-top:2px}

/* founders teaser (house) — three quiet lines */
.fteaser{display:flex;flex-wrap:wrap;gap:10px 40px}
.fmini{display:flex;align-items:center;gap:13px}
.fmini .portrait,.fmini .mono-av{width:46px;height:46px}
.fmini .mono-av{font-size:15px}
.fmini .fname{font-size:17px}
.fmini .frole{font-size:9.5px;margin-top:5px}

/* ============================================================
   CLOSE
   ============================================================ */
.close{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(80px,13vw,180px) var(--gut);
}
.close h2{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(34px,6vw,82px);line-height:1.0;letter-spacing:-.028em;
  color:var(--ink);max-width:15ch;text-wrap:balance;
}
.close .actions{margin-top:clamp(30px,4.5vw,46px)}

/* contact pair */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,5vw,56px)}
.ccard{
  background:var(--bg);padding:26px 24px;
  transition:background .4s var(--ease);
}
.ccard:hover{background:var(--bg-2)}
.clabel{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.cmail{
  display:inline-block;margin-top:13px;font-family:'IBM Plex Mono',monospace;
  font-size:15px;color:var(--accent);
}
.ccard:hover .cmail{color:var(--accent-hi)}
.cdesc{font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:11px;text-wrap:pretty}

/* ============================================================
   FOOTER
   ============================================================ */
footer{position:relative;z-index:1}
.foot-in{
  max-width:var(--wrap);margin:0 auto;padding:34px var(--gut);
  display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between;
}
.foot-brand{display:flex;align-items:center;flex:none}
.foot-brand .lockup{gap:2px}
.foot-brand .wm-house.lg{font-size:13px;color:var(--ink-2)}
.foot-brand .wm-house.tag{font-size:7.5px;letter-spacing:.34em}
.foot-brand .wm-prod{color:var(--ink-2)}
.foot-brand .wm-verify,.foot-brand .wm-spectra,.foot-brand .wm-horizon{font-size:13.5px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:4px 0;transition:color .3s var(--ease);
  display:inline-flex;align-items:center;
}
.foot-links a:hover{color:var(--ink)}
.foot-links .fdot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--mk,var(--accent));margin-right:8px;flex:none;
}
.foot-meta{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--ink-4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .object{grid-template-columns:1fr;gap:40px}
  .object .receipt{max-width:436px}
  .object .copy{max-width:none}
}
@media(max-width:720px){
  body{font-size:15px}
  .nav-in{padding:11px 20px;gap:0}
  .nav-toggle{display:inline-flex}
  .nav-links{
    order:3;width:100%;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    padding-top:8px;margin-top:11px;border-top:1px solid var(--rule-soft);
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{min-height:50px;width:100%;justify-content:flex-start;padding:0 4px}
  .nav-cta{order:4;width:100%;display:none;min-height:50px;justify-content:flex-start;padding:0 4px;margin-top:2px}
  .nav.open .nav-cta{display:inline-flex}
  .sec{padding:clamp(58px,13vw,86px) 22px}
  /* mobile hero framing: kill the 92vh flex-end gap so heroes are content-led */
  .hero{min-height:auto;display:block;align-items:initial}
  .hero-in{padding:130px 22px 64px}
  /* index only (the hero that carries the video): copy fills frame 1, video = frame 2 */
  .hero-in:has(.hero-copy){padding:0 22px}
  .hero-copy{min-height:calc(100svh - 58px);display:flex;flex-direction:column;justify-content:center;padding:16px 0 30px;box-sizing:border-box}
  .thero-in{padding:128px 22px}
  .phero{padding:110px 22px 34px}
  .close{padding:74px 22px}
  .founders{grid-template-columns:1fr}
  .irow{grid-template-columns:34px 1fr;gap:8px 18px}
  .iend{grid-column:2;justify-self:start;margin-top:14px}
  .irow .iprice{grid-column:2;justify-self:start;margin-top:10px}
  .rmember{grid-template-columns:42px 1fr;gap:14px}
  .rm-role{grid-column:2;justify-self:start;text-align:left;margin-top:2px}
  /* roster rows: top-align avatar + name + toggle so wrapped names/roles
     read cleanly. The whole <summary> row is the tap target, so the small
     toggle column is fine for touch. Narrow toggle col gives names more width. */
  .person > summary{grid-template-columns:42px 1fr 24px;gap:2px 13px;align-items:start;padding:16px 4px}
  .person > summary .portrait{width:42px;height:42px;margin-top:3px}
  .p-id{padding-top:1px;min-width:0}
  .p-name{font-size:18px;line-height:1.2;overflow-wrap:anywhere}
  .p-role{margin-top:6px;font-size:9.5px;letter-spacing:.06em;line-height:1.5}
  .p-x{min-width:24px;min-height:24px;font-size:18px;margin-top:3px;align-self:start}
  .bio-in{padding:6px 2px 26px 2px}
  .contacts{grid-template-columns:1fr}
  .foot-in{flex-direction:column;text-align:center;gap:18px;padding:30px 22px max(30px,env(safe-area-inset-bottom))}
  .foot-links{justify-content:center}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center}
  .actions{width:100%}
  .act{flex:1;justify-content:center;min-width:170px}
}
@media(max-width:430px){
  .nav-in{padding:11px 16px}
  .sec{padding:54px 17px}
  .hero-in{padding:118px 17px 56px}
  .hero-in:has(.hero-copy){padding:0 17px}
  .hero-copy{min-height:calc(100svh - 54px);padding:14px 0 26px}
  .thero-in{padding:116px 17px}
  .phero{padding:100px 17px 30px}
  .close{padding:64px 17px}
  .act{width:100%;flex:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero .reg,.hero h1,.hero-sub,.hero .actions,
  .thero .reg,.thero .word,.thero-sub,.thero .actions{animation:none}
  .receipt-status.pending .dot{animation:none}
  a.irow:hover,.rmember:hover{padding-left:6px}
  .p-bio{animation:none}
  .person > summary:hover{padding-left:6px}
}

/* ============================================================
   LOGO WALL — where the team has built.
   Each logo is a transparent SVG painted as a single flat tint
   via CSS mask (alpha silhouette) — light gray, faintest green —
   on near-black, lifting to verify-green on hover. 30 cells,
   even on every breakpoint (6 / 5 / 3 / 2 cols) for full rows.
   ============================================================ */
.logowall{margin-top:clamp(42px,6vw,76px)}
.lw-head{
  border-top:1px solid var(--rule);padding-top:16px;
  margin-bottom:clamp(26px,3.4vw,40px);
}
.lw-tag{
  display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.lw-sub{
  margin-top:14px;max-width:560px;
  font-size:clamp(15px,1.45vw,17px);line-height:1.6;color:var(--ink-2);text-wrap:pretty;
}
.lw-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,1vw,14px);
}
.lw-item{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,2.8vw,30px) 18px;min-height:84px;
}
.lw-logo{
  display:block;width:80%;height:22px;margin:0 auto;  /* width cap reins in wide wordmarks; shorter overall */
  max-width:118px;                                     /* hard ceiling so Nielsen/Tesco/Calvin Klein can't sprawl */
  background-color:#AEB7AD;                            /* dimmer, cooler — reads delicate, not bold */
  opacity:.5;
  -webkit-mask:var(--m) no-repeat center/contain;
          mask:var(--m) no-repeat center/contain;
  transition:background-color .4s var(--ease),opacity .4s var(--ease);
}
.lw-item:hover .lw-logo{background-color:var(--c-verify-hi);opacity:.95}
@media(max-width:900px){ .lw-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:720px){ .lw-item{min-height:64px;padding:18px 12px} .lw-logo{height:20px;max-width:104px} }
@media(max-width:560px){ .lw-grid{grid-template-columns:repeat(2,1fr)} .lw-logo{height:19px;max-width:96px} }
@media(prefers-reduced-motion:reduce){ .lw-logo{transition:none} }

/* ============================================================
   BRAND MONOGRAM — colored mark (per brand guidelines).
   The I bar stays ink; the two V arms carry verify-green.
   Path order in every .nv-mono is [I, V, V], so nth-child 2 & 3
   are the V arms. Higher specificity than the per-page
   `.nv-mono path{fill:var(--ink)}` base rule, so it wins.
   ============================================================ */
.nv-mono path:nth-child(2),
.nv-mono path:nth-child(3){fill:var(--c-verify)}

/* ============================================================
   §03 · WHERE WE FIT — capability comparison block.
   Adapted from Max's source-checked block (2026-05-29). Reads the
   site tokens directly; mobile-first stacked cards, true grid >=820px.
   Glyphs forced non-italic (italic law). No pricing, no superlatives.
   ============================================================ */
.lede .lead .nv-hl{color:var(--c-verify-hi);font-weight:600}

.nv-fit{
  --nv-green:var(--c-verify);
  --nv-green-soft:var(--c-verify);
  --nv-green-wash:var(--c-verify-wash);
  --nv-faint:var(--ink-4);
  --nv-display:var(--font-product);
  --nv-body:var(--font-body);
  --nv-mono:var(--font-mono);
  width:100%;font-family:var(--nv-body);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.nv-fit *{box-sizing:border-box}

/* glyphs — never italic */
.nv-fit i{font-style:normal;font-family:var(--nv-mono);font-weight:500}
.nv-fit i.yes{color:var(--nv-green)}
.nv-fit i.no{color:var(--nv-faint)}
.nv-fit i.part{color:var(--ink-3)}

/* ---------- MOBILE-FIRST: stacked cards ---------- */
.nv-fit__grid,.nv-fit{display:block}
.nv-row--head{display:none}
.nv-row{
  background:var(--surface);
  border:1px solid var(--rule);border-radius:3px;
  padding:16px 16px 8px;margin-bottom:12px;
}
.nv-cat{
  font-family:var(--nv-display);font-weight:700;
  font-size:16px;letter-spacing:-.005em;color:var(--ink);
  padding-bottom:12px;margin-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.nv-cat span{
  display:block;font-family:var(--nv-mono);font-weight:400;
  font-size:11px;letter-spacing:.02em;color:var(--ink-3);
  margin-top:4px;text-transform:none;
}
.nv-c{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:12px;padding:7px 0;
  font-family:var(--nv-mono);font-size:12px;line-height:1.45;
  color:var(--ink-2);
}
.nv-c::before{content:attr(data-axis);color:var(--ink-3);font-weight:400}
.nv-c i{margin-right:6px}

/* win row */
.nv-row--win{background:var(--nv-green-wash);border-color:var(--c-verify-dim)}
.nv-row--win .nv-cat{color:var(--c-verify);border-bottom-color:var(--c-verify-dim)}
.nv-row--win .nv-c{color:var(--ink)}
.nv-row--win i.yes{color:var(--c-verify)}

.nv-fit__legend{
  font-family:var(--nv-mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.02em;margin:16px 2px 0;
}
.nv-fit__legend i{margin:0 4px 0 14px}
.nv-fit__legend i:first-child{margin-left:0}
.nv-fit__note{display:block;margin-top:8px;color:var(--ink-2)}

/* ---------- WIDE: true comparison grid ---------- */
@media (min-width:820px){
  /* clean editorial table — hairline rows only, no vertical rules,
     floats on the page ground; whole rows light to verify-green on hover */
  .nv-fit{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;
    border:0;border-radius:0;
    overflow:hidden;background:transparent;
  }
  .nv-row{display:contents}
  .nv-row > *{
    border-bottom:1px solid var(--rule-soft);border-radius:0;margin:0;background:transparent;
    transition:background .35s var(--ease),color .35s var(--ease);
  }
  .nv-row--head{display:contents}
  .nv-row--head > *{border-bottom:1px solid var(--rule)}
  .nv-h{
    padding:14px 13px 16px;
    font-family:var(--nv-mono);font-weight:500;font-size:12px;
    line-height:1.3;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;
  }
  .nv-cat,.nv-cat--head{
    padding:18px 16px 18px 6px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .nv-cat--head{
    font-family:var(--nv-mono);font-weight:400;font-size:10px;
    color:var(--ink-4);text-transform:uppercase;letter-spacing:.1em;
  }
  .nv-c{
    display:flex;align-items:center;gap:0;
    padding:18px 13px;
    font-size:12.5px;color:var(--ink-2);
  }
  .nv-c::before{display:none}
  .nv-c i{margin-right:7px;font-size:13px}
  .nv-row:last-child > *{border-bottom:none}
  /* the pop — entire row lifts to a soft verify-green on hover */
  .nv-row:hover > *{background:var(--c-verify-wash)}
  .nv-row:hover .nv-cat{color:var(--c-verify-hi)}
  .nv-row--head:hover > *{background:transparent}
  .nv-row--win > *{background:var(--nv-green-wash)}
  .nv-row--win:hover > *{background:var(--c-verify-dim)}
}