/* ==========================================================
   bytblock
   scale and weights calibrated against apple.com / revolut.com:
   display type is medium (500-600), never bold; line-height ~1.0-1.07;
   sub-copy sits near half the headline size, not a third.
   ========================================================== */
:root{
  color-scheme: light;

  --white:  #FFFFFF;
  --grey:   #F5F5F7;   /* apple's light tile */
  --grey-2: #EBEBEF;
  --black:  #000000;
  --ink:    #1D1D1F;
  --ink-2:  #6E6E73;
  --ink-3:  #86868B;

  --on-dark:   #F5F5F7;
  --on-dark-2: #A1A1A6;

  --spark:      #2FE3DD;   /* on dark */
  --spark-deep: #0A7E7B;   /* on light, text-safe */
  --up:         #17A672;
  --down:       #D0453B;

  --line:   rgba(29,29,31,.10);
  --line-2: rgba(29,29,31,.055);
  --line-d: rgba(245,245,247,.14);

  --display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --brand:   "Plus Jakarta Sans", "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;

  --e:  cubic-bezier(.25,.1,.25,1);
  --eo: cubic-bezier(.22,1,.36,1);

  --pad:  clamp(20px, 5vw, 60px);
  --maxw: 1220px;
  --readw: 900px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button,input{ font:inherit; color:inherit }
::selection{ background:var(--ink); color:#fff }
:focus-visible{ outline:2px solid var(--spark-deep); outline-offset:4px; border-radius:6px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.read{ max-width:var(--readw); margin-inline:auto }

/* ---------- type ---------- */
h1,h2,h3,h4,p{ margin:0 }

.t-hero{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.28rem, 7.1vw, 6.1rem);
  line-height:1.02; letter-spacing:-.032em;
  text-wrap:balance;
}
.t-sec{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem, 4.7vw, 3.5rem);
  line-height:1.06; letter-spacing:-.026em;
  text-wrap:balance;
}
.t-sub{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.14; letter-spacing:-.022em;
}
/* apple's sub-copy is ~half the headline, and that proportion is the whole look */
.lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.18rem, 1.95vw, 1.68rem);
  line-height:1.32; letter-spacing:-.008em; color:var(--ink-2);
  text-wrap:pretty;
}
.body{ font-size:1.0rem; line-height:1.55; color:var(--ink-2) }
.cap{ font-size:.82rem; line-height:1.4; color:var(--ink-3) }
.eyebrow{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem,1.35vw,1.16rem); letter-spacing:-.014em;
  color:var(--spark-deep); margin-bottom:14px;
}
.on-dark  { color:var(--on-dark) }
.on-dark .lead, .on-dark .body{ color:var(--on-dark-2) }
.on-dark .eyebrow{ color:var(--spark) }

/* ---------- buttons: full pills, apple proportions ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 26px; border:0; cursor:pointer;
  border-radius:980px; font-size:1.0rem; font-weight:500;
  letter-spacing:-.012em; white-space:nowrap;
  transition:background-color .25s var(--e), color .25s var(--e),
             transform .25s var(--eo), box-shadow .25s var(--e);
}
.btn:active{ transform:scale(.975) }
/* a flat fill reads cheap at this size; the top highlight and the seated
   shadow are what make a button feel like a physical control */
.btn--dark{
  color:#fff;
  background:linear-gradient(180deg,#35383D 0%,#1F2124 44%,#141517 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 1px 2px rgba(20,21,23,.20),
    0 8px 18px -8px rgba(20,21,23,.42);
}
.btn--dark:hover{
  background:linear-gradient(180deg,#43464C 0%,#292C30 44%,#1B1D20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 4px rgba(20,21,23,.20),
    0 14px 28px -10px rgba(20,21,23,.5);
  transform:translateY(-1px);
}
.btn--light{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F4 100%);
  color:var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.09),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(29,29,31,.05),
    0 6px 16px -8px rgba(29,29,31,.16);
}
.btn--light:hover{
  background:linear-gradient(180deg,#FFFFFF 0%,#E9EBEE 100%);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.13),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px -10px rgba(29,29,31,.22);
  transform:translateY(-1px);
}
.btn--onDark{ background:var(--white); color:var(--ink) }
.btn--onDark:hover{ background:#E8E8ED }
.btn--ghostDark{ background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(245,245,247,.3) }
.btn--ghostDark:hover{ background:rgba(245,245,247,.1) }
.btn--sm{ height:40px; padding:0 18px; font-size:.94rem }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:68px;
  transition:background-color .3s var(--e), box-shadow .3s var(--e);
}
.nav.is-stuck{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:saturate(190%) blur(24px);
  backdrop-filter:saturate(190%) blur(24px);
  box-shadow:0 1px 0 rgba(29,29,31,.07), 0 10px 30px -22px rgba(29,29,31,.35);
}
.nav__in{ display:flex; align-items:center; gap:26px; height:68px }
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto }
.brand__tile{
  width:30px; height:30px; border-radius:10px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 1px 2px rgba(20,21,23,.22), 0 6px 14px -8px rgba(20,21,23,.4);
}
.brand__word{
  font-family:var(--brand); font-size:1.1rem; font-weight:800;
  letter-spacing:-.05em; line-height:1; padding-bottom:1px;
}
.nav__links{ display:flex; gap:2px; margin-left:10px }
.nav__links a{
  font-size:.94rem; color:var(--ink-2); padding:8px 13px; border-radius:9px;
  transition:color .2s var(--e), background-color .2s var(--e);
}
.nav__links a:hover{ color:var(--ink); background:rgba(29,29,31,.055) }
/* the pill, the button and the burger are separate controls — let them breathe */
.nav__end{ margin-left:auto; display:flex; align-items:center; gap:12px }
@media (max-width:880px){ .nav__links{ display:none } }

/* ---------- hero ---------- */
.hero{
  padding-top:clamp(118px,15vh,168px);
  padding-bottom:clamp(52px,6.5vw,104px);
  text-align:center; position:relative;
}
.hero__glow{
  position:absolute; left:50%; top:-10%; transform:translateX(-50%);
  width:min(1500px,150vw); aspect-ratio:1.6; pointer-events:none; z-index:0;
  background:
    radial-gradient(42% 42% at 32% 42%, rgba(47,227,221,.17), transparent 68%),
    radial-gradient(40% 40% at 70% 35%, rgba(90,120,255,.12), transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0 62%,transparent 96%);
}
.hero__in{ position:relative; z-index:1 }
.hero .lead{ margin:22px auto 0; max-width:40ch }
.hero__btns{ display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap }
.hero__note{ margin-top:18px; font-size:.85rem; color:var(--ink-3) }

/* live market pill */
.live{
  display:inline-flex; align-items:center; gap:9px; height:34px;
  padding:0 15px 0 12px; border-radius:980px; margin-bottom:22px;
  background:var(--grey); font-size:.86rem; color:var(--ink-2);
  font-family:var(--display); letter-spacing:-.01em;
}
.live b{ color:var(--ink); font-weight:600 }
.live__dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--up); flex:0 0 auto }
.live__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--up);
  animation:ping 2.8s var(--eo) infinite;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.5} 70%,100%{transform:scale(3);opacity:0} }

/* ==========================================================
   the phone: every inner size derives from --ph so the whole
   device scales as one object at any breakpoint
   ========================================================== */
.phone{
  --ph:300px;
  /* device 71.9 x 149.6 mm; the 4% bezel lands the inner screen on 402/874 */
  --bez:calc(var(--ph)*.040);
  width:var(--ph); aspect-ratio:719/1496; flex:0 0 auto; position:relative;
  border-radius:calc(var(--ph)*.167);
  padding:var(--bez);
  /* titanium rails: bright speculars just inside each long edge */
  background:linear-gradient(90deg,
    #23262A 0%, #7E858E 1.6%, #4A4F56 4%, #1A1C20 9%,
    #141619 50%, #16181B 91%, #4A4F56 96%, #7E858E 98.4%, #23262A 100%);
  box-shadow:
    0 1px 3px rgba(0,0,0,.20),
    0 18px 36px -14px rgba(0,0,0,.28),
    0 56px 90px -46px rgba(0,0,0,.42);
}
.phone__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:calc(var(--ph)*.127); background:var(--white);
}
/* dynamic island: 125 x 36.7 pt on a 402 pt screen */
.phone__island{
  position:absolute; z-index:6; left:50%;
  top:calc(var(--bez) + var(--ph)*.026);
  transform:translateX(-50%);
  width:calc(var(--ph)*.292); height:calc(var(--ph)*.085);
  background:#000; border-radius:999px;
}
.phone__island::after{
  content:""; position:absolute; right:14%; top:50%; transform:translateY(-50%);
  width:calc(var(--ph)*.030); height:calc(var(--ph)*.030); border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #2B3A44 0%, #0C1116 58%, #05080A 100%);
  box-shadow:inset 0 0 0 1px rgba(120,150,170,.22);
}
.phone__glass{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:calc(var(--ph)*.127);
  background:linear-gradient(128deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 16%,
    rgba(255,255,255,0) 34%, rgba(255,255,255,0) 100%);
}
/* side controls */
.phone__btn{
  position:absolute; z-index:4; width:calc(var(--ph)*.011);
  border-radius:calc(var(--ph)*.005);
  background:linear-gradient(180deg,#5D646C,#2A2E33 40%,#2A2E33 60%,#5D646C);
}
.phone__btn--action{ left:calc(var(--ph)*-.008); top:15.5%;  height:3.4% }
.phone__btn--volup{  left:calc(var(--ph)*-.008); top:21.5%;  height:5.6% }
.phone__btn--voldn{  left:calc(var(--ph)*-.008); top:28.5%;  height:5.6% }
.phone__btn--power{  right:calc(var(--ph)*-.008); top:23%;   height:8.4% }
.phone__btn--cam{
  right:calc(var(--ph)*-.006); top:35.5%; height:4.2%;
  width:calc(var(--ph)*.009);
  background:linear-gradient(180deg,#8A9199,#4A5057 45%,#6B727A);
}

.app{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:calc(var(--ph)*.026) calc(var(--ph)*.058) 0;
  font-size:calc(var(--ph)*.039); line-height:1.35; letter-spacing:-.01em;
  opacity:0; transform:scale(.985); pointer-events:none;
  transition:opacity .5s var(--e), transform .6s var(--eo);
}
.app.is-on{ opacity:1; transform:none }
.js .story .app{ } /* screens are driven by scroll */

.sbar{
  display:flex; align-items:center; justify-content:space-between;
  height:calc(var(--ph)*.085); margin-bottom:calc(var(--ph)*.028);
  font-size:calc(var(--ph)*.036); font-weight:600; color:var(--ink);
  padding:0 calc(var(--ph)*.012);
}
.sbar__ic{
  display:flex; align-items:center; gap:calc(var(--ph)*.019); color:var(--ink);
}
.sbar__ic svg{ display:block; fill:currentColor; height:auto }
.ic-sig{ width:calc(var(--ph)*.056) }
.ic-net{ font-size:calc(var(--ph)*.032); font-weight:600; letter-spacing:-.02em; line-height:1 }
.ic-bat{ width:calc(var(--ph)*.084) }

.app__lab{ font-size:calc(var(--ph)*.038); color:var(--ink-3); font-weight:500 }
.app__bal{
  font-family:var(--display); font-weight:600;
  font-size:calc(var(--ph)*.098); letter-spacing:-.035em; line-height:1.1;
  margin-top:calc(var(--ph)*.008);
}
.app__bal span{ font-size:.52em; font-weight:500; color:var(--ink-3); letter-spacing:-.02em }
.app__chg{
  display:inline-flex; align-items:center; gap:calc(var(--ph)*.014);
  margin-top:calc(var(--ph)*.022);
  font-size:calc(var(--ph)*.04); font-weight:600; color:var(--up);
}
.app__chg em{ font-style:normal; color:var(--ink-3); font-weight:500 }

.app__chart{ width:100%; height:calc(var(--ph)*.30); margin-top:calc(var(--ph)*.035) }
.seg{
  display:flex; gap:calc(var(--ph)*.008); margin-top:calc(var(--ph)*.028);
  background:var(--grey); border-radius:999px; padding:calc(var(--ph)*.008);
}
.seg span{
  flex:1; text-align:center; border-radius:999px;
  font-size:calc(var(--ph)*.034); font-weight:500; color:var(--ink-2);
  padding:calc(var(--ph)*.012) 0;
}
.seg span.on{ background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10) }

.hold{ margin-top:calc(var(--ph)*.036); display:flex; flex-direction:column; gap:calc(var(--ph)*.026) }
.hold__r{ display:flex; align-items:center; gap:calc(var(--ph)*.03) }
.hold__m{
  width:calc(var(--ph)*.095); height:calc(var(--ph)*.095); border-radius:calc(var(--ph)*.03);
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-size:calc(var(--ph)*.03); font-weight:600; flex:0 0 auto;
}
.hold__m.alt{ background:var(--grey); color:var(--ink) }
.hold__n b{ display:block; font-size:calc(var(--ph)*.042); font-weight:600; letter-spacing:-.02em }
.hold__n span{ display:block; font-size:calc(var(--ph)*.033); color:var(--ink-3) }
.hold__v{ margin-left:auto; text-align:right }
.hold__v b{ display:block; font-size:calc(var(--ph)*.042); font-weight:600 }
.hold__v i{ display:block; font-style:normal; font-size:calc(var(--ph)*.033); color:var(--up) }
.hold__v i.dn{ color:var(--down) }

.tabs{
  margin-top:auto; display:flex; justify-content:space-around; align-items:center;
  padding:calc(var(--ph)*.03) 0 calc(var(--ph)*.05);
  border-top:1px solid var(--line-2);
}
.tabs i{
  display:block; width:calc(var(--ph)*.052); height:calc(var(--ph)*.052);
  border-radius:calc(var(--ph)*.014); background:var(--grey-2);
}
.tabs i.on{ background:var(--ink) }
.home{
  position:absolute; z-index:4; left:50%; transform:translateX(-50%);
  bottom:calc(var(--ph)*.018); width:calc(var(--ph)*.31);
  height:calc(var(--ph)*.013); border-radius:999px; background:rgba(29,29,31,.30);
}
.tabs{ padding-bottom:calc(var(--ph)*.062) }

/* screen 2 — trade ticket */
.tk{ margin-top:calc(var(--ph)*.02) }
.tk__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:calc(var(--ph)*.05) }
.tk__h b{ font-size:calc(var(--ph)*.048); font-weight:600; letter-spacing:-.02em }
.tk__amt{
  font-family:var(--display); font-weight:600; text-align:center;
  font-size:calc(var(--ph)*.115); letter-spacing:-.038em; line-height:1;
  margin:calc(var(--ph)*.05) 0 calc(var(--ph)*.02);
}
.tk__sub{ text-align:center; font-size:calc(var(--ph)*.036); color:var(--ink-3) }
.tk__box{
  margin-top:calc(var(--ph)*.06); background:var(--grey); border-radius:calc(var(--ph)*.05);
  padding:calc(var(--ph)*.045);  display:flex; flex-direction:column; gap:calc(var(--ph)*.028);
}
.tk__row{ display:flex; justify-content:space-between; font-size:calc(var(--ph)*.037) }
.tk__row span{ color:var(--ink-3) }
.tk__row b{ font-weight:600 }
.tk__row b.ok{ color:var(--spark-deep) }
.tk__btn{
  margin-top:calc(var(--ph)*.05); background:var(--ink); color:#fff; text-align:center;
  border-radius:999px; padding:calc(var(--ph)*.042) 0;
  font-size:calc(var(--ph)*.042); font-weight:600;
}

/* screen 3 — paid */
.paid{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:calc(var(--ph)*.09) }
.paid__ring{
  width:calc(var(--ph)*.20); height:calc(var(--ph)*.20); border-radius:50%;
  background:var(--up); display:grid; place-items:center; margin-bottom:calc(var(--ph)*.05);
  box-shadow:0 0 0 calc(var(--ph)*.026) rgba(23,166,114,.14);
}
.paid__ring svg{ width:46%; height:46% }
.paid__amt{
  font-family:var(--display); font-weight:600;
  font-size:calc(var(--ph)*.115); letter-spacing:-.036em; line-height:1;
}
.paid__m{ margin-top:calc(var(--ph)*.024); font-size:calc(var(--ph)*.042); color:var(--ink-2) }
.paid__box{
  width:100%; margin-top:calc(var(--ph)*.07); background:var(--grey);
  border-radius:calc(var(--ph)*.05); padding:calc(var(--ph)*.045);
  display:flex; flex-direction:column; gap:calc(var(--ph)*.028);
}

/* ==========================================================
   hero composition
   ========================================================== */
.hero__art{
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  margin-top:clamp(36px,5.4vw,64px);
}
.hero__art .phone{ --ph:clamp(250px, 25vw, 330px) }

/* the card object — the supplied render, cut out and inlined once as a
   custom property so three instances share a single copy of the bytes */
:root{ --card-art:url("/img/card-black.webp") }
.card{
  aspect-ratio:940/623; width:100%;
  background:var(--card-art) center/cover no-repeat;
  /* the art is a fully opaque rectangle and the corners are rounded here, so
     there is no alpha channel a lossy codec could bleed the old ground back into */
  border-radius:4.1% / 6.19%;
  box-shadow:
    0 2px 4px rgba(10,12,14,.18),
    0 16px 28px -12px rgba(10,12,14,.26),
    0 40px 62px -30px rgba(10,12,14,.30);
}
/* the tile's own spotlight sits lighter than the card, so separation comes for
   free — no inset ring, which is what drew the square outline before */
.tile--black .card{
  box-shadow:
    0 18px 34px -14px rgba(0,0,0,.75),
    0 50px 82px -40px rgba(0,0,0,.70);
}

/* placed after .card: it sets position:relative, so these must outrank it */
.hero__art .hero__card{
  position:absolute; left:50%; bottom:-1%; z-index:2;
  width:clamp(232px,24vw,330px);
  transform:translateX(-133%) rotate(-12deg);
}
.hero__art .hero__card2{
  position:absolute; left:50%; bottom:6%; z-index:1;
  width:clamp(196px,20vw,272px);
  transform:translateX(46%) rotate(13deg);
}
@media (max-width:1080px){ .hero__art .hero__card2{ display:none } }
@media (max-width:840px){
  .hero__art{ flex-direction:column; align-items:center }
  .hero__art .hero__card{
    position:static; transform:rotate(-4deg);
    width:min(300px,74vw); margin-top:38px;
  }
}

/* ==========================================================
   scroll story: the phone is pinned, the screen follows the copy
   ========================================================== */
.story{ background:var(--white); padding-top:clamp(60px,8vw,110px) }
.story__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,90px); align-items:start;
}
.story__vis{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; order:2;
}
.story__vis .phone{ --ph:clamp(240px,23vw,318px) }
.story__beats{ order:1 }
.beat{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(40px,8vh,90px);
}
.beat .lead{ margin-top:18px; max-width:34ch }
.beat__list{ margin-top:26px; display:flex; flex-direction:column; gap:2px }
.beat__li{
  display:flex; gap:14px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-2);
}
.beat__li b{ font-weight:600; font-size:.98rem; min-width:5.4em; color:var(--ink) }
.beat__li span{ font-size:.98rem; color:var(--ink-2); line-height:1.5 }

@media (max-width:900px){
  .story__grid{ grid-template-columns:1fr; gap:0 }
  .story__vis{
    position:sticky; top:68px; height:auto; order:1;
    padding:14px 0 26px; background:var(--white); z-index:5;
  }
  .story__vis::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:36px;
    background:linear-gradient(var(--white),rgba(255,255,255,0)); pointer-events:none;
  }
  .story__vis .phone{ --ph:min(210px,52vw) }
  .story__beats{ order:2 }
  .beat{ min-height:auto; padding-block:clamp(30px,6vh,52px) }
}

/* ==========================================================
   full-bleed tiles
   ========================================================== */
.tile{ padding:clamp(80px,10vw,150px) 0; position:relative; overflow:hidden }
.tile--white{ background:var(--white) }
.tile--grey{ background:var(--grey) }
.tile--black{
  color:var(--on-dark);
  background:radial-gradient(58% 46% at 50% 46%, #15181C 0%, #000 64%), var(--black);
}
.showcase{ position:relative }
.showcase::before{
  content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(880px,94vw); aspect-ratio:1.7; pointer-events:none; z-index:0;
  background:radial-gradient(44% 44% at 50% 50%, rgba(47,227,221,.07), transparent 70%);
}
.showcase > *{ position:relative; z-index:1 }
.tile--deep{
  color:var(--on-dark);
  background:
    radial-gradient(70% 90% at 78% 12%, rgba(47,227,221,.20), transparent 62%),
    radial-gradient(60% 80% at 12% 92%, rgba(96,110,255,.22), transparent 66%),
    linear-gradient(152deg, #101A3D 0%, #0A2740 46%, #06333A 100%);
}
.tile__head{ text-align:center; max-width:840px; margin:0 auto clamp(40px,5vw,68px) }
.tile__head .lead{ margin-top:18px }

/* black card tile */
.showcase{ display:grid; place-items:center; text-align:center }
.showcase .card{ width:min(466px,84vw); margin-top:clamp(38px,5vw,62px) }
.specs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px); margin-top:clamp(48px,6vw,84px); width:100%;
  max-width:1000px; text-align:left;
}
@media (max-width:760px){ .specs{ grid-template-columns:1fr; gap:26px } }
.spec{ border-top:1px solid var(--line-d); padding-top:20px }
.spec b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.03em; color:var(--spark);
  line-height:1;
}
.spec h3{ margin-top:12px; font-size:1.02rem; font-weight:600; letter-spacing:-.02em }
.spec p{ margin-top:6px; font-size:.95rem; color:var(--on-dark-2); line-height:1.5 }

/* steps */
.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px); position:relative; padding-top:30px;
}
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; row-gap:38px } }
.steps__rail{ position:absolute; top:0; left:0; right:0; height:1px; background:var(--line) }
.steps__rail i{
  position:absolute; inset:0;
  background:linear-gradient(90deg,var(--ink),#4E5257);
  transform:scaleX(var(--p,0)); transform-origin:left;
  transition:transform 1.05s var(--eo);
}

/* the asset itself, travelling the rail and changing material at each stop:
   paper, sealed paper, minted metal, metal under load */
.trav{
  position:absolute; left:0; top:0; z-index:4; pointer-events:none;
  width:38px; height:38px;
  transform:translate(calc(var(--x,0px) - 50%), -50%);
  transition:transform 1.05s var(--eo);
}
.trav__d{
  position:absolute; inset:0; border-radius:50%;
  transition:background .8s var(--e), box-shadow .8s var(--e), transform .8s var(--eo);
}
.trav__d::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#A8382F;
  opacity:0; transition:opacity .7s var(--e);
}
.trav[data-stage="0"] .trav__d{
  background:linear-gradient(180deg,#FCFAF3,#EBE4D4);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.18), 0 4px 12px -4px rgba(29,29,31,.30);
}
.trav[data-stage="1"] .trav__d{
  background:linear-gradient(180deg,#FCFAF3,#E2DAC4);
  box-shadow:inset 0 0 0 3.5px #1D1F22, 0 4px 12px -4px rgba(29,29,31,.34);
}
.trav[data-stage="0"] .trav__d::after,
.trav[data-stage="1"] .trav__d::after{ opacity:.85 }
.trav[data-stage="2"] .trav__d{
  background:radial-gradient(58% 52% at 32% 26%, rgba(255,255,255,.55), transparent 58%),conic-gradient(from 205deg,#737B80,#D6DCE0 7%,#8D959A 17%,#EFF4F6 27%,#7E868B 37%,#C6CDD1 47%,#757D82 57%,#DFE5E8 69%,#8A9297 79%,#F1F5F7 89%,#737B80);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 6px 16px -6px rgba(29,29,31,.42);
  transform:scale(1.06);
}
.trav[data-stage="3"] .trav__d{
  background:radial-gradient(58% 52% at 32% 26%, rgba(255,255,255,.55), transparent 58%),conic-gradient(from 205deg,#737B80,#D6DCE0 7%,#8D959A 17%,#EFF4F6 27%,#7E868B 37%,#C6CDD1 47%,#757D82 57%,#DFE5E8 69%,#8A9297 79%,#F1F5F7 89%,#737B80);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),
             0 0 0 7px rgba(18,189,184,.15),
             0 6px 18px -6px rgba(18,189,184,.55);
  transform:scale(1.06);
}
@media (max-width:980px){ .trav{ display:none } }
.step{ padding-top:0; position:relative }
.step::before{
  content:""; position:absolute; top:-34px; left:2px; z-index:2;
  width:9px; height:9px; border-radius:50%; background:var(--grey-2);
  box-shadow:0 0 0 4px var(--white);
  transition:background-color .5s var(--e), transform .5s var(--eo);
}
.step.is-done::before{ background:var(--ink) }
.step.is-active::before{ background:var(--ink); transform:scale(1.35) }
@media (max-width:980px){ .steps__rail{ display:none } .step::before{ display:none } .step{ border-top:1px solid var(--line); padding-top:20px } }
.step b{ font-size:.9rem; color:var(--ink-3); font-weight:500 }
.step h3{ margin-top:12px; font-family:var(--display); font-weight:600;
  font-size:1.14rem; letter-spacing:-.022em }
.step p{ margin-top:8px; font-size:.96rem; color:var(--ink-2); line-height:1.5 }

/* cta */
.cta{ text-align:center; position:relative }
.cta--seam{ position:relative }
/* picks up exactly where the seam stops, so the tint resolves to white well
   below the join instead of at it */
.cta--seam::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:0;
  height:clamp(150px,20vh,240px); pointer-events:none;
  background:linear-gradient(180deg,
    rgb(238,247,248)  0%,
    rgb(245,250,251) 32%,
    rgb(250,253,253) 62%,
    rgb(253,254,254) 84%,
    #FFFFFF         100%);
}
.cta__panel{
  position:relative; overflow:hidden;
  border-radius:clamp(24px,3vw,42px);
  padding:clamp(58px,8vw,124px) clamp(24px,4vw,64px);
  background:linear-gradient(180deg,#FCFDFD 0%,#EFF3F4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 34px 74px -46px rgba(29,29,31,.32);
}
.cta__panel::before{
  content:""; position:absolute; left:50%; top:-34%; transform:translateX(-50%);
  width:124%; aspect-ratio:1.5; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 44% at 33% 46%, rgba(47,227,221,.22), transparent 66%),
    radial-gradient(38% 42% at 69% 38%, rgba(90,120,255,.16), transparent 70%);
}
.cta__in{ position:relative; z-index:1 }
.cta .lead{ margin:20px auto 0; max-width:36ch }
.form{ display:flex; gap:10px; max-width:490px; margin:36px auto 0 }
@media (max-width:500px){ .form{ flex-direction:column } }
.form input{
  flex:1; height:56px; border:0; border-radius:980px; background:var(--white);
  padding:0 24px; font-size:1rem;
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.10),
    inset 0 1px 2px rgba(29,29,31,.05),
    0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .22s var(--e);
}
.form .btn{ height:56px }
.form input::placeholder{ color:var(--ink-3) }
.form input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--ink) }
.note{ margin-top:16px; font-size:.86rem; color:var(--ink-3); min-height:1.4em }
.note.ok{ color:var(--spark-deep) }

/* footer */
.ftr{ background:var(--grey); padding:clamp(56px,6vw,88px) 0 36px }
.ftr__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.75fr));
  gap:clamp(24px,4vw,56px) }
@media (max-width:680px){ .ftr__grid{ grid-template-columns:1fr 1fr } .ftr__brand{ grid-column:1/-1 } }
.ftr__brand p{ margin-top:16px; font-size:.95rem; color:var(--ink-2); max-width:30ch; line-height:1.55 }
.ftr .brand__word{ font-size:1.24rem }
.ftr h4{ font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:13px }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.ftr li a{ font-size:.94rem; color:var(--ink-2); transition:color .2s var(--e) }
.ftr li a:hover{ color:var(--ink) }
.social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.6vw,28px) }
.social a{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:var(--ink-2); background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.08), 0 1px 2px rgba(29,29,31,.04);
  transition:background-color .25s var(--e), color .25s var(--e),
             transform .25s var(--eo), box-shadow .25s var(--e);
}
.social a:hover{
  background:var(--ink); color:#fff; transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.9), 0 8px 18px -8px rgba(29,29,31,.42);
}
.social a:active{ transform:translateY(0) }
.social svg{ width:17px; height:17px; fill:currentColor; display:block }

.ftr__legal{ margin-top:clamp(34px,4vw,54px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between }
.ftr__legal p{ font-size:.79rem; color:var(--ink-3); line-height:1.55; max-width:78ch }


/* ==========================================================
   milled metal coins — real CSS cylinders: two faces plus a
   ring of tangent segments, so the thickness is geometry and
   not a picture of thickness
   ========================================================== */
.tile--metal{
  color:var(--on-dark);
  padding-bottom:clamp(170px,21vh,280px);
  background:
    radial-gradient(72% 56% at 50% 38%, #171B1F 0%, #08090B 56%, #000 100%),
    var(--black);
}
.tile--metal .wrap{ position:relative; z-index:1 }

/* the seam into the closing panel: light rising out of the dark.
   black straight to white would pass through mud, so the ramp is routed
   through the brand teal and lit by the same aurora as the panel below */
.seam{
  position:absolute; left:-8%; right:-8%; bottom:-1px; z-index:0;
  height:clamp(280px,38vh,470px); pointer-events:none;
  opacity:.5; transform:translateY(22px);
  transition:opacity 1.4s var(--e), transform 1.4s var(--eo);
  background:
    /* the aurora is centred inside the ramp and reaches zero before the
       bottom edge — centred below it, it would end in a hard line */
    radial-gradient(56% 46% at 50% 58%, rgba(47,227,221,.24), transparent 72%),
    radial-gradient(46% 42% at 22% 62%, rgba(104,124,255,.22), transparent 74%),
    radial-gradient(46% 42% at 80% 60%, rgba(47,227,221,.15), transparent 74%),
    /* opaque past 52%: semi-transparent light stops composite over black and
       arrive at pure white as a step. an S-curve tapers to 0.4 levels/px. */
    linear-gradient(180deg,
      rgba(14,46,56,0)      0%,
      rgba(14,46,56,0)     14%,
      rgba(14,46,56,.156)  23.5%,
      rgba(14,46,56,.5)    33%,
      rgba(14,46,56,.844)  42.5%,
      rgb(14,46,56)        52%,
      rgb(20,68,80)        59%,
      rgb(38,100,113)      66%,
      rgb(82,142,152)      73%,
      rgb(139,184,190)     80%,
      rgb(184,214,218)     86%,
      rgb(212,232,234)     91%,
      rgb(230,243,244)     96%,
      rgb(238,247,248)    100%);
}
.seam.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .seam{ opacity:1 !important; transform:none !important } }
.switch{
  display:inline-flex; padding:4px; border-radius:980px;
  margin:0 auto clamp(30px,4.4vw,52px); position:relative;
  background:rgba(245,245,247,.07);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.11);
}
.switch button{
  position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  height:42px; padding:0 clamp(16px,2.2vw,26px); border-radius:980px;
  font-family:var(--display); font-size:.96rem; font-weight:500;
  color:var(--on-dark-2); letter-spacing:-.012em;
  transition:color .35s var(--e);
}
.switch button[aria-selected="true"]{ color:#0A0B0C }
.switch__pin{
  position:absolute; z-index:0; top:4px; bottom:4px; left:4px;
  border-radius:980px; background:var(--on-dark);
  transition:transform .5s var(--eo), width .5s var(--eo);
}

.rig{ display:flex; flex-direction:column; align-items:center }
.stage3d{ perspective:1500px; perspective-origin:50% 44%; width:100% }
.stage3d.is-live{ cursor:pointer }
.rack{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1vw,20px); transform-style:preserve-3d;
  min-height:clamp(200px,25vw,320px);
}
.cw{
  position:relative; transform-style:preserve-3d; will-change:transform, opacity;
  cursor:pointer; border:0; background:transparent; padding:0;
}
/* ambient halo sitting behind the coin in Z, so it reads as light in the room
   rather than a shadow painted on the page */
.cw::before{
  content:""; position:absolute; left:50%; top:50%;
  width:210%; height:210%; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%) translateZ(-40px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(158,206,220,.20) 0%, rgba(47,227,221,.10) 42%, transparent 70%);
  opacity:var(--halo,.35);
  transition:opacity .55s var(--e);
}
.coin{
  --r:clamp(46px,7vw,104px); --t:calc(var(--r)*.17);
  --sw:calc(var(--r)*6.2832/30 + 1px);
  width:calc(var(--r)*2); height:calc(var(--r)*2);
  position:relative; transform-style:preserve-3d; will-change:transform;
}
.coin__f{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(58% 52% at 32% 26%, rgba(255,255,255,.50), transparent 58%),
    conic-gradient(from 205deg,
      #737B80, #D6DCE0 7%, #8D959A 17%, #EFF4F6 27%, #7E868B 37%,
      #C6CDD1 47%, #757D82 57%, #DFE5E8 69%, #8A9297 79%, #F1F5F7 89%, #737B80);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.30),
    inset 0 0 0 7px rgba(16,20,24,.13),
    inset 0 8px 20px rgba(255,255,255,.16),
    inset 0 -10px 22px rgba(8,11,14,.30);
}
.coin__f::after{
  content:""; position:absolute; inset:10%; border-radius:50%;
  background:
    radial-gradient(72% 72% at 34% 28%, rgba(255,255,255,.26), transparent 62%),
    conic-gradient(from 25deg,
      #9BA3A8, #C9D0D4 10%, #99A1A6 22%, #DAE0E4 34%, #909899 46%,
      #CCD3D7 58%, #959DA2 70%, #DEE4E7 84%, #9BA3A8);
  box-shadow:
    inset 0 0 0 1px rgba(12,16,20,.26),
    inset 0 2px 5px rgba(255,255,255,.34),
    inset 0 -3px 7px rgba(8,11,14,.26);
}
.coin__f--a{ transform:translateZ(calc(var(--t)/2)) }
.coin__f--b{ transform:translateZ(calc(var(--t)/-2)) rotateY(180deg) }
.coin__t{
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; z-index:2;
  font-family:var(--display); font-weight:600; letter-spacing:-.035em;
  font-size:calc(var(--r)*.40); color:#4B5359; line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.78), 0 -1px 1px rgba(6,10,13,.42);
}
.coin__t small{ font-size:.36em; letter-spacing:.08em; margin-top:.5em; opacity:.85; font-weight:500 }
.coin__rev{ display:grid; justify-items:center; gap:.35em; z-index:2 }
.coin__b{ width:calc(var(--r)*.42); height:calc(var(--r)*.42);
  opacity:.55; filter:grayscale(1) contrast(.5) drop-shadow(0 1px 0 rgba(255,255,255,.55)) }
.coin__rev em{
  font-family:var(--brand); font-style:normal; font-weight:800;
  font-size:calc(var(--r)*.17); letter-spacing:-.045em; color:#4B5359;
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(6,10,13,.35);
}
/* the conic base rotates with the coin (correct — that is the machining),
   but the specular must stay anchored to the light, so it is a separate layer
   whose band position is recomputed from the coin's angle every frame */
.coin__spec{
  position:absolute; inset:0; border-radius:50%; z-index:3; pointer-events:none;
  background:linear-gradient(101deg,
    rgba(255,255,255,0)    34%,
    rgba(214,246,250,.14)  41%,
    rgba(255,255,255,.32)  46.5%,
    rgba(255,255,255,.82)  50%,
    rgba(255,255,255,.32)  53.5%,
    rgba(150,232,240,.16)  59%,
    rgba(255,255,255,0)    66%);
  background-size:300% 100%;
  background-position:calc(var(--spec,50) * 1%) 0;
  opacity:.64;
}
.coin__s{ position:absolute; left:50%; top:50%; transform-style:preserve-3d }
.coin__s i{
  position:absolute; left:0; top:0; display:block;
  width:var(--sw); height:var(--t);
  margin-left:calc(var(--sw)/-2); margin-top:calc(var(--t)/-2);
  transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotateX(90deg);
  background:
    repeating-linear-gradient(90deg, rgba(6,9,12,.32) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#2F3438,#A5ADB2 26%,#E6ECEF 50%,#959DA2 74%,#2F3438);
}

.readout{ text-align:center; margin-top:clamp(26px,3.6vw,46px); min-height:9.5em }
.readout__k{
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.55rem,2.7vw,2.2rem); line-height:1.1;
}
.readout__n{ color:var(--on-dark-2); margin-top:7px; font-size:1.02rem }
.readout__grid{
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,46px);
  justify-content:center; margin-top:clamp(18px,2.4vw,28px);
}
.readout__grid div{ text-align:left; min-width:8.5em }
.readout__grid b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:1.3rem; color:var(--spark); letter-spacing:-.024em;
}
.readout__grid span{ display:block; font-size:.85rem; color:var(--on-dark-2); margin-top:3px }
.readout__hint{ margin-top:clamp(20px,3vw,32px); font-size:.85rem; color:var(--on-dark-2) }
.readout__in{ transition:opacity .3s var(--e), transform .3s var(--e) }
.readout.is-swap .readout__in{ opacity:0; transform:translateY(7px) }

/* ==========================================================
   the four steps, as cards
   ========================================================== */
.step{
  background:var(--white); border-radius:clamp(16px,1.6vw,20px);
  padding:clamp(22px,2.4vw,28px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(29,29,31,.04),
    0 14px 30px -20px rgba(29,29,31,.16);
  transition:transform .45s var(--eo), box-shadow .45s var(--e), opacity .5s var(--e);
}
.steps.is-seq .step{ cursor:pointer }
.step:hover, .step.is-active{
  transform:translateY(-6px); opacity:1;
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.09),
    0 30px 56px -28px rgba(29,29,31,.30);
}
.step__ghost{ transition:color .7s var(--e) }
.step.is-active .step__ghost{ color:rgba(29,29,31,.15) }
.step__ic{ transition:color .7s var(--e), transform .7s var(--eo) }
.step.is-active .step__ic{ color:var(--spark-deep); transform:scale(1.08) }
.step__ic{ width:30px; height:30px; color:var(--ink); margin-bottom:clamp(16px,2vw,22px) }
.step__ghost{
  position:absolute; right:12px; top:6px; pointer-events:none; overflow:hidden;
  font-family:var(--display); font-weight:600; letter-spacing:-.05em;
  font-size:clamp(3.4rem,5vw,4.6rem); line-height:1; color:rgba(29,29,31,.055);
}

/* per-letter physics on section headings, hand-rolled: the project ships as a
   single static file, so a React/Tailwind component was not an option */
.dance{ display:inline }
.dance .wd{ display:inline-block; white-space:nowrap }
.dance .ltr{ display:inline-block; will-change:transform }
.dance .sp{ display:inline-block; width:.26em }

@keyframes d-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.24)} 100%{transform:scale(1)} }
@keyframes d-rubber{
  0%{transform:scale(1,1)} 22%{transform:scale(1.22,.80)} 40%{transform:scale(.85,1.17)}
  58%{transform:scale(1.09,.95)} 76%{transform:scale(.97,1.03)} 100%{transform:scale(1,1)}
}
@keyframes d-jump{
  0%{transform:translateY(0) scaleY(1)} 20%{transform:translateY(5px) scaleY(.78)}
  52%{transform:translateY(-24px) scaleY(1.10)} 80%{transform:translateY(0) scaleY(.95)}
  100%{transform:translateY(0) scaleY(1)}
}
@keyframes d-levitate{
  0%{transform:translateY(0) scale(1)} 45%{transform:translateY(-16px) scale(1.05)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes d-shake{
  0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-3px,-1px) rotate(-2.4deg)}
  40%{transform:translate(3px,1px) rotate(2.4deg)} 60%{transform:translate(-2px,0) rotate(-1.4deg)}
  80%{transform:translate(2px,0) rotate(1deg)}
}
@keyframes d-tilt{
  0%{transform:rotate(0) translateY(0)} 40%{transform:rotate(-7deg) translateY(-5px)}
  72%{transform:rotate(3.5deg) translateY(0)} 100%{transform:rotate(0) translateY(0)}
}
.ltr.a0{ animation:d-pop .55s cubic-bezier(.34,1.56,.64,1) }
.ltr.a1{ animation:d-rubber .8s ease-in-out }
.ltr.a2{ animation:d-jump .62s cubic-bezier(.22,1,.36,1); transform-origin:bottom center }
.ltr.a3{ animation:d-levitate .9s ease-in-out }
.ltr.a4{ animation:d-shake .5s linear }
.ltr.a5{ animation:d-tilt .7s cubic-bezier(.34,1.4,.64,1); transform-origin:bottom left }

/* reveal — one gesture, applied to section blocks only */
.js [data-r]{ opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--e) var(--d,0ms), transform .7s var(--eo) var(--d,0ms) }
.js [data-r].is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  .js [data-r]{ opacity:1 !important; transform:none !important }
  .app{ transition:none }
  .ltr{ animation:none !important }
}

/* ==========================================================
   sub-page chrome
   ========================================================== */
.nav__links a[aria-current="page"]{ color:var(--ink); background:rgba(29,29,31,.06) }

.phead{
  position:relative; overflow:hidden;
  padding:clamp(126px,17vh,186px) 0 clamp(46px,6.5vw,86px);
}
.phead__glow{
  position:absolute; left:50%; top:-32%; transform:translateX(-50%);
  width:min(1300px,140vw); aspect-ratio:1.7; pointer-events:none; z-index:0;
  background:
    radial-gradient(40% 42% at 34% 46%, rgba(47,227,221,.15), transparent 68%),
    radial-gradient(38% 40% at 70% 38%, rgba(90,120,255,.12), transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 58%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0 58%,transparent 96%);
}
.phead .wrap{ position:relative; z-index:1 }
.phead h1{ max-width:18ch }
.phead .lead{ margin-top:20px; max-width:52ch }

.soon{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,32px);
  padding:clamp(24px,3vw,34px) clamp(24px,3vw,36px);
  border-radius:clamp(18px,2vw,24px);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFC 100%);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.07),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 30px -22px rgba(29,29,31,.20);
}
.soon p{ margin:0; font-size:1rem; color:var(--ink-2); max-width:56ch; line-height:1.55 }
.soon b{ color:var(--ink); font-weight:600 }
.soon .btn{ flex:0 0 auto }

/* ==========================================================
   card tiers — the section takes on the material of the
   selected card, so choosing one changes the whole room
   ========================================================== */
/* registering the colours makes them animatable, so both the section and the
   ramp that leads into it cross-fade when a different card is chosen */
@property --tint{ syntax:'<color>'; inherits:true; initial-value:#0A0B0D }
@property --halo{ syntax:'<color>'; inherits:true; initial-value:rgba(47,227,221,.16) }
@property --ramp{ syntax:'<color>'; inherits:true; initial-value:rgba(47,227,221,.30) }

.deck{
  --tint:#0A0B0D; --halo:rgba(47,227,221,.16); --ramp:rgba(47,227,221,.30);
  position:relative; color:var(--on-dark); overflow:hidden;
  padding:clamp(200px,26vh,330px) 0 clamp(70px,9vw,120px);
  background:var(--tint);
  transition:--tint 1s var(--e), --halo 1s var(--e), --ramp 1s var(--e);
}
/* white resolving into the chosen material: an S-curve so neither end steps */
.deck__enter{
  position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
  height:clamp(230px,30vh,380px);
  background:
    radial-gradient(64% 108% at 50% 2%, var(--halo), transparent 66%),
    /* a chromatic wash through the middle: mixing white straight into a neutral
       near-black passes through dead grey, which is what looked muddy */
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 14%,
      var(--ramp) 44%, var(--ramp) 63%,
      rgba(0,0,0,0) 92%),
    linear-gradient(180deg,
      #FFFFFF                                         0%,
      color-mix(in srgb, var(--tint)  2%, #FFFFFF)   14%,
      color-mix(in srgb, var(--tint)  8%, #FFFFFF)   28%,
      color-mix(in srgb, var(--tint) 19%, #FFFFFF)   41%,
      color-mix(in srgb, var(--tint) 35%, #FFFFFF)   53%,
      color-mix(in srgb, var(--tint) 55%, #FFFFFF)   64%,
      color-mix(in srgb, var(--tint) 74%, #FFFFFF)   74%,
      color-mix(in srgb, var(--tint) 88%, #FFFFFF)   83%,
      color-mix(in srgb, var(--tint) 96%, #FFFFFF)   91%,
      color-mix(in srgb, var(--tint) 99%, #FFFFFF)   96%,
      var(--tint)                                   100%);
}
.deck__glow{
  position:absolute; left:50%; top:46%; z-index:0; pointer-events:none;
  width:min(1100px,120vw); aspect-ratio:1.6;
  transform:translate(-50%,-50%) scale(.72); opacity:0;
  background:radial-gradient(50% 50% at 50% 50%, var(--halo), transparent 70%);
  transition:transform 1.4s var(--eo), opacity 1.2s var(--e);
}
.deck.is-live .deck__glow{ transform:translate(-50%,-50%) scale(1); opacity:1 }

/* arriving at the section: the rack rises, the controls settle after it */
.deckstage{ transform:translateY(56px); transition:transform 1.25s var(--eo) .08s }
.deck.is-live .deckstage{ transform:none }
.tierTabs, .tierPanel{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--e), transform .9s var(--eo);
}
.deck.is-live .tierTabs{ opacity:1; transform:none }
.deck.is-live .tierPanel{ opacity:1; transform:none; transition-delay:.2s }
@media (prefers-reduced-motion:reduce){
  .deckstage{ transform:none !important }
  .tierTabs, .tierPanel{ opacity:1 !important; transform:none !important }
  .deck__glow{ opacity:1 !important; transform:translate(-50%,-50%) !important }
}
.deck .wrap{ position:relative; z-index:1 }

.tierTabs{ display:flex; justify-content:center; margin-bottom:clamp(28px,4vw,46px) }
.tierTabs .switch{ margin-bottom:0; flex-wrap:wrap; justify-content:center }
.tierTabs .switch button{ padding:0 clamp(12px,1.8vw,22px) }

.deckstage{ perspective:1700px; perspective-origin:50% 42% }
.fan{
  position:relative; transform-style:preserve-3d; width:100%;
  height:clamp(200px,25vw,320px);
}
.fanCard{
  position:absolute; left:50%; top:50%;
  width:clamp(196px,25vw,336px); aspect-ratio:940/625;
  border:0; padding:0; cursor:pointer; border-radius:4.05% / 6.1%;
  background-color:transparent;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  will-change:transform,opacity;
  /* unselected cards are darkened rather than made transparent: a translucent
     card behind shows through the selected card's rounded corners as a pale wedge */
  filter:brightness(.38) saturate(.7);
  box-shadow:0 2px 6px rgba(0,0,0,.45), 0 26px 54px -22px rgba(0,0,0,.72);
  transition:transform .75s var(--eo), opacity .6s var(--e),
             filter .6s var(--e), box-shadow .6s var(--e);
}
.fanCard[aria-selected="true"]{
  filter:none;
  box-shadow:0 3px 10px rgba(0,0,0,.5), 0 40px 74px -26px rgba(0,0,0,.8);
}
.fanCard--circuit{ background-image:url("/img/card-circuit.webp") }
.fanCard--steel  { background-image:url("/img/card-steel.webp") }
.fanCard--gold   { background-image:url("/img/card-gold.webp") }
.fanCard--nova   { background-image:url("/img/card-nova.webp") }

.tierPanel{
  margin-top:clamp(38px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,64px); align-items:start;
}
@media (max-width:820px){ .tierPanel{ grid-template-columns:1fr; gap:26px } }
.tierPanel__in{ transition:opacity .3s var(--e), transform .3s var(--e) }
.tierPanel.is-swap .tierPanel__in{ opacity:0; transform:translateY(7px) }
.tierName{
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.05;
}
.tierPrice{ margin-top:8px; color:var(--on-dark-2); font-size:1rem }
.tierRate{ margin-top:clamp(20px,2.6vw,30px) }
.tierRate b{
  display:block; font-family:var(--display); font-weight:600; letter-spacing:-.035em;
  font-size:clamp(2.6rem,5vw,4rem); line-height:1; color:var(--spark);
}
.tierRate span{ display:block; margin-top:7px; font-size:.92rem; color:var(--on-dark-2) }
.tierList{ display:grid; gap:0 }
.tierList div{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  padding:13px 0; border-top:1px solid var(--line-d); align-items:baseline;
}
.tierList div:last-child{ border-bottom:1px solid var(--line-d) }
.tierList b{ font-weight:600; font-size:.9rem; color:var(--spark); min-width:5.6em }
.tierList span{ font-size:.96rem; color:var(--on-dark-2); line-height:1.5 }

/* ---------- vaults ---------- */
.vaults{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:860px){ .vaults{ grid-template-columns:1fr } }
.vault{
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(20px,2.4vw,28px); display:flex; align-items:center; gap:18px;
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 26px -18px rgba(29,29,31,.18);
}
.vault__ring{ position:relative; width:58px; height:58px; flex:0 0 auto }
.vault__ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.vault__ring i{
  position:absolute; inset:0; display:grid; place-items:center;
  font-style:normal; font-size:.78rem; font-weight:600; color:var(--ink);
}
.vault__t b{ display:block; font-size:1rem; font-weight:600; letter-spacing:-.02em }
.vault__t span{ display:block; margin-top:4px; font-size:.88rem; color:var(--ink-3) }

.accrual{
  margin-top:clamp(16px,2vw,22px); display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:baseline; padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px);
  border-radius:14px; background:var(--grey);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.06);
}
.accrual b{ font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--spark-deep) }
.accrual span{ font-size:.92rem; color:var(--ink-2) }

/* ---------- comparison ---------- */
.cmpWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.cmp{ width:100%; min-width:660px; border-collapse:collapse; text-align:left }
.cmp th, .cmp td{ padding:15px 16px; border-bottom:1px solid var(--line-2); font-size:.94rem }
.cmp thead th{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  letter-spacing:-.02em; border-bottom:1px solid var(--line);
}
.cmp tbody th{ font-weight:500; color:var(--ink-2) }
.cmp td{ color:var(--ink) }
.cmp .best{ color:var(--spark-deep); font-weight:600 }

/* three related notes, not a sequence: no rail, no auto-advance */
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:860px){ .facts{ grid-template-columns:1fr } }
.fact{
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 26px -18px rgba(29,29,31,.18);
}
.fact h3{ font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.022em }
.fact p{ margin-top:9px; font-size:.95rem; color:var(--ink-2); line-height:1.55 }


/* ---------- wallet support ---------- */
.wallets{
  margin-top:clamp(30px,4vw,46px); padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,32px);
}
.wallets p{ margin:0; font-size:1rem; color:var(--on-dark-2); max-width:44ch }
.wallets__marks{ display:flex; flex-wrap:wrap; gap:10px }
.wmark{
  display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px;
  border-radius:12px; background:rgba(245,245,247,.06);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.16);
  color:var(--on-dark); font-size:1rem; font-weight:500; letter-spacing:-.014em;
  white-space:nowrap;
}
.wmark svg{ height:20px; width:auto; display:block; flex:0 0 auto }
.wmark--apple svg{ height:22px; fill:currentColor }

/* ==========================================================
   product page — subsections
   ========================================================== */
.sub{ padding:clamp(64px,8vw,110px) 0 }
.sub--grey{ background:var(--grey) }
.sub__head{ max-width:720px; margin-bottom:clamp(34px,4.4vw,56px) }
.sub__head .lead{ margin-top:16px }

/* two doors into the account, side by side */
.fund{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:clamp(14px,1.6vw,20px) }
@media (max-width:940px){ .fund{ grid-template-columns:1fr } }
.pane{
  background:var(--white); border-radius:clamp(18px,2vw,26px);
  padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column;
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 30px -22px rgba(29,29,31,.18);
}
.pane__t{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.7vw,1.45rem);
  letter-spacing:-.024em }
.pane__d{ margin-top:9px; font-size:.96rem; color:var(--ink-2); line-height:1.55; max-width:46ch }

/* wallet marks: a tinted tile in the brand's own colour, legible for any hue */
.wmk{
  width:var(--s,38px); height:var(--s,38px); border-radius:calc(var(--s,38px)*.29);
  flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
  background:#F3F4F6;
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.07);
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:calc(var(--s,38px)*.4); color:var(--wc); line-height:1;
}
.wmk img{ width:100%; height:100%; object-fit:cover; display:block }

.w3{ display:grid; gap:8px; margin-top:clamp(20px,2.4vw,26px) }
.wbtn{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  border:0; cursor:pointer; padding:12px 14px; border-radius:14px;
  background:var(--grey); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.05);
  transition:background-color .25s var(--e), transform .25s var(--eo), box-shadow .25s var(--e);
}
.wbtn:hover{ background:#EDEFF1; transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.1), 0 8px 18px -10px rgba(29,29,31,.25) }
.wbtn__n{ font-size:1rem; font-weight:500; letter-spacing:-.014em }
.wbtn__tag{ margin-left:auto; font-size:.76rem; color:var(--ink-3) }

.wgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px; margin-top:14px;
}
.wtile{
  border:0; cursor:pointer; background:transparent; padding:11px 6px; border-radius:12px;
  display:grid; justify-items:center; gap:8px;
  transition:background-color .22s var(--e);
}
.wtile:hover{ background:var(--grey) }
.wtile span{ font-size:.76rem; color:var(--ink-2); text-align:center; line-height:1.25 }
.wmore{
  margin-top:14px; align-self:flex-start; border:0; background:transparent; cursor:pointer;
  font-size:.92rem; font-weight:500; color:var(--spark-deep); padding:6px 0;
}
.wmore:hover{ text-decoration:underline }

.wstatus{
  margin-top:auto; padding-top:clamp(18px,2.2vw,24px);
  display:flex; align-items:center; gap:12px; min-height:3.4em;
  font-size:.92rem; color:var(--ink-2);
}
.wstatus__dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink-3); flex:0 0 auto;
  transition:background-color .3s var(--e);
}
.wstatus.is-on .wstatus__dot{ background:var(--up) }
.wstatus.is-busy .wstatus__dot{ background:var(--spark-deep); animation:ping 1.1s var(--eo) infinite }
.wstatus b{ color:var(--ink); font-weight:600 }
.wstatus code{ font-family:var(--text); font-size:.88rem; color:var(--ink-2) }

/* the card door */
.pay{ display:grid; gap:8px; margin-top:clamp(20px,2.4vw,26px) }
.paybtn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:52px; border:0; border-radius:14px; cursor:pointer;
  font-size:1rem; font-weight:500; letter-spacing:-.014em;
  transition:transform .25s var(--eo), box-shadow .25s var(--e), background-color .25s var(--e);
}
.paybtn svg{ height:19px; width:auto; display:block; flex:0 0 auto }
.paybtn--dark{ background:var(--ink); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14) }
.paybtn--dark:hover{ background:#2C2E33; transform:translateY(-1px) }
.paybtn--dark svg{ fill:currentColor }
.paybtn--light{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(29,29,31,.14) }
.paybtn--light:hover{ background:#F7F8F9; transform:translateY(-1px) }
.paysplit{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; color:var(--ink-3); font-size:.84rem }
.paysplit::before, .paysplit::after{ content:""; flex:1; height:1px; background:var(--line-2) }
.amts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.amt{
  border:0; cursor:pointer; padding:9px 15px; border-radius:999px;
  background:var(--grey); color:var(--ink-2); font-size:.92rem; font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.05);
  transition:background-color .22s var(--e), color .22s var(--e), box-shadow .22s var(--e);
}
.amt[aria-pressed="true"]{ background:var(--ink); color:#fff; box-shadow:none }
.payout{
  margin-top:auto; padding-top:clamp(18px,2.2vw,24px);
  display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline;
}
.payout b{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.026em }
.payout span{ font-size:.9rem; color:var(--ink-2) }
.payout em{ font-style:normal; color:var(--spark-deep); font-weight:600; font-size:.92rem }

.wmk--dark{ background:#17171C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10) }
.wmk img{ width:72%; height:72%; object-fit:contain }

/* the wall: every wallet bytblock connects to, drifting past */
.wall{
  margin-top:clamp(26px,3.4vw,40px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.wall__row{ display:flex; gap:10px; width:max-content; will-change:transform }
.wall__row--a{ animation:wallL 64s linear infinite }
.wall__row--b{ animation:wallR 78s linear infinite; margin-top:10px }
@keyframes wallL{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes wallR{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} }
.wall:hover .wall__row{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){ .wall__row{ animation:none } }
.wchip{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:9px 16px 9px 9px; border-radius:14px; background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.06), 0 1px 2px rgba(29,29,31,.04);
  white-space:nowrap; font-size:.93rem; font-weight:500; letter-spacing:-.014em;
}

/* the three people actually ask for */
.top3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px) }
@media (max-width:620px){ .top3{ grid-template-columns:1fr } }
.top3 .wchip{ justify-content:flex-start; padding:14px 18px 14px 14px; font-size:1rem }

/* one balance, two sources — the point of connecting at all */
.merge{ margin-top:clamp(20px,2.4vw,26px); border-radius:16px; background:var(--grey);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.05); padding:clamp(16px,1.9vw,22px) }
.merge__r{ display:flex; align-items:center; gap:12px; padding:11px 0 }
.merge__r + .merge__r{ border-top:1px solid var(--line-2) }
.merge__n b{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.016em }
.merge__n span{ display:block; font-size:.8rem; color:var(--ink-3); margin-top:2px }
.merge__v{ margin-left:auto; font-size:.98rem; font-weight:500 }
.merge__tot{ display:flex; align-items:baseline; gap:12px; margin-top:12px;
  padding-top:13px; border-top:1px solid var(--line) }
.merge__tot span{ font-size:.9rem; color:var(--ink-2) }
.merge__tot b{ margin-left:auto; font-family:var(--display); font-weight:600;
  font-size:1.32rem; letter-spacing:-.026em }
.merge__note{ margin-top:14px; font-size:.88rem; color:var(--ink-2); line-height:1.5 }

/* ==========================================================
   funds, index baskets and government bonds
   ========================================================== */
.pick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,34px) }
.pick button{
  border:0; cursor:pointer; padding:11px 18px; border-radius:999px;
  background:var(--white); color:var(--ink-2);
  font-size:.95rem; font-weight:500; letter-spacing:-.014em;
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.08);
  transition:background-color .25s var(--e), color .25s var(--e), box-shadow .25s var(--e);
}
.pick button:hover{ color:var(--ink) }
.pick button[aria-selected="true"]{ background:var(--ink); color:#fff; box-shadow:none }

.basket{
  background:var(--white); border-radius:clamp(18px,2vw,26px);
  padding:clamp(24px,2.9vw,36px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 30px -22px rgba(29,29,31,.18);
}
.basket__top{ display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end }
.basket__k{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,2.3vw,2rem);
  letter-spacing:-.03em; line-height:1 }
.basket__d{ margin-top:8px; font-size:.96rem; color:var(--ink-2); max-width:52ch; line-height:1.55 }
.basket__stat{ margin-left:auto; display:flex; gap:clamp(18px,3vw,40px); flex-wrap:wrap }
.basket__stat div b{ display:block; font-family:var(--display); font-weight:600;
  font-size:1.24rem; letter-spacing:-.024em }
.basket__stat div span{ display:block; font-size:.82rem; color:var(--ink-3); margin-top:3px }

/* one strip, every constituent sized by its real index weight */
.comp{ display:flex; gap:2px; margin-top:clamp(22px,2.8vw,30px); height:54px }
.comp__s{
  flex:0 1 0; flex-grow:0; min-width:3px; border-radius:5px; cursor:default;
  background:var(--sc); position:relative;
}
.comp__s:first-child{ border-radius:10px 5px 5px 10px }
.comp__s:last-child{ border-radius:5px 10px 10px 5px }
.comp:hover .comp__s{ filter:saturate(.45) opacity(.55) }
.comp .comp__s:hover{ transform:scaleY(1.13); filter:none; z-index:2 }
.comp__s::after{
  content:attr(data-t); position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  background:var(--ink); color:#fff; font-size:.78rem; padding:5px 9px; border-radius:7px;
  opacity:0; transition:opacity .2s var(--e);
}
.comp__s:hover::after{ opacity:1 }
.compkey{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px }
.compkey span{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-2) }
.compkey i{ width:9px; height:9px; border-radius:3px; background:var(--sc); display:block }

/* what a given amount actually buys you of each one */
.slice{ margin-top:clamp(26px,3.2vw,36px); border-top:1px solid var(--line-2);
  padding-top:clamp(20px,2.4vw,26px) }
.slice__h{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px }
.slice__h p{ margin:0; font-size:.96rem; color:var(--ink-2) }
.slice__rows{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:0 clamp(20px,3vw,44px); margin-top:14px }
.slice__r{
  display:flex; align-items:baseline; gap:10px; padding:9px 0;
  border-top:1px solid var(--line-2); min-width:0;
}
.slice__r b{ font-size:.9rem; font-weight:600; letter-spacing:-.016em; flex:0 0 auto }
/* the company name is the only part allowed to give way */
.slice__r span{
  font-size:.85rem; color:var(--ink-3); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.slice__r em{
  flex:0 0 auto; font-style:normal; font-size:.9rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* government bonds */
.gov{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,1.6vw,20px) }
@media (max-width:900px){ .gov{ grid-template-columns:1fr } }
.vs{ margin-top:clamp(18px,2.2vw,24px) }
.vs__r{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px 16px;
  align-items:baseline; padding:13px 0; border-top:1px solid var(--line-2) }
.vs__r:last-child{ border-bottom:1px solid var(--line-2) }
.vs__r span{ font-size:.92rem; color:var(--ink-2) }
.vs__a{ font-size:.92rem; color:var(--ink-3); text-align:right; min-width:8.5em }
.vs__b{ font-size:.94rem; font-weight:600; color:var(--spark-deep); text-align:right; min-width:7em }
.vs__hd{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px 16px }
.vs__hd span{ font-size:.8rem; color:var(--ink-3) }
.vs__hd span:nth-child(2){ text-align:right; min-width:8.5em }
.vs__hd span:nth-child(3){ text-align:right; min-width:7em }

.tranches{ margin-top:clamp(18px,2.2vw,24px) }
.tranche{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:12px 0; border-top:1px solid var(--line-2) }
.tranche:last-child{ border-bottom:1px solid var(--line-2) }
.tranche__c{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
  background:var(--grey); padding:4px 9px; border-radius:6px }
.tranche__n{ font-size:.94rem }
.tranche__y{ font-family:var(--display); font-weight:600; font-size:1.06rem;
  letter-spacing:-.022em; color:var(--spark-deep) }

/* ==========================================================
   scroll: joins, parallax, progress
   ========================================================== */

/* soft joins between sections — a hard edge between two flat colours is what
   makes a page read as stacked blocks rather than one continuous surface */
.join{ position:relative }
.join::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:0;
  height:var(--jh,120px); pointer-events:none;
}
.join > *{ position:relative; z-index:1 }
.join--white::before{ background:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,0)) }
.join--grey::before { background:linear-gradient(180deg,#F5F5F7,rgba(245,245,247,0)) }

/* continuous, scroll-linked drift: subtle enough to feel like depth, not motion */
[data-par]{ will-change:transform }

.prog{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--spark), #5A78FF);
}
@media (prefers-reduced-motion:reduce){
  [data-par]{ transform:none !important }
  .prog{ display:none }
}

/* the composition strip grows into place, so the weights read as they land */
.comp__s{
  flex-grow:0;
  transition:flex-grow .95s var(--eo) var(--gd,0ms),
             transform .3s var(--eo), filter .3s var(--e);
}
.comp--in .comp__s{ flex-grow:var(--w) }
@media (prefers-reduced-motion:reduce){ .comp__s{ flex-grow:var(--w) } }

/* ==========================================================
   always open — the 24 hour dial
   ========================================================== */
.dial{
  position:relative; color:var(--on-dark); overflow:hidden;
  padding:clamp(190px,24vh,300px) 0 clamp(70px,9vw,120px);
  background:#07080A;
}
.dial__enter{
  position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
  height:clamp(210px,27vh,340px);
  background:
    radial-gradient(64% 108% at 50% 2%, rgba(47,227,221,.16), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 14%,
      rgba(47,227,221,.26) 44%, rgba(47,227,221,.26) 62%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg,
      #FFFFFF 0%, #F2F6F7 14%, #DCE6E8 28%, #B4C6CA 41%, #7E959B 53%,
      #4E656C 64%, #2B3D43 74%, #14232A 83%, #0A1418 91%, #07080A 100%);
}
.dial .wrap{ position:relative; z-index:1 }

.clockwrap{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  margin-top:clamp(30px,4vw,52px);
}
@media (max-width:940px){ .clockwrap{ grid-template-columns:1fr; justify-items:center } }

.clock{
  position:relative; width:clamp(280px,38vw,440px); aspect-ratio:1;
  touch-action:none; cursor:grab; user-select:none;
}
.clock:active{ cursor:grabbing }
.clock svg{ width:100%; height:100%; display:block; overflow:visible }
/* an instrument, not a chart: thin arcs, and only the awake ones carry light */
.clock__ring{
  fill:none; stroke-linecap:round;
  transition:opacity .55s var(--e), filter .55s var(--e), stroke-width .55s var(--e);
  opacity:.20;
}
.clock__ring.is-lit{ opacity:1; filter:drop-shadow(0 0 7px currentColor) }
.clock__base{ stroke:rgba(245,245,247,.045); opacity:1; stroke-linecap:butt }
.clock__tick{ stroke:rgba(245,245,247,.16); stroke-width:1 }
.clock__tick--maj{ stroke:rgba(245,245,247,.38); stroke-width:1.5 }
.clock__num{
  fill:rgba(245,245,247,.42); font-size:13px; font-weight:500;
  font-family:var(--text); text-anchor:middle; dominant-baseline:middle;
}
.clock__hand{ stroke:rgba(245,245,247,.85); stroke-width:1.4; stroke-linecap:round }
.clock__hub{ fill:var(--spark) }
.clock__tip{ fill:var(--spark); filter:drop-shadow(0 0 6px var(--spark)) }
.clock__sweep{ transition:transform .32s var(--eo) }
.clock.is-drag .clock__sweep{ transition:none }
.clock__mid{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; text-align:center;
}
.clock__t{
  font-family:var(--display); font-weight:600; letter-spacing:-.04em;
  font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1;
  font-variant-numeric:tabular-nums;
}
.clock__z{ margin-top:9px; font-size:.78rem; color:var(--on-dark-2);
  letter-spacing:.06em; text-transform:uppercase }
.clock__live{
  margin-top:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; color:var(--spark); pointer-events:auto;
  border:0; background:transparent; cursor:pointer; padding:4px 8px; border-radius:999px;
}
.clock__live[hidden]{ display:none }

.mkts{ display:grid; gap:0 }
.mkt{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:15px 0; border-top:1px solid var(--line-d);
  transition:opacity .45s var(--e);
}
.mkt:last-child{ border-bottom:1px solid var(--line-d) }
.mkt.is-shut{ opacity:.34 }
.mkt__d{ width:9px; height:9px; border-radius:50%; background:var(--mc); flex:0 0 auto;
  box-shadow:0 0 0 0 var(--mc); transition:box-shadow .45s var(--e) }
.mkt.is-open .mkt__d{ box-shadow:0 0 12px 1px var(--mc) }
.mkt__n b{ display:block; font-size:1rem; font-weight:600; letter-spacing:-.018em }
.mkt__n span{ display:block; font-size:.83rem; color:var(--on-dark-2); margin-top:2px }
.mkt__s{ font-size:.86rem; font-weight:600; color:var(--on-dark-2) }
.mkt.is-open .mkt__s{ color:var(--mc) }

.verdict{
  margin-top:clamp(24px,3vw,34px); font-size:clamp(1.02rem,1.5vw,1.2rem);
  line-height:1.5; color:var(--on-dark); max-width:44ch;
}
.verdict b{ color:var(--spark); font-weight:600 }

/* the week, hour by hour */
.weekgrid{ display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:860px){ .weekgrid{ grid-template-columns:1fr } }
.wk__t{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px }
.wk__t b{ font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:-.022em }
.wk__t span{ font-size:.86rem; color:var(--ink-3) }
.wk{ display:grid; grid-template-columns:auto repeat(24,minmax(0,1fr)); gap:3px; align-items:center }
.wk__d{ font-size:.7rem; color:var(--ink-3); padding-right:6px; text-align:right }
.wk__c{ aspect-ratio:1; border-radius:2px; background:var(--grey-2);
  transition:background-color .5s var(--e) var(--cd,0ms) }
.wk__c.on{ background:color-mix(in srgb, var(--spark-deep) 55%, var(--grey-2)) }
.wk__c.on--full{ background:var(--spark-deep) }
.wk__h{ display:grid; grid-template-columns:auto repeat(24,minmax(0,1fr)); gap:3px; margin-top:6px }
.wk__h span{ font-size:.62rem; color:var(--ink-3); text-align:center }

.yearstrip{ display:grid; grid-template-columns:repeat(53,minmax(0,1fr)); gap:2px; margin-top:12px }
.yr{ aspect-ratio:1; border-radius:1.5px; background:var(--grey-2) }
.yr.on{ background:var(--spark-deep) }

/* settlement */
.settle{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:860px){ .settle{ grid-template-columns:1fr } }
.track{ margin-top:clamp(18px,2.2vw,24px) }
.track__l{ position:relative; height:4px; border-radius:999px; background:var(--grey-2); overflow:hidden }
.track__f{ position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:var(--ink) }
.track__f--fast{ background:var(--spark-deep) }
.is-run .track__f{ width:100%; transition:width 2.6s linear }
.is-run .track__f--fast{ transition:width .42s var(--eo) }
.track__m{ display:flex; justify-content:space-between; margin-top:10px; font-size:.8rem; color:var(--ink-3) }


/* moments people recognise, rather than an abstract day and hour to assemble */
.moments{ margin-bottom:clamp(22px,3vw,32px) }
.moments__l{
  font-size:.78rem; color:var(--on-dark-2); letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 12px;
}
.moments__r{ display:flex; flex-wrap:wrap; gap:7px }
.moments button{
  border:0; cursor:pointer; padding:10px 17px; border-radius:999px;
  background:rgba(245,245,247,.06); color:var(--on-dark-2);
  font-size:.9rem; font-weight:500; letter-spacing:-.012em; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.10);
  transition:background-color .25s var(--e), color .25s var(--e),
             box-shadow .25s var(--e), transform .25s var(--eo);
}
.moments button:hover{ color:var(--on-dark); transform:translateY(-1px) }
.moments button[aria-pressed="true"]{
  background:var(--on-dark); color:#0A0B0C; box-shadow:none; transform:none;
}

/* the cost of a closed market, in the only unit that matters */
.wait{
  margin-top:clamp(22px,2.8vw,32px); padding:clamp(18px,2.2vw,24px);
  border-radius:16px; background:rgba(245,245,247,.045);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.09);
}
.wait__h{ font-size:.8rem; color:var(--on-dark-2); letter-spacing:.05em; text-transform:uppercase }
.wait__r{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px 18px;
  align-items:baseline; padding:13px 0 0;
}
.wait__r + .wait__r{ border-top:1px solid var(--line-d); margin-top:12px }
.wait__r > span:first-child{ font-size:.95rem; font-weight:500 }
.wait__v{
  font-family:var(--display); font-weight:600; letter-spacing:-.028em;
  font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; text-align:right; min-width:4.6em;
  font-variant-numeric:tabular-nums; transition:color .45s var(--e);
}
.wait__v--slow{ color:#FF8A7A }
.wait__v--now{ color:var(--spark) }
.wait__l{ font-size:.82rem; color:var(--on-dark-2); min-width:5.4em; text-align:right }

/* ==========================================================
   how it works — one asset, three wrappers
   ========================================================== */
.wrapx{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.wrapt{ width:100%; min-width:620px; border-collapse:collapse; text-align:left }
.wrapt thead th{
  font-family:var(--display); font-weight:600; font-size:.98rem; letter-spacing:-.02em;
  padding:0 14px 14px; border-bottom:1px solid var(--line); vertical-align:bottom;
}
.wrapt thead th:first-child{ padding-left:0 }
.wrapt thead th:not(:first-child){ text-align:center; width:15% }
.wrapt thead th em{
  display:block; font-style:normal; font-size:.76rem; font-weight:400;
  color:var(--ink-3); margin-top:4px;
}
.wrapt .col-us{ color:var(--spark-deep) }
.wrapt tbody tr{ cursor:pointer; transition:background-color .22s var(--e) }
.wrapt tbody tr:hover{ background:rgba(29,29,31,.028) }
.wrapt tbody tr[aria-selected="true"]{ background:rgba(18,189,184,.07) }
.wrapt tbody th{
  font-weight:400; font-size:.95rem; color:var(--ink);
  padding:14px 14px 14px 0; border-bottom:1px solid var(--line-2);
}
.wrapt tbody td{ padding:14px; border-bottom:1px solid var(--line-2); text-align:center }
.mk{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50% }
.mk svg{ width:13px; height:13px }
.mk--y{ background:rgba(11,127,124,.13); color:var(--spark-deep) }
.mk--n{ background:rgba(29,29,31,.06); color:var(--ink-3) }
.mk--p{ background:rgba(214,158,46,.16); color:#8A6516 }

.why{
  margin-top:clamp(18px,2.2vw,26px); padding:clamp(18px,2.2vw,24px);
  border-radius:16px; background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.07);
  transition:opacity .28s var(--e), transform .28s var(--e);
}
.why.is-swap{ opacity:0; transform:translateY(6px) }
.why b{ display:block; font-family:var(--display); font-weight:600; font-size:1.04rem;
  letter-spacing:-.02em; margin-bottom:7px }
.why p{ margin:0; font-size:.96rem; color:var(--ink-2); line-height:1.58; max-width:74ch }

/* what happens if — the questions serious people actually ask */
.ifs{ display:grid; gap:0 }
.iff{
  border-top:1px solid var(--line-d);
  transition:background-color .3s var(--e);
}
.iff:last-child{ border-bottom:1px solid var(--line-d) }
.iff__q{
  width:100%; text-align:left; border:0; background:transparent; cursor:pointer;
  color:var(--on-dark); padding:clamp(20px,2.4vw,26px) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center;
  font-family:var(--display); font-weight:600; letter-spacing:-.024em;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
}
.iff__x{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto; position:relative;
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.22);
  transition:background-color .3s var(--e), transform .4s var(--eo);
}
.iff__x::before, .iff__x::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--on-dark);
  transform:translate(-50%,-50%); transition:opacity .3s var(--e), background-color .3s var(--e);
}
.iff__x::before{ width:11px; height:1.5px }
.iff__x::after{ width:1.5px; height:11px }
.iff[open] .iff__x{ background:var(--spark); transform:rotate(135deg) }
.iff[open] .iff__x::before, .iff[open] .iff__x::after{ background:#07080A }
.iff[open] .iff__x::after{ opacity:0 }
.iff__a{
  overflow:hidden; max-height:0;
  transition:max-height .5s var(--eo), opacity .4s var(--e), padding .5s var(--eo);
  opacity:0;
}
.iff[open] .iff__a{ max-height:340px; opacity:1; padding-bottom:clamp(22px,2.6vw,30px) }
.iff__a p{ margin:0; font-size:1rem; line-height:1.62; color:var(--on-dark-2); max-width:70ch }
.iff__a p + p{ margin-top:12px }

/* why now — the window that opened */
.when{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px) }
@media (max-width:820px){ .when{ grid-template-columns:1fr } }
.whenc{ border-top:1px solid var(--line); padding-top:20px }
.whenc b{
  display:block; font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.7rem,2.6vw,2.15rem); line-height:1; color:var(--spark-deep);
}
.whenc h3{ margin-top:12px; font-size:1.02rem; font-weight:600; letter-spacing:-.02em }
.whenc p{ margin-top:8px; font-size:.94rem; color:var(--ink-2); line-height:1.56 }

/* ==========================================================
   reserves — a status page for the asset itself
   ========================================================== */
.por{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,72px);
  align-items:center }
@media (max-width:880px){ .por{ grid-template-columns:1fr; gap:28px } }
.por__ratio{
  font-family:var(--display); font-weight:600; letter-spacing:-.05em; line-height:.92;
  font-size:clamp(4.4rem,10vw,8rem); color:var(--spark-deep);
  font-variant-numeric:tabular-nums;
}
.por__cap{ margin-top:10px; font-size:.98rem; color:var(--ink-2); max-width:26ch; line-height:1.5 }
.por__side{ display:grid; gap:0 }
.por__r{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px;
  align-items:baseline; padding:14px 0; border-top:1px solid var(--line-2) }
.por__r:last-child{ border-bottom:1px solid var(--line-2) }
.por__r span{ font-size:.95rem; color:var(--ink-2) }
.por__r b{ font-family:var(--display); font-weight:600; font-size:1.16rem;
  letter-spacing:-.022em; font-variant-numeric:tabular-nums }
.por__live{
  margin-top:clamp(18px,2.2vw,24px); display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; color:var(--ink-2);
}
.por__live i{ width:8px; height:8px; border-radius:50%; background:var(--spark-deep);
  position:relative; flex:0 0 auto }
.por__live i::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--spark-deep); animation:ping 2.6s var(--e) infinite }
.por__live b{ color:var(--ink); font-weight:600 }

/* ninety days of checks: the track record is the argument */
.strip{ display:flex; gap:3px; align-items:flex-end; height:46px; margin-top:18px }
.strip span{
  flex:1 1 0; min-width:2px; height:100%; border-radius:3px;
  background:var(--spark-deep); position:relative;
  transform-origin:bottom;
  transition:transform .5s var(--eo) var(--sd,0ms), opacity .4s var(--e) var(--sd,0ms),
             filter .2s var(--e);
}
.js .strip span{ transform:scaleY(.35); opacity:0 }
.js .strip.is-in span{ transform:scaleY(1); opacity:1 }
.strip span:hover{ filter:brightness(1.25) }
.strip span::after{
  content:attr(data-t); position:absolute; left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%); white-space:nowrap; pointer-events:none; z-index:3;
  background:var(--ink); color:#fff; font-size:.74rem; padding:5px 9px; border-radius:7px;
  opacity:0; transition:opacity .2s var(--e);
}
.strip span:hover::after{ opacity:1 }
.striplg{ display:flex; justify-content:space-between; margin-top:9px;
  font-size:.78rem; color:var(--ink-3) }

/* the register */
.regwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:clamp(20px,2.6vw,28px) }
.reg{ width:100%; min-width:680px; border-collapse:collapse; text-align:left }
.reg thead th{
  font-size:.79rem; font-weight:500; color:var(--ink-3); letter-spacing:.03em;
  text-transform:uppercase; padding:0 14px 12px 0; border-bottom:1px solid var(--line);
}
.reg thead th:not(:first-child){ text-align:right }
.reg tbody th{ font-weight:600; font-size:.95rem; padding:15px 14px 15px 0;
  border-bottom:1px solid var(--line-2) }
.reg tbody th small{ display:block; font-weight:400; font-size:.79rem;
  color:var(--ink-3); margin-top:3px }
.reg td{ padding:15px 14px; border-bottom:1px solid var(--line-2); text-align:right;
  font-size:.94rem; font-variant-numeric:tabular-nums }
.reg .ratio{ font-weight:600; color:var(--spark-deep) }
.reg .ok{ display:inline-flex; align-items:center; gap:7px; color:var(--spark-deep);
  font-size:.86rem; font-weight:500 }
.reg .ok i{ width:7px; height:7px; border-radius:50%; background:currentColor }
.bar{ height:5px; border-radius:999px; background:var(--grey-2); overflow:hidden;
  margin-top:8px; min-width:96px }
.bar i{ display:block; height:100%; border-radius:999px; background:var(--spark-deep);
  width:100%; transition:width .9s var(--eo) var(--bd,0ms) }
.js .bar i{ width:0 }
.js .reg.is-in .bar i{ width:100% }

/* the limits, stated plainly */
.limits{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:860px){ .limits{ grid-template-columns:1fr } }
.lim{
  border-radius:clamp(16px,1.8vw,22px); padding:clamp(22px,2.4vw,30px);
  background:rgba(245,245,247,.045);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.09);
}
.lim__k{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--spark) }
.lim h3{ margin-top:12px; font-family:var(--display); font-weight:600; font-size:1.06rem;
  letter-spacing:-.022em }
.lim p{ margin-top:9px; font-size:.94rem; color:var(--on-dark-2); line-height:1.58 }
.addr{
  margin-top:14px; font-size:.8rem; color:var(--on-dark-2);
  background:rgba(0,0,0,.28); padding:9px 11px; border-radius:9px;
  word-break:break-all; box-shadow:inset 0 0 0 1px rgba(245,245,247,.07);
}

/* ==========================================================
   pricing
   ========================================================== */
.plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px) }
@media (max-width:1040px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .plans{ grid-template-columns:1fr } }
.plan{
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
             0 12px 26px -20px rgba(29,29,31,.18);
  transition:transform .4s var(--eo), box-shadow .4s var(--e);
}
.plan:hover{ transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.09), 0 24px 44px -26px rgba(29,29,31,.28) }
.plan__n{ font-family:var(--display); font-weight:600; font-size:1.24rem; letter-spacing:-.026em }
.plan__p{ margin-top:14px; font-family:var(--display); font-weight:600;
  font-size:clamp(1.8rem,2.6vw,2.2rem); letter-spacing:-.036em; line-height:1 }
.plan__p em{ font-style:normal; font-size:.44em; font-weight:500; color:var(--ink-3);
  letter-spacing:-.01em }
.plan__r{ margin-top:10px; font-size:.9rem; color:var(--spark-deep); font-weight:600 }
.plan__l{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);
  display:grid; gap:9px }
.plan__l span{ font-size:.88rem; color:var(--ink-2); line-height:1.45;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px }
.plan__l b{ color:var(--ink); font-weight:600; white-space:nowrap }

/* the calculator: fees minus what the vault pays back */
.calc{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px) }
@media (max-width:940px){ .calc{ grid-template-columns:1fr } }
.knobs{ display:grid; gap:clamp(18px,2.2vw,26px) }
.knob__t{ display:flex; justify-content:space-between; align-items:baseline; gap:14px }
.knob__t label{ font-size:.95rem; color:var(--ink) }
.knob__t b{ font-family:var(--display); font-weight:600; font-size:1.06rem;
  letter-spacing:-.022em; font-variant-numeric:tabular-nums }
.knob input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; margin-top:12px;
  border-radius:999px; background:var(--grey-2); cursor:pointer; outline:none;
}
.knob input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--ink); cursor:grab;
  box-shadow:0 1px 3px rgba(29,29,31,.3), 0 0 0 4px var(--white);
  transition:transform .2s var(--eo);
}
.knob input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.15); cursor:grabbing }
.knob input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%; background:var(--ink); cursor:grab;
  box-shadow:0 1px 3px rgba(29,29,31,.3), 0 0 0 4px var(--white);
}
.knob input[type=range]:focus-visible{ outline:2px solid var(--spark-deep); outline-offset:6px }

.res4{ display:grid; gap:8px }
.res4__r{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:12px 18px;
  align-items:baseline; padding:15px 18px; border-radius:14px;
  background:var(--white); box-shadow:inset 0 0 0 1px rgba(29,29,31,.06);
  transition:box-shadow .35s var(--e), transform .35s var(--eo), background-color .35s var(--e);
}
.res4__r.is-best{
  background:linear-gradient(180deg,#FFFFFF,#F6FCFC);
  box-shadow:inset 0 0 0 1.5px var(--spark-deep), 0 14px 30px -20px rgba(11,127,124,.45);
  transform:translateY(-1px);
}
.res4__n{ font-family:var(--display); font-weight:600; font-size:1.04rem; letter-spacing:-.022em }
.res4__n small{ display:block; font-family:var(--text); font-weight:500; font-size:.74rem;
  color:var(--spark-deep); margin-top:3px }
.res4__c{ font-size:.86rem; color:var(--ink-3); text-align:right; min-width:6.4em;
  font-variant-numeric:tabular-nums }
.res4__c b{ display:block; color:var(--ink-2); font-weight:500; font-size:.95rem }
.res4__net{
  font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.028em;
  text-align:right; min-width:5.4em; font-variant-numeric:tabular-nums;
}
.res4__net.up{ color:var(--spark-deep) }
.calcnote{ margin-top:clamp(16px,2vw,22px); font-size:.88rem; color:var(--ink-2); line-height:1.55 }
.calcnote b{ color:var(--ink); font-weight:600 }

/* the absence list */
.never{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,56px) }
@media (max-width:760px){ .never{ grid-template-columns:1fr } }
.never div{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  padding:15px 0; border-top:1px solid var(--line-d); align-items:baseline }
.never b{ font-size:.86rem; font-weight:600; color:var(--spark); white-space:nowrap }
.never span{ font-size:.95rem; color:var(--on-dark-2); line-height:1.5 }

/* ==========================================================
   navigation: grouped menus, and a way through on a phone
   ========================================================== */
.nd{ position:relative }
.nd__t{
  display:inline-flex; align-items:center; gap:6px; border:0; background:transparent;
  cursor:pointer; font-size:.94rem; color:var(--ink-2); padding:8px 13px; border-radius:9px;
  font-family:var(--text); letter-spacing:-.012em;
  transition:color .2s var(--e), background-color .2s var(--e);
}
.nd__t:hover, .nd.is-open .nd__t{ color:var(--ink); background:rgba(29,29,31,.06) }
.nd__t svg{ width:10px; height:10px; transition:transform .3s var(--eo) }
.nd.is-open .nd__t svg{ transform:rotate(180deg) }
/* the panel starts flush against the trigger and pads inward, so there is no
   dead gap for the pointer to fall through on its way down */
.nd__p{
  position:absolute; top:100%; left:0; padding-top:9px; z-index:5;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .22s var(--e), transform .3s var(--eo);
}
.nd.is-open .nd__p{ opacity:1; transform:none; pointer-events:auto }
.nd__c{
  min-width:314px; padding:8px; border-radius:18px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
          backdrop-filter:saturate(180%) blur(24px);
  box-shadow:0 0 0 1px rgba(29,29,31,.07), 0 24px 50px -22px rgba(29,29,31,.3);
}
.nd__c a{
  display:block; padding:10px 12px; border-radius:11px;
  transition:background-color .2s var(--e);
}
.nd__c a:hover{ background:var(--grey) }
.nd__c b{ display:block; font-size:.94rem; font-weight:500; color:var(--ink); letter-spacing:-.014em }
.nd__c span{ display:block; font-size:.82rem; color:var(--ink-3); margin-top:2px; line-height:1.4 }

.burger{
  display:none; width:40px; height:40px; border:0; border-radius:11px; cursor:pointer;
  background:transparent; box-shadow:inset 0 0 0 1px rgba(29,29,31,.12);
  position:relative; flex:0 0 auto;
  transition:background-color .2s var(--e);
}
.burger:hover{ background:rgba(29,29,31,.05) }
.burger i{
  position:absolute; left:50%; width:16px; height:1.6px; border-radius:2px;
  background:var(--ink); transform:translateX(-50%);
  transition:transform .34s var(--eo), opacity .2s var(--e);
}
.burger i:nth-child(1){ top:14px }
.burger i:nth-child(2){ top:19.2px }
.burger i:nth-child(3){ top:24.4px }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateX(-50%) translateY(5.2px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateX(-50%) translateY(-5.2px) rotate(-45deg) }

.mnav{
  position:fixed; inset:68px 0 0; z-index:59; overflow-y:auto;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
          backdrop-filter:saturate(180%) blur(22px);
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .3s var(--e), transform .38s var(--eo);
}
.mnav.is-open{ opacity:1; transform:none; pointer-events:auto }
.mnav__in{ padding:clamp(22px,6vw,34px) var(--pad) calc(clamp(22px,6vw,34px) + env(safe-area-inset-bottom)) }
.mnav__g + .mnav__g{ margin-top:clamp(22px,5vw,30px) }
.mnav__h{
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 6px;
}
.mnav__g a{
  display:block; padding:13px 0; border-bottom:1px solid var(--line-2);
}
.mnav__g a b{ display:block; font-family:var(--display); font-weight:600; font-size:1.14rem;
  letter-spacing:-.024em; color:var(--ink) }
.mnav__g a span{ display:block; font-size:.86rem; color:var(--ink-3); margin-top:3px }
.mnav__g a[aria-current="page"] b{ color:var(--spark-deep) }
.mnav .btn{ width:100%; margin-top:clamp(24px,6vw,32px); height:52px }
@media (max-width:840px){ .burger{ display:block } }
@media (min-width:841px){ .mnav{ display:none } }
body.is-locked{ overflow:hidden }

/* ==========================================================
   language
   ========================================================== */
.lang{
  display:inline-flex; padding:3px; border-radius:999px; flex:0 0 auto;
  background:rgba(29,29,31,.05); box-shadow:inset 0 0 0 1px rgba(29,29,31,.07);
}
.lang a{
  display:grid; place-items:center; min-width:38px; height:28px; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--ink-3);
  transition:background-color .22s var(--e), color .22s var(--e);
}
.lang a:hover{ color:var(--ink) }
.lang a[aria-current="true"]{ background:var(--white); color:var(--ink);
  box-shadow:0 1px 2px rgba(29,29,31,.12) }
@media (max-width:840px){ .nav__end .lang{ display:none } }

.mnav__lang{ margin-top:clamp(24px,6vw,32px); display:flex; align-items:center; gap:14px }
.mnav__lang .mnav__h{ margin:0 }
.mnav__lang .lang a{ min-width:52px; height:36px; font-size:.86rem }

/* ==========================================================
   security and custody
   ========================================================== */

/* three custody columns: the share, the reserve, the key */
.cust{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:940px){ .cust{ grid-template-columns:1fr } }
.cu{
  display:flex; flex-direction:column;
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(24px,2.6vw,32px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 14px 30px -20px rgba(29,29,31,.2);
}
.cu__k{
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--spark-deep); font-weight:600;
}
.cu h3{
  margin:12px 0 0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem,1.5vw,1.3rem); letter-spacing:-.024em; line-height:1.18;
}
.cu > p{ margin-top:11px; font-size:.95rem; color:var(--ink-2); line-height:1.55 }
.cu__l{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px }
.cu__l li{
  position:relative; padding-left:22px;
  font-size:.9rem; color:var(--ink-2); line-height:1.45;
}
/* a hairline tick rather than a bullet: this is a list of guarantees */
.cu__l li::before{
  content:''; position:absolute; left:2px; top:.42em;
  width:9px; height:5px; border-left:1.6px solid var(--spark-deep);
  border-bottom:1.6px solid var(--spark-deep); transform:rotate(-45deg);
}
.cu__go{
  margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; font-weight:500; color:var(--spark-deep);
}
.cu__go i{
  width:6px; height:6px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .2s var(--e);
}
.cu__go:hover i{ transform:rotate(45deg) translate(2px,-2px) }

/* the quorum: five shares, three of them enough */
.qrm{
  border-radius:clamp(18px,2vw,26px); padding:clamp(22px,2.8vw,34px);
  background:rgba(245,245,247,.045);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.1);
}
.qrm__h{
  margin:0 0 clamp(16px,2vw,22px); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-dark-2);
}
.qrm__set{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1vw,13px) }
@media (max-width:900px){ .qrm__set{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:420px){ .qrm__set{ grid-template-columns:1fr } }
.shard{
  -webkit-appearance:none; appearance:none; text-align:left; cursor:pointer;
  background:rgba(0,0,0,.3); border:0; border-radius:14px;
  padding:clamp(13px,1.5vw,17px); color:var(--on-dark);
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.1);
  transition:background-color .26s var(--e), box-shadow .26s var(--e), opacity .26s var(--e);
}
.shard__d{
  width:9px; height:9px; border-radius:50%; background:var(--on-dark-2);
  transition:background-color .26s var(--e), box-shadow .26s var(--e);
}
.shard b{
  display:block; margin-top:11px; font-size:.94rem; font-weight:600; letter-spacing:-.018em;
}
.shard span{ display:block; margin-top:3px; font-size:.8rem; color:var(--on-dark-2); line-height:1.35 }
.shard em{
  display:block; margin-top:10px; font-style:normal; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--on-dark-2);
}
.shard[aria-pressed="true"]{ background:rgba(47,227,221,.09); box-shadow:inset 0 0 0 1px rgba(47,227,221,.34) }
.shard[aria-pressed="true"] .shard__d{ background:var(--spark); box-shadow:0 0 12px 1px rgba(47,227,221,.55) }
.shard[aria-pressed="true"] em{ color:var(--spark) }
.shard[aria-pressed="false"]{ opacity:.52 }
.shard:hover{ box-shadow:inset 0 0 0 1px rgba(245,245,247,.26) }
.shard[aria-pressed="true"]:hover{ box-shadow:inset 0 0 0 1px rgba(47,227,221,.5) }

.qrm__out{
  margin-top:clamp(20px,2.4vw,28px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-d);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap;
}
.qrm__meter{
  flex:1 1 220px; height:8px; border-radius:999px; overflow:hidden;
  background:rgba(245,245,247,.1);
}
.qrm__meter i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#0E8A86,var(--spark));
  transition:width .42s var(--eo), background-color .3s var(--e), opacity .3s var(--e);
}
.qrm.is-short .qrm__meter i{ background:linear-gradient(90deg,#7A4A44,#D0453B) }
.qrm__read{ flex:0 0 auto; min-width:min(100%,300px) }
.qrm__count{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:-.026em;
}
.qrm__verdict{
  margin:5px 0 0; font-size:.94rem; color:var(--spark);
  transition:color .3s var(--e);
}
.qrm.is-short .qrm__verdict{ color:#FF8E82 }
.qrm__note{
  margin:clamp(16px,2vw,22px) 0 0; font-size:.84rem; line-height:1.5; color:var(--on-dark-2);
  max-width:70ch;
}

/* what the company can and cannot do */
.pw{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(8px,1vw,12px) }
.pw__r{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto;
  align-items:start; gap:clamp(13px,1.6vw,20px);
  background:var(--white); border-radius:clamp(14px,1.5vw,18px);
  padding:clamp(17px,2vw,24px) clamp(18px,2.2vw,26px);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.06), 0 10px 22px -18px rgba(29,29,31,.18);
}
.pw__r .mk{ margin-top:1px }
.pw__t b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:1.04rem; letter-spacing:-.022em;
}
.pw__t span{ display:block; margin-top:6px; font-size:.93rem; color:var(--ink-2); line-height:1.55 }
.pw__v{
  font-size:.8rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  padding:5px 12px; border-radius:999px; margin-top:-1px;
}
.pw__v--no  { background:rgba(29,29,31,.06);   color:var(--ink-2) }
.pw__v--yes { background:rgba(11,127,124,.12); color:var(--spark-deep) }
.pw__v--part{ background:rgba(214,158,46,.16); color:#8A6516 }
@media (max-width:720px){
  .pw__r{ grid-template-columns:24px minmax(0,1fr) }
  .pw__v{ grid-column:2; justify-self:start; margin-top:12px }
}

/* ==========================================================
   company and newsroom
   ========================================================== */

/* four numbers that carry the argument */
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,20px) }
@media (max-width:1000px){ .figs{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .figs{ grid-template-columns:1fr } }
.fig{
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(22px,2.4vw,30px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 26px -18px rgba(29,29,31,.18);
}
.fig b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,3.4vw,2.9rem); letter-spacing:-.04em; line-height:1;
  color:var(--spark-deep);
}
.fig p{ margin:14px 0 0; font-size:.93rem; color:var(--ink-2); line-height:1.55 }

/* the honest roadmap: an order, not a set of dates */
.stg{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px) }
@media (max-width:1000px){ .stg{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .stg{ grid-template-columns:1fr } }
.stg__s{ position:relative; padding-top:clamp(24px,2.6vw,32px) }
/* the rail runs behind every step and stops at the last one */
.stg__s::before{
  content:''; position:absolute; left:0; right:calc(-1 * clamp(14px,1.8vw,24px)); top:5px;
  height:1px; background:var(--line-d);
}
.stg__s:last-child::before{ right:0 }
@media (max-width:1000px){
  .stg__s:nth-child(2n)::before{ right:0 }
}
@media (max-width:600px){ .stg__s::before{ right:0 } }
.stg__d{
  position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%;
  background:rgba(245,245,247,.22);
}
.stg__s.is-now .stg__d{ background:var(--spark); box-shadow:0 0 0 5px rgba(47,227,221,.16) }
.stg__k{
  margin:0; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--on-dark-2); font-weight:600;
}
.stg__s.is-now .stg__k{ color:var(--spark) }
.stg__s h3{
  margin:10px 0 0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,1.4vw,1.22rem); letter-spacing:-.024em; line-height:1.2;
}
.stg__s > p{ margin:10px 0 0; font-size:.92rem; color:var(--on-dark-2); line-height:1.58 }

/* an email under a card, without turning the card into a link */
.fact__m{ margin-top:14px !important }
.fact__m a{ color:var(--spark-deep); font-weight:500; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px }

/* a newsroom with no news is still a design problem */
.empty{
  display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,26px);
  background:var(--white); border-radius:clamp(18px,2vw,26px);
  padding:clamp(26px,3.4vw,44px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 34px -24px rgba(29,29,31,.2);
}
.empty__d{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%; margin-top:9px;
  background:var(--spark-deep); box-shadow:0 0 0 5px rgba(11,127,124,.13);
}
.empty h2{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.7rem); letter-spacing:-.028em;
}
.empty p{ margin:12px 0 0; font-size:1rem; color:var(--ink-2); line-height:1.6; max-width:62ch }
.empty .btn{ margin-top:clamp(20px,2.4vw,26px) }

/* press kit */
.kit{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px) }
@media (max-width:940px){ .kit{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .kit{ grid-template-columns:1fr } }
.kit__a{
  display:flex; flex-direction:column; border-radius:clamp(14px,1.6vw,18px); overflow:hidden;
  background:rgba(245,245,247,.045); box-shadow:inset 0 0 0 1px rgba(245,245,247,.1);
  transition:box-shadow .24s var(--e), transform .24s var(--eo);
}
.kit__a:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(245,245,247,.26) }
.kit__p{
  position:relative;
  display:grid; place-items:center; aspect-ratio:16/10; padding:clamp(18px,2.4vw,30px);
  border-bottom:1px solid var(--line-d);
}
/* a grid item's automatic minimum size is its intrinsic one, which would
   push the pane past its aspect ratio for the raster shots */
.kit__p > *{ min-width:0; min-height:0 }
/* an inline svg keeps its own aspect ratio; only a raster needs object-fit */
.kit__p svg{ width:100%; height:auto; max-height:100% }
/* pinned to the pane's inset so its intrinsic size can never resize the pane */
.kit__p img{
  position:absolute; inset:clamp(18px,2.4vw,30px);
  width:auto; height:auto; object-fit:contain;
}
.kit__p--tile{ background:var(--grey) }
.kit__p--tile svg{ max-width:106px }
.kit__p--mark{ background:#040506 }
.kit__p--mark svg{ max-width:98px }
.kit__p--lockDark{ background:#040506 }
.kit__p--lockLight{ background:var(--white) }
.kit__p--lockLight .brand__word{ color:var(--ink) }
.kit__p--lockDark .brand__word{ color:var(--on-dark) }
/* the lockup preview is the real component, shown at press-kit size */
.kit__p .brand{ gap:14px }
.kit__p .brand__tile{ width:52px; height:52px; border-radius:17px }
.kit__p .brand__word{ font-size:1.9rem }
@media (max-width:520px){
  .kit__p .brand__tile{ width:44px; height:44px; border-radius:15px }
  .kit__p .brand__word{ font-size:1.6rem }
}
.kit__p--shot{ background:#0B0C0E }
.kit__m{ padding:clamp(13px,1.5vw,17px) clamp(15px,1.7vw,19px); display:block }
.kit__m b{ display:block; font-size:.96rem; font-weight:600; letter-spacing:-.018em }
.kit__m span{ display:block; margin-top:3px; font-size:.8rem; color:var(--on-dark-2) }

.kitgrid{
  margin-top:clamp(30px,4vw,46px); padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line-d);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px);
}
@media (max-width:900px){ .kitgrid{ grid-template-columns:1fr } }
.kitcol h3{
  margin:0; font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:-.022em;
}
.kitcol__d{ margin:8px 0 0; font-size:.86rem; color:var(--on-dark-2); line-height:1.5 }
.kitcol__l{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px }
.kitcol__l li{
  position:relative; padding-left:20px; font-size:.9rem; color:var(--on-dark-2); line-height:1.5;
}
.kitcol__l li b{ color:var(--on-dark); font-weight:600 }
.kitcol__l li::before{
  content:''; position:absolute; left:1px; top:.44em;
  width:8px; height:4px; border-left:1.6px solid var(--spark); border-bottom:1.6px solid var(--spark);
  transform:rotate(-45deg);
}
.kitcol__l--no li::before{
  width:9px; height:9px; border:0; border-radius:50%; transform:none; top:.38em;
  background:linear-gradient(135deg,transparent 44%,#FF8E82 44%,#FF8E82 56%,transparent 56%),
             linear-gradient(45deg,transparent 44%,#FF8E82 44%,#FF8E82 56%,transparent 56%);
}
.kitcol .sw{ margin-top:14px }

.sw{ display:grid; gap:8px }
.sw__c{
  -webkit-appearance:none; appearance:none; cursor:pointer; text-align:left; border:0;
  display:flex; align-items:center; gap:12px; padding:8px 12px 8px 8px; border-radius:12px;
  background:rgba(245,245,247,.05); box-shadow:inset 0 0 0 1px rgba(245,245,247,.1);
  color:var(--on-dark);
  transition:box-shadow .22s var(--e), background-color .22s var(--e);
}
.sw__c:hover{ background:rgba(245,245,247,.09); box-shadow:inset 0 0 0 1px rgba(245,245,247,.24) }
.sw__c i{ width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(245,245,247,.18) }
.sw__c span{ font-size:.88rem; font-weight:500; letter-spacing:-.014em }
.sw__c em{ display:block; font-style:normal; margin-top:2px; font-size:.78rem;
  color:var(--on-dark-2); font-variant-numeric:tabular-nums }
.sw__c.is-copied span em{ color:var(--spark) }

/* the paragraph a journalist pastes */
.boil{
  background:var(--white); border-radius:clamp(16px,1.8vw,22px);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:inset 0 0 0 1px rgba(29,29,31,.06), 0 12px 26px -20px rgba(29,29,31,.18);
}
.boil + .boil{ margin-top:clamp(12px,1.4vw,16px) }
.boil__h{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.boil__h span{
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.boil__b{
  -webkit-appearance:none; appearance:none; cursor:pointer; border:0;
  height:32px; padding:0 14px; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:-.008em;
  background:rgba(29,29,31,.06); color:var(--ink);
  transition:background-color .2s var(--e), color .2s var(--e);
}
.boil__b:hover{ background:rgba(29,29,31,.1) }
.boil__b.is-copied{ background:rgba(11,127,124,.14); color:var(--spark-deep) }
.boil__t{
  margin:14px 0 0; font-size:1rem; line-height:1.62; color:var(--ink); max-width:78ch;
}

/* ==========================================================
   the app, before it exists — a store listing in the footer
   ========================================================== */
.appband{
  margin-top:clamp(34px,4vw,54px);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:clamp(18px,3vw,40px);
  background:var(--white); border-radius:clamp(18px,2vw,24px);
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);
  box-shadow:
    inset 0 0 0 1px rgba(29,29,31,.06), inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 32px -24px rgba(29,29,31,.24);
}
.appband__id{ display:flex; align-items:center; gap:clamp(14px,1.6vw,18px); min-width:0; flex:1 1 320px }
/* the app icon, at the rounding the product itself uses */
.appband__icon{
  width:62px; height:62px; border-radius:20.5px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 1px 2px rgba(20,21,23,.2), 0 10px 22px -12px rgba(20,21,23,.55);
}
.appband__icon svg{ width:100%; height:100%; display:block }
.appband__t{ min-width:0 }
.appband__st{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--spark-deep);
}
.appband__st i{
  width:7px; height:7px; border-radius:50%; background:var(--spark-deep);
  box-shadow:0 0 0 3px rgba(11,127,124,.16);
  animation:appPulse 2.4s var(--e) infinite;
}
@keyframes appPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(11,127,124,.18) }
  50%    { box-shadow:0 0 0 6px rgba(11,127,124,.03) }
}
.appband__t b{
  display:block; margin-top:6px; font-family:var(--display); font-weight:600;
  font-size:1.14rem; letter-spacing:-.022em; color:var(--ink);
}
.appband__t p{ margin:4px 0 0; font-size:.9rem; color:var(--ink-2); line-height:1.45; max-width:46ch }

/* a wrapping flex row is only as wide as its widest item, so on desktop the
   pair would stack; it wraps only once there is genuinely no room */
.stores{ display:flex; gap:10px; flex:0 0 auto }
/* shaped like the stores' own badges so it reads at a glance, but worded
   honestly: the official artwork is for apps that are actually listed */
.store{
  display:inline-flex; align-items:center; gap:11px;
  height:54px; padding:0 20px 0 15px; border-radius:13px; flex:0 0 auto; min-width:178px;
  color:#fff; text-decoration:none;
  background:linear-gradient(180deg,#2A2C30 0%,#141517 58%,#0B0C0D 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(10,11,12,.2), 0 10px 22px -12px rgba(10,11,12,.55);
  transition:transform .28s var(--eo), box-shadow .28s var(--e);
}
.store:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 4px rgba(10,11,12,.18), 0 18px 30px -14px rgba(10,11,12,.6);
}
.store:active{ transform:translateY(0) scale(.985) }
.store:focus-visible{ outline:2px solid var(--spark-deep); outline-offset:3px }
.store__g{ flex:0 0 auto; display:block; width:24px; height:27px }
.store__g--apple{ fill:#fff; width:22px }
.store__t{ display:flex; flex-direction:column; min-width:0; text-align:left }
/* the small line is a one-line window: hover slides "coming soon"
   up and out, and says what the click actually does */
.store__k{ display:block; height:13px; overflow:hidden }
.store__k small{
  display:block; height:13px; line-height:13px; white-space:nowrap;
  font-size:.69rem; font-weight:500; letter-spacing:.005em; color:rgba(255,255,255,.78);
  transition:transform .42s var(--eo);
}
.store__k small + small{ color:var(--spark) }
.store:hover .store__k small, .store:focus-visible .store__k small{ transform:translateY(-100%) }
.store__t b{
  display:block; margin-top:3px; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:1.2rem; letter-spacing:-.022em; line-height:1.05;
}
@media (max-width:760px){
  .appband{ align-items:stretch }
  .stores{ width:100%; flex-wrap:wrap }
  .store{ flex:1 1 172px; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  .appband__st i{ animation:none }
  .store, .store__k small{ transition:none }
}