/* ============================================================
   unit — forest green + sage, editorial. Giftfolio design system.
   A hero background video runs behind the whole page; every band
   and card is clear frosted glass over it. Fraunces + Inter.
   ============================================================ */
:root{
  --paper:      #E9ECD9;   /* pale sage base                 */
  --paper-2:    #F3F5E7;   /* lighter band                   */
  --ink:        #202A14;   /* deep forest near-black text    */
  --ink-2:      #55603F;   /* secondary text                 */
  --ink-3:      #899170;   /* muted                          */
  --line:       rgba(32,42,20,.10);
  --line-2:     rgba(32,42,20,.07);

  --green:      #5E7F39;   /* moss accent                    */
  --green-deep: #38431E;   /* deep moss (buttons/text)       */
  --green-soft: #E1E7CE;   /* tint bg                        */
  --bloom:      #5E7F39;   /* the little blue flowers        */
  --up:         #2E7D46;
  --down:       #C0392B;

  /* glass — clear, see-through glass over the background video */
  --glass:      rgba(255,255,255,.16);
  --glass-2:    rgba(255,255,255,.26);
  --glass-brd:  rgba(255,255,255,.42);
  --blur:       saturate(135%) blur(10px);

  /* surface — the flat card. One tone, no border, no shadow. Everything that
     holds content uses this, so the page reads as one material. */
  --surface:    rgba(240,242,225,.72);
  --surface-2:  rgba(245,247,232,.88);
  --surface-blur: saturate(150%) blur(18px);

  --shadow-sm:  0 1px 2px rgba(30,45,18,.05), 0 3px 12px rgba(30,45,18,.06);
  --shadow-md:  0 10px 34px rgba(30,45,18,.10);
  --shadow-lg:  0 28px 70px rgba(30,45,18,.16);
  --r:          18px;
  --r-sm:       13px;
  --maxw:       1160px;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:#dbe0c4;               /* fallback behind the fixed video */
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
em{ font-style:italic; }
.mono{ font-family:var(--mono); font-size:.92em; }
.up{ color:var(--up); font-weight:600; }
.down{ color:var(--down); font-weight:600; }

/* ---------- full-page background video (fixed behind everything) ---------- */
.page-bg{ position:fixed; inset:0; z-index:-3; overflow:hidden; background:#dbe0c4 url("assets/hero.jpg") center/cover no-repeat; }
.page-video{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.page-video.ready{ opacity:1; }
/* legibility scrim over the video — light frosted wash + soft colour pools */
.page-scrim{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 40% at 82% 4%, rgba(94,127,57,.10), transparent 60%),
    radial-gradient(55% 45% at 6% 98%, rgba(46,61,27,.12), transparent 60%),
    linear-gradient(180deg, rgba(233,236,217,.34) 0%, rgba(233,236,217,.44) 50%, rgba(233,236,217,.5) 100%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-lg{ padding:15px 28px; font-size:16px; }
.btn-sm{ padding:8px 15px; font-size:13.5px; }
.btn-primary{ background:var(--green-deep); color:#fff; box-shadow:none; }
.btn-primary:hover:not(:disabled){ transform:translateY(-2px); background:var(--green); }
.btn-line{ background:rgba(255,255,255,.78); border-color:transparent; color:var(--ink); backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur); }
.btn-line:hover:not(:disabled){ background:#fff; }
.btn-ghost{ background:transparent; color:var(--ink-2); padding:11px 16px; }
.btn-ghost:hover{ color:var(--ink); }

/* The card. Flat tone, generous radius, no border and no shadow — depth comes
   from the tone sitting on the video, not from a stack of effects. */
.card, .glass{
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; border-radius:var(--r); box-shadow:none;
}

/* ---------- nav ---------- */
/* a floating pill, inset from the top, rather than a full-width bar */
.nav{ position:sticky; top:0; z-index:50; padding:16px 0; }
.nav-inner{
  display:flex; align-items:center; gap:26px; height:62px; padding:0 10px 0 20px;
  border-radius:16px;
  background:rgba(238,240,222,.85);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  box-shadow:0 2px 10px rgba(30,45,18,.06);
  transition:background .25s ease, box-shadow .25s ease;
}
.nav.scrolled .nav-inner{ background:rgba(243,245,230,.9); box-shadow:0 8px 26px rgba(30,45,18,.12); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; }
.brand-name{ display:none; }
.brand-mark{
  width:72px; height:30px; flex:none; border-radius:0;
  background:url("assets/logo.png") left center/contain no-repeat;
}
.nav-links{ display:flex; gap:26px; margin-left:8px; }
.nav-links a{ font-size:15px; color:var(--ink-2); font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ position:relative; display:flex; align-items:center; gap:4px; margin-left:auto; }
/* the nav CTA carries a round arrow badge on its trailing edge */
.btn-badge{ padding:8px 8px 8px 18px; gap:10px; }
.btn-badge .arrow{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px;
  background:rgba(255,255,255,.22); font-size:13px; line-height:1;
}
.nav-x{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; color:var(--ink-2); transition:color .15s, background .15s; }
.nav-x:hover{ color:var(--ink); background:rgba(32,42,20,.06); }
.nav-burger{ display:none; margin-left:auto; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:56px 0 64px; min-height:86vh; display:flex; flex-direction:column; justify-content:center; }
.hero-inner{ position:relative; z-index:1; width:100%; text-align:left; }
.hero-glass{
  max-width:700px; margin:0; padding:46px 44px; border-radius:20px;
  background:rgba(238,240,223,.62);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.72); border:0; border-radius:999px;
  padding:7px 15px; font-size:13.5px; font-weight:500; color:var(--ink-2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(94,127,57,.22); }
.pill b, .pill [data-chain]{ color:var(--ink); font-weight:600; }

.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(52px, 8vw, 104px); line-height:.98; letter-spacing:-.035em;
  margin:18px 0 0;
}
.hero-sub{ margin:22px 0 0; max-width:54ch; font-size:clamp(16.5px,2.1vw,19px); color:var(--ink-2); }
.hero-actions{ display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; margin-top:32px; }

.hero-chips{ display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin-top:30px; font-size:13.5px; font-weight:500; color:var(--ink-2); }
.hero-chips span{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.52); }
.hero-chips svg{ width:16px; height:16px; color:var(--green); }

/* contract address chip */
.ca-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  background:rgba(255,255,255,.66); border:0; border-radius:999px;
  padding:8px 8px 8px 15px; font-size:13.5px;
  cursor:pointer; transition:background .2s;
}
.ca-chip:hover{ background:#fff; }
.ca-label{ font-weight:700; color:var(--ink-3); letter-spacing:.06em; font-size:11px; }
.ca-value{ font-family:var(--mono); color:var(--ink); }
.ca-copy{ background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-weight:600; font-size:12.5px; color:var(--ink-2); }

/* vault preview under the hero — one wide, flat card */
.float-card{
  position:relative; z-index:1; margin:36px 0 0; max-width:400px; text-align:left;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; border-radius:var(--r); box-shadow:0 24px 60px rgba(30,45,18,.14); padding:22px;
}
.fc-top{ display:flex; align-items:center; gap:12px; }
.fc-avatar{ width:42px; height:42px; border-radius:12px; background:var(--green-soft); display:grid; place-items:center; color:var(--green-deep); }
.fc-avatar svg{ width:22px; height:22px; }
.fc-title{ font-weight:600; font-size:15px; }
.fc-sub{ font-size:13px; color:var(--ink-3); }
.fc-body{ display:flex; align-items:baseline; justify-content:space-between; margin:16px 0; padding:14px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.fc-sym{ font-family:var(--serif); font-size:26px; }
.fc-amt{ font-size:14px; color:var(--ink-2); }
.fc-btn{ width:100%; background:linear-gradient(180deg,var(--green),var(--green-deep)); color:#fff; border:0; border-radius:12px; padding:12px; font-weight:600; font-family:var(--sans); font-size:15px; cursor:pointer; transition:filter .2s; }
.fc-btn:hover{ filter:brightness(1.08); }

/* ---------- trust strip ---------- */
.strip{ border:0; background:rgba(255,255,255,.34); backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur); }
.strip-inner{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; padding:22px 24px; }
.strip-item{ font-size:14.5px; color:var(--ink-2); }
.strip-item b{ color:var(--ink); font-weight:600; }
.strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--green); opacity:.5; }

/* ---------- sections (clear glass bands over the video) ---------- */
.section{ padding:104px 0; position:relative; background:rgba(237,239,223,.06); backdrop-filter:saturate(130%) blur(6px); -webkit-backdrop-filter:saturate(130%) blur(6px); }
.section-alt{ background:rgba(255,255,255,.14); backdrop-filter:saturate(140%) blur(11px); -webkit-backdrop-filter:saturate(140%) blur(11px); border:0; }
.sec-head{ max-width:760px; margin:0; text-align:left; }
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-deep); }
.sec-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.6vw,50px); line-height:1.05; letter-spacing:-.03em; margin:16px 0 0; }
.sec-head h2 em{ color:var(--green-deep); }
.sec-lead{ margin-top:18px; color:var(--ink-2); font-size:17px; }
.sec-note{ margin-top:40px; text-align:left; font-size:13.5px; color:var(--ink-3); }

/* ---------- before / after ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:64px; }
.ba-card{
  border-radius:var(--r); padding:32px;
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.ba-card.after{ background:rgba(225,231,206,.72); }
.ba-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ba-card.after .ba-tag{ color:var(--green-deep); }
.ba-card h3{ font-family:var(--serif); font-weight:400; font-size:26px; margin:12px 0 18px; letter-spacing:-.01em; }
.ba-list{ display:grid; gap:12px; }
.ba-list li{ list-style:none; display:flex; gap:11px; font-size:15px; color:var(--ink-2); line-height:1.5; }
.ba-list svg{ width:17px; height:17px; flex:none; margin-top:3px; }
.ba-card .x{ color:var(--down); opacity:.75; }
.ba-card .v{ color:var(--green); }

/* ---------- feature grid ---------- */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; }
.feat article{
  border-radius:var(--r); padding:32px 30px;
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
  transition:transform .2s ease, background .2s ease;
}
.feat article:hover{ transform:translateY(-3px); background:var(--surface-2); }
.feat-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--green-soft); color:var(--green-deep); margin-bottom:18px; }
.feat-ic svg{ width:21px; height:21px; }
.feat h3{ font-family:var(--serif); font-weight:400; font-size:23px; letter-spacing:-.01em; }
.feat p{ margin-top:10px; color:var(--ink-2); font-size:15px; }
.feat ul{ margin-top:16px; display:grid; gap:9px; }
.feat li{ list-style:none; display:flex; gap:9px; font-size:14px; color:var(--ink-2); }
.feat li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); flex:none; margin-top:8px; }

/* ---------- pipeline ---------- */
.pipe{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:64px; }
.pipe-step{
  border-radius:var(--r); padding:28px 24px;
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.pipe-step b{ display:block; font-family:var(--serif); font-weight:400; font-size:21px; margin:8px 0 8px; }
.pipe-step p{ font-size:14.5px; color:var(--ink-2); }
.pipe-n{ font-family:var(--serif); font-size:15px; color:var(--green); font-weight:600; letter-spacing:.1em; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; }
.step{
  border-radius:var(--r); padding:32px 30px;
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
  transition:transform .2s, background .2s;
}
.step:hover{ transform:translateY(-3px); background:var(--surface-2); }
.step-n{ font-family:var(--serif); font-size:15px; color:var(--green); font-weight:600; letter-spacing:.1em; }
.step h3{ font-family:var(--serif); font-weight:400; font-size:23px; margin:12px 0 10px; letter-spacing:-.01em; }
.step p{ color:var(--ink-2); font-size:15px; }

/* ---------- stat strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.stat{
  text-align:center; padding:30px 18px; border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.stat b{ display:block; font-family:var(--serif); font-weight:400; font-size:34px; letter-spacing:-.02em; }
.stat span{ display:block; margin-top:8px; font-size:13.5px; color:var(--ink-2); }
.stat .pending{ font-family:var(--sans); font-size:18px; color:var(--ink-3); }

/* ---------- tokenized stock grid ---------- */
.stock-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-top:56px; }
.stock{
  display:flex; align-items:center; gap:11px; padding:15px 16px; border-radius:var(--r-sm);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
  transition:transform .18s, background .18s;
}
.stock:hover{ transform:translateY(-2px); background:var(--surface-2); }
.stock img{ width:30px; height:30px; border-radius:8px; object-fit:contain; background:#fff; flex:none; }
.stock > span:not(.stock-p){ min-width:0; }
.stock-t{ display:block; font-weight:600; font-size:14.5px; line-height:1.25; }
.stock-n{ display:block; font-size:12px; color:var(--ink-3); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stock-p{ margin-left:auto; padding-left:10px; text-align:right; font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.stock-p .ch{ display:block; font-size:11.5px; }
.ch.up{ color:var(--up); } .ch.down{ color:var(--down); }

/* ---------- security grid ---------- */
.sec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:64px; }
.sec-item{
  padding:30px 26px; border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.sec-item svg{ width:20px; height:20px; color:var(--green-deep); }
.sec-item b{ display:block; margin:14px 0 7px; font-size:15.5px; }
.sec-item p{ font-size:14px; color:var(--ink-2); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:64px auto 0; display:grid; gap:12px; }
.faq details{
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.faq summary{ list-style:none; cursor:pointer; padding:19px 22px; font-weight:600; font-size:16px; display:flex; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; font-size:20px; font-weight:400; color:var(--ink-3); }
.faq details[open] summary::after{ content:"−"; }
.faq p{ padding:0 22px 20px; color:var(--ink-2); font-size:15px; }
.faq code{ font-family:var(--mono); font-size:.9em; background:rgba(32,42,20,.07); padding:2px 6px; border-radius:5px; }

/* ---------- notice ---------- */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px 20px; border-radius:var(--r-sm);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
  font-size:14.5px; color:var(--ink-2);
}
.notice svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--green-deep); }
.notice b{ color:var(--ink); }
.notice code{ font-family:var(--mono); font-size:.9em; background:rgba(32,42,20,.07); padding:2px 6px; border-radius:5px; }

/* ---------- footer — dark clear glass ---------- */
.footer{
  background:rgba(24,32,14,.62); backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  color:#EEF1DE; padding:72px 0 34px; border:0;
}
.foot-inner{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand{ max-width:300px; }
.foot-brand .row{ display:flex; align-items:center; gap:10px; }
.foot-brand .brand-name{ color:#fff; }
.foot-brand p{ margin-top:12px; font-size:14px; color:#99A277; }
.foot-cols{ display:flex; gap:64px; }
.foot-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#99A277; font-weight:600; margin-bottom:14px; }
.foot-col a{ display:block; font-size:14.5px; color:#DBE1C6; padding:4px 0; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:26px; font-size:13px; color:#99A277; }

/* ============================================================
   App page
   ============================================================ */
.app-main{ padding:40px 0 80px; }
.app-head{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:20px;
  padding:30px 32px; border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.app-head h1{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,44px); letter-spacing:-.02em; }
.app-head p{ color:var(--ink-2); font-size:15.5px; margin-top:6px; max-width:62ch; }
.app-hint{ margin-top:12px !important; padding:12px 14px; border-radius:var(--r-sm); background:rgba(225,231,206,.7); font-size:14.5px !important; }
.app-hint b{ color:var(--ink); }
.app-head .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.wallet-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid var(--glass-brd); font-family:var(--mono); font-size:13px; }
.wallet-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }

/* wallet chooser, anchored under the connect button */
.wallet-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:61;
  min-width:230px; padding:14px; border-radius:var(--r-sm);
  background:#fff; box-shadow:0 18px 44px rgba(30,45,18,.18);
}
.wallet-menu h5{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; font-weight:600; }
.wallet-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 12px; border:0; border-radius:12px; background:none; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink);
}
.wallet-menu button:hover{ background:var(--paper); }
.wallet-menu img{ width:22px; height:22px; border-radius:6px; object-fit:contain; }
.wallet-menu .dotmark{ width:22px; height:22px; border-radius:6px; background:var(--green-soft); }

/* connect feedback, anchored under the header button that was clicked */
.wallet-note{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  max-width:340px; padding:14px 16px; border-radius:var(--r-sm);
  background:#fff; color:var(--ink-2); font-size:13.5px; line-height:1.5;
  box-shadow:0 18px 44px rgba(30,45,18,.18);
}

.panel{
  border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.panel-head{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line-2); }
.panel-head h2{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:-.01em; }
.panel-head .sub{ font-size:13.5px; color:var(--ink-3); margin-left:auto; }
.panel-head #tvl{ margin-left:auto; }
.panel-head #tvl + .sub{ margin-left:14px; }
.panel-head #tvl b{ color:var(--ink); font-weight:600; }
.panel-body{ padding:22px; }

.vault-table{ width:100%; border-collapse:collapse; }
.vault-table th{ text-align:left; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:0 14px 12px; }
.vault-table th.num, .vault-table td.num{ text-align:right; }
.vault-table td{ padding:14px; border-top:1px solid var(--line-2); font-size:14.5px; vertical-align:middle; }
.vault-table tbody tr:hover{ background:rgba(255,255,255,.4); }
/* a vault you can actually act on */
.vault-table tr.has-balance{ background:rgba(225,231,206,.5); }
.vault-table tr.has-balance:hover{ background:rgba(225,231,206,.72); }
.notice-row{
  margin:0 0 18px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(225,231,206,.6); color:var(--ink-2); font-size:14px;
}
.vault-table .num{ font-family:var(--mono); font-size:13.5px; }
.vault-table tr.retired{ opacity:.55; }
.vault-table tr.retired:hover{ opacity:.8; }
.tag{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:rgba(32,42,20,.09); font-family:var(--sans); font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; vertical-align:middle; }
.vault-asset{ display:flex; align-items:center; gap:11px; }
.vault-asset img{ width:28px; height:28px; border-radius:8px; object-fit:contain; background:#fff; }
.vault-asset b{ font-size:14.5px; }
.vault-asset small{ display:block; color:var(--ink-3); font-weight:400; font-size:12.5px; }

.empty{ text-align:center; padding:52px 24px; color:var(--ink-2); }
.empty b{ display:block; font-family:var(--serif); font-weight:400; font-size:22px; color:var(--ink); margin-bottom:10px; }
.empty p{ max-width:52ch; margin:0 auto; font-size:15px; }
.empty .mono{ display:inline-block; margin-top:14px; padding:7px 12px; border-radius:8px; background:rgba(32,42,20,.06); font-size:12.5px; }

.mode-explain{ font-size:14px; color:var(--ink-2); margin-bottom:18px; line-height:1.5; }
.mode-explain b{ color:var(--ink); }
#gasWarn{ background:rgba(192,57,43,.10); color:var(--ink-2); }
#gasWarn b{ color:var(--down); }

.field{ display:grid; gap:7px; margin-bottom:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-2); }
.field input, .field select{
  width:100%; padding:13px 15px; border-radius:12px; font-family:var(--mono); font-size:15px;
  background:rgba(255,255,255,.72); border:1px solid var(--line); color:var(--ink);
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(94,127,57,.15); }
.field .hint{ font-size:12.5px; color:var(--ink-3); font-family:var(--sans); }

.tabs{ display:inline-flex; padding:4px; border-radius:999px; background:rgba(32,42,20,.07); gap:2px; }
.tabs button{ border:0; background:none; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink-3); padding:8px 18px; border-radius:999px; transition:background .15s, color .15s; }
.tabs button.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.pay-tabs{ align-self:start; }
.route-line{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-3); margin-top:-6px; }

.kv{ display:grid; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); }
.kv div{ display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.kv dt{ color:var(--ink-2); }
.kv dd{ font-family:var(--mono); font-size:13.5px; }

.status{ margin-top:16px; padding:13px 15px; border-radius:12px; font-size:14px; display:none; }
.status.show{ display:block; }
.status.info{ background:rgba(78,110,240,.12); color:#2c3f9b; }
.status.ok{ background:rgba(46,125,70,.14); color:#2E7D46; }
.status.err{ background:rgba(192,57,43,.12); color:var(--down); }
.status a{ text-decoration:underline; }

.app-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; }

/* ---------- docs ---------- */
.docs{ display:grid; grid-template-columns:220px 1fr; gap:48px; max-width:1040px; margin:0 auto; padding:48px 24px 90px; align-items:start; }
/* A grid item's default min-width is its min-content width, and a <pre> of
   unwrapped code has a wide one. Without this the column refuses to shrink
   below the widest code block and the whole page scrolls sideways on a phone,
   which is exactly what the pre's own overflow-x is there to prevent. */
.docs > *{ min-width:0; }
.docs-nav{
  position:sticky; top:104px; padding:22px 18px; border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.docs-nav h5{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin:0 0 12px; font-weight:600; }
.docs-nav a{ display:block; font-size:14.5px; color:var(--ink-2); padding:6px 0 6px 12px; border-left:2px solid transparent; }
.docs-nav a:hover{ color:var(--ink); }
.docs-nav a.active{ color:var(--green-deep); border-color:var(--green); font-weight:600; }
.doc{
  max-width:none; min-width:0; padding:44px 48px; border-radius:var(--r);
  background:var(--surface);
  backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
  border:0; box-shadow:none;
}
.doc h2{ scroll-margin-top:92px; }
.doc h1{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.6vw,46px); letter-spacing:-.02em; }
.doc h2{ font-family:var(--serif); font-weight:400; font-size:27px; letter-spacing:-.01em; margin:44px 0 14px; }
.doc h3{ font-size:17px; margin:26px 0 8px; }
.doc p, .doc li{ color:var(--ink-2); font-size:16px; }
.doc p{ margin-bottom:14px; }
.doc ul, .doc ol{ margin:0 0 16px 22px; display:grid; gap:8px; }
.doc code{ font-family:var(--mono); font-size:.9em; background:rgba(32,42,20,.08); padding:2px 6px; border-radius:5px; color:var(--ink); }
.doc pre{ background:rgba(255,255,255,.5); border:1px solid var(--glass-brd); border-radius:12px; padding:16px 18px; overflow-x:auto; margin-bottom:18px; backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.doc pre code{ background:none; padding:0; font-size:13px; line-height:1.6; }
.doc table{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:15px; }
.doc th, .doc td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.doc th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.doc td.mono, .doc td .mono{ font-family:var(--mono); font-size:12.5px; word-break:break-all; }
.doc a{ color:var(--green-deep); text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .feat, .steps{ grid-template-columns:1fr 1fr; }
  .pipe, .sec-grid{ grid-template-columns:1fr 1fr; }
  .app-cols{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  /* ---- the table must scroll inside its panel, never widen the page ---- */
  #vaultList{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .vault-table{ min-width:0; }
  .vault-table th, .vault-table td{ padding:12px 8px; }
  .vault-asset{ gap:8px; }
  .vault-asset img{ width:24px; height:24px; }
  .vault-asset b{ font-size:13.5px; }
  .vault-asset small{ font-size:11.5px; }
  .vault-table .num{ font-size:12.5px; }
  .btn-sm{ padding:7px 11px; font-size:12.5px; }
  /* "Your position" is a dash for almost everyone on a phone; the wallet
     column is the one that tells you what you can do. */
  .vault-table th:nth-child(5), .vault-table td:nth-child(5){ display:none; }
  /* long labels wrap to three lines in a narrow column */
  .wide-only{ display:none; }
  .vault-table th{ white-space:nowrap; }

  /* ---- the nav menu actually opens on a phone ---- */
  /* The burger sits next to the brand. Left at the end of the row it pushed the
     bar past the viewport and gave the whole page a horizontal scroll. */
  .brand{ order:0; }
  .nav-burger{ display:flex; order:1; margin:0; padding:8px 6px; }
  .nav-cta{ order:2; gap:2px; margin-left:auto; }
  .nav-inner{ padding:0 8px 0 14px; gap:8px; }
  .brand-name{ font-size:19px; }
  .brand-mark{ width:60px; height:26px; }
  .nav-cta .btn{ padding:9px 14px; font-size:14px; }
  .nav-x{ width:30px; height:30px; }
  .nav-x svg{ width:16px; height:16px; }
  .wallet-chip{ padding:7px 11px; font-size:11.5px; }
  .nav-cta .btn-badge{ padding:8px 8px 8px 14px; font-size:14px; }
  .nav-cta .btn-badge .arrow{ width:22px; height:22px; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:55;
    padding:10px; border-radius:var(--r);
    background:rgba(255,255,255,.94);
    backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur);
    box-shadow:0 18px 44px rgba(30,45,18,.18);
  }
  .nav-links.open a{ padding:12px 14px; border-radius:12px; font-size:15.5px; color:var(--ink); }
  .nav-links.open a:active{ background:var(--paper); }
  .nav{ position:sticky; }
  .nav .wrap{ position:relative; }

  /* ---- hero: same content, less air ---- */
  .hero{ padding:24px 0 36px; }
  .hero-glass{ padding:28px 20px 26px; }
  .hero-title{ font-size:clamp(44px,13vw,56px); margin-top:18px; }
  .hero-sub{ margin-top:16px; font-size:16px; }
  .hero-actions{ margin-top:22px; gap:10px; }
  .hero-actions .btn-lg{ padding:13px 20px; font-size:15px; }
  .hero-chips{ margin-top:20px; gap:8px; }
  .hero-chips span{ padding:6px 12px; font-size:12.5px; }
  .ca-chip{ margin-top:18px; }
  .float-card{ margin-top:28px; }
  /* On a narrow screen an absolutely-placed note under the button lands on top
     of the page heading. Show it as a toast along the bottom instead, where it
     covers nothing. */
  .wallet-note{
    position:fixed; top:auto; bottom:14px; left:14px; right:14px; max-width:none;
    box-shadow:0 -6px 30px rgba(30,45,18,.16), 0 10px 30px rgba(30,45,18,.14);
  }
  .wallet-menu{ right:0; min-width:200px; }
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .hero{ min-height:auto; padding:36px 0 48px; }
  .hero-glass{ padding:32px 22px 28px; border-radius:24px; }
  .ba, .feat, .steps, .pipe, .sec-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .section{ padding:72px 0; }
  .hero-glass{ border-radius:26px; }
  .strip-inner{ gap:14px; }
  .foot-cols{ gap:32px; flex-wrap:wrap; }
  .docs{ grid-template-columns:1fr; gap:24px; padding:32px 20px 70px; }
  .docs-nav{ display:none; }
  .doc{ padding:28px 22px; border-radius:18px; }
  .app-head{ padding:22px 20px; }
  .vault-table .hide-sm{ display:none; }
}

/* ---- borrow: how close to liquidation ---- */
.health{ margin:16px 0 4px; }
.health-track{
  height:8px; border-radius:99px; background:rgba(32,42,20,.10); overflow:hidden;
}
/* Scaled rather than resized: animating width makes the browser lay the page
   out again on every frame. The track clips it into the pill shape, so the
   fill itself needs no radius of its own. */
.health-fill{
  width:100%; height:100%; background:var(--green-deep);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .3s ease, background .3s ease;
}
.health-fill.warn{ background:#c98a1e; }
.health-fill.danger{ background:#b4432f; }

/* A grid item's default min-width is its min-content width, so a panel refuses
   to shrink below its widest unbreakable child and pushes the page sideways on
   a phone. Same fix as the docs column. */
.app-cols > *{ min-width:0; }
.panel{ min-width:0; }
.notice-row{ flex-wrap:wrap; }

/* ============================================================
   unit — refinement pass (rose/plum palette). Hairline light
   borders give cards definition over the busier floral bg.
   ============================================================ */
:root{ --card-brd: rgba(32,42,20,.11); }
.hero-glass{ border:1px solid rgba(32,42,20,.10); box-shadow:var(--shadow-md); }
.card,.glass,.feat article,.step,.pipe-step,.stat,.sec-item,.ba-card,
.panel,.app-head,.float-card,.faq details,.notice,.notice-row,.stock,
.strip,.docs-nav,.doc,.wallet-chip{ border:1px solid var(--card-brd); box-shadow:var(--shadow-sm); }
.eyebrow,.ba-card.after .ba-tag{ color:var(--green-deep); }
/* footer wordmark: invert the dark logo to light on the dark-green footer */
.foot-brand .brand-mark{ filter:brightness(0) invert(1); opacity:.92; width:66px; height:26px; }