/* /mac/: a product page in the manner of Apple's own, in light and dark.
   The app's windows are drawn in HTML (templates/screens.php) at 1280×760
   and scaled to fit; single pieces lift out of them as the page scrolls.
   Builds on mac.css for fonts, buttons, the masthead and the footer. */

/* Page ----------------------------------------------------------------- */
:root {
	--page: #fbfbfd;
	--ink: #1d1d1f;
	--quiet: #6e6e73;
	--soft: #424245;
	--rule: #d2d2d7;
	--tile: #f5f5f7;
	--card: #f5f5f7;
	--hero-top: #1d1d1f;
	--hero-bottom: #6e6e73;
	--lift: 0 40px 90px -30px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
	--window-shadow: 0 50px 100px -40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.1);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--page: #000;
		--ink: #f5f5f7;
		--quiet: #86868b;
		--soft: #a1a1a6;
		--rule: #2a2a2d;
		--tile: #111113;
		--card: #111113;
		--hero-top: #ffffff;
		--hero-bottom: #aab2c4;
		--lift: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1);
		--window-shadow: 0 60px 140px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.1);
	}
}
:root[data-theme="dark"] {
	--page: #000;
	--ink: #f5f5f7;
	--quiet: #86868b;
	--soft: #a1a1a6;
	--rule: #2a2a2d;
	--tile: #111113;
	--card: #111113;
	--hero-top: #ffffff;
	--hero-bottom: #aab2c4;
	--lift: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1);
	--window-shadow: 0 60px 140px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.1);
}

body { background: var(--page); color: var(--ink); overflow-x: clip; }
.top, .foot { color: var(--quiet); }
.home h2 { margin: 0; font-family: var(--data); font-variation-settings: "wdth" 112; font-weight: 760; font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.kicker { margin: 0 0 14px; font-size: 19px; font-weight: 600; color: var(--crimson); }

/* Hero: the one place the gradient type lives */
.opener { text-align: center; padding: 48px 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 19px; font-weight: 600; color: var(--soft); animation: rise .9s .05s var(--settle) both; }
.eyebrow img { width: 44px; height: 44px; }
.opener h1 {
	margin: 0 auto;
	font-family: var(--data); font-variation-settings: "wdth" 125; font-weight: 820;
	font-size: clamp(48px, 8vw, 128px); line-height: .94; letter-spacing: -.04em;
}
.opener h1 span {
	display: block;
	background: linear-gradient(180deg, var(--hero-top) 35%, var(--hero-bottom));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: rise 1.1s .1s var(--settle) both;
}
.opener h1 span + span { animation-delay: .18s; }
.lede { max-width: 30em; margin: 28px auto 32px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; font-weight: 500; color: var(--soft); text-wrap: balance; animation: rise 1s .28s var(--settle) both; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; animation: rise 1s .36s var(--settle) both; }
.opener .cta { flex-direction: column; }
.facts { margin: 0; font-size: 14px; color: var(--quiet); }

/* A drawn window, scaled to its frame */
.fit { --k: .8; position: relative; width: min(1180px, calc(100vw - 48px)); aspect-ratio: 1280 / 760; margin: 0 auto; }
.fit > .app-window { position: absolute; left: 0; top: 0; width: 1280px; height: 760px; transform-origin: 0 0; transform: scale(var(--k)); }

/* The hero window: starts larger than its frame, settles into place */
.zoom { position: relative; height: 210vh; margin-top: 40px; }
.zoom .fit, .stage { --p: 0; }
.zoom-stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.zoom .fit { transform: scale(calc(1.24 - .24 * var(--p))); transform-origin: 50% 40%; will-change: transform; }

/* Highlights: a reel of single pieces, played on its own */
.highlights { padding: 40px 0 120px; }
.highlights h2 { margin-bottom: 44px; }
.reel {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 900px); gap: 24px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
	padding: 0 max(32px, calc((100vw - var(--measure)) / 2 + 32px));
	scroll-padding-inline: max(32px, calc((100vw - var(--measure)) / 2 + 32px));
}
.reel::-webkit-scrollbar { display: none; }
.card { margin: 0; scroll-snap-align: start; min-height: calc(min(82vw, 900px) * .625); border-radius: 28px; clip-path: inset(0 round 28px); background: var(--card); display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.card > p { margin: 0; padding: 36px 40px 0; max-width: 30em; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.35; font-weight: 600; color: var(--quiet); }
.card > p b { color: var(--ink); font-weight: 600; }
.card-piece { display: grid; place-items: center; padding: 24px 24px 40px; zoom: 1.1; }
.card-piece > * { transform: translateY(18px) scale(.97); opacity: .4; transition: transform 1.1s var(--settle), opacity .9s var(--settle); box-shadow: var(--lift); }
.card.on .card-piece > * { transform: none; opacity: 1; }
.reel-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.reel-dots { display: flex; gap: 16px; padding: 6px 18px; border-radius: 999px; background: var(--tile); }
.reel-dots button { position: relative; width: 8px; height: 24px; padding: 0; border: 0; background: none; opacity: .6; cursor: pointer; transition: width .5s var(--settle), opacity .3s ease; }
.reel-dots button::before { content: ""; position: absolute; inset: 8px 0; border-radius: 999px; background: var(--quiet); }
.reel-dots button.on { width: 44px; opacity: 1; }
.reel-dots button.on::before { background: var(--ink); }
.reel-play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tile); cursor: pointer; display: grid; place-items: center; }
.reel-play span { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); box-sizing: border-box; }
.reel-play.paused span { width: 0; height: 0; border: 0; border-left: 10px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }

/* Statement: one sentence that lights up as it's read */
.statement { height: 220vh; }
.statement-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.statement p { margin: 0 auto; font-family: var(--data); font-variation-settings: "wdth" 108; font-weight: 700; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink); }
.statement span { opacity: .16; }

/* Features: the window steps back, one piece of it lifts out */
.feature { padding: 140px 0 40px; }
.feature-copy h2 { max-width: 13em; }
.feature-copy > p:not(.kicker) { margin: 24px 0 0; max-width: 34em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--quiet); }
.stage { margin-top: 64px; padding-bottom: 40px; }
.stage .app-window { opacity: calc(1 - .38 * var(--p)); will-change: opacity; }
.pull {
	position: absolute; z-index: 2; transform-origin: 50% 50%;
	transform: translate3d(-50%, -50%, 0) translateY(calc((1 - var(--p)) * 48px)) scale(calc(var(--k) * (1.02 + .2 * var(--p))));
	opacity: calc(var(--p) * 1.4); box-shadow: var(--lift); border-radius: 18px; will-change: transform, opacity;
}
.pull-wire { left: 46%; top: 42%; }
.pull-scoops { left: 70%; top: 60%; }
.pull-backend { left: 74%; top: 46%; }
.pull-markets { left: 66%; top: 34%; }

/* And so much more */
.more { padding: 160px 0 120px; }
.more h2 { margin-bottom: 48px; }
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile-card { padding: 34px 32px 36px; border-radius: 28px; background: var(--tile); min-height: 240px; display: flex; flex-direction: column; }
.tile-card.wide { grid-column: span 2; }
.tile-card .icon { width: 34px; height: 34px; color: var(--crimson); margin-bottom: auto; }
.tile-card h3 { margin: 40px 0 8px; font-size: 24px; font-weight: 650; letter-spacing: -.015em; }
.tile-card p { margin: 0; color: var(--quiet); font-size: 17px; line-height: 1.45; max-width: 26em; }

/* Privacy and the final call */
.privacy { padding: 140px 0; text-align: center; }
.privacy h2 { font-variation-settings: "wdth" 125; font-weight: 820; font-size: clamp(44px, 7vw, 108px); line-height: .95; letter-spacing: -.04em; }
.privacy h2 span { display: block; }
.privacy p:not(.kicker) { max-width: 32em; margin: 32px auto 0; font-size: clamp(19px, 1.6vw, 22px); color: var(--quiet); }
.final { padding: 120px 0 100px; text-align: center; border-top: 1px solid var(--rule); }
.final img { width: 112px; height: 112px; margin: 0 auto 28px; }
.final h2 { font-variation-settings: "wdth" 125; font-weight: 820; letter-spacing: -.04em; }
.final > .wrap > p { margin: 18px auto 0; font-size: 21px; color: var(--quiet); }
.final .cta { margin-top: 36px; animation: none; }
.final .facts { margin-top: 28px; font-size: 13px; }
.final .marks { margin-top: 10px; font-size: 12px; }
.text-link { font-size: 17px; font-weight: 500; color: var(--crimson); text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.motion .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--settle), transform 1.2s var(--settle); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .bento .reveal:nth-child(3n+2) { transition-delay: .08s; }
.motion .bento .reveal:nth-child(3n) { transition-delay: .16s; }

/* A picture per appearance */
:root .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .on-light { display: none; }
	:root:not([data-theme="light"]) .on-dark { display: block; }
}
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }

/* The app, drawn ----------------------------------------------------------- */
.app-window, .app {
	--a-canvas: #f3f1ec; --a-surface: #fff; --a-side: #ebe8e2; --a-raised: #f4f2ee; --a-line: #e2ded6;
	--a-text: #111; --a-sec: #57534c; --a-ter: #6c6860; --a-accent: #b23540; --a-sel: rgba(0,0,0,.05);
	--a-up: #1e8e55; --a-down: #c8423b; --a-up-bg: rgba(30,142,85,.12); --a-down-bg: rgba(200,66,59,.12);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); color: var(--a-text); text-align: left; letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .app-window, :root:not([data-theme="light"]) .app {
		--a-canvas: #0c0c0e; --a-surface: #161618; --a-side: #121214; --a-raised: #1e1e21; --a-line: #242428;
		--a-text: #f3f1ec; --a-sec: #a29e96; --a-ter: #8f8b84; --a-accent: #ec7483; --a-sel: rgba(255,255,255,.06);
		--a-up: #4fd18b; --a-down: #ff6b6b; --a-up-bg: rgba(79,209,139,.14); --a-down-bg: rgba(255,107,107,.14);
	}
}
:root[data-theme="dark"] .app-window, :root[data-theme="dark"] .app {
	--a-canvas: #0c0c0e; --a-surface: #161618; --a-side: #121214; --a-raised: #1e1e21; --a-line: #242428;
	--a-text: #f3f1ec; --a-sec: #a29e96; --a-ter: #8f8b84; --a-accent: #ec7483; --a-sel: rgba(255,255,255,.06);
	--a-up: #4fd18b; --a-down: #ff6b6b; --a-up-bg: rgba(79,209,139,.14); --a-down-bg: rgba(255,107,107,.14);
}

.app-window p, .app p, .app-window h4, .app h4 { margin: 0; }
.app-window { border-radius: 14px; overflow: hidden; box-shadow: var(--window-shadow); background: var(--a-canvas); }
.app-canvas { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; font-size: 13px; }
.mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--mark); color: #fff; font: 700 11px/1 -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; flex: none; }
img.mark { object-fit: cover; background: #fff; }
.mark.xs { width: 15px; height: 15px; font-size: 8.5px; border-radius: 4px; }
.mark.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.stack { display: inline-flex; margin-right: 6px; }
.stack .mark + .mark { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--a-surface); }

.app-side { display: flex; flex-direction: column; gap: 1px; padding: 14px 12px; background: var(--a-side); border-right: 1px solid var(--a-line); }
.lights { display: flex; gap: 8px; margin: 2px 4px 18px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.wordmark { margin: 0 6px 4px; height: 24px; }
.wordmark img { height: 24px; width: auto; }
.side-clock { margin: 0 6px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a-sec); }
.side-clock b { color: var(--a-accent); }
.side-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13.5px; color: var(--a-text); }
.side-item.on { background: var(--a-sel); font-weight: 600; box-shadow: inset 2px 0 0 var(--a-accent); }
.side-item em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--a-sec); font-variant-numeric: tabular-nums; }
.side-item em.up { color: var(--a-up); }
.side-item em.hot { color: var(--a-accent); }
.side-item em.down { color: var(--a-down); }
.glyph { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--a-sec); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side-item.on .glyph { stroke: var(--a-accent); }
.side-head { margin: 14px 8px 4px; font-size: 11px; font-weight: 600; color: var(--a-ter); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11px; color: var(--a-ter); }
.side-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-up); }

.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--a-canvas); }
.bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-sec); }
.bar > b { font-size: 16px; color: var(--a-text); }
.seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 8px; background: var(--a-sel); }
.seg > * { padding: 4px 11px; border-radius: 6px; font-size: 12px; }
.seg b { background: var(--a-surface); color: var(--a-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.search { width: 210px; padding: 6px 10px; border-radius: 7px; background: var(--a-sel); color: var(--a-ter); }
.split { display: grid; flex: 1; min-height: 0; }
.wire-split { grid-template-columns: 430px minmax(0, 1fr); }
.scoops-split { grid-template-columns: 470px minmax(0, 1fr); }
.backend-split { grid-template-columns: 560px minmax(0, 1fr); }
.list { padding: 10px 12px; border-right: 1px solid var(--a-line); overflow: hidden; }
.chips { display: flex; gap: 6px; margin: 2px 4px 10px; }
.chips > * { padding: 4px 10px; border-radius: 999px; background: var(--a-sel); color: var(--a-sec); font-size: 12px; }
.chips b { background: var(--a-accent); color: #fff; }
.list-head { margin: 4px 6px 6px !important; font-size: 11.5px; font-weight: 600; color: var(--a-ter); }
.row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border-radius: 9px; }
.row.on { background: var(--a-surface); box-shadow: inset 3px 0 0 var(--a-accent), 0 1px 3px rgba(0,0,0,.06); }
.row time { font: 500 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--a-sec); }
.row-title { font-size: 13.5px; font-weight: 600; line-height: 1.32; }
.row-title.dim { font-weight: 400; color: var(--a-sec); }
.row-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--a-sec); }
.row-meta b { color: var(--a-text); font-weight: 600; }
.tag { margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; background: rgba(240,160,40,.16); color: #b26b00; }
.tag.on-the-record { background: var(--a-up-bg); color: var(--a-up); }
.tag.report { background: rgba(70,120,230,.14); color: #3a6fd8; }
.row.race { grid-template-columns: minmax(0, 1fr) auto; }
.row.race .row-meta { margin: 0 0 4px; }
.lead { text-align: right; font-weight: 700; font-size: 14px; color: var(--a-accent); white-space: nowrap; }
.lead small { display: block; font-size: 10.5px; font-weight: 500; color: var(--a-ter); }
.row.log { grid-template-columns: 70px minmax(0, 1fr); }
.row.log .row-meta { margin: 0 0 3px; }

.reader { padding: 22px 26px; overflow: hidden; }
.reader-kicker { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--a-sec); }
.reader h4 { margin: 10px 0 8px; font-size: 25px; line-height: 1.15; font-weight: 750; letter-spacing: -.01em; }
.byline { font-size: 12.5px; color: var(--a-sec); }
.reader-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; margin: 18px 0; font-size: 14.5px; line-height: 1.55; }
.art { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1200 / 630; border-radius: 10px; background: radial-gradient(circle at 30% 30%, #f7d9a8, transparent 55%), radial-gradient(circle at 75% 70%, #9fc3f2, transparent 55%), linear-gradient(135deg, #e9e4dc, #cfd8e3); min-height: 130px; }
.facts-row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-surface); }
.facts-row > div { padding: 12px 14px; display: grid; gap: 3px; }
.facts-row > div + div { border-left: 1px solid var(--a-line); }
.facts-row small { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--a-ter); }
.facts-row b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.facts-row span { font-size: 11.5px; color: var(--a-sec); }

.season { padding: 14px 22px 12px; border-bottom: 1px solid var(--a-line); }
.season p { font-size: 12px; color: var(--a-sec); }
.season p b { color: var(--a-text); margin-right: 6px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 10px; }
.bars i { flex: 1; height: calc(var(--h) * 3.6px); border-radius: 2px; background: var(--a-accent); opacity: .85; }

/* Pieces that lift out: they read as small panels of the app */
.cluster, .chain, .change, .move, .alert, .tiles { background: var(--a-surface); border-radius: 18px; }
.cluster { width: 420px; padding: 20px 22px; }
.cluster-title { font-size: 17px; font-weight: 650; line-height: 1.3; }
.cluster-meta { display: flex; align-items: center; margin-top: 12px !important; font-size: 13px; color: var(--a-sec); }
.cluster-first { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--a-line); font-size: 13px; }
.cluster-first span { font-weight: 700; color: var(--a-accent); }
.chain { width: 380px; padding: 18px 20px 16px; }
.reader .chain { width: auto; margin-top: 22px; border: 1px solid var(--a-line); }
.chain-title { font-size: 13px; font-weight: 700; margin-bottom: 8px !important; }
.link { position: relative; display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.link .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--a-ter); background: var(--a-surface); z-index: 1; }
.link.first .dot { background: var(--a-accent); border-color: var(--a-accent); }
.link + .link::before { content: ""; position: absolute; left: 5.5px; top: -12px; height: 24px; width: 2px; background: var(--a-line); }
.link time { font-size: 12px; color: var(--a-sec); font-variant-numeric: tabular-nums; }
.link span { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--a-sec); }
.link.first span { color: var(--a-accent); }
.chain-more { margin-top: 4px !important; padding-left: 24px; font-size: 12px; color: var(--a-ter); }
.change { width: 430px; padding: 20px 22px; }
.reader .change { width: auto; padding: 0; background: none; }
.change h4 { margin: 8px 0 14px; font-size: 22px; }
.change dl { margin: 0 0 14px; display: grid; gap: 6px; font-size: 13px; }
.change dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); }
.change dt { color: var(--a-sec); }
.change dd { margin: 0; }
.diff { display: grid; border-radius: 9px; overflow: hidden; font: 500 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.diff span { padding: 6px 12px; }
.diff .out { background: var(--a-down-bg); color: var(--a-down); }
.diff .in { background: var(--a-up-bg); color: var(--a-up); }
.buttons { display: flex; gap: 8px; margin-top: 14px !important; }
.buttons > * { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--a-line); }
.buttons b { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }

.markets { padding: 16px 22px; display: grid; gap: 18px; }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; background: none; }
.card-piece .tiles, .pull .tiles { width: 440px; padding: 16px; background: var(--a-surface); }
.tile { display: grid; gap: 2px; width: 120px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.tile b { font-size: 13.5px; }
.heat-p1 { background: #5c9e7d; } .heat-p2 { background: #3f9a6c; } .heat-p3 { background: #26915a; }
.heat-m1 { background: #b9727a; } .heat-m2 { background: #b54a57; }
.quote-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: end; padding: 18px; border-radius: 14px; background: var(--a-surface); border: 1px solid var(--a-line); }
.q-name { font-size: 15px; color: var(--a-sec); }
.q-name b { display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 5px; background: var(--a-accent); color: #fff; font-size: 12px; }
.price { white-space: nowrap; margin-top: 8px !important; font-size: 52px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price span { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 8px; font-size: 16px; vertical-align: middle; background: var(--a-up-bg); color: var(--a-up); }
.chart { width: 100%; height: 300px; }
.chart .line { fill: none; stroke: var(--a-up); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart .area { fill: var(--a-up-bg); }
.chart.down .line { stroke: var(--a-down); }
.chart.down .area { fill: var(--a-down-bg); }
.price span.down { background: var(--a-down-bg); color: var(--a-down); }
.move-head b.down { color: var(--a-down); }
.over { padding: 4px 6px; }
.over .row { grid-template-columns: 70px minmax(0, 1fr); }
.chart .mark { stroke: var(--a-accent); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.move { width: 400px; padding: 18px 20px; }
.move-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--a-sec); }
.move-head b { font-size: 22px; color: var(--a-up); }
.move-head time { margin-left: auto; font-size: 12px; }
.move-story { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--a-line); }
.move-story span { display: grid; gap: 3px; font-size: 12.5px; color: var(--a-sec); }
.move-story b { font-size: 14.5px; color: var(--a-text); line-height: 1.3; }
.alert { display: flex; gap: 12px; width: 360px; padding: 14px 16px; border-radius: 20px; background: color-mix(in srgb, var(--a-surface) 82%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.alert img { flex: none; border-radius: 8px; }
.alert-head { display: flex; justify-content: space-between; font-size: 12.5px; }
.alert-head time { color: var(--a-ter); }
.alert p + p { margin-top: 1px; font-size: 13px; }
.alert p:last-child { color: var(--a-sec); }

@media (max-width: 900px) {
	.zoom { height: 150vh; }
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature { padding-top: 100px; }
	.card > p { padding: 28px 28px 0; }
	.card-piece > * { zoom: .8; }
}
@media (max-width: 680px) {
	.zoom { height: 150vh; margin-top: 32px; }
	.zoom .fit { width: calc(100vw - 32px); transform: scale(calc(2 - .6 * var(--p))); transform-origin: 32% 35%; }
	.statement { height: 170vh; }
	.reel { grid-auto-columns: 86vw; gap: 14px; padding: 0 20px; scroll-padding-inline: 20px; }
	.card { min-height: calc(86vw * 1.25); border-radius: 22px; clip-path: inset(0 round 22px); }
	.card-piece { zoom: 1; padding: 16px; }
	.card-piece > * { zoom: .68; }
	.stage { overflow: hidden; margin-top: 40px; padding: 24px 0 48px; }
	.stage .fit { width: 175vw; margin-left: calc(50% - 87.5vw); }
	.pull { left: 50% !important; top: 50% !important; }
	.bento { grid-template-columns: minmax(0, 1fr); }
	.tile-card.wide { grid-column: auto; }
	.tile-card { min-height: 0; }
	.more, .privacy { padding: 100px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.zoom { height: auto; margin-top: 56px; }
	.zoom-stage { position: static; height: auto; }
	.zoom .fit { transform: none; }
	.statement { height: auto; }
	.statement-stage { position: static; height: auto; padding: 120px 0; }
	.statement span { opacity: 1 !important; }
	.stage { --p: 1 !important; }
}
@media (max-width: 680px) {
	.pull { transform: translate3d(-50%, -50%, 0) translateY(calc((1 - var(--p)) * 36px)) scale(calc(var(--k) * (1.15 + .15 * var(--p)))); }
}

/* Release page ------------------------------------------------------------- */
.rel-opener { padding-bottom: 40px; }
.rel-opener h1 { font-size: clamp(72px, 13vw, 200px); }
.rel-version { margin: 18px 0 0; font-size: 17px; font-weight: 600; color: var(--quiet); animation: rise 1s .24s var(--settle) both; }
.get-card { margin: 56px auto 0; max-width: 960px; padding: 28px 32px; border-radius: 28px; background: var(--tile); text-align: left; }
.get-app { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.get-app img { width: 88px; height: 88px; }
.get-app > div { flex: 1; min-width: 180px; }
.get-name { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.get-sub { margin: 2px 0 0; color: var(--quiet); }
.get-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); }
.get-facts li { display: grid; gap: 2px; }
.get-facts b { font-size: 17px; font-weight: 650; }
.get-facts span { font-size: 13.5px; color: var(--quiet); }
.get-card .checksum { margin: 18px 0 0; font-size: 12px; color: var(--quiet); overflow-wrap: anywhere; }
.get-card .checksum code { font: 500 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--soft); }

.rel-new { padding: 140px 0 40px; }
.shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 64px; align-items: start; }
.shot { margin: 0; padding: 48px 40px 36px; border-radius: 32px; background: var(--tile); }
.shot img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: var(--lift); }
.shot figcaption { margin: 28px auto 0; max-width: 30em; font-size: 17px; color: var(--quiet); text-align: center; }
.motion .shot.reveal img { transform: translateY(30px) scale(.96); transition: transform 1.3s var(--settle); }
.motion .shot.reveal.in img { transform: none; }
.motion .shots .shot:nth-child(2) { transition-delay: .12s; }

.rel-install { padding: 140px 0 40px; }
.rel-install h2, .rel-after > .wrap > h2 { margin-bottom: 48px; }
.moves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: move; }
.move-card { padding: 0 0 30px; border-radius: 28px; background: var(--tile); overflow: hidden; counter-increment: move; }
.move-card h3, .after-card h3 { margin: 26px 30px 6px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.move-card h3::before { content: counter(move) "  "; color: var(--crimson); white-space: pre; }
.move-card p, .after-card p { margin: 0 30px; color: var(--quiet); font-size: 16px; line-height: 1.5; }
.mini { display: grid; place-items: center; height: 200px; padding: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 10%, transparent), transparent); }
.dl { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 300px; padding: 14px 16px; border-radius: 14px; background: var(--a-surface); box-shadow: var(--lift); }
.dl > div { flex: 1; display: grid; gap: 6px; min-width: 0; }
.dl b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl i { height: 4px; border-radius: 4px; background: var(--a-sel); overflow: hidden; }
.dl em { display: block; height: 100%; width: 100%; background: #0a84ff; border-radius: 4px; transform-origin: left; }
.dl span { font-size: 11px; color: var(--a-sec); }
.motion .move-card.reveal .dl em { transform: scaleX(0); transition: transform 1.8s var(--settle) .3s; }
.motion .move-card.reveal.in .dl em { transform: none; }
.dmg { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 300px; padding: 26px 22px 18px; border-radius: 14px; background: var(--a-surface); box-shadow: var(--lift); }
.dmg-app, .dmg-folder { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--a-sec); }
.dmg-folder i { width: 64px; height: 50px; border-radius: 6px; background: linear-gradient(180deg, #7ec0f7, #3d8fe0); position: relative; margin-top: 6px; }
.dmg-folder i::before { content: ""; position: absolute; left: 0; top: -6px; width: 26px; height: 10px; border-radius: 4px 4px 0 0; background: #7ec0f7; }
.dmg-arrow { flex: 1; height: 2px; margin: 0 12px 18px; background: repeating-linear-gradient(90deg, var(--a-ter) 0 6px, transparent 6px 11px); position: relative; }
.dmg-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 8px solid var(--a-ter); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.dmg-ghost { position: absolute; left: 22px; top: 26px; opacity: 0; }
.motion .move-card.reveal.in .dmg-ghost { animation: carry 3.2s var(--settle) .6s infinite; }
@keyframes carry { 0% { opacity: 0; transform: none; } 15% { opacity: .85; transform: translate(0, -6px) scale(1.06); } 70% { opacity: .85; transform: translate(196px, 2px) scale(.9); } 85%, 100% { opacity: 0; transform: translate(196px, 2px) scale(.9); } }
.hello { display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 280px; padding: 18px 18px 16px; border-radius: 14px; background: var(--a-surface); box-shadow: var(--lift); text-align: center; }
.hello b { font-size: 14px; }
.hello span { font-size: 11.5px; color: var(--a-sec); line-height: 1.4; }
.hello em { margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: var(--a-accent); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }

.rel-all { padding: 140px 0 40px; }
.group-title { margin: 56px 0 16px; font-size: 21px; font-weight: 650; }
.notes-bento .tile-card { min-height: 0; }
.notes-bento .tile-card .icon { margin-bottom: 22px; }
.notes-bento .tile-card p { color: var(--quiet); }
.notes-bento .tile-card strong { color: var(--ink); font-weight: 650; }

.rel-after { padding: 140px 0 60px; }
.after-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.after-card { padding: 0 0 32px; border-radius: 28px; background: var(--tile); overflow: hidden; }
.pill-update { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--lift); }
.pill-update i { width: 22px; height: 22px; border-radius: 50%; background: var(--a-accent); position: relative; flex: none; }
.pill-update i::after { content: ""; position: absolute; inset: 6px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; }
.pill-update span { flex: 1; display: grid; font-size: 11px; color: var(--a-sec); }
.pill-update b { font-size: 12.5px; color: var(--a-text); }
.pill-update em { padding: 4px 10px; border-radius: 7px; background: var(--a-accent); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }
.motion .after-card.reveal.in .pill-update { animation: nudge 2.6s ease-in-out 1s infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px); } 90% { transform: none; } }
.pill-kinds { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--lift); font-size: 12.5px; }
.pill-kinds > * { padding: 6px 14px; border-radius: 7px; color: var(--a-sec); font-weight: 500; }
.pill-kinds b { background: var(--a-raised); color: var(--a-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.known-list { margin-top: 48px; padding: 30px 32px; border-radius: 28px; border: 1px solid var(--rule); }
.known-list h3 { margin: 0 0 12px; font-size: 19px; }
.known-list ul { margin: 0; padding-left: 1.1em; color: var(--quiet); }
.known-list li { margin: 6px 0; }
.known-list li::marker { color: var(--crimson); }

@media (max-width: 900px) {
	.get-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.shots, .after-grid, .moves { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
	.get-card { padding: 22px 20px; }
	.shot { padding: 28px 18px 24px; border-radius: 24px; }
	.rel-new, .rel-install, .rel-all, .rel-after { padding-top: 96px; }
}

.cluster-art, .change-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; margin-bottom: 14px; background: #fff; }
.reader .change-art { display: none; }

/* Fuller windows: coverage, timelines, market panels */
.sub-head { margin: 22px 0 8px !important; font-size: 12px; font-weight: 700; color: var(--a-sec); }
.coverage { display: grid; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-surface); }
.coverage p { display: grid; grid-template-columns: 16px 92px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 12px; font-size: 12.5px; }
.coverage p + p { border-top: 1px solid var(--a-line); }
.coverage b { font-weight: 650; }
.coverage span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-sec); }
.coverage time { font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--a-ter); }
.timeline { display: grid; gap: 0; }
.timeline p { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--a-line); }
.timeline time { font-weight: 700; color: var(--a-accent); }
.diff.all span { padding: 5px 12px; }
.market-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.panels { display: grid; gap: 14px; align-content: start; }
.panel { padding: 14px 16px; border-radius: 12px; background: var(--a-surface); border: 1px solid var(--a-line); }
.panel-title { font-size: 13px; font-weight: 700; margin-bottom: 8px !important; }
.panel dl { margin: 0; display: grid; gap: 6px; }
.panel dl div { display: flex; justify-content: space-between; font-size: 13px; }
.panel dt { color: var(--a-sec); }
.panel dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.panel dd.up { color: var(--a-up); } .panel dd.down { color: var(--a-down); }
.chart { height: 230px; }
.wire-split .row { padding: 7px 10px; }

.get-ai { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--quiet); }
.get-ai b { color: var(--ink); font-weight: 650; white-space: nowrap; }
@media (max-width: 680px) { .get-ai { grid-template-columns: minmax(0, 1fr); } }

/* Questions */
.faq { padding: 120px 0 40px; }
.faq h2 { margin-bottom: 40px; }
.faq-list { max-width: 860px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--quiet); border-bottom: 2px solid var(--quiet); transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--settle); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; border-radius: 4px; }
.faq details p { max-width: 40em; margin: -6px 0 26px; font-size: 18px; line-height: 1.55; color: var(--soft); }
.faq details a { color: var(--crimson); }

/* Sections far below the fold skip layout and paint until they come near. */
.more, .privacy, .faq, .final { content-visibility: auto; contain-intrinsic-size: auto 900px; }