/*
  flula.io in light paper: painted headers, a meadow footer, light blurred pictures behind the app windows and
  phones, and the apps drawn as built. DM Sans and DM Mono; ink on warm paper; peach only on the full stop and the
  microphone while it is on.
  The CSP allows no style="" attributes and no <style> blocks, so every rule lives here. Per-element values the
  design sets inline (word order, bar heights, strike widths) are the utility classes at the end, and each page's
  painting is one .sky-* class on <body class="web ls …">.
  Sections, in cascade order: base and site layout · app renditions · stickers · demo rows · painted look ·
  per-element values.
*/

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-latin-500.woff2") format("woff2");
}

body { margin: 0; background: #f7f5f1; }

/* ───────── Base, type and site layout ───────── */

:root {
  color-scheme: light;
  --canvas: #f7f5f1;
  --sidebar: #f0ece5;
  --card: #fdfcfa;
  --raised: #efebe4;
  --field: #ffffff;
  --stone: #e3ded4;
  --stone-2: #d3ccc0;
  --ink: #16181b;
  --ink-2: #454a50;
  --ink-3: #5a6066;
  --ink-4: #9a9fa4;
  --on-ink: #ffffff;
  --accent: #1d65b9;
  --sky: #3f9cff;
  --mint: #34c79c;
  --mint-text: #18795a;
  --stop: #ff9160;
  --danger: #c8412b;
  --danger-fill: rgba(226, 83, 60, 0.08);
  --danger-line: rgba(226, 83, 60, 0.28);
  --line: rgba(22, 24, 27, 0.09);
  --line-soft: rgba(22, 24, 27, 0.06);
  --line-mid: rgba(22, 24, 27, 0.12);
  --line-strong: rgba(22, 24, 27, 0.15);
  --line-x: rgba(22, 24, 27, 0.19);
  --line-hover: rgba(22, 24, 27, 0.3);
  --hover: rgba(22, 24, 27, 0.05);
  --shadow-card: 0 12px 22px rgba(48, 41, 31, 0.1);
  --shadow-pop: 0 24px 48px -18px rgba(48, 41, 31, 0.28);
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.web, .web *, .web *::before, .web *::after { box-sizing: border-box; }
.web [hidden] { display: none !important; }
.web {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.web img { max-width: 100%; height: auto; }
.web a { color: var(--ink-2); text-underline-offset: 3px; }
.web a:hover { color: var(--ink); }
.web button, .web input, .web select, .web textarea { font: inherit; color: inherit; }
.web :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.web b, .web strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.web .skip { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.web .skip:focus { transform: none; color: var(--on-ink); }
.web .narrow-only { display: none; }

/* Layout */
.in { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.sec { border-top: 1px solid var(--line-soft); }
.sec > .in { padding-top: 80px; padding-bottom: 80px; }
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 64px; padding-bottom: 64px; }
.hero.centered { align-items: center; text-align: center; }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; margin: 0 0 40px; }
.sec-head.centered { align-items: center; margin-left: auto; margin-right: auto; text-align: center; }
.cols, .split { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.split { align-items: flex-start; gap: 40px 64px; }
.col { flex: 1 1 420px; min-width: 0; }
.col-main { flex: 2 1 560px; min-width: 0; }
.col-side { flex: 1 1 280px; min-width: 0; }
.grid3, .grid2 { display: flex; flex-wrap: wrap; gap: 16px; }
.grid3 > * { flex: 1 1 300px; min-width: 0; }
.grid2 > * { flex: 1 1 420px; min-width: 0; }

/* Type */
.label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.h1, .h2 { margin: 0; font-weight: 520; text-wrap: balance; overflow-wrap: break-word; }
.h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.05em; }
.h1.md { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; }
.h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.04em; }
.h2.sm { font-size: clamp(26px, 3vw, 36px); }
.h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.h3.lg { font-size: 23px; }

.second { color: inherit; }
.h1 .second { color: var(--accent); }
.stop { color: var(--stop); }
.lead { margin: 0; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.fine { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.num { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-3); }
.wordmark, .wordmark:hover { color: var(--ink); font-size: 26px; font-weight: 650; line-height: 1; letter-spacing: -0.05em; text-decoration: none; }
.web .wordmark, .web .wordmark:hover { color: var(--ink); text-decoration: none; }
.said { margin: 0; font-size: 19px; line-height: 1.9; font-style: italic; color: var(--ink-2); }
.said.sm { font-size: 17px; line-height: 1.75; }
.wrote { margin: 0; font-size: 18px; font-weight: 550; line-height: 1.5; color: var(--ink); }
.u-sky, .u-mint { padding-bottom: 1px; border-bottom: 2px solid rgba(63, 156, 255, 0.55); }
.u-mint { border-bottom-color: rgba(52, 199, 156, 0.6); }
.cut { color: var(--danger); text-decoration: line-through; text-decoration-thickness: 2px; }
ul.links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; font-size: 15px; }
.c-ink { color: var(--ink); }
.c-accent { color: var(--accent); }

/* Header */
.site-head { position: relative; z-index: 10; border-bottom: 1px solid var(--line-soft); background: var(--canvas); }
.site-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px; font-size: 15px; }
.web .site-nav a { padding: 8px 13px; border-radius: 999px; text-decoration: none; transition: background-color 0.14s ease-out, color 0.14s ease-out; }
.web .site-nav a:hover { background: var(--hover); color: var(--ink); }
.web .site-nav a[aria-current] { color: var(--ink); background: var(--raised); }
.site-actions { display: flex; align-items: center; gap: 8px; }
.web .site-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px; text-decoration: none; }
.web .site-signin:hover { background: var(--hover); }
.site-menu { display: none; position: relative; }
.site-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover { border-color: var(--line-hover); }
.site-menu .icon-close, .site-menu[open] .icon-open { display: none; }
.site-menu[open] .icon-close { display: block; }
.site-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; gap: 2px; width: min(360px, calc(100vw - 32px)); padding: 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-pop); }
.web .site-menu-panel a { padding: 13px 16px; border-radius: 14px; font-size: 17px; text-decoration: none; }
.web .site-menu-panel a:hover, .web .site-menu-panel a[aria-current] { background: var(--raised); color: var(--ink); }
.site-menu-account { display: none; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
}

/* Footer */
.site-foot { border-top: 1px solid var(--line-soft); }
.site-foot-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.site-foot .wordmark { font-size: 30px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.web .foot-col a { text-decoration: none; }
.site-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); }

/* Buttons: every control is a capsule; ink is the action colour */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.2s var(--pop); }
.btn:active { transform: scale(0.965); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.web .btn-primary, .web .btn-primary:hover { background: var(--ink); color: var(--on-ink); }
.web .btn-primary:hover { background: #000000; }
.web .btn-secondary, .web .btn-secondary:hover { border-color: var(--line-strong); background: var(--card); color: var(--ink); }
.web .btn-secondary:hover { border-color: var(--line-hover); }
.web .btn-soft, .web .btn-soft:hover { border-color: var(--line); background: var(--raised); color: var(--ink); }
.web .btn-soft:hover { border-color: var(--line-hover); }
.web .btn-ghost { color: var(--ink-2); }
.web .btn-ghost:hover { background: var(--hover); color: var(--ink); }
.web .btn-caution, .web .btn-caution:hover { border-color: var(--danger-line); background: var(--card); color: var(--danger); }

:root {
  --win-line: rgba(22, 24, 27, 0.13);
  --win-shadow: 0 24px 44px -24px rgba(48, 41, 31, 0.5), 0 2px 5px rgba(48, 41, 31, 0.06);
}
.card { padding: 28px; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
.app-win { overflow: hidden; border-radius: 14px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
.win-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-bottom: 1px solid var(--line-soft); background: #fbfaf8; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff7a66; }
.win-bar i:nth-child(2) { background: #e9c46a; }
.win-bar i:nth-child(3) { background: #7ddbb8; }
.win-bar span { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); pointer-events: none; }
.win-bar .win-url { left: 50%; right: auto; display: grid; place-items: center; width: min(340px, 56%); height: 22px; transform: translateX(-50%); border-radius: 7px; background: var(--raised); font-size: 11.5px; font-weight: 500; }
.win-body { display: flex; flex-direction: column; gap: 12px; min-height: 178px; padding: 16px 18px 20px; }
/* Windows in a row share one size: a subgrid lines up the windows, their titles and their text */
.win-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.win-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; }
.win-tile > .app-win { display: flex; flex-direction: column; }
.win-tile > .app-win > .win-body { flex: 1 1 auto; }
.win-tiles > .app-win { min-width: 0; }
.vt-win { width: 100%; max-width: 980px; text-align: left; }
.vt-win .vt-demo { max-width: none; }
.win-tile .h3, .win-tile .body { padding: 0 4px; }
.win-tile .fillers { font-size: 19px; }
.win-tile .edit-raw { font-size: 15.5px; }
.win-tile .edit-clean { font-size: 16.5px; }
.win-field { display: flex; gap: 10px; margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink); }
.win-field span:first-child { color: var(--ink-3); }
.win-msg { display: flex; gap: 10px; }
.win-avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--raised); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.win-name { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--ink); }
.win-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.hero-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 104px; }
@media (max-width: 980px) { .hero-split { grid-template-columns: minmax(0, 1fr); } }
.card.accent { border-color: rgba(29, 101, 185, 0.28); }
.card.soft { background: var(--raised); box-shadow: none; }
.card.flat { box-shadow: none; }
.card.lg { padding: 40px; }
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }

/* Small pieces */
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--raised); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.chip { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 15px; color: var(--ink-2); text-decoration: none; }
.web a.chip { color: var(--ink-2); text-decoration: none; }
.web a.chip:hover { border-color: var(--line-hover); color: var(--ink); }
.chip.more { border-style: dashed; border-color: var(--line-x); background: transparent; color: var(--ink); }
.tag { display: inline-block; margin: 0 2px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-x); background: var(--card); font-family: var(--mono); font-size: 10.5px; font-style: normal; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2); vertical-align: 3px; }
.badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); vertical-align: 2px; }
.badge.ink { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.web kbd { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.45em; border-radius: 0.5em; border: 1px solid var(--line-x); border-bottom-width: 2px; background: var(--card); font-family: var(--mono); font-size: 0.78em; font-weight: 500; line-height: 1; color: var(--ink); vertical-align: 0.1em; }
.cap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px 1px; border-radius: 7px; border: 1px solid var(--line-x); background: var(--card); box-shadow: inset 0 -1px 0 var(--line-x); font: 500 11.5px/1 var(--mono); color: var(--ink); }
.key { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-x); border-bottom-width: 3px; background: var(--card); font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.key.wide { min-width: 130px; }
.path { white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: var(--raised); font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "›"; color: var(--ink-4); }
.web .crumbs a { color: var(--ink-3); text-decoration: none; }
.web .crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }
.tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); }
.tile.quiet { border: 1px dashed var(--line-x); background: none; color: var(--ink-3); }
.steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: baseline; gap: 16px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); font-size: 15.5px; color: var(--ink-2); }
.steps b { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
.checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; color: var(--ink-2); }
.checks li { position: relative; padding-left: 16px; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 0; top: calc(0.75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.checks.them li::before { background: var(--ink-4); }

/* FAQ */
.web details > summary { list-style: none; cursor: pointer; }
.web details > summary::-webkit-details-marker { display: none; }
.plus { flex: none; color: var(--ink-3); transition: transform 0.3s var(--ease-out); }
details[open] .plus { transform: rotate(45deg); }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 17px; font-weight: 550; color: var(--ink); }
.faq details > :not(summary) { max-width: 640px; margin: 0 0 22px; }

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
table.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cmp th, .cmp td { padding: 16px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.cmp thead th { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.cmp thead th.us { color: var(--ink); }
.cmp tbody th { width: 26%; font-weight: 600; color: var(--ink); }
.cmp td { color: var(--ink-2); }
.cmp td.us { color: var(--ink); }
.cmp td.ahead { background: rgba(52, 199, 156, 0.08); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.ahead-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: rgba(52, 199, 156, 0.16); color: var(--mint-text); vertical-align: -4px; }
.legend { display: flex; align-items: flex-start; gap: 2px; margin-top: 14px; }
.legend .ahead-mark { flex: none; }

/* Score tables from our own test: three short columns that stay a table on phones, numbers aligned right. */
table.cmp.nums { min-width: 0; }
.cmp.nums th, .cmp.nums td { padding: 12px 18px; vertical-align: middle; }
.cmp.nums tbody th { width: auto; font-weight: 550; }
.cmp.nums thead th:not(:first-child), .cmp.nums td { width: 1%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp.nums .ahead-mark { margin-right: 6px; }

/* The test's headline numbers: Flula's and Wispr Flow's side by side, at the same size; the better one sits on
   the tables' mint with their check. */
.score-card { display: flex; flex-direction: column; gap: 14px; }
.score-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 -12px; }
.score-pair > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 12px; border-radius: 14px; }
.score-pair dt { display: flex; align-items: center; min-height: 22px; font-size: 15px; color: var(--ink-3); }
.score-pair .ahead { background: rgba(52, 199, 156, 0.1); }
.score-pair .ahead-mark { vertical-align: 0; }
.score-pair dd { margin: 0; font-size: clamp(34px, 3.4vw, 44px); font-weight: 520; line-height: 1.05; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-pair .us dt { font-weight: 600; color: var(--ink); }

/* Motion helpers */
.fade-a { animation: fade-a 0.45s var(--ease-out); }
.fade-b { animation: fade-b 0.45s var(--ease-out); }
@keyframes fade-a { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fade-b { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }

/* Utilities */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.fill { flex: 1 1 320px; min-width: 0; }
.flex-none { flex: none; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-22 { gap: 22px; } .gap-24 { gap: 24px; }
.mw-440 { max-width: 440px; } .mw-460 { max-width: 460px; } .mw-470 { max-width: 470px; } .mw-520 { max-width: 520px; }
.mw-560 { max-width: 560px; } .mw-600 { max-width: 600px; } .mw-620 { max-width: 620px; } .mw-760 { max-width: 760px; }
.mw-900 { max-width: 900px; } .mw-980 { max-width: 980px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.pt-32 { padding-top: 32px; } .pt-64 { padding-top: 64px; } .pb-48 { padding-bottom: 48px; } .pb-80 { padding-bottom: 80px; }
.nowrap { white-space: nowrap; }

/* Home */
.landing .h1 { font-size: clamp(46px, 6.2vw, 82px); line-height: 0.98; letter-spacing: -0.05em; }
.landing .h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.045em; }
.landing .sec > .in { padding-top: 88px; padding-bottom: 88px; }
.landing .sec-head { gap: 16px; max-width: 720px; margin-bottom: 48px; }
.card-title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.03em; }
.card-text { margin: 8px 0 0; max-width: 440px; font-size: 15.5px; color: var(--ink-2); }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; padding-top: 56px; padding-bottom: 72px; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero-cards { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.glyphs { display: inline-flex; gap: 4px; }

.edits { display: grid; min-height: 132px; }
.edit-line { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; gap: 12px; margin: 0; opacity: 0; animation: edit-show 13.5s var(--ease-out) infinite; }
.edit-line.e2 { animation-delay: 4.5s; }
.edit-line.e3 { animation-delay: 9s; }
.edit-raw { font-size: 17px; color: var(--ink-3); }
.edit-raw s { text-decoration: none; background: linear-gradient(var(--danger), var(--danger)) no-repeat 0 58% / 0 2px; animation: edit-strike 13.5s var(--ease-out) infinite; animation-delay: inherit; }
.edit-clean { display: inline-flex; max-width: 100%; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); font-size: 19px; font-weight: 550; color: var(--ink); opacity: 0; animation: edit-land 13.5s var(--pop) infinite; animation-delay: inherit; }
.edit-line.e1 .edit-raw s, .edit-line.e1 .edit-clean { animation-delay: 0s; }
.edit-line.e2 .edit-raw s, .edit-line.e2 .edit-clean { animation-delay: 4.5s; }
.edit-line.e3 .edit-raw s, .edit-line.e3 .edit-clean { animation-delay: 9s; }
@keyframes edit-show { 0% { opacity: 0; transform: translateY(12px); } 4%, 30% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes edit-strike { 0%, 6% { background-size: 0 2px; color: var(--ink-3); } 11%, 33.3% { background-size: 100% 2px; color: var(--danger); } 34%, 100% { background-size: 0 2px; color: var(--ink-3); } }
@keyframes edit-land { 0%, 12% { opacity: 0; transform: translateY(8px) scale(0.97); } 15%, 31% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; transform: none; } }
/* Morph: what you took back is struck, folds away, and the rest closes up into what gets sent.
   --sw on each <s> is a little wider than its words, so the fold starts right away. */
.edits.morph { min-height: 96px; }
.edits.morph .edit-raw { animation: edit-written 13.5s var(--ease-out) infinite; animation-delay: inherit; }
.edits.morph .edit-raw s { display: inline-block; max-width: var(--sw, 10em); overflow: hidden; white-space: nowrap; vertical-align: bottom; animation-name: edit-fold; }
@keyframes edit-fold { 0%, 6% { max-width: var(--sw, 10em); opacity: 1; background-size: 0 2px; color: var(--ink-3); } 11%, 13% { max-width: var(--sw, 10em); opacity: 1; background-size: 100% 2px; color: var(--danger); } 19%, 33.3% { max-width: 0; opacity: 0; background-size: 100% 2px; color: var(--danger); } 34%, 100% { max-width: var(--sw, 10em); opacity: 1; background-size: 0 2px; color: var(--ink-3); } }
@keyframes edit-written { 0%, 16% { color: var(--ink-3); } 21%, 100% { color: var(--ink); } }

.fillers { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; }
.filler { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; text-decoration: none; color: var(--danger); animation: filler-out 4.5s var(--ease-out) infinite; }
.filler.f2 { animation-delay: 0.2s; }
.filler.f3 { animation-delay: 0.4s; }
@keyframes filler-out { 0%, 25% { max-width: 3em; opacity: 1; filter: none; transform: none; } 45%, 85% { max-width: 0; opacity: 0; filter: blur(4px); transform: translateY(-0.4em); } 100% { max-width: 3em; opacity: 1; } }

.how-copy { flex: 1 1 360px; min-width: 0; }
.demo, .hero-art { align-items: stretch; }
.demo > *, .hero-art > * { width: 100%; }
.hero-art .say { align-self: center; width: auto; }
.demo { flex: 1.3 1 560px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }

.mix { position: relative; display: flex; flex-wrap: wrap; gap: 28px 40px; padding: 30px; border-radius: 24px; }
.mix-main { flex: 1 1 480px; min-width: 0; }
.opt-lang, .opt-tone { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 14.5px; font-weight: 550; cursor: pointer; transition: background-color 0.18s, border-color 0.18s, color 0.18s; }
.opt-lang { border-color: var(--line-strong); background: var(--card); color: var(--ink-2); }
.opt-lang:hover { border-color: var(--line-hover); color: var(--ink); }
.opt-lang[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.tones { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; border-radius: 26px; border: 1px solid var(--line); background: var(--raised); }
.opt-tone { font-size: 14px; color: var(--ink-3); }
.opt-tone:hover { color: var(--ink); }
.opt-tone[aria-pressed="true"] { border-color: var(--line); background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(48, 41, 31, 0.08); }
.mix-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--ink-3); }
.mix-hint svg { flex: none; }
.mix-out { flex: 1 1 400px; min-width: 0; min-height: 260px; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--raised); }
.mix-text { margin: 0; font-size: 22px; font-weight: 520; line-height: 1.45; letter-spacing: -0.015em; white-space: pre-line; color: var(--ink); }
.mix-note { margin: auto 0 0; font-size: 13.5px; color: var(--ink-3); }

/* The Style window gets the wider column, so its three tones sit side by side as in the app */
.apps-copy { flex: 1 1 340px; min-width: 0; }
.apps-art { flex: 1.5 1 690px; min-width: 0; }
.app-label { display: inline-flex; align-items: center; gap: 12px; }
.app-tile { display: block; flex: none; border-radius: 9px; box-shadow: 0 8px 18px -10px rgba(48, 41, 31, 0.5); }
.app-steps { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; font-size: 15.5px; color: var(--ink-2); }
.app-steps li { display: flex; align-items: baseline; gap: 14px; }

.landing .sec > .in.also { padding-top: 56px; padding-bottom: 56px; }
.also { display: flex; flex-wrap: wrap; gap: 28px 40px; margin: 0 auto; list-style: none; }
.also li { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.also-text { max-width: 320px; margin-left: auto; margin-right: auto; }
.also-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.web .also-title a { color: var(--ink); text-decoration-color: var(--line-x); text-underline-offset: 4px; }
.web .also-title a:hover { text-decoration-color: currentColor; }
.also-text { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }

.pro-badge { display: inline-block; padding: 0.04em 0.34em 0.08em; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 0.84em; line-height: 1.05; letter-spacing: -0.03em; vertical-align: 0.08em; }
.plans { display: flex; flex-wrap: wrap; gap: 16px; max-width: 920px; margin: 0 auto; }
.plan { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.landing .plan { padding: 32px; border-radius: 24px; }
/* Pro stands apart: an ink outline, a deeper shadow and an ink band on top (like the dark device frames) */
.plan.pro, .pro-card { border: 2px solid var(--ink); box-shadow: 0 36px 66px -32px rgba(22, 24, 27, 0.5), 0 2px 6px rgba(22, 24, 27, 0.08); }
.mini-plan .pro-top { margin: -22px -22px 6px; padding: 16px 22px 14px; }
.btn.pro-btn { width: 100%; min-height: 54px; font-size: 16px; box-shadow: 0 14px 26px -14px rgba(22, 24, 27, 0.7); }
.mini-plan .pro-top-name { font-size: 20px; }
.pro-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: -28px -28px 0; padding: 20px 28px 18px; border-radius: 20px 20px 0 0; background: var(--ink); color: #f1f2f3; }
.landing .plan .pro-top { margin: -32px -32px 0; padding: 22px 32px 20px; border-radius: 22px 22px 0 0; }
.pro-top-name { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.03em; color: #f1f2f3; }
.pro-top-price { margin: 0; font-size: 14px; color: rgba(241, 242, 243, 0.72); }
.pro-top-price strong { margin-right: 2px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: #f1f2f3; }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px; }
.plan-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.plan-name.ink { display: inline-flex; align-items: center; padding: 3px 14px 4px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 19px; font-weight: 650; }
.plan-price { margin: 0; font-size: 14px; color: var(--ink-2); }
.plan-price strong { margin-right: 2px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.plan-minutes { display: flex; align-items: center; gap: 14px; margin: 0; }
.plan-minutes strong { font-size: 56px; font-weight: 520; line-height: 1; letter-spacing: -0.05em; }
.plan-minutes span { font-size: 15px; line-height: 1.3; color: var(--ink-2); }
.plan-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--raised); }
.plan-bar i { display: block; width: 3.4%; height: 100%; border-radius: 999px; background: var(--ink-4); }
.plan-bar.full { background: var(--ink); }
.plan-words { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.plan-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; color: var(--ink-2); }
.plan-list li { display: flex; align-items: center; gap: 10px; }
.plan-list svg { flex: none; color: var(--mint-text); }
.btn.plan-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.plans-foot { max-width: 640px; margin: 28px auto 0; text-align: center; }

.langs-copy { flex: 1 1 380px; min-width: 0; }
.langs-list { flex: 1.4 1 520px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Product pages: Mac and iPhone */
.hero-art { flex: 1.15 1 540px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wide-art { width: 100%; max-width: 1080px; margin: 0 auto; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--line-mid); background: var(--card); font-size: 13.5px; color: var(--ink-2); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(52, 199, 156, 0.18); }
.mac-specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; margin: 0; font-size: 15px; }
.mac-specs dt { color: var(--ink-3); }
.mac-specs dd { margin: 0; color: var(--ink); }
.say { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 380px; text-align: center; }
.say-text { margin: 0; font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--ink-2); }
.say-text .tag { font-style: normal; }
.how3 { display: flex; flex-wrap: wrap; gap: 16px; }
.how-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 26px; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
.how-card > .num, .how-card > .h3, .how-card > .body { margin-left: 10px; margin-right: 10px; }
.how-card > .num { margin-top: 10px; }
.how-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 250px; overflow: hidden; border-radius: 16px; background: var(--raised); }
.su { display: flex; flex-direction: column; gap: 4px; width: min(250px, 86%); margin: 0; padding: 8px; list-style: none; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.su li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 550; color: var(--ink); }
.su li + li { border-top: 1px solid var(--line-soft); border-radius: 0; }
.su .ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(52, 199, 156, 0.16); color: #1f8f6c; }
.su .ok svg { width: 12px; height: 12px; }
.handoff { position: absolute; left: 50%; top: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 210px; height: 300px; padding: 0 20px 60px; transform: translateX(-50%); border-radius: 30px; border: 6px solid #16181b; background: var(--canvas); text-align: center; }
.handoff-title { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
.handoff-text { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.handoff-swipe { position: absolute; left: 14px; top: 132px; display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.mini-field { width: min(270px, 88%); padding: 11px 14px; border-radius: 16px; border: 1px solid rgba(60, 60, 67, 0.18); background: #ffffff; font-size: 14px; color: #111111; }
.mini-kb { width: min(290px, 94%); padding: 6px 6px 8px; border-radius: 16px; background: #e2e3e8; }
.mini-kb .kb-bar { margin-bottom: 6px; }
.mini-kb .kb-layer { position: static; }
.morph-box { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--raised); }
.morph-box .said { font-size: 16px; line-height: 1.6; }
.morph-box .wrote { font-size: 17px; }
.morph-box s { color: var(--danger); text-decoration-thickness: 2px; }
.m-head { display: flex; align-items: center; gap: 14px; }
.pf-out { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; }
/* iPhone page, Write as: the keyboard's list of the four kinds in the letters' place (apps/ios/Keyboard/KeyboardPanels.swift).
   Each kind's result sits stacked in the message field, so picking one never changes the field's height. */
.ik-out { margin: 0; color: #111111; }
.ik-out.off { visibility: hidden; }
.ik-phone .ms-send { opacity: 1; }
.kb-chip.ik-open { background: #121416; color: #ffffff; }
.kb-chip.ik-open .pdot { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
.kb-chip.ik-open svg.chev { color: rgba(255, 255, 255, 0.7); }
.ik-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ik-chooser { display: flex; flex-direction: column; gap: 4px; height: 206px; padding: 2px 3px 0; box-sizing: border-box; }
.ik-chooser-title { margin: 0 6px 2px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: #5f6469; }
.web .ik-kind { display: flex; align-items: center; gap: 10px; height: 41px; padding: 0 12px; border: 0; border-radius: 10px; background: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); font-size: 14.5px; text-align: left; color: #121416; cursor: pointer; }
.web .ik-kind[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #121416; }
.ik-kind-icon { flex: none; width: 17px; height: 17px; color: #454a50; }
.ik-kind-name { flex: none; font-weight: 600; }
.ik-kind-sum { min-width: 0; margin-left: auto; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: #5a6066; }
.ik-kind-check { flex: none; width: 15px; height: 15px; color: #121416; }
.ik-kind[aria-pressed="false"] .ik-kind-check { visibility: hidden; }
.starts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mini-plans { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-plan { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.mini-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-plan-minutes { margin: 6px 0 0; font-size: 26px; font-weight: 520; letter-spacing: -0.04em; color: var(--ink); }

/* Voice typing */
.vt-demo { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 980px; padding: 22px; text-align: left; }
.vt-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vt-langs .label { margin-right: 6px; }
.vt-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.vt-stage, .vt-output { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; min-height: 340px; padding: 18px 20px 22px; border-radius: 18px; border: 1px solid var(--line); }
.vt-stage { align-items: center; background: var(--raised); }
.vt-output { background: var(--card); }
.vt-head { display: flex; align-self: stretch; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-3); }
.talk { display: grid; place-items: center; width: 92px; height: 92px; margin-top: 18px; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); box-shadow: 0 10px 22px -8px rgba(22, 24, 27, 0.55); cursor: pointer; }
.talk svg { width: 34px; height: 34px; }
.vt-title { margin: 6px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vt-status { margin: -10px 0 0; font-size: 14px; color: var(--ink-3); }
.vt-prompt { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-x); }
.vt-prompt-text { margin: 0; font-size: 16px; font-style: italic; color: var(--ink-2); }
.vt-art { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 56px 24px; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
.vt-art .plus-sign, .ss-stage .plus-sign { font-family: var(--mono); font-size: 18px; color: var(--ink-3); }
/* Press · Speak · Done: three small stages in one card */
.steps-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; width: 100%; padding: 16px; }
.ss-step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ss-stage { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 124px; padding: 0 12px; border-radius: 16px; background: var(--raised); }
.ss-stage .key { min-width: 44px; height: 44px; }
.ss-stage .key.wide { min-width: 88px; }
.ss-done { margin: 0; max-width: 100%; padding: 10px 16px; border-radius: 20px; background: rgba(22, 24, 27, 0.96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 10px 22px -10px rgba(0, 0, 0, 0.45); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: center; color: #f1f2f3; }

/* Compare, help, legal */
.vs-card { display: flex; flex-direction: column; gap: 12px; }
.web .vs-card h2 a, .web .help-card h2 a { color: var(--ink); text-decoration: none; }
.web .vs-card h2 a:hover, .web .help-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--line-x); }
.read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.read-more svg { width: 14px; height: 14px; }
.help-card { display: flex; flex-direction: column; gap: 14px; }
.legal { max-width: 760px; padding-top: 64px; padding-bottom: 88px; }
.legal section { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.legal h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.legal p, .legal li { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; }
.legal li b { color: var(--ink); }
.steps-article { display: flex; flex-direction: column; gap: 26px; }
.steps-article > div { display: flex; flex-direction: column; gap: 8px; }
.side-card { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 640px) {
  .sec > .in { padding-top: 56px; padding-bottom: 56px; }
  .landing .sec > .in { padding-top: 56px; padding-bottom: 56px; }
  .hero { padding-top: 40px; padding-bottom: 48px; }
  .hero-grid { padding-top: 40px; padding-bottom: 56px; }
  .card { padding: 22px; }
  .card.lg { padding: 28px 22px; }
  .lead { font-size: 17.5px; }
  .mix { padding: 22px 20px; }
  .opt-tone { padding: 0 10px; font-size: 13.5px; }
  .landing .plan { padding: 24px; }
  .cta-card .btn { flex: 1 1 100%; }
  .site-signin, .site-signup { display: none; }
  .site-menu-account { display: flex; }
  .web .wide-only { display: none; }
  .web .narrow-only { display: inline-flex; }
  .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; width: 100%; }
  .table-wrap { overflow: visible; }
  table.cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp th, .cmp td, .cmp tbody th { display: block; width: auto; }
  .cmp tbody tr { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .cmp tbody th, .cmp td { padding: 6px 18px; border-bottom: 0; }
  .cmp td.ahead { margin: 4px 8px; padding: 8px 10px; border-radius: 12px; }
}

/* The score tables keep their rows on phones: a label and two short numbers fit. */
@media (max-width: 640px) {
  .cmp.nums thead { display: table-header-group; }
  .cmp.nums tbody { display: table-row-group; }
  .cmp.nums tr { display: table-row; padding: 0; border-bottom: 0; }
  .cmp.nums th, .cmp.nums td { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
  .cmp.nums tbody th { width: auto; }
  .cmp.nums td { width: 1%; }
  .cmp.nums td.ahead { margin: 0; padding: 10px 12px; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .web *, .web *::before, .web *::after { animation: none !important; transition: none !important; }
  .edit-line.e1 { opacity: 1; }
  .edit-line.e1 .edit-raw s { background-size: 100% 2px; color: var(--danger); }
  .edit-line.e1 .edit-clean { opacity: 1; }
  .edits.morph .edit-line.e1 .edit-raw { color: var(--ink); }
  .edits.morph .edit-line.e1 .edit-raw s { max-width: 0; opacity: 0; }
  .filler { text-decoration: line-through; text-decoration-thickness: 2px; }
}

/* ───────── The Mac and iPhone apps, drawn as built in their light theme ───────── */

:root {
  --sheet: #faf8f4;
  --selection: #fdfcfa;
  --hover-soft: rgba(22, 24, 27, 0.035);
  --success: #1f9e74;
  --insert: #1f74d8;
  --coral: #ff7a66;
  --hud: rgba(22, 24, 27, 0.96);
  --hud-ink: #f1f2f3;
  --hud-muted: #b1b6bb;
  --paper-shadow: rgba(48, 40, 30, 0.16);
  --notice-fill: #fff6ea;
  --notice-line: #ffdcae;
  --notice-ink: #7a4300;
}

/* ---------- Mac: desktop scene with Mail, the Slim indicator and the result card ---------- */
.mm { container-type: inline-size; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mm-desk { position: relative; isolation: isolate; width: 100%; height: 440px; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #ebe6dd; box-shadow: var(--shadow-card); }
.mm-wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.mm-menubar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 16px; height: 26px; padding: 0 14px; background: rgba(253, 252, 250, 0.78); border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-2); }
.mm-menubar b { font-weight: 650; color: var(--ink); }
.mm-menubar .mm-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mm-win { position: absolute; left: 50%; top: 58px; width: min(560px, calc(100% - 40px)); transform: translateX(-50%); overflow: hidden; border-radius: 12px; border: 1px solid rgba(22, 24, 27, 0.12); background: var(--card); box-shadow: 0 26px 50px -24px rgba(48, 41, 31, 0.45); }
.mm-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); }
.mm-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff7a66; }
.mm-bar i:nth-child(2) { background: #e9c46a; }
.mm-bar i:nth-child(3) { background: #7ddbb8; }
.mm-bar span { flex: 1; margin-right: 47px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mm-field { display: flex; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); }
.mm-field > :first-child { flex: none; width: 54px; color: var(--ink-3); }
.mm-body { min-height: 236px; padding: 16px 18px; }
.mm-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.mm-paste { border-radius: 4px; animation: mm-paste 10s linear infinite; }
.mm-caret-a, .mm-caret-b { display: inline-block; width: 1.6px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; }
.mm-caret-a > i, .mm-caret-b > i { display: block; width: 100%; height: 100%; background: var(--accent); animation: mm-blink 1.06s steps(1) infinite; }
.mm-caret-a { animation: mm-caret-a 10s linear infinite; }
.mm-caret-b { animation: mm-caret-b 10s linear infinite; }

.mm-hud { position: absolute; left: 50%; top: 40px; z-index: 3; display: grid; place-items: center; transform: translateX(-50%); pointer-events: none; }
.mm-hud > * { grid-area: 1 / 1; }
.slim { display: flex; align-items: center; justify-content: center; gap: 3px; width: 94px; height: 34px; border-radius: 17px; background: var(--hud); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 4px 14px rgba(0, 0, 0, 0.3); }
.slim i { display: block; flex: none; width: 2.5px; height: var(--h, 6px); border-radius: 2px; background: var(--hud-ink); transform-origin: 50% 50%; animation: slim-bar 0.62s ease-in-out infinite alternate; }
.slim i:nth-child(2n) { animation-duration: 0.48s; animation-delay: -0.2s; }
.slim i:nth-child(3n) { animation-duration: 0.74s; animation-delay: -0.35s; }
.slim i:nth-child(5n) { animation-duration: 0.56s; animation-delay: -0.1s; }
.hud-dots { display: flex; align-items: center; justify-content: center; gap: 4.5px; width: 56px; height: 34px; border-radius: 17px; background: var(--hud); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 4px 14px rgba(0, 0, 0, 0.3); }
.hud-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--hud-ink); animation: hud-hop 1.2s ease-in-out infinite; }
.hud-dots i:nth-child(2) { animation-delay: 0.15s; }
.hud-dots i:nth-child(3) { animation-delay: 0.3s; }
.hud-card { max-width: min(440px, 86cqw); padding: 10px 20px; border-radius: 22px; background: var(--hud); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 4px 14px rgba(0, 0, 0, 0.3); font-size: 14.5px; font-weight: 500; line-height: 1.45; text-align: center; color: var(--hud-ink); }
.hud-card .gone { display: inline-block; max-width: 9em; overflow: hidden; white-space: pre; vertical-align: bottom; text-decoration-color: transparent; animation: hud-gone 12s var(--ease-out) infinite; }
.hud-card .ins { display: inline-block; max-width: 0; overflow: hidden; white-space: pre; vertical-align: bottom; animation: hud-ins 12s var(--ease-out) infinite; }
@keyframes hud-ins { 0%, 50% { max-width: 0; color: #7dbcff; } 54% { max-width: 4em; color: #7dbcff; } 57%, 100% { max-width: 4em; color: var(--hud-ink); } }
.mm-slim { opacity: 0; animation: mm-slim 10s var(--pop) infinite; }
/* While Flula listens, each bar keeps its own pace, so the indicator moves like a voice, not a metronome */
.mm-slim i:nth-child(1) { animation-duration: 0.37s; animation-delay: -0.09s; }
.mm-slim i:nth-child(2) { animation-duration: 0.46s; animation-delay: -0.04s; }
.mm-slim i:nth-child(3) { animation-duration: 0.43s; animation-delay: -0.22s; }
.mm-slim i:nth-child(4) { animation-duration: 0.3s; animation-delay: -0.3s; }
.mm-slim i:nth-child(5) { animation-duration: 0.29s; animation-delay: -0.26s; }
.mm-slim i:nth-child(6) { animation-duration: 0.3s; animation-delay: -0.05s; }
.mm-slim i:nth-child(7) { animation-duration: 0.4s; animation-delay: -0.5s; }
.mm-slim i:nth-child(8) { animation-duration: 0.31s; animation-delay: -0.13s; }
.mm-slim i:nth-child(9) { animation-duration: 0.46s; animation-delay: -0.57s; }
.mm-slim i:nth-child(10) { animation-duration: 0.44s; animation-delay: -0.24s; }
.mm-slim i:nth-child(11) { animation-duration: 0.55s; animation-delay: -0.03s; }
.mm-slim i:nth-child(12) { animation-duration: 0.52s; animation-delay: -0.17s; }
.mm-slim i:nth-child(13) { animation-duration: 0.32s; animation-delay: -0.07s; }
.mm-writing { opacity: 0; animation: mm-writing 10s linear infinite; }
.mm-result { opacity: 0; animation: mm-result 10s var(--ease-out) infinite; }
.mm .hud-card .gone { animation: mm-gone 10s var(--ease-out) infinite; }
.mm .hud-card .ins { animation: mm-ins 10s var(--ease-out) infinite; }

@keyframes slim-bar { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
@keyframes hud-hop { 0%, 100% { transform: none; opacity: 0.55; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes mm-blink { 50% { opacity: 0; } }
@keyframes mm-slim { 0%, 2.5% { opacity: 0; transform: scale(0.6); } 4.5%, 28% { opacity: 1; transform: none; } 29.5%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes mm-writing { 0%, 28.8% { opacity: 0; } 30%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes mm-result { 0%, 35.5% { opacity: 0; transform: scale(0.72); } 37.5%, 57% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes hud-gone { 0%, 45% { max-width: 9em; opacity: 1; color: var(--hud-ink); text-decoration: line-through; text-decoration-color: transparent; } 47.5%, 50% { max-width: 9em; opacity: 1; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } 54%, 100% { max-width: 0; opacity: 0; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } }
@keyframes mm-gone { 0%, 39% { max-width: 9em; opacity: 1; color: var(--hud-ink); text-decoration: line-through; text-decoration-color: transparent; } 41%, 47% { max-width: 9em; opacity: 1; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } 51%, 100% { max-width: 0; opacity: 0; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } }
@keyframes mm-ins { 0%, 47% { max-width: 0; color: #7dbcff; } 51% { max-width: 4em; color: #7dbcff; } 54%, 100% { max-width: 4em; color: var(--hud-ink); } }
@keyframes mm-paste { 0%, 36% { opacity: 0; background: rgba(29, 101, 185, 0.3); } 37% { opacity: 1; background: rgba(29, 101, 185, 0.3); } 47%, 96% { opacity: 1; background: rgba(29, 101, 185, 0); } 99%, 100% { opacity: 0; background: rgba(29, 101, 185, 0); } }
@keyframes mm-caret-a { 0%, 36% { opacity: 1; } 36.5%, 98.5% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes mm-caret-b { 0%, 36% { opacity: 0; } 36.5%, 98.5% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* ---------- Dark device frames: a MacBook around the Mac scenes, the iPhone beside it ---------- */
.devices { position: relative; padding: 0 56px 72px 0; }
.devices.solo { padding: 0; }
.laptop { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }
.laptop.wide { max-width: 1140px; }
/* A MacBook seen from the front: thin black bezels with the camera notch, an aluminium base a little wider than the
   lid, with its lip and the finger notch in the middle of the front edge */
.laptop-lid { position: relative; padding: 10px 10px 12px; border-radius: 18px 18px 6px 6px; background: linear-gradient(#1d1f23, #111214); box-shadow: inset 0 0 0 1px #45484e, inset 0 0 0 2.5px #0b0c0e, 0 44px 80px -44px rgba(48, 41, 31, 0.6); }
.laptop-lid::before { content: ""; position: absolute; z-index: 3; top: 10px; left: 50%; width: 12%; min-width: 52px; max-width: 128px; height: 13px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0b0c0e; }
.laptop-lid::after { content: ""; position: absolute; z-index: 4; top: 13px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #1f2a33; box-shadow: inset 0 0 0 1px #2e3238; }
.laptop-screen { position: relative; overflow: hidden; border-radius: 6px; background: #ebe6dd; }
.laptop-screen .mm { gap: 0; }
.laptop-screen .mm-desk { height: 384px; border: 0; border-radius: 0; box-shadow: none; }
.laptop-screen .mw-win { border: 0; border-radius: 0; box-shadow: none; }
.laptop-base { position: relative; height: 15px; margin: 0 -6.5%; border-radius: 3px 3px 16px 16px / 3px 3px 12px 12px; background: linear-gradient(#eef0f2, #d5d8dc 45%, #b4b8be); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(48, 52, 58, 0.25), 0 20px 34px -18px rgba(48, 41, 31, 0.55); }
.laptop.wide .laptop-base { margin: 0 -4%; height: 19px; }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; min-width: 64px; max-width: 150px; height: 6px; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(#aeb2b8, #c9ccd1); box-shadow: inset 0 1px 2px rgba(30, 33, 38, 0.3); }
.laptop-base::after { content: ""; position: absolute; left: 1.5%; right: 1.5%; bottom: -3px; height: 3px; border-radius: 0 0 50% 50%; background: rgba(60, 64, 70, 0.35); filter: blur(1px); }
.devices-phone { position: absolute; right: 0; bottom: 0; width: 360px; transform: scale(0.6); transform-origin: 100% 100%; }
@media (max-width: 980px) { .devices { padding-right: 24px; } }

/* ---------- Mac: the app window (sidebar hub + page sheet) ---------- */
.mw { container-type: inline-size; width: 100%; }
.mw-win { position: relative; display: flex; width: 100%; height: var(--mw-h, 620px); overflow: hidden; border-radius: 14px; border: 1px solid rgba(22, 24, 27, 0.12); background: var(--sidebar); box-shadow: 0 34px 70px -34px rgba(48, 41, 31, 0.5), 0 2px 6px rgba(48, 41, 31, 0.06); font-family: var(--sans); color: var(--ink); text-align: left; }
.mw-lights { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; gap: 7px; }
.mw-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff7a66; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.mw-lights i:nth-child(2) { background: #e9c46a; }
.mw-lights i:nth-child(3) { background: #7ddbb8; }
.mw-side { flex: none; display: flex; flex-direction: column; width: 194px; padding: 46px 10px 10px; }
.mw-toggle { position: absolute; left: 72px; top: 11px; z-index: 2; display: grid; place-items: center; width: 24px; height: 21px; color: var(--ink-3); }
.mw-toggle svg { width: 15px; height: 15px; }
.mw-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 20px 10px; }
.mw-wordmark { margin: 0; font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.mw-nav { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.mw-item { display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 10px; border-radius: 10px; border: 1px solid transparent; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.mw-item svg { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.mw-item.on { border-color: var(--line-soft); background: var(--selection); box-shadow: 0 2px 5px var(--paper-shadow); font-weight: 600; color: var(--ink); }
.mw-item.on svg { color: var(--ink); }
.mw-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; }
.mw-minutes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 7px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); box-shadow: 0 3px 8px var(--paper-shadow); }
.mw-minutes-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink); }
.mw-minutes-row span { font-size: 10.5px; font-weight: 400; color: var(--ink-3); }
.mw-meter { height: 5px; overflow: hidden; border-radius: 3px; background: var(--line); }
.mw-meter i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.mw-resets { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.mw-plan { display: inline-grid; place-items: center; height: 17px; padding: 0 7px; border-radius: 999px; background: var(--ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: var(--on-ink); }
.mw-getpro { display: grid; place-items: center; height: 25px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--card); font-size: 11px; font-weight: 600; color: var(--ink); }
.mw-link { display: flex; align-items: center; gap: 9px; height: 29px; padding: 0 10px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.mw-link svg { width: 13px; height: 13px; color: var(--ink-3); }
.mw-sheet { flex: 1 1 auto; min-width: 0; margin: 40px 7px 7px 0; overflow: hidden; border-radius: 11px; border: 1px solid var(--line-soft); background: var(--canvas); box-shadow: 0 6px 16px rgba(48, 40, 30, 0.1); }
.mw-page { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; padding: 38px 34px 34px; }
.mw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.mw-title { margin: 0; font-size: 29px; font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.mw-title .second { color: var(--accent); }
.mw-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-stat { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.mw-stat b { font-weight: 600; color: var(--ink); }
.mw-stat svg { width: 11px; height: 11px; color: var(--ink-3); }
.mw-card { border-radius: 19px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 10px 20px rgba(48, 41, 31, 0.08); }
.mw-strip { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.mw-mic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--on-ink); box-shadow: 0 4px 9px var(--paper-shadow); }
.mw-mic svg { width: 17px; height: 17px; }
.mw-strip-text { flex: 1 1 auto; min-width: 0; }
.mw-strip-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.mw-strip-line { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); }
.mw-strip-line .cap { min-width: 18px; height: 18px; padding: 0 4px 1px; border-radius: 5px; font-size: 10px; vertical-align: 1px; }
.mw-strip-meta { display: flex; gap: 18px; }
.mw-meta-k { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mw-meta-v { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink); }
.mw-section { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 -6px; }
.mw-h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mw-only { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.mw-iconbtn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.mw-iconbtn svg { width: 12px; height: 12px; }
.mw-day { margin: 2px 0 -10px 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.mw-rows { display: flex; flex-direction: column; }
.mw-row { position: relative; display: flex; gap: 12px; padding: 11px 14px; }
.mw-row + .mw-row::before { content: ""; position: absolute; left: 64px; right: 14px; top: 0; height: 1px; background: var(--line-soft); }
.mw-time { flex: none; width: 38px; padding-top: 1px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.mw-row-main { flex: 1 1 auto; min-width: 0; }
.mw-row-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.mw-row-meta { margin: 3px 0 0; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }

/* Style (Sources/Flula/Style/StyleView.swift, Mac 0.11.0): the four kinds of app as underline tabs, a card naming
   the apps each lists (an app can carry its own language), and the kind's three tones with an example each. The
   window keeps its height, so picking a kind or a tone never moves the page. */
.mw-tabs { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); }
.web .mw-tab { display: inline-flex; align-items: center; gap: 7px; padding: 0 2px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.mw-tab svg { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.web .mw-tab:hover { border-bottom-color: var(--line-strong); color: var(--ink); }
.web .mw-tab.on { border-bottom-color: var(--ink); font-weight: 600; color: var(--ink); }
.mw-tab:hover svg, .mw-tab.on svg { color: var(--ink); }
.mk-banner { display: flex; flex-direction: column; gap: 12px; padding: 15px 17px 16px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); }
.mk-banner-text { display: flex; flex-direction: column; gap: 3px; }
.mk-banner-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.mk-banner-line { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.mk-apps { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-app { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px 0 6px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--line-mid); background: var(--card); font-size: 11.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.mk-appicon { flex: none; display: grid; place-items: center; width: 15px; height: 15px; box-sizing: border-box; border-radius: 3.5px; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2); }
.mk-appicon svg { width: 9.5px; height: 9.5px; }
.mk-app-lang { display: inline-flex; align-items: center; height: 17px; margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--raised); font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.mk-app-chev { flex: none; width: 9px; height: 9px; margin-left: 1px; color: var(--ink-3); }
.mk-add { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; box-sizing: border-box; border-radius: 999px; border: 1px dashed var(--line-x); font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mk-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.web .mk-tone { display: flex; flex-direction: column; gap: 4px; min-height: 236px; padding: 14px; box-sizing: border-box; border-radius: 13px; border: 1px solid var(--line); background: var(--card); text-align: left; color: var(--ink); cursor: pointer; }
.web .mk-tone:hover { border-color: var(--line-hover); }
.web .mk-tone.on { border: 2px solid var(--ink); padding: 13px; }
.mk-tone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-tone-name { font-size: 13.5px; font-weight: 600; }
.mk-tone-line { font-size: 11px; line-height: 1.35; color: var(--ink-3); }
.mw-radio { flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--ink-4); }
.mk-tone.on .mw-radio { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 3.5px, transparent 4px); }
.mk-eg { display: block; margin-top: auto; padding-top: 14px; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.mk-bubble { display: block; margin-left: 18%; padding: 9px 12px; border-radius: 15px 15px 4px 15px; background: var(--raised); }
.mk-post { display: flex; align-items: flex-start; gap: 8px; }
.mk-avatar { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--raised); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.mk-post-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-post-head { font-size: 10.5px; color: var(--ink-3); }
.mk-post-head b { margin-right: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.mk-mail { display: flex; flex-direction: column; gap: 6px; }
.mk-mail-to { padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); font-size: 10.5px; color: var(--ink-3); }
.mk-mail-body { font-size: 11px; }
.mk-note { display: block; padding: 10px 12px; border-radius: 9px; background: var(--raised); }
.mk-kind-note { margin: -6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.mk-foot { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.mk-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.mw-mono { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

/* The app never hides its sidebar, so a narrower column keeps it, a little slimmer. A phone shows the page sheet alone. */
@container (max-width: 860px) {
  .mw-side { width: 164px; padding: 46px 8px 8px; }
  .mw-brand { margin-left: 8px; }
  .mw-wordmark { font-size: 19px; }
  .mw-item { gap: 8px; height: 30px; padding: 0 8px; font-size: 12px; }
  .mw-page { gap: 16px; padding: 28px 20px 24px; }
  .mw-tabs { gap: 0 16px; }
  .web .mw-tab { font-size: 12.5px; }
  .mk-tones { gap: 10px; }
  .web .mk-tone { min-height: 226px; padding: 12px; }
  .web .mk-tone.on { padding: 11px; }
}
/* One tone a row: each shows its example only while it's picked, so the window still holds the page */
@container (max-width: 680px) {
  .mk-tones { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .web .mk-tone { min-height: 0; }
  .mk-tone:not(.on) .mk-eg { display: none; }
  .mk-eg { padding-top: 8px; }
  .mw-tabs { gap: 0 12px; }
  .web .mw-tab { padding: 0 0 9px; font-size: 12px; }
  .mw-tab svg { display: none; }
}
@container (max-width: 560px) {
  .mw-side { display: none; }
  .mw-sheet { margin: 40px 7px 7px; }
  .mw-page { padding: 24px 18px 22px; }
  /* The kinds' apps wrap to more rows here; a taller window still holds every kind, so switching never moves the page */
  .mw-win.u-mwh-760 { --mw-h: 880px; }
}
@container (max-width: 520px) {
  .mw-strip-meta { display: none; }
  .mm-win { top: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-slim, .mm-writing, .mm-result, .mm-caret-a { opacity: 0 !important; }
  .mm-paste, .mm-caret-b { opacity: 1 !important; }
}

/* ---------- iPhone: device, Messages, the Flula keyboard (apps/ios/Keyboard) ---------- */
.ph { container-type: inline-size; width: 100%; max-width: 360px; margin: 0 auto; font-family: var(--sans); }
.ph-device { position: relative; height: 760px; padding: 9px; border-radius: 56px; background: #16181b; box-shadow: inset 0 0 0 1.5px #3a3d42, 0 44px 80px -40px rgba(48, 41, 31, 0.6), 0 4px 12px rgba(48, 41, 31, 0.12); }
.ph-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 47px; background: #ffffff; color: #111111; }
.ph-island { position: absolute; left: 50%; top: 11px; z-index: 6; width: 98px; height: 29px; transform: translateX(-50%); border-radius: 15px; background: #000000; }
.ph-home-ind { position: absolute; left: 50%; bottom: 7px; z-index: 6; width: 118px; height: 4.5px; transform: translateX(-50%); border-radius: 3px; background: #111111; }

.ms-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 52px 14px 8px; }
.ms-back { position: absolute; left: 14px; top: 58px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14); color: #111111; }
.ms-back svg { width: 15px; height: 15px; }
.ms-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(#b9bcc6, #9ea2ad); font-size: 19px; font-weight: 600; color: #ffffff; }
.ms-name { padding: 3px 11px; border-radius: 999px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); font-size: 12px; font-weight: 600; }
.ms-thread { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 0; padding: 8px 12px 6px; }
.ms-when { align-self: center; margin: 0 0 6px; font-size: 10.5px; color: #8a8d93; }
.bub { max-width: 78%; margin: 0; padding: 7px 12px; border-radius: 18px; font-size: 13.5px; line-height: 1.3; }
.bub.in { align-self: flex-start; background: #e9e9eb; color: #111111; }
.bub.out { align-self: flex-end; background: #0a84ff; color: #ffffff; }
.ms-compose { display: flex; align-items: flex-end; gap: 8px; padding: 4px 10px 8px; }
.ms-plus { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(120, 120, 128, 0.13); color: #3c3c43; }
.ms-plus svg { width: 15px; height: 15px; }
.ms-field { position: relative; flex: 1 1 auto; display: grid; min-height: 34px; padding: 7px 36px 7px 12px; border-radius: 18px; border: 1px solid rgba(60, 60, 67, 0.2); background: #ffffff; font-size: 13.5px; line-height: 1.35; }
.ms-field > * { grid-area: 1 / 1; }
.ms-ph { color: #a1a1a6; }
.ms-typed { color: #111111; opacity: 0; }
.ms-send { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0a84ff; color: #ffffff; opacity: 0; }
.ms-send svg { width: 13px; height: 13px; }

.kb { position: relative; flex: none; padding: 5px 5px 40px; background: #e2e3e8; }
.kb-bar { position: relative; height: 36px; margin: 0 1px 5px; }
.kb-layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; }
.kb-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 12px; font-weight: 600; color: #121416; }
.kb-chip svg.chev { width: 9px; height: 9px; color: rgba(0, 0, 0, 0.45); }
.pdot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #ffffff; }
.pdot svg { width: 11px; height: 11px; }
.pdot.peach { background: #ff9160; }
.pdot.mint { background: #34c79c; }
.pdot.sky { background: #3f9cff; }
.pdot.slate { background: #8c99a8; }
.pdot.stone { background: #6f7b8a; }
.kb-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 11.5px; font-weight: 600; color: #121416; }
.kb-pill svg { width: 12px; height: 12px; }
.kb-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.08); color: #121416; }
.kb-x svg { width: 10px; height: 10px; }
.kb-listen { padding: 0 0 0 4px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.62); }
.kb-wave { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 22px; overflow: hidden; }
.kb-wave i { flex: none; width: 2.2px; height: var(--h, 6px); border-radius: 1.2px; background: #121416; animation: slim-bar 0.6s ease-in-out infinite alternate; }
.kb-wave i:nth-child(2n) { animation-duration: 0.46s; animation-delay: -0.2s; }
.kb-wave i:nth-child(3n) { animation-duration: 0.72s; animation-delay: -0.4s; }
.kb-wave i:nth-child(5n) { animation-duration: 0.54s; animation-delay: -0.1s; }
.kb-timer { flex: none; font-family: var(--mono); font-size: 10px; color: rgba(0, 0, 0, 0.45); }
.kb-spacer { flex: 1 1 auto; }

.orb { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.orb > * { grid-area: 1 / 1; }
.orb-fill { width: 29px; height: 29px; border-radius: 50%; background: #121416; }
.orb-mic { width: 15px; height: 15px; color: #ffffff; }
.orb.on .orb-fill { background: #ff9160; }
.orb-sq { width: 9px; height: 9px; border-radius: 3px; background: #ffffff; }
.orb-arc { width: 36px; height: 36px; animation: orb-spin 2s linear infinite; }
.orb-dots { display: flex; gap: 3px; }
.orb-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #ffffff; animation: hud-hop 1s ease-in-out infinite; }
.orb-dots i:nth-child(2) { animation-delay: 0.12s; }
.orb-dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes orb-spin { to { transform: rotate(360deg); } }

.kb-keys { display: flex; flex-direction: column; gap: 9px; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.kb-row.r2 { padding: 0 15px; }
.k { flex: 1 1 0; display: grid; place-items: center; min-width: 0; height: 37px; border-radius: 7px; background: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); font-size: 18.5px; color: #121416; }
.k.fn { flex: 0 0 39px; background: rgba(0, 0, 0, 0.11); box-shadow: none; font-size: 12px; font-weight: 500; }
.k.fn svg { width: 17px; height: 17px; }
.k.fn.emoji { flex-basis: 34px; }
.k.space { flex: 1 1 auto; font-size: 12.5px; font-weight: 500; }
.k.ret { flex: 0 0 74px; }
.kb-mid { flex: 1 1 auto; display: flex; gap: 5px; padding: 0 9px; }
.kb-sys { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; color: #3c3c43; }
.kb-sys svg { width: 20px; height: 20px; }

/* one 12 s loop: ready, listening, writing, words land */
.lp-a { animation: lp-a 12s linear infinite; }
.lp-b { opacity: 0; animation: lp-b 12s linear infinite; }
.lp-c { opacity: 0; animation: lp-c 12s linear infinite; }
.lp-undo { opacity: 0; animation: lp-undo 12s linear infinite; }
.lp-typed { animation: lp-typed 12s linear infinite; }
.lp-ph { animation: lp-ph 12s linear infinite; }
@keyframes lp-a { 0%, 14% { opacity: 1; } 15%, 59% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes lp-b { 0%, 14.5% { opacity: 0; } 15.5%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lp-c { 0%, 49.5% { opacity: 0; } 50.5%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes lp-undo { 0%, 59% { opacity: 0; } 60%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes lp-typed { 0%, 59.5% { opacity: 0; } 60%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes lp-ph { 0%, 59.5% { opacity: 1; } 60%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }

/* ---------- iPhone: Lock Screen and the Live Activity (always dark) ---------- */
.lk { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 58px 12px 0; background: #a5d4fd; color: #16181b; }
/* The wallpaper: painted hills made for Flula, all sky behind the clock and the Live Activity */
.lk-wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.lk-date { margin: 0; font-size: 15px; font-weight: 600; color: rgba(22, 24, 27, 0.7); }
.lk-time { margin: -2px 0 0; font-size: 82px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: rgba(22, 24, 27, 0.86); }
.la-stack { position: relative; display: grid; width: 100%; margin-top: 26px; }
.la-stack > * { grid-area: 1 / 1; align-self: start; }
.la { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; border-radius: 26px; border: 1px solid rgba(125, 219, 184, 0.3); background: rgba(13, 14, 16, 0.92); }
.la-top { display: flex; align-items: center; gap: 11px; }
.la-tile { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: #121416; }
.la-tile svg { width: 22px; height: 22px; }
.la-who { flex: 1 1 auto; min-width: 0; }
.la-title { margin: 0; font-size: 15px; font-weight: 600; color: #ffffff; }
.la-sub { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.la-sub i { width: 8px; height: 8px; border-radius: 50%; background: #ff9160; }
.la-right { flex: none; text-align: right; font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.la-right b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 400; color: #ffffff; }
.la-right b.mint { color: #7ddbb8; }
.la-actions { display: flex; gap: 8px; }
.la-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 600; color: #ffffff; }
.la-btn.mint { background: rgba(52, 199, 156, 0.2); color: #7ddbb8; }
.la-btn.round { flex: 0 0 38px; }
.la-btn svg { width: 13px; height: 13px; }
.la-rec { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff9160; }
.la-rec i { width: 8px; height: 8px; border-radius: 2.5px; background: #ffffff; }
.la-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: #7ddbb8; animation: orb-spin 0.9s linear infinite; }
.la-text { margin: 0; font-size: 14px; line-height: 1.4; color: #ffffff; }
.la-note { margin: -4px 0 0; font-size: 12px; color: #7ddbb8; }
.lk-foot { position: absolute; left: 34px; right: 34px; bottom: 30px; display: flex; justify-content: space-between; }
.lk-foot span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(22, 24, 27, 0.12); color: #16181b; }
.lk-foot svg { width: 19px; height: 19px; }
.ph-home-ind.light { background: rgba(255, 255, 255, 0.85); }
.di { position: absolute; left: 50%; top: 11px; z-index: 7; display: flex; align-items: center; justify-content: space-between; width: 150px; height: 29px; padding: 0 9px; transform: translateX(-50%); border-radius: 15px; background: #000000; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.di b { font-family: var(--mono); font-weight: 400; color: #7ddbb8; }
.la-1 { animation: la-1 12s linear infinite; }
.la-2 { opacity: 0; animation: la-2 12s linear infinite; }
.la-3 { opacity: 0; animation: la-3 12s linear infinite; }
.la-4 { opacity: 0; animation: la-4 12s linear infinite; }
@keyframes la-1 { 0%, 24% { opacity: 1; } 25.5%, 98% { opacity: 0; } 99.5%, 100% { opacity: 1; } }
@keyframes la-2 { 0%, 24.5% { opacity: 0; } 26%, 54% { opacity: 1; } 55.5%, 100% { opacity: 0; } }
@keyframes la-3 { 0%, 54.5% { opacity: 0; } 56%, 66% { opacity: 1; } 67.5%, 100% { opacity: 0; } }
@keyframes la-4 { 0%, 67% { opacity: 0; } 68.5%, 98% { opacity: 1; } 99.5%, 100% { opacity: 0; } }

/* ---------- iPhone app: Home tab (apps/ios/App/Views/Home) ---------- */
.ia { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--canvas); color: var(--ink); }
.ia-top { display: flex; align-items: center; justify-content: space-between; padding: 54px 16px 0; }
.ia-wordmark { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.06em; color: var(--ink); }
.ia-session { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-mid); background: rgba(253, 252, 250, 0.7); font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.ia-session i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.ia-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 0; }
.ia-title { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.ia-title .second { color: var(--accent); }
.ia-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.ia-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 11.5px; color: var(--ink-3); }
.ia-pill b { font-weight: 600; color: var(--ink); }
.ia-meta { display: flex; align-items: center; gap: 6px; margin: 0 0 -6px 2px; font-size: 11px; color: var(--ink-3); }
.ia-meta .mw-mono { color: var(--ink-2); }
.ia-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.ia-card { border-radius: 19px; border: 1px solid var(--line); background: rgba(253, 252, 250, 0.96); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.22); }
.ia-result { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 10px; }
.ia-result-text { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.ia-summary { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--ink-3); }
.ia-summary svg { width: 12px; height: 12px; }
.ia-actions { display: flex; align-items: center; gap: 8px; }
.ia-btn { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ia-btn.primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.ia-btn.ghost { border-color: transparent; padding: 0 6px; color: var(--ink-2); }
.ia-btn svg { width: 12px; height: 12px; }
.ia-history { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 2px -4px; }
.ia-h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ia-only { font-size: 10.5px; color: var(--ink-3); }
.ia-day { margin: 0 0 -8px 2px; }
.ia-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 6px 11px 14px; }
.ia-row-main { flex: 1 1 auto; min-width: 0; }
.ia-row-text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.ia-row-meta { margin: 3px 0 0; font-size: 11px; color: var(--ink-3); }
.ia-copy { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink-3); }
.ia-copy svg { width: 15px; height: 15px; }
.ia-dock { position: absolute; left: 12px; right: 12px; bottom: 78px; z-index: 4; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 4px 0 7px; border-radius: 999px; border: 1px solid var(--line); background: rgba(236, 233, 228, 0.92); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
.ia-dock-dot { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #ff9160; color: #ffffff; }
.ia-dock-dot svg { width: 17px; height: 17px; }
.ia-dock-text { flex: 1 1 auto; min-width: 0; }
.ia-dock-name { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ia-dock-name svg { width: 10px; height: 10px; color: var(--ink-3); }
.ia-dock-sum { margin: 1px 0 0; font-size: 11px; color: var(--ink-3); }
.ia-orb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3); color: #ffffff; }
.ia-orb svg { width: 20px; height: 20px; }
.ia-tabs { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 4; display: flex; justify-content: space-around; height: 54px; padding: 4px; border-radius: 999px; border: 1px solid rgba(22, 24, 27, 0.06); background: rgba(250, 248, 244, 0.94); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); }
.ia-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; font-family: -apple-system, system-ui, sans-serif; font-size: 9.5px; font-weight: 500; color: var(--ink); }
.ia-tab svg { width: 20px; height: 20px; }
.ia-tab.on { background: rgba(22, 24, 27, 0.07); font-weight: 600; }
.ia-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 3; background: linear-gradient(rgba(247, 245, 241, 0), #f7f5f1 55%); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-b, .lp-c, .lp-ph { opacity: 0 !important; }
  .lp-a, .lp-undo, .lp-typed { opacity: 1 !important; }
  .la-1, .la-3, .la-4 { opacity: 0 !important; }
  .la-2 { opacity: 1 !important; }
}

/* ───────── Stickers: Flula's own UI cut out, with a white edge and a warm shadow ───────── */

.stk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Placement and motion. The wrapper pops in and floats; .hop inside it jumps on hover,
   so leaving the sticker never replays the pop. */
.stk { position: absolute; z-index: 4; animation: stk-pop 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both, stk-float var(--f, 5.5s) ease-in-out infinite; animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.62s); }
.stk.free { position: relative; z-index: auto; }
.stk.settle { animation-name: stk-settle, stk-float; animation-duration: 0.7s, var(--f, 5.5s); }
.hop { display: block; }
.stk:hover > .hop { animation: stk-hop 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes stk-pop { 0% { opacity: 0; transform: scale(0.5); } 62% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: none; } }
@keyframes stk-settle { 0% { opacity: 0; transform: translateY(-40px) scale(1.05); } 60% { opacity: 1; transform: translateY(3px) scale(0.99); } 100% { opacity: 1; transform: none; } }
@keyframes stk-float { 0%, 100% { transform: none; } 50% { transform: translateY(-8px); } }
@keyframes stk-hop { 0% { transform: none; } 36% { transform: translateY(-16px) scale(1.04); } 68% { transform: translateY(2px) scale(0.99); } 100% { transform: none; } }

/* The cut. Boxes, capsules and circles get it from a white margin; words get it from the
   #die filter, whose blur-and-threshold traces the letters. */
.stk-cut { display: block; width: max-content; padding: var(--edge, 6px); border-radius: calc(var(--rad, 16px) + var(--edge, 6px)); background: #ffffff; box-shadow: 0 0 0 1px rgba(22, 24, 27, 0.07), 0 2px 5px rgba(48, 41, 31, 0.1), 0 14px 24px -12px rgba(48, 41, 31, 0.5); }
.stk-cut.round { --rad: 999px; }
.die { filter: url(#die); }

/* Slim indicator, as built (94 × 34, 13 bars 2.5 wide on a 5.5 pitch), at --s times */
.stk .slim { width: calc(94px * var(--s, 2)); height: calc(34px * var(--s, 2)); gap: calc(3px * var(--s, 2)); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.stk .slim i { width: calc(2.5px * var(--s, 2)); height: calc(var(--h, 6px) * var(--s, 2)); border-radius: calc(2px * var(--s, 2)); }

/* Talk button: ink microphone at rest, peach with a white stop square and a circling arc while
   the microphone is on, three dots while Flula writes. Same 12 s loop as the iPhone keyboard. */
.sorb { position: relative; display: grid; place-items: center; width: var(--o, 96px); height: var(--o, 96px); }
.sorb > .state { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; }
.sorb .state > * { grid-area: 1 / 1; }
.sorb .disc { width: 80.5%; height: 80.5%; border-radius: 50%; background: #121416; }
.sorb .on .disc { background: #ff9160; }
.sorb .mic { width: 42%; height: 42%; color: #ffffff; }
.sorb .sq { width: 25%; height: 25%; border-radius: 22%; background: #ffffff; }
.sorb .arc { width: 100%; height: 100%; animation: orb-spin 2s linear infinite; }
.sorb .dots { display: flex; gap: calc(var(--o, 96px) * 0.08); }
.sorb .dots i { width: calc(var(--o, 96px) * 0.125); height: calc(var(--o, 96px) * 0.125); border-radius: 50%; background: #ffffff; animation: sorb-hop 1s ease-in-out infinite; }
.sorb .dots i:nth-child(2) { animation-delay: 0.12s; }
.sorb .dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes sorb-hop { 0%, 100% { transform: none; opacity: 0.55; } 40% { transform: translateY(-30%); opacity: 1; } }

/* Keycaps: the face sits on the key's side and goes down when pressed */
.skey { position: relative; display: block; width: var(--kw, 92px); height: calc(var(--kh, 92px) + 6px); border-radius: 17px; background: #d9d3c8; }
.skey-face { position: absolute; inset: 0 0 6px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px 13px; border-radius: 16px; border: 1px solid var(--line-x); background: var(--card); color: var(--ink-2); animation: skey-hold var(--loop, 12s) linear infinite; animation-delay: var(--kd, 0s); }
.skey-face b { font: 400 31px/1 var(--sans); color: var(--ink); }
.skey-face span { font: 500 12px/1 var(--mono); letter-spacing: 0.02em; }
.skeys { display: flex; gap: 10px; }
.skeys .skey-face { animation-name: skey-chord; }
.skeys .space { --kw: 236px; }
.skeys .space .skey-face { animation-name: skey-tap; }
.skeys .tap .skey-face { animation-name: skey-tap; }
.skey-face.end { align-items: flex-end; }
.skey-face.letter { align-items: center; justify-content: center; }
.skey-face.letter b { font-size: 30px; font-weight: 500; }
.skey.idle .skey-face { animation: none; }
@keyframes skey-hold { 0%, 5.5% { transform: none; background: var(--card); } 6.5%, 33% { transform: translateY(5px); background: var(--raised); } 34%, 100% { transform: none; background: var(--card); } }
@keyframes skey-chord { 0%, 8% { transform: none; background: var(--card); } 10%, 22% { transform: translateY(5px); background: var(--raised); } 25%, 100% { transform: none; background: var(--card); } }
@keyframes skey-tap { 0%, 13% { transform: none; background: var(--card); } 15%, 20% { transform: translateY(5px); background: var(--raised); } 23%, 100% { transform: none; background: var(--card); } }

/* Language caps tap in turn, like typing in each script */
.scaps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.scap { position: relative; display: block; width: var(--c, 60px); height: calc(var(--c, 60px) + 5px); border-radius: 14px; background: #d9d3c8; }
.scap-face { position: absolute; inset: 0 0 5px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line-x); background: var(--card); font: 500 27px/1 var(--sans); color: var(--ink); animation: scap-tap 4s linear infinite; animation-delay: var(--t, 0s); }
.scap-face.mono { font: 500 16px/1 var(--mono); letter-spacing: 0.06em; }
@keyframes scap-tap { 0%, 4% { transform: none; background: var(--card); } 6%, 13% { transform: translateY(4px); background: var(--raised); } 16%, 100% { transform: none; background: var(--card); } }

/* fl. app icon: the charcoal tile, as on the Dock */
.fl-tile { display: grid; place-items: center; width: var(--t, 96px); height: var(--t, 96px); border-radius: 23%; background: #16181b; }
.fl-tile svg { width: 64%; height: 64%; }

/* Result card: the Mac's dark card, crossing out what you took back */
.scard { display: flex; align-items: center; justify-content: center; width: var(--cw, 420px); min-height: var(--chh, 0px); padding: 14px 24px; border-radius: 26px; background: rgba(22, 24, 27, 0.96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.scard p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.45; text-align: center; color: #f1f2f3; animation: scard-text 8s linear infinite; }
.scard .gone { display: inline-block; max-width: 9em; overflow: hidden; white-space: pre; vertical-align: bottom; text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px; animation: scard-gone 8s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes scard-text { 0%, 2% { opacity: 0; } 5%, 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes scard-gone { 0%, 30% { max-width: 9em; opacity: 1; color: inherit; text-decoration-color: transparent; } 34%, 40% { max-width: 9em; opacity: 1; color: #ff7a66; text-decoration-color: #ff7a66; } 50%, 93% { max-width: 0; opacity: 0; color: #ff7a66; text-decoration-color: #ff7a66; } 94%, 100% { max-width: 9em; opacity: 1; color: inherit; text-decoration-color: transparent; } }

/* iPhone keyboard bar while listening: ×, the ink wave, the timer and the talk button on */
.skb { display: flex; align-items: center; gap: 10px; width: var(--bw, 330px); height: 62px; padding: 0 9px 0 12px; border-radius: 16px; background: #e2e3e8; }
.skb .kb-x { width: 34px; height: 34px; }
.skb .kb-x svg { width: 12px; height: 12px; }
.skb .kb-wave { height: 30px; gap: 3.5px; }
.skb .kb-wave i { width: 2.6px; height: calc(var(--h, 6px) * 1.35); }
.skb .kb-timer { font-size: 12px; }
.skb .orb { width: 46px; height: 46px; }
.skb .orb-fill { width: 37px; height: 37px; }
.skb .orb-sq { width: 11.5px; height: 11.5px; border-radius: 3.5px; }
.skb .orb-arc { width: 46px; height: 46px; }

/* Dictionary words, as the Mac's chips */
.schips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 10px; max-width: 340px; }
.schip { display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); font-size: 16px; font-weight: 500; color: var(--ink); }
.schip.on { border-color: var(--ink); background: var(--ink); font-weight: 600; color: var(--on-ink); }

/* Fillers: a struck "um" that peels off and comes back */
.um { display: block; width: var(--uw, 120px); height: auto; overflow: visible; }
.um-peel { animation: um-cycle 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation-delay: var(--ud, 0s); }
@keyframes um-cycle { 0%, 44% { opacity: 1; transform: none; } 51% { opacity: 1; transform: translateY(-6px) scale(1.07); } 63% { opacity: 0; transform: translateY(-64px) scale(1.1); } 85% { opacity: 0; transform: scale(0.55); } 94% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }

/* Fillers inside text: each one a small sticker that lifts off while the gap closes,
   on the same 4.5 s beat as the site's struck fillers */
.peel { position: relative; display: inline-block; width: var(--pw, 2.25em); height: 1em; vertical-align: -0.14em; font-style: normal; animation: peel-gap 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.peel.p2 { animation-delay: 0.2s; }
.peel.w3 { --pw: 2.85em; }
.peel svg { position: absolute; left: -0.12em; top: 50%; width: calc(var(--pw, 2.25em) - 0.05em); height: auto; overflow: visible; transform: translateY(-50%); animation: peel-off 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation-delay: inherit; }
@keyframes peel-gap { 0%, 30% { width: var(--pw, 2.25em); } 46%, 86% { width: 0; } 100% { width: var(--pw, 2.25em); } }
@keyframes peel-off { 0%, 22% { opacity: 1; transform: translateY(-50%); } 30% { opacity: 1; transform: translateY(-64%) scale(1.08); } 44% { opacity: 0; transform: translateY(-230%) scale(1.1); } 86% { opacity: 0; transform: translateY(-50%) scale(0.6); } 95% { opacity: 1; transform: translateY(-50%) scale(1.06); } 100% { opacity: 1; transform: translateY(-50%); } }
/* The gap closing can pull a sentence onto one line fewer; a quote that holds a peeling filler keeps room for two
   lines, so its card never changes height and nothing below it moves */
p:has(> .peel), p:has(> span > .peel) { min-height: 3.2em; min-height: 2lh; }

/* Wordmark: "flula." whose full stop rises into bars, cut around the letters */
.wm-stk { position: relative; display: flex; align-items: baseline; padding: 8px 14px 14px 12px; font-size: 60px; font-weight: 650; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.wm-stk .lstop .room { position: absolute; left: 0; bottom: 0; width: 0.28em; height: 0.68em; border-radius: 0.06em; background: #ffffff; }

/* ---------- S · the sticker sheet ---------- */
.dS { padding: 72px 20px 96px; }
.stk-head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 820px; margin: 0 auto 56px; text-align: center; }
.sheet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 52px 24px; max-width: 1200px; margin: 0 auto; }
.sheet-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px; min-height: 200px; }
.sheet-cell.w2 { grid-column: span 2; }
.sheet-cell .label { text-align: center; }
.sheet-note { max-width: 760px; margin: 64px auto 0; text-align: center; }
@media (max-width: 1100px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-cell.w2 { grid-column: span 2; } }
@media (max-width: 560px) { .sheet { grid-template-columns: minmax(0, 1fr); } .sheet-cell.w2 { grid-column: auto; } .stk .scard { --cw: 300px; } .skeys .space { --kw: 150px; } }

/* ---------- J · stickers stuck around the dark devices and on the app windows ---------- */
.dJ .r3-tile { position: relative; }

/* ---------- K · a sticker is each card's picture, stuck over its top edge ---------- */
.k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 96px 26px; padding-top: 56px; }
.k-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 92px 28px 30px; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); }
.k-pin { position: absolute; left: 24px; top: 0; transform: translateY(-50%); }
.k-pin .schips { justify-content: flex-start; }
.k-card .label { margin-bottom: 2px; }
.k-card .body { margin: 0; }
.dK main > .sec:first-child { border-top: 0; }
.k-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid.two .scard p, .k-row.two .scard p { font-size: 19px; }
@media (max-width: 980px) { .k-grid, .k-grid.two { grid-template-columns: minmax(0, 1fr); } .k-grid.two .stk .scard, .k-row.two .stk .scard { --cw: 320px; } }

/* ---------- On the site pages: stickers anchor to the device, window or card they belong to ---------- */
.stk-anchor { position: relative; min-width: 0; }
.stk-spot { position: absolute; z-index: 4; }
.hero-art > .stk-anchor { width: auto; }
.win-tiles > .stk-anchor { display: flex; flex-direction: column; }
.win-tiles > .stk-anchor > .app-win { flex: 1 1 auto; }
.win-tile, .cta-card, .side-card { position: relative; }
.k-row { gap: 96px 26px; padding-top: 56px; }
.schips.vert { flex-direction: column; align-items: flex-start; }
.cta-card > .stk { right: 40px; top: -44px; }
.side-card.k-side { padding-top: 70px; }

@media (prefers-reduced-motion: reduce) {
  .stk, .stk:hover > .hop, .skey-face, .scap-face, .sorb .arc, .sorb .dots i, .stk .slim i, .scard p, .scard .gone, .um-peel, .peel, .peel svg, .skb .kb-wave i, .skb .orb-arc { animation: none !important; }
  .scard .gone { max-width: 0; opacity: 0; }
}

/* ───────── Demo rows (Home) and other illustrated sections ───────── */

.dL { background: var(--canvas); }
.dL a { text-decoration: none; }

/* Header, on the sky */
.dL-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 22px 20px; }
.dL-nav { display: flex; gap: 28px; }
.web .dL-nav a, .web .dL-signin { font: 500 11.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.web .dL-nav a:hover, .web .dL-signin:hover { color: var(--ink); }
.dL-actions { display: flex; align-items: center; gap: 20px; }

/* Hero: the street of shops is the picture; the sky above it holds the words.
   The picture is pinned at the top and never narrower than 1440, so on a wider window it grows downward
   instead of pushing the street up into the words. */
.dL-sky { position: relative; min-height: calc(max(100vw, 1440px) * 0.6111); background-color: #bfe4fd; background-position: center top; background-size: max(100vw, 1440px) auto; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
.dL-hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 44px 20px 0; text-align: center; }
.dL-h1 { margin: 0; font-size: 50px; font-weight: 520; line-height: 1.06; letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.dL-lead { margin: 0; max-width: 540px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* The voice box, standing in for the reference's prompt box */
.dL-ask { width: 100%; max-width: 600px; margin-top: 12px; padding: 18px 16px 14px 22px; border-radius: 22px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: 0 24px 48px -24px rgba(31, 52, 78, 0.45), 0 2px 6px rgba(31, 52, 78, 0.08); text-align: left; }
.dL-ask-text { margin: 0 0 24px; font-size: 15.5px; line-height: 1.55; color: var(--ink-3); }
.dL-ask-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dL-ask-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.dL-talk svg { width: 16px; height: 16px; }
.dL-fine { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }

/* Sections */
.dL-sec { max-width: 1040px; margin: 0 auto; padding: 84px 20px; }
.dL-sec.tight { padding-top: 40px; }
.dL-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.dL-h2 { margin: 0; font-size: 32px; font-weight: 520; line-height: 1.14; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.dL-intro p { max-width: 380px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Zigzag rows: a small label and two lines beside a painted panel with the real app on it */
.dL-rows { display: flex; flex-direction: column; gap: 76px; padding-top: 64px; }
.dL-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 72px; }
.dL-row.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.dL-row.flip .dL-copy { order: 2; }
.dL-copy { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.dL-tag { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.dL-tag.blue { color: var(--ink-2); }
.dL-tag.green { color: var(--ink-2); }
.dL-tag.ink { color: var(--ink-2); }
.dL-h3 { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.dL-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.dL-panel { position: relative; height: 400px; overflow: hidden; border-radius: 26px; border: 1px solid var(--win-line); box-shadow: var(--win-shadow); }
.dL-panel > .scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.dL-panel > .dL-win { position: absolute; left: 50%; top: 52%; width: 78%; transform: translate(-50%, -50%); }
/* Story panels (Home): the app stands to the right so the home's detail on the left stays in view */
.dL-panel.story > .dL-win { left: auto; right: 5%; width: 62%; transform: translateY(-50%); }
.dL-panel .dL-phone { position: absolute; left: 50%; top: 50%; width: 360px; height: 760px; transform: translate(-50%, -50%) scale(0.48); }
.dL-panel .win-body { min-height: 0; }
.dL-panel .app-win { box-shadow: 0 30px 60px -28px rgba(20, 40, 60, 0.55), 0 2px 6px rgba(20, 40, 60, 0.1); }

.dL-center { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.dL-center .dL-sub { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.dL-app { margin: 40px 0 44px; }

/* Standalone vignettes, and a paragraph with small stickers in it */
.dL-vig { display: block; width: 300px; height: auto; }
.dL-personal { max-width: 560px; margin: 8px 0 0; font-size: 16.5px; line-height: 2; color: var(--ink-2); }
.dL-inline { display: inline-block; margin: 0 3px; vertical-align: -0.35em; }
.dL-inline .stk-cut { --edge: 3px; box-shadow: 0 0 0 1px rgba(22, 24, 27, 0.07), 0 2px 4px rgba(48, 41, 31, 0.14); }
.dL-inline .scap { --c: 26px; border-radius: 7px; }
.dL-inline .scap-face { inset: 0 0 3px; border-radius: 6px; font-size: 14px; }
.dL-inline .schip { height: 26px; padding: 0 10px; font-size: 13px; }

/* The desk, with the real laptop standing on it */
.dL-desk { position: relative; width: 860px; max-width: 100%; aspect-ratio: 1536 / 896; margin-bottom: 6px; }
.dL-desk > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dL-desk-laptop { position: absolute; left: 50%; bottom: 47.5%; width: 593px; transform: translateX(-50%) scale(0.56); transform-origin: 50% 100%; }

/* Footer with a meadow under it */
.dL-foot { position: relative; padding-top: 56px; }
.dL-foot-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; max-width: 1040px; margin: 0 auto; padding: 0 20px 28px; }
.dL-foot-brand { display: flex; flex-direction: column; gap: 8px; }
.dL-foot-brand p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.dL-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.dL-col { display: flex; flex-direction: column; gap: 9px; }
.dL-col b { margin-bottom: 3px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.web .dL-col a { font-size: 13.5px; color: var(--ink-2); }
.web .dL-col a:hover { color: var(--ink); }
.dL-legal { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 0 20px 22px; font-size: 12.5px; color: var(--ink-3); }
.dL-meadow { position: relative; z-index: 0; display: block; width: 100%; height: auto; margin-top: -150px; pointer-events: none; }

@media (max-width: 900px) {
  .dL-nav { display: none; }
  .dL-h1 { font-size: 38px; }
  .dL-sky { min-height: 0; padding-bottom: 62vw; background-position: center bottom; background-size: 100% auto; }
  .dL-row, .dL-row.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dL-row.flip .dL-copy { order: 0; }
  .dL-meadow { margin-top: -60px; }
}

/* ───────── The painted look on every page, and the demo loops ───────── */

/* Header: transparent, so the page's painted sky shows behind it */
.ls .site-head { background: transparent; border-bottom: 0; }
.ls .site-head-row { padding-top: 22px; padding-bottom: 22px; }
/* The page links sit together in one frosted bar on the sky, so they read as navigation: each is a pill that
   fills white on hover, and the current page is a solid white pill. Sign in is a real outlined button. */
.ls .site-nav { gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 28px -16px rgba(31, 52, 78, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.web.ls .site-nav a { padding: 9px 15px; border-radius: 999px; background: transparent; font: 550 14.5px/18px var(--sans); letter-spacing: -0.005em; text-transform: none; color: var(--ink-2); }
.web.ls .site-nav a:hover { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.web.ls .site-nav a[aria-current] { background: #ffffff; color: var(--ink); box-shadow: 0 1px 3px rgba(31, 52, 78, 0.14), 0 0 0 1px rgba(22, 24, 27, 0.06); }
.ls .site-actions { gap: 8px; }
.web.ls .site-signin { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.85); font: 550 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.web.ls .site-signin:hover { background: #ffffff; border-color: var(--line-hover, var(--line-strong)); color: var(--ink); }

/* Footer: the columns, then a painted meadow along the bottom of every page */
.ls .site-foot { position: relative; border-top: 0; }
.ls .site-foot-main, .ls .site-foot-base { position: relative; z-index: 1; }
.ls .site-foot-base { border-top: 0; padding-bottom: 20px; }
.ls .foot-meadow { position: relative; z-index: 0; display: block; width: 100%; height: auto; margin-top: -150px; pointer-events: none; }

/* Type: smaller, calmer headlines; sections separated by air, not lines */
.ls .h1, .ls .landing .h1 { font-size: 50px; line-height: 1.06; letter-spacing: -0.045em; }
.ls .h1.md { font-size: 44px; }
.ls .h2, .ls .landing .h2 { font-size: 32px; line-height: 1.14; letter-spacing: -0.035em; }
.ls .h2.sm { font-size: 28px; }
.ls .lead { font-size: 16.5px; }
.ls .sec { border-top: 0; }
.ls .sec > .in, .ls .landing .sec > .in { padding-top: 72px; padding-bottom: 72px; }

/* The painted top of a page: a layer behind the header and the hero that fades into the paper.
   Each page sets on its root --sky-img, --sky-top (the picture's top sky colour), --sky-ratio (its height / width)
   and --sky-pad (how much plain sky continues above it). The picture's top stays --sky-pad below the page top at
   every window size up to 1728 (the widest MacBook): narrower than 1440 it keeps its 1440 size, cropped at the
   sides; wider, it grows with the window, so the scenery only ever moves down, away from the headline. Past 1728
   the layer, and the hero that leaves room for it, stop growing, so a big screen doesn't push the page down: the
   picture still grows to fill the width, and gives up the clear sky at its top (--sky-clear, the share of its height
   above the scenery behind the words) so the scenery's top stays where it is at 1728; the rest of the extra height
   runs on under the fade at the bottom. */
.ls { --sky-w: max(100vw, 1440px); --sky-y: var(--sky-pad, 0px); --sky-h: calc(var(--sky-y) + min(var(--sky-w), 1728px) * var(--sky-ratio, 0.6111)); --sky-at: calc(var(--sky-y) - var(--sky-clear, 0) * (var(--sky-w) - min(var(--sky-w), 1728px)) * var(--sky-ratio, 0.6111)); }
.ls-sky { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: var(--sky-h); background: var(--sky-img) center var(--sky-at) / var(--sky-w) auto no-repeat, var(--sky-top, #bfe4fd); -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); pointer-events: none; }
/* Phones keep the picture at full width below the words, as before */
@media (max-width: 900px) { .ls { --sky-w: 100vw; --sky-y: var(--sky-pad-phone, var(--sky-pad, 0px)); --sky-h: calc(var(--sky-y) + 1440px * var(--sky-ratio, 0.6111)); } }
/* A short hero lets the next section show above the fold, so the page reads as more than one screen */
.ls .sec.after-sky > .in, .ls .landing .sec.after-sky > .in { padding-top: 40px; }
.ls main { position: relative; z-index: 1; }
.ls-hero { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 920px; min-height: var(--hero-h, auto); margin: 0 auto; padding: 44px 20px 0; text-align: center; }
.ls-hero .lead { max-width: 580px; }
.ls-hero .row { justify-content: center; }
.ls-hero .crumbs { justify-content: center; }
.ls-myth { margin: 0; max-width: 520px; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--ink-3); }
.ls-top { position: relative; z-index: 2; min-height: calc(var(--sky-h, 880px) - 80px); }
.ls-after { max-width: 720px; margin: 28px auto 0; padding: 0 20px; text-align: center; }
.ls-say { position: absolute; z-index: 3; left: calc(50% - 480px); top: 150px; display: flex; flex-direction: column; gap: 6px; max-width: 290px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); text-align: left; }
@media (max-width: 1000px) { .ls-say { display: none; } }
.ls-art { position: relative; z-index: 2; display: flex; justify-content: center; margin: 36px auto 0; padding: 0 20px; }
.ls-art .laptop { max-width: 720px; }
.ls-art.phone { padding-bottom: 40px; }
.ls-art .win-tiles { width: 100%; max-width: 1160px; }

/* A painted panel with the real app on it (as on the home page) */
.ls-panel { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid var(--win-line); box-shadow: var(--win-shadow); }
.ls-panel > .scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-panel > .ls-on { position: relative; z-index: 1; display: flex; justify-content: center; padding: 48px 24px; }

/* Paintings in the page body too, so no page is a sky, text and a meadow:
   painted objects stand in for the icon tiles, and painted panels carry cards, chips or the app. */
.ls .vig { display: block; flex: none; width: 112px; height: 112px; margin: -6px 0 -4px -8px; object-fit: contain; }
.ls .vig.sm { width: 84px; height: 84px; margin: -10px 0; }
.ls .vig.lg { width: 136px; height: 136px; margin: 0 auto; }
.ls-panel.roomy > .ls-on { padding: 56px 72px; }
.ls-panel.tall > .ls-on { padding: 128px 48px; }
.ls-panel.lap > .ls-on { padding: 48px 44px 56px; }
/* Where a Mac laptop sits beside copy, give it the wider column, so its screen reads as a laptop, not a monitor */
.cols > .col.col-art { flex: 1.55 1 520px; }
.ls-panel.desk > .ls-on { padding: 72px 72px 44px; }
.ls-on > .grid2, .ls-on > .grid3 { width: 100%; }
.ls-on .card { box-shadow: 0 30px 60px -28px rgba(20, 40, 60, 0.5), 0 2px 6px rgba(20, 40, 60, 0.1); }
.ls-on .laptop.wide { max-width: 940px; }
.ls-fork { column-gap: 128px; }
.ls-chips { justify-content: center; max-width: 820px; }
.ls-on .chip { border-color: var(--win-line); background: #ffffff; box-shadow: 0 14px 28px -16px rgba(20, 40, 60, 0.55); }
.ls-myth.center { margin: 0 auto 24px; text-align: center; }
.ls-with-vig { display: flex; align-items: center; gap: 22px; }
.ls .legal .ls-owl { display: grid; grid-template-columns: minmax(0, 1fr) 132px; column-gap: 28px; row-gap: 12px; align-items: start; }
.ls .legal .ls-owl > :not(.vig) { grid-column: 1; }
.ls .legal .ls-owl > .vig { grid-column: 2; grid-row: 1 / span 2; width: 132px; height: 132px; margin: -8px 0 0; }
.ls-dest { position: relative; z-index: 2; }
/* The 404's way-back cards: each card is a light blurred painting, with the place written straight
   on it in ink at the top: name and arrow, then one line. Blurred so the cards don't compete with the painted
   header above, and kept light so the ink reads clearly. */
.web .ls-dest > a.card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 196px; overflow: hidden; padding: 24px 26px; text-align: left; color: var(--ink); text-decoration: none; transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.web .ls-dest > a.card:hover { border-color: var(--line-x); box-shadow: 0 30px 56px -26px rgba(48, 41, 31, 0.42), 0 2px 6px rgba(48, 41, 31, 0.08); }
.ls-dest .dest-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-dest .dest-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.ls-dest .dest-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.ls-dest .dest-title svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.web .ls-dest > a.card:hover .dest-title svg { transform: translateX(3px); color: var(--ink); }
.ls-dest .dest-line { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .web .ls-dest > a.card, .ls-dest .dest-title svg { transition: none; } }

@media (max-width: 900px) {
  .ls .h1, .ls .landing .h1 { font-size: 38px; }
  .ls .h2, .ls .landing .h2 { font-size: 28px; }
  .ls-fork { column-gap: 16px; }
  .ls-panel.roomy > .ls-on, .ls-panel.desk > .ls-on { padding: 32px 20px; }
  .ls-panel.tall > .ls-on { padding: 64px 20px; }
  .ls .legal .ls-owl { grid-template-columns: minmax(0, 1fr) 88px; }
  .ls .legal .ls-owl > .vig { width: 88px; height: 88px; }
}

/* Home hero, split like the live site: the words on the left; on the right three app windows take
   turns at the front (Mail, WhatsApp, Slack), and each gets one sentence spoken in two languages. The two behind
   peek out, so a first glance already says "every app". While the front window listens, the Mac's Slim indicator
   shows under it; the words come in grey with a tag per language, the slip is struck and shrinks away, punctuation
   lands and the words turn ink: what Flula writes. 6 s per window, an 18 s loop. Animation only: nothing to press. */
.ls-hero.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; align-content: start; gap: 56px; max-width: 1200px; text-align: left; }
.hx-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.ls-hero.split .row { justify-content: flex-start; }
.ls-hero.split .lead { max-width: 540px; }

.hx { position: relative; height: 350px; }
.hx-win { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: 294px; overflow: hidden; border-radius: 14px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: 0 30px 60px -28px rgba(20, 40, 60, 0.55), 0 2px 6px rgba(20, 40, 60, 0.1); transform-origin: 50% 0; animation: hx-deck 18s var(--ease-out) infinite; }
.hx-win.w2 { --ld: 6s; animation-delay: -12s; }
.hx-win.w3 { --ld: 12s; animation-delay: -6s; }
@keyframes hx-deck {
  0%, 31% { transform: none; opacity: 1; z-index: 3; }
  31.4% { transform: none; opacity: 1; z-index: 1; }
  33.3%, 64.6% { transform: translateY(-56px) scale(0.9); opacity: 1; z-index: 1; }
  66.6%, 97.4% { transform: translateY(-28px) scale(0.95); opacity: 1; z-index: 2; }
  97.6% { transform: translateY(-28px) scale(0.95); opacity: 1; z-index: 3; }
  100% { transform: none; opacity: 1; z-index: 3; }
}
.hx-win .win-bar { flex: none; }
/* Mail: a new message */
.hx-field { display: flex; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); }
.hx-field span { min-width: 54px; color: var(--ink-3); }
.hx-body { flex: 1 1 auto; padding: 16px 18px; }
.hx-hi { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
/* WhatsApp: a chat */
.hx-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.hx-head b { display: block; font-size: 14px; line-height: 1.2; color: var(--ink); }
.hx-head small { font-size: 11.5px; color: var(--ink-3); }
.hx-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--raised); font-size: 13px; font-weight: 650; color: var(--ink-2); }
.hx-chat { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px; background: #f3efe7; }
.hx-in { align-self: flex-start; max-width: 76%; margin: 0 0 auto; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #ffffff; font-size: 14px; color: var(--ink); box-shadow: 0 1px 1px rgba(22, 24, 27, 0.06); }
.hx-compose { display: flex; align-items: center; min-height: 46px; padding: 8px 14px; border-radius: 23px; border: 1px solid var(--line); background: #ffffff; }
/* Slack: a channel */
.hx-team { flex: 1 1 auto; display: flex; min-height: 0; }
.hx-side { flex: none; display: flex; flex-direction: column; gap: 3px; width: 124px; padding: 12px 8px; background: #2a2e35; font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }
.hx-side b { margin: 0 0 8px 8px; font-size: 13px; color: #ffffff; }
.hx-side span { padding: 4px 8px; border-radius: 6px; }
.hx-side .on { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.hx-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.hx-chan { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; font-weight: 650; color: var(--ink); }
.hx-msg { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.hx-msg b { font-size: 13.5px; color: var(--ink); }
.hx-msg p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.hx-team .hx-compose { margin: 0 12px 12px; border-radius: 10px; }
/* The Mac's Slim indicator, under the front window while it listens */
.hx-slim { position: absolute; left: 50%; bottom: -17px; z-index: 5; opacity: 0; transform: translateX(-50%); animation: hx-listen 6s linear infinite; }
@keyframes hx-listen { 0% { opacity: 0; } 4%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }

/* The sentence: words in grey as they're heard, a tag per language, the slip struck and shrunk away, then ink */
.hd-line { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-3); opacity: 0; animation: hd-line 18s var(--ease-out) infinite; animation-delay: var(--ld, 0s); }
.hd-line.l2 { --ld: 6s; }
.hd-line.l3 { --ld: 12s; }
.hd-say { display: block; }
.hd-alt { color: var(--accent); }
.hd-line .tag { margin: 0 3px 0 0; }
.hd-w { opacity: 0; animation: hd-word 18s linear infinite; animation-delay: calc(var(--ld, 0s) + 0.25s + var(--i, 0) * 0.19s); }
.hd-um { display: inline; font-size: 1em; text-decoration: none; background: linear-gradient(var(--danger), var(--danger)) no-repeat 0 60% / 0 2px; animation: hd-fold 18s ease-in-out infinite; animation-delay: var(--ld, 0s); }
.hd-pt { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; opacity: 0; animation: hd-pt 18s var(--ease-out) infinite; animation-delay: var(--ld, 0s); }
@keyframes hd-line { 0% { opacity: 0; transform: translateY(6px); color: var(--ink-3); } 1.5% { opacity: 1; transform: none; } 14.5% { color: var(--ink-3); } 18.5% { color: var(--ink); } 31% { opacity: 1; transform: none; color: var(--ink); } 33.3%, 100% { opacity: 0; transform: translateY(-4px); color: var(--ink); } }
@keyframes hd-word { 0% { opacity: 0; } 1.2%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes hd-fold { 0%, 13% { font-size: 1em; opacity: 1; background-size: 0 2px; color: inherit; } 15.5%, 16.5% { font-size: 1em; opacity: 1; background-size: calc(100% - 0.3em) 2px; color: var(--danger); } 19% { font-size: 0.2em; opacity: 0.6; background-size: calc(100% - 0.3em) 2px; color: var(--danger); } 19.5%, 98% { font-size: 0; opacity: 0; } 100% { font-size: 1em; opacity: 0; background-size: 0 2px; color: inherit; } }
@keyframes hd-pt { 0%, 17% { max-width: 0; opacity: 0; } 20%, 98% { max-width: 0.6em; opacity: 1; } 100% { max-width: 0; opacity: 0; } }

@media (max-width: 1000px) {
  .ls-hero.split { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
  .hx-copy { align-items: center; }
  .ls-hero.split .row { justify-content: center; }
  .hx { width: 100%; max-width: 560px; margin: 0 auto; text-align: left; }
}
@media (max-width: 560px) { .hx-side { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hx-win, .hd-line, .hd-w, .hd-um, .hd-pt { animation: none !important; }
  .hx-slim { display: none; }
  .hx-win.w1 { z-index: 3; }
  .hx-win.w2 { z-index: 2; transform: translateY(-28px) scale(0.95); }
  .hx-win.w3 { z-index: 1; transform: translateY(-56px) scale(0.9); }
  .hd-line { opacity: 1; color: var(--ink); }
  .hd-w { opacity: 1; }
  .hd-um { font-size: 0; opacity: 0; }
  .hd-pt { max-width: none; opacity: 1; }
}

/* iPhone hero: what you say floats beside the phone as a speech bubble, word by word in grey while the
   keyboard listens. The slips are struck in red and fold away while Flula writes, then the bubble flies into the
   phone just as the clean message lands in its field. On the phone's own 12 s loop: listening 1.9-5.9 s,
   writing 6-7.1 s, text in the field from 7.2 s. Animation only. */
.ip-say { gap: 10px; top: 190px; padding: 14px 18px 16px; border-radius: 20px 20px 6px 20px; transform-origin: 100% 100%; opacity: 0; animation: ip-bub 12s var(--ease-out) infinite; }
.ip-rec { display: flex; align-items: center; gap: 3px; height: 14px; }
.ip-rec i { width: 3px; height: 14px; border-radius: 2px; background: #ff9160; transform: scaleY(0.3); animation: ip-rec 0.9s ease-in-out infinite; }
.ip-rec i:nth-child(2) { animation-delay: 0.15s; }
.ip-rec i:nth-child(3) { animation-delay: 0.3s; }
.ip-rec i:nth-child(4) { animation-delay: 0.45s; }
.ip-rec i:nth-child(5) { animation-delay: 0.6s; }
.ip-said { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-3); }
.ip-said .tag { margin: 0 4px 0 0; }
.ip-alt { color: var(--accent); }
.ip-w { opacity: 0; animation: ip-word 12s linear infinite; animation-delay: calc(2s + var(--i, 0) * 0.29s); }
.ip-cut { display: inline; font-size: 1em; text-decoration: none; background: linear-gradient(var(--danger), var(--danger)) no-repeat 0 60% / 0 2px; animation: ip-cut 12s ease-in-out infinite; }
@keyframes ip-bub {
  0%, 15% { opacity: 0; transform: translateY(10px) scale(0.96); }
  17% { opacity: 1; transform: none; }
  53% { opacity: 1; transform: none; }
  59% { opacity: 0; transform: translate(190px, 210px) scale(0.3); }
  100% { opacity: 0; transform: translate(190px, 210px) scale(0.3); }
}
@keyframes ip-word { 0% { opacity: 0; } 1.5%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes ip-cut {
  0%, 48% { font-size: 1em; opacity: 1; background-size: 0 2px; color: inherit; }
  50.5%, 51.5% { font-size: 1em; opacity: 1; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  54% { font-size: 0.2em; opacity: 0.5; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  54.5%, 99% { font-size: 0; opacity: 0; }
  100% { font-size: 1em; opacity: 0; background-size: 0 2px; color: inherit; }
}
@keyframes ip-rec { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ip-say { display: none; } }

/* Voice typing, How it works: one demo in place of the three cards. The steps sit above it and light up
   in turn while the voice typing tool runs once: tap, the words come in grey as they're heard, the slips are struck
   and fold away, the full stop lands and the words turn ink, Copy becomes Copied, and ⌘ V puts the clean sentence
   into a chat. An 11 s loop. Animation only: nothing to press. */
.vd { display: flex; flex-direction: column; gap: 22px; }
.vd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vd-steps li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 16px; opacity: 0.5; }
.vd-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: var(--line-mid); }
.vd-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.vd-steps .num { font: 500 12px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.vd-steps b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.vd-steps span:last-child { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.vd-stage > .ls-on { align-items: center; gap: 20px; padding: 56px 40px; }
.vd-tool { flex: 0 1 540px; min-width: 0; }
.vd-body { display: flex; height: 236px; }
.vd-mic { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 172px; border-right: 1px solid var(--line-soft); background: var(--raised); }
.vd-mic .sorb > .state { opacity: 0; }
.vd-status { display: grid; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.vd-status > span { grid-area: 1 / 1; text-align: center; opacity: 0; }
.vd-out { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px; }
.vd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vd-copy { display: inline-grid; }
.vd-copy > span { grid-area: 1 / 1; text-align: center; }
.vd-copy > span + span { opacity: 0; }
.vd-text { display: grid; }
.vd-text > p { grid-area: 1 / 1; }
.vd-hint { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-4); }
.vd-line { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-3); }
.vd-w { opacity: 0; }
.vd-cut { display: inline; font-size: 1em; background: linear-gradient(var(--danger), var(--danger)) no-repeat 0 60% / 0 2px; }
.vd-pt { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; opacity: 0; }
.vd-keys { flex: none; display: flex; gap: 8px; opacity: 0; }
.vd .vd-keys .skey-face { animation: none; }
.vd-chat { flex: 0 1 340px; display: flex; flex-direction: column; min-width: 0; }
.vd-tool, .vd-chat { height: 272px; }
.vd-field { display: grid; flex: 1 1 auto; margin: 0; min-width: 0; font-size: 14px; line-height: 1.35; }
.vd-field > span { grid-area: 1 / 1; }
.vd-field .ph { color: var(--ink-4); }
.vd-field .typed { color: var(--ink); opacity: 0; }

@keyframes vd-rest { 0%, 7.27% { opacity: 1; } 8.64%, 60.00% { opacity: 0; } 61.36%, 100% { opacity: 1; } }
@keyframes vd-on { 0%, 7.27% { opacity: 0; } 8.64%, 41.82% { opacity: 1; } 43.18%, 100% { opacity: 0; } }
@keyframes vd-write { 0%, 41.82% { opacity: 0; } 43.18%, 60.00% { opacity: 1; } 61.36%, 100% { opacity: 0; } }
@keyframes vd-st-tap { 0%, 7.27% { opacity: 1; } 8.64%, 94.55% { opacity: 0; } 95.91%, 100% { opacity: 1; } }
@keyframes vd-st-on { 0%, 7.27% { opacity: 0; } 8.64%, 41.82% { opacity: 1; } 43.18%, 100% { opacity: 0; } }
@keyframes vd-st-write { 0%, 41.82% { opacity: 0; } 43.18%, 60.00% { opacity: 1; } 61.36%, 100% { opacity: 0; } }
@keyframes vd-st-done { 0%, 60.00% { opacity: 0; } 61.36%, 94.55% { opacity: 1; } 95.91%, 100% { opacity: 0; } }
@keyframes vd-tap { 0%, 6.18% { transform: none; } 7.27% { transform: scale(0.92); } 9.55%, 100% { transform: none; } }
@keyframes vd-w0 { 0%, 10.00% { opacity: 0; } 11.36%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w0 { animation: vd-w0 11s linear infinite; }
@keyframes vd-w1 { 0%, 13.09% { opacity: 0; } 14.45%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w1 { animation: vd-w1 11s linear infinite; }
@keyframes vd-w2 { 0%, 16.18% { opacity: 0; } 17.55%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w2 { animation: vd-w2 11s linear infinite; }
@keyframes vd-w3 { 0%, 19.27% { opacity: 0; } 20.64%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w3 { animation: vd-w3 11s linear infinite; }
@keyframes vd-w4 { 0%, 22.36% { opacity: 0; } 23.73%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w4 { animation: vd-w4 11s linear infinite; }
@keyframes vd-w5 { 0%, 25.45% { opacity: 0; } 26.82%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w5 { animation: vd-w5 11s linear infinite; }
@keyframes vd-w6 { 0%, 28.55% { opacity: 0; } 29.91%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w6 { animation: vd-w6 11s linear infinite; }
@keyframes vd-w7 { 0%, 31.64% { opacity: 0; } 33.00%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w7 { animation: vd-w7 11s linear infinite; }
@keyframes vd-w8 { 0%, 34.73% { opacity: 0; } 36.09%, 94.55% { opacity: 1; } 97.27%, 100% { opacity: 0; } }
.vd-w.w8 { animation: vd-w8 11s linear infinite; }
@keyframes vd-fold { 0%, 44.09% { font-size: 1em; background-size: 0 2px; color: inherit; } 47.73%, 49.55% { font-size: 1em; background-size: calc(100% - 0.3em) 2px; color: var(--danger); } 54.55% { font-size: 0.2em; background-size: calc(100% - 0.3em) 2px; color: var(--danger); } 55.00%, 99.09% { font-size: 0; } 100% { font-size: 1em; background-size: 0 2px; color: inherit; } }
@keyframes vd-pt { 0%, 54.55% { max-width: 0; opacity: 0; } 57.27%, 94.55% { max-width: 0.6em; opacity: 1; } 97.27% { max-width: 0.6em; opacity: 0; } 100% { max-width: 0; opacity: 0; } }
@keyframes vd-ink { 0%, 53.64% { color: var(--ink-3); } 57.73%, 94.55% { color: var(--ink); } 97.27%, 100% { color: var(--ink-3); } }
@keyframes vd-hint { 0%, 8.64% { opacity: 1; } 10.00%, 96.36% { opacity: 0; } 97.73%, 100% { opacity: 1; } }
@keyframes vd-copy-a { 0%, 61.82% { opacity: 1; } 62.91%, 94.55% { opacity: 0; } 95.64%, 100% { opacity: 1; } }
@keyframes vd-copy-b { 0%, 61.82% { opacity: 0; } 62.91%, 94.55% { opacity: 1; } 95.64%, 100% { opacity: 0; } }
@keyframes vd-press { 0%, 60.91% { transform: none; } 62.00% { transform: scale(0.94); } 64.09%, 100% { transform: none; } }
@keyframes vd-keys { 0%, 64.09% { opacity: 0; } 65.91%, 73.18% { opacity: 1; } 75.00%, 100% { opacity: 0; } }
@keyframes vd-k1 { 0%, 66.36% { transform: none; background: var(--card); } 67.09%, 71.36% { transform: translateY(5px); background: var(--raised); } 72.09%, 100% { transform: none; background: var(--card); } }
@keyframes vd-k2 { 0%, 67.91% { transform: none; background: var(--card); } 68.64%, 69.73% { transform: translateY(5px); background: var(--raised); } 70.45%, 100% { transform: none; background: var(--card); } }
@keyframes vd-ph { 0%, 69.09% { opacity: 1; } 70.00%, 94.55% { opacity: 0; } 95.45%, 100% { opacity: 1; } }
@keyframes vd-typed { 0%, 69.09% { opacity: 0; } 70.45%, 94.55% { opacity: 1; } 95.91%, 100% { opacity: 0; } }
@keyframes vd-s1 { 0%, 41.82% { opacity: 1; } 43.64%, 98.18% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes vd-b1 { 0%, 0.00% { transform: scaleX(0); } 41.82%, 96.36% { transform: scaleX(1); } 99.09%, 100% { transform: scaleX(0); } }
.vd-steps li:nth-child(1) { animation: vd-s1 11s linear infinite; }
.vd-steps li:nth-child(1)::after { animation: vd-b1 11s linear infinite; }
@keyframes vd-s2 { 0%, 41.73% { opacity: 0.5; } 43.64%, 61.82% { opacity: 1; } 63.64%, 100% { opacity: 0.5; } }
@keyframes vd-b2 { 0%, 41.82% { transform: scaleX(0); } 61.82%, 96.36% { transform: scaleX(1); } 99.09%, 100% { transform: scaleX(0); } }
.vd-steps li:nth-child(2) { animation: vd-s2 11s linear infinite; }
.vd-steps li:nth-child(2)::after { animation: vd-b2 11s linear infinite; }
@keyframes vd-s3 { 0%, 61.73% { opacity: 0.5; } 63.64%, 96.36% { opacity: 1; } 98.18%, 100% { opacity: 0.5; } }
@keyframes vd-b3 { 0%, 61.82% { transform: scaleX(0); } 96.36%, 96.36% { transform: scaleX(1); } 99.09%, 100% { transform: scaleX(0); } }
.vd-steps li:nth-child(3) { animation: vd-s3 11s linear infinite; }
.vd-steps li:nth-child(3)::after { animation: vd-b3 11s linear infinite; }

.vd-mic .sorb > .rest { animation: vd-rest 11s linear infinite; }
.vd-mic .sorb > .on { animation: vd-on 11s linear infinite; }
.vd-mic .sorb > .write { animation: vd-write 11s linear infinite; }
.vd-mic .sorb { animation: vd-tap 11s var(--ease-out) infinite; }
.vd-status > :nth-child(1) { animation: vd-st-tap 11s linear infinite; }
.vd-status > :nth-child(2) { animation: vd-st-on 11s linear infinite; }
.vd-status > :nth-child(3) { animation: vd-st-write 11s linear infinite; }
.vd-status > :nth-child(4) { animation: vd-st-done 11s linear infinite; }
.vd-line { animation: vd-ink 11s linear infinite; }
.vd-hint { animation: vd-hint 11s linear infinite; }
.vd-cut { animation: vd-fold 11s ease-in-out infinite; }
.vd-pt { animation: vd-pt 11s var(--ease-out) infinite; }
.vd-copy { animation: vd-press 11s var(--ease-out) infinite; }
.vd-copy > span:first-child { animation: vd-copy-a 11s linear infinite; }
.vd-copy > span + span { animation: vd-copy-b 11s linear infinite; }
.vd-keys { animation: vd-keys 11s linear infinite; }
.vd .vd-keys .skey:first-child .skey-face { animation: vd-k1 11s linear infinite; }
.vd .vd-keys .skey + .skey .skey-face { animation: vd-k2 11s linear infinite; }
.vd-field .ph { animation: vd-ph 11s linear infinite; }
.vd-field .typed { animation: vd-typed 11s linear infinite; }

@media (max-width: 1000px) {
  .vd-stage > .ls-on { flex-direction: column; padding: 40px 20px; }
  .vd-tool, .vd-chat { flex: none; width: 100%; max-width: 540px; }
}
@media (max-width: 760px) {
  .vd-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vd-tool { height: auto; }
  .vd-body { flex-direction: column; height: auto; }
  .vd-mic { flex-direction: row; justify-content: flex-start; width: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .vd-mic .sorb { --o: 64px; }
  .vd-out { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd *, .vd *::after, .vd-steps li { animation: none !important; }
  .vd-steps li { opacity: 1; }
  .vd-steps li::after { transform: scaleX(1); }
  .vd-mic .sorb > .rest, .vd-status > :nth-child(4), .vd-w, .vd-copy > span + span, .vd-field .typed { opacity: 1; }
  .vd-copy > span:first-child, .vd-field .ph, .vd-keys, .vd-hint { opacity: 0; }
  .vd-line { color: var(--ink); }
  .vd-cut { font-size: 0; }
  .vd-pt { max-width: none; opacity: 1; }
}

/* Languages hero: one quiet window instead of three examples with stickers. Three sentences take turns
   in it, each spoken in two languages, with Home's sentence animation (6 s each, an 18 s loop): grey words with a tag
   per language while the Slim indicator listens, the slip struck and folded away, punctuation, then ink. */
.ml-demo { position: relative; width: 100%; max-width: 720px; }
.ml-body { display: flex; align-items: center; min-height: 150px; padding: 26px 30px 34px; }
.ml-lines { display: grid; width: 100%; }
.ml-lines > .hd-line { grid-area: 1 / 1; font-size: 22px; line-height: 1.55; letter-spacing: -0.015em; }
.ml-lines .tag { font-size: 11px; vertical-align: 4px; }
@media (max-width: 600px) { .ml-lines > .hd-line { font-size: 18px; } .ml-body { padding: 20px 20px 30px; } }
@media (prefers-reduced-motion: reduce) { .ml-lines > .hd-line.l2, .ml-lines > .hd-line.l3 { display: none; } }

/* Home's Fillers row: what you say floats beside the phone, word by word in grey while the keyboard
   listens. The filler and the slip are struck in red and held for a moment, so the cleaning reads, then they fold
   away, the sentence turns ink, and the bubble flies into the phone just as the clean message lands in its field.
   Here the phone runs on a tighter 7.3 s loop of its own (2026-10-21: the clean message holds 2 s, then it starts
   over): listening 0.3-3.6 s, writing 3.65-4.75 s, text in the field from 4.85 s. The iPhone hero keeps its own loop. */
.dL-panel.has-say .dL-phone { left: 71%; }
.dL-panel.has-say .lp-a { animation: dl-lp-a 7.3s linear infinite; }
.dL-panel.has-say .lp-b { animation: dl-lp-b 7.3s linear infinite; }
.dL-panel.has-say .lp-c { animation: dl-lp-c 7.3s linear infinite; }
.dL-panel.has-say .lp-undo { animation: dl-lp-undo 7.3s linear infinite; }
.dL-panel.has-say .lp-typed { animation: dl-lp-typed 7.3s linear infinite; }
.dL-panel.has-say .lp-ph { animation: dl-lp-ph 7.3s linear infinite; }
@keyframes dl-lp-a { 0%, 3.42% { opacity: 1; } 4.79%, 64.38% { opacity: 0; } 65.75%, 100% { opacity: 1; } }
@keyframes dl-lp-b { 0%, 4.11% { opacity: 0; } 5.48%, 49.32% { opacity: 1; } 50.68%, 100% { opacity: 0; } }
@keyframes dl-lp-c { 0%, 50% { opacity: 0; } 51.37%, 63.7% { opacity: 1; } 65.07%, 100% { opacity: 0; } }
@keyframes dl-lp-undo { 0%, 65.07% { opacity: 0; } 66.44%, 93.84% { opacity: 1; } 97.95%, 100% { opacity: 0; } }
@keyframes dl-lp-typed { 0%, 65.75% { opacity: 0; } 66.44%, 93.84% { opacity: 1; } 97.95%, 100% { opacity: 0; } }
@keyframes dl-lp-ph { 0%, 65.75% { opacity: 1; } 66.44%, 93.84% { opacity: 0; } 97.95%, 100% { opacity: 1; } }
.dL-say { position: absolute; z-index: 2; left: 6%; top: 26%; display: flex; flex-direction: column; gap: 10px; width: 46%; max-width: 280px; padding: 14px 16px 16px; border-radius: 20px 20px 6px 20px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); text-align: left; transform-origin: 100% 100%; opacity: 0; animation: dl-bub 7.3s var(--ease-out) infinite; }
.dL-say .ip-said { font-size: 16px; animation: dl-ink 7.3s linear infinite; }
.dL-say .ip-w { animation: dl-word 7.3s linear infinite; animation-delay: calc(0.4s + var(--i, 0) * 0.2s); }
.dL-say .ip-cut { animation: dl-cut 7.3s ease-in-out infinite; }
.dL-say .ip-rec { animation: dl-rec 7.3s linear infinite; }
@keyframes dl-bub {
  0%, 2.05% { opacity: 0; transform: translateY(10px) scale(0.96); }
  4.11% { opacity: 1; transform: none; }
  62.33% { opacity: 1; transform: none; }
  67.81% { opacity: 0; transform: translate(230px, 60px) scale(0.3); }
  100% { opacity: 0; transform: translate(230px, 60px) scale(0.3); }
}
/* Each word shows for 4.6 s from its own start: the first stays until the bubble has flown, the last is gone before
   the bubble comes back. */
@keyframes dl-word { 0% { opacity: 0; } 2%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes dl-cut {
  0%, 39.04% { font-size: 1em; opacity: 1; background-size: 0 2px; color: inherit; }
  44.52%, 54.11% { font-size: 1em; opacity: 1; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  58.9% { font-size: 0.2em; opacity: 0.5; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  59.59%, 99% { font-size: 0; opacity: 0; }
  100% { font-size: 1em; opacity: 0; background-size: 0 2px; color: inherit; }
}
@keyframes dl-ink { 0%, 54.11% { color: var(--ink-3); } 58.9%, 99% { color: var(--ink); } 100% { color: var(--ink-3); } }
@keyframes dl-rec { 0%, 49.32% { opacity: 1; } 50.68%, 99% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 560px) { .dL-say { display: none; } .dL-panel.has-say .dL-phone { left: 50%; } }
@media (prefers-reduced-motion: reduce) { .dL-say { display: none; } .dL-panel.has-say .dL-phone { left: 50%; } }

/* Mac hero: what you say floats beside the laptop, word by word in grey while the Slim indicator
   listens, then flies into the Mail message just as the text lands. The result card in the app then shows what Flula
   changed. On MacMail's 10 s loop: the key goes down at 0.3 s, listening runs to 2.8 s, the text lands at 3.7 s. */
.ls-art .mac-say { position: absolute; z-index: 3; left: calc(50% - 600px); top: 56px; display: flex; flex-direction: column; gap: 10px; width: 290px; padding: 14px 18px 16px; border-radius: 20px 20px 6px 20px; border: 1px solid var(--win-line); background: #ffffff; box-shadow: var(--win-shadow); text-align: left; transform-origin: 100% 100%; opacity: 0; animation: mh-bub 10s var(--ease-out) infinite; }
.mac-say .ip-said { font-size: 16px; }
.mac-say .ip-said .tag { margin: 0 4px 0 0; }
.mac-say .mh-w { opacity: 0; animation: mh-word 10s linear infinite; animation-delay: calc(0.4s + var(--i, 0) * 0.17s); }
.mac-say .ip-rec { animation: mh-rec 10s linear infinite; }
@keyframes mh-bub {
  0%, 1.5% { opacity: 0; transform: translateY(10px) scale(0.96); }
  3% { opacity: 1; transform: none; }
  34% { opacity: 1; transform: none; }
  38% { opacity: 0; transform: translate(430px, 90px) scale(0.3); }
  100% { opacity: 0; transform: translate(430px, 90px) scale(0.3); }
}
@keyframes mh-word { 0% { opacity: 0; } 1.5%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes mh-rec { 0%, 27.5% { opacity: 1; } 28.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 1240px) { .ls-art .mac-say { display: none; } }
@media (prefers-reduced-motion: reduce) { .ls-art .mac-say { display: none; } }

/* iPhone hero, quicker: the phone and its speech bubble share a 9 s loop of their own. The keyboard
   starts listening at 0.3 s, the slips are struck in red from 3 s and fold away by 4.1 s while Flula writes, and the
   bubble flies in just as the clean message lands at 4.3 s. */
.ls-art.phone .lp-a { animation: ip9-a 9s linear infinite; }
.ls-art.phone .lp-b { animation: ip9-b 9s linear infinite; }
.ls-art.phone .lp-c { animation: ip9-c 9s linear infinite; }
.ls-art.phone .lp-undo { animation: ip9-undo 9s linear infinite; }
.ls-art.phone .lp-typed { animation: ip9-typed 9s linear infinite; }
.ls-art.phone .lp-ph { animation: ip9-ph 9s linear infinite; }
.ls-art.phone .ip-say { animation: ip9-bub 9s var(--ease-out) infinite; }
.ls-art.phone .ip-said { animation: ip9-ink 9s linear infinite; }
.ls-art.phone .ip-w { animation: ip9-word 9s linear infinite; animation-delay: calc(0.4s + var(--i, 0) * 0.2s); }
.ls-art.phone .ip-cut { animation: ip9-cut 9s ease-in-out infinite; }
.ls-art.phone .ip-rec { animation: ip9-rec 9s linear infinite; }
@keyframes ip9-a { 0%, 2% { opacity: 1; } 3%, 46.5% { opacity: 0; } 47.5%, 100% { opacity: 1; } }
@keyframes ip9-b { 0%, 2.5% { opacity: 0; } 3.5%, 36.5% { opacity: 1; } 37.5%, 100% { opacity: 0; } }
@keyframes ip9-c { 0%, 37% { opacity: 0; } 38%, 45.5% { opacity: 1; } 46.5%, 100% { opacity: 0; } }
@keyframes ip9-undo { 0%, 47% { opacity: 0; } 48%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ip9-typed { 0%, 47.5% { opacity: 0; } 48%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ip9-ph { 0%, 47.5% { opacity: 1; } 48%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes ip9-bub {
  0%, 1.5% { opacity: 0; transform: translateY(10px) scale(0.96); }
  3% { opacity: 1; transform: none; }
  44.5% { opacity: 1; transform: none; }
  49% { opacity: 0; transform: translate(190px, 210px) scale(0.3); }
  100% { opacity: 0; transform: translate(190px, 210px) scale(0.3); }
}
@keyframes ip9-word { 0% { opacity: 0; } 1.5%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes ip9-cut {
  0%, 33.3% { font-size: 1em; opacity: 1; background-size: 0 2px; color: inherit; }
  36.7%, 42.2% { font-size: 1em; opacity: 1; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  45.5% { font-size: 0.2em; opacity: 0.5; background-size: calc(100% - 0.3em) 2px; color: var(--danger); }
  46%, 99% { font-size: 0; opacity: 0; }
  100% { font-size: 1em; opacity: 0; background-size: 0 2px; color: inherit; }
}
@keyframes ip9-ink { 0%, 42.2% { color: var(--ink-3); } 45.5%, 99% { color: var(--ink); } 100% { color: var(--ink-3); } }
@keyframes ip9-rec { 0%, 36.5% { opacity: 1; } 37.5%, 99% { opacity: 0; } 100% { opacity: 1; } }

/* iPhone page, How the keyboard works: the "Flula is on" step is drawn as a real iPhone screen, with
   its bezel, Dynamic Island and status bar. Like iOS after opening one app from another, the status bar shows
   "◀ Messages" where the time goes, the way back the screen asks for. */
.how-stage .mini-ph { position: absolute; left: 50%; top: 20px; width: 236px; height: 470px; padding: 7px; transform: translateX(-50%); border-radius: 40px; background: #16181b; box-shadow: inset 0 0 0 1.5px #3a3d42, 0 24px 44px -24px rgba(48, 41, 31, 0.55), 0 2px 6px rgba(48, 41, 31, 0.1); }
.mini-ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: var(--canvas); }
.mini-ph-island { position: absolute; left: 50%; top: 9px; width: 58px; height: 18px; transform: translateX(-50%); border-radius: 10px; background: #000000; }
.mini-ph-status { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 1px 16px 0 17px; font-size: 10px; font-weight: 650; color: #111111; }
.mini-ph-back { display: flex; align-items: center; gap: 2px; color: #111111; }
.mini-ph-back svg { width: 6px; height: 8px; }
.mini-ph-icons { display: flex; align-items: center; gap: 4px; }
.mini-ph-icons svg { width: auto; height: 8.5px; fill: #111111; }
.mini-ph-batt { position: relative; width: 17px; height: 9px; border-radius: 2.6px; border: 1px solid rgba(17, 17, 17, 0.4); }
.mini-ph-batt::after { content: ""; position: absolute; right: -2.6px; top: 2.5px; width: 1.4px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(17, 17, 17, 0.4); }
.mini-ph-batt i { position: absolute; inset: 1px; right: 4px; border-radius: 1.4px; background: #111111; }
.mini-ph-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 18px 0; text-align: center; }
.mini-ph-body .handoff-title { font-size: 18.5px; }

/* The voice typing tool's talk button: `.web button { color: inherit }` outranks `.talk`, so the microphone was
   drawn in ink on the ink circle and the button read as a plain black dot. Give it its white microphone back. */
.web .talk { color: var(--on-ink); }

/* Help's contact card: a white card like the guides above it, with its own short title and line on the
   left and one real button on the right, instead of a grey strip with the address as a small button */
.web .help-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 26px 30px; }
.help-contact-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.help-contact-text .h3, .help-contact-text .body { margin: 0; }

/* A painted header that moves: the painting is split into layers made
   from the same picture: the sky with its clouds lifted out and open water painted in where the ship was, the clouds
   on their own, and the ship cut out with only a thin ring of its own water, so the sea around it stays still. Laid out in the picture's own coordinates, the clouds drift with the wind
   (always away from the picture's edge, so their cut side never shows), the ship rocks on the swell and sways to and
   fro, gulls glide across low over the horizon, and light glints on the water. All of it sits behind the words on
   calm sky, and stops for Reduce Motion. */
.ls-sky .sky-stage { position: absolute; left: 50%; top: var(--sky-at); width: var(--sky-w); height: calc(var(--sky-w) * var(--sky-ratio, 0.5)); transform: translateX(-50%); pointer-events: none; }
.sky-stage > * { position: absolute; display: block; max-width: none; height: auto; }
.sky-cloud.c1 { animation: sky-drift-l 30s ease-in-out infinite alternate; }
.sky-cloud.c2 { animation: sky-drift-r 36s ease-in-out infinite alternate; animation-delay: -14s; }
@keyframes sky-drift-l { from { transform: translateX(-62%); } to { transform: none; } }
@keyframes sky-drift-r { from { transform: none; } to { transform: translateX(42%); } }
.sky-ship { transform-origin: 52% 75%; animation: sky-rock 4.6s ease-in-out infinite alternate, sky-sway 17s ease-in-out infinite alternate; }
@keyframes sky-rock { from { transform: rotate(-1.4deg) translateY(1.4%); } to { transform: rotate(1.4deg) translateY(-1%); } }
@keyframes sky-sway { from { translate: -2.2% 0; } to { translate: 2.2% 0; } }
.sky-gull { width: 1.1%; animation: sky-glide var(--gt, 70s) linear infinite; animation-delay: var(--gd, 0s); }
.sky-gull svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 70%; animation: sky-flap 0.85s ease-in-out infinite alternate; }
.sky-gull path { fill: none; stroke: #ffffff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0.6px 0.7px rgba(40, 60, 80, 0.5)); }
@keyframes sky-glide { 0% { left: -4%; transform: translateY(0); } 50% { transform: translateY(-140%); } 100% { left: 104%; transform: translateY(0); } }
@keyframes sky-flap { from { transform: scaleY(1); } to { transform: scaleY(0.4); } }
.sky-glint { width: 1.1%; aspect-ratio: 3 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%); opacity: 0; animation: sky-glint 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes sky-glint { 0%, 100% { opacity: 0; transform: scale(0.4, 0.6); } 40% { opacity: 1; transform: none; } 65% { opacity: 0; transform: scale(1.3, 0.8); } }
@media (prefers-reduced-motion: reduce) { .sky-stage *, .sky-stage > * { animation: none !important; } .sky-glint, .sky-gull { display: none; } }

/* Speech bubbles in ink: what you say sits on the charcoal of Flula's own indicator and result card,
   not on white. The words come in grey while Flula listens and turn off-white once it has written them; the slips
   are struck in coral, as on the Mac's result card. Same bubble on Home, the Mac page and the iPhone page. */
.ip-say, .dL-say, .ls-art .mac-say {
  --ink: #f1f2f3; --ink-2: #c9ced3; --ink-3: #8f959b; --accent: #3f9cff; --danger: #ff7a66;
  --line-x: rgba(255, 255, 255, 0.18); --card: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.09); background: #16181b;
}

/* Voice typing page's laptop: with no speech bubble beside it, the Mail demo runs a quicker 8 s loop of
   its own. The indicator listens 0.1-1.85 s instead of to 2.95 s, Flula writes 1.8-2.5 s, the text lands at 2.6 s and
   the result card shows what changed until 4.9 s; the message then holds until 7.6 s. The Mac page keeps MacMail's
   10 s loop, which its speech bubble fills. */
.ls-panel.lap .mm-slim { animation: vtm-slim 8s var(--pop) infinite; }
.ls-panel.lap .mm-writing { animation: vtm-writing 8s linear infinite; }
.ls-panel.lap .mm-result { animation: vtm-result 8s var(--ease-out) infinite; }
.ls-panel.lap .hud-card .gone { animation: vtm-gone 8s var(--ease-out) infinite; }
.ls-panel.lap .hud-card .ins { animation: vtm-ins 8s var(--ease-out) infinite; }
.ls-panel.lap .mm-paste { animation: vtm-paste 8s linear infinite; }
.ls-panel.lap .mm-caret-a { animation: vtm-caret-a 8s linear infinite; }
.ls-panel.lap .mm-caret-b { animation: vtm-caret-b 8s linear infinite; }
@keyframes vtm-slim { 0%, 1.25% { opacity: 0; transform: scale(0.6); } 3.75%, 21.25% { opacity: 1; transform: none; } 23.13%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes vtm-writing { 0%, 22.25% { opacity: 0; } 23.75%, 30% { opacity: 1; } 31.25%, 100% { opacity: 0; } }
@keyframes vtm-result { 0%, 30.63% { opacity: 0; transform: scale(0.72); } 33.13%, 57.5% { opacity: 1; transform: none; } 61.25%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes vtm-gone { 0%, 35% { max-width: 9em; opacity: 1; color: var(--hud-ink); text-decoration: line-through; text-decoration-color: transparent; } 37.5%, 45% { max-width: 9em; opacity: 1; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } 50%, 100% { max-width: 0; opacity: 0; color: var(--coral); text-decoration: line-through; text-decoration-color: var(--coral); } }
@keyframes vtm-ins { 0%, 45% { max-width: 0; color: #7dbcff; } 50% { max-width: 4em; color: #7dbcff; } 53.75%, 100% { max-width: 4em; color: var(--hud-ink); } }
@keyframes vtm-paste { 0%, 31.25% { opacity: 0; background: rgba(29, 101, 185, 0.3); } 32.5% { opacity: 1; background: rgba(29, 101, 185, 0.3); } 45%, 95% { opacity: 1; background: rgba(29, 101, 185, 0); } 98.75%, 100% { opacity: 0; background: rgba(29, 101, 185, 0); } }
@keyframes vtm-caret-a { 0%, 31.25% { opacity: 1; } 31.88%, 98.13% { opacity: 0; } 98.75%, 100% { opacity: 1; } }
@keyframes vtm-caret-b { 0%, 31.25% { opacity: 0; } 31.88%, 98.13% { opacity: 1; } 98.75%, 100% { opacity: 0; } }

/* Small text on the painted skies reads at 4.5:1 or better: the hero's labels, fine
   print, breadcrumbs and myth lines are ink-2 rather than ink-3, which was tuned for paper (3.7-4.5 on the skies). */
.ls-hero .label, .ls-hero .fine, .ls-hero .crumbs, .web .ls-hero .crumbs a, .ls-myth { color: var(--ink-2); }
.ls-hero .crumbs li + li::before { color: var(--ink-3); }

/* ───────── Per-element values ───────── */

/* CSP: the canvas set these per element with style=""; the site's CSP allows classes only. */
.hero-h { --hero-h: calc(var(--sky-h) - 80px); }
.u-cw-480 { --cw: 480px; }
.u-d-0-2 { --d: 0.2s; }
.u-d-0-4 { --d: 0.4s; }
.u-d-0-45 { --d: 0.45s; }
.u-f-5-2 { --f: 5.2s; }
.u-f-5-6 { --f: 5.6s; }
.u-f-6-2 { --f: 6.2s; }
.u-h-4 { --h: 4px; }
.u-h-5 { --h: 5px; }
.u-h-5-4 { --h: 5.4px; }
.u-h-6 { --h: 6px; }
.u-h-6-4 { --h: 6.4px; }
.u-h-7 { --h: 7px; }
.u-h-7-2 { --h: 7.2px; }
.u-h-7-8 { --h: 7.8px; }
.u-h-8 { --h: 8px; }
.u-h-8-9 { --h: 8.9px; }
.u-h-9 { --h: 9px; }
.u-h-9-5 { --h: 9.5px; }
.u-h-10 { --h: 10px; }
.u-h-10-9 { --h: 10.9px; }
.u-h-11 { --h: 11px; }
.u-h-11-7 { --h: 11.7px; }
.u-h-12 { --h: 12px; }
.u-h-12-8 { --h: 12.8px; }
.u-h-13 { --h: 13px; }
.u-h-13-1 { --h: 13.1px; }
.u-h-14 { --h: 14px; }
.u-h-14-5 { --h: 14.5px; }
.u-h-15 { --h: 15px; }
.u-h-15-8 { --h: 15.8px; }
.u-h-16 { --h: 16px; }
.u-h-16-3 { --h: 16.3px; }
.u-h-17 { --h: 17px; }
.u-h-18 { --h: 18px; }
.u-h-19 { --h: 19px; }
.u-h-20 { --h: 20px; }
.u-i-0 { --i: 0; }
.u-i-1 { --i: 1; }
.u-i-2 { --i: 2; }
.u-i-3 { --i: 3; }
.u-i-4 { --i: 4; }
.u-i-5 { --i: 5; }
.u-i-6 { --i: 6; }
.u-i-7 { --i: 7; }
.u-i-8 { --i: 8; }
.u-i-9 { --i: 9; }
.u-i-10 { --i: 10; }
.u-i-11 { --i: 11; }
.u-i-12 { --i: 12; }
.u-kh-54 { --kh: 54px; }
.u-kw-54 { --kw: 54px; }
.u-mwh-660 { --mw-h: 660px; }
.u-mwh-760 { --mw-h: 760px; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-mxw-100p { max-width: 100% !important; }
.u-mxw-380 { max-width: 380px !important; }
.u-mxw-980 { max-width: 980px !important; }
.u-o-72 { --o: 72px; }
.u-o-88 { --o: 88px; }
.u-rad-26 { --rad: 26px; }
.u-s-1-2 { --s: 1.2; }
.u-sw-2 { --sw: 2em; }
.u-sw-2-4 { --sw: 2.4em; }
.u-sw-4-6 { --sw: 4.6em; }
.u-sw-8 { --sw: 8em; }
.u-sw-20 { --sw: 20em; }
.u-sw-21 { --sw: 21em; }
.u-wd-70p { width: 70% !important; }
.u-wd-85p { width: 85% !important; }
.u-wd-100p { width: 100% !important; }
.u-wd-360 { width: 360px !important; }

/* Each page's painted header (lstyle.css reads these on the .ls root). */
.ls.sky-home { --sky-img: url("/img/hero-home.jpg"); --sky-top: #a8d8fd; --sky-pad: 240px; --sky-pad-phone: 360px; --sky-ratio: 0.3333; --sky-clear: 0.52; }
.ls.sky-mac { --sky-img: url("/img/hero-mac.jpg"); --sky-top: #95cffc; --sky-pad: 0px; --sky-ratio: 0.6111; --sky-clear: 0.42; }
.ls.sky-iphone { --sky-img: url("/img/hero-iphone.jpg"); --sky-top: #95ccfd; --sky-pad: 0px; --sky-ratio: 0.7; --sky-clear: 0.42; }
.ls.sky-voice { --sky-img: url("/img/hero-voice-typing.jpg"); --sky-top: #a7d8fb; --sky-pad: 0px; --sky-ratio: 0.6111; --sky-clear: 0.43; }
.ls.sky-languages { --sky-img: url("/img/hero-languages.jpg"); --sky-top: #acd9fd; --sky-pad: 220px; --sky-pad-phone: 340px; --sky-ratio: 0.3333; --sky-clear: 0.53; }
.ls.sky-compare { --sky-img: url("/img/hero-compare.jpg"); --sky-top: #aedefe; --sky-pad: 130px; --sky-pad-phone: 240px; --sky-ratio: 0.3333; --sky-clear: 0.6; }
/* Compare pages: the small print under the lead stays as narrow as the lead. */
.sky-compare .ls-hero .fine { max-width: 640px; }
.ls.sky-help { --sky-img: url("/img/hero-help.jpg"); --sky-top: #b5dcfe; --sky-pad: 180px; --sky-pad-phone: 300px; --sky-ratio: 0.3333; --sky-clear: 0.55; }
.ls.sky-legal { --sky-img: url("/img/hero-legal.jpg"); --sky-top: #bbe1fe; --sky-pad: 120px; --sky-pad-phone: 240px; --sky-ratio: 0.3333; --sky-clear: 0.57; }
.ls.sky-404 { --sky-img: url("/img/hero-404.jpg"); --sky-top: #99cefc; --sky-pad: 60px; --sky-ratio: 0.5; --sky-clear: 0.48; }

/* The Style window's kinds of app: each kind's panel is drawn in the HTML; only the chosen kind's shows. */
.mw-panel { display: contents; }

/* On phones the MacBook's base, which is wider than its lid, must still fit inside the column. */
@media (max-width: 760px) {
  .laptop { width: 88%; }
  .laptop.wide { width: 92%; }
}

/* Phones keep each painting at its 1440 px size, cropped to the middle, so the scenery fills the band the
   phone layout reserves for it instead of leaving a strip of plain sky above a thin picture. */
@media (max-width: 900px) { .ls { --sky-w: max(100vw, 1440px); } }

/* On phones the comparison rows stack into cards; each answer is labelled with its product from data-label. */
@media (max-width: 640px) {
  .cmp td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
}

/* The 404's moving header: each layer sits where it is in the 2880 × 1440 painting (percentages of the
   picture), the gulls fly at their own heights and speeds, and the glints take turns. The ship's patch must stay
   exactly over the ship painted in the sky. */
.sky-cloud.c1 { left: 0%; top: 23.403%; width: 13.646%; }
.sky-cloud.c2 { left: 79.861%; top: 18.264%; width: 20.139%; }
.sky-ship { left: 50.694%; top: 56.667%; width: 19.792%; }
.sky-gull.g1 { top: 48.5%; --gt: 64s; --gd: -8s; }
.sky-gull.g2 { top: 51.5%; --gt: 82s; --gd: -40s; }
.sky-gull.g3 { top: 53.5%; --gt: 98s; --gd: -70s; }
.sky-glint.g1 { left: 43.06%; top: 72.22%; --d: -0.0s; }
.sky-glint.g2 { left: 29.17%; top: 84.72%; --d: -0.61s; }
.sky-glint.g3 { left: 52.78%; top: 84.72%; --d: -1.22s; }
.sky-glint.g4 { left: 55.56%; top: 95.83%; --d: -1.83s; }
.sky-glint.g5 { left: 65.97%; top: 90.28%; --d: -2.44s; }
.sky-glint.g6 { left: 72.92%; top: 77.78%; --d: -3.05s; }
.sky-glint.g7 { left: 79.86%; top: 86.81%; --d: -0.46s; }
.sky-glint.g8 { left: 76.39%; top: 95.83%; --d: -1.07s; }
.sky-glint.g9 { left: 73.61%; top: 66.67%; --d: -1.68s; }
.sky-glint.g10 { left: 36.11%; top: 66.67%; --d: -2.29s; }
.sky-glint.g11 { left: 89.58%; top: 90.28%; --d: -2.9s; }
.sky-glint.g12 { left: 48.61%; top: 77.78%; --d: -0.31s; }
.sky-glint.g13 { left: 61.11%; top: 97.22%; --d: -0.92s; }
.sky-glint.g14 { left: 69.44%; top: 83.33%; --d: -1.53s; }
.sky-glint.g15 { left: 85.42%; top: 95.83%; --d: -2.14s; }
.sky-glint.g16 { left: 41.67%; top: 88.89%; --d: -2.75s; }
.sky-glint.g17 { left: 81.94%; top: 75.00%; --d: -0.16s; }
.sky-glint.g18 { left: 33.33%; top: 97.22%; --d: -0.77s; }
/* The layers are as wide as the painting (at least 1440 px); clip them to the painted band like its background. */
.ls-sky { overflow: hidden; }
/* On phones the 404's painting and its layers shift left together, so the ship stays in view, and start a little
   lower, so the wrapped lines above stay on clear sky. */
.ls.sky-404 { --sky-pad-phone: 140px; }
@media (max-width: 600px) {
  .ls.sky-404 .ls-sky { background-position: calc(50% - 150px) var(--sky-at), 0 0; }
  .ls.sky-404 .ls-sky .sky-stage { transform: translateX(calc(-50% - 150px)); }
}

/* Text colours raised to 4.5:1 on paper, as in the apps and the portal (main's contrast fix): faint ink, danger
   text and success. The danger fills and lines keep their lighter red. */
:root { --ink-4: #6c7176; --danger: #c1341d; --success: #137556; }

/* Compare and Help hubs: each card is one link, its heading's, stretched over the whole card,
   so "Read the comparison" and the rest of the card open the page too. */
.vs-card, .help-card { position: relative; transition: border-color 0.2s var(--ease-out); }
.vs-card:hover, .help-card:hover { border-color: var(--line-x); }
.vs-card h2 a::after, .help-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.web .vs-card h2 a:focus-visible, .web .help-card h2 a:focus-visible { outline: none; }
.web .vs-card h2 a:focus-visible::after, .web .help-card h2 a:focus-visible::after { outline: 2px solid var(--sky); outline-offset: 3px; }
.vs-card .read-more svg, .help-card .read-more svg { transition: transform 0.2s var(--ease-out); }
.vs-card:hover .read-more svg, .help-card:hover .read-more svg { transform: translateX(3px); }

/* Hinglish, Spanglish and Translate: "Flula writes in". The sentence as spoken, a choice of output language,
   and what Flula wrote, on a white card on the painted panel. Choosing a language swaps the result in
   (js/language-examples.js); "Same as spoken" is pressed until you pick another. */
.lang-card { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 680px; }
.web .lang-opt { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: #ffffff; color: var(--ink-2); font-size: 14.5px; font-weight: 550; line-height: 1.2; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.web .lang-opt:hover { border-color: var(--line-hover); color: var(--ink); }
.web .lang-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); cursor: default; }
.lang-out { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 20px 22px; border-radius: 16px; background: var(--raised); }
.lang-out-text { margin: 0; font-size: 21px; font-weight: 520; line-height: 1.45; letter-spacing: -0.015em; color: var(--ink); }
.lang-out-note { margin: auto 0 0; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 640px) {
  .lang-out { padding: 18px; }
  .lang-out-text { font-size: 19px; }
}

/* Translate page hero: the Languages Notes window, but each sentence is heard in one language and written in
   English. The heard words come in grey with their language's tag, as on the other language pages; then they
   give way to the English Flula writes, in ink. Same 6 s per sentence, same 18 s loop. */
.ml-tr .hd-line { display: grid; }
.ml-tr .hd-say, .ml-tr .hd-tr { grid-area: 1 / 1; }
.ml-tr .hd-say { animation: tr-heard 18s var(--ease-out) infinite; animation-delay: var(--ld, 0s); }
.ml-tr .hd-tr { display: block; color: var(--ink); opacity: 0; animation: tr-written 18s var(--ease-out) infinite; animation-delay: var(--ld, 0s); }
@keyframes tr-heard { 0%, 14% { opacity: 1; } 16.5%, 100% { opacity: 0; } }
@keyframes tr-written { 0%, 14.5% { opacity: 0; transform: translateY(4px); } 17.5%, 100% { opacity: 1; transform: none; } }
/* Without motion: the first sentence as heard, small and grey, above what Flula wrote */
@media (prefers-reduced-motion: reduce) {
  .ml-tr .hd-line { display: flex; flex-direction: column; gap: 6px; }
  .ml-tr .hd-say { font-size: 0.72em; color: var(--ink-3); }
  .ml-tr .hd-tr { opacity: 1; }
}

/* Help articles: a long settings path (System Settings › Accessibility › Voice Control) wraps on a phone
   instead of pushing the page sideways; each line keeps the path's rounded box. */
@media (max-width: 640px) { .path { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }

/* The hero's breadcrumb links keep their hover ink over the sky rule above. */
.web .ls-hero .crumbs a:hover { color: var(--ink); }

/* site.js sets .is-hidden on <html> while the tab is in the background: every loop pauses. */
.is-hidden .web *, .is-hidden .web *::before, .is-hidden .web *::after { animation-play-state: paused !important; }

/* Home hero windows drawn like the real apps (2026-10-22, owner: "make the demos more like slack, mail and messenger
   style"): macOS Mail's compose window, a WhatsApp chat and Slack, in their own chrome, colours and system font, with
   no logos. The sentence Flula writes is the same animated line as before, now typed into each app's own field. */
.ax-mail, .ax-chat, .ax-slack { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: 12px; }
.ax-mail .hd-line, .ax-chat .hd-line, .ax-slack .hd-line { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.ax-lights { display: inline-flex; flex: none; gap: 7px; }
.ax-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.ax-lights i:nth-child(2) { background: #febc2e; }
.ax-lights i:nth-child(3) { background: #28c840; }

/* Mail */
.ax-bar { position: relative; flex: none; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; border-bottom: 1px solid #dcdcdc; background: #f3f3f3; }
.ax-title { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: #3c3c3c; pointer-events: none; }
.ax-tool { position: relative; display: grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; color: #6e6e73; }
.ax-tool b { font-size: 12px; font-weight: 600; }
.ax-tool.right { margin-left: auto; }
.ax-field { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border-bottom: 1px solid #e6e6e6; font-size: 13px; color: #1d1d1f; }
.ax-field > span { min-width: 56px; text-align: right; color: #8a8a8e; }
.ax-token { padding: 1px 8px; border-radius: 9px; background: #ebebeb; font-weight: 500; color: #1d1d1f; }
.ax-mail .hx-body { padding: 14px 18px 0; }
.ax-mail .hx-hi { margin: 0 0 8px; font-size: 15px; color: #1d1d1f; }

/* WhatsApp */
.ax-chathead { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-bottom: 1px solid #e3e3e3; background: #f0f2f5; }
.ax-chathead .ax-lights { margin-right: 8px; }
.ax-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #c7d0d6; font-size: 14px; font-weight: 600; color: #ffffff; }
.ax-who b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; color: #111b21; }
.ax-who small { font-size: 12px; color: #667781; }
.ax-icons { display: flex; gap: 18px; margin-left: auto; color: #54656f; }
.ax-chatbody { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 18px; background: #efeae2; }
.ax-in { position: relative; align-self: flex-start; max-width: 72%; margin: 0; padding: 6px 9px 8px; border-radius: 0 8px 8px 8px; background: #ffffff; font-size: 14px; line-height: 1.35; color: #111b21; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.ax-in::before { content: ""; position: absolute; left: -7px; top: 0; border-width: 0 8px 9px 0; border-style: solid; border-color: transparent #ffffff transparent transparent; }
.ax-in time { margin-left: 10px; font-size: 11px; color: #667781; vertical-align: -2px; }
.ax-composer { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #f0f2f5; }
.ax-ico { flex: none; display: grid; place-items: center; color: #54656f; }
.ax-input { flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: #ffffff; }

/* Slack */
.ax-slacktop { flex: none; display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 12px; background: #3f0e40; }
.ax-search { display: flex; align-items: center; gap: 6px; width: 46%; height: 22px; margin: 0 auto; padding: 0 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.ax-team { flex: 1 1 auto; display: flex; min-height: 0; }
.ax-side { flex: none; display: flex; flex-direction: column; gap: 2px; width: 132px; padding: 10px 8px; background: #3f0e40; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.ax-side b { display: flex; align-items: center; gap: 4px; margin: 0 0 8px 8px; font-size: 14px; font-weight: 800; color: #ffffff; }
.ax-side span { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; }
.ax-side .on { background: rgba(255, 255, 255, 0.92); font-weight: 600; color: #3f0e40; }
.ax-side em { margin: 10px 0 2px 8px; font-size: 12px; font-style: normal; color: rgba(255, 255, 255, 0.6); }
.ax-dot { width: 8px; height: 8px; border-radius: 50%; background: #2bac76; }
.ax-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: #ffffff; }
.ax-chan { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-bottom: 1px solid #e8e8e8; }
.ax-chan b { font-size: 15px; font-weight: 800; color: #1d1c1d; }
.ax-members { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 3px; border-radius: 6px; border: 1px solid #dddddd; font-size: 12px; color: #616061; }
.ax-members i { display: grid; place-items: center; width: 18px; height: 18px; margin-left: -4px; border-radius: 5px; border: 1.5px solid #ffffff; background: #8a6d5a; font-size: 10px; font-style: normal; font-weight: 700; color: #ffffff; }
.ax-members i:first-child { margin-left: 0; background: #5b8a72; }
.ax-msg { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px 0; }
.ax-sq { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 7px; background: #5b8a72; font-size: 14px; font-weight: 700; color: #ffffff; }
.ax-msg b { font-size: 14px; font-weight: 800; color: #1d1c1d; }
.ax-msg time { margin-left: 4px; font-size: 11.5px; font-weight: 400; color: #616061; }
.ax-msg p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; color: #1d1c1d; }
.ax-box { flex: none; margin: 0 12px 12px; border-radius: 8px; border: 1px solid #bcbcbc; background: #ffffff; }
.ax-fmt { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 10px; border-radius: 8px 8px 0 0; background: #f8f8f8; font-size: 12.5px; color: #616061; }
.ax-fmt b { font-weight: 800; }
.ax-fmt i { font-style: italic; }
.ax-fmt span { width: 1px; height: 14px; background: #dddddd; }
.ax-box .hd-line { padding: 8px 12px 4px; }
.ax-boxfoot { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px 0 10px; color: #616061; }
.ax-send { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 5px; background: #e8e8e8; color: #868686; }
/* The same chrome on Home's rows */
.dL-win.ax-mail .win-body { padding: 14px 18px 18px; }
.dL-win.ax-mail .edits { min-height: 112px; }
.dL-win.ax-chat .ax-chatbody { min-height: 92px; }
.dL-win.ax-chat .ax-input .edits { min-height: 0; }
.dL-win.ax-chat .ax-input .edit-line { gap: 0; }
@media (max-width: 560px) { .ax-side, .ax-search { display: none; } }