/* SnippetCue home page. System fonts, Apple system colors, the app's folder
   pastels and Liquid Glass materials. No external files, imports or remote assets. */

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;
  --sep: rgba(0, 0, 0, 0.08);
  --tint: #007aff;
  --tint-deep: #0062e6;
  --tint-soft: rgba(0, 122, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 10px 30px rgba(0, 30, 80, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  /* The bar's clear glass: little tint and a light blur, so what scrolls
     under it stays readable through it, with a bright rim like iOS glass. */
  --clear-glass: rgba(255, 255, 255, 0.42);
  --clear-rim: rgba(255, 255, 255, 0.9);
  --clear-rim-2: rgba(255, 255, 255, 0.25);
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 20, 60, 0.06);
  /* Pro wears the Sunset icon's colors (revision 5.8): a deep orange for
     text in light mode, where yellow washes out; yellow in dark. */
  --sun: #a35400;
  --sun-mark: #ff9500;

  /* Folder card fills and inks, after the app's light appearance. */
  --blue-c: #8fc4ff;   --blue-i: #006be0;   --blue: #007aff;
  --green-c: #a6e6b6;  --green-i: #217f39;  --green: #34c759;
  --yellow-c: #ffe98f; --yellow-i: #856a00; --yellow: #ffcc00;
  --orange-c: #ffd08f; --orange-i: #a35f00; --orange: #ff9500;
  --pink-c: #ffa3b4;   --pink-i: #c51f40;   --pink: #ff2d55;
  --purple-c: #dcb3f0; --purple-i: #9e4ac8; --purple: #af52de;
  --teal-c: #a4dce6;   --teal-i: #227b8b;   --teal: #30b0c7;
  --card-body: rgba(0, 0, 0, 0.62);

  /* The wordmark's echo layers, in the app's palette hue order. */
  --e0: #ff2d55; --e1: #ff9500; --e2: #ffcc00; --e3: #34c759;
  --e4: #30b0c7; --e5: #007aff; --e6: #5856d6; --e7: #af52de;

  /* The demo phone */
  --screen: #ffffff;
  --kb: #e2e3e8;
  --kb-key: #ffffff;
  --kb-key-2: #ffffff;
  --kb-glass: rgba(255, 255, 255, 0.72);
  --kb-glass-edge: rgba(255, 255, 255, 0.9);
  --undo-ink: #0060d0;
  --indigo-c: #b6b5ed; --indigo-i: #3e3cb0;
  --orange-deep: #8a4b12;
  --bubble-in: #e9e9eb;
  --frame: #000000;
  --phone-glow: rgba(64, 140, 255, 0.28);
  /* The keyboard's ring colors; the demo's lens uses them too. */
  --kr-teal: #30b0c7; --kr-indigo: #5856d6; --kr-pink: #ff2d55; --kr-blue: #007aff; --kr-green: #34c759;

  /* One type scale for the page below the hero: section title (h2), block
     title, small title, lede, body, label, fine print. Regular, semibold
     and bold only. */
  --fs-h3: clamp(24px, 2.6vw, 30px);
  --fs-h4: 19px;
  --fs-lede: clamp(18px, 1.9vw, 21px);
  --fs-body: 17px;
  --fs-label: 15px;
  --fs-fine: 13px;

  --radius-xl: 32px;
  --radius-l: 24px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #161618;
    --label: #f5f5f7;
    --label-2: #a1a1a6;
    --label-3: #8e8e93;
    --sep: rgba(255, 255, 255, 0.1);
    --tint: #0a84ff;
    --tint-deep: #0a84ff;
    --tint-soft: rgba(10, 132, 255, 0.18);
    --glass: rgba(36, 36, 40, 0.58);
    --glass-strong: rgba(44, 44, 48, 0.78);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --clear-glass: rgba(28, 28, 32, 0.42);
    --clear-rim: rgba(255, 255, 255, 0.32);
    --clear-rim-2: rgba(255, 255, 255, 0.06);
    --tile-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --sun: #ffcc00;
    --sun-mark: #ffcc00;

    --blue-c: #0e62b6;   --blue-i: #4da3ff;   --blue: #0a84ff;
    --green-c: #1f7234;  --green-i: #30d158;  --green: #30d158;
    --yellow-c: #736109; --yellow-i: #ffd60a; --yellow: #ffd60a;
    --orange-c: #8a580b; --orange-i: #ff9f0a; --orange: #ff9f0a;
    --pink-c: #b42d48;   --pink-i: #ff6482;   --pink: #ff375f;
    --purple-c: #8944ac; --purple-i: #d08cf5; --purple: #bf5af2;
    --teal-c: #266c78;   --teal-i: #40c8e0;   --teal: #40c8e0;
    /* Dark cards (October 15): richer than the app's calmer 36%, since a
       page is seen for seconds. Each fill is the folder color at 72%,
       darkened until body text (white at 82%) reads at 4.6:1 or better. */
    --card-body: rgba(255, 255, 255, 0.82);
    --e0: #ff375f; --e1: #ff9f0a; --e2: #ffd60a; --e3: #30d158;
    --e4: #40c8e0; --e5: #0a84ff; --e6: #5e5ce6; --e7: #bf5af2;

    --screen: #000000;
    --kb: #202020;
    --kb-key: #444444;
    --kb-key-2: #444444;
    --kb-glass: rgba(255, 255, 255, 0.1);
    --kb-glass-edge: rgba(255, 255, 255, 0.16);
    --undo-ink: #6cb4ff;
    --indigo-c: #4c4aae; --indigo-i: #b3b2ff;
    --orange-deep: #c2741c;
    --bubble-in: #262628;
    --frame: #000000;
    --phone-glow: rgba(70, 150, 255, 0.24);
    --kr-teal: #40c8e0; --kr-indigo: #5e5ce6; --kr-pink: #ff375f; --kr-blue: #0a84ff; --kr-green: #30d158;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 3px; border-radius: 8px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sym {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.16em;
}
.sym.solid { fill: currentColor; stroke: none; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface); color: var(--label);
}
.skip-link:focus { top: 12px; }

/* ---------- Navigation ---------- */

/* At the top of the page the bar is latched: full width, flush with the top
   edge, a straight line under it, and no name in it (the name sits large
   under it). Scrolling down detaches it into a floating glass capsule, and
   the name moves into it (home.js). */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none;
  padding: 0;
  transition: padding 0.55s cubic-bezier(0.3, 1.2, 0.4, 1), opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-inner {
  pointer-events: auto; position: relative;
  max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), calc((100% - 1080px) / 2)) 0;
  border-radius: 0;
  background: var(--glass);
  border: 0 solid var(--sep); border-bottom-width: 0.5px;
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  transition: max-width 0.55s cubic-bezier(0.3, 1.2, 0.4, 1), height 0.55s cubic-bezier(0.3, 1.2, 0.4, 1),
    padding 0.55s cubic-bezier(0.3, 1.2, 0.4, 1), border-radius 0.55s cubic-bezier(0.3, 1.2, 0.4, 1),
    box-shadow 0.4s, background 0.4s, border-color 0.4s;
}
.nav-detached .nav { padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0; }
.nav-detached .nav-inner {
  max-width: 980px; height: 56px; padding: 0 12px; border-radius: 999px;
  border-width: 0; border-color: transparent;
  background: var(--clear-glass);
  -webkit-backdrop-filter: blur(16px) saturate(2) brightness(1.06);
  backdrop-filter: blur(16px) saturate(2) brightness(1.06);
  box-shadow: inset 0 0 0 0.5px var(--clear-rim-2), inset 0 0 18px var(--clear-rim-2), var(--glass-shadow);
}
/* The rim: brighter where light would catch the top and bottom edges,
   fading along the sides. */
.nav-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; opacity: 0; transition: opacity 0.4s;
  background: linear-gradient(180deg, var(--clear-rim), var(--clear-rim-2) 40%, var(--clear-rim-2) 60%, var(--clear-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nav-detached .nav-inner::before { opacity: 1; }
/* For measuring where things will be, in one frame, without moving them. */
.nav-measure .nav, .nav-measure .nav-inner { transition: none !important; }
.brand, .masthead, .intro-mark { font-optical-sizing: none; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--label); font-weight: 650; font-size: 17px; letter-spacing: -0.02em;
  line-height: 1; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* Its own letter spacing, so it scales with its size: inherited, the bar's
   -0.02em would stay at its 17 px value even when the name flies large. */
#brand-name { letter-spacing: -0.02em; }
.brand-icon { transform-origin: 50% 50%; }
/* While the name is under the bar, the bar shows neither it nor the icon. */
.mast-on #brand-name { visibility: hidden; }
.mast-on .brand-icon, .icon-wait .brand-icon { opacity: 0; transform: scale(0.2); }
.brand-icon, .closer-icon, .fan img {
  border-radius: 22.4%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--label); font-size: 14px; opacity: 0.78; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
/* The way into /beta: a small filled capsule at the end of the bar
   (Diego, October 23; it was a large button in the hero). */
.nav-cta {
  display: inline-flex; align-items: center; flex: none;
  height: 34px; padding: 0 16px; border-radius: 999px;
  background: var(--tint); color: #ffffff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { text-decoration: none; background: var(--tint-deep); }
.nav-cta:active { transform: scale(0.97); }

/* Phones: the three links fit in the capsule beside the name. At the top
   of the page there is no bar at all; it appears as the capsule when you
   start scrolling, with the name and icon flying in. */
@media (max-width: 719px) {
  .nav-links { gap: 14px; transition: opacity 0.35s 0.2s; }
  .nav-links a { font-size: 13px; }
  :root:not(.nav-detached) .nav-inner {
    background: transparent; border-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root:not(.nav-detached) .nav-links { opacity: 0; pointer-events: none; transition-delay: 0s; }
  /* The name, the three links and the capsule don't fit side by side, so
     on phones the capsule takes the links' place (pages without it keep them). */
  .nav-links:has(+ .nav-cta) { display: none; }
  .nav-cta { margin-left: auto; height: 32px; padding: 0 14px; transition: opacity 0.35s 0.2s, background 0.2s; }
  :root:not(.nav-detached) .nav-cta { opacity: 0; pointer-events: none; transition-delay: 0s; }
  /* "Download on the App Store" crowds the name on small phones. */
  .nav-cta-long { display: none; }
}

/* The name, large, under the bar: the size and weight the intro lands at
   (a little smaller on short screens). */
:root { --mast: clamp(54px, min(13vw, 15svh), 156px); }
.lockup {
  width: fit-content; margin: 0 auto; flex: none;
  display: flex; flex-direction: column; align-items: flex-end;
}
.masthead {
  /* The box is exactly the text, so the intro and the scroll measure the
     name itself and it lands centered. */
  font-size: var(--mast); font-weight: 650; letter-spacing: -0.02em; line-height: 1;
  color: var(--label); white-space: nowrap; margin: 0;
}
:root:not(.mast-on) .masthead, .brand-wait .masthead { visibility: hidden; }

/* ---------- Shared type ---------- */

.eyebrow {
  font-size: var(--fs-label); font-weight: 600; color: var(--tint);
  letter-spacing: -0.01em; margin-bottom: 14px;
}
h1 {
  font-size: clamp(40px, 5.6vw, 66px);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 700;
  text-wrap: balance;
}
h1 .ink { display: inline-block; padding-bottom: 0.06em; }
h2 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.07; letter-spacing: -0.032em; font-weight: 700;
  text-wrap: balance;
}
.section-lede, .lede { text-wrap: pretty; }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
/* The headline's accent: solid blue. The layered signature belongs to the
   wordmark intro; as a text shadow on the headline it read as a misprint. */
.ink { color: var(--blue); }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--label-2); letter-spacing: -0.015em; }
.section-lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--label-2); letter-spacing: -0.015em; margin-top: 16px; }

.section { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--gutter) 0; }
.section-head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }

/* ---------- Glow: soft light down the whole page ---------- */

/* Painted into the page's own background: blue, pink and lavender lights
   that repeat every 2000px down the page, so every section sits in the same
   light. No extra layers to redraw while scrolling, and no fixed layer for a
   phone browser's toolbar to cut off. Each light fades out inside its tile,
   so the repeat has no seams. */
body {
  --glow-blue: rgba(90, 169, 255, 0.46);
  --glow-pink: rgba(255, 179, 196, 0.44);
  --glow-lavender: rgba(182, 166, 255, 0.42);
  background-image:
    radial-gradient(70% 12% at 82% 12%, var(--glow-blue), rgba(90, 169, 255, 0) 100%),
    radial-gradient(60% 17% at 0% 46%, var(--glow-pink), rgba(255, 179, 196, 0) 100%),
    radial-gradient(60% 17% at 100% 80%, var(--glow-lavender), rgba(182, 166, 255, 0) 100%);
  background-size: 100% 2000px;
  background-repeat: repeat-y;
}
/* Phones: a shorter repeat, so each screen gets more than one light. */
@media (max-width: 959px) {
  body { background-size: 100% 1500px; }
}
@media (prefers-color-scheme: dark) {
  body {
    --glow-blue: rgba(90, 169, 255, 0.22);
    --glow-pink: rgba(255, 179, 196, 0.13);
    --glow-lavender: rgba(182, 166, 255, 0.18);
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; isolation: isolate;
  padding: calc(104px + env(safe-area-inset-top)) var(--gutter) clamp(56px, 8vw, 96px);
}
.hero-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; align-items: center;
}
.hero-copy { text-align: center; max-width: 640px; margin: 0 auto; }
#hero-title { margin-bottom: 22px; }
#hero-title .hl { display: block; }
.hero .lede { max-width: 30em; margin: 0 auto; }
.hero-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-stage .phone { z-index: 1; }

/* Desktop: the phone stands at a slight angle, its top leaning right and
   turned a little in toward the copy, and floats slowly over a soft glow. */
@media (min-width: 960px) {
  .hero-stage::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 150%; height: 105%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--phone-glow), transparent);
    pointer-events: none;
  }
  .hero .phone { transform: perspective(1800px) rotateY(-9deg) rotateZ(3deg); }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  .hero .phone { animation: phone-float 7s ease-in-out infinite; }
  .hero-stage::before { animation: glow-breathe 7s ease-in-out infinite; }
}
@keyframes phone-float {
  0%, 100% { transform: perspective(1800px) translateY(0) rotateY(-9deg) rotateZ(3deg); }
  50% { transform: perspective(1800px) translateY(-14px) rotateY(-7deg) rotateZ(2.4deg); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -52%) scale(1.04); }
}

/* Apple's App Store badge, under the social row. The badge is Apple's
   artwork, unaltered, never under 40 px tall, with a quarter of its height
   clear around it. */
.hero-promises { width: 100%; max-width: 34em; margin: 0 auto; text-align: center; }
.store-badge { display: inline-block; margin-top: 30px; line-height: 0; border-radius: 9px; }
.store-badge img { display: block; width: auto; height: 48px; }
.store-badge.big { margin-top: 0; }
.store-badge.big img { height: 56px; }
.g {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 960px) {
  .hero {
    overflow-x: clip;
    padding: calc(128px + env(safe-area-inset-top)) var(--gutter) clamp(56px, 8vw, 96px);
  }
  /* The copy beside the phone in two blocks, each centered on its half of
     the phone's height: the headline and lede on the top half, the social
     row and launch line on the bottom half. */
  .hero-grid {
    max-width: calc(var(--max) - 2 * var(--gutter));
    grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 5vw, 80px);
    grid-template-areas: "copy stage" "promises stage";
    grid-template-rows: 1fr 1fr;
  }
  .hero-copy { grid-area: copy; align-self: center; text-align: left; margin: 7px 0 0; max-width: none; container-type: inline-size; }
  .hero .lede { margin: 0; }
  .hero-stage { grid-area: stage; }
  /* The launch line at the lede's size, scaled up by 19 / 14. */
  .hero-promises { grid-area: promises; align-self: center; max-width: none; margin: 6px 0 0; text-align: left; container-type: inline-size; }
  .hero-promises .store-badge { margin-top: 0; }
  .hero-promises .store-badge img { height: max(40px, min(23px, 3.1cqi) * 2.3); }
  /* The subtitle: one sentence per line, sized to the column so neither wraps. */
  .hero .lede { max-width: none; }
  .hero .lede span { display: block; white-space: nowrap; font-size: min(23px, 3.1cqi); }
}

/* The hero's arrival: one calm sequence, in reading order on every screen.
   The headline a line at a time, the phone, then the rest and the stream. Each piece rises a little and fades in; in place in about 1.4 s. */
.rise { animation: hero-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
.hero-stream.rise { animation-delay: 0.75s; }
#hero-title .hl { animation-duration: 0.8s; }
#hero-title .hl:nth-child(1) { animation-delay: 0.12s; }
#hero-title .hl:nth-child(2) { animation-delay: 0.26s; }
.hero-stage.rise { animation: stage-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(40px) scale(0.965); } }
.hero .lede.rise { animation-delay: 0.55s; }
.store-badge.rise { animation-delay: 0.7s; }

/* ---------- Landing intro: the wordmark, then into the nav ---------- */

.intro {
  position: fixed; inset: 0; z-index: 80; display: none; cursor: pointer;
  place-items: center; background: var(--bg);
}
.intro-show .intro { display: grid; }
.intro-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.intro-glow span {
  position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax;
  margin: -35vmax 0 0 -35vmax; border-radius: 50%; filter: blur(80px); opacity: 0.12;
  background: conic-gradient(from 200deg, var(--e0), var(--e1), var(--e2), var(--e3), var(--e4), var(--e5), var(--e6), var(--e7), var(--e0));
}
@media (prefers-color-scheme: dark) { .intro-glow span { opacity: 0.2; } }
.intro-mark {
  position: relative; display: grid;
  font-size: var(--mast); font-weight: 650; letter-spacing: -0.02em;
  line-height: 1; color: var(--label); white-space: nowrap;
}
.intro-mark > span { grid-area: 1 / 1; opacity: 0; }
.intro-mark .echo:nth-child(1) { color: var(--e0); } .intro-mark .echo:nth-child(2) { color: var(--e1); }
.intro-mark .echo:nth-child(3) { color: var(--e2); } .intro-mark .echo:nth-child(4) { color: var(--e3); }
.intro-mark .echo:nth-child(5) { color: var(--e4); } .intro-mark .echo:nth-child(6) { color: var(--e5); }
.intro-mark .echo:nth-child(7) { color: var(--e6); } .intro-mark .echo:nth-child(8) { color: var(--e7); }

/* While the intro holds the stage, the nav and the hero wait at their first frame. */
.intro-on .nav { opacity: 0; }
.intro-on .hero .rise { animation-play-state: paused; }

/* ---------- The snippet stream along the hero's bottom edge ---------- */

/* Three rows of example snippets in alternating directions, full width: the
   border between the hero and the rest of the page. The first row is in
   view, the fold cuts the second in half and the third starts the next
   screen. Rows have a fixed height (--row), so the hero can place the fold. */
.hero { --row: 84px; --rgap: 12px; }
.hero-stream {
  position: relative; z-index: 0; flex: none; align-self: center;
  width: 100vw; display: flex; flex-direction: column; gap: var(--rgap);
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  --mq-card: 280px; --mq-gap: 12px;
  display: flex; gap: var(--mq-gap); width: max-content; padding: 0 calc(var(--mq-gap) / 2);
}
/* Every card moves on its own, one set's width per loop (home.js lists
   each row twice). One wide moving strip is painted in tiles on iPhone,
   and Safari could leave tiles blank as it slid; a card never is. */
.marquee-track.go > * { animation: marquee 90s linear infinite; }
.marquee[data-direction="right"] .marquee-track.go > * { animation-direction: reverse; animation-duration: 100s; }
.marquee:nth-child(3) .marquee-track.go > * { animation-duration: 96s; }
.marquee:hover .marquee-track > * { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(var(--mq-n, 8) * (var(--mq-card) + var(--mq-gap)) * -1)); } }
.snip {
  flex: none; width: var(--mq-card); height: var(--row); overflow: hidden;
  padding: 12px 16px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.snip b { font-size: 16px; line-height: 20px; font-weight: 650; letter-spacing: -0.02em; color: var(--label); }
.snip span {
  font-size: 14px; line-height: 19px; color: var(--card-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Field values as the app's card previews show them: semibold, with the
   keyboard's dashed underline (1.5 px thick, 3 px dashes, 2.5 px gaps,
   unbroken under the whole value) in the folder's color, darkened or
   lightened to 4.5:1 on its card as KeyboardCardStyle.folderText does. No
   fill: the tinted pill painted unevenly in Safari on iPhone as cards slid. */
.snip { --u: var(--label); }
.snip.blue { --u: #004a9b; } .snip.green { --u: #1b662e; }
.snip.yellow { --u: #796000; } .snip.orange { --u: #834d00; }
.snip.pink { --u: #8e192f; } .snip.purple { --u: #6a3287; }
.snip.teal { --u: #1b626f; } .snip.indigo { --u: #3a398d; }
@media (prefers-color-scheme: dark) {
  .snip.blue { --u: #c3e1ff; } .snip.green { --u: #b3eec1; }
  .snip.yellow { --u: #ffe14f; } .snip.orange { --u: #ffdca4; }
  .snip.pink { --u: #ffd2db; } .snip.purple { --u: #efd7fc; }
  .snip.teal { --u: #b2e9f3; } .snip.indigo { --u: #cdccf7; }
}
.snip .fv {
  padding: 0; border-radius: 0;
  background: linear-gradient(90deg, var(--u) 3px, transparent 3px) left bottom / 5.5px 1.5px repeat-x;
}
/* The chevron sits after the value, off the underline, as in the app. */
.snip .fv.pick { position: relative; padding-right: 0.75em; background-clip: content-box; }
.snip .fv.pick::after { content: "▾"; position: absolute; right: 0; bottom: 0.1em; }
/* Phones: smaller cards. */
@media (max-width: 599px) {
  .hero { --row: 74px; --rgap: 10px; }
  .marquee-track { --mq-card: 230px; --mq-gap: 10px; }
  .snip { padding: 10px 13px; border-radius: 16px; }
  .snip b { font-size: 14px; line-height: 18px; }
  .snip span { font-size: 12.5px; line-height: 17px; }
}

/* ---------- The demo phone (sized in em so it scales as one piece) ---------- */

/* Built like the Simulator's iPhone: a black bezel inside a metal band that
   catches the light, a bright outer edge, a hairline where the display
   meets the bezel, and the side buttons. */
.phone {
  position: relative;
  font-size: clamp(12.5px, 3.75vw, 15.5px);
  width: 20.36em; height: 42.86em;
  padding: 0.49em; border: 0.19em solid transparent; border-radius: 3.58em;
  background:
    linear-gradient(var(--frame), var(--frame)) padding-box,
    linear-gradient(155deg, #b0b0b5, #5d5d62 12%, #727277 44%, #545459 74%, #9a9a9f) border-box;
  box-shadow:
    0 0 0 0.05em #e2e2e7,
    0 0 0 0.09em rgba(0, 0, 0, 0.42),
    0 2.4em 5em -1em rgba(0, 25, 70, 0.32),
    0 0.6em 1.4em rgba(0, 0, 0, 0.12);
}
/* Action button and volume on the left, the side button on the right,
   standing just off the bright edge. */
.hw {
  position: absolute; left: -0.58em; width: 0.34em;
  border-radius: 0.13em 0 0 0.13em;
  background: linear-gradient(90deg, #36363a, #66666b 55%, #505055);
  box-shadow: inset 0 0 0 0.035em rgba(0, 0, 0, 0.55);
}
.hw-action { top: 7.3em; height: 1.55em; }
.hw-up { top: 10.25em; height: 3em; }
.hw-down { top: 14em; height: 3em; }
.hw-side {
  left: auto; right: -0.58em; top: 12.2em; height: 5.05em;
  border-radius: 0 0.13em 0.13em 0;
  background: linear-gradient(270deg, #36363a, #66666b 55%, #505055);
}
.island {
  position: absolute; z-index: 5; top: 1.1em; left: 50%;
  width: 5.6em; height: 1.7em; margin-left: -2.8em;
  border-radius: 1em; background: #000;
}
.screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2.9em; background: var(--screen);
  box-shadow: 0 0 0 0.06em rgba(255, 255, 255, 0.13);
  display: flex; flex-direction: column;
  font-family: var(--font); line-height: 1.25;
}
.status {
  display: flex; justify-content: space-between; align-items: center;
  height: 3.2em; padding: 0.35em 1.7em 0 2.1em; font-size: 0.9em;
}
.status b { font-weight: 600; }
.status-icons { display: flex; align-items: center; gap: 0.25em; }
.status-icons svg { height: 0.8em; width: auto; fill: var(--label); }
.thread-head { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.4em 0 0.6em; }
.avatar {
  width: 2.9em; height: 2.9em; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #a5abb8, #858b98); color: #fff;
  font-size: 0.9em; font-weight: 600;
}
.avatar.ai { background: linear-gradient(160deg, #b98cff, #ff7ab0); }
.avatar.ai .sym { width: 1.35em; height: 1.35em; fill: currentColor; stroke: none; }

/* Switching examples: a blank screen where the name lands in sixteen
   places, each with the wordmark's eight palette echoes (home.js). */
.wipe-sheet { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; background: var(--screen); }
.wp {
  position: absolute; display: grid; white-space: nowrap; line-height: 1;
  font-weight: 700; letter-spacing: -0.03em;
}
.wp > span { grid-area: 1 / 1; opacity: 0; }
.wp .mark { color: var(--label); }
.wp .echo:nth-child(1) { color: var(--e0); } .wp .echo:nth-child(2) { color: var(--e1); }
.wp .echo:nth-child(3) { color: var(--e2); } .wp .echo:nth-child(4) { color: var(--e3); }
.wp .echo:nth-child(5) { color: var(--e4); } .wp .echo:nth-child(6) { color: var(--e5); }
.wp .echo:nth-child(7) { color: var(--e6); } .wp .echo:nth-child(8) { color: var(--e7); }
.wp0 { top: 2%; left: -10%; font-size: 2.6em; }
.wp1 { top: 5%; left: 64%; font-size: 0.85em; }
.wp2 { top: 10%; left: 38%; font-size: 1.3em; }
.wp3 { top: 15%; left: 4%; font-size: 0.65em; }
.wp4 { top: 17%; left: 52%; font-size: 2.1em; }
.wp5 { top: 25%; left: -24%; font-size: 1.6em; }
.wp6 { top: 27%; left: 58%; font-size: 0.75em; }
.wp7 { top: 33%; left: 14%; font-size: 3.1em; }
.wp8 { top: 43%; left: 62%; font-size: 1.0em; }
.wp9 { top: 45%; left: 2%; font-size: 0.85em; }
.wp10 { top: 50%; left: 30%; font-size: 1.75em; }
.wp11 { top: 57%; left: -14%; font-size: 1.15em; }
.wp12 { top: 59%; left: 46%; font-size: 2.4em; }
.wp13 { top: 67%; left: 6%; font-size: 0.7em; }
.wp14 { top: 70%; left: 36%; font-size: 1.4em; }
.wp15 { top: 77%; left: -18%; font-size: 2.8em; }
.wp16 { top: 82%; left: 64%; font-size: 0.8em; }
.wp17 { top: 88%; left: 22%; font-size: 1.9em; }
.wp18 { top: 94%; left: -6%; font-size: 0.9em; }
.wp19 { top: 95%; left: 56%; font-size: 1.2em; }
.thread-name { font-size: 0.78em; font-weight: 500; }
.thread {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35em;
  padding: 0 0.85em 0.6em; min-height: 0;
}
.bubble {
  max-width: 78%; padding: 0.5em 0.8em; border-radius: 1.15em;
  font-size: 0.86em; line-height: 1.3;
}
.bubble.in { align-self: flex-start; background: var(--bubble-in); color: var(--label); }
.bubble.out { align-self: flex-end; background: #0a84ff; color: #fff; }
.bubble.out:empty { display: none; }
.js .bubble.late { display: none; }
.js .bubble.late.show, .bubble.out.show { animation: pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.js .bubble.late.show { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(0.6em) scale(0.92); } }

.composer { display: flex; align-items: flex-end; gap: 0.5em; padding: 0 0.75em 0.6em; }
.composer-plus {
  width: 2.1em; height: 2.1em; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--bubble-in); color: var(--label-2); font-size: 1em;
}
.composer-field {
  flex: 1; min-height: 2.1em; padding: 0.45em 0.8em; border-radius: 1.1em;
  border: 0.08em solid var(--sep); font-size: 0.82em; line-height: 1.3;
}
.placeholder { color: var(--label-3); }
.composer-send { display: none; width: 2.1em; height: 2.1em; flex: none; border-radius: 50%; background: #0a84ff; position: relative; }
.composer-send::after { content: ""; position: absolute; left: 50%; top: 52%; width: 0.6em; height: 0.6em; border: solid #fff; border-width: 0.14em 0 0 0.14em; transform: translate(-50%, -30%) rotate(45deg); }
.composer.filled .composer-send { display: block; }

/* The demo keyboard, measured from the 1.1 keyboard (revisions 5.9 and
   5.13: KeyboardCardViews, KeyboardCardStyle, KeyboardViewController): 357 pt
   tall with the globe row under it, content on Apple's 6.7 pt key edge, one
   6 pt rhythm from the filter glass to the cards. On this phone 1 pt ≈ 0.0473em.
   Card fills are the folder color at 44% over white, the same as the
   page's cards; in dark they take the page's richer card fills too
   (Diego, October 16: the app's 36% over #2A2C33 read muted beside them).
   "ink" is the folder's text color, used for selected days and choices,
   the current blank and the ‹ › buttons; text on ink keeps the deeper
   fill (--on-ink) so it stays readable, and underlines on a card are
   lighter (--line), as in the snippet stream. */
.kb {
  --kb-bg: #e4e5ea; --kb-cap: #ffffff; --kb-cap-on: #abb0ba;
  --kb-text-2: rgba(0, 0, 0, 0.5); --kb-wash: rgba(0, 0, 0, 0.07);
  --kc-teal: #a4dce6;   --kc-teal-ink: #1d6673;
  --kc-indigo: #b6b5ed; --kc-indigo-ink: #3a398d;
  --kc-pink: #ffa3b4;   --kc-pink-ink: #9e1c37;
  --kc-blue: #8fc4ff;   --kc-blue-ink: #004a99;
  --kc-green: #a6e6b6;  --kc-green-ink: #1a6a2f;
  --kb-lens: rgba(120, 120, 128, 0.16);
  --f-all: #007aff; --f-fav: #ffcc00; --f-recent: #30b0c7; --f-pasted: #ff9500;
  position: relative; height: 21.19em; flex: none;
  background: var(--kb-bg);
  border-radius: 1.25em 1.25em 2.95em 2.95em;
}
@media (prefers-color-scheme: dark) {
  .kb {
    --kb-bg: #232325; --kb-cap: rgba(255, 255, 255, 0.16); --kb-cap-on: rgba(255, 255, 255, 0.3);
    --kb-text-2: rgba(255, 255, 255, 0.58); --kb-wash: rgba(255, 255, 255, 0.07);
    --kc-teal: var(--teal-c);     --kc-teal-ink: #76d7e9;
    --kc-indigo: var(--indigo-c); --kc-indigo-ink: #8b8aed;
    --kc-pink: var(--pink-c);     --kc-pink-ink: #ff8aa1;
    --kc-blue: var(--blue-c);     --kc-blue-ink: #6cb4ff;
    --kc-green: var(--green-c);   --kc-green-ink: #6ade86;
    --kb-lens: rgba(255, 255, 255, 0.14);
    --f-all: #5aa9ff; --f-fav: #ffd60a; --f-recent: #64d2e6; --f-pasted: #ffb340;
  }
  .kc-teal, .ink-teal { --on-ink: #326471; --line: #b2e9f3; }
  .kc-indigo, .ink-indigo { --on-ink: #3d3d73; --line: #cdccf7; }
  .kc-pink, .ink-pink { --on-ink: #77303f; --line: #ffd2db; }
  .kc-blue, .ink-blue { --on-ink: #1e4c7c; --line: #c3e1ff; }
  .kc-green, .ink-green { --on-ink: #2c6740; --line: #b3eec1; }
}
/* A folder's tint (fill), ink (text, selections) and ring (selected badge).
   The fill-in screen takes the snippet's folder: .kb carries ink-<folder>. */
.kc-teal, .ink-teal { --fill: var(--kc-teal); --ink: var(--kc-teal-ink); --ring: var(--kr-teal); }
.kc-indigo, .ink-indigo { --fill: var(--kc-indigo); --ink: var(--kc-indigo-ink); --ring: var(--kr-indigo); }
.kc-pink, .ink-pink { --fill: var(--kc-pink); --ink: var(--kc-pink-ink); --ring: var(--kr-pink); }
.kc-blue, .ink-blue { --fill: var(--kc-blue); --ink: var(--kc-blue-ink); --ring: var(--kr-blue); }
.kc-green, .ink-green { --fill: var(--kc-green); --ink: var(--kc-green-ink); --ring: var(--kr-green); }
.kc-teal, .kc-indigo, .kc-pink, .kc-blue, .kc-green { background: var(--fill); }
/* A selected folder: a ring in its color, semibold; the capsule shows no lens. */
.kb-folder.sel { box-shadow: inset 0 0 0 0.133em var(--ring); font-weight: 600; }
/* A counter's live value in a card's preview, as the keyboard draws Auto values. */
.kb-card .auto { text-decoration: underline dotted var(--line, var(--ink)); text-underline-offset: 0.18em; transition: color 0.3s; }
.kb-card .auto.tick { animation: tick 0.6s ease; }
@keyframes tick { 40% { color: var(--ink); } }
.kb .ksym { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tab rows (revision 5.9): the filter row, Home's tab bar as a 40 pt glass
   bar across the keyboard, icons only, the selected one on a lens with its
   symbol filled in its color; 6 pt under it, the folders across the full
   width. 6 pt under the keyboard's top edge, on the 6.7 pt key edge. */
.kb-top {
  position: absolute; left: 0.317em; right: 0.317em; top: 0.284em; height: 4.07em;
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kb-filters {
  display: flex; align-items: center; height: 1.89em; padding: 0 0.14em;
  border-radius: 999px; background: var(--kb-glass);
  box-shadow: inset 0 0 0 0.04em var(--kb-glass-edge);
}
.kb-filters i {
  flex: 1; display: grid; place-items: center; height: 1.61em; border-radius: 999px;
  color: var(--label); transition: background 0.3s, color 0.3s;
}
.kb-filters i .sym { width: 1.1em; height: 1.1em; stroke-width: 1.7; }
.kb-filters i.on { background: var(--kb-lens); }
.kb-filters i.on .sym { fill: currentColor; }
.kb-filters i.on.f-recent .sym, .kb-filters i.on.f-pasted .sym { fill: none; stroke-width: 2.2; }
.kb-filters .f-all.on { color: var(--f-all); }
.kb-filters .f-fav.on { color: var(--f-fav); }
.kb-filters .f-recent.on { color: var(--f-recent); }
.kb-filters .f-pasted.on { color: var(--f-pasted); }
.kb-tabs {
  position: absolute; left: 0; right: -0.317em; top: 2.18em; height: 1.89em;
  display: flex; align-items: center; gap: 0.38em; overflow: hidden; transition: opacity 0.25s;
}
.kb.toasting .kb-tabs { opacity: 0; }
/* Sizes in the label's own em (15 pt text): 40 pt tall, 16 pt sides. */
.kb-folder {
  flex: none; height: 2.66em; padding: 0 1.07em; border-radius: 999px;
  display: grid; place-items: center; white-space: nowrap;
  font-size: 0.71em; font-weight: 500; color: var(--line, var(--ink));
}
.kb-toast {
  position: absolute; left: 0; right: 0; top: 2.18em; height: 1.89em; z-index: 3;
  display: flex; align-items: center; gap: 0.4em; padding: 0 0.2em 0 0.35em;
  border-radius: 999px; background: var(--kb-glass);
  box-shadow: inset 0 0 0 0.04em var(--kb-glass-edge);
  white-space: nowrap;
  opacity: 0; transform: scale(0.96); transition: opacity 0.25s, transform 0.3s;
}
.kb-toast span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.71em; }
.kb-toast b {
  padding: 0.38em 0.8em; border-radius: 999px; font-size: 0.71em; font-weight: 600;
  background: var(--tint-soft); color: var(--undo-ink);
}
.kb-check { width: 1.15em; height: 1.15em; flex: none; border-radius: 50%; background: var(--green); position: relative; }
.kb-check::after { content: ""; position: absolute; left: 0.4em; top: 0.22em; width: 0.26em; height: 0.52em; border: solid #fff; border-width: 0 0.11em 0.11em 0; transform: rotate(45deg); }
.kb.toasting .kb-toast { opacity: 1; transform: none; }

/* The two screens: the list, and the fill-in screen that slides in over it. */
.kb-view {
  position: absolute; inset: 0;
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kb-fill { opacity: 0; transform: translateX(8%); pointer-events: none; }
.kb.filling .kb-list, .kb.filling .kb-top { opacity: 0; transform: translateX(-8%); pointer-events: none; }
.kb.filling .kb-fill { opacity: 1; transform: none; pointer-events: auto; }

/* Snippet rows: 46 pt, 6 pt apart, 13 pt corners; a chevron when it asks.
   The first 6 pt under the folders; four fit, 8 pt over the key caps. */
.kb-cards {
  position: absolute; left: 0.317em; right: 0.317em; top: 4.64em;
  display: flex; flex-direction: column; gap: 0.28em;
}
.kb-card {
  position: relative; display: flex; align-items: center; gap: 0.4em;
  height: 2.18em; padding: 0 0.57em; border-radius: 0.61em;
  white-space: nowrap; overflow: hidden;
  transition: transform 0.15s, filter 0.15s;
}
.kb-card .kc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.71em; color: var(--kb-text-2); }
.kb-card b { font-weight: 600; color: var(--label); margin-right: 0.3em; }
.kb-card .ksym { width: 0.62em; height: 0.62em; flex: none; color: var(--kb-text-2); stroke-width: 2.6; }
.kb-card.pressed { transform: scale(0.985); filter: brightness(0.94); }

/* Key rows: ABC, Aa, return and delete 52 pt caps, space the rest (revision
   5.9); 8 pt corners, white (16% white in dark). */
.kb-row, .fill-bar {
  position: absolute; left: 0.317em; right: 0.317em; top: 14.57em; height: 1.99em;
  display: flex; gap: 0.28em;
}
.kb-row span, .fill-bar span {
  flex: none; width: 2.46em; height: 100%; border-radius: 0.38em;
  display: grid; place-items: center; background: var(--kb-cap); color: var(--label);
}
.kb-row span.t { font-size: 0.71em; width: 3.46em; }
.kb-row .space { flex: 1; width: auto; }
.kb-row .ksym, .fill-bar .ksym { width: 1.05em; height: 1.05em; stroke-width: 1.8; }
.fill-bar .fill-insert {
  flex: 1; width: auto; background: #0a84ff; color: #fff;
  font-size: 0.76em; font-weight: 600; transition: transform 0.15s;
}
.fill-insert.pressed { transform: scale(0.97); }

/* The system row under every keyboard: globe and dictation. */
.kb-system {
  position: absolute; left: 1.45em; right: 1.45em; top: 18.64em;
  display: flex; justify-content: space-between; color: var(--label);
}
.kb-system .ksym { width: 1.15em; height: 1.15em; stroke-width: 1.6; }

/* Fill-in: the snippet in its folder color, the current blank in the ink. */
/* Positions in the text's own em (16 pt): 16 pt sides, 22 pt from the top. */
.fill-text {
  position: absolute; left: 0.42em; right: 0.42em; top: 0.75em;
  padding: 0.68em 0.79em; border-radius: 0.81em;
  font-size: 0.76em; line-height: 1.25; color: var(--label);
}
.fill-text mark {
  padding: 0 0.12em; border-radius: 0.2em; font-weight: 600;
  background: var(--kb-wash); color: var(--label);
  text-decoration: underline dashed var(--line, var(--ink)); text-decoration-thickness: 0.09em; text-underline-offset: 0.2em;
  transition: background 0.2s, color 0.2s;
}
.fill-text mark.active { background: var(--ink); color: var(--on-ink, var(--fill)); text-decoration-color: transparent; }
.fill-head {
  position: absolute; left: 0.317em; right: 0.317em; top: 4.3em; height: 1.7em;
  display: flex; align-items: center; gap: 0.4em;
}
.fill-head b { font-size: 0.71em; font-weight: 600; color: var(--kb-text-2); }
.fill-head span { flex: 1; font-size: 0.76em; font-weight: 700; transition: opacity 0.2s; }
.gbtn {
  width: 1.51em; height: 1.51em; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); background: var(--kb-glass); box-shadow: inset 0 0 0 0.04em var(--kb-glass-edge);
  transition: opacity 0.2s;
}
.gbtn .ksym { width: 0.85em; height: 0.85em; stroke-width: 2.4; }
.cal {
  position: absolute; left: 0.317em; right: 0.317em; top: 6.1em;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 0.7em repeat(4, 1.9em);
  align-items: center; justify-items: center; transition: opacity 0.25s;
}
.cal i { font-style: normal; font-size: 0.52em; font-weight: 600; color: var(--kb-text-2); }
.cal span {
  width: 2.13em; height: 2.13em; display: grid; place-items: center; border-radius: 50%;
  font-size: 0.8em; color: var(--label);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.cal .today { color: var(--ink); font-weight: 600; }
.cal .next { color: var(--kb-text-2); }
.cal .sel { background: var(--ink); color: var(--on-ink, var(--fill)); font-weight: 600; }
.cal span.pressed { transform: scale(0.88); }
/* Choice: one full-width key per option, the picked one in the ink. */
.fill-keys {
  position: absolute; left: 0.317em; right: 0.317em; top: 6.6em;
  display: flex; flex-direction: column; gap: 0.48em;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.fill-keys span {
  font-size: 0.71em; height: 2.49em; border-radius: 0.53em;
  display: grid; place-items: center;
  background: var(--kb-cap); color: var(--label);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.fill-keys span.on { background: var(--ink); color: var(--on-ink, var(--fill)); font-weight: 600; }
.fill-keys span.pressed { transform: scale(0.97); }
.kb-fill.choice .cal, .kb-fill.choice .gbtn, .kb-fill.choice #demo-month { opacity: 0; }
.kb-fill.choice .fill-keys { opacity: 1; pointer-events: auto; }
.kb-fill.choice .cal { pointer-events: none; }

.pink { background: var(--pink-c); } .blue { background: var(--blue-c); }
.green { background: var(--green-c); } .orange { background: var(--orange-c); }
.yellow { background: var(--yellow-c); } .purple { background: var(--purple-c); }
.teal { background: var(--teal-c); } .indigo { background: var(--indigo-c); }

/* The glass lens shows on each target, presses it (it flattens and takes
   the snippet's color, and a dot in that color opens into two rings) and
   lets go. Its center is the element's origin (Diego, October 31, 2026: it
   was a pointing hand). Clear glass that never blurs what it covers, so
   the target's letters stay readable. It appears already in its target's
   shape: on a target wider than itself a pill (or the target's own rounded
   shape) around the whole target (--lw, --lh, --lr, set by the script or
   per demo), a circle otherwise; and it fades out with its tap (Diego,
   November 2, 2026). */
.hand {
  position: absolute; z-index: 7; left: 0; top: 0; width: 0; height: 0;
  opacity: 0; pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.35s ease;
}
.hand.show { opacity: 1; }
.lens {
  --w: var(--lw, 2.2em); --h: var(--lh, 2.2em);
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  box-sizing: border-box; border-radius: var(--lr, calc(var(--h) / 2));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.06) 0.7em,
    rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), inset 0 0.12em 0.25em rgba(255, 255, 255, 0.5),
    inset 0 -0.15em 0.35em rgba(255, 255, 255, 0.3), 0 0.4em 0.9em rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s cubic-bezier(0.3, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.05), height 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.05),
    border-radius 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.05), left 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.05), top 0.3s cubic-bezier(0.3, 0.9, 0.3, 1.05);
}
.lens::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ring); opacity: 0; transition: opacity 0.18s;
}
.hand.press .lens, .tp.press .lens { transform: scale(0.82); }
.hand.wide.press .lens, .tp.wide.press .lens { transform: scale(0.95); }
.hand.press .lens::after, .tp.press .lens::after { opacity: 0.22; }
.ripple span {
  position: absolute; left: -0.55em; top: -0.55em; width: 1.1em; height: 1.1em;
  border-radius: 50%; opacity: 0;
}
.ripple span:first-child { background: var(--ring); }
.ripple span + span { box-shadow: inset 0 0 0 0.15em var(--ring); }
.ripple.go span:nth-child(1) { animation: tap-dot 0.75s ease-out both; }
.ripple.go span:nth-child(2) { animation: tap-ring 0.85s 0.06s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.ripple.go span:nth-child(3) { animation: tap-ring 1s 0.2s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes tap-dot {
  0% { opacity: 0; transform: scale(0.3); }
  20% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes tap-ring {
  0% { opacity: 0.9; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(2.6); }
}
.composer-send { transition: transform 0.15s; }
.composer-send.pressed { transform: scale(0.88); }
.kb-card.pressed { transform: scale(0.96); filter: brightness(0.92); }

/* ---------- How it works ---------- */

.steps { display: grid; gap: 48px; }
.step {
  position: relative; display: flex; flex-direction: column-reverse; gap: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p:not(.tile-kicker) { color: var(--label-2); font-size: var(--fs-body); }
/* Wide screens: one step per row, the words beside a large phone, the
   phone switching sides from step to step. */
@media (min-width: 820px) {
  .steps { gap: clamp(56px, 7vw, 96px); }
  .step {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;
    column-gap: clamp(40px, 6vw, 88px);
  }
  .step:nth-child(2) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .step:nth-child(2) .step-copy { order: 2; }
  .step p:not(.tile-kicker) { max-width: 24em; }
}

.step-art {
  position: relative; height: 360px; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 55%, var(--phone-glow), transparent 72%);
  container-type: inline-size;
}
@media (min-width: 820px) { .step-art { height: 460px; } }
/* A piece of a phone fades out instead of ending at the edge of its space:
   the top of the phone at its bottom, the keyboards at their top. */
.art-save { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.art-switch, .art-tap { -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); }
/* Phones: step 3 sits a little lower, so the whole inserted message shows. */
@media (max-width: 819px) {
  .art-tap .frag-bottom {
    bottom: -3em;
    -webkit-mask-image: linear-gradient(transparent 4%, #000 20%, #000 88%, transparent 99%);
    mask-image: linear-gradient(transparent 4%, #000 20%, #000 88%, transparent 99%);
  }
}

/* A piece of the demo phone with a real screen in it: the top of the phone
   for the app, the bottom for the keyboard. Measured in em, where the
   screen is 19em wide, so 1em is 1320/19 pixels of the 1320 px capture. */
.frag {
  position: absolute; left: 50%; width: 20.36em; margin-left: -10.18em;
  font-size: min(19.5px, 4.6cqi); padding: 0.49em; border: 0.19em solid transparent;
  background:
    linear-gradient(var(--frame), var(--frame)) padding-box,
    linear-gradient(155deg, #b0b0b5, #5d5d62 12%, #727277 44%, #545459 74%, #9a9a9f) border-box;
  box-shadow: 0 0 0 0.05em #e2e2e7, 0 0 0 0.09em rgba(0, 0, 0, 0.42), 0 1.6em 3.2em -1em rgba(0, 25, 70, 0.3);
}
.frag-top {
  top: 1.6em; border-bottom: 0; padding-bottom: 0; border-radius: 3.58em 3.58em 0 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent 98%); mask-image: linear-gradient(#000 70%, transparent 98%);
}
.frag-bottom {
  bottom: 1.6em; border-top: 0; padding-top: 0; border-radius: 0 0 3.58em 3.58em;
  -webkit-mask-image: linear-gradient(transparent 2%, #000 24%); mask-image: linear-gradient(transparent 2%, #000 24%);
}
.frag-screen {
  position: relative; overflow: hidden; height: 25.45em; background: var(--screen);
  box-shadow: 0 0 0 0.06em rgba(255, 255, 255, 0.13);
}
.frag-top .frag-screen { border-radius: 2.9em 2.9em 0 0; }
.frag-bottom .frag-screen { border-radius: 0 0 2.9em 2.9em; }
.frag-screen img { width: 100%; height: auto; vertical-align: top; }
.frag-island {
  position: absolute; z-index: 2; top: 0.48em; left: 50%; width: 5.4em; height: 1.6em; margin-left: -2.7em;
  border-radius: 1em; background: #000;
}
/* Between loops the screen dips to its own color, so a demo starts over
   without playing backwards. */
.scr-fade { position: absolute; inset: 0; z-index: 4; background: var(--screen); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.dip .scr-fade { opacity: 1; }
.snap, .snap * { transition: none !important; }

/* The lens from the hero demo, sized to the phone piece. Its center is the
   element's origin. */
.tp {
  position: absolute; z-index: 3; width: 0; height: 0; opacity: 0;
  transition: opacity 0.3s, left 0.6s cubic-bezier(0.45, 0, 0.2, 1), top 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}
.tp.show { opacity: 1; }
/* Smaller than the hero's lens; left and top stay in the phone's em. */
.tp > * { font-size: 0.82em; }

/* Switch keyboards: the real keyboards and the globe menu. Hold the globe,
   the menu opens out of it, slide to SnippetCue, let go: the field rides
   up as the taller keyboard rises over the Apple one. */
/* --rise: how much taller SnippetCue's keyboard is than Apple's in the
   captures (255 px in light, 306 px in dark, of the 1320 px capture). */
.sw { --rise: 3.67em; }
@media (prefers-color-scheme: dark) { .sw { --rise: 4.4em; } }
.sw-layer { position: absolute; left: 0; right: 0; }
.sw-top { top: 0; transition: transform 0.46s cubic-bezier(0.3, 0.8, 0.25, 1); }
.sw-apple { bottom: 0; }
.sw-snip {
  bottom: 0; opacity: 0; clip-path: inset(var(--rise) 0 0 0);
  transition: clip-path 0.46s cubic-bezier(0.3, 0.8, 0.25, 1), opacity 0s 0.46s;
}
.sw.s-snip .sw-top { transform: translateY(calc(-1 * var(--rise))); }
.sw.s-snip .sw-snip {
  opacity: 1; clip-path: inset(0);
  transition: clip-path 0.46s cubic-bezier(0.3, 0.8, 0.25, 1), opacity 0s;
}
.sw-menu {
  position: absolute; z-index: 2; left: 0; top: 10.08em; width: 10.36em; height: 12.52em;
  transform-origin: 1.81em 13.6em; transform: scale(0.2); opacity: 0;
  transition: transform 0.12s ease-in, opacity 0.08s ease-in;
}
.sw.s-menu .sw-menu {
  transform: none; opacity: 1;
  transition: transform 0.5s cubic-bezier(0.2, 1.25, 0.35, 1), opacity 0.16s;
}
/* The globe menu, drawn solid (not see-through) so it reads in both
   appearances. Laid out on the capture of the real menu. */
.kbm {
  --kbm-bg: #ffffff; --kbm-ink: #000000; --kbm-ink-2: #8a8a8e; --kbm-pill: rgba(0, 0, 0, 0.075);
  position: absolute; left: 0.2em; top: 0.29em; right: 0.3em; bottom: 0.34em;
  border-radius: 0.86em; background: var(--kbm-bg); color: var(--kbm-ink);
  box-shadow: 0 0 0 0.04em rgba(0, 0, 0, 0.08), 0 0.5em 1.4em rgba(0, 0, 0, 0.2);
  font-family: var(--font); letter-spacing: -0.01em;
}
@media (prefers-color-scheme: dark) {
  .kbm {
    --kbm-bg: #2c2c2e; --kbm-ink: #ffffff; --kbm-ink-2: #98989e; --kbm-pill: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 0.04em rgba(255, 255, 255, 0.14), 0 0.6em 1.6em rgba(0, 0, 0, 0.6);
  }
}
.kbm-row { position: absolute; left: 1.15em; font-size: 0.73em; line-height: 1; transform: translateY(-50%); white-space: nowrap; }
.kbm-row.r0 { top: 2.1em; } .kbm-row.r1 { top: 4.97em; } .kbm-row.r2 { top: 8.03em; } .kbm-row.r3 { top: 10.36em; }
.kbm-row small { display: block; margin-top: 0.3em; font-size: 0.75em; color: var(--kbm-ink-2); }
.kbm-pill {
  position: absolute; left: 0.45em; right: 0.45em; top: 2.62em; height: 2.15em; border-radius: 1.08em;
  background: var(--kbm-pill); transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1);
}
/* The highlight rides with the finger, from English to SnippetCue (its
   name and the line under it). */
.sw.s-move .kbm-pill { transform: translateY(3.87em); }
.kbm-key { position: absolute; top: 9.35em; width: 2.74em; height: 1.67em; margin-left: -1.37em; display: grid; place-items: center; border-radius: 0.84em; }
.kbm-key.k0 { left: 1.82em; } .kbm-key.k1 { left: 4.95em; background: var(--kbm-pill); } .kbm-key.k2 { left: 8.11em; }
.kbm-key svg { width: 1.37em; height: 0.86em; fill: none; stroke: var(--kbm-ink); stroke-width: 1.6; stroke-linecap: round; }
.sw .tp { left: 1.81em; top: 23.68em; transition-duration: 0.3s, 0.7s, 0.7s; }
.sw.s-move .tp { left: 3.4em; top: 17.95em; }

/* Tap to insert: tap the snippet, pick in its fill-in, tap Insert. Three
   real screens. */
.ins-f { position: absolute; inset: 0; transition: opacity 0.22s; }
.ins-f.f1, .ins-f.f2 { opacity: 0; }
.ins.s-fill .f1, .ins.s-done .f2 { opacity: 1; }
.ins .tp { left: 9.5em; top: 14.25em; }
.ins.s-at-insert .tp { left: 9.49em; top: 20.9em; }
.ins.s-at-insert .tp { --ring: var(--kr-blue); }
/* On arrival the lens widens around the card, then around Insert (in the
   lens's own em, 0.82 of the phone's). */
.ins.s-fit .tp .lens { --lw: calc(18.75em / 0.82); --lh: calc(2.33em / 0.82); --lr: calc(0.65em / 0.82); }
.ins.s-fit.s-at-insert .tp .lens { --lw: calc(14.96em / 0.82); --lh: calc(2em / 0.82); --lr: calc(0.4em / 0.82); }
.ins.s-fit .tp.press .lens { transform: scale(0.95); }

/* ---------- Features: one line of copy per card, the app explains ---------- */

.bento { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .tile { grid-column: span 3; }
  .tile-fill, .tile-paste, .tile-library { grid-column: span 6; }
}
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--tile-shadow);
}
.tile h3 { margin-bottom: 10px; }
.tile-copy p:not(.tile-kicker) { color: var(--label-2); font-size: var(--fs-body); }
.tile-kicker { font-size: var(--fs-label); font-weight: 600; margin-bottom: 8px; }
.pink-ink { color: var(--pink-i); } .purple-ink { color: var(--purple-i); }
.blue-ink { color: var(--blue-i); } .green-ink { color: var(--green-i); }
.orange-ink { color: var(--orange-i); } .teal-ink { color: var(--teal-i); }

/* Wide tiles: copy beside a phone; Paste puts its phone first. */
@media (min-width: 760px) {
  .tile-fill, .tile-paste, .tile-library {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: clamp(32px, 6vw, 88px); padding-left: clamp(32px, 5vw, 64px); padding-right: clamp(32px, 5vw, 64px);
  }
  .tile-paste { grid-template-columns: auto minmax(0, 1fr); }
  .tile-paste .half { order: -1; }
  .tile-fill .tile-copy, .tile-paste .tile-copy, .tile-library .tile-copy { max-width: 25em; }
}

/* The bottom of a hero-style phone: the top fades out, the keyboard shows. */
.half {
  font-size: clamp(12.5px, 3.6vw, 16px);
  height: 29em; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  overflow: hidden; padding: 0 1.8em 1.8em; margin: -8px 0 -1.8em; align-self: center;
  -webkit-mask-image: linear-gradient(transparent, #000 22%);
  mask-image: linear-gradient(transparent, #000 22%);
}
.fx-phone { font-size: 1em; flex: none; }
.half .fx-phone {
  box-shadow: 0 0 0 0.05em #e2e2e7, 0 0 0 0.09em rgba(0, 0, 0, 0.42), 0 1em 1.8em -0.6em rgba(0, 25, 70, 0.28);
}
.fx-phone .screen { justify-content: flex-end; }
.fx-phone .thread { flex: none; }

/* Fill-in: a Duration wheel, then a Choice. */
.wheel {
  position: absolute; left: 0.317em; right: 0.317em; top: 6.3em; height: 7.8em;
  display: grid; grid-template-columns: repeat(3, 1fr);
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  transition: opacity 0.25s;
}
.wheel-band {
  position: absolute; left: 0; right: 0; top: 50%; height: 1.6em; margin-top: -0.8em;
  border-radius: 0.6em; background: var(--kb-wash);
}
.wcol { position: relative; overflow: hidden; cursor: ns-resize; user-select: none; touch-action: none; }
.wlist { position: absolute; left: 0; right: 0; top: 50%; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wlist span {
  display: flex; align-items: center; justify-content: center; gap: 0.25em;
  height: 1.6em; margin-top: -0.8em; margin-bottom: 0.8em; font-size: 0.86em; color: var(--kb-text-2);
  cursor: pointer;
}
.wlist span.on { color: var(--label); font-weight: 500; }
.wlist span small { font-size: 0.85em; }
.wlist span:not(.on) small { visibility: hidden; }
.kb-fill.choice .wheel { opacity: 0; pointer-events: none; }
.kb-fill.choice .fx-next { opacity: 0; pointer-events: none; }
.fx-keys span, .fx-next, .fx-insert, .fx-back, .fill-text mark { cursor: pointer; }
.fx-fill .fill-keys { top: 6.6em; }
.fx-fill .composer-field { min-height: 2.1em; }
.fx-fill .composer-field .typed, .fx-paste .composer-field .typed {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fx-phone .bubble.out:empty { display: none; }
.fx-phone .bubble.out.show { animation: pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }

/* App-screen crops (Polish and My Info): the app's own surfaces. */
.crop {
  --crop: #f2f2f7; --card: #ffffff; --glass-btn: rgba(255, 255, 255, 0.8);
  position: relative; margin-top: auto; padding: 14px 14px 18px; border-radius: 26px;
  background: var(--crop); font-size: 15px; line-height: 1.35;
  box-shadow: inset 0 0 0 0.5px var(--sep);
}
@media (prefers-color-scheme: dark) {
  .crop { --crop: #000000; --card: #1c1c1e; --glass-btn: rgba(255, 255, 255, 0.1); }
}
.ed-nav { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.ed-nav b { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ed-x, .ed-pill, .ed-done {
  flex: none; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--glass-btn); box-shadow: inset 0 0 0 0.5px var(--sep);
}
.ed-x { width: 34px; position: relative; }
.ed-x::before, .ed-x::after { content: ""; position: absolute; width: 14px; height: 1.8px; border-radius: 1px; background: var(--label); transform: rotate(45deg); }
.ed-x::after { transform: rotate(-45deg); }
.ed-pill { width: 52px; color: var(--label); }
.ed-pill .sym { width: 18px; height: 18px; }
.ed-done { width: 34px; background: #0a84ff; color: #fff; box-shadow: none; }
.ed-done .sym { width: 18px; height: 18px; stroke-width: 2.6; }
.ed-card { background: var(--card); border-radius: 18px; padding: 12px 15px 12px; }
.ed-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 0.5px solid var(--sep); }
.ed-body { display: grid; }
.ed-text { grid-area: 1 / 1; font-size: 15px; line-height: 1.5; transition: opacity 0.45s, transform 0.45s; }
.ed-body .after { opacity: 0; transform: translateY(4px); }
#fx-polish.polished .before { opacity: 0; transform: translateY(-4px); }
#fx-polish.polished .after { opacity: 1; transform: none; }
.ed-foot { display: grid; justify-items: end; margin-top: 12px; min-height: 30px; align-items: center; }
.ed-foot > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.3s, transform 0.15s; }
.ed-foot .sym { width: 15px; height: 15px; }
.polish-btn { padding: 6px 12px; border-radius: 999px; background: var(--tint-soft); color: var(--tint); font-size: 14px; font-weight: 500; }
.polish-btn.pressed { transform: scale(0.93); }
.polished-note { font-size: 12.5px; color: var(--label-2); opacity: 0; }
.polished-note b { color: var(--tint); font-weight: 500; margin-left: 6px; }
#fx-polish.polished .polish-btn { opacity: 0; }
#fx-polish.polished .polished-note { opacity: 1; }
/* A sweep of light while it thinks. */
.ed-card { position: relative; overflow: hidden; }
.ed-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(175, 82, 222, 0.16) 50%, transparent 65%);
  transform: translateX(-110%);
}
#fx-polish.sweep .ed-card::after { transition: transform 0.9s ease; transform: translateX(110%); }

/* Field chips, as the editor draws them. */
.chip {
  display: inline-flex; align-items: center; gap: 0.25em; white-space: nowrap;
  padding: 0 0.4em; border-radius: 0.4em; font-weight: 600; line-height: 1.45;
  transition: background 0.35s, color 0.35s;
}
.chip .sym { width: 0.9em; height: 0.9em; }
.chip.date { background: rgba(120, 120, 128, 0.14); }
.chip.me { background: var(--tint-soft); color: var(--tint); }
.chip.me.val { background: transparent; color: var(--label); font-weight: 400; padding: 0; }
.chip.me.val .sym { display: none; }

/* My Info: three snippets built from the same details. */
.info-tabs { display: flex; gap: 6px; margin: 2px 2px 12px; }
.info-tabs span {
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--label-2);
  transition: background 0.3s, color 0.3s;
}
.info-tabs span.on { background: var(--tint-soft); color: var(--tint); }
.info-card { display: grid; min-height: 12.4em; }
.info-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.info-slide.on { opacity: 1; transform: none; }
.info-slide .ed-text { line-height: 1.75; }

/* Paste: an AI chat, then Messages with the keyboard. */
.fx-paste .scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fx-paste .scene:not(.on) { opacity: 0; transform: translateX(12%); pointer-events: none; }
.fx-paste .scene.ai:not(.on) { transform: translateX(-12%); }
.ai-answer { display: flex; gap: 0.5em; align-items: flex-start; padding: 0.4em 0.15em 0; }
.ai-answer .avatar { width: 1.7em; height: 1.7em; flex: none; font-size: 1em; }
.ai-answer .avatar .sym { width: 1em; height: 1em; fill: #fff; stroke: none; }
.ai-answer p { font-size: 0.86em; line-height: 1.38; }
.ai-actions { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0 0.4em 2.2em; }
.ai-copy {
  display: inline-flex; align-items: center; gap: 0.3em; padding: 0.3em 0.65em; border-radius: 999px;
  font-size: 0.74em; font-weight: 600; background: var(--bubble-in); color: var(--label);
  transition: transform 0.15s;
}
.ai-copy .sym { width: 1.05em; height: 1.05em; }
.ai-copy.pressed { transform: scale(0.92); }
.ai-copied { font-size: 0.74em; color: var(--label-2); opacity: 0; transition: opacity 0.3s; }
.ai-copied.show { opacity: 1; }
.ai-composer {
  display: flex; align-items: center; justify-content: space-between; margin: 0.4em 0.75em 2.6em;
  height: 2.6em; padding: 0 0.4em 0 1em; border-radius: 1.3em;
  background: var(--bubble-in); color: var(--label-3); font-size: 0.86em;
}
.ai-composer i { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--label); opacity: 0.85; }
.fx-paste .bubble.out { max-width: 82%; }

.fx-paste .kb-cards { height: 9.6em; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.paste-card {
  display: flex; align-items: center; gap: 0.45em; height: 0; opacity: 0; margin-bottom: -0.28em;
  padding: 0 0.3em 0 0.4em; border-radius: 0.61em; overflow: hidden;
  background: var(--kb-cap); box-shadow: inset 0 0 0 0.04em var(--kb-glass-edge);
  transition: height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, margin 0.4s;
}
.fx-paste.pulled .paste-card { height: 2.75em; opacity: 1; margin-bottom: 0; }
.pc-icon {
  width: 1.85em; height: 1.85em; flex: none; border-radius: 0.45em; display: grid; place-items: center;
  background: rgba(255, 149, 0, 0.18); color: var(--orange);
}
.pc-icon .sym { width: 1.05em; height: 1.05em; }
.paste-card > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.6em; line-height: 1.25; color: var(--kb-text-2); white-space: nowrap; }
.paste-card b { font-size: 1.18em; font-weight: 600; color: var(--label); }
.pc-btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.3em; padding: 0 0.75em; height: 2.15em;
  border-radius: 0.45em; background: #fff; color: #000; font-size: 0.74em; font-weight: 500;
  transition: transform 0.15s;
}
.pc-btn .sym { width: 1.1em; height: 1.1em; }
.pc-btn.pressed { transform: scale(0.94); }
/* Saved: the lens moves from Favorites to Pasted (no dot in the keyboard). */
.fx-paste.saved .kb-filters i.on { background: transparent; color: var(--label); }
.fx-paste.saved .kb-filters i.on .sym { fill: none; }
.fx-paste.saved .kb-filters i.pasted-tab { background: var(--kb-lens); color: var(--f-pasted); }
.fx-paste.saved .kb-filters i.pasted-tab .sym { stroke-width: 2.2; }
.composer-send.pressed { transform: scale(0.88); }

/* Library: one phone, cut by the tile's bottom edge; the lens taps a
   filter or folder and the real screen for it fades in. */
.lib-stage {
  font-size: clamp(12px, 3.4vw, 14px);
  height: 30em; display: flex; justify-content: center; overflow: hidden;
  margin: 8px calc(-1 * clamp(24px, 3vw, 34px)) calc(-1 * clamp(24px, 3vw, 34px)); padding-top: 0.6em;
}
/* Wide: the same space beside the phone as the Fill-in and Paste phones. */
@media (min-width: 760px) { .lib-stage { margin: 0 28.8px calc(-1 * clamp(24px, 3vw, 34px)); align-self: end; padding-top: 2.2em; height: 32em; } }
.lib-phone .screen { display: block; }
.lib-shot { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity 0.45s ease; }
.lib-shot.on { opacity: 1; }
.lib-shot img { width: 100%; height: auto; }
.lib-phone .island { top: 0.95em; }

/* ---------- Field values, as the app shows them ---------- */

.fv {
  font-style: normal; font-weight: 650; white-space: nowrap;
  padding: 0 0.3em; border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.55); color: var(--label);
}
@media (prefers-color-scheme: dark) { .fv { background: rgba(0, 0, 0, 0.28); } }
.fv.pick::after { content: " ▾"; font-size: 0.75em; opacity: 0.6; }

/* ---------- Made for: one tab per use case ---------- */

.uc-tabs {
  display: none; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 100%; margin: 0 auto 32px;
}
.js .uc-tabs { display: flex; }
@media (max-width: 620px) {
  .uc-tabs {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    max-width: none; margin-inline: calc(var(--gutter) * -1); padding: 5px var(--gutter);
  }
  .uc-tabs::-webkit-scrollbar { display: none; }
}
/* Each use case is a folder, drawn like the keyboard's folder chips: its
   color as the fill, a ring in the same color around the open one. */
.uc-tab {
  cursor: pointer; user-select: none; white-space: nowrap; flex: none;
  padding: 10px 18px; border-radius: 999px;
  font-size: var(--fs-label); font-weight: 600;
  transition: box-shadow 0.25s, opacity 0.25s;
}
.uc-tab { color: var(--label); }
.uc-tab.blue { --ring: var(--blue); } .uc-tab.pink { --ring: var(--pink); }
.uc-tab.green { --ring: var(--green); } .uc-tab.orange { --ring: var(--orange); }
.uc-tab.teal { --ring: var(--teal); }
.uc-tab:not(.on) { opacity: 0.72; }
.uc-tab:hover { opacity: 1; }
.uc-tab.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
.uc-tab:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* Each use case: the words beside the top of a phone showing that folder,
   with the same glow as How it works and no card around either. */
.uc-panel { display: grid; gap: 28px; align-items: center; }
.uc-panel + .uc-panel { margin-top: 56px; }
.js .uc-panel { display: none; margin-top: 0; }
.js .uc-panel.on { display: grid; animation: uc-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes uc-in { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 820px) {
  .uc-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 88px); }
}
.uc-copy h3 { margin-bottom: 10px; }
.uc-copy p { color: var(--label-2); font-size: var(--fs-body); max-width: 24em; }
.uc-art {
  --glow: var(--phone-glow);
  position: relative; height: 400px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(60% 50% at 50% 55%, var(--glow), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
}
@media (min-width: 820px) { .uc-art { height: 460px; } }
#uc-creators .uc-art { --glow: rgba(255, 45, 85, 0.22); }
#uc-appointments .uc-art { --glow: rgba(52, 199, 89, 0.24); }
#uc-fitness .uc-art { --glow: rgba(255, 149, 0, 0.24); }
#uc-shops .uc-art { --glow: rgba(48, 176, 199, 0.26); }
.uc-screen { display: flex; flex-direction: column; line-height: 1.25; }
.uc-screen .status { flex: none; }
.uc-back { display: flex; align-items: center; gap: 0.1em; padding: 0.2em 0.7em 0; font-size: 0.82em; color: var(--tint); }
.uc-back .ksym { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.uc-folder { padding: 0.25em 0.85em 0.55em; font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; color: var(--label); }
.uc-cards { display: flex; flex-direction: column; gap: 0.5em; padding: 0 0.85em; }
.uc-card { padding: 0.7em 0.85em 0.8em; border-radius: 0.95em; }
.uc-card b { display: block; font-size: 0.82em; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.2em; color: var(--label); }
.uc-card p { font-size: 0.76em; line-height: 1.4; color: var(--card-body); }
.uc-card .fv { color: var(--label); }

/* ---------- Light and dark images ---------- */

.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .only-dark { display: block; }
  .only-light { display: none; }
}

/* ---------- Privacy: a dark band in both appearances ---------- */

.privacy {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(80px, 11vw, 140px);
  padding: clamp(80px, 10vw, 128px) var(--gutter);
  background: #000; color: #f5f5f7;
}
.privacy::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -30%;
  width: 900px; height: 700px; margin-left: -450px;
  background: radial-gradient(closest-side, rgba(10, 132, 255, 0.4), rgba(10, 132, 255, 0));
}
.privacy-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.privacy-head { max-width: 720px; margin: 0 auto 56px; }
.lock {
  display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 26px;
  border-radius: 24px; font-size: 34px; color: #fff;
  background: linear-gradient(160deg, #3a9bff, #0062e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 18px 50px rgba(10, 132, 255, 0.45);
}
.lock .sym { stroke-width: 2.1; }
.privacy-grid { display: grid; gap: 14px; text-align: left; }
@media (min-width: 760px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); } }
.privacy-grid li, .full-access {
  padding: 24px 26px; border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.privacy-grid h3, .full-access h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.privacy-grid p, .full-access p { color: #a1a1a6; font-size: var(--fs-body); }
.full-access { margin-top: 14px; text-align: left; }
.text-link { display: inline-block; margin-top: 32px; color: #4da3ff; font-size: var(--fs-body); }
.text-link::after { content: " ›"; }

/* ---------- Phone-size refinements ---------- */

}

/* The fill-in tile on phones: labels above the values, so none is cut off. */
@media (max-width: 520px) {
  .pick-row { flex-wrap: wrap; row-gap: 6px; }
  .pick-label { width: 100%; }
  .pick { font-size: 13.5px; padding: 9px 4px; }
}

/* In dark mode the black privacy band would merge with the black page. */
@media (prefers-color-scheme: dark) {
  .privacy {
    background: linear-gradient(180deg, #0a1020, #05070d);
    border-block: 0.5px solid rgba(255, 255, 255, 0.08);
  }
}

/* ---------- Maker: one person, one reason, right on the page ---------- */

.maker-card { max-width: 680px; margin: 0 auto; }
.maker-card blockquote { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 26px; }
.maker-card blockquote p {
  font-size: var(--fs-lede); line-height: 1.5; letter-spacing: -0.015em;
  color: var(--label); text-wrap: pretty;
}
.maker-card figcaption { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Signed in the wordmark's layered ink. */
.maker-name {
  font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  padding-bottom: 0.18em;
  text-shadow: 0 0.06em 0 var(--e5), 0 0.12em 0 var(--e7), 0 0.18em 0 var(--e1);
}

/* ---------- Pricing ---------- */

.plans { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; gap: 20px; } }
.plan {
  padding: 30px 30px 34px; border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--tile-shadow);
}
.plan h3 { font-size: var(--fs-h4); color: var(--label-2); }
.price { font-size: 52px; font-weight: 700; letter-spacing: -0.045em; margin: 6px 0 22px; }
.price span { font-size: var(--fs-body); font-weight: 400; letter-spacing: -0.01em; color: var(--label-2); }
.plan li { position: relative; padding: 9px 0 9px 30px; font-size: var(--fs-body); border-top: 0.5px solid var(--sep); }
.plan li::before {
  content: ""; position: absolute; left: 4px; top: 14px; width: 5px; height: 10px;
  border: solid var(--tint); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
.plan.pro {
  position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255, 149, 0, 0.55), 0 20px 60px rgba(255, 45, 85, 0.14);
}
.plan.pro h3 { color: var(--sun); }
.plan.pro { overflow: hidden; }
/* Sunset's glows behind the icons: pink, purple, orange and yellow. */
.plan.pro::before {
  content: ""; position: absolute; left: 50%; top: -130px; width: 460px; height: 290px; margin-left: -230px;
  background:
    radial-gradient(closest-side at 28% 55%, rgba(255, 45, 85, 0.3), transparent),
    radial-gradient(closest-side at 50% 38%, rgba(107, 63, 168, 0.24), transparent),
    radial-gradient(closest-side at 72% 55%, rgba(255, 149, 0, 0.32), transparent),
    radial-gradient(closest-side at 50% 72%, rgba(255, 204, 0, 0.3), transparent);
  pointer-events: none;
}
.plan.pro > * { position: relative; }
.fan { display: flex; justify-content: center; height: 78px; margin: 0 0 18px; }
.fan img { width: 60px; height: 60px; margin: 0 -4px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 8px 18px rgba(0, 0, 0, 0.18); }
.fan img:nth-child(1) { transform: translateY(12px) rotate(-14deg); }
.fan img:nth-child(2) { transform: translateY(2px) rotate(-5deg); z-index: 1; }
.fan img:nth-child(3) { transform: translateY(2px) rotate(5deg); z-index: 1; }
.fan img:nth-child(4) { transform: translateY(12px) rotate(14deg); }
.js .reveal.in .fan img { animation: fan-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.js .reveal.in .fan img:nth-child(1) { animation-delay: 0.25s; } .js .reveal.in .fan img:nth-child(2) { animation-delay: 0.3s; }
.js .reveal.in .fan img:nth-child(3) { animation-delay: 0.35s; } .js .reveal.in .fan img:nth-child(4) { animation-delay: 0.4s; }
@keyframes fan-in { from { transform: translateY(18px) rotate(0); opacity: 0; } }
.plan.pro .price {
  background: linear-gradient(180deg, #ff9500, #d4380d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) {
  .plan.pro .price { background: linear-gradient(180deg, #ffd84d, #ff9500); -webkit-background-clip: text; background-clip: text; }
}
.plan.pro .price span { -webkit-text-fill-color: var(--label-2); }
.plan.pro li::before { border-color: var(--sun-mark); }
.fineprint { max-width: 620px; margin: 22px auto 0; text-align: center; font-size: var(--fs-fine); color: var(--label-2); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 760px; margin: 0 auto; border-block: 0.5px solid var(--sep); }
details + details { border-top: 0.5px solid var(--sep); }
summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 44px 22px 0;
  font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border: solid var(--label-3); border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform 0.25s;
}
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details p { padding: 0 0 24px; color: var(--label-2); font-size: var(--fs-body); max-width: 640px; }

/* ---------- Closer ---------- */

.closer {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(96px, 13vw, 160px) var(--gutter) clamp(96px, 12vw, 150px);
  margin-top: clamp(60px, 8vw, 100px); text-align: center;
}
.closer-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.closer-icon {
  width: 112px; height: 112px; margin-bottom: 30px; border-radius: 25%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 24px 60px rgba(0, 60, 160, 0.22);
}
.closer h2 + .store-badge { margin-top: 30px; }

/* The social accounts as flat round buttons, filled like the editor's
   chips (no rim or shadow), each logo in the label color so it reads in
   light and dark (Diego, October 21). */
.social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 16px; }
.social a {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--label); background: rgba(120, 120, 128, 0.14);
  transition: transform 0.2s, background 0.2s;
}
.social a:hover { background: rgba(120, 120, 128, 0.22); text-decoration: none; }
.social a:active { transform: scale(0.94); }
.social svg { width: 22px; height: 22px; fill: currentColor; }
/* In the hero, a row above the App Store badge (Diego, October 21). */
.hero-social { gap: 10px; margin-top: 30px; }
.hero-social a { width: 44px; height: 44px; }
.hero-social svg { width: 19px; height: 19px; }
.hero-social + .store-badge { margin-top: 18px; }
.hero-social.rise { animation-delay: 0.65s; }
@media (min-width: 960px) {
  .hero-promises .hero-social { justify-content: flex-start; margin: 0 0 0.85em; }
  .hero-promises .hero-social + .store-badge { margin-top: 0; }
}
/* In the footer (pages without the closer): smaller, quieter. */
.footer .social { gap: 4px; margin: 0 -10px; }
.footer .social a {
  width: 40px; height: 40px; color: var(--label-2);
  background: none;
}
.footer .social a:hover { color: var(--label); background: none; }
.footer .social svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */

.footer { border-top: 0.5px solid var(--sep); padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.footer-nav { display: flex; gap: 22px; }
.footer-nav a { color: var(--label-2); font-size: 14px; }
.copyright { width: 100%; font-size: var(--fs-fine); color: var(--label-2); }
@media (min-width: 760px) {
  .footer-nav { margin-left: auto; }
}

/* ---------- Scroll reveal (only when the script runs) ---------- */

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }


/* Screen to screen (desktop): where the browser supports scroll-driven
   animation, each section rises into place as it scrolls in and the hero
   recedes as you leave it. The scroll itself drives it, so it never takes
   over scrolling and stops the moment you do. Elsewhere the reveal above
   applies. Only the movement follows the scroll; the fade stays the timed
   one above, so a card always ends at full strength (a scroll-linked fade
   left cards resting half-faded, and after hard scrolling could hold a card
   dimmed even when it was fully on screen). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Desktop only: on a phone the sections are taller than the screen and
       would sit half-faded while you read them; the reveal above applies. */
    @media (min-width: 960px) {
      .js .reveal, .js .reveal.in { transform: none; transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
      .reveal {
        animation: sc-arrive linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
      @keyframes sc-arrive { from { transform: translateY(40px) scale(0.97); } }
      .privacy-inner, .closer-inner {
        animation: sc-arrive linear both, sc-depart linear both;
        animation-timeline: view(), view();
        animation-range: entry 0% entry 60%, exit 20% exit 100%;
      }
      @keyframes sc-depart { to { transform: scale(0.96); } }
      /* The whole hero fits the screen, so it recedes as one. */
      .hero-grid {
        animation: sc-recede linear both; animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
      @keyframes sc-recede { to { opacity: 0.15; transform: translateY(-6vh) scale(0.92); filter: blur(4px); } }

      /* "hidden" makes a box its own (unmoving) scroller, which freezes
         every scroll animation inside it; "clip" cuts the same edges
         without that. */
      .privacy, .plan.pro, .closer { overflow: clip; }

      /* A thin line along the bottom of the floating bar fills as you
         read down the page. */
      .nav-detached .nav-inner::after {
        content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px;
        border-radius: 1px; background: var(--blue); transform-origin: left;
        animation: sc-read linear both; animation-timeline: scroll(root);
      }
      @keyframes sc-read { from { transform: scaleX(0); } }

      /* How it works: the phones move a little slower than the page, so
         they sit behind the words. */
      .step-art { view-timeline: --sc-art; }
      .step-art .frag {
        animation: sc-depth linear both; animation-timeline: --sc-art;
        animation-range: cover 0% cover 100%;
      }
      @keyframes sc-depth { from { transform: translateY(56px); } to { transform: translateY(-20px); } }

      /* Privacy: the lock swings shut as the section arrives. */
      .lock {
        animation: sc-lock linear both; animation-timeline: view();
        animation-range: entry 0% cover 45%;
      }
      @keyframes sc-lock {
        from { transform: translateY(36px) scale(0.6) rotate(-24deg); }
        70% { transform: translateY(0) scale(1.06) rotate(4deg); }
      }

      /* Pricing: the four icons start as one stack and fan out as the Pro
         plan scrolls up (in place of the timed fan). */
      .js .reveal.in .fan img, .fan img {
        animation: sc-fan linear both; animation-timeline: --sc-fan;
        animation-range: entry 40% cover 55%;
      }
      .fan { view-timeline: --sc-fan; }
      .fan img:nth-child(1) { --sc-stack: 78px; }
      .fan img:nth-child(2) { --sc-stack: 26px; }
      .fan img:nth-child(3) { --sc-stack: -26px; }
      .fan img:nth-child(4) { --sc-stack: -78px; }
      .js .reveal.in .fan img:nth-child(n) { animation-delay: 0s; }
      @keyframes sc-fan { from { transform: translateX(var(--sc-stack)) translateY(8px) rotate(0); } }

      /* The closing icon rises and settles as the page ends. */
      .closer-icon {
        animation: sc-settle linear both; animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }
      @keyframes sc-settle { from { transform: translateY(60px) scale(0.72) rotate(-12deg); } }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { overflow-x: auto; }
}

/* ---------- The hero fills the first screen ---------- */

/* Desktop: one screen plus the stream's lower half, so the fold falls
   across the middle of the stream's second row. Between the name and the
   stream, the copy and the phone sit as one block, centered: the headline's
   capitals start on the phone's top edge and the promises rest on the line
   of its bottom edge. The phone is sized to the height between the name and
   the stream, and then 7% larger (October 16, Diego): its edges reach a
   little past the copy and the stream sits that much lower (never below
   12.8 px per em; on short screens the stream moves down further). */
@media (min-width: 960px) {
  .hero {
    min-height: calc(100vh + 1.5 * var(--row) + var(--rgap));
    min-height: calc(100svh + 1.5 * var(--row) + var(--rgap));
    display: flex; flex-direction: column; row-gap: 22px;
    padding-top: calc(58px + env(safe-area-inset-top)); padding-bottom: 0;
  }
  .hero-grid { position: relative; z-index: 1; flex: none; width: 100%; margin: auto; }
  #hero-title { font-size: clamp(40px, min(5.6vw, 7.4svh, 12.4cqi), 84px); margin-top: -0.17em; }
  .hero-stage { align-self: start; }
  .hero .phone {
    font-size: clamp(12.8px, calc(1.07 * (100vh - 1.5 * var(--row) - var(--rgap) - 102px - var(--mast)) / 42.86), 16.5px);
    font-size: clamp(12.8px, calc(1.07 * (100svh - 1.5 * var(--row) - var(--rgap) - 102px - var(--mast)) / 42.86), 16.5px);
  }
}
/* Short desktop screens: slimmer stream cards, so more of the first screen
   goes to the phone. */
@media (min-width: 960px) and (max-height: 940px) {
  .hero { --row: 76px; }
  .snip { padding: 10px 15px; }
  .snip b { font-size: 15px; line-height: 19px; }
  .snip span { font-size: 13px; line-height: 17px; }
}

/* One column (phones, portrait tablets): phone first. The name,
   the two-line headline, then the phone with its top dissolving into the
   page, taking the height left above the stream; the fold falls across the stream's
   second row. The launch line and promises come after the stream, at the
   top of the next screen. The lede steps aside; the demo says the same. */
@media (max-width: 959px) {
  .hero {
    --after: 156px;
    display: flex; flex-direction: column; align-items: center;
    --fold: 100svh;
    min-height: calc(100vh + 1.5 * var(--row) + var(--rgap) + var(--after));
    min-height: calc(var(--fold) + 1.5 * var(--row) + var(--rgap) + var(--after));
    padding: calc(22px + env(safe-area-inset-top)) var(--gutter) 0;
  }
  .hero-grid, .hero-copy { display: contents; }
  .lockup { order: 0; }
  /* The headline on one line, so more of the keyboard shows (Diego, October 16). */
  #hero-title { order: 1; font-size: min(6.4vw, 40px); margin: 10px 0 0; white-space: nowrap; }
  #hero-title .hl { display: inline-block; }
  .hero .lede { display: none; }
  .hero-stage {
    order: 2; flex: 1 1 0; min-height: 240px; width: 100%;
    justify-content: flex-end; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }
  /* About 25 em of the phone shows (keyboard, composer and the newest
     messages): the stage's height, everything above the stream taken off,
     over 25. Never wider than 4vw per em, about 85% of the screen. */
  .hero .phone {
    flex: none;
    font-size: clamp(13px, calc((100vh - 167px - var(--mast) - 1.04 * min(6.4vw, 40px)) / 25), min(4vw, 15.5px));
    font-size: clamp(13px, calc((100svh - 167px - var(--mast) - 1.04 * min(6.4vw, 40px)) / 25), min(4vw, 15.5px));
  }
  .hero-stream { order: 3; margin-top: 14px; }
  .hero-promises { order: 4; margin-top: 26px; height: 102px; }
  .hero-promises .hero-social { margin-top: 0; }
  .hero-promises .rise { animation: none; }
  .store-badge { margin-top: 0; }
  .store-badge img { height: 40px; }
}
/* iPhone browsers float their toolbar over the page: under 100svh about
   100 px of the page still shows through and around it. There the fold
   comes 56 px lower, so the first row stands clear above the toolbar, the
   second sits under it and the third stays off the screen. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 959px) {
    .hero { --fold: min(100lvh + 16px, 100svh + 56px); }
  }
}