/* ═══════════════════════════════════════════════════════════════════════════
site.css — the shared sheet for every public page EXCEPT the homepage.
The homepage (landing.html) carries its own inline styles: it is one
document with a hand-tuned critical path, a canvas orb sequence and a
scroll-driven hero, and inlining is what keeps its LCP short. The supporting
pages are ordinary documents that share one chrome, so they share one file
the browser caches once and reuses across the whole site.
TOKENS ARE COPIED, NOT REINVENTED. The :root and [data-theme] blocks below
are byte-identical to landing.html's, which in turn took them from the mini
app's css/styles.css. Three files, one palette, so a visitor moving
site → homepage → terminal never sees the product change colour.
test_site_seo.py asserts the copies stay identical; drift fails the build
rather than shipping two slightly different blues.
THEME. `data-theme` is set on by the inline boot script in the page
head, reading the same `ml_theme` localStorage key the mini app writes — so
a theme chosen in the terminal is already applied here on first paint, with
no flash. Values: ocean (Black) · dark (Midnight) · light (Daylight).
═══════════════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Geist';
src: url('/css/fonts/Geist.woff2') format('woff2');
font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('/css/fonts/GeistMono.woff2') format('woff2');
font-weight: 100 900; font-style: normal; font-display: swap;
}
/* ── TOKENS (verbatim from landing.html) ──────────────────────────────────── */
:root {
--font-display: 'Geist', system-ui, sans-serif;
--font-body: 'Geist', system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
--maxw: 1120px;
--r-sm: 10px; --r-md: 16px; --r-lg: 22px;
}
[data-theme="ocean"] {
--bg: #000000; --bg-deep: #050506;
--surface: rgba(255,255,255,0.04); --surface2: rgba(255,255,255,0.06);
--border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05);
--blue: #7eb8f7; --accent: #5b9bd5; --accent-glow: rgba(91,155,213,0.22);
--green: #52d9a0; --red: #f07a7a; --gold: #f5c842;
--text: #eaf1fb; --text2: #9fb0c4; --muted: #6f7d8c;
--on-brand: #04121f;
--redact: rgba(159,176,196,0.16);
--card-shadow: 0 12px 30px -8px rgba(0,0,0,0.70);
--mesh-1: radial-gradient(ellipse 90% 50% at 50% -5%, rgba(91,155,213,0.08) 0%, transparent 60%);
--mesh-2: radial-gradient(ellipse 60% 40% at 100% 100%, rgba(91,155,213,0.04) 0%, transparent 60%);
--mesh-3: none;
}
[data-theme="dark"] {
--bg: #0a1322; --bg-deep: #060c16;
--surface: #122036; --surface2: #18283f;
--border: rgba(126,184,247,0.13); --border-soft: rgba(126,184,247,0.07);
--blue: #7eb8f7; --accent: #5b9bd5; --accent-glow: rgba(91,155,213,0.20);
--green: #52d9a0; --red: #f07a7a; --gold: #f5c842;
--text: #e6eefb; --text2: #9fb2cc; --muted: #62788f;
--on-brand: #061021;
--redact: rgba(159,178,204,0.18);
--card-shadow: 0 14px 32px -12px rgba(0,0,0,0.7);
--mesh-1: radial-gradient(ellipse 85% 55% at 50% -5%, rgba(91,155,213,0.10) 0%, transparent 65%);
--mesh-2: radial-gradient(ellipse 55% 50% at 100% 100%, rgba(82,217,160,0.05) 0%, transparent 70%);
--mesh-3: radial-gradient(ellipse 40% 40% at 0% 30%, rgba(45,95,158,0.10) 0%, transparent 60%);
}
[data-theme="light"] {
--bg: #f2efe9; --bg-deep: #e8e3da;
--surface: #fdfcf9; --surface2: #f0ede7;
--border: rgba(100,90,75,0.16); --border-soft: rgba(100,90,75,0.09);
--blue: #2d6fad; --accent: #2d6fad; --accent-glow: rgba(45,111,173,0.18);
--green: #2a8c5e; --red: #c0453a; --gold: #b07d1a;
--text: #1e1a14; --text2: #4a4337; --muted: #3a362f;
--on-brand: #ffffff;
--redact: rgba(74,67,55,0.14);
--card-shadow: 0 2px 14px rgba(60,50,30,0.10);
--mesh-1: radial-gradient(ellipse 90% 55% at 12% 0%, rgba(180,200,225,0.22) 0%, transparent 70%);
--mesh-2: none;
--mesh-3: radial-gradient(ellipse 50% 45% at 85% 90%, rgba(210,195,170,0.28) 0%, transparent 60%);
}
/* ── A LEFT-ALIGNED BLOCK OF TEXT FILLS ITS CONTAINER ──────────────────────
Every `max-width: NNch` below this line used to stop a paragraph partway
across its column and leave the whole of the leftover space on one side.
That is not how a reading measure reads on a page: a measure is only
legible as a decision when the space it gives up is BALANCED, which is why
a centred block can carry one and a left-aligned block cannot. Left
aligned, the void sits entirely to the right of the last line and the
block reads as text that has been cut off — which is exactly how it was
reported, on the journal and then across the site.
The measure is carried by LEADING instead. What makes a long line hard is
the return sweep from the end of one line to the start of the next; extra
line-height is the fix for that, and it costs no width.
Still capped, and correctly: blocks that are centred (space balanced on
both sides), blocks that are visually bounded — a bordered callout, the
terminal mock — and .orb-title, whose "void" is the orbit diagram sitting
in it. */
/* ── BASE ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
position: relative;
isolation: isolate;
font-family: var(--font-body);
/* A FLAT COLOUR, AND THE FIELD IS A LAYER. The mesh gradients used to live
here under `background-attachment: fixed`, which is the one background
property browsers disagree about: iOS Safari ignores it outright and
anchors the gradient to the DOCUMENT, and desktop Safari can leave a
stale band behind during momentum scroll. Anchored to the document, a
gradient placed "at 12% 0%" is only visible near the top of the page —
so the tint over a section became a function of how far down that section
happened to be, and differed between browsers on the same section.
body::before below is `position: fixed`, which every browser anchors to
the viewport with no attachment quirk to disagree about. */
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
/* Never a horizontal scrollbar on the document. Wide content scrolls inside
its own container (.scroll-x) instead — see the tables rule below. */
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent-glow); color: var(--text); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Skip link — the first tab stop on every page.
Hidden by clipping, NOT by parking it at left:-9999px. Under dir="rtl" a
negative `left` sits outside the inline-start edge and the document grows
9999px of scrollable width to contain it: every Persian and Arabic page
scrolled sideways, at every viewport size, because of this one rule. */
.skip {
position: absolute; top: 0; z-index: 200;
width: 1px; height: 1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
background: var(--accent); color: var(--on-brand);
font: 600 14px/1 var(--font-display); border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus {
width: auto; height: auto; padding: 12px 18px;
overflow: visible; clip-path: none;
inset-inline-start: 0;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* ── TYPE SCALE ───────────────────────────────────────────────────────────
clamp() everywhere, because German and Persian headings run 30-50% longer
than the English they were set against. Nothing here is a fixed px size
that a translation can overflow. */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600; line-height: 1.12; letter-spacing: -0.021em;
text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.45rem); }
h3 { font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.3rem); line-height: 1.28; }
h4 { font-size: 1rem; line-height: 1.35; }
h1 em, h2 em { font-style: normal; color: var(--blue); }
p { text-wrap: pretty; }
.eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.13em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.lede {
font-size: clamp(1rem, 0.95rem + 0.32vw, 1.16rem);
line-height: 1.72; color: var(--text2);
}
.note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 13px 22px;
font: 600 14.5px/1 var(--font-display);
border: 1px solid transparent; border-radius: 999px;
cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-brand); }
.btn-primary:hover { background: var(--blue); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--blue); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* An inline "→" link, used to close most sections. */
.linkout {
display: inline-flex; align-items: center; gap: 7px;
font: 600 14.5px/1 var(--font-display); color: var(--blue);
border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.linkout:hover { border-bottom-color: var(--blue); }
/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
/* The navigation bar is 62px and sticky, so anything an in-page link jumps to
lands underneath it. This is the whole fix, and it belongs on the targets
rather than in JavaScript: the browser already knows how to scroll to an
anchor, it just needs to be told how much of the top is spoken for.
Applies to the homepage's own section links and to cross-page ones such as
/verification#checkmark. */
:target,
section[id], [id^="checkmark"], h2[id], h3[id] { scroll-margin-top: 78px; }
/* OPAQUE, AND DELIBERATELY NOT GLASS.
It was `--bg` at 88% with `backdrop-filter: saturate(160%) blur(14px)`,
which is a fine effect over a photograph and the wrong one over this site's
content. Twelve percent of whatever scrolls underneath came through, and
the saturation boost then multiplied the CHROMA of it — so a page of
saturated green and red chart bars (the journal's timing charts, the
marketplace's sparklines) painted coloured smears across the bar as it
passed behind, in positions that moved with the scroll. A header that
changes colour according to what is under it reads as a rendering fault,
because it is one.
The bar sits on the page's own background, so opaque looks identical
wherever nothing is behind it and clean everywhere else. Same treatment as
the journal's chapter bar, which had the same fault for the same reason. */
.topbar {
position: sticky; top: 0; z-index: 100;
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.topbar-in {
display: flex; align-items: center; gap: 18px;
height: 62px;
}
.topbar-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
/* ── THE BRAND MARK ────────────────────────────────────────────────────────
The logo is not an : logo_transparent.png is a white silhouette used
as an ALPHA MASK, and the colour comes from the fill underneath. That is
why the wrong fill turns the logo whatever colour it names, and why a CSS
filter would be the wrong fix — nothing is being tinted, it is being drawn.
TWO FAULTS THIS REPLACES, both from the shared sheet having been written
without checking what the homepage already did:
• It filled with var(--text). That is near-white on the two dark themes
and near-BLACK on Daylight, so the mark was never blue on any page in
any theme.
• It masked icon-512.png, the app icon, rather than the brand mark. Wrong
asset, not just a wrong colour.
var(--blue), not a fixed hex: the brand blue is #7eb8f7 on the dark themes
and #2d6fad on Daylight, and a single value cannot serve both. #7eb8f7 on
the cream page is barely visible; #2d6fad on black is muddy. Both are the
brand blue, and this is the one token that already carries that decision.
────────────────────────────────────────────────────────────────────────── */
.mark {
width: 22px; height: 22px; flex: 0 0 auto;
display: inline-block;
background-color: var(--blue);
-webkit-mask: url('/css/img/logo_transparent.png') center / contain no-repeat;
mask: url('/css/img/logo_transparent.png') center / contain no-repeat;
}
/* The wordmark matches the mark. Without this it inherited the theme's text
colour, which is why the supporting pages showed a white TRIGGON beside a
white logo while the homepage showed a blue one. */
.wordmark {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.11em;
color: var(--blue);
line-height: 1;
}
.topbar-brand .wordmark { font-size: 15px; }
.topbar-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.topbar-nav > a,
.nav-group > button {
display: inline-flex; align-items: center; gap: 5px;
padding: 9px 13px; border-radius: var(--r-sm);
font: 500 14px/1 var(--font-display); color: var(--text2);
background: none; border: 0; cursor: pointer; font-family: var(--font-display);
}
.topbar-nav > a:hover,
.nav-group > button:hover { color: var(--text); background: var(--surface); }
.nav-group > button[aria-expanded="true"] { color: var(--text); background: var(--surface); }
.nav-group > button svg { opacity: .6; transition: transform .18s ease; }
.nav-group > button[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The dropdowns are ordinary lists of links, so they are crawlable and
keyboard-reachable whether or not the script runs. */
.nav-group { position: relative; }
.nav-menu {
position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
min-width: 244px; padding: 8px;
background: var(--bg-deep); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--card-shadow);
display: grid; gap: 2px;
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
padding: 10px 12px; border-radius: var(--r-sm);
font: 500 14px/1.3 var(--font-display); color: var(--text2);
}
.nav-menu a:hover { background: var(--surface); color: var(--text); }
.nav-menu a[aria-current="page"] { color: var(--blue); }
/* Exactly one "Open in Telegram" is visible at any width: .topbar-cta in the
bar on desktop, .nav-cta inside the collapsed menu on mobile. */
.topbar-cta { flex: 0 0 auto; }
/* `.topbar-nav > a` is (0,1,1) and would out-specify a bare `.nav-cta`, so the
in-menu button stayed visible beside the bar's own and the two rendered side
by side on desktop. Matched through the parent, this is (0,2,0) and wins. */
.topbar-nav > .nav-cta { display: none; }
/* The mobile disclosure. Below 900px the whole nav collapses into it. */
.nav-toggle { display: none; }
@media (max-width: 940px) {
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
/* flex: none, or the bar's other children compress it into a sliver. */
flex: 0 0 auto;
width: 40px; height: 40px; margin-inline-start: auto;
background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
color: var(--text); cursor: pointer;
}
.topbar-nav {
position: absolute; top: 100%; inset-inline: 0;
flex-direction: column; align-items: stretch; gap: 2px;
margin: 0; padding: 12px 16px 20px;
background: var(--bg-deep); border-bottom: 1px solid var(--border);
max-height: calc(100vh - 62px); overflow-y: auto;
}
.topbar-nav[hidden] { display: none; }
.nav-menu {
position: static; min-width: 0; box-shadow: none;
border: 0; border-inline-start: 1px solid var(--border);
border-radius: 0; margin: 2px 0 6px 12px; padding: 2px 0 2px 8px;
background: none;
}
.nav-group > button { width: 100%; justify-content: space-between; }
/* The bar keeps the brand and the toggle; the button moves into the menu,
which is the only way three items fit at 360px. */
.topbar-cta { display: none; }
.topbar-nav > .nav-cta { display: inline-flex; margin-top: 12px; width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
THE HEXAGON FIELD
Two drifting layers of hexagons, lifted verbatim from landing.html so the
homepage and the rest of the site share one implementation of the pattern
rather than one each. Any band carrying .deep-band or .soft-band gets it.
THE FOOTER DELIBERATELY DOES NOT. .site-footer carries neither class: the
pattern belongs to the page, and running it underneath five columns of dense
links made them harder to read for nothing in return. That is the one
intentional difference between the page background and the footer.
Both layers are masked top and bottom so a band fades into its neighbours
instead of ending on a hard edge, and both are pointer-events: none so they
never intercept a click.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="ocean"] {
--deep-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(190,215,245,0.017)'/%3E%3C/svg%3E");
--deep-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(126,184,247,0.055)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
--soft-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(190,215,245,0.012)'/%3E%3C/svg%3E");
--soft-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(126,184,247,0.035)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] {
--deep-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(126,184,247,0.022)'/%3E%3C/svg%3E");
--deep-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(126,184,247,0.06)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
--soft-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(126,184,247,0.016)'/%3E%3C/svg%3E");
--soft-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(126,184,247,0.045)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="light"] {
--deep-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(100,90,75,0.022)'/%3E%3C/svg%3E");
--deep-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(100,90,75,0.075)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
--soft-checker-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.8 114'%3E%3Cpolygon points='32.9,0 65.8,19 65.8,57 32.9,76 0,57 0,19' fill='rgba(100,90,75,0.014)'/%3E%3C/svg%3E");
--soft-line-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.9 57'%3E%3Cg fill='none' stroke='rgba(100,90,75,0.05)' stroke-width='1'%3E%3Cpolygon points='16.45,0 32.9,9.5 32.9,28.5 16.45,38 0,28.5 0,9.5'/%3E%3Cpolygon points='0,28.5 16.45,38 16.45,57 0,66.5 -16.45,57 -16.45,38'/%3E%3Cpolygon points='32.9,28.5 49.35,38 49.35,57 32.9,66.5 16.45,57 16.45,38'/%3E%3C/g%3E%3C/svg%3E");
}
/* Band tints, lifted from landing.html and made translucent so the one
hexagon field behind the page reads through every band. */
[data-theme="ocean"] {
--deep-bg: linear-gradient(180deg, rgba(7,10,16,0.82) 0%, rgba(4,6,10,0.82) 100%);
--deep-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(91,155,213,0.055) 0%, transparent 70%);
--soft-bg: linear-gradient(180deg, rgba(5,6,8,0.82) 0%, rgba(0,0,0,0.82) 100%);
--soft-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(91,155,213,0.04) 0%, transparent 70%);
}
[data-theme="dark"] {
--deep-bg: linear-gradient(180deg, rgba(8,17,31,0.82) 0%, rgba(5,11,22,0.82) 100%);
--deep-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(91,155,213,0.07) 0%, transparent 72%);
--soft-bg: linear-gradient(180deg, rgba(13,26,46,0.82) 0%, rgba(10,19,34,0.82) 100%);
--soft-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(91,155,213,0.05) 0%, transparent 72%);
}
[data-theme="light"] {
--deep-bg: linear-gradient(180deg, rgba(235,231,222,0.82) 0%, rgba(227,222,212,0.82) 100%);
--deep-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(45,111,173,0.045) 0%, transparent 72%);
--soft-bg: linear-gradient(180deg, rgba(251,250,246,0.82) 0%, rgba(246,242,234,0.82) 100%);
--soft-veil: radial-gradient(ellipse 78% 62% at 50% 0%, rgba(45,111,173,0.03) 0%, transparent 72%);
}
/* ── THE LAYER ITSELF ──────────────────────────────────────────────────────
One field, fixed to the viewport, behind the whole page. Not per-band: the
homepage used to paint it separately on each alternating section, which is
why its background and the rest of the site's never matched. Bands are now
purely a change of background COLOUR, and the pattern runs continuously
underneath all of them, so every page shares one background system.
THE FOOTER IS THE ONE EXCEPTION. It paints an opaque --bg-deep over this
layer, so the pattern stops at the footer's top edge. Running a drifting
texture under five columns of dense links made them harder to read and
gained nothing.
─────────────────────────────────────────────────────────────────────────── */
body::before, body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* THE MESH RIDES ON THE SAME FIXED LAYER as the hexagons, so the whole field
is one thing anchored one way. Its box IS the viewport (inset: 0 on a fixed
element), so `cover` reproduces exactly what `background-attachment: fixed`
was asking for, in every browser. */
body::before {
background-image: var(--mesh-1), var(--mesh-2), var(--mesh-3),
var(--deep-checker-hex);
background-size: cover, cover, cover, 131.6px 228px;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
body::after {
background-image: var(--deep-line-hex);
background-size: 65.8px 114px;
}
/* ── STATIC, AND THAT IS THE POINT ─────────────────────────────────────────
Both layers used to drift on infinite 120s and 190s timers. A CSS animation
starts when the element is created, so the field's position was a function
of HOW LONG THE TAB HAD BEEN OPEN — and a reload restarted it from zero.
Measured on the journal at 1440x900: 1.09% of the viewport differed between
load and forty-five seconds later, at up to 21/255 per channel. That is the
reported fault exactly: refresh a page you had been reading and the
background is not where it was, on a section whose content never changed.
Two pages open at the same section could not agree either.
A background that identifies a section has to be a function of the section
and the theme, and of nothing else. Motion tied to wall-clock time cannot
be, so the motion is gone rather than the determinism. */
@media (max-width: 560px) {
body::before { background-size: 92px 160px; }
body::after { background-size: 46px 80px; }
}
/* Bands sit above the field and tint it. NO `isolation: isolate` and no
opaque background: either would create a stacking context or a solid fill
that hides the field, which is exactly how the homepage ended up painting
its own copy of the pattern per band. */
.deep-band, .soft-band {
position: relative;
border-block: 1px solid var(--border-soft);
}
.deep-band { background: var(--deep-veil), var(--deep-bg); }
.soft-band { background: var(--soft-veil), var(--soft-bg); }
/* ── SECTION BANDS ────────────────────────────────────────────────────────── */
.band { padding-block: clamp(56px, 4vw + 34px, 96px); }
/* ── THE MEASURE BELONGS TO THE FONT IT MEASURES ──────────────────────────
This used to be `.band-head { max-width: 68ch }`, and it was wrong in a way
that is invisible in the source and obvious on the page.
`ch` is the width of the "0" glyph IN THE ELEMENT'S OWN FONT. .band-head is
a plain div at 16px, so 68ch resolved to 721px. But the h2 inside it is
clamped up to 39.2px, where one ch is 26.75px — two and a half times wider.
So a cap that reads as "sixty-eight characters" gave the heading room for
TWENTY-SEVEN, and the number in the source described neither element.
The visible result: a section heading needing 919px was squeezed into 721,
text-wrap: balance then split it into two even lines of ~455px, and the
break landed in the middle of a 1072px content column while the card grid
directly beneath it ran the full width. It did not move with the viewport
either — 721px at 1512, 1280 and 1024 alike — so the mismatch held across
the whole desktop range.
The fix is not a bigger number on the wrapper. It is to put each measure on
the element it actually governs, so the unit resolves against the right
font:
• the PROSE gets a reading measure, in ch of the paragraph's own font.
Long lines of body text are genuinely hard to read, so this cap earns
its place.
• the HEADING gets none, and uses the content column. A section heading
is meant to sit at the same width as the section under it; that is
what "aligned" means here, and it is what a cap was preventing.
THE HEADING CAP WAS MEASURED AWAY RATHER THAN TUNED. Every candidate value
was arbitrary, so the widest heading on the site was measured instead, in
every language: 962px on /analytics in English, 957px for the French
homepage, both inside a 1072px column. No real heading reaches the column,
so a cap only ever fires on the two or three that come closest, and firing
is exactly the failure being fixed: text-wrap: balance halves a heading
that is twenty pixels too long, and the break lands mid-page.
Nothing runs away without it. The column is itself a bound, and balance
still splits any heading that genuinely does not fit into even lines, which
is what it is for. */
.band-head { margin-bottom: 40px; }
.band-head p { margin-top: 16px; line-height: 1.72; }
/* padding-block, never the shorthand: .page-head is applied to the SAME
element as .wrap, and `padding: X 0 Y` silently zeroes .wrap's 24px
gutter. The text then sits flush against the edge of a phone screen. */
.page-head { padding-block: clamp(52px, 5vw + 26px, 96px) clamp(34px, 3vw + 18px, 54px); }
.page-head .lede { margin-top: 18px; }
/* Breadcrumbs — visible, and the same trail the BreadcrumbList schema states. */
.crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font: 500 12.5px/1.4 var(--font-display); color: var(--muted);
margin-bottom: 18px;
}
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-hidden] { opacity: .5; }
/* ── PROSE (legal pages, guides) ──────────────────────────────────────────── */
.prose { line-height: 1.78; }
/* The Last Updated line on a legal page. Directly under the h1 rather than
buried at the foot, because on a document that changes it is the first
thing a returning reader checks. */
.legal-updated {
margin-top: 14px; font-size: 13.5px; color: var(--muted);
font-family: var(--font-mono); letter-spacing: .02em;
}
/* Long legal pages are mostly h2 + list. Tighten the list so a nineteen-
section document does not read as nineteen separate pages. */
.prose ul li, .prose ol li { padding-inline-start: 2px; }
.prose h2 { margin: 44px 0 14px; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose li { color: var(--text2); font-size: 15.5px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 14px 22px; display: grid; gap: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--blue); border-bottom: 1px solid var(--border); }
.prose a:hover { border-bottom-color: var(--blue); }
/* ── THE EXECUTION CHAIN ──────────────────────────────────────────────────
Four stages a Signal passes through, each with its own failure mode. It is
a diagram, so it has to READ as a sequence rather than as four unrelated
cards, and it has to survive translation into languages that run 30-50%
longer than the English it was set against.
EXPLICIT COLUMN COUNTS, never auto-fit. The homepage's concept chain used
`repeat(auto-fit, minmax(...))` and resolved to four columns at desktop
with the fifth stranded on a row of its own, which is the one thing a chain
must not do. Four here, two at tablet, one on a phone: each is a real
arrangement rather than whatever a minmax happens to produce.
The connector is drawn ONLY in the single-row layout, for the same reason:
an arrow pointing at the end of a row is worse than no arrow. It is an
inset-inline-start pseudo-element, so it mirrors itself for Persian and
Arabic instead of pointing backwards. */
.flow {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 18px;
grid-template-columns: repeat(4, 1fr);
}
.flow-step {
position: relative;
padding: 22px 20px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--border);
/* A column, so the risk block can be pushed to the bottom. The four "what
can go wrong" rows have to start on the same line across all four cards
or the eye cannot scan them as one row, and the descriptions above them
are different lengths in English and wildly different after translation. */
display: flex; flex-direction: column;
}
.flow-step h3 { margin: 0 0 10px; font-size: 1.02rem; }
.flow-n {
display: block; margin-bottom: 10px;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
letter-spacing: .08em; color: var(--accent);
}
.flow-what { color: var(--text2); font-size: 14px; line-height: 1.6; }
.flow-risk {
margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--border-soft);
color: var(--text2); font-size: 13.5px; line-height: 1.58;
}
/* The minimum gap when `margin-top: auto` has no slack to distribute. */
.flow-what { margin-bottom: 12px; }
.flow-risk b { color: var(--gold); font-weight: 600; }
/* The connector, single-row layout only. */
.flow-step + .flow-step::before {
content: ""; position: absolute; top: 50%;
inset-inline-start: -13px; width: 8px; height: 1px;
background: var(--border);
}
@media (max-width: 1000px) {
.flow { grid-template-columns: repeat(2, 1fr); }
.flow-step + .flow-step::before { content: none; }
}
@media (max-width: 620px) {
.flow { grid-template-columns: 1fr; }
}
/* ── CARD GRIDS ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.card {
padding: 24px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--border);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text2); font-size: 14.5px; line-height: 1.62; }
.card .idx {
display: block; font-family: var(--font-mono); font-size: 11px;
font-weight: 600; color: var(--accent); letter-spacing: .08em; margin-bottom: 12px;
}
/* ── THE CONCEPT CHAIN ────────────────────────────────────────────────────
Strategy → Provider → Signal → Marketplace → Auto-Trade.
A real left-to-right progression on wide screens, a vertical spine with a
connecting rule on narrow ones and in RTL. This is the diagram a reader
screenshots to explain Triggon, so it has to hold up out of context. */
/* Explicit column counts, not auto-fit: with five steps, auto-fit resolves to
four columns at desktop width and drops the fifth onto a row of its own,
which is exactly what a chain must not do. */
.chain { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .chain { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1060px) { .chain { grid-template-columns: repeat(5, 1fr); } }
.chain-step {
position: relative; padding: 22px 20px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md);
}
.chain-step .idx {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .1em; color: var(--accent); text-transform: uppercase;
}
.chain-step h3 { margin: 10px 0 8px; font-size: 1.05rem; }
.chain-step p { font-size: 13.8px; line-height: 1.6; color: var(--text2); }
/* The connector. Drawn with a pseudo-element so it disappears cleanly when the
grid reflows to one column, and mirrored for RTL by the logical property. */
.chain-step::after { content: none; }
@media (min-width: 1060px) {
.chain-step::after {
content: ''; position: absolute; top: 50%; inset-inline-end: -14px;
width: 14px; height: 1px; background: var(--border);
}
.chain-step:last-child::after { content: none; }
[dir="rtl"] .chain-step::after { transform: scaleX(-1); }
}
@media (max-width: 479px) {
.chain-step::after {
content: ''; position: absolute;
top: auto; bottom: -14px; inset-inline-end: auto; inset-inline-start: 28px;
width: 1px; height: 14px; background: var(--border);
}
.chain-step:last-child::after { content: none; }
}
/* ── THE CAN / CANNOT TABLE ───────────────────────────────────────────────
The security section's whole argument. Typographic on purpose: no shields,
no padlocks. Specificity is what reassures; iconography reads as marketing. */
.cando { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cando > div { padding: 26px; border-radius: var(--r-md); border: 1px solid var(--border); }
.cando .can { background: var(--surface); }
.cando .cannot { background: var(--surface2); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.cando h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cando p { color: var(--text2); font-size: 14.5px; line-height: 1.65; }
.cando p + p { margin-top: 12px; }
/* ── METRIC / FACT LISTS ──────────────────────────────────────────────────── */
.facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Six equal items land 5 + 1 at laptop width on the default track, which
strands the last one. This widens the track so they read as two rows of
three, and still collapses to two and then one on smaller screens. */
.facts.facts-6 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fact {
padding: 15px 16px; border-radius: var(--r-sm);
background: var(--surface); border: 1px solid var(--border-soft);
}
.fact b {
display: block; font-family: var(--font-display); font-size: 14.5px;
font-weight: 600; color: var(--text); margin-bottom: 3px;
}
.fact span { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Weighted bars — the Triggon Score inputs. */
.weights { display: grid; gap: 12px; margin-top: 20px; }
.weight { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 14px; align-items: center; }
.weight-name { font-size: 14px; color: var(--text2); }
.weight-bar { height: 7px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.weight-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.weight-pct { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); min-width: 44px; text-align: end; }
@media (max-width: 560px) {
.weight { grid-template-columns: 1fr auto; }
.weight-bar { grid-column: 1 / -1; }
}
/* ── STEP LISTS ───────────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; gap: 4px; }
.steps li {
counter-increment: s; list-style: none; position: relative;
padding: 14px 0 14px 46px;
border-top: 1px solid var(--border-soft);
font-size: 15px; color: var(--text2); line-height: 1.6;
}
[dir="rtl"] .steps li { padding: 14px 46px 14px 0; }
.steps li::before {
content: counter(s, decimal-leading-zero);
position: absolute; inset-inline-start: 0; top: 15px;
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
color: var(--accent); letter-spacing: .06em;
}
.steps li b { color: var(--text); font-weight: 600; }
/* ── FAQ ──────────────────────────────────────────────────────────────────
, so every answer is in the DOM for a crawler and for find-in-page
whether or not it is open, and it works with no script at all. */
/* ── FAQ GROUP HEADINGS ───────────────────────────────────────────────────
These had NO RULE AT ALL. `.faq-group` fell through to the global h2 and
the reset's `margin: 0`, so a 44px heading box sat FLUSH between two .faq
blocks — and each block draws a 1px rule at its top and bottom edge.
Measured gap above and below: zero, at every viewport. The rules ran
straight into the heading's ascenders and descenders, which is the
collision on the page.
Spacing is the whole fix. The size is deliberately left alone: inside this
band there is no other section heading, so the group labels ARE the section
headings and they are the same size as every other page's h2. Shrinking
them would buy the gap by breaking the hierarchy the rest of the site uses.
Asymmetric on purpose: a lot of room above, a little below, so a heading
belongs to the block underneath it rather than floating between two. The
first one sits directly under the band's own top padding and needs none. */
.faq-group {
margin-block: clamp(44px, 4.4vw, 68px) clamp(14px, 1.4vw, 20px);
/* The h2 line-height is 1.12, which is right for display type and leaves
almost nothing between the box edge and the glyphs. A trim of leading
here keeps the descenders clear of the rule below without touching the
global heading rhythm. */
padding-bottom: 2px;
}
.faq-group:first-child { margin-block-start: 0; }
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
padding: 20px 0; cursor: pointer; list-style: none;
font: 600 16px/1.45 var(--font-display); color: var(--text);
}
/* ── THE QUESTION IS AN
NOW ──────────────────────────────────────────
Every declaration here is a RESET, not a style. The question became a real
heading with an id so it can be linked to and cited, and the moment it did
it started inheriting the global h3 rule: -0.021em tracking, text-wrap
balance, and the h3 margin. Balance is the damaging one — it re-breaks a
long question into two short ragged lines inside a control that is already
sized for it. `font: inherit` alone does not undo tracking or wrapping, so
both are named. min-width:0 stops a long unbroken token widening the flex
row past the summary. */
.faq summary .faq-q {
font: inherit; letter-spacing: normal; text-wrap: wrap;
margin: 0; min-width: 0;
}
/* Arrival feedback for someone following a link to one question. */
.faq summary .faq-q:target { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+'; flex: 0 0 auto;
font-family: var(--font-mono); font-size: 18px; color: var(--accent);
line-height: 1.2; transition: transform .18s ease;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding-bottom: 22px; }
.faq details p { color: var(--text2); font-size: 15px; line-height: 1.76; }
.faq details p + p { margin-top: 12px; }
/* ── CALLOUTS ─────────────────────────────────────────────────────────────── */
.callout {
padding: 18px 20px; border-radius: var(--r-md);
background: var(--surface); border: 1px solid var(--border);
border-inline-start: 3px solid var(--accent);
font-size: 14.5px; line-height: 1.65; color: var(--text2);
margin: 26px 0;
}
.callout strong { color: var(--text); }
.callout.warn { border-inline-start-color: var(--gold); }
/* ── WIDE CONTENT ─────────────────────────────────────────────────────────
The document body never scrolls sideways; wide things scroll inside this. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 560px; border-collapse: collapse; width: 100%; }
.scroll-x th, .scroll-x td {
padding: 12px 14px; text-align: start; font-size: 14px;
border-bottom: 1px solid var(--border-soft); color: var(--text2);
}
.scroll-x th { color: var(--text); font-weight: 600; white-space: nowrap; }
/* ── THE ALGO / MANUAL COMPARISON ─────────────────────────────────────────
A three-column table is the right STRUCTURE for this content and the wrong
SHAPE for a 360px screen, where .scroll-x's 560px minimum can only be read
by dragging it sideways. The rendered audit measured it sticking 224px past
the viewport on both phone sizes in all three themes.
So below 700px the same table is re-laid as one block per row, each cell
labelled with the column it came from. The markup is untouched: still one
, still one
per row, so a crawler and a screen
reader read the same relationships they always did, while a phone reads it
top to bottom with nothing to scroll.
─────────────────────────────────────────────────────────────────────── */
.cmp-wrap > table { min-width: 0; }
@media (max-width: 700px) {
.cmp-wrap { overflow-x: visible; }
.cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
/* The header row is redundant once every cell carries its own label, but it
stays in the DOM: removing it would change what the table means. */
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cmp tbody tr {
border: 1px solid var(--border-soft); border-radius: var(--r-sm);
padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.scroll-x.cmp-wrap th, .scroll-x.cmp-wrap td { border-bottom: 0; padding: 0; }
.cmp tbody th[scope="row"] {
color: var(--text); font-weight: 600; white-space: normal;
padding-bottom: 9px; margin-bottom: 9px;
border-bottom: 1px solid var(--border-soft);
}
.cmp tbody td + td { margin-top: 9px; }
.cmp tbody td::before {
content: attr(data-label);
display: block; margin-bottom: 2px;
font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
}
}
/* ── CLOSING CTA ──────────────────────────────────────────────────────────── */
/* ── THE CLOSING LOCKUP: MARK, HEADING, LINE ──────────────────────────────
The mark was a fixed 30px under a heading clamped from 25.8px to 39.2px, so
the relationship between them INVERTED across the breakpoints it was meant
to hold at: the heading was 1.31x the mark on a desktop and 0.86x on a
phone. A fixed length under a fluid one cannot be balanced at more than one
width, which is why it looked wrong at the two ends and right in the middle.
So the mark is clamped on the same curve as the heading, scaled by the
proportion the homepage's own closing block already uses (46px mark under a
36px heading, 1.28). It now holds that ratio at every width:
1440px mark 50px heading 39.2px 1.28
834px mark 44px heading 34.2px 1.29
390px mark 33px heading 25.8px 1.28
The gaps scale with it, and the line under the heading moves up to the same
size .lede uses, because at a flat 16px it read as a caption to the heading
rather than as the sentence the heading is introducing. */
.close-cta { padding-block: clamp(60px, 5vw + 34px, 104px); text-align: center; }
.close-cta .mark {
width: clamp(33px, 1.5rem + 2.4vw, 50px);
height: clamp(33px, 1.5rem + 2.4vw, 50px);
margin: 0 auto clamp(18px, 1.9vw, 28px);
}
.close-cta p {
margin: clamp(14px, 1.5vw, 20px) auto 0; max-width: 52ch; color: var(--text2);
font-size: clamp(1rem, 0.96rem + 0.28vw, 1.1rem); line-height: 1.62;
}
.close-cta .cta-row { justify-content: center; }
/* ── FOOTER ───────────────────────────────────────────────────────────────── */
/* Opaque, so the hexagon field stops at the footer's top edge. This is the
one place the pattern is deliberately absent. */
.site-footer { position: relative; z-index: 1;
background: var(--bg-deep);
border-top: 1px solid var(--border-soft); padding-block: 62px 34px; }
.footer-cols {
display: grid; gap: 34px 26px;
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
padding-bottom: 38px; border-bottom: 1px solid var(--border-soft);
}
.footer-col h4 {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
margin-bottom: 14px;
}
.footer-col a {
display: block; padding: 5px 0; font-size: 14px; color: var(--text2);
}
.footer-col a:hover { color: var(--blue); }
.footer-end { padding-top: 26px; display: grid; gap: 18px; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; }
.footer-brand .wordmark {
font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .11em;
}
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: 50%; color: var(--text2);
}
.social-link:hover { color: var(--blue); border-color: var(--accent); }
.social-link svg { width: 15px; height: 15px; }
/* The language row is internal linking, not decoration: it is how a crawler
reaches every localized version from any page. It is never collapsed behind
a script-driven control. */
.lang-switch { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lang-switch a { font-size: 13px; color: var(--muted); }
.lang-switch a:hover { color: var(--blue); }
.lang-switch a[aria-current="true"] { color: var(--text); }
/* "Talk to a person", above the risk statement: the contact form moved to
/support and this is the pointer that replaces it on every page. */
.footer-contact { font-size: 13px; line-height: 1.6; color: var(--text2); }
.footer-contact a { color: var(--blue); border-bottom: 1px solid color-mix(in srgb, var(--blue) 34%, transparent); }
.footer-contact a:hover { border-bottom-color: var(--blue); }
.risk-line {
font-size: 12.5px; line-height: 1.72; color: var(--muted);
padding-top: 4px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; color: var(--muted); }
/* The date the page last changed, beside the copyright. Mono because it is an
ISO date and sits next to prose; no colour of its own, because .footer-legal
has already set --muted for the whole row. */
.footer-updated { font-family: var(--font-mono); letter-spacing: .02em; }
/* The theme control. It used to live in the homepage's top bar, which is one
of the things that made that bar crowded; here it is on every page instead
of only one, and out of the way of the navigation. Same three themes and the
same storage key the mini app writes. */
.theme-cycle {
display: inline-flex; align-items: center; gap: 7px;
margin-inline-start: auto;
padding: 6px 12px 6px 9px;
background: transparent;
border: 1px solid var(--border); border-radius: 999px;
color: var(--text2); cursor: pointer;
font: 600 10.5px/1 var(--font-mono);
letter-spacing: 0.12em; text-transform: uppercase;
transition: border-color .16s ease, color .16s ease;
}
.theme-cycle:hover { border-color: var(--accent); color: var(--text); }
.theme-cycle .swatch {
width: 9px; height: 9px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (max-width: 620px) {
.theme-cycle { margin-inline-start: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PAGE VISUALS — one per navigation page, beside the page's own heading.
The homepage demonstrates every feature with a COMPONENT rather than a
picture: the same tokens, the same type, drawn in HTML so it follows the
theme and never goes stale. The Product pages got one each, composed for
that page's argument — a Signal's lifecycle on /signals, the comparison
list on /marketplace, the record's numbers on /analytics, the limits and
the rails on /auto-trade, the shared journal on /journals, the key check
on /security — and nothing borrowed from the homepage.
THE SAME STANDARD NOW HOLDS FOR EVERY PAGE THE NAVIGATION REACHES. Prop
Check was the one Product page without a visual; the five Providers pages
and the nine Learn pages had none. Each now carries exactly one, drawn
from what that page is actually about: the Prop Check chapter as the
journal prints it, the Hub's Connection tab and go-live gate, the Signal
Terminal, one subscription split on the published terms, an alert
becoming a Signal, a trade written before its outcome was known, the
review states and the checkmark's rolling window, the two questions that
separate four ways of trading, the record's account beside yours, the
terminal in Telegram, the FAQ's own groups, a drawdown drawn, a wallet
paying one subscription, and the support chat.
The kit below is the homepage's `mk` language under a `pv` name: this sheet
and landing.html are separate documents, so the rules are stated here once
rather than referenced across the two. Every figure is a labelled sample,
every colour is a token so the three themes need nothing reconciled, and
every animation moves opacity or a transform only, so nothing shifts
layout and reduced motion holds the end state.
═══════════════════════════════════════════════════════════════════════════ */
/* ── THE HEAD, WITH A VISUAL BESIDE IT ──────────────────────────────────── */
/* One column on a phone (the copy first, then the visual), two from 960px.
minmax(0, …) on both tracks so a wide row inside a visual can never widen
the page past the viewport. Applied to the same element as .wrap, so
padding is never set here as a shorthand — see the test on .page-head. */
.page-head.has-visual {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(30px, 4vw, 52px); align-items: center;
}
.head-copy, .head-visual { min-width: 0; }
.page-head.has-visual h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.95rem); }
@media (min-width: 960px) {
.page-head.has-visual { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
}
/* ── THE KIT ────────────────────────────────────────────────────────────── */
.pv { font-size: 12px; line-height: 1.45; color: var(--text); direction: ltr; text-align: start; }
.pv-panel {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 12px 14px; position: relative; min-width: 0;
box-shadow: var(--card-shadow);
}
.pv-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--text2);
margin-bottom: 10px; min-width: 0;
}
.pv-head b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-chip {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
padding: 3px 7px; border-radius: 5px; line-height: 1; white-space: nowrap;
color: var(--text2); border: 1px solid var(--border); vertical-align: middle;
}
.pv-chip-g { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.pv-chip-r { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.pv-chip-b { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.pv-chip-y { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.pv-live { display: inline-flex; align-items: center; gap: 6px; }
.pv-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); animation: pvPulse 2.6s ease-in-out infinite; }
@keyframes pvPulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 4%, transparent); }
}
.pv-metrics { display: grid; gap: 8px 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-metric { min-width: 0; }
.pv-metric b { display: block; font-family: var(--font-mono); font-size: 15px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.pv-metric span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.pv-metric span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text2); }
.pv .pos { color: var(--green); }
.pv .neg { color: var(--red); }
.pv-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pv-bar { height: 5px; border-radius: 3px; background: var(--redact); overflow: hidden; }
.pv-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.pv-bar.full i { background: var(--gold); }
.pv-note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.pv-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 7px 0; border-bottom: 1px solid var(--border-soft);
font-family: var(--font-mono); font-size: 10.5px; color: var(--text2); font-variant-numeric: tabular-nums;
}
.pv-row:last-child { border-bottom: 0; }
.pv-row b { color: var(--text); font-weight: 600; }
.pv-row .dim { color: var(--muted); }
.pv-tick { color: var(--green); font-weight: 700; font-style: normal; }
.pv-cross { color: var(--red); font-weight: 700; font-style: normal; }
.pv-log { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.75; color: var(--text2); font-variant-numeric: tabular-nums; }
.pv-log div { display: flex; gap: 8px; align-items: baseline; }
.pv-log b { color: var(--text); font-weight: 600; }
.pv-log .t { color: var(--muted); flex: none; }
.pv-log .pv-tick, .pv-log .pv-cross { flex: none; }
/* A curve: SVG stretched to its box, hairline strokes, drawn in the tokens. */
.pv-curve { position: relative; width: 100%; aspect-ratio: 320 / 100; }
.pv-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-curve .ln { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pv-curve .fl { fill: var(--green); opacity: .16; }
.pv-curve .dd { fill: var(--red); opacity: .16; }
.pv-curve .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-curve .end { fill: var(--green); }
.pv-curve .lbl { font-family: var(--font-mono); font-size: 8px; fill: var(--muted); }
/* A phone, the same neutral frame the homepage draws. */
.pv-phone {
width: 236px; max-width: 100%; border-radius: 30px;
border: 1px solid var(--border); background: var(--bg-deep);
padding: 10px 10px 14px; box-shadow: var(--card-shadow); position: relative; flex: none;
}
.pv-phone-bar {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2);
padding: 4px 6px 10px;
}
.pv-phone-bar b { color: var(--text); font-weight: 600; letter-spacing: .12em; }
.pv-phone-notch { width: 56px; height: 5px; border-radius: 5px; background: var(--redact); margin: 0 auto 8px; }
/* The crest, as badges.py draws it: one hexagon, currentColor throughout. */
.pv .crest { width: 12px; height: 12px; flex: none; display: block; fill: currentColor; overflow: visible; }
.pv .crest .cg-s { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv .crest .cg-d { fill: currentColor; }
.pv .crest .cg-k { fill: none; stroke: var(--on-brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-badge {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 5px; border-radius: 99px;
font-size: 9px; font-weight: 600; line-height: 12px; white-space: nowrap;
color: var(--crest-c, var(--muted)); background: color-mix(in srgb, var(--crest-c, var(--muted)) 15%, transparent);
}
.pv-badge b { font: 700 9px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.pv-head .pv-badge { text-transform: none; letter-spacing: 0; }
.pv-badge em { font-style: normal; opacity: .62; }
.pv .lv-rising { --crest-c: color-mix(in srgb, var(--accent) 58%, var(--muted)); }
.pv .lv-elite { --crest-c: var(--accent); }
.pv .lv-pro { --crest-c: var(--green); }
.pv .lv-ready { --crest-c: var(--green); }
.pv-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 9px; font-weight: 600; line-height: 12px; white-space: nowrap; }
.pv-pill.live { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.pv-pill.ver { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.pv-pill.full { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
/* A switch, drawn: on is the accent, off is the track. */
.pv-switch { width: 24px; height: 14px; border-radius: 7px; background: var(--redact); position: relative; flex: none; }
.pv-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text2); }
.pv-switch.on { background: var(--accent); }
.pv-switch.on::after { left: 12px; background: var(--on-brand); }
/* ── /signals: THE SIGNAL, AND THE POSITION THAT KEEPS TALKING ─────────── */
/* The phone carries the entry card and then the position's own updates,
each arriving as its own Signal; beside it, the checks a Signal passed
before it was allowed to arrive, and the record it belongs to. */
.pv-signals { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.pv-signals .pv-phone { width: 220px; }
.pv-tcard {
--c-bg: #14171f; --c-line: #262b38; --c-text: #eef1f7; --c-muted: #8f96a8; --c-dim: #b7bdcc;
border-radius: 12px; padding: 11px 12px 10px; background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-text);
}
.pv-tcard .tc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-tcard .tc-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.pv-tcard .tc-state { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
.pv-tcard .tc-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pv-tcard .tc-head b { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pv-tcard .tc-strat { margin-inline-start: auto; font-size: 9.5px; color: var(--c-muted); white-space: nowrap; }
.pv-tcard .tc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 10px; }
.pv-tcard .tc-grid span { display: block; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.pv-tcard .tc-grid b { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.pv-tcard .tc-grid b small { font-size: 9px; color: var(--c-dim); font-weight: 500; }
.pv-tcard .tc-foot { display: flex; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--c-line); font-size: 9px; color: var(--c-muted); }
.pv-msg {
margin-top: 7px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface);
font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5; color: var(--text2); position: relative; padding-inline-start: 12px;
}
.pv-msg::before { content: ''; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--msg-c, var(--blue)); opacity: .8; }
.pv-msg.up { --msg-c: var(--green); }
.pv-msg .t { display: block; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pv-msg b { color: var(--text); font-weight: 600; }
/* The updates arrive one after another, then the loop resets: a 12s cycle
every bubble shares, showing its own moment. Reduced motion holds the end. */
.pv-msg { animation: pvMsg 12s ease-in-out infinite; }
.pv-msg:nth-of-type(2) { animation-delay: 2.4s; }
.pv-msg:nth-of-type(3) { animation-delay: 4.8s; }
@keyframes pvMsg {
0%, 4% { opacity: 0; transform: translateY(6px); }
10%, 100% { opacity: 1; transform: none; }
}
.pv-checks .pv-row { padding: 6px 0; }
.pv-checks .pv-row { flex-wrap: wrap; gap: 2px 8px; }
.pv-checks .pv-row span { display: flex; align-items: baseline; gap: 6px; }
.pv-checks .pv-row .dim { margin-inline-start: auto; font-size: 9.5px; }
.pv-record { margin-top: 12px; }
.pv-record .who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-record .who b { font-size: 12.5px; }
.pv-record .pv-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
.pv-signals { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pv-signals > .pv-side { width: 100%; }
}
/* ── /marketplace: THE COMPARISON LIST ─────────────────────────────────── */
.pv-mkt .filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.pv-mkt .bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.pv-mkt .search { flex: 1; min-width: 0; border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 9px; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-mkt .sort { flex: none; font: 700 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.pv-strat { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.pv-strat .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-strat .nm b { font-size: 12.5px; }
.pv-strat .nm .by { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.pv-strat .nm, .pv-strat .pv-metrics { grid-column: 1; }
.pv-strat .pv-curve { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 96 / 40; }
.pv-strat .pv-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
.pv-strat .pv-metric b { font-size: 12.5px; }
.pv-strat .foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.pv-strat .foot .pv-bar { flex: 1; }
.pv-strat .foot b { color: var(--text); font-weight: 600; white-space: nowrap; }
.pv-strat.pick { background: color-mix(in srgb, var(--accent) 6%, transparent); margin-inline: -14px; padding-inline: 14px; border-radius: 0; }
@media (max-width: 460px) {
.pv-strat { grid-template-columns: minmax(0, 1fr); }
.pv-strat .pv-curve { grid-column: 1; grid-row: auto; aspect-ratio: 320 / 44; }
}
/* ── /analytics: EVERY NUMBER, FROM THE RECORD ─────────────────────────── */
.pv-dash .pv-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.pv-dash .pv-curve { aspect-ratio: 320 / 96; }
.pv-dash .stamp { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.pv-dash .stamp b { color: var(--text2); font-weight: 600; }
.pv-score { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.pv-score .pv-head { margin-bottom: 8px; }
.pv-weights { display: grid; gap: 5px; }
.pv-weight { display: grid; grid-template-columns: minmax(96px, 1.2fr) 2fr 30px; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--text2); }
.pv-weight .pv-bar { height: 4px; }
.pv-weight i.w { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pv-weight .pct { text-align: end; color: var(--muted); }
@media (max-width: 480px) {
.pv-dash .pv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── /auto-trade: THE LIMITS YOU SET, THE RAILS THAT HOLD ──────────────── */
.pv-at { display: grid; gap: 12px; }
.pv-at .lim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pv-at .lim div { padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface2); }
.pv-at .lim span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-at .lim b { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 650; margin-top: 3px; letter-spacing: -.01em; }
.pv-at .toggles { display: grid; gap: 4px; margin-top: 10px; }
.pv-at .toggles div { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text2); padding: 4px 0; }
.pv-at .toggles div b { color: var(--text); font-weight: 600; }
.pv-at .toggles div .dim { color: var(--muted); margin-inline-start: auto; }
.pv-at .toggles div.off { opacity: .6; }
.pv-rails { animation: none; }
.pv-rails .pv-log div { animation: pvRail 14s ease-in-out infinite; }
.pv-rails .pv-log div:nth-child(2) { animation-delay: 1.4s; }
.pv-rails .pv-log div:nth-child(3) { animation-delay: 2.8s; }
.pv-rails .pv-log div:nth-child(4) { animation-delay: 4.2s; }
.pv-rails .pv-log div:nth-child(5) { animation-delay: 5.6s; }
.pv-rails .pv-log div:nth-child(6) { animation-delay: 7.0s; }
@keyframes pvRail {
0%, 2% { opacity: 0; transform: translateX(-5px); }
8%, 100% { opacity: 1; transform: none; }
}
/* ── /journals: SHARED BY A LINK, ON THE PROVIDER'S TERMS ──────────────── */
.pv-journal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pv-share .pv-row { align-items: center; }
.pv-share .addr { font-family: var(--font-mono); font-size: 10px; color: var(--text); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 7px; padding: 6px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; }
.pv-share .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pv-share .acts span { font: 700 10px/1 var(--font-display); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }
.pv-browser { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-deep); box-shadow: var(--card-shadow); overflow: hidden; }
.pv-browser .bbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface2); }
.pv-browser .bbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--redact); }
.pv-browser .bbar .url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 4px 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-browser .page { padding: 12px 14px 14px; background: var(--bg); display: grid; gap: 10px; }
.pv-jm { display: flex; align-items: center; gap: 9px; }
.pv-jm .ava { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #2d6fad, #52d9a0); display: grid; place-items: center; font: 700 11px/1 var(--font-display); color: #fff; }
.pv-jm b { display: block; font-size: 13px; letter-spacing: -.01em; }
.pv-jm span { display: block; font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); }
.pv-jm .pv-pill { margin-inline-start: auto; }
.pv-jtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); overflow: hidden; white-space: nowrap; }
.pv-jtabs span { padding: 5px 7px; font-size: 9px; font-weight: 600; color: var(--text2); border-bottom: 2px solid transparent; }
.pv-jtabs span i { font: 600 7px/1 var(--font-mono); color: var(--accent); font-style: normal; margin-inline-end: 4px; }
.pv-jtabs span.on { color: var(--text); border-bottom-color: var(--accent); }
.pv-jgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.pv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.pv-cal i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--redact); }
.pv-cal i.g1 { background: color-mix(in srgb, var(--green) 35%, transparent); } .pv-cal i.g2 { background: color-mix(in srgb, var(--green) 70%, transparent); }
.pv-cal i.r1 { background: color-mix(in srgb, var(--red) 35%, transparent); } .pv-cal i.r2 { background: color-mix(in srgb, var(--red) 70%, transparent); }
.pv-cal i.o { background: transparent; }
.pv-cal-h { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; font-family: var(--font-mono); font-size: 7.5px; color: var(--muted); text-align: center; margin-bottom: 3px; }
.pv-jside { display: grid; gap: 8px; align-content: start; }
.pv-jside .tile { border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 9px; background: var(--surface); }
.pv-jside .tile b { display: block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.pv-jside .tile span { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.pv-sess { display: grid; gap: 4px; }
.pv-sess div { display: grid; grid-template-columns: 58px minmax(0, 1fr) 34px; gap: 7px; align-items: center; font-family: var(--font-mono); font-size: 8.5px; color: var(--text2); }
.pv-sess .pct { text-align: end; color: var(--muted); }
.pv-sess .pv-bar { height: 4px; }
@media (max-width: 480px) {
.pv-jgrid { grid-template-columns: minmax(0, 1fr); }
.pv-cal, .pv-cal-h { max-width: 250px; }
.pv-jside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── /security: WHAT A KEY CAN DO, AND WHAT THE SERVER HOLDS ───────────── */
.pv-sec { display: grid; gap: 10px; }
.pv-sec .perm { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 10.5px; color: var(--text2); }
.pv-sec .perm:last-of-type { border-bottom: 0; }
.pv-sec .perm b { color: var(--text); font-weight: 600; }
.pv-sec .perm .st { display: inline-flex; align-items: center; gap: 6px; }
.pv-sec .perm .st small { font-size: 9px; color: var(--muted); }
.pv-sec .perm.w { color: var(--red); }
.pv-sec .perm.w b { color: var(--red); }
.pv-stamp { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 999px; padding: 6px 10px; }
.pv-vault { display: grid; gap: 6px; }
.pv-vault div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text2); }
.pv-vault div span:first-child { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-vault code { font-family: var(--font-mono); font-size: 9.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pv-vault code.no { color: var(--muted); border-style: dashed; }
.pv-sec .sign { font-family: var(--font-mono); font-size: 10px; line-height: 1.6; color: var(--text2); }
.pv-sec .sign .pv-tick { margin-inline-end: 6px; }
.pv-sec .sign b { color: var(--text); font-weight: 600; }
@media (max-width: 420px) {
.pv-vault div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
/* ── KIT ADDITIONS, shared by the Providers and Learn visuals ────────────── */
/* A node in a flow: a labelled box the connectors run between. */
.pv-node { border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 9px; background: var(--surface2); min-width: 0; }
.pv-node span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-node b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.35; margin-top: 2px; color: var(--text); }
.pv-node.hi { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* A connector: an SVG stretched to its cell, hairline in the border token. */
.pv-link { position: relative; min-width: 0; }
.pv-link svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-link path { fill: none; stroke: var(--border); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* An alert body, in the shape the homepage already draws: keys, strings, numbers. */
.pv-code { font-family: var(--font-mono); font-size: 10px; line-height: 1.6; color: var(--text2); background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 11px; white-space: pre; overflow-x: auto; min-width: 0; }
.pv-code .k { color: var(--blue); } .pv-code .s { color: var(--green); } .pv-code .n { color: var(--gold); }
/* One large figure with its unit beside it. */
.pv-big { display: flex; align-items: baseline; gap: 4px; }
.pv-big b { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-big small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* A drawn button: the accent, never a real control. */
.pv-btn { text-align: center; font: 700 10px/1 var(--font-display); padding: 8px 12px; border-radius: 999px; background: var(--accent); color: var(--on-brand); }
.pv-btn.ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
/* Motion: a bar fills, a line draws, a panel arrives. Transforms and opacity
only, so nothing is laid out twice; reduced motion collapses each to its
end state through the rule at the foot of this sheet. */
.pv-fill { animation: pvFill 1.1s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 0 50%; }
@keyframes pvFill { from { transform: scaleX(0); } }
.pv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pvDraw 1.6s ease-out .2s both; }
@keyframes pvDraw { to { stroke-dashoffset: 0; } }
.pv-enter { animation: pvIn .7s ease-out both; }
@keyframes pvIn { from { opacity: 0; transform: translateY(6px); } }
/* ── /prop-check: THE CHAPTER, AS THE JOURNAL PRINTS IT ─────────────────── */
/* The score out of 100 and its verdict, then one row per rule showing how
far inside its limit the record stayed, which is the figure the page says
a pass-or-fail answer would hide. The phases and the monthly history are
the chapter's own last two blocks. */
.pv-prop .hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.pv-prop .score span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pv-prop .pv-badge.pb { font-size: 10.5px; padding: 4px 10px 4px 6px; gap: 6px; }
.pv-prop .pv-badge.pb .crest { width: 16px; height: 16px; }
.pv-prop .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-inline-start: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.pv-prop .meta b { color: var(--text2); font-weight: 600; }
.pv-prop .rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.pv-prop .rule .nm { font-size: 11px; font-weight: 600; color: var(--text); }
.pv-prop .rule .st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text2); font-variant-numeric: tabular-nums; }
.pv-prop .rule .st b { color: var(--text); font-weight: 650; }
.pv-prop .rule .track { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-prop .rule .track b { color: var(--text2); font-weight: 600; }
.pv-prop .rule .pv-bar { height: 4px; }
.pv-prop .rule .pv-bar i { background: var(--green); }
.pv-prop .rule.near .pv-bar i { background: var(--gold); }
.pv-prop .phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pv-prop .phases div { padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface2); min-width: 0; }
.pv-prop .phases span { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-prop .phases b { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 650; margin-top: 2px; }
.pv-prop .phases em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 8px; color: var(--muted); margin-top: 2px; }
.pv-prop .hist { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.pv-prop .hist .pv-head { margin-bottom: 6px; }
.pv-prop .hist .pv-curve { aspect-ratio: 320 / 76; }
.pv-prop .hist .ln { stroke: var(--accent); }
.pv-prop .hist .thr { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pv-prop .hist .pt { fill: var(--accent); }
.pv-prop .hist .lbl.y { fill: var(--gold); }
@media (max-width: 420px) {
.pv-prop .meta { margin-inline-start: 0; flex-basis: 100%; }
}
/* ── /providers: TWO ROUTES, ONE RECORD ─────────────────────────────────── */
/* An alert from TradingView and a Signal from the terminal both enter the
same box and leave it as the same two things: a delivery and a record.
Under it, the Hub's Strategies list, where the states of the publishing
story are the states a Provider actually sees. */
.pv-prov { display: grid; gap: 12px; }
.pv-prov .routes { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.05fr) 18px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 0; align-items: center; }
.pv-prov .routes .src1 { grid-column: 1; grid-row: 1; }
.pv-prov .routes .src2 { grid-column: 1; grid-row: 2; }
.pv-prov .routes .lnA { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
.pv-prov .routes .mid { grid-column: 3; grid-row: 1 / 3; }
.pv-prov .routes .lnB { grid-column: 4; grid-row: 1 / 3; align-self: stretch; }
.pv-prov .routes .out1 { grid-column: 5; grid-row: 1; }
.pv-prov .routes .out2 { grid-column: 5; grid-row: 2; }
.pv-prov .routes .mid .chk { display: grid; gap: 2px; margin-top: 5px; font-family: var(--font-mono); font-size: 8.5px; color: var(--text2); }
.pv-prov .routes .mid .chk div { display: flex; align-items: baseline; gap: 5px; }
.pv-prov .strats .pv-row { flex-wrap: wrap; gap: 3px 8px; }
.pv-prov .strats .pv-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-prov .strats .seats { display: inline-flex; align-items: center; gap: 6px; }
.pv-prov .strats .seats .pv-bar { width: 44px; }
.pv-prov .share { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 10px; color: var(--text2); }
.pv-prov .share b { color: var(--green); font-weight: 650; font-size: 13px; }
@media (max-width: 420px) {
.pv-prov .routes { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.pv-prov .routes .src1, .pv-prov .routes .src2, .pv-prov .routes .mid,
.pv-prov .routes .out1, .pv-prov .routes .out2 { grid-column: 1; grid-row: auto; }
.pv-prov .routes .lnA, .pv-prov .routes .lnB { display: none; }
}
/* ── /providers/algo: THE CONNECTION TAB, AND THE GATE ──────────────────── */
/* Test mode parses an alert for every declared market and stores nothing;
a refusal names its reason; the gate opens only when each market has
passed and its connection is confirmed. Rows arrive in order. */
.pv-algo { display: grid; gap: 12px; }
.pv-algo .mkt { display: grid; grid-template-columns: 14px 62px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--text2); font-variant-numeric: tabular-nums; animation: pvRail 14s ease-in-out infinite; }
.pv-algo .mkt:last-of-type { border-bottom: 0; }
.pv-algo .mkt + .mkt { animation-delay: 1.4s; }
.pv-algo .mkt + .mkt + .mkt { animation-delay: 2.8s; }
.pv-algo .mkt + .mkt + .mkt + .mkt { animation-delay: 4.2s; }
.pv-algo .mkt b { color: var(--text); font-weight: 600; }
.pv-algo .mkt .t { color: var(--muted); }
.pv-algo .mkt.bad, .pv-algo .mkt.bad b { color: var(--red); }
.pv-algo .gate { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--text2); }
.pv-algo .gate b { color: var(--text); font-weight: 600; }
.pv-algo .gate .pv-bar { flex-basis: 100%; height: 5px; }
.pv-algo .gate .pv-bar i { background: var(--green); }
.pv-algo .chk { display: grid; gap: 4px; margin-top: 8px; }
.pv-algo .chk div { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text2); }
.pv-algo .chk b { color: var(--text); font-weight: 600; }
.pv-algo .chk .dim { color: var(--muted); margin-inline-start: auto; }
/* ── /providers/manual: THE SIGNAL TERMINAL ─────────────────────────────── */
/* The three steps of opening a position, with the stop and the targets as
levels on the chart; beside the phone, the same checks every Signal passes
and the message a subscriber receives. */
.pv-term { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.pv-term .pv-phone { width: 220px; }
.pv-term .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.pv-term .steps span { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 0; border-bottom: 2px solid var(--border-soft); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-term .steps span.done { color: var(--green); border-bottom-color: color-mix(in srgb, var(--green) 50%, transparent); }
.pv-term .steps span.on { color: var(--text); border-bottom-color: var(--accent); }
.pv-term .set { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pv-term .chart { position: relative; height: 132px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); overflow: hidden; }
.pv-term .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-term .chart .px { fill: none; stroke: var(--text2); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .85; }
.pv-term .lvl { position: absolute; inset-inline: 0; height: 0; border-top: 1px dashed var(--lc, var(--border)); }
.pv-term .lvl.en { --lc: var(--blue); border-top-style: solid; }
.pv-term .lvl.tp { --lc: var(--green); }
.pv-term .lvl.sl { --lc: var(--red); }
.pv-term .lvl span { position: absolute; inset-inline-end: 6px; top: -8px; font: 600 8px/1 var(--font-mono); padding: 3px 5px; border-radius: 4px; color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); background: var(--bg-deep); white-space: nowrap; }
.pv-term .lvl i { position: absolute; inset-inline-start: 6px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lc); }
.pv-term .pv-btn { margin-top: 8px; }
.pv-term .stamp { font-family: var(--font-mono); font-size: 8.5px; line-height: 1.5; color: var(--muted); text-align: center; margin-top: 6px; }
.pv-term .stamp b { color: var(--text2); font-weight: 600; }
.pv-term .pv-side > * + * { margin-top: 12px; }
.pv-term .pv-side .pv-msg { margin-top: 12px; }
@media (max-width: 600px) {
.pv-term { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pv-term > .pv-side { width: 100%; }
}
/* ── /providers/earnings: ONE SUBSCRIPTION, SPLIT ───────────────────────── */
/* What one subscription becomes on the published terms, then the four
numbers the page names, with the one nobody controls left unfilled. The
share figures in the markup are data-fact spans, so they follow the
deployment; the bar widths are the published default. */
.pv-earn { display: grid; gap: 12px; }
.pv-earn .split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px; background: var(--redact); }
.pv-earn .split i { display: block; height: 100%; }
.pv-earn .split .p { background: var(--green); }
.pv-earn .legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.pv-earn .legend b { color: var(--text); font-weight: 600; }
.pv-earn .legend .pos { color: var(--green); }
.pv-earn .four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pv-earn .four div { padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface2); min-width: 0; }
.pv-earn .four div.open { border-style: dashed; background: transparent; }
.pv-earn .four > div > span:not(.pv-bar) { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-earn .four > div > b { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 650; margin-top: 3px; letter-spacing: -.01em; }
.pv-earn .four b.q { color: var(--muted); }
.pv-earn .four > div > em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 8.5px; line-height: 1.45; color: var(--text2); margin-top: 3px; }
.pv-earn .four .pv-bar { display: block; margin-top: 6px; }
/* ── /tradingview: AN ALERT BECOMES A SIGNAL ────────────────────────────── */
/* The alert as TradingView sends it, in the shape the homepage draws; then
what Triggon does with it in order, and the card a subscriber sees. */
.pv-tv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }
.pv-tv .cond { display: grid; gap: 4px; margin-bottom: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text2); }
.pv-tv .cond div { display: flex; justify-content: space-between; gap: 8px; }
.pv-tv .cond b { color: var(--text); font-weight: 600; }
.pv-tv .pv-log div { animation: pvRail 14s ease-in-out infinite; }
.pv-tv .pv-log div:nth-child(2) { animation-delay: 1.2s; }
.pv-tv .pv-log div:nth-child(3) { animation-delay: 2.4s; }
.pv-tv .pv-log div:nth-child(4) { animation-delay: 3.6s; }
.pv-tv .pv-log div:nth-child(5) { animation-delay: 4.8s; }
.pv-tv .pv-log div:nth-child(6) { animation-delay: 6.0s; }
.pv-tv .pv-tcard { margin-top: 10px; animation: pvRail 14s ease-in-out infinite; animation-delay: 7.2s; }
@media (max-width: 600px) { .pv-tv { grid-template-columns: minmax(0, 1fr); } }
/* ── /track-record: WRITTEN BEFORE THE OUTCOME WAS KNOWN ────────────────── */
/* Left, a trade entering the record at open and being delivered in the same
moment, then only appended to. Right, the shape a compiled result leaves
you to trust: a headline, and nothing under it you can open. */
.pv-tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pv-tr .pv-head { flex-wrap: wrap; }
.pv-tr .pv-head b { white-space: normal; }
.pv-tr .gaps .dim { display: inline-flex; align-items: center; gap: 6px; }
.pv-tr .tl div { position: relative; padding: 6px 0 6px 14px; margin-inline-start: 4px; font-family: var(--font-mono); font-size: 10px; line-height: 1.55; color: var(--text2); border-inline-start: 1px solid var(--border); }
.pv-tr .tl div::before { content: ''; position: absolute; inset-inline-start: -3.5px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--tl-c, var(--blue)); }
.pv-tr .tl div.up { --tl-c: var(--green); }
.pv-tr .tl .t { display: block; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pv-tr .tl b { color: var(--text); font-weight: 600; }
.pv-tr .tl div { animation: pvRail 14s ease-in-out infinite; }
.pv-tr .tl div:nth-child(2) { animation-delay: 1.4s; }
.pv-tr .tl div:nth-child(3) { animation-delay: 2.8s; }
.pv-tr .tl div:nth-child(4) { animation-delay: 4.2s; }
.pv-tr .sum { text-align: center; padding: 12px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface2); }
.pv-tr .sum b { display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.pv-tr .sum span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pv-tr .gaps { margin-top: 6px; }
.pv-tr .gaps .pv-row { font-size: 10px; }
@media (max-width: 560px) { .pv-tr { grid-template-columns: minmax(0, 1fr); } }
/* ── /verification: THE STATES, AND THE ROLLING WINDOW ──────────────────── */
/* The review states in the order the page lists them, with the gate between
Pending and Live; under them the checkmark's last 90 days, one cell per
day, with the longest gap measured against its limit. */
.pv-verify { display: grid; gap: 12px; }
.pv-verify .states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.pv-verify .states span { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text2); white-space: nowrap; }
.pv-verify .states span.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.pv-verify .states span.gate { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pv-verify .states span.now { color: var(--on-brand); background: var(--accent); border-color: var(--accent); }
.pv-verify .states i { width: 8px; height: 1px; background: var(--border); flex: none; }
.pv-verify .days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; margin-top: 8px; }
.pv-verify .days i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--redact); }
.pv-verify .days i.c { background: color-mix(in srgb, var(--green) 62%, transparent); }
.pv-verify .days i.o { background: color-mix(in srgb, var(--green) 30%, transparent); }
.pv-verify .axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.pv-verify .chk { display: grid; gap: 3px; margin-top: 10px; }
.pv-verify .chk div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--text2); }
.pv-verify .chk b { color: var(--text); font-weight: 600; }
.pv-verify .chk .dim { margin-inline-start: auto; color: var(--muted); }
.pv-verify .key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); }
.pv-verify .key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-inline-end: 4px; background: var(--redact); }
.pv-verify .key i.c { background: color-mix(in srgb, var(--green) 62%, transparent); }
.pv-verify .key i.o { background: color-mix(in srgb, var(--green) 30%, transparent); }
/* ── /signals-vs-copy-trading: THE TWO QUESTIONS, FOUR TIMES ────────────── */
/* Each way of trading someone else's ideas, answered on the same three
lines: who decides, who executes, where the money sits. A filled dot is
you; a hollow one is someone else. The signal-service column is the one
this platform sits in, with the property it added. */
.pv-four .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pv-four .col { border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 8px 9px; background: var(--surface2); min-width: 0; }
.pv-four .col.hi { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pv-four .col h4 { margin: 0 0 7px; font: 600 10.5px/1.3 var(--font-display); color: var(--text); }
.pv-four .q { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 5px; align-items: center; font-family: var(--font-mono); font-size: 8.5px; line-height: 1.35; color: var(--text2); padding: 3px 0; }
.pv-four .q i, .pv-four .key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; }
.pv-four .q i.you, .pv-four .key i.you { background: var(--green); border-color: var(--green); }
.pv-four .fail { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 8.5px; line-height: 1.5; color: var(--muted); }
.pv-four .fail b { color: var(--text2); font-weight: 600; }
.pv-four .col.hi .fail b { color: var(--green); }
.pv-four .key { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 10px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.pv-four .key i { vertical-align: -1px; margin-inline-end: 4px; }
/* ── /follow-a-strategy: THE RECORD'S ACCOUNT, BESIDE YOURS ─────────────── */
/* The five differences as five rows, the record's side and your side, with
the two that are yours to close marked as such. */
.pv-follow .cmp { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.pv-follow .cmp > span { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 9.5px; line-height: 1.45; color: var(--text2); min-width: 0; }
.pv-follow .cmp .h { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pv-follow .cmp .h.you { color: var(--blue); }
.pv-follow .cmp .k { color: var(--text); font-weight: 600; }
.pv-follow .cmp .k small { display: block; font-size: 8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.pv-follow .cmp .k small.mine { color: var(--green); }
.pv-follow .cmp b { color: var(--text); font-weight: 600; }
@media (max-width: 420px) {
.pv-follow .cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-follow .cmp .hk { display: none; }
.pv-follow .cmp .k { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
}
/* ── /how-it-works: THE TERMINAL, IN TELEGRAM ───────────────────────────── */
/* The Marketplace tab on the phone, one Strategy with its record and its
seats, and beside it the five ideas pointed at the things on the screen. */
.pv-how { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.pv-how .pv-phone { width: 220px; }
.pv-how .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; }
.pv-how .tabs span { flex: 1; text-align: center; padding: 5px 2px; font: 600 8px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-how .tabs span.on { color: var(--text); border-bottom-color: var(--accent); }
.pv-how .st { padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); margin-bottom: 6px; }
.pv-how .st .nm { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pv-how .st .nm b { font-size: 12px; }
.pv-how .st .by { font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); }
.pv-how .st .pv-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; margin-top: 6px; }
.pv-how .st .pv-metric b { font-size: 11.5px; }
.pv-how .st .pv-metric span { font-size: 7.5px; }
.pv-how .st .foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); }
.pv-how .st .foot .pv-bar { flex: 1; height: 4px; }
.pv-how .st .foot b { color: var(--text); font-weight: 600; white-space: nowrap; }
.pv-how .st .pv-btn { margin-top: 7px; font-size: 9.5px; padding: 7px; }
.pv-how .ideas .pv-row { flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.pv-how .ideas .pv-row .n { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.pv-how .ideas .pv-row .dim { flex-basis: 100%; }
@media (max-width: 600px) {
.pv-how { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pv-how > .pv-side { width: 100%; }
}
/* ── /faq: THE GROUPS, COUNTED ──────────────────────────────────────────── */
/* Rendered from the FAQ catalogue itself, so a group that appears or a
question that is gated off changes the panel without an edit here. The
rows are real links to the first question in each group, which is why
this one visual is a