/* nearfieldapp.com
 *
 * ONE DESIGN WITH THE APP (owner, 2026-09-30: "we also need to make the
 * marketing site design use the same type of design as the app with the
 * liquid glass and stuff"). That settles TASK-280's open question: the site
 * and the app share one design.
 *
 * So every colour, radius, shadow, type size and glass value here comes from
 * the brand's token file, assets/tokens-v2.css. That file is a VERBATIM copy
 * of nearfield-brand/tokens/tokens-v2.css, the single source of truth that
 * the app imports too (web/src/tokens.css). It is copied, not imported,
 * only because the site is published on its own and cannot reach a file
 * outside site/. Never edit the copy; re-copy it. To check it has not
 * drifted:  cmp nearfield-brand/tokens/tokens-v2.css site/assets/tokens-v2.css
 *
 * This file adds only what a marketing page needs and the brand does not
 * define (page widths, display sizes, section rhythm), and it names brand
 * SEMANTIC tokens (--color-*, --text-*, --status-*, --glass-*), as the app
 * does. The only primitives read are the font families and --nf-ink for the
 * dark band, which is the same move the app's tokens.css makes.
 *
 * THE GLASS IS THE APP'S (owner ruling 2026-10-09: Apple's Liquid Glass, in the app,
 * on this site and in the documentation site). assets/glass.css is the app's
 * material ported; it is on the nav bar, the nav's tab capsule and the narrow-screen
 * menu sheet, the things that float. Everything in the content layer stays solid.
 * Screenshot labels use the glass COLOURS with no blur.
 *
 * THEME. The brand ships light as :root and dark under [data-theme="dark"],
 * exactly like the app. theme.js sets the attribute from the computer's own
 * setting (or the visitor's choice) before the page paints. Without script
 * the page is light, which is also what the app opens as.
 *
 * FONTS. The brand's stack, Inter first, as in the app. Inter is served from
 * this site (assets/fonts, SIL Open Font License), so nothing is loaded from
 * another company.
 */

@import url("tokens-v2.css");
@import url("glass.css");

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2-variations"),
       url("fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- the site layer: tokens the brand does not define --------------------- */
:root {
  --font-sans: var(--nf-font-sans);
  --font-mono: var(--nf-font-mono);
  --w-page: 1040px;        /* the app's ordinary screen width */
  --w-wide: 1200px;        /* the app's data-surface width */
  --gutter: 16px;
  /* the app's text-link role (web/src/tokens.css): coral taken darker until it
     clears AA on the page and on a card. Buttons keep --color-accent. */
  --color-link: #C2371C;
  --color-link-hover: #A32C12;
  --color-control-border: var(--text-secondary);
  --t-fast: var(--dur-fast) var(--ease-standard);
  --t-med: var(--dur-med) var(--ease-standard);
  /* display sizes: the brand's display role (700, -0.03em) scaled for a
     marketing page. The brand table says display is "marketing hero only". */
  --display-hero: clamp(60px, 12.5vw, 124px);
  --display-1: clamp(40px, 7vw, 76px);
  --display-2: clamp(32px, 5.2vw, 56px);
  --band-ink: var(--nf-ink);
}
[data-theme="dark"] {
  --color-link: #FF8A6E;
  --color-link-hover: #FFA48E;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---- base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; background: var(--color-bg); scroll-behavior: smooth; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--color-bg); color: var(--text-primary);
  font: var(--text-body-fw) 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-sans); text-wrap: balance; }
p { text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: .86em; font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--color-surface); padding: 8px 12px; border-radius: var(--radius-md); }

/* ---- the draft note: delete this element from each page before publishing ---- */
.draft {
  background: var(--status-missing-bg); color: var(--text-primary);
  font-size: var(--text-small); line-height: 1.45; text-align: center; padding: 7px var(--gutter);
}
.draft strong { font-weight: 600; }
/* the beta-draft banner on the legal pages (owner ruling 2026-10-04); it IS published */
.beta-draft {
  background: var(--status-changed-bg); color: var(--text-primary);
  font-size: var(--text-small); line-height: 1.45; text-align: center; padding: 7px var(--gutter);
}
.beta-draft strong { font-weight: 600; }

/* ---- controls: the app's own shapes (web/src/styles.css .btn, .pill) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 34px; padding: var(--space-2) var(--space-4);
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-md);
  font: 600 var(--text-small)/1.2 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--color-hover); border-color: var(--text-primary); color: var(--text-primary); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); }
.btn-primary:hover, .btn-primary:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--text-on-accent); }
.btn-ghost { background: var(--color-hover); border-color: transparent; }
.btn-ghost:hover { background: var(--color-hover); border-color: var(--color-border-strong); }
.btn-lg { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: 16px; }
/* not yet available: the quiet fill, not a faded coral, so it cannot read as the primary action */
.btn[aria-disabled="true"] { background: var(--color-hover); color: var(--text-secondary); border-color: var(--color-border-strong); cursor: not-allowed; pointer-events: none; }
.link-more { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link-more::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); transition: transform var(--t-med); }
.link-more:hover { text-decoration: underline; }
.link-more:hover::after { transform: translate(2px, -1px); }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 var(--text-small)/1.4 var(--font-sans);
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  background: var(--color-hover); color: var(--text-secondary);
  border: 1px solid var(--color-border); white-space: nowrap; vertical-align: middle;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* ---- the floating glass bar: Liquid Glass, the app's top bar -----------------------
 * The material is assets/glass.css (the app's, ported); assets/glass.js adds the
 * lens and the sliding tab capsule. The markup carries class="nav-in glass
 * glass--bar". The bar floats over the page, and the page scrolls under it. */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 12px; margin-top: 12px; }
.nav-in {
  --bar-radius: 28px;
  position: relative;
  max-width: var(--w-wide); margin: 0 auto; min-height: 56px;
  display: flex; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--bar-radius);
  box-shadow: var(--glass-shadow);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; }
.brand:hover { color: var(--text-primary); }
.brand svg { width: 26px; height: 26px; color: var(--text-primary); }
.brand span { font: 600 var(--text-h3)/1 var(--font-sans); letter-spacing: -0.03em; }
/* Apple's tab bar: plain words on the glass and ONE glass capsule under the chosen
   tab, which slides to a new choice (glass.js). No grey track between the words and
   the glass, and the chosen word keeps its weight, so nothing moves. */
.nav-tabs { display: none; position: relative; gap: 2px; margin-left: auto; padding: var(--space-1); }
@media (min-width: 900px) { .nav-tabs { display: flex; } }
.nav-tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full); font: 500 var(--text-small)/1.2 var(--font-sans);
  color: var(--text-primary); text-decoration: none; transition: background var(--t-fast);
}
.nav-tab:hover { color: var(--text-primary); background: var(--color-hover); }
.nav-tabs.has-capsule .nav-tab[aria-current]:hover { background: none; }
/* no script: the chosen tab is a plain raised pill. With the capsule it is the capsule. */
.nav-tabs:not(.has-capsule) .nav-tab[aria-current] { font-weight: 600; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nav-capsule {
  position: absolute; left: 0; top: 0; z-index: 0; display: block; pointer-events: none;
  transform-origin: 0 0; border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
  /* a small lens: the bar's 14 px band would fill a 36 px capsule */
  --glass-lens-rim: 8; --glass-lens-px: 6;
}
.nav-capsule[data-shown="false"] { visibility: hidden; }
/* the three feature tabs fit the glass bar only on wide windows */
.nav-tab-more { display: none; }
@media (min-width: 1060px) { .nav-tab-more { display: inline-flex; } }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 900px) { .nav-end { margin-left: 0; } }
.nav-end .btn { border-radius: var(--radius-full); }
.nav-end .btn-ghost { background: none; border-color: transparent; }
.nav-end .btn-ghost:hover { background: var(--color-hover); border-color: transparent; }
.theme-btn, .menu-btn { width: 36px; min-height: 36px; padding: 0; }
.theme-btn svg, .menu-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
.has-menu .menu-btn { display: inline-flex; }
@media (min-width: 900px) { .has-menu .menu-btn { display: none; } }
@media (max-width: 420px) {
  .nav { padding: 0 8px; }
  .nav-in { padding-left: var(--space-4); gap: var(--space-2); }
  .nav-end { gap: 2px; }
  .nav-end .btn-primary { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* the menu sheet, for a narrow screen: Apple's menus are Liquid Glass */
.nav-sheet {
  position: absolute; top: calc(100% + 8px); right: 12px; z-index: 60;
  width: min(300px, calc(100% - 24px)); padding: 8px; border-radius: 24px;
  box-shadow: 0 24px 56px -18px rgba(20,20,25,.42), 0 2px 8px rgba(20,20,25,.08);
  transform-origin: top right;
}
.nav-sheet[hidden] { display: none; }
.nav-sheet a {
  display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 8px 16px;
  border-radius: 16px; color: var(--text-primary); text-decoration: none; font: 500 17px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
}
.nav-sheet a:hover { background: var(--color-hover); color: var(--text-primary); }
.nav-sheet a[aria-current]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.nav-sheet hr { border: 0; border-top: 1px solid var(--color-border); margin: 6px 12px; }
@media (prefers-reduced-motion: no-preference) {
  .nav-sheet.opening { animation: sheet-in .28s var(--ease-standard) both; }
}
@keyframes sheet-in { from { opacity: 0; transform: scale(.92) translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- sections ---------------------------------------------------------------- */
section { padding: 88px 0; scroll-margin-top: 84px; }
@media (min-width: 960px) { section { padding: 128px 0; } }
.tone-surface { background: var(--color-surface); }
.center { text-align: center; }
.kicker { font: 600 var(--text-small)/1.4 var(--font-sans); letter-spacing: var(--text-caption-ls); text-transform: uppercase;
          color: var(--text-secondary); margin-bottom: var(--space-4); }
.kicker .n { color: var(--text-primary); }
.statement { font-size: var(--display-1); font-weight: var(--text-display-fw); letter-spacing: -0.045em; line-height: 1.03; }
.statement-s { font-size: var(--display-2); font-weight: var(--text-display-fw); letter-spacing: -0.04em; line-height: 1.06; }
.intro { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--text-secondary); font-weight: 500;
         letter-spacing: -0.015em; margin-top: var(--space-5); max-width: 34em; }
.center .intro { margin-left: auto; margin-right: auto; }

/* ---- hero ---------------------------------------------------------------------- */
.hero { padding: 72px 0 0; text-align: center; overflow: hidden; position: relative; }
@media (min-width: 960px) { .hero { padding: 108px 0 0; } }
.hero-product { font: 600 clamp(17px, 2.2vw, 21px)/1.3 var(--font-sans); letter-spacing: -0.02em; margin-bottom: var(--space-3);
                display: inline-flex; align-items: center; gap: var(--space-3); }
.hero h1 { font-size: var(--display-hero); font-weight: var(--text-display-fw); letter-spacing: -0.055em; line-height: .98; }
.hero .lede { font-size: clamp(18px, 2.2vw, 23px); line-height: 1.45; font-weight: 500; letter-spacing: -0.015em;
              color: var(--text-secondary); max-width: 36em; margin: var(--space-6) auto 0; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: center; align-items: center; margin-top: 36px; }
.arcs { position: absolute; left: 50%; top: -40px; width: 1400px; max-width: none; transform: translateX(-50%);
        pointer-events: none; z-index: 0;
        -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 72%); mask-image: linear-gradient(180deg, #000 30%, transparent 72%); }
.arcs path { fill: none; stroke: var(--color-border-strong); stroke-width: 1; }
.arcs path.hot { stroke: var(--color-accent); opacity: .3; }
.hero > .wrap, .hero > .wrap-wide { position: relative; z-index: 1; }
/* Colour behind the glass. Apple's glass has something to bend, so the hero carries a soft
   wash of the brand's own colours (gradients only, no filter): coral, blue-grey and the
   added green of the status set. It is content, so it is solid. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 40% at 14% 42%, rgba(255,107,74,.20), transparent 70%),
    radial-gradient(30% 38% at 88% 34%, rgba(143,184,255,.30), transparent 70%),
    radial-gradient(36% 32% at 52% 18%, rgba(122,220,160,.18), transparent 70%);
}
[data-theme="dark"] .hero::before {
  background:
    radial-gradient(34% 40% at 14% 42%, rgba(255,107,74,.20), transparent 70%),
    radial-gradient(30% 38% at 88% 34%, rgba(143,184,255,.16), transparent 70%),
    radial-gradient(36% 32% at 52% 18%, rgba(122,220,160,.10), transparent 70%);
}

/* ---- product frames -------------------------------------------------------------
 * Each frame is the app's own window: the dark Direction D home, radius-xl,
 * shadow-lg. The frame follows the page theme (owner, 2026-10-09: light page, light
 * screenshots; dark page, dark screenshots).
 * Until a real capture exists, .ph paints an abstract, clearly labelled
 * placeholder, never a fake UI. Every slot (.screen[data-shot="NAME"]) holds a light
 * and a dark variant, classes shot-light and shot-dark, files
 * assets/shots/NAME-light.png and NAME-dark.png. To place a screenshot, replace each
 * .ph element with <img class="shot-light|shot-dark" src="assets/shots/NAME-light|dark.png"
 * width="W" height="H" loading="lazy" alt="..."> at the size in the TODO(screenshot)
 * comment above the frame. The CSS below shows the variant that matches the page theme.
 * theme.js sets data-theme on <html> before first paint, from the visitor's saved
 * choice or the system setting, so there is no flash. The hidden img is display:none
 * and lazy, so the browser does not fetch it until the theme turns.
 * ------------------------------------------------------------------------------ */
.window {
  margin-top: 64px; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  box-shadow: 0 50px 100px -40px rgba(20,20,25,.45), 0 18px 36px -24px rgba(20,20,25,.3);
}
.hero .window { margin-top: 72px; }
.window-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--color-surface-raised); }
.screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-bg); }
.screen > img { width: 100%; height: 100%; object-fit: cover; }
.screen-43 { aspect-ratio: 4 / 3; }
.screen-21 { aspect-ratio: 2 / 1; }
@media (max-width: 560px) {
  .window { border-radius: var(--radius-lg); }
  .window-bar { height: 22px; padding: 0 10px; gap: 5px; } .window-bar i { width: 7px; height: 7px; }
}
.ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-primary);
  background:
    radial-gradient(60% 70% at 18% 20%, rgba(143,184,255,.22), transparent 70%),
    radial-gradient(50% 60% at 85% 30%, rgba(122,220,160,.16), transparent 70%),
    radial-gradient(70% 60% at 60% 100%, rgba(245,201,123,.12), transparent 70%),
    var(--color-bg);
}
/* the brand's level bars, drawn soft: gradients only, no filter */
.ph::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    radial-gradient(4% 14% at 23% 58%, var(--status-changed), transparent),
    radial-gradient(4.5% 22% at 31% 54%, var(--text-primary), transparent),
    radial-gradient(4% 14% at 39% 58%, var(--status-changed), transparent),
    radial-gradient(4% 14% at 61% 58%, var(--status-added), transparent),
    radial-gradient(4.5% 22% at 69% 54%, var(--text-primary), transparent),
    radial-gradient(4% 14% at 77% 58%, var(--status-added), transparent);
}
/* the label: glass colours, no blur (the app keeps blur for the bar) */
.ph-label { position: relative; z-index: 1; padding: 14px 20px; border-radius: var(--radius-lg); max-width: 80%;
  background: var(--glass-bg), rgba(36,36,40,.55); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-glint); }
.ph-label b { display: block; font: 600 clamp(14px, 1.8vw, 18px)/1.3 var(--font-sans); letter-spacing: -0.015em; }
.ph-label span { display: block; margin-top: 3px; font-size: clamp(11px, 1.3vw, 13px); color: var(--text-secondary); }
@media (max-width: 420px) { .ph-label { padding: 9px 12px; border-radius: var(--radius-md); } }
.play { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center;
        background: var(--color-accent); box-shadow: var(--shadow-md); }
.play::after { content: ""; border-style: solid; border-width: 12px 0 12px 20px; margin-left: 5px;
               border-color: transparent transparent transparent var(--text-on-accent); }
@media (max-width: 560px) { .play { width: 48px; height: 48px; margin-bottom: 8px; } .play::after { border-width: 9px 0 9px 14px; margin-left: 4px; } }
.demo .screen { aspect-ratio: 16 / 9; }
.demo .ph-label { background: none; border: 0; box-shadow: none; }
[data-theme="light"] .demo .ph-label { background: none; }
[data-theme="light"] .ph-label { background: var(--glass-bg), rgba(255,255,255,.6); }
/* ---- motion loop: stands in for the demo video (TASK-443; owner, 2026-10-17) -----
 * A project and its samples arc from one computer to the other along the brand's
 * arc. The first computer keeps its copy; the second fills in. 9 s, then it starts
 * again. The resting style is the end state, so reduced motion shows one still frame.
 * ------------------------------------------------------------------------------ */
.loop-screen { display: grid; place-items: center;
  background:
    radial-gradient(60% 70% at 18% 30%, rgba(143,184,255,.16), transparent 70%),
    radial-gradient(50% 60% at 85% 40%, rgba(122,220,160,.12), transparent 70%),
    var(--color-bg); }
.loop-screen svg { width: 100%; height: 100%; display: block; }
.lp-panel { fill: var(--color-surface-raised); stroke: var(--color-border-strong); stroke-width: 2; }
.lp-pip { fill: var(--color-border-strong); }
.lp-label { font: 600 46px var(--font-sans); letter-spacing: -0.01em; fill: var(--text-secondary); }
.lp-arc { fill: none; stroke: var(--color-accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 22; opacity: .7; }
.lp-set { fill: var(--color-accent); }
.lp-line { fill: var(--text-primary); opacity: .8; }
.lp-sub, .lp-bar { fill: var(--text-secondary); opacity: .45; }
.lp-added { fill: var(--status-added); } .lp-changed { fill: var(--status-changed); } .lp-accent { fill: var(--color-accent); }
.lp-ghost { fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-dasharray: 5 6; opacity: .45; }
.lp-check circle { fill: var(--status-added); }
.lp-check path { fill: none; stroke: var(--color-bg); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lp-check { transform-box: fill-box; transform-origin: center; }
.lp-x, .lp-wait { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-arc { animation: lp-flow 1.6s linear infinite; }
  .lp-x { animation: lp-x 9s calc(var(--i) * .28s) infinite both; }
  .lp-y { animation: lp-y 9s calc(var(--i) * .28s) infinite both; }
  .lp-arrive { animation: lp-arrive 9s calc(var(--i) * .28s) infinite both; }
  .lp-wait { animation: lp-wait 9s calc(var(--i) * .28s) infinite both; }
  .lp-check { animation: lp-check 9s infinite both; }
}
@keyframes lp-flow { to { stroke-dashoffset: -24; } }
@keyframes lp-x {
  0%, 8% { transform: translateX(0); opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  11% { opacity: 1; } 37% { opacity: 1; }
  40%, 100% { transform: translateX(830px); opacity: 0; }
}
@keyframes lp-y {
  0%, 8% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  24% { transform: translateY(-190px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  40%, 100% { transform: translateY(0); }
}
@keyframes lp-wait { 0%, 37% { opacity: 1; } 41%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes lp-arrive { 0%, 37% { opacity: 0; } 41%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes lp-check {
  0%, 56% { opacity: 0; transform: scale(.6); }
  62% { opacity: 1; transform: scale(1); } 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}
/* light and dark variants of one slot: show the one that matches the page theme */
[data-shot] .shot-dark { display: none; }
:root[data-theme="dark"] [data-shot] .shot-light { display: none; }
:root[data-theme="dark"] [data-shot] .ph.shot-dark { display: grid; }
:root[data-theme="dark"] [data-shot] img.shot-dark { display: block; }

/* ---- promises under the hero --------------------------------------------------- */
.promises { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: 1fr 1fr; margin-top: 88px; text-align: left; }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(4, 1fr); margin-top: 112px; } }
.promise svg { width: 30px; height: 30px; color: var(--text-primary); margin-bottom: var(--space-3); }
.promise h3 { font: var(--text-h3-fw) 17px/1.3 var(--font-sans); letter-spacing: var(--text-h3-ls); }
.promise p { font-size: 14.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }

/* ---- feature sections (no numbers: owner, 2026-09-30) ------------------------------ */
.pillar { padding-bottom: 0; }
.pillar-head { text-align: center; }

/* ---- cards: the app's .panel / .lib-list surfaces ----------------------------------- */
.cards { display: grid; gap: var(--space-4); margin-top: 56px; text-align: left; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
        padding: var(--space-6); box-shadow: var(--shadow-sm); }
.tone-surface .card { background: var(--color-bg); box-shadow: none; }
.card h3 { font: var(--text-h3-fw) 19px/1.3 var(--font-sans); letter-spacing: -0.02em; }
.card p { font-size: 15.5px; color: var(--text-secondary); margin-top: var(--space-2); }
.ic { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: var(--space-4); }
.ic svg { width: 22px; height: 22px; }
.ic-miss { background: var(--status-missing-bg); color: var(--status-missing-text); }
.ic-chg { background: var(--status-changed-bg); color: var(--status-changed-text); }
.ic-add { background: var(--status-added-bg); color: var(--status-added-text); }
.ic-rem { background: var(--status-removed-bg); color: var(--status-removed-text); }
.ic-neutral { background: var(--color-hover); color: var(--text-primary); }

/* ---- the samples story ---------------------------------------------------------------- */
.flow { margin-top: 64px; display: grid; gap: 20px; align-items: center; text-align: left; }
@media (min-width: 900px) { .flow { grid-template-columns: 1fr 64px 1fr; gap: 24px; } }
.flow-col { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.tone-surface .flow-col { background: var(--color-bg); box-shadow: none; }
.flow-col h3 { font: 600 var(--text-caption)/1.4 var(--font-sans); letter-spacing: var(--text-caption-ls); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-3); }
.file { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--color-border); }
.file:first-of-type { border-top: 0; }
.g { width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; font: 800 12px/1 var(--font-sans); color: var(--text-on-status); }
.g-add { background: var(--status-added); }
.g-no { background: var(--color-hover); color: var(--text-secondary); }
.g-same { background: var(--status-changed); }
.folder.folder-own { background: var(--status-changed-bg); color: var(--status-changed-text); }
/* ---- what a share sends, and what it does not ----------------------------------------------------- */
.travels { margin: 88px auto 0; max-width: 900px; text-align: left; }
.travels-h { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; text-align: center; }
.travels-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) { .travels-grid { grid-template-columns: 1fr 1fr; } }
.travels-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.tone-surface .travels-col { background: var(--color-bg); box-shadow: none; }
.travels-col h4 { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 18px/1.3 var(--font-sans); letter-spacing: -0.02em; }
.travels-col ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-secondary); font-size: 15.5px; }
.travels-why { margin-top: 20px; font-size: 15.5px; color: var(--text-secondary); text-align: center; max-width: 44em; margin-left: auto; margin-right: auto; }
.travels-why b { color: var(--text-primary); font-weight: 600; }
.file .where { font: var(--text-mono)/1.45 var(--font-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.file .what { font-size: 15px; font-weight: 500; line-height: 1.35; }
.file.left-behind .what { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.flow-arrow { display: grid; place-items: center; color: var(--text-secondary); }
.flow-arrow svg { width: 40px; height: 40px; transform: rotate(90deg); }
@media (min-width: 900px) { .flow-arrow svg { transform: none; } }
.flow-caption { font-size: var(--text-small); color: var(--text-secondary); margin-top: 18px; text-align: center; }
.folder { font: 600 var(--text-mono)/1.4 var(--font-mono); overflow-wrap: anywhere;
          background: var(--status-added-bg); color: var(--status-added-text); padding: 10px 12px; border-radius: var(--radius-md); margin-bottom: 8px; }
.folder-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
.folder-sub + .folder { margin-top: 16px; }

/* ---- Windows and Mac -------------------------------------------------------------------- */
.os-row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); margin-top: 48px; flex-wrap: wrap; }
.os-pill { font: 700 clamp(20px, 3vw, 30px)/1 var(--font-sans); letter-spacing: -0.035em; padding: 18px 28px;
           border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.tone-surface .os-pill { background: var(--color-bg); box-shadow: none; }
.os-swap { color: var(--text-secondary); }
.os-swap svg { width: clamp(36px, 5vw, 52px); height: auto; }

/* ---- feature rows ------------------------------------------------------------------------ */
.sub-feature { margin-top: 112px; }
.points-2 { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { .points-2 { grid-template-columns: 1fr 1fr; } }
.row-split { display: grid; gap: 32px 56px; margin-top: 112px; align-items: center; text-align: left; }
@media (min-width: 960px) { .row-split { grid-template-columns: 1fr 1.15fr; } }
.row-split .window { margin-top: 0; }
.row-copy h3 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; }
.row-copy .intro { font-size: clamp(17px, 1.8vw, 19px); margin-top: var(--space-3); }
.pillar.pillar-end { padding-bottom: 88px; }
@media (min-width: 960px) { .pillar.pillar-end { padding-bottom: 128px; } }
.sub-feature h3 { font-size: var(--display-2); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; }
.points { display: grid; gap: var(--space-6) var(--space-10); margin-top: 56px; text-align: left; }
@media (min-width: 760px) { .points { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .points.points-2 { grid-template-columns: 1fr 1fr; } }
.note-narrow { max-width: 44em; margin-left: auto; margin-right: auto; margin-top: 40px; }
.point { border-top: 1px solid var(--color-border-strong); padding-top: 18px; }
.point h4 { margin: 0; font: 600 19px/1.3 var(--font-sans); letter-spacing: -0.02em; }
.point p { font-size: 15.5px; color: var(--text-secondary); margin-top: 8px; }

/* ---- the trust band: dark tokens inside, the brand's ink behind ----------------------------- */
.band { background: var(--band-ink); color: var(--text-primary); }
.rules { display: grid; gap: 1px; margin-top: 64px; border-radius: var(--radius-xl); overflow: hidden;
         background: var(--color-border); border: 1px solid var(--color-border); text-align: left; }
@media (min-width: 760px) { .rules { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .rules { grid-template-columns: repeat(3, 1fr); } }
.rule { background: var(--band-ink); padding: 32px 28px; }
.rule svg { width: 28px; height: 28px; color: var(--text-primary); margin-bottom: 18px; }
.rule h3 { font: 600 20px/1.25 var(--font-sans); letter-spacing: -0.025em; }
.rule p { font-size: 15.5px; color: var(--text-secondary); margin-top: 10px; }
.facts { display: grid; gap: 40px 56px; margin-top: 64px; text-align: left; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .fact-wide { grid-column: 1 / -1; } }
.fact h3 { font: 600 21px/1.3 var(--font-sans); letter-spacing: -0.025em; }
.fact p { color: var(--text-secondary); font-size: 16px; margin-top: 10px; }
.more { margin-top: 48px; font-size: 16px; text-align: center; }
.band-split { margin-top: 128px; }

/* ---- FAQ: every answer visible ----------------------------------------------------------------- */
.faq { display: grid; gap: 0 64px; margin-top: 56px; text-align: left; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; } }
.qa { padding: 24px 0; border-top: 1px solid var(--color-border-strong); }
.qa h3 { font: 600 18px/1.35 var(--font-sans); letter-spacing: -0.02em; }
.qa p { font-size: 16px; color: var(--text-secondary); margin-top: 8px; }

/* ---- closer: the pitch on the left, the request form on the right ----------------------------------- */
.closer-grid { display: grid; gap: 48px 72px; align-items: center; }
@media (min-width: 960px) { .closer-grid { grid-template-columns: 1fr minmax(0, 460px); } }
.closer-copy { text-align: left; }
.closer .mark { width: 72px; height: 72px; margin: 0 0 24px; color: var(--text-primary); }
.closer-copy .intro { margin-left: 0; }
.closer-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.closer-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16.5px; color: var(--text-secondary); line-height: 1.45; }
.closer-list li::before { content: "+"; width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center;
                          background: var(--status-added); color: var(--text-on-status); font: 800 12px/1 var(--font-sans); margin-top: 1px; }

/* ---- the request-access form: the app's own controls (web/src/styles.css input, select) ------------ */
.access { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
          padding: var(--space-6); box-shadow: var(--shadow-md); display: grid; gap: 18px; text-align: left; }
.tone-surface .access { background: var(--color-bg); }
.access-h { font: 700 24px/1.2 var(--font-sans); letter-spacing: -0.03em; }
.access-sub { font-size: 15px; color: var(--text-secondary); margin-top: -10px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font: 600 var(--text-small)/1.4 var(--font-sans); color: var(--text-primary); padding: 0; }
.field-hint { font-size: 13.5px; color: var(--text-secondary); }
.access input[type="text"], .access input[type="email"], .access select {
  width: 100%; background: var(--color-surface); color: var(--text-primary);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-md);
  padding: 10px 12px; min-height: 44px; font: 400 16px/1.3 var(--font-sans);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tone-surface .access input[type="text"], .tone-surface .access input[type="email"], .tone-surface .access select { background: var(--color-bg); }
.access input:hover, .access select:hover { border-color: var(--text-primary); }
.access input:focus-visible, .access select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--text-primary); }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; cursor: pointer; }
.choice-row .choice { min-height: 44px; padding: 0 16px; border: 1px solid var(--color-control-border); border-radius: var(--radius-md); }
.choice-row .choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-tint); }
.choice input { accent-color: var(--color-accent); width: 18px; height: 18px; margin: 0; flex: none; }
.agree { align-items: flex-start; line-height: 1.45; }
.agree input { margin-top: 2px; }
.access .btn { width: 100%; }
.access-fine { font-size: 13.5px; color: var(--text-secondary); text-align: center; margin-top: -6px; }
.access-note { padding: 14px 16px; border-radius: var(--radius-md); background: var(--status-changed-bg); color: var(--text-primary); font-size: 15px; }
.access-note b { font-weight: 600; }
.access-note:focus { outline: none; }

/* ---- download page --------------------------------------------------------------------------------- */
.page-hero { padding: 72px 0 24px; text-align: center; }
@media (min-width: 960px) { .page-hero { padding: 104px 0 40px; } }
.page-hero h1 { font-size: clamp(44px, 8vw, 84px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.phone-note { margin: 28px auto 0; max-width: 32em; padding: 14px 18px; border-radius: var(--radius-md);
              background: var(--status-changed-bg); color: var(--status-changed-text); font-size: 15px; }
@media (min-width: 900px) { .phone-note { display: none; } }
.os-list { list-style: none; padding: 0; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.os-list li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full);
              background: var(--color-surface); border: 1px solid var(--color-border); font-size: 15px; color: var(--text-secondary); }
.os-list strong { color: var(--text-primary); font-weight: 600; }
.platforms { display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .platforms { grid-template-columns: 1fr 1fr; } }
.platform { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 40px 32px;
            box-shadow: var(--shadow-sm); text-align: center; display: grid; gap: 14px; justify-items: center; align-content: start; }
.platform svg.os-ic { width: 56px; height: 56px; color: var(--text-primary); margin-bottom: 4px; }
.platform h2 { font: 700 32px/1.1 var(--font-sans); letter-spacing: -0.035em; }
.platform .sub { color: var(--text-secondary); font-size: 16px; }
.platform .btn { margin-top: 10px; }
.platform .small { font-size: 14px; color: var(--text-secondary); max-width: 28em; }
.warn-steps { display: grid; gap: 20px; margin-top: 56px; text-align: left; }
@media (min-width: 900px) { .warn-steps { grid-template-columns: 1fr 1fr; } }
.warn-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 32px 28px; }
.warn-card h3 { font: 700 22px/1.2 var(--font-sans); letter-spacing: -0.025em; }
.warn-card .why { font-size: 15.5px; color: var(--text-secondary); margin-top: 10px; }
.warn-card .aside { font-size: 14px; color: var(--text-secondary); margin-top: 16px; }
.steps { counter-reset: s; display: grid; gap: 14px; padding: 0; margin: 18px 0 0; }
/* The number sits in the item's left padding, out of the flow. The item stays a block, so a step
   may hold plain text, inline words and links side by side. (It was a two-column grid: every inline
   piece of a step that was not wrapped in one element became its own grid cell, and the words of
   the help pages' steps broke into a 30px column. Owner report 2026-10-16.) */
.steps li { list-style: none; counter-increment: s; position: relative; padding-left: 42px; min-height: 28px; font-size: 16px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: var(--radius-sm);
                    display: grid; place-items: center;
                    background: var(--color-hover); color: var(--text-primary); font-weight: 600; font-size: 13.5px; }
.ui { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.big-steps { counter-reset: s; display: grid; padding: 0; margin: 56px 0 0; text-align: left; }
.big-steps li { list-style: none; counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 18px;
                padding: 28px 0; border-top: 1px solid var(--color-border-strong); }
.big-steps li::before { content: counter(s); font: 700 32px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--text-secondary); }
.big-steps h3 { font: 600 20px/1.3 var(--font-sans); letter-spacing: -0.025em; }
.big-steps p { font-size: 16.5px; color: var(--text-secondary); margin-top: 6px; max-width: 40em; }
.needs { display: grid; gap: var(--space-4); margin-top: 56px; text-align: left; }
@media (min-width: 800px) { .needs { grid-template-columns: repeat(3, 1fr); } }

/* ---- legal drafts ------------------------------------------------------------------------------------- */
.legal { max-width: 760px; padding-top: 72px; padding-bottom: 40px; }
.legal h1 { font-size: clamp(40px, 6vw, 60px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; }
.legal h2 { font: 600 24px/1.2 var(--font-sans); margin: 48px 0 12px; letter-spacing: -0.025em; }
.legal p, .legal li { color: var(--text-secondary); font-size: 17px; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 12px 0 0; display: grid; gap: 10px; }
.legal strong { color: var(--text-primary); font-weight: 600; }
.warn { margin: 28px 0 8px; padding: 18px 20px; border-radius: var(--radius-md);
        background: var(--status-missing-bg); color: var(--text-primary); border: 1px solid var(--status-missing); }
.warn p { color: var(--text-primary); font-size: 15.5px; }
.warn p + p { margin-top: 8px; }
.todo { color: var(--text-secondary); font-style: italic; }

/* ---- 404 ---------------------------------------------------------------------------------------------- */
.lost { text-align: center; padding: 120px 0 80px; }
.lost h1 { font-size: clamp(44px, 8vw, 80px); font-weight: 700; letter-spacing: -0.05em; }

/* ---- footer ------------------------------------------------------------------------------------------- */
footer { background: var(--color-surface); font-size: var(--text-small); color: var(--text-secondary); padding: 48px 0 40px; border-top: 1px solid var(--color-border); }
.foot-top { display: grid; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); }
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand p { margin-top: 12px; max-width: 26em; font-size: 14px; line-height: 1.5; }
.foot-col h2 { font: 600 var(--text-small)/1.4 var(--font-sans); color: var(--text-primary); margin-bottom: 10px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { color: var(--text-secondary); text-decoration: none; }
.foot-col a:hover { color: var(--text-primary); text-decoration: underline; }
.fine { padding-top: 20px; line-height: 1.6; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

/* ---- motion ---------------------------------------------------------------------------------------------
 * Resting state is fully visible. Where the browser supports scroll-driven
 * animation and the visitor has not asked for less motion, a section's parts
 * rise into place as it enters the view. The brand: "quick and understated".
 * ------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .rise { animation: rise .8s var(--ease-standard) both; }
  .hero .rise:nth-child(2) { animation-delay: .07s; }
  .hero .rise:nth-child(3) { animation-delay: .14s; }
  .hero .rise:nth-child(4) { animation-delay: .21s; }
  .hero .window { animation: lift 1.1s .2s var(--ease-standard) both; }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .reveal-scale { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(48px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: .4; transform: scale(.95); } to { opacity: 1; transform: none; } }

/* ---- the request page (download.html) ----------------------------------------------------------------- */
.request-sec { padding-top: 24px; }
.request-wrap { max-width: 560px; }

/* get.html fixes (2026-10-17): the hero intro is centred; on a page with no
   nav links the colour button sits at the right end; the Live 12 note shows
   on every screen size. */
.page-hero .intro { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .brand + .nav-end { margin-left: auto; }
  .phone-note.always { display: block; }
}