/* bladeterminal.com, site v3 (BT-041). Ported from the approved draft (~/blade-site-draft/index.html).
   One dark graphite terminal world. A centered narrative column: the live chart leads, two scroll moments (the
   dissection and the trade story) carry the idea, and execution is a working instrument. Copper is the only
   accent; green and red belong to the market. Tokens live in :root. No style="" attributes anywhere (CSP).
   --dim is the fine-print colour: 4.6:1 or better on every surface it sits on. --ghost is the draft's quieter grey,
   kept for large display type and dots only (3.5:1, too faint for small text). */
:root{
  --bg:#07090c; --panel:#0a0d11; --lift:#0c1015; --lift2:#11161d; --line:#1d242c; --line2:#2a333d;
  --text:#e6e9ed; --muted:#8b95a1; --dim:#78828e; --ghost:#5f6874;
  --copper:#e3943a; --copper-hi:#f2b36b; --up:#3ddc97; --down:#f0566e;
  --font:-apple-system,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Roboto Mono",monospace;
  --gutter:clamp(16px,4vw,40px); --max:1180px; --header:60px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:650;letter-spacing:-.035em}
h2{font-size:clamp(32px,5vw,58px);line-height:1.03}
h3{font-size:20px;line-height:1.2;letter-spacing:-.02em}
p{margin:0}
.lede{color:var(--muted);font-size:clamp(16px,1.55vw,19px);max-width:58ch}
.fine{font-size:12.5px;color:var(--dim)}
.tvlink{color:var(--text);border-bottom:1px solid var(--line2)}
.tvlink:hover{border-color:var(--text)}
.head{display:grid;gap:16px;max-width:760px}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--header);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:26px;height:26px}
.brand span{display:flex;align-items:baseline}
.brand b{font-size:14px;letter-spacing:.2em;font-weight:700}
.brand i{font-style:normal;font-size:10.5px;letter-spacing:.24em;color:var(--copper);margin-left:6px;font-weight:500}
.nav{display:flex;gap:24px}
.nav a{font-size:13.5px;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--text)}
.hdr .cta{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s}
.btn-p{background:var(--text);color:var(--bg)}
.btn-p:hover{transform:translateY(-1px);background:#fff}
.btn-g{border-color:var(--line2);color:var(--text);background:transparent}
.btn-g:hover{border-color:var(--muted)}
.btn-sm{height:34px;padding:0 15px;font-size:13px}
@media (max-width:820px){.nav{display:none}}

/* Hero */
.hero{position:relative;padding-block:clamp(40px,6vw,76px) 0;isolation:isolate}
.hero::before{content:"";position:absolute;left:0;right:0;top:220px;height:820px;z-index:-1;pointer-events:none;background:radial-gradient(42% 42% at 50% 50%,color-mix(in srgb,var(--copper) 17%,transparent),transparent 72%)}
.hero-copy{display:grid;justify-items:center;text-align:center;gap:18px}
.hero h1{font-size:clamp(42px,7vw,92px);line-height:1;letter-spacing:-.052em;font-weight:700}
.hero h1 .cu{background:linear-gradient(180deg,var(--copper-hi),var(--copper) 62%,#b86a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{text-align:center;max-width:54ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.live-wrap{margin-top:clamp(30px,4vw,48px);perspective:1600px}
.live{position:relative;border:1px solid var(--line2);border-radius:18px;background:var(--panel);overflow:hidden;transform-origin:50% 0;box-shadow:0 60px 120px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04)}
.js-motion .live{animation:rise 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:rotateX(14deg) translateY(26px)}to{transform:none}}
/* A grid with a reserved last column: the status chip hugs its word, and nothing else moves when the word changes. */
.lv-head{display:grid;grid-template-columns:auto auto 1fr minmax(112px,auto);align-items:center;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lv-sym{display:flex;align-items:baseline;gap:8px}
.lv-sym b{font-size:15px;letter-spacing:.01em}
.lv-sym span{color:var(--muted);font-size:12.5px}
.lv-px{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;transition:color .4s;min-width:9ch}
.lv-px.up{color:var(--up)}.lv-px.dn{color:var(--down)}
.tfs{display:inline-flex;border:1px solid var(--line2);border-radius:9px;padding:2px;justify-self:end}
.tfs button{background:none;border:0;color:var(--muted);font:500 12px var(--mono);padding:5px 11px;border-radius:7px;cursor:pointer}
.tfs button[aria-pressed="true"]{background:var(--lift2);color:var(--text)}
.status{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:9ch;justify-self:end}
.status i{width:7px;height:7px;border-radius:50%;background:var(--ghost)}
.status.live,.status.blade{color:var(--up)}
.status.live i,.status.blade i{background:var(--up)}
.js-motion .status.live i,.js-motion .status.blade i{animation:ping 2.2s ease-out infinite}
.status.sim{color:var(--copper)}.status.sim i{background:var(--copper)}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 70%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.lv-chart{position:relative;height:clamp(340px,54vh,560px)}
.lv-msg{position:absolute;inset:0;display:grid;place-items:center;font:12px var(--mono);color:var(--dim);letter-spacing:.06em}
.lv-foot{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font:12px var(--mono);color:var(--muted)}
.legend{display:flex;gap:8px 18px;flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg::before{content:"";width:16px;height:3px;border-radius:2px;background:currentColor}
.lg.bid::before{background:var(--up)}.lg.ask::before{background:var(--down)}
.lg.prt::before{width:10px;height:10px;border-radius:50%;background:transparent;border:1.5px solid var(--text)}
.cap{text-align:center;color:var(--dim);font-size:13px;margin:16px auto 0;max-width:74ch;min-height:3.1em}
/* Phones: two fixed rows (symbol + price, timeframes + status), so the chart never moves once data arrives. */
@media (max-width:640px){
  .lv-head{grid-template-columns:auto 1fr;gap:8px 12px}
  .tfs{justify-self:start}
}
@media (max-width:560px){
  .lv-chart{height:360px}
  .lv-foot{display:grid;gap:6px;font-size:11.5px}
  .cap{min-height:4.65em}
}
@media (pointer:coarse){.tfs button{padding:8px 13px}}

/* Thesis */
.thesis{padding-block:clamp(96px,12vw,150px) clamp(24px,4vw,40px)}
.thesis .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end}
.big{font-size:clamp(28px,4.3vw,52px);line-height:1.06;letter-spacing:-.042em;font-weight:650;text-wrap:balance}
.big span{color:var(--ghost)}
@media (max-width:760px){.thesis .grid{grid-template-columns:1fr;gap:20px}}

/* Dissection. The calm layout is the default: no JavaScript, or the OS "Reduce motion" setting (.lite).
   The sticky 3D scroll runs only under .js-motion. .js = JavaScript is on, either tier. Plane depth --z by class (CSP). */
.xp{position:relative}
.xp-sticky{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,4vw,56px);padding-block:clamp(64px,9vw,110px)}
.js-motion .xp{height:430vh}
.js-motion .xp-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header));height:calc(100vh - var(--header));height:calc(100svh - var(--header));padding-block:0}
.xp-copy{display:grid;gap:14px;align-content:center;min-width:0}
.xp-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.xp-steps li{opacity:.32;transition:opacity .35s}
.xp-steps.all li,.xp-steps li.on{opacity:1}
.st-b{display:flex;align-items:baseline;gap:12px;background:none;border:0;color:var(--text);padding:0;cursor:pointer;text-align:left}
html:not(.js) .st-b{cursor:default}
.st-n{font:12px var(--mono);color:var(--copper);width:22px}
.st-t{font-size:19px;font-weight:650;letter-spacing:-.02em}
.xp-steps li p{color:var(--muted);font-size:14.5px;max-width:46ch;margin:4px 0 0 34px}
.xp-note{display:none;font:12px var(--mono);letter-spacing:.06em;color:var(--copper);min-height:1.5em}
.js-motion .xp-note{display:block}
.xp-cap{display:none}
.xp-stage{perspective:2000px;display:grid;place-items:center;min-width:0}
.js-motion .xp-stage{height:100%}
.xp-stack{--tilt:0;--gap:0px;position:relative;width:min(100%,600px);aspect-ratio:1000/620;transform-style:preserve-3d}
.js-motion .xp-stack{transform:rotateX(calc(var(--tilt)*58deg)) rotateZ(calc(var(--tilt)*-34deg)) scale(calc(1 - var(--tilt)*.1))}
.ly{position:absolute;inset:0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(13,17,22,.24);transform:translateZ(calc(var(--z)*(var(--gap) + 1px) + var(--lift,0px)));transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .4s,border-color .4s,box-shadow .4s}
.ly.z0{--z:0}.ly.z1{--z:1}.ly.z2{--z:2}.ly.z3{--z:3}.ly.z4{--z:4}.ly.z5{--z:5}
.ly svg{width:100%;height:100%}
.ly.base{background:#0b0e12;border-color:var(--line2)}
.ly.on{--lift:26px;border-color:color-mix(in srgb,var(--copper) 75%,transparent);box-shadow:0 0 60px -14px color-mix(in srgb,var(--copper) 50%,transparent)}
.ly.dim{opacity:.3}
.ly.base.dim{opacity:.5}
.ly .tag{position:absolute;left:12px;bottom:12px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgba(7,9,12,.85);border:1px solid var(--line2);padding:4px 9px;border-radius:6px;transition:opacity .3s}
.ly.on .tag{border-color:var(--copper);color:var(--copper-hi)}
.xp-stack.flat .tag,.ly.dim .tag{opacity:0}
svg .ax{font-family:var(--mono);font-size:11px;fill:#5f6874}
svg .axd{font-family:var(--mono);font-size:11px;font-weight:700;fill:#0b0e12}
svg .bl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;fill:#5f6874}
svg .blc{fill:var(--copper)}
svg .blb{fill:var(--up)}
svg .bla{fill:var(--down)}
@media (max-width:860px){
  .xp-sticky{grid-template-columns:1fr;gap:20px}
  .js-motion .xp-sticky{grid-template-rows:auto 1fr;align-content:start;padding-top:18px;gap:6px}
  .xp-copy{gap:10px}
  .xp-copy h2{font-size:clamp(28px,8vw,40px)}
  .js .xp-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0}
  .js .xp-steps li{opacity:1}
  .js .xp-steps li p{display:none}
  .js .st-b{padding:6px 11px;border:1px solid var(--line2);border-radius:999px;gap:7px;opacity:.55;transition:opacity .3s,border-color .3s}
  .js .st-t{font-size:13px}.js .st-n{width:auto;font-size:10.5px}
  .js .xp-steps li.on .st-b,.js .xp-steps.all .st-b{opacity:1}
  .js .xp-steps li.on .st-b{border-color:var(--copper)}
  .js-motion .xp-note{display:none}
  .js .xp-cap{display:block;min-height:6.2em;color:var(--muted);font-size:14.5px} /* 4 lines: the longest step, so the chart never jumps */
  .js-motion .xp-stack{width:min(84%,420px)}
}

/* Read the book. Without JavaScript the chart stays on beat 1 and every step reads at full strength (.js dims the rest).
   Phones crop the chart's left 300 units in CSS (same view as the draft's phone viewBox, no JS, no jump). */
.read{padding-block:clamp(96px,12vw,150px) 0}
.rd-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);margin-top:28px}
.rd-steps{min-width:0}
.rd-step{min-height:74vh;display:grid;align-content:center;gap:10px;transition:opacity .4s}
.js .rd-step:not(.on){opacity:.3}
.rd-step .n{font:12px var(--mono);color:var(--copper)}
.rd-step h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em}
.rd-step p{color:var(--muted);font-size:16px;max-width:42ch}
.rd-chart{min-width:0}
.rd-sticky{position:sticky;top:calc(var(--header) + 14vh);border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:#0b0e12}
.rd-frame{overflow:hidden}
.rd-frame svg{width:100%;height:auto}
.rd-sticky .fine{position:absolute;right:12px;bottom:8px}
svg .an{opacity:0;transition:opacity .5s}
svg .an-t{font-family:var(--mono);font-size:15px;fill:#e6e9ed;letter-spacing:.03em}
#rdSvg .dm{transition:opacity .5s}
#rdSvg[data-beat="1"] .an1,#rdSvg[data-beat="2"] .an2,#rdSvg[data-beat="3"] .an3,#rdSvg[data-beat="4"] .an4{opacity:1}
#rdSvg[data-beat="1"] .w-minor,#rdSvg[data-beat="1"] .w-A2{opacity:.28}
#rdSvg[data-beat="2"] .w-minor,#rdSvg[data-beat="2"] .w-A,#rdSvg[data-beat="2"] .w-A2{opacity:.22}
#rdSvg[data-beat="3"] .w-minor,#rdSvg[data-beat="3"] .w-A2{opacity:.25}
#rdSvg[data-beat="4"] .w-minor,#rdSvg[data-beat="4"] .w-A,#rdSvg[data-beat="4"] .w-B{opacity:.22}
/* Beat 2: the sells hit the bid, first test then second, each bar dropping out of the wall. */
.js-motion #rdSvg[data-beat="2"] .hit rect{transform-box:fill-box;transform-origin:50% 0;animation:hit .5s cubic-bezier(.2,.7,.2,1) both}
.js-motion #rdSvg[data-beat="2"] .hit.t2 rect{animation-delay:.45s}
@keyframes hit{from{transform:scaleY(0)}}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (max-width:860px){
  .rd-grid{grid-template-columns:1fr;gap:0}
  .rd-chart{order:-1;position:sticky;top:calc(var(--header) + 8px);z-index:2;padding-bottom:10px;background:linear-gradient(var(--bg) 85%,transparent)}
  .rd-sticky{position:relative;top:auto}
  .rd-step{min-height:62vh}
}
@media (max-width:640px){
  #rdSvg .pill{display:none}
  .rd-frame{aspect-ratio:700/440}
  .rd-frame svg{width:142.857%;max-width:none;margin-left:-42.857%}
}

/* Execution. Without JavaScript the frame shows LIMIT and the description area lists every order type;
   with it, all descriptions share one grid cell so the frame never changes height while the tabs cycle. */
.exe{padding-block:clamp(96px,12vw,150px) 0}
.ex-frame{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);border:1px solid var(--line2);border-radius:18px;background:var(--panel);overflow:hidden;margin-top:44px;box-shadow:0 50px 100px -60px rgba(0,0,0,.9)}
.ex-main{min-width:0;border-right:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto}
.ex-tabs{display:flex;gap:2px;padding:8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ex-tabs::-webkit-scrollbar{display:none}
.ex-tabs button{flex:none;background:none;border:0;color:var(--muted);font:600 11.5px var(--mono);letter-spacing:.1em;padding:9px 12px;border-radius:8px;cursor:pointer}
.ex-tabs button:hover{color:var(--text)}
.ex-tabs button[aria-selected="true"]{background:var(--lift2);color:var(--text);box-shadow:inset 0 -2px 0 var(--copper)}
.ex-chart{min-width:0;background:#0b0e12}
.ex-crop{overflow:hidden}
.ex-chart svg{width:100%;height:auto}
.ex-descs{padding:14px 18px;border-top:1px solid var(--line);display:grid;gap:10px}
.ex-desc{color:var(--muted);font-size:14.5px}
.ex-desc b{font:600 11.5px var(--mono);letter-spacing:.1em;color:var(--text);margin-right:8px}
.js .ex-descs{gap:0;min-height:calc(4.4em + 28px)}
.js .ex-desc{grid-area:1/1;visibility:hidden}
.js .ex-desc.on{visibility:visible}
.js .ex-desc b{display:none}
.tk-fields:not(.on),.tk-go:not(.on){display:none}
.og{opacity:0;transition:opacity .35s}
.og.on{opacity:1}
.js-motion .og.on .fillpulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.7s ease-out infinite}
.og .sl{opacity:0}
.og.on .sl{animation:slin .35s ease-out forwards}
.og.on .sl.d1{animation-delay:.38s}.og.on .sl.d2{animation-delay:.76s}.og.on .sl.d3{animation-delay:1.14s}.og.on .sl.d4{animation-delay:1.52s}
.og.on .sl.d5{animation-delay:1.9s}.og.on .sl.d6{animation-delay:2.28s}.og.on .sl.d7{animation-delay:2.66s}
.og .prog{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.og.on .prog{animation:prog 3.2s linear forwards}
@keyframes slin{to{opacity:1}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lite .og.on .sl{animation:none;opacity:1}
.lite .og.on .prog{animation:none;transform:none}
svg .ct{font-family:var(--mono);font-size:10.5px;fill:#e6e9ed;letter-spacing:.04em}
svg .ct-s{font-size:9.5px}
svg .ct-m{fill:#8b95a1}
svg .ct-up{fill:#3ddc97}
svg .ax-s{font-size:10px}
svg .axd-s{font-size:9.5px}
svg .chase-g{transition:transform .4s}
.ex-ticket{padding:18px;display:grid;gap:14px;align-content:start;min-width:0}
.tk-side{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tk-side span{text-align:center;padding:9px 0;border-radius:8px;font-weight:650;font-size:14px}
.tk-side .b{background:color-mix(in srgb,var(--up) 20%,transparent);color:var(--up)}
.tk-side .s{background:var(--lift2);color:var(--muted)}
.tk-row{display:grid;gap:6px}
.tk-row>span{font-size:12px;color:var(--dim)}
.tk-chips{display:flex;gap:4px;flex-wrap:wrap}
.tk-chips span{font:600 11.5px var(--mono);padding:6px 9px;border-radius:7px;border:1px solid var(--line);color:var(--muted)}
.tk-chips span.on{border-color:var(--copper);color:var(--copper-hi)}
.tk-fields{margin:0;display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tk-fields div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px}
.tk-fields div:first-child{border-top:0}
.tk-fields dt{color:var(--muted)}
.tk-fields dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tk-go{background:var(--up);color:#04130c;text-align:center;border-radius:10px;padding:11px;font-weight:700;font-size:14.5px}
.tk-foot{font:11px var(--mono);color:var(--dim);text-align:center;letter-spacing:.08em;text-transform:uppercase}
.ex-keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;align-items:center}
.key{font:600 12px var(--mono);padding:8px 12px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:9px;color:var(--text);background:var(--lift);white-space:nowrap}
.key i{font-style:normal;color:var(--copper);margin-right:7px}
.ex-note{margin-top:16px}
@media (max-width:900px){.ex-frame{grid-template-columns:1fr}.ex-main{border-right:0;border-bottom:1px solid var(--line)}}
/* Phones: show the draft's phone view (x 250-640, y 20-320) by cropping in CSS, so it works without JS. */
@media (max-width:640px){.ex-crop{aspect-ratio:390/300}.ex-crop svg{width:164.1026%;max-width:none;margin:-5.1282% 0 0 -64.1026%}}

/* Plans. The Alpha 500 card is the only one with detail. The four later plans show a name and a badge; their bodies
   are placeholder bars under a blur (hidden from screen readers) with a plain "Details at launch" label. CSS only. */
.plans{padding-block:clamp(96px,12vw,150px) 0}
.pl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:44px}
.sec-card.pl-card{gap:14px;min-width:0}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pl-badge{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);padding:4px 9px;border-radius:6px;white-space:nowrap}
.pl-badge.on{border-color:var(--copper);color:var(--copper-hi)}
.sec-card.pl-now{grid-column:1/-1;padding:clamp(20px,3vw,32px);border-color:color-mix(in srgb,var(--copper) 55%,var(--line2));background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--copper) 15%,transparent),transparent 60%),var(--lift)}
.sec-card.pl-now h3{font-size:clamp(22px,2.4vw,28px)}
.pl-card .pl-body{color:var(--text);font-size:clamp(16px,1.55vw,19px);max-width:52ch}
.pl-card .fine{font-size:12.5px;color:var(--dim)}
.pl-blur{display:grid;gap:9px;filter:blur(6px);user-select:none;pointer-events:none}
.pl-blur i{height:10px;border-radius:5px;background:var(--line2)}
.pl-blur i:nth-child(2){width:82%}.pl-blur i:nth-child(3){width:64%}.pl-blur i:nth-child(4){width:74%}
.pl-card .pl-soon{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pl-note{margin-top:16px}
@media (max-width:900px){.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pl-grid{grid-template-columns:1fr}}

/* Join */
.joinS{padding-block:clamp(96px,12vw,150px) 0}
.join{border:1px solid var(--line2);border-radius:24px;padding:clamp(28px,5vw,64px);background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--copper) 15%,transparent),transparent 60%),var(--lift);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
@media (max-width:860px){.join{grid-template-columns:1fr;gap:32px}}
form{display:grid;gap:12px}
label{font-size:12.5px;color:var(--muted);display:grid;gap:6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;color:var(--text);font:inherit;font-size:15px;padding:11px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 1px var(--copper)}
textarea{min-height:84px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.frow{grid-template-columns:1fr}}
.done{border:1px solid var(--line2);border-radius:12px;padding:16px;display:grid;gap:10px;font-size:14px;color:var(--muted)}
.done pre{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:12px;color:var(--text);background:var(--bg);padding:12px;border-radius:8px;border:1px solid var(--line)}
.addr{font-family:var(--mono);color:var(--text);user-select:all}
.fld{display:grid;gap:6px;min-width:0}
input[aria-invalid="true"]{border-color:var(--down)}
.ferr{font-size:12.5px;color:var(--down)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.done b{color:var(--text);font-size:16px}
.done a,.prose a{color:var(--text);border-bottom:1px solid var(--line2)}
.done:focus{outline:none}
.btn:disabled{opacity:.6;cursor:progress}

/* Sub-pages: security, legal, 404 and the form's answer pages */
.page{padding-block:clamp(56px,8vw,100px) 0}
.page .head{margin-bottom:clamp(28px,4vw,44px)}
.page h1{font-size:clamp(34px,5.4vw,60px);line-height:1.03}
.upd{font:12px var(--mono);color:var(--dim);letter-spacing:.06em}
.prose{display:grid;gap:16px;max-width:66ch;color:var(--muted);font-size:16.5px;margin-bottom:28px}
.prose h2{font-size:clamp(20px,2.2vw,26px);margin-top:14px}
.sec-block{margin-top:clamp(36px,5vw,56px)}
.sec-block h2{font-size:clamp(22px,2.6vw,30px)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:18px}
.sec-card{border:1px solid var(--line2);border-radius:14px;padding:18px;background:var(--lift);display:grid;gap:8px;align-content:start}
.sec-card h3{font-size:17px}
.sec-card p{color:var(--muted);font-size:14.5px}
.not{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;max-width:66ch}
.not li{color:var(--muted);padding-left:24px;position:relative}
.not li::before{content:"×";position:absolute;left:0;color:var(--copper);font-family:var(--mono)}

footer{border-top:1px solid var(--line);padding-block:48px 64px;margin-top:clamp(90px,11vw,150px)}
footer .row{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--muted)}
footer .fl{margin-top:22px;font-size:12.5px;color:var(--dim);max-width:92ch}

.js-motion .rv.in{animation:rv .9s cubic-bezier(.2,.7,.2,1)}
@keyframes rv{from{transform:translateY(26px);opacity:.25}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Added for the production build (not in the draft) */
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--text);color:var(--bg);font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px}
.skip:focus{top:10px}
footer .legal{display:flex;flex-wrap:wrap;gap:18px;color:var(--dim)}
footer .legal a:hover,footer nav a:hover{color:var(--text)}
.join-copy{display:grid;gap:18px;align-content:start}
.self-start{justify-self:start}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:not(.js-motion):not(.lite) .js-only{display:none}
.js-motion .nojs-only,.lite .nojs-only{display:none}
.lv-embed{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Hero walls use the desk Heatmaps hues (live-chart.js HUE). */
.lg.bid::before{background:rgb(40,223,9)}.lg.ask::before{background:rgb(255,5,47)}