/* VividAura · vividaura.app
 *
 * A product page in the manner of Apple's: big quiet type, black and white
 * bands in turn, the product itself as the picture. The identity is the
 * app's own: its black, its lime (for action and for the enhanced picture,
 * never decoration), Poppins, served from here so the site makes no request
 * anywhere else.
 *
 * Layout: one centred column (--wide) per band; each band sets its own
 * palette through the tokens below, so a component never names a colour.
 * Hover effects only where there is a pointer that hovers: on a phone a
 * tapped link would otherwise keep its hover look (an underline) after the
 * tap.
 */

/* 300 is only the watermark's "Enhanced by". */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2"); }

:root {
  /* The app's own colours (lib/theme/app_theme.dart), and the greys of a
     product page around them. */
  --black: #000000;
  --carbon: #161617;
  --snow: #f5f5f7;
  --white: #ffffff;
  --ink: #1d1d1f;
  --lime: #e8ff47;
  --lime-hi: #f2ff8a;
  --lime-lo: #cde73a;
  --olive: #4d5800;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion: a strong ease-out for anything that responds to a press or
     arrives, never ease-in (it starts slow, right when people look). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press: transform 160ms var(--ease-out);

  --nav-h: 48px;
  --wide: 1080px;
  --text: 692px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));

  /* Dark is the default palette (the landing page opens on black). */
  --bg: var(--black);
  --fg: var(--snow);
  --fg-2: #a1a1a6;
  --link: var(--lime);
  --tile: var(--carbon);
  --rule: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

/* A band's palette. */
.is-dark  { --bg: var(--black); --fg: var(--snow); --fg-2: #a1a1a6; --link: var(--lime);
            --tile: var(--carbon); --rule: rgba(255, 255, 255, 0.14); }
.is-light { --bg: var(--white); --fg: var(--ink); --fg-2: #6e6e73; --link: var(--olive);
            --tile: var(--snow); --rule: #d2d2d7; }
.is-mist  { --bg: var(--snow); --fg: var(--ink); --fg-2: #6e6e73; --link: var(--olive);
            --tile: var(--white); --rule: #d2d2d7; }

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

html {
  -webkit-text-size-adjust: 100%;
  /* No grey flash on tap: every control has its own pressed look. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  background: var(--bg);
}
html.paper { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  background: var(--bg);
  color: var(--fg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Taps fire at once (no wait for a double-tap zoom). */
a, button, summary { touch-action: manipulation; }
/* A control's label is not text to select on a long press. */
.btn, .pill, .playpause, .menu > summary, .yt-play {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
strong, b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--lime); color: #000; padding: .6rem 1rem; border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.ico { display: block; flex: none; }
.ico svg { display: block; width: 100%; height: 100%; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── The bar on top ─────────────────────────────────────────────────────── */

.gnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--snow);
}
.paper .gnav {
  background: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  color: var(--ink);
}
.gnav-in {
  position: relative;
  max-width: var(--wide); margin: 0 auto; height: var(--nav-h);
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: flex; align-items: center; gap: 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem; margin-right: auto;
  min-width: 0;
  font-weight: 600; font-size: .9375rem; letter-spacing: -0.01em;
}
.brand img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }
.gnav-links a { font-size: .78rem; opacity: .82; transition: opacity 150ms ease; white-space: nowrap; }
.gnav-links a[aria-current="page"] { opacity: 1; }
.pill {
  flex: none;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: var(--lime); color: #000; padding: .38rem .85rem; border-radius: 980px;
  transition: background-color 150ms ease, var(--press);
}
.pill:active { transform: scale(0.97); }
.paper .pill { background: var(--ink); color: #fff; }

/* Phones: the links fold into a menu. */
.menu { display: none; flex: none; }
.menu > summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; margin-right: -10px;
  display: grid; place-items: center; border-radius: 10px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary i {
  position: relative; display: block; width: 18px; height: 1.6px;
  background: currentColor; border-radius: 2px; transition: background-color 200ms var(--ease-out);
}
.menu > summary i::before, .menu > summary i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.6px;
  background: currentColor; border-radius: 2px; transition: transform 200ms var(--ease-out);
}
.menu > summary i::before { transform: translateY(-5.5px); }
.menu > summary i::after { transform: translateY(5.5px); }
.menu[open] > summary i { background: transparent; }
.menu[open] > summary i::before { transform: rotate(45deg); }
.menu[open] > summary i::after { transform: rotate(-45deg); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem var(--gutter-r) 2rem var(--gutter-l);
  background: var(--black);
  display: grid; gap: .15rem; align-content: start;
}
.paper .menu-panel { background: var(--white); }
.menu-panel a {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  padding: .45rem 0;
}
@media (max-width: 760px) {
  .gnav-links { display: none; }
  .menu { display: block; }
}

/* ── Type ───────────────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 .6rem;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--link);
}
.display {
  margin: 0;
  font-size: clamp(2.9rem, 1.2rem + 6.4vw, 5.75rem);
  /* Room for the y of "Every" over the line below: tighter and the two
     lines touch. */
  line-height: 1.1; letter-spacing: -0.045em; font-weight: 700;
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-size: clamp(2.375rem, 1.45rem + 3.9vw, 4.25rem);
  line-height: 1.08; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance;
}
.h3 {
  margin: 0;
  font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem);
  line-height: 1.2; letter-spacing: -0.02em; font-weight: 600;
  text-wrap: balance;
}
.lede {
  margin: 1.1rem 0 0;
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem);
  line-height: 1.5; letter-spacing: -0.012em; font-weight: 400;
  color: var(--fg-2);
  max-width: 40ch;
  text-wrap: pretty;
}
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.keep { white-space: nowrap; }
/* The lime word: full lime at its start, a touch greener at its end. */
.vivid {
  color: var(--lime);
  background: linear-gradient(100deg, #e8ff47 0%, #e2ff4a 45%, #bdf55a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
sup.fn { font-size: .55em; line-height: 0; vertical-align: super; margin-left: .08em; }
sup.fn a { color: var(--fg-2); }

/* ── Actions ────────────────────────────────────────────────────────────── */

.actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.75rem;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .72em 1.45em;
  border-radius: 980px; border: 0;
  font: 600 1.0625rem/1.2 var(--font); letter-spacing: -0.01em;
  white-space: nowrap;
  background: var(--lime); color: #000;
  transition: background-color 150ms ease, var(--press);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: scale(0.97); }
.is-light .btn, .is-mist .btn { background: var(--ink); color: #fff; }
.btn.is-soon {
  background: transparent; color: var(--fg); cursor: default;
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.btn.is-soon:active { transform: none; }
.more {
  color: var(--link); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  transition: opacity 150ms ease;
}
.more::after { content: "\00a0\203A"; }
.more:active { opacity: .6; }

/* ── Bands ──────────────────────────────────────────────────────────────── */

.band {
  background: var(--bg); color: var(--fg);
  padding-block: clamp(5rem, 11vw, 9.5rem);
}
.wrap {
  max-width: var(--wide); margin: 0 auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}

/* ── The stage: the before and after, drawn on a canvas ────────────────── */

/* One video holds both pictures (website/assets/media/hero.mp4): the
   enhanced 1920x1080 on top, the 480p original under it, so the two can
   never drift apart. The stills underneath are what shows before it plays,
   and without the script. */
.stage {
  --split: 50%;
  position: relative; margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
  transform: translateZ(0);
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}
@media (max-width: 699px) {
  .stage.is-tall-s { aspect-ratio: 4 / 3; }
}
.stage video, .stage .still, .stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.stage video { object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; }
.stage .still { object-fit: cover; z-index: 1; pointer-events: none; }
.stage .still.before { z-index: 2; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.stage canvas { z-index: 3; opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; }
.stage.is-drawn canvas { opacity: 1; }

/* The divider: a lime blade, thickest in the middle, sharp at both ends. */
.blade {
  position: absolute; z-index: 6; top: 0; bottom: 0; left: var(--split);
  width: 44px; margin-left: -22px;
  cursor: ew-resize; touch-action: none;
  filter: drop-shadow(0 0 2px rgba(232, 255, 71, 0.95)) drop-shadow(0 0 12px rgba(232, 255, 71, 0.5));
}
.blade i {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 4px; margin-left: -2px;
  background: linear-gradient(to bottom,
    rgba(232, 255, 71, 0.2) 0%, #e8ff47 12%, #f1ff8f 50%, #e8ff47 88%, rgba(232, 255, 71, 0.2) 100%);
  clip-path: polygon(50% 0, 100% 12%, 100% 88%, 50% 100%, 0 88%, 0 12%);
}
.blade:focus-visible { outline: none; }
.blade:focus-visible i { width: 6px; margin-left: -3px; }
@media (max-width: 699px) {
  .blade i { width: 3px; margin-left: -1.5px; }
}
.stage.is-lens .blade { display: none; }
.stage.is-lens .still.before { clip-path: none; }

/* The lens: the enhanced picture, closer, wherever it is. */
.lens {
  --r: 110px;
  position: absolute; z-index: 6; left: 0; top: 0;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--lime),
    0 0 22px 3px rgba(232, 255, 71, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  display: none;
  will-change: transform;
}
.stage.is-lens.is-drawn .lens { display: block; }

/* Words on a picture: white, with a soft shadow and no plate behind them,
   the way Topaz labels its before/afters. The top left says what the
   picture is; the bottom right carries the brand. */
.tag, .lens-tag, .mark {
  color: #fff; line-height: 1; white-space: nowrap; letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}
.tag {
  position: absolute; z-index: 7; top: clamp(13px, 2.1vw, 22px);
  font-size: clamp(.8125rem, .76rem + .25vw, .9375rem); font-weight: 500;
  transition: opacity 200ms ease;
}
.tag.before { left: clamp(15px, 2.3vw, 26px); }
.tag.after { right: clamp(15px, 2.3vw, 26px); }
.lens-tag {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 9px;
  font-size: .8125rem; font-weight: 600;
}

/* The brand's watermark, on one line at every size: "Enhanced by" small,
   light and dimmed, "VividAura" a size up and bold, the icon's lime
   sparkle after it where Topaz has its (R). It scales with the screen so
   it always fits the enhanced half. The app stamps the same mark on free
   exports. */
.mark {
  position: absolute; z-index: 7;
  right: clamp(12px, 2.3vw, 26px); bottom: clamp(11px, 2.1vw, 22px);
  display: inline-flex; align-items: baseline; gap: .3em;
  font-size: clamp(.75rem, 3.3vw, 1.375rem);
  transition: opacity 200ms ease;
}
.mark .by { font-size: .78em; font-weight: 300; letter-spacing: .01em; color: rgba(255, 255, 255, 0.72); }
.mark .nm { display: inline-flex; align-items: flex-start; font-weight: 700; letter-spacing: -0.015em; }
.mark svg {
  width: .38em; height: .38em; margin: -.08em 0 0 .08em; overflow: visible;
  color: var(--lime); filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, 0.4));
}
.stage.no-before .tag.before { opacity: 0; }
.stage.no-after .tag.after, .stage.no-after .mark { opacity: 0; }

/* Pause and play, bottom left (the bottom right is the brand's). */
.playpause {
  position: absolute; z-index: 8; left: clamp(10px, 1.6vw, 16px); bottom: clamp(10px, 1.6vw, 16px);
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(30, 30, 32, 0.6); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer;
  transition: var(--press);
}
.playpause:active { transform: scale(0.94); }
/* A finger needs a bigger target than a mouse. */
@media (pointer: coarse) {
  .playpause { width: 40px; height: 40px; }
}
.stage.is-playing .playpause, .stage.is-paused .playpause { display: grid; }
/* A browser that can't draw the video gets the stills, and no button. */
.stage.no-video .playpause { display: none; }
/* The icon is a block in a grid: an inline svg would sit on the text
   baseline and come out above the middle. */
.playpause > span { display: grid; place-items: center; }
.playpause svg { display: block; width: 14px; height: 14px; }
.playpause .i-play { display: none; }
.stage.is-paused .playpause .i-play { display: grid; }
.stage.is-paused .playpause .i-pause { display: none; }

/* The line of words under a stage: how to use it. */
.hint {
  margin: 1.1rem 0 0;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .875rem; letter-spacing: .005em; color: var(--fg-2);
  transition: opacity 300ms ease;
}
.hint .ico { width: 18px; height: 18px; color: var(--fg-2); }
/* Under the hero: where the clip came from, small and quiet. */
.note {
  margin: .5rem 0 0; text-align: center;
  font-size: .75rem; line-height: 1.4; letter-spacing: .01em; color: var(--fg-2); opacity: .8;
}
.hint .on-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint .on-touch { display: none; }
  .hint .on-mouse { display: inline; }
}
.hint.is-done { opacity: .5; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  background: var(--bg); color: var(--fg);
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
  overflow: hidden;
}
.hero .lede { max-width: 34ch; }
.hero-stage {
  position: relative;
  margin-top: clamp(2.25rem, 4.2vw, 3.25rem);
}
@media (min-width: 1000px) {
  .hero .lede { max-width: 46ch; }
}
/* No glow behind the picture: the clip is the one bold thing here. */
.hero-stage .stage { box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9); }

/* ── Facts under the compare ───────────────────────────────────────────── */

.facts {
  max-width: var(--wide); margin: clamp(4rem, 9vw, 6.5rem) auto 0;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.fact h3 { margin: 0 0 .35rem; font-size: 1.1875rem; letter-spacing: -0.015em; font-weight: 600; }
.fact p { margin: 0; color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
.fact .ico { width: 30px; height: 30px; color: var(--fg); margin-bottom: .9rem; }
.compare-band .stage-wrap { margin-top: clamp(2.75rem, 6vw, 4rem); }

/* ── Bento ──────────────────────────────────────────────────────────────── */

.bento {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile.span-4 { grid-column: span 4; }
  .tile.span-3 { grid-column: span 3; }
  .tile.span-2 { grid-column: span 2; }
}
.tile {
  background: var(--tile); color: var(--fg);
  border-radius: 28px;
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  display: flex; flex-direction: column; gap: .6rem;
  min-width: 0;
}
.tile .ico { width: 34px; height: 34px; color: var(--fg); margin-bottom: .5rem; }
.tile p { margin: 0; color: var(--fg-2); line-height: 1.55; }
.tile .big {
  margin: 0;
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem); line-height: .95; font-weight: 700;
  letter-spacing: -0.05em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tile.is-ink { background: var(--black); color: var(--snow); }
.tile.is-ink p { color: #a1a1a6; }
.tile.is-ink .big { color: var(--snow); }

/* ── The phone (around the editor screenshots) ─────────────────────────── */

.phone {
  --pw: min(74vw, 340px);
  position: relative;
  width: var(--pw);
  aspect-ratio: 9 / 20;
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .15);
  background:
    linear-gradient(150deg, #4a4a4e 0%, #202023 18%, #0c0c0e 52%, #26262a 86%, #4a4a4e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 calc(var(--pw) * .012) #0a0a0b,
    0 50px 90px -30px rgba(0, 0, 0, 0.75);
  max-width: 100%;
}
.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--pw) * .12);
  overflow: hidden; background: #080808;
  isolation: isolate;
  transform: translateZ(0);
}
.screen::after {
  content: ""; position: absolute; z-index: 9;
  top: calc(var(--pw) * .028); left: 50%;
  width: calc(var(--pw) * .034); height: calc(var(--pw) * .034);
  margin-left: calc(var(--pw) * -.017);
  border-radius: 50%; background: #050505;
  box-shadow: inset 0 0 0 1px #1c1c1f;
  pointer-events: none;
}
.screen > img { width: 100%; height: 100%; object-fit: cover; }

/* ── Editor gallery ─────────────────────────────────────────────────────── */

.gallery {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(72vw, 300px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  justify-content: start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter-r) 1.5rem var(--gutter-l);
  scroll-padding-left: var(--gutter-l);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline-offset: -3px; }
@media (min-width: 1000px) {
  .gallery { grid-auto-columns: 300px; justify-content: center; overflow: visible; }
}
.shot { margin: 0; scroll-snap-align: start; }
.shot .phone { --pw: min(72vw, 300px); }
.shot figcaption {
  margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; color: var(--fg-2); max-width: 30ch;
}
.shot figcaption strong { display: block; color: var(--fg); font-size: 1.1875rem; letter-spacing: -0.015em; margin-bottom: .15rem; }

.features {
  list-style: none; margin: clamp(3.5rem, 8vw, 6rem) 0 0; padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 2rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .features { gap: 2.25rem 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.features li { min-width: 0; }
.features .ico { width: 28px; height: 28px; color: var(--fg); margin-bottom: .8rem; }
.features h3 { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.features p { margin: 0; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }

/* ── Pro ────────────────────────────────────────────────────────────────── */

.plans {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px; margin-left: auto; margin-right: auto;
  text-align: left;
}
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
  border-radius: 28px; padding: clamp(1.9rem, 4vw, 2.75rem);
  background: var(--tile); color: var(--fg);
  display: flex; flex-direction: column;
}
.plan h3 { margin: 0; font-size: 1.625rem; letter-spacing: -0.025em; font-weight: 600; }
.plan .sub { margin: .25rem 0 1.5rem; color: var(--fg-2); text-wrap: pretty; }
.plan li span { text-wrap: pretty; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start; line-height: 1.45; }
.plan li svg { width: 22px; height: 22px; margin-top: .05rem; }
.plan.is-pro { background: var(--black); color: var(--snow); }
.plan.is-pro .sub { color: #a1a1a6; }
.plan.is-pro li svg { color: var(--lime); }
.plan li .dim { color: var(--fg-2); }
.fine {
  max-width: 62ch; margin: 2rem auto 0;
  font-size: .875rem; line-height: 1.55; color: var(--fg-2);
}

/* ── From the blog (landing) ───────────────────────────────────────────── */

.cards {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  text-align: left;
}
.card {
  display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  background: var(--tile); color: var(--fg);
  transition: background-color 150ms ease, var(--press);
}
.card:active { transform: scale(0.985); }
.card .cover { aspect-ratio: 16 / 9; background: #0b0b0c; overflow: hidden; }
/* A post with no cover picture: the app's mark on the dark. */
.card .cover:empty {
  background:
    url("img/icon-192.png") center / 56px no-repeat,
    radial-gradient(120% 120% at 30% 20%, #2a2a2d 0%, #0b0b0c 70%);
}
.card .cover img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: .45rem; }
.card .when { margin: 0; font-size: .8125rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.card .card-title { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.card p { margin: 0; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }
.cards-foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: center; }

/* ── Get it ─────────────────────────────────────────────────────────────── */

.get { text-align: center; }
.get .app-icon {
  width: clamp(84px, 12vw, 112px); height: auto; margin: 0 auto 1.75rem;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 50px -18px rgba(0, 0, 0, 0.9);
}
.get .meta { margin: 1rem 0 0; color: var(--fg-2); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot {
  --bg: var(--snow); --fg: var(--ink); --fg-2: #6e6e73; --link: var(--olive); --rule: #d2d2d7;
  background: var(--bg); color: var(--fg-2);
  font-size: .78rem; line-height: 1.5; letter-spacing: .01em;
  padding-block: 2.25rem 2.5rem;
}
/* Small links get a finger-sized target on touch screens. */
@media (pointer: coarse) {
  .foot .dir ul { gap: 0; }
  .foot .dir a { display: inline-block; padding: .4rem 0; }
}
.foot .wrap > * + * { margin-top: 1.25rem; }
.foot .notes { margin: 0; padding: 0 0 1.25rem; list-style: none; border-bottom: 1px solid var(--rule); }
.foot .notes li { margin: 0 0 .6rem; }
.foot .notes li:last-child { margin-bottom: 0; }
.foot .dir {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.foot h2 { margin: 0 0 .55rem; font-size: .78rem; font-weight: 600; color: var(--fg); letter-spacing: 0; }
.foot .dir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { color: var(--fg-2); }
.foot .legal p { margin: 0; }

/* ── Documents: policies, help, deleting data, the blog ────────────────── */

.doc {
  max-width: calc(var(--text) + 40px); margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 5rem) var(--gutter-r) clamp(4rem, 8vw, 6rem) var(--gutter-l);
}
.doc h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem); line-height: 1.1;
  letter-spacing: -0.035em; font-weight: 600; text-wrap: balance;
}
.doc .meta { margin: .75rem 0 2.75rem; color: var(--fg-2); }
.doc h2 { margin: 2.6rem 0 .6rem; font-size: 1.3125rem; letter-spacing: -0.02em; font-weight: 600; line-height: 1.3; }
.doc h3 { margin: 2rem 0 .5rem; font-size: 1.125rem; letter-spacing: -0.015em; font-weight: 600; line-height: 1.35; }
.doc p, .doc li { line-height: 1.65; }
.doc p { margin: 0 0 1rem; }
.doc ul, .doc ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.doc li { margin: .35rem 0; }
/* Links inside running text keep their underline: there they are words
   among words, and colour alone does not say "link". */
.doc p a, .doc li a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc .draft {
  background: var(--snow); border-radius: 14px; padding: 1rem 1.2rem;
  color: var(--fg-2); font-size: .9375rem;
}
.doc .also { display: flex; flex-wrap: wrap; gap: .6rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.doc .also li { margin: 0; }
.doc .also a {
  display: inline-block; color: var(--fg); text-decoration: none;
  background: var(--snow); border-radius: 980px; padding: .5rem .95rem; font-size: .9375rem;
  transition: background-color 150ms ease;
}
.doc .also a:active, .topics a:active { background: #e8e8ed; }

/* Support */
.topics {
  display: grid; gap: 14px; margin: 0 0 3rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.topics a {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.15rem 1.1rem; border-radius: 18px;
  background: var(--snow); color: var(--fg);
  font-weight: 600; font-size: .9375rem; line-height: 1.3;
  transition: background-color 150ms ease;
}
.topics svg { width: 28px; height: 28px; color: var(--fg); }
.faq h2 { margin-top: 2.75rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 18px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.2rem; color: #424245; }
.faq details > div p { margin: 0; }
.mailbox {
  margin: 3.25rem 0 0; padding: clamp(1.6rem, 4vw, 2.2rem);
  border-radius: 24px; background: var(--black); color: var(--snow);
}
.mailbox h2 { margin: 0 0 .5rem; color: var(--snow); }
.mailbox p { margin: 0 0 1rem; color: #a1a1a6; }
.mailbox .addr { margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.mailbox .addr a { color: var(--lime); text-decoration: none; overflow-wrap: anywhere; }

.lost { text-align: center; padding-block: clamp(5rem, 14vw, 10rem); }
.lost .code { margin: 0; font-size: clamp(5rem, 3rem + 10vw, 10rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--fg); }

/* The blog's front page */
.blog-head { text-align: center; padding: clamp(3rem, 8vw, 5.5rem) var(--gutter-r) 0 var(--gutter-l); }
.blog-head .lede { margin-left: auto; margin-right: auto; }
.blog-list { padding-top: 0; }
.blog-list .cards { margin-top: clamp(2.5rem, 6vw, 4rem); }
.is-light .card { background: var(--snow); }

/* A post */
.post-head { max-width: calc(var(--text) + 40px); margin: 0 auto; padding: clamp(2.75rem, 7vw, 5rem) var(--gutter-r) 0 var(--gutter-l); }
.post-head .when { margin: 0 0 .9rem; color: var(--fg-2); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.post-head h1 { margin: 0; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.post-head .lede { max-width: none; }
.byline { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--fg-2); }
.byline a { color: var(--fg); font-weight: 600; }
.post-cover { max-width: 1080px; margin: clamp(2rem, 5vw, 3rem) auto 0; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.post-cover img { width: 100%; height: auto; border-radius: clamp(16px, 2.2vw, 26px); }
.prose { padding-top: clamp(2rem, 5vw, 3rem); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.0625rem; }
.prose blockquote {
  margin: 1.75rem 0; padding: 0 0 0 1.2rem; border-left: 3px solid var(--lime-lo);
  font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.015em; color: var(--fg);
}
.prose blockquote p { margin: 0; }
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em;
  background: var(--snow); padding: .12em .38em; border-radius: 6px;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.prose figure { margin: 2rem 0; }
.prose figure img { width: 100%; height: auto; border-radius: 16px; }
.prose figcaption { margin-top: .7rem; font-size: .875rem; color: var(--fg-2); text-align: center; }
.prose figcaption a, .yt figcaption a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose .stage { border-radius: 16px; }
.prose .stage-figure .hint { color: var(--fg-2); }
.post-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }

/* A table in a post: hairlines, no boxes; it scrolls sideways on a phone
   rather than squeezing its columns. */
.prose .table {
  margin: 1.75rem 0; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.prose .table:focus-visible { outline-offset: 2px; }
.prose table {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.prose th, .prose td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose thead th, .prose thead td {
  font-size: .8125rem; font-weight: 600; color: var(--fg-2);
  border-bottom-color: var(--fg); white-space: nowrap;
}
.prose tbody td:first-child { font-weight: 600; }
.prose th.c, .prose td.c { text-align: center; }
.prose th.r, .prose td.r { text-align: right; }
.prose td a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Who wrote it, under every post: the maker of the app says so. */
.author {
  margin: 3rem 0 0; padding: clamp(1.4rem, 3.5vw, 1.9rem);
  border-radius: 22px; background: var(--snow);
}
.author p { margin: 0 0 .7rem; font-size: .9375rem; line-height: 1.6; color: #424245; }
.author .author-name { font-size: 1.0625rem; font-weight: 600; color: var(--fg); margin-bottom: .45rem; }
.author p:last-child { margin-bottom: 0; }
.author .author-more { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.author .author-more a { text-decoration: none; }
.author + .post-foot { margin-top: 2rem; }

/* A YouTube video in a post: nothing loads from YouTube until it is tapped. */
.yt { margin: 2rem 0; }
.yt-play {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 20%, #2a2a2d 0%, #0b0b0c 70%);
  color: #fff; font: inherit; text-align: left;
}
.yt-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-play .yt-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.yt-play .yt-btn {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--lime); color: #000; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: background-color 150ms ease, var(--press);
}
.yt-play:active .yt-btn { transform: scale(0.95); }
.yt-play .yt-btn svg { display: block; width: 28px; height: 28px; }
.yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; background: #000; }
.yt figcaption { margin-top: .7rem; font-size: .875rem; color: var(--fg-2); text-align: center; }

/* ── Hover, only where there is a pointer that hovers ──────────────────── */

/* Colour and opacity only: a card or a button that grows or lifts under a
   passing cursor is motion nobody asked for. */
@media (hover: hover) and (pointer: fine) {
  .gnav-links a:hover { opacity: 1; }
  .pill:hover { background: var(--lime-hi); }
  .paper .pill:hover { background: #000; }
  .btn:hover { background: var(--lime-hi); }
  .is-light .btn:hover, .is-mist .btn:hover { background: #000; }
  .btn.is-soon:hover { background: transparent; }
  .more:hover { opacity: .78; }
  .foot a:hover { color: var(--fg); }
  .doc .also a:hover, .topics a:hover { background: #e8e8ed; }
  .card:hover { background: #ebebef; }
  .is-light .card:hover { background: #ebebef; }
  .yt-play:hover .yt-btn { background: var(--lime-hi); }
  .menu-panel a:hover { opacity: .75; }
}

/* ── Preferences ───────────────────────────────────────────────────────── */

/* Less motion: nothing moves on its own (site.js stops the video, the
   lens and the sweep) and nothing slides; fades and colour stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .pill:active, .playpause:active, .card:active, .yt-play:active .yt-btn { transform: none; }
}
/* Less transparency: solid bars and buttons instead of frosted glass. */
@media (prefers-reduced-transparency: reduce) {
  .gnav { background: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .paper .gnav { background: var(--white); }
  .playpause { background: #1e1e20; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: the quiet greys get louder. */
@media (prefers-contrast: more) {
  :root, .is-dark { --fg-2: #d2d2d7; --rule: rgba(255, 255, 255, 0.4); }
  .is-light, .is-mist, .foot { --fg-2: #3a3a3c; --rule: #86868b; }
  .note { opacity: 1; }
}