/* StableYield — a white page, a fluid hero, black and white cards.
   The composition is the reference site's (a full-bleed marbled hero with one
   line of white type, then white sections carrying a phone, stats and asset
   cards, a black token section), the type is the house type (Instrument Sans
   for headings, Geist for body, Geist Mono for figures), and the sections are
   bento grids rather than one column of full-width blocks. */

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0C;
  --black:#151515;
  --grey:#6B6B6B;      /* 5.2:1 on white, 4.9:1 on cream */
  --mute:#8A8A8A;      /* small mono labels: 3.5:1, decorative only */
  --gold-text:#8F6520; /* gold as TEXT at small sizes: 5.6:1 on white */
  --line:#E8E8E6;
  --line-2:#F1F1EF;
  --cream:#F8F7F3;
  --teal:#1C5D5A;
  --sea:#7FB8B0;
  --sand:#D8C7A1;
  --gold:#A97A2E;
  --ok:#2FA36B;
  --warn:#C98A1E;
  --r:20px;
  --r-lg:28px;
  --r-sm:12px;
  --gap:14px;
  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
/* skip link: the first tab stop, visible only when focused */
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:999px;background:var(--black);color:#fff;font-size:13px;text-decoration:none}
.skip:focus{top:12px}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
img,svg,video,canvas{display:block;max-width:100%}
/* An author display beats the UA sheet's [hidden] — the X button, a flex
   circle, showed with no href until this line existed. */
[hidden]{display:none!important}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
:where(a,button,summary,[role="button"]){cursor:pointer}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-family:"Instrument Sans",Geist,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.035em}
h1{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.045em;line-height:1.04}
h2{font-size:clamp(1.55rem,2.6vw,2.05rem);letter-spacing:-.04em}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.024em;line-height:1.3}
p{margin:0 0 .85em}
p:last-child{margin-bottom:0}
.label{
  display:block;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.fineprint{font-size:12.5px;line-height:1.55;color:var(--grey)}
.lede{font-size:15.5px;color:#4A4A4A;max-width:58ch}
.em{color:var(--gold)}

/* ---------- buttons (the reference: 12px, 16/26 padding, 100px radius) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:13px 24px;border-radius:100px;border:0;
  font:inherit;font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn svg{width:12px;height:12px;flex:0 0 12px}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#F2F2F0}
.btn-black{background:var(--black);color:#fff}
.btn-black:hover{background:#000}
.btn-ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
.btn-ghost:hover{opacity:1}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.1)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.link{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;text-decoration:none;
  color:var(--ink);
}
.link svg{width:11px;height:11px}
.link{padding:6px 0}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link.on-dark{color:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;padding:16px 20px;pointer-events:none}
.nav-pill{
  pointer-events:auto;
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:6px 6px 6px 16px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* Over the hero the pill goes dark glass so it belongs to the image; once the
   page is white it flips. chain-free: pure CSS, the class is toggled by a
   two-line observer in the page. */
body.over-hero .nav-pill{
  background:rgba(12,18,18,.38);border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
body.over-hero .nav-pill,body.over-hero .nav-links a{color:#fff}
.brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1rem;letter-spacing:-.03em;
}
.brand img,.brand svg{width:30px;height:30px;border-radius:22.5%;box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 3px 8px -2px rgba(0,0,0,.28)} /* white tile: a hairline so it still reads on a white page */ /* the glass glyph is narrow; 24px read as a speck on the dark pill */
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{color:var(--grey);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:inherit}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.circle{
  position:relative;
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:inherit;text-decoration:none;border:1px solid rgba(0,0,0,.14);
  transition:background .2s var(--ease);
}
body.over-hero .circle{border-color:rgba(255,255,255,.34)}
.circle::after{content:"";position:absolute;inset:-4px;border-radius:50%} /* 44px hit area, 36px visual */
.circle:hover{background:rgba(0,0,0,.06)}
body.over-hero .circle:hover{background:rgba(255,255,255,.14)}
.nav .btn{min-height:38px;padding:9px 18px}
.nav-links-mobile{display:none}
@media (max-width:760px){
  .nav{padding:12px 12px}
  .nav-pill .nav-links{display:none}
  .nav-pill{gap:8px;padding:5px 5px 5px 13px}
  .brand{font-size:.92rem}
  .brand span{display:none}
  .nav .btn{min-height:40px;padding:10px 15px;font-size:12px}
  .nav-links-mobile{
    pointer-events:auto;display:flex;justify-content:center;gap:2px;margin-top:8px;
  }
  .nav-links-mobile a{
    padding:12px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;font-size:12.5px;font-weight:500;text-decoration:none;
    color:var(--grey);
  }
  body.over-hero .nav-links-mobile a{color:rgba(255,255,255,.85)}
  .nav-links-mobile a.on{color:inherit}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;
  /* what the canvas paints over; also the whole hero without WebGL */
  background:
    radial-gradient(120% 90% at 20% 15%, #7FB8B0 0%, transparent 55%),
    radial-gradient(90% 70% at 85% 30%, #D8C7A1 0%, transparent 60%),
    radial-gradient(100% 80% at 60% 95%, #A97A2E 0%, transparent 55%),
    linear-gradient(180deg,#2A6E6A,#0F3B3B);
}
#fluid{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
#fluid.on{opacity:1}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:120px 20px 40px;
  /* The copy sits in the middle of the screen between the nav and the
     strip — pinned to the bottom it left a hole under the nav. */
  flex:1 1 auto;display:flex;align-items:center;
}
.hero-copy{max-width:640px;padding-bottom:0}
.hero-copy .label{color:rgba(255,255,255,.72);margin-bottom:16px}
.hero-copy h1{color:#fff;text-shadow:0 1px 3px rgba(0,30,30,.25)}
.hero-copy h1 .em{color:#F3E2B6}
.hero-copy .lede{color:rgba(255,255,255,.82);margin-top:16px;text-shadow:0 1px 2px rgba(0,30,30,.3)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.hero-checks span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.85)}
.hero-checks svg{width:14px;height:14px;color:#F3E2B6}
/* the strip at the foot of the hero: the contract address, and nothing else */
.hero-strip{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(6,20,20,.10),rgba(6,20,20,.32));
}
.hero-strip-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.strip-marks{display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.strip-marks span{
  font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:-.01em;
  color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.strip-marks small{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500}
.strip-live{display:flex;gap:22px;flex-wrap:wrap}
.strip-live div{display:flex;flex-direction:column;gap:1px}
.strip-live dt{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.strip-live dd{margin:0;font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:.98rem;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .hero-inner{padding:100px 20px 32px}
  .strip-marks{gap:18px}
  .strip-live{gap:14px}
  .hero-strip-inner{padding:14px 16px}
}

/* ---------- sections ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.section.dark{background:var(--black);color:#fff}
.section.cream{background:var(--cream)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.section-head .label{margin-bottom:12px}
.section.dark .label{color:rgba(255,255,255,.55)}
.section.dark .lede{color:rgba(255,255,255,.72)}
.section.dark .fineprint{color:rgba(255,255,255,.55)}
.section.dark .link{color:#fff}
.section-head .lede{margin-top:12px}
@media (max-width:760px){ .section{padding:64px 0} .section.tight{padding:44px 0} body{font-size:16px} .input{font-size:16px;min-height:46px} .card p{font-size:15px} }

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.bento + .bento{margin-top:var(--gap)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}
.span-12{grid-column:1/-1}
.row-2{grid-row:span 2}
@media (max-width:1000px){
  .span-3,.span-4{grid-column:span 6}
  .span-5,.span-7,.span-8,.span-9{grid-column:1/-1}
  .row-2{grid-row:auto}
}
@media (max-width:700px){ .bento>*{grid-column:1/-1!important} }

/* ---------- cards ----------
   Two materials, and they alternate: white with a hairline, and matte black.
   One material everywhere is what makes a page flat. */
.card{
  border-radius:var(--r);padding:26px;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 18px 40px -34px rgba(0,0,0,.25);
}
.card .label{margin-bottom:14px}
.card p{color:#4A4A4A;font-size:14.5px}
.card.black{background:var(--black);color:#fff;border-color:var(--black)}
.card.black .label{color:rgba(255,255,255,.55)}
.card.black p{color:rgba(255,255,255,.72)}
.card.black .link{color:#fff}
.card.cream{background:var(--cream);border-color:#ECEAE3}
.card.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.card.teal .label{color:rgba(255,255,255,.62)}
.card.teal p{color:rgba(255,255,255,.8)}
.card.teal .link{color:#fff}
.card.pad-0{padding:0;overflow:hidden}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-top .label{margin-bottom:0}
.card h3 + p{margin-top:8px}
.card .foot{margin-top:auto;padding-top:18px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* stat blocks (the reference's "0+ / 0M+ / 0.0K+" row, but read from chain) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap)}
.stat{padding:22px 24px;border-radius:var(--r-sm);background:var(--cream);border:1px solid #ECEAE3}
.stat dt{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.stat dd{margin:6px 0 0;font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1.45rem;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat dd.tick{animation:tick .5s var(--ease)}
@keyframes tick{from{opacity:.3}to{opacity:1}}
.card.black .stat,.section.dark .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.card.black .stat dt,.section.dark .stat dt{color:rgba(255,255,255,.55)}
.dot-live{display:inline-flex;align-items:center;gap:7px;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.dot-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 2.4s infinite}
.section.dark .dot-live,.card.black .dot-live{color:rgba(255,255,255,.6)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,163,107,.55)}70%{box-shadow:0 0 0 8px rgba(47,163,107,0)}100%{box-shadow:0 0 0 0 rgba(47,163,107,0)}}

/* ---------- key/value ---------- */
.kv{margin:0;display:grid;gap:0}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.kv div:first-child{border-top:0;padding-top:0}
.kv dt{color:var(--grey)}
.kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.card.black .kv div,.card.teal .kv div{border-color:rgba(255,255,255,.12)}
.card.black .kv dt,.card.teal .kv dt{color:rgba(255,255,255,.55)}

/* ---------- steps ---------- */
.step{gap:0}
.step-n{font-family:"Geist Mono",monospace;font-size:11px;color:var(--grey);letter-spacing:.08em}
.step-ico{
  width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream);border:1px solid #ECEAE3;color:var(--teal);margin-bottom:18px;
}
.step-ico svg{width:17px;height:17px}
.card.black .step-ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#F3E2B6}
.step h3{margin-top:2px}
.step p{margin-top:8px}

/* ---------- asset cards (reference: name / per share / %) ---------- */
.asset{gap:0;padding:22px}
.asset-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.asset-sym{font-family:"Geist Mono",monospace;font-weight:500;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.asset h3{margin-top:14px;font-size:1rem}
.asset .sub{font-size:12.5px;color:var(--grey);margin-top:4px}
.asset-foot{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.asset-foot b{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1.4rem;letter-spacing:-.04em;line-height:1}
.asset-foot small{display:block;font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--line);color:var(--grey);white-space:nowrap;
}
.pill.warn{border-color:#EAD7B1;color:var(--gold-text);background:#FBF6EC}
.pill.ok{border-color:#CDE8DA;color:var(--ok);background:#EEF8F2}
.pill.off{border-color:var(--line);color:var(--mute);background:#FAFAFA}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.card.black .pill{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75);background:transparent}

/* ---------- watchlist ---------- */
.watch{display:flex;flex-direction:column}
.watch-head,.wrow{
  display:grid;grid-template-columns:78px 1fr 84px 84px 118px;gap:12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line-2);font-size:13.5px;
}
.watch-head{border-top:0;padding-top:0;font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.wrow{text-decoration:none;color:inherit}
.wrow:hover .wname{text-decoration:underline;text-underline-offset:3px}
.wrow:active{opacity:.7}
.wrow{min-height:48px}
.wsym{font-weight:500;font-size:12px}
.wname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wname small{display:block;font-size:11.5px;color:var(--grey)}
.wnum{text-align:right;font-family:"Geist Mono",monospace;font-size:12px}
.wstate{text-align:right;font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wstate.on{color:var(--ok)}
.wstate.off{color:var(--gold-text)}
@media (max-width:640px){
  .watch-head{display:none}
  .wrow{grid-template-columns:70px 1fr 100px;grid-template-areas:"s n st" "s n st"}
  .wrow .wnum{display:none}
}

/* ---------- chart ---------- */
.chart{position:relative;min-width:0;overflow:hidden} /* the readout is inside; nothing here may widen the page */
.chart svg{width:100%;height:auto;overflow:visible}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.chart-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--grey)}
.chart-legend i{width:14px;height:2px;border-radius:2px}
.rates{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.rate{padding:14px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff}
.rate dt{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.rate dd{margin:6px 0 0;font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1.3rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (max-width:640px){ .rates{grid-template-columns:repeat(2,1fr)} }
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;font:inherit;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;
  padding:8px 13px;min-height:32px;border-radius:999px;color:var(--grey);cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--black);color:#fff}

/* ---------- ca box ---------- */
.ca-box{
  display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.ca-box .label{margin-bottom:0;color:rgba(255,255,255,.55)}
.ca-value{font-family:"Geist Mono",monospace;font-size:12.5px;word-break:break-all;color:#fff}
.copy-me{cursor:copy;position:relative}
.copy-me[data-copied]::after{
  content:"copied";position:absolute;right:0;top:-18px;
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);
}
.section:not(.dark) .ca-box{background:var(--cream);border-color:#ECEAE3}
.section:not(.dark) .ca-box .label{color:var(--grey)}
.section:not(.dark) .ca-value{color:var(--ink)}

/* ---------- flow ---------- */
.flow{display:flex;flex-direction:column;gap:0;margin-top:6px}
.flow div{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px}
.flow div:first-child{border-top:0;padding-top:0}
.flow b{font-family:"Geist Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.06em;color:#F3E2B6;flex:0 0 96px;padding-top:2px}
.flow span{color:rgba(255,255,255,.78)}
.flow span strong{color:#fff;font-weight:500}

/* ---------- phone ----------
   A real DOM iPhone rather than an image: the screen is HTML, so the figures in
   it are the live ones and the type is the site's. */
.phone{
  --pw:300px;
  width:var(--pw);aspect-ratio:300/612;position:relative;flex:0 0 auto;
  border-radius:46px;background:#0A0A0A;
  box-shadow:0 0 0 2px #2A2A2A, 0 0 0 6px #0E0E0E, 0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone::before{ /* dynamic island */
  content:"";position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:96px;height:28px;border-radius:999px;background:#000;z-index:3;
}
.screen{
  position:absolute;inset:10px;border-radius:38px;overflow:hidden;
  background:#FBFAF7;color:var(--ink);display:flex;flex-direction:column;
  font-size:12px;
}
.screen .sb{display:flex;justify-content:space-between;padding:14px 22px 0;font-size:11px;font-weight:600}
.screen .sb .rt{display:flex;gap:4px;align-items:center}
.screen .sb svg{width:14px;height:10px}
.app-head{display:flex;justify-content:space-between;align-items:center;padding:28px 18px 0}
.app-head b{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:14px;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.app-head b svg{width:18px;height:18px}
.app-head .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--gold))}
.app-hero{margin:14px 14px 0;padding:18px 16px 16px;border-radius:22px;background:var(--black);color:#fff;position:relative;overflow:hidden}
.app-hero::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,184,176,.45),transparent 65%);
}
.app-hero .label{color:rgba(255,255,255,.5);font-size:9px;margin-bottom:6px}
.app-hero .big{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:26px;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.app-hero .sub{margin-top:6px;font-size:10.5px;color:rgba(255,255,255,.62)}
.app-hero .row{display:flex;gap:6px;margin-top:14px}
.app-hero .row span{
  flex:1;text-align:center;padding:8px 0;border-radius:999px;font-size:10.5px;font-weight:500;
  background:#fff;color:var(--ink);
}
.app-hero .row span + span{background:rgba(255,255,255,.12);color:#fff}
.app-list{margin:12px 14px 0;display:flex;flex-direction:column;gap:8px}
.app-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;
  background:#fff;border:1px solid #ECEAE3;
}
.app-row .ico{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;font-family:"Geist Mono",monospace;font-size:8.5px;font-weight:500;letter-spacing:.02em}
.app-row .ico.t{background:#E6F1EF;color:var(--teal)}
.app-row .ico.g{background:#F7EEDC;color:var(--gold)}
.app-row .ico.k{background:#EFEFEF;color:#444}
.app-row .tx{flex:1;min-width:0}
.app-row .tx b{display:block;font-weight:500;font-size:11.5px;letter-spacing:-.01em}
.app-row .tx small{display:block;font-size:10px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-row .v{font-family:"Geist Mono",monospace;font-size:10.5px;font-variant-numeric:tabular-nums;text-align:right}
.app-row .v small{display:block;font-size:9px;color:var(--gold-text);letter-spacing:.06em;text-transform:uppercase}
.app-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:12px 18px 22px;border-top:1px solid #ECEAE3;background:#fff}
.app-tabs span{font-size:9px;letter-spacing:.04em;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:5px}
.app-tabs span i{width:20px;height:20px;border-radius:6px;background:#EFEFEF;display:block}
.app-tabs span.on{color:var(--ink)}
.app-tabs span.on i{background:var(--black)}
@media (max-width:760px){ .phone{--pw:270px} }

/* app section layout */
.app-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.app-visual{display:flex;justify-content:center;align-items:center;min-height:520px;position:relative}
.app-visual::before{
  content:"";position:absolute;inset:8% 10%;border-radius:40px;z-index:0;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(127,184,176,.55), transparent 70%),
    radial-gradient(60% 60% at 75% 70%, rgba(216,199,161,.7), transparent 70%),
    var(--cream);
}
.app-visual .phone{position:relative;z-index:1}
.app-split .stats{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .app-split{grid-template-columns:1fr} .app-visual{min-height:0;padding:30px 0} }

/* iOS section: two phones, one behind */
.ios-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:560px;overflow:hidden}
.ios-stage .phone{position:relative;z-index:2;margin-bottom:-120px}
.ios-stage .phone.back{position:absolute;left:50%;bottom:-150px;transform:translateX(-118%) rotate(-8deg) scale(.86);z-index:1;opacity:.85}
.ios-stage .phone.back2{position:absolute;left:50%;bottom:-160px;transform:translateX(22%) rotate(8deg) scale(.86);z-index:1;opacity:.85}
@media (max-width:760px){ .ios-stage .phone.back,.ios-stage .phone.back2{display:none} .ios-stage{min-height:440px} }
.store{
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:12px;
  background:#000;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.18);
}
.store svg{width:22px;height:22px}
.store small{display:block;font-size:9px;letter-spacing:.02em;opacity:.75;line-height:1}
.store b{display:block;font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:15px;letter-spacing:-.02em;line-height:1.1}
.store.soon{opacity:.55;cursor:default}
.section:not(.dark) .store{background:var(--black)}

/* quote / insight tiles */
.fact{gap:0}
.fact .big{font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:2.2rem;letter-spacing:-.05em;line-height:1;margin:6px 0 12px}
.fact p{font-size:13.5px}
.fact cite{display:block;margin-top:auto;padding-top:16px;font-style:normal;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.card.black .fact cite,.card.black cite{color:rgba(255,255,255,.5)}

/* ---------- final cta + footer ---------- */
.cta-final{text-align:center;padding:96px 20px}
.cta-final h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.cta-final .lede{margin:14px auto 0}
.cta-final .row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
footer.foot{border-top:1px solid var(--line);padding:34px 0 40px}
.foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:8px;max-width:46ch}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:13px;color:var(--grey);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-legal{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-legal .fineprint{max-width:70ch}

/* ---------- forms (launch / app) ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:12.5px;font-weight:500}
.input{
  width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:14px;color:var(--ink);outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.input[readonly]{background:var(--cream);color:#4A4A4A}
.help{font-size:12px;color:var(--grey);margin:2px 0 0}
.card.black .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.card.black .input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.card.black .field label{color:#fff}
.card.black .help{color:rgba(255,255,255,.55)}
.row-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.notice{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  background:#FBF3F1;border:1px solid #F0D3CD;color:#8A2E20;font-size:13px;line-height:1.5;
}
.notice.info{background:var(--cream);border-color:#ECEAE3;color:#4A4A4A}
.notice svg{flex:0 0 15px;margin-top:2px}
.notice a{color:inherit}
.card.black .notice.info{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.wallet-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-height:44px}
.wallet-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  font-family:"Geist Mono",monospace;font-size:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
}
.toggle{width:40px;height:24px;border-radius:999px;background:#D9D9D9;position:relative;flex:0 0 40px;transition:background .2s}
.toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.toggle[data-on="true"]{background:var(--ok)}
.toggle[data-on="true"] i{transform:translateX(16px)}
.mod{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff;font:inherit;color:inherit;margin-top:16px}
.mod-body b{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;font-weight:500}
.mod-body span{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}

/* page header for inner pages */
.page-head{padding:130px 0 34px}
.page-head .label{margin-bottom:12px}
.page-head .lede{margin-top:14px}
@media (max-width:760px){ .page-head{padding-top:118px} }

/* ---------- chart interaction ----------
   A crosshair with a readout follows the pointer (or a touch); the same
   figures are in the table under the chart for anyone who cannot see it. */
.chart svg{touch-action:pan-y}
.chart .xh{pointer-events:none}
.chart-tip{
  position:absolute;top:0;left:0;pointer-events:none;transform:translate(-50%,0);
  padding:8px 10px;border-radius:10px;background:var(--black);color:#fff;
  font-family:"Geist Mono",monospace;font-size:10.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.5);
}
.chart-tip[hidden]{display:none}
.chart-tip b{display:block;font-weight:500;color:rgba(255,255,255,.6);margin-bottom:2px}
.chart-tip i{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:6px;border-radius:2px}
.chart-table{margin-top:12px}
.chart-table summary{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);cursor:pointer;padding:6px 0}
.chart-table table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.chart-table th,.chart-table td{text-align:right;padding:6px 8px;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.chart-table th:first-child,.chart-table td:first-child{text-align:left;font-family:"Geist Mono",monospace;font-size:11px}
.chart-table thead th{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border-top:0}
.chart-table .scroll{max-height:260px;overflow:auto}

/* ---------- hero strip: contract address only ---------- */
.strip-ca{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:28px}
.strip-ca .label{color:rgba(255,255,255,.62);margin:0}
.ca-strip{font-size:14px;color:#fff;letter-spacing:0;word-break:break-all}
.ca-strip.copy-me{cursor:copy}
.ca-strip.copy-me:hover{color:#F3E2B6}
@media (max-width:760px){ .strip-ca{gap:6px 14px} .ca-strip{font-size:13px} }