/* Пять базовых цветов. 60% — нейтральные фоны, 30% — персиковая
   идентика логотипа, 10% — фиолетовые действия. Это визуальный баланс,
   а не требование закрашивать ровно столько пикселей на каждом экране.
   Лендинг использует четыре цвета: без отдельной белой поверхности. */
:root {
  --brand-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --palette-canvas: #f7f5f1;
  --palette-surface: #ffffff;
  --palette-ink: #2b2630;
  --palette-identity: #eedbc9;
  --palette-accent: #7850ad;

  --brand-primary: var(--palette-accent);
  --brand-paper: var(--palette-canvas);
  --brand-ink: var(--palette-ink);
  --brand-bg: var(--palette-canvas);
  --brand-surface: var(--palette-surface);
  --brand-soft: var(--palette-canvas);
  --brand-text: var(--palette-ink);
  --brand-muted: color-mix(in srgb, var(--brand-text) 74%, var(--brand-bg));
  --brand-border: color-mix(in srgb, var(--brand-text) 15%, var(--brand-bg));
  --brand-accent: var(--palette-accent);
  --brand-accent-text: var(--palette-surface);
  --brand-link: var(--brand-accent);
  --brand-highlight: var(--palette-identity);
  --brand-highlight-text: var(--brand-text);
  /* Soft personal accents; shared by every fallback avatar. */
  --avatar-lavender: #e9dff3;
  --avatar-sage: #dfe9db;
  --avatar-peach: #f3ddcd;
  --avatar-cream: #f0e7c9;
  --avatar-rose: #efdee4;
  --event-art-gold: #d99442;
  --event-art-cream: #fff5e8;
  --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface));
  /* Семантические состояния, не декоративные цвета палитры. */
  --brand-danger: #af382e;
  --brand-danger-bg: color-mix(in srgb, var(--brand-danger) 8%, var(--brand-surface));
  --brand-shadow: 0 6px 24px rgb(43 38 48 / 5%);
  --brand-floating-shadow: 0 12px 40px rgb(43 38 48 / 12%);
  --brand-radius: 20px;
  /* Шкала шрифта: шаг задаёт роль, а не близость к прежнему литералу. 12px —
     нижняя граница: мельче подпись на телефоне уже не читается. Дисплейные
     размеры растут с шириной экрана и живут только у героев и заголовков
     страниц. `--text-glyph` — не текст, а эмодзи или марка размером с иконку.
     Копия для статики — `public/legal.css`, число для графиков — `type-scale.ts`. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-display: clamp(28px, 3.8vw, 40px);
  --text-display-lg: clamp(36px, 4.7vw, 64px);
  --text-glyph: 44px;
  /* Отступы — сетка в 4px. Карточка и строка списка держат 16 внутри, герой,
     шторка и крупная карточка — 24; блоки в стопке идут через 12, мелкие
     элементы в ряд — через 8. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg: #211f23;
    --brand-surface: #2d2a30;
    --brand-soft: var(--brand-bg);
    --brand-text: #f6f2ed;
    --brand-accent: #c3a4e8;
    --brand-accent-text: var(--brand-bg);
    --brand-highlight: #483b32;
    --brand-muted: color-mix(in srgb, var(--brand-text) 74%, var(--brand-bg));
    --brand-border: color-mix(in srgb, var(--brand-text) 20%, var(--brand-bg));
    --brand-highlight-text: var(--brand-text);
    --avatar-lavender: #483b57;
    --avatar-sage: #35473b;
    --avatar-peach: #523e34;
    --avatar-cream: #49442f;
    --avatar-rose: #503842;
    --event-art-gold: #f5c478;
    --event-art-cream: #ddc9b6;
    --brand-danger: #ffaca3;
    --brand-shadow: 0 6px 24px rgb(0 0 0 / 12%);
    --brand-floating-shadow: 0 12px 40px rgb(0 0 0 / 30%);
  }
}

.gm-login-back { display: inline-block; padding: var(--space-4); color: var(--app-link); font-size: var(--text-sm); }
.gm-landing {
  --gm-paper: var(--palette-canvas);
  --gm-ink: var(--palette-ink);
  --gm-accent: var(--palette-accent);
  --gm-peach: var(--palette-identity);
  --gm-muted: color-mix(in srgb, var(--gm-ink) 74%, var(--gm-paper));
  --gm-line: color-mix(in srgb, var(--gm-ink) 13%, var(--gm-paper));
  --gm-soft: color-mix(in srgb, var(--gm-accent) 5%, var(--gm-paper));
  color-scheme: light;
  background: var(--gm-paper);
  color: var(--gm-ink);
  font-family: var(--brand-font);
  font-size: var(--text-md);
  line-height: 1.6;
  overflow: clip;
}
.gm-landing *, .gm-landing *::before, .gm-landing *::after { box-sizing: border-box; }
.gm-landing a { color: inherit; text-decoration: none; }
.gm-landing a:focus-visible, .gm-landing summary:focus-visible { outline: 3px solid var(--gm-accent); outline-offset: 5px; }
.gm-landing h1, .gm-landing h2, .gm-landing p { margin: 0; }
.gm-landing h1, .gm-landing h2 { text-wrap: balance; }
.gm-landing img { display: block; max-width: 100%; height: auto; }
.gm-landing section[id] { scroll-margin-top: 32px; }
.gm-container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.gm-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-bottom: 1px solid var(--gm-line); }
.gm-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -1.5px; white-space: nowrap; }
.gm-brand img { border-radius: 12px; }
.gm-brand-dot { color: var(--gm-accent); }
.gm-nav { display: flex; gap: var(--space-8); font-size: var(--text-sm); font-weight: 550; }
.gm-nav a { padding-block: var(--space-3); }
.gm-nav a:hover, .gm-footer a:hover, .gm-agent-note a:hover { text-decoration: underline; text-underline-offset: 5px; }
.gm-login { display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-2) var(--space-4); border: 1px solid var(--gm-line); border-radius: 40px; font-weight: 600; min-height: 44px; }
.gm-login:hover { background: var(--gm-soft); }
.gm-skip { position: absolute; top: -100px; left: 20px; padding: var(--space-3) var(--space-4); background: var(--gm-paper); z-index: 100; }
.gm-skip:focus { top: 12px; }
.gm-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-6); padding-block: var(--space-12) 64px; }
.gm-eyebrow { color: var(--gm-muted); font-size: var(--text-xs); font-weight: 650; letter-spacing: 1.3px; }
.gm-hero .gm-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.gm-spark { color: var(--gm-accent); font-size: var(--text-xl); }
.gm-hero h1, .gm-story-copy h2, .gm-faq h2, .gm-final h2 { font-size: var(--text-display); line-height: 1.15; letter-spacing: -.04em; font-weight: 700; }
.gm-intro, .gm-story-copy > p:not(.gm-eyebrow):not(.gm-story-note):not(.gm-agent-note), .gm-final > p:not(.gm-eyebrow):not(.gm-signup-note) { font-size: var(--text-lg); line-height: 1.65; }
.gm-intro { max-width: 465px; margin-block: var(--space-6) var(--space-8) !important; color: var(--gm-muted); }
.gm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.gm-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 60px; padding: var(--space-4) var(--space-6); border-radius: 16px; background: var(--gm-accent); color: var(--palette-surface) !important; font-size: var(--text-md); font-weight: 650; box-shadow: 0 8px 24px color-mix(in srgb, var(--gm-accent) 16%, transparent); transition: transform .2s, box-shadow .2s; }
.gm-button > span, .gm-secondary-button > span { font-size: var(--text-lg); }
.gm-button:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--gm-accent) 26%, transparent); }
.gm-button:active { transform: translateY(0); }
.gm-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 60px; padding: var(--space-4); font-size: var(--text-md); font-weight: 650; border: 1px solid var(--gm-line); border-radius: 16px; }
.gm-secondary-button:hover { background: var(--gm-soft); }
.gm-signup-note { margin-top: var(--space-4) !important; color: var(--gm-muted); font-size: var(--text-sm); }
.gm-hero-art { min-width: 0; width: 100%; justify-self: end; }
.gm-scene { width: 100%; mix-blend-mode: darken; mask-image: linear-gradient(to right, transparent, #000 3% 97%, transparent), linear-gradient(to bottom, transparent, #000 3% 97%, transparent); mask-composite: intersect; }
.gm-hero-art .gm-scene { mix-blend-mode: normal; mask-image: none; }
.gm-story { display: grid; align-items: center; gap: var(--space-12); padding-block: 72px 96px; border-top: 1px solid var(--gm-line); }
.gm-story-wishes { grid-template-columns: 1.2fr .85fr; }
.gm-story-memory { grid-template-columns: .85fr 1.2fr; }
.gm-story-copy { min-width: 0; }
.gm-story-copy h2, .gm-faq h2 { margin-top: var(--space-4); }
.gm-story-copy > p:not(.gm-eyebrow):not(.gm-story-note):not(.gm-agent-note) { margin-top: var(--space-6); color: var(--gm-muted); }
.gm-story-copy > .gm-button { margin-top: var(--space-8); }
.gm-story-note { margin-top: var(--space-4) !important; color: var(--gm-muted); font-size: var(--text-sm); }
.gm-story-art { min-width: 0; }
.gm-assistant-features { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-block: var(--space-6); font-size: var(--text-sm); }
.gm-assistant-features li { display: flex; align-items: center; gap: var(--space-3); }
.gm-assistant-features li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--gm-peach); font-size: var(--text-lg); }
.gm-agent-note { padding-top: var(--space-4); border-top: 1px solid var(--gm-line); color: var(--gm-muted); font-size: var(--text-sm); }
.gm-agent-note a { display: inline-block; color: var(--gm-ink); font-weight: 600; padding-block: var(--space-2); }
.gm-private-note { display: block; color: var(--gm-muted); font-size: var(--text-sm); margin-top: var(--space-3); }
.gm-transfer { display: flex; align-items: flex-start; gap: var(--space-6); border-radius: 24px; background: var(--gm-soft); padding: var(--space-8); }
.gm-transfer-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--gm-line); border-radius: 16px; flex-shrink: 0; font-size: var(--text-xl); }
.gm-transfer h2 { font-size: var(--text-xl); letter-spacing: -.5px; }
.gm-transfer p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--gm-muted); }
.gm-route-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); }
.gm-route-links a { display: inline-flex; gap: var(--space-3); align-items: center; min-height: 44px; color: var(--gm-accent); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.gm-faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; padding-block: 96px; }
.gm-faq-art { width: 260px; margin: var(--space-6) auto 0; }
.gm-questions details { border-bottom: 1px solid var(--gm-line); }
.gm-questions details:first-child { border-top: 1px solid var(--gm-line); }
.gm-questions summary { padding-block: var(--space-6); font-size: var(--text-md); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); list-style: none; }
.gm-questions summary::-webkit-details-marker { display: none; }
.gm-questions summary::after { content: "+"; color: var(--gm-muted); font-size: var(--text-xl); font-weight: 400; }
.gm-questions details[open] summary::after { content: "−"; }
.gm-questions details p { padding-bottom: var(--space-6); color: var(--gm-muted); font-size: var(--text-sm); }
.gm-questions details a { text-decoration: underline; }
.gm-final { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 64px var(--space-8); border-radius: 32px; background: var(--gm-peach); }
.gm-final h2 { margin-top: var(--space-4); }
.gm-final > p:not(.gm-eyebrow):not(.gm-signup-note) { margin-block: var(--space-6); color: var(--gm-muted); }
.gm-magic-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gm-final-star { position: absolute; color: var(--gm-accent); font-size: var(--text-xl); line-height: 1; opacity: .65; }
.gm-final-star > span { display: block; }
.gm-final-star:nth-child(1) { top: 23%; left: 6%; font-size: var(--text-glyph); opacity: .9; }
.gm-final-star:nth-child(2) { top: 70%; left: 15%; }
.gm-final-star:nth-child(3) { top: 10%; left: 24%; font-size: var(--text-sm); }
.gm-final-star:nth-child(4) { bottom: 9%; left: 34%; font-size: var(--text-xs); }
.gm-final-star:nth-child(5) { bottom: 22%; right: 6%; font-size: var(--text-glyph); opacity: .9; }
.gm-final-star:nth-child(6) { top: 16%; right: 15%; }
.gm-final-star:nth-child(7) { bottom: 10%; right: 26%; font-size: var(--text-sm); }
.gm-final-star:nth-child(8) { bottom: 9%; left: 7%; font-size: var(--text-xs); }
.gm-final-star:nth-child(9) { top: 8%; right: 5%; font-size: var(--text-xs); }
.gm-final-star:nth-child(10) { top: 6%; left: 47%; font-size: var(--text-xs); }
.gm-final-star:nth-child(11) { top: 51%; left: 4%; font-size: var(--text-sm); }
.gm-final-star:nth-child(12) { top: 48%; right: 3%; font-size: var(--text-sm); }
.gm-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-12) 80px; }
.gm-footer .gm-brand { gap: 0; font-size: var(--text-xl); }
.gm-footer p { color: var(--gm-muted); font-size: var(--text-xs); margin-top: var(--space-2); }
.gm-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-6); max-width: 620px; }
.gm-footer nav > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gm-muted); font-size: var(--text-xs); }
@media (prefers-reduced-motion: no-preference) {
  .gm-hero-copy { animation: gm-arrive .6s ease-out both; }
  .gm-hero-art { animation: gm-arrive .8s ease-out both; }
  .gm-final-star { transform: translate(calc(var(--magic-x, 0px) * var(--star-depth)), calc(var(--magic-y, 0px) * var(--star-depth))); transition: transform .7s ease-out; }
  .gm-final-star > span { animation: gm-starlight var(--star-duration) ease-in-out var(--star-delay) infinite; }
  @keyframes gm-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes gm-starlight { 0%, 100% { opacity: .45; transform: translateY(4px) rotate(-12deg) scale(.82); } 50% { opacity: 1; transform: translateY(-6px) rotate(16deg) scale(1.08); } }
}
@media (prefers-reduced-motion: reduce) { .gm-landing *, .gm-landing *::before, .gm-landing *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-motion: reduce) { .gm-final-star { transform: none; } }
@media (max-width: 1050px) {
  .gm-container { width: calc(100% - 64px); }
  .gm-nav { gap: var(--space-6); }
  .gm-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: 72px 80px; }
  .gm-hero .gm-eyebrow { letter-spacing: 1px; }
  .gm-story { gap: var(--space-8); }
  .gm-faq { gap: var(--space-8); }
}
@media (max-width: 760px) {
  .gm-container { width: calc(100% - 40px); }
  .gm-header { min-height: 80px; gap: var(--space-4); }
  .gm-header .gm-brand { font-size: var(--text-xl); }
  .gm-header .gm-brand img { width: 32px; height: 32px; }
  .gm-nav { display: none; }
  .gm-login { gap: var(--space-4); font-size: var(--text-sm); }
  .gm-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8) var(--space-12); gap: var(--space-8); }
  .gm-hero .gm-eyebrow { align-items: flex-start; font-size: var(--text-xs); margin-bottom: var(--space-4); }
  .gm-hero h1 { max-width: 600px; }
  .gm-intro, .gm-story-copy > p:not(.gm-eyebrow):not(.gm-story-note):not(.gm-agent-note), .gm-final > p:not(.gm-eyebrow):not(.gm-signup-note) { font-size: var(--text-md); }
  .gm-intro { margin-block: var(--space-6) !important; max-width: 500px; }
  .gm-button, .gm-secondary-button { min-height: 56px; }
  .gm-hero-art { width: 100%; max-width: 440px; justify-self: center; }
  .gm-story { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-12); gap: var(--space-8); }
  .gm-story-copy { grid-row: 1; }
  .gm-story-copy > p:not(.gm-eyebrow):not(.gm-story-note):not(.gm-agent-note) { margin-top: var(--space-4); }
  .gm-story-copy > .gm-button { margin-top: var(--space-6); }
  .gm-story-memory { padding-bottom: 64px; }
  .gm-transfer { gap: var(--space-4); padding: var(--space-6); }
  .gm-transfer-icon { display: none; }
  .gm-transfer h2 { font-size: var(--text-lg); }
  .gm-route-links { column-gap: var(--space-4); }
  .gm-faq { grid-template-columns: 1fr; padding-block: 64px; gap: var(--space-8); }
  .gm-faq-intro { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: var(--space-4); }
  .gm-faq-art { width: 112px; margin: 0; }
  .gm-questions summary { padding-block: var(--space-4); }
  .gm-final { padding: var(--space-12) var(--space-6); border-radius: 24px; }
  .gm-final-star:nth-child(1) { top: 7%; left: 5%; font-size: var(--text-xl); }
  .gm-final-star:nth-child(2) { top: 62%; left: 4%; font-size: var(--text-xs); }
  .gm-final-star:nth-child(3) { top: 5%; left: 29%; font-size: var(--text-xs); }
  .gm-final-star:nth-child(4) { bottom: 4%; left: 36%; }
  .gm-final-star:nth-child(5) { bottom: 8%; right: 5%; font-size: var(--text-xl); }
  .gm-final-star:nth-child(6) { top: 5%; right: 8%; font-size: var(--text-sm); }
  .gm-final-star:nth-child(7) { bottom: 4%; right: 30%; font-size: var(--text-xs); }
  .gm-final-star:nth-child(9), .gm-final-star:nth-child(10), .gm-final-star:nth-child(11), .gm-final-star:nth-child(12) { display: none; }
  .gm-footer { flex-direction: column; gap: var(--space-6); padding-block: var(--space-8) 100px; }
  .gm-footer nav { justify-content: flex-start; gap: var(--space-2) var(--space-4); }
}
@media (max-width: 420px) {
  .gm-actions { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .gm-secondary-button { min-height: 48px; padding-block: var(--space-3); }
}