/* Prism · a light "sky" design system.
   One stylesheet, no framework, no build. Tokens first, then components in
   roughly the order they appear down the page.

   Palette is iris. Violet is the far end of a refracted spectrum, which suits
   the name, and it stays clear of the semantic ramp (emerald good, amber warn,
   red bad) that a warm or green accent would have collided with. */

:root{
  /* sky gradient stops, top of page to horizon */
  --sky-top:#c3aef2; --sky-mid:#d5c6f7; --sky-low:#ebe3fb; --sky-fade:#fdfcff;

  /* ink, as opacity ramps off one near-black so text never muddies the sky */
  --ink:#0a0a0a; --ink-2:#0a0a0ad9; --ink-3:#0a0a0a8c; --ink-4:#0a0a0a59; --ink-5:#0a0a0a26;
  --line:#0a0a0a14; --line-2:#0a0a0a1f;

  --white:#fff; --paper:#fafafa; --paper-2:#f5f5f5;
  --iris-400:#8b5cf6; --iris-500:#7c3aed; --iris-600:#6d28d9; --iris-700:#5b21b6;
  --emerald:#009767; --amber:#b75000; --red:#e7000b;

  /* one scalar drives every corner radius, so the whole page rounds together */
  --sq:1.4;
  --radius:calc(.625rem * var(--sq)); --r-lg:calc(.75rem * var(--sq));
  --r-xl:calc(1rem * var(--sq)); --r-2xl:calc(1.5rem * var(--sq));

  --frame:10px; --frame-r:26px;
  --max:1180px;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
/* A component that sets its own `display` outranks the UA's [hidden] rule, so
   anything toggled via the hidden attribute stays laid out and keeps eating
   pointer events. The modals are position:fixed and full-bleed, so without
   this the whole page is unclickable. Enforce it once, globally. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* Links inherit their surroundings; the browser's blue/purple would fight the
   sky and underline the brand and status chip along with everything else. */
a,a:link,a:visited,a:hover,a:active{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--iris-600);outline-offset:3px;border-radius:4px}
img{max-width:100%}

body{
  background:var(--white); color:var(--ink-2); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; padding:var(--frame);
}

/* White rounded bezel over the viewport. One huge spread shadow paints solid
   white everywhere outside the rounded rect, so there is no border seam. */
.bezel{
  position:fixed; inset:var(--frame); z-index:200; pointer-events:none;
  border-radius:var(--frame-r); box-shadow:0 0 0 100vmax #fff;
}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* ---------- sky ---------- */
.sky{
  position:absolute; top:0; left:0; right:0; height:1190px; z-index:-2; overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 26%,
    var(--sky-low) 62%,var(--sky-fade) 92%,#fff 100%);
}
/* Drifting cloud field, drawn to canvas. Blurred hard so it reads as depth
   rather than detail, and faded out before the content starts. */
.sky canvas{position:absolute;inset:-6%;width:112%;height:112%;
  filter:blur(4px) saturate(1.04);z-index:0}
.sky .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#c3aef200 0%,#e2d8f81f 52%,#fdfcffd9 86%,#fff 100%)}
/* static bloom highlights over the canvas, for volume near the horizon */
.sky i{z-index:2;position:absolute;display:block;border-radius:9999px;background:#fff;
  filter:blur(28px);opacity:.85}
.sky i:nth-child(2){width:520px;height:190px;left:-60px;top:90px;opacity:.7}
.sky i:nth-child(3){width:380px;height:150px;left:190px;top:210px;opacity:.55;filter:blur(34px)}
.sky i:nth-child(4){width:620px;height:210px;right:-90px;top:60px;opacity:.75}
.sky i:nth-child(5){width:420px;height:160px;right:150px;top:250px;opacity:.5;filter:blur(38px)}
.sky i:nth-child(6){width:900px;height:260px;left:50%;transform:translateX(-50%);top:430px;
  opacity:.55;filter:blur(46px)}
.sky i:nth-child(7){width:300px;height:120px;left:12%;top:560px;opacity:.4;filter:blur(40px)}

/* ---------- shared atoms ---------- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
b.p{color:var(--ink)} b.d{color:var(--iris-700)} b.n{color:var(--ink-4)} b.q{color:var(--amber)}
.p{color:var(--ink)} .d{color:var(--iris-700)}
.ulink{text-decoration:underline;text-underline-offset:2px}
.ok{color:var(--emerald)} .bad{color:var(--red)} .warn{color:var(--amber)}

.btn{
  font:inherit; font-size:14.5px; font-weight:500; cursor:pointer;
  padding:11px 20px; border-radius:9999px; border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:#ffffffb3;color:var(--ink-2);border-color:var(--line-2);
  backdrop-filter:blur(8px)}
.btn-ghost:hover{background:#fff;border-color:var(--ink-5)}
.btn-s{padding:8px 14px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{transform:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:18px 28px;margin:0 auto;max-width:var(--max)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;
  color:var(--ink);letter-spacing:-.03em;min-height:44px}
.brand img{display:block;width:26px;height:26px;object-fit:contain}
/* A real flex child rather than absolutely centred: it takes the leftover
   space and centres inside it, so the brand and button can never squeeze the
   two-word links onto a second line. */
.nav-links{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center;
  gap:22px;font-size:14.5px;color:var(--ink-2)}
.nav-links a{white-space:nowrap;padding:6px 0;transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:6px;flex:none}

/* ---------- hero ---------- */
main{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative}
.hero{padding:76px 0 40px;text-align:center}

.chip{display:inline-flex;align-items:center;gap:0;padding:6px 7px 6px 13px;border-radius:9999px;
  min-height:44px;background:#ffffff9e;border:1px solid #ffffffd6;backdrop-filter:blur(10px);
  box-shadow:0 1px 2px #2e1f4a12,0 8px 22px -14px #2e1f4a3d;position:relative;overflow:hidden;
  transition:box-shadow .25s,transform .25s,background .25s}
.chip:hover{background:#fffffff2;transform:translateY(-1px);
  box-shadow:0 2px 4px #2e1f4a17,0 14px 30px -14px #2e1f4a52}
/* light sweeps across, once, on hover */
.chip::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#fff0 38%,#ffffffb3 50%,#fff0 62%);transform:translateX(-120%)}
.chip:hover::after{animation:sweep .85s ease-out}
@keyframes sweep{to{transform:translateX(120%)}}
.chip-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ink-4);
  margin-right:9px;flex:none;transition:background .3s}
.chip-dot::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0}
.chip.live .chip-dot{background:var(--emerald)}
.chip.live .chip-dot::before{animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.chip.down .chip-dot{background:var(--amber)}
@keyframes ping{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(2.6);opacity:0}}
.chip-name{font-size:13.5px;color:var(--ink-2);font-weight:500}
.chip-num{font-family:var(--mono);font-size:12px;color:var(--ink-3);background:#0a0a0a0a;
  padding:6px 10px;border-radius:9999px;margin-left:10px;min-width:86px;text-align:center}
.chip-num.tick{animation:tick .5s ease}
@keyframes tick{0%{color:var(--iris-600);background:#8b5cf61f}100%{color:var(--ink-3);background:#0a0a0a0a}}

h1{font-family:var(--sans);font-weight:600;letter-spacing:-.045em;line-height:1.03;
  font-size:clamp(38px,6.4vw,74px);color:var(--ink);margin:26px 0 0}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
h1 em:first-of-type{color:var(--ink)}
h1 em:last-of-type{color:var(--iris-600)}
.lede{max-width:660px;margin:22px auto 0;font-size:17.5px;line-height:1.62;color:var(--ink-3)}
.lede b{font-weight:600}
.cta-row{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}

.carow{display:flex;justify-content:center;margin-top:18px;min-height:0}
.ca{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:9999px;
  background:#ffffffa6;border:1px solid #ffffffd6;backdrop-filter:blur(10px);cursor:pointer;
  font:inherit;transition:.2s}
.ca:hover{background:#fff}
.ca.pending{cursor:default}
.ca-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-4)}
.ca-v{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:#0a0a0a0a;
  padding:5px 10px;border-radius:9999px}
.ca.nudge{animation:nudge .4s ease}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- the split diagram ---------- */
.frame{margin:56px auto 0;max-width:860px;background:#ffffffb8;border:1px solid #ffffffe0;
  border-radius:var(--r-2xl);backdrop-filter:blur(14px);overflow:hidden;
  box-shadow:0 2px 6px #2e1f4a0f,0 30px 60px -40px #2e1f4a52}
.frame-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line)}
.frame-bar span{width:9px;height:9px;border-radius:50%;background:var(--ink-5)}
.frame-bar em{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);font-style:normal}
.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:34px 30px}
.leg{display:flex;flex-direction:column;gap:12px}
.leg.in{align-items:flex-start}
.leg.out{align-items:stretch}
.leg .mono{margin-bottom:2px}
.tok{text-align:left;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:#fff;font-weight:600;font-size:16px;color:var(--ink);line-height:1.25;
  transition:transform .25s ease,box-shadow .25s ease}
.tok small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-4);margin-top:5px;
  letter-spacing:0;text-transform:none;font-family:var(--sans)}
.tok:hover{transform:translateY(-2px);box-shadow:0 10px 24px -18px #2e1f4a8c}
.tok-u{border-color:var(--ink-5)}
.tok-p{border-left:3px solid var(--ink)}
.tok-d{border-left:3px solid var(--iris-500)}
.wye{width:130px;height:170px;overflow:visible}
.wye path{fill:none;stroke:var(--ink-5);stroke-width:1.5}
.wye circle{fill:var(--iris-500)}
.wye .pulse-b{fill:var(--ink-3)}

/* ---------- stat band ---------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:60px 0 0;
  padding:30px;background:var(--paper);border-radius:var(--r-xl);border:1px solid var(--line)}
.stat{text-align:center}
.stat b{display:block;font-size:27px;font-weight:600;color:var(--ink);letter-spacing:-.03em}
.stat span{display:block;font-size:12.5px;color:var(--ink-4);margin-top:4px}

/* ---------- sections ---------- */
.section{padding:96px 0 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--iris-700);margin-bottom:14px}
h2{font-size:clamp(28px,3.7vw,42px);font-weight:600;letter-spacing:-.038em;line-height:1.12;
  color:var(--ink);max-width:15ch}
.section > h2{max-width:20ch}
.body{max-width:660px;margin-top:18px;font-size:16.5px;color:var(--ink-3);line-height:1.65}
.body b{color:var(--ink-2);font-weight:600}

/* ---------- use cases ---------- */
.usecases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.uc{padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);
  transition:border-color .2s,transform .2s,background .2s}
.uc:hover{border-color:var(--ink-5);transform:translateY(-2px);background:#fff}
.uc h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:10px 0 10px}
.uc p{font-size:14.8px;color:var(--ink-3);line-height:1.6}
.uc-t{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--iris-700)}

/* ---------- lifecycle steps ---------- */
.steps{list-style:none;margin-top:40px;display:flex;flex-direction:column;gap:2px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;
  border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.st-n,.us-n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;flex:none}
.steps h3,.usesteps h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
  margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.steps p,.usesteps p{font-size:15px;color:var(--ink-3);max-width:640px}
.steps code,.usesteps code{display:inline-block;margin-top:12px;font-family:var(--mono);
  font-size:12.5px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);
  padding:8px 12px;border-radius:8px}
.how-note{margin-top:30px;padding:22px 24px;border-radius:var(--r-lg);
  background:#8b5cf60f;border:1px solid #8b5cf62e}
.how-note p{font-size:14.8px;color:var(--ink-3)}
.how-note b{color:var(--ink)}

/* ---------- code blocks ---------- */
.code{margin-top:26px;padding:22px 24px;border-radius:var(--r-lg);background:var(--ink);
  color:#e8e8e8;font-family:var(--mono);font-size:13px;line-height:1.75;overflow-x:auto;
  white-space:pre;-webkit-overflow-scrolling:touch}
.code .c{color:#7a8a92}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.card{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--ink-5);transform:translateY(-2px)}
.card h3{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:10px 0 9px}
.card p{font-size:14.3px;color:var(--ink-3)}

/* ---------- verdict matrix ---------- */
.matrix{margin-top:34px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.matrix .row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:10px;padding:14px 20px;
  font-size:14.5px;border-top:1px solid var(--line);align-items:center}
.matrix .row:first-child{border-top:0}
.matrix .head{background:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.matrix .row b{font-weight:600;font-size:13.5px}

/* ---------- classifier lab ---------- */
.lab{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;margin-top:36px}
.controls{padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;gap:14px}
.controls label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-4);
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.controls input{font:inherit;font-family:var(--mono);font-size:15px;color:var(--ink);
  padding:11px 13px;border-radius:9px;border:1px solid var(--line-2);background:#fff;
  text-transform:none;letter-spacing:0}
.controls input:focus{border-color:var(--iris-500);outline:none;box-shadow:0 0 0 3px #8b5cf626}
.presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.presets button{font:inherit;font-size:12.5px;cursor:pointer;padding:8px 13px;border-radius:9999px;
  border:1px solid var(--line-2);background:#fff;color:var(--ink-2);transition:.18s}
.presets button:hover{border-color:var(--ink);color:var(--ink)}

.verdict{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:border-color .3s}
.verdict-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid var(--line)}
.verdict-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-5)}
.verdict-bar em{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);font-style:normal}
.verdict-body{padding:26px;display:flex;flex-direction:column;flex:1}
.verdict h3{font-size:29px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin:8px 0 12px;
  transition:color .3s}
.explain{font-size:14.6px;color:var(--ink-3);min-height:96px}
/* verdict identity: one accent per class, driven by the model's CSS map */
.verdict.is-dividend{border-color:#00976742} .verdict.is-dividend h3{color:var(--emerald)}
.verdict.is-dividend .verdict-bar i:first-child{background:var(--emerald)}
.verdict.is-market{border-color:var(--line-2)} .verdict.is-market h3{color:var(--ink-3)}
.verdict.is-split{border-color:#b7500042} .verdict.is-split h3{color:var(--amber)}
.verdict.is-split .verdict-bar i:first-child{background:var(--amber)}
.verdict.is-unclassified{border-color:#e7000b3d} .verdict.is-unclassified h3{color:var(--red)}
.verdict.is-unclassified .verdict-bar i:first-child{background:var(--red)}
.verdict.is-none h3{color:var(--ink-4)}

.routing{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:18px}
.routing div{padding:13px;border-radius:9px;background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:5px;min-width:0}
.routing b{font-size:13px;font-weight:600;color:var(--ink);font-family:var(--mono);
  overflow-wrap:anywhere}
.feebar{position:relative;margin-top:14px;height:34px;border-radius:9px;background:var(--paper-2);
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center}
.feebar .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8b5cf630,#8b5cf66b);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.feebar span{position:relative;padding:0 12px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);letter-spacing:.04em}

/* ---------- network ---------- */
.netgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.panel{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;gap:9px}
.panel > b{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  overflow-wrap:anywhere}
.panel .sub{font-size:13px;color:var(--ink-4)}
.panel .btn{margin-top:6px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-4)}
.kv b{font-weight:500;color:var(--ink-2);font-size:13.5px;text-align:right;overflow-wrap:anywhere}
.kv .sm{font-size:11px;letter-spacing:.02em;text-transform:none}
.addr{font:inherit;font-family:var(--mono);font-size:12px;padding:10px 12px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);margin-top:8px;width:100%}
.addr:focus{border-color:var(--iris-500);outline:none;box-shadow:0 0 0 3px #8b5cf626}

/* ---------- use it ---------- */
.usewrap{display:grid;grid-template-columns:1fr 350px;gap:20px;margin-top:36px;
  align-items:start;grid-template-rows:auto auto 1fr}
/* The steps column is much taller than the two side panels. Give the grid a
   third, slack-absorbing row and pin the panels to rows 1 and 2, or the extra
   height is shared between them and they drift apart. */
.usesteps{list-style:none;display:flex;flex-direction:column;gap:2px;grid-row:1 / span 3}
.wpanel{grid-row:1;grid-column:2}
.usecard{grid-row:2;grid-column:2}
.usesteps li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 0;
  border-top:1px solid var(--line)}
.usesteps li:last-child{border-bottom:1px solid var(--line)}
.us-st{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:9999px;font-weight:500}
.us-st.live{background:#0097671f;color:var(--emerald)}
.us-st.cfg{background:#8b5cf624;color:var(--iris-700)}
.us-st.wait{background:#b750001f;color:var(--amber)}
.us-st.none{background:#0a0a0a0f;color:var(--ink-4)}

.wpanel,.usecard{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.wpanel{display:flex;flex-direction:column;gap:12px}
.wp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.uc-h{color:var(--ink-4)}
.wp-pick{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.wp-w{display:flex;align-items:center;gap:9px;font:inherit;font-size:13.5px;cursor:pointer;
  padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:#fff;
  color:var(--ink-2);transition:.18s;text-align:left;width:100%}
.wp-w:hover{border-color:var(--ink)}
.wp-wi{width:16px;height:16px;border-radius:4px;flex:none}
.wp-wi.mm{background:linear-gradient(135deg,#f6851b,#e2761b)}
.wp-wi.ph{background:linear-gradient(135deg,#ab9ff2,#7c68d4)}
.wp-ws{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.wp-acct{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:var(--ink-4);padding-bottom:10px;border-bottom:1px solid var(--line)}
/* .mono uppercases, which is right for labels and wrong for an address: it
   breaks the 0x prefix and destroys EIP-55 checksum casing. */
.wp-acct b{font-size:12.5px;color:var(--ink-2);text-transform:none;letter-spacing:0}
.wp-bals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wp-b{padding:11px;border-radius:9px;background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;min-width:0}
.wp-b b{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.wp-amt{display:flex;gap:7px}
.wp-amt input{flex:1;min-width:0;font:inherit;font-family:var(--mono);font-size:15px;
  padding:11px 13px;border-radius:9px;border:1px solid var(--line-2);background:var(--paper);
  color:var(--ink)}
.wp-amt input:focus{border-color:var(--iris-500);outline:none;box-shadow:0 0 0 3px #8b5cf626}
.wp-acts{display:flex;flex-direction:column;gap:7px}
.wp-acts .btn{width:100%}
.wp-acts-2{flex-direction:row}
.wp-acts-2 .btn{flex:1}
.wstat{font-size:12.5px;color:var(--ink-4);font-family:var(--mono);line-height:1.5;
  overflow-wrap:anywhere}
.wstat.ok{color:var(--emerald)} .wstat.bad{color:var(--red)} .wstat.warn{color:var(--amber)}
.wstat a{text-decoration:underline}
.uc-note{font-size:11.5px;color:var(--ink-4);line-height:1.55;padding-top:12px;
  border-top:1px solid var(--line)}
.usecard{display:flex;flex-direction:column;gap:2px}
.uc-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-4);cursor:pointer}
.uc-row:first-of-type{border-top:0}
.uc-row b{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:500}
.uc-c{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-5);transition:color .18s}
.uc-row:hover .uc-c{color:var(--iris-600)}
.ca-empty{font-size:12.5px;color:var(--ink-4);padding:10px 0 4px;line-height:1.6}

/* ---------- limits ---------- */
.limits ul{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:2px}
.limits li{padding:20px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-3);
  max-width:800px}
.limits li:last-child{border-bottom:1px solid var(--line)}
.limits b{color:var(--ink);font-weight:600}

/* ---------- footer ---------- */
footer{margin-top:96px;padding:34px 0;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}
footer > div:first-child{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);
  font-size:15px}
footer p{font-size:13px;color:var(--ink-4);flex:1;min-width:220px}
.frr{display:flex;align-items:center;gap:8px}
.licbtn{font:inherit;font-size:12.5px;cursor:pointer;padding:8px 14px;border-radius:9999px;
  border:1px solid var(--line-2);background:#fff;color:var(--ink-3);transition:.18s;
  display:inline-flex;align-items:center;gap:6px}
.licbtn:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- modal sheets ---------- */
.licwrap{position:fixed;inset:0;z-index:300;background:#0a0a0a5c;backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.licsheet{background:#fff;border-radius:var(--r-xl);max-width:760px;width:100%;
  max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 80px -30px #2e1f4a80;animation:rise .28s cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.lichead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:26px 28px 18px;border-bottom:1px solid var(--line)}
.lichead h3{font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.licx{font:inherit;font-size:26px;line-height:1;cursor:pointer;background:none;border:0;
  color:var(--ink-4);padding:4px 8px;border-radius:8px;transition:.18s}
.licx:hover{color:var(--ink);background:var(--paper-2)}
.prooflede{padding:18px 28px 0;font-size:14.5px;color:var(--ink-3)}
.proofstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 28px}
.proofstats div{padding:14px;border-radius:10px;background:var(--paper);border:1px solid var(--line);
  text-align:center}
.proofstats b{display:block;font-size:22px;font-weight:600;color:var(--ink)}
.proofstats span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:3px}
.lictext{margin:0 28px;padding:20px;border-radius:10px;background:var(--paper);
  border:1px solid var(--line);font-family:var(--mono);font-size:12px;line-height:1.7;
  color:var(--ink-2);overflow:auto;white-space:pre-wrap;flex:1}
.licfoot{display:flex;align-items:center;gap:14px;padding:20px 28px;flex-wrap:wrap}
.fine{font-size:11.5px;color:var(--ink-4);flex:1;min-width:180px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .usewrap{grid-template-columns:1fr;grid-template-rows:none}
  .usesteps,.wpanel,.usecard{grid-row:auto;grid-column:auto}
  .lab{grid-template-columns:1fr}
  .cards,.netgrid{grid-template-columns:1fr}
  .band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{padding:6px}
  :root{--frame:6px;--frame-r:18px}
  main{padding:0 18px}
  .hero{padding:44px 0 24px}
  .usecases{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:20px;padding:24px 20px}
  .wye{width:100%;height:80px;transform:rotate(90deg)}
  .leg.in{align-items:stretch}
  .section{padding:70px 0 0}
  .matrix .row{grid-template-columns:1fr 1fr;gap:6px;font-size:13px}
  .matrix .head{display:none}
  .proofstats{grid-template-columns:repeat(2,1fr)}
  .band{padding:22px 16px}
  .stat b{font-size:22px}
  .routing{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
}

/* Respect a stated preference for less motion: kill the ambient loops, keep
   the state transitions that carry meaning. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .sky canvas{display:none}
  .wye circle{display:none}
}