/* GENERATED – do not edit. Source: packages/design-tokens/tokens.json (run `pnpm tokens`). */

:root {
  color-scheme: light dark;
  --color-night-500: #463E6C;
  --color-night-600: #2B2350;
  --color-night-700: #241F38;
  --color-night-800: #1A1628;
  --color-night-900: #0F0D12;
  --color-night-950: #0A090E;
  --color-mist: #F2EFF5;
  --color-white: #FFFFFF;
  --color-nar-300: #F0587F;
  --color-nar-500: #D6335C;
  --color-nar-700: #B8264B;
  --color-brand-100: #FBE4EB;
  --color-brand-500: #D6335C;
  --color-brand-600: #B8264B;
  --color-brand-text: #C22A52;
  --color-brand-fill-end: #B8264B;
  --color-dusk-100: #E7E2F6;
  --color-dusk-700: #2B2350;
  --color-gold-500: #C08410;
  --color-bg-canvas: #F2EFF5;
  --color-bg-surface: rgba(255, 255, 255, 0.702);
  --color-bg-raised: rgba(255, 255, 255, 0.902);
  --color-bg-sunken: rgba(110, 98, 176, 0.102);
  --color-bg-solid: #FFFFFF;
  --color-bg-sheet: rgba(255, 255, 255, 0.961);
  --color-border-subtle: rgba(110, 98, 176, 0.161);
  --color-border-strong: rgba(90, 78, 158, 0.349);
  --color-text-primary: #1C1733;
  --color-text-secondary: #585170;
  --color-text-tertiary: #817A99;
  --color-text-on-brand: #FFFFFF;
  --color-text-on-dusk: #FFFFFF;
  --color-text-on-danger: #FFFFFF;
  --color-text-on-gold: #0F0D12;
  --color-text-on-night: #F2EFF5;
  --color-success: #1B8A64;
  --color-warning: #A86F00;
  --color-danger: #CF3339;
  --color-verified: #2F7BEB;
  --color-notice-critical-bg: #FAEBEB;
  --color-notice-critical-border: rgba(207, 51, 57, 0.4);
  --color-notice-critical-fg: #B42A30;
  --color-notice-warning-bg: #F5EEE0;
  --color-notice-warning-border: rgba(168, 111, 0, 0.4);
  --color-notice-warning-fg: #8A5A00;
  --color-notice-info-bg: rgba(255, 255, 255, 0.902);
  --color-notice-info-border: rgba(90, 78, 158, 0.349);
  --color-notice-info-fg: #C22A52;
  --color-notice-ai-bg: #E7E2F6;
  --color-notice-ai-border: #E7E2F6;
  --color-notice-ai-fg: #2B2350;
  --color-topic-rose-bg: #FAE7EB;
  --color-topic-rose-fg: #C22A52;
  --color-topic-amber-bg: #FDF3E8;
  --color-topic-amber-fg: #A45A12;
  --color-topic-sea-bg: #E6F5F7;
  --color-topic-sea-fg: #1D6F7C;
  --color-topic-lilac-bg: #D8D0F1;
  --color-topic-lilac-fg: #2B2350;
  --color-topic-mint-bg: #DFEFE9;
  --color-topic-mint-fg: #1B6E52;
  --color-overlay-scrim: rgba(28, 23, 51, 0.478);
  --color-skeleton-base: rgba(110, 98, 176, 0.161);
  --color-skeleton-highlight: rgba(110, 98, 176, 0.102);
  --gradient-night: radial-gradient(circle at 50% 32.5%, #FFFFFF 0%, #F6F4F9 55%, #F2EFF5 100%);
  --gradient-accent: linear-gradient(135deg, #2B2350 0%, #D6335C 100%);
  --gradient-ring: linear-gradient(135deg, #7A6CC4 0%, #D6335C 100%);
  --gradient-brand: radial-gradient(circle at 50% 45%, #2B2350 0%, #0F0D12 100%);
  --gradient-backdrop: radial-gradient(circle at 50% 19%, #D9CEF4 0%, #EBE5F7 45%, #F2EFF5 100%);
  --gradient-brand-fill: linear-gradient(135deg, #D6335C 0%, #B8264B 100%);
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --type-display-xl-size: 2.25rem;
  --type-display-xl-line-height: 2.625rem;
  --type-display-xl-weight: 700;
  --type-display-xl-letter-spacing: 0px;
  --type-display-xl-family: var(--font-display);
  --type-display-l-size: 1.75rem;
  --type-display-l-line-height: 2.125rem;
  --type-display-l-weight: 700;
  --type-display-l-letter-spacing: 0px;
  --type-display-l-family: var(--font-display);
  --type-title-l-size: 1.5rem;
  --type-title-l-line-height: 1.875rem;
  --type-title-l-weight: 600;
  --type-title-l-letter-spacing: 0px;
  --type-title-l-family: var(--font-display);
  --type-title-m-size: 1.25rem;
  --type-title-m-line-height: 1.625rem;
  --type-title-m-weight: 600;
  --type-title-m-letter-spacing: 0px;
  --type-title-m-family: var(--font-ui);
  --type-body-l-size: 1.0625rem;
  --type-body-l-line-height: 1.625rem;
  --type-body-l-weight: 400;
  --type-body-l-letter-spacing: 0px;
  --type-body-l-family: var(--font-ui);
  --type-body-m-size: 0.9375rem;
  --type-body-m-line-height: 1.375rem;
  --type-body-m-weight: 400;
  --type-body-m-letter-spacing: 0px;
  --type-body-m-family: var(--font-ui);
  --type-label-m-size: 0.9375rem;
  --type-label-m-line-height: 1.25rem;
  --type-label-m-weight: 600;
  --type-label-m-letter-spacing: 0px;
  --type-label-m-family: var(--font-ui);
  --type-label-s-size: 0.8125rem;
  --type-label-s-line-height: 1.125rem;
  --type-label-s-weight: 600;
  --type-label-s-letter-spacing: 0px;
  --type-label-s-family: var(--font-ui);
  --type-caption-size: 0.75rem;
  --type-caption-line-height: 1rem;
  --type-caption-weight: 500;
  --type-caption-letter-spacing: 0px;
  --type-caption-family: var(--font-ui);
  --type-overline-size: 0.6875rem;
  --type-overline-line-height: 0.875rem;
  --type-overline-weight: 700;
  --type-overline-letter-spacing: 0.8px;
  --type-overline-family: var(--font-ui);
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --layout-screen-gutter: 16px;
  --layout-screen-gutter-large: 20px;
  --layout-large-phone-min-width: 428px;
  --layout-card-padding: 16px;
  --layout-section-gap: 24px;
  --layout-touch-target-min: 44px;
  --layout-content-max-width: 560px;
  --layout-tablet-min-width: 700px;
  --layout-tablet-page-max-width: 720px;
  --layout-sheet-max-width: 640px;
  --layout-notice-padding-v: 10px;
  --layout-short-screen: 700px;
  --size-icon-s: 16px;
  --size-icon-m: 20px;
  --size-icon-l: 24px;
  --size-icon-xl: 32px;
  --size-button-l: 48px;
  --size-button-m: 40px;
  --size-button-s: 32px;
  --size-list-row: 48px;
  --size-notice: 48px;
  --size-pill: 36px;
  --size-icon-tile: 36px;
  --size-option-tile: 56px;
  --size-scene-max: 280px;
  --size-scene-compact: 200px;
  --size-drop-dial: 200px;
  --size-cover: 136px;
  --size-call-control: 56px;
  --size-icon-button: 44px;
  --size-avatar-xs: 24px;
  --size-avatar-s: 32px;
  --size-avatar-m: 48px;
  --size-avatar-l: 72px;
  --size-avatar-xl: 96px;
  --size-badge-dot: 8px;
  --size-control-toggle-width: 52px;
  --size-control-toggle-height: 32px;
  --size-control-toggle-thumb: 26px;
  --size-control-checkbox: 24px;
  --size-control-slider-thumb: 28px;
  --size-control-slider-track: 4px;
  --size-otp-box-width: 48px;
  --size-otp-box-height: 56px;
  --size-orb-s: 48px;
  --size-orb-m: 144px;
  --size-orb-l: 200px;
  --size-orb-xl: 280px;
  --size-sheet-handle-width: 36px;
  --size-sheet-handle-height: 5px;
  --size-illustration: 120px;
  --border-width-hairline: 1px;
  --border-width-focus: 2px;
  --border-width-strong: 1.5px;
  --opacity-disabled: 0.4;
  --opacity-pressed-overlay: 0.08;
  --opacity-secondary-text: 0.72;
  --opacity-vignette: 0.4;
  --opacity-glow: 0.4;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --echo-ring-count: 5;
  --echo-gap: 0.12;
  --echo-stroke-max: 2;
  --echo-stroke-min: 0.75;
  --echo-opacity-max: 0.9;
  --echo-opacity-min: 0.14;
  --echo-wobble: 0.035;
  --echo-wobble-frequency: 3;
  --echo-phase-step: 0.7;
  --echo-sway-phase: 0.9;
  --echo-launch-intro-rings: 4;
  --echo-launch-breath-depth: 0.04;
  --echo-launch-exit-zoom: 0.06;
  --echo-launch-wobble-share: 0.06;
  --echo-ambient-settle-level: 0.3;
  --echo-field-burst-rings: 3;
  --echo-shape-edge-amplitude: 1.4;
  --echo-shape-edge-wavelength: 84;
  --echo-shape-crest-amplitude: 6;
  --echo-shape-divider-amplitude: 2;
  --echo-shape-reveal-rings: 3;
  --echo-shape-reveal-ring-gap: 18;
  --echo-shape-reveal-wobble: 10;
  --echo-shape-press-gap: 10;
  --echo-shape-cta-pulses: 2;
  --echo-shape-cta-pulse-opacity: 0.4;
  --echo-shape-progress-amplitude: 3;
  --echo-backdrop-rings: 8;
  --echo-backdrop-gap: 0.075;
  --echo-backdrop-opacity: 0.07;
  --echo-backdrop-hero-opacity: 0.16;
  --echo-backdrop-anchor-y: -0.42;
  --echo-backdrop-hero-glow: 1.35;
  --shadow-1: 0px 1px 2px 0px rgba(28, 23, 51, 0.059), 0px 1px 1px 0px rgba(28, 23, 51, 0.039);
  --shadow-2: 0px 8px 24px 0px rgba(28, 23, 51, 0.102);
  --shadow-3: 0px 16px 48px 0px rgba(28, 23, 51, 0.161);
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 180ms;
  --motion-duration-base: 260ms;
  --motion-duration-slow: 420ms;
  --motion-duration-ceremony-min: 900ms;
  --motion-duration-ceremony-max: 1400ms;
  --motion-duration-stagger: 120ms;
  --motion-duration-toast: 3000ms;
  --motion-duration-spinner-delay: 300ms;
  --motion-duration-loading-pulse: 1800ms;
  --motion-duration-orb-breath: 10000ms;
  --motion-duration-orb-ripple: 3200ms;
  --motion-duration-orb-shimmer: 12000ms;
  --motion-duration-orb-turn: 25000ms;
  --motion-duration-echo-cycle: 16000ms;
  --motion-duration-undo-window: 3000ms;
  --motion-duration-drop-arrival-retry: 15000ms;
  --motion-duration-ambient-settle-after: 45000ms;
  --motion-duration-ambient-settle-fade: 3000ms;
  --motion-duration-ambient-settle-wake: 1000ms;
  --motion-duration-launch-intro-first-ring: 120ms;
  --motion-duration-launch-intro-ring-travel: 3600ms;
  --motion-duration-launch-intro-ring-stagger: 600ms;
  --motion-duration-launch-intro-loop-stagger: 1800ms;
  --motion-duration-launch-intro-breath: 2400ms;
  --motion-duration-launch-intro-glow-in: 900ms;
  --motion-duration-launch-intro-total: 2600ms;
  --motion-duration-launch-intro-exit: 450ms;
  --motion-duration-launch-intro-exit-light: 700ms;
  --motion-duration-launch-intro-still-fade: 180ms;
  --motion-duration-echo-field-first-ring: 120ms;
  --motion-duration-echo-field-ring-travel: 11000ms;
  --motion-duration-echo-field-ring-stagger: 600ms;
  --motion-duration-echo-field-loop-stagger: 2800ms;
  --motion-duration-wave-page-reveal: 560ms;
  --motion-duration-wave-page-back: 320ms;
  --motion-duration-wave-tab-switch: 360ms;
  --motion-duration-wave-press-echo: 620ms;
  --motion-duration-wave-cta-idle: 6000ms;
  --motion-duration-wave-cta-pulse: 3200ms;
  --motion-duration-wave-cascade: 460ms;
  --motion-duration-wave-cascade-stagger: 70ms;
  --motion-duration-wave-morph: 280ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-launch-ring: cubic-bezier(0.3, 0.5, 0.4, 1);
  --motion-ease-launch-fade: cubic-bezier(0.4, 0, 0.7, 0.75);
  --motion-ease-wave: cubic-bezier(0.25, 0.8, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-night-500: #463E6C;
    --color-night-600: #2B2350;
    --color-night-700: #241F38;
    --color-night-800: #1A1628;
    --color-night-900: #0F0D12;
    --color-night-950: #0A090E;
    --color-mist: #F2EFF5;
    --color-white: #FFFFFF;
    --color-nar-300: #F0587F;
    --color-nar-500: #D6335C;
    --color-nar-700: #B8264B;
    --color-brand-100: #3A1830;
    --color-brand-500: #F0587F;
    --color-brand-600: #E24A72;
    --color-brand-text: #F47A9A;
    --color-brand-fill-end: #F59AB4;
    --color-dusk-100: #2B2350;
    --color-dusk-700: #CFC8F5;
    --color-gold-500: #F2B85E;
    --color-bg-canvas: #0F0D12;
    --color-bg-surface: rgba(143, 132, 200, 0.122);
    --color-bg-raised: rgba(143, 132, 200, 0.2);
    --color-bg-sunken: rgba(10, 9, 14, 0.451);
    --color-bg-solid: #1A1628;
    --color-bg-sheet: rgba(23, 19, 42, 0.949);
    --color-border-subtle: rgba(242, 239, 245, 0.102);
    --color-border-strong: rgba(242, 239, 245, 0.239);
    --color-text-primary: #F2EFF5;
    --color-text-secondary: #B6AECB;
    --color-text-tertiary: #857C9F;
    --color-text-on-brand: #0F0D12;
    --color-text-on-dusk: #0F0D12;
    --color-text-on-danger: #0F0D12;
    --color-text-on-gold: #0F0D12;
    --color-text-on-night: #F2EFF5;
    --color-success: #4CC99C;
    --color-warning: #F0B94A;
    --color-danger: #F58A8A;
    --color-verified: #6BA6F7;
    --color-notice-critical-bg: #392636;
    --color-notice-critical-border: rgba(245, 138, 138, 0.4);
    --color-notice-critical-fg: #F58A8A;
    --color-notice-warning-bg: #382D2D;
    --color-notice-warning-border: rgba(240, 185, 74, 0.4);
    --color-notice-warning-fg: #F0B94A;
    --color-notice-info-bg: rgba(143, 132, 200, 0.2);
    --color-notice-info-border: rgba(242, 239, 245, 0.239);
    --color-notice-info-fg: #F47A9A;
    --color-notice-ai-bg: #2B2350;
    --color-notice-ai-border: #2B2350;
    --color-notice-ai-fg: #CFC8F5;
    --color-topic-rose-bg: #412238;
    --color-topic-rose-fg: #F47A9A;
    --color-topic-amber-bg: #413032;
    --color-topic-amber-fg: #F7C08A;
    --color-topic-sea-bg: #243345;
    --color-topic-sea-fg: #8FD6E1;
    --color-topic-lilac-bg: #423D55;
    --color-topic-lilac-fg: #CFC8F5;
    --color-topic-mint-bg: #23363D;
    --color-topic-mint-fg: #8BE0C0;
    --color-overlay-scrim: rgba(5, 4, 8, 0.722);
    --color-skeleton-base: rgba(242, 239, 245, 0.102);
    --color-skeleton-highlight: rgba(143, 132, 200, 0.2);
    --gradient-night: radial-gradient(circle at 50% 32.5%, #2B2350 0%, #1B1631 55%, #0F0D12 100%);
    --gradient-accent: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
    --gradient-ring: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
    --gradient-brand: radial-gradient(circle at 50% 45%, #2B2350 0%, #0F0D12 100%);
    --gradient-backdrop: radial-gradient(circle at 50% 19%, #2B2350 0%, #1C1734 45%, #0F0D12 100%);
    --gradient-brand-fill: linear-gradient(135deg, #F0587F 0%, #F59AB4 100%);
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }
}

:root[data-theme="dark"] {
  --color-night-500: #463E6C;
  --color-night-600: #2B2350;
  --color-night-700: #241F38;
  --color-night-800: #1A1628;
  --color-night-900: #0F0D12;
  --color-night-950: #0A090E;
  --color-mist: #F2EFF5;
  --color-white: #FFFFFF;
  --color-nar-300: #F0587F;
  --color-nar-500: #D6335C;
  --color-nar-700: #B8264B;
  --color-brand-100: #3A1830;
  --color-brand-500: #F0587F;
  --color-brand-600: #E24A72;
  --color-brand-text: #F47A9A;
  --color-brand-fill-end: #F59AB4;
  --color-dusk-100: #2B2350;
  --color-dusk-700: #CFC8F5;
  --color-gold-500: #F2B85E;
  --color-bg-canvas: #0F0D12;
  --color-bg-surface: rgba(143, 132, 200, 0.122);
  --color-bg-raised: rgba(143, 132, 200, 0.2);
  --color-bg-sunken: rgba(10, 9, 14, 0.451);
  --color-bg-solid: #1A1628;
  --color-bg-sheet: rgba(23, 19, 42, 0.949);
  --color-border-subtle: rgba(242, 239, 245, 0.102);
  --color-border-strong: rgba(242, 239, 245, 0.239);
  --color-text-primary: #F2EFF5;
  --color-text-secondary: #B6AECB;
  --color-text-tertiary: #857C9F;
  --color-text-on-brand: #0F0D12;
  --color-text-on-dusk: #0F0D12;
  --color-text-on-danger: #0F0D12;
  --color-text-on-gold: #0F0D12;
  --color-text-on-night: #F2EFF5;
  --color-success: #4CC99C;
  --color-warning: #F0B94A;
  --color-danger: #F58A8A;
  --color-verified: #6BA6F7;
  --color-notice-critical-bg: #392636;
  --color-notice-critical-border: rgba(245, 138, 138, 0.4);
  --color-notice-critical-fg: #F58A8A;
  --color-notice-warning-bg: #382D2D;
  --color-notice-warning-border: rgba(240, 185, 74, 0.4);
  --color-notice-warning-fg: #F0B94A;
  --color-notice-info-bg: rgba(143, 132, 200, 0.2);
  --color-notice-info-border: rgba(242, 239, 245, 0.239);
  --color-notice-info-fg: #F47A9A;
  --color-notice-ai-bg: #2B2350;
  --color-notice-ai-border: #2B2350;
  --color-notice-ai-fg: #CFC8F5;
  --color-topic-rose-bg: #412238;
  --color-topic-rose-fg: #F47A9A;
  --color-topic-amber-bg: #413032;
  --color-topic-amber-fg: #F7C08A;
  --color-topic-sea-bg: #243345;
  --color-topic-sea-fg: #8FD6E1;
  --color-topic-lilac-bg: #423D55;
  --color-topic-lilac-fg: #CFC8F5;
  --color-topic-mint-bg: #23363D;
  --color-topic-mint-fg: #8BE0C0;
  --color-overlay-scrim: rgba(5, 4, 8, 0.722);
  --color-skeleton-base: rgba(242, 239, 245, 0.102);
  --color-skeleton-highlight: rgba(143, 132, 200, 0.2);
  --gradient-night: radial-gradient(circle at 50% 32.5%, #2B2350 0%, #1B1631 55%, #0F0D12 100%);
  --gradient-accent: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
  --gradient-ring: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
  --gradient-brand: radial-gradient(circle at 50% 45%, #2B2350 0%, #0F0D12 100%);
  --gradient-backdrop: radial-gradient(circle at 50% 19%, #2B2350 0%, #1C1734 45%, #0F0D12 100%);
  --gradient-brand-fill: linear-gradient(135deg, #F0587F 0%, #F59AB4 100%);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-ceremony-min: 0ms;
    --motion-duration-ceremony-max: 0ms;
    --motion-duration-stagger: 0ms;
    --motion-duration-toast: 0ms;
    --motion-duration-spinner-delay: 0ms;
    --motion-duration-loading-pulse: 0ms;
    --motion-duration-orb-breath: 0ms;
    --motion-duration-orb-ripple: 0ms;
    --motion-duration-orb-shimmer: 0ms;
    --motion-duration-orb-turn: 0ms;
    --motion-duration-echo-cycle: 0ms;
    --motion-duration-undo-window: 0ms;
    --motion-duration-drop-arrival-retry: 0ms;
    --motion-duration-ambient-settle-after: 0ms;
    --motion-duration-ambient-settle-fade: 0ms;
    --motion-duration-ambient-settle-wake: 0ms;
    --motion-duration-launch-intro-first-ring: 0ms;
    --motion-duration-launch-intro-ring-travel: 0ms;
    --motion-duration-launch-intro-ring-stagger: 0ms;
    --motion-duration-launch-intro-loop-stagger: 0ms;
    --motion-duration-launch-intro-breath: 0ms;
    --motion-duration-launch-intro-glow-in: 0ms;
    --motion-duration-launch-intro-total: 0ms;
    --motion-duration-launch-intro-exit: 0ms;
    --motion-duration-launch-intro-exit-light: 0ms;
    --motion-duration-launch-intro-still-fade: 0ms;
    --motion-duration-echo-field-first-ring: 0ms;
    --motion-duration-echo-field-ring-travel: 0ms;
    --motion-duration-echo-field-ring-stagger: 0ms;
    --motion-duration-echo-field-loop-stagger: 0ms;
    --motion-duration-wave-page-reveal: 0ms;
    --motion-duration-wave-page-back: 0ms;
    --motion-duration-wave-tab-switch: 0ms;
    --motion-duration-wave-press-echo: 0ms;
    --motion-duration-wave-cta-idle: 0ms;
    --motion-duration-wave-cta-pulse: 0ms;
    --motion-duration-wave-cascade: 0ms;
    --motion-duration-wave-cascade-stagger: 0ms;
    --motion-duration-wave-morph: 0ms;
  }
}

.night {
  --color-night-500: #463E6C;
  --color-night-600: #2B2350;
  --color-night-700: #241F38;
  --color-night-800: #1A1628;
  --color-night-900: #0F0D12;
  --color-night-950: #0A090E;
  --color-mist: #F2EFF5;
  --color-white: #FFFFFF;
  --color-nar-300: #F0587F;
  --color-nar-500: #D6335C;
  --color-nar-700: #B8264B;
  --color-brand-100: #3A1830;
  --color-brand-500: #F0587F;
  --color-brand-600: #E24A72;
  --color-brand-text: #F47A9A;
  --color-brand-fill-end: #F59AB4;
  --color-dusk-100: #2B2350;
  --color-dusk-700: #CFC8F5;
  --color-gold-500: #F2B85E;
  --color-bg-canvas: #0F0D12;
  --color-bg-surface: rgba(143, 132, 200, 0.122);
  --color-bg-raised: rgba(143, 132, 200, 0.2);
  --color-bg-sunken: rgba(10, 9, 14, 0.451);
  --color-bg-solid: #1A1628;
  --color-bg-sheet: rgba(23, 19, 42, 0.949);
  --color-border-subtle: rgba(242, 239, 245, 0.102);
  --color-border-strong: rgba(242, 239, 245, 0.239);
  --color-text-primary: #F2EFF5;
  --color-text-secondary: #B6AECB;
  --color-text-tertiary: #857C9F;
  --color-text-on-brand: #0F0D12;
  --color-text-on-dusk: #0F0D12;
  --color-text-on-danger: #0F0D12;
  --color-text-on-gold: #0F0D12;
  --color-text-on-night: #F2EFF5;
  --color-success: #4CC99C;
  --color-warning: #F0B94A;
  --color-danger: #F58A8A;
  --color-verified: #6BA6F7;
  --color-notice-critical-bg: #392636;
  --color-notice-critical-border: rgba(245, 138, 138, 0.4);
  --color-notice-critical-fg: #F58A8A;
  --color-notice-warning-bg: #382D2D;
  --color-notice-warning-border: rgba(240, 185, 74, 0.4);
  --color-notice-warning-fg: #F0B94A;
  --color-notice-info-bg: rgba(143, 132, 200, 0.2);
  --color-notice-info-border: rgba(242, 239, 245, 0.239);
  --color-notice-info-fg: #F47A9A;
  --color-notice-ai-bg: #2B2350;
  --color-notice-ai-border: #2B2350;
  --color-notice-ai-fg: #CFC8F5;
  --color-topic-rose-bg: #412238;
  --color-topic-rose-fg: #F47A9A;
  --color-topic-amber-bg: #413032;
  --color-topic-amber-fg: #F7C08A;
  --color-topic-sea-bg: #243345;
  --color-topic-sea-fg: #8FD6E1;
  --color-topic-lilac-bg: #423D55;
  --color-topic-lilac-fg: #CFC8F5;
  --color-topic-mint-bg: #23363D;
  --color-topic-mint-fg: #8BE0C0;
  --color-overlay-scrim: rgba(5, 4, 8, 0.722);
  --color-skeleton-base: rgba(242, 239, 245, 0.102);
  --color-skeleton-highlight: rgba(143, 132, 200, 0.2);
  --gradient-night: radial-gradient(circle at 50% 32.5%, #2B2350 0%, #1B1631 55%, #0F0D12 100%);
  --gradient-accent: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
  --gradient-ring: linear-gradient(135deg, #F2EFF5 0%, #F0587F 100%);
  --gradient-brand: radial-gradient(circle at 50% 45%, #2B2350 0%, #0F0D12 100%);
  --gradient-backdrop: radial-gradient(circle at 50% 19%, #2B2350 0%, #1C1734 45%, #0F0D12 100%);
  --gradient-brand-fill: linear-gradient(135deg, #F0587F 0%, #F59AB4 100%);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  color: var(--color-text-primary);
}
/* Dove landing. Every colour, size, radius and duration comes from packages/design-tokens
   (tokens.css is concatenated in front of this file at build time). Web-only scales are derived
   from tokens (docs/03 §10: display type 44–88 px, calm motion). The whole site uses the night
   tone: `<html class="night">` gets the dark token values (generated from tokens.css), so it looks
   the same whatever the visitor's system theme is.
   Layout language and section rhythm follow the owner's Tellsy landing: glass cards on night,
   one accent word per heading, a full-bleed strip of real screens, calm reveal on scroll. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --web-max: calc(var(--layout-content-max-width) * 2);
  --web-text: calc(var(--layout-content-max-width) * 1.3);
  --web-gutter: var(--layout-screen-gutter);
  --web-section: var(--space-16);
  --web-display: clamp(calc(var(--type-display-xl-size) * 1.2222), 1.4rem + 4.6vw, calc(var(--type-display-xl-size) * 2.4444));
  --web-h2: clamp(var(--type-display-l-size) * 1.15, 1.1rem + 3vw, calc(var(--type-display-xl-size) * 1.5556));
  --web-lead: clamp(var(--type-body-l-size), 0.9rem + 0.45vw, var(--type-title-m-size));
  --header-h: calc(var(--size-button-l) + var(--space-4));
  --glass: var(--color-bg-surface);
  --line: var(--color-border-subtle);
  --glow-brand: color-mix(in srgb, var(--color-nar-500) 40%, transparent);
  --glow-dusk: color-mix(in srgb, var(--color-night-600) 80%, transparent);
  --reveal-time: calc(var(--motion-duration-slow) * 2);
}
@media (min-width: 428px) { :root { --web-gutter: var(--layout-screen-gutter-large); } }
@media (min-width: 960px) { :root { --web-gutter: var(--space-10); --web-section: calc(var(--space-16) * 1.5); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); background: var(--color-bg-canvas); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; position: relative;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Soft dusk + pomegranate light at the top of every page (Tellsy's fixed glow, Dove colours). */
body::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 auto; height: min(140vh, calc(var(--web-max) * 1.1));
  background:
    radial-gradient(55% 55% at 22% 12%, var(--glow-dusk), transparent 70%),
    radial-gradient(45% 45% at 88% 4%, color-mix(in srgb, var(--color-nar-500) 16%, transparent), transparent 70%);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-brand-text); text-underline-offset: 0.18em; text-decoration-thickness: var(--border-width-hairline); }
a:hover { text-decoration-thickness: var(--border-width-focus); }
:focus-visible { outline: var(--border-width-focus) solid var(--color-brand-text); outline-offset: var(--space-1); border-radius: var(--radius-s); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
p { margin: 0; }
strong { font-weight: 700; }
.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 {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: 10;
  background: var(--color-bg-solid); color: var(--color-text-primary); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); font-weight: 600;
}
.skip:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: calc(var(--web-max) + 2 * var(--web-gutter)); margin: 0 auto; padding: 0 var(--web-gutter); }
.narrow { max-width: calc(var(--web-text) + 2 * var(--web-gutter)); }

.overline {
  font-family: var(--type-overline-family); font-size: var(--type-overline-size); line-height: var(--type-overline-line-height);
  font-weight: var(--type-overline-weight); letter-spacing: calc(var(--type-overline-letter-spacing) * 1.6); text-transform: uppercase;
  color: var(--color-brand-text); margin-bottom: var(--space-3);
}
.accent {
  background: var(--gradient-brand-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: 0.04em;
}
@media (forced-colors: active) { .accent { color: CanvasText; background: none; } }
.lead { font-size: var(--web-lead); line-height: 1.6; color: var(--color-text-secondary); max-width: 60ch; }
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--color-bg-canvas) 72%, transparent);
  border-bottom: var(--border-width-hairline) solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--space-4)); backdrop-filter: saturate(1.4) blur(var(--space-4));
}
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); text-decoration: none; min-height: var(--layout-touch-target-min); }
.brand svg { width: calc(var(--size-icon-xl) * 1.1); height: auto; fill: currentColor; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: var(--type-title-l-size); letter-spacing: -0.01em; line-height: 1; }
.site-nav { display: none; margin-left: auto; gap: var(--space-1); }
.site-nav a {
  color: var(--color-text-secondary); text-decoration: none; font-weight: 600; font-size: var(--type-label-m-size);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); min-height: var(--layout-touch-target-min); display: inline-flex; align-items: center;
}
.site-nav a:hover { color: var(--color-text-primary); background: var(--glass); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-nav + .header-actions { margin-left: var(--space-2); }
.lang {
  color: var(--color-text-primary); text-decoration: none; font-weight: 700; font-size: var(--type-label-s-size); letter-spacing: var(--type-overline-letter-spacing);
  min-width: var(--layout-touch-target-min); min-height: var(--size-button-m); padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: var(--border-width-hairline) solid var(--line);
}
.lang:hover { background: var(--glass); }
@media (min-width: 960px) { .site-nav { display: flex; } }

/* ---------- buttons & badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-button-l); padding: 0 var(--space-5); border-radius: var(--radius-full);
  font-weight: 700; font-size: var(--type-label-m-size); text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-ui);
}
.btn svg { width: var(--size-icon-m); height: var(--size-icon-m); flex: none; }
.btn-s { min-height: var(--size-button-m); padding: 0 var(--space-4); }
.btn-primary { background: var(--gradient-brand-fill); color: var(--color-text-on-brand); }
.btn-primary:hover { filter: brightness(1.06); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--color-text-primary); border: var(--border-width-hairline) solid var(--line); }
.btn-ghost:hover { background: var(--glass); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.badges a { display: inline-block; border-radius: var(--radius-s); line-height: 0; }
.badges img { height: var(--size-button-l); width: auto; }
.round {
  width: var(--size-icon-button); height: var(--size-icon-button); border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); color: var(--color-text-primary); border: var(--border-width-hairline) solid var(--line);
}
.round svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.round:hover { background: var(--color-bg-raised); }
.round:disabled { opacity: var(--opacity-disabled); cursor: default; }

/* ---------- phone frame (real app screens) ---------- */
.phone {
  position: relative; width: min(100%, calc(var(--size-orb-xl) * 1.1)); aspect-ratio: 600 / 1304; margin: 0 auto;
  border-radius: calc(var(--radius-xl) * 1.6); padding: calc(var(--space-2) + var(--space-1) / 2);
  background: var(--color-night-950);
  box-shadow:
    0 0 0 var(--border-width-hairline) var(--color-border-strong),
    inset 0 0 0 var(--border-width-hairline) var(--line),
    0 var(--space-12) calc(var(--space-16) * 2) calc(-1 * var(--space-10)) var(--glow-brand),
    0 var(--space-8) calc(var(--space-16) * 1.4) color-mix(in srgb, var(--color-night-950) 70%, transparent);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--radius-xl) * 1.3); background: var(--color-night-900); }
.phone.short { aspect-ratio: 600 / 1159; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-grid { position: relative; display: grid; gap: var(--space-10); padding-top: var(--space-10); padding-bottom: calc(var(--space-16) + var(--space-6)); }
.hero-copy { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-content: center; }
.hero-copy .overline { margin: 0; }
.hero h1 { font-size: var(--web-display); line-height: 1; letter-spacing: -0.03em; font-weight: 700; max-width: 14ch; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hero-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); color: var(--color-text-secondary); }
.hero-note svg { width: var(--size-icon-m); height: var(--size-icon-m); color: var(--color-success); flex: none; }
.hero-stage { position: relative; display: grid; place-items: center; padding: var(--space-8) 0; }
.hero-art { position: absolute; inset: calc(-1 * var(--space-10)); pointer-events: none; }
.hero-art svg { position: absolute; left: 50%; top: 50%; width: 175%; height: auto; aspect-ratio: 1; max-width: none; translate: -50% -50%; transform-origin: 50% 50%; will-change: transform; }
.hero-art .ring { fill: none; stroke: url(#ring-grad); vector-effect: non-scaling-stroke; }
.hero-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-brand), transparent); opacity: var(--opacity-glow); }
.hero-phone { position: relative; width: min(74%, calc(var(--size-orb-xl) * 1.12)); rotate: -3deg; }
.hero-art { -webkit-mask-image: radial-gradient(closest-side, var(--color-night-950) 72%, transparent); mask-image: radial-gradient(closest-side, var(--color-night-950) 72%, transparent); }
.motion-toggle {
  position: absolute; right: var(--web-gutter); bottom: var(--space-4); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-touch-target-min);
  padding: 0 var(--space-3); border-radius: var(--radius-full); border: var(--border-width-hairline) solid var(--line);
  background: var(--color-bg-sheet); color: var(--color-text-secondary); font: 600 var(--type-label-s-size) / 1 var(--font-ui); cursor: pointer;
}
.motion-toggle svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.motion-toggle[hidden] { display: none; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; min-height: min(calc(100vh - var(--header-h)), calc(var(--web-max) * 0.74)); padding-top: var(--space-8); padding-bottom: var(--space-16); }
  .hero-stage { padding: var(--space-10) 0; }
}

/* ---------- gallery: full-bleed strip of real screens ---------- */
.gallery-sec { position: relative; padding-bottom: var(--space-8); }
.gallery {
  --edge: max(var(--web-gutter), calc((100vw - var(--web-max)) / 2));
  display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain;
  padding: var(--space-2) var(--edge) var(--space-5); scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
}
.gallery:focus-visible { outline-offset: calc(-1 * var(--border-width-focus)); }
.shot {
  flex: none; margin: 0; scroll-snap-align: start; overflow: hidden; position: relative;
  width: min(74vw, calc(var(--size-orb-xl) * 1.02)); aspect-ratio: 290 / 470;
  display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0;
  border-radius: var(--radius-xl); border: var(--border-width-hairline) solid var(--line);
  background: var(--gradient-backdrop);
}
.shot figcaption { font-family: var(--font-display); font-weight: 700; font-size: var(--type-title-l-size); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; min-height: 2.24em; }
.shot .phone { width: 86%; align-self: start; box-shadow: 0 0 0 var(--border-width-hairline) var(--color-border-strong), 0 var(--space-8) var(--space-16) calc(-1 * var(--space-6)) var(--glow-brand); }
.gallery-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.gallery-nav { display: flex; gap: var(--space-2); }
.gallery-nav[hidden] { display: none; }
.screens-note { font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); color: var(--color-text-tertiary); }

/* ---------- sections ---------- */
.section { padding: var(--web-section) 0; position: relative; }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-10); max-width: var(--web-text); }
.section-head .overline { margin: 0; }
.section-head h2 { font-size: var(--web-h2); line-height: 1.04; letter-spacing: -0.025em; font-weight: 700; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.backdrop { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-night-800) 55%, transparent) 18%, color-mix(in srgb, var(--color-night-800) 55%, transparent) 82%, transparent); }

.card {
  background: var(--glass); border: var(--border-width-hairline) solid var(--line);
  border-radius: calc(var(--radius-l) * 1.33); padding: var(--space-6);
}
.badge {
  width: calc(var(--size-icon-tile) * 1.22); height: calc(var(--size-icon-tile) * 1.22); border-radius: calc(var(--radius-m) * 1.2);
  display: grid; place-items: center; flex: none;
  background: var(--color-brand-100); color: var(--color-brand-text);
}
.badge svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.badge.verified { background: color-mix(in srgb, var(--color-verified) 16%, transparent); color: var(--color-verified); }
.label-sm { font-size: var(--type-label-s-size); font-weight: 700; letter-spacing: var(--type-overline-letter-spacing); text-transform: uppercase; color: var(--color-text-tertiary); }
.label-sm.is-dove { color: var(--color-brand-text); }

/* different */
.compare { display: grid; gap: var(--space-3); }
.compare-head { display: none; }
.compare-row { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6); }
.compare-row .was { color: var(--color-text-tertiary); text-decoration: line-through; text-decoration-color: var(--color-border-strong); text-decoration-thickness: var(--border-width-hairline); }
.compare-row .now { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; }
.compare-row .now svg { flex: none; width: var(--size-icon-l); height: var(--size-icon-l); color: var(--color-brand-text); }
@media (min-width: 760px) {
  .compare-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-8); padding: 0 var(--space-6); }
  .compare-row { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); align-items: center; }
}

/* how it works: step cards */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.step { display: grid; gap: var(--space-2); align-content: start; }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.step-no { font-family: var(--font-display); font-weight: 700; font-size: var(--type-title-l-size); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.step .overline { margin: 0; }
.step h3 { font-size: var(--type-title-m-size); line-height: var(--type-title-m-line-height); letter-spacing: -0.01em; }
.step p:not(.overline) { color: var(--color-text-secondary); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.chips li {
  min-height: calc(var(--size-pill) * 0.8); display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--color-brand-100); color: var(--color-brand-text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--type-label-s-size);
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* matchmaker (AI surfaces use the dusk family: docs/03 §2.5) */
.mm { display: grid; gap: var(--space-8); align-items: center; }
.mm .section-head { margin-bottom: 0; }
.why {
  position: relative; background: var(--color-dusk-100); color: var(--color-dusk-700); border-radius: calc(var(--radius-l) * 1.33);
  border: var(--border-width-hairline) solid var(--line);
  padding: var(--space-8) var(--space-6) var(--space-6); display: grid; gap: var(--space-3); max-width: calc(var(--layout-content-max-width) * 0.85); justify-self: center; width: 100%; margin: 0;
  box-shadow: 0 var(--space-12) calc(var(--space-16) * 1.5) calc(-1 * var(--space-10)) var(--glow-brand);
}
.why-top { display: flex; align-items: center; gap: var(--space-3); }
.orb-mini { width: var(--size-avatar-s); height: var(--size-avatar-s); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-mist), var(--color-nar-300) 70%); flex: none; }
.why .overline { margin: 0; color: var(--color-dusk-700); }
.why > p { font-family: var(--font-display); font-weight: 600; font-size: var(--type-title-l-size); line-height: var(--type-title-l-line-height); color: var(--color-text-primary); }
.tag {
  margin-left: auto; font-size: var(--type-caption-size); font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
  border: var(--border-width-hairline) solid currentColor; opacity: var(--opacity-secondary-text);
}
.venn { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.venn span { width: var(--size-avatar-l); height: var(--size-avatar-l); border-radius: 50%; border: var(--border-width-strong) solid var(--color-dusk-700); opacity: 0.8; }
.venn span + span { margin-left: calc(-1 * var(--size-avatar-l) / 3); border-color: var(--color-brand-500); }
.facts { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.fact {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: calc(var(--radius-l) * 1.1);
  border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-success) 28%, transparent);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
  font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height);
}
.fact svg { flex: none; width: var(--size-icon-m); height: var(--size-icon-m); color: var(--color-success); margin-top: calc(var(--space-1) / 2); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mm { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-16); } }

/* safety */
.grid { display: grid; gap: var(--space-4); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--size-orb-xl) * 1.05)), 1fr)); }
@media (min-width: 640px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
.feature { display: grid; gap: var(--space-3); align-content: start; }
.feature h3, .feature .h3 { font-family: var(--font-display); font-size: var(--type-title-m-size); line-height: var(--type-title-m-line-height); font-weight: 700; margin-top: var(--space-2); }
.feature p { color: var(--color-text-secondary); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); }
.free-pill {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); font-weight: 700; font-size: var(--type-label-s-size); width: fit-content;
}
.free-pill svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.split { display: grid; gap: var(--space-12); }
.split-phone .phone { width: min(70%, calc(var(--size-orb-xl) * 1.05)); }
@media (min-width: 1000px) {
  .split { grid-template-columns: 1fr auto; gap: var(--space-16); align-items: start; }
  .split-phone { position: sticky; top: calc(var(--header-h) + var(--space-8)); width: calc(var(--size-orb-xl) * 1.1); }
  .split-phone .phone { width: 100%; rotate: 2deg; }
}
.inline-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* plans */
.tiers { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--size-orb-xl) * 1.05)), 1fr)); align-items: stretch; }
.tier { display: grid; gap: var(--space-4); align-content: start; }
.tier h3 { font-size: var(--type-display-l-size); line-height: var(--type-display-l-line-height); display: flex; align-items: center; gap: var(--space-2); }
.tier h3 svg { width: var(--size-icon-l); height: var(--size-icon-l); color: var(--color-gold-500); }
.tier .tagline { color: var(--color-text-secondary); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); }
.tier ul { list-style: none; padding: var(--space-4) 0 0; margin: 0; display: grid; gap: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); }
.tier li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); }
.tier li svg { flex: none; width: var(--size-icon-m); height: var(--size-icon-m); color: var(--color-brand-text); }
.tier.plus { border-color: color-mix(in srgb, var(--color-brand-text) 40%, transparent); }
.tier.premium { border-color: color-mix(in srgb, var(--color-gold-500) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--color-gold-500) 8%, transparent), var(--glass) 55%); }
.tier.premium li svg { color: var(--color-gold-500); }
.plans-note { margin-top: var(--space-6); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); color: var(--color-text-secondary); max-width: 70ch; }

/* faq (one glass box, rows split by hairlines) */
.faq { background: var(--glass); border: var(--border-width-hairline) solid var(--line); border-radius: calc(var(--radius-l) * 1.33); padding: var(--space-1) var(--space-6); }
.faq details { border-bottom: var(--border-width-hairline) solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; min-height: var(--size-option-tile); font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: var(--size-icon-m); height: var(--size-icon-m); color: var(--color-brand-text); transition: transform var(--motion-duration-base) var(--motion-ease-standard); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--space-5); color: var(--color-text-secondary); max-width: 68ch; }

/* closing CTA */
.cta { position: relative; overflow: hidden; isolation: isolate; background: var(--gradient-brand); text-align: center; border-top: var(--border-width-hairline) solid var(--line); }
.cta .wrap { position: relative; display: grid; gap: var(--space-6); justify-items: center; padding-top: calc(var(--web-section) * 1.1); padding-bottom: calc(var(--web-section) * 1.1); }
.cta h2 { font-size: var(--web-h2); line-height: 1.04; letter-spacing: -0.025em; max-width: 16ch; }
.cta .badges { justify-content: center; }
.cta .emblem { width: calc(var(--size-avatar-l) * 0.9); }
.cta-art { position: absolute; left: 50%; top: 50%; width: calc(var(--web-max) * 1.3); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0.32; pointer-events: none; z-index: -1; }
.cta-art .ring { fill: none; stroke: url(#ring-grad-cta); vector-effect: non-scaling-stroke; }
.cta-art svg { width: 100%; height: 100%; }

/* footer */
.site-footer { border-top: var(--border-width-hairline) solid var(--line); padding: var(--space-12) 0 var(--space-10); font-size: var(--type-body-m-size); line-height: var(--type-body-m-line-height); background: var(--color-night-950); }
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(calc(var(--size-orb-m) * 1.1), 1fr)); }
.footer-brand { display: grid; gap: var(--space-3); align-content: start; grid-column: 1 / -1; max-width: 34ch; }
.site-footer h2 { font-family: var(--font-ui); font-size: var(--type-overline-size); letter-spacing: calc(var(--type-overline-letter-spacing) * 1.6); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.site-footer ul a { color: var(--color-text-secondary); text-decoration: none; display: inline-flex; min-height: calc(var(--layout-touch-target-min) * 0.8); align-items: center; }
.site-footer ul a:hover { color: var(--color-text-primary); text-decoration: underline; }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--border-width-hairline) solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; color: var(--color-text-tertiary); }
.footer-bottom a { color: inherit; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }

/* ---------- inner pages (legal, support, deletion, safety) ---------- */
.page main { padding-bottom: var(--web-section); }
.page-head { padding: var(--space-16) 0 var(--space-10); display: grid; gap: var(--space-4); border-bottom: var(--border-width-hairline) solid var(--line); margin-bottom: var(--space-10); }
.page-head .overline { margin: 0; }
.page-head h1 { font-size: var(--web-h2); line-height: 1.04; letter-spacing: -0.025em; font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-tertiary); font-size: var(--type-body-m-size); }
.meta span + span::before { content: '·'; margin-right: var(--space-4); }
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--type-title-l-size); line-height: var(--type-title-l-line-height); margin: var(--space-12) 0 var(--space-3); letter-spacing: -0.01em; }
.prose h3 { font-family: var(--font-ui); font-size: var(--type-title-m-size); line-height: var(--type-title-m-line-height); margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.prose strong { color: var(--color-text-primary); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-brand-text); }
.prose > :first-child { margin-top: 0; }
.prose .card { margin: var(--space-8) 0; }
.prose .card p { color: var(--color-text-primary); }
nav.prose { margin-top: var(--space-12); padding-top: var(--space-2); border-top: var(--border-width-hairline) solid var(--line); }
.note {
  background: var(--color-dusk-100); color: var(--color-dusk-700); border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); font-weight: 500;
}
.prose .note { color: var(--color-dusk-700); }
.toc { margin: 0 0 var(--space-10); background: var(--glass); border: var(--border-width-hairline) solid var(--line); border-radius: calc(var(--radius-l) * 1.1); padding: var(--space-2) var(--space-5); }
.toc summary { cursor: pointer; font-weight: 700; min-height: var(--layout-touch-target-min); display: flex; align-items: center; }
.toc ol { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-6); columns: 2 calc(var(--size-orb-xl)); font-size: var(--type-body-m-size); }
.toc li { margin-bottom: var(--space-1); break-inside: avoid; }
.stack { display: grid; gap: var(--space-4); }
.stack .card { display: grid; gap: var(--space-2); }
.stack .card .overline { margin: 0; }
.stack .card p { color: var(--color-text-secondary); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: var(--type-body-m-size); margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--glass); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-m); width: fit-content; }
.kv dt { color: var(--color-text-tertiary); }
.kv dd { margin: 0; font-weight: 600; color: var(--color-text-primary); }
.callout {
  border: var(--border-width-hairline) solid var(--color-notice-critical-border); background: var(--color-notice-critical-bg);
  border-radius: var(--radius-m); padding: var(--space-3) var(--space-5); margin: var(--space-6) 0;
}
.callout strong { color: var(--color-notice-critical-fg); }

/* invite + 404 */
.center-page { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; text-align: center; padding: var(--space-12) 0; position: relative; overflow: hidden; isolation: isolate; }
.center-page .inner { position: relative; display: grid; gap: var(--space-5); justify-items: center; max-width: var(--layout-content-max-width); }
.center-page h1 { font-size: var(--web-h2); line-height: 1.06; letter-spacing: -0.025em; }
.center-page .badges { justify-content: center; }
.invite .center-page { background: var(--gradient-brand); }
.center-page .cta-art { opacity: 0.4; }
.code-box {
  display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-full); background: var(--color-bg-raised); border: var(--border-width-hairline) solid var(--color-border-strong);
}
.code-box code { font-family: var(--font-mono); font-size: var(--type-title-l-size); font-weight: 700; letter-spacing: 0.08em; }
.code-box[hidden], [data-invite-empty][hidden] { display: none; }
.emblem { width: var(--size-illustration); color: var(--color-text-primary); }
.emblem svg { width: 100%; height: auto; fill: currentColor; }

/* ---------- calm reveal on scroll ----------
   Only with JS and without reduced motion; one slow fade, never a bounce. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal [data-reveal] {
    opacity: 0; translate: 0 var(--space-5);
    transition: opacity var(--reveal-time) var(--motion-ease-standard), translate var(--reveal-time) var(--motion-ease-standard);
  }
  html.js-reveal [data-reveal].is-in { opacity: 1; translate: none; }
}

@media print {
  .site-header, .site-footer, .motion-toggle, .hero-art, .hero-stage, .gallery-sec, .cta { display: none; }
  body { background: none; color: black; }
  body::before { display: none; }
}