/* ============================================================
   Ona. Off white ground, black type, eight character
   colours, very fat display type, hairline rules edge to edge.
   ============================================================ */

:root{
  --cream:   #f4f4f2;
  --cream-2: #ececea;
  --white:   #ffffff;
  --ink:     #101010;

  --pink:   #fb7bc2;
  --green:  #1fbf87;
  --lav:    #b3a6f7;
  --blue:   #3b37de;
  --orange: #f5822c;
  --yellow: #fbd466;
  --sky:    #74aaf7;

  --on-cream:       #101010;
  --on-cream-muted: #5c605e;
  --on-cream-faint: #8d918f;
  --on-ink:         #f4f4f2;
  --on-ink-muted:   #a2a6a4;
  --on-ink-faint:   #6f736f;

  --line-cream: rgba(16,16,16,.13);
  --line-ink:   rgba(244,244,242,.16);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font:    "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --pad:  clamp(20px, 4.2vw, 60px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.5;
  letter-spacing:-.008em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,canvas,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- panels ---------- */
.panel{ width:100%; position:relative; }
.panel-cream{ background:var(--cream); color:var(--on-cream);
  --line:var(--line-cream); --muted:var(--on-cream-muted); --faint:var(--on-cream-faint); }
.panel-white{ background:var(--white); color:var(--on-cream);
  --line:var(--line-cream); --muted:var(--on-cream-muted); --faint:var(--on-cream-faint); }
.panel-ink{ background:var(--ink); color:var(--on-ink);
  --line:var(--line-ink); --muted:var(--on-ink-muted); --faint:var(--on-ink-faint); }
.panel + .panel{ border-top:1px solid var(--line); }
.panel-ink + .panel, .panel + .panel-ink{ border-top:0; }

/* a panel that curls over the one above it, the way a card sits on a table */
.panel.round-top{ border-radius:36px 36px 0 0; margin-top:-36px; z-index:2; }
.panel:has(+ .panel.round-top){ padding-bottom:40px; }

.pad{ padding:clamp(40px,6vw,84px) var(--pad); }

.split{ display:grid; grid-template-columns:1fr; }
@media (min-width:940px){ .split{ grid-template-columns:1fr 1fr; } }
.split > *{ min-width:0; }
@media (min-width:940px){ .split > * + *{ border-left:1px solid var(--line); } }
@media (max-width:939px){ .split > * + *{ border-top:1px solid var(--line); } }

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; }

.fat{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.035em; line-height:.93; }
.h-hero{ font-size:clamp(46px,8.4vw,124px); }
.h-1{ font-size:clamp(34px,5.4vw,76px); }
.h-2{ font-size:clamp(26px,3vw,42px); }
.h-3{ font-size:clamp(19px,1.5vw,23px); letter-spacing:-.026em; }

.lede{ font-size:clamp(16px,1.35vw,19px); line-height:1.5; color:var(--muted); margin:0; }
.body{ color:var(--muted); margin:0; }
.body-sm{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }
.mono{ font-family:var(--mono); }
.tiny{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding-inline:24px; border-radius:999px;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font-family:var(--display); font-size:14px; font-weight:700;
  letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  transition:background .18s linear, color .18s linear, border-color .18s linear;
}
.btn:hover{ background:var(--yellow); border-color:var(--ink); color:var(--ink); }
.btn-sm{ height:40px; padding-inline:18px; font-size:13px; }
.btn-lg{ height:54px; padding-inline:30px; font-size:15.5px; }

.btn-solid{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn-solid:hover{ background:var(--pink); border-color:var(--pink); color:var(--ink); }

.panel-ink .btn{ border-color:var(--cream); color:var(--cream); }
.panel-ink .btn:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.panel-ink .btn-solid{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.panel-ink .btn-solid:hover{ background:var(--pink); border-color:var(--pink); }

.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn:disabled:hover{ background:transparent; color:inherit; border-color:var(--ink); }

.link{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:var(--ink); transition:color .18s linear; }
.panel-ink .link{ color:var(--cream); }
.link:hover{ color:var(--blue); }
.panel-ink .link:hover{ color:var(--yellow); }
.actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:32px; }

/* ---------- header ---------- */
.nav{ position:fixed; inset:0 0 auto; z-index:90; padding:14px var(--pad) 0;
  transition:padding .4s var(--ease); }
.nav.stuck{ padding-top:8px; }
.nav-inner{
  display:flex; align-items:center; gap:10px; height:64px;
  max-width:1420px; margin-inline:auto; padding:0 10px 0 0;
  border:1.5px solid var(--ink); border-radius:999px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.stuck .nav-inner{ height:58px; background:var(--white);
  box-shadow:0 10px 30px -18px rgba(16,16,16,.5); }

.brand{ display:flex; align-items:center; padding-left:14px; margin-right:22px; }
.brand-mark{ height:38px; width:auto; flex:none; }
.brand-name{ font-family:var(--display); font-weight:800; font-size:18px;
  letter-spacing:-.03em; text-transform:uppercase; }
.brand-name span{ color:var(--green); }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-link{ position:relative; padding:9px 15px; border-radius:999px; font-size:14px;
  font-weight:600; color:var(--on-cream-muted);
  transition:color .2s var(--ease), background .2s var(--ease); }
.nav-link:hover{ color:var(--ink); background:rgba(16,16,16,.06); }
.nav-link[aria-current="page"]{ color:var(--ink); background:var(--yellow); }
.nav-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }

.nav-burger{ display:none; width:44px; height:44px; border-radius:999px; flex:none;
  border:1.5px solid var(--ink); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; }
.nav-burger i{ display:block; width:16px; height:2px; background:currentColor; position:relative; }
.nav-burger i::before,.nav-burger i::after{ content:""; position:absolute; left:0; width:16px;
  height:2px; background:currentColor; transition:transform .3s var(--ease); }
.nav-burger i::before{ top:-5px; } .nav-burger i::after{ top:5px; }
.nav-burger[aria-expanded="true"] i{ background:transparent; }
.nav-burger[aria-expanded="true"] i::before{ transform:translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i::after{ transform:translateY(-5px) rotate(-45deg); }

.nav-drawer{ display:none; }
@media (max-width:900px){
  .nav-links{ display:none; }
  .brand{ margin-right:auto; }
  .nav-burger{ display:inline-flex; }
  .nav-right .btn:not(.btn-solid){ display:none; }
  .nav-drawer{ display:block; overflow:hidden; max-height:0; opacity:0;
    max-width:1420px; margin:0 auto; padding:0 8px;
    transition:max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease); }
  .nav.open .nav-drawer{ max-height:340px; opacity:1; margin-top:8px; }
  .nav-drawer-in{ border:1.5px solid var(--ink); border-radius:26px; padding:10px;
    background:var(--white); }
  .nav-drawer a{ display:block; padding:13px 16px; border-radius:18px; font-size:16px;
    font-weight:600; color:var(--on-cream-muted); }
  .nav-drawer a:hover,.nav-drawer a[aria-current="page"]{ color:var(--ink); background:var(--yellow); }
}
/* on a narrow phone the wordmark gives up its room so both buttons fit inside
   the pill; the character alone is the mark at that size */

.page-top{ padding-top:108px; }

/* ---------- the characters ---------- */
.ch{ display:block; position:relative; line-height:0; }
.ch svg{ width:100%; height:auto; display:block; }
/* with no script a character is still a coloured shape, never a gap */
.ch:empty{ aspect-ratio:1/1; border-radius:44% 44% 32% 32%; background:currentColor; }
.ch-pink{ color:var(--pink); }     .ch-green{ color:var(--green); }
.ch-lav{ color:var(--lav); }       .ch-blue{ color:var(--blue); }
.ch-orange{ color:var(--orange); } .ch-yellow{ color:var(--yellow); }
.ch-sky{ color:var(--sky); }       .ch-black{ color:var(--ink); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-grid{ padding:clamp(64px,10vw,140px) var(--pad) clamp(64px,9vw,124px);
  max-width:1420px; margin-inline:auto; }
.hero-copy{ text-align:center; }
.hero-copy .h-hero{ max-width:18ch; margin-inline:auto; }
.hero-copy .lede{ max-width:54ch; margin:30px auto 0; }
.hero-copy .actions{ justify-content:center; }

/* readout rows, used by the wallet panel on the launch page */
.live-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0; border-top:1px solid var(--line-cream); }
.live-row:first-of-type{ border-top:0; }
.live-row span{ font-size:12.5px; color:var(--on-cream-muted); }
.live-row b{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); }

/* ---------- contract address ---------- */
.ca{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:26px; padding:10px 10px 10px 16px; border:1.5px solid var(--ink);
  border-radius:999px; background:var(--white); cursor:pointer; color:var(--ink);
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  transition:background .18s linear;
}
.ca:hover{ background:var(--yellow); }
.ca-tag{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:-.01em;
  text-transform:uppercase; }
.ca-addr{ overflow-wrap:anywhere; }
.ca-copy{ display:inline-flex; align-items:center; justify-content:center; height:28px;
  padding-inline:12px; border-radius:999px; background:var(--ink); color:var(--cream);
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.02em;
  text-transform:uppercase; }
@media (max-width:560px){
  .ca{ font-size:11px; padding-left:14px; }
}
.footer .ca{ margin-top:16px; }

/* ---------- section head ---------- */
.sec-head{ display:grid; grid-template-columns:1fr; gap:22px;
  padding:clamp(52px,7vw,96px) var(--pad) clamp(26px,3vw,44px);
  max-width:1420px; margin-inline:auto; }
@media (min-width:940px){ .sec-head{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:end; gap:60px; } }
.sec-head .h-1{ max-width:15ch; }
.sec-head p{ max-width:44ch; }
.sec-head.center{ justify-items:center; text-align:center; grid-template-columns:1fr; }
.sec-head.center .h-1{ max-width:19ch; }
.sec-head.center p{ margin-inline:auto; }
.sec-head .ch{ width:70px; margin-bottom:20px; }

/* ---------- lifecycle ---------- */
.life{ display:grid; grid-template-columns:1fr; max-width:1420px; margin-inline:auto;
  padding:0 var(--pad) clamp(50px,6vw,90px); gap:clamp(20px,3vw,44px); }
@media (min-width:1000px){ .life{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }
.life-rail{ position:relative; }
@media (min-width:1000px){ .life-rail{ position:sticky; top:134px; align-self:start; } }
.life-rail .ch{ width:96px; margin-bottom:24px; }
.life-chain{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.life-chain span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 13px; border-radius:999px;
  border:1.5px solid var(--line); color:var(--faint);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.life-chain span.on{ color:var(--ink); border-color:var(--ink); background:var(--yellow); }

.life-steps{ display:grid; gap:14px; }
.step{ position:relative; border:1.5px solid var(--ink); border-radius:28px;
  padding:clamp(22px,2.6vw,32px); background:var(--white); }
.step-top{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:18px; }
.step-n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); }
.step .ch{ width:46px; flex:none; }
.step h3{ margin-bottom:6px; }
.step .step-sub{ font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:-.01em; margin:0 0 12px; }
.step:nth-child(1) .step-sub{ color:var(--blue); }
.step:nth-child(2) .step-sub{ color:var(--orange); }
.step:nth-child(3) .step-sub{ color:var(--green); }
.step:nth-child(4) .step-sub{ color:#d94fa0; }
.step:nth-child(5) .step-sub{ color:#7d6df0; }
.step p{ max-width:56ch; }
.step-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line); }
.step-tags b{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.08em;
  padding:7px 12px; border-radius:999px; border:1.5px solid var(--line); color:var(--muted); }

/* ---------- launch type tabs ---------- */
.tabs{ max-width:1420px; margin-inline:auto; padding:0 var(--pad) clamp(56px,7vw,100px); }
.tab-bar{ display:flex; gap:6px; padding:7px; border:1.5px solid var(--ink); border-radius:999px;
  background:var(--white); overflow-x:auto; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar{ display:none; }
.tab-btn{ flex:1 0 auto; border:0; background:transparent; border-radius:999px;
  padding:12px 20px; cursor:pointer; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.015em;
  color:var(--on-cream-muted); transition:color .25s var(--ease), background .25s var(--ease); }
.tab-btn:hover{ color:var(--ink); }
.tab-btn[aria-selected="true"]{ color:var(--ink); }
.tab-btn:nth-child(1)[aria-selected="true"]{ background:var(--sky); }
.tab-btn:nth-child(2)[aria-selected="true"]{ background:var(--green); }
.tab-btn:nth-child(3)[aria-selected="true"]{ background:var(--orange); }
.tab-btn:nth-child(4)[aria-selected="true"]{ background:var(--lav); }
.tab-btn small{ display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin-top:3px; }

.tab-panels{ margin-top:16px; border:1.5px solid var(--ink); border-radius:32px;
  overflow:hidden; background:var(--white); }
.tab-panel{ display:grid; grid-template-columns:1fr; }
.tab-panel[hidden]{ display:none; }
@media (min-width:940px){ .tab-panel{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.tab-copy{ padding:clamp(26px,3.4vw,46px); }
.tab-copy h3{ margin:16px 0 12px; }
.tab-copy .body{ max-width:48ch; }
.tab-side{ position:relative; border-top:1.5px solid var(--ink);
  padding:clamp(30px,3vw,40px) clamp(24px,3vw,40px) clamp(24px,3vw,40px); }
@media (min-width:940px){ .tab-side{ border-top:0; border-left:1.5px solid var(--ink); } }
#p-pool .tab-side{ background:#e9f1ff; }
#p-stock .tab-side{ background:#e3f7ef; }
#p-basket .tab-side{ background:#fdeee1; }
#p-yield .tab-side{ background:#eeebfe; }
.tab-side .ch{ position:absolute; right:24px; top:20px; width:58px; z-index:1; }

.vault-vis{ display:grid; gap:9px; }
.vault-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:16px;
  border:1.5px solid var(--ink); background:var(--white);
  font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted); }
.vault-row b{ margin-left:auto; color:var(--ink); font-weight:500; }
.vault-row i{ width:10px; height:10px; border-radius:99px; background:var(--pink); flex:none; }
.vault-row:nth-child(2) i{ background:var(--green); }
.vault-row:nth-child(3) i{ background:var(--sky); }
.vault-row:nth-child(4) i{ background:var(--orange); }
.vault-row:nth-child(5) i{ background:var(--lav); }
.vault-row:nth-child(6) i{ background:var(--yellow); }
.vault-out{ margin-top:16px; padding:18px; border-radius:20px; border:1.5px solid var(--ink);
  background:var(--yellow); }
.vault-out .tiny{ color:var(--ink); margin-bottom:6px; }
.vault-out > b{ display:block; font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:22px; letter-spacing:-.03em; }
.vault-out .live-row{ border-color:rgba(16,16,16,.22); }
.vault-out .live-row:first-of-type{ border-top:0; }

/* ---------- compare ---------- */
.compare{ display:grid; grid-template-columns:1fr; max-width:1420px; margin-inline:auto; }
@media (min-width:900px){ .compare{ grid-template-columns:1fr 1fr; } }
.compare > div{ padding:clamp(28px,3.6vw,54px) var(--pad); }
@media (min-width:900px){ .compare > div + div{ border-left:1px solid var(--line); } }
@media (max-width:899px){ .compare > div + div{ border-top:1px solid var(--line); } }
.compare .tiny{ margin-bottom:20px; }
.flowline{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 22px; }
.flowline b{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(15px,1.7vw,21px); letter-spacing:-.03em; padding:9px 15px; border-radius:12px;
  border:1.5px solid currentColor; }
.flowline i{ color:var(--faint); font-style:normal; }
.flowline.is-live b{ border-color:transparent; color:var(--ink); }
.flowline.is-live b:nth-of-type(1){ background:var(--sky); }
.flowline.is-live b:nth-of-type(2){ background:var(--green); }
.flowline.is-live b:nth-of-type(3){ background:var(--yellow); }
.flowline.is-live b:nth-of-type(4){ background:var(--orange); }
.flowline.is-live b:nth-of-type(5){ background:var(--pink); }

/* ---------- rows ---------- */
.rows{ border-top:1px solid var(--line); max-width:1420px; margin-inline:auto; }
.rows > div{ display:grid; gap:5px 30px; grid-template-columns:1fr;
  padding:18px var(--pad); border-bottom:1px solid var(--line);
  transition:background .3s var(--ease); }
@media (min-width:720px){ .rows > div{ grid-template-columns:230px 1fr; align-items:baseline; } }
.rows > div:hover{ background:var(--white); }
.panel-ink .rows > div:hover{ background:rgba(244,244,242,.07); }
.rows .k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin:0; }
.rows .v{ margin:0; font-size:15px; color:var(--muted); overflow-wrap:anywhere; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); max-width:1420px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:24px var(--pad);
  font-family:var(--display); font-weight:700; font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.025em; transition:background .2s var(--ease); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--white); }
.faq details[open] summary{ background:var(--yellow); }
.faq .plus{ flex:none; width:13px; height:13px; position:relative; }
.faq .plus::before,.faq .plus::after{ content:""; position:absolute; inset:50% 0 auto; height:2px;
  background:currentColor; transform:translateY(-50%); }
.faq .plus::after{ transform:translateY(-50%) rotate(90deg); transition:opacity .25s var(--ease); }
.faq details[open] .plus::after{ opacity:0; }
.faq-body{ padding:18px var(--pad) 26px; max-width:76ch; }

/* ---------- closing cta ---------- */
.cta{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(70px,9vw,130px) var(--pad); }
.cta .h-1{ max-width:16ch; margin-inline:auto; }
.cta .actions{ justify-content:center; }
/* ---------- footer ---------- */
.footer{ max-width:1420px; margin-inline:auto; padding:clamp(38px,4.4vw,64px) var(--pad);
  display:grid; gap:30px; grid-template-columns:1fr; }
@media (min-width:820px){ .footer{ grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); } }
.footer-brand .brand-name{ font-size:24px; }
.footer h4{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.footer nav{ display:grid; gap:9px; }
.footer nav a{ font-size:14px; color:var(--muted); width:fit-content;
  transition:color .18s var(--ease); }
.footer nav a:hover{ color:var(--ink); }
.footer-note{ grid-column:1/-1; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; }

/* ---------- prose and forms ---------- */
.prose{ max-width:76ch; }
.prose > *:first-child{ margin-top:0; }
.prose h2{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,2.4vw,32px); letter-spacing:-.03em; margin:52px 0 14px; }
.prose h3{ font-size:17px; font-weight:700; margin:28px 0 8px; letter-spacing:-.02em; }
.prose p{ color:var(--muted); margin:0 0 15px; }
.prose ul,.prose ol{ color:var(--muted); margin:0 0 15px; padding-left:20px; }
.prose li{ margin-bottom:8px; }
.prose li::marker{ color:var(--pink); }
.prose code{ font-family:var(--mono); font-size:13px; color:var(--ink); background:var(--yellow);
  padding:2px 7px; border-radius:6px; overflow-wrap:anywhere; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.field input,.field select,.field textarea{ width:100%; padding:14px 16px; background:var(--white);
  color:inherit; border:1.5px solid var(--ink); border-radius:14px;
  font-family:var(--font); font-size:16px; transition:box-shadow .2s var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none;
  box-shadow:0 0 0 4px rgba(116,170,247,.45); }
.field input::placeholder{ color:var(--faint); }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23101010' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }
.field-2{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){ .field-2{ grid-template-columns:1fr 1fr; } }
.hint{ margin-top:9px; font-size:13px; color:var(--faint); }
.hint.is-err{ color:#c9302c; }
.hint a{ text-decoration:underline; text-underline-offset:3px; }
.notice{ padding:18px; border:1.5px solid var(--ink); border-radius:18px; font-size:14px;
  color:var(--muted); background:var(--white); }
.notice.is-flag{ background:var(--lav); color:var(--ink); }
.notice strong{ color:var(--ink); }

/* ============================================================
   MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--reveal-delay,0s); }
.reveal.in-view{ opacity:1; transform:none; }

.rise{ animation:rise .9s var(--ease) both; }
.rise-1{ animation-delay:60ms } .rise-2{ animation-delay:150ms }
.rise-3{ animation-delay:250ms } .rise-4{ animation-delay:360ms }
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

.line-mask{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.line-in{ display:block; transform:translateY(108%);
  transition:transform 1s var(--ease); transition-delay:var(--line-delay,0s); }
.in-view .line-in{ transform:none; }

.progress{ position:fixed; inset:0 0 auto; height:3px; z-index:95; background:var(--pink);
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
@supports (animation-timeline: scroll()){
  .progress{ animation:progress linear both; animation-timeline:scroll(root block); }
}
@keyframes progress{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.rise{ opacity:1; transform:none; animation:none; transition:none; }
  .line-in{ transform:none; transition:none; }
  .progress{ animation:none; }
}

/* ---------- polish ---------- */
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:8px; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--ink); border-radius:99px; border:3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover{ background:var(--pink); }

/* ============================================================
   WALLET
   ============================================================ */
.btn.is-on{ font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  background:var(--green); border-color:var(--ink); color:var(--ink); }
.btn.is-on:hover{ background:var(--ink); color:var(--cream); }
.btn.is-warn{ background:var(--orange); border-color:var(--ink); color:var(--ink); }
.btn.is-warn:hover{ background:var(--ink); color:var(--cream); }

.wm{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.wm[hidden]{ display:none; }
.wm-scrim{ position:absolute; inset:0; background:rgba(16,16,16,.5);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:wm-fade .25s var(--ease) both; }
.wm-panel{ position:relative; width:min(410px,100%); background:var(--white);
  border:1.5px solid var(--ink); border-radius:28px; padding:22px;
  box-shadow:0 26px 60px -22px rgba(16,16,16,.55); animation:wm-in .35s var(--ease) both; }
@keyframes wm-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes wm-in{ from{ opacity:0; transform:translateY(16px) scale(.985) } to{ opacity:1; transform:none } }
.wm-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px; }
.wm-title{ margin:0; font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); }
.wm-x{ background:none; border:0; color:var(--on-cream-faint); font-size:26px; line-height:1;
  cursor:pointer; padding:0 6px; border-radius:8px; transition:color .2s var(--ease); }
.wm-x:hover{ color:var(--ink); }
.wm-item{ width:100%; display:flex; align-items:center; gap:13px; padding:14px 16px;
  margin-bottom:9px; background:var(--cream); border:1.5px solid var(--ink);
  border-radius:18px; color:inherit; font-size:15px; font-weight:600; text-align:left;
  cursor:pointer; transition:background .18s linear; }
.wm-item:hover{ background:var(--yellow); }
.wm-item.is-busy{ opacity:.55; pointer-events:none; }
.wm-item .wm-go{ margin-left:auto; color:var(--on-cream-faint); }
.wm-icon{ width:28px; height:28px; border-radius:9px; flex:none; }
.wm-dot{ width:28px; height:28px; border-radius:9px; flex:none; background:var(--pink); }
.wm-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 2px; border-bottom:1px solid var(--line-cream); }
.wm-k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-cream-faint); }
.wm-v{ font-size:14px; font-weight:600; }
.wm-warn{ color:#c2620d; }
.wm-full{ width:100%; margin-top:12px; }
.wm-err{ margin:14px 0 0; font-size:13px; color:#c9302c; }