/* anything — shared design system. warm paper + editorial serif, but with colour:
   a persimmon brand accent, and every unit carries its own hue through the page. */
:root{
  --bg:#EFEDE4;
  --bg-raise:#F6F4EC;
  --ink:#1b1712;
  --ink-2:#5e574c;
  --muted:#948d7e;
  --hair:#dcd7c8;
  --hair-2:#e6e1d3;
  --brand:#d8492a;        /* persimmon — the signature accent */
  --brand-ink:#b23a1f;    /* a hair darker, for text on paper */
  --accent:#d8492a;
  --live:#5f8a5a;
  --u:#d8492a;            /* per-unit hue, set inline on coloured elements */
  --col:660px;
  --wide:1040px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}

.col{max-width:var(--col);margin:0 auto;padding:0 28px}
.col.wide{max-width:var(--wide)}
.serif{font-family:"Fraunces",Georgia,serif;font-weight:300}
.it{font-style:italic;font-weight:400}
.label{font-size:12.5px;letter-spacing:.16em;color:var(--brand-ink)}
.hair{border:0;border-top:1px solid var(--hair);margin:0}

/* connect-wallet pill (shared across pages) */
.wbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brand);color:var(--brand-ink);background:transparent;font:inherit;font-size:12.5px;letter-spacing:.02em;padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .22s var(--ease,cubic-bezier(.2,.8,.2,1))}
.wbtn:hover{background:var(--brand);color:#fff}
.wbtn.on{border-color:var(--hair);color:var(--ink);background:var(--bg-raise)}
.wbtn .wd{width:7px;height:7px;border-radius:50%;background:var(--live)}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0;gap:16px;flex-wrap:wrap}
nav .brand{font-size:14px;letter-spacing:.24em;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
nav .brand::before{content:"";width:9px;height:9px;background:var(--brand);border-radius:2px;transform:rotate(45deg)}
nav .links{display:flex;gap:26px;font-size:13.5px;letter-spacing:.04em;color:var(--ink-2);align-items:center}
nav .links a:hover{color:var(--ink)}
nav .links a.on{color:var(--brand-ink);border-bottom:1px solid var(--brand);padding-bottom:2px}
@media(max-width:620px){nav .links{gap:16px;font-size:12.5px}}

/* headings */
.eyebrow{margin:0 0 22px}
h1.big{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(38px,6.6vw,72px);
  line-height:1.03;letter-spacing:-.018em;margin:0;text-wrap:balance}
h2.mid{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(26px,4.2vw,42px);
  line-height:1.06;letter-spacing:-.015em;margin:10px 0 0;text-wrap:balance}
.sub{margin:26px 0 0;color:var(--ink-2);font-size:17px;line-height:1.62;max-width:48ch}
.sub b{color:var(--ink);font-weight:500}

/* text links / actions */
.actions{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.lnk{font-size:15px;color:var(--ink);padding-bottom:3px;border-bottom:1px solid var(--ink);transition:opacity .2s}
.lnk.q{color:var(--ink-2);border-color:var(--hair)}
.lnk:hover{opacity:.55}
.arrow{font-size:14px;color:var(--ink-2);letter-spacing:.02em}
.arrow:hover{color:var(--ink)}

/* a small dot in a unit colour */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.live .d{width:5px;height:5px;border-radius:50%;background:var(--live);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.live .d{animation:none;opacity:.8}}

/* the price wall — the cool index. each unit's PRICE is the hero, in serif. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:22px 20px 20px;display:flex;flex-direction:column;gap:2px;position:relative;transition:background .2s;
  background:color-mix(in srgb, var(--u) 6%, var(--bg-raise))}
.cell:hover{background:color-mix(in srgb, var(--u) 13%, var(--bg-raise))}
.cell .u{font-size:13px;color:var(--ink);letter-spacing:.01em}
.cell .tk{font-size:10.5px;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.cell .p{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:30px;line-height:1;letter-spacing:-.01em;color:var(--u)}
.cell .q{font-size:12px;color:var(--ink-2);margin-top:5px}
.cell .cdot{position:absolute;top:20px;right:18px;width:7px;height:7px;border-radius:50%}

/* group heading for a wall */
.gh{display:flex;align-items:baseline;justify-content:space-between;margin:54px 0 18px}
.gh:first-of-type{margin-top:0}
.gh .n{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;font-size:22px;color:var(--ink)}
.gh .c{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* data table (rates detail / portfolio / claim) */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.13em;color:var(--muted);
  padding:0 16px 14px 0;border-bottom:1px solid var(--ink)}
.tbl th.r,.tbl td.r{text-align:right;padding-right:0}
.tbl td{padding:16px 16px 16px 0;border-bottom:1px solid var(--hair);vertical-align:baseline;font-variant-numeric:tabular-nums}
.tbl td.name{color:var(--ink)}
.tbl td.sub{color:var(--muted);font-size:12px;letter-spacing:.06em}
.tbl .serifnum{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:17px}
.pos{color:var(--live)}.neg{color:var(--accent)}

/* buttons */
.btn{display:inline-block;font-size:14px;font-weight:500;padding:12px 22px;cursor:pointer;
  border:1px solid var(--brand);background:transparent;color:var(--brand-ink);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--brand);color:#fff}
.btn.fill{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.fill:hover{background:var(--brand-ink)}
.btn.sm{padding:8px 15px;font-size:12.5px}

/* panel / callout */
.panel{border:1px solid var(--hair);background:var(--bg-raise);padding:26px 24px}
.note{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* the "what you can do" trio on the landing */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
@media(max-width:720px){.trio{grid-template-columns:1fr}}
.trio a{padding:24px 24px 26px;border-bottom:1px solid var(--hair);transition:background .2s}
.trio a:not(:last-child){border-right:1px solid var(--hair)}
.trio a:hover{background:var(--bg-raise)}
.trio .t{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:21px;color:var(--ink);margin-bottom:8px}
.trio .d{font-size:14px;color:var(--ink-2);line-height:1.5}
.trio .go{margin-top:14px;font-size:12.5px;letter-spacing:.08em;color:var(--muted)}
.trio a:hover .go{color:var(--ink)}

/* steps */
.how{display:grid;gap:0;border-top:1px solid var(--hair)}
.step{display:grid;grid-template-columns:30px 1fr;gap:20px;align-items:start;padding:26px 0;border-bottom:1px solid var(--hair)}
.step .no{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:20px;color:var(--brand-ink)}
.step h4{margin:0 0 6px;font-size:16px;letter-spacing:.02em;color:var(--ink);font-weight:500}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:56ch}

/* section rhythm */
section{padding:11vh 0}
section.tight{padding:8vh 0}
.sec-head{margin-bottom:44px}

/* footer */
footer{border-top:1px solid var(--hair);padding:32px 0 56px;color:var(--muted);font-size:12.5px;letter-spacing:.06em}
footer .row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* page hero for inner pages */
.phead{padding:7vh 0 5vh}
.phead h1{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(34px,5.4vw,58px);letter-spacing:-.017em;line-height:1.04;margin:14px 0 0}
.phead p{margin:20px 0 0;color:var(--ink-2);max-width:52ch;font-size:16.5px}

/* coin board controls */
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--hair)}
.seg button{background:transparent;border:0;padding:9px 15px;font-family:inherit;font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.seg button+button{border-left:1px solid var(--hair)}
.seg button.on{background:var(--ink);color:var(--bg)}
select.filter{font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--bg);border:1px solid var(--hair);padding:9px 30px 9px 14px;cursor:pointer;
  -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239b968a'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.coin-name{color:var(--ink);font-size:15px}
.bar{position:relative;width:66px;height:3px;background:var(--hair);display:inline-block;vertical-align:middle;margin-right:10px}
.bar>span{position:absolute;left:0;top:0;height:100%;background:var(--ink-2)}
.udot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:8px}

/* launch form */
.form{display:flex;flex-direction:column;gap:28px;max-width:460px}
.field label{display:block;font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:9px}
.field input[type=text],.field input[type=number],.field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:8px 0;font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:22px;color:var(--ink)}
.field select{font-family:"Hanken Grotesk",sans-serif;font-size:16px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239b968a'/></svg>");background-repeat:no-repeat;background-position:right 2px center}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--accent)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:8px}
.field.two{display:flex;gap:26px}
.result{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.7}
.result a{border-bottom:1px solid var(--hair)}
.result.err{color:var(--accent)}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phead{animation:rise .85s both cubic-bezier(.2,.8,.2,1)}
.reveal{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal{opacity:0;transform:translateY(30px)}
.js .reveal.in{opacity:1;transform:none}
.rowin{animation:rowin .5s both cubic-bezier(.2,.8,.2,1)}
.lnk{position:relative}
.cell,.unit,.trio a,.step,.btn,.lnk,nav .links a{transition:all .2s cubic-bezier(.2,.8,.2,1)}
.cell:hover{transform:translateY(-2px)}
.row:hover .cn{opacity:.6}
@media(prefers-reduced-motion:reduce){
  .phead,.rowin{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .cell:hover{transform:none}
}

/* ── silky: global smoothness ───────────────────────────────────────────── */
html{scroll-behavior:smooth}
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.2,1.35,.35,1)}
a,button,input,select,.cell,.unit,.trio a,.step,.seg button,.row{
  transition:color .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .28s var(--ease),opacity .22s var(--ease)}
.btn{will-change:transform}
.btn:active{transform:translateY(1px) scale(.99)}
.navbtn,[data-wallet]{transition:all .22s var(--ease)!important}
.tbl tbody tr{transition:background-color .22s var(--ease)}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}
.seg:hover,select.filter:hover{border-color:var(--brand)}
input:focus,select:focus{border-bottom-color:var(--brand)!important}
.spin{display:inline-block;width:13px;height:13px;border:2px solid color-mix(in srgb,currentColor 28%,transparent);
  border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.fadein{animation:rise .6s both var(--ease)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spin{animation:none}.fadein{animation:none}}