@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/welcome/DMSans.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/welcome/Fraunces600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The public landing page (/welcome). Look: warm paper and deep ink, one strong persimmon (the sun over Bocas del
   Toro), the green of WhatsApp kept for the phone. Fraunces for the big words, DM Sans for the rest, both served from
   this site (the app's content security policy allows nothing else; Georgia and the system sans are the fallbacks).
   The hero is two columns on a wide screen, words on the left and the phone on the right; on a phone the words come
   first, then the phone, then the button.
   Nothing is styled inline: the film is played by welcome.js adding classes (.in, .hl, .dim, .shake, .final, .on)
   that the rules below animate. Without script (no "js" class on <html>) every example is simply showing, in its
   final frame, one under the other, and the narration is a numbered list. Under prefers-reduced-motion the script
   shows the final frame and nothing plays. */
:root {
  --paper: #f6efe2; --paper-2: #ece1ca; --card: #fbf6ea; --ink: #17201e; --muted: #4d5550;
  --line: #cfc2a3; --rule: #17201e;
  --accent: #f0672d; --accent-deep: #b83d12; --on-accent: #17201e; --btn-shadow: #17201e;
  --link: #0b5f52; --focus: #17201e; --green: #0b5f52;
  --panel: #17201e; --panel-text: #f6efe2; --panel-btn-shadow: #f6efe2;
  --red: #e5484d;
  /* the phone keeps its own colours in light and dark: it is a screen */
  --wa-head: #0b5e55; --wa-wall: #efe6d2; --wa-them: #ffffff; --wa-me: #d9fdd3; --wa-text: #1b2a2a; --wa-meta: #5d6d6b;
  --wa-tick: #34b7f1; --wa-bezel: #121a18; --wa-inbox: #0e6b5f; --wa-google: #e5e8ea; --amber: #f2b25c;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111816; --paper-2: #19221f; --card: #1b2522; --ink: #f3ecdc; --muted: #b4bbb3;
    --line: #34423d; --rule: #f3ecdc;
    --accent: #ff8a5c; --accent-deep: #ff8a5c; --on-accent: #111816; --btn-shadow: #f3ecdc;
    --link: #6fd6c0; --focus: #f3ecdc; --green: #6fd6c0;
    --panel: #1d2a26; --panel-text: #f3ecdc; --panel-btn-shadow: #f3ecdc;
    --wa-bezel: #0b0f0e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--sans);
  padding-bottom: env(safe-area-inset-bottom);
}

/* one language at a time: the page holds all five, <html lang> picks. data-l is a list of the languages an
   element is shown in ("en es" for the text English and Spanish readers share). */
html[lang="en"] [data-l]:not([data-l~="en"]),
html[lang="es"] [data-l]:not([data-l~="es"]),
html[lang="fr"] [data-l]:not([data-l~="fr"]),
html[lang="de"] [data-l]:not([data-l~="de"]),
html[lang="nl"] [data-l]:not([data-l~="nl"]) { display: none !important; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--accent); color: var(--on-accent);
  padding: 10px 14px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 8px; }

/* the little sun beside the name */
.sun {
  display: inline-block; flex: none; width: 0.58em; height: 0.58em; margin-right: 0.32em; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0.09em var(--paper), 0 0 0 0.16em var(--ink); vertical-align: 0.04em;
}

/* ---- header */
.top {
  display: flex; align-items: center; gap: 4px 14px;
  max-width: 1280px; margin: 0 auto; padding: 14px var(--gutter);
}
.top .brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  font: 600 27px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.langs { position: relative; }
.lang-pick > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.2;
}
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary:hover, .lang-pick[open] > summary { background: var(--paper-2); }
.lg-ico { width: 15px; height: 15px; }
.lg-chev { width: 10px; height: 7px; transition: transform 0.2s; }
.lang-pick[open] .lg-chev { transform: rotate(180deg); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 172px; padding: 6px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column;
}
.lang-list a { display: block; min-height: 44px; padding: 10px 12px; line-height: 24px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 500; }
.lang-list a:hover { background: var(--paper-2); }
.lang-list a.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.top .signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink); font-weight: 600; font-size: 15px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- the opening: the words and the phone. One column on a phone (headline, phone, then the button); two on a wide screen. */
.opening {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: clip;
  max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter) 40px;
}
.hero { display: contents; }
.opening .eyebrow { order: 1; } .opening h1 { order: 2; }
.opening .stage { order: 3; }
.opening .lead { order: 4; }
.opening .plan-line { order: 5; } .opening .actions { order: 6; } .opening .plan-line.refer { order: 7; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
.eyebrow {
  display: flex; gap: 12px; margin: 14px 0 14px; max-width: 24em; color: var(--accent-deep);
  font: 600 19px/1.28 var(--display); letter-spacing: -0.01em;
}
.eyebrow::before { content: ""; flex: none; width: 26px; height: 2.5px; margin-top: 0.62em; background: currentColor; border-radius: 2px; }
h1 { font-size: clamp(37px, 10.4vw, 52px); line-height: 1.04; letter-spacing: -0.028em; margin: 0 0 18px; max-width: 13em; text-wrap: balance; }
.lead { font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; max-width: 31em; }
.plan-line { margin: 0; font-size: 15px; color: var(--muted); }
.opening .plan-line:not(.refer) { margin: 22px 0 12px; font: 700 18px/1.35 var(--sans); color: var(--ink); }
.plan-line.refer { margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 26px; border-radius: 12px; font-weight: 700;
  font-size: 17px; line-height: 26px; text-decoration: none; text-align: center;
  background: var(--accent); color: var(--on-accent) !important; border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--btn-shadow); transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--btn-shadow); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--btn-shadow); }

/* ---- the body of the page */
.body { padding-bottom: 24px; }
.body > section, .body > aside, .body > details { margin: 44px 0 0; }
h2 { font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin-bottom: 12px; letter-spacing: -0.02em; }
.muted { color: var(--muted); font-size: 15px; }
.small { font-size: 15px; }

/* ---- the stage: a phone playing five example chats */
.stage { position: relative; margin: 26px 0 8px; }
.scenes { position: relative; --ph: 676px; --pw: 312px; }
.scenes::before {                              /* the sun: one disc, centred behind the phone */
  content: ""; position: absolute; z-index: 0; left: 50%; top: calc(var(--ph, 660px) / 2); width: 120%; max-width: 380px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent);
}
.scenes > *, .scene > .phone, .scene > .check, .scene > .notes { position: relative; z-index: 1; }
.stage > * { position: relative; z-index: 1; }
.scenes { display: block; }
.scene + .scene { margin-top: 36px; }
html.js .scene + .scene { margin-top: 0; }

/* the captions, directly under the phone: the sentence the voice is saying, large, one at a time with script. Without script,
   or under reduced motion, each take is a paragraph of the example's story. */
.notes { margin: 30px auto 0; width: min(100%, 460px); color: var(--ink); font: 600 19px/1.26 var(--display); letter-spacing: -0.012em; }
.notes .take { margin: 0 0 14px; }
.notes .take[data-t="tag"], .notes .take[data-t="intro"], .notes .take[data-t="outro"] { font-weight: 500; color: var(--muted); }
html:not(.js) .notes .take[data-t="tag"] { display: none; }            /* the tagline is the page's first line already */
@media (min-width: 600px) { .notes { font-size: 21px; } }
/* with script it is one sentence, in the same place for every example, the one the voice is saying */
html.js .notes { display: grid; }
html.js .notes .take { grid-area: 1 / 1; display: grid; align-content: start; margin: 0; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
html.js .notes .take.on { opacity: 1; pointer-events: auto; transition: opacity 0.2s; }
html.js .notes .u {
  grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.12s, transform 0.12s; min-width: 0;
  background: linear-gradient(color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 34%, transparent)) 0 90% / 0% 0.55em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.js .notes .u.on { opacity: 1; transform: none; background-size: 100% 0.55em; transition: opacity 0.3s 0.1s, transform 0.3s 0.1s, background-size 0.7s 0.15s ease-out; }
html.js .notes .take:not(.on) .u { user-select: none; }
html.js .still .notes { display: block; }
html.js .still .notes .take { display: block; opacity: 1; pointer-events: auto; margin: 0 0 14px; }
html.js .still .notes .u { display: inline; opacity: 1; transform: none; background: none; }
html.js .still .notes .take[data-t="tag"] { display: none; }

/* the phone: a modern iPhone, 9 : 19.5, tall and narrow, thin bezel, a dynamic-island pill and a home bar. Sized by its width
   (--pw); its height follows from the ratio, so five of them share one grid cell and the cell is as tall as one phone. */
.phone {
  --pw: 312px;
  display: flex; flex-direction: column; width: min(100%, var(--pw)); aspect-ratio: 9 / 19.5; margin: 0 auto; padding: 6px;
  border-radius: calc(var(--pw) * 0.14); background: var(--wa-bezel);
  box-shadow: 0 0 0 1.5px var(--ink), 10px 12px 0 -2px rgba(23, 32, 30, 0.9);
}
.screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: calc(var(--pw) * 0.14 - 6px); overflow: hidden; background: var(--wa-wall); color: var(--wa-text); }
.island { position: absolute; z-index: 3; top: 8px; left: 50%; width: 27%; height: 17px; margin-left: -13.5%; border-radius: 9px; background: #05090a; }
.ph-head { display: flex; align-items: center; gap: 6px; padding: 30px 10px 7px 6px; background: var(--wa-head); color: #fff; }
.ph-back { width: 18px; height: 18px; flex: none; }
.ph-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #d8c3a5; color: #3b2a1a; font: 700 14px/28px var(--sans); text-align: center; }
.ph-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.ph-name { font-weight: 700; font-size: 13.5px; }
.ph-status { font-size: 11px; opacity: 0.85; }
.ph-ico { width: 32px; height: 16px; flex: none; opacity: 0.9; }
.ph-foot { display: flex; align-items: center; gap: 6px; padding: 5px 8px 3px; background: var(--wa-wall); }
.pf-in { flex: 1; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.pf-mic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wa-head); }
.home { display: block; flex: none; width: 34%; height: 4px; margin: 4px auto 6px; border-radius: 2px; background: #1b2a2a; opacity: 0.85; }

.chat {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 8px 8px 8px 9px; flex: 1; min-height: 0;
  background: var(--wa-wall) radial-gradient(rgba(60, 50, 20, 0.07) 1.2px, transparent 1.4px) 0 0 / 18px 18px;
}
.chat > * { position: relative; z-index: 1; }
.daychip {                                      /* like WhatsApp's date chip: it says which language the chat is in */
  align-self: center; margin: 0 0 2px !important; padding: 2px 10px; border-radius: 8px; background: #fbf3dc; color: #4f5d5b;
  font: 600 10.5px/1.4 var(--sans); letter-spacing: 0.02em; box-shadow: 0 1px 1px rgba(11, 20, 26, 0.12);
}

.b {
  max-width: 92%; margin: 0; padding: 4px 7px 4px; border-radius: 9px; font-size: 12.2px; line-height: 1.32;
  overflow-wrap: anywhere; display: flow-root; box-shadow: 0 1px 1px rgba(11, 20, 26, 0.14); color: var(--wa-text);
}
.b.them { align-self: flex-start; background: var(--wa-them); border-top-left-radius: 2px; transform-origin: left bottom; }
.b.me { align-self: flex-end; background: var(--wa-me); border-top-right-radius: 2px; transform-origin: right bottom; }
.b time {
  float: right; margin: 5px 0 -3px 8px; font-size: 9px; line-height: 1; color: var(--wa-meta);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.ticks { width: 15px; height: 9px; fill: none; stroke: var(--wa-tick); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b.q > p { margin: 0; }
.b.q time { float: none; display: flex; justify-content: flex-end; margin: 2px 0 -3px; }
.gloss { margin: 4px 0 0 !important; padding-top: 4px; border-top: 1px dashed rgba(27, 42, 42, 0.28); font-size: 11px; line-height: 1.3; color: #38504d; }
.b.clue { transition: background-color 0.4s, box-shadow 0.4s; }
.b.clue.hl, .phone.final .b.clue, html:not(.js) .b.clue { background: #fff0b3; box-shadow: 0 0 0 2px var(--amber), 0 6px 16px -4px rgba(242, 178, 92, 0.7); }

/* the tag that says which language a reading is in: the chat is Spanish, everything the phone and Inbox say is not */
.lt {
  display: inline-block; flex: none; padding: 1px 6px 2px; border: 1px solid currentColor; border-radius: 999px;
  font: 700 8px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.gloss .lt { margin-right: 6px; vertical-align: 1px; color: #38504d; }
.tr-label .lt { margin-left: auto; opacity: 0.85; }

/* the red underline under the part of the Spanish the phone gets wrong */
.under {
  text-decoration: none; font-weight: 700; padding-bottom: 1px;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 2.5px no-repeat;
}

/* the typing dots, in the slot the reply then arrives in */
.slot { position: relative; align-self: flex-start; max-width: 90%; }
.slot .b { max-width: 100%; }
.typing {
  position: absolute; left: 0; top: 0; display: flex; gap: 3px; padding: 8px 9px; border-radius: 10px; border-top-left-radius: 2px;
  background: var(--wa-them); box-shadow: 0 1px 1px rgba(11, 20, 26, 0.14);
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #98a5a3; display: block; }
html:not(.js) .typing, .phone.final .typing { display: none; }

/* the phone translator's line, and Inbox's */
.tr { border-radius: 10px; font-size: 12.2px; line-height: 1.32; }
.tr-label {
  display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font: 700 8.5px/1.2 var(--sans);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.google { position: relative; margin-left: 6px; padding: 5px 8px 6px; background: var(--wa-google); color: #1d2b31; border: 1px solid rgba(0, 0, 0, 0.07); transition: background-color 0.5s, color 0.5s; }
.google .tr-label { color: #4d5d65; transition: color 0.5s; }
.gl-ico { width: 10px; height: 10px; flex: none; }
.g-text { position: relative; }
.g-text p { margin: 0; }
.google.dim, .phone.final .google, html:not(.js) .google { background: #eef1f2; color: #5f6d75; }
.google.dim .tr-label, .phone.final .google .tr-label, html:not(.js) .google .tr-label { color: #6a777e; }
mark.bad { position: relative; display: inline-block; background: none; color: inherit; padding: 0 1px; }
.circ { position: absolute; left: -9px; top: -4px; width: calc(100% + 18px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.circ path { fill: none; stroke: var(--red); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; }
.badge {
  position: absolute; top: -10px; right: -12px; min-width: 19px; height: 19px; padding: 0 3px; border-radius: 10px;
  background: var(--red); color: #fff; font: 800 11px/19px var(--sans); font-style: normal; text-align: center;
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.5);
}
.strike { position: absolute; left: -4px; right: -4px; top: 50%; height: 3.5px; margin-top: -2px; border-radius: 2px; background: var(--red); transform: rotate(-1.6deg); transform-origin: left center; pointer-events: none; }

.inbox { display: flex; align-items: flex-start; gap: 7px; margin-top: 2px; }
.friend { flex: none; width: 28px; height: 28px; overflow: visible; filter: drop-shadow(0 3px 5px rgba(11, 60, 55, 0.3)); }
.i-card {
  position: relative; flex: 1; min-width: 0; padding: 5px 20px 6px 8px; border-radius: 10px; border-top-left-radius: 3px;
  background: linear-gradient(135deg, #12806f, var(--wa-inbox) 55%, #0a5b52); color: #fff; font-weight: 500;
  box-shadow: 0 10px 22px -10px rgba(10, 91, 82, 0.8);
}
.i-card p { margin: 0; }
.i-card .tr-label { color: #c4f5eb; margin-bottom: 3px; }
.okc { position: absolute; top: -7px; right: -5px; width: 19px; height: 19px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }

.chip {
  align-self: center; max-width: 100%; margin-top: 1px; padding: 3px 10px 4px; border-radius: 12px; text-align: center;
  background: #fffbf2; color: #3a2a0a; border: 1.5px solid var(--amber); font: 600 10.8px/1.3 var(--sans);
}

/* the thin line from the earlier chat line that mattered to Inbox's answer (drawn by welcome.js) */
.chat > .link { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.link path { fill: none; stroke: #16a37f; stroke-width: 1.8px; stroke-linecap: round; }
.link circle { fill: #16a37f; }

/* ---- controls under the phone */
.controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 0; }
.dots { display: flex; align-items: center; }
.dot { width: 34px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 6px; background: var(--paper); border: 2px solid var(--ink); transition: width 0.3s, background-color 0.3s; }
.dot:hover::before { background: var(--paper-2); }
.dot[aria-current="true"]::before { width: 30px; background: var(--ink); }
.pause {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 50%;
}
.pause:hover { background: var(--paper-2); }
.pause svg { width: 16px; height: 16px; }
.pause .i-play, .pause .lb-play { display: none; }
.pause[aria-pressed="true"] .i-pause, .pause[aria-pressed="true"] .lb-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] .lb-play { display: block; }
html:not(.js) .controls { display: none; }

.caption { margin: 2px auto 0; max-width: 28em; text-align: center; font: 500 14px/1.4 var(--sans); color: var(--muted); letter-spacing: 0.01em; }
.stage-note { margin: 6px auto 0; text-align: center; font-size: 13px; color: var(--muted); }

/* "check it yourself": a small paste-this ticket, part of the same system (ink rule, paper, persimmon) */
.check {
  max-width: 410px; margin: 18px auto 0; padding: 12px 14px 12px; text-align: left;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink);
}
.check-label { margin: 0 0 8px; font: 700 13.5px/1.4 var(--sans); color: var(--ink); }
.copy-line {
  margin: 0 0 10px !important; padding: 8px 10px; border: 1.5px dashed var(--accent-deep); border-radius: 8px; background: var(--paper);
  font: 13px/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all; cursor: text;
}
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.copy-btn {
  font: 700 14px/1.3 var(--sans); color: var(--paper); background: var(--ink); cursor: pointer; min-height: 44px;
  border: 2px solid var(--ink); border-radius: 10px; padding: 8px 16px;
}
.copy-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.copied { font-size: 13px; font-weight: 700; color: var(--green); }
.copied-text { display: none; }
.check.done .copied-text { display: inline; }
html:not(.js) .copy-btn, html:not(.js) .copied { display: none; }
.gdate { font-size: 12.5px; color: var(--muted); }

/* ---- how the film is laid out
   With script: the five phones sit in one grid cell, so the stage is as tall as the tallest final frame and
   nothing below it ever jumps. Every bubble keeps its place while it is still invisible, so the chat fills in
   without moving. Only the current phone is seen; the shared narration, controls, caption and check sit in the other rows. */
html.js .scenes { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
html.js .scene { display: contents; }
html.js .scene > .phone { grid-area: 1 / 1; transition: opacity 0.3s; }
html.js .scene > .notes { grid-area: 2 / 1; }
html.js .soundbox { grid-area: 1 / 1; align-self: end; justify-self: center; width: min(100%, var(--pw)); margin-bottom: -22px; pointer-events: none; position: relative; z-index: 3; }
html.js .controls { grid-area: 3 / 1; }
html.js .caption { grid-area: 4 / 1; }
html.js .scene > .check { grid-area: 5 / 1; width: 100%; align-self: start; }
html.js .stage-note { grid-area: 6 / 1; }
html.js .scene:not(.on) > .phone, html.js .scene:not(.on) > .check, html.js .scene:not(.on) > .notes { visibility: hidden; opacity: 0; pointer-events: none; }
html.js .scene.on > .check { animation: none; }

/* ---- the film itself: hidden until the script says "in", all showing without script or when .final */
html.js .rev { opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1); }
html.js .rev.in, html.js .phone.final .rev { opacity: 1; transform: none; }
html.js .phone.final .rev { transition: none; }
html.js .typing i { animation: bounce 1s ease-in-out infinite; }
html.js .typing i:nth-child(2) { animation-delay: 0.15s; }
html.js .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

html.js .under { background-size: 0% 2.5px; transition: background-size 0.5s ease-out; }
html.js .under.in, html.js .phone.final .under { background-size: 100% 2.5px; }
html.js .phone.final .under { transition: none; }

html.js .circ path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .circ.in path { animation: draw 0.8s cubic-bezier(0.55, 0.05, 0.3, 1) forwards; }
html.js .phone.final .circ path { animation: none; stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }

html.js .badge { transform: scale(0); }
html.js .badge.in { animation: pop 0.45s cubic-bezier(0.3, 1.7, 0.5, 1) forwards; }
html.js .phone.final .badge { animation: none; transform: none; }
@keyframes pop { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
.google.shake { animation: shake 0.5s ease-in-out; }
@keyframes shake { 0%, 100% { transform: none; } 18% { transform: translateX(-5px) rotate(-0.8deg); } 36% { transform: translateX(5px) rotate(0.8deg); } 54% { transform: translateX(-3px); } 72% { transform: translateX(3px); } }

html.js .strike { transform: rotate(-1.6deg) scaleX(0); }
html.js .strike.in, html.js .phone.final .strike { transform: rotate(-1.6deg) scaleX(1); transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1); }
html.js .phone.final .strike { transition: none; }

html.js .okc { transform: scale(0); }
html.js .inbox.in .okc, html.js .phone.final .okc { transform: none; transition: transform 0.45s 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
html.js .phone.final .okc { transition: none; }

html.js .link path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .link circle { opacity: 0; }
html.js .link.in path { animation: draw 0.7s ease-out forwards; }
html.js .link.in circle, html.js .phone.final .link circle { opacity: 1; transition: opacity 0.2s 0.55s; }
html.js .phone.final .link path { animation: none; stroke-dashoffset: 0; }
html.js .phone.final .link circle { transition: none; }

html.js .scenes.paused .phone *, html.js .scenes.paused .phone *::before { animation-play-state: paused !important; }

/* without script, the five phones are stacked, each in its final frame */
html:not(.js) .circ path { stroke-dasharray: none; }

/* ---- three short promises, as one ruled row (not three cards) */
.beats { list-style: none; counter-reset: beat; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2.5px solid var(--rule); }
.beats li { counter-increment: beat; display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ic { flex: none; width: 56px; height: 56px; color: var(--ink); }
.beat-t { margin: 0; font: 600 22px/1.2 var(--display); letter-spacing: -0.015em; }
.beat-t::before {
  content: "0" counter(beat); display: block; margin-bottom: 5px; color: var(--accent-deep);
  font: 700 12.5px/1 var(--sans); letter-spacing: 0.14em;
}

/* ---- the one honest line */
.know { display: flex; align-items: flex-start; gap: 10px; max-width: 40em; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.know p { margin: 0; }
.know-i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-deep); }

/* ---- the call to action: an ink panel with the sun coming up behind it */
.cta {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  background: var(--panel); color: var(--panel-text); border-radius: 26px; padding: 36px 24px 30px;
}
.cta::before { content: ""; position: absolute; z-index: 0; right: -46px; bottom: -64px; width: 150px; height: 150px; border-radius: 50%; background: var(--accent); }
.cta::after { display: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin: 0; max-width: 11em; font-size: clamp(30px, 8vw, 46px); line-height: 1.05; letter-spacing: -0.025em; }
.cta p { margin: 0; max-width: 32em; }
.cta .actions { margin: 0; }
.cta .btn { --btn-shadow: var(--panel-btn-shadow); border-color: var(--panel-text); }
.cta a:not(.btn) { color: var(--accent); }
.cta :focus-visible { outline-color: var(--panel-text); }

/* ---- the founder story, closed, at the very bottom */
.tour { max-width: 760px; margin-inline: auto !important; border-top: 1px solid var(--line); padding-top: 6px; }
.tour summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.tour summary::-webkit-details-marker { display: none; }
.tour summary::before { content: ""; width: 8px; height: 8px; border-right: 2.5px solid var(--accent-deep); border-bottom: 2.5px solid var(--accent-deep); transform: rotate(-45deg); transition: transform 0.2s; }
.tour[open] summary::before { transform: rotate(45deg); }
.video { margin: 8px 0 0; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; border: 1.5px solid var(--ink); }
.video .video-note { margin: 4px 0 0; color: var(--muted); font-size: 15px; font-style: italic; }

footer { margin-top: 48px; border-top: 2.5px solid var(--rule); padding: 22px 0 36px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-direction: column; gap: 6px; }
footer p { margin: 0; }
.foot-brand { display: flex; align-items: center; font: 600 22px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.foot-links span { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 0; }          /* the separators are text: gone, the gap does their job */
.foot-links a { display: inline-block; padding: 11px 2px; font-size: 15px; }

/* ---- room on a wide screen: words on the left, the phone on the right */
@media (max-width: 959px) { .opening .lead { margin-top: 26px; } }
@media (min-width: 600px) {
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beats li { border-bottom: 1px solid var(--line); padding: 26px 24px 26px 24px; }
  .beats li:first-child { padding-left: 0; }
  .beats li + li { border-left: 1px solid var(--line); }
  .cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 48px 48px; }
  .cta::before { right: auto; left: 56%; bottom: -150px; width: 270px; height: 270px; }
  .cta::after { display: block; content: ""; position: absolute; z-index: 0; right: 30%; top: -34px; width: 80px; height: 80px; border-radius: 50%; border: 2.5px solid var(--green); opacity: 0.9; }
  footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
}
@media (min-width: 960px) {
  .top { padding-top: 12px; padding-bottom: 4px; }
  .opening {
    grid-template-columns: minmax(0, 1fr) 460px; column-gap: clamp(32px, 4.5vw, 80px);
    grid-template-rows: 0.55fr repeat(6, auto) 1fr; align-items: start; padding-top: 4px; padding-bottom: 72px;
  }
  .opening .eyebrow, .opening h1, .opening .lead, .opening .plan-line, .opening .actions { grid-column: 1; }
  .opening .eyebrow { grid-row: 2; margin-top: 0; font-size: 22px; max-width: 28em; }
  .opening h1 { grid-row: 3; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; margin-bottom: 22px; max-width: none; }
  .opening .lead { grid-row: 4; font-size: 20px; }
  .opening .plan-line:not(.refer) { grid-row: 5; margin-top: 22px; }
  .opening .actions { grid-row: 6; }
  .opening .plan-line.refer { grid-column: 1; grid-row: 7; }
  .opening .stage { grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: center; }
  .check { max-width: 400px; }
  .notes { font-size: 23px; }
  .scenes::before { width: 142%; max-width: 440px; }
  .body > section, .body > aside, .body > details { margin-top: 72px; }
  .cta { padding: 64px 64px; }
  .beat-t { font-size: 25px; }
  .ic { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .typing i { animation: none; }
  html.js .scene > .phone { transition: none; }
  html.js .notes .take, html.js .notes .u { transition: none !important; }
  html.js .notes .u.on { background-size: 100% 0.55em; }
  html.js .stage *, html.js .stage *::before, html.js .stage *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .spot { display: none !important; }
  .btn { transition: none; }
}

/* calmer marking (Oct 14): no scribbled circle, ?! badge, strike-out, shake or margin line; the wrong words just get a
   soft red highlighter, and the phone translator's whole line fades back. */
.circ, .badge, .strike, .chat > .link { display: none !important; }
.google.shake { animation: none; }
mark.bad { border-radius: 4px; transition: background-color 1s ease; }
html.js mark.bad.in, html.js .phone.final mark.bad, html:not(.js) mark.bad { background: rgba(229, 72, 77, 0.22); box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.22); }
html.js .google { transition: background-color 1.2s, color 1.2s; }

/* ---- the sound button, bottom-left of the phone: the film starts muted (browsers will not play sound before a tap), so
   this is the invitation. A big pill with a label, never an icon alone. */
.soundbox { display: none; }
html.js .soundbox { display: block; }
.sound {
  pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; max-width: 100%; margin-left: -10px; padding: 0 20px 0 14px;
  border: 2.5px solid var(--ink); border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--on-accent);
  font: 700 16px/1.15 var(--sans); box-shadow: 3px 3px 0 var(--ink);
}
.sound:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.sound:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sound > span { display: none; }
.sound[data-state="tap"] .s-tap, .sound[data-state="play"] .s-play, .sound[data-state="on"] .s-on { display: inline; }
.sound[data-state="on"]:hover .s-on, .sound[data-state="on"]:focus-visible .s-on { display: none; }
.sound[data-state="on"]:hover .s-mute, .sound[data-state="on"]:focus-visible .s-mute { display: inline; }
.sound[data-state="on"] { background: var(--paper); color: var(--ink); }
.i-snd { width: 24px; height: 24px; flex: none; }
.sound[data-state="on"] .i-slash, .sound:not([data-state="on"]) .i-waves { display: none; }
.sound[data-state="play"] .i-slash { display: none; }
.sound.ring::after {
  content: ""; position: absolute; inset: -5px; border: 3px solid var(--accent-deep); border-radius: 999px; opacity: 0; pointer-events: none;
  animation: ring 1.1s ease-out 3;
}
@keyframes ring { 0% { transform: scale(0.96); opacity: 0.95; } 100% { transform: scale(1.22, 1.5); opacity: 0; } }

/* ---- a soft spotlight, once: the rest of the page dims for a moment while the stage stays bright (welcome.js adds
   .spotlight to the section; any tap puts the light back) */
.stage > .spot { position: fixed; z-index: 30; inset: 0; background: rgba(8, 14, 12, 0.46); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s, visibility 0s 0.45s; }
.spotlight > .stage > .spot { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s; }
.spotlight > .stage > .scenes, .spotlight > .stage > .soundbox { z-index: 40; }

/* ---- on a phone the caption stays at the bottom of the screen while the phone is scrolled past, so it is never out of sight */
@media (max-width: 959px) {
  html.js .scene > .notes {
    position: sticky; bottom: 10px; z-index: 5; margin-top: 30px; padding: 10px 14px 10px; background: var(--paper);
    border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
  }
  /* the sound button rides just above the caption, so the caption never covers it (--capH is measured by welcome.js) */
  html.js .scene > .notes { margin-top: 66px; }
  html.js .soundbox { grid-area: 2 / 1; align-self: start; margin-bottom: 0; position: sticky; bottom: calc(20px + var(--capH, 130px)); z-index: 6; }
  html.js .still .notes { position: static; margin-top: 30px; }
  html.js .still .soundbox { position: static; grid-area: 1 / 1; align-self: end; margin-bottom: -22px; }
}