/* ============================================================
   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 — striking blue-gray near-black ---- */
  --bg:#0B0D13;
  --bg-2:#13161F;
  --surface:#1B1F2A;

  /* ---- ink — cool soft white, never pure white. ink-3 / ink-4 sit
     at WCAG-AA contrast on the near-black ground (4.5:1 and up), so
     no body, label or footnote text falls below the legibility bar. ---- */
  --ink:#E9EBF1;
  --ink-2:#9CA2B2;
  --ink-3:#7E8598;
  --ink-4:#727A8C;

  /* ---- 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:#35D6A0;
  --c-verify-hi:#6FE7BE;
  --c-verify-dim:rgba(53,214,160,.13);
  --c-verify-wash:rgba(53,214,160,.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);

  /* ---- matrix rain — the ambient backdrop. --rain is the stream
         colour, --rain-hi the brighter pop its stream heads flare with.
         House pages wear the slate accent; each product page overrides
         both in its <style> block. One engine, four hues. ---- */
  --rain:#8E9ABA;
  --rain-hi:#BCC6EC;

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

  /* ---- type — FONT VARIANT (Clash Display): Clash Display carries the
     house wordmark, every title and all three product names; Satoshi is
     the body voice; IBM Plex Mono is unchanged. ---- */
  --font-house:'Clash Display',system-ui,sans-serif;
  --font-display:'Clash Display','Satoshi',sans-serif;
  --font-body:'Satoshi',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-product:'Clash Display','Satoshi',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:'Satoshi',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%);
}

/* ---- matrix rain — a layered ambient backdrop, recoloured per page.
   Two depths painted on one canvas: a deep field gives the centre its
   dim layered shimmer, a near field rises to full brightness out in
   the side margins. All spatial shaping lives in the engine
   (script.js), so the canvas itself is left unmasked. ---- */
.rain{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:.55;
}
@media(max-width:620px){.rain{opacity:.48}}
@media(prefers-reduced-motion:reduce){.rain{opacity:.32}}

/* ---- document margin — faint side rules ---- */
.frame{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 4px),calc(var(--wrap) + 132px));
  border-left:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);
  z-index:0;pointer-events:none;
}
@media(max-width:900px){.frame{display:none}}

/* ============================================================
   TYPE
   ============================================================ */
.display{
  font-family:'Clash Display','Satoshi',sans-serif;font-optical-sizing:auto;
  font-weight:400;line-height:1.0;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance;
}
.title{
  font-family:'Clash Display','Satoshi',sans-serif;font-optical-sizing:auto;
  font-weight:500;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(74px,11vw,148px) 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 — a one-time CSS entrance. Content is VISIBLE BY DEFAULT
   and is never gated behind JavaScript: the animation only ever fades a
   block IN, and it always self-completes (fill mode: both), so no amount
   of fast scrolling can strand a section hidden. No IntersectionObserver,
   no .in class — a section can never get stuck at opacity:0. ---- */
.rv{animation:rvIn .7s var(--ease) both}
.rv[data-d="1"]{animation-delay:.06s}
.rv[data-d="2"]{animation-delay:.12s}
.rv[data-d="3"]{animation-delay:.18s}
.rv[data-d="4"]{animation-delay:.24s}
.rv[data-d="5"]{animation-delay:.30s}
@keyframes rvIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

/* ============================================================
   HERO — type-led, anchored, void around it
   ============================================================ */
.hero{
  position:relative;border-bottom:1px solid var(--rule);
  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:'Clash Display',sans-serif;font-optical-sizing:auto;font-weight:500;
  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{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)}

/* ---- teaser hero (spectra / horizon — the word) ---- */
.thero{
  position:relative;border-bottom:1px solid var(--rule);
  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:'Clash Display',sans-serif;font-optical-sizing:auto;font-weight:500;
  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:100%;
  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)}

/* ---- hero deck — the line under the headline. Set in the display
   face as a short editorial deck, never a body paragraph: kills the
   default-sans look, carries the headline's voice. ---- */
.hero-sub,.thero-sub{
  font-family:'Clash Display','Satoshi',sans-serif;font-optical-sizing:auto;
  font-weight:400;font-size:clamp(18px,2.1vw,25px);
  line-height:1.34;letter-spacing:-.014em;
  color:#B7BDCB;text-wrap:balance;
}

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

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,19,.82);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
          backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--rule);
}
.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:700;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:100%;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)}

/* ---- language toggle — EN / FR, Canada's two official languages.
   Sits at the end of the nav links; a compact segmented control. ---- */
.lang{
  display:inline-flex;align-items:stretch;flex:none;
  border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  margin-left:8px;
}
.lang-opt{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.11em;
  color:var(--ink-4);background:transparent;border:0;cursor:pointer;
  padding:0 9px;min-height:32px;display:inline-flex;align-items:center;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lang-opt + .lang-opt{border-left:1px solid var(--rule)}
.lang-opt:hover{color:var(--ink-2)}
.lang-opt[aria-pressed="true"]{color:var(--ink);background:rgba(232,233,237,.06)}
.lang-opt:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}

/* ============================================================
   THE INDEX — ruled lists, the structural workhorse
   (replaces every card grid)
   ============================================================ */
.index{border-top:1px solid var(--rule)}
.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:'Clash Display',sans-serif;font-weight:500;
  font-size:clamp(26px,3.6vw,44px);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);display:flex;flex-wrap:wrap;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:100%;
  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:'Clash Display',sans-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:'Clash Display',sans-serif;font-weight:500;
  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;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px 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;white-space:nowrap;
  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:'Clash Display',sans-serif;font-weight:500;font-size:25px;color:var(--accent);
  background:var(--bg-2);border:1px solid var(--rule);
}
.fname{
  display:block;font-family:'Clash Display',sans-serif;font-weight:400;
  font-size:22px;color:var(--ink);line-height:1.15;
}
.frole{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.07em;color:var(--ink-3);margin-top:10px;line-height:1.45;
  /* SIBLING LINE-COUNT — locked to two lines so the short English roles
     and the longer French roles render identical heights across the row */
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  height:calc(1.45em * 2);
}

.roster{border-top:1px solid var(--rule)}
.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:'Clash Display',sans-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;
}

/* ============================================================
   TEAM CATALOG — the expandable roster. Each person is a ruled
   row; clicking the name opens a panel with the full bio.
   Native <details>, so every bio sits in the DOM either way.
   ============================================================ */
.catalog{border-top:1px solid var(--rule)}
.person{border-bottom:1px solid var(--rule)}
.person > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:48px 1fr 22px;
  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)}
.p-av,.p-ini{
  width:48px;height:48px;border-radius:2px;flex:none;
  border:1px solid var(--rule);background:var(--bg-2);
}
.p-av{
  object-fit:cover;
  filter:grayscale(1) brightness(.92) contrast(1.05);
  transition:filter .45s var(--ease);
}
.person:hover .p-av,.person[open] .p-av{filter:grayscale(.12) brightness(1) contrast(1)}
.p-ini{
  display:flex;align-items:center;justify-content:center;
  font-family:'Clash Display',sans-serif;font-weight:500;font-size:15px;
  color:var(--accent);letter-spacing:.02em;
}
.p-id{min-width:0}
.p-name{
  display:block;font-family:'Clash Display',sans-serif;font-weight:500;
  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;
  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(--accent)}
.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;
}
.bio-in p:last-of-type{margin-bottom:16px}

/* ============================================================
   CLOSE
   ============================================================ */
.close{
  border-top:1px solid var(--rule);
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(80px,13vw,180px) var(--gut);
}
.close h2{
  font-family:'Clash Display',sans-serif;font-weight:500;
  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;
  /* SIBLING LINE-COUNT — both contact cards lock to exactly two lines,
     so the pair stays perfectly even however the copy is set */
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  height:calc(1.55em * 2);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--rule);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);
}

/* ============================================================
   SUBHEAD — a labelled hairline marking a group inside a section
   (perimeter in / out · the parts of the design-partner offer)
   ============================================================ */
.subhead{
  border-top:1px solid var(--rule);padding-top:15px;
  margin:clamp(38px,5.5vw,62px) 0 clamp(18px,2.4vw,26px);
  display:flex;justify-content:space-between;align-items:baseline;
  gap:8px 18px;flex-wrap:wrap;
}
.lede + .subhead{margin-top:0}
.subhead .sh-k{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);
}
.subhead .sh-n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.subhead + .index{border-top:0}
/* an out-of-scope / declined line — the same ruled row, muted ink */
.iname.decl{color:var(--ink-3)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:880px){
  .object{grid-template-columns:1fr;gap:40px}
  .object .receipt{max-width:436px}
  .object .copy{max-width:none}
  /* contacts drop to one column before the cells get too narrow to
     hold the two-line description; stacked, they flow at natural height */
  .contacts{grid-template-columns:1fr}
  .cdesc{height:auto;display:block;-webkit-line-clamp:none;line-clamp:none}
}
@media(max-width:720px){
  body{font-size:15px}
  .nav-in{padding:11px 20px;gap:9px 14px}
  .nav-links{order:1;width:100%;justify-content:center;gap:1px;padding-top:9px;border-top:1px solid var(--rule-soft)}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
  .lang{margin-left:0;margin-top:4px}
  .lang-opt{min-height:44px;padding:0 14px}
  .nav-cta{min-height:44px}
  .sec{padding:clamp(58px,13vw,86px) 22px}
  .hero-in{padding:130px 22px 64px}
  .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;max-width:100%;flex-wrap:wrap;gap:6px 16px;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}
  .person > summary{grid-template-columns:42px 1fr 20px;gap:6px 14px}
  .p-av,.p-ini{width:42px;height:42px}
  .p-ini{font-size:13px}
  .bio-in{padding:2px 4px 28px 4px}
  .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}
  .thero-in{padding:116px 17px}
  .phero{padding:100px 17px 30px}
  .close{padding:64px 17px}
  .act{width:100%;flex:none;white-space:normal}
  /* tighten nav links so the longer French labels still pack onto
     two rows at the narrowest widths */
  .nav-links a{padding-left:10px;padding-right:10px;letter-spacing:.07em}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{animation: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}
}