/* IdleOS. Ink on frosted panes over a lavender field. See docs/DESIGN.md. */
:root{
  --field-hi:#F8F8FF; --field-mid:#DDDCFD; --field-lo:#C5C4FD;
  --ink:#1C1A36; --ink-2:#45436A; --ink-3:#5F5D84;
  --line:rgba(28,26,54,.14);
  --pane:rgba(255,255,255,.62);
  --font:"Manrope","Avenir Next","Segoe UI",Arial,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  --fy:38%;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* a display rule must never beat the hidden attribute */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  font:400 18px/1.55 var(--font); color:var(--ink);
  background:var(--field-hi);
  font-variant-numeric:tabular-nums;
}
/* The field. Its brightest lavender drifts with scroll (app.js sets --fy). */
.field{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 44vmax at 72% var(--fy), var(--field-lo) 0%, rgba(197,196,253,.55) 38%, rgba(221,220,253,0) 72%),
    radial-gradient(50vmax 36vmax at 8% 96%, #F4EEFD 0%, rgba(244,238,253,0) 70%),
    linear-gradient(180deg, var(--field-hi) 0%, var(--field-mid) 58%, #ECEAFD 100%);
}
.field__motion{position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0); transition:opacity 1.2s ease,transform .35s ease-out}
.field.is-live .field__motion{opacity:1}
.field__motion canvas{display:block; width:100%; height:100%}
.field__tint{position:absolute; inset:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
img,svg{max-width:100%}

/* ── header ───────────────────────────────────────────────────── */
.head{
  display:flex; align-items:center; gap:28px;
  padding:22px var(--gutter);
  position:relative; z-index:2;
  background:#f8f7ff; border-bottom:1px solid var(--line);
}
.lockup{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.mark{
  width:30px; height:30px; flex:none; background:var(--ink);
  -webkit-mask:url(assets/brand/idleos-mark-alpha.png) center/contain no-repeat;
          mask:url(assets/brand/idleos-mark-alpha.png) center/contain no-repeat;
}
.lockup__word{font-weight:600; font-size:21px; letter-spacing:-.02em}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{font-size:15px; font-weight:500; text-decoration:none; color:var(--ink-2); padding:12px 2px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px}

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border-radius:999px;
  font:600 15px/1 var(--font); letter-spacing:-.005em;
  color:var(--ink); background:transparent; border:1.5px solid var(--ink);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .2s, color .2s;
}
.pill:hover{background:var(--ink); color:#fff}
.pill.is-connected{border-color:var(--line); background:rgba(255,255,255,.5)}
.pill.is-connected:hover{background:#fff; color:var(--ink)}
.pill.is-warn{border-style:dashed}
.pill--solid{background:var(--ink); color:#fff}
.pill--solid:hover{background:#312E5C}

/* ── type ─────────────────────────────────────────────────────── */
h1,h2,h3{font-weight:500; letter-spacing:-.035em; margin:0}
.display{font-size:clamp(48px,7vw,116px); line-height:.98}
.display--page{font-size:clamp(44px,6.4vw,96px); line-height:1}
.h2{font-size:clamp(34px,4.6vw,64px); line-height:1.02}
.lede{font-size:clamp(18px,1.5vw,21px); color:var(--ink-2); max-width:34em; margin:28px 0 0}
.muted{color:var(--ink-3)}
.small{font-size:14px; line-height:1.5}

/* ── panes ────────────────────────────────────────────────────── */
.pane{
  background:#fff;
  border:1px solid rgba(28,26,54,.1);
  box-shadow:0 24px 60px -30px rgba(28,26,54,.24);
  border-radius:28px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pane{background:rgba(255,255,255,.84)}
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{
  min-height:calc(100vh - 92px);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,80px); align-items:center;
  padding:24px var(--gutter) 64px;
}
.hero .display{max-width:10.5em}
.hero--story{position:relative; min-height:calc(100svh - 92px); isolation:isolate; overflow:hidden}
.hero__copy{position:relative; z-index:1; max-width:840px; animation:rise-in .9s both}
.hero__eyebrow{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.17em; margin:0 0 24px}
.hero--story .display{max-width:9em; font-size:clamp(64px,8.5vw,138px); letter-spacing:-.065em}
.hero--story .lede{max-width:29em}
.hero__ca{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; max-width:100%; margin-top:28px; font-size:14px; line-height:1.5}
.hero__ca>span:first-child{font-weight:600}
.hero__ca button{max-width:100%; padding:0 0 2px; border:0; border-bottom:1px solid currentColor; background:none; color:var(--ink); font:500 14px/1.5 var(--font); text-align:left; overflow-wrap:anywhere; cursor:pointer}
.hero__ca button:hover,.hero__ca button:focus-visible{border-bottom-width:2px}
.hero__ca button:disabled{color:var(--ink-2); border-bottom-color:transparent; cursor:default}
.hero__ca-feedback{color:var(--ink-2); font-size:13px}
.hero__explore{display:inline-flex; align-items:center; margin-top:42px; padding:0 0 12px; border-bottom:1px solid var(--ink); font-size:16px; font-weight:600; text-decoration:none; transition:border-color .3s ease,color .3s ease}
.hero__explore:hover{color:#6141a6; border-color:#6141a6}
.hero__art{position:relative; justify-self:center; width:min(38vw,530px); aspect-ratio:1; transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero__ring{position:absolute; border:1px solid rgba(36,28,91,.28); border-radius:50%; transform:rotateX(64deg) rotate(-25deg)}
.hero__ring--outer{inset:0; box-shadow:0 0 42px rgba(126,97,206,.2), inset 0 0 52px rgba(126,97,206,.16); animation:orbit 15s linear infinite}
.hero__ring--inner{inset:14%; border-width:2px; animation:orbit 12s linear infinite reverse}
.hero__core{position:absolute; inset:32%; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff 0%,#d8c7ff 35%,#8e6ddb 90%); box-shadow:0 32px 110px rgba(95,55,185,.34), inset -15px -18px 35px rgba(71,43,149,.22); animation:float 6s ease-in-out infinite}
.hero__core .mark{width:42%; height:42%; background:#35245f}
.hero__satellite{position:absolute; width:14px; height:14px; border-radius:50%; background:#57428f; box-shadow:0 0 0 9px rgba(120,89,190,.15),0 0 30px 12px rgba(120,89,190,.3)}
.hero__satellite--a{left:10%; top:40%; animation:float 5s ease-in-out infinite}
.hero__satellite--b{right:7%; top:31%; animation:float 7s ease-in-out -2s infinite}
.hero__satellite--c{right:19%; bottom:10%; animation:float 6s ease-in-out -3s infinite}
.hero__scroll{position:absolute; bottom:20px; left:var(--gutter); font-size:12px; text-transform:uppercase; letter-spacing:.17em; color:var(--ink-3)}
@keyframes orbit{to{transform:rotateX(64deg) rotate(335deg)}}
@keyframes float{50%{translate:0 -18px}}
@keyframes rise-in{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

/* The route is a scroll driven scene. Canvas draws the active path between DOM nodes. */
.route-scene{height:215vh; position:relative; border-top:1px solid var(--line); background:#f1edfa}
.route-scene__sticky{height:100svh; min-height:680px; position:sticky; top:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(28px,4vw,56px) var(--gutter); overflow:hidden; isolation:isolate}
.route-scene__canvas{position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none}
.route-scene__intro{display:flex; align-items:end; justify-content:space-between; gap:32px}
.route-scene__intro .h2{max-width:10em}
.route-scene__intro p{max-width:25em; color:var(--ink-2); margin:0 0 6px; font-size:17px}
.route-flow{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,9vw,150px); align-items:center; width:min(100%,1100px); margin:20px auto}
.route-flow__node{aspect-ratio:1; max-width:210px; width:100%; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:18px; background:radial-gradient(circle at 32% 24%,#fff,#e8defd 55%,#c1a9ee); border:1px solid rgba(255,255,255,.8); box-shadow:0 20px 60px rgba(60,40,120,.15),inset 0 -18px 34px rgba(95,71,165,.16); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.route-flow__node:nth-child(2){max-width:170px; justify-self:center}
.route-flow__node:nth-child(3){justify-self:end}
.route-flow__node.is-pulsing{transform:scale(1.07); box-shadow:0 25px 80px rgba(85,57,169,.25)}
.route-flow__node span{font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.12em}
.route-flow__node strong{font-size:clamp(17px,2vw,26px); line-height:1.15; font-weight:600; margin-top:10px}
.route-options{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); position:relative; z-index:1}
.route-option{min-height:120px; padding:22px 16px 20px 0; border:0; border-right:1px solid var(--line); background:transparent; text-align:left; color:var(--ink-2); font:inherit; cursor:pointer; transition:color .25s,background-color .25s,transform .3s}
.route-option:not(:first-child){padding-left:20px}
.route-option:last-child{border-right:0}
.route-option span,.route-option small{display:block}
.route-option span{font-size:clamp(17px,1.7vw,23px); font-weight:600; letter-spacing:-.025em; line-height:1.15}
.route-option small{font-size:13px; margin-top:12px; color:var(--ink-3)}
.route-option.is-active,.route-option:hover,.route-option:focus-visible{color:var(--ink); background:rgba(255,255,255,.3)}
.route-option.is-active{box-shadow:inset 0 3px 0 #584095}
.route-option:hover{transform:translateY(-4px)}
.route-scene__note{min-height:1.5em; margin:0; font-size:15px; color:var(--ink-2)}
.demo-section{padding:112px var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,8vw,120px); align-items:start; border-top:1px solid var(--line); background:#f8f7ff}
.demo-section__intro{position:sticky; top:100px}
.demo-section__intro p{font-size:clamp(18px,1.7vw,23px); line-height:1.45; color:var(--ink-2); max-width:25em}
.demo-section .dial{max-width:660px}
.next-section{padding:92px var(--gutter) 110px; background:var(--ink); color:#f5f2ff; display:grid; grid-template-columns:1fr 1fr; gap:30px 70px}
.next-section__index{grid-column:1/-1; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c2b8df}
.next-section .h2{max-width:10em}
.next-section__links{display:grid; align-content:start}
.next-section__links a{display:block; padding:16px 0; border-top:1px solid rgba(255,255,255,.3); color:inherit; font-size:clamp(19px,2vw,25px); text-decoration:none; transition:padding-left .25s,color .25s}
.next-section__links a:hover{padding-left:10px; color:#d8c1ff}
.next-section__links a:last-child{border-bottom:1px solid rgba(255,255,255,.3)}

/* ── the collateral dial ──────────────────────────────────────── */
.dial{padding:30px 30px 26px; max-width:520px; justify-self:end; width:100%}
.dial__top{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.dial__pos{font-size:15px; color:var(--ink-2)}
.dial__pos b{color:var(--ink); font-weight:600}
.dial__price{font-size:15px; color:var(--ink-2); text-align:right}
.dial__price b{display:block; color:var(--ink); font-size:24px; font-weight:600; letter-spacing:-.02em}
.dial__ltv{margin:26px 0 6px; display:flex; justify-content:space-between; align-items:baseline}
.dial__ltv label{font-size:15px; font-weight:600}
.dial__ltv output{font-size:15px; font-weight:600}
.range{width:100%; height:44px; margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px; border-radius:6px; background:linear-gradient(90deg,var(--ink) var(--p,40%),rgba(28,26,54,.14) var(--p,40%))}
.range::-moz-range-track{height:6px; border-radius:6px; background:rgba(28,26,54,.14)}
.range::-moz-range-progress{height:6px; border-radius:6px; background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-shadow:0 4px 12px rgba(28,26,54,.25)}
.range::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid var(--ink)}
.figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0 22px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fig dt{font-size:13px; color:var(--ink-2); line-height:1.35}
.fig dd{margin:6px 0 0; font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.track{position:relative; height:54px; margin:4px 0 6px}
.track__base{position:absolute; left:0; right:0; top:20px; height:1px; background:var(--line)}
.track__band{position:absolute; top:14px; height:13px; background:rgba(28,26,54,.08); border-radius:3px}
.track__m{position:absolute; top:8px; width:0; height:25px; border-left:1.5px solid var(--ink-2)}
.track__m--liq{border-left:3px solid var(--ink)}
.track__m span{position:absolute; top:30px; transform:translateX(-50%); white-space:nowrap; font-size:12.5px; color:var(--ink-2)}
.track__m--liq span{color:var(--ink); font-weight:600}
.dial__note{font-size:13px; color:var(--ink-2); margin:10px 0 0}
.dial.is-anim .track__m--liq,.dial.is-anim .track__band{transition:left .9s cubic-bezier(.2,.7,.2,1), width .9s cubic-bezier(.2,.7,.2,1)}

/* ── steps ────────────────────────────────────────────────────── */
.steps{padding:96px var(--gutter)}
.steps ol{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
.steps li{padding:22px 24px 0 0; border-top:1.5px solid var(--ink); font-size:clamp(19px,1.6vw,23px); line-height:1.3; font-weight:500; letter-spacing:-.015em}
.steps li span{display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:10px; letter-spacing:0}
.scope{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px 80px; align-items:start; padding:64px var(--gutter); border-top:1px solid var(--line)}
.scope .h2{max-width:9em}
.scope p{max-width:31em; margin:4px 0 0; font-size:clamp(18px,1.7vw,23px); line-height:1.4; color:var(--ink-2)}

/* ── risk strip: the one dark surface ─────────────────────────── */
.risk{background:var(--ink); color:#fff; padding:48px var(--gutter); display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.risk p{margin:0; max-width:46em; font-size:clamp(18px,1.6vw,22px); line-height:1.45; color:#E9E8F7}
.risk .pill{color:#fff; border-color:#fff}
.risk .pill:hover{background:#fff; color:var(--ink)}

/* ── inner pages ──────────────────────────────────────────────── */
.page{padding:48px var(--gutter) 96px; background:#f8f7ff}
.page .lede{margin-bottom:40px}
.risklist{margin:56px 0 0; padding:0; list-style:none; max-width:880px}
.risklist li{padding:28px 0; border-top:1px solid var(--line)}
.risklist h2{font-size:clamp(24px,2.4vw,32px); letter-spacing:-.025em; line-height:1.15}
.risklist p{margin:10px 0 0; color:var(--ink-2); max-width:40em}
.detail-page__eyebrow{font-size:13px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; margin:0 0 22px}
.detail-page,.docs-page{max-width:none}
.detail-page>.lede,.docs-page>.lede{max-width:38em}
.detail-route{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,70px); margin:90px 0 130px; padding-top:26px; border-top:1px solid var(--ink)}
.detail-route>div{position:relative; min-height:300px; padding-top:20px; animation:rise-in .7s both}
.detail-route>div:nth-child(2){animation-delay:.15s}
.detail-route>div:nth-child(3){animation-delay:.3s}
.detail-route>div::before{content:""; display:block; width:54px; height:54px; margin-bottom:30px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#c8aef7 65%,#8065c6); box-shadow:0 10px 28px rgba(83,54,160,.2); transition:transform .35s,box-shadow .35s}
.detail-route>div:hover::before{transform:translateY(-8px) scale(1.1); box-shadow:0 20px 40px rgba(83,54,160,.3)}
.detail-route span,.docs-block>span{font-size:13px; text-transform:uppercase; letter-spacing:.15em; color:var(--ink-3)}
.detail-route h2,.docs-block h2{font-size:clamp(24px,2.4vw,36px); line-height:1.15; letter-spacing:-.035em; margin:16px 0}
.detail-route p,.docs-block p{color:var(--ink-2); max-width:34em; margin:0}
.detail-split{display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:90px 0; border-top:1px solid var(--line)}
.detail-split p{margin:0 0 28px; color:var(--ink-2); font-size:clamp(18px,1.6vw,23px); line-height:1.45; max-width:33em}
.detail-link{display:inline-flex; border-bottom:1px solid currentColor; padding:0 0 10px; text-decoration:none; font-weight:600; transition:color .25s}
.detail-link:hover{color:#6141a6}
.detail-split--dark .detail-link:hover{color:#d8c1ff}
.detail-split--dark{background:var(--ink); color:#f5f2ff; margin:0 calc(-1 * var(--gutter)) -96px; padding:80px var(--gutter)}
.detail-split--dark p{color:#ded8ed}
.docs-toc{display:flex; flex-wrap:wrap; gap:12px 32px; padding:25px 0; margin:60px 0 20px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
.docs-toc a{text-decoration:none; font-size:15px; font-weight:600}
.docs-toc a:hover{text-decoration:underline; text-underline-offset:5px}
.docs-block{display:grid; grid-template-columns:minmax(140px,.35fr) minmax(0,1fr); gap:28px; padding:48px 0 62px; border-bottom:1px solid var(--line); scroll-margin-top:20px}
.docs-block h2{margin:0 0 20px}
.docs-page>.detail-link{margin:50px 0 0}

/* ── app page ─────────────────────────────────────────────────── */
.app{padding:32px}
.app__bar{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:flex-end; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--line)}
.stat dt{font-size:14px; color:var(--ink-2)}
.stat dd{margin:4px 0 0; font-size:clamp(28px,3.4vw,44px); font-weight:600; letter-spacing:-.03em; line-height:1}
.stat--sub dd{font-size:clamp(20px,2vw,26px)}
.select{font:600 15px var(--font); color:var(--ink); background:rgba(255,255,255,.7); border:1.5px solid var(--ink); border-radius:999px; min-height:44px; padding:0 14px}
.state{padding:36px 0 8px; max-width:38em}
.state p{margin:0 0 20px}
.tablewrap{overflow-x:auto; margin-top:8px}
.assets{width:100%; border-collapse:collapse; min-width:640px}
.assets th{font-size:13px; font-weight:600; color:var(--ink-2); text-align:right; padding:18px 12px 10px; border-bottom:1px solid var(--line)}
.assets th:first-child,.assets td:first-child{text-align:left; padding-left:0}
.assets td{padding:14px 12px; text-align:right; border-bottom:1px solid var(--line); font-size:16px}
.assets td:first-child b{display:block; font-weight:600}
.assets td:first-child span{font-size:13px; color:var(--ink-3)}
.assets tr.is-new td{animation:rowin .45s ease-out both}
@keyframes rowin{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.readat{margin:18px 0 0; font-size:13px; color:var(--ink-3)}
.borrow{margin-top:36px; padding-top:30px; border-top:1px solid var(--line)}
.borrow__intro{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.borrow h2{font-size:clamp(27px,3vw,38px); line-height:1.1}
.borrow__intro p{margin:9px 0 0; color:var(--ink-2); font-size:16px}
.borrow__controls{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:18px; align-items:end; margin:28px 0 22px}
.borrow__controls label{display:grid; gap:8px; font-size:14px; color:var(--ink-2)}
.borrow__input{width:100%; min-width:0; height:50px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:500 16px var(--font)}
.borrow__input:focus{border-color:var(--ink)}
.borrow__input:disabled{background:rgba(255,255,255,.45); color:var(--ink-3)}
.borrow__limit{max-width:210px; padding-bottom:6px; font-size:14px; line-height:1.35; color:var(--ink-2)}
.borrow__error{margin:-10px 0 16px; font-size:14px; color:var(--ink)}
.borrow .pill:disabled{opacity:.45; cursor:not-allowed}
.borrow__result{margin-top:26px; padding-top:24px; border-top:1px solid var(--line)}
.borrow__result h3{font-size:24px}
.borrow__result dl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0}
.borrow__result dt{font-size:13px; color:var(--ink-2)}
.borrow__result dd{margin:6px 0 0; font-size:clamp(17px,1.8vw,23px); font-weight:600; overflow-wrap:anywhere}
.borrow__result p{max-width:55em; margin:0; font-size:14px; color:var(--ink-2)}
.borrow__result #borrow-source{margin-bottom:10px}
.skeleton{height:14px; border-radius:7px; background:linear-gradient(90deg,rgba(28,26,54,.06),rgba(28,26,54,.13),rgba(28,26,54,.06)); background-size:200% 100%; animation:sk 1.2s linear infinite; margin:14px 0}
@keyframes sk{to{background-position:-200% 0}}

/* ── footer ───────────────────────────────────────────────────── */
.foot{min-height:140px; padding:40px var(--gutter); display:flex; gap:32px; align-items:center; justify-content:space-between; background:#F8F7FF}
.foot .mark{width:42px; height:42px}
.foot .lockup__word{font-size:32px}
.ca{display:inline-flex; gap:10px; align-items:center; font-size:14px}
.ca code{font:inherit; font-weight:600}

/* ── wallet picker (markup from wallet-ui.js) ─────────────────── */
.wx{width:min(440px,calc(100vw - 32px)); padding:24px; border:1px solid rgba(255,255,255,.8); border-radius:24px; color:var(--ink); background:rgba(250,250,255,.94); box-shadow:0 30px 80px -30px rgba(28,26,54,.5)}
.wx::backdrop{background:rgba(28,26,54,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.wx__head{display:flex; justify-content:space-between; align-items:center}
.wx__title{font-size:22px; font-weight:600; letter-spacing:-.02em}
.wx__close{width:44px; height:44px; border:0; background:none; color:var(--ink); cursor:pointer; border-radius:50%}
.wx__close:hover{background:rgba(28,26,54,.07)}
.wx__sub{margin:6px 0 18px; font-size:14px; color:var(--ink-2)}
.wx__list{display:grid; gap:8px}
.wx__opt{display:flex; gap:14px; align-items:center; width:100%; min-height:56px; padding:10px 14px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.wx__opt:hover{border-color:var(--ink)}
.wx__icon{width:28px; height:28px; border-radius:8px; flex:none}
.wx__icon--blank{background:var(--field-mid)}
.wx__opt-text{display:flex; flex-direction:column}
.wx__opt-name{font-weight:600; font-size:16px}
.wx__opt-sub{font-size:13px; color:var(--ink-2)}
.wx__empty{padding:16px; border:1px dashed var(--line); border-radius:16px; font-size:15px}
.wx__empty p{margin:0 0 10px}
.wx__link{display:inline-block; margin:4px 16px 4px 0; font-weight:600; font-size:15px; padding:6px 0}
.wx__who{margin:0 0 6px; display:flex; flex-direction:column}
.wx__addr{font-size:22px; font-weight:600; letter-spacing:-.01em}
.wx__via{font-size:14px; color:var(--ink-2)}
.wx__note{min-height:1.4em; margin:14px 0 0; font-size:14px; color:var(--ink-2)}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; min-height:0; padding-top:12px}
  .dial{justify-self:stretch; max-width:none}
  .steps ol{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px}
  .borrow__controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .borrow__limit{grid-column:1/-1; max-width:none; padding:0}
  .borrow__result dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope{grid-template-columns:1fr}
  .hero__art{width:min(58vw,400px); position:absolute; right:-10%; bottom:0; opacity:.55; z-index:0}
  .hero__copy{z-index:1}
  .demo-section{grid-template-columns:1fr; padding:80px var(--gutter)}
  .demo-section__intro{position:static}
}
@media (max-width:640px){
  .head{gap:12px; flex-wrap:wrap}
  .nav{gap:16px; order:3; width:100%; margin-left:0}
  .head .pill{margin-left:auto}
  .steps{padding:64px var(--gutter)}
  .steps ol{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr; gap:10px}
  .fig{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
  .fig dd{margin:0}
  .app{padding:20px}
  .borrow__intro{display:block}
  .borrow__controls{grid-template-columns:1fr}
  .borrow__limit{grid-column:auto}
  .dial{padding:22px 20px}
  .foot{min-height:110px; padding:32px var(--gutter)}
  .hero--story{min-height:700px; padding-bottom:100px; align-items:start; padding-top:68px}
  .hero--story .display{font-size:clamp(56px,14vw,76px)}
  .hero__art{width:320px; right:-125px; bottom:30px; opacity:.42}
  .hero__scroll{bottom:30px}
  .route-scene{height:auto}
  .route-scene__sticky{height:auto; min-height:0; position:relative; gap:34px; padding:70px var(--gutter)}
  .route-scene__intro{display:block}
  .route-scene__intro p{margin:20px 0 0}
  .route-flow{gap:8px; margin:0}
  .route-flow__node,.route-flow__node:nth-child(2){max-width:none; aspect-ratio:1; padding:7px}
  .route-flow__node span{font-size:9px}
  .route-flow__node strong{font-size:12px; margin-top:4px}
  .route-options{grid-template-columns:repeat(2,1fr)}
  .route-option{min-height:88px; padding:16px 8px!important; border-bottom:1px solid var(--line)}
  .route-option:nth-child(odd){padding-left:0!important}
  .route-option:nth-child(even){border-right:0}
  .route-option span{font-size:18px}
  .route-option small{margin-top:5px}
  .next-section{grid-template-columns:1fr; padding:70px var(--gutter)}
  .nav{overflow-x:auto; white-space:nowrap}
  .nav a{font-size:13px}
  .detail-route,.detail-split,.docs-block{grid-template-columns:1fr}
  .detail-route{margin:50px 0 80px; gap:15px}
  .detail-route>div{min-height:0; padding:15px 0 30px; border-bottom:1px solid var(--line)}
  .detail-route>div::before{margin-bottom:20px}
  .detail-split{padding:60px 0}
  .detail-split--dark{padding:70px var(--gutter)}
  .docs-block{gap:20px; padding:35px 0 45px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
#app-notice:empty{display:none}