/* unsomnia.ai — GENERATED by scripts/build.mjs. Edit src/styles/* or unsomnia-ios/tokens/*.json, never this file. */
/* ═══ Shared design tokens (unsomnia-ios/tokens → tokens.css): Tier 1 primitives + Tier 2 colour semantics per sky ═══ */
:root {
  --color-plum-600: #5b2e6e;
  --color-plum-700: #3a2470;
  --color-plum-800: #2a1b4f;
  --color-plum-900: #1a1238;
  --color-plum-950: #0e0a22;
  --color-cream-100: #f1e6d6;
  --color-mist-300: #b8adcc;
  --color-ember-300: #e9a47a;
  --color-ember-400: #d97a8c;
  --color-dawn-rose: #c9708a;
  --color-dawn-amber: #f2b37e;
  --color-paper-0: #fffdf9;
  --color-paper-50: #fbf6ef;
  --color-paper-100: #f3ede4;
  --color-ink-500: #6b6384;
  --color-ink-900: #1e1838;
  --color-dusk-100: #efe8f6;
  --color-dusk-300: #a49db8;
  --color-dusk-800: #201a3d;
  --color-dusk-950: #141029;
  --color-dusk-975: #0d0a1e;
  --color-violet-300: #a98eff;
  --color-violet-350: #a48cff;
  --color-violet-500: #7c5cff;
  --color-violet-600: #6b4ef0;
  --color-gold-400: #e6b856;
  --color-gold-500: #d1a23f;
  --color-gold-700: #876620;
  --color-gold-night: #d4a94d;
  --color-red-400: #d26b7e;
  --color-red-600: #a8394f;
  --color-red-night: #d26d7f;
  --color-green-400: #5ebc91;
  --color-green-700: #327758;
  --color-green-night: #69c098;
  --color-amber-400: #d4954e;
  --color-amber-700: #935f24;
  --color-amber-night: #dba66b;
  --color-teal-400: #5eafbc;
  --color-teal-700: #34737e;
  --color-teal-night: #75bbc6;
  --color-lens-archetypal: #9c7dc0;
  --color-lens-archetypal-700: #8058ae;
  --color-lens-archetypal-night: #bda8d5;
  --color-lens-continuity: #7da3c0;
  --color-lens-continuity-700: #456f8e;
  --color-lens-continuity-night: #95b4cc;
  --color-lens-pattern-night: #b9a2ff;
  --color-sentiment-very-negative: #a8456a;
  --color-sentiment-very-negative-dark: #b34971;
  --color-sentiment-negative: #c76683;
  --color-sentiment-slightly-negative: #d07282;
  --color-sentiment-slightly-negative-dark: #d88b98;
  --color-sentiment-neutral: #918ca3;
  --color-sentiment-neutral-dark: #9c97ac;
  --color-sentiment-slightly-positive: #6d969c;
  --color-sentiment-slightly-positive-dark: #7fa3a8;
  --color-sentiment-positive: #5798a0;
  --color-sentiment-positive-dark: #5ea0a8;
  --color-sentiment-very-positive: #3e9ca2;
  --color-sentiment-very-positive-dark: #3fa0a6;
  --color-hue-amber: #f5c26b;
  --color-hue-rose: #f2a0b0;
  --color-hue-moss: #9cc79a;
  --color-hue-sea: #7cc7c9;
  --color-hue-storm: #7d86b5;
  --color-hue-lilac: #b9a6ff;
  --color-hue-neutral: #e6e1ee;
  --color-hue-neutral-dark: #2e2850;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section: 48px;
  --space-hero: 64px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 32px;
  --radius-pill: 9999px;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --duration-breath: 1.5s;
  --duration-ambient: 4s;
  --duration-fade-slow: 0.8s;
  --duration-dawn: 2s;
  --duration-chrome-hide-delay: 4s;
}

[data-sky="night"] {
  color-scheme: dark;
  --canvas: #1a1238;
  --canvas-elevated: #2a1b4f;
  --raised: #2a1b4f;
  --raised-prominent: #2a1b4f;
  --recessed: #0e0a22;
  --overlay: #2a1b4f;
  --scrim: rgb(14 10 34 / 0.6);
  --atmosphere: rgb(58 36 112 / 0.35);
  --text-primary: rgb(241 230 214 / 0.9);
  --text-secondary: #b8adcc;
  --text-tertiary: #b8adcc;
  --text-disabled: rgb(184 173 204 / 0.5);
  --text-inverse: #0e0a22;
  --link: #f1e6d6;
  --placeholder: #b8adcc;
  --serif-body: rgb(241 230 214 / 0.9);
  --border-subtle: rgb(241 230 214 / 0.06);
  --border-default: rgb(241 230 214 / 0.1);
  --border-strong: rgb(241 230 214 / 0.18);
  --border-focus: #f1e6d6;
  --accent: #b9a2ff;
  --accent-pressed: #a98eff;
  --accent-subtle: rgb(185 162 255 / 0.14);
  --warm: #f1e6d6;
  --info: #75bbc6;
  --success: #69c098;
  --warning: #dba66b;
  --error: #d26d7f;
  --destructive: #d26d7f;
  --lucid: #dba66b;
  --safety-surface: #2a1b4f;
  --safety-tint: rgb(230 184 86 / 0.08);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #b9a2ff;
  --lens-personal-symbol: #d4a94d;
  --lens-hartmann: #75bbc6;
  --lens-archetypal: #bda8d5;
  --lens-continuity: #95b4cc;
  --sentiment-very-negative: #b34971;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d88b98;
  --sentiment-neutral: #9c97ac;
  --sentiment-slightly-positive: #7fa3a8;
  --sentiment-positive: #5ea0a8;
  --sentiment-very-positive: #3fa0a6;
  --hue-amber: #e0bd80;
  --hue-rose: #e6acb8;
  --hue-moss: #a2c0a1;
  --hue-sea: #88bcbd;
  --hue-storm: #858cad;
  --hue-lilac: #c1b3f2;
  --hue-neutral: #2e2850;
}

[data-sky="light"] {
  color-scheme: light;
  --canvas: #fbf6ef;
  --canvas-elevated: #fffdf9;
  --raised: #fffdf9;
  --raised-prominent: #fffdf9;
  --recessed: #f3ede4;
  --overlay: #fffdf9;
  --scrim: rgb(30 24 56 / 0.35);
  --atmosphere: rgb(107 78 240 / 0.06);
  --text-primary: #1e1838;
  --text-secondary: #6b6384;
  --text-tertiary: #6b6384;
  --text-disabled: rgb(107 99 132 / 0.5);
  --text-inverse: #fffdf9;
  --link: #6b4ef0;
  --placeholder: #6b6384;
  --serif-body: #1e1838;
  --border-subtle: rgb(30 24 56 / 0.06);
  --border-default: rgb(30 24 56 / 0.1);
  --border-strong: rgb(30 24 56 / 0.18);
  --border-focus: #6b4ef0;
  --accent: #6b4ef0;
  --accent-pressed: #7c5cff;
  --accent-subtle: rgb(107 78 240 / 0.1);
  --warm: #876620;
  --info: #34737e;
  --success: #327758;
  --warning: #935f24;
  --error: #a8394f;
  --destructive: #a8394f;
  --lucid: #935f24;
  --safety-surface: #fffdf9;
  --safety-tint: rgb(230 184 86 / 0.12);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #6b4ef0;
  --lens-personal-symbol: #876620;
  --lens-hartmann: #34737e;
  --lens-archetypal: #8058ae;
  --lens-continuity: #456f8e;
  --sentiment-very-negative: #a8456a;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d07282;
  --sentiment-neutral: #918ca3;
  --sentiment-slightly-positive: #6d969c;
  --sentiment-positive: #5798a0;
  --sentiment-very-positive: #3e9ca2;
  --hue-amber: #f5c26b;
  --hue-rose: #f2a0b0;
  --hue-moss: #9cc79a;
  --hue-sea: #7cc7c9;
  --hue-storm: #7d86b5;
  --hue-lilac: #b9a6ff;
  --hue-neutral: #e6e1ee;
}

[data-sky="dark"] {
  color-scheme: dark;
  --canvas: #141029;
  --canvas-elevated: #201a3d;
  --raised: #201a3d;
  --raised-prominent: #201a3d;
  --recessed: #0d0a1e;
  --overlay: #201a3d;
  --scrim: rgb(13 10 30 / 0.5);
  --atmosphere: rgb(58 36 112 / 0.35);
  --text-primary: #efe8f6;
  --text-secondary: #a49db8;
  --text-tertiary: #a49db8;
  --text-disabled: rgb(164 157 184 / 0.5);
  --text-inverse: #141029;
  --link: #a48cff;
  --placeholder: #a49db8;
  --serif-body: #efe8f6;
  --border-subtle: rgb(239 232 246 / 0.06);
  --border-default: rgb(239 232 246 / 0.1);
  --border-strong: rgb(239 232 246 / 0.18);
  --border-focus: #a48cff;
  --accent: #a48cff;
  --accent-pressed: #a98eff;
  --accent-subtle: rgb(164 140 255 / 0.14);
  --warm: #e6b856;
  --info: #5eafbc;
  --success: #5ebc91;
  --warning: #d4954e;
  --error: #d26b7e;
  --destructive: #d26b7e;
  --lucid: #d4954e;
  --safety-surface: #201a3d;
  --safety-tint: rgb(230 184 86 / 0.08);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #a98eff;
  --lens-personal-symbol: #e6b856;
  --lens-hartmann: #5eafbc;
  --lens-archetypal: #9c7dc0;
  --lens-continuity: #7da3c0;
  --sentiment-very-negative: #b34971;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d88b98;
  --sentiment-neutral: #9c97ac;
  --sentiment-slightly-positive: #7fa3a8;
  --sentiment-positive: #5ea0a8;
  --sentiment-very-positive: #3fa0a6;
  --hue-amber: #e0bd80;
  --hue-rose: #e6acb8;
  --hue-moss: #a2c0a1;
  --hue-sea: #88bcbd;
  --hue-storm: #858cad;
  --hue-lilac: #c1b3f2;
  --hue-neutral: #2e2850;
}


[data-sky="day"] {
  color-scheme: light;
  --canvas: #fbf6ef;
  --canvas-elevated: #fffdf9;
  --raised: #fffdf9;
  --raised-prominent: #fffdf9;
  --recessed: #f3ede4;
  --overlay: #fffdf9;
  --scrim: rgb(30 24 56 / 0.35);
  --atmosphere: rgb(107 78 240 / 0.06);
  --text-primary: #1e1838;
  --text-secondary: #6b6384;
  --text-tertiary: #6b6384;
  --text-disabled: rgb(107 99 132 / 0.5);
  --text-inverse: #fffdf9;
  --link: #6b4ef0;
  --placeholder: #6b6384;
  --serif-body: #1e1838;
  --border-subtle: rgb(30 24 56 / 0.06);
  --border-default: rgb(30 24 56 / 0.1);
  --border-strong: rgb(30 24 56 / 0.18);
  --border-focus: #6b4ef0;
  --accent: #6b4ef0;
  --accent-pressed: #7c5cff;
  --accent-subtle: rgb(107 78 240 / 0.1);
  --warm: #876620;
  --info: #34737e;
  --success: #327758;
  --warning: #935f24;
  --error: #a8394f;
  --destructive: #a8394f;
  --lucid: #935f24;
  --safety-surface: #fffdf9;
  --safety-tint: rgb(230 184 86 / 0.12);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #6b4ef0;
  --lens-personal-symbol: #876620;
  --lens-hartmann: #34737e;
  --lens-archetypal: #8058ae;
  --lens-continuity: #456f8e;
  --sentiment-very-negative: #a8456a;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d07282;
  --sentiment-neutral: #918ca3;
  --sentiment-slightly-positive: #6d969c;
  --sentiment-positive: #5798a0;
  --sentiment-very-positive: #3e9ca2;
  --hue-amber: #f5c26b;
  --hue-rose: #f2a0b0;
  --hue-moss: #9cc79a;
  --hue-sea: #7cc7c9;
  --hue-storm: #7d86b5;
  --hue-lilac: #b9a6ff;
  --hue-neutral: #e6e1ee;
}
@media (prefers-color-scheme: dark) { [data-sky="day"] {
  color-scheme: dark;
  --canvas: #141029;
  --canvas-elevated: #201a3d;
  --raised: #201a3d;
  --raised-prominent: #201a3d;
  --recessed: #0d0a1e;
  --overlay: #201a3d;
  --scrim: rgb(13 10 30 / 0.5);
  --atmosphere: rgb(58 36 112 / 0.35);
  --text-primary: #efe8f6;
  --text-secondary: #a49db8;
  --text-tertiary: #a49db8;
  --text-disabled: rgb(164 157 184 / 0.5);
  --text-inverse: #141029;
  --link: #a48cff;
  --placeholder: #a49db8;
  --serif-body: #efe8f6;
  --border-subtle: rgb(239 232 246 / 0.06);
  --border-default: rgb(239 232 246 / 0.1);
  --border-strong: rgb(239 232 246 / 0.18);
  --border-focus: #a48cff;
  --accent: #a48cff;
  --accent-pressed: #a98eff;
  --accent-subtle: rgb(164 140 255 / 0.14);
  --warm: #e6b856;
  --info: #5eafbc;
  --success: #5ebc91;
  --warning: #d4954e;
  --error: #d26b7e;
  --destructive: #d26b7e;
  --lucid: #d4954e;
  --safety-surface: #201a3d;
  --safety-tint: rgb(230 184 86 / 0.08);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #a98eff;
  --lens-personal-symbol: #e6b856;
  --lens-hartmann: #5eafbc;
  --lens-archetypal: #9c7dc0;
  --lens-continuity: #7da3c0;
  --sentiment-very-negative: #b34971;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d88b98;
  --sentiment-neutral: #9c97ac;
  --sentiment-slightly-positive: #7fa3a8;
  --sentiment-positive: #5ea0a8;
  --sentiment-very-positive: #3fa0a6;
  --hue-amber: #e0bd80;
  --hue-rose: #e6acb8;
  --hue-moss: #a2c0a1;
  --hue-sea: #88bcbd;
  --hue-storm: #858cad;
  --hue-lilac: #c1b3f2;
  --hue-neutral: #2e2850;
} }
html.night-window [data-sky="day"], html.night-window[data-sky="day"] {
  color-scheme: dark;
  --canvas: #141029;
  --canvas-elevated: #201a3d;
  --raised: #201a3d;
  --raised-prominent: #201a3d;
  --recessed: #0d0a1e;
  --overlay: #201a3d;
  --scrim: rgb(13 10 30 / 0.5);
  --atmosphere: rgb(58 36 112 / 0.35);
  --text-primary: #efe8f6;
  --text-secondary: #a49db8;
  --text-tertiary: #a49db8;
  --text-disabled: rgb(164 157 184 / 0.5);
  --text-inverse: #141029;
  --link: #a48cff;
  --placeholder: #a49db8;
  --serif-body: #efe8f6;
  --border-subtle: rgb(239 232 246 / 0.06);
  --border-default: rgb(239 232 246 / 0.1);
  --border-strong: rgb(239 232 246 / 0.18);
  --border-focus: #a48cff;
  --accent: #a48cff;
  --accent-pressed: #a98eff;
  --accent-subtle: rgb(164 140 255 / 0.14);
  --warm: #e6b856;
  --info: #5eafbc;
  --success: #5ebc91;
  --warning: #d4954e;
  --error: #d26b7e;
  --destructive: #d26b7e;
  --lucid: #d4954e;
  --safety-surface: #201a3d;
  --safety-tint: rgb(230 184 86 / 0.08);
  --suppression-indicator: rgb(94 175 188 / 0.2);
  --lens-pattern: #a98eff;
  --lens-personal-symbol: #e6b856;
  --lens-hartmann: #5eafbc;
  --lens-archetypal: #9c7dc0;
  --lens-continuity: #7da3c0;
  --sentiment-very-negative: #b34971;
  --sentiment-negative: #c76683;
  --sentiment-slightly-negative: #d88b98;
  --sentiment-neutral: #9c97ac;
  --sentiment-slightly-positive: #7fa3a8;
  --sentiment-positive: #5ea0a8;
  --sentiment-very-positive: #3fa0a6;
  --hue-amber: #e0bd80;
  --hue-rose: #e6acb8;
  --hue-moss: #a2c0a1;
  --hue-sea: #88bcbd;
  --hue-storm: #858cad;
  --hue-lilac: #c1b3f2;
  --hue-neutral: #2e2850;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TIER 1 · PRIMITIVES (site additions)
   Colour, space, radius and duration primitives are NOT defined here: they come
   from the shared design system, unsomnia-ios/tokens/*.json → tokens.css
   (doc 13), which the build prepends. This file only adds the web-specific raw
   scales the app doesn't need: fluid type, families, layout widths, easing.
   Pure values. No names that describe a use.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Families */
  --font-family-serif: 'Source Serif 4', ui-serif, 'New York', Georgia, serif;
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-arabic: 'Vazirmatn', 'Geeza Pro', 'Noto Naskh Arabic', Tahoma, sans-serif;
  --font-family-hebrew-serif: 'Noto Serif Hebrew', 'Times New Roman', serif;
  --font-family-hebrew-sans: 'Arial Hebrew', 'Noto Sans Hebrew', system-ui, sans-serif;

  /* Type scale (rem, fluid where it matters) */
  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.0625rem;
  --font-size-500: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --font-size-600: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --font-size-700: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  --font-size-800: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  --font-size-900: clamp(2.6rem, 1.5rem + 5vw, 5.6rem);

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;

  --line-height-100: 1.02;
  --line-height-200: 1.12;
  --line-height-300: 1.25;
  --line-height-400: 1.5;
  --line-height-500: 1.65;

  --letter-spacing-tighter: -0.035em;
  --letter-spacing-tight: -0.018em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.09em;

  /* Layout widths */
  --size-measure-narrow: 30rem;
  --size-measure: 38rem;
  --size-content: 72rem;
  --size-wide: 86rem;

  /* Easing (doc 13 motion primitives, as CSS) */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Elevation (doc 13 shadow primitives, web values) */
  --shadow-100: 0 1px 2px rgb(30 24 56 / 0.05), 0 8px 28px rgb(30 24 56 / 0.07);
  --shadow-300: 0 2px 6px rgb(14 10 34 / 0.12), 0 30px 80px rgb(14 10 34 / 0.28);
  --shadow-500: 0 30px 90px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(241 230 214 / 0.06);
  --glow-ember: 0 0 4rem rgb(233 164 122 / 0.35), 0 0 9rem rgb(217 122 140 / 0.18);

  /* Opacity steps */
  --opacity-faint: 0.06;
  --opacity-soft: 0.14;
  --opacity-half: 0.5;
  --opacity-strong: 0.82;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TIER 2 · SEMANTICS (site roles)
   Named by purpose; reference Tier 1 only. Colour semantics per sky
   (--canvas, --text-primary, --accent, --lens-*, --hue-* …) come from the shared
   tokens.css, resolved by [data-sky]. The build also maps them onto
   [data-sky="day"], which follows the visitor's light/dark setting and turns
   dark inside the night window, as the app does (doc 13 §The two skies).
   Components (Tier 3) read only names from this layer and tokens.css's Tier 2.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Type roles */
  --type-display-family: var(--font-family-serif);
  --type-display-size: var(--font-size-900);
  --type-display-weight: var(--font-weight-400);
  --type-display-leading: var(--line-height-100);
  --type-display-tracking: var(--letter-spacing-tighter);

  --type-headline-family: var(--font-family-serif);
  --type-headline-size: var(--font-size-800);
  --type-headline-weight: var(--font-weight-400);
  --type-headline-leading: var(--line-height-200);
  --type-headline-tracking: var(--letter-spacing-tight);

  --type-title-family: var(--font-family-serif);
  --type-title-size: var(--font-size-700);
  --type-title-leading: var(--line-height-200);

  --type-subtitle-family: var(--font-family-serif);
  --type-subtitle-size: var(--font-size-600);
  --type-subtitle-leading: var(--line-height-300);

  --type-lead-family: var(--font-family-sans);
  --type-lead-size: var(--font-size-500);
  --type-lead-leading: var(--line-height-500);

  --type-body-family: var(--font-family-sans);
  --type-body-size: var(--font-size-400);
  --type-body-leading: var(--line-height-500);

  --type-small-size: var(--font-size-200);
  --type-small-leading: var(--line-height-400);

  --type-label-family: var(--font-family-sans);
  --type-label-size: var(--font-size-100);
  --type-label-weight: var(--font-weight-600);
  --type-label-tracking: var(--letter-spacing-wide);

  --type-dream-family: var(--font-family-serif);
  --type-emphasis-style: italic;
  --type-dream-arabic-family: var(--font-family-arabic);
  --type-dream-hebrew-family: var(--font-family-hebrew-serif);

  /* Rhythm */
  --space-page-gutter: clamp(var(--space-lg), 5vw, var(--space-hero));
  --space-section-y: clamp(var(--space-hero), 11vw, 10rem);
  --space-block-gap: clamp(var(--space-xxl), 5vw, var(--space-hero));
  --space-stack-sm: var(--space-sm);
  --space-stack-md: var(--space-base);
  --space-stack-lg: var(--space-xl);
  --space-stack-xl: var(--space-xxxl);
  --space-inline-sm: var(--space-sm);
  --space-inline-md: var(--space-md);

  --size-text: var(--size-measure);
  --size-text-narrow: var(--size-measure-narrow);
  --size-page: var(--size-content);
  --size-page-wide: var(--size-wide);

  /* Shape */
  --radius-control: var(--radius-pill);
  --radius-card: var(--radius-xl);
  --radius-card-small: var(--radius-lg);
  --radius-chip: var(--radius-pill);
  --radius-art: var(--radius-lg);
  --radius-device: 3.1rem;

  /* Motion */
  --motion-tap: var(--duration-fast) var(--easing-standard);
  --motion-hover: var(--duration-normal) var(--easing-standard);
  --motion-enter: var(--duration-slow) var(--easing-decelerate);
  --motion-reveal-distance: 1.25rem;
  --motion-breath: var(--duration-ambient);
  --night-art-opacity: 0.32;

  /* Atmosphere (gradients built from primitives) */
  --gradient-night: radial-gradient(120% 80% at 70% 10%, var(--color-plum-800) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-plum-900) 0%, var(--color-plum-950) 100%);
  --gradient-ember: radial-gradient(circle at 50% 45%, var(--color-ember-300) 0%, var(--color-ember-400) 62%, transparent 100%);
  --glow-mic: var(--glow-ember);

  --shadow-card: var(--shadow-100);
  --shadow-device: var(--shadow-300);
  --shadow-device-night: var(--shadow-500);

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
}

/* Scripts that must not be letter-spaced or set in the Latin serif (Arabic joins; Hebrew has no italics). */
html:lang(fa), html:lang(ar) {
  --type-display-family: var(--font-family-arabic);
  --type-headline-family: var(--font-family-arabic);
  --type-title-family: var(--font-family-arabic);
  --type-subtitle-family: var(--font-family-arabic);
  --type-body-family: var(--font-family-arabic);
  --type-lead-family: var(--font-family-arabic);
  --type-label-family: var(--font-family-arabic);
  --type-display-weight: var(--font-weight-600);
  --type-display-tracking: var(--letter-spacing-normal);
  --type-headline-tracking: var(--letter-spacing-normal);
  --type-label-tracking: var(--letter-spacing-normal);
  --type-display-leading: var(--line-height-300);
  --type-headline-leading: var(--line-height-300);
  --type-body-leading: 1.85;
  --type-emphasis-style: normal;
  --type-lead-leading: 1.85;
}
html:lang(he) {
  --type-display-family: var(--font-family-hebrew-serif);
  --type-headline-family: var(--font-family-hebrew-serif);
  --type-title-family: var(--font-family-hebrew-serif);
  --type-subtitle-family: var(--font-family-hebrew-serif);
  --type-body-family: var(--font-family-hebrew-sans);
  --type-lead-family: var(--font-family-hebrew-sans);
  --type-label-family: var(--font-family-hebrew-sans);
  --type-display-weight: var(--font-weight-500);
  --type-display-tracking: var(--letter-spacing-normal);
  --type-headline-tracking: var(--letter-spacing-normal);
  --type-label-tracking: var(--letter-spacing-normal);
  --type-display-leading: var(--line-height-200);
  --type-emphasis-style: normal;
}

/* Colour roles the site adds on top of tokens.css (still Tier 2, per sky) */
[data-sky] {
  --surface-page: var(--canvas);
  --surface-card: var(--raised);
  --surface-card-quiet: var(--recessed);
  --surface-inverse-button: var(--text-primary);
  --text-on-inverse-button: var(--canvas);
  --text-heading: var(--text-primary);
  --text-body: var(--text-secondary);
  --text-dream: var(--serif-body);
  --text-eyebrow: var(--accent);
  --line-hairline: var(--border-default);
  --line-quiet: var(--border-subtle);
  --cta-fill: var(--accent);
  --cta-fill-hover: var(--accent-pressed);
  --cta-text: var(--text-inverse);
}
[data-sky] {
  --surface-header: color-mix(in srgb, var(--canvas) 78%, transparent);
  --surface-device-bezel: var(--text-primary);
  --text-art-caption: var(--text-secondary);
  --mic-fill: var(--gradient-ember);
  --mic-icon: var(--color-plum-950);
  /* The dawn ends in this sky's canvas, so it must resolve per sky, not on :root. */
  --dawn-fill: linear-gradient(180deg, var(--color-plum-950) 0%, var(--color-plum-900) 14%, var(--color-plum-600) 38%,
    var(--color-dawn-rose) 58%, var(--color-dawn-amber) 76%, var(--canvas) 100%);
  --night-fill: var(--gradient-night);
  --night-fill-continue: linear-gradient(180deg, var(--color-plum-950) 0%, var(--color-plum-900) 55%, var(--color-plum-950) 100%);
  --wordmark-dot: var(--color-ember-300);
}
[data-sky="night"] {
  --surface-page: transparent;
  --surface-header: color-mix(in srgb, var(--color-plum-950) 72%, transparent);
  --surface-device-bezel: var(--color-plum-950);
  --surface-card: rgb(42 27 79 / 0.55);
  --text-eyebrow: var(--color-ember-300);
  --cta-fill: var(--color-cream-100);
  --cta-fill-hover: var(--color-paper-0);
  --cta-text: var(--color-plum-950);
}

/* Base: fonts, reset, element defaults. Reads Tier 2 only. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('/fonts/source-serif-4-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/vazirmatn-arabic-wght-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Noto Serif Hebrew'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/noto-serif-hebrew-hebrew-wght-normal.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; hanging-punctuation: first last; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { color: var(--text-heading); font-weight: var(--type-headline-weight); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: var(--focus-ring-offset); border-radius: 4px; }
::selection { background: var(--accent-subtle); color: var(--text-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-base); top: -10rem; z-index: 100; padding: var(--space-sm) var(--space-base);
  background: var(--surface-inverse-button); color: var(--text-on-inverse-button); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--space-base); }
em, i { font-style: var(--type-emphasis-style); }

/* ─────────────────────────────────────────────────────────────────────────────
   TIER 3 · COMPONENTS
   Every rule here reads Tier 2 names only (site roles in 2-semantics.css and
   the colour semantics from tokens.css). No hex, no raw sizes beyond hairlines.
   To retune the look, change Tier 2 (or Tier 1); never patch a component.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2 * var(--space-page-gutter), var(--size-page)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--space-page-gutter), var(--size-page-wide)); }
.wrap--text { width: min(100% - 2 * var(--space-page-gutter), var(--size-text)); }
.section { padding-block: var(--space-section-y); position: relative; }
.section--tight { padding-block: calc(var(--space-section-y) * 0.6); }
.stack > * + * { margin-block-start: var(--space-stack-md); }
.stack-lg > * + * { margin-block-start: var(--space-stack-lg); }
.split { display: grid; gap: var(--space-block-gap); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: 2; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}
.center { text-align: center; margin-inline: auto; }

/* ── Skies ───────────────────────────────────────────────────────────────── */
.sky-night { background: var(--night-fill); color: var(--text-body); isolation: isolate; }
.sky-day { background: var(--surface-page); }
.sky-night + .sky-night { background: var(--night-fill-continue); }
.dawn { height: clamp(12rem, 28vw, 22rem); background: var(--dawn-fill); }
.dawn--short { height: clamp(6rem, 12vw, 10rem); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.display { font-family: var(--type-display-family); font-size: var(--type-display-size); font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading); letter-spacing: var(--type-display-tracking); }
.headline { font-family: var(--type-headline-family); font-size: var(--type-headline-size); line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking); }
.title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-leading); letter-spacing: var(--type-headline-tracking); }
.subtitle { font-family: var(--type-subtitle-family); font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); }
.lead { font-family: var(--type-lead-family); font-size: var(--type-lead-size); line-height: var(--type-lead-leading); color: var(--text-body); max-width: var(--size-text); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-leading); }
.eyebrow { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-eyebrow); }
.serif-italic, em.serif { font-family: var(--type-dream-family); font-style: var(--type-emphasis-style); }
.prose { max-width: var(--size-text); }
.prose > * + * { margin-block-start: var(--space-stack-md); }
.prose h2:not([class]) { font-family: var(--type-subtitle-family); font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); margin-block-start: var(--space-stack-xl); }
.prose h3:not([class]) { font-family: var(--type-body-family); font-size: var(--type-body-size); font-weight: var(--font-weight-600); margin-block-start: var(--space-stack-lg); }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: var(--space-stack-sm); }
.prose strong { color: var(--text-heading); font-weight: var(--font-weight-600); }
.prose blockquote { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--space-stack-md); font-family: var(--type-dream-family);
  font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); color: var(--text-heading); }
.dream-text { font-family: var(--type-dream-family); color: var(--text-dream); }
.dream-text:lang(ar), .dream-text:lang(fa) { font-family: var(--type-dream-arabic-family); line-height: 1.9; }
.dream-text:lang(he) { font-family: var(--type-dream-hebrew-family); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: var(--surface-header); border-block-end: 1px solid var(--line-quiet); transition: background var(--motion-hover); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-inline-md); min-height: 4rem; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-inline-sm); text-decoration: none; color: var(--text-heading);
  font-family: var(--type-display-family); font-size: var(--font-size-500); letter-spacing: var(--letter-spacing-tight); }
.wordmark__mark { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--mic-fill); box-shadow: var(--glow-mic); flex: none; }
.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-xs); }
.site-nav a { color: var(--text-body); text-decoration: none; font-size: var(--type-small-size); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control);
  transition: color var(--motion-hover), background var(--motion-hover); }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--text-heading); background: var(--accent-subtle); }
.site-nav a, .lang-switch summary { white-space: nowrap; }
.site-nav .nav-optional, .site-nav .nav-wide { display: none; }
@media (min-width: 40rem) { .site-nav .nav-wide { display: inline-block; } }
@media (min-width: 60rem) { .site-nav .nav-optional { display: inline-block; } }
.nav-menu { display: block; }
@media (min-width: 60rem) { .nav-menu { display: none; } }
.lang-switch__name { display: none; }
@media (min-width: 40rem) { .lang-switch__name { display: inline; } }
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; color: var(--text-body); font-size: var(--type-small-size); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-control); border: 1px solid var(--line-hairline); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch[open] summary { color: var(--text-heading); }
.lang-switch ul { position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-xs)); list-style: none; padding: var(--space-xs); min-width: 9rem;
  background: var(--overlay); border: 1px solid var(--line-hairline); border-radius: var(--radius-card-small); box-shadow: var(--shadow-card); }
.lang-switch li a { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; }
.lang-switch li a:hover, .lang-switch li a[aria-current='true'] { background: var(--accent-subtle); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline-sm); min-height: 2.875rem; padding: 0 var(--space-xl);
  border-radius: var(--radius-control); font-family: var(--type-body-family); font-size: var(--font-size-300); font-weight: var(--font-weight-500);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-hover), color var(--motion-hover), transform var(--motion-tap), box-shadow var(--motion-hover); }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--cta-fill); color: var(--cta-text); }
.btn--primary:hover { background: var(--cta-fill-hover); box-shadow: 0 8px 30px var(--accent-subtle); }
.btn--ghost { background: transparent; color: var(--text-heading); border-color: var(--line-hairline); }
.btn--ghost:hover { border-color: var(--border-strong); background: var(--accent-subtle); }
.btn--small { min-height: 2.25rem; padding: 0 var(--space-base); font-size: var(--type-small-size); }
.btn svg { inline-size: 1.1em; block-size: 1.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-inline-md); align-items: center; }
.center .btn-row { justify-content: center; }
.text-link { color: var(--link); font-weight: var(--font-weight-500); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link::after { content: ' →'; }
[dir='rtl'] .text-link::after { content: ' ←'; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-hero), 8vw, 8rem) 0; }
.hero__grid { display: grid; gap: var(--space-block-gap); align-items: end; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.hero__copy { padding-block-end: var(--space-section-y); }
.hero__copy .display { color: var(--text-primary); }
.hero__copy .display em { font-style: var(--type-emphasis-style); color: var(--color-ember-300); }
.hero__copy .lead { color: var(--text-secondary); margin-block-start: var(--space-stack-lg); }
.hero__actions { margin-block-start: var(--space-stack-xl); }
.hero__meta { margin-block-start: var(--space-stack-md); font-size: var(--type-small-size); color: var(--text-secondary); }
.hero__device { justify-self: center; margin-block-end: calc(-1 * var(--space-hero)); }
.hero__atmosphere { position: absolute; inset: auto -20% -30% auto; inline-size: 70vmax; block-size: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--atmosphere) 0%, transparent 65%); pointer-events: none; z-index: -1; }

/* ── Mic (the one warm thing at night) ───────────────────────────────────── */
.mic { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: var(--mic-fill); box-shadow: var(--glow-mic);
  display: grid; place-items: center; color: var(--mic-icon); flex: none; }
.mic svg { inline-size: 1.6rem; block-size: 1.6rem; }
.mic--breathe { animation: breathe var(--motion-breath) ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); border-radius: 50%; } 50% { transform: scale(1.04); border-radius: 46%; } }
@media (prefers-reduced-motion: reduce) { .mic--breathe { animation: none; } }

/* ── Device frame ────────────────────────────────────────────────────────── */
.device { --device-w: clamp(15rem, 26vw, 20rem); inline-size: var(--device-w); aspect-ratio: 1206 / 2622; border-radius: var(--radius-device);
  padding: 0.55rem; background: var(--surface-device-bezel); box-shadow: var(--shadow-device); position: relative; flex: none; }
.sky-night .device { box-shadow: var(--shadow-device-night); }
.device img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--radius-device) - 0.55rem); }
.device--small { --device-w: clamp(12.5rem, 20vw, 16rem); }
.device--tilt-l { transform: rotate(-3deg); }
.device--tilt-r { transform: rotate(3deg); }
.device-row { display: flex; justify-content: center; align-items: center; gap: clamp(var(--space-base), 3vw, var(--space-xxxl)); }
.device-row .device { flex: 0 1 var(--device-w); inline-size: auto; min-inline-size: 0; }
.device-row .device:nth-child(2) { margin-block-start: calc(-1 * var(--space-hero)); }
@media (max-width: 40rem) {
  .device-row { flex-wrap: nowrap; gap: var(--space-sm); }
  .device-row .device { --device-w: min(44vw, 12rem); }
  .device-row .device:nth-child(2) { margin-block-start: var(--space-xxl); }
  .device-row .device:nth-child(n+3) { display: none; }
  .device--tilt-l, .device--tilt-r { transform: none; }
}
.device-caption { text-align: center; margin-block-start: var(--space-stack-md); font-size: var(--type-small-size); color: var(--text-secondary); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { background: var(--surface-card); border: 1px solid var(--line-quiet); border-radius: var(--radius-card); padding: clamp(var(--space-lg), 3vw, var(--space-xxl));
  box-shadow: var(--shadow-card); }
.sky-night .card { box-shadow: none; backdrop-filter: blur(10px); }
.card--quiet { background: var(--surface-card-quiet); box-shadow: none; }
.card h3 { font-family: var(--type-subtitle-family); font-size: var(--font-size-500); line-height: var(--line-height-300); }
.card p { margin-block-start: var(--space-stack-sm); }
.card-grid { display: grid; gap: var(--space-base); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card__icon { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent);
  margin-block-end: var(--space-stack-md); }
.card__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* ── Step list (night: speak, sleep, wake) ──────────────────────────────── */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-block-gap); counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; border-block-start: 1px solid var(--line-hairline); padding-block-start: var(--space-stack-lg); }
.step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--type-label-family); font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking); color: var(--text-eyebrow); margin-block-end: var(--space-stack-md); }
.step h3 { font-family: var(--type-subtitle-family); font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); }
.step p { margin-block-start: var(--space-stack-sm); }

/* ── Waveform (decorative) ──────────────────────────────────────────────── */
.waveform { display: flex; align-items: center; gap: 3px; block-size: 2.5rem; }
.waveform span { inline-size: 3px; border-radius: 2px; background: var(--text-secondary); opacity: 0.8; block-size: var(--h, 30%); animation: wave 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .waveform span { animation: none; } }

/* ── Art band (museum fragment) ─────────────────────────────────────────── */
.art { position: relative; border-radius: var(--radius-art); overflow: hidden; background: var(--hue-neutral); }
.art img { inline-size: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.art--band img { aspect-ratio: 6 / 1; }
.art--tall img { aspect-ratio: 2 / 1; }
.art figcaption { padding-block-start: var(--space-sm); font-size: var(--type-small-size); color: var(--text-art-caption); }
.art figcaption em { font-family: var(--type-dream-family); }
.sky-night .art img, [data-sky='dark'] .art img { filter: brightness(0.8) saturate(0.92); }
.art-mosaic { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .art-mosaic { grid-template-columns: repeat(4, 1fr); } }
.art-mosaic .art img { aspect-ratio: 3 / 2; }
.art-mosaic .art:nth-child(5n + 1) { grid-column: span 2; }
.art-mosaic .art:nth-child(5n + 1) img { aspect-ratio: 3 / 1; }
@media (max-width: 47.99rem) { .art-mosaic .art:nth-child(5n + 1) img { aspect-ratio: 2 / 1; } }

/* ── Dream sample (a dream card as in the app) ──────────────────────────── */
.dream-card { background: var(--surface-card); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line-quiet); }
.dream-card__art img { inline-size: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.dream-card__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.dream-card__title { font-family: var(--type-dream-family); font-size: var(--font-size-600); line-height: var(--line-height-300); color: var(--text-heading); }
.dream-card__title:lang(ar), .dream-card__title:lang(fa) { font-family: var(--type-dream-arabic-family); font-weight: var(--font-weight-600); }
.dream-card__title:lang(he) { font-family: var(--type-dream-hebrew-family); font-weight: var(--font-weight-500); }
.dream-card__meta { margin-block-start: var(--space-xs); font-size: var(--type-small-size); color: var(--text-secondary); }
.dream-card__text { margin-block-start: var(--space-stack-md); font-size: var(--font-size-400); line-height: var(--line-height-500); }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3rem 0.75rem; border-radius: var(--radius-chip); font-size: var(--type-small-size);
  background: var(--surface-card-quiet); color: var(--text-primary); border: 1px solid var(--line-quiet); }
.chip__count { color: var(--text-secondary); }
.chip--sentiment::before { content: ''; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--chip-dot, var(--sentiment-neutral)); }
.chip--positive { --chip-dot: var(--sentiment-very-positive); }
.chip--negative { --chip-dot: var(--sentiment-slightly-negative); }

/* ── Lens explorer ───────────────────────────────────────────────────────── */
.lens-explorer { display: grid; gap: var(--space-block-gap); align-items: start; }
@media (min-width: 62rem) { .lens-explorer { grid-template-columns: 0.95fr 1.05fr; } }
.lens-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-stack-lg); }
.lens-tab { --lens: var(--accent); appearance: none; border: 1px solid var(--line-hairline); background: transparent; color: var(--text-body); cursor: pointer;
  padding: var(--space-xs) var(--space-base); border-radius: var(--radius-control); font-size: var(--type-small-size); font-weight: var(--font-weight-500);
  transition: background var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover); }
.lens-tab:hover { color: var(--text-heading); border-color: var(--border-strong); }
.lens-tab[aria-selected='true'] { background: color-mix(in srgb, var(--lens) 14%, transparent); border-color: var(--lens); color: var(--text-heading); }
.lens-panel { display: grid; gap: var(--space-base); }
.lens-panel[hidden] { display: none; }
.lens-card { --lens: var(--accent); background: var(--surface-card); border: 1px solid var(--line-quiet); border-inline-start: 3px solid var(--lens);
  border-radius: var(--radius-card-small); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-card); }
.lens-card__label { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--lens); }
.lens-card__claim { margin-block-start: var(--space-sm); color: var(--text-primary); font-size: var(--font-size-400); line-height: var(--line-height-500); }
.lens-card__foot { margin-block-start: var(--space-stack-md); font-size: var(--type-small-size); color: var(--text-secondary); }
.lens-card--placeholder { border-inline-start-style: dashed; background: transparent; box-shadow: none; }
.lens-card--placeholder .lens-card__claim { color: var(--text-secondary); }
.feedback { display: flex; gap: var(--space-xs); margin-block-start: var(--space-stack-md); }
.feedback span { font-size: var(--type-small-size); padding: 0.2rem 0.75rem; border-radius: var(--radius-chip); border: 1px solid var(--line-hairline); color: var(--text-secondary); }
.lens--pattern { --lens: var(--lens-pattern); }
.lens--symbol { --lens: var(--lens-personal-symbol); }
.lens--hartmann { --lens: var(--lens-hartmann); }
.lens--jung { --lens: var(--lens-archetypal); }
.lens--continuity { --lens: var(--lens-continuity); }

/* ── Lens table (how-it-works) ──────────────────────────────────────────── */
.lens-list { display: grid; gap: var(--space-base); }
.lens-row { --lens: var(--accent); display: grid; gap: var(--space-stack-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--surface-card);
  border: 1px solid var(--line-quiet); border-block-start: 3px solid var(--lens); box-shadow: var(--shadow-card); }
@media (min-width: 56rem) { .lens-row { grid-template-columns: 0.8fr 1.2fr 1fr; align-items: start; } }
.lens-row h3 { font-family: var(--type-subtitle-family); font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-leading); }
.lens-row .tradition { font-size: var(--type-small-size); color: var(--text-secondary); margin-block-start: var(--space-xs); }
.lens-row .default { display: inline-block; margin-block-start: var(--space-sm); font-size: var(--type-label-size); font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--lens); }
.lens-row blockquote { font-family: var(--type-dream-family); font-style: var(--type-emphasis-style); color: var(--text-primary); line-height: var(--line-height-400); }

/* ── Gate diagram ────────────────────────────────────────────────────────── */
.gate { display: grid; gap: var(--space-sm); counter-reset: gate; }
@media (min-width: 52rem) { .gate { grid-template-columns: repeat(3, 1fr); } }
.gate li { list-style: none; counter-increment: gate; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--surface-card-quiet); border: 1px solid var(--line-quiet); }
.gate li::before { content: counter(gate); display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; margin-block-end: var(--space-stack-md);
  background: var(--accent-subtle); color: var(--accent); font-weight: var(--font-weight-600); font-size: var(--type-small-size); }
.gate h3 { font-family: var(--type-subtitle-family); font-size: var(--font-size-500); }
.gate p { margin-block-start: var(--space-sm); font-size: var(--type-small-size); }

/* ── Stat ────────────────────────────────────────────────────────────────── */
.stats { display: grid; gap: var(--space-base); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stat { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--surface-card); border: 1px solid var(--line-quiet); }
.stat__number { font-family: var(--type-display-family); font-size: var(--font-size-800); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat__label { margin-block-start: var(--space-sm); color: var(--text-heading); font-weight: var(--font-weight-500); }
.stat__caption { margin-block-start: var(--space-xs); font-size: var(--type-small-size); }

/* ── Language showcase ──────────────────────────────────────────────────── */
.lang-demo__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-stack-lg); }
.lang-demo__tabs button { appearance: none; cursor: pointer; border: 1px solid var(--line-hairline); background: transparent; color: var(--text-body);
  padding: var(--space-xs) var(--space-base); border-radius: var(--radius-control); font-size: var(--font-size-300); transition: background var(--motion-hover), color var(--motion-hover); }
.lang-demo__tabs button[aria-selected='true'] { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.lang-demo [data-lang-panel][hidden] { display: none; }
.lang-list { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); font-family: var(--type-display-family); font-size: var(--font-size-700); color: var(--text-heading); }
.lang-list span:lang(ar), .lang-list span:lang(fa) { font-family: var(--type-dream-arabic-family); }
.lang-list span:lang(he) { font-family: var(--type-dream-hebrew-family); }

/* ── Checklist (does / doesn't) ─────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--space-stack-md); }
.ticks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-inline-md); align-items: start; }
.ticks li::before { content: ''; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2em; border-radius: 50%;
  background: var(--accent-subtle) center / 0.75rem no-repeat; border: 1px solid var(--accent); }
.ticks--no li::before { border-color: var(--line-hairline); background: transparent;
  background-image: linear-gradient(45deg, transparent 45%, var(--text-secondary) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--text-secondary) 45% 55%, transparent 55%); background-size: 60%; background-position: center; background-repeat: no-repeat; }
.ticks strong { color: var(--text-heading); font-weight: var(--font-weight-500); }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: var(--space-base); }
@media (min-width: 52rem) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { padding: clamp(var(--space-xl), 4vw, var(--space-section)); border-radius: var(--radius-card); background: var(--surface-card); border: 1px solid var(--line-hairline); box-shadow: var(--shadow-card); }
.plan--featured { border: 2px solid var(--accent); }
.plan__name { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--accent); }
.plan__price { margin-block-start: var(--space-stack-md); font-family: var(--type-display-family); font-size: var(--font-size-800); line-height: 1; color: var(--text-heading); }
.plan__price small { font-family: var(--type-body-family); font-size: var(--font-size-300); color: var(--text-secondary); }
.plan__note { margin-block-start: var(--space-sm); font-size: var(--type-small-size); }
.plan .ticks { margin-block-start: var(--space-stack-lg); }

/* ── Waitlist form ───────────────────────────────────────────────────────── */
.waitlist { display: flex; flex-wrap: wrap; gap: var(--space-sm); max-inline-size: 30rem; }
.center .waitlist { margin-inline: auto; justify-content: center; }
.waitlist input[type='email'] { flex: 1 1 14rem; min-height: 2.875rem; padding: 0 var(--space-lg); border-radius: var(--radius-control);
  border: 1px solid var(--line-hairline); background: var(--surface-card-quiet); color: var(--text-primary); }
.sky-night .waitlist input[type='email'] { background: rgb(14 10 34 / 0.55); }
.waitlist input::placeholder { color: var(--placeholder); }
.waitlist input:focus-visible { outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: 1px; }
.waitlist__hp { position: absolute; left: -9999px; }
.waitlist__status { flex-basis: 100%; min-height: 1.5em; font-size: var(--type-small-size); color: var(--text-secondary); }
.waitlist__status[data-state='ok'] { color: var(--success); }
.waitlist__status[data-state='error'] { color: var(--error); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-block-start: 1px solid var(--line-hairline); }
.faq details { border-block-end: 1px solid var(--line-hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-base); padding-block: var(--space-lg);
  font-family: var(--type-subtitle-family); font-size: var(--font-size-500); color: var(--text-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--type-body-family); color: var(--accent); transition: transform var(--motion-hover); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-block-end: var(--space-lg); max-width: var(--size-text); }
.faq details > div > * + * { margin-block-start: var(--space-stack-sm); }

/* ── Principles (philosophy) ─────────────────────────────────────────────── */
.principles { list-style: none; padding: 0; counter-reset: principle; display: grid; gap: 0; }
.principle { counter-increment: principle; display: grid; gap: var(--space-stack-md); padding-block: var(--space-block-gap); border-block-start: 1px solid var(--line-hairline); }
@media (min-width: 56rem) { .principle { grid-template-columns: 5rem 1fr 1.2fr; align-items: baseline; } }
.principle::before { content: counter(principle, upper-roman); font-family: var(--type-display-family); font-style: var(--type-emphasis-style); font-size: var(--font-size-600); color: var(--accent); }
.principles .principle h2, .principles .principle h3 { font-family: var(--type-title-family); font-size: var(--font-size-700); line-height: var(--line-height-200); letter-spacing: var(--letter-spacing-tight); }
.principle .prose { color: var(--text-body); }

/* ── Pull quote ──────────────────────────────────────────────────────────── */
.pull { font-family: var(--type-display-family); font-size: var(--font-size-700); line-height: var(--line-height-200); letter-spacing: var(--letter-spacing-tight);
  color: var(--text-heading); max-width: 24ch; }
.pull em { color: var(--accent); }
.sky-night .pull em { color: var(--color-ember-300); }

/* ── Page hero (subpages) ────────────────────────────────────────────────── */
.page-hero { padding-block: clamp(var(--space-hero), 10vw, 9rem) clamp(var(--space-xxl), 6vw, var(--space-hero)); }
.page-hero .display { margin-block-start: var(--space-stack-md); max-width: 16ch; }
.page-hero .lead { margin-block-start: var(--space-stack-lg); }
.sky-night.page-hero .display { color: var(--text-primary); }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal .highlight-box, .legal .warning-box { background: var(--surface-card-quiet); border-inline-start: 3px solid var(--accent); padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-sm); }
.legal .last-updated { color: var(--text-secondary); font-size: var(--type-small-size); }
.legal .notice { padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card-small); background: var(--accent-subtle); color: var(--text-primary); font-size: var(--type-small-size); }
.contact-reasons .reason-list { display: grid; gap: var(--space-sm); }
.contact-reasons .reason-item { display: flex; gap: var(--space-inline-md); align-items: center; }
.contact-reasons .reason-icon { inline-size: 1.2rem; block-size: 1.2rem; color: var(--accent); flex: none; }
.email-link { display: inline-flex; gap: var(--space-inline-sm); align-items: center; font-family: var(--type-subtitle-family); font-size: var(--type-subtitle-size); text-decoration: none; }
.email-link svg { inline-size: 1.4rem; block-size: 1.4rem; }
.response-note { font-size: var(--type-small-size); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { padding-block: var(--space-section-y) var(--space-xxl); border-block-start: 1px solid var(--line-quiet); }
.site-footer__grid { display: grid; gap: var(--space-block-gap); }
@media (min-width: 52rem) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h2 { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking);
  text-transform: uppercase; color: var(--text-secondary); margin-block-end: var(--space-stack-md); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer a { color: var(--text-primary); text-decoration: none; font-size: var(--type-small-size); }
.site-footer a:hover { color: var(--link); }
.site-footer__tagline { margin-block-start: var(--space-stack-md); font-family: var(--type-dream-family); font-style: var(--type-emphasis-style); font-size: var(--font-size-500); color: var(--text-heading); }
.site-footer__legal { margin-block-start: var(--space-section); padding-block-start: var(--space-xl); border-block-start: 1px solid var(--line-quiet);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-base); font-size: var(--type-small-size); color: var(--text-secondary); }
.site-footer__legal a { color: var(--text-secondary); }
.hosna-dot { color: var(--color-ember-400); }

/* ── Night closing with a painting fading into the sky ─────────────────── */
.night-art { position: relative; overflow: hidden; isolation: isolate; }
.night-art__img { position: absolute; inset: 0 0 auto 0; z-index: -1; opacity: var(--night-art-opacity);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 85%); mask-image: linear-gradient(180deg, black 0%, transparent 85%); }
.night-art__img img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.night-art__content { padding-block: calc(var(--space-section-y) * 1.3) var(--space-section-y); }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(var(--motion-reveal-distance)); transition: opacity var(--motion-enter), transform var(--motion-enter); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Utilities (spacing only, from Tier 2) ──────────────────────────────── */
.mt-sm { margin-block-start: var(--space-stack-sm); }
.mt-md { margin-block-start: var(--space-stack-md); }
.mt-lg { margin-block-start: var(--space-stack-lg); }
.mt-xl { margin-block-start: var(--space-stack-xl); }
.mt-block { margin-block-start: var(--space-block-gap); }
.muted { color: var(--text-secondary); }
.heading-color { color: var(--text-heading); }