/* GENERATED from DESIGN.md by scripts/tokens.ts. Do not edit; run `pnpm tokens`. */

:root,
[data-theme="light"] {
  color-scheme: light;
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --background: #fff8f2;
  --foreground: #2b1810;
  --surface: #ffffff;
  --surface-foreground: #2b1810;
  --surface-secondary: #fbefe4;
  --surface-tertiary: #f3e4d6;
  --overlay: #ffffff;
  --overlay-foreground: #2b1810;
  --muted: #6e5a4e;
  --default: #f3e4d6;
  --default-foreground: #2b1810;
  --accent: #c2410c;
  --accent-foreground: #ffffff;
  --field-background: #ffffff;
  --field-foreground: #2b1810;
  --field-border: #8f7b6e;
  --success: #17703a;
  --success-foreground: #ffffff;
  --warning: #8f4b00;
  --warning-foreground: #ffffff;
  --danger: #c4122f;
  --danger-foreground: #ffffff;
  --border: #e6d5c5;
  --separator: #f0e3d6;
  --focus: #b23a0a;
  --link: #b23a0a;
  --bar-shadow: #2a1f1826;
  --celebration: #ffb020;
  --celebration-foreground: #2b1608;
  --radius: 16px;
  --field-radius: 12px;
  --field-border-width: 1px;
  --surface-secondary-foreground: var(--surface-foreground);
  --surface-tertiary-foreground: var(--surface-foreground);
  --field-placeholder: var(--muted);
  --segment: var(--surface);
  --segment-foreground: var(--foreground);
  --backdrop: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background: #17100c;
    --foreground: #fbefe6;
    --surface: #211813;
    --surface-foreground: #fbefe6;
    --surface-secondary: #2b2019;
    --surface-tertiary: #352920;
    --overlay: #2b2019;
    --overlay-foreground: #fbefe6;
    --muted: #b8a598;
    --default: #3a2d24;
    --default-foreground: #fbefe6;
    --accent: #ff8a4c;
    --accent-foreground: #2a0e02;
    --field-background: #211813;
    --field-foreground: #fbefe6;
    --field-border: #7a6859;
    --success: #4ade80;
    --success-foreground: #06210f;
    --warning: #fbbf24;
    --warning-foreground: #2b1700;
    --danger: #ff7a8c;
    --danger-foreground: #2b0008;
    --border: #3a2d24;
    --separator: #2b2019;
    --focus: #ffa06b;
    --link: #ffa06b;
    --bar-shadow: #00000000;
    --celebration: #ffc53d;
    --celebration-foreground: #2b1608;
    --radius: 16px;
    --field-radius: 12px;
    --field-border-width: 1px;
    --surface-secondary-foreground: var(--surface-foreground);
    --surface-tertiary-foreground: var(--surface-foreground);
    --field-placeholder: var(--muted);
    --segment: var(--surface-tertiary);
    --segment-foreground: var(--foreground);
    --backdrop: rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #17100c;
  --foreground: #fbefe6;
  --surface: #211813;
  --surface-foreground: #fbefe6;
  --surface-secondary: #2b2019;
  --surface-tertiary: #352920;
  --overlay: #2b2019;
  --overlay-foreground: #fbefe6;
  --muted: #b8a598;
  --default: #3a2d24;
  --default-foreground: #fbefe6;
  --accent: #ff8a4c;
  --accent-foreground: #2a0e02;
  --field-background: #211813;
  --field-foreground: #fbefe6;
  --field-border: #7a6859;
  --success: #4ade80;
  --success-foreground: #06210f;
  --warning: #fbbf24;
  --warning-foreground: #2b1700;
  --danger: #ff7a8c;
  --danger-foreground: #2b0008;
  --border: #3a2d24;
  --separator: #2b2019;
  --focus: #ffa06b;
  --link: #ffa06b;
  --bar-shadow: #00000000;
  --celebration: #ffc53d;
  --celebration-foreground: #2b1608;
  --radius: 16px;
  --field-radius: 12px;
  --field-border-width: 1px;
  --surface-secondary-foreground: var(--surface-foreground);
  --surface-tertiary-foreground: var(--surface-foreground);
  --field-placeholder: var(--muted);
  --segment: var(--surface-tertiary);
  --segment-foreground: var(--foreground);
  --backdrop: rgba(0, 0, 0, 0.5);
}

/* The site's own rules. Colors, radius and the font come only from the token variables in theme.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* One content width and one vertical rhythm for every page; nothing else sets a page-wide width. */
  --container: 72rem;
  --measure: 44rem;
  --gap-block: 2.5rem;
  --header-clearance: 5.5rem;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-clearance);
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

/* Only links inside running text are underlined; navigation, badges and buttons never are. */
main p a,
.article a,
.faq-answer a {
  text-decoration: underline;
}

.cta-band p a,
.hero .lead a {
  text-decoration: underline;
}

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

h1,
h2,
h3 {
  text-wrap: balance;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
}

p {
  margin: 0 0 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Every block of every page is separated by the same gap and by nothing else: blocks carry no margins or padding. */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  padding-top: var(--header-clearance);
  padding-bottom: var(--gap-block);
}

main > * {
  margin-block: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--radius);
  z-index: 10;
}

.skip-link:focus {
  top: 1rem;
}

.site-footer {
  border-top: 1px solid var(--separator);
  color: var(--surface-foreground);
}

.brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--foreground);
  text-decoration: none;
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lead {
  font-size: 1.25rem;
  color: var(--muted);
}

.article-back a {
  font-weight: 600;
}

.note {
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  color: var(--surface-foreground);
  border: 1px solid var(--separator);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.card-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.card h3 {
  font-size: 1.125rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.price {
  font-size: 1.75rem;
  font-weight: 700;
}

.period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

.check-list {
  margin: 1rem 0 0;
  padding-inline-start: 1.25rem;
}

/* Running text is the only thing narrower than the container, and it starts at the container's left edge. */
.article,
.article + p {
  max-width: var(--measure);
}

.card-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.article code {
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  background: var(--surface);
  color: var(--surface-foreground);
  border: 1px solid var(--separator);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
}

.article li {
  margin-bottom: 0.25rem;
}

.article li::marker {
  color: var(--muted);
}

.article h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
}

.article h3 {
  font-size: 1.125rem;
  margin-top: 1.5rem;
}

.article ul,
.article ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.5rem;
}

.card h2 {
  font-size: 1.125rem;
}

.action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.action-links > a {
  flex: 1 1 12rem;
  text-align: center;
  box-sizing: border-box;
}

.action-link-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius);
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
}

/* Text links in the footer keep a 24px minimum target (WCAG 2.2 target size). */
.article-back a,
.site-footer a {
  display: inline-block;
  min-height: 1.5rem;
  padding-block: 0.25rem;
  box-sizing: border-box;
}

/* Landing: brand, hero, captures, features, pricing, call to action. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.logo {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.logo-small {
  width: 2rem;
  height: 2rem;
}

.logo-tile {
  fill: var(--accent);
}

.logo-flame {
  fill: var(--accent-foreground);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 1rem;
}

.eyebrow strong {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 800;
}

h1 {
  letter-spacing: -0.03em;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Fills the first screen below the header: name, promise, install badge and a real capture, balanced. */
.hero-split {
  display: grid;
  gap: 2rem;
  align-items: center;
  min-height: calc(100svh - var(--header-clearance) - var(--gap-block));
}

.hero-text {
  max-width: 36rem;
}

.hero-text h1 {
  margin-bottom: 1rem;
}

.hero-text .lead {
  margin-bottom: 1.5rem;
}

.hero-aside {
  display: flex;
  justify-content: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Google's badge is shown as is: only its size is set, never its color, corners or shadow. */
.play-badge {
  display: inline-block;
  line-height: 0;
}

.play-badge img {
  display: block;
  height: 3.5rem;
  width: auto;
}

.hero .play-badge {
  margin-top: 0.25rem;
}

.hero .note {
  margin-top: 0.75rem;
}

.section-lead {
  color: var(--muted);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.section {
  padding: 0;
}

.feature-icon {
  margin-bottom: 0.75rem;
  border-radius: 0.875rem;
  background: var(--surface-secondary);
  color: var(--accent);
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: content-box;
  padding: 0.6rem;
  width: 1.5rem;
  height: 1.5rem;
}

.card p {
  color: var(--muted);
}

.card .price,
.card .price .period {
  color: var(--foreground);
}

.card .price .period {
  color: var(--muted);
}

.card .note {
  color: var(--accent);
  font-weight: 600;
}

.price-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.price-grid .check-list {
  color: var(--muted);
}

.price-grid h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.badge {
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.anchor {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

.card .per-month {
  margin: 0.25rem 0 0;
  color: var(--foreground);
  font-weight: 600;
}

.card .trial {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.price-details {
  margin-top: 2rem;
}

.price-details h3 {
  margin-bottom: 0.75rem;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.timeline span {
  color: var(--muted);
}

.cancel-anytime {
  margin: 1rem 0 0;
  font-weight: 600;
}

.price-cta {
  margin: 1.5rem 0 0;
}

.free-line {
  margin: 1rem 0 0;
  color: var(--muted);
  max-width: var(--measure);
}

.free-line strong {
  color: var(--foreground);
}

.more-link {
  margin: 1.5rem 0 0;
}

.fine-print {
  margin-top: 1rem;
  font-size: 0.875rem;
  max-width: var(--measure);
}

.cta-band {
  padding: 2.5rem 1.5rem;
  border-radius: calc(var(--radius) * 1.5);
  background: var(--accent);
  color: var(--accent-foreground);
}

.cta-band p {
  max-width: var(--measure);
}

.cta-band .play-badge img {
  border-radius: 0.5rem;
}

.cta-compact {
  padding: 1.5rem;
}

.cta-compact h2 {
  font-size: 1.5rem;
}

.cta-compact p {
  margin-bottom: 1rem;
}

.cta-band a:focus-visible {
  outline-color: var(--accent-foreground);
}

.site-footer .container {
  padding-block: 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.5rem 2rem;
  padding-bottom: 1.5rem;
}

.footer-brand {
  grid-column: 1 / -1;
}

.footer-title {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-rights {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--separator);
  font-size: 0.875rem;
}

@media (min-width: 56rem) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  :root {
    --gap-block: 4rem;
    --header-clearance: 6rem;
  }
}

/* Real app captures in a phone-shaped frame. */
.phone-frame {
  margin: 0;
  width: min(100%, 17rem);
}

.phone-body {
  padding: 0.5rem;
  border: 1px solid var(--separator);
  border-radius: 2rem;
  background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--foreground) 14%, transparent);
}

.phone-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
}

.phone-frame figcaption {
  margin-top: 0.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero-aside .phone-frame {
  width: min(100%, 19rem);
}

/* The hero scene: a painting in a rounded panel, the phone in front of its lower part. The painting always covers the
   panel (never stretched); on phones the panel sits behind the phone under the copy. */
.hero-scene {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.hero-scene-art {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: var(--surface-secondary);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--foreground) 14%, transparent);
}

.hero-scene-art picture,
.hero-scene-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-scene-art img {
  object-fit: cover;
  object-position: 55% 20%;
}

.hero-scene .phone-frame {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 52%;
  transform: translateX(-50%);
}

.hero-scene .phone-body {
  box-shadow: 0 24px 48px color-mix(in srgb, var(--foreground) 32%, transparent);
}

/* In the dark theme the painting is dimmed a little so it does not glare against the page. */
:root[data-theme="dark"] .hero-scene-art img {
  filter: brightness(0.78) saturate(0.95);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero-scene-art img {
    filter: brightness(0.78) saturate(0.95);
  }
}

@media (min-width: 56rem) {
  .hero-scene {
    padding-inline-start: 10%;
  }

  .hero-scene .phone-frame {
    left: 0;
    width: 50%;
    transform: none;
  }
}

.shot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 2rem;
}

/* Collapsible questions (native details/summary, no script). */
.faq-list {
  border-bottom: 1px solid var(--separator);
}

.faq-item {
  border-top: 1px solid var(--separator);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding-block: 0.875rem;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.faq-chevron {
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: 0.5rem;
  color: var(--muted);
}

.faq-answer p:last-child {
  margin-bottom: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-chevron {
    transition: transform 0.2s ease;
  }
}

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

@media (min-width: 48rem) {
  .shot-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

/* Section titles keep one rhythm below them; text blocks keep the gap of the paragraphs. */
.section > h2,
.cta-band > h2 {
  margin-bottom: 1rem;
}

.hero h1:last-child {
  margin-bottom: 0;
}

/*
 * The header, fixed in both states. At the very top of the page (/site-init.js sets data-at-top on <html>) it is the
 * full-width flat bar: transparent, no border, no shadow, its content on the shared container. Once scrolled (and
 * without script) it is a floating pill like the app's tab bar: translucent with a blur, separator border and the
 * `bar-shadow` token (none in dark). motion.css animates between the two; neither state changes the header's height.
 */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}

.site-nav {
  pointer-events: auto;
  width: min(calc(100% - 1rem), var(--container));
  margin: 0.5rem auto 0;
  border: 1px solid color-mix(in srgb, var(--separator) 70%, transparent);
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 4px 12px var(--bar-shadow);
}

html[data-at-top] .site-nav {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
  background-color: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
  box-shadow: 0 0 0 transparent;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.375rem;
}

/* The theme toggle shows the icon of the theme it switches to. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle .icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Captures follow the page theme: the dark one shows while the page is dark (data-theme, else the device). */
img[data-shot="dark"] {
  display: none;
}

:root[data-theme="dark"] img[data-shot="dark"] {
  display: block;
}

:root[data-theme="dark"] img[data-shot="light"] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun {
    display: block;
  }

  :root:not([data-theme]) .theme-toggle .icon-moon {
    display: none;
  }

  :root:not([data-theme]) [data-shot="dark"] {
    display: block;
  }

  :root:not([data-theme]) [data-shot="light"] {
    display: none;
  }
}

.nav-links,
.nav-tools,
.lang-menu ul,
.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links {
  display: none;
  gap: 0.25rem;
  margin-inline: auto 0.5rem;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.nav-links a,
.lang-menu a,
.nav-menu a {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  color: var(--foreground);
  font-weight: 600;
}

.nav-links a:hover,
.lang-menu a:hover,
.nav-menu a:hover,
.lang-menu summary:hover,
.nav-menu summary:hover {
  background: var(--surface-secondary);
}

.nav-links a[aria-current="page"],
.nav-menu a[aria-current="page"],
.lang-menu a[aria-current="page"] {
  background: var(--surface-secondary);
}

.lang-menu,
.nav-menu {
  position: relative;
}

.lang-menu summary,
.nav-menu summary {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding-inline: 0.625rem;
  border-radius: 999px;
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  list-style: none;
}

.lang-menu summary::-webkit-details-marker,
.nav-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary:focus-visible,
.nav-menu summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.lang-code {
  text-transform: uppercase;
}

.icon {
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lang-menu ul,
.nav-menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  min-width: 10rem;
  padding: 0.375rem;
  border: 1px solid var(--separator);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 18%, transparent);
}

.lang-menu-up ul {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

.site-footer .lang-menu {
  margin-top: 0.25rem;
  margin-inline-start: -0.625rem;
  width: max-content;
}

@media (min-width: 40rem) {
  .nav-menu {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  .nav-tools {
    margin-inline-start: 0;
  }
}

/* A phone frame wraps the whole captured screen (status and navigation bars included). */
.phone-body img {
  background: var(--surface);
}

/* Short app clips (rendered by the promo tool). The poster picture sits in the flow and is all that shows under reduced
   motion; the video lies over it and is shown only when motion is welcome, in the page's theme. */
.promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.promo .phone-frame {
  align-self: center;
  width: min(100%, 19rem);
}

.clip-body {
  position: relative;
}

.clip-video {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  object-fit: cover;
  border-radius: 1.5rem;
  background: var(--surface);
}

@media (prefers-reduced-motion: no-preference) {
  .clip-video[data-shot="light"] {
    display: block;
  }

  :root[data-theme="dark"] .clip-video[data-shot="light"] {
    display: none;
  }

  :root[data-theme="dark"] .clip-video[data-shot="dark"] {
    display: block;
  }
}

@media (prefers-reduced-motion: no-preference) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .clip-video[data-shot="light"] {
    display: none;
  }

  :root:not([data-theme]) .clip-video[data-shot="dark"] {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clip-video {
    display: none;
  }
}

/*
 * Landing motion. Rules of this file (the site gate enforces the first two):
 *  - everything that moves sits inside `prefers-reduced-motion: no-preference`; with reduce, nothing moves;
 *  - nothing loops (no infinite animation);
 *  - only a few things move, each once: the three app captures, the highlighted plan and the hero visual;
 *  - ease-out, 200-450ms; reveals run on the first entry only (site-init.js sets data-revealed and stops watching);
 *  - the content is visible without script: reveals start hidden only under html[data-js].
 * Rules and sources: DECISIONS D-125 (from the Dispatch template's landing-motion guideline).
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* The header settles between the flat top bar and the floating capsule. Transform-free box changes on a fixed
     element: no page layout moves. */
  .site-nav {
    transition:
      width 250ms var(--ease-out),
      margin-top 250ms var(--ease-out),
      border-radius 250ms var(--ease-out),
      background-color 250ms var(--ease-out),
      border-color 250ms var(--ease-out),
      box-shadow 250ms var(--ease-out),
      backdrop-filter 250ms var(--ease-out),
      -webkit-backdrop-filter 250ms var(--ease-out);
  }

  /* One-time reveals: the visuals come in from their side (the middle one rises), the highlighted plan eases up. */
  html[data-js] [data-reveal] {
    opacity: 0;
    transition:
      opacity 400ms var(--ease-out),
      transform 400ms var(--ease-out);
  }
  html[data-js] [data-reveal="start"] {
    transform: translateX(-24px);
  }
  html[data-js] [data-reveal="end"] {
    transform: translateX(24px);
  }
  html[data-js] [data-reveal="up"] {
    transform: translateY(16px);
  }
  html[data-js] [data-reveal="scale"] {
    transform: scale(0.97);
  }
  html[data-js] [data-reveal][data-revealed] {
    opacity: 1;
    transform: none;
  }

  /* The hero visual settles as it scrolls away: a small scale and tilt tied to the scroll position, where the
     browser supports scroll-driven animations (no effect elsewhere). */
  @supports (animation-timeline: view()) {
    @keyframes hero-visual-leave {
      to {
        transform: perspective(900px) rotateX(4deg) scale(0.94);
        opacity: 0.6;
      }
    }
    [data-hero-visual] {
      animation: hero-visual-leave linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 70%;
    }
  }
}

/*
 * Engraved art of the landing: one divider band (dunes) between sections. The hero carries no art: copy and phone on
 * the page background. The art is a mask; the ink comes from the product's tokens (accent mixed into foreground), so
 * there is no color here. Nothing moves. The source and license are in credits.txt (assets/root).
 */
:root {
  --engrave-ink: color-mix(in oklab, var(--accent) 35%, var(--foreground));
  --engrave-opacity: 0.9;
  --art-band: url("/art-band.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --engrave-ink: color-mix(in oklab, var(--accent) 20%, var(--foreground));
    --engrave-opacity: 0.75;
  }
}
:root[data-theme="dark"] {
  --engrave-ink: color-mix(in oklab, var(--accent) 20%, var(--foreground));
  --engrave-opacity: 0.75;
}

/* The divider between sections: a thin horizon of dunes. */
[data-engraving="band"] {
  height: clamp(4rem, 12vw, 9rem);
  pointer-events: none;
  background: var(--engrave-ink);
  opacity: var(--engrave-opacity);
  -webkit-mask: var(--art-band) center / cover no-repeat;
  mask: var(--art-band) center / cover no-repeat;
}

.footer-credits {
  margin: 0;
  padding-bottom: 1.5rem;
  font-size: 0.8125rem;
}
.footer-credits a {
  text-decoration: underline;
  text-underline-offset: 2px;
}