/* Generated by scripts/build-legal.mjs — edit tokens.css or src/legal-page.css. */
:root {
  color-scheme: light;

  --color-transparent: transparent;

  /* Growing Years theme swatches. The values mirror the five mobile themes. */
  --theme-candy-a: oklch(79.5% 0.0949 188.6);
  --theme-candy-b: oklch(78.38% 0.142 355.68);
  --theme-candy-c: oklch(96.85% 0.0093 52.1);
  --theme-bloom-a: oklch(62.94% 0.2001 11.64);
  --theme-bloom-b: oklch(50.17% 0.1645 288.29);
  --theme-bloom-c: oklch(96.64% 0.0096 72.66);
  --theme-lime-a: oklch(89.8% 0.1965 126.71);
  --theme-lime-b: oklch(74.13% 0.15 295.21);
  --theme-lime-c: oklch(16.89% 0.005 286.18);
  --theme-jade-a: oklch(53.82% 0.1152 159.72);
  --theme-jade-b: oklch(60.58% 0.1306 159.27);
  --theme-jade-c: oklch(98.51% 0.005 159.72);
  --theme-heart-a: oklch(62.89% 0.1761 353.49);
  --theme-heart-b: oklch(74.29% 0.1253 183.62);
  --theme-heart-c: oklch(30.27% 0.0574 295.72);

  /* The mobile app uses the kit's default Roboto Flex typography preset. */
  --font-display: "Roboto Flex", system-ui, sans-serif;
  --font-body: "Roboto Flex", system-ui, sans-serif;
  --font-label: "Roboto Flex", system-ui, sans-serif;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;
  --text-display: clamp(3rem, 4.5vw + 0.5rem, 5rem);
  --text-display-small: clamp(2.25rem, 3vw + 0.5rem, 3.75rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --rule-hair: 1px;
  --rule-heavy: 2px;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --page-max: 84rem;
  --page-gutter: clamp(1rem, 4vw, 4rem);
  --section-gap: clamp(4rem, 7vw, 6.5rem);
  --nav-height: 4rem;
  --header-stack: var(--nav-height);

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

:root,
:root[data-theme='candy-pop'] {
  color-scheme: light;
  --color-canvas: oklch(98.46% 0.005 48.69);
  --color-surface: oklch(96.85% 0.0093 52.1);
  --color-surface-raised: oklch(94.54% 0.017 50.43);
  --color-surface-highest: oklch(92.37% 0.0231 52.68);
  --color-ink: oklch(22.52% 0.0051 39.38);
  --color-ink-muted: oklch(47.35% 0.0255 51.14);
  --color-ink-soft: oklch(54.63% 0.0354 51.13);
  --color-rule: oklch(84% 0.018 51);
  --color-primary: oklch(79.5% 0.0949 188.6);
  --color-primary-soft: oklch(92.07% 0.0494 190.05);
  --color-primary-ink: oklch(22.52% 0.0051 39.38);
  --color-primary-soft-ink: oklch(22.52% 0.0051 39.38);
  --color-primary-strong: oklch(42% 0.09 188.6);
  --color-secondary: oklch(78.38% 0.142 355.68);
  --color-secondary-soft: oklch(88.69% 0.0672 354.83);
  --color-secondary-ink: oklch(22.52% 0.0051 39.38);
  --color-focus: oklch(38% 0.12 188.6);
  --color-focus-on-primary: oklch(22.52% 0.0051 39.38);
  --color-star: oklch(55% 0.13 86);
  --color-shadow: oklch(22.52% 0.018 39.38 / 0.15);
  --color-shadow-soft: oklch(22.52% 0.018 39.38 / 0.08);
}

:root[data-theme='tender-bloom'] {
  color-scheme: light;
  --color-canvas: oklch(98.01% 0.0074 80.72);
  --color-surface: oklch(96.64% 0.0096 72.66);
  --color-surface-raised: oklch(95.6% 0.0156 86.43);
  --color-surface-highest: oklch(93.63% 0.0218 83.26);
  --color-ink: oklch(27.85% 0.0153 84.54);
  --color-ink-muted: oklch(48.56% 0.0226 79.99);
  --color-ink-soft: oklch(56% 0.023 80);
  --color-rule: oklch(82% 0.018 82);
  --color-primary: oklch(62.94% 0.2001 11.64);
  --color-primary-soft: oklch(92.03% 0.0333 1.43);
  --color-primary-ink: oklch(20% 0.014 84.54);
  --color-primary-soft-ink: oklch(27.85% 0.0153 84.54);
  --color-primary-strong: oklch(62.94% 0.2001 11.64);
  --color-secondary: oklch(50.17% 0.1645 288.29);
  --color-secondary-soft: oklch(86.21% 0.0402 295.03);
  --color-secondary-ink: oklch(98.01% 0.0074 80.72);
  --color-focus: oklch(43% 0.17 288.29);
  --color-focus-on-primary: oklch(20% 0.014 84.54);
  --color-star: oklch(62.94% 0.2001 11.64);
  --color-shadow: oklch(27.85% 0.018 84.54 / 0.15);
  --color-shadow-soft: oklch(27.85% 0.018 84.54 / 0.08);
}

:root[data-theme='dark-lime'] {
  color-scheme: dark;
  --color-canvas: oklch(11.49% 0.005 126.71);
  --color-surface: oklch(16.89% 0.005 286.18);
  --color-surface-raised: oklch(21.38% 0.005 286.23);
  --color-surface-highest: oklch(25.7% 0.005 286.14);
  --color-ink: oklch(95.24% 0.005 126.71);
  --color-ink-muted: oklch(84.27% 0.005 286.34);
  --color-ink-soft: oklch(72% 0.008 286.34);
  --color-rule: oklch(32% 0.008 286.14);
  --color-primary: oklch(89.8% 0.1965 126.71);
  --color-primary-soft: oklch(57.74% 0.1216 126.37);
  --color-primary-ink: oklch(13% 0.008 126.71);
  --color-primary-soft-ink: oklch(13% 0.008 126.71);
  --color-primary-strong: oklch(89.8% 0.1965 126.71);
  --color-secondary: oklch(74.13% 0.15 295.21);
  --color-secondary-soft: oklch(27.42% 0.0568 295.8);
  --color-secondary-ink: oklch(13% 0.008 126.71);
  --color-focus: oklch(89.8% 0.1965 126.71);
  --color-focus-on-primary: oklch(11.49% 0.005 126.71);
  --color-star: oklch(89.8% 0.1965 126.71);
  --color-shadow: oklch(5% 0.008 286 / 0.42);
  --color-shadow-soft: oklch(5% 0.008 286 / 0.24);
}

:root[data-theme='light-jade'] {
  color-scheme: light;
  --color-canvas: oklch(96.79% 0.005 159.72);
  --color-surface: oklch(98.51% 0.005 159.72);
  --color-surface-raised: oklch(92.95% 0.005 159.72);
  --color-surface-highest: oklch(89.91% 0.005 159.72);
  --color-ink: oklch(27.9% 0.005 159.72);
  --color-ink-muted: oklch(46.7% 0.0091 159.72);
  --color-ink-soft: oklch(55% 0.012 159.72);
  --color-rule: oklch(80% 0.009 159.72);
  --color-primary: oklch(53.82% 0.1152 159.72);
  --color-primary-soft: oklch(88% 0.03 159.72);
  --color-primary-ink: oklch(98.51% 0.005 159.72);
  --color-primary-soft-ink: oklch(27.9% 0.005 159.72);
  --color-primary-strong: oklch(46% 0.12 159.72);
  --color-secondary: oklch(60.58% 0.1306 159.27);
  --color-secondary-soft: oklch(91% 0.025 159.27);
  --color-secondary-ink: oklch(18% 0.02 159.27);
  --color-focus: oklch(42% 0.14 159.72);
  --color-focus-on-primary: oklch(98.51% 0.005 159.72);
  --color-star: oklch(53.82% 0.1152 159.72);
  --color-shadow: oklch(27.9% 0.012 159.72 / 0.15);
  --color-shadow-soft: oklch(27.9% 0.012 159.72 / 0.08);
}

:root[data-theme='purple-heart'] {
  color-scheme: dark;
  --color-canvas: oklch(25.55% 0.054 295);
  --color-surface: oklch(30.27% 0.0574 295.72);
  --color-surface-raised: oklch(33.7% 0.0811 295.45);
  --color-surface-highest: oklch(39.26% 0.0977 294.77);
  --color-ink: oklch(94.05% 0.0161 286.09);
  --color-ink-muted: oklch(79.66% 0.0732 287.25);
  --color-ink-soft: oklch(70% 0.06 287.25);
  --color-rule: oklch(47% 0.08 295.2);
  --color-primary: oklch(62.89% 0.1761 353.49);
  --color-primary-soft: oklch(41.09% 0.1089 352.67);
  --color-primary-ink: oklch(15% 0.025 295);
  --color-primary-soft-ink: oklch(94.05% 0.0161 286.09);
  --color-primary-strong: oklch(72% 0.16 353.49);
  --color-secondary: oklch(74.29% 0.1253 183.62);
  --color-secondary-soft: oklch(46.11% 0.0825 182.29);
  --color-secondary-ink: oklch(15% 0.025 295);
  --color-focus: oklch(82% 0.14 183.62);
  --color-focus-on-primary: oklch(15% 0.025 295);
  --color-star: oklch(74.29% 0.1253 183.62);
  --color-shadow: oklch(12% 0.035 295 / 0.42);
  --color-shadow-soft: oklch(12% 0.035 295 / 0.24);
}

:root {
  --color-error: oklch(56% 0.2 25);
  --shadow-product: 0 1.5rem 4rem -2.5rem var(--color-shadow);
  --shadow-soft: 0 1rem 2.25rem -1.75rem var(--color-shadow-soft);
}

/**
 * Styles for the standalone legal pages.
 *
 * These pages ship no JavaScript, so this is the whole presentation layer. The
 * build prepends the shared token blocks from tokens.css, which is why every
 * value below is a `var(--…)` rather than a literal: the pages stay in step
 * with the app's palette without importing the app's bundle.
 *
 * Typography is tuned for long-form reading rather than for the marketing page:
 * a single measure-limited column, generous leading, and headings that stay
 * legible on a phone.
 */

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

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

body {
  min-width: 20rem;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-optical-sizing: auto;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

:is(a, summary):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 10;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-canvas);
  transform: translateY(calc(-100% - var(--space-2xl)));
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header ------------------------------------------------------------------ */

.legal-header {
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background: var(--color-canvas);
}

.legal-header__inner {
  display: flex;
  width: min(100%, var(--page-max));
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter);
}

.legal-header__brand {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Language switch. A plain link, so it works with scripting disabled. */
.legal-lang {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
}

.legal-lang__current {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-ink);
}

.legal-lang a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-xs);
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-strong);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

.legal-lang a:hover {
  color: var(--color-primary-strong);
}

/* Document ---------------------------------------------------------------- */

.legal-main {
  padding-block: var(--space-xl) var(--space-3xl);
}

.legal-article {
  width: min(100%, 44rem);
  min-width: 0;
  margin-inline: auto;
  overflow-wrap: anywhere;
  padding-inline: var(--page-gutter);
}

.legal-article h1 {
  margin-block: 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-block: 0 var(--space-lg);
  padding-block-end: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.legal-meta div {
  display: flex;
  gap: var(--space-2xs);
}

.legal-meta dt::after {
  content: ':';
}

.legal-meta dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 600;
}

.legal-toc {
  margin-block-end: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legal-toc h2 {
  margin-block: 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.legal-toc ol {
  margin: 0;
  padding-inline-start: var(--space-lg);
  font-size: var(--text-sm);
}

.legal-toc li {
  margin-block: var(--space-3xs);
}

.legal-toc a {
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 0.2em;
}

.legal-toc a:hover {
  text-decoration-color: var(--color-primary-strong);
}

.legal-intro {
  margin-block-end: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-md);
}

.legal-section {
  margin-block-start: var(--space-xl);
  scroll-margin-top: var(--space-lg);
}

.legal-section h2 {
  margin-block: 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.legal-section :is(p, ul, ol) {
  margin-block: 0 var(--space-sm);
}

.legal-section ul,
.legal-section ol {
  padding-inline-start: var(--space-lg);
}

.legal-section li {
  margin-block: var(--space-2xs);
}

.legal-section a {
  text-decoration: underline;
  text-decoration-color: var(--color-primary-strong);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

.legal-section a:hover {
  color: var(--color-primary-strong);
}

/* The operating-entity block that closes each document. */
.legal-entity {
  margin-block-start: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-inline-start: var(--rule-heavy) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1.7;
}

@media (min-width: 40rem) {
  .legal-article h1 {
    font-size: var(--text-3xl, var(--text-2xl));
  }

  .legal-main {
    padding-block-start: var(--space-2xl);
  }
}