:root{ --bg:oklch(0.14 0.005 60); --panel:oklch(0.17 0.006 60); --panel2:oklch(0.20 0.007 60); --line:oklch(1 0 0 / 8%); --line2:oklch(1 0 0 / 14%); --ink:oklch(0.96 0.01 80); --muted:oklch(0.65 0.02 70); --faint:oklch(0.56 0.02 70); --gold:oklch(0.82 0.12 82); --gold-d:oklch(0.72 0.14 60); --pos:oklch(0.78 0.16 155); --neg:oklch(0.68 0.2 25); --gold-rgb:232,190,110; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} .wrap{max-width:1100px;margin:0 auto;padding:0 24px} /* ── nav (trimmed — the real one is the mega-menu prototype) ───────────────────────────── */ .nav{position:sticky;top:0;z-index:40;background:rgba(8,8,11,.84);backdrop-filter:blur(12px); border-bottom:1px solid var(--line)} .nav-row{display:flex;align-items:center;justify-content:space-between;gap:20px; max-width:1100px;margin:0 auto;padding:13px 24px} .brand{display:flex;align-items:center;gap:11px} .seal{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0a0d12; border:2px solid var(--gold);color:var(--gold);font-weight:800;font-size:13px} .bw{display:block;font-weight:700;font-size:14.5px;letter-spacing:-.01em;line-height:1.15} .bt{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase} .nav-links{display:flex;gap:24px;font-size:13.5px;color:var(--muted)} .nav-links a:hover{color:var(--ink)} .btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;font-weight:700; font-size:14px;padding:11px 19px;white-space:nowrap} .btn-primary{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#11131a} .btn-ghost{border:1px solid var(--line2);color:var(--ink)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} /* ── 1 · hero ──────────────────────────────────────────────────────────────────────────── */ .hero{padding:58px 0 10px} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--gold); background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.26); padding:5px 12px;border-radius:20px} h1{font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-.035em;margin:20px 0 18px; max-width:17ch} h1 em{font-style:normal;color:var(--gold)} .lede{font-size:17.5px;color:var(--muted);max-width:56ch;margin:0 0 26px;line-height:1.6} .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .cta-note{font-size:13px;color:var(--faint)} .cap{font-size:12.5px;color:var(--faint);margin:11px 2px 0;line-height:1.5} /* ── section furniture ─────────────────────────────────────────────────────────────────── */ section{padding:66px 0} .sec-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);margin:0 0 12px} h2{font-size:clamp(25px,3.2vw,33px);line-height:1.18;letter-spacing:-.025em;margin:0 0 16px; max-width:22ch} .body{font-size:16px;color:var(--muted);max-width:62ch;line-height:1.7} .body p{margin:0 0 16px} .body b{color:var(--ink);font-weight:650} /* ── 3 · steps ─────────────────────────────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px} .step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px} .step-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px; font-weight:800;background:rgba(var(--gold-rgb),.14);color:var(--gold);margin-bottom:13px} .step h3{font-size:16px;margin:0 0 7px;letter-spacing:-.015em} .step p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55} /* ── 5 · what it is not ────────────────────────────────────────────────────────────────── */ .isnt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin-top:30px} .isnt-col{background:var(--panel);padding:24px 22px} .isnt-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin-bottom:14px} .isnt-h i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:11px; font-style:normal;font-weight:800} .yes i{background:rgba(62,207,142,.16);color:var(--pos)} .no i{background:rgba(255,93,99,.15);color:var(--neg)} .isnt ul{margin:0;padding-left:19px} .isnt li{font-size:13.5px;color:var(--muted);margin:0 0 9px;line-height:1.55} /* ── 6 · cta ───────────────────────────────────────────────────────────────────────────── */ .end{background: radial-gradient(90% 120% at 50% 0%, rgba(var(--gold-rgb),.13), transparent 62%), var(--panel); border:1px solid var(--line2);border-radius:18px;padding:46px 30px;text-align:center; margin-bottom:70px} .end h2{margin:0 auto 14px;max-width:20ch} .end .body{margin:0 auto 24px;text-align:center} .end .cta-row{justify-content:center} /* ── product mocks ───────────────────────────────────────────────────────────────────────── ⭐ DRAWN, NOT PHOTOGRAPHED. Three reasons, and the first is the one Martin raised: 1 A screenshot is a fixed grid of pixels. Painted at 1050 CSS px on a retina screen it needs ~2100 real ones, and any export smaller than that is soft. Martin: "the image here loks blury." Markup is sharp at every zoom and on every display, for ever. 2 The live account is a TEST account — "Test", 0/1, 14%, −7.63%. A feature page showing a losing test row with one trader is not the product, it is a debugging session. 3 The trial-ended banner was in frame. Gone by construction, not by cropping. ⚠️ SAMPLE DATA IS LABELLED, ON EVERY MOCK. Invented numbers presented as results are how a feature page ends up quoted back at you. These are illustrations of the interface and say so. */ .mock{border:1px solid var(--line2);border-radius:14px;background:#0a0a0d;padding:20px 20px 4px; box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative;overflow:hidden} .mock-tag{position:absolute;top:12px;right:14px;font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;font-weight:800;color:var(--faint); border:1px solid var(--line2);border-radius:20px;padding:3px 9px;background:rgba(0,0,0,.4)} .m-k{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)} .m-k.g{color:var(--gold)} .m-h{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--gold);margin:6px 0 8px} .m-h.g{color:var(--gold)} .m-sub{font-size:13px;color:var(--muted);margin:0;max-width:70ch;line-height:1.55} .m-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px; margin-bottom:14px} .m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 14px} .m-kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px} .m-kpi b{display:block;font-size:11.5px;font-weight:500;color:var(--muted)} .m-kpi strong{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;margin:4px 0 5px} .m-kpi span{font-size:10.5px;color:var(--faint);line-height:1.4;display:block} .m-rowh{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .m-rowh b{font-size:14.5px;color:var(--gold)} .m-rowh span{font-size:11.5px;color:var(--faint)} .m-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 4px} .m-tab{font-size:12px;color:var(--muted);border:1px solid var(--line2);border-radius:20px; padding:5px 13px} .m-tab.on{background:var(--gold);border-color:var(--gold);color:#0a0a0d;font-weight:650} table.m-t{width:100%;border-collapse:collapse;margin-top:6px} .m-t th{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint); text-align:left;font-weight:700;padding:10px 8px;border-bottom:1px solid var(--line)} .m-t td{font-size:13px;padding:13px 8px;border-bottom:1px solid var(--line);white-space:nowrap} .m-t tr:last-child td{border-bottom:0} .m-t .num{text-align:right} .m-t th.num{text-align:right} .m-who{display:flex;align-items:center;gap:10px} /* ⚠️ SCOPED TO .m-wi, NOT TO .m-who. These two rules used to read `.m-who b` / `.m-who span`, and .m-av IS a span inside .m-who — so the avatar inherited display:block, 10.5px and the faint grey, which killed both the grid centring and the contrast. Martin: "the letters inside the icon for each trader is not centred." A descendant selector catches the thing you meant AND the thing you forgot; name the parent you actually mean. */ .m-wi b{display:block;font-size:13.5px;font-weight:650} .m-wi span{display:block;font-size:10.5px;color:var(--faint)} .m-av{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center; justify-content:center;line-height:1;font-size:12.5px;font-weight:700; background:rgba(var(--gold-rgb),.16);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.35)} .pos{color:var(--pos);font-weight:650} .neg{color:var(--neg);font-weight:650} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;border-radius:20px; padding:4px 11px;border:1px solid var(--line2);color:var(--muted)} .pill.gold{border-color:rgba(var(--gold-rgb),.4);color:var(--gold);background:rgba(var(--gold-rgb),.08)} .pill.good{border-color:rgba(62,207,142,.35);color:var(--pos);background:rgba(62,207,142,.08)} .tick{width:17px;height:17px;border:1px solid var(--line2);border-radius:5px;display:inline-block} /* the write-up composer */ .m-field{background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:11px 13px;font-size:13px;color:var(--ink);line-height:1.6} .m-field.ph{color:var(--faint)} .m-bar{display:flex;gap:14px;margin:12px 0 8px;font-size:13px;color:var(--muted)} .m-dates{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted); margin-bottom:12px;flex-wrap:wrap} .m-date{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:7px 12px; color:var(--ink);font-size:12.5px} .m-fp{display:flex;gap:10px;align-items:center;margin-top:9px} .m-fpn{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:11px;font-weight:700;background:var(--gold);color:#0a0a0d} .m-fpn.g{background:var(--gold)} .m-btn{display:inline-block;font-size:12.5px;font-weight:650;border-radius:9px;padding:8px 15px; background:rgba(var(--gold-rgb),.14);border:1px solid rgba(var(--gold-rgb),.45);color:var(--gold)} .m-note{font-size:11.5px;color:var(--faint);margin-left:10px} .m-rv{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:15px 17px; margin-bottom:12px} .m-rvh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px} .m-rvh b{font-size:14px} .m-rvh span{font-size:11.5px;color:var(--faint)} .m-ghost{font-size:11.5px;border:1px solid var(--line2);border-radius:7px;padding:4px 10px; color:var(--muted);margin-left:8px} .m-body{font-size:13px;color:var(--muted);line-height:1.65;margin:0} .m-body b{color:var(--ink)} .m-latest{border:1px solid rgba(var(--gold-rgb),.35);border-radius:12px;padding:16px 18px; background:rgba(var(--gold-rgb),.05);margin-bottom:14px} @media(max-width:820px){ .steps,.isnt,.m-kpis{grid-template-columns:1fr} .nav-links{display:none} .mock{padding:14px 14px 2px} .m-t{font-size:12px} } /* ── additions for the other eight pages ─────────────────────────────────────────────────── Every page in features/ links this file. One stylesheet, so a spacing fix lands on all nine rather than on whichever one someone remembered. */ .m-two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .m-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .m-five{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} /* month calendar */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal .dow{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint); text-align:center;padding-bottom:3px;font-weight:700} .cal .d{background:var(--panel2);border:1px solid var(--line);border-radius:8px;min-height:54px; padding:6px 7px;font-size:10.5px;color:var(--faint)} .cal .d.out{opacity:.32} .cal .d b{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:3px} .cal .d .v{font-size:11.5px;font-weight:700;letter-spacing:-.01em} .cal .d.win{border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.07)} .cal .d.loss{border-color:rgba(255,93,99,.3);background:rgba(255,93,99,.06)} .cal .d.be{border-color:rgba(var(--gold-rgb),.32);background:rgba(var(--gold-rgb),.06)} .cal .d.sel{outline:2px solid var(--gold);outline-offset:1px} .be{color:var(--gold);font-weight:650} /* little bar chart */ .bars{display:flex;align-items:flex-end;gap:10px;height:104px;margin-top:14px} .bars i{flex:1;background:linear-gradient(180deg,rgba(74,158,255,.85),rgba(74,158,255,.28)); border-radius:4px 4px 0 0;display:block} .bars.gold i{background:linear-gradient(180deg,rgba(var(--gold-rgb),.9),rgba(var(--gold-rgb),.3))} .barlab{display:flex;gap:10px;margin-top:7px} .barlab span{flex:1;text-align:center;font-size:9.5px;color:var(--faint)} /* gauge */ .gauge{display:flex;align-items:center;gap:16px} .gauge svg{flex:none} .gauge-n{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1} /* chips row */ .chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:12px 0 4px; font-size:11.5px;color:var(--faint)} /* 🚨 A BARE TEXT NODE IN A FLEX ROW TAKES THE PARENT'S FONT SIZE. "Warn me", "Impact" and "Currency" were written straight into .chips beside 11.5px pills, so they rendered at the body's 16px and sat on a different baseline — the row read as broken rather than as a label followed by options. Labels get a class; the row centres what it holds. */ .chip-l{flex:none;min-width:70px;font-size:9.5px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} .chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line2);border-radius:20px; padding:4px 11px} .chip.on{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.1)} /* gallery cards */ .wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px} .gcard{background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden} .gshot{height:92px;display:grid;place-items:center;font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--faint); background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px), var(--panel2);border-bottom:1px solid var(--line)} .gmeta{padding:10px 12px;font-size:11.5px;color:var(--muted);display:flex; justify-content:space-between;gap:8px;align-items:baseline} .gmeta b{font-size:12.5px;color:var(--ink)} .tfchip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em; color:var(--gold);border:1px solid rgba(var(--gold-rgb),.4);border-radius:5px;padding:1px 5px; background:rgba(var(--gold-rgb),.1)} /* calculator */ .calc-f{display:flex;justify-content:space-between;align-items:center;gap:12px; border-bottom:1px solid var(--line);padding:11px 2px;font-size:13px;color:var(--muted)} .calc-f b{color:var(--ink);font-weight:650} .calc-out{background:rgba(var(--gold-rgb),.07);border:1px solid rgba(var(--gold-rgb),.32); border-radius:12px;padding:18px 20px;text-align:center} .calc-out b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--gold)} .calc-out span{font-size:11.5px;color:var(--muted)} /* countdown */ .cd{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .imp{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px} .imp.hi{background:var(--neg)} .imp.md{background:var(--gold)} .imp.lo{background:var(--muted)} /* goals */ .goal{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line); font-size:13px;color:var(--muted)} .goal:last-child{border-bottom:0} .box{width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);flex:none} .box.on{background:var(--pos);border-color:var(--pos);position:relative} .box.on::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center; font-size:11px;color:#0a0a0d;font-weight:800} .ai{border:1px solid rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.05); border-radius:12px;padding:15px 17px} .ai-k{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; color:var(--gold);margin:0 0 7px} @media(max-width:820px){ .m-two,.m-three,.m-five,.wall{grid-template-columns:1fr} } /* ── .mock.coach — the ONLY place the blue belongs ───────────────────────────────────────── 🚨 Martin: "trades missed is in the my coach format not missed trades." Right, and it was not the copy — it was the COLOUR. Every mock inherited the coach view's blue, because the first page built was My Coach and its chrome became the default. In the product, blue/teal means "you are looking at someone else's account"; a trader's own modules are gold. So a Trades Missed page dressed in blue reads as the coach's screen. ⭐ THE RULE: THE ACCENT IS A STATEMENT ABOUT WHOSE DATA YOU ARE LOOKING AT. Gold is yours, blue is a share. Defaulting to the wrong one made eight pages quietly lie about the module. */ .mock.coach .m-k, .mock.coach .m-h, .mock.coach .m-rowh b{color:#4a9eff} .mock.coach .m-k.g, .mock.coach .m-h.g{color:var(--gold)} .mock.coach .m-tab.on{background:#4a9eff;border-color:#4a9eff;color:#0a0a0d} .mock.coach .m-av{background:rgba(74,158,255,.16);color:#4a9eff; border:1px solid rgba(74,158,255,.35)} .mock.coach .m-fpn{background:#4a9eff;color:#0a0a0d} .mock.coach .m-fpn.g{background:var(--gold)} .mock.coach .m-btn{background:rgba(74,158,255,.14);border:1px solid rgba(74,158,255,.45); color:#4a9eff} .mock.coach .bars i{background:linear-gradient(180deg,rgba(74,158,255,.85),rgba(74,158,255,.28))} .mock.coach .chip.on{border-color:#4a9eff;color:#4a9eff;background:rgba(74,158,255,.1)} /* ── real screenshots ────────────────────────────────────────────────────────────────────── ⭐ Martin, 15 Sep: "trade gallery use real images from my live platform" and "analytics have some real widgets". Drawn mocks are right for layouts that are mostly type and boxes; they are wrong for a wall of candlestick charts, which nobody believes unless they are real. ⚠️ EXPORTED AT THE CROP'S NATIVE RESOLUTION, never downscaled — a 1050px-wide image painted on a retina screen needs ~2100 real pixels, and anything less is the blur from the 15th. */ .real{border:1px solid var(--line);border-radius:11px;overflow:hidden;line-height:0; background:#0a0a0d} .real img{display:block;width:100%;height:auto} .real-tag{position:absolute;top:12px;right:14px;font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;font-weight:800;color:var(--gold); border:1px solid rgba(var(--gold-rgb),.4);border-radius:20px;padding:3px 9px; background:rgba(var(--gold-rgb),.1)} /* ── THE REAL CALENDAR ───────────────────────────────────────────────────────────────────── 🚨 Martin, 16 Sep: "i dont like how the calendar visually looks here, make it look like the real thing." He sent the live screen beside the mock, and the mock was missing the four things that make it read as the product rather than a grid of coloured boxes: 1 the WEEK column down the right, with each week's net and its win/loss dots 2 the legend — winning day / losing day / break-even — and the Month · Year toggle 3 the trade COUNT under each day, and an em dash on days with nothing 4 the two panels beside it: the selected day, and the month summary as a labelled list ⭐ A mock that shows fewer parts than the product undersells it. These are all real parts of the live screen; nothing here is invented to look impressive. */ .jc-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-bottom:14px} .jc-mo{display:flex;align-items:center;gap:11px} .jc-arrow{width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--line2); display:grid;place-items:center;font-size:13px;color:var(--muted)} .jc-mo b{font-size:16px;font-weight:700;letter-spacing:-.02em} .jc-legend{display:flex;align-items:center;gap:15px;font-size:11.5px;color:var(--muted)} .jc-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px} .jc-legend i::before{content:'';width:7px;height:7px;border-radius:50%} .jc-legend .w::before{background:var(--pos)} .jc-legend .l::before{background:var(--neg)} .jc-legend .b::before{background:var(--muted)} .jc-tog{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden} .jc-tog span{font-size:12px;padding:5px 14px;color:var(--muted)} .jc-tog span.on{background:var(--gold);color:#0a0a0d;font-weight:700} /* seven days plus the week column */ .jcal{display:grid;grid-template-columns:repeat(7,1fr) 1.25fr;gap:6px} .jcal .dow{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint); font-weight:700;padding-bottom:4px;text-align:left} .jd{background:var(--panel2);border:1px solid var(--line);border-radius:10px;min-height:78px; padding:8px 9px;display:flex;flex-direction:column;gap:3px} .jd .n{font-size:12px;color:var(--muted);font-weight:600} .jd .v{font-size:13px;font-weight:700;letter-spacing:-.015em} .jd .c{font-size:10.5px;color:var(--faint);margin-top:auto} .jd .dash{font-size:13px;color:var(--faint)} .jd.win{border-color:rgba(62,207,142,.32);background:rgba(62,207,142,.07)} .jd.win .v{color:var(--pos)} .jd.loss{border-color:rgba(255,93,99,.28);background:rgba(255,93,99,.06)} .jd.loss .v{color:var(--neg)} .jd.be{border-color:rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.06)} .jd.be .v{color:var(--gold)} .jd.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} .jd.out{opacity:.35} /* the week column reads as a summary, not an eighth day — flat, no fill */ .jw{background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 10px; display:flex;flex-direction:column;gap:3px} .jw .k{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:800} .jw .v{font-size:13px;font-weight:700} .jw .c{font-size:10.5px;color:var(--faint);display:flex;align-items:center;gap:8px;margin-top:auto} .jw .c em{font-style:normal;display:inline-flex;align-items:center;gap:4px} .jw .c em::before{content:'';width:6px;height:6px;border-radius:50%} .jw .c em.w::before{background:var(--pos)} .jw .c em.l::before{background:var(--neg)} /* the two panels beside the grid */ .jp-k{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint); font-weight:800} .jp-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .jp-hd b{font-size:14.5px;font-weight:700} .jp-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px} .jp-three div b{display:block;font-size:19px;font-weight:700;letter-spacing:-.025em} .jp-three div span{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--faint);font-weight:700;margin-top:3px} .jp-trade{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--panel2); border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:12.5px} .jp-trade b{font-size:13.5px;font-weight:700} .jp-row{display:flex;align-items:center;justify-content:space-between;gap:12px; border-bottom:1px solid var(--line);padding:9px 2px;font-size:13px;color:var(--muted)} .jp-row:last-child{border-bottom:0} .jp-row b{font-weight:650;color:var(--ink)} @media(max-width:820px){ .jcal{grid-template-columns:repeat(7,1fr)} .jcal .jw,.jcal .dow:nth-child(8){display:none} .jp-three{grid-template-columns:1fr} } /* ── THE SITE HEADER ─────────────────────────────────────────────────────────────────────── 🚨 16 Sep, live: the feature pages carried a PLACEHOLDER brand (a circle with a letter in it) and four flat links, while the homepage had the real seal and the two mega-menus. Clicking in from the homepage lost the navigation and changed the logo — it read as a different website. ⭐ These rules are the homepage's own, copied so the identical markup renders identically. ⚠️ If the homepage header changes, this block has to change with it. One header, two files. */ header.nav{position:sticky;top:0;z-index:40;background:rgba(8,8,11,.82); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; max-width:1160px;margin:0 auto;padding:13px 24px} .nav-row .brand{justify-self:start} .nav-row .nav-links{justify-self:center} .nav-row .nav-actions{justify-self:end} .brand{display:flex;align-items:center;gap:12px} /* the seal is the real SVG now, so the placeholder's circle-and-letter styling must go */ .brand .seal{width:40px;height:40px;flex:none;background:none;border:0;border-radius:0; display:block;filter:drop-shadow(0 4px 14px rgba(212,175,106,.28))} .brand .bw{font-weight:700;font-size:19px;letter-spacing:.185em;text-transform:uppercase; line-height:1.15} .brand .bw::first-letter{color:var(--gold)} .brand .bt{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase; color:var(--muted);margin-top:3px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .nav-links{display:flex;align-items:center;gap:6px} .nav-actions{display:flex;align-items:center;gap:10px} .sign{display:inline-flex;align-items:center;font-weight:650;font-size:14px;line-height:1; color:var(--ink);padding:12px 20px;border-radius:11px;border:1px solid var(--line2); transition:.15s} .sign:hover{border-color:var(--gold);background:rgba(255,255,255,.03)} .navb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer; font:inherit;font-size:13.5px;color:oklch(0.96 0.01 80 / .82);font-weight:700;padding:8px 13px; border-radius:9px;transition:color .15s, background .15s} .navb:hover,.navb[aria-expanded="true"]{color:var(--gold);background:rgba(255,255,255,.05)} .navb .chev{width:9px;height:9px;border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px); transition:transform .2s} .navb[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)} .mm{position:absolute;left:0;right:0;top:100%;display:none;justify-content:center;padding:0 24px 30px} .mm.on{display:flex} .mm-in{width:100%;max-width:1160px;background:var(--panel);border:1px solid var(--line2); border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.6);overflow:hidden auto; max-height:calc(100vh - 88px);animation:mmIn .16s ease; scrollbar-width:thin;scrollbar-color:var(--line2) transparent} @keyframes mmIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.mm-in{animation:none}} .mm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line)} .mm-col{background:var(--panel);padding:16px 18px 18px;display:flex;flex-direction:column;gap:1px} .mm-eyebrow{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint); font-weight:800;margin:0 0 8px 9px} .mm-item{display:flex;gap:11px;padding:8px 9px;border-radius:10px;transition:background .13s} .mm-item:hover{background:rgba(var(--gold-rgb),.07)} .mm-ic{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center; background:rgba(var(--gold-rgb),.11);border:1px solid rgba(var(--gold-rgb),.2)} .mm-ic svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .mm-t{font-size:13.5px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:7px} .mm-d{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px} .mm .tag{font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; padding:2px 6px;border-radius:5px;white-space:nowrap; background:rgba(var(--gold-rgb),.16);color:var(--gold)} .mm .tag.new{background:rgba(62,207,142,.15);color:var(--pos)} .mm-feat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:start; padding:22px 24px;border-top:1px solid var(--line);background:var(--panel2)} .mm-feat h4{margin:0 0 7px;font-size:17.5px;letter-spacing:-.02em;line-height:1.25} .mm-feat p{margin:0 0 13px;font-size:13.5px;color:var(--muted);line-height:1.55} .mm-feat .go{font-size:13.5px;font-weight:650;color:var(--gold);display:inline-flex;gap:6px; align-items:center} .mm-feat-shot{display:inline-block;justify-self:end;border:1px solid var(--line2); border-radius:10px;overflow:hidden;line-height:0;box-shadow:0 16px 38px rgba(0,0,0,.5)} .mm-feat-shot img{display:block;height:400px;width:auto;max-width:100%} .mm-all{display:flex;justify-content:space-between;align-items:center;padding:9px 20px; border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);background:rgba(0,0,0,.2)} .mm-all a{color:var(--gold);font-weight:650} .rs{display:grid;grid-template-columns:1.12fr .88fr;gap:1px;background:var(--line)} .rs-col{background:var(--panel);padding:16px 18px 18px;display:flex;flex-direction:column;gap:1px} .mm-ic.star svg{fill:var(--gold);stroke:none} .rs-blogpanel{background:var(--panel2);padding:14px 16px;display:flex;flex-direction:column} .rs-bloghd{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:0 2px 9px;margin-bottom:8px;border-bottom:1px solid var(--line)} .rs-bloghd-t{font-size:14px;font-weight:750;letter-spacing:-.015em} .rs-bloghd-go{font-size:11.5px;font-weight:650;color:var(--gold)} .rs-lead{display:flex;flex-direction:column;padding:7px;border-radius:11px; transition:background .13s} .rs-lead:hover{background:rgba(var(--gold-rgb),.07)} .rs-shot{display:block;border:1px solid var(--line2);border-radius:9px;overflow:hidden; line-height:0;margin-bottom:10px} .rs-shot img{display:block;width:100%;height:auto} .rs-cat{align-self:flex-start;font-size:8.5px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-bottom:6px; background:rgba(var(--gold-rgb),.16);color:var(--gold)} .rs-h{font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em} .rs-sum{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:4px} .mm-card{display:flex;flex-direction:column;gap:2px;padding:9px;border-radius:11px; transition:background .13s} .mm-card:hover{background:rgba(var(--gold-rgb),.07)} .mm-card-shot{display:block;border:1px solid var(--line2);border-radius:8px;overflow:hidden; margin-bottom:6px;line-height:0;box-shadow:0 10px 24px rgba(0,0,0,.4)} .mm-card-shot img{width:100%;height:auto;display:block} .mm-cards{background:rgba(0,0,0,.16);gap:6px} @media(max-width:900px){ .mm-grid,.mm-feat,.rs{grid-template-columns:1fr} .mm-feat-shot{display:none} } @media(max-width:760px){.nav-links,.brand .bt{display:none}}