:root{
      color-scheme:light;
      --ink-on-action:var(--memoria-color-action-ink);
      --hero-ink:var(--memoria-color-light-inverse);
      --hero-backdrop:var(--memoria-color-purple-950);
      --canvas:var(--memoria-color-light-canvas);--surface:var(--memoria-color-light-surface);--surface-muted:var(--memoria-color-light-surfaceMuted);
      --border:var(--memoria-color-light-border);--border-strong:var(--memoria-color-light-borderStrong);--border-interactive:var(--memoria-color-light-borderInteractive);
      --ink:var(--memoria-color-light-ink);--ink-secondary:var(--memoria-color-light-inkSecondary);--ink-muted:var(--memoria-color-light-inkMuted);

      --chrome:var(--memoria-color-chrome-surface);--chrome-end:var(--memoria-color-chrome-surfaceEnd);--chrome-ink:var(--memoria-color-chrome-ink);
      --chrome-ink-secondary:var(--memoria-color-chrome-inkSecondary);--chrome-ink-muted:var(--memoria-color-chrome-inkMuted);
      --chrome-border:var(--memoria-color-chrome-border);--chrome-active:var(--memoria-color-chrome-active);
      --chrome-focus:var(--memoria-color-purple-300);

      --action:var(--memoria-color-action-rest);--action-hover:var(--memoria-color-action-hover);
      --accent:var(--memoria-color-purple-700);--accent-soft:var(--memoria-color-purple-50);--accent-strong:var(--memoria-color-purple-100);--accent-border:var(--memoria-color-purple-200);--accent-500:var(--memoria-color-purple-500);

      /* Event colours. The dashboard speaks in these; so does this page. */
      --meeting-fg:var(--memoria-color-event-meeting-fg);--meeting-bg:var(--memoria-color-event-meeting-bg);
      --conversation-fg:var(--memoria-color-event-conversation-fg);--conversation-bg:var(--memoria-color-event-conversation-bg);
      --diary-fg:var(--memoria-color-event-diary-fg);--diary-bg:var(--memoria-color-event-diary-bg);
      --voice-fg:var(--memoria-color-event-voiceNote-fg);--voice-bg:var(--memoria-color-event-voiceNote-bg);
      --call-fg:var(--memoria-color-event-phoneCall-fg);--call-bg:var(--memoria-color-event-phoneCall-bg);
      --success-fg:var(--memoria-color-status-success-fg);--success-bg:var(--memoria-color-status-success-bg);

      --r-sm:var(--memoria-radius-sm);--r-control:var(--memoria-radius-control);--r-card:var(--memoria-radius-card);--r-panel:var(--memoria-radius-panel);--r-full:var(--memoria-radius-full);
      --shadow-card:0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent);
      --shadow-float:0 24px 70px color-mix(in srgb, var(--ink) 14%, transparent);
      --sans:var(--memoria-font-family-ui);
      --mono:var(--memoria-font-family-mono);
      --ease:cubic-bezier(.2,0,0,1);--fast:120ms;--standard:180ms;--panel:280ms;
      --nav:72px;
    }

/* Shared with the product through generated design-tokens.css. */
.site-nav { background: var(--chrome); }
.site-nav :focus-visible,
footer :focus-visible { outline-color: var(--chrome-focus); }
.site-nav .button--primary,
.cinematic-actions .button { background: var(--action); color: var(--ink-on-action); border-radius: var(--r-control); box-shadow: none; }
.site-nav .button--primary:hover,
.cinematic-actions .button:hover { background: var(--action-hover); }
.button--primary { box-shadow: none; }
.button--secondary { border-color: var(--border-interactive); }
.brand { font-weight: 600; }
.nav-links a { min-height: 44px; }
/* Keep the original full-viewport image composition from index.html. Its text
   stays white over photography independently of the light navigation palette. */
.cinematic-hero { --chrome-ink: var(--hero-ink); background: var(--hero-backdrop); }
.quiet-benefits { padding-block: 24px; background: var(--canvas); }
.benefit-card { box-shadow: none; }
.benefit-icon { background: var(--accent-soft); color: var(--accent); }
.benefit-copy span { font-size: var(--memoria-font-size-small); }
.formats, .usecase, .principle { box-shadow: none; }
.section-lede { font-size: var(--memoria-font-size-body); }
.ask,
.source-head { color: var(--ink); }
.life-card h3 { font-size: var(--memoria-font-size-h2); font-weight: 600; }
.life-card p { font-size: var(--memoria-font-size-small); }
footer { background: var(--chrome-end); }
@media (max-width: 760px) {
  .benefit-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button:hover svg, a.benefit-card:hover { transform: none; }
}

@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .brand { gap: 8px; font-size: var(--memoria-font-size-h3); }
  .nav-actions { gap: 4px; }
  .nav-signin { padding-inline: 8px; }
  .site-nav .button { padding-inline: 12px; }
}

@media (max-width: 760px) {
  :root { --nav: 136px; }
  .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-scroll { min-width: 0; }
}
@media (max-width: 380px) {
  /* At the narrowest widths the labelled bird mark leaves room for both account links. */
  .nav-inner .brand { gap: 0; font-size: 0; }
  .nav-inner .brand-icon { flex-basis: 32px; width: 32px; height: 32px; }
}
/* The complete section index needs its own row before desktop links get crowded. */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --nav: 136px; }
  .nav-inner { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding-top: 12px; }
  .nav-inner > .brand { grid-area: 1 / 1; }
  .nav-actions { grid-area: 1 / 2; }
  .nav-scroll { grid-area: 2 / 1 / 3 / 3; min-width: 0; padding-block: 4px 12px; overflow-x: auto; }
  .nav-links { width: max-content; gap: 8px; white-space: nowrap; }
}