/* © 2026 ANT-Palvelut Oy. All rights reserved. Kuro is proprietary software; copying or reuse of this code is not permitted. */
/* Website stylesheet — one file for every page.
   A looping video behind everything, moving at its own speed (parallax);
   over it, one kind of glass panel for the words, and the product images
   big, floating on the video by themselves. Dark by default; a light theme
   follows the system. No web fonts, no external requests: the system font
   stack only. Accent: the app's own blue. */

/* ---------- Colour tokens ---------- */
:root {
  color-scheme: dark light;

  --bg: #05080f;
  --scrim: rgba(3, 6, 12, 0.18);            /* over the video, under everything else */
  --vignette: rgba(2, 4, 9, 0.55);

  --panel: rgba(9, 14, 25, 0.60);           /* the one glass panel */
  --panel-solid: rgba(12, 18, 30, 0.94);    /* where backdrop-filter is missing */
  --panel-border: rgba(255, 255, 255, 0.12);
  --panel-highlight: rgba(255, 255, 255, 0.10);
  --menu: rgba(15, 21, 34, 0.985);          /* header menus: must stay readable over text */
  --raised: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.11);

  --text: #f2f4f8;
  --text-2: #c9d0dc;                        /* body copy in a panel */
  --text-muted: #a7b0c0;

  --accent: #6aaeff;          /* links and labels on dark (the app's label blue) */
  --accent-strong: #1f6fe0;   /* button fill; white on it is 4.8:1 */
  --accent-strong-hover: #1a66d6;
  --accent-glow: rgba(31, 111, 224, 0.45);
  --on-accent: #ffffff;
  --focus: #8cc0ff;

  --pro: #f2c76e;
  --pro-bg: rgba(242, 199, 110, 0.14);
  --beta: #74d6c4;
  --beta-bg: rgba(116, 214, 196, 0.14);
  --free: #a5dfae;
  --free-bg: rgba(165, 223, 174, 0.14);
  --next: #8cc0ff;
  --next-bg: rgba(100, 168, 255, 0.16);
  --warn: #f2c76e;
  --warn-bg: rgba(242, 199, 110, 0.10);

  --shadow: 0 1px 0 var(--panel-highlight) inset, 0 30px 80px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.28);
  --img-shadow: 0 50px 120px rgba(0, 0, 0, 0.55), 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --video-filter: none;

  --radius: 22.4px;
  --radius-sm: 9.6px;
  --wrap: 1448px;             /* 1400 of content, plus the gutters */
  --blur: blur(28px) saturate(150%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #e8eef7;
    --scrim: rgba(236, 242, 250, 0.20);
    --vignette: rgba(225, 233, 245, 0.55);

    --panel: rgba(255, 255, 255, 0.66);
    --panel-solid: rgba(255, 255, 255, 0.95);
    --panel-border: rgba(15, 30, 60, 0.10);
    --panel-highlight: rgba(255, 255, 255, 0.85);
    --menu: rgba(255, 255, 255, 0.985);
    --raised: rgba(15, 30, 60, 0.05);
    --line: rgba(15, 30, 60, 0.11);

    --text: #0e131b;
    --text-2: #2c3442;
    --text-muted: #4a5261;

    --accent: #1752ad;
    --accent-strong: #1a62c9;   /* white on it is 5.8:1 */
    --accent-strong-hover: #1553b0;
    --accent-glow: rgba(26, 98, 201, 0.30);
    --focus: #1752ad;

    --pro: #8a5a00;
    --pro-bg: rgba(200, 140, 20, 0.14);
    --beta: #0b6f5f;
    --beta-bg: rgba(20, 160, 140, 0.13);
    --free: #24703a;
    --free-bg: rgba(40, 150, 70, 0.12);
    --next: #1752ad;
    --next-bg: rgba(26, 95, 196, 0.10);
    --warn: #7a4f00;
    --warn-bg: rgba(220, 160, 40, 0.12);

    --shadow: 0 1px 0 var(--panel-highlight) inset, 0 30px 80px rgba(20, 40, 80, 0.16), 0 6px 18px rgba(20, 40, 80, 0.08);
    --img-shadow: 0 50px 110px rgba(15, 35, 75, 0.30), 0 14px 32px rgba(15, 35, 75, 0.18);
    /* The same video, turned to day: dark becomes light, the blues stay blue. */
    --video-filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.02);
  }
}
/* The desktop demo's appearance switch (and a page in one of its windows,
   ?reader&theme=…): the same light tokens, chosen rather than followed. */
:root[data-theme="light"] {
  color-scheme: light;
    --bg: #e8eef7;
    --scrim: rgba(236, 242, 250, 0.20);
    --vignette: rgba(225, 233, 245, 0.55);

    --panel: rgba(255, 255, 255, 0.66);
    --panel-solid: rgba(255, 255, 255, 0.95);
    --panel-border: rgba(15, 30, 60, 0.10);
    --panel-highlight: rgba(255, 255, 255, 0.85);
    --menu: rgba(255, 255, 255, 0.985);
    --raised: rgba(15, 30, 60, 0.05);
    --line: rgba(15, 30, 60, 0.11);

    --text: #0e131b;
    --text-2: #2c3442;
    --text-muted: #4a5261;

    --accent: #1752ad;
    --accent-strong: #1a62c9;   /* white on it is 5.8:1 */
    --accent-strong-hover: #1553b0;
    --accent-glow: rgba(26, 98, 201, 0.30);
    --focus: #1752ad;

    --pro: #8a5a00;
    --pro-bg: rgba(200, 140, 20, 0.14);
    --beta: #0b6f5f;
    --beta-bg: rgba(20, 160, 140, 0.13);
    --free: #24703a;
    --free-bg: rgba(40, 150, 70, 0.12);
    --next: #1752ad;
    --next-bg: rgba(26, 95, 196, 0.10);
    --warn: #7a4f00;
    --warn-bg: rgba(220, 160, 40, 0.12);

    --shadow: 0 1px 0 var(--panel-highlight) inset, 0 30px 80px rgba(20, 40, 80, 0.16), 0 6px 18px rgba(20, 40, 80, 0.08);
    --img-shadow: 0 50px 110px rgba(15, 35, 75, 0.30), 0 14px 32px rgba(15, 35, 75, 0.18);
    /* The same video, turned to day: dark becomes light, the blues stay blue. */
    --video-filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.02);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 67.2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.6px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }

img, svg, video { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.45em;
  text-wrap: balance;
  /* A Finnish or German compound can be wider than a phone; break it rather than let it stick out. */
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  :is(h1, h2, h3):not(:lang(en)) { hyphens: auto; }
}
h1 { font-size: clamp(2.08rem, 5.92vw, 4.8rem); font-weight: 760; letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(1.68rem, 3.36vw, 2.8rem); font-weight: 720; letter-spacing: -0.032em; line-height: 1.06; }
h3 { font-size: 0.96rem; font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4.8px;
  padding: 0.08em 0.36em;
  overflow-wrap: anywhere;
}
kbd { white-space: nowrap; }
strong { font-weight: 650; color: var(--text); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4.8px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 12.8px; top: -48px;
  z-index: 100;
  background: var(--accent-strong);
  color: var(--on-accent);
  padding: 8px 12.8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 9.6px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 19.2px;
}
@media (max-width: 600px) { .wrap { padding: 0 12.8px; } }

/* ---------- The background: a looping video, with parallax ----------
   partials/background.html. The layer is fixed and taller than the window;
   the script moves it at its own speed as the page scrolls. With reduced
   motion the video is hidden and its poster (the layer's background) stays. */
.bg {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 130vh;
  height: 130lvh;   /* the tallest the window gets, so the bar never resizes it */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #05080f url("bg-poster.jpg") center / cover no-repeat;
  transform: translate3d(0, -15vh, 0);
  transform-origin: 50% 50%;
  will-change: transform;
  filter: var(--video-filter);
}
.bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 40%, transparent 55%, var(--vignette)),
    var(--scrim);
}
@media (prefers-reduced-motion: reduce) {
  .bg { transform: none; height: 100vh; height: 100lvh; }
  .bg video { display: none; }
}

/* ---------- Glass: the one panel ---------- */
.panel, .glass {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.panel {
  padding: clamp(22.4px, 3.52vw, 51.2px);
  max-width: 656px;
}
.panel > :last-child { margin-bottom: 0; }
.panel p { color: var(--text-2); font-size: clamp(0.86rem, 1.16vw, 1.04rem); line-height: 1.55; max-width: 38em; }
.panel .fine, .fine { font-size: 0.76rem; color: var(--text-muted); line-height: 1.55; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel, .glass, .site-header, .site-footer { background: var(--panel-solid); }
}

.panel-hero {
  max-width: 832px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(32px, 4.8vw, 67.2px);
  padding-bottom: clamp(28.8px, 4vw, 57.6px);
}
.panel-hero p { margin-left: auto; margin-right: auto; }
.panel-hero .cta-row { justify-content: center; }
.panel-centre { max-width: 720px; margin: 0 auto; text-align: center; }
.panel-centre p { margin-left: auto; margin-right: auto; }
.panel-centre .cta-row { justify-content: center; }
.panel-text { max-width: 720px; margin: 0 auto; }
.panel-wide { max-width: 928px; margin: 0 auto; }

.lead { font-size: clamp(0.96rem, 1.68vw, 1.28rem) !important; line-height: 1.45 !important; color: var(--text-2); }
.eyebrow {
  display: block;
  color: var(--accent);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 11.2px;
}
.centre { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Sections ----------
   One panel and one big image each. .sec-flip puts the panel on the right. */
.sec { padding: clamp(51.2px, 8.8vh, 112px) 0; }
.sec-hero { padding-top: clamp(28.8px, 5.6vh, 64px); }
.sec-page { padding-top: clamp(28.8px, 5.6vh, 64px); padding-bottom: clamp(25.6px, 4vh, 51.2px); }
.sec-short { padding: clamp(25.6px, 4vh, 51.2px) 0; }
main > .sec:last-child { padding-bottom: clamp(57.6px, 9.6vh, 112px); }
.sec-flip .panel:not(.panel-text):not(.panel-centre):not(.panel-wide) { margin-left: auto; }

/* ---------- Product images: big, floating on the video ----------
   build.py writes <figure class="shot-fig" style="--ar:…"> for each <shot>.
   As wide as the page allows (up to 1400px), only a very tall one held a
   little narrower; edge to edge on a phone. The script sets --float as the page
   scrolls, so the image drifts a little ahead of its panel. */
.shot-fig {
  position: relative;
  margin: clamp(32px, 4.8vw, 70.4px) auto 0;
  width: min(100%, 1120px, calc(118vh * var(--ar, 1.6)));
}
.shot-fig picture, .shot-fig video { display: block; }
.shot-fig img, .shot-fig video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(11.2px, 1.28vw, 20.8px);
  box-shadow: var(--img-shadow);
  transform: translate3d(0, var(--float, 0px), 0);
  will-change: transform;
  background: #05080f;
}
.shot-fig figcaption { margin-top: 11.2px; text-align: center; color: var(--text-muted); font-size: 0.76rem; }
.shot-fig .shot-still-alt { display: none; }
@media (prefers-reduced-motion: reduce) {
  .shot-fig .shot-video { display: none; }
  .shot-fig .shot-still-alt { display: block; }
  .shot-fig img, .shot-fig video { transform: none; }
}
.shot-missing {
  aspect-ratio: 16 / 10;
  border-radius: 19.2px;
  border: 1px dashed var(--panel-border);
  background: var(--raised);
}
.shot-m { width: min(100%, 512px, calc(80vh * var(--ar, 1.3))); }
@media (max-width: 600px) {
  .shot-fig:not(.shot-m) {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    margin-top: 51.2px;
    margin-bottom: 19.2px;
  }
  /* The renders keep a margin of desktop round the window; on a phone it
     is cropped away (sideways only), so the window itself fills the width. */
  .shot-fig:not(.shot-m) { overflow-x: clip; }
  .shot-fig:not(.shot-m) img, .shot-fig:not(.shot-m) video {
    border-radius: 0;
    transform: translate3d(0, var(--float, 0px), 0) scale(1.16);
  }
  /* A picture with nothing round it to spare (the switcher): whole. */
  .shot-fig.shot-fit img { transform: translate3d(0, var(--float, 0px), 0); }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .shot-fig:not(.shot-m) img, .shot-fig:not(.shot-m) video { transform: scale(1.16); }
  .shot-fig.shot-fit img { transform: none; }
}

/* An image beside a panel (the radial menu). */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(25.6px, 4vw, 57.6px);
  align-items: center;
  margin-top: clamp(57.6px, 9.6vh, 128px);
}
.duo .shot-fig { margin: 0 auto; }
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--panel-border);
}
.header-inner {
  position: relative;          /* the menus hang from here */
  display: flex;
  align-items: center;
  gap: 9.6px;
  height: 51.2px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  font-weight: 720;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand img { display: block; border-radius: 5.6px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 3.2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a:not(.btn), .nav-menu-list a {
  display: inline-block;
  padding: 6.4px 9.6px;
  border-radius: 799.2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover, .nav-menu-list a:hover { color: var(--text); background: var(--raised); }
.site-nav a[aria-current="page"]:not(.btn), .nav-menu-list a[aria-current="page"] { color: var(--text); background: var(--raised); }
.header-cta { flex: none; }

/* Shared by the language switch and the phone menu: a <details> whose
   summary is a small pill button, opening a menu under the header. */
.hdr-pop > summary {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  min-height: 30.4px;
  padding: 4.8px 9.6px;
  border-radius: 799.2px;
  border: 1px solid var(--panel-border);
  background: var(--raised);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  user-select: none;
}
.hdr-pop > summary::-webkit-details-marker { display: none; }
.hdr-pop > summary:hover { border-color: var(--text-muted); }
.hdr-pop[open] > summary { border-color: var(--accent); }
.hdr-pop > summary .i { width: 14.4px; height: 14.4px; }
.hdr-pop > summary .chev { width: 9.6px; height: 9.6px; opacity: .7; transition: transform .15s ease; }
.hdr-pop[open] > summary .chev { transform: rotate(180deg); }

.lang-code { display: none; }
.lang-menu, .nav-menu-list {
  position: absolute;
  right: 19.2px;
  top: calc(100% + 4.8px);
  z-index: 60;
  margin: 0;
  padding: 6.4px;
  list-style: none;
  border-radius: 14.4px;
  border: 1px solid var(--panel-border);
  background: var(--menu);
  box-shadow: var(--shadow);
}
.lang-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 3.2px;
  width: min(320px, calc(100vw - 25.6px));
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow: auto;
}
.lang-menu a {
  display: block;
  padding: 5.6px 9.6px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.74rem;
  line-height: 1.35;
}
.lang-menu a:hover { background: var(--raised); }
.lang-menu a[aria-current] {
  background: color-mix(in srgb, var(--accent-strong) 22%, transparent);
  font-weight: 650;
}
.lang-menu a[aria-current]::after { content: " ✓"; color: var(--accent); }
.lang-menu .lang-note {
  grid-column: 1 / -1;
  padding: 4.8px 9.6px 6.4px;
  color: var(--text-muted);
  font-size: 0.67rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3.2px;
}

.nav-menu { display: none; }
.nav-menu-list { width: min(208px, calc(100vw - 25.6px)); }
.nav-menu-list a { display: block; padding: 8px 11.2px; border-radius: 8px; }

/* Four links since "About" (the tour) joined them: the menu takes over a
   little earlier, so they never crowd the language switch. */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 600px) {
  .lang-menu, .nav-menu-list { right: 12.8px; }
  .header-inner { gap: 6.4px; }
  .hdr-pop > summary { padding: 4.8px 8px; }
  .header-cta.btn-sm { padding: 6.4px 10.4px; }
}
@media (max-width: 390px) {
  .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lang-code { display: inline; }
  .hdr-pop > summary .chev { display: none; }
  .nav-menu > summary .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38.4px;
  padding: 9.6px 19.2px;
  border-radius: 799.2px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 620;
  font-size: 0.8rem;
  line-height: 1.2;
  /* A longer translation can wrap: keep both lines centred and even. */
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 28px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-ghost {
  background: var(--raised);
  border-color: var(--panel-border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-lg { min-height: 46.4px; padding: 12.8px 25.6px; font-size: 0.88rem; }
.btn-sm { min-height: 30.4px; padding: 6.4px 12.8px; font-size: 0.74rem; }
.btn svg { flex: none; }
.btn small { font-weight: 500; opacity: .85; }

.cta-row { display: flex; flex-wrap: wrap; gap: 9.6px; align-items: center; margin-top: 22.4px; }
.cta-note { margin: 14.4px 0 0; color: var(--text-muted) !important; font-size: 0.78rem !important; }
.cta-note span + span::before { content: "·"; margin: 0 8px; opacity: .7; }
@media (max-width: 480px) {
  .cta-row .btn { width: 100%; }
  .cta-note span { display: block; }
  .cta-note span + span::before { content: none; }
}

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  padding: 2px 7.2px;
  border-radius: 799.2px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
  white-space: nowrap;
}
.eyebrow .tag { margin-left: 4.8px; vertical-align: 0.08em; }
.tag-pro { color: var(--pro); background: var(--pro-bg); }
.tag-beta { color: var(--beta); background: var(--beta-bg); }
.tag-free { color: var(--free); background: var(--free-bg); }
.tag-next { color: var(--next); background: var(--next-bg); }

/* ---------- Lists (no boxes: hairlines between) ---------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
.ticks li { position: relative; padding-left: 24px; margin: 0 0 0.6em; color: var(--text-2); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 3.2px; top: 0.6em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.list { list-style: none; padding: 0; margin: 6.4px 0 1.4em; }
.list li {
  padding: 11.2px 0;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.86rem;
}
.list li:last-child { border-bottom: 1px solid var(--line); }
.list-big li { font-size: clamp(0.84rem, 1.12vw, 0.96rem); padding: 14.4px 0; }
.notice { font-size: 0.8rem !important; color: var(--text-muted) !important; margin-top: 19.2px; }
.notice strong { color: var(--warn); }
.price-line { font-size: 0.92rem !important; }
.price-line strong { font-size: 1.28rem; letter-spacing: -0.02em; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 6.4px 0 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 12.8px 0 12.8px 44.8px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--text-2);
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 10.4px;
  width: 28.8px; height: 28.8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-strong);
}

/* ---------- Plans ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19.2px;
  max-width: 832px;
  margin: 25.6px auto 0;
}
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { display: flex; flex-direction: column; max-width: none; }
.plan h2 { font-size: clamp(1.44rem, 2.4vw, 1.92rem); margin-bottom: 0.2em; }
.plan .price { font-size: clamp(2.08rem, 3.6vw, 2.88rem) !important; font-weight: 760; letter-spacing: -0.03em; line-height: 1.05; margin: 3.2px 0 4.8px; color: var(--text); }
.plan .price del { font-size: 0.45em; font-weight: 500; color: var(--text-muted); margin-left: 9.6px; }
.plan .price .price-vat { font-size: 0.4em; font-weight: 500; letter-spacing: 0; color: var(--text-muted); margin-left: 4px; }
.plan .price-note { color: var(--text-muted); font-size: 0.76rem; margin-bottom: 17.6px; }
.plan .ticks { flex: 1; }
.plan .btn { align-self: flex-start; margin-top: 6.4px; }
.plan-pro { border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border)); }
.fine.centre { max-width: 608px; margin: 17.6px auto 0; text-align: center; }
@media (max-width: 480px) { .plan .btn { align-self: stretch; } }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 19.2px 0 1.2em;
}
table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10.4px 11.2px;
  border-bottom: 1px solid var(--line);
}
td { color: var(--text-2); }
thead th { font-weight: 650; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.02em; }
.compare th[scope="row"] { font-weight: 500; }
.compare td, .compare thead th:not(:first-child) { text-align: center; width: 22%; }
.compare tbody tr.group th {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  padding-top: 22.4px; padding-bottom: 8px;
}
.yes { color: var(--free); font-weight: 700; }
.no { color: var(--text-muted); }
@media (max-width: 480px) {
  th, td { padding: 8px 6.4px; }
  .compare { font-size: 0.72rem; }
}

/* ---------- FAQ: a plain list in a panel ---------- */
.faq { margin-top: 12.8px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 35.2px 16px 0;
  font-weight: 620;
  font-size: clamp(0.84rem, 1.12vw, 0.96rem);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6.4px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { font-size: 0.84rem; padding-bottom: 6.4px; }

/* ---------- Long-form text (legal pages) ---------- */
.doc-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 25.6px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 57.6px;
}
.toc {
  position: sticky;
  top: 70.4px;
  max-height: calc(100vh - 88px);
  overflow: auto;
  padding: 16px;
  border-radius: 16px;
  font-size: 0.7rem;
}
.toc h2 { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 4.8px; }
.toc a { color: var(--text-muted); text-decoration: none; display: block; line-height: 1.35; }
.toc a:hover { color: var(--text); }
@media (max-width: 960px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 22.4px; }
  .toc { position: static; max-height: none; }
}

.prose { min-width: 0; max-width: 720px; overflow-wrap: break-word; }
.prose.panel { padding: clamp(17.6px, 3.2vw, 38.4px); }
.prose p, .prose li { color: var(--text); font-size: 0.8rem; line-height: 1.65; max-width: none; }
.prose h1 { font-size: clamp(1.52rem, 3.52vw, 2.24rem); }
.prose h2 { font-size: 1.2rem; letter-spacing: -0.015em; margin-top: 2em; padding-top: 0.2em; }
.prose h3 { font-size: 0.92rem; margin-top: 1.8em; }
.prose h4 { font-size: 0.8rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin: 0 0 0.4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose a { overflow-wrap: anywhere; }
.prose blockquote {
  margin: 0 0 1.4em;
  padding: 12.8px 16px;
  border-radius: 12.8px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.prose blockquote.draft {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose pre {
  margin: 0 0 1.4em;
  padding: 12.8px 14.4px;
  border-radius: var(--radius-sm);
  background: var(--raised);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.66rem;
  line-height: 1.5;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.prose .table-wrap { margin: 0 0 1.4em; }
.prose .table-wrap table { font-size: 0.7rem; }
.prose .table-wrap td, .prose .table-wrap th { min-width: 7em; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--panel-border);
  padding: 32px 0 38.4px;
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 22.4px;
}
.footer-inner p { margin: 6.4px 0 0; }
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4.8px 16px;
}
.footer-nav a { color: var(--text-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); text-decoration: underline; }
.footer-fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14.4px; font-size: 0.69rem; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-nav ul { justify-content: flex-start; }
}

/* ---------- Simple centred pages (404, buy) ---------- */
.centre-page {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 51.2px 0;
}
.centre-page .panel { width: 100%; }
.centre-page h1 { font-size: clamp(1.76rem, 4vw, 2.72rem); }
.big { font-size: clamp(3.2rem, 11.2vw, 5.6rem) !important; font-weight: 760; letter-spacing: -0.05em; line-height: 1; margin-bottom: 0.15em; color: var(--accent) !important; }

/* ---------- Line icons ---------- */
.i {
  width: 17.6px; height: 17.6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .i { width: 16px; height: 16px; stroke-width: 2; }

/* A table that becomes a list on a phone (download page) */
@media (max-width: 600px) {
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack tr, .stack th, .stack td { display: block; }
  .stack tbody tr { padding: 11.2px 0; border-bottom: 1px solid var(--line); }
  .stack tbody th, .stack tbody td { padding: 2px 0; border: 0; }
  .stack tbody th { font-size: 0.84rem; margin-bottom: 3.2px; }
  .stack td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-muted);
    font-weight: 600;
  }
}

/* ---------- Tilt: the glass turning with the scroll ----------
   partials/scripts.html sets each panel's and product image's transform as
   the page scrolls (perspective, rotateX, a little scale) and --tilt (0 flat
   … 1 fully turned): a sheen slides over the glass and the shadow under it
   deepens. Flat in the middle of the window, with no transform at all. */
.tilt { transform-origin: 50% 50%; }
.tilting { will-change: transform; }
.panel.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 32%, transparent 55%, transparent 70%, rgba(255, 255, 255, 0.07));
  background-size: 100% 220%;
  background-position: 0 var(--sheen, 0%);
  opacity: calc(var(--tilt, 0) * 0.9);
}
.panel.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 50px 90px rgba(0, 4, 14, 0.5), 0 18px 34px rgba(0, 4, 14, 0.3);
  opacity: var(--tilt, 0);
}
@media (prefers-reduced-motion: reduce) {
  .panel.tilt::before, .panel.tilt::after { display: none; }
}

/* ==========================================================================
   The home page: two-tone headings, feature rows (a card beside the app),
   the floating header, the theme switch, the card carousel, the page's own
   wallpaper, and the 80% scale's phone corrections.
   ========================================================================== */

/* A floating header: a glass pill a little in from the edges. */
.site-header {
  top: 10px;
  margin: 10px auto 0;
  width: min(calc(100% - 24px), var(--wrap));
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.site-header .wrap { padding: 0 14px; }
.header-inner { height: 52px; gap: 10px; }
.site-nav a:not(.btn) { padding: 6px 10px; font-size: 0.82rem; }

/* Light and dark: the sun shows in the dark, the moon in the light. */
.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--text-muted); }
.theme-toggle .i { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .moon { display: block; }
}
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
}

/* Headings in two tones: the claim, then a quieter second line. */
h1 .h-sub, h2 .h-sub { display: block; color: var(--text-muted); font-weight: inherit; }
.caption { margin: 22px auto 0; max-width: 46em; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.caption strong { color: var(--text); }

/* The hero: centred words, the dock below them. */
.hero-head { max-width: 900px; margin: 0 auto; text-align: center; padding-top: clamp(24px, 6vh, 72px); }
.hero-head h1 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
.hero-head .lead { max-width: 40em; margin: 18px auto 0; }
.hero-head .cta-row { justify-content: center; }
.hero-shot.shot-fig { width: min(100%, 980px); margin-top: clamp(28px, 5vh, 56px); }

/* A feature: a glass card beside the app, sides alternating. */
.feat { padding: clamp(48px, 10vh, 120px) 0; }
.feat-row {
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}
.feat-flip .feat-row:not(.feat-flip-row), .feat-row.feat-flip-row { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); }
.feat-flip .feat-row:not(.feat-flip-row) > .feat-card, .feat-row.feat-flip-row > .feat-card { order: 2; }
.feat-flip .feat-row.feat-row-2 { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); }
.feat-flip .feat-row.feat-row-2 > .feat-card { order: 0; }
.feat-row-2 { margin-top: clamp(48px, 9vh, 110px); }
.feat-card.panel { max-width: none; margin: 0; padding: clamp(20px, 2.4vw, 34px); }
.feat-card h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
.feat-card p { font-size: 0.95rem; }
.feat-row > .shot-fig { margin: 0; width: 100%; }
.feat-row > .shot-fig.shot-m { width: min(100%, 520px); justify-self: center; }
.feat-wide .wide-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.feat-wide .wide-head p { color: var(--text-2); }
.feat-wide .shot-fig { margin-top: 0; }
@media (max-width: 900px) {
  .feat-row, .feat-flip .feat-row:not(.feat-flip-row), .feat-row.feat-flip-row, .feat-flip .feat-row.feat-row-2 { grid-template-columns: minmax(0, 1fr); }
  .feat-flip .feat-row > .feat-card, .feat-row.feat-flip-row > .feat-card { order: 0; }
}

/* Small badges under a heading. */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; list-style: none; }
.badge {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-strong) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- "There's a tab for that": pills and a carousel of cards ---------- */
.cards-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.cards-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.1rem); max-width: 22em; }
.pills { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--panel-border); }
.pill {
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
}
.pill[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
.cards { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -8px; padding: 8px; }
.cards::-webkit-scrollbar { display: none; }
.cards-track { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }

/* The cards: glass, not colour — a quiet fill that reads on any background,
   a faint tint of the kind of tool, a rim, a layered shadow. On a computer
   each turns a little towards the pointer, with a soft highlight, the
   picture moving a touch more than the words (transform only: the page
   sets --px/--py/--rx/--ry once a frame, in scripts.html). */
.cards-track {
  --card-fill: rgba(17, 21, 30, 0.86);
  --card-rim: rgba(255, 255, 255, 0.10);
  --glass-1: rgba(255, 255, 255, 0.07);
  --glass-2: rgba(255, 255, 255, 0.15);
  --sheen-c: rgba(255, 255, 255, 0.13);
  --card-shadow: 0 1px 2px rgba(0, 4, 14, 0.28), 0 6px 14px rgba(0, 4, 14, 0.22), 0 22px 44px rgba(0, 4, 14, 0.28);
  --ink-work: #6aaeff; --ink-write: #5fe0c0; --ink-design: #ffc06a; --ink-every: #7ee08f;
}
:root[data-theme="light"] .cards-track {
  --card-fill: rgba(255, 255, 255, 0.86);
  --card-rim: rgba(15, 30, 60, 0.11);
  --glass-1: rgba(15, 30, 60, 0.05);
  --glass-2: rgba(15, 30, 60, 0.12);
  --sheen-c: rgba(255, 255, 255, 0.55);
  --card-shadow: 0 1px 2px rgba(10, 25, 50, 0.08), 0 6px 14px rgba(10, 25, 50, 0.08), 0 22px 44px rgba(10, 25, 50, 0.12);
  --ink-work: #1f5fd0; --ink-write: #0b7a68; --ink-design: #9a5a00; --ink-every: #1f7a35;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cards-track {
    --card-fill: rgba(255, 255, 255, 0.86);
    --card-rim: rgba(15, 30, 60, 0.11);
    --glass-1: rgba(15, 30, 60, 0.05);
    --glass-2: rgba(15, 30, 60, 0.12);
    --sheen-c: rgba(255, 255, 255, 0.55);
    --card-shadow: 0 1px 2px rgba(10, 25, 50, 0.08), 0 6px 14px rgba(10, 25, 50, 0.08), 0 22px 44px rgba(10, 25, 50, 0.12);
    --ink-work: #1f5fd0; --ink-write: #0b7a68; --ink-design: #9a5a00; --ink-every: #1f7a35;
  }
}
.card[data-group="work"] { --ink: var(--ink-work); }
.card[data-group="write"] { --ink: var(--ink-write); }
.card[data-group="design"] { --ink: var(--ink-design); }
.card[data-group="every"] { --ink: var(--ink-every); }
.card {
  position: relative;
  flex: none;
  width: 264px;
  height: 414px;
  box-sizing: border-box;
  scroll-snap-align: start;
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--ink) 9%, transparent), transparent 55%),
    var(--card-fill);
  border: 1px solid var(--card-rim);
  box-shadow: inset 0 1px 0 var(--glass-1), var(--card-shadow);
  display: flex;
  flex-direction: column;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.card[hidden] { display: none; }
.card.tilting { transition: transform 0.14s ease-out, opacity 0.25s ease; }
.card-face, .card .art { position: relative; z-index: 1; }
.card-face, .card .art { transform: translate3d(calc(var(--px, 0) * 2px), calc(var(--py, 0) * 2px), 0); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.card .art { transform: translate3d(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 6px), 0); }
.card.tilting .card-face, .card.tilting .art { transition-duration: 0.14s; }
.card-sheen {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, var(--sheen-c), transparent 32%);
  opacity: 0;
  transform: translate3d(calc(var(--px, 0) * 25%), calc(var(--py, 0) * 25%), 0);
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:hover { --lift: -3px; }
  .card.tilting .card-sheen { opacity: 1; }
}
.card-top { display: flex; align-items: center; gap: 10px; }
.card h3 { flex: 1; margin: 0; font-size: 0.95rem; color: var(--text); }
.card p { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-2); }
.card-facts {
  list-style: none;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--card-rim);
  display: grid;
  gap: 6px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--text-2);
}
.card-facts li { position: relative; padding-left: 13px; }
.card-facts li::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.card kbd {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--text);
  background: var(--glass-1);
  box-shadow: inset 0 0 0 1px var(--glass-2);
  white-space: nowrap;
}
.card-icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  position: relative;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent);
}
.card-icon::after {
  content: ""; position: absolute; inset: 9px; border-radius: 3px;
  border: 1.5px solid var(--ink);
}
.ci-split::after { background: linear-gradient(90deg, transparent 44%, var(--ink) 44% 56%, transparent 56%); }
.ci-colour::after, .ci-timer::after, .ci-emoji::after { border-radius: 50%; }
.ci-macro::after { border-radius: 2px; transform: rotate(45deg); inset: 10px; }
.card-go {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2);
  position: relative;
}
.card-go::after { content: ""; position: absolute; left: 10px; top: 10px; width: 6px; height: 6px; border: solid var(--text); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.card-go:hover { background: var(--glass-2); }
.cards-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 0.86rem; }
.cards-foot a { color: var(--text-muted); text-decoration: none; }
.cards-foot a:hover { color: var(--text); }
.cards-nav { display: flex; gap: 8px; }
.cards-nav button {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--panel-border);
  background: var(--raised); color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.cards-nav .i { width: 16px; height: 16px; }

/* Each card's little picture of its tab, moving (paused off screen): slim
   shapes in glass tones, the kind's tint only as an accent. */
.art {
  margin-top: auto;
  height: 120px;
  flex: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
  background: var(--glass-1);
  box-shadow: inset 0 0 0 1px var(--card-rim);
}
.cards:not(.cards-on) .art *, .cards:not(.cards-on) .art, .cards:not(.cards-on) .art::after { animation-play-state: paused !important; }

.art-clip { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.art-clip .ar { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 6px; border-radius: 6px; background: var(--glass-1); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ink) 70%, transparent); animation: art-slide 4s ease-in-out infinite; }
.art-clip .ar:nth-child(2) { animation-delay: 0.25s; }
.art-clip .ar:nth-child(3) { animation-delay: 0.5s; }
.art-clip i { width: 11px; height: 11px; border-radius: 3px; background: var(--glass-2); flex: none; }
.art-clip i.sw { background: color-mix(in srgb, var(--ink-work) 60%, transparent); }
.art-clip b { flex: 1; height: 4px; border-radius: 2px; background: var(--glass-2); }
.art-clip .ar:nth-child(2) b { margin-right: 18px; }
.art-clip .ar:nth-child(3) b { margin-right: 34px; }
.art-clip kbd { font-size: 0.64rem; padding: 0 4px; }
@keyframes art-slide { 0%, 12% { transform: translateY(-6px); opacity: 0; } 22%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }

.art-macro { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 6px 4px; }
.art-macro .st { font: 600 0.76rem/1 var(--mono); color: var(--text); padding: 6px 7px; border-radius: 6px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); animation: art-step 3.2s ease-in-out infinite; }
.art-macro .st:nth-of-type(2) { animation-delay: 0.4s; } .art-macro .st:nth-of-type(3) { animation-delay: 0.8s; } .art-macro .st:nth-of-type(4) { animation-delay: 1.2s; }
.art-macro em { font-style: normal; font-size: 0.7rem; color: var(--text-muted); }
@keyframes art-step { 0%, 100% { background: var(--glass-1); transform: none; } 12% { background: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); } 26% { background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); transform: none; } }

.art-split { display: flex; gap: 5px; }
.art-split i { flex: 1; border-radius: 7px; padding: 8px 7px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); animation: art-grow 5s ease-in-out infinite; }
.art-split i + i { animation-direction: reverse; }
.art-split b { display: block; height: 3px; margin-bottom: 7px; border-radius: 2px; background: var(--glass-2); }
.art-split b:first-child { width: 55%; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.art-split b:nth-child(3) { width: 75%; }
@keyframes art-grow { 0%, 100% { flex-grow: 1; } 50% { flex-grow: 1.7; } }

.art-web span { display: block; width: fit-content; margin: 0 auto 10px; padding: 3px 12px; border-radius: 999px; font: 0.66rem/1.3 var(--mono); font-style: normal; color: var(--text-2); background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); }
.art-web b { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--glass-2); animation: art-load 3s ease-in-out infinite; transform-origin: left; }
.art-web b:first-of-type { width: 45%; height: 7px; background: color-mix(in srgb, var(--ink) 50%, transparent); }
.art-web b:nth-of-type(2) { width: 85%; animation-delay: 0.3s; } .art-web b:nth-of-type(3) { width: 62%; animation-delay: 0.6s; }
@keyframes art-load { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }

.art-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; align-content: center; }
.art-files i { position: relative; height: 36px; border-radius: 3px 6px 6px 6px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2), inset 0 -6px 0 color-mix(in srgb, var(--ink) 28%, transparent); animation: art-pop 4s ease-in-out infinite; }
.art-files i::before { content: ""; position: absolute; left: 0; top: -4px; width: 40%; height: 5px; border-radius: 3px 3px 0 0; background: var(--glass-2); }
.art-files i:nth-child(2n) { animation-delay: 0.4s; } .art-files i:nth-child(3n) { animation-delay: 0.8s; }
@keyframes art-pop { 0%, 100% { transform: none; } 10% { transform: translateY(-4px); } 20% { transform: none; } }

.art-notes i { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--glass-2); transform-origin: left; animation: art-type 4s steps(14) infinite; }
.art-notes i:first-child { margin-top: 2px; height: 7px; width: 55%; background: color-mix(in srgb, var(--text) 40%, transparent); }
.art-notes i:nth-child(2) { animation-delay: 0.6s; } .art-notes i:nth-child(3) { animation-delay: 1.2s; width: 75%; }
.art-notes u { display: flex; align-items: center; gap: 7px; margin-top: 9px; text-decoration: none; }
.art-notes u::before { content: ""; width: 9px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--glass-2); flex: none; }
.art-notes u.on::before { background: var(--ink); box-shadow: none; }
.art-notes u::after { content: ""; flex: 1; height: 4px; border-radius: 2px; background: var(--glass-2); margin-right: 30%; }
@keyframes art-type { 0% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }

.art-snip, .art-calc, .art-date { display: flex; flex-direction: column; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; }
.art-snip span:first-child, .art-calc span { padding: 6px 9px; border-radius: 7px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); width: fit-content; color: var(--text); }
.art-snip span:last-child { color: var(--text); padding-left: 9px; box-shadow: inset 2px 0 0 var(--ink); opacity: 0; animation: art-appear 3.5s ease-in-out infinite; }
.art-calc b { color: var(--text); font-size: 1rem; padding-left: 9px; box-shadow: inset 2px 0 0 var(--ink); animation: art-appear 3.5s ease-in-out infinite; opacity: 0; }
@keyframes art-appear { 0%, 30% { opacity: 0; transform: translateY(5px); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.art-date { align-items: center; }
.art-date span { font-size: 1.1rem; color: var(--text); font-weight: 650; }
.art-date span::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 3px; vertical-align: -0.15em; background: var(--ink); animation: art-caret 1s steps(1) infinite; }
@keyframes art-caret { 50% { opacity: 0; } }

.art-emoji { display: flex; align-items: center; justify-content: space-around; font-size: 1.45rem; }
.art-emoji i { font-style: normal; animation: art-bounce 2.4s ease-in-out infinite; }
.art-emoji i:nth-child(2) { animation-delay: 0.2s; } .art-emoji i:nth-child(3) { animation-delay: 0.4s; } .art-emoji i:nth-child(4) { animation-delay: 0.6s; }
@keyframes art-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-8px) scale(1.06); } }

.art-colour { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: center; }
.art-colour i { height: 38px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--glass-2); animation: art-pick 5s ease-in-out infinite; }
.art-colour i:nth-child(1) { background: rgba(47, 184, 255, 0.5); } .art-colour i:nth-child(2) { background: rgba(95, 224, 192, 0.5); animation-delay: 0.4s; } .art-colour i:nth-child(3) { background: rgba(255, 192, 106, 0.5); animation-delay: 0.8s; } .art-colour i:nth-child(4) { background: rgba(76, 141, 255, 0.55); animation-delay: 1.2s; } .art-colour i:nth-child(5) { background: rgba(126, 224, 143, 0.5); animation-delay: 1.6s; }
.art-colour span { grid-column: 1 / -1; justify-self: start; font: 0.7rem/1 var(--mono); color: var(--text); padding: 4px 7px; border-radius: 5px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); }
@keyframes art-pick { 0%, 100% { transform: none; } 10% { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--text); } 20% { transform: none; } }

.art-shot i { position: absolute; border: 1.5px dashed var(--text); border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); animation: art-crop 4s ease-in-out infinite; }
@keyframes art-crop { 0% { left: 40%; top: 40%; width: 0; height: 0; opacity: 0; } 10% { opacity: 1; } 50%, 85% { left: 14%; top: 20%; width: 66%; height: 56%; opacity: 1; } 100% { opacity: 0; left: 14%; top: 20%; width: 66%; height: 56%; } }

.art-wall i { position: absolute; inset: 8px; border-radius: 8px; opacity: 0.75; animation: art-fade 9s linear infinite; }
.art-wall i:nth-child(1) { background: linear-gradient(160deg, rgba(11, 51, 80, 0.7), rgba(43, 240, 180, 0.45)); }
.art-wall i:nth-child(2) { background: linear-gradient(160deg, rgba(10, 31, 68, 0.7), rgba(242, 166, 90, 0.5)); animation-delay: 3s; }
.art-wall i:nth-child(3) { background: linear-gradient(160deg, rgba(169, 216, 245, 0.6), rgba(29, 91, 147, 0.6)); animation-delay: 6s; }
@keyframes art-fade { 0%, 28% { opacity: 0.75; } 34%, 94% { opacity: 0; } 100% { opacity: 0.75; } }

.art-qr i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 4px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--text) 70%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.art-qr::after { content: ""; position: absolute; left: calc(50% - 42px); width: 84px; height: 1.5px; background: var(--ink); box-shadow: 0 0 8px var(--ink); animation: art-scan 2.4s ease-in-out infinite alternate; }
@keyframes art-scan { from { top: 22px; } to { top: 96px; } }

.art-system span { position: absolute; left: 10px; top: 8px; font: 600 0.64rem/1 var(--mono); color: var(--text-2); letter-spacing: 0.04em; }
.art-system svg { position: absolute; left: 10px; right: 10px; bottom: 10px; width: calc(100% - 20px); height: 60%; }
.art-system path { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 400; animation: art-draw 4s linear infinite; }
@keyframes art-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

.art-timer { display: grid; place-items: center; }
.art-timer svg { grid-area: 1 / 1; width: 92px; height: 92px; transform: rotate(-90deg); }
.art-timer circle { fill: none; stroke: var(--glass-2); stroke-width: 2.5; }
.art-timer circle.run { stroke: var(--ink); stroke-dasharray: 151; animation: art-ring 6s linear infinite; }
.art-timer span { grid-area: 1 / 1; font: 600 0.8rem/1 var(--mono); color: var(--text); }
@keyframes art-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 151; } }

.art-sound { display: flex; align-items: center; gap: 14px; justify-content: center; }
.art-sound i { width: 7px; border-radius: 4px; background: var(--glass-1); box-shadow: inset 0 0 0 1px var(--glass-2); height: 92px; position: relative; overflow: hidden; }
.art-sound i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; border-radius: 4px; background: color-mix(in srgb, var(--ink) 75%, transparent); animation: art-level 2.2s ease-in-out infinite alternate; }
.art-sound i:nth-child(2)::after { animation-delay: 0.4s; } .art-sound i:nth-child(3)::after { animation-delay: 0.8s; } .art-sound i:nth-child(4)::after { animation-delay: 1.2s; }
@keyframes art-level { from { height: 30%; } to { height: 85%; } }

/* ---------- The page's own wallpaper (the Wallpaper tab and "wallpaper" pick it) ---------- */
.bg-wall {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bg-wall.on { opacity: 1; }

/* A few stars in the dark sky. */
.bg-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 38% 32%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 88% 40%, #fff, transparent),
    radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 58% 74%, #fff, transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 94% 82%, #fff, transparent);
}
:root[data-theme="light"] .bg-stars { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg-stars { display: none; } }

/* Theme changes fade rather than snap. */
.theme-fade, .theme-fade * { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease !important; }

/* Text sections far down the page are drawn only when they come near. */
.sec-lazy { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* The 80% scale suits a computer; a phone keeps readable sizes. */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .panel p, .feat-card p { font-size: 1rem; }
  .site-header { top: 6px; margin-top: 6px; }
}

/* ==========================================================================
   A calmer, centred page: content in a ~1160px column with real gutters,
   a feature's card beside the app at the app's own size (stacked when the
   window is too narrow for both), readable navigation.
   ========================================================================== */
:root { --wrap: 1240px; }
.wrap { padding: 0 clamp(16px, 4vw, 40px); }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.site-header { width: min(calc(100% - 32px), calc(var(--wrap) - 48px)); }
.site-nav a:not(.btn) { padding: 7px 11px; font-size: 0.95rem; }
.site-header .btn { font-size: 0.92rem; }

.feat-row { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.feat-flip .feat-row:not(.feat-flip-row), .feat-row.feat-flip-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.feat-flip .feat-row.feat-row-2 { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.feat-row > * { min-width: 0; }
.feat-row > .shot-fig { justify-self: center; }
@media (max-width: 1239px) {
  .feat-row, .feat-flip .feat-row:not(.feat-flip-row), .feat-row.feat-flip-row, .feat-flip .feat-row.feat-row-2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feat-flip .feat-row > .feat-card, .feat-row.feat-flip-row > .feat-card { order: 0; }
  .feat-card.panel { max-width: 740px; width: 100%; justify-self: center; }
}
/* Room under a showcase for its "Play again". */
.feat-row > .shot-fig.is-live, .feat-wide .shot-fig.is-live { margin-bottom: 40px; }

/* The cards stay in the column, fading where they scroll out. */
.cards {
  margin: 0;
  padding: 8px 28px;
  scroll-padding-inline: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.site-header { background: color-mix(in srgb, var(--bg) 84%, transparent); }
.hero-head { padding-top: clamp(16px, 4vh, 48px); }
.hero-shot.shot-fig { margin-top: clamp(24px, 4vh, 44px); }

/* The Features page's list of the rest. */
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.all-grid li { padding: 20px 22px; border-radius: 18px; background: var(--raised); border: 1px solid var(--panel-border); }
.all-grid h3 { margin: 0 0 6px; font-size: 1.05rem; }
.all-grid p { margin: 0; color: var(--text-2); font-size: 0.92rem; }

/* ==========================================================================
   Gutters on every width, nothing full-bleed but the background, and the
   phone layout (header, "Send to my Mac", cropped readable pictures).
   ========================================================================== */
.wrap { padding: 0 40px; }
@media (max-width: 1023px) { .wrap { padding: 0 32px; } }
@media (max-width: 599px) { .wrap { padding: 0 20px; } }
.site-header { width: min(calc(100% - 2 * 40px + 16px), calc(var(--wrap) - 48px)); }
@media (max-width: 1023px) { .site-header { width: calc(100% - 2 * 32px + 16px); } }
@media (max-width: 599px) { .site-header { width: calc(100% - 2 * 20px + 8px); } }

/* No picture runs edge to edge any more. */
@media (max-width: 600px) {
  .shot-fig:not(.shot-m) { width: 100%; margin-left: 0; margin-right: 0; overflow: visible; }
  .shot-fig:not(.shot-m) img, .shot-fig:not(.shot-m) video { border-radius: 14px; transform: none; }
}

.cta-phone, .phone-bar, .menu-extra { display: none; }
.site-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--menu);
  color: var(--text);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.site-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 719px) {
  /* The header: the logo, and one menu with everything in it. */
  .site-header .header-inner > .lang-switch,
  .site-header .header-inner > .header-cta,
  .site-header .header-inner > .theme-toggle,
  .site-nav { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-menu > summary { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: 0.95rem; }
  .nav-menu > summary .label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-menu-list {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 74px;
    width: auto;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow: auto;
    padding: 10px;
  }
  .nav-menu-list a { padding: 13px 14px; font-size: 1rem; }
  .menu-extra { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .nav-menu-list .menu-theme {
    width: 100%; height: auto; min-height: 48px;
    display: flex; align-items: center; gap: 12px; justify-content: flex-start;
    padding: 0 14px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 1rem; color: var(--text);
  }
  .menu-label { display: block; padding: 8px 14px 4px; color: var(--text-muted); font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
  .menu-lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .menu-lang-list a { padding: 11px 14px; font-size: 0.95rem; }
  .menu-lang-list a[aria-current] { font-weight: 650; color: var(--accent); }
  .menu-lang-list .lang-note { grid-column: 1 / -1; padding: 6px 14px; color: var(--text-muted); font-size: 0.8rem; }

  /* A Mac app isn't installed from a phone: send it to the Mac. */
  .cta-desktop { display: none !important; }
  .cta-phone { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .cta-phone .btn { width: 100%; min-height: 52px; justify-content: center; }
  .phone-note { margin: 2px 0 0; color: var(--text-muted); font-size: 0.92rem; text-align: center; }
  .dl-anyway { align-self: center; padding: 12px 16px; min-height: 44px; font-size: 0.92rem; }
  .btn { min-height: 48px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .phone-bar {
    display: block;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.3s ease;
  }
  .phone-bar.on { transform: none; }
  .phone-bar .btn { width: 100%; min-height: 52px; justify-content: center; box-shadow: 0 12px 30px rgba(0, 4, 14, 0.4); }
  .hero-hint { display: none; }
}

/* Pictures on phones and tablets (no live demo there): the interesting
   part, at a size its text can be read, inside the gutters. Tapping one
   opens it whole. */
@media (max-width: 999px) {
  .shot-fig, .shot-fig.shot-m, .hero-shot.shot-fig { width: 100%; margin-left: 0; margin-right: 0; container-type: inline-size; }
  .shot-fig .shot-video { display: none !important; }
  .shot-fig .shot-still-alt { display: block; }
  .shot-fig > picture {
    --iw: max(100cqw, calc(var(--w1, 900) * var(--z, 0.82) * 1px));
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: var(--img-shadow);
    height: min(calc(100cqw / var(--crop, 0.85)), calc(var(--iw) / var(--ar)));
    cursor: zoom-in;
  }
  .shot-fig > picture img {
    position: absolute;
    max-width: none;
    width: var(--iw);
    height: calc(var(--iw) / var(--ar));
    left: calc(var(--fx, 0) * (100cqw - var(--iw)));
    top: calc(var(--fy, 0) * (100% - var(--iw) / var(--ar)));
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }
  /* Cropped from the left edge, where the text starts: a crop through the
     middle cut words in half on the left. */
  .shot-fig[data-live="hero"] { --w1: 600; --z: 0.9; --crop: 0.82; --fx: 0; --fy: 0; }
  .shot-fig[data-live="workspace"] { --w1: 560; --z: 0.9; --crop: 0.82; --fx: 0; --fy: 0; }
  .shot-fig[data-live="orders"] { --w1: 560; --z: 0.9; --crop: 0.72; --fx: 0; --fy: 0.1; }
  .shot-fig[data-live="assistant"] { --w1: 560; --z: 0.9; --crop: 0.82; --fx: 0.6; --fy: 0.15; }
  .shot-fig[data-lava] { --w1: 1200; --z: 0.5; --crop: 1.05; --fx: 0.55; --fy: 0.3; }
  .shot-fig[data-live="look"] { --w1: 560; --z: 0.9; --crop: 0.85; --fx: 0; --fy: 0; }
  .shot-fig[data-live="snap"] { --w1: 560; --z: 0.75; --crop: 1.1; --fx: 0.3; --fy: 0.6; }
  .shot-fig[data-live="convert"] { --w1: 560; --z: 0.9; --crop: 0.85; --fx: 0; --fy: 0.1; }
  .shot-fig[data-live="wallpaper"] { --w1: 560; --z: 0.9; --crop: 0.95; --fx: 0; --fy: 0; }
  .shot-fig[data-live="island"] { --w1: 560; --z: 0.9; --crop: 1.1; --fx: 0.5; --fy: 0; }
  .shot-fig[data-live="radial"] { --w1: 560; --z: 0.8; --crop: 1; --fx: 0.5; --fy: 0.5; }
  .shot-fig[data-live="switcher"] { --w1: 624; --z: 1.4; --crop: 1.05; --fx: 0.42; --fy: 0.25; }
}
/* Tablets show more of each. */
@media (min-width: 600px) and (max-width: 999px) {
  .shot-fig > picture { height: min(calc(100cqw / var(--crop-t, 1.35)), calc(var(--iw) / var(--ar))); }
  .shot-fig > picture { --iw: max(100cqw, calc(var(--w1, 900) * 0.9px)); }
}

/* The picture opened whole: pan it, tap to close. */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2, 5, 12, 0.92);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: grid; place-items: center;
  padding: 64px 16px 24px;
}
.lightbox img { display: block; max-width: none; border-radius: 10px; }
.lightbox-close {
  position: fixed; top: 14px; right: 14px; z-index: 101;
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 26, 38, 0.9); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
/* The category switch stays one row: on a narrow screen it scrolls
   sideways (snapping to a pill), with a soft fade at the right edge while
   more is hidden (.more-right, set by the script). No change on a wide
   screen, where it fits. */
.pills {
  position: relative; flex-wrap: nowrap; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: 4px;
}
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; white-space: nowrap; scroll-snap-align: start; }
@media (max-width: 420px) { .pill { padding-inline: 11px; } }
.pills.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
@media (max-width: 599px) { .cards-head { flex-direction: column; align-items: flex-start; } }
:root { --blur: blur(14px) saturate(140%); }

/* Round 5: the dock is about as wide as the card beside it (500px dock,
   480px card), at its own size. */
@media (min-width: 1240px) {
  .feat-row { grid-template-columns: minmax(360px, 480px) minmax(560px, 1fr); }
  .feat-flip .feat-row:not(.feat-flip-row), .feat-row.feat-flip-row { grid-template-columns: minmax(560px, 1fr) minmax(360px, 480px); }
  .feat-flip .feat-row.feat-row-2 { grid-template-columns: minmax(360px, 480px) minmax(560px, 1fr); }
}
/* The phone menu button: no border. */
@media (max-width: 719px) {
  .nav-menu > summary, .nav-menu[open] > summary { border-color: transparent; background: none; }
}

/* Back to top: calm, bottom right; above the phone bar on phones. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--menu);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.to-top.on { opacity: 0.9; transform: none; pointer-events: auto; }
.to-top:hover { opacity: 1; }
.to-top .i { width: 18px; height: 18px; }
@media (max-width: 719px) { .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 16px; } }

/* Words straight on the background (not in a card) keep their contrast
   over any wallpaper and theme, with no veil behind them: their colours
   follow what is behind them (the theme, or the wallpaper's own tone once
   one is set — scripts.html sets data-wall-tone), with a barely visible,
   tight shadow towards the background. */
:root {
  --onbg-text: #f4f7fb; --onbg-muted: #d0dae8; --onbg-shadow: 0 0 2px rgba(2, 6, 14, 0.55), 0 1px 10px rgba(2, 6, 14, 0.3);
}
:root[data-theme="light"] { --onbg-text: #0a1220; --onbg-muted: #2a3448; --onbg-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 10px rgba(255, 255, 255, 0.35); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --onbg-text: #0a1220; --onbg-muted: #2a3448; --onbg-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 10px rgba(255, 255, 255, 0.35); }
}
:root[data-wall-tone="dark"] { --onbg-text: #f4f7fb; --onbg-muted: #d0dae8; --onbg-shadow: 0 0 2px rgba(2, 6, 14, 0.55), 0 1px 10px rgba(2, 6, 14, 0.3); }
:root[data-wall-tone="light"] { --onbg-text: #0a1220; --onbg-muted: #2a3448; --onbg-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 10px rgba(255, 255, 255, 0.35); }
html .hero-head h1, html .cards-head h2, html .wide-head h2 { color: var(--onbg-text); text-shadow: var(--onbg-shadow); }
html .hero-head h1 .h-sub, html .cards-head h2 .h-sub, html .wide-head h2 .h-sub,
html .hero-head .lead, html .hero-head .cta-note, html .wide-head p, html .wide-head .eyebrow { color: var(--onbg-muted); text-shadow: var(--onbg-shadow); }
.bg-wall-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* The header, island-style (computers, where the links show).
   At the top of the page it is the full glass bar. Scrolled, the bar's
   background shrinks into one small black pill round the links and the
   language, folded to dots and a globe; the logo, Download and the
   light/dark switch stay exactly where they were on the bar's line, with
   no strip behind them. Under the pointer (on the pill, then anywhere on
   the header) or keyboard focus it opens back into the full bar.
   The background is one layer (::before) clipped to the bar or to the
   pill, so the change is a single clip-path transition. */
.nav-pill { display: none; }
@media (min-width: 1181px) {
  .site-header {
    --pill-t: 0px; --pill-r: 0px; --pill-b: 0px; --pill-l: 0px;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .site-header::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: inset 0 0 0 1px var(--panel-border);
    clip-path: inset(0px 0px 0px 0px round 16px);
    transition: clip-path 0.5s cubic-bezier(0.32, 0.72, 0.24, 1), background-color 0.35s ease, box-shadow 0.35s ease;
  }
  .site-nav { display: flex; align-items: center; }
  .site-nav ul {
    max-width: 1100px;
    overflow: hidden;
    transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.3s ease;
  }
  .nav-pill {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    width: 0;
    height: 34px;
    opacity: 0;
    color: #fff;
    transition: width 0.5s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.25s ease;
  }
  .nav-pill i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); flex: none; }
  .nav-pill svg { width: 15px; height: 15px; margin-left: 7px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.85; }
  .site-header .header-inner > .lang-switch { transition: opacity 0.25s ease, visibility 0s linear 0s; }

  /* Folded. */
  .site-header.compact:not(.open)::before {
    background-color: #07090d;
    box-shadow: none;
    clip-path: inset(var(--pill-t) var(--pill-r) var(--pill-b) var(--pill-l) round 999px);
  }
  .site-header.compact:not(.open) .site-nav ul { max-width: 0; opacity: 0; }
  .site-header.compact:not(.open) .nav-pill { width: 92px; opacity: 1; }
  /* The language folds into the pill (its globe); its place on the line is
     kept, so nothing beside it moves. */
  .site-header.compact:not(.open) .header-inner > .lang-switch { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  /* What stays on the line, readable over the page with no strip. */
  .brand { position: relative; }
  .brand::before {
    content: "";
    position: absolute;
    inset: -5px -11px -5px -5px;
    z-index: -1;
    border-radius: 999px;
    background: #07090d;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .brand span { transition: color 0.3s ease; }
  .site-header.compact:not(.open) .brand::before { opacity: 1; }
  .site-header.compact:not(.open) .brand span { color: #fff; }
  .site-header.compact:not(.open) .theme-toggle { background: #07090d; border-color: rgba(255, 255, 255, 0.1); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .site-nav ul, .nav-pill { transition: none !important; }
}
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
html body .feat-wide .wide-head p, html body .hero-head .cta-note, html body .hero-head .cta-note * { color: var(--onbg-muted) !important; }

/* Glass panels: one small, soft shadow everywhere (no heavy drop), and no
   section clips what is drawn round its panel (no band with a hard edge). */
:root, :root[data-theme="light"] { --shadow: 0 1px 0 var(--panel-highlight) inset, 0 10px 28px rgba(0, 6, 18, 0.16); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --shadow: 0 1px 0 var(--panel-highlight) inset, 0 10px 28px rgba(20, 40, 80, 0.10); } }
:root[data-theme="light"] { --shadow: 0 1px 0 var(--panel-highlight) inset, 0 10px 28px rgba(20, 40, 80, 0.10); }
.panel.tilt::after { box-shadow: 0 16px 36px rgba(0, 4, 14, 0.18); }
.sec-lazy { content-visibility: visible; contain-intrinsic-size: none; }
/* A block's own tone, from what is behind it (scripts.html). */
html [data-tone="dark"] { --onbg-text: #f4f7fb; --onbg-muted: #d0dae8; --onbg-shadow: 0 0 2px rgba(2, 6, 14, 0.55), 0 1px 10px rgba(2, 6, 14, 0.3); }
html [data-tone="light"] { --onbg-text: #0a1220; --onbg-muted: #2a3448; --onbg-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 10px rgba(255, 255, 255, 0.35); }
.hero-head h1, .hero-head p, .hero-head .h-sub, .cards-head h2, .cards-head .h-sub, .wide-head h2, .wide-head p { transition: color 0.4s ease; }

/* Glass that follows what is behind it, not only the theme: over a light
   wallpaper a cooler, more opaque white with a hairline and dark text; over
   a dark one a deeper fill with light text (data-wall-tone, measured per
   wallpaper; the default background follows the theme). */
html[data-wall-tone="light"] :is(.panel, .glass, .all-grid li, .card-plain) {
  --panel: rgba(248, 251, 255, 0.86);
  --panel-solid: rgba(250, 252, 255, 0.97);
  --panel-border: rgba(16, 32, 64, 0.16);
  --panel-highlight: rgba(255, 255, 255, 0.9);
  --raised: rgba(16, 32, 64, 0.06);
  --line: rgba(16, 32, 64, 0.12);
  --text: #0b1220;
  --text-2: #273244;
  --text-muted: #3f4b60;
  --accent: #1752ad;
  --pro: #7a4f00;
  --pro-bg: rgba(200, 140, 20, 0.16);
  --beta: #0b6b5c;
  --beta-bg: rgba(20, 150, 130, 0.14);
  color: var(--text);
}
html[data-wall-tone="dark"] :is(.panel, .glass, .all-grid li, .card-plain) {
  --panel: rgba(8, 13, 24, 0.74);
  --panel-solid: rgba(10, 16, 28, 0.95);
  --panel-border: rgba(255, 255, 255, 0.13);
  --panel-highlight: rgba(255, 255, 255, 0.08);
  --raised: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.11);
  --text: #f2f4f8;
  --text-2: #cdd5e1;
  --text-muted: #aab4c4;
  --accent: #7cb8ff;
  --pro: #f2c76e;
  --pro-bg: rgba(242, 199, 110, 0.16);
  --beta: #7fe0cd;
  --beta-bg: rgba(116, 214, 196, 0.16);
  color: var(--text);
}
html[data-wall-tone] .all-grid li { background: var(--panel); border-color: var(--panel-border); }
html[data-wall-tone] .all-grid li h3 { color: var(--text); }
html[data-wall-tone] .all-grid li p { color: var(--text-2); }
/* The small cards: a little more body than the big panels on any backdrop. */
.all-grid li { background: var(--panel); box-shadow: 0 1px 0 var(--panel-highlight) inset; }
:root[data-theme="light"] .all-grid li { background: rgba(250, 252, 255, 0.82); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .all-grid li { background: rgba(250, 252, 255, 0.82); } }

/* ---------- Round 6: the hero's words ---------- */
/* A small line over the claim, the claim, then a pull-quote. */
.hero-head .hero-eyebrow {
  margin: 0 0 14px;
  font-size: clamp(0.86rem, 1.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--onbg-text);
  text-shadow: var(--onbg-shadow);
}
.hero-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); text-wrap: balance; max-width: 15em; margin-left: auto; margin-right: auto; }
.hero-quote { margin: 22px auto 0; padding: 0; max-width: 34em; }
.hero-quote p {
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  hanging-punctuation: first last;
  text-wrap: balance;
  color: var(--onbg-text);
  text-shadow: var(--onbg-shadow);
}
.hero-quote::before, .hero-quote::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 auto 12px;
  background: currentColor;
  color: var(--onbg-text);
  opacity: 0.35;
}
.hero-quote::after { margin: 12px auto 0; }
.hero-head h1, .hero-quote p, .hero-head .hero-eyebrow { transition: color 0.4s ease; }

/* Two-tone headings: on the default background the second line may stay
   quieter; over a picked wallpaper (busy, measured per line) it takes the
   full ink, so it keeps AA wherever it lands. */
html[data-wall-tone] :is(h1, h2) .h-sub,
html :is(h1, h2) .h-sub[data-tone] { color: var(--onbg-text) !important; }

/* download.html, soon mode: the beta email, to copy when no mail app opens. */
.beta-privacy { margin-top: 12px; }
.beta-mail { margin-top: 22px; text-align: left; max-width: 38rem; }
.beta-text {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 10px; padding: 12px 14px;
  font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); background: var(--raised); border: 1px solid var(--panel-border); border-radius: 12px;
  user-select: all; -webkit-user-select: all;
}