/* ══════════════════════════════════════════════════════════════════════════════
Metra landing page · mt-land.css · candidate C
The only stylesheet welcome.html loads (none of the legacy mt-*.css).
1 reset 2 tokens 3 what mt-funnel.js draws (header, footer, buttons, offer bar) 4 the page
Every block is labelled SHARED, PHONE ONLY (≤719px), TABLET ONLY (720–1023px) or
DESKTOP ONLY (≥1024px). Hover lives only inside @media (min-width: 1024px) and (hover: hover).
══════════════════════════════════════════════════════════════════════════════ */
/* ════ 1 · RESET ══════════════════════════════════════════════════════════════ */
/* SHARED */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
margin: 0; min-height: 100vh; min-height: 100dvh;
background: var(--c-bg); color: var(--c-ink);
font: 400 1rem/1.6 var(--f-text);
-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
overflow-x: clip; /* a stray glow must never scroll the page sideways; the QA tools still report it */
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font: inherit; text-wrap: balance; } /* headings get their size from you, not the browser */
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; } /* zero specificity: any class of yours overrides it */
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }
/* market-specific copy without a flash: write both versions, …….
mt-boot.js sets in the head, before the first paint. */
html[data-mode="forex"] [data-only="crypto"], html[data-mode="crypto"] [data-only="forex"], html:not([data-mode]) [data-only="forex"] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-amber-hi); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* reduced motion: every animation and transition lands on its end state at once; nothing loops */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
}
/* ════ 2 · TOKENS · candidate C ═══════════════════════════════ */
/* SHARED */
:root {
color-scheme: dark;
--c-bg: #090909; --c-char: #121212; --c-surface: #161616; --c-line: #262626; --c-line-2: #2E2E2E;
--c-ink: #ffffff; --c-ink-2: #D4D4D4; --c-ink-3: #A8A8A8; /* #A8A8A8 on #090909 = 8.3:1 */
--c-amber: #D97706; --c-amber-hi: #D97706; --c-amber-lo: #B45F05; --c-amber-ink: #090909; /* #090909 on #D97706 = 6.6:1 */
--c-up: #2BE08A; --c-down: #FF4D4D;
--f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
--f-brand: "Pixelify Sans", var(--f-text);
--max: 1296px; --r: 10px; --r-md: 12px; --r-lg: 16px;
--gut: 20px; --top-h: 56px; --tap: 48px;
--e-out: cubic-bezier(.16, 1, .3, 1);
}
/* PHONE ONLY (≤719px) */
@media (max-width: 719px) { :root { --gut: 20px; --top-h: 56px; --tap: 48px; } }
/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) { :root { --gut: 32px; --top-h: 60px; --tap: 48px; } }
/* DESKTOP ONLY (≥1024px) */
@media (min-width: 1024px) { :root { --gut: clamp(40px, 5vw, 72px); --top-h: 64px; --tap: 40px; } }
@media (min-width: 1024px) and (pointer: coarse) { :root { --tap: 48px; } }
/* ════ 3 · WHAT mt-funnel.js DRAWS ════════════════════════════════════════════
Markup map: docs/06-engineering.md §4. Restyle at will; keep the class names. */
/* SHARED · page wrapper (header and footer use it; your sections can too) */
.fn-wrap {
width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto;
padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}
/* SHARED · skip link */
.fn-skip {
position: absolute; left: var(--gut); top: 8px; z-index: 100; transform: translateY(-300%);
display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r);
background: var(--c-ink); color: var(--c-bg); font-weight: 600; text-decoration: none;
}
.fn-skip:focus { transform: none; }
/* SHARED · buttons: .fn-btn, with .pri / .acc (the action), .ghost (outline), .sm (header size), .wide */
.fn-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--tap); min-width: var(--tap); padding: 0 20px;
border: 1px solid var(--c-line-2); border-radius: var(--r); background: transparent; color: var(--c-ink);
font: 600 1rem/1.2 var(--f-text); text-decoration: none; white-space: nowrap; cursor: pointer;
touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.fn-btn.pri, .fn-btn.acc { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-amber-ink); }
.fn-btn.pri:focus-visible, .fn-btn.acc:focus-visible { outline-color: var(--c-ink); }
.fn-btn.sm { padding: 0 14px; font-size: .875rem; }
.fn-btn.wide { width: 100%; }
.fn-btn[disabled], .fn-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* SHARED · header: .fn-top > .fn-wrap.fn-top-in > a.fn-brand + span.fn-mkt + nav */
.fn-top {
position: sticky; top: 0; z-index: 50; min-height: var(--top-h); /* the height is reserved before JS draws it */
background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
.fn-top-in { display: flex; align-items: center; gap: 12px; min-height: var(--top-h); }
.fn-brand { /* the lockup: the pixel mark is the M of "Metra Terminal" */
position: relative; display: inline-flex; align-items: baseline; gap: 1px; flex: none;
padding-block: calc((var(--tap) - 1em) / 2); /* one line of type, as tall as a control */
color: var(--c-ink); font: 500 1.125rem/1 var(--f-brand); text-decoration: none; white-space: nowrap;
}
.fn-brand svg { height: .74em; width: calc(.74em * 9 / 7); flex: none; } /* 9 × 7 pixels, as tall as the capitals, sitting on the baseline */
.fn-brand b { margin-left: -.04em; font: inherit; } /* reads "etra Terminal"; the link's aria-label says the full name */
.fn-brand span { /* the plan name, only when signed in */
align-self: center; margin-left: 10px; padding: 4px 8px; border: 1px solid var(--c-line-2); border-radius: 999px;
font: 500 .75rem/1 var(--f-mono); color: var(--c-ink-3);
}
.fn-mkt { /* Crypto | Forex: it reloads the page */
display: inline-flex; flex: none; margin-right: auto; padding: 2px; gap: 2px;
border: 1px solid var(--c-line-2); border-radius: var(--r);
}
.fn-mkt button {
position: relative; min-width: 48px; height: 32px; padding: 0 12px; border-radius: calc(var(--r) - 3px);
color: var(--c-ink-3); font: 500 .8125rem/1 var(--f-text); touch-action: manipulation;
}
.fn-mkt button::after { content: ""; position: absolute; inset: -8px 0; } /* 32px to look at, 48px to hit */
/* the pressed side: from the attribute MF sets, and from before MF has run */
.fn-mkt button[aria-pressed="true"],
html[data-mode="crypto"] .fn-mkt button[data-m="crypto"]:not([aria-pressed]),
html[data-mode="forex"] .fn-mkt button[data-m="forex"]:not([aria-pressed]) { background: var(--c-ink); color: var(--c-bg); }
.fn-top nav { display: flex; align-items: center; gap: 8px; flex: none; }
.fn-top nav .fn-btn { min-height: 40px; }
.fn-top nav .fn-btn::after { content: ""; position: absolute; inset: -4px 0; } /* 40px to look at, 48px to hit */
/* SHARED · page links row (MF.top, content pages only: services, terms, privacy, the server pages), right under the header.
nav.fn-sub#fnSub > .fn-wrap.fn-sub-in > a × 4, the current one [aria-current]. Phones and tablets; desktop has the links in the header. */
.fn-sub { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.fn-sub-in { display: flex; align-items: center; gap: 4px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.fn-sub-in::-webkit-scrollbar { display: none; }
.fn-sub a {
position: relative; flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px;
color: var(--c-ink-3); font: 500 .875rem/1 var(--f-text); text-decoration: none; white-space: nowrap;
}
.fn-sub a::after { content: ""; position: absolute; inset: -6px 0; } /* 36px to look at, 48px to hit */
.fn-sub a[aria-current] { color: var(--c-ink); }
.fn-sub-in { margin-left: -12px; } /* the first link's text starts where the page's text starts */
/* SHARED · footer (MF.foot; welcome.html carries the same markup):
.fn-foot > .fn-wrap > .fn-foot-g (three groups: h3 + links) + .fn-foot-b (©, Terms, Privasi, span.sp the disclaimer: it stays).
The reduced auth frame (login, register, checkout, 404: footer.au-foot) keeps its own one row, .fn-foot-in, styled in mt-site.css. */
.fn-foot { margin-top: 64px; padding-block: 20px 40px; border-top: 1px solid var(--c-line); color: var(--c-ink-3); font-size: .875rem; }
.fn-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.fn-foot a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); text-decoration: none; }
.fn-foot span { display: inline-flex; align-items: center; min-height: var(--tap); }
.fn-foot .sp { margin-left: auto; }
.fn-foot-g { display: grid; gap: 16px 24px; }
.fn-foot-g > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fn-foot-g h3 { margin: 0; color: var(--c-ink-3); font: 500 .75rem/1.4 var(--f-text); letter-spacing: 0; }
.fn-foot-g a { color: var(--c-ink-2); }
.fn-foot-b { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 16px; border-top: 1px solid var(--c-line); font-size: .75rem; }
/* SHARED · phone offer bar (MF.buyBar): div.fr-buybar > span + a.fn-btn.acc; it gets .on when the watched element is gone */
.fr-buybar {
position: fixed; inset: auto 0 0 0; z-index: 60; display: none; align-items: center; gap: 12px;
padding: 10px max(var(--gut), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
background: var(--c-bg); border-top: 1px solid var(--c-line-2);
}
.fr-buybar span { flex: 1 1 auto; min-width: 0; color: var(--c-ink-2); font-size: .875rem; line-height: 1.35; }
.fr-buybar .fn-btn { flex: none; padding: 0 16px; }
/* PHONE ONLY (≤719px) */
@media (max-width: 719px) {
/* header: the mark alone, the switch, "Masuk" as plain text and the button share one row (350px at 390) */
.fn-top-in { gap: 10px; }
.fn-brand { align-items: center; min-height: var(--tap); padding-block: 0; font-size: 1.75rem; } /* mark 27 × 21px; the link keeps its aria-label */
.fn-brand b, .fn-brand span { display: none; }
.fn-brand::after { content: ""; position: absolute; inset: 0 -11px; } /* 48px to hit */
.fn-mkt button { padding: 0 8px; }
.fn-top nav { gap: 2px; }
.fn-top nav .fn-btn { padding: 0 10px; font-size: .8125rem; }
.fn-top nav .fn-btn.ghost { padding: 0 6px; border-color: transparent; }
.fn-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* the offer bar must not cover the last line */
.fn-foot-in { gap: 0 16px; }
.fn-foot .sp { flex-basis: 100%; margin-left: 0; }
/* footer: Produk | Bukti side by side, Akun under them as one row; then ©, the legal pair, the disclaimer */
.fn-foot-g { grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 4px; } /* the groups dissolve: eight links, two columns, four rows */
.fn-foot-g > div { display: contents; }
.fn-foot-g h3 { display: none; }
.fn-foot-b { gap: 0 16px; margin-top: 12px; }
.fn-foot-b .sp { min-height: 24px; margin-top: -8px; }
.fr-buybar.on { display: flex; }
.fr-buybar.on.is-parked, .is-member .fr-buybar.on { display: none; } /* parked over the plans and the footer; never for a signed-in reader */
}
/* PHONE ONLY · the narrowest phones (≤389px): the same row in 320px */
@media (max-width: 389px) {
.fn-top-in { gap: 8px; }
.fn-brand { font-size: 1.5rem; }
.fn-brand::after { inset: 0 -13px; }
.fn-mkt button { padding: 0 6px; }
.fn-top nav .fn-btn { padding: 0 8px; }
.fn-top nav .fn-btn.ghost { padding: 0 4px; }
}
/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
.fn-top-in { gap: 16px; }
.fn-foot-g { grid-template-columns: repeat(3, minmax(0, 200px)); }
.fn-foot-b { margin-top: 20px; }
}
/* DESKTOP ONLY (≥1024px) */
@media (min-width: 1024px) {
.fn-top-in { gap: 20px; }
.fn-btn { transition: background-color .16s, border-color .16s, color .16s; }
.fn-mkt button { transition: color .16s; }
.fn-foot a { transition: color .16s; }
.fn-sub { display: none; }
/* the page you are on, among the header's links: the same filled pill as the phone row (beats mt-site.css / mt-pub.css, which load later) */
body .fn-top nav a[aria-current]:not(.fn-btn) { min-height: 36px; border-radius: 8px; background: #1F1F1F; color: var(--c-ink); }
.fn-foot-g { grid-template-columns: repeat(3, 180px); }
.fn-foot-b { margin-top: 24px; }
}
/* DESKTOP ONLY · hover */
@media (min-width: 1024px) and (hover: hover) {
.fn-btn:hover { border-color: var(--c-ink-2); }
.fn-btn.pri:hover, .fn-btn.acc:hover, .fn-top nav .fn-btn:not(.ghost):hover { background: #fff; border-color: #fff; color: #090909; }
.fn-mkt button:not([aria-pressed="true"]):hover { color: var(--c-ink); }
.fn-foot a:hover { color: var(--c-ink); text-decoration: underline; }
}
/* ════ 4 · THE PAGE · candidate C ═════════════════════════════════════════════
Two faces: Inter for text, JetBrains Mono for every figure, time, tag and chip.
One type scale: 12 · 14 · 16 · 20 · 24 · 28 · 40 · 56 (the phone H1 is 34).
Radii: 16 cards, 12 frames, 10 buttons. One amber band: the closing call.
Blocks are labelled SHARED, PHONE ONLY (≤719px), TABLET ONLY (720–1023px) or
DESKTOP ONLY (≥1024px); hover lives only inside (min-width: 1024px) and (hover: hover). */
/* SHARED · atoms */
body { font-size: 1rem; line-height: 1.55; font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--c-amber); color: var(--c-amber-ink); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.up { color: var(--c-up); } .down { color: var(--c-down); }
.num, time { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
section { position: relative; }
h1, h2, h3 { font-family: var(--f-text); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; font-size: 1.25rem; }
/* titles wear the pixel face of the wordmark: it is what a Metra page looks like. One weight is loaded (500); no tracking, the grid sets it. */
h1, h2 { font-family: var(--f-brand); font-weight: 500; letter-spacing: 0; }
main h2 { font-size: 1.5rem; }
.lede { margin-top: 12px; max-width: 60ch; color: var(--c-ink-2); text-wrap: pretty; }
.fn-btn { border-radius: var(--r); font: 600 1rem/1.2 var(--f-text); }
.fn-btn.ink { background: var(--c-amber-ink); border-color: var(--c-amber-ink); color: #fff; }
.fn-btn.ink:focus-visible { outline-color: var(--c-amber-ink); }
.fn-btn:active { transform: scale(.98); }
.tb { display: inline-flex; align-items: center; min-height: 48px; padding: 0; color: var(--c-ink); font: 500 .875rem/1.2 var(--f-text); text-align: left; text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 4px; }
/* plan chip: one pip per plan, lit from the plan that opens the desk */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 10px 0 8px; border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--c-ink-2); font: 500 .75rem/1 var(--f-mono); white-space: nowrap; }
.chip:empty { display: none; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-2); }
.pips i.on { background: var(--c-amber); }
/* a window of a screenshot at reading size: --x0, --x1 (percent of the image width), --y0 (percent of its height) */
.win { position: relative; overflow: hidden; background: #000; }
.win img { position: absolute; left: 0; top: 0; max-width: none; width: calc(10000% / (var(--x1) - var(--x0))); height: auto; transform: translate(calc(var(--x0) * -1%), calc(var(--y0) * -1%)); }
/* the frame every picture sits in: a bar with the desk's name, and what kind of picture it is at the right */
.dvb, .tc-fr { position: relative; border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: #090909; overflow: hidden; }
.dvb-bar, .tc-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: #121212; border-bottom: 1px solid var(--c-line); color: var(--c-ink); font: 500 .8125rem/1.2 var(--f-text); white-space: nowrap; }
.dvb-dots { flex: none; width: 38px; height: 8px; background: radial-gradient(circle at 4px 4px, #2E2E2E 3.5px, transparent 4px) 0 0 / 15px 8px repeat-x; }
.dvb-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.dvb-t b { font-weight: 600; }
.dvb-t span, .dvb-n { color: var(--c-ink-3); font: 500 .75rem/1.2 var(--f-mono); }
.dvb-n { margin-left: auto; }
/* swipe-strip dots: passive, the active one is wider */
.dots { display: flex; justify-content: center; align-items: center; gap: 6px; height: 24px; margin-top: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--c-line-2); transition: width .24s var(--e-out), background-color .24s; }
.dots i.on { width: 18px; background: var(--c-amber); }
/* a closing row under a section: one line and the access button */
.go { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.go p { color: var(--c-ink-2); text-wrap: balance; }
/* SHARED · header: the mark and the button keep the colours the site has always had (white mark, amber button) */
.fn-mkt button { font: 500 .8125rem/1 var(--f-text); }
.fn-top nav .fn-btn { font-weight: 500; }
.fn-top nav .fn-btn.ghost { border-color: transparent; }
.fn-top .fn-anchors { display: none; }
.fn-foot { margin-top: 0; background: var(--c-bg); }
/* SHARED · hero: copy and the one filled button; one browser frame, split between live candles and a real desk */
.hero-in { display: grid; }
.hero-in > * { min-width: 0; }
.hero-copy { grid-area: copy; } .hero-act { grid-area: act; } .stage { grid-area: stage; }
.eye { display: flex; align-items: center; gap: 8px; color: var(--c-ink-3); font-size: .875rem; line-height: 1.4; }
.eye::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-amber); }
.hero h1 { font-size: 2.125rem; text-wrap: balance; }
.hero-sub { color: var(--c-ink-2); text-wrap: pretty; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.hero-cta .fn-btn { min-height: 48px; padding: 0 28px; }
.hero-price, .hero-trust { font-size: .875rem; line-height: 1.5; }
.hero-price { color: var(--c-ink-2); }
.hero-price .num { color: var(--c-ink); }
.hero-trust { color: var(--c-ink-3); }
.dvb-q { display: flex; align-items: baseline; gap: 8px; margin-left: auto; padding: 4px 6px; margin-right: -6px; border-radius: 6px; font-size: .8125rem; line-height: 1; white-space: nowrap; }
.dvb-q b { font-weight: 500; }
.dvb-q em { font-style: normal; font-size: .75rem; }
.dvb-q.fl-up { animation: fl-up .7s linear; } .dvb-q.fl-down { animation: fl-down .7s linear; } /* only when a refresh changed the price */
@keyframes fl-up { from { background: rgba(43, 224, 138, .3); } to { background: rgba(43, 224, 138, 0); } }
@keyframes fl-down { from { background: rgba(255, 77, 77, .3); } to { background: rgba(255, 77, 77, 0); } }
/* the split. --p: where the handle stands, 0–100. Left of it the candles (they ride with the handle, so the newest candle and its price stay beside it); right of it the desk */
.cmp { position: relative; overflow: hidden; background: #000; }
.cmp-h { position: absolute; inset: 0; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 50%; } /* both layers share one box, so they stay pixel for pixel on each other */
.cmp-a { clip-path: inset(0 calc((100 - var(--p)) * 1%) 0 0); } /* candles only, left of the handle */
.cmp-h { z-index: 3; transform: translateX(calc(var(--p) * 1%)); pointer-events: none; }
.cmp-g { position: absolute; top: 0; bottom: 0; left: -24px; width: 48px; pointer-events: auto; cursor: ew-resize; touch-action: none; }
.cmp-g::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23.5px; width: 1px; background: var(--c-amber); }
.cmp-g i { position: absolute; left: 14px; top: 50%; width: 20px; height: 32px; margin-top: -16px; border: 1px solid var(--c-amber); border-radius: 6px; background: #090909; }
.cmp-g i::before { content: ""; position: absolute; left: 6px; top: 10px; width: 2px; height: 10px; background: var(--c-amber); box-shadow: 4px 0 var(--c-amber); }
.cmp-g:focus-visible { outline: none; } .cmp-g:focus-visible i { outline: 2px solid #fff; outline-offset: 2px; }
.stage-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.stage-cap { color: var(--c-ink-3); font-size: .875rem; line-height: 1.45; }
.stage-cap b { color: var(--c-ink-2); font-weight: 500; }
.cmp-tog { flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--c-line-2); border-radius: var(--r); }
.cmp-tog button { position: relative; min-height: 32px; padding: 0 12px; border-radius: 7px; color: var(--c-ink-2); font: 500 .8125rem/1 var(--f-text); white-space: nowrap; }
.cmp-tog button[aria-pressed="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-2); }
html:not([data-mode]) .cmp-a, html:not([data-mode]) .cmp-h, html:not([data-mode]) .cmp-tog { display: none; } /* no price feed, or no scripts: the desk stands alone */
/* today's movers: a still row, nothing scrolls */
.quotes { display: flex; align-items: center; gap: 24px; min-height: 44px; border-block: 1px solid var(--c-line); color: var(--c-ink-3); font: 500 .8125rem/1 var(--f-mono); white-space: nowrap; overflow: hidden; }
.quotes-st { flex: none; display: flex; align-items: center; gap: 8px; color: var(--c-ink-2); }
.quotes-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-up); }
.quotes-st.off::before { background: var(--c-ink-3); }
.quotes-st span { color: var(--c-ink-3); }
.quotes-row { display: flex; gap: 24px; min-width: 0; }
.quotes-row li { display: flex; gap: 8px; }
.quotes-row b { color: var(--c-ink-2); font-weight: 500; }
/* SHARED · pulse: two live figures (each with its window), the AI reading, the radar */
.pulse, .proof, .steps { background: rgba(255, 255, 255, .036); } /* #121212 over the canvas, see-through so the backdrop carries on */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.pulse .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig .nw { white-space: nowrap; } /* the landing shows two live figures; the catalogue page keeps three */
.fig { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 12px; border-top: 1px solid var(--c-line-2); }
.fig dd { min-height: 1.1em; font: 500 1.75rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.fig dt { max-width: 24ch; color: var(--c-ink-2); font-size: .875rem; line-height: 1.4; }
.no-teaser .fig-assets, .no-radar .fig-news, html:not([data-mode]) .radar, html:not([data-mode]) .pc-cat .pc-vis { display: none; }
.now { display: grid; gap: 12px; margin-top: 24px; }
.read, .radar, .pc, .pk, .bot { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.read, .radar { padding: 16px; }
.read { display: flex; flex-direction: column; }
.read .note { margin-top: auto; padding-top: 12px; }
.read .lab, .radar-s, .pc-b .lab { color: var(--c-ink-3); font-size: .875rem; line-height: 1.4; }
.read blockquote { margin-top: 8px; font: 600 1.25rem/1.3 var(--f-text); letter-spacing: -.015em; text-wrap: balance; }
.read .note { color: var(--c-ink-3); font-size: .875rem; }
.breadth { margin-top: 16px; }
.br-bar { height: 8px; border-radius: 4px; background: var(--c-down); overflow: hidden; }
.br-bar i { display: block; height: 100%; width: calc(var(--v, .5) * 100%); background: var(--c-up); box-shadow: 2px 0 var(--c-surface); }
.breadth .cap { margin-top: 8px; color: var(--c-ink-2); font: 500 .8125rem/1.2 var(--f-mono); }
.breadth .cap b { font-weight: 500; }
.radar-t { font: 600 1.25rem/1.25 var(--f-text); letter-spacing: -.015em; }
.radar-l { display: grid; margin-top: 12px; }
.radar-l li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.radar-l li.sk::before { content: ""; grid-column: 1 / -1; width: 70%; height: 12px; border-radius: 6px; background: var(--c-line); }
.rd-m { display: grid; gap: 4px; justify-items: start; font: 500 .75rem/1.1 var(--f-mono); }
.rd-m time { color: var(--c-ink-3); }
.rd-m b { color: var(--c-ink-2); font-weight: 500; white-space: nowrap; }
.rd.red .rd-m b { color: #FF8A8A; }
.rd.orange .rd-m b { color: var(--c-amber-hi); }
.rd-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .875rem; line-height: 1.4; }
.rd-x .up, .rd-x .down { font-family: var(--f-mono); font-weight: 500; }
.radar-msg { grid-column: 1 / -1; color: var(--c-ink-2); font-size: .875rem; }
.radar-n { padding-top: 12px; border-top: 1px solid var(--c-line); color: var(--c-ink-3); font-size: .75rem; line-height: 1.4; }
/* SHARED · tour: framed desks, each with the plan that opens it */
.def { margin-top: 16px; padding-left: 12px; border-left: 2px solid var(--c-amber); font-weight: 500; text-wrap: pretty; max-width: 52ch; }
.swipe { margin-top: 16px; color: var(--c-ink-3); font-size: .875rem; }
.tc { position: relative; min-width: 0; display: flex; flex-direction: column; }
.tc-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.tc-pic .win, .tc-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-pic canvas { background: #090909; --chart-grid: rgba(255, 255, 255, .08); --chart-text: #A8A8A8; --chart-last: #D97706; --chart-last-ink: #090909; --chart-font: 500 12px "JetBrains Mono", ui-monospace, monospace; }
.tc-b { display: grid; justify-items: start; align-content: start; gap: 8px; padding-top: 14px; }
.tc-d { color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
/* SHARED · proof: three things a stranger can check */
.pc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pc-vis { position: relative; flex: none; height: 200px; overflow: hidden; background: #090909; border-bottom: 1px solid var(--c-line); }
.pc-b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; padding: 16px; }
.pc-b h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pc-b .deck { margin-bottom: auto; color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
.pc-brief .deck { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* the live deck is long; the brief itself is one tap away */
.pc-b .fn-btn { width: 100%; margin-top: 8px; }
.paper { width: 100%; height: 100%; }
.pp-m { font: 700 24px var(--f-text); letter-spacing: -.02em; fill: #090909; }
.pp-d { font: 700 36px var(--f-mono); fill: #090909; }
.pp-s { font: 500 12px var(--f-mono); fill: #090909; }
.pc-rec .pc-vis { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; }
.pc-rec .pc-vis:not(.has-n) { justify-content: center; }
.rec-n b { display: block; min-height: 1em; font: 500 3.5rem/1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.rec-c { color: var(--c-ink-2); font-size: .875rem; line-height: 1.4; }
.rail { position: relative; display: flex; justify-content: space-between; padding-top: 18px; color: var(--c-ink-3); font: 500 .75rem/1.2 var(--f-mono); }
.rail::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px; background: var(--c-amber); }
.rail i { position: absolute; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-amber); }
.rail i:first-child { left: 0; background: #090909; border: 1px solid var(--c-amber); }
.rail i + i { right: 0; }
.mos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 2px; }
.mos .win { min-height: 0; }
.mos .win img { width: auto; height: 140%; }
.limits { color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
/* SHARED · plans: equal cards; the one that opens every desk has the amber rule and the filled button */
.path { margin-top: 8px; color: var(--c-ink); font-weight: 500; }
.pl-closed { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--c-amber-lo); border-radius: var(--r); }
.pl { display: grid; gap: 12px; margin-top: 20px; }
.pl-ghost { display: grid; justify-items: start; gap: 12px; padding: 24px; border: 1px dashed var(--c-line-2); border-radius: var(--r-lg); color: var(--c-ink-2); }
.pl-ghost-a { display: flex; flex-wrap: wrap; gap: 8px; }
.pk { position: relative; min-width: 0; padding: 16px; }
.pk-top { border-color: var(--c-amber); }
.pk-tag { min-height: 18px; color: var(--c-ink-3); font: 500 .75rem/1.5 var(--f-mono); }
.pk-top .pk-tag { color: var(--c-amber-hi); }
.pk-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; white-space: nowrap; }
.pk-price b { font: 500 1.75rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pk-price span, .pk-bill, .pk-in dt, .pk-next, .pk-risk, .pk-x, .pk-in dd.no { color: var(--c-ink-3); }
.pk-price span, .pk-day, .pk-bill, .pk-desks, .pk-next { font-size: .875rem; line-height: 1.45; }
.pk-day { margin-top: 4px; color: var(--c-ink); font-weight: 500; }
.pk-bill { margin-top: 4px; }
.pk-m { display: grid; gap: 8px; }
.pk-bar { height: 4px; border-radius: 2px; background: var(--c-line-2); overflow: hidden; }
.pk-bar i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--c-amber); }
.pk-desks { color: var(--c-ink-2); }
.pk-desks b { color: var(--c-ink); font: 500 .875rem/1 var(--f-mono); }
.pk-in { display: grid; gap: 10px; padding-bottom: 4px; font-size: .875rem; line-height: 1.5; }
.pk-one { font-weight: 500; }
.pk-in dt { margin-top: 8px; font-size: .75rem; }
.pk-in dt:first-child { margin-top: 0; }
.pk-in dd b { font: 500 .8125rem/1 var(--f-mono); white-space: nowrap; color: var(--c-ink-2); }
.pk-f { display: grid; gap: 8px; }
.pk-f .fn-btn { min-height: 48px; padding: 6px 14px; white-space: normal; text-align: center; }
.assure { margin-top: 20px; color: var(--c-ink-2); font-size: .875rem; }
.pl-links { display: flex; justify-content: flex-start; margin-top: 12px; border-top: 1px solid var(--c-line); }
.pl-links .tb { min-height: 48px; color: var(--c-ink-2); font-weight: 400; }
/* SHARED · plan rows (.pp) · COPY of the block of the same name in mt-site.css (section chrome): keep the two identical.
div.pp-list[role=radiogroup] > label.pp(.on) > input[type=radio] + b (name) + small (what it opens) + span.num (price)
The landing does not load mt-site.css. Here and on the price list the rows are the phone plan list (.pl-pick, below). */
/* ── .pp copy: start ── */
.pp-list { display: grid; gap: 8px; }
.pp { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 20px 8px 16px; border: 1px solid var(--c-line-2); border-radius: 999px; background: var(--c-surface); cursor: pointer; }
.pp input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-amber); grid-row: 1 / span 2; }
.pp b { font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.pp small { grid-column: 2; color: var(--c-ink-3); font: 500 .75rem/1.3 var(--f-mono); }
.pp .num { grid-column: 3; grid-row: 1 / span 2; font-size: .875rem; white-space: nowrap; }
.pp.on, .pp:has(input:checked) { border-color: var(--c-ink); }
.pp:has(input:focus-visible) { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.pp:has(input:disabled) { cursor: default; }
.pp:has(input:disabled):not(.on) { opacity: .45; }
@media (min-width: 1024px) and (hover: hover) { .pp:hover:not(.on):not(:has(input:disabled)) { border-color: #8F8F8F; } }
/* ── .pp copy: end ── */
/* SHARED · access: one drawing (QRIS on a phone) and the four steps as a list */
.st { display: grid; gap: 20px; margin-top: 20px; }
.st-vis { display: grid; place-items: end center; height: 180px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #090909; overflow: hidden; }
.st-vis svg { width: auto; height: 90%; }
.sv-q { font: 700 12px var(--f-mono); letter-spacing: .04em; fill: #090909; }
.st-l { counter-reset: st; }
.st-l li { position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--c-line); counter-increment: st; }
.st-l li:last-child { border-bottom: 1px solid var(--c-line); }
.st-l li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 17px; color: var(--c-amber-hi); font: 500 .875rem/1.4 var(--f-mono); }
.st-l h3 { font-size: 1rem; }
.st-l p { margin-top: 2px; color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
/* SHARED · FAQ */
.bot { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 16px; }
.bot svg { flex: none; width: 56px; height: 48px; color: var(--c-amber); }
.bot p { font-size: .875rem; line-height: 1.45; font-weight: 500; }
.bot .note { margin-top: 2px; color: var(--c-ink-3); font-weight: 400; }
.faq-r { margin-top: 12px; }
.fq { border-bottom: 1px solid var(--c-line); }
.fq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font: 500 1rem/1.35 var(--f-text); list-style: none; cursor: pointer; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary i { position: relative; flex: none; width: 16px; height: 16px; transition: transform .24s var(--e-out); }
.fq summary i::before, .fq summary i::after { content: ""; position: absolute; left: 2px; right: 2px; top: 7px; height: 1.5px; background: var(--c-ink-2); }
.fq summary i::after { transform: rotate(90deg); }
.fq[open] summary i { transform: rotate(45deg); }
.fq-a { max-width: 68ch; padding: 0 32px 20px 0; color: var(--c-ink-2); font-size: .875rem; line-height: 1.6; }
.fq-a a { color: var(--c-amber-hi); text-underline-offset: 3px; }
.faq-help { display: grid; justify-items: start; gap: 12px; margin-top: 24px; } /* where an unanswered question goes */
.faq-help p { color: var(--c-ink-2); font-size: 1rem; }
/* SHARED · backdrop: a faint liquidity heatmap behind the first and the last section only (hero and closing call).
It fades out toward the rest of the page, which stays plain. The pointer is a lens that gives it colour; a touch
sends a ring; scrolling pushes time along. Drawn by mt-land.js; decoration only, never above content. */
.hero, .close { position: relative; }
.hero > :not(.bg), .close > :not(.bg) { position: relative; z-index: 1; }
.bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero > .bg { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.close > .bg { -webkit-mask-image: linear-gradient(transparent, #000 38%); mask-image: linear-gradient(transparent, #000 38%); }
/* SHARED · close: a dark band like the rest of the site; amber stays on the button */
.close { background: rgba(255, 255, 255, .036); color: var(--c-ink); border-top: 1px solid var(--c-line); overflow: clip; }
.close-price { max-width: 44ch; margin-top: 12px; font-weight: 500; text-wrap: pretty; }
.close .fn-btn { min-height: 48px; margin-top: 20px; padding: 0 28px; }
.close-trust { margin-top: 12px; color: var(--c-ink-3); font-size: .875rem; }
.close-pic .win { aspect-ratio: 16 / 8.2; }
/* PHONE ONLY (≤719px) */
@media (max-width: 719px) {
.on-td, .on-desk { display: none !important; }
main > section { padding-block: 40px; }
.fn-top { position: static; border-bottom-color: transparent; } /* it scrolls away; the offer bar keeps the button in reach */
.fn-foot { padding-top: 12px; }
.fn-foot-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fn-foot-in > span { grid-column: 1 / -1; }
.fn-foot-in > span:first-child { order: 9; min-height: 32px; }
.fn-foot .sp { order: 10; min-height: 24px; }
.fr-buybar { min-height: 64px; background: #090909; }
.fr-buybar span { display: grid; gap: 2px; }
.fr-buybar span b { color: var(--c-ink); font: 500 .875rem/1.2 var(--f-mono); letter-spacing: -.02em; }
.fr-buybar span small { color: var(--c-ink-3); font-size: .75rem; line-height: 1.2; }
.fr-buybar small::first-letter { text-transform: uppercase; }
.fr-buybar .fn-btn { min-width: 120px; }
/* hero: copy, the frame, its two buttons, then the access button and the price */
main > section.hero { padding-block: 12px 24px; }
.hero-in { grid-template-areas: "copy" "stage" "act"; }
.eye { margin-bottom: 8px; }
.hero-sub { margin-top: 10px; font-size: .875rem; line-height: 1.5; }
.stage { margin-top: 16px; }
.dvb-t b { display: none; }
.cmp { height: 240px; height: clamp(170px, calc(100svh - 560px), 284px); }
.stage-foot { display: grid; gap: 8px; margin-top: 8px; }
.cmp-tog button { flex: 1; min-height: 44px; }
.cmp-tog button::after { content: ""; position: absolute; inset: -4px 0; } /* 44px to look at, 52px to hit */
.stage-cap { font-size: .75rem; }
.hero-act { margin-top: 16px; }
.hero-cta { display: grid; gap: 0; } /* the access button, and its second choice right under it */
.hero-cta .fn-btn { width: 100%; }
.hero-cta .tb { justify-self: center; min-height: 48px; }
.hero-price { margin-top: 12px; }
.hero-trust { margin-top: 2px; }
.quotes { gap: 16px; margin-top: 24px; }
.quotes-st span { display: none; }
.radar-l li:nth-child(n+3) { display: none; }
.tr, .pf { display: flex; gap: 12px; margin: 16px calc(-1 * var(--gut)) 0; padding-inline: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; scrollbar-width: none; }
.tr::-webkit-scrollbar, .pf::-webkit-scrollbar { display: none; }
.tr { margin-top: 8px; }
.tc, .pc { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; }
.tc-pic { aspect-ratio: 328 / 250; }
.tc-pic canvas { --chart-pitch: 8; }
.pf-foot { margin-top: 8px; }
/* plans: a pick list. One pill a plan (.pl-pick), then the chosen plan's contents and its one button.
The pill says the name, the count and the price, so the card's own head is left to screen readers. */
.pl-pick { margin-top: 20px; }
.pl-pick:not([hidden]) + .pl { margin-top: 12px; }
.pl-pick .pp:focus-within { outline: 0; } /* a tap is not a keyboard: the ring is for focus that came by key */
.pl-pick .pp:has(input:focus-visible) { outline: 2px solid var(--c-amber); }
.pl-pick + .pl > .pk { display: grid; gap: 16px; border-color: var(--c-line); }
.pl-pick + .pl > .pk:not(.on) { display: none; }
.pl-pick + .pl .pk-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-pick + .pl .pk-m { display: none; }
.pl-pick + .pl .pk-buy { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-amber-ink); } /* the one button on show is the filled one */
.pl-pick + .pl .pk-buy:focus-visible { outline-color: var(--c-ink); }
.fq-a { padding-right: 0; }
.faq-help .fn-btn { width: 100%; min-height: 48px; }
main > section.close { padding-bottom: 0; }
.close .fn-btn { width: 100%; }
.close-pic { height: 220px; margin-top: 28px; overflow: hidden; }
}
/* PHONE ONLY · short first screens (in-app browsers): the eyebrow and the caption give their room to the picture */
@media (max-width: 719px) and (max-height: 699px) {
.eye, .stage-cap { display: none; }
.cmp { height: clamp(170px, calc(100svh - 430px), 284px); }
}
/* PHONE ONLY · the narrowest phones (≤374px) */
@media (max-width: 374px) and (max-height: 599px) {
.cmp { height: clamp(130px, calc(100svh - 462px), 284px); } /* 320x568: the button stays inside the first screen */
}
@media (max-width: 374px) {
.hero h1 { font-size: 2rem; }
.hero h1 br { display: none; }
}
/* TABLET ONLY (720–1023px) */
@media (min-width: 720px) and (max-width: 1023px) {
.on-ph, .on-desk { display: none !important; }
main > section { padding-block: 56px; }
main h2 { font-size: 1.75rem; }
.fn-foot-in { gap: 0 24px; }
/* hero: copy centred, the frame under it */
main > section.hero { padding-block: 48px 40px; }
.hero-in { grid-template-areas: "copy" "act" "stage"; justify-items: center; text-align: center; }
.hero-copy { display: grid; justify-items: center; }
.hero h1 { margin-top: 12px; font-size: 2.5rem; }
.hero-sub { margin-top: 16px; max-width: 54ch; }
.hero-act { display: grid; justify-items: center; margin-top: 24px; }
.hero-cta { justify-content: center; }
.hero-price { margin-top: 16px; }
.hero-trust { margin-top: 2px; }
.stage { width: 100%; max-width: 680px; margin-top: 40px; text-align: left; }
.cmp { aspect-ratio: 16 / 9.6; }
.cmp-tog button { min-height: 40px; padding: 0 14px; }
.cmp-tog button::after { content: ""; position: absolute; inset: -4px 0; }
.quotes { margin-top: 40px; }
.figs { gap: 20px; margin-top: 28px; }
.fig dd { font-size: 2.5rem; }
.now { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.read, .radar, .pc-b, .pk, .bot { padding: 20px; }
.radar-l li:nth-child(n+4) { display: none; }
.tr { display: flex; gap: 20px; margin: 12px calc(-1 * var(--gut)) 0; padding-inline: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); overscroll-behavior-x: contain; scrollbar-width: none; }
.tr::-webkit-scrollbar { display: none; }
.tc { flex: 0 0 calc(46% - 4px); scroll-snap-align: start; }
.tour .go { margin-top: 24px; }
.pf { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.pc-brief { grid-column: 1 / -1; flex-direction: row-reverse; }
.pc-brief .pc-vis { flex: 0 0 40%; height: auto; min-height: 220px; border-bottom: 0; border-left: 1px solid var(--c-line); }
.pc-b .fn-btn { width: auto; min-width: 200px; }
.pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.pf-foot .go p { display: none; }
.sh-c { text-align: center; } .sh-c .lede { margin-inline: auto; }
.pl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.pp-list.pl-pick { display: none; } /* the pick list is the phone's; here the cards stand side by side */
.pk { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; }
.pk-f { margin-top: auto; }
.assure { margin-top: 24px; text-align: center; }
.st { grid-template-columns: 4fr 8fr; gap: 32px; align-items: center; margin-top: 28px; }
.st-vis { height: 100%; min-height: 260px; }
.faq-r { margin-top: 20px; }
.pl-links { justify-content: flex-end; }
main > section.close { padding-bottom: 0; }
.close-copy { display: grid; justify-items: center; text-align: center; }
.close-pic { height: 320px; margin: 40px 32px 0; overflow: hidden; }
}
/* DESKTOP ONLY (≥1024px) */
@media (min-width: 1024px) {
.on-ph, .on-touch { display: none !important; }
main > section { padding-block: 80px; }
main h2 { font-size: 2.5rem; }
.lede { margin-top: 16px; }
.tb { min-height: 40px; }
.dvb-bar, .tc-bar { padding: 0 14px; }
.fn-top .fn-anchors { display: flex; gap: 4px; margin-right: 12px; }
.fn-top .fn-anchors a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--c-ink-2); font: 500 .875rem/1 var(--f-text); text-decoration: none; }
.fn-top nav .fn-btn { min-height: 40px; padding: 0 18px; }
.fn-foot { padding-block: 28px 44px; }
/* hero: copy left, the frame right, both inside the page's columns; the row of movers closes it */
main > section.hero { padding-block: 72px 0; }
.hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "copy stage" "act stage"; column-gap: 64px; align-items: start; }
.hero h1 { margin-top: 16px; font-size: clamp(2.75rem, 3.9vw, 3.5rem); line-height: 1.08; }
.hero-sub { margin-top: 20px; max-width: 46ch; font-size: 1.125rem; line-height: 1.55; }
.hero-act { margin-top: 28px; }
.hero-price { margin-top: 20px; max-width: 46ch; }
.hero-trust { margin-top: 4px; }
.cmp { aspect-ratio: 16 / 10; }
.quotes { margin-top: 72px; }
.figs { gap: 24px; margin-top: 40px; }
.pulse .figs { max-width: calc((100% - 24px) * 7 / 12); } /* the two figures stand over the AI reading card (.now: 7fr 5fr, gap 24px) */
.fig { padding-top: 16px; gap: 8px; }
.fig dd { font-size: 3.5rem; }
.fig dt { font-size: 1rem; }
.now { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 40px; }
.read, .radar, .pc-b, .pk, .bot { padding: 24px; }
.read blockquote { margin-top: 12px; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; }
.breadth { margin-top: 24px; }
.radar-l li:nth-child(n+4) { display: none; }
/* tour: the live chart as one wide scene, then six framed desks in three columns */
.tour .sh { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
.tour .sh .lede { margin: 0; }
.def { margin-top: 24px; }
.tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; margin-top: 48px; }
/* the lead desk spans the row, its whole window drawn about 1:1 (--X0/--X1/--Y0: the wide crop), name and chip under it like the others */
.tc-big { grid-column: 1 / -1; display: flex; flex-direction: column; }
.tc-big .tc-pic { aspect-ratio: 16 / 8; } /* the 1280 × 720 window from under its toolbar to its lowest candle */
.tc-big .win img { width: calc(10000% / (var(--X1) - var(--X0))); transform: translate(calc(var(--X0) * -1%), calc(var(--Y0) * -1%)); }
.tc-big .tc-b { display: flex; align-items: center; gap: 16px; padding-top: 14px; }
.tc-sm .tc-pic { aspect-ratio: 16 / 10.5; }
.tour .go { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.pf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.pc-brief { flex-direction: row-reverse; }
.pc-brief .pc-vis { flex: 0 0 42%; height: auto; border-bottom: 0; border-left: 1px solid var(--c-line); }
.pc-brief h3 { font-size: 1.75rem; letter-spacing: -.02em; -webkit-line-clamp: 4; }
.pc-brief .deck { font-size: 1rem; -webkit-line-clamp: 4; }
.pc-b .fn-btn { margin-top: 12px; }
.pc-brief .fn-btn { width: auto; min-width: min(220px, 100%); }
.pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 32px; }
.limits { font-size: 1rem; }
.sh-c { text-align: center; } .sh-c .lede { max-width: 58ch; margin-inline: auto; }
.pl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.pl.n2 { max-width: 880px; margin-inline: auto; }
.pl.n1 { grid-auto-columns: minmax(0, 440px); justify-content: center; }
.pk { display: flex; flex-direction: column; gap: 16px; }
.pp-list.pl-pick { display: none; } /* the pick list is the phone's; here the cards stand side by side */
.pk-price b { font-size: 2.5rem; }
.pk-f { margin-top: auto; }
.assure { margin-top: 32px; text-align: center; }
.pl-links { justify-content: flex-end; margin-top: 20px; }
.st { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: center; margin-top: 40px; }
.st-vis { height: 320px; }
.st-l li { padding: 18px 0 18px 56px; }
.st-l li::before { top: 22px; }
.st-l h3 { font-size: 1.25rem; }
.st-l p { font-size: 1rem; }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; grid-template-areas: "l r" "h r"; column-gap: 64px; align-items: start; }
.faq-l { grid-area: l; } .faq-r { grid-area: r; }
.faq-help { grid-area: h; margin-top: 24px; }
.bot { margin-top: 32px; }
.faq-r { margin-top: 0; border-top: 1px solid var(--c-line); }
.fq summary { min-height: 64px; font-size: 1.125rem; }
.fq-a { font-size: 1rem; padding-bottom: 24px; }
main > section.close { padding-block: 80px 0; }
.close-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.close-copy { padding-bottom: 80px; }
.close-price { margin-top: 16px; }
.close .fn-btn { margin-top: 24px; }
.close-pic { align-self: end; margin-bottom: -48px; }
}
/* DESKTOP ONLY · small laptops (1024–1279px): the copy column a little wider, so the headline keeps its two lines */
@media (min-width: 1024px) and (max-width: 1279px) {
.tc-sm .tc-bar .dvb-n { display: none; } /* no room for "Tangkapan layar" in the small frames' bars */
.hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); column-gap: 40px; }
}
/* DESKTOP ONLY · hover */
@media (min-width: 1024px) and (hover: hover) {
.fn-btn.ink:hover { background: #1F1F1F; border-color: #1F1F1F; }
.tb:hover { text-decoration-color: var(--c-amber); }
.fn-top .fn-anchors a:hover { color: var(--c-ink); }
.cmp-tog button:hover { color: var(--c-ink); }
.pc-b .fn-btn:hover, .pk-f .fn-btn:not(.acc):hover { border-color: var(--c-amber); }
.fq-a a:hover { color: var(--c-ink); }
}