@font-face{font-family:Geist;src:url('fonts/geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{--mint:#97fce3;--ink:#06110d;--paper:#e3ebe6;--shell:#f7faf8;--hair:rgba(255,255,255,.15);background:var(--paper);color:white;font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a,button{color:inherit;font:inherit}a{text-decoration:none}button{border:0}h1,h2,p{margin:0}.site{width:min(calc(100% - 28px),1600px);margin:14px auto;overflow:hidden;border-radius:28px;background:var(--shell);box-shadow:0 34px 100px rgba(5,25,17,.14)}
.hero{--edge:clamp(28px,5vw,82px);--stage-w:min(52vw,720px);--split:clamp(30px,3.4vw,56px);--col:calc(100% - (var(--edge) * 2) - var(--stage-w) - var(--split));position:relative;height:min(860px,calc(100svh - 28px));min-height:720px;overflow:hidden;isolation:isolate;background:#06140f}.worlds,.world{position:absolute;inset:0}.world{inset:-3%;background-position:center;background-size:cover;opacity:0;transform:scale(1.035);transition:opacity 1.1s ease,transform 7.4s cubic-bezier(.16,1,.3,1)}.world.on{opacity:1;transform:scale(1.09)}.world[data-scene=sports]{background-image:url('media/stadium-final.jpg');background-position:center 57%}.world[data-scene=fed]{background-image:url('media/fed-still.jpg');background-position:center 49%}.world[data-scene=crypto]{background-image:url('media/stadium-azteca.jpg');background-position:center 47%}.world[data-scene=global]{background-image:url('media/fanfest.jpg');background-position:center 42%}.veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,11,7,.9) 0%,rgba(2,11,7,.52) 45%,rgba(2,11,7,.18) 76%,rgba(2,11,7,.38)),linear-gradient(180deg,rgba(2,10,7,.42),transparent 46%,rgba(2,10,7,.54))}.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.frame{position:absolute;inset:13px;z-index:3;border:1px solid rgba(255,255,255,.18);border-radius:19px;pointer-events:none}
nav{position:relative;z-index:10;height:82px;padding:0 32px 0 var(--edge);display:flex;align-items:center}.brand{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:600;letter-spacing:-.04em;text-shadow:0 2px 18px rgba(0,0,0,.3)}.brand img{width:26px;height:26px;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}.navlinks{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(2,12,8,.22);backdrop-filter:blur(18px)}.navlinks a{padding:8px 13px;border-radius:999px;color:rgba(255,255,255,.72);font-size:11px}.access{margin-left:auto;padding:10px 15px;border-radius:999px;background:white;color:var(--ink);font-size:12px;font-weight:600}
.copy{position:absolute;z-index:7;left:var(--edge);top:49%;width:var(--col);transform:translateY(-50%);text-shadow:0 3px 26px rgba(0,0,0,.26)}.kicker{display:flex;align-items:center;gap:9px;color:var(--mint);font:500 9px/1 Geist Mono,monospace;text-transform:uppercase;letter-spacing:.13em}.kicker i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px var(--mint)}.nb{white-space:nowrap}
h1{margin-top:19px;font-size:clamp(40px,4.9vw,80px);font-weight:500;line-height:.9;letter-spacing:-.076em}.sub{max-width:500px;margin-top:24px;color:rgba(255,255,255,.7);font-size:15px;line-height:1.55}.sub strong{color:white;font-weight:500}.cta{display:inline-flex;align-items:center;gap:22px;margin-top:27px;padding:12px 15px 12px 17px;border-radius:999px;background:var(--mint);color:var(--ink);font-size:12px;font-weight:600}
.stage{--ease:cubic-bezier(.16,1,.3,1);--ui:#0f1412;--ui-2:#151b18;--ui-line:rgba(255,255,255,.11);--ui-ink:#f3f6f4;--ui-muted:#8e9994;--yes:#2fd48a;--no:#f0607e;position:absolute;z-index:6;right:var(--edge);top:50%;width:var(--stage-w);height:min(68vh,640px);transform:translateY(-46%);perspective:1400px;transform-style:preserve-3d;color:var(--ui-ink)}.window{--lift:1;position:absolute;transition:opacity .48s ease,transform .72s var(--ease);transform-style:preserve-3d}.surface{position:absolute;inset:0;overflow:hidden;border:1px solid var(--ui-line);border-radius:15px;background:color-mix(in srgb,var(--ui) 92%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 calc(2px * var(--lift)) calc(5px * var(--lift)) rgba(0,0,0,.34),0 calc(10px * var(--lift)) calc(20px * var(--lift)) rgba(0,0,0,.30),0 calc(26px * var(--lift)) calc(52px * var(--lift)) rgba(0,0,0,.34),0 calc(58px * var(--lift)) calc(108px * var(--lift)) rgba(0,0,0,.42);backdrop-filter:blur(22px) saturate(1.08);transition:transform .55s var(--ease),background .4s ease}.stage.leaving .window{opacity:0;transform:translate3d(var(--out-x,24px),var(--out-y,-10px),-90px) scale(.965)}.stage.leaving .window:nth-child(2){transition-delay:.04s}.stage.leaving .window:nth-child(3){transition-delay:.08s}.stage.leaving .window:nth-child(4){transition-delay:.12s}.stage.leaving .window:nth-child(5){transition-delay:.16s}
.ui-label{color:var(--ui-muted);font:500 7px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.ui-mono{font-family:Geist Mono,monospace}.yes{color:var(--yes)}.no{color:var(--no)}
.lead{--lift:1.55;left:8%;top:7%;width:62%;height:53%;z-index:4}.lead .surface{border-radius:20px}.market-head{height:72px;padding:13px 15px 10px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;border-bottom:1px solid var(--ui-line)}.market-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(47,212,138,.12);border:1px solid rgba(47,212,138,.3);font-size:13px}.market-head h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:-.03em}.market-meta{margin-top:3px;color:var(--ui-muted);font-size:7px}.quotes{display:flex;gap:7px}.quote{font:600 11px Geist Mono,monospace}.terminal-tabs{height:30px;padding:0 13px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--ui-line);color:var(--ui-muted);font-size:8px}.terminal-tabs b{height:30px;display:flex;align-items:center;border-bottom:2px solid var(--yes);color:var(--ui-ink);font-weight:500}.trade-plot{position:relative;height:calc(100% - 102px);padding:11px 14px 12px;background:repeating-linear-gradient(0deg,transparent 0 25%,var(--ui-line) calc(25% + 1px),transparent calc(25% + 2px))}.trade-plot svg{width:100%;height:100%;overflow:visible}.trade-plot path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}.trade-plot .p1{stroke:var(--yes)}.trade-plot .p2{stroke:var(--no)}.target-line{position:absolute;left:14px;right:14px;top:49%;border-top:1px dashed rgba(255,255,255,.25)}.target-line span{position:absolute;right:0;top:-14px;padding:2px 4px;border-radius:4px;background:var(--ui-2);color:var(--ui-muted);font:500 7px Geist Mono,monospace}
.switcher{--lift:.8;right:0;top:2%;width:28%;height:19%;min-height:100px;z-index:2}.switcher .surface{padding:10px}.market-search{height:27px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-line);border-radius:7px;background:var(--ui-2);color:var(--ui-muted);font-size:7px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px}.tabs button{height:27px;border-radius:6px;background:rgba(255,255,255,.045);font-size:7px;cursor:pointer}.tabs button.on{background:var(--yes);color:#07130f;font-weight:600}.market-count{margin-top:6px;display:flex;justify-content:space-between;color:var(--ui-muted);font:500 6px Geist Mono,monospace}
.odds{--lift:1.3;right:0;top:27%;width:31%;height:43%;z-index:3}.odds .surface{padding:11px}.ticket-top{display:flex;align-items:center;justify-content:space-between}.ticket-top strong{font-size:10px}.ticket-side{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}.ticket-side button,.ticket-type button{height:27px;border-radius:6px;background:rgba(255,255,255,.05);font-size:8px}.ticket-side button.on{background:var(--yes);color:#07130f;font-weight:600}.ticket-type{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px;padding:3px;border:1px solid var(--ui-line);border-radius:8px}.ticket-type button.on{background:var(--ui-2);color:var(--yes)}.field{height:31px;margin-top:7px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ui-line);border-radius:7px;background:rgba(255,255,255,.025);font:500 9px Geist Mono,monospace}.ticket-stat{display:flex;justify-content:space-between;margin-top:7px;color:var(--ui-muted);font-size:7px}.trade-button{height:30px;width:100%;margin-top:8px;border-radius:7px;background:var(--yes);color:#07130f;font-size:8px;font-weight:600}.outcome-list{display:grid;gap:4px;margin-top:8px}.outcome-row{height:30px;padding:0 7px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;border:1px solid var(--ui-line);border-radius:6px;background:rgba(255,255,255,.025);font-size:7px}.outcome-row.on{background:rgba(47,212,138,.13);border-color:rgba(47,212,138,.34)}.outcome-row b{font:600 8px Geist Mono,monospace}.outcome-row i{width:22px;height:3px;border-radius:3px;background:var(--yes);opacity:.7}
.chart{--lift:.95;left:0;bottom:0;width:62%;height:31%;z-index:2}.chart .surface{padding:10px}.book-head{display:flex;justify-content:space-between;align-items:center}.book-head strong{font-size:9px}.increment{padding:4px 6px;border:1px solid var(--ui-line);border-radius:5px;color:var(--ui-muted);font:500 7px Geist Mono,monospace}.book-cols,.book-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.book-cols{margin-top:7px;padding-bottom:4px;color:var(--ui-muted);font:500 6px Geist Mono,monospace}.book-row{position:relative;height:19px;border-top:1px solid rgba(255,255,255,.055);font:500 7px Geist Mono,monospace}.book-row span:nth-child(2){text-align:center}.book-row span:last-child{text-align:right}.book-row::before{content:"";position:absolute;right:0;top:3px;bottom:3px;width:var(--depth);background:rgba(47,212,138,.11);z-index:-1}.history{height:calc(100% - 23px);margin-top:6px}.history svg{width:100%;height:100%}.history path{stroke-width:0}.legend{display:flex;gap:7px;color:var(--ui-muted);font-size:6px}.legend i{display:inline-block;width:5px;height:5px;margin-right:3px}
.ticker{--lift:.85;right:0;bottom:0;width:34%;height:27%;z-index:1}.ticker .surface{padding:10px}.position-head{display:flex;justify-content:space-between;align-items:center}.position-head strong{font-size:9px}.position-value{margin-top:8px;color:var(--yes);font:600 15px Geist Mono,monospace}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.position-grid div{padding-top:5px;border-top:1px solid var(--ui-line);color:var(--ui-muted);font-size:6px}.position-grid b{display:block;margin-top:2px;color:var(--ui-ink);font:500 8px Geist Mono,monospace}.close-position{width:100%;height:24px;margin-top:7px;border:1px solid rgba(240,96,126,.34);border-radius:6px;color:var(--no);background:rgba(240,96,126,.07);font-size:7px}
/* The one spatial system this page uses: the mosaic, at 39A's scale. */
.stage{width:var(--stage-w)}

/* One viewport, nothing below it. The 14px gutter is 39A's inset frame, so the
   page still ends exactly at the fold with no scroll. */
.site{margin:14px auto}
.hero{height:calc(100svh - 28px);min-height:600px}
@media(min-width:851px) and (max-height:660px){
  .site{width:100%;margin:0;border-radius:0}
  .hero{height:100svh;min-height:0;border-radius:0}
  .frame{inset:9px;border-radius:12px}
}

/* Nav actions: the contact popover, and the app entry that is not open yet. */
.navactions{margin-left:auto;display:flex;align-items:center;gap:10px}
.contact{position:relative}
.contact-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(2,12,8,.22);backdrop-filter:blur(18px);color:rgba(255,255,255,.88);font-size:12px;font-weight:500;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.contact-btn svg{width:11px;opacity:.62;transition:transform .2s ease}
.contact:hover .contact-btn,.contact:focus-within .contact-btn{background:rgba(2,12,8,.46);border-color:rgba(255,255,255,.34)}
.contact:hover .contact-btn svg,.contact:focus-within .contact-btn svg{transform:translateY(1px)}
.contact-menu{position:absolute;right:0;top:calc(100% + 10px);width:250px;padding:5px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(7,16,12,.84);backdrop-filter:blur(26px) saturate(1.1);box-shadow:0 24px 64px rgba(0,0,0,.46);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
/* Bridges the 10px gap so the pointer can travel from the button to the menu. */
.contact-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.contact:hover .contact-menu,.contact:focus-within .contact-menu,.contact.open .contact-menu{opacity:1;visibility:visible;transform:none}
.contact-row{width:100%;display:grid;grid-template-columns:15px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:10px;background:transparent;color:rgba(255,255,255,.92);font-size:12px;text-align:left;cursor:pointer;transition:background .15s ease}
.contact-row:hover,.contact-row:focus-visible{background:rgba(255,255,255,.07);outline:none}
.contact-row svg{width:15px;color:var(--mint)}
.contact-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.contact-row em{color:rgba(255,255,255,.42);font:500 8px Geist Mono,monospace;font-style:normal;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.contact-row[data-copied="1"] em{color:var(--mint)}
.access[disabled]{margin-left:0;background:rgba(255,255,255,.13);color:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.17);cursor:not-allowed;backdrop-filter:blur(18px)}

/* The statement sits on the vertical centre; the positioning line holds the
   bottom-left corner, where the slide labels used to be. */
.copy{top:50%;width:var(--col)}
h1{margin-top:0}
.tagline{position:absolute;z-index:7;left:var(--edge);bottom:clamp(28px,4.5vh,54px);width:min(540px,var(--col));color:rgba(255,255,255,.66);font-size:13px;line-height:1.5;text-shadow:0 3px 26px rgba(0,0,0,.26)}
.tagline strong{color:rgba(255,255,255,.94);font-weight:500}

/* ── Market surfaces ──────────────────────────────────────────────────────
   No status dots, no category badges, no invented labels. What a desk sees:
   the market, its quotes, the order, the position. */
.hm{height:100%;padding:20px;display:flex;flex-direction:column;box-sizing:border-box}
.hm h2{font-size:19px;line-height:1.08;letter-spacing:-.042em}
.hm-meta{margin-top:8px;color:var(--ui-muted);font:500 9px Geist Mono,monospace}

.ladder{flex:1;margin-top:14px;display:flex;flex-direction:column;min-height:0}
.ladder-head,.rung{display:grid;grid-template-columns:minmax(0,1fr) 92px 52px;gap:12px;align-items:center;padding:0 10px}
.ladder-head{padding-bottom:6px;color:var(--ui-muted);font:500 8px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.09em}
.ladder-head span:nth-child(2),.ladder-head span:last-child{text-align:right}
.rung{position:relative;flex:1;min-height:34px;border-top:1px solid var(--ui-line);font-size:12px}
.rung::before{content:"";position:absolute;left:0;top:1px;bottom:0;width:var(--depth,0%);background:rgba(47,212,138,.045)}
.rung>*{position:relative}
.rung .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.rung .quote{text-align:right;color:var(--ui-muted);font:500 11px Geist Mono,monospace}
.rung .mid{text-align:right;color:var(--yes);font:600 13px Geist Mono,monospace}
.rung.short .mid{color:var(--no)}
.ladder-foot{margin-top:9px;padding:0 10px;display:flex;justify-content:space-between;color:var(--ui-muted);font:500 8px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.09em}
.splitbar{height:4px;margin-top:10px;display:flex;gap:2px;overflow:hidden;border-radius:99px}
.splitbar i:first-child{background:var(--yes)}
.splitbar i:last-child{background:var(--no)}

.underlying{margin-top:12px;display:flex;align-items:flex-end;justify-content:space-between}
.underlying strong{font:600 29px/1 Geist Mono,monospace;letter-spacing:-.03em}
.underlying div{text-align:right;color:var(--ui-muted);font:500 8px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.underlying div b{display:block;margin-top:4px;color:var(--ui-ink);font:500 12px Geist Mono,monospace;text-transform:none;letter-spacing:0}
.spark{position:relative;flex:1;min-height:56px;margin-top:10px}
.spark svg{width:100%;height:100%}
.spark path{fill:none;stroke:var(--yes);stroke-width:2.2;stroke-linecap:round}
.spark::after{content:"";position:absolute;left:0;right:0;top:52%;border-top:1px dashed rgba(255,255,255,.26)}

/* Order ticket. */
.ticket{height:100%;padding:14px;display:flex;flex-direction:column;box-sizing:border-box}
.ticket-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ticket-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:-.02em}
.ticket-head span{color:var(--yes);font:600 15px Geist Mono,monospace}
.ticket-rows{display:flex;flex-direction:column;flex:1;margin-top:12px;padding-bottom:10px}
.trow{flex:1;min-height:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ui-line);color:var(--ui-muted);font-size:10px}
.trow b{color:var(--ui-ink);font:500 11px Geist Mono,monospace}
.ticket-cta{width:100%;height:33px;margin-top:auto;border-radius:7px;background:var(--yes);color:#07130f;font-size:10px;font-weight:600}

/* Watchlist. */
.watchlist{height:100%;padding:12px;display:flex;flex-direction:column;box-sizing:border-box}
.watch-head{display:flex;align-items:center;justify-content:space-between;color:var(--ui-muted);font:500 8px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.09em}
.watch-rows{flex:1;margin-top:5px;display:flex;flex-direction:column;min-height:0}
.wrow{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 52px 44px;gap:10px;align-items:center;border-top:1px solid var(--ui-line);font-size:11px}
.wrow .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .chg{text-align:right;font:500 10px Geist Mono,monospace}
.wrow .chg.up{color:var(--yes)}
.wrow .chg.down{color:var(--no)}
.wrow .px{text-align:right;font:600 12px Geist Mono,monospace}

/* Open position. */
.position{height:100%;padding:12px;display:flex;flex-direction:column;box-sizing:border-box}
.position-label{color:var(--ui-muted);font:500 8px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.09em}
.position-name{margin-top:7px;font-size:15px;font-weight:500;letter-spacing:-.03em}
.position-rows{margin-top:auto;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:9px}
.position-rows div{color:var(--ui-muted);font:500 7px Geist Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.position-rows b{display:block;margin-top:4px;color:var(--ui-ink);font:500 12px Geist Mono,monospace;text-transform:none;letter-spacing:0}
.position-rows .up b{color:var(--yes)}

/* Narrow desktop: same mosaic, wider cards against a smaller stage. */
@media(min-width:851px) and (max-width:1050px){
  .lead{left:6%;width:58%}
  .chart{width:60%}
  .odds{width:34%}
  .ticker{width:38%}
  .switcher{width:32%}
  .hm h2{font-size:16px}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 80px 46px;gap:9px}
  .wrow{grid-template-columns:minmax(0,1fr) 48px 40px;gap:8px}
  .underlying strong{font-size:24px}
}

/* The narrowest the mosaic goes: type steps down, layout does not change. */
@media(min-width:851px) and (max-width:920px){
  .hm h2{font-size:15px}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 72px 42px;gap:7px}
  .rung{font-size:11px}
  .rung .quote{font-size:10px}
  .wrow{grid-template-columns:minmax(0,1fr) 44px 38px;gap:6px;font-size:10px}
  .wrow .chg{font-size:9px}
  .wrow .px{font-size:11px}
  .ticket-head strong{font-size:11px}
  .ticket-head span{font-size:13px}
  .trow{font-size:9px}
  .trow b{font-size:10px}
  .position-rows b{font-size:11px}
}

/* ── Phone ────────────────────────────────────────────────────────────────
   The mosaic keeps its character here — floating panels, varied widths, real
   depth — but not its desktop geometry. Carried over unchanged, five cards
   land in a ~360px stage at 101-122px wide, and the measured result was text
   clipped in five places: "Buy France" in a 31px box, "+$15.00" in 23px, and
   every watchlist name cut mid-word. Three surfaces plus the scene control
   fit legibly at this width. The watchlist is the one that cannot, so below
   850px it is a desktop surface rather than a truncated one.                */
@media(max-width:850px){
  .hero{--stack:calc(100% - max(44px,env(safe-area-inset-left) + env(safe-area-inset-right) + 44px))}
  .site{width:100%;height:100svh;margin:0;border-radius:0}
  .hero{display:flex;flex-direction:column;height:100svh;min-height:0;padding:0 0 clamp(16px,4svh,34px);border-radius:0}
  .frame{inset:7px;border-radius:15px}
  nav{flex:0 0 auto;height:clamp(56px,8.3svh,70px);padding-right:max(18px,env(safe-area-inset-right));padding-left:max(22px,env(safe-area-inset-left))}
  .navactions{gap:8px}
  .contact-btn,.access{padding:9px 13px;font-size:11px}
  .access{white-space:nowrap}
  .contact-menu{width:224px}
  .copy{position:relative;z-index:7;left:auto;top:auto;flex:0 0 auto;width:var(--stack);margin:clamp(8px,2.2svh,22px) auto 0;padding:0;transform:none}
  h1{font-size:clamp(36px,min(11.4vw,6.8svh),52px)}
  .stage{position:relative;z-index:6;left:auto;right:auto;top:auto;bottom:auto;flex:1 1 auto;min-height:0;width:var(--stack);height:auto;margin:clamp(26px,4.2svh,42px) auto 0;transform:none}
  .tagline{position:relative;z-index:7;left:auto;bottom:auto;flex:0 0 auto;width:var(--stack);margin:clamp(16px,2.6svh,26px) auto 0;padding:0;transform:none;font-size:12px}

  /* Four bands. No card is laid over another card's text. */
  .switcher{top:0;right:0;left:auto;width:66%;height:7%;min-height:0}
  .lead{top:9%;left:0;width:100%;height:42%}
  .odds{top:52.6%;right:0;left:auto;width:80%;height:34%}
  .ticker{top:88%;left:0;right:auto;bottom:auto;width:78%;height:12%}
  .chart{display:none}

  /* The switcher is a scene control at this width, not a panel: the search
     field and the market count are desktop affordances and only crowd it. */
  .switcher .surface{padding:4px;border-radius:999px}
  .market-search,.market-count{display:none}
  .tabs{height:100%;margin-top:0;gap:3px}
  .tabs button{height:100%;min-height:22px;font-size:9px;border-radius:999px}

  .hm{padding:15px}
  .ticket,.position{padding:11px}
  .hm h2{font-size:15px}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 82px 44px;gap:8px;padding:0 6px}
  .rung{min-height:24px;font-size:11px}

  .ticket-head strong{font-size:12px}
  .ticket-rows{display:flex;flex-direction:column;flex:1;margin-top:8px;padding-bottom:9px}
  .ticket .trow{flex:1;height:auto;min-height:17px;font-size:10px}
  .ticket-cta{height:28px}

  /* The position card is a strip here: stacked, it needs height this band
     does not have, and the three stats read fine on one line. */
  .position{flex-direction:row;align-items:center;gap:10px;padding:0 12px}
  .position-label{display:none}
  .position-name{margin-top:0;font-size:14px;white-space:nowrap}
  .position-rows{margin:0 0 0 auto;grid-template-columns:repeat(3,auto);gap:14px;text-align:right}
}
@media(max-width:340px){
  nav{padding-right:max(14px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}
  .brand{gap:7px;font-size:17px}
  .brand img{width:23px;height:23px}
  .navactions{gap:6px}
  .contact-btn,.access{padding:8px 10px;font-size:10px}
  .hero{--stack:calc(100% - max(32px,env(safe-area-inset-left) + env(safe-area-inset-right) + 32px))}
  h1{font-size:36px}
  .odds,.ticker{width:88%}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 72px 38px;gap:6px}
  .position-rows{gap:10px}
}
/* Short phones: the four bands stay, the type inside them compacts. */
@media(max-width:850px) and (max-height:720px){
  .switcher{height:9%}
  .lead{top:11%;height:37%}
  .odds{top:50%;height:37%}
  .ticker{top:88.5%;height:11.5%}
  .tabs button{min-height:20px;font-size:7px}
  .copy{margin-top:clamp(4px,1.4svh,14px)}
  h1{font-size:clamp(31px,min(10.2vw,6.1svh),48px)}
  .stage{margin-top:clamp(26px,3.8svh,32px)}
  .tagline{margin-top:clamp(10px,1.8svh,18px);font-size:11px}
  .hm{padding:11px}
  .ticket,.position{padding:8px}
  .hm h2{font-size:13px;line-height:1.06}
  .hm-meta{margin-top:4px;font-size:7px}
  .ladder{margin-top:7px}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 66px 38px;gap:6px;padding:0 4px}
  .ladder-head{padding-bottom:3px;font-size:6px}
  .rung{min-height:16px;font-size:9px}
  .rung .quote{font-size:8px}
  .rung .mid{font-size:10px}
  .ladder-foot{margin-top:4px;padding:0 4px;font-size:6px}
  .splitbar{margin-top:5px}
  .switcher .surface{padding:3px}
  .tabs button{min-height:20px;font-size:7px}
  .ticket-head strong{font-size:10px}
  .ticket-head span{font-size:11px}
  .ticket-rows{margin-top:4px;padding-bottom:6px}
  .ticket .trow{min-height:13px;font-size:8px}
  .trow b{font-size:8px}
  .ticket-cta{height:19px;font-size:8px}
  .position{padding:0 9px;gap:7px}
  .position-name{font-size:11px}
  .position-rows{gap:9px}
  .position-rows div{font-size:6px}
  .position-rows b{margin-top:2px;font-size:9px}
}
@media(orientation:landscape) and (max-height:560px) and (min-width:851px){
  .stage{height:calc(100svh - 112px);transform:translateY(-50%)}
  .switcher,.chart{display:none}
  .lead{left:0;top:0;width:60%;height:100%;min-height:0}
  .odds{right:0;left:auto;top:0;width:38%;height:66%;min-height:0}
  .ticker{right:0;left:auto;top:auto;bottom:0;width:38%;height:30%;min-height:0}
  .position{padding:10px}
  .position-label{font-size:6px}
  .position-name{margin-top:4px;font-size:12px}
  .position-rows{gap:6px}
  .position-rows div{font-size:6px}
  .hm{padding:13px}
  .hm h2{font-size:14px;line-height:1.08}
  .hm-meta{margin-top:5px;font-size:7px}
  .ladder{margin-top:9px}
  .ladder-head,.rung{grid-template-columns:minmax(0,1fr) 70px 40px;gap:7px}
  .rung{min-height:20px;font-size:10px}
  .rung .quote{font-size:9px}
  .rung .mid{font-size:11px}
  .ticket .trow{min-height:16px;font-size:9px}
  .ticket-cta{height:26px}
  .position-rows b{margin-top:2px;font-size:10px}
}
@media(max-width:850px) and (max-height:500px) and (orientation:landscape){
  h1{font-size:clamp(22px,5svh,34px)}
  .copy{margin-top:8px}
  .stage{margin-top:24px}
  .tagline{margin-top:12px;font-size:10px}
  .switcher{display:none}
  .lead{top:0;left:0;width:58%;height:100%}
  .odds{top:0;right:0;left:auto;width:40%;height:74%}
  .ticker{top:auto;bottom:0;left:auto;right:0;width:40%;height:22%}
}
@media(prefers-reduced-motion:reduce){.world,.window,.surface,.spark path{transition:none;animation:none}}