/* The marketing site's stylesheet.
   Extracted from index.html when the pricing page needed the same design.
   Duplicating thirty thousand characters into a second page is how two pages
   drift apart: a token changes in one, the other keeps the old value, and
   nobody notices until they sit side by side. One file, every page.
   Not part of the app — static/style.css is the terminal's, and the two are
   deliberately separate design surfaces. */

:root{
 --void:#04060F; --surf:#0A0F1E; --rise:#111827; --line:#1B2437; --line2:#28344C;
 --ion:#4C8DFF; --ion-d:#2F6FE0; --up:#2FBF71; --dn:#E5484D; --amber:#E5A94F;
 --fg:#F2F5FA; --mid:#98A5BC; --dim:#69768E; --faint:#4C5872;
 --disp:'Exo 2',system-ui,sans-serif; --ui:'Inter',system-ui,sans-serif;
 --mono:'JetBrains Mono',ui-monospace,monospace;
 --g:clamp(20px,5vw,52px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--fg);font-family:var(--ui);font-weight:400;
 font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#sky{position:fixed;inset:0;z-index:-2}
body::before{content:"";position:fixed;top:-28vh;left:-14vw;width:88vw;height:104vh;z-index:-1;
 pointer-events:none;background:radial-gradient(ellipse at 34% 36%,
 rgba(58,106,255,.26) 0%, rgba(34,64,178,.11) 36%, rgba(4,6,15,0) 68%)}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:200;letter-spacing:-.03em;text-wrap:balance}
p{margin:0} a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--g)}
.mid{color:var(--mid)}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400}

/* Gradient text is painted only inside the line box, so at a tight line
   height the descenders of g, p and y fall outside it and vanish. The
   padding extends the paint under them; the margin gives the space back. */
.silver{background:linear-gradient(174deg,#FFF 2%,#C6D0E4 48%,#7A88A6 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
 padding-bottom:.14em;margin-bottom:-.14em}

.topbar{position:relative;z-index:70;text-align:center;padding:9px 16px;font-size:13px;
 background:linear-gradient(90deg,#16295E,#2E56C8 48%,#16295E);color:#E3ECFF}
.topbar b{font-weight:600;color:#fff}
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
 gap:20px;padding:12px var(--g);background:rgba(4,6,15,.74);backdrop-filter:blur(16px) saturate(160%);
 -webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(27,36,55,.9)}
.links{display:none;gap:28px;font-size:14px;color:var(--mid)}
@media(min-width:920px){.links{display:flex}}
.links a{transition:color .18s} .links a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-family:var(--ui);
 font-size:14px;font-weight:500;padding:9px 18px;border:1px solid transparent;cursor:pointer;
 transition:background .18s,border-color .18s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ion);outline-offset:2px}
.p{background:var(--ion);color:#04060F;font-weight:600} .p:hover{background:#6BA1FF}
.g{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--fg)}
.g:hover{background:rgba(255,255,255,.1)}
.lg{font-size:15px;padding:12px 26px}

.hero{padding:clamp(52px,8vw,92px) 0 0;text-align:center}
.hero h1{font-size:clamp(2.25rem,5.6vw,4.15rem);line-height:1.04;max-width:16ch;margin:0 auto}
.hero .sub{margin:22px auto 0;max-width:56ch;font-size:clamp(1rem,1.3vw,1.12rem);color:var(--mid)}
.cta{display:flex;gap:10px;margin-top:30px;justify-content:center;flex-wrap:wrap}
.note{margin-top:22px;font-size:13px;color:var(--faint)}

/* the product window — the page's one loud element */
.app{text-align:left;margin:clamp(40px,5vw,64px) auto 0;max-width:1080px;border-radius:12px;overflow:hidden;
 border:1px solid var(--line2);background:var(--surf);
 box-shadow:0 60px 130px -50px #000,0 0 0 1px rgba(255,255,255,.03) inset}
.app-top{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);
 background:rgba(255,255,255,.02)}
.app-top .who{font-size:12px;color:var(--dim)}
.tile{background:var(--surf);display:flex;flex-direction:column;min-height:132px}
.tile.w2{grid-column:span 2}
.th{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;
 border-bottom:1px solid var(--line)}
.th h4{margin:0;font-family:var(--ui);font-size:11.5px;font-weight:500;color:var(--mid)}
.tb{padding:12px;flex:1} .tb.pad0{padding:0;display:flex;align-items:center}
.tb .val{font-family:var(--mono);font-size:1.5rem;font-weight:400;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;line-height:1}
.tnote{margin-top:8px;font-size:11px;color:var(--dim);line-height:1.45}
.tfoot{display:flex;gap:12px;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--line);
 font-family:var(--mono);font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.tb.news{padding:4px 0}
.nrow{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:start;padding:7px 12px;
 border-bottom:1px solid rgba(27,36,55,.55)}
.nrow:last-child{border-bottom:0}
.ntime{font-family:var(--mono);font-size:10px;color:var(--faint);padding-top:1px}
.nrow p{font-size:11.5px;line-height:1.4;color:var(--mid)}
.ntag{font-family:var(--mono);font-size:9px;color:var(--ion);opacity:.8;padding-top:1px;white-space:nowrap}
.app-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
@media(min-width:860px){.app-grid{grid-template-columns:1.9fr 1fr}}
.pane{background:var(--surf);padding:0}
.pane-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
 border-bottom:1px solid var(--line)}
.pane-h h4{margin:0;font-size:12.5px;font-weight:500;color:var(--mid);font-family:var(--ui)}
.chip{font-size:10.5px;padding:3px 8px;border-radius:5px;border:1px solid var(--line2);color:var(--dim)}
.chip.live{color:var(--up);border-color:rgba(47,191,113,.3);background:rgba(47,191,113,.08)}
.chip.warn{color:var(--amber);border-color:rgba(229,169,79,.32);background:rgba(229,169,79,.09)}
.chart-wrap{padding:0} .chart-wrap svg{display:block;height:250px;width:100%}
.readout{display:flex;gap:22px;padding:11px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.readout div{font-size:11px;color:var(--dim)}
.readout b{display:block;font-family:var(--mono);font-size:14px;color:var(--fg);font-weight:400;
 font-variant-numeric:tabular-nums;margin-top:3px}
.side-pane{display:flex;flex-direction:column}
.blk{padding:14px;border-bottom:1px solid var(--line)}
.blk:last-child{border-bottom:0}
.blk .lbl{font-size:11.5px;color:var(--dim)}
.blk .val{font-family:var(--mono);font-size:1.6rem;font-weight:400;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;margin-top:5px;line-height:1}
.val.amber{color:var(--amber)} .val.ion{color:#8FB7FF} .val.up{color:var(--up)}
.mini{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;color:var(--dim)}
.mini b{font-family:var(--mono);color:var(--fg);font-weight:400;font-variant-numeric:tabular-nums}
.capt{text-align:center;font-size:12px;color:var(--faint);margin-top:14px}

/* product window: the real app's rail, tabs and panels, hand-drawn */
.app-top .tbtn{font-size:10.5px;padding:3px 8px;border-radius:5px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap}
.app-top .tbtn kbd{font-family:var(--mono);font-size:9px;color:var(--faint);margin-left:4px}
.app-top .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.app-top .live{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 6px rgba(47,191,113,.7)}
.app-body{display:grid;grid-template-columns:1fr}
@media(min-width:860px){.app-body{grid-template-columns:146px 1fr}}
.rail{display:flex;gap:2px;padding:7px 8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:rgba(4,6,15,.5)}
.rail::-webkit-scrollbar{display:none}
@media(min-width:860px){.rail{flex-direction:column;border-bottom:0;border-right:1px solid var(--line);padding:10px 8px;overflow:visible}}
.rail span{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--dim);
 padding:6px 10px;border-radius:6px;white-space:nowrap}
.rail span i{width:9px;height:9px;border:1px solid currentColor;border-radius:2px;opacity:.55;flex:none}
.rail span.on{background:rgba(76,141,255,.14);color:#9CC0FF}
.rail span.on em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;background:rgba(76,141,255,.24);border-radius:8px;padding:1px 6px}
.rail .add{display:none;margin-top:8px;border:1px dashed var(--line2);border-radius:6px;text-align:center;color:var(--faint);font-size:12px;padding:2px}
@media(min-width:860px){.rail .add{display:block}}
.mosaic{display:grid;grid-template-columns:1fr;gap:0;background:var(--surf)}
@media(min-width:640px){.mosaic{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mosaic{grid-template-columns:repeat(4,1fr)}}
.tile{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile.asset{grid-column:1/-1;background:linear-gradient(180deg,rgba(76,141,255,.07),rgba(76,141,255,0) 70%)}
.tile.asset .tb{padding:16px 18px 14px}
.tile.asset .spark{margin:12px -18px 0} .tile.asset .spark .cap{padding:4px 18px 0}
.tile.asset .spark svg{flex:none;min-height:150px;height:clamp(150px,18vw,240px)}
.tile.asset .stat4{margin-top:12px}
.tile.asset .stat4 div{padding:8px 12px} .tile.asset .stat4 b{font-size:14px}
.app{scroll-margin-top:72px}
.acch2{font-size:9.5px;color:var(--faint);padding:0 0 4px;text-align:right}
.acc2{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(27,36,55,.6);font-size:11px}
.acc2:last-child{border-bottom:0}
.acc2 .nm{color:var(--fg);font-weight:500;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.acc2 .nm small{font-size:8.5px;font-weight:600;letter-spacing:.06em;color:#9CC0FF;background:rgba(76,141,255,.16);border-radius:3px;padding:1px 5px}
.acc2 .nm small.f{color:var(--up);background:rgba(47,191,113,.13)} .acc2 .nm small.p{color:var(--amber);background:rgba(229,169,79,.13)}
.acc2 .nm em{font-style:normal;color:var(--dim);font-size:10px;flex-basis:100%;line-height:1.2}
.acc2 b{font-family:var(--mono);font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums;flex:none}
.sym{display:flex;align-items:baseline;gap:8px}
.sym b{font-family:var(--disp);font-weight:400;font-size:17px;color:var(--fg);letter-spacing:.01em}
.sym span{font-size:11px;color:var(--dim)}
.px{font-family:var(--disp);font-weight:300;font-size:clamp(2.3rem,4.4vw,3.6rem);letter-spacing:-.02em;line-height:1.05;margin-top:4px;
 font-variant-numeric:tabular-nums;color:#fff}
.pxrow{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap;font-size:10.5px;color:var(--dim)}
.pill{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:5px}
.pill.dn{color:var(--dn);background:rgba(229,72,77,.13)} .pill.up{color:var(--up);background:rgba(47,191,113,.13)}
.sess{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--up);border:1px solid rgba(47,191,113,.35);border-radius:4px;padding:1px 6px}
.tile.asset .tb{display:flex;flex-direction:column}
.spark{margin:10px -12px 0;position:relative;flex:1;display:flex;flex-direction:column;min-height:90px} .spark svg{display:block;flex:1;min-height:74px;width:100%}
.tile .tb.fill{display:flex;flex-direction:column} .tb.fill .grow{flex:1}
.spark .cap{display:flex;justify-content:space-between;padding:4px 12px 0;font-size:9.5px;color:var(--faint)}
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.stat4 div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.stat4 span{display:block;font-size:9.5px;color:var(--dim)} .stat4 b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--fg);font-variant-numeric:tabular-nums}
@media(max-width:520px){.stat4{grid-template-columns:repeat(2,1fr)}}
.acc{display:grid;grid-template-columns:1.5fr 1fr .9fr 1fr;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid rgba(27,36,55,.6);font-size:11px}
.acc:last-child{border-bottom:0}
.acc .nm{color:var(--fg);font-weight:500;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.acc .nm small{font-size:9px;font-weight:600;letter-spacing:.06em;color:#9CC0FF;background:rgba(76,141,255,.16);border-radius:3px;padding:1px 5px}
.acc .nm small.f{color:var(--up);background:rgba(47,191,113,.13)} .acc .nm small.p{color:var(--amber);background:rgba(229,169,79,.13)}
.acc .nm em{font-style:normal;color:var(--dim);font-size:10.5px;flex-basis:100%}
.acc b{font-family:var(--mono);font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums;display:block}
.acc span{color:var(--dim);font-size:9.5px;display:block}
.acch{display:grid;grid-template-columns:1.5fr 1fr .9fr 1fr;gap:8px;padding:6px 12px 3px;font-size:9.5px;color:var(--faint)}
.limit{padding:8px 12px 10px;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim)}
.limit .bar2{height:4px;border-radius:2px;background:var(--line2);margin:6px 0 4px;overflow:hidden}
.limit .bar2 i{display:block;height:100%;width:58%;background:var(--ion);border-radius:2px}
.limit .ends{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint)}
.nx{font-size:12.5px;color:var(--fg);font-weight:500;display:flex;gap:6px;align-items:center}
.nx .tier{font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--amber);border:1px solid rgba(229,169,79,.4);border-radius:3px;padding:1px 5px}
.nxw{font-size:10.5px;color:var(--dim);margin-top:2px}
.nx3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.nx3 div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:6px 7px}
.nx3 span{display:block;font-size:9px;color:var(--dim)} .nx3 b{font-family:var(--mono);font-weight:400;font-size:12.5px;color:var(--fg)}
.nx3 b.ion{color:#8FB7FF}
.nx3 b{white-space:nowrap;font-size:12px} .nx3 div{padding:6px 5px}
.wrow{padding:7px 12px;border-bottom:1px solid rgba(27,36,55,.55)} .wrow:last-child{border-bottom:0}
.wrow p{font-size:11.5px;line-height:1.35;color:var(--fg)}
.wmeta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:9.5px;color:var(--dim)}
.wmeta .src{color:var(--mid);font-weight:500}
.tag{font-family:var(--mono);font-size:9px;color:#8FB7FF;border:1px solid rgba(76,141,255,.35);border-radius:3px;padding:0 5px}
.days{display:flex;gap:3px} .days span{font-size:9.5px;padding:2px 7px;border-radius:4px;color:var(--dim);border:1px solid var(--line)}
.days span.on{color:#9CC0FF;background:rgba(76,141,255,.14);border-color:rgba(76,141,255,.3)}
.crow{display:grid;grid-template-columns:44px 30px 22px 1fr auto;gap:7px;align-items:center;padding:6px 12px;border-bottom:1px solid rgba(27,36,55,.55);font-size:10.5px}
.crow:last-child{border-bottom:0}
.crow .t{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.crow .ccy{font-family:var(--mono);font-size:9px;color:#8FB7FF;border:1px solid rgba(76,141,255,.35);border-radius:3px;text-align:center;padding:0 2px}
.crow .ev{color:var(--fg)} .crow .fc{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.imp{display:inline-flex;gap:2px} .imp i{width:4px;height:10px;border-radius:1px;background:var(--line2)}
.imp.g i:first-child{background:var(--up)}
.imp.y i:nth-child(-n+2){background:var(--amber)}
.imp.r i{background:var(--dn)}
.ctool{display:flex;gap:4px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ctool .box{font-family:var(--mono);font-size:10.5px;color:var(--fg);border:1px solid var(--line2);border-radius:5px;padding:2px 8px;background:rgba(255,255,255,.03)}
.ctool .grp{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.ctool .grp span{font-size:9.5px;padding:2px 6px;color:var(--dim);border-right:1px solid var(--line)} .ctool .grp span:last-child{border-right:0}
.ctool .grp span.on{background:var(--ion);color:#04060F;font-weight:600}
.ctool .b{font-size:9.5px;padding:2px 7px;border:1px solid var(--line2);border-radius:5px;color:var(--fg)}
.ctool .sp{flex:1}
.cwrap{position:relative;display:grid;grid-template-columns:1fr 58px}
.cwrap svg{display:block;width:100%;height:190px}
.legend{position:absolute;left:10px;top:8px;font-size:9.5px;color:var(--dim);display:grid;gap:2px;pointer-events:none}
.legend b{font-family:var(--disp);font-weight:400;font-size:12px;color:var(--fg)}
.legend .r{font-family:var(--mono);font-variant-numeric:tabular-nums} .legend .dn{color:var(--dn)}
.legend i{display:inline-block;width:8px;height:2px;vertical-align:middle;margin-right:5px}
.axis{position:relative;border-left:1px solid var(--line);font-family:var(--mono);font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.axis span{position:absolute;left:6px;transform:translateY(-50%)}
.axis span.last{color:#fff;background:var(--dn);border-radius:3px;padding:1px 4px;left:3px}
.cfoot{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-top:1px solid var(--line);font-size:9.5px;color:var(--faint);flex-wrap:wrap}
.frow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 12px;border-bottom:1px solid rgba(27,36,55,.55);font-size:11px}
.frow:last-child{border-bottom:0}
.frow .fn{display:flex;align-items:center;gap:7px;color:var(--fg)}
.flg{width:18px;height:18px;border-radius:4px;background:var(--rise);border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;
 font-family:var(--disp);font-size:9.5px;font-weight:400;color:var(--mid);flex:none}
.frow .tp{font-family:var(--mono);font-size:10.5px;color:var(--fg);font-variant-numeric:tabular-nums}
.frow .tp small{color:var(--faint);font-size:9px}
.off{font-size:8.5px;font-weight:600;letter-spacing:.05em;color:#04060F;background:#8FB7FF;border-radius:3px;padding:1px 5px;white-space:nowrap}
.proof{display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--dim)}
.proof span{display:inline-flex;align-items:center;gap:8px}
.proof b{font-family:var(--mono);font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums}
.proof i{width:5px;height:5px;border-radius:50%;background:var(--ion);display:inline-block;flex:none}
@media(max-width:560px){.proof{flex-direction:column;align-items:center;gap:6px} .proof span{text-align:center} .proof i{display:none}}

/* prop firm filter section */
.fp{ text-align:left;margin-top:40px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surf);
 box-shadow:0 50px 110px -50px #000}
.fp-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fp-h h4{margin:0;font-size:13px;font-weight:500;color:var(--mid);font-family:var(--ui)}
.fp-h .k{font-size:10px;font-weight:600;letter-spacing:.09em;color:#9CC0FF}
.seg{display:flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden;margin-left:auto}
.seg span{font-size:12px;padding:4px 14px;color:var(--dim)} .seg span.on{background:var(--ion);color:#04060F;font-weight:600}
.fp-f{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line);align-items:center}
.sel{font-size:12px;color:var(--mid);border:1px solid var(--line2);border-radius:7px;padding:6px 12px;background:rgba(255,255,255,.03);display:inline-flex;gap:14px;align-items:center}
.sel:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg) translateY(-2px)}
.pol{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mid)}
.pol .lb{font-weight:500;color:var(--fg)}
.pol span{display:inline-flex;gap:6px;align-items:center}
.pol i{width:12px;height:12px;border:1px solid var(--line2);border-radius:3px;background:rgba(255,255,255,.04)}
.pol i.on{background:var(--ion);border-color:var(--ion);position:relative}
.pol i.on:after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:6px;border-right:1.5px solid #04060F;border-bottom:1.5px solid #04060F;transform:rotate(45deg)}
.ask{display:flex;gap:10px;align-items:center;margin:12px 16px;border:1px solid rgba(76,141,255,.35);border-radius:999px;padding:6px 8px 6px 14px;background:rgba(76,141,255,.06)}
.ask .plus{width:22px;height:22px;border-radius:50%;background:var(--ion);color:#04060F;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.ask p{flex:1;font-size:13px;color:var(--dim)}
.ask .mic{width:14px;height:14px;color:var(--dim);flex:none}
.ask .go{font-size:12px;font-weight:600;color:#04060F;background:var(--ion);border-radius:999px;padding:5px 14px}
.fp table{min-width:640px}
.fp td{white-space:normal}
.fp .fn{display:flex;align-items:center;gap:9px;color:var(--fg);font-weight:500;white-space:nowrap}
.fp .fn .flg{width:26px;height:26px;font-size:11px}
.fp td.tp{font-family:var(--mono);color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.fp td.tp small{color:var(--faint);font-size:11px;margin-left:4px}
.dd{font-size:11px;padding:2px 8px;border-radius:4px;border:1px solid var(--line2);color:var(--mid);white-space:nowrap}
.code{font-family:var(--mono);font-size:11px;color:#9CC0FF;border:1px solid rgba(76,141,255,.35);border-radius:4px;padding:1px 7px;white-space:nowrap}
.code+small{color:var(--dim);font-size:11px;margin-left:6px;white-space:nowrap}
.pick{width:13px;height:13px;border:1px solid var(--line2);border-radius:3px;display:inline-block;vertical-align:middle;background:rgba(255,255,255,.04)}
.pick.on{background:var(--ion);border-color:var(--ion)}
.match{border-top:1px solid var(--line);padding:14px 16px}
.match h5{margin:0 0 10px;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--mid);display:flex;gap:10px;align-items:center}
.match h5 span{font-size:11px;color:var(--faint);font-weight:400}
.mgrid{display:grid;grid-template-columns:110px repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px}
.mgrid div{background:var(--surf);padding:7px 10px;color:var(--mid)}
.mgrid div.hd{color:var(--fg);font-weight:500;background:var(--rise)}
.mgrid div.lb{color:var(--dim)}
.mgrid .n{color:var(--fg)}
@media(max-width:640px){.mgrid{grid-template-columns:90px repeat(3,1fr);font-size:11px} .mgrid div{padding:6px 7px}}
.fp-note{padding:12px 16px 14px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--mid)}
.fp-note b{color:var(--fg);font-weight:500}
.deal{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mid)}
.deal .k{font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--dim)}
.deal span.d{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:7px;padding:5px 10px;background:rgba(255,255,255,.02)}
.deal span.d small{font-family:var(--mono);color:var(--amber);font-size:10.5px}

section{padding:clamp(60px,7.5vw,100px) 0}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.12}
.lead{margin-top:16px;color:var(--mid);max-width:58ch;font-size:1.02rem}
.ctr{text-align:center} .ctr .lead{margin-left:auto;margin-right:auto}

/* six tools — icon-led, not identical text cards */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:44px;text-align:left}
.tool{position:relative;padding:26px 24px 26px 66px;border-radius:10px;
 background:linear-gradient(180deg,rgba(17,24,39,.86),rgba(10,15,30,.86));
 border:1px solid var(--line);transition:border-color .22s,background .22s}
.tool-key{border-color:rgba(76,141,255,.4);
 background:linear-gradient(180deg,rgba(30,54,124,.34),rgba(11,17,34,.9))}
.tool-key .ic{color:#8FB7FF}
.tool .only{position:absolute;top:16px;right:16px;font-size:10px;font-weight:600;
 letter-spacing:.04em;color:#9CC0FF;background:rgba(76,141,255,.16);
 border:1px solid rgba(76,141,255,.3);border-radius:999px;padding:2px 9px}
.tool:hover{border-color:var(--line2);background:linear-gradient(180deg,rgba(21,30,48,.9),rgba(12,18,35,.9))}
.tool .ic{position:absolute;left:22px;top:26px;width:28px;height:28px;color:var(--ion);display:block}
.tool .ic svg{width:28px;height:28px;display:block}
.tool h3{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.tool p{margin-top:7px;font-size:13.5px;color:var(--dim);line-height:1.55}
.rollup{margin-top:20px;padding:22px 24px;border-radius:10px;border:1px solid rgba(76,141,255,.26);
 background:linear-gradient(180deg,rgba(38,72,175,.15),rgba(10,16,36,.5));text-align:left}
.rollup p{color:#C7D4EA;max-width:74ch} .rollup b{color:#fff;font-weight:600}

/* journal */
.jrn{text-align:left;margin-top:44px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surf);
 box-shadow:0 50px 110px -50px #000}
.jrn-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;
 border-bottom:1px solid var(--line);flex-wrap:wrap}
.jrn-h h4{margin:0;font-size:13px;font-weight:500;color:var(--mid);font-family:var(--ui)}
.jstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:1px;background:var(--line)}
.jstats div{background:var(--surf);padding:13px 16px}
.jstats span{font-size:11.5px;color:var(--dim)}
.jstats b{display:block;font-family:var(--mono);font-size:1.15rem;font-weight:400;margin-top:4px;
 font-variant-numeric:tabular-nums}
.agent-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px;text-align:left}
@media(min-width:960px){.agent-grid{grid-template-columns:1fr 1fr}}
.acard{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surf);
 box-shadow:0 40px 90px -46px #000;display:flex;flex-direction:column}
.apad{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.prompt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
 background:rgba(76,141,255,.07);border:1px solid rgba(76,141,255,.2);border-radius:9px;padding:11px 13px}
.you{font-size:10px;font-weight:600;color:var(--ion);background:rgba(76,141,255,.16);
 border-radius:4px;padding:2px 7px;letter-spacing:.02em}
.prompt p{font-size:13.5px;color:var(--fg);line-height:1.45}
.thinking{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--dim)}
.built{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(4,6,15,.5)}
.bars{padding:12px 13px;display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:42px 1fr 38px;gap:10px;align-items:center}
.bar span{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.bar i{height:7px;border-radius:3px;background:var(--ion);opacity:.55;display:block}
.bar i.best{opacity:1;background:var(--up)}
.bar b{font-family:var(--mono);font-size:11px;color:var(--fg);font-weight:400;text-align:right;
 font-variant-numeric:tabular-nums}
.installrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto}
.hint{font-size:11px;color:var(--faint);flex:1 1 100%}
.finding{display:grid;grid-template-columns:9px 1fr;gap:11px;align-items:start;
 padding:11px 0;border-bottom:1px solid rgba(27,36,55,.6)}
.finding:last-child{border-bottom:0}
.finding b{font-size:13px;color:var(--fg);font-weight:500;display:block}
.finding p{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:4px}
.tblwrap{overflow-x:auto;border-top:1px solid var(--line)}
.jsplit{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(min-width:820px){.jsplit{grid-template-columns:1fr 1fr}}
.jcurve,.jnotes{background:var(--surf);display:flex;flex-direction:column}
.jcurve .tb{flex:1;min-height:96px}
.jnote{display:grid;grid-template-columns:9px 1fr;gap:11px;align-items:start;padding:8px 0}
.jnote p{font-size:12.5px;color:var(--dim);line-height:1.5}
.jnote b{color:var(--fg);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;margin-top:6px}
.dot.ok{background:var(--up)} .dot.warn{background:var(--amber)}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:660px}
th{text-align:left;font-weight:500;font-size:11.5px;color:var(--faint);padding:10px 14px;
 border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid rgba(27,36,55,.6);color:var(--mid);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--fg);font-weight:400}
td.t{font-family:var(--mono);color:var(--dim)}
td.up{color:var(--up)} td.dn{color:var(--dn)}
.side{font-size:11px;padding:2px 8px;border-radius:4px}
.side.l{background:rgba(47,191,113,.13);color:var(--up)}
.side.s{background:rgba(229,72,77,.13);color:var(--dn)}

.split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:940px){.split{grid-template-columns:1fr 1fr} .split.rev>*:first-child{order:2}}
.split h3{font-size:clamp(1.4rem,2.3vw,1.85rem);line-height:1.16}
.split p{color:var(--mid);margin-top:15px;font-size:.98rem;max-width:52ch}
.split p b{color:var(--fg);font-weight:500}

.no{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0;margin-top:40px;text-align:left}
.no div{padding:22px 24px;border-top:1px solid var(--line)}
.no h4{margin:0 0 7px;font-size:14.5px;font-weight:600;color:var(--fg);font-family:var(--ui)}
.no p{font-size:13.5px;color:var(--dim);line-height:1.55}

footer{border-top:1px solid var(--line);padding:40px 0 52px}
.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.foot p{color:var(--faint);font-size:12.5px}

/* one orchestrated entrance, not a fade on every element */
.enter{opacity:0;transform:translateY(14px)}
.loaded .enter{opacity:1;transform:none;
 transition:opacity .7s cubic-bezier(.2,.6,.35,1),transform .7s cubic-bezier(.2,.6,.35,1)}
.loaded .enter:nth-child(2){transition-delay:.07s}
.loaded .enter:nth-child(3){transition-delay:.14s}
.loaded .app{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto} .enter{opacity:1;transform:none;transition:none} .btn{transition:none}}
@media(prefers-reduced-transparency:reduce){.nav{background:var(--void);backdrop-filter:none}}

/* The CTAs became links when there was somewhere to send people. An <a> has no
   button reset, so without this they render as underlined text baseline-aligned
   to the paragraph rather than as the buttons they are styled to be. */
a.btn { display:inline-flex; align-items:center; justify-content:center;
        text-decoration:none; }


/* The firm marks are the firms' own artwork: different aspect ratios, some with
   their own background, one an SVG. object-fit:contain keeps each one whole
   rather than stretching a wordmark into a square, and the tile behind it gives
   the ragged ones a consistent edge. */
img.flg{object-fit:contain;padding:1px;background:#fff0;flex:0 0 auto}
.fp .fn img.flg{padding:2px}


/* ==========================================================================
   Mobile navigation
   --------------------------------------------------------------------------
   .links is display:none below 920px and there was nothing in its place, so on
   a phone the only reachable pages were the two buttons — Pricing, Firms,
   Journal and Affiliate simply did not exist. This is the menu that was
   missing.
   ========================================================================== */
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
 border-radius:8px;border:1px solid var(--line2);background:rgba(255,255,255,.05);
 color:var(--fg);cursor:pointer;padding:0;transition:background .18s,transform .1s}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.menu-btn:active{transform:scale(.95)}
.menu-btn:focus-visible{outline:2px solid var(--ion);outline-offset:2px}
@media(min-width:920px){.menu-btn{display:none}}

/* The two bars become an X. Transform only, so it runs off the main thread. */
.menu-btn rect{transform-origin:center;transition:transform .22s cubic-bezier(.23,1,.32,1),
 opacity .16s linear}
.menu-btn[aria-expanded="true"] rect:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] rect:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-nav{position:sticky;top:57px;z-index:59;display:block;overflow:hidden;
 background:rgba(4,6,15,.94);backdrop-filter:blur(16px) saturate(160%);
 -webkit-backdrop-filter:blur(16px) saturate(160%);
 border-bottom:1px solid rgba(27,36,55,0);
 /* grid-template-rows 0fr -> 1fr animates a height the content decides, with no
    magic pixel number to go stale when a link is added. */
 display:grid;grid-template-rows:0fr;
 transition:grid-template-rows .26s cubic-bezier(.23,1,.32,1),
            border-color .26s linear}
.mobile-nav[data-open="true"]{grid-template-rows:1fr;border-bottom-color:rgba(27,36,55,.9)}
.mobile-nav > div{min-height:0}
.mobile-nav a{display:block;padding:13px var(--g);font-size:15px;color:var(--mid);
 border-bottom:1px solid rgba(27,36,55,.5);transition:color .16s,background .16s}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--fg);background:rgba(255,255,255,.04)}
@media(min-width:920px){.mobile-nav{display:none}}

/* ==========================================================================
   Scroll reveals
   --------------------------------------------------------------------------
   The hero staggers in on load and everything below it simply appeared. These
   are marketing animations rather than UI ones, so they can run longer than the
   300ms an interface should stay under — but still ease-out, still transitions
   rather than keyframes so a fast scroll retargets instead of restarting, and
   still once each.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);
 transition:opacity .62s cubic-bezier(.23,1,.32,1),transform .62s cubic-bezier(.23,1,.32,1)}
.reveal.in{opacity:1;transform:none}
/* Within a group, 60ms apart: reads as a cascade without making the last card
   feel late. Applied as a custom property so the JS sets one number. */
.reveal{transition-delay:calc(var(--i,0) * 60ms)}

@media(prefers-reduced-motion:reduce){
 .reveal{opacity:1;transform:none;transition:none}
 .mobile-nav{transition:none}
 .menu-btn rect{transition:none}
}


/* ==========================================================================
   Affiliate steps
   --------------------------------------------------------------------------
   .aff had no rule at all, so three .tool cards stacked full width — each with
   .tool's 66px of left padding, which is reserved for an icon these cards do
   not have. Three tall boxes with an empty gutter down the left.

   They are a sequence, so the number is the anchor: ask, share, get paid. On a
   phone they stack and the numbers keep the order legible.
   ========================================================================== */
.steps{display:grid;gap:16px;text-align:left;margin-top:34px}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:18px}}

.step{position:relative;padding:26px 24px;border-radius:12px;
 background:linear-gradient(180deg,rgba(17,24,39,.86),rgba(10,15,30,.86));
 border:1px solid var(--line);
 transition:border-color .22s,background .22s,transform .22s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
 .step:hover{border-color:var(--line2);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(21,30,48,.9),rgba(12,18,35,.9))}
}
.step.key{border-color:rgba(76,141,255,.4);
 background:linear-gradient(180deg,rgba(30,54,124,.34),rgba(11,17,34,.9))}

.step .num{display:inline-flex;align-items:center;justify-content:center;
 width:26px;height:26px;border-radius:7px;margin-bottom:14px;
 font-family:var(--mono);font-size:12px;font-weight:500;
 background:rgba(76,141,255,.14);border:1px solid rgba(76,141,255,.3);color:#9CC0FF}
.step h3{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:0;
 margin-bottom:8px;color:var(--fg)}
.step p{font-size:14px;color:var(--mid);line-height:1.6}
.step ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.step li{font-size:14px;color:var(--mid);line-height:1.55;
 padding-left:14px;position:relative}
.step li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
 border-radius:50%;background:var(--ion);opacity:.7}
.step li b{color:var(--fg);font-weight:600}


/* A roadmap line inside a feature card. Dimmer than the shipped copy on purpose:
   it must never read as something you can use today. */
.tool .soon{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
 font-size:13px;color:var(--dim)}
.tool .soon b{color:#9CC0FF;font-weight:600}
.tool .soon a{color:var(--mid);text-decoration:underline;text-underline-offset:2px}
.tool .soon a:hover{color:var(--fg)}


/* ==========================================================================
   The nav mark, in motion
   --------------------------------------------------------------------------
   HOW OFTEN WILL ANYONE SEE THIS. That is the question that decides whether a
   thing should animate at all, and it is the one a logo animation usually
   fails. A mark in the nav is on screen on every page of the site; replaying a
   flourish on each navigation is charming twice and irritating by the fifth
   time. So it runs ONCE per session — the script sets .mark-seen after the
   first play and every later page load starts finished.

   It is also deliberately absent from the app. static/ has its own chrome, and
   somebody opening their trading board every morning does not need the logo
   performing.

   WHY A CLIP-PATH WIPE AND NOT A DRAW-ON. These are filled letterforms, not
   strokes, so there is no outline to trace — a stroke-dashoffset draw would
   need a second, hollow copy of the mark that does not match the real one.
   inset() eats in from one side and reveals the actual glyphs, and it is
   GPU-composited.
   ========================================================================== */
.mark{ display:block; }

@media (prefers-reduced-motion: no-preference){
  /* The wipe. 520ms is longer than the 300ms an interface control should take,
     which is right: this is decoration on a marketing page, not a response to
     an action somebody is waiting on. */
  .mark-anim .mark{
    animation: mark-wipe 520ms cubic-bezier(.23,1,.32,1) both;
    clip-path: inset(0 100% 0 0);
  }
  @keyframes mark-wipe{
    from{ clip-path: inset(0 100% 0 0); opacity:.4 }
    to  { clip-path: inset(0 0 0 0);    opacity:1  }
  }
}

/* Hover is user-initiated, so it can be there every time without wearing out.
   Gated behind a real pointer: on a touch screen :hover fires on tap and
   sticks, which reads as a bug. */
@media (hover:hover) and (pointer:fine){
  .nav a[aria-label="EVTRA home"]{ display:inline-flex;
    transition: transform 180ms cubic-bezier(.23,1,.32,1); }
  .nav a[aria-label="EVTRA home"]:hover{ transform: translateX(1.5px); }
}

/* ---- the simpler page, 2026-09-21 ------------------------------------ */
/* One claim, four ticks, one button. The mock below the fold is the proof. */
.hero .ticks{list-style:none;margin:28px auto 0;padding:0;max-width:640px;text-align:left;display:grid;
  grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.hero .ticks{grid-template-columns:1fr}}
.ticks li{position:relative;padding:12px 14px 12px 44px;font-size:14px;color:var(--mid);line-height:1.45;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025)}
.ticks li::before{content:counter(tick,decimal-leading-zero);counter-increment:tick;position:absolute;left:14px;top:13px;
  font-family:var(--mono);font-size:11px;color:#8FB7FF;letter-spacing:.04em}
.ticks li::after{content:none}
.ticks{counter-reset:tick}
.fine{font-size:13px;color:var(--dim);margin-top:14px}
.val.dn{color:var(--dn)} .mini b.up{color:var(--up)} .mini b.dn{color:var(--dn)}

/* the coach, drawn small */
.score-row{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center}
.ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--amber) calc(var(--pct)*1%),var(--line) 0)}
.ring>span{width:44px;height:44px;border-radius:50%;background:var(--surf,#0B1120);display:grid;place-items:center;
  font-family:var(--mono);font-size:17px;color:var(--amber);font-variant-numeric:tabular-nums}
.card-w{margin-top:12px;padding:11px 12px;border-radius:9px;border:1px solid rgba(229,169,79,.35);background:rgba(229,169,79,.08)}
.card-w.hi{border-color:rgba(229,72,77,.4);background:rgba(229,72,77,.09)}
.card-w b{display:block;font-size:12.5px;color:var(--fg);font-weight:600;margin-bottom:3px}
.card-w p{font-size:11.5px;color:var(--mid);line-height:1.45;margin:0}
.card-w .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.card-w .acts span{font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--line2);color:var(--fg);background:rgba(255,255,255,.03)}
.card-w .acts span.q{color:var(--dim);border-color:transparent}

/* three things */
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:40px;text-align:left}
.three article{padding:26px 24px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,22,38,.8),rgba(10,15,28,.8))}
.three .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(76,141,255,.14);
  color:#8FB7FF;font-family:var(--mono);font-size:13px;margin-bottom:14px}
.three h3{font-size:1.1rem;margin:0 0 8px;color:var(--fg)}
.three p{font-size:14px;color:var(--mid);line-height:1.55;margin:0}

/* the coach section's mock on the right */
.split .ticks{list-style:none;padding:0;margin:22px 0 0;max-width:none;display:grid;gap:8px;counter-reset:tick}
.split .ticks li{font-size:14px}
.shot{padding:18px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,22,38,.9),rgba(10,15,28,.95));
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
@media (min-width:860px){.split{grid-template-columns:1.05fr .95fr}}

/* firm strip */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:30px}
.logos span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.025);font-size:13.5px;color:var(--fg)}
.logos .more{color:var(--dim)}
/* the coach tile leads the mock and takes the width of two */
.tile.coach-tile{grid-column:1/-1;background:linear-gradient(180deg,rgba(229,169,79,.07),rgba(229,169,79,0) 70%)}
@media(min-width:1000px){.tile.coach-tile{grid-column:span 2}}
.tile.coach-tile .card-w{margin-top:14px}

/* the quiet row: everything else, small */
.quiet{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:32px;text-align:left}
.quiet a{display:block;padding:16px 18px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:inherit;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.quiet a:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.quiet h4{margin:0 0 5px;font-size:13.5px;font-weight:600;color:var(--fg);font-family:var(--ui)}
.quiet p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}

/* nine quiet cards; the first three carry a little more light */
.grid9{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:36px;text-align:left}
.grid9 .card{display:block;padding:18px 18px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:inherit;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.grid9 .card:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.grid9 .card.key{border-color:rgba(76,141,255,.28);background:linear-gradient(180deg,rgba(76,141,255,.07),rgba(76,141,255,.02))}
.grid9 .ic{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:10px}
.grid9 .card.key .ic{color:#8FB7FF}
.grid9 h4{margin:0 0 6px;font-size:14.5px;font-weight:600;color:var(--fg);font-family:var(--ui)}
.grid9 p{margin:0;font-size:13px;color:var(--dim);line-height:1.5}

.days{display:flex;gap:3px;flex-wrap:wrap}
.days i{width:11px;height:11px;border-radius:2px;background:var(--line)}
.days i.g{background:var(--up);opacity:.85} .days i.r{background:var(--dn);opacity:.85}