/* Tracked marketing site. One stylesheet for every page. Dark by default. */

/* Local fallbacks shaped like Manrope and DM Sans: Arial (or its metric twin Liberation Sans) for the regular weights
   and Arial Bold for the bold ones, each scaled with size-adjust so a line of text is as wide as in the web font at
   that weight (measured in Chromium on the pages' own text), and given the web font's ascent and descent (the
   overrides are divided by the size-adjust). The swap to the web fonts then moves no line and rewraps no heading,
   paragraph or button: the pages keep zero layout shift on a first visit too. */
@font-face { font-family: "Manrope fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 100 560; size-adjust: 108.5%; ascent-override: 98.6%; descent-override: 27.6%; line-gap-override: 0%; }
@font-face { font-family: "Manrope fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); font-weight: 561 660; size-adjust: 103.6%; ascent-override: 103.3%; descent-override: 29.0%; line-gap-override: 0%; }
@font-face { font-family: "Manrope fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); font-weight: 661 900; size-adjust: 101%; ascent-override: 105.9%; descent-override: 29.7%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 100 450; size-adjust: 103.8%; ascent-override: 95.3%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 451 560; size-adjust: 105.9%; ascent-override: 93.4%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); font-weight: 561 900; size-adjust: 102%; ascent-override: 97.0%; descent-override: 30.4%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bg: #101317;
  --surface: #181d24;
  --raised: #1c232c;
  --raised-2: #202831;
  --border: #2b333e;
  --border-soft: #252d37;
  --text: #edf2f4;
  --text-2: #bcc6d1;
  --muted: #98a4b4;
  --mint: #8cdbc2;
  --mint-text: #a1e4ce;
  --tile: #172a25;
  --tile-border: #35584b;
  --coral: #ed9b9b;
  --gold: #e1c18a;
  --blue: #9ebee4;
  --lavender: #b7a9d7;
  --btn: #8cdbc2;
  --btn-text: #10251e;
  --btn-hover: #a3e6d0;
  --btn2: #202831;
  --btn2-border: #34404d;
  --btn2-text: #d5dde5;
  --btn2-hover: #26303a;
  --focus: #8cdbc2;
  --header-bg: rgb(16 19 23 / 0.8);
  --glow: rgb(140 219 194 / 0.075);
  --frame-border: #2b333e;
  --frame-shadow: 0 8px 24px #0002;
  --bar-fill: #8cdbc2;
  --grid-line: #252d37;
  --flow-income: #4f8a7c;
  --flow-invest: #5f9e8d;
  --flow-cash: #8cdbc2;
  --flow-spend: #89666c;
  --flow-spend-text: #fff4f4;

  --font-head: "Manrope", "Manrope fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", "DM Sans fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-h1: clamp(2.5rem, 1.55rem + 4.1vw, 4.6rem);
  --fs-h2: clamp(1.95rem, 1.35rem + 2.3vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  --fs-lead: clamp(1.09rem, 1.02rem + 0.32vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(48px, 5vw, 72px);
  --radius: 16px;
  --radius-sm: 12px;
  --max: 1200px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --raised: #eef2f6;
  --raised-2: #eef2f6;
  --border: #d2dbe3;
  --border-soft: #e1e7ed;
  --text: #1f2c38;
  --text-2: #526473;
  --muted: #3e5160;
  --mint-text: #1c6d55;
  --tile: #e4f1eb;
  --tile-border: #bad8ca;
  --coral: #a03443;
  --btn-text: #14251f;
  --btn2: #ffffff;
  --btn2-border: #d2dbe3;
  --btn2-text: #1f2c38;
  --btn2-hover: #eef2f6;
  --focus: #1c6d55;
  --header-bg: rgb(243 245 248 / 0.82);
  --glow: rgb(28 109 85 / 0.06);
  --frame-border: #d2dbe3;
  --frame-shadow: 0 8px 24px #0002;
  --bar-fill: #1c6d55;
  --grid-line: #e1e7ed;
  --flow-income: #1c6d55;
  --flow-invest: #82b4a5;
  --flow-cash: #8cdbc2;
  --flow-spend: #cb9098;
  --flow-spend-text: #2e1519;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f5f8;
    --surface: #ffffff;
    --raised: #eef2f6;
    --raised-2: #eef2f6;
    --border: #d2dbe3;
    --border-soft: #e1e7ed;
    --text: #1f2c38;
    --text-2: #526473;
    --muted: #3e5160;
    --mint-text: #1c6d55;
    --tile: #e4f1eb;
    --tile-border: #bad8ca;
    --coral: #a03443;
    --btn-text: #14251f;
    --btn2: #ffffff;
    --btn2-border: #d2dbe3;
    --btn2-text: #1f2c38;
    --btn2-hover: #eef2f6;
    --focus: #1c6d55;
    --header-bg: rgb(243 245 248 / 0.82);
    --glow: rgb(28 109 85 / 0.06);
    --frame-border: #d2dbe3;
    --frame-shadow: 0 8px 24px #0002;
    --bar-fill: #1c6d55;
    --grid-line: #e1e7ed;
    --flow-income: #1c6d55;
    --flow-invest: #82b4a5;
    --flow-cash: #8cdbc2;
    --flow-spend: #cb9098;
    --flow-spend-text: #2e1519;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--mint-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: #375c50; color: #ffffff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-head); color: var(--text); margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.03em; font-weight: 680; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
figure { margin: 0; }
code, kbd { font-family: var(--font-mono); font-size: 0.86em; }
.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--btn); color: var(--btn-text); font-weight: 600;
  padding: 10px 16px; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.nav { display: flex; align-items: center; gap: 8px; height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--text); text-decoration: none; border-radius: 10px; min-height: 40px;
}
.brand img { width: 30px; height: 30px; }
.wordmark { font-family: var(--font-head); font-weight: 650; font-size: 1.3rem; letter-spacing: -0.045em; line-height: 1; }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 5.5rem; padding: 0 12px;
  color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500; border-radius: 10px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link:hover { color: var(--text); background: var(--raised); }
.nav-link[aria-current="page"] { color: var(--text); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { color: var(--text); background: var(--raised); border-color: var(--border-soft); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}
.nav .btn { margin-left: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-sm);
  font: 600 0.96875rem/1 var(--font-body); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--btn); color: var(--btn-text); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-secondary { background: var(--btn2); color: var(--btn2-text); border-color: var(--btn2-border); }
.btn-secondary:hover { background: var(--btn2-hover); }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 1.03rem; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Shared type pieces */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mint-text);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }

/* Sections */
.section { padding-block: var(--section); border-top: 1px solid var(--border-soft); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 40px); }
.section-head .lead { margin-top: 16px; }
.section-head.split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end;
}
.section-head.split .lead { margin-top: 0; }

/* App-window frame for every clip and still */
.window {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--frame-shadow);
}
.window-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px 0 14px;
  background: #181d24; border-bottom: 1px solid #252d37;
  color: #98a4b4; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
}
.wb-title { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; margin-right: auto; }
.window-bar img { width: 16px; height: 16px; flex: none; }
.window-bar .sep { color: #5c6878; }
.media { position: relative; background: #101317; }
.media.inset { padding-left: 1.6%; }
/* overflow: hidden keeps the aspect-ratio box even when a failed image shows its alt text */
.media img, .media video { width: 100%; overflow: hidden; }
/* Without scripts a clip's poster is its CSS background (--poster, set inline): a browser fetches it only for the video
   the theme displays, so the other theme's poster is never downloaded. With scripts, site.js sets the poster attribute
   of the shown video when its window comes within a screen of the viewport. */
html:not(.js) .media video.clip { background-image: var(--poster); background-size: 100% 100%; background-repeat: no-repeat; }
figcaption { margin-top: 14px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; text-wrap: pretty; }

/* Windows that hold a dark and a light still follow the page theme */
.only-light { display: none !important; }
:root[data-theme="light"] .only-dark { display: none !important; }
:root[data-theme="light"] .only-light { display: block !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .only-dark { display: none !important; }
  :root:not([data-theme="dark"]) .only-light { display: block !important; }
}
.window.themed .window-bar { background: var(--surface); border-bottom-color: var(--border-soft); color: var(--muted); }
.window.themed .window-bar .sep { color: var(--border); }
.window.themed .media { background: var(--bg); }
.window.themed .clip-toggle { border-color: var(--border); color: var(--muted); }
.window.themed .clip-toggle:hover { color: var(--text); background: var(--raised); border-color: var(--btn2-border); }
.window.themed .clip-toggle:focus-visible { outline-color: var(--focus); }

/* Play / pause: a small control at the right end of the window bar, never over the recording */
.clip-toggle {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px;
  border: 1px solid #2b333e; background: transparent; color: #98a4b4;
  font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.01em; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.clip-toggle::after { content: ""; position: absolute; inset: -6px -3px; }
.clip-toggle:hover { color: #edf2f4; background: #202831; border-color: #34404d; }
.clip-toggle:focus-visible { outline-color: #8cdbc2; outline-offset: 2px; }
.clip-toggle svg { width: 12px; height: 12px; }
/* One width for Play and Pause, so the control never changes size (and never counts as a layout shift) */
.clip-toggle .label { display: inline-block; min-width: 3.1em; text-align: left; }
.clip-toggle .i-pause, .clip-toggle[data-state="playing"] .i-play { display: none; }
.clip-toggle[data-state="playing"] .i-pause { display: block; }

/* Reduced motion: the clip waits on its poster with a centred Play */
.clip-play { display: none; }
@media (prefers-reduced-motion: reduce) {
  .clip-play:not([data-state="playing"]) {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
    border: 0; background: #8cdbc2; color: #10251e; font: 600 0.9375rem/1 var(--font-body); cursor: pointer;
    box-shadow: 0 8px 24px #0002;
  }
  .clip-play svg { width: 16px; height: 16px; }
}

.ticks { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 11px; height: 6px;
  border-left: 2px solid var(--mint-text); border-bottom: 2px solid var(--mint-text); transform: rotate(-45deg);
}
.ticks strong { color: var(--text); font-weight: 600; }

/* Search grammar examples */
.queries { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.queries > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 6px 16px; align-items: center; padding: 13px 16px; }
.queries > div + div { border-top: 1px solid var(--border-soft); }
.queries dt code { color: var(--mint-text); font-size: 0.86rem; white-space: nowrap; }
.queries dd { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px;
  background: var(--tile); border: 1px solid var(--tile-border); color: var(--mint-text); font-size: 0.78rem; font-weight: 500; line-height: 1.3;
}
code.inline {
  padding: 2px 7px; border-radius: 7px; background: var(--raised); border: 1px solid var(--border-soft); color: var(--mint-text); white-space: nowrap;
}
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; text-align: center;
  background: var(--raised); border: 1px solid var(--border); border-bottom-width: 2px; color: var(--text); font-size: 0.8em; line-height: 1.5;
}

/* Cards with a still */
.cards { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.card .window { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.card-body { padding: 24px 26px 28px; }
.card-body h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.card-body p { color: var(--text-2); font-size: var(--fs-small); }
.card-body .region-note { display: none; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); }
html[data-region] .card-body .region-note { display: block; }

/* Feature grid */
.grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border-soft); gap: 1px;
}
.grid li { background: var(--surface); padding: 26px 24px 28px; }
.ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--tile); border: 1px solid var(--tile-border); color: var(--mint-text);
}
.ico svg { width: 19px; height: 19px; }
.grid .ico { margin-bottom: 18px; }
.grid h3 { font-size: 1.0625rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.grid p { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
.grid-foot { margin-top: 28px; display: flex; justify-content: flex-end; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; text-decoration: none; }
.arrow-link svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover svg { transform: translateX(3px); }

/* Closing call to action */
.closing { padding-block: clamp(56px, 6vw, 96px) var(--section); border-top: 1px solid var(--border-soft); }
.closing-panel {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  border: 1px solid var(--tile-border); border-radius: var(--radius); background: var(--tile);
}
.closing-panel::before {
  content: ""; position: absolute; inset: -40% 10% auto; height: 100%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
}
.closing-panel > * { position: relative; }
.closing-panel img { width: 56px; height: 56px; margin: 0 auto 28px; }
.closing-panel .lead { max-width: 560px; margin: 18px auto 0; }
.closing-panel .actions { justify-content: center; margin-top: 34px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border-soft); padding-block: 40px 48px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-small); }
.footer-brand img { width: 28px; height: 28px; }
.footer-brand p span { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
.footer-brand strong { color: var(--text); font-family: var(--font-head); font-weight: 650; letter-spacing: -0.03em; font-size: 1.05rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--text-2); text-decoration: none; font-size: var(--fs-small); border-radius: 8px; }
.footer-links a:hover { color: var(--text); background: var(--raised); }

/* Features page */
.page-head { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.page-head .lead { margin-top: 22px; max-width: 680px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; list-style: none; }
.jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
}
.jump a:hover { color: var(--text); border-color: var(--btn2-border); background: var(--raised); }
.jump a span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
/* Between 601 and 960 px the free wrap of the seven links depends on a few pixels of text width, which the swap to the
   web fonts can change (one link jumped rows): a grid of three columns keeps every link in its place. */
@media (min-width: 601px) and (max-width: 960px) { .jump { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; } }
.page-figure { margin-top: clamp(40px, 5vw, 64px); }

.group { padding-block: clamp(72px, 8vw, 112px); border-top: 1px solid var(--border-soft); }
.group-grid { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.group-head h2 { margin-bottom: 14px; }
.group-intro > p { color: var(--text-2); }
.group-head figure { margin-top: 32px; }
.flist { list-style: none; border-top: 1px solid var(--border); }
.flist li { padding: 18px 0; border-bottom: 1px solid var(--border-soft); color: var(--text-2); line-height: 1.55; }
.flist strong { display: block; color: var(--text); font-family: var(--font-head); font-weight: 680; letter-spacing: -0.02em; font-size: 1.0625rem; margin-bottom: 3px; }
.flist code { color: var(--mint-text); white-space: nowrap; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 3vw, 32px); margin-top: clamp(48px, 6vw, 72px); }
.gallery .span-2 { grid-column: 1 / -1; }
/* Each window keeps its own height; a full-width crop is drawn at most at its natural 1112 px, centred. */
.gallery .span-2 .media.inset { padding-inline: 1.6%; }
.gallery .span-2 .media img { max-width: 1112px; margin-inline: auto; }
.gallery figcaption strong { color: var(--text); font-weight: 600; }
/* A crop narrower than its frame keeps a definite width (so its width/height still reserve the box) and never upscales */
.media img.natural { width: min(100%, var(--nw, 545px)); margin-inline: auto; }
/* The title of each group stays in view while its list runs; the figure under it scrolls away beneath it.
   site.js lowers --stick for an intro taller than the window, so it scrolls until its bottom is in view, then holds. */
@media (min-width: 961px) and (min-height: 720px) {
  .group-head { align-self: stretch; }
  .group-intro {
    position: sticky; top: var(--stick, 64px); z-index: 2;
    margin-top: -24px; padding: 24px 0 4px; background: var(--bg);
    /* the spread also covers the shadow of a window passing beneath, which reaches past the column */
    box-shadow: 0 0 0 24px var(--bg);
  }
  .group-intro::after {
    content: ""; position: absolute; left: -24px; right: -24px; top: calc(100% + 24px); height: 20px; pointer-events: none;
    background: linear-gradient(var(--bg), transparent);
  }
}

/* Speed */
.speed-stats {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border-soft); gap: 1px;
}
.speed-stats li { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px); background: var(--surface); }
.speed-stats .stat-main { background: var(--tile); flex-direction: row; align-items: flex-end; gap: 22px; }
.speed-stats .stat-main .stat-label { padding-bottom: 6px; }
.stat-num {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.5rem, 1.9rem + 1.9vw, 3.5rem);
  line-height: 0.95; letter-spacing: -0.05em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-num .unit { font-size: 0.4em; font-weight: 650; letter-spacing: -0.01em; color: var(--muted); margin-left: 0.2em; }
.stat-main .stat-num { font-size: clamp(3.4rem, 2.3rem + 3.6vw, 5.25rem); color: var(--mint-text); }
.stat-main .stat-num .unit { color: var(--mint-text); }
.stat-label { font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); text-wrap: balance; }
.stat-main .stat-label { color: var(--text); font-weight: 500; }
.speed-note { margin-top: 14px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); max-width: 920px; }

.recipe { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 0; margin-top: 24px; list-style: none; }
.recipe li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding-inline: 13px; }
.recipe li + li::before {
  content: ""; position: absolute; left: -4px; top: 17px; width: 7px; height: 7px;
  border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); opacity: 0.7;
}
kbd.cap {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 13px;
  border-radius: 10px; background: var(--raised-2); border: 1px solid var(--border); border-bottom-width: 3px;
  font: 600 0.98rem/1 var(--font-body); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
kbd.cap .plus { color: var(--muted); font-weight: 500; }
kbd.cap.save .plus { color: inherit; opacity: 0.6; }
kbd.cap.save { background: var(--btn); border-color: #6dbfa5; color: var(--btn-text); }
.cap.click {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px;
  border: 1px dashed var(--btn2-border); color: var(--muted);
}
.cap.click svg { width: 18px; height: 18px; }
.recipe .what { font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); white-space: nowrap; }
.timings-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: clamp(22px, 3vw, 36px); }
.timings-card h3 { margin-bottom: 6px; }
.timings-sub { font-size: var(--fs-small); color: var(--muted); }
.timings { margin: 26px 0 0; }
.t-row, .t-axis { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; align-items: center; }
.t-row dt { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); line-height: 1.2; }
.t-row dd, .t-scale { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; column-gap: 12px; align-items: center; }
.t-track {
  display: flex; align-items: center; height: 40px;
  background-image: linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px);
  background-size: 25% 100%; background-repeat: repeat-x;
}
.t-track i { display: block; height: 14px; width: var(--w); min-width: 4px; border-radius: 0 5px 5px 0; background: var(--bar-fill); transform-origin: left center; transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.t-row:first-child .t-track i { height: 16px; }
.t-ms { text-align: right; font-size: var(--fs-small); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-ms span { color: var(--muted); font-weight: 500; }
.t-axis { margin-top: 6px; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-ticks { position: relative; height: 1.2em; }
.t-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.t-ticks span:first-child { transform: none; }
.timings-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.timings.is-armed .t-track i { transform: scaleX(0); }
.timings.is-in .t-track i { transform: scaleX(1); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 70ms); }

.mini-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 32px; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border-soft);
}
.mini-stats li { padding: 18px 20px 20px; background: var(--surface); }
.mini-stats li:first-child { background: var(--tile); }
.mini-stats .stat-num { font-size: 2.25rem; }
.mini-stats li:first-child .stat-num { color: var(--mint-text); }
.mini-stats .stat-label { display: block; margin-top: 8px; font-size: var(--fs-xs); }
.group-head .speed-note { margin-top: 12px; }

/* Hero: the copy beside the title, then the app's own money flow chart */
.hero { position: relative; padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 3.5vw, 48px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 18% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 72%);
}
.hero-top { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: start; }
.hero-side { padding-top: clamp(0px, 9vw - 40px, 96px); }
.hero-top h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.1rem); }
.hero-copy .lead { margin-top: 18px; max-width: 620px; }
.hero-note { margin-top: 14px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.flow-figure { position: relative; margin-top: clamp(28px, 3.5vw, 44px); }
.flow-figure figcaption { max-width: 940px; }
.wb-meta { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 6px; }
.window-bar .wb-meta .sep { color: var(--border); margin-inline: 4px; }
.flow-chart { position: relative; background: var(--surface); padding: 18px 24px 10px; }
/* The SVG keeps its own 1058 x 640 box (width/height attributes plus aspect-ratio), so nothing moves when it renders */
.flow-svg { width: 100%; max-width: 1058px; height: auto; aspect-ratio: 1058 / 640; margin-inline: auto; overflow: visible; font-family: var(--font-body); }
.flow-svg .acc-flow-node { cursor: pointer; outline: none; }
.flow-svg .acc-flow-link, .flow-svg .acc-flow-node { transition: opacity 0.15s ease; }
.flow-svg.is-dim .acc-flow-link:not(.is-on) { opacity: 0.14 !important; }
.flow-svg.is-dim .acc-flow-node:not(.is-on) { opacity: 0.5; }
.flow-svg .acc-flow-hit { rx: 4px; }
.flow-svg .acc-flow-node:focus-visible .acc-flow-hit { stroke: var(--focus); stroke-width: 2px; }
.flow-svg .acc-flow-node[aria-pressed="true"] > rect:first-child { stroke: var(--text); stroke-width: 2px; }
.flow-tip {
  position: absolute; z-index: 5; left: 0; top: 0; width: max-content; max-width: 300px; padding: 10px 13px 11px; border-radius: 10px;
  background: var(--raised-2); border: 1px solid var(--border); box-shadow: 0 8px 24px #0003;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); pointer-events: none;
}
.flow-tip[hidden] { display: none; }
@media (max-width: 600px) { .flow-tip { max-width: 236px; padding: 9px 12px 10px; } }
.flow-tip strong { display: block; color: var(--text); font: 680 0.9375rem/1.3 var(--font-head); letter-spacing: -0.02em; }
.flow-tip .tip-amt { display: block; margin-top: 2px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-tip .tip-share { color: var(--mint-text); font-weight: 500; }
.flow-tip .tip-note { display: block; margin-top: 6px; }
.flow-panel { background: var(--surface); border-top: 1px solid var(--border-soft); padding: 12px 24px 14px; }
.flow-hint { display: flex; align-items: center; gap: 9px; min-height: 26px; font-size: var(--fs-small); color: var(--muted); }
.flow-hint svg { width: 16px; height: 16px; flex: none; }
.fp-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-bottom: 8px; }
.fp-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fp-title { font: 680 1.0625rem/1.25 var(--font-head); letter-spacing: -0.02em; color: var(--text); }
.fp-title .num { margin-left: 8px; color: var(--text-2); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.fp-count { font-size: var(--fs-xs); color: var(--muted); }
.fp-close { margin-left: auto; width: 40px; height: 40px; }
/* The list keeps the chart in view: at most about eight rows, then it scrolls inside the panel */
.fp-scroll { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; }
.fp-scroll .fp-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.fp-close svg { width: 16px; height: 16px; }
.fp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.fp-table th { text-align: left; padding: 6px 12px 6px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.fp-table td { padding: 6px 12px 6px 0; color: var(--text-2); border-bottom: 1px solid var(--border-soft); line-height: 1.4; }
.fp-table td.fp-desc { color: var(--text); font-weight: 500; }
.fp-table .fp-amt { text-align: right; padding-right: 0; white-space: nowrap; color: var(--text); }
.fp-table td.fp-date { white-space: nowrap; }
.fp-table tr.fp-more td, .fp-table tr.fp-sum td { color: var(--muted); border-bottom: 0; }
.fp-table tr.fp-sum td { padding-top: 8px; }
.fp-table tr.fp-total td { color: var(--text); font-weight: 650; border-bottom: 0; border-top: 1px solid var(--border); }

/* Compact sections */
.section-tight { padding-block: clamp(36px, 3.5vw, 48px); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.h2-sm { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.h3-sm { font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.grid li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 18px 20px; }
.grid .ico { width: 34px; height: 34px; border-radius: 10px; margin: 0; grid-row: span 2; }
.grid .ico svg { width: 17px; height: 17px; }
.grid h3 { font-size: 1rem; margin-bottom: 3px; }
.grid p { font-size: 0.875rem; line-height: 1.45; }

/* Two-up rows. Two clips of different shapes get column widths in proportion to their aspect ratios
   (--cols: 1.6fr for 1440 x 900, 1.2356fr for 1112 x 900), so both windows have the same height. */
.duo { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr) minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }
.duo-gap { margin-top: clamp(28px, 3vw, 36px); }
/* The search grammar as one row: a head line (title, further examples) over three typed queries and their chips */
.search-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 12px; }
.search-strip-head .h3-sm { margin-bottom: 0; }
.search-strip-head .also { margin-top: 0; }
.queries.queries-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.queries.queries-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.queries.queries-row > div + div { border-top: 0; border-left: 1px solid var(--border-soft); }
@media (max-width: 960px) {
  .queries.queries-row { grid-template-columns: minmax(0, 1fr); }
  .queries.queries-row > div + div { border-left: 0; border-top: 1px solid var(--border-soft); }
}
.duo-text h2 { margin-bottom: 14px; }
.duo-text .queries { margin-top: 20px; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
.chip-op { background: var(--raised); border-color: var(--border); color: var(--text-2); }
.ticks-top { margin-top: 0; padding-top: 38px; }
.duo-text .ticks { margin-top: 18px; }

/* Speed, compact */
.speed-figure .recipe { margin-top: 18px; }
.speed-side .speed-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.speed-side .speed-stats li { padding: 16px 18px 18px; gap: 8px; }
.speed-side .speed-stats .stat-main { grid-column: 1 / -1; align-items: center; padding: 20px 22px; }
.speed-side .stat-num { font-size: clamp(1.9rem, 1.4rem + 1vw, 2.4rem); }
.speed-side .stat-main .stat-num { font-size: clamp(2.8rem, 2rem + 2.2vw, 4rem); }
.speed-side .stat-label { font-size: 0.875rem; }
.opt-list { list-style: none; margin-top: 16px; border-top: 1px solid var(--border); }
.opt-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.opt-list .ico { width: 34px; height: 34px; border-radius: 10px; }
.opt-list .ico svg { width: 17px; height: 17px; }
.opt-list p { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.opt-list strong { color: var(--text); font-weight: 600; }
.opt-list .measured, .flist .measured { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.timings-card .timings { margin-top: 18px; }
.timings-card .t-track { height: 34px; }
.owner-figure { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid var(--tile-border); border-radius: var(--radius-sm); background: var(--tile); }
.owner-figure .stat-num { color: var(--mint-text); font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem); }
.owner-figure .stat-num .unit { color: var(--mint-text); }
.owner-figure p { color: var(--text); font-weight: 500; font-size: var(--fs-small); line-height: 1.45; }
.owner-figure .owner-src { margin-top: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }

/* The timings card spans the row; its head carries the maker's own figure beside the title */
.timings-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 20px 40px; align-items: center; }
.speed-side .opt-list { margin-top: 18px; }

/* Clip crops. Each .media.crop names a region of its recording in source pixels (--dx, --dy, --dw, --dh; on phones
   --mx, --my, --mw, --mh, each falling back to the desktop value) and the recording's width (--vw). The box takes the
   region's shape and the video is drawn larger and shifted inside it, so the region fills the window at a readable
   scale. A negative --dx leaves a margin of the window's background on the left. */
.media.crop {
  --sx: var(--dx, 0); --sy: var(--dy, 0); --sw: var(--dw); --sh: var(--dh);
  aspect-ratio: var(--sw) / var(--sh); overflow: hidden;
}
.media.crop video.clip {
  position: absolute; max-width: none;
  left: calc(var(--sx) / var(--sw) * -100%); top: calc(var(--sy) / var(--sh) * -100%);
  width: calc(var(--vw) / var(--sw) * 100%);
}
/* Between 961 and 1100 px two clips share a row of about 900 px, so the windows take their phone regions (or a
   --tx / --tw region where one is named), and a row whose regions differ in shape takes --tcols, in proportion */
@media (min-width: 961px) and (max-width: 1100px) {
  .media.crop { --sx: var(--tx, var(--mx, var(--dx, 0))); --sy: var(--ty, var(--my, var(--dy, 0))); --sw: var(--tw, var(--mw, var(--dw))); --sh: var(--th, var(--mh, var(--dh))); }
  .duo[style*="--tcols"] { grid-template-columns: var(--tcols); }
}
@media (max-width: 600px) {
  .media.crop { --sx: var(--mx, var(--dx, 0)); --sy: var(--my, var(--dy, 0)); --sw: var(--mw, var(--dw)); --sh: var(--mh, var(--dh)); }
  /* the cash flow waterfall keeps its left part (opening wealth, operating, investing) at a readable scale */
  .media img.cf-img { aspect-ratio: 640 / 294 !important; object-fit: cover; object-position: 0 50%; }
}

/* Scripted pieces: shown only when site.js can run them; the no-script line takes their place otherwise */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }

/* Another region: main waits (hidden, so nothing visibly moves) until site.js has swapped the media and words, and
   the chart waits for its region's data. site.js is preloaded in the head, so it is ready when the page has parsed;
   if it cannot be loaded, its onerror shows both at once. */
html[data-clips]:not(.regioned) main { visibility: hidden; }
html[data-region]:not(.flow-ready) .flow-chart svg { visibility: hidden; }

/* The region line under the hero buttons and its menu */
.region-line { position: relative; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.region-line [data-r] { color: var(--text-2); font-weight: 550; }
.region-line .sep { margin-inline: 2px; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 40px; margin-block: -10px; padding: 0 4px; border: 0; background: none;
  color: var(--mint-text); font: inherit; font-weight: 550; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.region-menu {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: min(460px, calc(100vw - 2 * var(--gutter)));
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--raised-2); box-shadow: 0 12px 32px #0004;
}
.region-menu[hidden] { display: none; }
.region-menu-title { padding: 2px 8px 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.region-menu ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
.region-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 8px;
  color: var(--text-2); text-decoration: none; font-size: var(--fs-small);
}
.region-menu a span { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.region-menu a:hover { background: var(--raised); color: var(--text); }
.region-menu a[aria-current="true"] { color: var(--mint-text); font-weight: 600; }

/* The per-100 shares in the hero caption keep one width, so a region's own numbers never reflow the line */
.share { font-variant-numeric: tabular-nums; }

/* Hero chart below 1000 px: drawn at a readable size and scrolled sideways inside its window (the page never is),
   with fades at the edges that have more to show and two scroll buttons in the window bar */
.flow-nav { display: none; gap: 2px; margin-right: -2px; }
.flow-nav .icon-btn { width: 36px; height: 36px; position: relative; }
.flow-nav .icon-btn::after { content: ""; position: absolute; inset: -2px; }
.flow-nav .icon-btn svg { width: 16px; height: 16px; }
.flow-nav .icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; border-color: transparent; }
.hint-narrow { display: none; }
@media (max-width: 1000px) {
  .flow-chart { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .flow-svg { width: 940px; max-width: none; margin-inline: 0; }
  .flow-chart { --fade-r: linear-gradient(to right, #000 calc(100% - 56px), transparent); -webkit-mask-image: var(--fade-r); mask-image: var(--fade-r); }
  .flow-window.scrolled .flow-chart { --fade-r: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
  .flow-window.at-end .flow-chart { -webkit-mask-image: none; mask-image: none; }
  .flow-window.scrolled.at-end .flow-chart { --fade-r: linear-gradient(to right, transparent, #000 40px); -webkit-mask-image: var(--fade-r); mask-image: var(--fade-r); }
  html.js .flow-nav { display: inline-flex; }
  .hint-wide { display: none; }
  .hint-narrow { display: inline; }
}

/* Closing call to action, one row */
.closing { padding-block: clamp(36px, 3.5vw, 52px); }
.closing-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; text-align: left; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.closing-panel img { width: 48px; height: 48px; margin: 0; }
.closing-panel .lead { max-width: none; margin: 10px 0 0; font-size: var(--fs-body); }
.closing-panel .actions { margin-top: 0; justify-content: flex-end; flex-wrap: nowrap; }

/* About, privacy and terms: one calm reading column */
.legal { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 96px); }
/* 49.625rem is the 68 characters of DM Sans (794 px); a ch unit would change with the font as it arrives and move the column */
.legal-tabs ul, .legal-doc { max-width: 49.625rem; margin-inline: auto; }
.legal-tabs ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.legal-tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
}
.legal-tabs a:hover { color: var(--text); background: var(--raised); border-color: var(--btn2-border); }
.legal-tabs a[aria-current="page"] { color: var(--mint-text); background: var(--tile); border-color: var(--tile-border); font-weight: 600; }
.legal-doc { margin-top: clamp(32px, 4vw, 48px); }
.legal-head { padding-bottom: 8px; }
.legal-head h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); }
.legal-head .lead { margin-top: 18px; }
.legal-head .actions { margin-top: 26px; }
.legal-meta {
  margin-top: 24px; padding: 16px 20px; border: 1px solid var(--tile-border); border-radius: var(--radius-sm);
  background: var(--tile); color: var(--text); font-size: var(--fs-small); line-height: 1.6;
}
.legal-body h2 { font-size: clamp(1.3rem, 1.16rem + 0.55vw, 1.6rem); letter-spacing: -0.03em; margin: 44px 0 12px; }
.legal-body section h2 { margin-top: 40px; }
.legal-body p, .legal-body li { color: var(--text-2); line-height: 1.7; }
.legal-body p + p { margin-top: 14px; }
.legal-body ul { display: grid; gap: 10px; margin: 16px 0 18px; padding-left: 1.3em; list-style: disc; }
.legal-body li::marker { color: var(--mint-text); }
.legal-body .legal-meta { margin-top: 44px; }

/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .queries > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .speed-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .speed-stats .stat-main { grid-column: 1 / -1; gap: 24px; }
  .speed-stats .stat-main .stat-label { max-width: 300px; }
  .recipe li { padding-inline: 6px; }
  kbd.cap { padding: 0 10px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .speed-figure .recipe { flex-wrap: nowrap; }
}
@media (max-width: 960px) {
  .group-grid, .duo, .hero-top, .timings-head { grid-template-columns: minmax(0, 1fr); }
  .ticks-top { padding-top: 0; }
  .closing-panel { grid-template-columns: auto minmax(0, 1fr); }
  .closing-panel .actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .section-head.split { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  /* One crop per row, so the half-width crops are drawn at their natural 569 px (centred), never shrunk to 6 px text */
  .gallery { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .fp-table .fp-acct { display: none; }
}
@media (max-width: 600px) {
  .nav { gap: 2px; }
  .nav .btn { margin-left: 4px; padding: 0 14px; }
  .nav .hide-sm { display: none; }
  .nav-link { padding: 0 10px; }
  .btn .long { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid li { padding: 16px; }
  .hero-side .actions .btn, .closing-panel .actions .btn { flex: 1 1 100%; }
  .queries > div { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-brand { align-items: flex-start; }
  .footer-brand p span { display: block; margin: 2px 0 0; padding: 0; border: 0; }
  .window-bar { height: 36px; padding-left: 12px; }
  .clip-toggle .label { display: none; }
  .clip-toggle { justify-content: center; min-width: 40px; height: 32px; padding: 0 8px; }
  .clip-toggle::after { inset: -4px; }
  .speed-stats { grid-template-columns: minmax(0, 1fr); }
  .speed-stats .stat-main { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; }
  .speed-stats .stat-main .stat-label { padding-bottom: 0; }
  .speed-stats li:not(.stat-main) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 14px 20px; }
  .speed-stats li:not(.stat-main) .stat-num { font-size: 1.9rem; width: 5.6rem; flex: none; }
  .recipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 6px; }
  .recipe li { padding-inline: 0; }
  .recipe li + li::before { display: none; }
  .speed-side .speed-stats { grid-template-columns: minmax(0, 1fr); }
  .flow-chart { padding: 14px 12px 8px; }
  .flow-svg { width: 860px; }
  .flow-panel { padding: 10px 14px 12px; }
  .fp-table .fp-cat { display: none; }
  .closing-panel { grid-template-columns: minmax(0, 1fr); }
  .closing-panel img { width: 40px; height: 40px; justify-self: start; }
  kbd.cap { height: 40px; min-width: 40px; padding: 0 10px; font-size: 0.9rem; }
  .cap.click { width: 40px; height: 40px; }
  .recipe .what { white-space: normal; text-align: center; }
  .t-row { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .t-row dt { font-size: var(--fs-xs); }
  .t-track { height: 22px; }
  .t-axis { grid-template-columns: minmax(0, 1fr); }
  .t-axis > span:first-child { display: none; }
  .t-ref { left: calc((100% - 4.5rem - 12px) * var(--ref) / 100%); top: 30px; }
  .footer-links { margin-left: -10px; }
}
@media (min-width: 601px) { .btn .short { display: none; } }
@media (max-width: 600px) { .btn .short { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Boxes that hold one short line keep their width whichever font has arrived, so the font swap moves nothing */
.actions .btn-lg { min-width: 10.75rem; }
.nav .btn-sm { min-width: 8.75rem; }
.wb-meta { min-width: 10.5rem; text-align: right; }
@media (max-width: 600px) {
  .nav .btn-sm { min-width: 0; }
  /* the month is in the caption; the bar keeps the page name and the scroll buttons */
  .flow-window .wb-meta { display: none; }
}
@media (max-width: 600px) {
  /* the three tabs stay on one row */
  .legal-tabs ul { flex-wrap: nowrap; gap: 4px; }
  .legal-tabs a { padding: 0 10px; font-size: 0.84375rem; white-space: nowrap; }
}

/* Speed card: computer tabs and the F1 reference line. */
.t-tabs { display: inline-flex; gap: 2px; margin-top: 14px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.t-tabs button { appearance: none; border: 0; border-radius: 7px; padding: 7px 14px; font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--muted); background: transparent; cursor: pointer; }
.t-tabs button:hover { color: var(--text); }
.t-tabs button[aria-selected="true"] { color: var(--text); background: var(--tile); box-shadow: inset 0 0 0 1px var(--border); }
.t-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.timings-plot { position: relative; }
.t-ref { position: absolute; top: 8px; bottom: -2px; pointer-events: none;
  /* the bar column: after the 7.5rem label and its 16px gap, before the 4.5rem value and its 12px gap */
  left: calc(7.5rem + 16px + (100% - 7.5rem - 16px - 4.5rem - 12px) * var(--ref) / 100%);
  border-left: 1.5px dashed var(--coral, #e39a9a); }
.t-ref span { position: absolute; top: -22px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; font-weight: 500; color: var(--coral, #e39a9a); }
@media (prefers-reduced-motion: reduce) { .t-track i { transition: none; } }

/* Hero: the app's money flow page in a frame (see index.html). */
.flow-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: normal; transition: height 0.2s ease; }

/* The F1 reference row: a coral bar above the pages, slightly apart. */
.t-row-ref { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border-soft); }
.t-row-ref dt { color: var(--coral); }
.t-row-ref .t-track i { background: var(--coral); opacity: .85; }
.t-row-ref .t-ms b { color: var(--coral); }
.timings-head { grid-template-columns: minmax(0, 1fr) !important; }

/* "Explore all features": a pill in the nav and a button in the feature grid, the arrow nudging on hover. */
.nav-explore { display: inline-flex; align-items: center; gap: 6px; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding-inline: 14px; }
.nav-explore svg { width: 14px; height: 14px; color: var(--mint-text, currentColor); transition: transform 0.15s ease; }
.nav-explore:hover svg, .explore-btn:hover svg { transform: translateX(3px); }
.explore-btn svg { transition: transform 0.15s ease; }
.narrow-only { display: none; }
@media (max-width: 600px) { .wide-only { display: none; } .narrow-only { display: inline; } }