/* Home and privacy pages. Colour, type, radii and control sizes come from tokens.css,
   so the pages and the app are one system in both themes. What only a marketing page
   needs is defined here: display sizes, the textured plates, the diagram, the bento,
   and the section rhythm. Product pictures are the real app, taken by
   scripts/shoot-site.mjs. The halftone, grid, retro grid and flickering grid are
   Magic UI backgrounds (MIT, notice in landing.js), by way of the portfolio's section
   backgrounds.

   The register follows the tools people compare Broadser with (Heptabase, Linear,
   Granola): medium-weight headlines that carry a muted second sentence, ink buttons
   with the accent kept for signals, numbered sections with a mono label, and product
   pictures large enough to read. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --page: 1200px;
  --wide: 1320px;
  --gutter: clamp(16px, 4vw, 32px);
  --d-hero: clamp(46px, 7.2vw, 92px);
  --d-2: clamp(26px, 2.9vw, 38px);
  --fs-lede: clamp(17px, 1.45vw, 19.5px);
  --fs-body: 16px;
  --band: light-dark(oklch(97.6% 0.004 268), var(--n-1));
  --tile: light-dark(oklch(100% 0 0), var(--n-3));
  --hair: var(--border-subtle);
  --ink: var(--text-primary);
  --ink-band: oklch(18.5% 0.03 274);
  --ink-band-2: oklch(23% 0.05 276);
  --shot-shadow: 0 0 0 1px light-dark(rgb(15 18 30 / 0.08), rgb(255 255 255 / 0.08)), 0 24px 60px -24px rgb(15 18 30 / 0.4), 0 50px 100px -50px rgb(15 18 30 / 0.3);
}

body { margin: 0; background: var(--surface-base); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-xl); letter-spacing: var(--ls-16); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
a { color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }
kbd { font: var(--fw-medium) var(--fs-sm)/1 var(--font-ui); letter-spacing: var(--ls-12); padding: 2px 6px; border-radius: var(--r-xs); border: 1px solid var(--border-default); background: var(--fill-subtle); color: var(--text-secondary); white-space: nowrap; }
svg { width: var(--icon-md); height: var(--icon-md); display: block; flex: none; }
svg[viewBox="0 0 24 24"] * { stroke-width: var(--icon-stroke); vector-effect: non-scaling-stroke; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--state-selected-active); }
.mute { color: var(--text-tertiary); }
.mono { margin: 0 0 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.01em; color: var(--accent-text); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 18px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface-base); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* ---- nav */
.nav { position: sticky; top: 0; z-index: 5; background: color-mix(in oklch, var(--surface-base) 80%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); max-width: var(--page); margin: 0 auto; padding: 11px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--fw-semibold); font-size: 16.5px; letter-spacing: -0.02em; text-decoration: none; }
.mark { width: 26px; height: 26px; flex: none; background: url("assets/brand/logo.svg") center / contain no-repeat; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 var(--sp-8); }
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; letter-spacing: -0.006em; padding: 6px 10px; border-radius: var(--r-full); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav-link:hover { color: var(--text-primary); background: var(--state-hover); }
@supports (animation-timeline: scroll()) {
  .nav { animation: nav-line linear both; animation-timeline: scroll(); animation-range: 0 64px; }
  @keyframes nav-line { to { border-bottom-color: var(--hair); } }
}
@supports not (animation-timeline: scroll()) { .nav { border-bottom-color: var(--hair); } }

/* ---- buttons: pills; ink for the main action, the accent stays a signal */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: var(--r-full); border: 1px solid transparent; font: inherit; font-size: 14px; letter-spacing: -0.006em; font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn .ic { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.btn:not(:disabled):hover .ic:last-child { transform: translateX(2px); }
.btn.big { height: 48px; padding: 0 24px; font-size: 15.5px; }
.btn.wide { width: 100%; height: var(--ctl-xl); }
.btn.solid, .btn.primary { background: var(--ink); color: var(--surface-base); }
.btn.solid:not(:disabled):hover, .btn.primary:not(:disabled):hover { background: color-mix(in oklch, var(--ink) 84%, var(--surface-base)); }
.btn.line, .btn.ghost { background: transparent; border-color: var(--border-default); color: var(--text-primary); }
.btn.ghost { background: var(--surface-raised); }
.btn.line:not(:disabled):hover, .btn.ghost:not(:disabled):hover { background: var(--state-hover); border-color: var(--border-strong); }
.btn.quiet { background: none; color: var(--text-primary); }
.btn.quiet:not(:disabled):hover { background: var(--state-hover); }
.btn.invert { background: #fff; color: oklch(22% 0.04 276); }
.btn.invert:not(:disabled):hover { background: oklch(93% 0.02 278); }
.btn.glass { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.28); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.glass:not(:disabled):hover { background: rgb(255 255 255 / 0.18); }
.btn:disabled { opacity: var(--state-disabled-opacity); cursor: default; }
.btn:focus-visible, .nav-link:focus-visible, input:focus-visible, .x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Google's mark (in the dialog) keeps its own colors: it is a brand, not a token. */

/* ---- section rhythm */
.sec { max-width: var(--page); margin: 0 auto; padding: clamp(96px, 12vw, 160px) var(--gutter) 0; scroll-margin-top: 72px; }
.sec h2 { margin: 0; max-width: 24em; font-size: var(--d-2); line-height: 1.14; letter-spacing: -0.03em; font-weight: 560; text-wrap: balance; }
.sec-lede { margin: 18px 0 0; max-width: 36em; color: var(--text-secondary); font-size: var(--fs-lede); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }
.sec-head { max-width: 860px; margin: 0 0 clamp(36px, 4.4vw, 56px); }
.fine { margin: 16px 0 0; font-size: var(--fs-md); letter-spacing: var(--ls-13); color: var(--text-tertiary); }
.fine a { color: var(--text-secondary); text-underline-offset: 3px; }
.window { margin: 0; border-radius: clamp(8px, 0.9vw, 12px); overflow: hidden; background: var(--surface-sunken); box-shadow: var(--shot-shadow); }
.window img { display: block; width: 100%; height: auto; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; letter-spacing: -0.006em; }
.ticks li b { color: var(--text-primary); font-weight: var(--fw-medium); }
.ticks .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--accent-text); stroke-width: 2.25; }

/* ---- hero */
.hero { position: relative; isolation: isolate; padding: clamp(36px, 5vw, 72px) 0 0; }
/* Magic UI Dot Pattern behind the headline, the board's own grid, fading out from the middle. */
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: min(760px, 100%); z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, light-dark(oklch(55% 0.03 268 / 0.28), oklch(75% 0.03 268 / 0.16)) 1px, transparent 1.5px); background-size: 22px 22px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%); }
.hero-copy { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 5px 13px 5px 11px; border-radius: var(--r-full); border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-secondary); font-size: 13.5px; letter-spacing: -0.004em; font-weight: var(--fw-medium); box-shadow: 0 1px 2px var(--shadow-contact); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
h1 { margin: 0; font-size: var(--d-hero); line-height: 0.98; letter-spacing: -0.048em; font-weight: 590; text-wrap: balance; }
.hero-name, .hero-promise { display: block; }
.hero-promise { margin-top: 14px; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 520; }
.lede { margin: 20px 0 24px; max-width: 34em; color: var(--text-secondary); font-size: var(--fs-lede); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }
.hero-note { margin: 12px 0 0; max-width: 36em; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.who { color: var(--text-secondary); font-size: var(--fs-md); letter-spacing: var(--ls-13); }
.assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--text-tertiary); font-size: 13.5px; letter-spacing: -0.004em; }
.assure li { display: inline-flex; align-items: center; gap: 6px; }
.assure .ic { width: 15px; height: 15px; color: var(--accent-text); stroke-width: 2.25; }
/* Broadser for Mac's hero (scripts/build-site.mjs, the release gate): what it needs on one
   line, then the browser version as a quiet second way in. */
.req { display: flex; flex-wrap: wrap; justify-content: center; margin: 16px 0 0; padding: 0; list-style: none; color: var(--text-tertiary); font-size: 13px; letter-spacing: -0.004em; }
.req li { white-space: nowrap; }
.req li + li::before { content: "·"; margin: 0 9px; }
.download-compat { margin:0 0 12px; color:var(--text-secondary); font-size:13px; line-height:1.5; }
.download-compat a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:3px; }
.mac-install { width:min(100%,520px); margin:2px 0 0; text-align:left; font-size:14px; }
.mac-install summary { display:flex; align-items:center; justify-content:center; gap:6px; width:fit-content; min-height:44px; margin:0 auto; padding:0 10px; color:var(--text-secondary); cursor:pointer; list-style:none; font-size:13px; }
.mac-install summary:hover { color:var(--text-primary); }
.mac-install summary::-webkit-details-marker { display:none; }
.mac-install summary .ic { width:14px; height:14px; }
.mac-install[open] summary .ic { transform:rotate(180deg); }
.mac-install-body { padding:14px 0 0; border-top:1px solid var(--hair); }
.mac-install-meta { margin:0; color:var(--text-tertiary); font-size:13px; }
.mac-install ol { margin:0; padding:4px 0 0 24px; }
.mac-install li { margin:0 0 14px; padding-left:4px; color:var(--text-secondary); }
.mac-install li b { display:block; margin-bottom:2px; color:var(--text-primary); font-weight:var(--fw-medium); }
.mac-install-note { margin:12px 0 0; color:var(--text-tertiary); font-size:13px; line-height:1.5; }
.mac-install-links { display:flex; flex-wrap:wrap; gap:0 18px; margin-top:8px; }
.mac-install-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--text-link); text-underline-offset:3px; }
.download-announcement { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:600px) { [data-mac-download].btn { min-height:44px; } }
.alt { margin: 14px 0 0; color: var(--text-secondary); font-size: 14.5px; letter-spacing: -0.006em; }
.alt a, .alt .link { color: var(--text-link); font-size: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.alt .who { margin-left: 4px; }
/* The download arrow points down, not on. */
.btn:not(:disabled):hover .ic.dl { transform: translateY(2px); }

.stage { position: relative; isolation: isolate; margin: clamp(32px, 4vw, 48px) 0 0; padding: clamp(18px, 3vw, 40px) var(--gutter); overflow: hidden; perspective: 1800px;
  background: radial-gradient(120% 90% at 50% 0%, light-dark(oklch(96.5% 0.03 278), oklch(26% 0.07 276)), light-dark(oklch(93% 0.045 280), oklch(17% 0.04 276)) 70%);
  border-bottom: 1px solid light-dark(oklch(88% 0.04 278), oklch(32% 0.06 276)); }
/* Fade the colour and texture into the page without fading the product window. */
.stage::after { content: ""; position: absolute; inset: 0 0 auto; height: clamp(160px, 20vw, 280px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--surface-base) 0%, color-mix(in oklab, var(--surface-base) 90%, transparent) 24%, color-mix(in oklab, var(--surface-base) 45%, transparent) 58%, transparent 100%); }
.stage::before { content: ""; position: absolute; inset: 18% 12% auto; height: 60%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, light-dark(oklch(80% 0.12 278 / 0.6), oklch(55% 0.18 278 / 0.45)), transparent); filter: blur(40px); }
/* Halftone (Magic UI Dot Pattern, drawn as a print screen): landing.js sizes each dot. */
.halftone { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; color: light-dark(oklch(52% 0.2 276), oklch(70% 0.16 276)); opacity: 0.3; }
/* Grain over the stage, as an inline SVG: a filter in a data: URL would be dropped. */
.grain { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; }
@media (prefers-color-scheme: dark) { .halftone { opacity: 0.38; } .grain { opacity: 0.09; mix-blend-mode: screen; } }
.hero-window { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; transform-origin: 50% 100%; }

/* Local and cloud choices use plain columns, with the product as the visual anchor. */
.modes { max-width: var(--page); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 88px); }
.mode-grid article { min-width: 0; }
.mode-grid .mono { margin-bottom: 10px; }
.mode-grid h2 { margin: 0; font-size: clamp(25px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 560; }
.mode-grid article > p:not(.mono) { max-width: 34em; margin: 14px 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.text-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-link); text-decoration: none; font-size: 14px; font-weight: var(--fw-medium); }
.text-action .ic { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.text-action:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-action:hover .ic { transform: translateX(3px); }
.share-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.share-options li { min-width: 0; border-top: 1px solid var(--border-default); padding-top: 20px; }
.share-number { color: var(--accent-text); font: 13px var(--font-mono); }
.share-options h3 { margin: 16px 0 10px; font-size: 18px; letter-spacing: -0.02em; font-weight: 560; }
.share-options p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.share-options p a { color: var(--text-link); text-underline-offset: 3px; }

/* ---- feature stories: a heading row, then the product on a textured plate */
.story-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.story-head .ticks { padding-bottom: 4px; }
.plate { position: relative; isolation: isolate; margin: 0; padding: clamp(16px, 4.6vw, 60px); border-radius: clamp(16px, 2vw, 26px); overflow: hidden; border: 1px solid var(--hair); }
.plate .window { max-width: 1080px; margin: 0 auto; }
.plate-note { position: relative; max-width: 680px; margin: clamp(16px, 2.4vw, 28px) auto 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in oklch, var(--surface-raised) 88%, transparent); border: 1px solid var(--hair); backdrop-filter: blur(8px); color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; letter-spacing: -0.004em; text-align: center; }
.plate-note b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.plate-halftone { background: radial-gradient(110% 80% at 50% 0%, light-dark(oklch(97% 0.025 278), oklch(25% 0.06 276)), light-dark(oklch(94% 0.04 280), oklch(18% 0.04 276)) 75%); }
.plate-halftone .halftone { opacity: 0.22; }
.plate-dots { background-color: light-dark(oklch(96.4% 0.022 186), oklch(23% 0.035 200)); background-image: radial-gradient(circle, light-dark(oklch(55% 0.06 190 / 0.32), oklch(75% 0.05 190 / 0.18)) 1.1px, transparent 1.5px); background-size: 18px 18px; }
.plate-lines { background-color: light-dark(oklch(97.2% 0.025 84), oklch(23% 0.03 80));
  background-image: linear-gradient(light-dark(oklch(60% 0.06 80 / 0.16), oklch(80% 0.05 80 / 0.08)) 1px, transparent 1px), linear-gradient(90deg, light-dark(oklch(60% 0.06 80 / 0.16), oklch(80% 0.05 80 / 0.08)) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px; }

/* ---- bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--tile); border: 1px solid var(--hair); box-shadow: 0 1px 2px var(--shadow-contact); }
.t-map { grid-column: span 12; }
.t-table, .t-flow { grid-column: span 6; }
.t-overview { grid-column: span 12; }
.tile-copy { padding: 26px 28px 0; max-width: 560px; }
.tile h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 17px; letter-spacing: -0.016em; font-weight: var(--fw-semibold); }
.tile p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; letter-spacing: -0.004em; }
.tile-art { position: relative; isolation: isolate; flex: 1; margin: 22px 0 0; padding: 26px; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid var(--hair); }
.tile-art img { display: block; border-radius: 12px; box-shadow: var(--shot-shadow); }
.t-map .tile-art img { width: min(100%, 980px); height: auto; }
.tile-art.bleed { padding: 28px 0 0 28px; align-items: flex-start; justify-content: flex-start; }
.tile-art.bleed img { width: var(--art-w, 820px); max-width: none; height: auto; border-radius: 12px 0 0 0; }
.t-table { --art-w: 760px; } .t-flow { --art-w: 860px; } .t-overview { --art-w: 1180px; }
.tile-art.corner { height: 330px; flex: none; }
.art-dots { background-color: var(--surface-sunken); background-image: radial-gradient(circle, light-dark(oklch(60% 0.02 268 / 0.4), oklch(70% 0.02 268 / 0.2)) 1px, transparent 1.4px); background-size: 16px 16px; }
.art-halftone { background-color: light-dark(oklch(96.5% 0.028 278), oklch(23% 0.055 276)); background-image: radial-gradient(circle, light-dark(oklch(55% 0.18 276 / 0.22), oklch(72% 0.14 276 / 0.2)) 1.6px, transparent 2px); background-size: 12px 12px; }
.art-lines { background-color: light-dark(oklch(97.2% 0.025 84), oklch(23% 0.03 80)); background-image: linear-gradient(light-dark(oklch(60% 0.06 80 / 0.15), oklch(80% 0.05 80 / 0.07)) 1px, transparent 1px), linear-gradient(90deg, light-dark(oklch(60% 0.06 80 / 0.15), oklch(80% 0.05 80 / 0.07)) 1px, transparent 1px); background-size: 32px 32px; }
.smalls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.smalls li { display: flex; gap: 14px; padding: 22px 0; border-top: 1px solid var(--hair); }
.smalls .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }
.smalls h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -0.01em; font-weight: var(--fw-semibold); }
.smalls p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; letter-spacing: -0.004em; }
/* Broadser for Mac's sections with no product picture (the shots are the web version):
   tiles on the dotted band the shortcuts sit on. */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: clamp(14px, 2vw, 22px); list-style: none; border-radius: 24px; border: 1px solid var(--hair);
  background-color: var(--band); background-image: radial-gradient(circle, light-dark(oklch(60% 0.02 268 / 0.3), oklch(70% 0.02 268 / 0.16)) 1px, transparent 1.4px); background-size: 16px 16px; }
.feats li { display: flex; gap: 14px; min-width: 0; padding: 20px; border-radius: 16px; background: var(--tile); border: 1px solid var(--hair); box-shadow: 0 1px 2px var(--shadow-contact); }
.feats .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }
.feats h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font-size: 15px; letter-spacing: -0.01em; font-weight: var(--fw-semibold); }
.feats p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; letter-spacing: -0.004em; }
.feats kbd { font-size: 11.5px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .tile:hover { border-color: var(--border-default); box-shadow: 0 16px 40px -20px var(--shadow-ambient); }
  .tile-art.bleed img { transition: transform 600ms var(--ease-out-expo); }
  .tile:hover .tile-art.bleed img { transform: translate(-10px, -6px); }
}

/* ---- the flow diagram: the portfolio's case-study diagram family (FlowDiagram),
   drawn the same way — anchors are an accent tint with an accent edge, steps are
   recessed boxes with a drawn edge, and rails and elbows are borders. */
.dg { --dg-line: light-dark(oklch(62% 0.015 268), oklch(55% 0.015 268)); --dg-node: light-dark(oklch(95.6% 0.004 268), var(--n-4)); --dg-edge: light-dark(oklch(74% 0.01 268), oklch(46% 0.012 268)); --dg-gap: 30px;
  margin: clamp(40px, 5vw, 56px) 0 0; padding: clamp(20px, 3vw, 36px); border-radius: 20px; background: var(--tile); border: 1px solid var(--border-subtle); box-shadow: 0 1px 2px var(--shadow-contact); }
.dg-title { margin: 0 0 22px; font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-13); color: var(--text-secondary); }
.dg-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--dg-gap); margin: 0; padding: 0; list-style: none; }
.dg-stage { min-width: 0; }
.dg-anchor { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; border-radius: var(--r-full); background: var(--accent-soft); border: 1.5px solid color-mix(in oklab, var(--accent) 85%, var(--accent-soft)); color: var(--text-primary); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -0.006em; }
.dg-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-raised); color: var(--text-secondary); font-size: 11px; font-weight: var(--fw-semibold); box-shadow: 0 0 0 1px var(--border-default); }
.dg-stage:not(:last-child) .dg-anchor::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--dg-gap) - 3px); border-top: 1.5px solid var(--dg-line); }
.dg-stage:not(:last-child) .dg-anchor::before { content: ""; position: absolute; left: calc(100% + var(--dg-gap) - 8px); top: calc(50% - 4.25px); border: 4.5px solid transparent; border-right: 0; border-left: 7px solid var(--dg-line); }
.dg-nodes { display: grid; gap: 10px; margin: 0 0 0 20px; padding: 16px 0 0 18px; list-style: none; }
.dg-node { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dg-node::before { content: ""; position: absolute; left: -18px; top: -10px; bottom: 0; border-left: 1.5px solid var(--dg-line); }
.dg-node:first-child::before { top: -16px; }
.dg-node:not(:last-child)::after { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; border-top: 1.5px solid var(--dg-line); }
.dg-node:last-child::before { bottom: auto; width: 18px; height: calc(50% + 10px); border-bottom: 1.5px solid var(--dg-line); border-bottom-left-radius: 8px; }
.dg-node:first-child:last-child::before { height: calc(50% + 16px); }
.dg-box { position: relative; isolation: isolate; flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--dg-node); border: 1.5px solid var(--dg-edge); font-size: 13.5px; line-height: 1.4; letter-spacing: -0.004em; color: var(--text-primary); }
.dg-box kbd { font-size: 11px; padding: 1px 5px; }
.dg-tag { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-11); color: var(--text-tertiary); min-width: 20px; }
/* Your input: a parallelogram. The slant is a layer behind the words, so they stay upright. */
.dg-input .dg-box { background: none; border: 0; padding-left: 16px; padding-right: 16px; }
.dg-input .dg-box::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--dg-node); border: 1.5px solid var(--dg-edge); transform: skewX(-12deg); }
/* Broadser does it: a box with an inner rule at each side. */
.dg-system .dg-box { box-shadow: inset 7px 0 0 -5.5px var(--dg-edge), inset -7px 0 0 -5.5px var(--dg-edge); padding-left: 16px; padding-right: 16px; }
/* Decided by the site: a hexagon, its edge a second hexagon underneath. */
.dg-decide .dg-box { background: none; border: 0; padding: 10px 20px; text-align: center; }
.dg-decide .dg-box::before, .dg-decide .dg-box::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
.dg-decide .dg-box::before { inset: 0; background: var(--dg-edge); }
.dg-decide .dg-box::after { inset: 1.5px 2px; background: var(--dg-node); }
.dg-end .dg-box { border-radius: 22px; padding-left: 16px; padding-right: 16px; }
.dg-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--fs-sm); letter-spacing: var(--ls-12); }
.dg-legend li { display: inline-flex; align-items: center; gap: 8px; }
.dg-legend i { display: inline-block; width: 22px; height: 13px; border: 1.5px solid var(--dg-edge); background: var(--dg-node); border-radius: 4px; }
.dg-legend .lg-input { transform: skewX(-14deg); border-radius: 2px; }
.dg-legend .lg-system { box-shadow: inset 5px 0 0 -3.5px var(--dg-edge), inset -5px 0 0 -3.5px var(--dg-edge); }
.dg-legend .lg-decide { border: 0; background: var(--dg-edge); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%); }

/* ---- interlude: Magic UI Retro Grid — the CSS projection, a plane of lines
   receding to a horizon, which on this page is the board going on forever. */
.interlude { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(460px, 70vh, 720px); margin-top: clamp(96px, 12vw, 160px); overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(70% 60% at 50% 105%, oklch(42% 0.17 278 / 0.75), transparent 70%), linear-gradient(180deg, var(--ink-band), var(--ink-band-2)); }
.retro { position: absolute; inset: 42% 0 0; z-index: -1; overflow: hidden; perspective: 200px; color: oklch(78% 0.12 278); opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 70%); mask-image: linear-gradient(180deg, transparent 18%, #000 70%); }
.retro-tilt { position: absolute; inset: 0; transform: rotateX(65deg); }
.retro-plane { position: absolute; inset: 0; margin-left: -200%; width: 600vw; height: 300vh; transform-origin: 100% 0 0; transform: translateY(-50%);
  background-image: linear-gradient(to right, currentColor 1px, transparent 0), linear-gradient(to bottom, currentColor 1px, transparent 0); background-size: 60px 60px; }
.interlude-in { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(140px, 18vw, 220px); }
.interlude h2 { margin: 0 auto; max-width: 12em; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 580; text-wrap: balance; }
.interlude p { margin: 20px auto 0; max-width: 34em; font-size: var(--fs-lede); line-height: 1.55; letter-spacing: -0.012em; color: rgb(255 255 255 / 0.74); text-wrap: pretty; }

/* ---- sync and privacy */
.sync-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.promises { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.promises li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--hair); }
.promises .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--accent-text); }
.promises h3 { margin: 0 0 4px; font-size: 15.5px; letter-spacing: -0.012em; font-weight: var(--fw-semibold); }
.promises p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; letter-spacing: -0.004em; }
.promises b { color: var(--text-primary); font-weight: var(--fw-medium); }
.promises a, .faq a, .foot-brand a, .qa a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.flow { position: sticky; top: 88px; display: flex; flex-direction: column; margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: 24px; border: 1px solid var(--hair);
  background-color: var(--band); background-image: radial-gradient(circle, light-dark(oklch(60% 0.02 268 / 0.3), oklch(70% 0.02 268 / 0.16)) 1px, transparent 1.4px); background-size: 16px 16px; }
.flow-label { margin-bottom: 20px; color: var(--text-tertiary); }
/* With Broadser for Mac out, the figure has two chains: the Mac's, then the browser's. */
.flow-group { margin: 26px 0 10px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-12); }
.flow-label + .flow-group { margin-top: 0; }
.node { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--tile); border: 1px solid var(--hair); box-shadow: 0 1px 2px var(--shadow-contact); }
.node b { display: block; font-size: 15px; letter-spacing: -0.012em; font-weight: var(--fw-semibold); }
.node span:not(.node-ic) { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; letter-spacing: -0.004em; }
.node-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.node-ic .ic { width: 20px; height: 20px; }
.node-main { border-color: var(--accent-border); box-shadow: 0 0 0 4px var(--state-selected), 0 12px 32px -14px color-mix(in oklch, var(--accent) 50%, transparent); }
.node-main .node-ic { background: var(--accent); color: var(--text-on-accent); }
.wire { position: relative; height: 44px; width: 2px; margin-left: 36px; background: repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 10px); }
.wire-label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.wire i { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wire i { animation: travel 2.4s var(--ease-in-out) infinite; }
  .wire i:nth-of-type(2) { animation-delay: 0.8s; }
  .wire i:nth-of-type(3) { animation-delay: 1.6s; }
}
@keyframes travel { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ---- shortcuts */
.keys { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.keygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: clamp(14px, 2vw, 22px); border-radius: 24px; border: 1px solid var(--hair);
  background-color: var(--band); background-image: radial-gradient(circle, light-dark(oklch(60% 0.02 268 / 0.3), oklch(70% 0.02 268 / 0.16)) 1px, transparent 1.4px); background-size: 16px 16px; }
.keygrid > div { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--tile); border: 1px solid var(--hair); }
.keygrid dt { margin: 0; flex: none; }
.keygrid dd { margin: 0; color: var(--text-secondary); font-size: 14px; letter-spacing: -0.004em; line-height: 1.3; }
.keygrid kbd { display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--border-default); border-bottom-width: 2px; background: var(--surface-raised); color: var(--text-primary); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0; box-shadow: 0 1px 2px var(--shadow-contact); }

/* ---- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-head { position: sticky; top: 96px; }
.qa { border-top: 1px solid var(--hair); }
.qa details { border-bottom: 1px solid var(--hair); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 21px 2px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: var(--fw-medium); letter-spacing: -0.014em; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out); }
.qa details[open] summary .ic { transform: rotate(180deg); }
.qa summary:hover .ic { color: var(--text-primary); }
.qa p { margin: -4px 0 22px; padding-right: 36px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; letter-spacing: -0.006em; }

/* ---- closing: Magic UI Flickering Grid on the same ink as the interlude */
.closing { position: relative; isolation: isolate; max-width: var(--wide); margin: clamp(96px, 12vw, 160px) auto 0; padding: clamp(80px, 11vw, 148px) var(--gutter); border-radius: clamp(0px, 2.4vw, 32px); overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, oklch(40% 0.15 278 / 0.8), transparent 70%), var(--ink-band); border: 1px solid oklch(32% 0.06 276); }
.flicker { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: oklch(82% 0.1 278);
  -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, transparent 28%, #000 80%); mask-image: radial-gradient(75% 85% at 50% 50%, transparent 28%, #000 80%); }
.closing h2 { margin: 0 auto; max-width: 14em; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 580; text-wrap: balance; }
.closing p { margin: 18px auto 34px; max-width: 32em; font-size: var(--fs-lede); line-height: 1.55; color: rgb(255 255 255 / 0.74); }
.closing .closing-alt { margin: 22px auto 0; font-size: 14.5px; letter-spacing: -0.006em; }
.closing-alt a, .closing-alt .link { color: #fff; font-size: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- footer, with the name set large underneath it */
.foot { margin-top: clamp(72px, 10vw, 128px); border-top: 1px solid var(--hair); color: var(--text-secondary); font-size: var(--fs-md); letter-spacing: var(--ls-13); overflow: hidden; }
.foot-in { display: flex; justify-content: space-between; gap: var(--sp-10); max-width: var(--page); margin: 0 auto; padding: 52px var(--gutter) 24px; }
.foot-brand { max-width: 320px; }
.foot-brand .brand { color: var(--text-primary); }
.foot-brand p { margin: 12px 0 0; line-height: 1.55; }
.foot-cols { display: flex; gap: clamp(40px, 7vw, 96px); }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.foot-cols h2 { margin: 0 0 4px; color: var(--text-primary); font-size: var(--fs-md); letter-spacing: var(--ls-13); font-weight: var(--fw-semibold); }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.wordmark { margin: 8px auto -0.14em; max-width: var(--wide); padding: 0 var(--gutter); text-align: center; font-size: clamp(76px, 19vw, 272px); line-height: 1; letter-spacing: -0.065em; font-weight: 650; user-select: none;
  background: linear-gradient(180deg, light-dark(oklch(88% 0.03 278), oklch(30% 0.05 276)), transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-base { position: relative; display: flex; justify-content: space-between; gap: var(--sp-4); max-width: var(--page); margin: 0 auto; padding: 18px var(--gutter) 28px; color: var(--text-tertiary); font-size: var(--fs-sm); letter-spacing: var(--ls-12); }
.foot-base a { color: inherit; text-underline-offset: 3px; }

/* ---- sign-in dialog */
.auth-open { overflow: hidden; }
.backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); background: var(--scrim); backdrop-filter: blur(4px) saturate(1.1); -webkit-backdrop-filter: blur(4px) saturate(1.1); overflow-y: auto; overscroll-behavior: contain; }
.dialog { display: flex; flex-direction: column; position: relative; width: 100%; max-width: 380px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface-top); border: 1px solid var(--overlay-border); box-shadow: var(--shadow-modal); }
.dialog-head { display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: var(--sp-1); }
.dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dialog h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); letter-spacing: var(--ls-16); font-weight: var(--fw-semibold); }
.dialog .sub { margin: 0 0 var(--sp-5); color: var(--text-secondary); font-size: var(--fs-md); letter-spacing: var(--ls-13); }
.x { flex-shrink: 0; width: var(--ctl-md); height: var(--ctl-md); margin: 0; border-radius: var(--r-sm); border: 0; background: none; color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; }
.x:hover { background: var(--state-hover); color: var(--text-primary); }
/* Account forms share the app's controls; landing-page CTAs keep their own shape. */
.dialog .btn { height: var(--ctl-xl); border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-13); }
.dialog .btn.primary { background: var(--accent); border-color: transparent; color: var(--text-on-accent); }
.dialog .btn.primary:not(:disabled):hover { background: var(--accent-hover); }
.dialog .btn.primary:not(:disabled):active { background: var(--accent-active); }
.dialog .btn:not(:disabled):hover, .dialog .btn:not(:disabled):active { transform: none; }
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-tertiary); font-size: var(--fs-xs); letter-spacing: var(--ls-11); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
#email-form { display: flex; flex-direction: column; gap: var(--sp-2); }
#email-form label { font-size: var(--fs-md); letter-spacing: var(--ls-13); font-weight: var(--fw-medium); }
#email-form input { height: var(--ctl-xl); padding: 0 var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border-default); background: var(--fill-subtle); color: var(--text-primary); font: inherit; font-size: var(--fs-xl); letter-spacing: var(--ls-16); }
#email-form input[aria-invalid="true"] { border-color: var(--danger-border); }
#email-form .btn { margin-top: var(--sp-2); }
.pw-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.hint { margin: -2px 0 0; color: var(--text-tertiary); font-size: var(--fs-sm); letter-spacing: var(--ls-12); }
.link { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-md); letter-spacing: var(--ls-13); color: var(--text-link); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:disabled { color: var(--text-tertiary); cursor: default; text-decoration: none; }
.switch { margin: var(--sp-4) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); text-align: center; color: var(--text-secondary); font-size: var(--fs-md); letter-spacing: var(--ls-13); }
.btn .g { width: 18px; height: 18px; }
#email-form input:focus { outline: 0; border-color: var(--field-focus-border); box-shadow: var(--ring-focus); }
#email-form input[aria-invalid="true"]:focus { border-color: var(--danger-border); }
.msg { min-height: 1.4em; margin: var(--sp-3) 0 0; font-size: var(--fs-md); letter-spacing: var(--ls-13); color: var(--text-secondary); }
.msg.err { color: var(--danger-text); }
.msg.ok { color: var(--text-primary); }

/* ---- privacy page */
.prose { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--gutter) var(--sp-4); }
.prose h1 { font-size: var(--d-2); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 12px; }
.prose h2 { font-size: var(--fs-2xl); letter-spacing: var(--ls-20); font-weight: var(--fw-semibold); margin: var(--sp-10) 0 var(--sp-2); }
.prose p, .prose li { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; letter-spacing: -0.008em; }
.prose li + li { margin-top: 8px; }
.prose b { color: var(--text-primary); font-weight: var(--fw-semibold); }
.prose a { color: var(--text-link); text-underline-offset: 3px; }
.prose .updated { color: var(--text-tertiary); font-size: var(--fs-md); }

/* ---- motion: the hero settles in and its window tilts flat as you scroll; sections
   rise as they come into view. Nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 900ms var(--ease-out-expo) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(n+4) { animation-delay: 180ms; }
  .stage { animation: fade 1200ms var(--ease-out-expo) 120ms both; }
  @supports (animation-timeline: view()) {
    .hero-window { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .sec-head, .story-head, .plate, .dg, .tile, .smalls li, .promises li, .flow, .keygrid, .qa details, .faq-head, .feats li, .mode-grid article, .share-options li {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 50%;
    }
  }
  @supports not (animation-timeline: view()) {
    .hero-window { animation: rise-far 1300ms var(--ease-out-expo) 260ms both; }
  }
  .retro-plane { animation: retro-scroll 15s linear infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-far { from { opacity: 0; transform: translateY(48px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tilt { from { transform: rotateX(22deg) scale(0.94) translateY(-18px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes retro-scroll { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---- responsive */
@media (max-width: 1080px) {
  .smalls, .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .dg { --dg-gap: 20px; }
  .dg-nodes { margin-left: 12px; padding-left: 14px; }
  .dg-node::before, .dg-node:not(:last-child)::after { left: -14px; }
  .dg-node:not(:last-child)::after, .dg-node:last-child::before { width: 14px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .story-head, .sync-grid, .keys, .faq { grid-template-columns: 1fr; }
  .flow, .faq-head { position: static; }
  .t-table, .t-flow { grid-column: span 12; }
  .keygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-stages { grid-template-columns: 1fr; gap: 22px; }
  .dg-stage .dg-anchor { justify-content: flex-start; padding: 0 16px; }
  .dg-stage:not(:last-child) .dg-anchor::before, .dg-stage:not(:last-child) .dg-anchor::after { display: none; }
  .foot-in { flex-direction: column; }
  .share-options { grid-template-columns: 1fr; }
  .share-options li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 20px; }
  .share-number { padding-top: 4px; }
  .share-options h3 { margin-top: 0; }
}
@media (max-width: 640px) {
  .smalls, .feats { grid-template-columns: 1fr; }
  .feats { margin-left: calc(var(--gutter) * -1 + 8px); margin-right: calc(var(--gutter) * -1 + 8px); padding: 10px; gap: 8px; }
  .feats li { padding: 16px; }
  .mode-grid { grid-template-columns: 1fr; gap: 24px; }
  .mode-grid article + article { border-top: 1px solid var(--hair); padding-top: 24px; }
  .plate { margin-left: calc(var(--gutter) * -1 + 8px); margin-right: calc(var(--gutter) * -1 + 8px); padding: 14px; }
  /* On a phone the whole window is too small to read: show the part each story is about. */
  .plate .window { aspect-ratio: 1 / 0.86; }
  .plate .window picture, .plate .window img { height: 100%; }
  .plate .window img { object-fit: cover; object-position: var(--focus, 50% 40%); }
  .plate-halftone { --focus: 34% 45%; } .plate-dots { --focus: 96% 30%; } .plate-lines { --focus: 40% 40%; }
  .t-map .tile-art img { width: 640px; max-width: none; }
  .tile-copy { padding: 22px 22px 0; }
  .tile-art.bleed { padding: 22px 0 0 22px; }
  .tile-art.corner { height: 260px; }
  .t-table { --art-w: 620px; } .t-flow { --art-w: 680px; } .t-overview { --art-w: 640px; }
  .closing { border-radius: 0; }
  .nav-right .btn.quiet { display: none; }
}
@media (max-width: 480px) {
  .nav-in { padding: 10px 16px; }
  .cta { width: 100%; }
  .cta > .btn { width: 100%; }
  .keygrid { gap: 8px; padding: 10px; }
  .keygrid > div { gap: 10px; padding: 10px; }
  .dialog { padding: var(--sp-5); }
  .foot-cols { gap: 48px; }
  .foot-base { flex-direction: column; gap: 4px; }
}
@media (pointer: coarse) {
  .btn, .nav-link, .x { min-height: 44px; }
  .x { min-width: 44px; }
  .qa summary { min-height: 56px; }
  .foot-cols a { display: flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-transparency: reduce) { .backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Account agreement stays readable without inheriting full-width text-input rules. */
.legal-confirm { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; margin:16px 0; }
.legal-confirm input[type="checkbox"] { width:16px; height:16px; flex:0 0 16px; margin:3px 0 0; padding:0; accent-color:var(--text-primary); }

/* Small supporting text needs body-text contrast in both themes. */
.req, .fine, .foot-base, .hint, .assure { color: var(--text-secondary); }