/* =============================================================
   Sorrel — design system.
   A sage-paper ground, a slow living background, and one frosted
   material that every surface is cut from. Fraunces for voice,
   Inter for everything you have to read quickly.
   ============================================================= */

/* ---------- tokens ---------- */
:root{
  /* ground */
  --paper:       #E8EDF7;
  --paper-lift:  #F3F6FC;

  /* ink */
  --ink:         #101728;
  --ink-soft:    #3C455D;
  --ink-mute:    #6E7890;
  --hair:        rgba(var(--ink-rgb), .10);
  --hair-soft:   rgba(var(--ink-rgb), .06);

  /* raw channels, so rgba() can be built from the palette too */
  --accent-rgb:  0,73,255;       /* --accent */
  --deep-rgb:    14,23,47;       /* footer ground */
  --paper-rgb:   232,237,247;    /* --paper */
  --ink-rgb:     16,23,40;       /* --ink */
  --tint-rgb:    220,228,249;    /* --accent-tint */
  --cool-rgb:    110,39,241;     /* --cool */
  --shadow-rgb:  20,29,52;       /* shadows are tinted by the palette too */

  /* accents — every one of these is a relative of the mark's own blue */
  --accent:      #0049FF;
  --accent-deep: #083ABA;
  --accent-tint: #DCE4F9;
  --cool:        #6E27F1;   /* the one contrasting note in the page */
  --footer-bg:   rgba(var(--deep-rgb), .88);
  --footer-fg:   #D6DEF2;

  /* aliases kept so older rules keep working */
  --moss:        var(--accent);
  --moss-deep:   var(--accent-deep);
  --moss-tint:   var(--accent-tint);
  --flower:      var(--cool);

  --rise:        #17794A;
  --fall:        #C4382B;
  --amber:       #9C6B14;

  /* the material: one frosted pane, three weights */
  --pane:        rgba(255,255,255,.62);
  --pane-lift:   rgba(255,255,255,.78);
  --pane-thin:   rgba(255,255,255,.34);
  --frost:       saturate(150%) blur(18px);
  --frost-light: saturate(135%) blur(10px);

  /* depth — used sparingly; the material does most of the work */
  --lift-1: 0 1px 2px rgba(var(--shadow-rgb),.05), 0 3px 12px rgba(var(--shadow-rgb),.06);
  --lift-2: 0 10px 34px rgba(var(--shadow-rgb),.10);
  --lift-3: 0 26px 66px rgba(var(--shadow-rgb),.16);

  /* geometry */
  --r:      24px;
  --r-sm:   16px;
  --r-xs:   11px;
  --shell:  1160px;
  --gutter: 24px;

  /* type */
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --voice: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* motion */
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:6px; }
::selection{ background:rgba(var(--accent-rgb), .20); }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.mono{ font-family:var(--mono); font-size:.92em; }
.rise{ color:var(--rise); font-weight:600; }
.fall{ color:var(--fall); font-weight:600; }
.sr{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-60px; z-index:200; background:#fff; padding:10px 18px; border-radius:999px; font-weight:600; transition:top .2s var(--ease); }
.skip:focus{ top:16px; }

/* ---------- the living ground ---------- */
/* A fixed canvas paints slow drifting light; the scrim keeps text legible
   over whatever the canvas happens to be doing. */
.ground{ position:fixed; inset:0; z-index:-3; background:var(--paper); overflow:hidden; }
.ground canvas{ width:100%; height:100%; display:block; }
.ground-scrim{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(58% 40% at 84% 2%,  rgba(var(--cool-rgb), .09), transparent 62%),
    radial-gradient(56% 46% at 4% 99%,  rgba(var(--accent-rgb), .13),  transparent 62%),
    linear-gradient(180deg, rgba(var(--paper-rgb), .16) 0%, rgba(var(--paper-rgb), .26) 52%, rgba(var(--paper-rgb), .34) 100%);
}
/* a whisper of grain so the flat greens do not band on wide screens */
.ground-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-brd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:600; font-size:15px; line-height:1;
  padding:12px 20px; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-brd);
  cursor:pointer; white-space:nowrap;
  transition:transform .16s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* A light that crosses the button once on hover. Slow enough to read as a
   material catching the light, not as a thing demanding attention. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 50%, transparent 68%);
  transform:translateX(-130%);
  transition:transform .62s var(--ease);
}
.btn:hover:not(:disabled)::after{ transform:translateX(130%); }
.btn-pane::after,.btn-quiet::after,.btn-tab::after{
  background:linear-gradient(115deg, transparent 32%, rgba(var(--accent-rgb),.14) 50%, transparent 68%);
}
/* The lift a solid button gets is tinted by the accent rather than grey, so it
   reads as the button's own colour pooling under it. */
.btn-solid:hover:not(:disabled){ box-shadow:0 10px 26px rgba(var(--accent-rgb),.34); }
.btn-solid:active:not(:disabled){ transform:translateY(0); box-shadow:0 4px 12px rgba(var(--accent-rgb),.28); }
.btn-pane:hover:not(:disabled){ box-shadow:0 8px 22px rgba(var(--shadow-rgb),.14); }
.btn-lg{ padding:16px 28px; font-size:16px; }
.btn-sm{ padding:9px 15px; font-size:13.5px; }
.btn-solid{ --btn-bg:var(--moss-deep); --btn-fg:#fff; }
.btn-solid:hover:not(:disabled){ --btn-bg:var(--moss); transform:translateY(-2px); }
.btn-pane{ --btn-bg:rgba(255,255,255,.78); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); }
.btn-pane:hover:not(:disabled){ --btn-bg:#fff; transform:translateY(-2px); }
.btn-quiet{ --btn-fg:var(--ink-soft); padding-inline:14px; }
.btn-quiet:hover:not(:disabled){ --btn-fg:var(--ink); --btn-bg:rgba(var(--ink-rgb), .06); }
.btn-tab{ --btn-bg:transparent; --btn-fg:var(--ink-mute); font-size:14px; padding:9px 16px; }
.btn-tab[aria-selected="true"]{ --btn-bg:#fff; --btn-fg:var(--ink); box-shadow:var(--lift-1); }
/* the trailing round badge on the header call to action */
.btn-badge{ padding:8px 8px 8px 18px; gap:10px; }
.btn-badge .badge{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px;
  background:rgba(255,255,255,.22); font-size:13px;
}
.btn-solid:hover .badge{ background:rgba(255,255,255,.3); }

/* ---------- the material ---------- */
.pane{
  background:var(--pane);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  border:0; border-radius:var(--r);
}
.pane-lift{ background:var(--pane-lift); }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--frost-light); -webkit-backdrop-filter:var(--frost-light);
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
}
.chip b{ color:var(--ink); font-weight:600; }
.chip .beacon{
  width:7px; height:7px; border-radius:50%; background:var(--moss);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb), .22);
}
.chip .beacon.live{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(var(--accent-rgb), .22); }
  50%    { box-shadow:0 0 0 6px rgba(var(--accent-rgb), .06); }
}
.chip.warn{ color:var(--amber); background:rgba(255,251,240,.86); }
.chip.warn .beacon{ background:var(--amber); box-shadow:0 0 0 3px rgba(169,118,28,.18); }

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* ---------- header ---------- */
.masthead{ position:sticky; top:0; z-index:60; padding:16px 0; }
.masthead-bar{
  display:flex; align-items:center; gap:26px;
  height:62px; padding:0 10px 0 20px; border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  box-shadow:0 2px 10px rgba(var(--shadow-rgb), .06);
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.masthead.stuck .masthead-bar{ background:rgba(255,255,255,.88); box-shadow:0 8px 26px rgba(var(--shadow-rgb), .12); }
.mark{ display:flex; align-items:center; gap:10px; font-weight:600; flex:none; }
.mark-glyph{ width:30px; height:30px; flex:none; border-radius:8px; }
.mark-word{ font-family:var(--voice); font-size:21px; letter-spacing:-.015em; }
.nav{ display:flex; gap:24px; margin-left:6px; }
.nav a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .15s; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
.masthead-end{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.icon-link{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px;
  color:var(--ink-soft); transition:color .15s, background .15s;
}
.icon-link:hover{ color:var(--ink); background:rgba(var(--ink-rgb), .06); }
.icon-link svg{ width:17px; height:17px; }
.burger{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  flex-direction:column; gap:5px; padding:9px;
}
.burger span{ width:22px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; padding:52px 0 60px; min-height:86vh; display:flex; flex-direction:column; justify-content:center; }
.hero-body{ position:relative; z-index:1; text-align:center; width:100%; }
.hero-pane{
  max-width:840px; margin-inline:auto; padding:56px 48px 46px; border-radius:34px;
  background:rgba(255,255,255,.42);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.hero h1{
  font-family:var(--voice); font-weight:400;
  font-size:clamp(50px, 7.8vw, 100px); line-height:.98; letter-spacing:-.032em;
  margin-top:26px;
}
.hero h1 em{ font-style:italic; color:var(--moss-deep); }
.hero-lede{ margin:22px auto 0; max-width:52ch; font-size:clamp(16.5px,2.1vw,19px); color:var(--ink-soft); }
.hero-acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.hero-notes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px; font-size:13.5px; font-weight:500; color:var(--ink-soft); }
.hero-notes span{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.52); }
.hero-notes svg{ width:16px; height:16px; color:var(--moss); flex:none; }

/* the copyable token address */
.addr-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  padding:8px 8px 8px 15px; border-radius:999px; border:0;
  background:rgba(255,255,255,.66); font-size:13.5px; cursor:pointer;
  transition:background .2s var(--ease);
}
.addr-chip:hover{ background:#fff; }
.addr-chip .k{ font-size:11px; font-weight:700; letter-spacing:.07em; color:var(--ink-mute); }
.addr-chip .v{ font-family:var(--mono); color:var(--ink); }
.addr-chip .copy{
  padding:4px 11px; border-radius:999px; border:1px solid var(--hair);
  background:rgba(255,255,255,.6); font-size:12.5px; font-weight:600; color:var(--ink-soft);
}

/* the vault card that floats under the fold */
.preview-card{
  position:relative; z-index:1; margin:40px auto 0; max-width:392px; padding:22px;
  text-align:left; border-radius:var(--r);
  background:rgba(255,255,255,.74);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  box-shadow:var(--lift-3);
}
.preview-top{ display:flex; align-items:center; gap:12px; }
.preview-glyph{
  width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--moss-tint); color:var(--moss-deep);
}
.preview-glyph svg{ width:22px; height:22px; }
.preview-name{ font-weight:600; font-size:15px; }
.preview-sub{ font-size:13px; color:var(--ink-mute); }
.preview-mid{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:16px 0; padding:14px 0;
  border-top:1px solid var(--hair-soft); border-bottom:1px solid var(--hair-soft);
}
.preview-figure{ font-family:var(--voice); font-size:27px; letter-spacing:-.02em; }
.preview-meta{ font-size:14px; color:var(--ink-soft); text-align:right; }
.preview-cta{
  width:100%; padding:13px; border:0; border-radius:13px; cursor:pointer;
  background:linear-gradient(180deg, var(--moss), var(--moss-deep)); color:#fff;
  font-weight:600; font-size:15px; transition:filter .2s var(--ease), transform .16s var(--ease);
}
.preview-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---------- marquee strip ---------- */
.strip{
  background:rgba(255,255,255,.34);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  overflow:hidden;
}
.strip-row{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; padding:22px var(--gutter); }
.strip-row li{ font-size:14.5px; color:var(--ink-soft); }
.strip-row b{ color:var(--ink); font-weight:600; }
.strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--moss); opacity:.5; }

/* ---------- band ---------- */
.band{ position:relative; padding:118px 0; background:rgba(var(--paper-rgb), .06); backdrop-filter:saturate(130%) blur(6px); -webkit-backdrop-filter:saturate(130%) blur(6px); }
.band-alt{ background:rgba(255,255,255,.14); backdrop-filter:saturate(140%) blur(11px); -webkit-backdrop-filter:saturate(140%) blur(11px); }
.band-head{ max-width:680px; margin-inline:auto; text-align:center; }
.band-head .tag{ color:var(--moss-deep); }
.band-head h2{
  font-family:var(--voice); font-weight:400; margin-top:16px;
  font-size:clamp(31px,4.6vw,50px); line-height:1.06; letter-spacing:-.026em;
}
.band-head h2 em{ font-style:italic; color:var(--moss-deep); }
.band-lede{ margin-top:18px; font-size:17px; color:var(--ink-soft); }
.band-foot{ margin-top:40px; text-align:center; font-size:13.5px; color:var(--ink-mute); }
.band-foot a{ color:var(--moss-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:20px; margin-top:60px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); gap:18px; }

/* ---------- before / after ---------- */
.ba{ padding:32px; border-radius:var(--r); background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); }
.ba.after{ background:rgba(var(--tint-rgb), .74); }
.ba.after .tag{ color:var(--moss-deep); }
.ba h3{ font-family:var(--voice); font-weight:400; font-size:26px; letter-spacing:-.015em; margin:12px 0 18px; }
.ba ul{ display:grid; gap:12px; }
.ba li{ display:flex; gap:11px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.ba svg{ width:17px; height:17px; flex:none; margin-top:3px; }
.ba .no{ color:var(--fall); opacity:.75; }
.ba .yes{ color:var(--moss); }

/* ---------- feature cards ---------- */
.feature{
  padding:32px 30px; border-radius:var(--r);
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.feature:hover{ transform:translateY(-3px); background:var(--pane-lift); box-shadow:0 14px 34px rgba(var(--shadow-rgb),.10); }
.feature-glyph{
  width:44px; height:44px; margin-bottom:18px; border-radius:13px; display:grid; place-items:center;
  background:var(--moss-tint); color:var(--moss-deep);
}
.feature-glyph svg{ width:21px; height:21px; }
.feature h3{ font-family:var(--voice); font-weight:400; font-size:23px; letter-spacing:-.015em; }
.feature p{ margin-top:10px; font-size:15px; color:var(--ink-soft); }
.feature ul{ margin-top:16px; display:grid; gap:9px; }
.feature li{ display:flex; gap:9px; font-size:14px; color:var(--ink-soft); }
.feature li::before{ content:""; flex:none; width:5px; height:5px; margin-top:8px; border-radius:50%; background:var(--moss); }

/* ---------- numbered flow ---------- */
.flow-step{
  padding:28px 24px; border-radius:var(--r);
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  transition:transform .22s var(--ease), background .22s var(--ease);
}
.flow-step:hover{ transform:translateY(-3px); background:var(--pane-lift); box-shadow:0 14px 34px rgba(var(--shadow-rgb),.10); }
.flow-n{ font-family:var(--voice); font-size:15px; font-weight:600; letter-spacing:.11em; color:var(--moss); }
.flow-step h3{ font-family:var(--voice); font-weight:400; font-size:22px; letter-spacing:-.015em; margin:9px 0 8px; }
.flow-step p{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- figures ---------- */
.figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.figure{
  padding:30px 18px; text-align:center; border-radius:var(--r);
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.figure b{ display:block; font-family:var(--voice); font-weight:400; font-size:34px; letter-spacing:-.025em; }
.figure b.soft{ font-family:var(--sans); font-size:18px; color:var(--ink-mute); }
.figure span{ display:block; margin-top:8px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- market tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px; margin-top:52px; }
.tile{
  display:flex; align-items:center; gap:11px; padding:15px 16px; border-radius:var(--r-sm);
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.tile:hover{ transform:translateY(-2px); background:var(--pane-lift); box-shadow:0 10px 24px rgba(var(--shadow-rgb),.10); }
.tile-glyph{
  width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:#fff; color:var(--moss-deep); font-size:11px; font-weight:700; letter-spacing:-.02em;
  box-shadow:var(--lift-1);
}
.tile-id{ min-width:0; }
.tile-t{ display:block; font-weight:600; font-size:14.5px; line-height:1.25; }
.tile-n{ display:block; font-size:12px; line-height:1.25; color:var(--ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile-px{ margin-left:auto; padding-left:10px; text-align:right; font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.tile-px .delta{ display:block; font-size:11.5px; }
.delta.rise{ color:var(--rise); } .delta.fall{ color:var(--fall); }

/* ---------- guarantees ---------- */
.guard{
  padding:30px 26px; border-radius:var(--r);
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.guard svg{ width:20px; height:20px; color:var(--moss-deep); }
.guard b{ display:block; margin:14px 0 7px; font-size:15.5px; }
.guard p{ font-size:14px; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:60px auto 0; display:grid; gap:12px; }
.faq details{
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.faq summary{
  display:flex; align-items:center; gap:12px; padding:19px 22px;
  font-weight:600; font-size:16px; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:11px; height:11px;
  border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.faq .answer{ padding:0 22px 20px; font-size:15px; color:var(--ink-soft); }
.faq .answer p + p{ margin-top:10px; }
.faq code{ font-family:var(--mono); font-size:.9em; background:rgba(var(--ink-rgb), .07); padding:2px 6px; border-radius:5px; }

/* ---------- notice ---------- */
.notice{
  display:flex; gap:14px; align-items:flex-start; max-width:820px; margin:0 auto;
  padding:22px 24px; border-radius:var(--r-sm);
  background:rgba(255,251,240,.72); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.notice svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--amber); }
.notice p{ font-size:14.5px; color:var(--ink-soft); }
.notice b{ color:var(--ink); }

/* ---------- footer ---------- */
.footer{
  margin-top:0; padding:72px 0 34px; color:var(--footer-fg);
  background:var(--footer-bg);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.footer a{ color:var(--footer-fg); opacity:.78; transition:opacity .15s; }
.footer a:hover{ opacity:1; }
.footer-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:36px; }
.footer .mark-word{ color:#fff; }
.footer-blurb{ margin-top:14px; max-width:34ch; font-size:14.5px; opacity:.72; }
.footer h4{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.55; }
.footer-links{ margin-top:14px; display:grid; gap:10px; font-size:14.5px; }
.footer-base{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px; opacity:.62;
}
.footer-base .socials{ display:flex; gap:6px; }
.footer-base .icon-link{ color:var(--footer-fg); }
.footer-base .icon-link:hover{ background:rgba(255,255,255,.1); }

/* ============================================================
   App surfaces — vault, borrow, autopilot
   ============================================================ */
.app{ padding:34px 0 90px; min-height:72vh; }
.app-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.app-head h1{ font-family:var(--voice); font-weight:400; font-size:clamp(30px,4vw,44px); letter-spacing:-.026em; }
.app-head p{ margin-top:8px; max-width:56ch; color:var(--ink-soft); font-size:15.5px; }
.app-cols{ display:grid; grid-template-columns:1.35fr .9fr; gap:20px; align-items:start; }
/* A grid child is min-width:auto by default, so a wide table would push the
   whole page sideways instead of scrolling inside its own panel. */
.app-cols > *{ min-width:0; }

.panel{
  min-width:0; border-radius:var(--r); overflow:hidden;
  background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.panel + .panel{ margin-top:20px; }
.panel-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 22px; border-bottom:1px solid var(--hair-soft);
}
.panel-head h2{ font-family:var(--voice); font-weight:400; font-size:20px; letter-spacing:-.015em; }
.panel-head .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.panel-body{ padding:22px; }
.panel-note{ padding:14px 22px; font-size:13px; color:var(--ink-mute); border-top:1px solid var(--hair-soft); }

.tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgba(var(--ink-rgb), .05); }

.field{ display:grid; gap:8px; }
.field + .field{ margin-top:16px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field .control{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:var(--r-xs); background:#fff; border:1px solid var(--hair);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field .control:focus-within{ border-color:var(--moss); box-shadow:0 0 0 3px rgba(var(--accent-rgb), .14); }
.field input, .field select{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:18px; font-family:var(--mono); letter-spacing:-.01em;
}
.field select{ font-family:var(--sans); font-size:15px; cursor:pointer; }
.field .unit{ font-size:14px; font-weight:600; color:var(--ink-mute); white-space:nowrap; }
.field .max{
  padding:5px 10px; border-radius:999px; border:1px solid var(--hair);
  background:rgba(var(--ink-rgb), .03); font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.field .max:hover{ background:rgba(var(--ink-rgb), .07); }
.hint{ font-size:13px; color:var(--ink-mute); }
.hint b{ color:var(--ink-soft); }

.kv{ display:grid; gap:11px; margin-top:18px; }
.kv div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; }
.kv dt, .kv .k{ color:var(--ink-mute); }
.kv dd, .kv .v{ font-family:var(--mono); font-size:13.5px; color:var(--ink); text-align:right; }

.quote{ margin-top:18px; padding:16px; border-radius:var(--r-xs); background:rgba(var(--tint-rgb), .6); }
.quote .kv{ margin-top:0; }

.status{ margin-top:16px; font-size:14px; border-radius:var(--r-xs); padding:12px 14px; display:none; }
.status.on{ display:block; }
.status.info{ background:rgba(255,255,255,.7); color:var(--ink-soft); }
.status.good{ background:rgba(var(--tint-rgb), .8); color:var(--moss-deep); }
.status.bad{ background:rgba(255,236,234,.86); color:var(--fall); }
.status.busy{ background:rgba(255,255,255,.7); color:var(--ink-soft); }
.status a{ text-decoration:underline; text-underline-offset:3px; }
.spinner{
  display:inline-block; width:13px; height:13px; margin-right:8px; vertical-align:-1px;
  border:2px solid rgba(var(--ink-rgb), .18); border-top-color:var(--moss); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* wallet */
.wallet{ position:relative; }
.wallet-chip{ display:inline-flex; align-items:center; gap:9px; }
.wallet-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:236px; padding:8px;
  border-radius:var(--r-sm); background:#fff; box-shadow:var(--lift-2);
}
.wallet-menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border:0; border-radius:10px; background:transparent; font-size:14px; font-weight:500; cursor:pointer; text-align:left;
}
.wallet-menu button:hover{ background:rgba(var(--ink-rgb), .05); }
.wallet-menu .menu-title{ padding:8px 12px 6px; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); }
.wallet-menu img{ width:20px; height:20px; border-radius:5px; }

/* vault table */
.table-scroll{ overflow-x:auto; }
table.vaults{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
table.vaults th{
  text-align:left; padding:12px 22px; font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mute); border-bottom:1px solid var(--hair-soft);
}
table.vaults td{ padding:15px 22px; border-bottom:1px solid var(--hair-soft); }
table.vaults tbody tr{ cursor:pointer; transition:background .15s; }
table.vaults tbody tr:hover{ background:rgba(255,255,255,.5); }
table.vaults tbody tr[aria-selected="true"]{ background:rgba(var(--tint-rgb), .66); }
table.vaults tbody tr:last-child td{ border-bottom:0; }
.vault-id{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
/* The symbol is an identifier — breaking it across three lines to make room
   for a badge makes the row unreadable. */
.vault-id b{ font-weight:600; white-space:nowrap; }
.vault-id small{ display:block; color:var(--ink-mute); font-weight:400; }
.num{ font-family:var(--mono); font-size:13.5px; white-space:nowrap; }
.badge-soft{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--moss-tint); color:var(--moss-deep);
}
.badge-soft.muted{ background:rgba(var(--ink-rgb), .07); color:var(--ink-mute); }
.empty{ padding:44px 22px; text-align:center; color:var(--ink-mute); font-size:14.5px; }

/* health meter (borrow) */
.meter{ margin-top:6px; height:8px; border-radius:999px; background:rgba(var(--ink-rgb), .09); overflow:hidden; }
.meter i{ display:block; height:100%; border-radius:999px; background:var(--moss); transition:width .35s var(--ease), background .35s var(--ease); }
.meter i.warn{ background:var(--amber); }
.meter i.danger{ background:var(--fall); }
.meter-legend{ display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:var(--ink-mute); }

/* allocation editor (autopilot) */
.alloc{ display:grid; gap:14px; }
.alloc-row{ display:grid; grid-template-columns:1fr 150px 84px 34px; gap:12px; align-items:center; }
.alloc-row .name{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; }
.alloc-row input[type="range"]{ width:100%; accent-color:var(--moss); }
.alloc-row .pct{ font-family:var(--mono); font-size:13.5px; text-align:right; }
.alloc-row .drop{
  width:30px; height:30px; border:0; border-radius:999px; background:rgba(var(--ink-rgb), .05);
  color:var(--ink-mute); cursor:pointer; font-size:16px; line-height:1;
}
.alloc-row .drop:hover{ background:rgba(190,58,44,.12); color:var(--fall); }
.alloc-total{ display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid var(--hair-soft); font-size:14px; }
.alloc-total b{ font-family:var(--mono); }
.alloc-total.over b{ color:var(--fall); }

/* strategy picker */
.strategies{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.strategy{
  padding:18px; border-radius:var(--r-sm); cursor:pointer; text-align:left;
  background:rgba(255,255,255,.6); border:1px solid transparent;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.strategy:hover{ transform:translateY(-2px); background:rgba(255,255,255,.82); }
.strategy[aria-pressed="true"]{ border-color:var(--moss); background:rgba(var(--tint-rgb), .8); }
.strategy b{ display:block; font-family:var(--voice); font-weight:400; font-size:19px; }
.strategy p{ margin-top:6px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- docs ---------- */
.docs{ display:grid; grid-template-columns:232px 1fr; gap:32px; padding:34px 0 90px; align-items:start; }
.docs > *{ min-width:0; }
.docs-nav{ position:sticky; top:96px; display:grid; gap:4px; padding:16px; border-radius:var(--r); background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); }
.docs-nav a{ padding:8px 12px; border-radius:9px; font-size:14px; color:var(--ink-soft); transition:background .15s, color .15s; }
.docs-nav a:hover{ background:rgba(var(--ink-rgb), .05); color:var(--ink); }
.docs-nav a.here{ background:var(--moss-tint); color:var(--moss-deep); font-weight:600; }
.docs-nav .group{ margin-top:10px; padding:6px 12px 2px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.docs-nav .group:first-child{ margin-top:0; }
.docs-body{ min-width:0; padding:34px 38px; border-radius:var(--r); background:var(--pane); backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); }
.docs-body h1{ font-family:var(--voice); font-weight:400; font-size:40px; letter-spacing:-.028em; }
.docs-body h2{ font-family:var(--voice); font-weight:400; font-size:27px; letter-spacing:-.02em; margin-top:44px; scroll-margin-top:100px; }
.docs-body h3{ font-size:17px; font-weight:600; margin-top:26px; }
.docs-body p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; }
.docs-body ul{ margin-top:12px; display:grid; gap:9px; }
.docs-body ul li{ display:flex; gap:10px; font-size:15px; color:var(--ink-soft); }
.docs-body ul li::before{ content:""; flex:none; width:5px; height:5px; margin-top:9px; border-radius:50%; background:var(--moss); }
.docs-body ol{ margin-top:12px; padding-left:20px; display:grid; gap:9px; }
.docs-body ol li{ font-size:15px; color:var(--ink-soft); }
.docs-body a{ color:var(--moss-deep); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.docs-body code{ font-family:var(--mono); font-size:.9em; background:rgba(var(--ink-rgb), .07); padding:2px 6px; border-radius:5px; }
.docs-body pre{
  margin-top:14px; padding:16px 18px; border-radius:var(--r-xs); overflow-x:auto;
  background:rgba(var(--deep-rgb), .92); color:var(--footer-fg); font-family:var(--mono); font-size:13px; line-height:1.65;
}
.docs-body pre code{ background:none; padding:0; font-size:inherit; color:inherit; }
.docs-body .table-scroll{ overflow-x:auto; }
.docs-body table{ width:100%; margin-top:14px; border-collapse:collapse; font-size:14.5px; }
.docs-body th{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--hair); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.docs-body td{ padding:10px 12px; border-bottom:1px solid var(--hair-soft); color:var(--ink-soft); }
.docs-body td:first-child{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.docs-lead{ margin-top:14px; font-size:18px !important; color:var(--ink-soft); }

/* ---------- reveal on scroll ---------- */
/* Hidden only when JavaScript is present to reveal it again. Without JS the
   `js` class is never added, so every section renders plainly instead of
   staying invisible forever. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.seen{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.07s; }
.reveal-d2{ transition-delay:.14s; }
.reveal-d3{ transition-delay:.21s; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid-3,.grid-4,.figures,.strategies{ grid-template-columns:repeat(2,1fr); }
  .app-cols{ grid-template-columns:1fr; }
  .docs{ grid-template-columns:1fr; }
  .docs-nav{ position:static; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:760px){
  :root{ --gutter:18px; }
  .nav{
    display:none; position:absolute; top:72px; left:var(--gutter); right:var(--gutter);
    flex-direction:column; gap:2px; padding:12px; border-radius:var(--r-sm);
    background:rgba(255,255,255,.96); box-shadow:var(--lift-2);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:11px 12px; border-radius:10px; font-size:15.5px; }
  .nav a:hover{ background:rgba(var(--ink-rgb), .05); }
  .burger{ display:flex; }
  .masthead-end{ margin-left:0; }
  .masthead-bar{ padding-right:8px; gap:10px; }
  .masthead-end .icon-link{ display:none; }
  .hero{ min-height:auto; padding:32px 0 44px; }
  .hero-pane{ padding:36px 22px 32px; border-radius:26px; }
  .band{ padding:78px 0; }
  .grid,.grid-2,.grid-3,.grid-4,.figures,.strategies{ grid-template-columns:1fr; margin-top:40px; }
  .tiles{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-top:34px; }
  .docs-body{ padding:26px 20px; }
  .docs-body h1{ font-size:31px; }
  .footer-top{ grid-template-columns:1fr; }
  .alloc-row{ grid-template-columns:1fr 74px 32px; }
  .alloc-row input[type="range"]{ grid-column:1 / -1; order:3; }
  .app-head{ align-items:flex-start; }
}

/* ---------- motion & contrast preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn::after{ display:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}
@media print{
  .ground,.ground-scrim,.ground-grain,.masthead,.footer{ display:none !important; }
  body{ background:#fff; }
}