/* ============================================================================
   XINNACE v3 — page-index.css
   The "index" artifact's own stylesheet, verbatim, less the 22 chrome rules
   that base.css now owns for every page, and less --maxw / --gutter / --head-h,
   which are shared so the bar and the column do not change between pages.
   Loads AFTER base.css, so everything here wins. Regenerate, do not edit.
   ========================================================================== */


/* ==========================================================================
   XINNACE — minimal direction, sectioned.
   Navy is spent only where it earns it: header, hero, footer. The body runs
   white / grey / white / grey so each section reads as its own block.
   Two honeycomb clusters bleed off the hero's left and right edges — different
   sizes, counts and anchors, deliberately not a mirrored pair. Plain outlines,
   no lit cell.
   Committed design: every colour painted explicitly through tokens; the
   .lite scope redefines the same names so no component holds a raw colour.
   ========================================================================== */

:root{
  /* dark — header, hero, footer */
  --ground:#07111F;
  --surface:#0C1829;
  --line:#1B2C43;
  --line-2:#2B4059;
  --ink:#F5F8FC;
  --ink-soft:#AFBDD0;
  --ink-faint:#78899E;
  --brand:#12B5AB;
  --brand-2:#0FA39A;
  --on-brand:#041816;
  --manage:#2C8FD6;
  --empower:#1FAE6B;
  --engage:#F59331;
  --manage-text:#7FC0EF;
  --empower-text:#71D19E;
  --engage-text:#FFB66B;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
/* Light sections. Pillar hues stay the brand values; only the small-text
   variants deepen so they stay legible on white. */
.lite{
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --line:#E1E9F1;
  --line-2:#C6D4E1;
  --ink:#172235;
  --ink-soft:rgba(23,34,53,.72);
  --ink-faint:#617086;
  --brand:#1C8A83;
  --brand-2:#146D67;
  --on-brand:#FFFFFF;
  --manage-text:#1F6FA8;
  --empower-text:#157A4C;
  --engage-text:#AF620C;
  background:var(--ground);
  color:var(--ink);
}
.lite--white{--ground:#FFFFFF;--surface:#FFFFFF;}
.lite--grey{--ground:#EFF3F8;--surface:#FFFFFF;--line:#DCE5EE;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:#07111F;color:#F5F8FC;
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:4px;border-radius:4px;}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;margin:0;text-wrap:balance;}
h2{font-size:clamp(26px,3.1vw,38px);line-height:1.16;}
h3{font-size:19px;letter-spacing:-.022em;line-height:1.3;}
p{margin:0;}
.micro{
  font-family:var(--f-body);font-stretch:75%;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.tlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:15.5px;font-weight:600;color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.tlink::after{content:"→";color:var(--brand);transition:transform .2s var(--ease);}
.tlink:hover{color:var(--ink);}
.tlink:hover::after{transform:translateX(3px);}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
/* ---------- hero (navy) ---------- */
/* overflow:hidden is LOAD-BEARING now, not housekeeping: the scattered cells
   deliberately range outside .nexus and this is the only thing cropping them.
   Give .hero a border or inline padding and they appear over the top bar; swap
   it for overflow:clip with a positive overflow-clip-margin and they come back. */
.hero{
  position:relative;overflow:hidden;background:#07111F;
  min-height:calc(100svh - var(--head-h));
  display:flex;flex-direction:column;
  padding:clamp(52px,8vh,96px) 0 clamp(36px,5vh,56px);
}
/* Nexus: before launch the cells are scattered across the hero at mixed sizes,
   drifting; at 08:00 they all fly home, the lattice locks, the silhouette
   traces on and stays. See the block below .nexus for how that is wired. */
.hero__in{
  position:relative;flex:1 1 auto;width:100%;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,4vw,54px);
}
/* z-index before anything else: .hero__art comes after .hero__copy in the same
   stacking context, so a field allowed to escape its column paints OVER the
   headline. It must go behind it. */
.hero__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:clamp(20px,3vh,34px);}
.hero__art{position:relative;z-index:0;display:grid;place-items:center;}

/* overflow:visible lets the scattered cells range across the whole hero while
   .hero{overflow:hidden} does the cropping. The viewBox is unchanged, so every
   offset below is still a lattice unit and still scales with the svg. */
.nexus{width:100%;max-width:560px;height:auto;color:#8FB6C9;overflow:visible;--amp:1;--spread:1;}

/* --amp is the drift's amplitude, as a multiplier. Registering it is what lets
   the idle motion be EASED to nothing at launch instead of being cancelled: a
   custom property changed inside a running @keyframes re-substitutes and jumps,
   and pausing the animation would freeze the cells a few units off their
   lattice positions with their shared edges no longer meeting. Where @property
   is unsupported the transition simply does not run and --amp flips to 0 in one
   step, which is a ~10px correction hidden under a 500px flight home. */
@property --amp{syntax:"<number>";inherits:true;initial-value:1;}
/* Eased across the FLIGHT, not a third of the way into it. While the cells
   took 1.88s this was 1.15s and the drift was already dead before most of them
   were home; at 5s it would have been still air for three and a half seconds
   with the lattice still moving through it, which is what makes a long
   transition look like it has stalled rather than settled. */
.nexus{transition:--amp 3s linear;}
.nexus--live{--amp:0;}

/* THE IDLE DRIFT, on the wrapper. translate only, so it needs no transform-box
   and cannot fight the fly-home on the shape inside it. */
/* Only the 18 that are actually out in the hero drift. The other 25 are held
   at stroke-opacity 0 until launch and would otherwise run 25 infinite
   animations that translate by nothing. */
.nexus__cells .hxc--f{animation:hxDrift var(--hd,18s) ease-in-out var(--hde,0s) infinite;}
/* A wander through three waypoints and home again, NOT a back-and-forth slide:
   a cell shuttling along one axis reads as sliding on a rail, and at the
   amplitude this needs it would read as broken. Peak speed lands near 5-9px/s,
   so a hexagon crosses its own width in about ten seconds. The first version of
   this managed 0.8px/s and 83 seconds, which is indistinguishable from static. */
@keyframes hxDrift{
  0%{transform:translate(0px,0px);}
  25%{transform:translate(calc(var(--w1x,0px) * var(--amp)),calc(var(--w1y,0px) * var(--amp)));}
  50%{transform:translate(calc(var(--w2x,0px) * var(--amp)),calc(var(--w2y,0px) * var(--amp)));}
  75%{transform:translate(calc(var(--w3x,0px) * var(--amp)),calc(var(--w3y,0px) * var(--amp)));}
  100%{transform:translate(0px,0px);}
}

/* WHERE EACH CELL WAITS, on the shape. transform-origin is written per cell in
   user units, so no transform-box is needed here either. The two states list
   the same three functions in the same order — anything else and the browser
   falls back to matrix decomposition and the cells arc home and counter-rotate.
   stroke-opacity rather than opacity: a stroked shape needs no group buffer. */
/* non-scaling-stroke because the cells wait at 0.64x to 1.21x: without it the
   small ones stroke at 0.7px and read as ghosts, and every cell visibly
   changes weight as it scales back to 1 on the way home. */
.nexus__cells polygon{
  vector-effect:non-scaling-stroke;
  transform-box:view-box;
  transform:translate(calc(var(--sx,0px) * var(--spread)),calc(var(--sy,0px) * var(--spread)))
            rotate(var(--sr,0deg)) scale(var(--ss,1));
  stroke-opacity:var(--so,.34);
  /* FIVE SECONDS TO THE LATTICE, and the arithmetic is the point: the longest
     per-cell delay in launch.php is 430ms, so 430 × 2.6 = 1.12s, and the last
     cell starts then and runs 3.9s — home at 5.02s. Scaling the delays in
     calc() rather than rewriting 43 inline --sd values keeps the stagger the
     hero was composed with; changing the duration alone would have bunched
     every cell into the same 3.9s and thrown that away.

     THE CURVE CHANGED WITH THE DURATION, and it had to. cubic-bezier(.16,.84,
     .28,1) is most of the way home in the first quarter of its run — fine over
     1.45s, but over 3.9s it spends three seconds crawling the last few pixels,
     which does not read as slow, it reads as stuck. This one spreads the
     distance across the time and still lands soft.

     Longhands, not the shorthand: calc() in the delay slot of a transition
     shorthand is where parsers differ, and this is not the place to find out.

     stroke-opacity keeps its old proportion (it finished at 0.76 of the
     transform's duration before, and does now) so cells still fade up ahead of
     arriving rather than with it. */
  transition-property:transform, stroke-opacity;
  transition-duration:3.9s, 2.9s;
  transition-timing-function:cubic-bezier(.25,.62,.3,1), ease;
  transition-delay:calc(var(--sd,0ms) * 2.6), calc(var(--sd,0ms) * 2.6);
}
.nexus--live .nexus__cells polygon{
  transform:translate(0px,0px) rotate(0deg) scale(1);
  stroke-opacity:.34;
}

/* The silhouette is not drawn at all until the cells land. It then traces
   itself, holds for a beat, and GOES — it is the gesture that says the lattice
   has arrived, not a frame to leave around it. Leaving it up buried the thing
   it was drawn to point at: 43 cells home in their hexagon, under a solid
   hexagon at fill-opacity .9.

   TWO ANIMATIONS, NOT A LONGER ONE, and they touch different properties on
   purpose. ringTrace owns stroke-dashoffset and fill-opacity; ringFade owns
   opacity. Two animations writing one property is last-declaration-wins and
   the trace would be fighting the fade for the same bytes.

   The timing is a chain, so read it as one, and it now hangs off the flight
   rather than racing it: the last cell is home at 5.02s, the trace starts at
   4.2s and runs 2.3s so the ring completes at 6.5s, it holds 0.2s, and the
   fade runs 0.9s from 6.7s and is done at 7.6s. NAV_AFTER in v3.js is 8000 and
   must stay behind this number — the countdown's hand-over to the real page
   has to come after the payoff it is the payoff for. */
.nexus__ring{
  fill:url(#nxFill);fill-opacity:0;stroke:#12B5AB;stroke-width:2;stroke-linejoin:round;
  stroke-dasharray:1428;stroke-dashoffset:1428;
}
.nexus--live .nexus__ring{
  animation:ringTrace 2.3s cubic-bezier(.4,0,.3,1) 4.2s forwards,
            ringFade  .9s ease 6.7s forwards;
}
@keyframes ringTrace{
  0%{stroke-dashoffset:1428;fill-opacity:0;}
  70%{fill-opacity:.6;}
  100%{stroke-dashoffset:0;fill-opacity:.9;}
}
/* Out. forwards holds it at nothing so a repaint cannot bring it back. */
@keyframes ringFade{ from{opacity:1;} to{opacity:0;} }

/* LANDED FROM A HAND-OVER, and this class is the whole reason the arrival is
   not the animation twice.

   The countdown reloads itself about a second after the payoff ends, and it
   lands inside the server's 15s grace — where the home page deliberately
   renders the nexus SCATTERED so the payoff can run for someone arriving cold.
   v3.js then adds .nexus--live to settle it, and adding a class after first
   paint is exactly what a transition is waiting for: the cells would fly the
   whole five seconds again, and the ring would trace and fade again, for the
   one visitor who has just watched all of it.

   So that visitor's page also carries this, permanently. The cells take the
   lived-in end state with no transition to animate, and the ring is simply
   gone, which is where its fade left it. The sparks are untouched — they are
   the ambient after-state and are supposed to still be going. */
/* THE WRAPPER'S TRANSITION GOES TOO, and leaving it was the bug. Killing the
   cells' transition settled the lattice in one frame, but --amp lives on .nexus
   and was still easing 1 to 0 over three seconds — so the 18 drifting cells
   went on wandering, with decaying amplitude, across a lattice that had already
   arrived. Their shared edges stopped meeting. That is the "breaks a little"
   after a hand-over.

   The note on the transition above warns that changing --amp inside a running
   @keyframes re-substitutes and JUMPS, which is why the ease exists at all.
   Here the jump is what is wanted: it happens in the same frame as the cells
   taking their end positions, so there is one instantaneous scattered-to-home
   change and nothing to see moving. The ease is for the payoff, which this
   visitor has already watched on the page before this one. */
.nexus--settled{transition:none;}
.nexus--settled .nexus__cells polygon{transition:none;}
.nexus--settled .nexus__ring{animation:none;opacity:0;}

/* The sparks are the after-state. Holding them until the lattice is home also
   keeps the Gaussian blur in #nxGlow off the frame budget while 18 cells drift. */
.nexus__spark line{stroke:#12B5AB;stroke-width:2.2;stroke-linecap:round;opacity:0;}
.nexus--live .nexus__spark line{animation:twinkle var(--dur,3.4s) ease-in-out var(--del,1.5s) infinite;}
@keyframes twinkle{
  0%,100%{opacity:0;}
  8%{opacity:.9;}
  22%{opacity:.16;}
  34%{opacity:.7;}
  55%{opacity:0;}
}

/* ---------- the countdown ---------- */
/* 36ch, not 30. The clock is fifteen characters now ("02d 06h 32m 47s")
   where it was eight when this cap was written, and at 30ch the number
   already ran to the end of the rule above it — the tabular min-widths on
   the two groups add up to about the full 30ch on their own. The block is
   still narrower than the headline above it, which is all the cap is for. */
.launch{display:grid;padding-top:clamp(18px,2.4vh,26px);border-top:1px solid #1B2C43;max-width:36ch;}
.launch__pre,.launch__post{grid-area:1/1;display:flex;flex-direction:column;gap:9px;}
.launch__post{justify-content:center;font-family:var(--f-display);font-weight:600;
  letter-spacing:-.02em;font-size:clamp(18px,2.3vw,26px);color:#F5F8FC;}
.launch .launch__post{visibility:hidden;}
.launch .launch__pre{visibility:visible;}
.launch.is-live .launch__pre{visibility:hidden;}
.launch.is-live .launch__post{visibility:visible;}
.launch__clock{
  display:flex;align-items:baseline;gap:.34em;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;color:#F5F8FC;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* min-width in ch, not a hope that the webfont ships tnum: without it every
   10 -> 9 reflows the row and the hero shifts once a second. */
.launch__t{font-size:clamp(24px,2.9vw,32px);line-height:1;min-width:11.5ch;}
/* The days are the FIRST GROUP of the clock, not a chip beside it. This was a
   teal uppercase pill — 12px, letterspaced, bordered — and at that size and
   colour it reads as a badge, so the eye takes the big number next to it as
   the whole remaining time. Two readers ran "2 DAYS  06h 32m 47s" together as
   six hours. Identical type to .launch__t is the entire fix: nothing is left
   for the eye to treat as a label. */
.launch__d{font-size:clamp(24px,2.9vw,32px);line-height:1;min-width:3.2ch;}
.launch__d[hidden]{display:none;}
.launch__note{font-size:14.5px;line-height:1.5;color:#78899E;}
.launch__note time{color:#AFBDD0;}
.launch__say{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- TEMPORARY: the launch preview controls ---------- */
/* Deleted by setting V3_LAUNCH_PREVIEW to false — nothing here has another host. */
.lprev{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;border:1px dashed #2B4059;border-radius:12px;background:rgba(21,38,64,.5);}
.lprev__tag{font-family:var(--f-body);font-stretch:75%;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#78899E;}
.lprev__btn{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:7px 13px;border-radius:999px;border:1px solid #2B4059;
  background:transparent;color:#AFBDD0;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.lprev__btn:hover{color:#F5F8FC;border-color:#12B5AB;}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:34px;}
  .nexus{max-width:340px;--spread:.5;}
  .launch{max-width:none;}
}

/* The reduced-motion answer is a STATIC one: pre-launch the cells sit scattered
   and still, post-launch they sit assembled. base.css already flattens every
   duration with !important but leaves DELAY alone, so the stagger is zeroed
   here or the assemble would still trickle in for a second and a half. */
@media (prefers-reduced-motion:reduce){
  .nexus__cells .hxc--f{animation:none !important;transform:none !important;}
  .nexus__cells polygon{transition-delay:0ms !important;}
  .nexus__ring{animation:none !important;}
  /* The end state, and the end state is now "no ring". Reduced motion gets
     where the animation lands, not the frame it passes through. */
  .nexus--live .nexus__ring{animation:none !important;opacity:0;}
  .nexus__spark line{animation:none !important;opacity:0;}
  .nexus--live .nexus__spark line{animation:none !important;opacity:.42;}
}
/* width:100% because .shell's margin-inline:auto otherwise cancels flex
   stretch and shrink-wraps this row, re-centring it. */
.hero__base{position:relative;flex:none;width:100%;padding-top:clamp(30px,5vh,52px);}
.triad{
  font-family:var(--f-display);font-weight:700;
  letter-spacing:-.05em;line-height:1.0;color:#F5F8FC;
  font-size:clamp(38px,5.4vw,82px);
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  column-gap:.32em;row-gap:.02em;
}
.triad span{white-space:nowrap;}
.triad .w1{color:#2C8FD6;}
.triad .w2{color:#1FAE6B;}
.triad .w3{color:#F59331;}
.triad .dot{color:#78899E;}
.hero__line{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(18px,2.3vw,26px);line-height:1.4;max-width:22ch;color:#F5F8FC;
  text-wrap:balance;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:flex-start;}
.hero .tlink{color:#AFBDD0;}
.hero .tlink::after{color:#12B5AB;}
.hero .tlink:hover{color:#F5F8FC;}
.hero__foot{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 22px;color:#78899E;}
.hero__foot span{position:relative;}
.hero__foot span+span::before{
  content:"";position:absolute;left:-12px;top:50%;width:3px;height:3px;
  border-radius:50%;background:#2B4059;transform:translateY(-50%);
}
@media (max-width:640px){.hero{min-height:0;}}
/* ---------- light sections ---------- */
.sec{padding:clamp(66px,9vh,110px) 0;scroll-margin-top:var(--head-h);}
.sec__head{display:flex;flex-direction:column;gap:14px;max-width:54ch;margin-bottom:clamp(34px,5vh,52px);}
.sec__head p{color:var(--ink-soft);font-size:17.5px;}
/* pillars — open columns, hairline separated */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@media (max-width:820px){.pillars{grid-template-columns:1fr;}}
.pillar{background:var(--surface);padding:clamp(26px,3.4vw,36px) clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:13px;}
/* The pillar hue underlines the word itself rather than floating above it as a
   hexagon; width:fit-content keeps the rule the exact width of the heading, and
   currentColor picks up whichever pillar colour the heading already carries. */
.pillar h3{
  font-size:23px;width:fit-content;
  padding-bottom:6px;border-bottom:3px solid currentColor;
}
.pillar--m h3{color:#2C8FD6;}
.pillar--e h3{color:#1FAE6B;}
.pillar--g h3{color:#F59331;}
.pillar p{font-size:15.8px;color:var(--ink-soft);}
.pillar__foot{margin-top:auto;padding-top:10px;font-family:var(--f-body);font-stretch:75%;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
/* modules — quiet typographic index */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,52px);}
@media (max-width:820px){.mods{grid-template-columns:1fr;}}
.mods ul{margin:0;padding:0;}
.mods li{list-style:none;}
.mrow{
  display:flex;align-items:center;gap:12px;padding:15px 2px;
  border-bottom:1px solid var(--line);font-size:16.5px;color:var(--ink-soft);
  text-decoration:none;transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.mrow:hover{color:var(--ink);padding-left:6px;}
.mrow i{width:9px;height:8px;flex:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.i--m{background:#2C8FD6;}
.i--e{background:#1FAE6B;}
.i--g{background:#F59331;}
.mods__cta{margin-top:clamp(30px,4.4vh,44px);}
/* roles — the four seats that run people. Deliberately NOT colour-coded:
   blue/green/orange already mean Manage/Empower/Engage on this page, and
   reusing them here would make one hue carry two meanings. */
#why{--why:#6E56F0;--chip:#F1F5F9;--chip-ink:#42536A;}
#why .micro{color:var(--why);}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,24px);}
@media (max-width:820px){.roles{grid-template-columns:1fr;}}
.role{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.8vw,32px);display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.role:hover{border-color:var(--why);transform:translateY(-3px);}
.role h3{
  font-size:21px;width:fit-content;
  padding-bottom:6px;border-bottom:3px solid var(--why);
}
.role p{font-size:15.4px;color:var(--ink-soft);}
/* Left-justified on the main axis so every row shares one left edge with the
   copy above it; centred on the cross axis so the cluster sits in the middle of
   the leftover space instead of being pinned to the card's bottom edge. */
.role__tags{
  display:flex;flex-wrap:wrap;
  justify-content:flex-start;
  align-content:center;
  flex:1 1 auto;
  gap:6px;padding-top:14px;
}
.role__tags span{
  font-family:var(--f-body);font-stretch:75%;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:var(--chip);color:var(--chip-ink);
}
.founder{
  margin-top:clamp(30px,4.4vh,46px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);max-width:78ch;
}
/* The badge is itself a hexagon, so it sits inside the existing hex motif. */
.founder__badge{width:min(168px,100%);height:auto;flex:none;}
.founder__body{font-size:15.5px;color:var(--ink-soft);}
.founder__body b{font-weight:600;color:var(--ink);}
.founder__verify{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;text-decoration:none;
  font-family:var(--f-body);font-stretch:75%;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--why);
}
.founder__verify svg{width:11px;height:11px;flex:none;}
.founder__verify:hover{text-decoration:underline;}
@media (max-width:600px){.founder{flex-direction:column;align-items:flex-start;}}
/* close */
.close{padding:clamp(72px,10vh,124px) 0;text-align:center;scroll-margin-top:var(--head-h);}
.close__in{display:flex;flex-direction:column;align-items:center;gap:24px;}
.close h2{font-size:clamp(28px,4vw,44px);}
.close p{color:var(--ink-soft);max-width:44ch;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}