/* ============================================================ MASTERMIND LANDING — page stylesheet (source of truth) ------------------------------------------------------------ index.html's styling. Hand-authored: edit THIS file and mirror it to site/landing.css — a plain-copy pair enforced by scripts/check_template_site_sync.py. It rode inline in the page until #3676; the bytes below are that block, unchanged. Linked from the same spot in (right after onboard.css), so the cascade is unmoved — but it now ships as its own immutable object instead of re-downloading inside the 60s-TTL document on every visit. Not a site/assets/css/.css: those are sweep output in the DERIVED tree and get pruned when unreferenced. This is a SOURCE file. Page order: cover → terminal → prophet belt → five feature bands → the analyst → pricing + matrix → closing + footer. ============================================================ */ /* Self-hosted Inter, byte-identical to the six blocks at the top of templates/theme.css (the same set templates/_interfonts.html.j2 carries for standalone pages). This page defines its own tokens inline and never links theme.css, so it is exactly the "standalone page" case that partial exists for — it just cannot {% include %} it, being plain HTML rather than a .j2. The CDN URL these replace also asked for wght 450, which no rule on this page or in onboard.css ever used. */ @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-400.woff2") format("woff2");} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Inter-500.woff2") format("woff2");} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Inter-600.woff2") format("woff2");} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Inter-700.woff2") format("woff2");} @font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/Inter-800.woff2") format("woff2");} @font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url("fonts/Inter-900.woff2") format("woff2");} :root{ --bg:#f7f8fa; --panel:#ffffff; --panel-2:#fbfcfd; /* STROKE TIERS — border weight is information (DIRECTION §2). Four weights, not one: weak = dividers INSIDE a card; hair = the default/subtle card edge; hair-2 = a defined edge (inputs, chips, vignettes); strong = emphasis (hover/active/stage). */ --hair-weak:#f0f2f5; --hair:#eaecf0; --hair-2:#dfe3e9; --hair-strong:#cfd6df; --ink:#1c2430; --ink-soft:#34404f; --muted:#5d6b7e; --faint:#8a95a4; --hl-muted:#8b95a6; /* two-tone headline continuation (§3) */ --blue:#285fff; --blue-ink:#1c47cc; --blue-lit:#3f74ff; --blue-wash:#eef2ff; --q-green:#1f8b41; --q-gold:#b07d05; --q-red:#c12f2f; --q-blue:#2f63c4; --violet:#7862e0; --teal:#0f9d8f; --green-wash:#e9f5ec; --red-wash:#faeceb; --gold-wash:#faf3e2; --plate:#0b1120; /* LAYERED SHADOWS (§2) — five primitives at 3–9% alpha, composed into four role tiers. A shadow always sits UNDER a 1px stroke, never instead of one: the stroke draws the edge, the shadow only says how far off the page the card is. The old single-layer --sh-card/--sh-lift/--sh-deep are GONE (not aliased) so the two systems cannot both be live; --sh-plate survives for the dark bands only. */ --sh-1:0 1px 2px rgba(16,24,40,.03); --sh-2:0 2px 4px -1px rgba(16,24,40,.04); --sh-3:0 4px 10px -2px rgba(16,24,40,.05); --sh-4:0 12px 24px -6px rgba(16,24,40,.07); --sh-5:0 24px 48px -12px rgba(16,24,40,.09); --sh-card:var(--sh-1),var(--sh-2); /* list rows, inner tiles */ --sh-lift:var(--sh-1),var(--sh-2),var(--sh-3); /* standard vignettes */ --sh-float:var(--sh-2),var(--sh-3),var(--sh-4); /* hero wings, belt cards */ --sh-stage:var(--sh-3),var(--sh-4),var(--sh-5); /* hero centre, frames, windows */ --sh-plate:0 24px 60px -20px rgba(18,26,45,.34),0 6px 16px -6px rgba(18,26,45,.14); --r-sm:6px; --r:12px; --r-lg:16px; --r-xl:20px; /* MOTION (§7) — extreme-decel is the house curve: everything arrives fast and settles slowly, which reads as weight rather than as a pop. */ --ease-out:cubic-bezier(0,0,0,1); --ease-emph:cubic-bezier(.2,0,0,1); --dur-micro:.15s; --dur-rev:.7s; --dur-stage:.9s; --maxw:1280px; --gutter:clamp(20px,4.5vw,60px); /* THE DISPLAY FACE — one voice for the whole page: the system UI face, with self-hosted Inter as the cross-platform stand-in. Set on every headline, every piece of chrome, and every figure. This is the third face here in one day, and the operator's instruction is why (2026-07-26): "can you just use a regular bold font like poppins or san francisco bold or extra bold, what are these weird fonts you are using". Rejected before it: Archivo Expanded (a poster grotesque so wide and heavy its numerals read short and blocky — "squashed"), Newsreader ExtraBold (an editorial serif, magazine numbers on a product page), and Outfit (a geometric sans whose circular bowls and curled g read toy-like at display weight). Each was picked for character on a page that wants none, so this one is deliberately unremarkable — and it is the operator's own pick. -apple-system resolves to San Francisco on macOS/iOS: literally the requested face, with SF Pro Display's optical sizing at headline sizes for free. Everyone else gets Inter, drawn as an SF-alike for exactly this substitution and already self-hosted above — so this ships ZERO new font bytes and drops Outfit's 41KB. Poppins is the stated alternative: swap the two leading entries and add its @font-face; nothing else moves, because all 105 display rules read this token. The @font-face duties live in onboard.css, which index.html links alongside this sheet — that sheet is also lazy-injected onto macro pages carrying no landing CSS, so it must be the one to carry face declarations. The tokens are declared in BOTH files so neither depends on the other's cascade. Small inline data (tickers, %, price cells) shares the face; tabular figures are requested in CSS below, NOT baked into a subset the way Outfit's were. Specimen: mockups/refs/landing-numerals/display-face-round3.html. */ --display:-apple-system,'SF Pro Display','Inter',system-ui,'Segoe UI',Roboto,sans-serif; /* Figures share the display voice. --fig is kept as its own token because the eight figure rules that use it are the ones most likely to be re-pointed at a dedicated numeral face again; aliasing beats find-and-replace. */ --fig:var(--display); /* THE INSTRUMENT VOICE — the platform's own monospace, for micro-labels only (§3 .mk): eyebrows, card kickers, as-of stamps, ZONE/EDGE labels, receipt bars. A desk is read through its instruments, and instruments letter their scales in mono; it is the one type move on this page that says "measurement" without a word of jargon. System mono = ZERO new font bytes, which is the standing law that killed Archivo/Newsreader/Outfit above. Numerals inside .mk inherit it, so every small figure on the page lines up in one column-width. */ --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; /* Overlay-token bridge — theme.js injects the shared settings/account dashboard using the macro token vocabulary (--panel2/--line/--card/--text/…). This light-only landing declares its own names (--panel-2/--hair/--ink), so without these aliases those overlays fall through to their built-in DARK fallbacks (#141a28 panels, #283042 borders) and render dark on a light page. Map them to the landing's light values so the dashboard matches the rest of the site. */ --panel2:var(--panel-2); --card:var(--panel); --text:var(--ink); --ink-3:var(--muted); --line:var(--hair); --grid:var(--hair-2); --link:var(--blue); --up:var(--q-green); --down:var(--q-red); --ok:var(--q-green); --warn:var(--q-gold); --popover-shadow:var(--sh-stage); } /* §8 signature — the hero field's wash tint. Registered so it INTERPOLATES: an unregistered custom property jumps, and a background-image cannot be transitioned at all, so the registration is the only path to a fade. Where @property is unsupported the token still resolves and the tint simply snaps — degrading to "no transition", never to "no tint". */ @property --field-tint{syntax:'';inherits:true;initial-value:#dbe4ff} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,sans-serif;font-size:16px;line-height:1.5; font-feature-settings:"cv05" 1,"ss01" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip; padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} /* Chinese renders Latin/numerals in Inter, CJK glyphs in the platform's UI face */ html[data-lang="zh"] body{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif} html[data-lang="zh"] .display,html[data-lang="zh"] .sec-title,html[data-lang="zh"] .feat-title,html[data-lang="zh"] h1,html[data-lang="zh"] h2{font-family:var(--display),'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;letter-spacing:-.01em} html[data-lang="zh"] .kicker,html[data-lang="zh"] .live-pill,html[data-lang="zh"] .micro,html[data-lang="zh"] .live-tag,html[data-lang="zh"] .dk,html[data-lang="zh"] .rl,html[data-lang="zh"] .tt{letter-spacing:.06em} img{max-width:100%;display:block} a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue-ink)} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} /* ONE focus device (§5): a 2px ring at 2px offset in the house blue. A modern outline follows the element's own border-radius, so a pill gets a pill ring free — the 4px here only reaches elements declaring no radius (plain text links), every component's radius rule being later in this file. --focus lifts the ring on the dark bands, where #285fff over near-black is a ring you have to hunt for. */ :focus-visible{outline:2px solid var(--focus,var(--blue));outline-offset:2px;border-radius:4px} .tsec,.cband,footer{--focus:#6ea8ff} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Figures must not jitter. Outfit's subset had its digits REMAPPED onto tnum glyphs, so nothing here had to ask; the system/Inter stack carries proper tabular figures but only on request. Grouped so it cannot be forgotten on the one rule that matters — #gz-score reticks in place, and the price columns must stay aligned. */ .gz-num b,.fi-sum .big,.dxy .n,.price,.price .was{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .display{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.98;color:var(--ink)} .kicker{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* ============ §3 TYPE DEVICES ============ */ /* .mk — the mono kicker. Declared AFTER .kicker on purpose: both are single-class selectors, so source order is what lets `class="kicker mk"` re-voice an existing eyebrow without touching its size (any `.parent .kicker{font-size}` rule outranks both and survives). Colour is a default, not a law — blue section eyebrows and card titles override it in place. */ .mk{font-family:var(--mono);font-weight:500;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums} /* CJK has no monospace in the ui-monospace stack; name the platform faces before the generic so a ZH kicker resolves in one hop instead of via last-resort fallback. */ html[data-lang="zh"] .mk{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',monospace;letter-spacing:.06em} /* The ramp. One rule lends every mono micro-label its voice; two steps under the .mk base give it a size — 11px (.mk) is page furniture, 10px labels a vignette, 9px the rows inside one. Forty-five rules re-typed the recipe by hand, which is how a scale drifts to five sizes across two pixels; ties resolved DOWN (found, not seen). The deliberate 500/400 weights, tracking and colour are optical, so they stay per site; under 9px the terminal mock keeps its own — an instrument shown inside the page. */ .gp-kicker,.gp-acct-t,.micro,.pl-h,.psc-edge,.psc-zone,.live-tag,.demo .dk,.dm-rcpt,.tt-cell .l,.tt-rng .lb,.tt-del,.ttp-h .tag,.twl-cols,.twl-g,.tq-px .st,.tq-row .k,.tq-trend .k,.tq-trend .pill,.ph-tag,.phc-edge,.phc-zn,.phc-znl,.lane .lh,.thm .sc,.fi-row .who,.fi-row .side,.fi-row .amt,.sit .kind,.sit .early,.sit .sc2,.fd-row .tk2,.tri-p .tt,.dxy .tag2,.chat-head .who,.mseg button,.mini-cmp .stx,.msg-tool,.msg.act,.toggle .save,.tier.hot::before,.badge,.founding-line b,.mx .grp td,.mx .soon,.mx .feat .mchip,.f-col p{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums} .mk-10,.demo .dk,.dm-rcpt,.ph-tag,.phc-zn,.chat-head .who,.msg-tool,.msg.act,.mx .grp td,.f-col p{font-size:10px} .mk-9,.gp-kicker,.gp-acct-t,.pl-h,.psc-edge,.psc-zone,.live-tag,.ttp-h .tag,.phc-edge,.phc-znl,.thm .sc,.sit .early,.mseg button,.toggle .save,.tier.hot::before,.badge,.mx .soon{font-size:9px} /* .hd-mut — two-tone headline continuation. This REPLACES gradient headline text everywhere on the page: a headline reads as one sentence with one part emphasised, which a three-stop gradient can never say. */ .hd-mut{color:var(--hl-muted)} .up{color:var(--q-green)} .dn{color:var(--q-red)} /* ONE vertical rhythm for every band that is not a full-bleed exhibit: the five feature bands already carried this clamp, so #ai and #pricing joining it makes the sequence one interval. position:relative hosts the .bandrule that replaced their static border (§7). Belt/terminal/closing keep their own — each is cropped or full-bleed and owns its edges. */ .section-pad{position:relative;padding-block:clamp(96px,11vw,148px)} /* THE SECTION-HEAD SYSTEM (§3) — every band head on one ramp. It arrived as four ad-hoc clamps (48 / 36 / 37.6 / 51.2px at 1440): four decisions rather than one system, and the closing band's head ended up LARGER than the class it overrode. The ceiling is the largest value at which every authored headline still holds its
line count in BOTH languages with real slack — measured at 390/1024/1440/1920, not guessed: at 44px "Bitcoin. Gold. The dollar." comes within 3px of its column, at 42px it keeps 24px. Weight 800 and -.018em return the presence the smaller ceiling costs. The hero h1 is NOT in this system: house identity, own scale. */ .sec-title,.feat-title,.cband h2{font-family:var(--display);font-weight:800;letter-spacing:-.018em;line-height:1.04;font-size:clamp(30px,3.2vw,42px)} .sec-title{margin:0 0 14px} .sec-sub{color:var(--muted);font-size:1.06rem;max-width:62ch;margin:0} .sec-sub b{color:var(--ink);font-weight:600} /* ============ §4 TEXTURE LIBRARY ============ Ground, not decoration. These CSS fallback textures stay static (so CALM/STILL cost nothing), sit behind content on their own layer, and are masked so they never collide with a section edge. The hero's optional canvas field adds motion above this fallback without making the page depend on it. Host needs position:relative. */ /* 1 · the curtain — a soft wash rising off the bottom of a light band with a fine vertical hairline rain over it. The wash carries the §8 regime tint; the hairlines are a separate layer so they can fade at the sides while the wash stays full-bleed. */ .tx-curtain{position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;z-index:0; background:radial-gradient(120% 90% at 50% 112%,var(--field-tint,#dbe4ff) 0%,#eef2ff 42%,rgba(238,242,255,0) 78%); transition:--field-tint 1.2s var(--ease-emph)} .tx-curtain::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,transparent 1px 8px); opacity:1;transition:opacity .5s var(--ease-out); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(180deg,transparent 0,#000 34%),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); -webkit-mask-composite:source-in;mask-composite:intersect} /* Once the canvas is ready it becomes the same 8px curtain grid, gently deformed. Leave a trace of the straight fallback underneath so the field stays airy rather than reading as a separate animated illustration. */ .cover.market-field-live .tx-curtain::after{opacity:.26} /* Living market field — a progressively enhanced canvas above the curtain wash and below every hero object. The canvas owns only light and line work: the static curtain remains the no-JS / reduced-motion composition. */ .market-field{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%; pointer-events:none;z-index:0;opacity:.88;mix-blend-mode:multiply; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 88%,transparent 100%)} /* 5 · dark-band modifier — `class="tx-curtain tx-curtain-dark"`: hairlines only, no light wash (a dark band already has its own ground). */ .tx-curtain-dark{background:none} .tx-curtain-dark::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 8px)} /* 2 · paper — a dot grid, not graph paper. Dots read as stock; lines read as a chart, which would compete with the real charts sitting on top of it. */ .tx-paper{position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(28,36,48,.05) 1px,transparent 1.1px);background-size:12px 12px; -webkit-mask-image:radial-gradient(74% 66% at 50% 50%,#000 18%,transparent 100%); mask-image:radial-gradient(74% 66% at 50% 50%,#000 18%,transparent 100%)} /* 3 · arcs — two or three enormous off-centre hairline rings for the dark bands. Drawn as 1px radial rings so it costs no SVG, no request and no raster asset. */ .tx-arcs{position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(circle at 78% 4%,transparent calc(46% - 1px),rgba(255,255,255,.05) calc(46% - 1px) 46%,transparent 46%), radial-gradient(circle at 78% 4%,transparent calc(64% - 1px),rgba(255,255,255,.04) calc(64% - 1px) 64%,transparent 64%), radial-gradient(circle at 78% 4%,transparent calc(84% - 1px),rgba(255,255,255,.03) calc(84% - 1px) 84%,transparent 84%); -webkit-mask-image:linear-gradient(180deg,#000,#000 68%,transparent); mask-image:linear-gradient(180deg,#000,#000 68%,transparent)} /* 4 · edge fade — for anything cropped mid-object (the prophet belt) */ .tx-edgefade{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} /* ============ §5 CARD ANATOMY ============ One law for every vignette: 1px stroke draws the edge, a layered shadow states the elevation, --hair-weak hairlines divide the inside (never spacing alone), .mk letters the labels, hover moves a card exactly one elevation role. The law lives ON each component (.demo, .phc, .tier, .chat, .sit, .tri-p, .thm — grep --sh-lift/--sh-float/--sh-stage), not in shared .ca* utilities: W1 registered that family, W2/W3 built every band without it, and eight rules with zero consumers review as a live law while being none. Adopting it on a NEW component means copying four declarations. */ /* ============ §7 REVEAL ============ */ .rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-rev) var(--ease-out) var(--d,0s),transform var(--dur-rev) var(--ease-out) var(--d,0s)} .rv.in{opacity:1;transform:none} /* the band rule — a full-bleed 1px ELEMENT, not a border, because a border cannot draw itself in. Same .rv class, so the ONE existing IntersectionObserver picks it up — no second observer. Host band needs position:relative. The draw sits on the ::before, NEVER on the host: the observer measures the RENDERED box, a scaleX(0) host is zero-area, and a zero-area target never reaches a non-zero threshold — it would wait forever for an .in that cannot arrive. (W1 shipped exactly that bug in a rule-drawing utility, since retired.) Host keeps its box; the ink moves. It is the page's ONLY band-rule device: the static border it replaced on #ai/#pricing could not draw, so those two were the last hard seams on the page. */ .bandrule{position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none} .bandrule::before{content:"";position:absolute;inset:0;background:var(--hair); transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-stage) var(--ease-emph) var(--d,0s)} .bandrule.in::before{transform:scaleX(1)} /* .rv on the host is only how the observer finds it — neutralise the fade/lift so the line never travels 14px down the page on its way in. Declared after .rv.in. */ .bandrule.rv{opacity:1;transform:none;transition:none} .bandrule.at-bottom{top:auto;bottom:0} /* hero entrance — a CSS animation, NOT .rv: the fold must not depend on JS to become visible. from-only keyframes leave the end state to the element itself, so a card that rests at scale(.87)/opacity(.94) still lands there. */ @keyframes heroCardIn{from{opacity:0;translate:0 22px}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} .bandrule::before{transform:none} /* `*` does NOT match ::before/::after, so a universal kill leaves every pseudo-element animation running: the live pill's halo ping and the AI chat's tool-line pulse both survived both switches until W4 named the pseudos. */ *,*::before,*::after{animation:none !important;transition:none !important} } /* capture hook: /?still renders everything revealed & static (visual QA) */ html.still .rv{opacity:1 !important;transform:none !important;transition:none !important} html.still .bandrule::before{transform:none !important;transition:none !important} html.still *,html.still *::before,html.still *::after{animation:none !important;transition:none !important} html.still .cover-in{min-height:0} html.still{scroll-behavior:auto} /* ============ NAV ============ */ .nav{position:sticky;top:0;z-index:90;background:rgba(247,248,250,.85);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--hair);transition:box-shadow .25s var(--ease-out),background .25s var(--ease-out)} .nav.sc{background:rgba(247,248,250,.95);box-shadow:var(--sh-3)} .nav-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:64px;display:flex;align-items:center;gap:24px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink)} .brand .m{width:27px;height:27px;border-radius:7px;background:var(--ink);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:14px} .nav-links{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:500} .nav-group{position:relative} .nav-trigger,.nav-direct>a{display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:10px;color:var(--muted);font:inherit;transition:color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)} .nav-trigger:hover,.nav-trigger[aria-expanded="true"],.nav-direct>a:hover{color:var(--ink);background:rgba(40,95,255,.07)} .nav-trigger svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease-out)} .nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)} .nav-panel{position:absolute;top:calc(100% + 12px);left:-12px;width:min(650px,calc(100vw - 40px));padding:20px;background:#fff;border:1px solid var(--hair-2);border-radius:16px;box-shadow:var(--sh-stage);z-index:97} .nav-panel[hidden]{display:none} .nav-panel-research{width:min(590px,calc(100vw - 40px))} .nav-panel-resources{left:auto;right:-80px;width:min(610px,calc(100vw - 40px))} .nav-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 2px 16px;border-bottom:1px solid var(--hair-weak)} .nav-panel-head>div{display:flex;flex-direction:column;gap:3px;min-width:0} .nav-panel-k{font-family:var(--fig);font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--blue)} .nav-panel-head strong{font-family:var(--display);font-size:15px;line-height:1.35;color:var(--ink)} .nav-panel-head>a{flex:none;color:var(--blue);font-size:12.5px;font-weight:600} .nav-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px} .nav-card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .nav-card{display:flex;gap:12px;min-width:0;border:1px solid transparent;border-radius:12px;padding:12px;color:var(--ink-soft);transition:background var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)} .nav-card:hover{color:var(--ink);background:var(--panel-2);border-color:var(--hair-strong);transform:translateY(-1px);box-shadow:var(--sh-card)} .nav-card-mark{flex:none;width:27px;height:27px;border-radius:8px;background:var(--blue-wash);color:var(--blue);display:grid;place-items:center;font-family:var(--fig);font-size:10px;font-weight:800} .nav-card>span:last-child{min-width:0} .nav-card strong{display:block;font-family:var(--display);font-size:13px;line-height:1.3;color:var(--ink)} .nav-card small{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;font-weight:400;line-height:1.45} .nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--hair-2);border-radius:10px;background:#fff;box-shadow:var(--sh-card);padding:10px;flex-direction:column;justify-content:center;gap:4px} .nav-toggle span{display:block;width:100%;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .18s var(--ease-out),opacity .18s var(--ease-out)} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px} /* the quiet secondary: a real 1px edge and the faintest shadow in the set, so it reads as a surface rather than as a ghost of the primary (§6.1). */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 20px;font-weight:600;font-size:14.5px;border:1px solid var(--hair-2);background:#fff;color:var(--ink);box-shadow:var(--sh-1); transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)} .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-lift);border-color:var(--hair-strong);color:var(--ink)} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--sh-2)} .btn.primary:hover{background:var(--blue-lit);border-color:var(--blue-lit);color:#fff;box-shadow:var(--sh-float)} .btn.sm{padding:8px 16px;font-size:13.5px} .gearbtn{width:40px;height:40px;flex:none;border-radius:999px;border:1px solid var(--hair-2);background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center;color:var(--muted);transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)} .gearbtn:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-lift);border-color:var(--hair-strong)} .gearbtn[aria-expanded="true"]{color:var(--ink);border-color:var(--faint)} .gearbtn svg{width:17px;height:17px} /* settings popover */ .gear-wrap{position:relative;display:inline-flex} .gear-pop{position:absolute;right:0;top:calc(100% + 12px);width:236px;background:#fff;border:1px solid var(--hair-2);border-radius:14px;box-shadow:var(--sh-float);padding:8px;z-index:95; opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s} .gear-pop.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)} .gp-kicker,.gp-acct-t{font-weight:500;letter-spacing:.09em;color:var(--faint);margin:4px 8px 8px} .gp-lang{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px 8px;min-width:0} .gp-lbl{font-size:13px;color:var(--ink-soft);font-weight:500;min-width:0} .gp-seg{display:inline-flex;border:1px solid var(--hair-2);border-radius:8px;padding:2px;background:var(--panel-2);flex:none} .gp-seg-b{font-family:var(--display);font-weight:700;font-size:11px;color:var(--muted);border-radius:6px;padding:4px 9px;transition:color .14s,background .14s} .gp-seg-b.on{background:var(--blue);color:#fff} .gp-div{height:1px;background:var(--hair-weak);margin:4px 4px 6px} .gp-link{display:block;font-size:13px;color:var(--ink-soft);border-radius:8px;padding:8px 8px;font-weight:500;transition:background .14s,color .14s} /* gear ACCOUNT section (mirrors the macro gear's account block, landing light tokens) */ .gp-acct-t{margin-top:2px} .gp-acct-d{font-size:12px;line-height:1.5;color:var(--muted);margin:0 8px 10px} .gp-acct-btns{display:flex;gap:8px;padding:0 4px 4px} .gp-abtn{flex:1;border-radius:9px;padding:8px 10px;font-size:12.5px;font-weight:600;transition:background .14s,color .14s,border-color .14s} .gp-abtn.ghost{border:1px solid var(--hair-2);background:#fff;color:var(--ink-soft)} .gp-abtn.ghost:hover{background:var(--blue-wash);color:var(--blue-ink);border-color:var(--blue)} .gp-abtn.solid{background:var(--blue);border:1px solid var(--blue);color:#fff;box-shadow:var(--sh-card)} .gp-abtn.solid:hover{background:var(--blue-ink);border-color:var(--blue-ink)} .gp-acct-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;min-width:0;transition:background .14s} .gp-acct-card:hover{background:var(--panel-2)} .gp-acct-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .gp-avatar{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:12px;color:#fff;background:var(--blue)} .gp-acct-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .gp-acct-email{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gp-acct-sub{font-size:11px;color:var(--muted)} .gp-signout{display:block;width:calc(100% - 8px);margin:6px 4px 2px;border:1px solid var(--hair-2);border-radius:9px;padding:8px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#fff;transition:background .14s,color .14s,border-color .14s} .gp-link:hover,.gp-signout:hover{background:var(--panel-2);color:var(--ink)} /* ============ COVER ============ */ .cover{position:relative;overflow:clip;isolation:isolate} .cover-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(22px,3vh,36px) var(--gutter) 0;display:block} /* §8 SIGNATURE — "the page reads the tape". The hero field's wash takes its colour from the SAME scripted regime cycle that already drives the gauge on the centre card: the atmosphere behind the desk shifts with the read on the desk. Four near-neighbour tints, never saturated — you notice it the second time, not the first, and the card that drives it is labelled `demo`, so the room claims nothing the copy doesn't. Under CALM/?still the cycle never runs, so the field is simply the default and the whole device costs nothing. */ body{--field-tint:#dbe4ff} body[data-regime="reflation"]{--field-tint:#d9eede} body[data-regime="deflation"]{--field-tint:#e2e6ee} body[data-regime="stagflation"]{--field-tint:#f0e7d4} .cover .tx-curtain{height:58%} .cov-copy{position:relative;z-index:40;text-align:center;max-width:880px;margin:0 auto;padding-bottom:0} /* 7vw floor-band keeps the three authored
lines intact once the display face is genuinely expanded (the old 2.15rem floor overflowed to 5 ragged lines on phones); >=698px still caps at 3.05rem, so desktop is unchanged. */ .cov-copy h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.99;font-size:clamp(1.4rem,7vw,3.05rem);margin:16px 0 0} /* IDENTITY — operator ruling 2026-07-29: the gradient third line and the dark LIVE pill ARE the house voice; they stay through any redesign. `.hd-mut` (two-tone continuation) is a reserved utility, unused in the hero. */ .cov-copy h1 .dim{color:var(--faint)} @supports (-webkit-background-clip:text){.cov-copy h1 .dim{background:linear-gradient(96deg,#2f6bf0 8%,#7c5cff 52%,#0f9d8f 104%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}} .cov-copy h1 .hd-mut{color:var(--hl-muted)} .cov-copy .sub{color:var(--muted);font-size:clamp(1rem,1.32vw,1.12rem);line-height:1.64;margin:16px auto 0;max-width:56ch} .cov-copy .sub b{color:var(--ink);font-weight:600} .cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center} .micro{margin-top:12px;font-weight:500;font-size:10.5px;letter-spacing:.08em;color:var(--faint)} .live-pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:99px;padding:6px 14px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.14em} .live-pill i{width:7px;height:7px;border-radius:50%;background:#5eead4;font-style:normal;position:relative} .live-pill i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(94,234,212,.6);animation:ping 2.4s ease-out infinite} @keyframes ping{0%{transform:scale(.5);opacity:1}70%,100%{transform:scale(1.7);opacity:0}} /* ---- the collage: five desk cards dealt around one stage card ---- Three elevation roles, three scales, deep tucks: each wing slides ~48px UNDER its neighbour so the stack reads as depth rather than as five things in a row. The centre card is the only object at true scale, with the only --r-xl corner and the only stage shadow, so the eye lands on the read and fans outward from it. No blur on the wings — blur says "out of focus"; scale and elevation say "further away", which is the honest claim and keeps the wings' data legible. */ .pyr{--side-bleed:clamp(12px,2.15vw,28px);position:relative;z-index:10;width:calc(100% + var(--side-bleed) + var(--side-bleed));margin:clamp(8px,1.4vh,16px) 0 0 calc(0px - var(--side-bleed));height:382px} .pyr::before{content:"";position:absolute;inset:-10% -4% -4%;pointer-events:none; background: linear-gradient(rgba(28,36,48,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(28,36,48,.022) 1px,transparent 1px); background-size:46px 46px,46px 46px; -webkit-mask-image:radial-gradient(88% 82% at 50% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(88% 82% at 50% 50%,#000 55%,transparent 100%)} .pcard{position:absolute;top:0;width:23.8%;height:320px;background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--sh-lift);padding:13px 15px;transform-origin:50% 0; animation:heroCardIn var(--dur-stage) var(--ease-emph) var(--d,0s) both} .pp1{left:0;transform:translateY(58px) scale(.87);opacity:.94;z-index:2;--d:.16s} .pp2{left:17.5%;transform:translateY(29px) scale(.93);box-shadow:var(--sh-float);z-index:3;--d:.09s} .pp3{left:36.5%;width:27%;border-radius:var(--r-xl);box-shadow:var(--sh-stage);z-index:5;--d:0s} .pp4{left:58.7%;transform:translateY(29px) scale(.93);box-shadow:var(--sh-float);z-index:3;--d:.09s} .pp5{left:76.2%;transform:translateY(58px) scale(.87);opacity:.94;z-index:2;--d:.16s} /* hold each card's content clear of the strip its neighbour covers */ .pp1{padding-right:58px} .pp2{padding-right:56px} .pp4{padding-left:56px} .pp5{padding-left:58px;padding-right:14px} .pcard .kicker{font-size:.62rem;display:flex;justify-content:space-between;gap:8px;align-items:baseline;white-space:nowrap;color:var(--muted)} .pcard .kicker .asof{letter-spacing:.05em;color:var(--faint);text-transform:uppercase;font-weight:500;font-size:.58rem;overflow:hidden;text-overflow:ellipsis} .pp5 .kicker{gap:5px;font-size:.58rem;letter-spacing:.07em} .pp5 .kicker .asof{flex:none;font-size:.55rem} /* today's read (front card) */ .pp3 .kicker{font-size:.66rem} .pp3 .chip-reg{padding:6px 12px;font-size:13px} .gz-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px} .gz{width:118px;flex:none} .gz-num{display:flex;flex:0 0 92px;min-width:92px;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center} .gz-num b{font-family:var(--fig);font-weight:800;font-size:48px;line-height:.96;letter-spacing:-.005em;color:var(--q-gold);transition:color .9s} .gz-num .gzw{min-height:16px;font-weight:700;font-size:14.5px;line-height:1.1;color:var(--ink-soft);white-space:nowrap} .gz-arcf{transition:stroke .9s} .pp3.risk .gz-arcf{stroke:var(--q-green)} .pp3.risk .gz-num b{color:var(--q-green)} .pp3.risk #needle circle{fill:var(--q-green)} .chip-reg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair-2);border-radius:99px;padding:5px 11px;font-weight:600;font-size:12.5px;background:#fff;margin-top:8px;position:relative} .chip-reg .dotg{width:7px;height:7px;border-radius:50%;background:var(--q-green)} /* the stance sits below a hairline, not below a gap: on a desk card the "so what do I do" line is a separate register from the reading above it (§5, doctrine Law 1). */ .stance{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair-weak);color:var(--ink-soft);font-size:12.5px;line-height:1.5} .pp3 .stance{margin-top:15px;padding-top:14px;font-size:13.25px;line-height:1.52} .stance b{font-weight:600} .quad-pop{position:absolute;left:-10px;top:calc(100% + 12px);z-index:84;width:272px;background:#fff;border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--sh-float);padding:13px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s .2s;text-align:left;font-weight:400} .chip-reg:hover .quad-pop,.chip-reg:focus-within .quad-pop,.chip-reg.open .quad-pop{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)} .quad{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:76px 76px;gap:4px} .q{border-radius:6px;padding:7px 9px;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.08em} .q.g{background:var(--green-wash);color:var(--q-green)} .q.r{background:var(--gold-wash);color:var(--q-gold)} .q.s{background:var(--red-wash);color:var(--q-red)} .q.d{background:var(--blue-wash);color:var(--q-blue)} .quad .you{position:absolute;left:45%;top:37%;width:12px;height:12px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 6px rgba(20,30,50,.4)} .quad-note{margin:9px 0 0;font-size:12px;color:var(--muted);line-height:1.5} /* heatmap card */ .heat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px} .hm{border-radius:6px;border:1px solid rgba(16,24,40,.05);padding:14px 6px 12px;min-width:0;text-align:center} .hm .tk{font-family:var(--display);font-weight:700;font-size:10.5px} .hm .pc{font-size:10.5px;font-weight:600;margin-top:2px} .hm.u{background:var(--green-wash)} .hm.u .pc{color:var(--q-green)} .hm.u2{background:#d2ecdd} .hm.u2 .pc{color:var(--q-green)} .hm.d{background:var(--red-wash)} .hm.d .pc{color:var(--q-red)} .hm.d2{background:#f6dbd9} .hm.d2 .pc{color:var(--q-red)} .hm.flash{background:var(--blue-wash) !important} .rf{animation:rowFlash .65s ease} @keyframes rowFlash{0%{background:rgba(40,95,255,.07)}100%{background:transparent}} /* act-now lane card */ .pl-lane{margin-top:10px;border:1px solid var(--hair-weak);border-radius:10px;background:var(--panel-2);padding:9px 10px 11px;min-height:186px} .pl-h{display:flex;align-items:center;gap:6px;margin:0 0 2px;letter-spacing:.09em;color:var(--q-green)} .pl-h i{width:6px;height:6px;border-radius:50%;background:var(--q-green);font-style:normal} .pl-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--hair);border-radius:8px;box-shadow:var(--sh-card);padding:11px;margin-top:8px;font-size:12px;font-weight:600;color:var(--ink-soft);transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .4s} .pl-chip .sc{font-weight:700;font-size:11px;color:var(--muted);transition:color .4s} .pl-chip .sc.hot{color:var(--q-green)} .pl-chip.out{opacity:0;transform:translateX(26px)} .pl-chip.in0{opacity:0;transform:translateX(-26px);transition:none} /* insider & congress card */ .pi-feed{margin-top:8px;height:232px;overflow:hidden} .pi-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8.5px 2px;border-bottom:1px solid var(--hair-weak);font-size:11.5px} .pi-row .act{font-family:var(--display);font-weight:800;font-size:8.5px;letter-spacing:.08em;border-radius:5px;padding:2.5px 7px} .pi-row .act.b{color:var(--q-green);background:var(--green-wash)} .pi-row .act.s{color:var(--q-red);background:var(--red-wash)} .pi-row .tk{font-weight:700} .pi-row .who{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pi-row .sc{font-weight:700;font-size:10.5px;color:var(--muted)} .pi-row.enter{animation:piIn .5s cubic-bezier(.2,.8,.3,1)} @keyframes piIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* prophet — scorecard-v2 card */ .psc-top{display:flex;justify-content:space-between;align-items:center;margin-top:8px} .psc-pill{font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.09em;color:var(--q-green);background:var(--green-wash);border:1px solid rgba(31,139,65,.35);border-radius:99px;padding:3.5px 11px} .psc-px{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink)} .psc-spark{display:block;width:100%;height:58px;margin-top:7px;border-radius:6px;background:linear-gradient(180deg,rgba(31,139,65,.045),transparent)} .psc-id{display:flex;align-items:baseline;gap:7px;margin-top:9px} .psc-id .tk{font-family:var(--display);font-weight:800;font-size:15px} .psc-id .nm2{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} /* ZONE / EDGE are instrument labels, so they take the instrument voice (§3) — and their figures inherit mono, which is the point: the numbers line up like a scale. */ .psc-edge{font-weight:500;letter-spacing:.07em;color:var(--faint);white-space:nowrap} .psc-edge b{font-size:14.5px;font-weight:600;color:var(--q-green);margin-left:3px} .psc-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:4px;position:relative;margin-top:12px;padding-top:9px;text-align:center} .psc-stages::before{content:"";position:absolute;top:3.5px;left:8px;right:8px;height:2px;border-radius:2px;background:var(--hair)} .stg{position:relative;min-width:0;font-family:var(--display);font-size:9px;line-height:1.2;letter-spacing:.01em;color:var(--faint);font-weight:650;white-space:nowrap} .stg::before{content:"";position:absolute;top:-8.5px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#d3d9e2;border:2px solid #fff} .stg.on{color:var(--ink);font-weight:700} .stg.on::before{background:var(--q-green);box-shadow:0 0 0 3px rgba(31,139,65,.18)} .psc-zone{display:flex;align-items:baseline;gap:7px;margin-top:11px;border-top:1px solid var(--hair-weak);padding-top:9px;letter-spacing:.09em;color:var(--q-green)} .psc-zone b{font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums} .psc-zone .dt{margin-left:auto;color:var(--faint);font-weight:500;letter-spacing:.04em} /* ============ FEATURE SECTIONS — the suite, live components ============ */ /* §6.4 The vignette is the ARGUMENT, the copy its caption: 58/42, a 440px floor, column stretched to the row so the exhibit FILLS its band rather than floating small in the middle of it (§1's biggest finish gap against the benchmark). */ .feature{position:relative;padding-block:clamp(96px,11vw,148px)} .feature.flip{background:#fff} .feature+.feature{border-top:1px solid var(--hair)} /* a band that carries its own .bandrule element must not also paint a border */ .feature+.feature.drawn{border-top:0} .feat-grid{display:grid;grid-template-columns:minmax(300px,42fr) minmax(0,58fr);gap:clamp(28px,4.5vw,64px);align-items:stretch} .feature.flip .feat-grid{grid-template-columns:minmax(0,58fr) minmax(300px,42fr)} .feat-grid>*{min-width:0} .feature.flip .feat-copy{order:2} .feat-copy{align-self:center} /* the vignette column fills the band; structural selector so all five feature bands inherit it without an HTML class (they share one shape: .rv > .demo) */ .feat-grid>.rv:not(.feat-copy){display:flex} /* min-width:0 on both the card and its interior is load-bearing, not tidiness: a flex item's automatic minimum is its MIN-CONTENT, so the lane strip's four 130px columns would push the whole vignette past the viewport at 390px. */ .feat-grid>.rv:not(.feat-copy)>.demo{flex:1;min-width:0;min-height:440px;display:flex;flex-direction:column} .feat-copy .kicker{color:var(--blue);display:block;margin-bottom:14px} .feat-title{margin:0 0 12px;color:var(--ink)} .feat-sub{color:var(--muted);font-size:15.5px;line-height:1.62;margin:0;max-width:48ch} .feat-sub b{color:var(--ink);font-weight:600} .fx{list-style:none;margin:20px 0 0;padding:0} .fx li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--hair-weak);font-size:14px;color:var(--muted);line-height:1.55} .fx li:first-child{border-top:0} .fx li b{color:var(--ink);font-weight:600} /* a round tick, not a dash: the three lines are parallel claims, not a sequence */ .fx li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--blue)} .feat-cta{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:600;font-size:14.5px; transition:transform var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)} /* §7 nudge on the whole label: the arrow lives inside the link's text AND its data-zh twin, so isolating it would mean editing copy in two languages. */ .feat-cta:hover{transform:translateX(2px)} .demo{position:relative;border-radius:var(--r-lg);border:1px solid var(--hair-2);background:var(--panel);box-shadow:var(--sh-lift);padding:16px} .demo>*{min-width:0} /* the one structural fill selector: whichever exhibit a vignette carries takes the band's spare height, so no card ends on 200px of air (the W2 leftover on the three story bands). Distribution is then each exhibit's own business, below. */ .demo>.lanes,.demo>.filings-grid,.demo>.sits,.demo>.funds,.demo>.tri3{flex:1} /* keeps its corner (§6.4), stops straddling the edge like a sticker: inside the frame, mono, quiet — a label ON an instrument. */ .live-tag{position:absolute;top:14px;right:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;letter-spacing:.1em;color:var(--teal);background:var(--panel);border:1px solid var(--hair-2);border-radius:99px;padding:4px 10px;box-shadow:var(--sh-1)} .live-tag i{width:5px;height:5px;border-radius:50%;background:var(--teal);font-style:normal} .demo .dk{margin:0 0 4px;padding:0 100px 12px 0;border-bottom:1px solid var(--hair-weak);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:baseline;gap:8px} .demo .dk .asof{letter-spacing:.05em;text-transform:none;color:var(--faint);font-weight:500} /* §5 receipt bar — the vignette's honesty on a hairline at its foot instead of as grey micro-text beside the title. Same words, one per card (Law 4). */ .dm-rcpt{display:flex;align-items:baseline;gap:9px;margin:16px 0 0;padding-top:11px;border-top:1px solid var(--hair-weak); font-weight:500;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} /* — Terminal showcase: dark full-bleed section + Safari-framed live terminal. (The old dark-plate terminal + options-flow feed are archived in mockups/landing/options_flow_feed.html for the future flow panel.) — */ .tsec{position:relative;background:#04070c;margin-top:0;padding:clamp(48px,6.5vw,84px) 0 0;overflow:hidden} .tsec>.wrap{position:relative;z-index:1} /* §6.2 ONE opacity (it was .8 on the row TIMES .75 on the image), 8px-grid gaps, full on hover. Per-logo heights stay on the tags: with six different lockups those ARE the optical normalisation, and equal px would shrink the stacked Ritholtz wordmark to nothing. */ .tlogos{display:flex;justify-content:center;align-items:center;gap:clamp(24px,4.5vw,64px);flex-wrap:wrap;margin-bottom:clamp(40px,5.5vw,72px)} .tlogos img{display:block;width:auto;opacity:.55;transition:opacity var(--dur-micro) var(--ease-out)} .tlogos img:hover{opacity:1} @media (max-width:640px){.tlogos{gap:24px 32px}} .tsec .th-grid{display:grid;grid-template-columns:minmax(280px,.94fr) minmax(0,1.06fr);gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(30px,4.5vw,56px)} .tsec .kicker{color:#6ea8ff;display:block;margin-bottom:12px} .tsec .sec-title{color:#fff;margin:0} .tsec .th-sub{color:#8e99ad;font-size:15.5px;line-height:1.66;margin:6px 0 0} .tsec .th-sub b{color:#e2e9f4;font-weight:600} .tsec .feat-cta{color:#6ea8ff} /* §6.2 the frame as a STAGE: a 9%-white hairline draws the edge, the shadow tier states the elevation, a blue bloom lifts it off the band. The spec's under-glow is kept verbatim though the crop is flush with the section's clipped bottom — the term that actually shows is the one above it. */ .sf-crop{height:clamp(460px,53vw,700px);overflow:hidden;border-radius:var(--r-xl) var(--r-xl) 0 0;position:relative;z-index:1; box-shadow:0 40px 120px -40px rgba(40,95,255,.25),0 -16px 84px -30px rgba(40,95,255,.24),var(--sh-stage)} .sf{background:#0b0e14;border:1px solid rgba(255,255,255,.09);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden} /* Safari chrome (dark) */ .sf-bar{display:grid;grid-template-columns:1fr minmax(240px,44%) 1fr;align-items:center;gap:12px;height:44px;padding:0 14px;background:#212329;border-bottom:1px solid #08090c;position:relative;z-index:5} .sf-l{display:flex;align-items:center;gap:13px;color:#8e9096} .sf-l .dim{color:#5b5d63} .sf-dots{display:flex;gap:8px;margin-right:3px} .sf-dots i{width:12px;height:12px;border-radius:50%} .sf-dots i:nth-child(1){background:#ff5f57}.sf-dots i:nth-child(2){background:#febc2e}.sf-dots i:nth-child(3){background:#28c840} .sf-l svg,.sf-r svg,.sf-url svg{display:block;flex:none} .sf-url{display:flex;align-items:center;justify-content:center;gap:7px;height:29px;background:#2c2e35;border-radius:8px;color:#a8aab1;font-size:12.5px;min-width:0;padding:0 10px} .sf-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-r{display:flex;justify-content:flex-end;align-items:center;gap:15px;color:#8e9096} /* terminal app */ /* Two dark hairline tiers, same law as the light bands (§2): --thl draws a panel edge, --thl-w divides rows INSIDE one. Micro-labels take the instrument voice (--mono): a terminal letters its scales in mono. */ .tapp{--tg:#2ebd85;--tr:#f6465d;--tb:#3f82f6;--thl:#1a2130;--thl-w:#151b27;background:#0b0e14;color:#dbe3ee;font-size:12px;text-align:left} .tapp .mo{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums} .tapp .up{color:var(--tg)} .tapp .dn{color:var(--tr)} .tt-top{display:flex;align-items:center;flex-wrap:nowrap;gap:13px;height:54px;padding:0 12px;border-bottom:1px solid var(--thl);overflow:hidden;position:relative;z-index:1} .tt-top>*{flex:none} .tt-cell .l,.tt-cell .v,.tt-rng .lb,.tt-rng .mm,.tt-rng .mm span{white-space:nowrap} .tt-logo{display:flex;align-items:center;gap:8px;padding-right:2px} .tt-logo .lm{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#3f82f6,#7c5cff);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff} .tt-logo .ln b{display:block;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.05em;color:#fff;line-height:1} .tt-logo .ln span{display:block;font-family:var(--display);font-weight:700;font-size:6.3px;letter-spacing:.34em;color:#5c6879;margin-top:2.5px} .tt-sym{display:flex;align-items:center;gap:7px;background:#141a25;border:1px solid #212a3a;border-radius:8px;padding:6px 9px;font-weight:700;font-size:12.5px;color:#fff} .tt-sym .sic,.tq-hd .sic{border-radius:50%;background:#76b900;color:#0b0e14;display:grid;place-items:center;font-weight:800} .tt-sym .sic{width:17px;height:17px;font-size:9px} .tt-cmp{display:flex;align-items:center;gap:6px;border:1px solid #212a3a;border-radius:8px;padding:6px 10px;color:#96a2b5;font-size:11.5px;font-weight:600} .tt-cell .l,.tt-rng .lb{display:block;font-size:7.6px;letter-spacing:.1em;text-transform:uppercase;color:#5c6879;margin-bottom:3px} .tt-cell .v{font-size:12.5px;font-weight:600;color:#e6ecf5} .tt-rng{min-width:124px} .tt-rng .lb{display:flex;justify-content:space-between;align-items:baseline} .tt-rng .lb em{font-style:normal;color:var(--tg);font-size:10px;font-weight:700;letter-spacing:0} .tt-rng .trk{position:relative;display:block;height:3px;border-radius:2px;background:#242e40;margin-top:6px} .tt-rng .trk i{position:absolute;top:50%;left:57%;width:7px;height:7px;border-radius:50%;background:#e6ecf5;border:1.5px solid #0b0e14;transform:translate(-50%,-50%)} .tt-rng .mm{display:flex;justify-content:space-between;font-size:8.5px;color:#5c6879;margin-top:4px} .tt-del{display:flex;align-items:center;gap:6px;border:1px solid rgba(46,189,133,.3);border-radius:99px;padding:4px 9px;font-size:7.6px;letter-spacing:.1em;text-transform:uppercase;color:#3ecf95;background:rgba(46,189,133,.08);white-space:nowrap} .tt-del i{width:5px;height:5px;border-radius:50%;background:#2ebd85} .tt-ai{margin-left:auto;display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#2f6bf0,#4f8bff);border-radius:8px;padding:7px 12px;color:#fff;font-weight:700;font-size:11.5px;white-space:nowrap;box-shadow:0 4px 14px -6px rgba(63,130,246,.5)} .tt-av{width:26px;height:26px;flex:none;border-radius:50%;background:#242c3b;color:#9aa6ba;display:grid;place-items:center;font-size:10.5px;font-weight:700} .tt-body{display:flex} .tt-rail{width:44px;flex:none;border-right:1px solid var(--thl);padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:3px} .tt-rail .ri{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:#57627a} .tt-rail .ri.on{color:#6ea8ff;background:rgba(63,130,246,.13);position:relative} .tt-rail .ri.on::before{content:"";position:absolute;left:-7px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--tb)} .tt-main{flex:1;min-width:0;display:flex;flex-direction:column} .tt-tabs{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-bottom:1px solid var(--thl);color:#7383a0;font-size:11px;white-space:nowrap;overflow:hidden} .tt-tabs .tab{position:relative;display:flex;align-items:center;height:40px;padding:0 2px;margin-right:4px;color:#fff;font-weight:600;font-size:12px;flex:none} .tt-tabs .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--tb)} .tt-tabs .it{display:flex;align-items:center;gap:5px;flex:none} .tt-tabs .on2{color:#6ea8ff;font-weight:700} .tt-tabs .sep{width:1px;height:15px;background:#1c2534;flex:none} .tt-tabs .pg{display:flex;gap:3px;flex:none} .tt-tabs .pg span{width:19px;height:19px;border:1px solid #232d3f;border-radius:5px;display:grid;place-items:center;font-size:9.5px} .tt-tabs .pg span.on{background:rgba(63,130,246,.16);border-color:#2f4a7c;color:#8fb4ff} .tt-cwrap{position:relative;flex:1} #tt-chart{display:block;width:100%;height:620px} .tt-leg{position:absolute;left:10px;top:8px;font-size:9.5px;color:#78849b;display:flex;flex-direction:column;gap:3px;pointer-events:none} .tt-leg .row{display:flex;align-items:center;gap:5px} .tt-leg i{width:8px;height:2px;border-radius:1px} /* right column */ .tt-right{width:300px;flex:none;border-left:1px solid var(--thl);padding:8px;display:flex;flex-direction:column;gap:8px} .ttp{background:#0e1219;border:1px solid #1a212e;border-radius:10px;overflow:hidden;flex:none} .ttp-h{display:flex;align-items:center;gap:7px;padding:9px 11px 7px;font-weight:700;font-size:11.5px;color:#e6ecf5} .ttp-h .bar{width:2.5px;height:11px;border-radius:2px;background:var(--tb)} .ttp-h .mr{margin-left:auto;display:flex;align-items:center;gap:10px;color:#5c6879} .ttp-h .tag{margin-left:auto;color:#5c6879} .twl-cols{display:grid;grid-template-columns:1fr 78px 52px;padding:2px 11px 5px;font-size:7.6px;letter-spacing:.1em;text-transform:uppercase;color:#525f73;border-bottom:1px solid var(--thl-w)} .twl-cols span:nth-child(2),.twl-cols span:nth-child(3){text-align:right} .twl-rows{height:182px;overflow:hidden;position:relative} .twl-g{padding:6px 11px 2px;font-size:7.3px;letter-spacing:.12em;color:#4d5a6e} .twl-r{display:grid;grid-template-columns:17px 1fr 78px 52px;gap:7px;align-items:center;height:26px;padding:0 11px;font-size:11.5px;transition:background .45s} .twl-r .sic{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:7.5px;font-weight:800;color:#fff} .twl-r .sy{font-weight:600;color:#dbe3ee;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .twl-r .la{text-align:right;color:#c9d2df;font-size:11px} .twl-r .ch{text-align:right;font-size:11px} .twl-r.on{background:rgba(63,130,246,.10);box-shadow:inset 2px 0 0 var(--tb)} .twl-r.zu{background:rgba(46,189,133,.10)} .twl-r.zd{background:rgba(246,70,93,.10)} .twl-sb{position:absolute;right:2px;top:6px;width:3px;height:52px;border-radius:2px;background:#26303f} .tq-hd{display:flex;align-items:center;gap:8px;padding:10px 11px 0} .tq-hd .sic{width:20px;height:20px;font-size:10px} .tq-hd .nm b{display:block;font-size:12.5px;color:#fff;line-height:1.15} .tq-hd .nm span{font-size:9.5px;color:#5c6879} .tq-hd svg{margin-left:auto;color:#5c6879} .tq-px{display:flex;align-items:baseline;gap:8px;padding:7px 11px 10px} .tq-px .big{font-size:25px;font-weight:700;color:#fff} .tq-px .pc{font-size:12px;font-weight:700;color:var(--tg)} .tq-px .st{margin-left:auto;display:flex;align-items:center;gap:5px;background:rgba(46,189,133,.1);border:1px solid rgba(46,189,133,.25);border-radius:6px;padding:3px 8px;font-size:7.6px;letter-spacing:.1em;color:#3ecf95} .tq-px .st i{width:5px;height:5px;border-radius:50%;background:#2ebd85} .tq-row{display:flex;align-items:center;gap:7px;padding:8px 11px;border-top:1px solid var(--thl-w);font-size:11px} .tq-row .k{display:flex;align-items:center;gap:6px;font-size:7.6px;letter-spacing:.08em;color:#8b96a8;max-width:76px;text-align:left} .tq-row .val{margin-left:auto;text-align:right;font-weight:600;font-size:11px} .tq-row .val small{display:block;font-size:8.5px;color:#5c6879;font-weight:500;margin-top:2px} .tq-row.gold{background:rgba(224,178,88,.07)} .tq-row.gold .k{color:#c9a24f} .tq-row.gold .val{color:#e8c675} .tq-row .vw{display:inline-block;border:1px solid #2a3550;background:#151c2b;border-radius:6px;padding:2.5px 10px;font-size:9.5px;color:#9db4dd;font-weight:600} .tq-trend{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--thl-w)} .tq-trend .k{font-size:7.6px;letter-spacing:.1em;color:#5c6879} .tq-trend .pill{flex:1;text-align:center;border:1px solid rgba(46,189,133,.4);border-radius:99px;padding:3.5px 0;font-size:8.4px;letter-spacing:.12em;color:#3ecf95} .tq-trend .hz{font-size:8.5px;color:#5c6879} .tks-r{display:flex;justify-content:space-between;align-items:baseline;padding:5.5px 11px;font-size:11px;color:#8b96a8} .tks-r b{color:#dbe3ee;font-weight:600} @media (max-width:1300px){.tt-top{gap:9px}} @media (max-width:1240px){.hx1{display:none !important}} @media (max-width:1080px){.hx2{display:none !important}.tt-right{width:272px}} @media (max-width:950px){.tt-right{display:none}.hx3{display:none !important}} @media (max-width:640px){ .tt-rail{display:none}.sf-crop{height:min(120vw,470px)}.tsec .th-grid{grid-template-columns:1fr;gap:12px} .sf-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px} .sf-l svg,.sf-r{display:none} .tt-logo .ln,.tt-ai{display:none}.tt-av{margin-left:auto} } /* — Prophet showcase: the light board-room band after the dark terminal. Real cards from tonight's board (baked #ph-data island → live override from prophet/showcase.json, same nightly emit) deal onto a belt, their charts wipe in, then the belt drifts. One hue per card follows the verb (--ph) — the flagship pv-card anatomy re-set in the landing palette. — */ /* §6.3 paper under the band — dots, not lines: lines would read as a chart and compete with the eleven real ones drifting on top. Bottom edge is a .bandrule element, not a border, so it can draw itself in (§7). */ .psec{position:relative;padding:clamp(56px,7.5vw,100px) 0 clamp(46px,6vw,80px);overflow:hidden} .psec>.wrap,.psec>.ph-tagrow,.psec>.ph-belt,.psec>.ph-foot{position:relative;z-index:1} .psec .ph-head{display:grid;grid-template-columns:minmax(280px,.94fr) minmax(0,1.06fr);gap:clamp(24px,5vw,72px);align-items:start} .psec .kicker{color:var(--blue);display:block;margin-bottom:12px} .psec .sec-title{margin:0} .ph-sub{color:var(--muted);font-size:15.5px;line-height:1.66;margin:6px 0 0} .ph-sub b{color:var(--ink);font-weight:600} .psec .feat-cta{margin-top:14px} .ph-tagrow{display:flex;justify-content:center;margin:clamp(26px,3.5vw,40px) 0 18px} /* The delayed-winners tag, said proudly. SAME WORDS — this is the honest limit of the claim, and owning it in dark ink reads more confident than whispering it. */ .ph-tag{display:inline-flex;align-items:center;gap:8px;letter-spacing:.1em;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:99px;padding:7px 15px;box-shadow:var(--sh-2);white-space:nowrap} .ph-tag i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--teal) 52%,#fff);font-style:normal} .ph-tag .tnum{color:#c3ccdb} .ph-belt{position:relative} .ph-clip{overflow:hidden;padding:6px 0 14px} .ph-track{display:flex;width:max-content;padding-left:clamp(20px,4.5vw,60px)} .ph-set{display:flex;gap:14px;padding-right:14px} .ph-track.run{animation:phDrift 95s linear infinite} .ph-track.ps{animation-play-state:paused} /* hover no longer pauses the belt — JS eases playbackRate to .7 instead (seamless) */ /* loop distance = one measured set width (--phsw, set by the renderer) so the lead-in gutter never causes a seam jump */ @keyframes phDrift{to{transform:translateX(calc(-1 * var(--phsw, 50%)))}} /* deal-in + chart wipe, staggered per card (--i set by the renderer) */ .ph-belt .phc{opacity:0;transform:translateY(26px) rotate(.5deg)} .ph-belt.in .phc{animation:phDeal .6s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:calc(var(--i)*90ms)} @keyframes phDeal{to{opacity:1;transform:none}} .ph-belt.in .phc-ch svg{clip-path:inset(0 100% 0 0);animation:phWipe .85s ease-out forwards;animation-delay:calc(var(--i)*90ms + .22s)} @keyframes phWipe{to{clip-path:inset(0 0 0 0)}} @media (prefers-reduced-motion:reduce){.ph-belt .phc{opacity:1;transform:none}.ph-belt.in .phc-ch svg{clip-path:none}} html.still .ph-belt .phc{opacity:1 !important;transform:none !important} html.still .ph-belt .phc-ch svg{clip-path:none !important} /* — the card: pv-card contract in landing dress. One hue per card. — */ .phc{position:relative;display:flex;flex-direction:column;width:272px;flex:none;background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--sh-float);color:var(--ink);overflow:hidden;text-decoration:none; transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)} .phc:hover{transform:translateY(-1px);box-shadow:var(--sh-stage);border-color:var(--hair-strong);color:var(--ink)} .phc-buy{--ph:var(--q-green)}.phc-near{--ph:#2ea360}.phc-wait{--ph:var(--q-gold)}.phc-hold{--ph:#5d6b7e}.phc-avoid{--ph:var(--q-red)} .phc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--ph),color-mix(in srgb,var(--ph) 10%,transparent) 92%);box-shadow:0 1px 10px color-mix(in srgb,var(--ph) 38%,transparent)} .phc-ch{position:relative;background:color-mix(in srgb,var(--ph) 4%,transparent)} .phc-ch svg{display:block;width:100%;height:84px} /* spark recolor law (matches the board): strokes take the verb hue; filled shapes flip to hue fill; fill-opacity/dasharray attrs survive untouched */ .phc-ch svg *{stroke:var(--ph) !important} .phc-ch svg [fill]:not([fill="none"]){fill:var(--ph) !important;stroke:none !important} .phc-ov{position:absolute;top:9px;display:flex;gap:6px;align-items:center;z-index:2} .phc-ovl{left:10px;max-width:72%}.phc-ovr{right:10px} .phc-chip{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.08em;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--ph) 11%,#fff);color:var(--ph);border:1px solid color-mix(in srgb,var(--ph) 40%,transparent);white-space:nowrap} .phc-buy .phc-chip{background:var(--ph);color:#fff;border-color:transparent} .phc-px{font-family:var(--display);font-weight:800;font-size:12.5px;background:rgba(255,255,255,.9);border:1px solid var(--hair);border-radius:7px;padding:2px 7px;color:var(--ink)} .phc-since{font-family:var(--display);font-weight:800;font-size:12.5px;background:var(--q-green);color:#fff;border-radius:7px;padding:2px 8px;box-shadow:0 2px 10px rgba(31,139,65,.4)} .phc-cau{position:relative;display:inline-flex} .phc-cau-b{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:9.5px;padding:3px 8px;border-radius:99px;background:var(--gold-wash);color:var(--q-gold);border:1px solid rgba(176,125,5,.35);cursor:default} .phc-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:210px;background:#fff;border:1px solid var(--hair-2);border-radius:10px;box-shadow:var(--sh-float);padding:8px 10px;white-space:normal} .phc-cau:hover .phc-pop,.phc-cau:focus-within .phc-pop{display:block} .phc-pop span{display:block;font-size:10.5px;line-height:1.45;color:var(--ink-soft);padding:2.5px 0;font-weight:500} .phc-pop span+span{border-top:1px solid var(--hair)} .phc-bd{padding:9px 12px 10px;display:flex;flex-direction:column;flex:1} .phc-hd{display:flex;align-items:baseline;gap:7px;min-width:0} .phc-tk{font-family:var(--display);font-weight:800;font-size:13.5px} .phc-nm{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .phc-edge{letter-spacing:.07em;color:var(--faint);white-space:nowrap} .phc-edge b{font-size:14px;color:var(--ph);margin-left:3px} .phc-sec{font-size:10.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .phc-stp{display:flex;align-items:center;margin:9px 1px 0} /* unreached = empty socket (1px ring), passed = tinted, current = solid + halo: a position on a rail rather than four dots of similar grey */ .phc-dot{width:7px;height:7px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair-2);flex:none} .phc-seg{flex:1;height:2px;background:var(--hair-2)} .phc-dot.pa,.phc-seg.pa{background:color-mix(in srgb,var(--ph) 45%,var(--hair-2))} .phc-dot.pa{box-shadow:none} .phc-dot.on{background:var(--ph);box-shadow:0 0 0 3px color-mix(in srgb,var(--ph) 16%,transparent)} .phc-stl{display:flex;justify-content:space-between;margin-top:4px} .phc-stl span{font-size:9.5px;color:var(--faint);white-space:nowrap} .phc-stl span.on{color:var(--ph);font-weight:700} /* the card's own receipt: verb-hued label, zone, call date — instrument voice on a --hair-weak rule (§5) */ .phc-zn{display:flex;align-items:center;gap:6px;border-top:1px solid var(--hair-weak);background:var(--panel-2);padding:8px 12px;font-weight:400;letter-spacing:.02em;white-space:nowrap;overflow:hidden;margin-top:auto} .phc-znl{letter-spacing:.09em;color:var(--ph)} .phc-znr{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .phc-znm{color:var(--muted);font-weight:500} .phc-dt{margin-left:auto;color:var(--faint);font-size:9.5px;flex:none;padding-left:5px} .ph-foot{text-align:center;color:var(--muted);font-size:13.5px;margin:6px 0 0} .ph-foot b{color:var(--ink);font-weight:600} @media (max-width:640px){ .psec .ph-head{grid-template-columns:1fr;gap:12px} .ph-track.run{animation-duration:60s} .phc{width:248px} .phc-ch svg{height:74px} } /* — act-now lanes — */ .lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px} .lane{background:var(--panel-2);border:1px solid var(--hair-weak);border-radius:10px;padding:8px;min-height:190px} .lane .lh{display:flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:.08em;padding:2px 2px 7px} .lane .lh i{width:6px;height:6px;border-radius:50%;font-style:normal;flex:none} .lane.l-buy .lh{color:var(--q-green)} .lane.l-buy .lh i{background:var(--q-green)} .lane.l-alm .lh{color:var(--q-blue)} .lane.l-alm .lh i{background:var(--q-blue)} .lane.l-tp .lh{color:var(--q-gold)} .lane.l-tp .lh i{background:var(--q-gold)} .lane.l-sa .lh{color:var(--faint)} .lane.l-sa .lh i{background:var(--faint)} .thm{display:flex;align-items:center;gap:6px;min-width:0;background:var(--panel);border:1px solid var(--hair);border-radius:7px;box-shadow:var(--sh-card);padding:6px 8px;margin-top:5px;font-size:10.5px;font-weight:600;color:var(--ink-soft); transition:border-color var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out)} .thm:hover{border-color:var(--hair-strong);box-shadow:var(--sh-lift)} .thm .nm2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px} .thm .sc{flex:none;color:var(--muted)} /* the FLIP replaces the transition wholesale mid-travel — keep it last and more specific so the hover transition never eats the lane change */ .thm.mov{transition:transform .6s cubic-bezier(.25,.8,.3,1.05)} .thm.hot{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-card)} /* — filings feed — */ .filings-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:14px;margin-top:14px} /* both columns take the band's height: the feed spends it on row rhythm (also the hover target), the tile spreads its three facts down it. The six-row cap is the JS's, so the window needs no max-height of its own. */ .filings{overflow:hidden;align-self:stretch} .fi-row{display:grid;grid-template-columns:40px 1fr auto;gap:9px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--hair-weak);font-size:12px; transition:background var(--dur-micro) var(--ease-out)} .fi-row:hover{background:var(--panel-2)} .fi-row.enter{animation:flIn .5s cubic-bezier(.2,.8,.3,1)} .fi-row .who{font-size:8.5px;letter-spacing:.06em;border-radius:5px;padding:3px 0;text-align:center} .fi-row .who.sen{color:var(--violet);background:rgba(120,98,224,.1)} .fi-row .who.rep{color:var(--q-blue);background:var(--blue-wash)} .fi-row .who.ceo{color:var(--teal);background:rgba(15,157,143,.1)} .fi-row .who.cfo{color:var(--q-gold);background:var(--gold-wash)} .fi-row .nm{min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fi-row .nm b{color:var(--ink);font-weight:600} .fi-row .rt{display:flex;align-items:center;gap:6px} .fi-row .side{font-size:8.5px;letter-spacing:.08em;border-radius:5px;padding:3px 6px} .fi-row .side.b{color:var(--q-green);background:var(--green-wash)} .fi-row .side.s{color:var(--q-red);background:var(--red-wash)} .fi-row .amt{font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums} .fi-sum{background:var(--panel-2);border:1px solid var(--hair);border-radius:10px;padding:15px 16px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between} .fi-sum .big{font-family:var(--fig);font-weight:800;font-size:27px;letter-spacing:-.005em} .fi-sum .lb{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45} .fi-sum .div{height:1px;background:var(--hair);margin:11px 0} .fi-sum .cc{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--muted)} .fi-sum .cc b{font-size:15px;color:var(--q-green);font-weight:800} /* — special situations — STACKED, not side by side (W3): two 298px columns could not fill the band without 300px of air under each, and the same two cards laid one over the other fill it exactly — while the description stops wrapping at four words and each card reads as one line of a situations feed, which is what the desk actually is. Equal rows, and the meter parked on the floor by margin-top:auto so the two arcs stay on one rail however long the descriptions run (they swap on a loop; lengths vary). */ .sits{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px;margin-top:14px} .sit{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair-2);border-radius:10px;box-shadow:var(--sh-card);padding:14px 15px;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)} .sit.swap{opacity:0;transform:translateY(8px)} .sit .tp{display:flex;justify-content:space-between;align-items:center;gap:8px} .sit .tk{font-family:var(--display);font-weight:800;font-size:14px} .sit .kind{font-size:8.5px;letter-spacing:.07em;border-radius:5px;padding:3px 7px;color:var(--violet);background:rgba(120,98,224,.1)} .sit .kind.g{color:var(--q-green);background:var(--green-wash)} .sit .desc{font-size:12px;color:var(--muted);margin:7px 0 0;line-height:1.55} .sit .meter{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:13px} .sit .arc{width:52px;height:31px;flex:none} .sit .arc path{fill:none;stroke-linecap:round} .sit .arc .bgp{stroke:var(--hair);stroke-width:5} .sit .arc .fgp{stroke:var(--violet);stroke-width:5;stroke-dasharray:var(--len) 200;transition:stroke-dasharray 1s var(--ease-out) .3s} .sit .early{flex:none;letter-spacing:.07em;white-space:nowrap;color:var(--q-gold);background:var(--gold-wash);border-radius:5px;padding:4px 8px} .sit .sc2{font-weight:400;font-size:11px;white-space:nowrap;color:var(--muted)} .sit .sc2 b{color:var(--ink);font-size:14px} /* — 13f flows — Five rows sharing the band's height equally: the bar is the object, the row is its lane, and the --hair-weak rules turn the set into a table instead of a stack. */ .funds{display:flex;flex-direction:column;margin-top:14px} .fd-row{flex:1;display:grid;grid-template-columns:118px 1fr auto;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--hair-weak);font-size:12px} .fd-row:last-child{border-bottom:0} .fd-row .fn{font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fd-bar{position:relative;height:16px;border-radius:5px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--hair-weak);overflow:hidden} .fd-bar i{position:absolute;top:0;bottom:0;font-style:normal;border-radius:5px;transition:width 1.1s cubic-bezier(.25,.8,.3,1);width:var(--w,40%)} .fd-row.add .fd-bar i{left:0;background:linear-gradient(90deg,rgba(31,139,65,.28),rgba(31,139,65,.75))} .fd-row.trim .fd-bar i{left:0;background:linear-gradient(90deg,rgba(193,47,47,.26),rgba(193,47,47,.7))} .fd-row .dx{font-weight:700;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums} .fd-row.add .dx{color:var(--q-green)} .fd-row.trim .dx{color:var(--q-red)} /* — btc / commodities / fx tri — Three cards, ONE shared height (§6.5). Three markets with four readings between them cannot honestly fill 330px, so the exhibit does not pretend to: the cards take their content's height, the instruments are drawn big enough to be read as instruments, and the ROW is centred in the band. Stretching them instead would just move the hollow inside each card — which is the defect this wave came to fix. */ .tri3{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:12px;margin-top:14px} .tri-p{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair-2);border-radius:10px;box-shadow:var(--sh-card);padding:14px 15px;min-width:0} .tri-p .tt{font-size:8.5px;letter-spacing:.1em;color:var(--muted)} /* the dial reads ABOVE its words, not beside them: a third of a 195px card left the stance wrapping four words wide, and the arc is the one drawn instrument here — it earns a full line. */ .cyc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px} .cyc svg{width:92px;height:55px;flex:none} .cyc .w{font-size:12px;color:var(--muted);line-height:1.5} .cyc .w b{display:block;color:var(--ink);font-weight:700;font-size:13.5px;margin-bottom:2px} .mini-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:7px 0;border-bottom:1px solid var(--hair-weak);font-size:12px} .mini-row:last-child{border-bottom:0} .mini-row .a{font-weight:600;color:var(--ink-soft)} .mini-row .p2{font-weight:600;font-size:11.5px;color:var(--muted)} .mini-row .v{font-weight:700;font-size:11.5px} /* Each card's LAST line is parked on the floor over a hairline — the stance for two of them, the BTC print for the third (the only .mini-row that is a direct child). Only the foot moves: spreading every child would just relocate the hollow. */ .fx-note,.tri-p>.mini-row{margin-top:auto;padding-top:9px;border-top:1px solid var(--hair-weak)} .fx-note{font-size:11.5px;color:var(--muted);line-height:1.5} .fx-note b{color:var(--ink)} .dxy{display:flex;align-items:baseline;gap:8px;margin-top:8px} .dxy .n{font-family:var(--fig);font-weight:800;font-size:29px;letter-spacing:-.005em} .dxy .tag2{font-size:8.5px;letter-spacing:.07em;color:var(--q-green);background:var(--green-wash);border-radius:5px;padding:3px 7px} /* ============ AI SECTION ============ */ /* 37/63 was the narrowest copy column on the page carrying the LONGEST headline, and it showed: "actually done the reading." broke to a third line and orphaned a word under the authored two. 46/54 holds both languages' authored lines with 30px spare and hands the chat the same ~600px the five feature vignettes occupy. */ .ai-wrap{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.5vw,64px);align-items:center} /* the one section eyebrow that had never been blue — every other band's is, and .mk would otherwise drop it to --faint and lose the rung entirely */ .ai-copy .kicker{color:var(--blue)} .ai-copy .sec-title{margin-top:12px} .ai-copy .sec-sub{margin-top:14px} /* — chat: replica of the real Mastermind chat surface, in a STAGE WINDOW (§6.6). The head is window chrome, not a banner: a tinted strip on a defined edge, three quiet sockets, the product name in the instrument voice, and — at the far right, where a window puts its status — the honesty tag. Chrome stays grey so the only colour in the bar is the control the user can actually press. — */ .chat{background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r-xl);box-shadow:var(--sh-stage);padding:0;overflow:hidden;height:620px;display:flex;flex-direction:column} .chat-head{flex:none;display:flex;align-items:center;gap:9px;padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--hair-2)} .chat-head .who{display:flex;align-items:center;gap:10px;white-space:nowrap;letter-spacing:.1em;color:var(--ink-soft)} /* three window dots drawn on the single existing — no extra nodes, no assets */ .chat-head .who i{width:34px;height:8px;flex:none;font-style:normal;background: radial-gradient(circle 4px at 4px 50%,var(--hair-strong) 98%,transparent), radial-gradient(circle 4px at 17px 50%,var(--hair-strong) 98%,transparent), radial-gradient(circle 4px at 30px 50%,var(--hair-strong) 98%,transparent)} /* a hairline before it, so the honesty tag reads as the window's status field and not as a third button next to the Flash/Pro control */ .demo-tag{flex:none;color:var(--faint);border-left:1px solid var(--hair-2);padding-left:12px;margin-left:3px} .mseg{margin-left:auto;display:flex;gap:4px;position:relative;background:var(--panel);border:1px solid var(--hair-2);border-radius:99px;padding:3px} .mseg button{letter-spacing:.02em;color:var(--muted);border-radius:99px;padding:4px 11px;white-space:nowrap} .mseg button.on{background:var(--blue);color:#fff} .mpop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:274px;background:#fff;border:1px solid var(--hair-2);border-radius:12px;box-shadow:var(--sh-float);padding:6px 12px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s .2s;text-align:left;cursor:default} .mseg:hover .mpop,.mseg:focus-within .mpop{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)} .mpop .r{display:flex;gap:9px;align-items:flex-start;padding:9px 2px} .mpop .r+.r{border-top:1px solid var(--hair)} .mpop .ic{flex:none;font-size:13px;line-height:1.3} .mpop b{display:block;font-size:12px;color:var(--ink);margin-bottom:2px} .mpop span span{display:block;font-size:11px;color:var(--muted);line-height:1.45;font-weight:400} .mini-cmp{align-self:stretch;background:var(--panel-2);border:1px solid var(--hair);border-radius:10px;padding:9px 12px} .mini-cmp .r{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;padding:5.5px 0;font-size:11.5px} .mini-cmp .tk{font-weight:700} .mini-cmp .bar{height:6px;border-radius:99px;background:var(--hair);overflow:hidden} .mini-cmp .bar i{display:block;height:100%;border-radius:99px;font-style:normal} .mini-cmp .stx{font-size:8.5px;letter-spacing:.05em;border-radius:5px;padding:2.5px 7px;white-space:nowrap} .mini-cmp .stx.g{color:var(--q-green);background:var(--green-wash)} .mini-cmp .stx.y{color:var(--q-gold);background:var(--gold-wash)} .thread{padding:16px;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;transition:opacity .2s;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38px);mask-image:linear-gradient(180deg,transparent 0,#000 38px)} .msg{border-radius:var(--r-lg);padding:11px 14px;font-size:14px;line-height:1.55;max-width:82%;word-break:break-word} .msg.q{background:linear-gradient(180deg,#3f74ff,var(--blue));color:#fff;align-self:flex-end;border-bottom-right-radius:5px;box-shadow:0 8px 22px -10px rgba(40,95,255,.6)} .msg.a{background:var(--panel-2);border:1px solid var(--hair);color:var(--ink-soft);align-self:flex-start;border-bottom-left-radius:5px} .msg.a b{color:var(--ink);font-weight:600} /* the tool line is a receipt of work, not speech — instrument voice, no bubble */ .msg-tool{display:flex;align-items:center;gap:8px;font-weight:400;letter-spacing:.02em;color:var(--muted);padding:1px 4px;align-self:flex-start} .msg-tool::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 7px var(--blue);animation:mtPulse 1.4s ease-in-out infinite;flex:none} @keyframes mtPulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}} .msg-typing{align-self:flex-start;background:var(--panel-2);border:1px solid var(--hair);border-radius:var(--r-lg);border-bottom-left-radius:5px;padding:9px 13px;display:inline-flex;align-items:flex-end;gap:4px} .msg-typing span{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.6;animation:dotBounce 1.3s ease-in-out infinite} .msg-typing span:nth-child(2){animation-delay:.18s} .msg-typing span:nth-child(3){animation-delay:.36s} @keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}} /* the action receipt is a RESULT, so it takes a real chip edge (§5), not a dashed placeholder outline — the Terminal really did open. */ .msg.act{align-self:flex-start;border:1px solid var(--hair-2);background:var(--blue-wash);color:var(--blue-ink);letter-spacing:.03em;padding:8px 12px;border-radius:8px;max-width:max-content} .msg-in{animation:msgIn .28s cubic-bezier(.2,.8,.3,1)} @keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* mini terminal chart drawn inside a bubble */ .mini-term{align-self:stretch;width:100%;background:var(--plate);border-radius:10px;border:1px solid #1b2438;padding:8px;box-shadow:var(--sh-card)} .mini-term svg{width:100%;height:auto;display:block} /* composer */ .composer{flex:none;border-top:1px solid var(--hair-2);padding:12px 14px;display:flex;align-items:center;gap:10px} .composer .cfield{flex:1;background:var(--panel-2);border:1px solid var(--hair-2);border-radius:14px;padding:11px 14px;font-size:13.5px;color:var(--ink-soft);min-height:44px;display:flex;align-items:center} .composer .cfield.ph{color:var(--faint)} .composer .caret{display:inline-block;width:1.5px;height:16px;background:var(--blue);margin-left:1px;animation:caretBlink 1s step-end infinite;vertical-align:middle} @keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}} .composer .send{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#3f74ff,var(--blue));display:grid;place-items:center;color:#fff;box-shadow:0 6px 18px -6px rgba(40,95,255,.65)} .composer .send svg{width:18px;height:18px} .cap-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .cap{font-size:12px;font-weight:600;color:var(--ink-soft);border:1px solid var(--hair-2);background:var(--panel);border-radius:99px;padding:7px 13px;box-shadow:var(--sh-1); transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)} .cap:hover{transform:translateY(-1px);box-shadow:var(--sh-card);border-color:var(--hair-strong)} .cap b{color:var(--blue)} /* ============ PRICING + MATRIX ============ */ .p-head{text-align:center;max-width:640px;margin:0 auto} /* §6.7 a segmented control, not a blue button pair: the track holds both periods, the active one is lifted out of it in white on --sh-1. Blue leaves this row so the only blue above the fold of the pricing block is the Pro card the eye should land on. */ .toggle{display:inline-flex;margin-top:22px;border:1px solid var(--hair-2);border-radius:99px;padding:4px;font-weight:600;font-size:13px;background:var(--panel-2);box-shadow:inset 0 1px 2px rgba(16,24,40,.03)} .toggle button{padding:7px 17px;border-radius:99px;color:var(--muted);transition:color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)} .toggle button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--sh-1)} .toggle .save{letter-spacing:.04em;margin-left:6px;color:var(--q-green)} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .tier{border:1px solid var(--hair-2);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-lift);padding:24px;display:flex;flex-direction:column; transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)} /* §5 hover physics — the tier cards were the last card surface that did not answer the cursor. The card is not itself a link (its CTA is), so it moves exactly one elevation role; the featured card keeps its blue edge instead of the grey one. */ .tier:hover{transform:translateY(-1px);box-shadow:var(--sh-float);border-color:var(--hair-strong)} .tier.hot:hover{box-shadow:var(--sh-stage);border-color:var(--blue)} /* ONE blue stroke, no doubled ring (§6.7): the elevation tier says "featured", the border only draws the edge — a 2px rope around it was the loudest object here. */ .tier.hot{border-color:var(--blue);box-shadow:var(--sh-float);position:relative;background:linear-gradient(150deg,rgba(15,157,143,.055),rgba(40,95,255,.06) 55%,rgba(120,98,224,.05)),var(--panel)} .tiers .tier:last-child{background:linear-gradient(150deg,rgba(120,98,224,.07),rgba(193,47,120,.045) 55%,rgba(176,125,5,.065)),var(--panel)} .tier.hot::before{content:"MOST POPULAR";position:absolute;top:-11px;left:50%;transform:translateX(-50%);letter-spacing:.1em;color:#fff;background:var(--blue);padding:5px 12px;border-radius:99px;box-shadow:var(--sh-2)} html[data-lang="zh"] .tier.hot::before{content:"最受欢迎";letter-spacing:.08em} .tier.hot[data-founding-tier]::before{content:"FOUNDING RATE"} html[data-lang="zh"] .tier.hot[data-founding-tier]::before{content:"创始会员价";letter-spacing:.08em} /* THE HALLMARK — the scarcity word, engraved above the rate plate rather than stamped onto a second one. Two plates would read as a warning sticker; one plate plus one gilt line reads as a maker's mark, which is what a limited allotment IS. It borrows the card's own vocabulary at a different setting: same mono, same caps, but warm ink instead of white-on-blue, .34em tracking against the plate's .1em, and 8px against 9px — related, clearly subordinate. The two hairlines flanking it are the SAME ticks the allotment gauge below rules its channel with, at hallmark scale: the ornament is the unit of measure this card is about. Amber is deepened from --q-gold, which is a figure colour tuned for 10px+ on wash: at 8px on the page ground it clears AA only once it is this dark. */ .tier.hot[data-founding-tier]::after{ content:"LIMITED";position:absolute;top:-27px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-weight:700;font-size:8px;letter-spacing:.34em; /* the tracking hangs a phantom space off the last letter — nudge the text back so the WORD is centred between its ticks, not the box */ text-indent:.34em;padding:0 19px;white-space:nowrap;color:#8a5a00; background: linear-gradient(#c79a3a,#c79a3a) left 50%/11px 1px no-repeat, linear-gradient(#c79a3a,#c79a3a) right 50%/11px 1px no-repeat} html[data-lang="zh"] .tier.hot[data-founding-tier]::after{content:"限量";letter-spacing:.3em} /* …and when the allotment is gone, so is the claim. The offers API flips .price[data-offer-active] to "false" and the card starts selling the regular annual rate; a badge still reading FOUNDING RATE — never mind LIMITED above it — would be advertising something nobody can buy. The whole lockup reverts to the plain featured badge. `:has()` degrades to today's behaviour where unsupported, so this can only make the page more honest, never less. */ .tier.hot[data-founding-tier]:has(.price[data-offer-active="false"])::before{content:"MOST POPULAR"} html[data-lang="zh"] .tier.hot[data-founding-tier]:has(.price[data-offer-active="false"])::before{content:"最受欢迎"} .tier.hot[data-founding-tier]:has(.price[data-offer-active="false"])::after{content:none} .tier h3{margin:0;font-family:var(--display);font-weight:800;font-size:19px} .price{margin-top:12px;font-family:var(--fig);font-weight:800;font-size:41px;letter-spacing:-.005em} .price .per{font-family:'Inter',sans-serif;font-weight:500;font-size:12.5px;color:var(--muted);letter-spacing:0} /* §6.7 THE PRICE LADDER — two dead prices on their own quiet rung, the live one below at full size. Stacked rather than inline: a struck price carrying its own "/mo billed monthly" qualifier cannot sit beside a 41px figure without wrapping into it at 390px, and the drop from rung to price IS the saving, read downward. The strike lands on the NUMERAL only — the qualifier is a label, not a price, and ruling through it makes the row read as one crossed-out sentence. Separator is a hairline tick, not a middot: this page rules its columns, it does not punctuate. */ /* pulled up into the price block's own top margin: the extra rung is real content, so it is never faked into the other two cards as blank space — but it should not drop the featured card's headline figure a full line below its neighbours either. */ .price .wasrow{display:flex;align-items:center;flex-wrap:wrap;gap:2px 9px;margin:-8px 0 2px;line-height:1.2} .price .wasi{display:inline-flex;align-items:baseline;gap:5px} .price .wasi+.wasi{position:relative;padding-left:10px} .price .wasi+.wasi::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--hair-strong)} .price .was{font-family:var(--fig);font-weight:600;font-size:14px;letter-spacing:normal;color:var(--faint); text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(138,149,164,.65)} .price .was-q{font-family:'Inter',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:0;color:var(--faint);text-decoration:none} /* a badge is a badge: shrink to its words. In a flex column it was stretching to the card's full width and reading as a banner. */ .badge{display:inline-block;align-self:flex-start;margin-top:8px;letter-spacing:.05em;color:var(--q-green);background:var(--green-wash);border-radius:6px;padding:4px 9px} .tier .bill{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted)} /* annual has no bill sentence any more — the savings statement below IS the billing line. An emptied

must take no room, or the three cards fall out of rhythm. */ .tier .bill:empty{display:none} /* §6.7 the savings statement — the badge states the money kept, and the arithmetic behind it is one hover (or one Tab) away. Deliberately NOT a title= attribute: this page is bilingual and title= cannot be swapped (house law, CI-guarded). The tooltip body is the matrix's, verbatim — one tooltip idiom on this page, not two. */ .tier .sv{position:relative;margin:7px 0 0;line-height:1} .tier .sv .badge{margin-top:0;display:inline-flex;align-items:center;gap:5px;cursor:help} .tier .sv .badge:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .sv-i{font-family:var(--display);font-weight:400;font-size:11px;line-height:1;opacity:.7;transition:opacity var(--dur-micro) var(--ease-out)} .tier .sv .badge:hover .sv-i,.tier .sv .badge:focus .sv-i{opacity:1} .sv-tip{position:absolute;left:0;bottom:calc(100% + 9px);z-index:60;width:min(272px,calc(100vw - 56px)); background:var(--ink);color:#fff;font-family:'Inter',sans-serif;font-weight:400;font-size:11.5px;line-height:1.5;letter-spacing:0; border-radius:9px;padding:9px 12px;box-shadow:0 12px 30px -12px rgba(18,26,45,.55); opacity:0;visibility:hidden;transform:translateY(3px);pointer-events:none; transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s} /* reveal on plain :focus, not :focus-visible — a tooltip that only answers a mouse is unreadable on touch, where tapping the badge is the only gesture available. The focus RING stays :focus-visible, so a click does not paint an outline. */ .tier .sv .badge:hover~.sv-tip,.tier .sv .badge:focus~.sv-tip{opacity:1;visibility:visible;transform:none; transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)} .founding{margin-top:12px;padding:11px 12px;border:1px solid rgba(40,95,255,.22);border-radius:10px;background:linear-gradient(160deg,rgba(40,95,255,.055),rgba(120,98,224,.05))} .founding[hidden]{display:none} .founding-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;color:var(--muted)} .founding-line b{letter-spacing:.05em;color:var(--ink-soft)} .founding-line .fcount{font-family:var(--fig);font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right} /* the count is the only figure in this block that moves — so it is the only one set like a figure. Its frame ("of 2,000 left") stays a caption around it. */ .founding-line .fcount b{font-family:var(--fig);font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} /* §6.7 SIGNATURE — THE ALLOTMENT GAUGE. A channel ruled into 20 ticks, one per 100 memberships, and the ticks are legible ONLY in the run that is still open: the fill covers them as space is taken, so the length of visible rule IS the space left. That is the whole idea — the ornament is the unit of measure, and it disappears exactly as fast as the thing it counts. One luminous waterline marks where the line stands tonight; the glow rides the fill's own box-shadow so it survives the clip that keeps the sheen inside. Availability framing only — this meter never counts members. The fill width, the aria semantics and the API that feeds them are untouched: paint only. */ .founding-track{position:relative;height:10px;margin-top:9px;border-radius:999px; background-color:var(--hair-weak); background-image: repeating-linear-gradient(90deg,rgba(40,95,255,.30) 0 1px,transparent 1px 5%), linear-gradient(180deg,rgba(16,24,40,.06),rgba(16,24,40,0) 62%); /* the ticks float in the middle band of the channel — a ruler's scale, not the dividing walls of a battery gauge */ background-size:100% 5px,100% 100%; background-position:50% 50%,0 0; background-repeat:no-repeat,no-repeat; box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 2px rgba(16,24,40,.05)} .founding-track[hidden]{display:none} .founding-fill{position:relative;display:block;width:0;height:100%;border-radius:999px;overflow:hidden; background:linear-gradient(90deg,var(--blue-ink),var(--blue) 58%,var(--blue-lit)); /* on a light ground a wide glow reads as a smudge, not as light. The bleed is kept tight and unmistakably blue, so the leading edge looks lit rather than smeared. */ box-shadow:3px 0 7px -2px rgba(40,95,255,.55),0 1px 3px -1px rgba(40,95,255,.4); transition:width .9s var(--ease-emph)} /* the waterline itself — a bright hairline on the leading edge, clipped to the cap */ .founding-fill::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1.5px;background:rgba(255,255,255,.9)} /* ONE travelling highlight, slow and wide enough to read as light crossing glass rather than a loading stripe. It is the only motion this block owns. */ .founding-fill::before{content:"";position:absolute;inset:0; background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%); transform:translateX(-100%);animation:fnd-sheen 4.4s var(--ease-out) 1.1s infinite} @keyframes fnd-sheen{0%{transform:translateX(-100%)}52%,100%{transform:translateX(220%)}} /* the kill block names the pseudo-elements, not just the parent: an animation on a ::before is not stopped by anything said about the element itself. */ @media (prefers-reduced-motion:reduce){ .founding-fill{transition:none} .founding-fill::before{animation:none;display:none} } .founding-terms{margin:9px 0 0;font-size:10px;line-height:1.4;color:var(--muted)} /* §5: the price block and the what-you-get block are different questions — divide them with a hairline, not with air. */ /* WHERE THE SLACK GOES. The founding block makes the Pro card ~180px taller than a three-line Free card, and equal-height columns have to put that difference somewhere. Under a `flex:1` list it pooled directly above the button — a hole at the exact spot that reads as "we ran out of things to say". `margin-top:auto` moves it to the ONE seam where empty space is already the design: between the price story and the hairline that separates it from what you get. Each card's rule + list + button then travel together as one bottom-anchored block, so the three buttons still land on the same line. */ .tier .tf{list-style:none;margin:auto 0 18px;padding:16px 0 0;border-top:1px solid var(--hair-weak);flex:0 0 auto;display:flex;flex-direction:column;gap:9px} .tier .tf li{position:relative;padding-left:21px;font-size:13px;line-height:1.5;color:var(--muted)} .tier .tf li::before{content:"✓";position:absolute;left:1px;top:.05em;font-family:var(--display);font-weight:800;font-size:11px;color:var(--q-green)} .tier .tf li b{color:var(--ink);font-weight:600} .tier .gist{margin:14px 0 18px;font-size:13.5px;color:var(--muted);line-height:1.6;flex:1} .tier .gist b{color:var(--ink);font-weight:600} /* matrix — DOM, rows and labels are pinned by tests; everything here is paint only. */ .matrix-card{margin-top:28px;background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--sh-lift);overflow:auto} .mx-mobile-head{display:none} table.mx{width:100%;border-collapse:collapse;min-width:760px} .mx th,.mx td{padding:10px 16px;text-align:center;font-size:13.5px;border-bottom:1px solid var(--hair-weak)} .mx thead th{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.02em;position:sticky;top:0;background:var(--panel);z-index:2;border-bottom:1px solid var(--hair-2)} .mx thead th small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:11px;color:var(--faint);letter-spacing:0;margin-top:2px} .mx td:first-child,.mx th:first-child{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1;min-width:230px} /* group rows are section labels inside a table — instrument voice, like every other micro-label on the page */ .mx .grp td{letter-spacing:.11em;color:var(--blue);background:var(--panel-2);padding:10px 16px;border-bottom-color:var(--hair)} .mx .ok{color:var(--q-green);font-weight:700;font-size:14px} .mx .no{color:#dc8f8f;font-weight:700;font-size:14px} .mx .val{font-weight:600;color:var(--ink)} .mx .soon{letter-spacing:.07em;color:var(--q-gold);background:var(--gold-wash);border-radius:6px;padding:3px 8px} /* the row you are reading, not the row you are buying: a neutral wash, so hover never mimics the blue that marks the Insider column */ .mx tbody tr:not(.grp):not(.t-ins):not(.t-pro):hover td{background:#fafbfc} .mx tbody tr.t-ins:hover td,.mx tbody tr.t-pro:hover td{box-shadow:inset 0 0 0 100px rgba(40,95,255,.035)} .mx td:nth-child(3){background:rgba(40,95,255,.03)} /* ── tier rows: quiet static wash; the animation lives on the chip, not the row ── */ tr.t-ins td{background:rgba(15,157,143,.04)} tr.t-pro td{background:rgba(120,98,224,.05)} tr.t-ins td:first-child{background:rgba(15,157,143,.04);box-shadow:inset 3px 0 0 0 rgba(15,157,143,.45)} tr.t-pro td:first-child{background:rgba(120,98,224,.05);box-shadow:inset 3px 0 0 0 rgba(120,98,224,.55)} tr.t-ins td:first-child,tr.t-pro td:first-child{position:sticky;left:0} /* hover tooltips: title-only rows, details on demand (bilingual via data-zh) */ .mx td.feat{position:relative} .mx td.feat.has-tip{cursor:help} .mx td.feat.has-tip .ft{border-bottom:1px dotted #bcc6d3} .mx td.feat:hover,.mx td.feat:focus-within{z-index:30} .mx td.feat:focus-visible{outline-offset:-3px} .mx .tipbox{position:absolute;left:16px;top:calc(100% - 4px);z-index:80;width:min(280px,64vw);background:var(--ink);color:#fff;font-size:11.5px;font-weight:400;line-height:1.5;border-radius:9px;padding:9px 12px;box-shadow:0 12px 30px -12px rgba(18,26,45,.55);opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s;pointer-events:none;white-space:normal} .mx .tipbox.up{top:auto;bottom:calc(100% - 4px);transform:translateY(-3px)} .mx td.feat:hover .tipbox,.mx td.feat:focus-within .tipbox{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)} /* tier chip on the aurora row labels */ .mx .feat .mchip{display:inline-block;font-size:8px;letter-spacing:.09em;border-radius:6px;border:1px solid transparent;padding:2px 7px;margin:0 0 0 8px;vertical-align:1px;white-space:nowrap} .mx .feat .mchip.ins{background:linear-gradient(90deg,#e7f3f1,#e9eefc) padding-box,linear-gradient(90deg,rgba(15,157,143,.6),rgba(40,95,255,.55)) border-box} .mx .feat .mchip.pro{background:linear-gradient(90deg,#f0eafb,#f6efdf) padding-box,linear-gradient(90deg,rgba(120,98,224,.65),rgba(176,125,5,.55)) border-box} .mx .feat .mchip.ins{color:#0d7f74} .mx .feat .mchip.pro{color:#6a48d7} /* ============ FINAL + FOOTER ============ */ /* ---- closing band: the page ends the way it opened — on the desk ---- */ /* §6.8 the page ends on the same ground it opened on: the hero's curtain, dark variant, plus the terminal band's arcs. The ::before keeps only the coloured glow — the 46px graph-grid it used to draw is replaced by the shared textures, so the whole page now runs ONE texture library instead of three one-offs. */ .cband{position:relative;background:#04070c;overflow:hidden;text-align:center;padding:clamp(76px,10vw,132px) 0 clamp(60px,7.5vw,96px)} .cband::before{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(48% 44% at 50% 0%,rgba(63,130,246,.17),transparent 72%), radial-gradient(30% 36% at 84% 92%,rgba(124,92,255,.10),transparent 70%), radial-gradient(26% 32% at 12% 86%,rgba(46,189,133,.08),transparent 70%); -webkit-mask-image:radial-gradient(92% 92% at 50% 40%,#000 55%,transparent 100%); mask-image:radial-gradient(92% 92% at 50% 40%,#000 55%,transparent 100%)} .cband .wrap{position:relative;z-index:1} .cband .kicker{color:#e8c34c} .cband h2{color:#fff;margin-bottom:0} .cband .sec-sub{margin:14px auto 0;color:#8e99ad} .cband .btn:not(.primary){color:#dfe6f2;border-color:#2c3646;background:transparent} .cband .btn:not(.primary):hover{border-color:#46536a} .trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin-top:40px} /* dark-tier anatomy (§6.8): the pill is lit from the band, not outlined against it */ .trust span{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);border-radius:99px;padding:8px 16px;font-size:12.5px;color:#a7b1c2} .trust i{width:6px;height:6px;border-radius:50%;font-style:normal;flex:none} /* ---- footer (dark, flows from the band) ---- */ footer{background:#04070c;border-top:1px solid #10161f;padding:56px 0 48px;color:#7a8496;font-size:13px} .f-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .f-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap} .f-brand .fb-row{display:flex;align-items:center;gap:9px} .f-brand .fm{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#3f82f6,#7c5cff);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff} .f-brand .fn{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.08em;color:#dfe6f2} .f-brand .ft{margin:12px 0 0;color:#5f6b7e;font-size:12.5px} .f-cols{display:flex;gap:clamp(32px,6vw,84px)} /* column labels take the instrument voice and step UP in contrast: at 9px/#46536a they were below the legibility floor on this ground. */ .f-col p{margin:0 0 12px;letter-spacing:.1em;color:#66738a;text-transform:uppercase} .f-col a{display:block;color:#8e99ad;padding:6px 0;font-size:13px;transition:color var(--dur-micro) var(--ease-out)} .f-bot{display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap;border-top:1px solid #10161f;margin-top:40px;padding-top:24px;font-size:12px;color:#8e99ad} /* legal links are chrome, not calls to action — they were the only blue in the footer and pulled harder than the product columns above them */ .f-legal a{color:#8e99ad;transition:color var(--dur-micro) var(--ease-out)} .f-col a:hover,.f-legal a:hover{color:#dfe6f2} /* ============ RESPONSIVE ============ */ @media (max-width:1080px){ .cover-in{min-height:0;padding-top:34px} .cov-copy{max-width:640px} .cta-row{justify-content:center} .market-field{height:56%;opacity:.82} .pyr{width:100%;height:auto;margin:clamp(8px,1.4vh,16px) auto 0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 20px;-webkit-overflow-scrolling:touch} .pyr::-webkit-scrollbar{display:none} .pyr::before{display:none} .pcard{position:static;flex:0 0 260px;width:260px;height:320px;padding:13px 15px;opacity:1;transform:none !important;scroll-snap-align:center} .pp3{flex-basis:292px;width:292px} .feat-grid,.feature.flip .feat-grid{grid-template-columns:minmax(0,1fr);gap:26px} .feature.flip .feat-copy{order:0} /* stacked, the vignette is as tall as its contents — a 440px floor would be pure air under a 130px-wide lane strip */ .feat-grid>.rv:not(.feat-copy)>.demo{min-height:0} .filings{align-self:stretch} .lanes{grid-auto-flow:column;grid-auto-columns:130px;grid-template-columns:none;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch} .filings-grid{grid-template-columns:1fr} .ai-wrap{grid-template-columns:1fr} .chat{height:560px} .tiers{grid-template-columns:1fr} /* stacked, the founding card's two-part badge reaches 27px above its own top edge — further than the 16px grid gap. Give that one card the clearance rather than opening the gap under every card. */ .tiers .tier.hot[data-founding-tier]{margin-top:17px} } @media (max-width:900px){ .nav-in{gap:12px} .nav-toggle{display:flex} .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:var(--gutter);right:var(--gutter);max-height:calc(100dvh - 76px);overflow-y:auto;align-items:stretch;flex-direction:column;gap:3px;padding:10px;background:rgba(255,255,255,.98);border:1px solid var(--hair-2);border-radius:0 0 16px 16px;box-shadow:var(--sh-stage);z-index:96} .nav-links.open{display:flex} .nav-group,.nav-direct{width:100%} .nav-trigger,.nav-direct>a{width:100%;min-height:44px;justify-content:space-between;padding:10px 12px} .nav-panel,.nav-panel-research,.nav-panel-resources{position:static;width:auto;margin:2px 0 7px;padding:10px;box-shadow:none;border-radius:12px;background:var(--panel-2)} .nav-panel-head{align-items:flex-start;padding:2px 3px 11px} .nav-panel-head>a{padding-top:2px} .nav-card-grid,.nav-card-grid.two{grid-template-columns:1fr;gap:3px} .nav-card{min-height:58px;padding:10px;background:#fff;border-color:var(--hair)} } @media (max-width:760px){ .market-field{height:52%;opacity:.72;mix-blend-mode:normal} .matrix-card{overflow:visible;border-radius:18px} .mx-mobile-head{display:block;position:sticky;top:64px;z-index:35;padding:12px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--hair-2);border-radius:18px 18px 0 0;box-shadow:var(--sh-2);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)} .mx-mobile-label{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .mx-plan-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;background:var(--panel-2);border:1px solid var(--hair);border-radius:12px} .mx-plan-tabs button{min-width:0;min-height:46px;border:1px solid transparent;border-radius:9px;padding:6px 5px;color:var(--muted);transition:background .16s,color .16s,box-shadow .16s,border-color .16s} .mx-plan-tabs button span{display:block;font-family:var(--display);font-size:12.5px;font-weight:800;line-height:1.15} .mx-plan-tabs button small{display:block;margin-top:2px;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mx-plan-tabs button[aria-pressed="true"]{background:#fff;border-color:var(--hair-2);color:var(--blue);box-shadow:var(--sh-card)} .mx-mobile-hint{margin:8px 2px 0;color:var(--faint);font-size:11px;line-height:1.35} table.mx{min-width:0;table-layout:fixed} .mx th,.mx td{padding:11px 12px} .mx th:first-child,.mx td:first-child{position:static;left:auto;min-width:0;width:68%;text-align:left} .mx thead th{position:static;top:auto;font-size:12px;vertical-align:top} .mx thead th:first-child{color:var(--muted);font-size:11px;font-weight:600} .mx thead th small{font-size:9.5px;line-height:1.25} .mx th:nth-child(n+2),.mx td:nth-child(n+2){display:none} .matrix-card[data-plan="free"] .mx th:nth-child(2),.matrix-card[data-plan="free"] .mx td:nth-child(2), .matrix-card[data-plan="insider"] .mx th:nth-child(3),.matrix-card[data-plan="insider"] .mx td:nth-child(3), .matrix-card[data-plan="pro"] .mx th:nth-child(4),.matrix-card[data-plan="pro"] .mx td:nth-child(4){display:table-cell;width:32%} .mx .grp td{display:table-cell !important;width:auto !important;padding:10px 12px} .mx .ok{font-size:16px} .mx .val{font-size:12px;line-height:1.25} .mx .soon{display:inline-block;font-size:8.5px;padding:4px 6px;line-height:1.2} .mx .feat .mchip{margin-left:6px;padding:2px 5px;font-size:7.5px} .mx td.feat.has-tip{cursor:pointer} .mx td.feat.has-tip .ft::after{content:" ⓘ";color:var(--blue);font-size:10px;text-decoration:none} .mx td.feat.has-tip .tipbox{position:static;display:block;width:100%;max-height:0;margin:0;padding:0;background:transparent;color:var(--muted);border:0;border-radius:0;box-shadow:none;font-size:11.5px;line-height:1.45;opacity:0;visibility:hidden;overflow:hidden;transform:none;transition:max-height .22s ease,opacity .16s ease,margin .22s ease,visibility 0s .22s} .mx td.feat.has-tip.tip-open .tipbox{max-height:96px;margin-top:7px;opacity:1;visibility:visible;transition:max-height .22s ease,opacity .16s ease,margin .22s ease} .mx td.feat:hover,.mx td.feat:focus-within{z-index:auto} .mx td.feat:hover .tipbox,.mx td.feat:focus-within .tipbox{opacity:0;visibility:hidden} .mx td.feat.has-tip.tip-open .tipbox{opacity:1;visibility:visible} } @media (max-width:680px){ .nav-right>a:not(.btn):not(.gearbtn){display:none} .nav-right{gap:10px} .tri3{grid-template-columns:1fr} .demo{padding:13px} /* 318px of chrome cannot hold all four: the dots come off (decoration goes first) and the honesty tag takes its own right-aligned line rather than being clipped by the window's overflow:hidden — a cut-off "SCRIPTED DEM" discloses nothing. */ .chat-head{flex-wrap:wrap;gap:8px;padding:11px 12px} .chat-head .who i{display:none} .demo-tag{margin:1px 0 0 auto;padding-left:0;border-left:0} #pricing.section-pad{padding-block:56px} .p-head .toggle{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:360px} .toggle button{min-height:44px;padding:8px 10px} .toggle .save{display:block;margin:2px 0 0;font-size:8.5px} .tiers{gap:18px;margin-top:32px} .tier{padding:22px 20px;border-radius:18px} .tier .gist{margin:12px 0 17px} .tier .tf{margin:auto 0 17px;gap:8px} .tier .btn{min-height:48px} .price{font-size:37px} .matrix-card{margin-top:30px} } @media (max-width:430px){ .brand{gap:0;font-size:0} .brand .m{font-size:14px} /* One notch of tracking off the h2s, here only: at the 30px floor the two longest heads sat ~11px from a re-wrap, and 375px devices already broke them onto a third line. -.024em buys ~5px at 390 and recovers both at 375. ZH is left alone by specificity, on purpose — CJK does not want its counters closed. */ .sec-title,.feat-title,.cband h2{letter-spacing:-.024em} } @media (max-width:360px){ .nav-in{gap:8px} .nav-right{gap:8px} .nav-right .btn{padding-inline:12px;white-space:nowrap} }