/* Sweet Dreams — standalone design (no Tailwind) */

/* Dreamy nighttime theme: deep indigo, violet, warm gold accents */

@font-face {
  font-family: "Mouldy Cheese";
  src: url(/fonts/mouldy-cheese.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --sd-bg:            #0f0c29;
  --sd-bg-soft:       #1a1640;
  --sd-bg-header:     rgb(15 12 41 / 90%);
  --sd-bg-card:       #1e1b4b;
  --sd-bg-card-hover: #252159;
  --sd-bg-light:      #f5f3ff;
  --sd-bg-section:    #ede9fe;
  --sd-accent:        #a78bfa;
  --sd-accent-dark:   #7c3aed;
  --sd-accent-hover:  #8b5cf6;
  --sd-accent-muted:  rgb(167 139 250 / 15%);
  --sd-gold:          #fbbf24;
  --sd-gold-muted:    rgb(251 191 36 / 20%);
  --sd-rose:          rgb(255 160 160);
  --sd-rose-muted:    rgb(255 160 160 / 20%);
  --sd-text:          #f1f0ff;
  --sd-text-soft:     #c4b5fd;
  --sd-text-muted:    #8b84c4;
  --sd-text-dark:     #1e1b4b;
  --sd-border:        rgb(167 139 250 / 20%);
  --sd-border-strong: rgb(167 139 250 / 40%);
  --sd-danger:        #f87171;
  --sd-danger-light:  #fca5a5;
  --sd-success:       #4ade80;
  --sd-bg-card-deep:  #161233;
  --sd-bg-card-night: #110f2e;

  /* Gradients */
  --sd-grad-hero:     linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  --sd-grad-accent:   linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --sd-grad-card:     linear-gradient(145deg, #1e1b4b, #252159);
  --sd-grad-cover:    linear-gradient(135deg, var(--sd-accent-dark), var(--sd-accent));

  /* Typography */
  --sd-font:          "Quicksand", system-ui, sans-serif;
  --sd-font-heading:  "Mouldy Cheese", system-ui, sans-serif;

  /* Radii */
  --sd-radius-sm:     0.375rem;
  --sd-radius-md:     0.625rem;
  --sd-radius-lg:     1rem;
  --sd-radius-xl:     1.5rem;
  --sd-radius-pill:   9999px;

  /* Spacing */
  --sd-space-xs:      0.5rem;
  --sd-space-sm:      0.75rem;
  --sd-space-md:      1rem;
  --sd-space-lg:      1.5rem;
  --sd-space-xl:      2rem;
  --sd-space-2xl:     3rem;
  --sd-space-3xl:     4rem;
  --sd-space-4xl:     6rem;

  /* Shadows */
  --sd-shadow:        0 4px 24px rgb(0 0 0 / 30%);
  --sd-shadow-card:   0 2px 12px rgb(0 0 0 / 25%);
  --sd-shadow-glow:   0 0 30px rgb(167 139 250 / 25%);

  /* Transitions */
  --sd-transition:    0.2s ease;

  /* App layout */
  --sd-sidebar-width:   220px;
  --sd-topbar-height:   56px;
  --sd-bottom-nav-h:    58px;

  /* Elevated surfaces (used in menus, banners, story-type buttons) */
  --sd-surface-raised:  #1e1b4b;
  --sd-surface-2:       #252159;
  --sd-surface-3:       #2e2a6a;
}

/* ── @property animated nebula ──────────────────────────────── */
@property --sd-nebula-a {
  syntax: '<color>';
  inherits: false;
  initial-value: #0f0c29;
}

@property --sd-nebula-b {
  syntax: '<color>';
  inherits: false;
  initial-value: #302b63;
}

@property --sd-nebula-c {
  syntax: '<color>';
  inherits: false;
  initial-value: #24243e;
}

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.sd-public,
.sd-app {
  margin: 0;
  font-family: var(--sd-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sd-text);
  background: var(--sd-bg);
  -webkit-font-smoothing: antialiased;
}

.sd-public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sd-public > main { flex: 1; }

/* ── Heading font (Mouldy Cheese) ───────────────────────────── */
.sd-hero-title,
.sd-section-heading,
.sd-section-title,
.sd-page-title,
.sd-mock-title,
.sd-onboarding-hero h1,
.sd-welcome-text h1,
.sd-cta-inner h2,
.sd-step h3,
.sd-bubble h3,
.sd-highlight-text h3,
.sd-star-label h3,
.sd-plan-card h2,
.sd-plan-card h3 {
  font-family: var(--sd-font-heading);
  font-weight: normal;
}

/* ── Skip link ──────────────────────────────────────────────── */
.sd-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sd-space-md);
  z-index: 9999;
  padding: 0.6rem 1.2rem;
  background: var(--sd-accent);
  color: #fff;
  font-weight: 700;
  font-family: var(--sd-font);
  border-radius: var(--sd-radius-md);
  text-decoration: none;
  transition: top 0.1s;
}
.sd-skip-link:focus-visible { top: var(--sd-space-md); }

/* ── Focus rings (accessibility) ───────────────────────────── */

/* Form inputs use box-shadow for focus — exclude them from the global rule */
.sd-app :focus-visible:not(.sd-input, .sd-select, .sd-textarea, .sd-auth-input),
.sd-public :focus-visible:not(.sd-input, .sd-select, .sd-textarea, .sd-auth-input) {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* ── Container ──────────────────────────────────────────────── */
.sd-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--sd-space-lg);
}

/* ── Typography helpers ─────────────────────────────────────── */
.sd-accent    { color: var(--sd-accent); }
.sd-muted     { color: var(--sd-text-muted); font-size: 0.9rem; }
.sd-dot       { color: var(--sd-text-muted); margin-inline: 0.2rem; }
.sd-link-muted { color: var(--sd-text-muted); font-size: 0.85rem; cursor: pointer; }
.sd-link-muted:hover { color: var(--sd-accent); }
.sd-link-accent { color: var(--sd-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sd-link-accent:hover { color: var(--sd-text); }
.hidden       { display: none !important; }
.sd-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; }

/* ── Buttons ────────────────────────────────────────────────── */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--sd-radius-pill);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition), transform var(--sd-transition);
}

.sd-btn:active { transform: scale(0.97); }

.sd-btn-primary {
  background: var(--sd-grad-accent);
  color: #fff;
  border-color: transparent;
}
.sd-btn-primary:hover { background: var(--sd-accent-dark); color: #fff; }

.sd-btn-secondary {
  background: transparent;
  color: var(--sd-accent);
  border-color: var(--sd-accent);
}
.sd-btn-secondary:hover { background: var(--sd-accent-muted); }

.sd-btn-ghost {
  background: transparent;
  color: var(--sd-text-soft);
  border-color: var(--sd-border-strong);
}
.sd-btn-ghost:hover { color: var(--sd-text); border-color: var(--sd-accent); }

.sd-btn-danger {
  background: transparent;
  color: var(--sd-danger);
  border-color: var(--sd-danger);
}
.sd-btn-danger:hover { background: rgb(248 113 113 / 15%); }

.sd-btn-lg { padding: 0.85rem 1.75rem; font-size: 1.05rem; }
.sd-btn-sm { padding: 0.35rem 0.85rem; font-size: 0.82rem; }
.sd-btn-full { width: 100%; }
.sd-btn-icon { padding: 0.6rem; }

.sd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--sd-text-soft);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--sd-transition), color var(--sd-transition);
}
.sd-icon-btn:hover { background: var(--sd-accent-muted); color: var(--sd-accent); }

/* ── Badges ─────────────────────────────────────────────────── */
.sd-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
}

.sd-badge-muted {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(139 132 196 / 15%);
  color: var(--sd-text-muted);
  padding: 0.45rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--sd-radius-pill);
}

/* Stars */
.sd-star { color: var(--sd-gold); }

/* Hearts */
.sd-heart { color: var(--sd-rose); }

/* Tags */
.sd-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
  font-family: var(--sd-font);
  line-height: 1.4;
}

.sd-tag:hover {
  background: rgb(167 139 250 / 25%);
  border-color: var(--sd-accent);
}

.sd-tag.selected {
  background: var(--sd-accent);
  color: #fff;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 2px rgb(167 139 250 / 35%), 0 2px 8px rgb(167 139 250 / 25%);
}

.sd-tag-sm { font-size: 0.72rem; padding: 0.15rem 0.45rem; }
.sd-tags-inline { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }

.sd-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: 48px;
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-soft);
}

/* Full-width separator between browse area and selected-pills tray */
.sd-tags-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--sd-border-strong);
  margin: 0.3rem 0;
}

.sd-tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.sd-input--tag-custom {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.65rem;
}

.sd-tag-custom { display: inline-flex; align-items: center; gap: 0.25rem; }

.sd-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0 0 0 0.15rem;
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.75;
}
.sd-tag-remove:hover { opacity: 1; }

/* ── Alerts ─────────────────────────────────────────────────── */
.sd-alert {
  padding: var(--sd-space-md);
  border-radius: var(--sd-radius-md);
  margin-bottom: var(--sd-space-md);
  font-size: 0.9rem;
}

.sd-alert-error {
  background: rgb(239 68 68 / 12%);
  border: 1px solid rgb(239 68 68 / 30%);
  color: var(--sd-danger-light);
}
.sd-alert-error ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ── Cards (generic) ────────────────────────────────────────── */
.sd-card {
  background: var(--sd-grad-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
}

.sd-card-premium {
  border-color: var(--sd-gold-muted);
  background: linear-gradient(145deg, var(--sd-bg-card), var(--sd-bg-card-deep));
  position: relative;
  z-index: 0;
}

.sd-card-premium > *:not(.sd-onboarding-stars, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Nighttime starfield card — same dreamy background as the onboarding hero */
.sd-card--night {
  background: linear-gradient(145deg, var(--sd-bg-card-night) 0%, var(--sd-bg-card-deep) 100%);
  border-color: var(--sd-accent-muted);
  position: relative;
  z-index: 0;
}

/* Lift the card above siblings when one of its dropdowns is open */
.sd-card--night:has(.sd-select-dropdown--open) {
  z-index: 10;
}

/* Lift a direct-child field above its siblings when its dropdown is open */
.sd-card--night > .sd-field:has(.sd-select-dropdown--open) {
  z-index: 5;
}

/* Lift all direct content above the decorative layers */
.sd-card--night > *:not(.sd-onboarding-stars, .sd-onboarding-sparkles, .sd-onboarding-hearts, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Constellation dots layer */
.sd-onboarding-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-deco-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--sd-text);
  box-shadow: 0 0 4px 2px rgb(241 240 255 / 55%);
  animation: sd-twinkle 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sd-deco-dot { animation: none; opacity: 0.12; }
}

/* Floating hearts layer */
.sd-onboarding-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-heart-deco {
  position: absolute;
  font-size: 10px;
  color: #f472b6;
}

.sd-heart-deco:nth-child(even)  { color: #fb7185; }
.sd-heart-deco:nth-child(3n)    { color: #f9a8d4; }

.sd-star-deco {
  position: absolute;
  font-size: 10px;
  color: var(--sd-gold);
}

.sd-star-deco:nth-child(even)   { color: #fcd34d; }
.sd-star-deco:nth-child(3n)     { color: var(--sd-gold); }

.sd-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sd-space-md);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sd-gold);
}

/* ── Feature list ────────────────────────────────────────────── */
.sd-feature-list {
  list-style: none;
  margin: var(--sd-space-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sd-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sd-feature-list .fa-check { color: var(--sd-success); }
.sd-feature-list .fa-xmark { color: var(--sd-text-muted); }
.sd-feature-muted { color: var(--sd-text-muted); }

/* ── Forms ──────────────────────────────────────────────────── */
.sd-field { margin-bottom: var(--sd-space-lg); }

/* Fieldset reset — used for radio groups to satisfy a11y grouping */

/* Note: do NOT set margin here — spacing comes from .sd-field */
.sd-fieldset {
  border: none;
  padding: 0;
  min-width: 0;
}

/* Legend flows as a normal block label in modern browsers (no float needed) */
.sd-fieldset > legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.4rem;
}

/* When a hint immediately follows the label, tighten the gap —
   the hint's own margin-bottom takes over separation from the content */
.sd-fieldset > legend:has(+ .sd-field-hint),
.sd-label:has(+ .sd-field-hint) {
  margin-bottom: 0.1rem;
}

.sd-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sd-text-soft);
  margin-bottom: 0.4rem;
}

.sd-input,
.sd-select,
.sd-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  transition: border-color var(--sd-transition);
}

.sd-input::placeholder,
.sd-textarea::placeholder { color: var(--sd-text-muted); }

.sd-input:focus,
.sd-select:focus,
.sd-textarea:focus {
  outline: none;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}
.sd-textarea { resize: vertical; min-height: 80px; }

/* Prevent iOS Safari from zooming on input focus (requires 16px minimum) */
@media (width <= 768px) {
  .sd-input,
  .sd-select,
  .sd-textarea { font-size: 1rem; }
}

/* ── Custom select dropdown ──────────────────────────────────── */
.sd-custom-select {
  position: relative;
  width: 100%;
}

.sd-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-select-trigger:focus,
.sd-select-trigger--open {
  outline: none;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}

.sd-select-trigger--placeholder span { color: var(--sd-text-muted); }

.sd-select-trigger i {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sd-select-trigger--open i { transform: rotate(180deg); }

.sd-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sd-select-dropdown--open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.sd-select-option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: none;
  border: none;
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--sd-transition), color var(--sd-transition);
}

.sd-select-option:hover,
.sd-select-option:focus {
  background: var(--sd-bg-card-hover);
  outline: none;
}

.sd-select-option--active {
  color: var(--sd-accent);
  background: var(--sd-accent-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sd-select-dropdown { transition: none; }
}

.sd-field-hint {
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.sd-language-details { border: none; }

.sd-language-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.9rem;
  color: var(--sd-text);
}
.sd-language-summary::-webkit-details-marker { display: none; }

.sd-spotlight-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-spotlight-summary::-webkit-details-marker { display: none; }

.sd-spotlight-chevron {
  font-size: 0.65rem;
  color: var(--sd-text-muted);
  transition: transform 0.2s ease;
}

.sd-spotlight-details[open] .sd-spotlight-chevron {
  transform: rotate(180deg);
}

.sd-language-chevron {
  font-size: 0.65rem;
  color: var(--sd-text-muted);
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}

.sd-language-details[open] .sd-language-chevron {
  transform: rotate(180deg);
}

.sd-language-select { margin-top: 0.5rem; }

.sd-form-actions {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  padding-top: var(--sd-space-md);
}

.sd-form-actions--stacked { flex-direction: column; }

.sd-btn-centered { justify-content: center; }

/* Mood / theme / voice grid selectors */
.sd-mood-grid,
.sd-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sd-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.sd-mood-option,
.sd-theme-option,
.sd-voice-option { cursor: pointer; }

/* Visually hidden but kept in accessibility tree for keyboard/SR navigation */
.sd-mood-option input,
.sd-theme-option input,
.sd-voice-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sd-mood-btn,
.sd-theme-btn {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  gap: 0.4rem;
  padding: 0 0.9rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--sd-border-strong);
  color: var(--sd-text-soft);
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-voice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--sd-radius-lg);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--sd-border-strong);
  color: var(--sd-text-soft);
  text-align: center;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-voice-btn i { font-size: 1.1rem; }
.sd-voice-btn strong { font-size: 0.85rem; line-height: 1.2; }

.sd-voice-btn small {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sd-text-muted);
  line-height: 1.2;
}

.sd-mood-option input:checked ~ .sd-mood-btn,
.sd-theme-option input:checked ~ .sd-theme-btn,
.sd-voice-option input:checked ~ .sd-voice-btn {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgb(167 139 250 / 35%), 0 2px 8px rgb(167 139 250 / 25%);
}

.sd-voice-option input:checked ~ .sd-voice-btn small { color: rgb(255 255 255 / 70%); }

/* Maintain white text when hovering an already-selected option */
.sd-mood-option input:checked ~ .sd-mood-btn:hover,
.sd-theme-option input:checked ~ .sd-theme-btn:hover,
.sd-voice-option input:checked ~ .sd-voice-btn:hover { color: #fff; }

.sd-mood-btn:hover,
.sd-theme-btn:hover,
.sd-voice-btn:hover { border-color: var(--sd-accent); color: var(--sd-accent); }

.sd-mood-option:active .sd-mood-btn,
.sd-theme-option:active .sd-theme-btn,
.sd-voice-option:active .sd-voice-btn { transform: scale(0.96); }

/* Keyboard focus indicator for hidden radio inputs */
.sd-mood-option:focus-within .sd-mood-btn,
.sd-theme-option:focus-within .sd-theme-btn,
.sd-voice-option:focus-within .sd-voice-btn {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* Length selector cards */
.sd-length-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (width >= 480px) {
  .sd-length-grid { grid-template-columns: repeat(3, 1fr); }
}

.sd-length-option { cursor: pointer; }

.sd-length-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sd-length-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.65rem 0.5rem;
  border-radius: var(--sd-radius-lg);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid var(--sd-border-strong);
  color: var(--sd-text-soft);
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-length-btn i { font-size: 0.85rem; }

.sd-length-cost {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sd-accent);
  letter-spacing: 0.01em;
}

.sd-length-option input:checked ~ .sd-length-btn .sd-length-cost { color: rgb(255 255 255 / 85%); }

.sd-length-option input:checked ~ .sd-length-btn {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgb(167 139 250 / 35%), 0 2px 8px rgb(167 139 250 / 25%);
}

.sd-length-option input:checked ~ .sd-length-btn:hover { color: #fff; }

.sd-length-btn:hover { border-color: var(--sd-accent); color: var(--sd-accent); }

.sd-length-option:active .sd-length-btn { transform: scale(0.96); }

.sd-length-option:focus-within .sd-length-btn {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

.sd-length-option--locked { cursor: not-allowed; }

.sd-length-option--locked .sd-length-btn {
  opacity: 0.55;
  border-style: dashed;
}

.sd-length-option--locked .sd-length-btn:hover {
  border-color: var(--sd-border-strong);
  color: var(--sd-text-soft);
}

.sd-length-premium-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-accent);
  background: rgb(167 139 250 / 15%);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  line-height: 1.4;
}

.sd-voice-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--sd-border-strong);
  background: transparent;
  color: var(--sd-text-soft);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
  flex-shrink: 0;

  /* Expand tap area to ~44px without changing visual size */
  position: relative;
}

.sd-voice-preview-btn::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

.sd-voice-preview-btn:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent);
}

.sd-voice-preview-btn.playing {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
}

/* Keep preview button visible but dimmed inside a selected card */
.sd-voice-option input:checked ~ .sd-voice-btn .sd-voice-preview-btn {
  border-color: rgb(255 255 255 / 50%);
  color: rgb(255 255 255 / 80%);
}

.sd-voice-option input:checked ~ .sd-voice-btn .sd-voice-preview-btn:hover,
.sd-voice-option input:checked ~ .sd-voice-btn .sd-voice-preview-btn.playing {
  border-color: #fff;
  color: #fff;
}

/* ── Locked (premium) voice option ──────────────────────────── */
.sd-voice-locked { opacity: 0.55; cursor: default; }
.sd-voice-locked .sd-voice-btn { cursor: default; }
.sd-voice-locked:active .sd-voice-btn { transform: none; }
.sd-voice-locked .sd-voice-btn:hover { border-color: rgb(255 255 255 / 10%); color: inherit; }

.sd-voice-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fbbf24;
  background: rgb(251 191 36 / 12%);
  border: 1px solid rgb(251 191 36 / 30%);
  border-radius: 20px;
  padding: 2px 7px;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Empty state ────────────────────────────────────────────── */
.sd-empty-state {
  text-align: center;
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  color: var(--sd-text-muted);
}
.sd-empty-state i { font-size: 2.5rem; margin-bottom: var(--sd-space-md); display: block; opacity: 0.5; }

@media (prefers-reduced-motion: no-preference) {
  .sd-empty-state .sd-heart {
    animation: sd-heart-float 3s ease-in-out infinite both;
    opacity: 0.6;
  }

  @keyframes sd-heart-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-6px) scale(1.08); }
  }
}
.sd-empty-state h2 { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--sd-text-soft); }
.sd-empty-state p { margin: 0 0 var(--sd-space-lg); }

/* ── Page structure (app) ───────────────────────────────────── */
.sd-page {
  padding: var(--sd-space-xl);
  max-width: 1000px;
  margin-inline: auto;
}

.sd-page-narrow {
  max-width: 640px;
}

.sd-page-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  justify-content: space-between;
  margin-bottom: var(--sd-space-lg);
  flex-wrap: wrap;
}
.sd-page-header-actions { display: flex; gap: var(--sd-space-sm); flex-wrap: wrap; }

.sd-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--sd-text);
}

.sd-section { margin-bottom: var(--sd-space-2xl); }

.sd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sd-space-md);
}

.sd-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--sd-space-lg);
  color: var(--sd-text-soft);
}

.sd-section-header .sd-section-title { margin-bottom: 0; }

/* ── Public header ──────────────────────────────────────────── */
.sd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sd-bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sd-border);

  /* Needed for mobile nav dropdown positioning */
  isolation: isolate;
}

/* Match the logo's deep indigo-to-navy gradient — fades to transparent on the right */
.sd-public .sd-header {
  background: linear-gradient(
    to right,
    rgb(22 12 65 / 97%) 0%,
    rgb(15 10 45 / 93%) 40%,
    rgb(15 12 41 / 0%) 100%
  );
  border-bottom-color: transparent;
}

.sd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: var(--sd-space-lg);
}

/* Mobile nav burger — hidden on desktop */
.sd-nav-burger {
  display: none;
  background: none;
  border: none;
  color: var(--sd-text-soft);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.4rem;
  line-height: 1;
}

.sd-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sd-brand-logo {
  height: 24px;
  width: auto;
}

/* Larger logo on the public landing page */
.sd-public .sd-brand-logo {
  height: 72px;
  width: auto;
}

@media (width <= 768px) {
  .sd-brand-logo { height: 20px; }
  .sd-public .sd-brand-logo { height: 48px; }
}

.sd-header-nav {
  display: flex;
  align-items: center;
  gap: var(--sd-space-lg);
}

.sd-nav-link {
  color: var(--sd-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color var(--sd-transition);
}
.sd-nav-link:hover { color: var(--sd-accent); }

/* ── Public footer ──────────────────────────────────────────── */
.sd-footer {
  background: var(--sd-bg-soft);
  border-top: 1px solid var(--sd-border);
  padding: var(--sd-space-xl) 0;
}

.sd-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
}

.sd-footer-copy {
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  margin: 0;
  overflow-wrap: break-word;
}

.sd-footer-legal {
  display: flex;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.sd-footer-legal-link {
  color: var(--sd-text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s;
}

.sd-footer-legal-link:hover {
  color: var(--sd-accent);
}

/* ── Legal pages ────────────────────────────────────────────── */
.sd-legal-page {
  padding: var(--sd-space-3xl) 0;
  min-height: 60vh;
}

.sd-legal-content {
  max-width: 720px;
  margin: 0 auto;
  color: var(--sd-text);
  line-height: 1.75;
}

.sd-legal-content h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: var(--sd-space-lg);
}

.sd-legal-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: var(--sd-space-xl);
  margin-bottom: var(--sd-space-sm);
}

.sd-legal-content p {
  margin-bottom: var(--sd-space-md);
  color: var(--sd-text-muted);
}

.sd-footer-social {
  display: flex;
  gap: var(--sd-space-md);
}

.sd-footer-social-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
}

.sd-footer-social-link:hover {
  color: var(--sd-accent);
}

@media (width <= 768px) {
  .sd-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sd-space-lg);
  }

  .sd-footer-legal {
    justify-content: center;
  }

  .sd-footer-social {
    justify-content: center;
  }
}

/* ── Hero section ───────────────────────────────────────────── */
.sd-hero {
  background-color: #0f0c29;
  background-image:
    linear-gradient(to right, #0f0c29 0%, rgb(15 12 41 / 92%) 20%, transparent 55%),
    var(--sd-hero-bg, none);
  background-size: auto, cover;
  background-position: 0 0, 65% center;
  background-repeat: no-repeat;
  padding: var(--sd-space-3xl) 0;
  min-height: 90vh;
  min-height: 90dvh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Dense dim starfield — 150 stars, 1px absolute so always circular */
.sd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at  5% 12%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 18%  7%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 32%  3%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 47%  8%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 15%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 78%  9%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 18%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 13%  3%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 14%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 41%  6%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 11%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 69%  4%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 83% 16%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 96%  8%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 19%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 11%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 18%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 50%  5%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 13%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 88%  3%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at  3%  9%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 17%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 16%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 58%  7%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 19%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 11%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 15%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at  9%  6%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 18%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 10%, rgb(255 255 255 / 60%) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 28%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 35%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 42%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 27%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 33%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 48%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 24%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 39%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 47%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 53%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 25%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 56%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 31%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 43%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 57%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 22%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 38%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 58%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 46% 44%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 22%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 36%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 50%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 99% 28%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 45%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 24% 31%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 52%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 40%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 55%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 81% 29%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 42%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 32%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 21% 57%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 23%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 38%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 26%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 56%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  5% 53%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 26%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 47%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 34%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 59%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 21%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 46%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 32%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 40%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 23%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 55%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 54% 28%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 44%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 37%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 23%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  7% 58%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 43%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 36%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 21%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 53%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 30%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 47%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 37%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 50%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 28%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 57%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 35%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 52%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 22%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at  1% 48%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 33%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 54%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 39%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 26%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 19%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 46%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 15%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 70%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 84%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 62%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 86%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 72%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 38%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 85%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 41%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 10%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 84%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 43%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 79%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 47%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 65%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 78%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 62%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 49% 73%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 85%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 68%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 92%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  4% 87%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 72%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 93%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 67%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 80%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 76%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 63%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 81%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 96%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 62%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 84%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 47% 71%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 90%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 64%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 89% 78%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 69%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 16% 88%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 29% 76%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 97%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 69%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 71% 83%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 95%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 98% 70%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 80%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 66%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 34% 91%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 63%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 77%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 89%, rgb(255 255 255 / 55%) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 66%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  3% 93%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 82%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 96%, rgb(255 255 255 / 45%) 0%, transparent 100%);
}

/* Bright twinkling stars — 25 stars that gently pulse */
.sd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at  8% 20%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 40%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 39% 15%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 50%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 30%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at  3% 65%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 75%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 85%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 70%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 92% 50%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  8%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 48% 32%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 55%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 45%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 36% 88%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 89% 25%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 92%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 66% 20%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 62%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 81% 78%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at  6% 38%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 30% 72%, rgb(255 255 255 / 90%) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 10%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(2px 2px at 58% 95%, rgb(255 255 255 / 90%) 0%, transparent 100%);
}

.sd-hero-inner {
  position: relative;
  z-index: 1;
}

.sd-hero-text {
  max-width: 560px;
}

.sd-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--sd-space-md);
  overflow-wrap: break-word;
}

.sd-hero-subtitle {
  font-size: 1.05rem;
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-xl);
  max-width: 480px;
  overflow-wrap: break-word;
}

.sd-hero-actions {
  display: flex;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
}

/* Phone mockup */
.sd-hero-visual { display: flex; justify-content: center; }

/* ── Story player preview section ───────────────────────────── */
.sd-section-player {
  background: var(--sd-bg);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.sd-player-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-3xl);
  align-items: center;
}

.sd-player-copy .sd-section-heading { margin-bottom: var(--sd-space-md); text-align: left; }

.sd-player-subtitle {
  font-size: 1.05rem;
  color: var(--sd-text-soft);
  margin: 0;
  max-width: 420px;
  overflow-wrap: break-word;
}

.sd-phone-mockup {
  width: 100%;
  max-width: 260px;
  border-radius: 2.5rem;
  background: var(--sd-bg-card);
  border: 3px solid var(--sd-border-strong);
  box-shadow: var(--sd-shadow-glow);
  overflow: hidden;
  padding: 1.5rem 1rem;
  will-change: transform;
}

.sd-phone-screen {
  background: var(--sd-bg-soft);
  border-radius: 1.5rem;
  padding: 1rem;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-mock-story {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.sd-mock-cover {
  width: 100%;
  height: 110px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-grad-cover);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sd-mock-cover-icon {
  font-size: 2rem;
  color: rgb(255 255 255 / 35%);
  position: relative;
  z-index: 1;
}

.sd-mock-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.sd-mock-subtitle {
  font-size: 0.72rem;
  color: var(--sd-text-muted);
  margin: -0.35rem 0 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sd-mock-progress { width: 100%; display: flex; flex-direction: column; gap: 0.3rem; }

.sd-mock-progress-track {
  width: 100%;
  height: 5px;
  background: var(--sd-border-strong);
  border-radius: var(--sd-radius-pill);
  cursor: pointer;
  position: relative;
}

/* Extend tap area 10px above/below without collapsing the box model */
.sd-mock-progress-track::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.sd-mock-progress-fill {
  width: 100%;
  height: 5px;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s linear;
}

.sd-mock-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-mock-controls { display: flex; justify-content: center; }

.sd-mock-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sd-grad-accent);
  border: none;
  color: var(--sd-text);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sd-shadow-glow);
  cursor: pointer;
  transition: transform var(--sd-transition);
}
.sd-mock-play-btn:hover { transform: scale(1.07); }
.sd-mock-play-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }

/* ── Section styles (public) ────────────────────────────────── */
.sd-section-heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--sd-space-2xl);
  color: var(--sd-text);
  overflow-wrap: break-word;
  hyphens: auto;
}

.sd-section-dark {
  background: var(--sd-bg-soft);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}

/* Steps */
.sd-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sd-space-xl);
}
.sd-step { text-align: center; }

.sd-step-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sd-space-md);
  font-size: 1.5rem;
  color: var(--sd-accent);
}
.sd-step h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--sd-text); overflow-wrap: break-word; hyphens: auto; }
.sd-step p { font-size: 0.9rem; color: var(--sd-text-muted); margin: 0; overflow-wrap: break-word; hyphens: auto; }

/* ── Dream Bubbles — How It Works ──────────────────────────── */
.sd-bubble {
  text-align: center;
  padding: var(--sd-space-xl) var(--sd-space-lg);
  background: linear-gradient(145deg, rgb(30 27 75 / 75%), rgb(25 22 64 / 60%));
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  backdrop-filter: blur(14px);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 35%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  opacity: 0;
  transform: translateY(52px) scale(0.91);
  transition:
    opacity 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.sd-bubble--in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sd-bubble--elevated {
  margin-top: -1.25rem;
  border-color: var(--sd-border-strong);
  box-shadow:
    0 16px 52px rgb(0 0 0 / 45%),
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 0 48px rgb(167 139 250 / 10%);
}

.sd-bubble-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sd-space-md);
}

.sd-bubble .sd-step-icon {
  margin: 0;
  position: relative;
  z-index: 1;
}

.sd-orbit-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  animation: sd-orbit-spin 6s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

.sd-bubble--in .sd-orbit-ring {
  animation-play-state: running;
}

.sd-bubble:nth-child(1) .sd-orbit-ring { animation-duration: 6s; }
.sd-bubble:nth-child(2) .sd-orbit-ring { animation-duration: 4.5s; animation-direction: reverse; }
.sd-bubble:nth-child(3) .sd-orbit-ring { animation-duration: 8s; }

.sd-orbit-ring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--sd-accent);
  border-radius: 50%;
  box-shadow:
    0 0 8px 2px rgb(167 139 250 / 80%),
    0 0 18px 5px rgb(167 139 250 / 25%);
  transform: translateX(-50%);
}

@keyframes sd-orbit-spin {
  to { transform: rotate(360deg); }
}

.sd-bubble h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--sd-text); overflow-wrap: break-word; hyphens: auto; }
.sd-bubble p { font-size: 0.9rem; color: var(--sd-text-muted); margin: 0; overflow-wrap: break-word; hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  .sd-bubble { opacity: 1; transform: none; transition: none; }
  .sd-orbit-ring { animation: none; }
  .sd-orbit-ring::before { display: none; }
}

@media (width <= 768px) {
  .sd-bubble--elevated { margin-top: 0; }
}

/* Highlights (replaces features grid) */
.sd-section-highlights { background: var(--sd-bg-soft); padding: var(--sd-space-3xl) 0; content-visibility: auto; contain-intrinsic-size: auto 420px; }

.sd-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-lg);
  max-width: 620px;
  margin: 0 auto;
}

.sd-highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-lg);
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
}

.sd-highlight-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  animation: sd-icon-glow-pulse 4s ease-in-out infinite;
}

.sd-highlight-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.sd-highlight-text h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--sd-text); overflow-wrap: break-word; hyphens: auto; }
.sd-highlight-text p { font-size: 0.9rem; color: var(--sd-text-muted); margin: 0; line-height: 1.6; overflow-wrap: break-word; hyphens: auto; }

/* ── Highlights: icon glow pulse (always-on, all browsers) ─── */
@keyframes sd-icon-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px rgb(167 139 250 / 20%); }
  50%       { box-shadow: 0 0 24px 8px rgb(167 139 250 / 48%); }
}
.sd-highlight:nth-child(2) .sd-highlight-icon { animation-delay: 1.3s; }
.sd-highlight:nth-child(3) .sd-highlight-icon { animation-delay: 2.6s; }

/* ── Highlights: scroll-driven icon birth + heading parallax ─ */

/* Progressive enhancement — Chrome/Edge/Safari only (no Firefox) */
@supports (animation-timeline: scroll()) {
  @keyframes sd-icon-birth {
    0% {
      transform: scale(0.07);
      border-radius: 50%;
      opacity: 0;
      filter: brightness(6) blur(5px);
    }

    12% {
      opacity: 1;
      filter: brightness(4.5) blur(3px);
    }

    50% {
      transform: scale(0.88);
      border-radius: 34%;
      filter: brightness(2.5) blur(0.8px);
    }

    80% {
      transform: scale(1.14);
      border-radius: var(--sd-radius-lg);
      filter: brightness(1.6) blur(0);
    }

    100% {
      transform: scale(1);
      border-radius: var(--sd-radius-lg);
      filter: brightness(1) blur(0);
    }
  }

  @keyframes sd-highlights-heading-drift {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Heading rises and fades in as section enters viewport */
  .sd-section-highlights .sd-section-heading {
    animation: sd-highlights-heading-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* Icon birth (view-driven) + glow pulse (time-driven) — stacked */
  .sd-section-highlights .sd-highlight-icon {
    animation-name: sd-icon-birth, sd-icon-glow-pulse;
    animation-duration: auto, 4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.36, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
    animation-timeline: view(), auto;
    animation-range: entry 0% entry 65%, auto;

    /* Birth is per-element, not time-staggered */
    animation-delay: 0s, 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-highlight-icon { animation: none !important; filter: none; }
  .sd-section-highlights .sd-section-heading { animation: none; opacity: 1; transform: none; }
}

/* Trust quotes — overdrive: floating glass cards + star field */
.sd-section-trust {
  background: var(--sd-bg);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
  position: relative;
  overflow: hidden;
}

/* Star field layer A — slow, larger stars */
.sd-section-trust::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%, rgb(167 139 250 / 70%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 68%, rgb(167 139 250 / 50%) 0%, transparent 100%),
    radial-gradient(2px   2px   at 28% 32%, rgb(251 191 36  / 35%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 38% 80%, rgb(167 139 250 / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 20%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 58% 58%, rgb(167 139 250 / 50%)  0%, transparent 100%),
    radial-gradient(2px   2px   at 68% 10%, rgb(251 191 36  / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 78% 72%, rgb(167 139 250 / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 38%, rgb(255 255 255 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 85%, rgb(167 139 250 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at  5% 55%, rgb(255 255 255 / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 72% 45%, rgb(251 191 36  / 25%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 90%, rgb(167 139 250 / 45%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55%  5%, rgb(255 255 255 / 50%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 82% 22%, rgb(167 139 250 / 35%) 0%, transparent 100%);
  animation: sd-trust-stars-a 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Star field layer B — faster, dimmer, offset timing */
.sd-section-trust::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background-image:
    radial-gradient(1px   1px   at 12% 40%, rgb(255 255 255 / 50%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 25% 15%, rgb(167 139 250 / 60%)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 65%, rgb(251 191 36  / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 28%, rgb(255 255 255 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 75% 55%, rgb(167 139 250 / 50%)  0%, transparent 100%),
    radial-gradient(2px   2px   at 85% 78%, rgb(167 139 250 / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 95% 15%, rgb(255 255 255 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 15% 88%, rgb(251 191 36  / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 50% 42%, rgb(167 139 250 / 40%)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65%  8%, rgb(255 255 255 / 50%)  0%, transparent 100%);
  animation: sd-trust-stars-b 4.5s ease-in-out infinite alternate;
  animation-delay: 2s;
  pointer-events: none;
  z-index: 0;
}

.sd-trust-quotes {
  display: flex;
  gap: var(--sd-space-xl);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sd-trust-quote {
  flex: 1;
  min-width: 220px;
  margin: 0;
  padding: var(--sd-space-xl);
  border-inline-start: none;
  border: 1px solid rgb(167 139 250 / 18%);
  border-radius: var(--sd-radius-xl);
  background: linear-gradient(
    145deg,
    rgb(30 27 75 / 85%) 0%,
    var(--sd-aurora-mid, transparent) 50%,
    rgb(15 12 41 / 60%) 100%
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 28px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 5%);
  position: relative;
  overflow: hidden;
  animation: sd-aurora-breathe 8s ease-in-out infinite alternate;
}

/* Oversized decorative opening quote mark */
.sd-trust-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.1em;
  left: 0.2em;
  font-size: 5.5rem;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: rgb(167 139 250 / 10%);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  transition: color 0.4s ease;
}

/* Per-card star cluster — unique position per card */
.sd-trust-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px   1px   at 15% 18%, rgb(167 139 250 / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 14%, rgb(251 191 36  / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 72% 78%, rgb(167 139 250 / 35%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 88%, rgb(255 255 255 / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 52%, rgb(167 139 250 / 40%)  0%, transparent 100%);
  animation: sd-trust-stars-a 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.sd-trust-quote:nth-child(2)::after {
  background-image:
    radial-gradient(1.5px 1.5px at 88% 10%, rgb(167 139 250 / 55%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 28%, rgb(251 191 36  / 35%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 82%, rgb(167 139 250 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 38%  8%, rgb(255 255 255 / 40%)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  8% 68%, rgb(167 139 250 / 30%)  0%, transparent 100%);
  animation-delay: 1.2s;
}

.sd-trust-quote:nth-child(3)::after {
  background-image:
    radial-gradient(1px   1px   at 50%  8%, rgb(251 191 36  / 50%)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  8% 42%, rgb(167 139 250 / 45%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 90% 68%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 22% 92%, rgb(167 139 250 / 50%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 68% 35%, rgb(167 139 250 / 30%)  0%, transparent 100%);
  animation-delay: 2.4s;
}

.sd-trust-quote p {
  color: var(--sd-text-soft);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 var(--sd-space-sm);
  overflow-wrap: break-word;
  position: relative;
  z-index: 1;
}

.sd-trust-quote cite {
  color: var(--sd-text-muted);
  font-size: 0.8rem;
  font-style: normal;
  overflow-wrap: break-word;
  position: relative;
  z-index: 1;
}

.sd-trust-stars {
  display: flex;
  gap: 0.15rem;
  color: var(--sd-gold);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--sd-space-sm);
  position: relative;
  z-index: 1;
}

/* ── Reviews Carousel ──────────────────────────────────────────── */
.sd-reviews-carousel {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sd-reviews-carousel [hidden] {
  display: none !important;
}

@keyframes sd-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sd-page-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

.sd-page--out {
  animation: sd-page-out 0.22s ease forwards;
  pointer-events: none;
}

.sd-page--in {
  animation: sd-page-in 0.28s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sd-page--out,
  .sd-page--in { animation: none; }
}

.sd-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-md);
  margin-top: var(--sd-space-xl);
}

.sd-carousel-btn {
  all: unset;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgb(167 139 250 / 30%);
  color: var(--sd-text-soft);
  background: rgb(30 27 75 / 60%);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sd-carousel-btn:hover:not(:disabled) {
  color: var(--sd-text);
  border-color: var(--sd-accent);
  background: rgb(99 88 199 / 20%);
}

.sd-carousel-btn:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

.sd-carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.sd-carousel-indicator {
  color: var(--sd-text-muted);
  font-size: 0.8rem;
  min-width: 3rem;
  text-align: center;
}

/* ── Aurora breathing on review cards ─────────────────────── */

/* Register the animated midpoint color as a typed custom property
   so the browser can interpolate it inside linear-gradient().
   Falls back gracefully: without @property support the gradient
   renders with transparent at 50%, which matches the original look. */
@property --sd-aurora-mid {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@keyframes sd-aurora-breathe {
  0%   { --sd-aurora-mid: rgb(99  88  199 / 0%);  }
  30%  { --sd-aurora-mid: rgb(139 92  246 / 16%); }
  65%  { --sd-aurora-mid: rgb(251 191 36  / 8%);  }
  100% { --sd-aurora-mid: rgb(99  88  199 / 4%);  }
}

/* Offset each card slot so they breathe out of phase */
.sd-trust-quotes > .sd-trust-quote:nth-child(2) { animation-delay: -2.7s; }
.sd-trust-quotes > .sd-trust-quote:nth-child(3) { animation-delay: -5.4s; }

@media (prefers-reduced-motion: reduce) {
  .sd-trust-quote {
    animation: none;
    background: linear-gradient(145deg, rgb(30 27 75 / 85%) 0%, rgb(15 12 41 / 60%) 100%);
  }
}

/* Accent text utility */
.sd-accent-text { color: var(--sd-gold); }

/* CTA */
.sd-cta-section {
  background: var(--sd-bg);
  border-top: 1px solid var(--sd-border);
  padding: var(--sd-space-3xl) 0;
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.sd-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-md);
}
.sd-cta-inner h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; margin: 0; overflow-wrap: break-word; }
.sd-cta-inner p { color: var(--sd-text-soft); margin: 0; overflow-wrap: break-word; }

/* ── Features grid ──────────────────────────────────────────── */
.sd-section-features {
  background: var(--sd-bg);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
  position: relative;
  overflow: hidden;
}

/* Dim starfield — same technique as hero, sparser for a shorter section */
.sd-section-features::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at  4% 18%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 13% 72%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  9%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 31% 55%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 28%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 84%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 14%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 67%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 41%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 85%  6%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 79%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 44%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 91%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 33%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 37% 78%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 46%  5%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 61%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 64% 22%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 88%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 47%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 91% 31%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at  2% 63%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 25%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 82%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 57% 37%, rgb(255 255 255 / 40%) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 15%, rgb(255 255 255 / 45%) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 52%, rgb(255 255 255 / 35%) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 11%, rgb(255 255 255 / 50%) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 95%, rgb(255 255 255 / 30%) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 70%, rgb(255 255 255 / 40%) 0%, transparent 100%);
}

/* Bright twinkling stars — 12 brighter dots on a slower phase */
.sd-section-features::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at  7% 35%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 12%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 43% 68%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 59%  4%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 74% 52%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 23%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 15% 87%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 44%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at 66% 91%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  8%, rgb(255 255 255 / 80%) 0%, transparent 100%),
    radial-gradient(2px 2px at  2% 56%, rgb(255 255 255 / 85%) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 74%, rgb(255 255 255 / 80%) 0%, transparent 100%);
}

/* Ensure constellation content sits above starfield */
.sd-section-features .sd-container { position: relative; z-index: 1; }
.sd-section-features .sd-section-heading { margin-bottom: var(--sd-space-4xl); }

/* ── Constellation ──────────────────────────────────────────── */
.sd-constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 840 / 360;
  margin-top: var(--sd-space-2xl);
}

/* SVG lines overlay */
.sd-constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.sd-cline {
  stroke: var(--sd-accent);
  stroke-width: 2px;
  fill: none;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--ld, 0s);
}

.sd-constellation--in .sd-cline {
  stroke-dashoffset: 0;
}

/* Star nodes */
.sd-star-node {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-sm);
}

.sd-star-dot {
  position: relative;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sd-bg-card);
  border: 1.5px solid var(--sd-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--sd-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--pd, 0s);
  z-index: 1;
  cursor: default;
}

.sd-constellation--in .sd-star-dot {
  opacity: 1;
  transform: scale(1);
}

/* Pulsing ring */
.sd-star-dot::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--sd-accent);
  opacity: 0;
  animation: sd-star-ring 3s ease-out infinite;
  animation-delay: var(--pd, 0s);
  animation-play-state: paused;
}

.sd-constellation--in .sd-star-dot::before {
  animation-play-state: running;
}

@keyframes sd-star-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.8); }
}

/* Labels */
.sd-star-label {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-sm) var(--sd-space-md);
  text-align: center;
  max-width: 200px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  transition-delay: calc(var(--pd, 0s) + 0.15s);
  pointer-events: none;
}

.sd-constellation--in .sd-star-label {
  opacity: 1;
  transform: translateY(0);
}

.sd-star-label h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sd-text);
  margin: 0 0 0.2rem;
  white-space: nowrap;
}

.sd-star-label p {
  font-size: 0.72rem;
  color: var(--sd-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Label placement variants */

/* Top-left (tl): dot above, label below — default column, no override needed */

/* Top-center (tc): dot above, label below — default, no override needed */

/* Right (r): dot on right, label to the left */
.sd-star--r {
  flex-direction: row;
  align-items: center;
  gap: var(--sd-space-md);
}
.sd-star--r .sd-star-dot { order: 2; }
.sd-star--r .sd-star-label { order: 1; text-align: center; flex-shrink: 0; width: 150px; max-width: 150px; }

/* Bottom-right (br): dot above, label below — same as default */

/* No override needed — column direction with dot first looks correct */

/* Bottom-left (bl): dot above, label below — same as default */

/* No override needed */

/* Hover: brighten dot */
.sd-star-node:hover .sd-star-dot,
.sd-star-node:focus-within .sd-star-dot {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 4px var(--sd-accent-muted);
}

.sd-star-node:hover .sd-star-label,
.sd-star-node:focus-within .sd-star-label {
  pointer-events: auto;
  border-color: var(--sd-accent);
}

/* ── FAQ section ────────────────────────────────────────────── */
.sd-section-faq {
  background: var(--sd-bg-soft);
  padding: var(--sd-space-3xl) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.sd-faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.sd-faq-item {
  border-bottom: 1px solid var(--sd-border);
}

.sd-faq-item:first-child { border-top: 1px solid var(--sd-border); }

.sd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-md);
  padding: var(--sd-space-md) 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sd-text);
  list-style: none;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sd-faq-question::-webkit-details-marker { display: none; }
.sd-faq-question:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; border-radius: var(--sd-radius-sm); }

.sd-faq-chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  transition: transform 0.25s ease;
}

details[open] .sd-faq-chevron { transform: rotate(180deg); }

.sd-faq-answer {
  font-size: 0.9rem;
  color: var(--sd-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--sd-space-md);
  padding-inline-end: var(--sd-space-lg);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── Delight — Landing page animations ─────────────────────── */

/* Keyframes */
@keyframes sd-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes sd-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sd-twinkle {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.18; }
}

@keyframes sd-moon-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.08); }
}

@keyframes sd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes sd-glow-pulse {
  0%, 100% { box-shadow: var(--sd-shadow-glow); }
  50%       { box-shadow: 0 0 48px rgb(167 139 250 / 45%); }
}

@keyframes sd-nebula-breathe {
  0%   { --sd-nebula-a: #0f0c29; --sd-nebula-b: #302b63; --sd-nebula-c: #24243e; }
  33%  { --sd-nebula-a: #1a0e38; --sd-nebula-b: #3d1f7a; --sd-nebula-c: #2a1f5c; }
  66%  { --sd-nebula-a: #0c0f3a; --sd-nebula-b: #1e2870; --sd-nebula-c: #160e30; }
  100% { --sd-nebula-a: #0f0c29; --sd-nebula-b: #302b63; --sd-nebula-c: #24243e; }
}

@keyframes sd-trust-stars-a {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.65; }
}

@keyframes sd-trust-stars-b {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.55; }
}

@keyframes sd-hero-stars-dim {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

@keyframes sd-hero-stars-bright {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

/* Hero entrance — text left, phone right, staggered */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Dim starfield breathes slowly out of phase with bright layer */
  .sd-hero::before,
  .sd-section-features::before {
    animation: sd-hero-stars-dim 11s ease-in-out infinite;
  }

  /* Bright twinkling layer — different period creates organic phase drift */
  .sd-hero::after,
  .sd-section-features::after {
    animation: sd-hero-stars-bright 7s 2s ease-in-out infinite;
  }

  .sd-hero-text {
    animation: sd-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-hero-visual {
    animation: sd-fade-up 0.7s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Floating phone */
  .sd-phone-mockup {
    animation: sd-float 4s ease-in-out infinite alternate;
  }

  /* Moon icon breathes */
  .sd-mock-cover-icon {
    animation: sd-moon-breathe 5s ease-in-out infinite;
  }

  /* Scroll-reveal utility — applied by JS */
  .sd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sd-reveal.sd-reveal--in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children of a reveal container */
  .sd-reveal-group > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sd-reveal-group.sd-reveal--in > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(2) { transition-delay: 0.1s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(3) { transition-delay: 0.2s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(4) { transition-delay: 0.3s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(5) { transition-delay: 0.4s;  opacity: 1; transform: none; }
  .sd-reveal-group.sd-reveal--in > *:nth-child(6) { transition-delay: 0.5s;  opacity: 1; transform: none; }

  /* Trust cards — deeper float-up with wider stagger for dreamy effect */
  .sd-section-trust .sd-trust-quotes.sd-reveal-group > * {
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sd-section-trust .sd-trust-quotes.sd-reveal-group.sd-reveal--in > *:nth-child(1) { transition-delay: 0s;    opacity: 1; transform: none; }
  .sd-section-trust .sd-trust-quotes.sd-reveal-group.sd-reveal--in > *:nth-child(2) { transition-delay: 0.18s; opacity: 1; transform: none; }
  .sd-section-trust .sd-trust-quotes.sd-reveal-group.sd-reveal--in > *:nth-child(3) { transition-delay: 0.36s; opacity: 1; transform: none; }

  /* Trust card hover lift */
  .sd-trust-quote {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
  }

  .sd-trust-quote:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgb(124 58 237 / 28%),
                0 0 0 1px rgb(167 139 250 / 35%),
                inset 0 1px 0 rgb(255 255 255 / 8%);
    border-color: rgb(167 139 250 / 35%);
  }

  .sd-trust-quote:hover::before {
    color: rgb(167 139 250 / 22%);
  }

  /* Step icon hover glow */
  .sd-step-icon {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  .sd-step:hover .sd-step-icon {
    box-shadow: 0 0 0 6px var(--sd-accent-muted), 0 0 20px var(--sd-accent-muted);
    transform: scale(1.07);
  }

  /* Dream bubble hover lift */
  .sd-bubble--in:hover {
    border-color: var(--sd-border-strong);
    box-shadow:
      0 20px 56px rgb(0 0 0 / 50%),
      inset 0 1px 0 rgb(255 255 255 / 10%),
      0 0 52px rgb(167 139 250 / 20%);
    transform: translateY(-6px) scale(1.01);
    transition:
      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  /* Highlight card hover lift */
  .sd-highlight {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
  }

  .sd-highlight:hover {
    transform: translateY(-3px);
    border-color: var(--sd-border-strong);
    box-shadow: 0 8px 32px rgb(0 0 0 / 25%);
  }

  /* Primary CTA button — slow shimmer sweep */
  .sd-btn-primary {
    background-size: 200% auto;
    background-image: linear-gradient(
      105deg,
      var(--sd-accent-dark) 0%,
      var(--sd-accent) 45%,
      #c4b5fd 55%,
      var(--sd-accent) 65%,
      var(--sd-accent-dark) 100%
    );
    animation: sd-shimmer 4s linear infinite;
  }

  /* Glow pulse on the hero CTA only (the most important button) */
  .sd-hero-actions .sd-btn-primary {
    animation: sd-shimmer 4s linear infinite, sd-glow-pulse 3s ease-in-out infinite;
  }

  /* Ghost button subtle lift */
  .sd-btn-ghost:hover {
    transform: translateY(-1px);
  }

  /* Burger icon rotates when nav is open */
  .sd-nav-burger i {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-block;
  }

  .sd-nav-burger[aria-expanded="true"] i {
    transform: rotate(90deg);
  }
}

/* Mobile nav slide-down — only animate when motion is OK */
@media (prefers-reduced-motion: no-preference) and (width <= 768px) {
  .sd-header-nav {
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.25s;
  }

  .sd-header-nav--open {
    transition: opacity 0.25s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }
}

/* Play button press feedback */
.sd-mock-play-btn:active { transform: scale(0.92); }

/* Reduced-motion fallback — instant reveal */
@media (prefers-reduced-motion: reduce) {
  .sd-reveal, .sd-reveal-group > * { opacity: 1; transform: none; }
  .sd-faq-chevron { transition: none; }

  .sd-section-trust::before, .sd-section-trust::after,
  .sd-trust-quote::after { animation: none; opacity: 0.6; }
  .sd-trust-quote { transition: none; }

  /* Constellation: show everything immediately, skip animations */
  .sd-cline { transition: none; stroke-dashoffset: 0; }
  .sd-star-dot { opacity: 1; transform: scale(1); transition: none; }
  .sd-star-dot::before { display: none; }
  .sd-star-label { opacity: 1; transform: none; transition: none; }
}

/* ── Delight — App dashboard ─────────────────────────────── */

/* Keyframes unique to the app surface */
@keyframes sd-twinkle-star {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}

@keyframes sd-check-pop {
  from { opacity: 0; transform: scale(0.25) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1)    rotate(0deg); }
}

@keyframes sd-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes sd-heartbeat {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  30%       { transform: scale(1.4); opacity: 0.7; }
  50%       { transform: scale(1.1); opacity: 0.5; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Sections float in on load — staggered so the page settles gently */
  .sd-page > .sd-promo-strip {
    animation: sd-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-welcome-banner {
    animation: sd-fade-up 0.5s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(1) {
    animation: sd-fade-up 0.5s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(2) {
    animation: sd-fade-up 0.5s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-section:nth-of-type(3) {
    animation: sd-fade-up 0.5s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-page > .sd-empty-state {
    animation: sd-fade-up 0.5s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Onboarding icon (moon) floats and breathes — the first screen feels enchanted */
  .sd-onboarding-moon-icon {
    display: block;
    animation: sd-float 4.5s ease-in-out infinite alternate, sd-moon-breathe 7s ease-in-out infinite;
  }

  /* Starfield background dots twinkle with staggered delays */
  .sd-star:nth-child(1) { animation: sd-twinkle 4s 0.0s ease-in-out infinite; }
  .sd-star:nth-child(2) { animation: sd-twinkle 6s 0.7s ease-in-out infinite; }
  .sd-star:nth-child(3) { animation: sd-twinkle 5s 1.4s ease-in-out infinite; }
  .sd-star:nth-child(4) { animation: sd-twinkle 7s 0.3s ease-in-out infinite; }
  .sd-star:nth-child(5) { animation: sd-twinkle 3s 1.9s ease-in-out infinite; }
  .sd-star:nth-child(6) { animation: sd-twinkle 5s 0.9s ease-in-out infinite; }
  .sd-star:nth-child(7) { animation: sd-twinkle 6s 2.1s ease-in-out infinite; }
  .sd-star:nth-child(8) { animation: sd-twinkle 4s 1.2s ease-in-out infinite; }

  /* Sparkles float in and out with staggered timing */
  .sd-sparkle:nth-child(1) { animation: sd-sparkle 3.5s 0.0s ease-in-out infinite; }
  .sd-sparkle:nth-child(2) { animation: sd-sparkle 4.5s 1.2s ease-in-out infinite; }
  .sd-sparkle:nth-child(3) { animation: sd-sparkle 3.0s 0.8s ease-in-out infinite; }
  .sd-sparkle:nth-child(4) { animation: sd-sparkle 5.0s 2.0s ease-in-out infinite; }

  /* Gold stars twinkle with staggered delays */
  .sd-star-deco:nth-child(1) { animation: sd-twinkle-star 1.6s 0.0s ease-in-out infinite; }
  .sd-star-deco:nth-child(2) { animation: sd-twinkle-star 2.0s 0.5s ease-in-out infinite; }
  .sd-star-deco:nth-child(3) { animation: sd-twinkle-star 1.8s 0.9s ease-in-out infinite; }

  /* Hearts pulse with staggered heartbeat rhythm */
  .sd-heart-deco:nth-child(1) { animation: sd-heartbeat 2.4s 0.0s ease-in-out infinite; }
  .sd-heart-deco:nth-child(2) { animation: sd-heartbeat 2.8s 0.5s ease-in-out infinite; }
  .sd-heart-deco:nth-child(3) { animation: sd-heartbeat 2.2s 1.1s ease-in-out infinite; }
  .sd-heart-deco:nth-child(4) { animation: sd-heartbeat 3.0s 0.3s ease-in-out infinite; }
  .sd-heart-deco:nth-child(5) { animation: sd-heartbeat 2.6s 1.6s ease-in-out infinite; }
  .sd-heart-deco:nth-child(6) { animation: sd-heartbeat 2.4s 0.8s ease-in-out infinite; }
  .sd-heart-deco:nth-child(7) { animation: sd-heartbeat 2.9s 1.3s ease-in-out infinite; }
  .sd-heart-deco:nth-child(8) { animation: sd-heartbeat 2.3s 2.0s ease-in-out infinite; }

  /* CTA button inside onboarding shimmers like the hero button */
  .sd-onboarding-hero .sd-btn-primary {
    animation: sd-shimmer 4s linear infinite, sd-glow-pulse 3s ease-in-out infinite;
  }

  /* Greeting moon in the welcome banner drifts slowly */
  .sd-welcome-text h1 i {
    display: inline-block;
    animation: sd-float 6s ease-in-out infinite alternate;
  }

  /* Empty-state icon floats — a quiet invitation to begin */
  .sd-empty-state i {
    animation: sd-float 5s ease-in-out infinite alternate;
  }

  /* Moon breathes softly — calm and dreamy */
  .sd-story-cover-placeholder--meditation i {
    animation: sd-moon-breathe 7s ease-in-out infinite;
  }

  /* Star twinkles — alive and sparkling (3.5s keeps it visible without thrashing the compositor) */
  .sd-story-cover-placeholder--story i {
    animation: sd-twinkle-star 3.5s ease-in-out infinite;
  }

  /* Credit badge star in the topbar — twinkles like a real star */
  .sd-credit-badge i {
    display: inline-block;
    animation: sd-twinkle-star 3.5s ease-in-out infinite;
  }

  /* Onboarding done-step checkmark — warm gold pop when the step completes */
  .sd-progress-dot--done i {
    animation: sd-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* Profile card hover — violet glow elevates the selected child's card */
  .sd-profile-card {
    transition: border-color var(--sd-transition), transform var(--sd-transition),
                box-shadow var(--sd-transition);
  }

  .sd-profile-card:hover {
    box-shadow: 0 8px 28px rgb(167 139 250 / 28%);
  }

  /* Avatar gets a soft violet ring when the card is hovered */
  .sd-profile-card:hover .sd-profile-avatar {
    box-shadow: 0 0 0 3px var(--sd-accent-muted), 0 0 18px rgb(167 139 250 / 35%);
    transition: box-shadow 0.25s ease;
  }

  /* Story card hover + entrance — single rule to avoid duplicate specificity resolution */
  .sd-story-card {
    transition: border-color var(--sd-transition), transform var(--sd-transition),
                box-shadow var(--sd-transition);
  }

  /* Meditation cards hover: purple glow (dreamy, calm) */
  .sd-story-card--meditation:hover {
    box-shadow: 0 8px 28px rgb(167 139 250 / 22%);
  }

  /* Story cards hover: warm gold glow (sparkly, adventurous) */
  .sd-story-card:not(.sd-story-card--meditation):hover {
    box-shadow: 0 8px 28px rgb(251 191 36 / 18%);
  }

  /* Library grid — only first 9 cards stagger in (≈3 visible rows); the rest appear instantly
     to avoid running entrance animations on all off-screen cards simultaneously */
  .sd-story-card:nth-child(-n+9) {
    animation: sd-fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .sd-story-card:nth-child(1) { animation-delay:   0ms; }
  .sd-story-card:nth-child(2) { animation-delay:  55ms; }
  .sd-story-card:nth-child(3) { animation-delay: 110ms; }
  .sd-story-card:nth-child(4) { animation-delay: 165ms; }
  .sd-story-card:nth-child(5) { animation-delay: 220ms; }
  .sd-story-card:nth-child(6) { animation-delay: 275ms; }
}

/* ── Pricing ────────────────────────────────────────────────── */
.sd-pricing-page { padding: var(--sd-space-3xl) 0; }
.sd-pricing-header { text-align: center; margin-bottom: var(--sd-space-2xl); }

.sd-pricing-footer {
  text-align: center;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
  margin-top: var(--sd-space-xl);
}

.sd-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sd-space-xl);
  max-width: 900px;
  margin-inline: auto;
}

.sd-plan-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-md);
  position: relative;
}

.sd-plan-card h2,
.sd-plan-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--sd-text); overflow-wrap: break-word; }

.sd-plan-cta { margin-top: auto; }

.sd-plan-card-featured {
  border-color: var(--sd-accent);
  background: linear-gradient(145deg, #1e1b4b, #2a1f5e);
  box-shadow: 0 0 0 2px var(--sd-accent), var(--sd-shadow-glow);
  z-index: 0;
}

.sd-plan-card-featured > *:not(.sd-onboarding-stars, .sd-onboarding-dots, .sd-plan-badge-top) {
  position: relative;
  z-index: 1;
}

.sd-plan-badge-top {
  position: absolute;
  top: -1px;
  right: var(--sd-space-lg);
  background: var(--sd-grad-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 0 0 var(--sd-radius-md) var(--sd-radius-md);
  white-space: nowrap;
  max-width: calc(100% - var(--sd-space-xl));
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-plan-pricing { display: flex; flex-direction: column; gap: 0.15rem; }

.sd-plan-price {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  color: var(--sd-text);
}
.sd-plan-period { font-size: 1rem; color: var(--sd-text-muted); font-weight: 400; }
.sd-plan-price-yearly { font-size: 0.82rem; color: var(--sd-text-muted); margin: 0; }
.sd-savings { color: var(--sd-success); font-weight: 700; }

.sd-plan-actions { display: flex; flex-direction: column; gap: var(--sd-space-sm); margin-top: auto; }
.sd-plan-actions form { display: flex; }
.sd-plan-actions form .sd-btn { flex: 1; }

/* ── App layout ─────────────────────────────────────────────── */
.sd-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.sd-app-topbar {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 16px;
  right: 16px;
  height: var(--sd-topbar-height);
  padding-top: 0;
  background: rgb(15 12 41 / 42%);
  backdrop-filter: blur(40px) brightness(1.15) saturate(1.6);
  z-index: 200;
  border-radius: 28px;
  border: 1px solid rgb(167 139 250 / 18%);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 35%),
    0 2px 8px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

/* Specular bottom edge highlight */
.sd-app-topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 20%) 20%,
    rgb(167 139 250 / 25%) 50%,
    rgb(255 255 255 / 20%) 80%,
    transparent 100%
  );
}

/* Inner glass gradient overlay */
.sd-app-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 6%) 0%,
    transparent 40%,
    transparent 70%,
    rgb(167 139 250 / 4%) 100%
  );
  pointer-events: none;
}

.sd-app-topbar-inner {
  height: var(--sd-topbar-height);
  padding-inline: var(--sd-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-app-topbar-actions { display: flex; align-items: center; gap: var(--sd-space-sm); }

/* Logo glow in the app topbar */
.sd-app-topbar .sd-brand-logo {
  filter: drop-shadow(0 0 8px rgb(167 139 250 / 55%));
}

/* Icon + wordmark brand in the app topbar */
.sd-brand--wordmark {
  gap: 0.5rem;
  color: var(--sd-text);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sd-brand--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-accent);
  flex-shrink: 0;
  line-height: 1;
}
.sd-brand--icon i { font-size: 1.1rem; line-height: 1; }
.sd-brand-moon-img { width: 22px; height: auto; }
.sd-bottom-moon-img { width: 20px; height: auto; }
.sd-brand--name { color: var(--sd-text); }

/* Credit badge — number-forward design */
.sd-credit-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--sd-gold);
  background: rgb(251 191 36 / 10%);
  border: 1px solid rgb(251 191 36 / 30%);
  padding: 0.28rem 0.7rem 0.28rem 0.55rem;
  border-radius: var(--sd-radius-pill);
  text-decoration: none;
  transition: background var(--sd-transition), border-color var(--sd-transition);
}

.sd-credit-badge:hover {
  background: rgb(251 191 36 / 18%);
  border-color: rgb(251 191 36 / 50%);
}

.sd-credit-badge i { font-size: 0.8rem; }

.sd-credit-count {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sd-gold);
}

.sd-credit-unit {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgb(251 191 36 / 60%);
  letter-spacing: 0.02em;
}

.sd-credit-renewal {
  width: 100%;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--sd-text-muted);
  line-height: 1;
  margin-top: -0.1rem;
}

/* App layout body */
.sd-app-layout {
  display: flex;
  margin-top: calc(var(--sd-topbar-height) + env(safe-area-inset-top, 0px) + 24px);
  min-height: calc(100vh - var(--sd-topbar-height) - env(safe-area-inset-top, 0px) - 24px);
}

/* Sidebar (desktop) */
.sd-sidebar {
  width: var(--sd-sidebar-width);
  flex-shrink: 0;
  background: var(--sd-bg-soft);
  border-right: 1px solid var(--sd-border);
  padding: var(--sd-space-lg) 0;
  position: sticky;
  top: calc(var(--sd-topbar-height) + env(safe-area-inset-top, 0px));
  height: calc(100vh - var(--sd-topbar-height) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sd-sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 var(--sd-space-sm); }

.sd-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem var(--sd-space-md);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background var(--sd-transition), color var(--sd-transition);
}
.sd-sidebar-link:hover { background: var(--sd-accent-muted); color: var(--sd-accent); }
.sd-sidebar-link.active { background: var(--sd-accent-muted); color: var(--sd-accent); }
.sd-sidebar-link--muted { color: var(--sd-text-muted); }
.sd-sidebar-footer { padding: var(--sd-space-md) var(--sd-space-sm); }
.sd-sidebar-user { font-size: 0.8rem; color: var(--sd-text-muted); padding: 0 var(--sd-space-md); margin-bottom: 0.4rem; display: block; }

/* Main content */
.sd-app-main {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
}

/* Bottom nav (mobile) */
.sd-bottom-nav {
  display: none;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: 16px;
  right: 16px;
  height: var(--sd-bottom-nav-h);
  padding-bottom: 0;
  background: rgb(15 12 41 / 42%);
  backdrop-filter: blur(40px) brightness(1.15) saturate(1.6);
  z-index: 200;
  align-items: center;
  overflow: visible;
  border-radius: 28px;
  border: 1px solid rgb(167 139 250 / 18%);
  box-shadow:
    0 8px 32px rgb(0 0 0 / 35%),
    0 2px 8px rgb(0 0 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

.sd-bottom-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 20%) 20%,
    rgb(167 139 250 / 25%) 50%,
    rgb(255 255 255 / 20%) 80%,
    transparent 100%
  );
}

.sd-bottom-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 6%) 0%,
    transparent 40%,
    transparent 70%,
    rgb(167 139 250 / 4%) 100%
  );
  pointer-events: none;
}

.sd-bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--sd-text-muted);
  text-decoration: none;
  transition: color var(--sd-transition);
  position: relative;
}

/* Icon wrapper — carries the active pill indicator */
.sd-bottom-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 36px;
  border-radius: 14px;
  transition: background var(--sd-transition), box-shadow var(--sd-transition), border-color var(--sd-transition);
}
.sd-bottom-nav-item i { font-size: 1.35rem; }

.sd-bottom-nav-item.active .sd-bottom-nav-icon {
  background: rgb(167 139 250 / 18%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    inset 0 -1px 0 rgb(167 139 250 / 10%),
    0 0 12px rgb(167 139 250 / 15%);
  border: 1px solid rgb(167 139 250 / 22%);
}

.sd-bottom-nav-item:hover .sd-bottom-nav-icon {
  background: rgb(167 139 250 / 12%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.sd-bottom-nav-item.active { color: var(--sd-accent); }
.sd-bottom-nav-item:hover { color: var(--sd-accent); }

/* Center FAB — "Crear cuento" */
.sd-bottom-nav-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgb(124 58 237 / 85%) 0%, rgb(167 139 250 / 85%) 100%);
  border-radius: 50%;
  box-shadow:
    0 4px 20px rgb(124 58 237 / 40%),
    0 8px 32px rgb(0 0 0 / 25%),
    inset 0 1px 1px rgb(255 255 255 / 20%);
  border: 1px solid rgb(167 139 250 / 30%);
  color: #fff;
  text-decoration: none;
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: -28px;
  backdrop-filter: blur(12px);
  transition: transform var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-bottom-nav-fab:hover,
.sd-bottom-nav-fab:active {
  color: #fff;
  transform: scale(1.08);
  box-shadow:
    0 6px 28px rgb(124 58 237 / 50%),
    0 12px 40px rgb(0 0 0 / 30%),
    inset 0 1px 1px rgb(255 255 255 / 25%);
}

/* ── Dashboard welcome ─────────────────────────────────────── */
.sd-welcome-banner {
  background: linear-gradient(135deg, var(--sd-bg-card), var(--sd-bg-card-deep));
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  margin-bottom: var(--sd-space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-md);
  position: relative;
  overflow: hidden;
}
.sd-welcome-text { flex: 1; min-width: 0; }
.sd-welcome-text h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.3rem; word-break: break-word; }
.sd-welcome-text p { color: var(--sd-text-soft); margin: 0; font-size: 0.9rem; }
.sd-welcome-nube { flex-shrink: 0; display: flex; align-items: flex-end; }
.sd-welcome-nube-img { width: 64px; height: auto; display: block; animation: sd-nube-float-duo 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .sd-welcome-nube-img { animation: none; } }

/* ── Dashboard promo strip ───────────────────────────────────── */
.sd-promo-strip {
  display: flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--sd-gold) 30%, transparent);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-gold-muted);
  overflow: hidden;
  margin-bottom: var(--sd-space-2xl);
}

.sd-promo-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sd-space-xs);
  padding: var(--sd-space-sm) var(--sd-space-md);
  min-height: 44px;
  color: var(--sd-gold);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--sd-transition), color var(--sd-transition);
  min-width: 0;
}

.sd-promo-item:hover {
  background: color-mix(in srgb, var(--sd-gold) 12%, transparent);
  color: var(--sd-text);
}

.sd-promo-item:active {
  background: color-mix(in srgb, var(--sd-gold) 20%, transparent);
}

.sd-promo-item:focus-visible {
  outline: 2px solid var(--sd-gold);
  outline-offset: -2px;
}

.sd-promo-icon {
  color: var(--sd-gold);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sd-promo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-promo-arrow {
  color: color-mix(in srgb, var(--sd-gold) 50%, transparent);
  font-size: 0.65rem;
  flex-shrink: 0;
}

.sd-promo-divider {
  width: 1px;
  background: color-mix(in srgb, var(--sd-gold) 30%, transparent);
  align-self: stretch;
  flex-shrink: 0;
}

@media (width <= 480px) {
  .sd-promo-strip { flex-direction: column; }
  .sd-promo-divider { width: auto; height: 1px; align-self: auto; }
}

/* ── Onboarding hero ─────────────────────────────────────────── */
.sd-onboarding-hero {
  background: linear-gradient(150deg, var(--sd-bg) 0%, var(--sd-bg-card-night) 40%, var(--sd-bg-card-deep) 70%, var(--sd-bg-card) 100%);
  border: 1px solid var(--sd-accent-muted);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  margin-bottom: var(--sd-space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Starfield background layer */
.sd-onboarding-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-onboarding-star-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--sd-text);
}

/* Sparkle layer */
.sd-onboarding-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sd-sparkle {
  position: absolute;
  background: var(--sd-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}

/* Main content area */
.sd-onboarding-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Moon icon */
.sd-onboarding-moon-wrap {
  margin-bottom: var(--sd-space-md);
}

.sd-onboarding-moon-icon {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  color: var(--sd-gold);
  filter: drop-shadow(0 0 20px rgb(251 191 36 / 40%));
}

.sd-onboarding-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sd-space-xs);
  color: var(--sd-text);
}

.sd-onboarding-subtitle {
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-lg);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  max-width: 420px;
  line-height: 1.6;
}

/* Name form — stacked vertically, centered */
.sd-onboarding-name-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-sm);
  width: 100%;
  max-width: 320px;
  margin: 0 auto var(--sd-space-lg);
}

.sd-onboarding-name-form .sd-input {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  border-radius: var(--sd-radius-pill);
  background: rgb(15 12 41 / 60%);
  border: 1.5px solid var(--sd-border-strong);
  padding: 0.75rem 1.2rem;
}

.sd-onboarding-name-form .sd-input:focus {
  border-color: var(--sd-accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--sd-accent-muted), 0 0 20px rgb(167 139 250 / 20%);
}

/* CTA button inside the hero — larger, with room below */
.sd-onboarding-hero .sd-btn-primary {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
  margin-bottom: var(--sd-space-lg);
}

/* Progress stepper with connected track */
.sd-onboarding-progress {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding-top: var(--sd-space-lg);
  border-top: 1px solid var(--sd-border);
}

.sd-progress-track {
  position: relative;
  height: 2px;
  background: var(--sd-border);
  border-radius: 1px;
  margin: 0 14px;
}

.sd-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--sd-grad-accent);
  border-radius: 1px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sd-progress--step-2 .sd-progress-fill { width: 100%; }

.sd-progress-dots {
  list-style: none;
  padding: 0;
  margin: -14px 0 0;
  display: flex;
  justify-content: space-between;
}

.sd-progress-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-xs);
}

.sd-progress-dot-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--sd-border);
  background: var(--sd-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--sd-text-muted);
}

.sd-progress-dot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sd-text-muted);
}

.sd-progress-dot--active .sd-progress-dot-circle {
  border-color: var(--sd-accent);
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  box-shadow: 0 0 12px rgb(167 139 250 / 40%);
}

.sd-progress-dot--active .sd-progress-dot-label { color: var(--sd-accent); }

.sd-progress-dot--done .sd-progress-dot-circle {
  border-color: var(--sd-gold);
  background: var(--sd-gold-muted);
  color: var(--sd-gold);
}

.sd-progress-dot--done .sd-progress-dot-label { color: var(--sd-gold); }

/* Skip link — quiet, unobtrusive */
.sd-onboarding-skip {
  display: inline-block;
  margin-top: var(--sd-space-xl);
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  opacity: 0.6;
  text-decoration: none;
}

.sd-onboarding-skip:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sd-field-hint--onboarding {
  color: var(--sd-accent);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: var(--sd-space-xs);
}

.sd-field-hint--onboarding-interests {
  margin-bottom: var(--sd-space-sm);
}

/* ── Onboarding intro: character duo ────────────────────────── */
.sd-onboarding-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sd-space-xl);
  margin-bottom: var(--sd-space-sm);
}

.sd-onboarding-duo-nuno-wrap {
  animation: sd-nuno-float-duo 3.5s ease-in-out infinite;
}

.sd-onboarding-duo-nube-wrap {
  animation: sd-nube-float-duo 5s ease-in-out infinite;
}

.sd-onboarding-duo-nuno {
  width: 75px;
  display: block;
}

.sd-onboarding-duo-nube {
  width: 56px;
  display: block;
}

@keyframes sd-nuno-float-duo {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes sd-nube-float-duo {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-onboarding-duo-nuno-wrap,
  .sd-onboarding-duo-nube-wrap { animation: none; }
}

/* ── Onboarding 3-step progress nav ─────────────────────────── */
.sd-progress--3step-intro .sd-progress-fill   { width: 0%; }
.sd-progress--3step-profile .sd-progress-fill { width: 50%; }
.sd-progress--3step-story .sd-progress-fill   { width: 100%; }

@media (width <= 480px) {
  .sd-onboarding-hero {
    padding: var(--sd-space-xl) var(--sd-space-md);
    min-height: 320px;
  }
  .sd-onboarding-moon-icon { font-size: 2.5rem; }
  .sd-progress-dot-circle { width: 24px; height: 24px; font-size: 0.65rem; }
  .sd-progress-dots { margin-top: -12px; }
}

/* ── Profiles index header ──────────────────────────────────── */
.sd-profiles-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
}

.sd-profiles-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

/* ── Profile form header ────────────────────────────────────── */
.sd-profile-form-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-top: var(--sd-space-lg);
  margin-bottom: var(--sd-space-xl);
}
.sd-profile-form-header-text { flex: 1; }

.sd-profile-form-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
  overflow: hidden;
}

.sd-profile-form-icon--nuno {
  background: transparent;
  border: none;
  width: 64px;
  height: 64px;
  overflow: visible;
}

.sd-profile-form-nuno-img {
  width: 56px;
  height: auto;
  display: block;
  animation: sd-nuno-float-duo 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sd-profile-form-nuno-img { animation: none; }
}

.sd-profile-form-subtitle {
  font-size: 0.875rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

@media (width <= 480px) {
  .sd-profile-delete-form {
    flex-shrink: 0;
    line-height: 0;
  }

  .sd-profile-delete-form .sd-btn-danger {
    width: 40px;
    height: 40px;
    padding: 0;
    min-width: 0;
  }
  .sd-profile-delete-form .sd-btn-label { display: none; }
}

/* Delete button at bottom of edit form */
.sd-profile-delete-btn {
  margin-top: var(--sd-space-sm);
  margin-bottom: var(--sd-space-xl);
  width: 100%;
  justify-content: center;
}

.sd-profile-delete-form:has(.sd-profile-delete-btn) {
  display: block;
  line-height: normal;
}

.sd-profile-delete-form:has(.sd-profile-delete-btn) .sd-btn-danger {
  width: 100%;
  height: auto;
  padding: var(--sd-space-sm) var(--sd-space-md);
  min-width: unset;
}
.sd-profile-delete-form:has(.sd-profile-delete-btn) .sd-btn-label { display: inline; }

/* ── Profile form sections ──────────────────────────────────── */
.sd-form-section {
  margin-bottom: var(--sd-space-lg);
}

/* Strip trailing margin so it doesn't stack with card padding */
.sd-form-section > .sd-field:last-child { margin-bottom: 0; }

.sd-form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--sd-text);
  margin: 0 0 var(--sd-space-lg);
  padding-bottom: var(--sd-space-sm);
  border-bottom: 1px solid var(--sd-border);
}

.sd-form-section-title i {
  color: var(--sd-accent);
  font-size: 1.1em;
}

/* ── Two-column field row ────────────────────────────────────── */
.sd-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-lg);
}

/* Zero out child mb — the row itself owns the vertical rhythm */
.sd-field-row > .sd-field { margin-bottom: 0; }

/* Last row before card edge — no trailing margin */
.sd-field-row:last-child,
.sd-field-row:last-of-type { margin-bottom: 0; }

@media (width <= 480px) {
  /* Stack columns but restore field spacing between stacked items */
  .sd-field-row { grid-template-columns: 1fr; }
  .sd-field-row > .sd-field { margin-bottom: var(--sd-space-md); }
  .sd-field-row > .sd-field:last-child { margin-bottom: 0; }
}

/* ── Tag picker label row ────────────────────────────────────── */
.sd-tag-picker-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sd-tag-picker-label-row .sd-label { margin-bottom: 0; }

/* ── Tag count badge ─────────────────────────────────────────── */
.sd-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ── Tag selection micro-animation ──────────────────────────── */

/* Use @keyframes (not transition) — innerHTML replacement creates fresh elements,
   so transitions can't detect a state change. Animations fire on class addition. */
@keyframes sd-tag-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-tag.selected {
    animation: sd-tag-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .sd-tag:active { transform: scale(0.94); }
}

/* ── Custom tag hint ─────────────────────────────────────────── */
.sd-tag-custom-hint {
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ── Profile form actions ────────────────────────────────────── */
.sd-form-actions--profile {
  border-top: 1px solid var(--sd-border);
  padding-top: var(--sd-space-lg);
  margin-top: var(--sd-space-xs);
  align-items: center;
}

@media (width <= 480px) {
  .sd-form-actions--profile { flex-direction: column; }
  .sd-form-actions--profile .sd-btn { width: 100%; justify-content: center; }
}

/* ── Form section entrance animations ───────────────────────── */

/* Use adjacent sibling selector — reliable regardless of error alert presence */
@media (prefers-reduced-motion: no-preference) {
  .sd-form-section {
    animation: sd-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sd-form-section + .sd-form-section {
    animation-delay: 0.1s;
  }
}

/* ── Profile components ─────────────────────────────────────── */
.sd-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sd-space-md);
}

/* Manage-mode grid — larger minimum so cards have room to breathe */
.sd-profile-grid--manage {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sd-space-lg);
}

.sd-profile-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: var(--sd-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: border-color var(--sd-transition), transform var(--sd-transition);
}
.sd-profile-card:hover { border-color: var(--sd-accent); transform: translateY(-2px); }

.sd-profile-card > *:not(.sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

/* Manage cards — more padding, structured gap, no interactive hover */
.sd-profile-card--manage {
  cursor: default;
  padding: var(--sd-space-xl);
  gap: var(--sd-space-sm);
  position: relative;
  z-index: 0;
}

.sd-profile-card--manage > *:not(.sd-onboarding-stars, .sd-onboarding-hearts, .sd-onboarding-dots) {
  position: relative;
  z-index: 1;
}

.sd-profile-card--manage:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--sd-border);
}

.sd-profile-card--manage:hover .sd-profile-avatar {
  box-shadow: none;
}

/* Larger name in manage context */
.sd-profile-card--manage .sd-profile-name {
  font-size: 1.15rem;
}

/* Identity block: name + age stacked center-aligned */
.sd-profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
}

/* Stacked full-width actions with a separator */
.sd-profile-actions--stacked {
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding-top: var(--sd-space-md);
  border-top: 1px solid var(--sd-border);
  gap: var(--sd-space-xs);
}

/* "+N more" interests overflow pill */
.sd-tag-more {
  background: var(--sd-bg-soft);
  color: var(--sd-text-muted);
  border: 1px solid var(--sd-border-strong);
}

.sd-profile-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sd-grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.sd-profile-avatar-lg { width: 80px; height: 80px; font-size: 2rem; }
.sd-profile-avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.sd-profile-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sd-profile-name { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sd-profile-age { font-size: 0.8rem; color: var(--sd-text-muted); }
.sd-profile-interests { margin-top: 0.4rem; }

.sd-profile-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.sd-profile-hero-card {
  margin-bottom: var(--sd-space-lg);
  padding: var(--sd-space-lg);
}

.sd-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
}

.sd-profile-hero-info { flex: 1; }

.sd-profile-hero-actions {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  margin-top: var(--sd-space-md);
}

@media (width <= 480px) {
  .sd-profile-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sd-profile-hero .sd-profile-avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 2.4rem;
  }

  .sd-profile-hero-info { width: 100%; }

  .sd-tags-inline { justify-content: center; }

  .sd-profile-hero-actions {
    justify-content: center;
  }

  .sd-profile-hero-actions .sd-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}

.sd-story-form-header-inner {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  padding-inline: var(--sd-space-md);
}

.sd-story-form-character {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  align-items: center;
}
.sd-story-form-character-nuno { animation: sd-nuno-float-duo 3.5s ease-in-out infinite; }
.sd-story-form-character-nube { animation: sd-nube-float-duo 5s ease-in-out infinite; }
.sd-story-form-character-img { width: 56px; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .sd-story-form-character-nuno,
  .sd-story-form-character-nube { animation: none; }
}

.sd-profile-mini {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
}

.sd-profile-mini .sd-page-title { font-size: 1.25rem; }
.sd-profile-mini p { margin: 0; }

/* ── Story grid + cards ──────────────────────────────────────── */

/* ── Library page header ─────────────────────────────────────── */
.sd-library-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-library-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

/* ── Profile filter chips ────────────────────────────────────── */
.sd-filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text-soft);
  text-decoration: none;
  border: 1.5px solid var(--sd-border-strong);
  background: transparent;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
  white-space: nowrap;
}

.sd-filter-chip:hover,
.sd-filter-chip.active {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  color: var(--sd-accent);
}

.sd-filter-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--sd-text-muted);
  flex-shrink: 0;
  overflow: hidden;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
}

.sd-filter-chip.active .sd-filter-chip-avatar {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: #fff;
}

.sd-filter-chip-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Story grid + cards ──────────────────────────────────────── */
.sd-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sd-space-lg);
}

.sd-story-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  contain: layout style;
  transition: border-color var(--sd-transition), transform var(--sd-transition);
}
.sd-story-card:hover { transform: translateY(-2px); }
.sd-story-card--meditation:hover { border-color: var(--sd-accent); }
.sd-story-card:not(.sd-story-card--meditation):hover { border-color: rgb(251 191 36 / 55%); }

/* Favorited story cards get a soft rose border */
.sd-story-card--favorite { border-color: rgb(255 160 160 / 25%); }
.sd-story-card--favorite:not(.sd-story-card--meditation):hover { border-color: rgb(255 160 160 / 45%); }

.sd-story-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.sd-story-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sd-story-cover-placeholder {
  background: var(--sd-grad-accent); /* fallback if modifier class is missing */
  color: rgb(255 255 255 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

/* --meditation intentionally inherits base background + color */
.sd-story-cover-placeholder--story {
  background: linear-gradient(135deg, #0a0e27 0%, #162447 55%, #1f4068 100%);
  color: rgb(251 191 36 / 55%);
}

/* Gradient overlay at cover bottom — profile pill + favorite star */
.sd-story-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 65%) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  padding: var(--sd-space-xs) var(--sd-space-sm);
}

/* Frosted glass pill — profile name */
.sd-story-cover-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgb(255 255 255 / 92%);
  background: rgb(0 0 0 / 30%);
  backdrop-filter: blur(6px);
  padding: 0.18rem 0.55rem;
  border-radius: var(--sd-radius-pill);
  max-width: 72%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-story-cover-pill i { font-size: 0.65rem; opacity: 0.85; }

/* Heart toggle button — top-right corner of the cover */

/* Note: button_to puts class: on the <button> element, not the <form> */
.sd-story-fav-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.75rem;
  z-index: 2;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgb(255 255 255 / 45%);
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 50%));
  transition: transform var(--sd-transition), color var(--sd-transition), filter var(--sd-transition);
}
.sd-story-fav-btn:hover { transform: scale(1.2); color: var(--sd-rose); filter: drop-shadow(0 1px 4px rgb(0 0 0 / 60%)); }
.sd-story-fav-btn--active { color: var(--sd-rose); filter: drop-shadow(0 1px 4px rgb(255 160 160 / 40%)); }
.sd-story-fav-btn:focus-visible { outline: 2px solid var(--sd-rose); outline-offset: 4px; border-radius: 50%; }

/* Heart pop — plays once when a story is just favorited via Turbo Stream */
@keyframes sd-heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  65%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-story-fav-btn--just-favorited {
    animation: sd-heart-pop 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
  }
}

.sd-story-body {
  padding: var(--sd-space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xs);
  min-width: 0;
}

.sd-story-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.sd-story-date {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  margin: 0;
}

/* kept for story show page compatibility */
.sd-story-meta { font-size: 0.78rem; color: var(--sd-text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-story-summary { font-size: 0.82rem; color: var(--sd-text-soft); margin: 0; flex: 1; overflow-wrap: break-word; }

.sd-story-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xs);
  margin-top: auto;
  padding-top: var(--sd-space-sm);
}

/* Story show */
.sd-story-hero-cover {
  width: 100%;
  height: 220px;
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  margin-bottom: var(--sd-space-lg);
}
.sd-story-header { margin-bottom: var(--sd-space-lg); }

.sd-story-heading-row {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  margin-bottom: 0.4rem;
}
.sd-story-heading { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: 0; flex: 1; }

/* Fav heart inline in the heading row (not absolutely positioned) */
.sd-story-heading-row form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.sd-story-heading-row .sd-story-fav-btn {
  position: static;
  flex-shrink: 0;
  font-size: 1.2rem;
  padding: 0.3rem;
}

/* 3-dot menu */
.sd-story-menu-wrap { position: relative; flex-shrink: 0; padding-top: 0.3rem; }

.sd-story-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--sd-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sd-story-menu-trigger:hover {
  background: var(--sd-surface-2);
  color: var(--sd-text);
}

.sd-story-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 11rem;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-border-strong);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  overflow: hidden;
  display: none;
  z-index: 50;
}
.sd-story-menu--open { display: block; }

.sd-story-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--sd-text-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.sd-story-menu-item:hover { background: var(--sd-surface-3); }
.sd-story-menu-item--danger { color: var(--sd-danger); }
.sd-story-menu-item--danger:hover { background: rgb(248 113 113 / 10%); }

/* button_to inside .sd-story-menu renders a wrapping <form> — reset its margins */
.sd-story-menu form { margin: 0; }

/* ── Story title inline edit ─────────────────────────────────── */
.sd-title-edit-form { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }

.sd-title-edit-field { flex: 1; }

.sd-title-input {
  width: 100%;
  background: var(--sd-surface-raised);
  border: 1.5px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0.35rem 0.6rem;
  transition: border-color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-title-input::placeholder { color: var(--sd-text-muted); }

.sd-title-input:focus {
  outline: none;
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}

.sd-title-input--error { border-color: var(--sd-danger); }
.sd-title-input--error:focus { box-shadow: 0 0 0 3px rgb(248 113 113 / 15%); }

.sd-title-error {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--sd-danger);
}

.sd-title-edit-actions {
  display: flex;
  gap: var(--sd-space-xs);
}

.sd-story-meta-line { font-size: 0.85rem; color: var(--sd-text-muted); margin: 0 0 var(--sd-space-md); }

.sd-story-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sd-space-sm);
}

.sd-story-actions-row .sd-btn,
.sd-story-actions-row form .sd-btn,
.sd-story-actions-row [data-controller^="sweetdreams--offline-save"] .sd-btn {
  width: 100%;
  justify-content: center;
}

@media (width <= 479px) {
  .sd-story-actions-row {
    grid-template-columns: 1fr;
  }
}

.sd-story-content {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--sd-text-soft);
  white-space: pre-line;
  margin-bottom: var(--sd-space-xl);
}
.sd-story-content p { margin: -0.5em 0 0; }

.sd-story-footer {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  padding-top: var(--sd-space-lg);
  border-top: 1px solid var(--sd-border);
}

.sd-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: color 0.2s, opacity 0.2s;
}

.sd-delete-btn:hover {
  color: var(--sd-danger);
  opacity: 1;
}

/* ── Playback view ──────────────────────────────────────────── */
.sd-playback-back {
  position: absolute;
  top: var(--sd-space-xs);
  left: var(--sd-space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--sd-text-muted);
  background: rgb(15 12 41 / 38%);
  backdrop-filter: blur(20px) brightness(1.1) saturate(1.4);
  border: 1px solid rgb(167 139 250 / 15%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 6%);
  transition: background 0.15s, color 0.15s;
  z-index: 10;
}
.sd-playback-back:hover { background: rgb(167 139 250 / 18%); color: var(--sd-text); }

/* ── Offline save button states ── */

/* Not saved: dimmed like repeat "off" */
.sd-playback-btn[data-sweetdreams--offline-save-target="saveBtn"] { opacity: 0.35; }

/* Saved: accent color like repeat "all" */
.sd-playback-btn--offline-saved {
  color: var(--sd-accent);
  opacity: 1;
}

@keyframes sd-spin-download {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sd-spin-download { animation: sd-spin-download 0.8s linear infinite; }

/* ── Offline playback banners ───────────────────────────────── */
.sd-playback-offline-banner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  padding: 0.3rem 0.75rem;
  background: var(--sd-surface-2);
  border-radius: var(--sd-radius-pill);
  margin-bottom: var(--sd-space-sm);
}
.sd-playback-offline-banner--warning { color: var(--sd-warning, #e0923c); }

.sd-playback {
  position: relative;
  min-height: calc(100dvh - var(--sd-topbar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sd-space-xl);
  background: var(--sd-grad-hero);
}

.sd-playback-cover {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  margin-bottom: var(--sd-space-lg);
  box-shadow: var(--sd-shadow-glow);
  position: relative;
}
.sd-playback-cover img { width: 100%; height: 100%; object-fit: cover; }

.sd-playback-cover-placeholder {
  width: 100%;
  height: 100%;
  background: var(--sd-grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgb(255 255 255 / 50%);
}

.sd-visualizer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sd-visualizer { display: none; }
}

.sd-playback-info {
  text-align: center;
  margin-bottom: var(--sd-space-lg);
  width: 100%;
  max-width: 400px;
}
.sd-playback-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.3rem; }
.sd-playback-subtitle { font-size: 0.85rem; color: var(--sd-text-muted); margin: 0; }

.sd-playback-progress-track {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: var(--sd-border);
  border-radius: var(--sd-radius-pill);
  margin-bottom: 0.5rem;
  cursor: pointer;
  overflow: hidden;
}

.sd-playback-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s linear;
}

.sd-playback-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  margin-bottom: var(--sd-space-lg);
}

.sd-playback-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sd-space-lg);
  margin-bottom: var(--sd-space-xl);
  background: rgb(15 12 41 / 38%);
  backdrop-filter: blur(40px) brightness(1.15) saturate(1.6);
  border-radius: 24px;
  border: 1px solid rgb(167 139 250 / 18%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 8%);
  padding: var(--sd-space-md) var(--sd-space-lg);
}

.sd-controls-left  { display: flex; align-items: center; justify-content: flex-end; gap: var(--sd-space-sm); }
.sd-controls-center { display: flex; align-items: center; justify-content: center; }
.sd-controls-right { display: flex; align-items: center; justify-content: flex-start; gap: var(--sd-space-sm); }

.sd-playback-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sd-text-soft);
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: color var(--sd-transition), background var(--sd-transition), opacity var(--sd-transition);
}
.sd-playback-btn:focus { outline: none; }
.sd-playback-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }

@media (hover: hover) {
  .sd-playback-btn:hover { color: var(--sd-accent); background: var(--sd-accent-muted); }
}

.sd-playback-btn-main {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, rgb(124 58 237 / 85%) 0%, rgb(167 139 250 / 85%) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(167 139 250 / 30%);
  color: #fff !important;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgb(124 58 237 / 40%), 0 8px 32px rgb(0 0 0 / 25%), inset 0 1px 1px rgb(255 255 255 / 20%);
}

.sd-playback-btn-main:hover {
  background: linear-gradient(135deg, rgb(124 58 237 / 95%) 0%, rgb(167 139 250 / 95%) 100%);
  box-shadow: 0 6px 28px rgb(124 58 237 / 55%), inset 0 1px 1px rgb(255 255 255 / 25%);
}

.sd-playback-btn-secondary {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(167 139 250 / 12%);
  border: 1px solid rgb(167 139 250 / 15%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  color: var(--sd-text) !important;
}

/* off: dimmed */
.sd-playback-btn[data-repeat-mode="off"] { opacity: 0.35; }

/* all: accent, full brightness */
.sd-playback-btn[data-repeat-mode="all"] { color: var(--sd-accent); opacity: 1; }

/* one: accent + solid pill badge */
.sd-playback-btn[data-repeat-mode="one"] { color: var(--sd-accent); opacity: 1; position: relative; }

.sd-playback-btn[data-repeat-mode="one"]::after {
  content: "1";
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  background: var(--sd-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sd-playback-btn:disabled { opacity: 0.3; cursor: default; }
.sd-playback-btn:disabled:hover { color: var(--sd-text-soft); background: none; }

@keyframes sd-needs-tap-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(167 139 250 / 50%); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 10px rgb(167 139 250 / 0%); }
}

.sd-playback-btn--needs-tap {
  animation: sd-needs-tap-pulse 1.2s ease-in-out infinite;
}


.sd-playback-generating {
  text-align: center;
  color: var(--sd-text-muted);
  padding: var(--sd-space-lg);
  font-size: 0.9rem;
}

.sd-sleep-timer {
  margin-bottom: var(--sd-space-xl);
  text-align: center;
}
.sd-sleep-label { font-size: 1rem; color: var(--sd-text-muted); margin: 0 0 0.5rem; }
.sd-sleep-options { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }

.sd-sleep-btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgb(167 139 250 / 18%);
  border-radius: var(--sd-radius-pill);
  background: rgb(15 12 41 / 30%);
  backdrop-filter: blur(20px) brightness(1.1) saturate(1.4);
  color: var(--sd-text-soft);
  font-size: 0.95rem;
  font-family: var(--sd-font);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
}

.sd-sleep-btn:focus { outline: none; }
.sd-sleep-btn:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }

.sd-sleep-btn--active {
  background: rgb(124 58 237 / 70%);
  backdrop-filter: blur(12px);
  color: #fff;
  border-color: rgb(167 139 250 / 40%);
  box-shadow: 0 0 14px rgb(124 58 237 / 50%), inset 0 1px 0 rgb(255 255 255 / 15%);
}

@media (hover: hover) {
  .sd-sleep-btn:hover { background: var(--sd-accent-muted); border-color: var(--sd-accent); color: var(--sd-accent); }
}

.sd-story-text-detail { width: 100%; max-width: 600px; text-align: center; }
.sd-story-text-detail summary { cursor: pointer; font-size: 1rem; }

/* ── Compact player for mobile browsers with visible chrome ──── */

/* Triggers when viewport height is short (browser bar visible)  */
@media (height <= 700px) and (width <= 768px) {
  .sd-playback {
    padding: var(--sd-space-md);
    gap: 0;
  }

  .sd-playback-cover {
    max-width: 200px;
    margin-bottom: var(--sd-space-md);
  }

  .sd-playback-info {
    margin-bottom: var(--sd-space-sm);
  }
  .sd-playback-title { font-size: 1.1rem; }
  .sd-playback-progress-track { margin-bottom: 0.25rem; }
  .sd-playback-times { margin-bottom: var(--sd-space-md); }
  .sd-playback-controls { margin-bottom: var(--sd-space-md); }
  .sd-sleep-timer { margin-bottom: var(--sd-space-md); }
  .sd-sleep-label { margin-bottom: 0.35rem; font-size: 0.9rem; }
}

.sd-playback-story-text {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--sd-text-soft);
  white-space: pre-line;
  margin-top: var(--sd-space-md);
  padding: var(--sd-space-md);
  background: var(--sd-bg-soft);
  border-radius: var(--sd-radius-md);
}
.sd-playback-story-text p { margin: -0.5em 0 0; }

.sd-playback-nav {
  display: flex;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  padding-top: var(--sd-space-lg);
}

/* ── Generator loading state ────────────────────────────────── */
.sd-generator-loading {
  position: fixed;
  inset: calc(var(--sd-topbar-height) + env(safe-area-inset-top, 0px)) 0 calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-lg);
  padding: var(--sd-space-xl);
  text-align: center;
  overflow: hidden;
}
.sd-generator-spinner { font-size: 3rem; color: var(--sd-accent); }

.sd-spin-moon {
  display: inline-block;
  animation: sd-spin 2s linear infinite;
}

@keyframes sd-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.sd-spin-star {
  display: inline-block;
  animation: sd-sparkle 2.2s ease-in-out infinite;
}

@keyframes sd-sparkle {
  0%   { transform: scale(1)    rotate(0deg); }
  20%  { transform: scale(1.28) rotate(22deg); }
  50%  { transform: scale(0.88) rotate(-14deg); }
  75%  { transform: scale(1.22) rotate(10deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* ── Characters: Nuno + Nube orbit ──────────────────────────── */
.sd-generator-scene {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}

.sd-generator-nuno {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: sd-nuno-float 3.5s ease-in-out infinite;
  z-index: 1;
}

.sd-generator-nuno-img { width: 140px; display: block; }

@keyframes sd-nuno-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%       { transform: translate(-50%, calc(-50% - 10px)); }
}

.sd-generator-nube-img {
  position: absolute;
  width: 46px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .sd-generator-nuno     { animation: none; }
  .sd-generator-nube-img { transition: none; }
}

.sd-generator-message { font-size: 1rem; color: var(--sd-text-soft); margin: 0; }

.sd-generator-track {
  width: 100%;
  max-width: 400px;
  height: 8px;
  background: var(--sd-border);
  border-radius: var(--sd-radius-pill);
  overflow: hidden;
}

.sd-generator-bar {
  height: 100%;
  width: 0%;
  background: var(--sd-grad-accent);
  border-radius: inherit;
  transition: width 0.5s ease;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.sd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sd-space-xl);
}

@media (width <= 479px) {
  .sd-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    margin-inline: calc(-1 * var(--sd-space-md));
    padding-inline: var(--sd-space-md);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
  }
}

.sd-filter-bar::-webkit-scrollbar { display: none; }

.sd-filter-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.85rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text-soft);
  text-decoration: none;
  border: 1.5px solid var(--sd-border-strong);
  transition: background var(--sd-transition), border-color var(--sd-transition), color var(--sd-transition);
}

.sd-filter-btn:hover,
.sd-filter-btn.active { background: var(--sd-accent-muted); border-color: var(--sd-accent); color: var(--sd-accent); }

/* Star icon inside story-type filter button stays gold */
.sd-filter-btn-icon--story { color: var(--sd-gold); }

.sd-filter-btn.active .sd-filter-btn-icon--story,
.sd-filter-btn:hover .sd-filter-btn-icon--story { color: var(--sd-gold); }

/* Heart icon inside favorites filter button stays rose */
.sd-filter-btn-icon--favorite { color: var(--sd-rose); }

.sd-filter-btn.active .sd-filter-btn-icon--favorite,
.sd-filter-btn:hover .sd-filter-btn-icon--favorite { color: var(--sd-rose); }

/* ── Success page ───────────────────────────────────────────── */
.sd-success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sd-space-3xl) var(--sd-space-xl);
  gap: var(--sd-space-lg);
}

.sd-success-icon {
  font-size: 4rem;
  color: var(--sd-gold);
  animation: sd-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sd-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.sd-success-title { font-size: 1.5rem; font-weight: 800; margin: 0; }

/* ── Mobile: lock scroll to sd-app-main so the document never
   scrolls. In browser mode this prevents Chrome from hiding its
   toolbar on scroll, which kept the fixed bottom nav jumping.
   We use 100dvh (dynamic viewport height) so the layout matches
   the actual visible area regardless of whether the browser
   toolbar is shown or hidden — fixing content obscured by the
   fixed bottom nav when the large viewport (100lvh) is used.   */
@media (width <= 768px) {
  html:has(body.sd-app) { height: 100dvh; overflow: hidden; }
  body.sd-app { height: 100dvh; overflow: hidden; }

  .sd-app-layout {
    height: 100%;
    margin-top: 0;
    min-height: unset;
    overflow: hidden;
  }

  .sd-app-main {
    padding-top: calc(var(--sd-topbar-height) + env(safe-area-inset-top, 0px) + 24px);
    padding-bottom: calc(var(--sd-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 6rem + 24px);
  }
}

/* ── PWA standalone (Android): keep inner-scroll pattern        */

/* iOS ignores display-mode: standalone in CSS and uses          */

/* window.navigator.standalone instead, so this only fires on    */

/* Android Chrome where document-scroll is unreliable in PWA.   */
@media (display-mode: standalone) and (width <= 768px) {
  html:has(body.sd-app) { height: 100dvh; overflow: hidden; }
  body.sd-app            { height: 100dvh; overflow: hidden; }

  .sd-app-layout {
    height: 100%;
    margin-top: 0;
    min-height: unset;
    overflow: hidden;
  }

  .sd-app-main {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Tell Android Chrome that vertical panning is always allowed   */

  /* over interactive elements — prevents tap-vs-scroll ambiguity  */

  /* that blocks scroll initiation when links cover the viewport.  */
  .sd-app-main a,
  .sd-app-main button {
    touch-action: pan-y;
  }

  /* Filter bar chips are inside a horizontal scroll container —   */

  /* allow horizontal panning so the bar itself can scroll.        */
  .sd-filter-bar a,
  .sd-filter-bar button {
    touch-action: pan-x;
  }
}

/* ── Performance-lite mode (mid/low-end devices, set via JS)   */

/* Applied by perf_guard_controller.js when scroll jank is      */

/* detected — preserves full effects on capable hardware.       */
body.sd-perf-lite .sd-app-topbar,
body.sd-perf-lite .sd-bottom-nav {
  backdrop-filter: blur(16px) saturate(1.4);
  background: rgb(15 12 41 / 62%);
  box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}

body.sd-perf-lite .sd-deco-dot,
body.sd-perf-lite [class*="sd-twinkle"],
body.sd-perf-lite [class*="sd-sparkle"],
body.sd-perf-lite [class*="sd-float"] {
  animation-play-state: paused !important;
}

body.sd-perf-lite .sd-app-main {
  touch-action: pan-y;
}

body.sd-perf-lite .sd-story-card {
  contain: layout style;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (width <= 768px) {
  /* Sidebar hidden on mobile */
  .sd-sidebar { display: none; }
  .sd-bottom-nav { display: flex; }

  /* Mobile nav */
  .sd-nav-burger { display: flex; }

  .sd-header-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sd-bg-card);
    border-bottom: 1px solid var(--sd-border);
    padding: var(--sd-space-sm) 0;
    z-index: 99;
  }

  .sd-header-nav--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sd-header-nav .sd-nav-link,
  .sd-header-nav .sd-btn {
    padding: 0.85rem var(--sd-space-lg);
    border-radius: 0;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    font-size: 1rem;
    border: none;
    background: none;
    color: var(--sd-text-soft);
  }

  .sd-header-nav .sd-btn-primary {
    background: var(--sd-grad-accent);
    color: #fff;
    margin: var(--sd-space-sm) var(--sd-space-lg);
    border-radius: var(--sd-radius-pill);
    width: calc(100% - var(--sd-space-lg) * 2);
    text-align: center;
    justify-content: center;
    animation: none; /* no shimmer in the dropdown — save battery on mobile */
  }

  .sd-header-nav .sd-lang-picker {
    padding: var(--sd-space-sm) var(--sd-space-lg);
    border-top: 1px solid var(--sd-border);
    margin-top: var(--sd-space-xs);
  }

  /* Hero on mobile: text at bottom, illustration owns upper 70% */
  .sd-hero {
    min-height: 88dvh;
    padding: 0 0 var(--sd-space-4xl);
    align-items: flex-end;
    background-image:
      linear-gradient(to bottom,
        transparent 48%,
        rgb(15 12 41 / 72%) 68%,
        #0f0c29 86%),
      var(--sd-hero-bg, none);
    background-position: 0 0, 50% top;
  }
  .sd-hero-inner { text-align: center; padding-top: 0; }
  .sd-hero-text { max-width: unset; }
  .sd-hero-subtitle { margin-inline: auto; }
  .sd-hero-actions { justify-content: center; }

  /* Player section on mobile */
  .sd-section-player { padding: var(--sd-space-2xl) 0; }
  .sd-player-inner { grid-template-columns: 1fr; text-align: center; }
  .sd-player-copy .sd-section-heading { text-align: center; }
  .sd-player-subtitle { margin-inline: auto; }
  .sd-phone-mockup { width: 200px; }

  /* Reduce section padding on mobile */
  .sd-section-dark,
  .sd-section-highlights,
  .sd-section-trust,
  .sd-section-features,
  .sd-section-faq,
  .sd-cta-section { padding: var(--sd-space-2xl) 0; }

  /* Tighten section heading gap on mobile (3rem → 2rem) */
  .sd-section-heading { margin-bottom: var(--sd-space-xl); }

  /* Constellation → vertical list on mobile */
  .sd-constellation {
    aspect-ratio: unset;
    height: auto;
  }
  .sd-constellation-svg { display: none; }

  .sd-star-node {
    position: static;
    transform: none;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sd-space-md);
    padding: var(--sd-space-md) 0;
    border-bottom: 1px solid var(--sd-border);
  }
  .sd-star-node:last-child { border-bottom: none; }
  .sd-star--r { flex-direction: row; }
  .sd-star--r .sd-star-dot { order: unset; }
  .sd-star--r .sd-star-label { order: unset; text-align: left; }
  .sd-star-dot { flex-shrink: 0; opacity: 1; transform: scale(1); }
  .sd-star-dot::before { display: none; }

  .sd-star-label {
    text-align: left;
    max-width: none;
    opacity: 1;
    transform: none;
    background: none;
    border: none;
    padding: 0;
  }

  /* Steps → single column */
  .sd-steps-grid { grid-template-columns: 1fr; }

  /* Trust quotes → single column */
  .sd-trust-quotes { flex-direction: column; }
  .sd-trust-quote { min-width: unset; padding: var(--sd-space-lg); }

  /* Plans → single column */
  .sd-plans-grid { grid-template-columns: 1fr; }

  /* Page padding reduced */
  .sd-page { padding: var(--sd-space-md); overflow-x: clip; }

  /* Profile grid */
  .sd-profile-grid { grid-template-columns: 1fr; }
  .sd-profile-grid--manage { grid-template-columns: 1fr; gap: var(--sd-space-md); }

  /* Story grid */
  .sd-story-grid { grid-template-columns: 1fr; }
}

/* ── Small phones (≤480px) ──────────────────────────────────── */
@media (width <= 480px) {
  /* Tighter container on very narrow viewports */
  .sd-container { padding-inline: var(--sd-space-md); }

  /* Stack hero buttons full-width for maximum tap targets */
  .sd-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  /* Further reduce section padding on very small phones */
  .sd-section-dark,
  .sd-section-highlights,
  .sd-section-trust,
  .sd-section-features,
  .sd-section-faq,
  .sd-cta-section { padding: var(--sd-space-xl) 0; }
}

/* ── Landscape phones ───────────────────────────────────────── */
@media (orientation: landscape) and (height <= 500px) {
  /* Landscape: remove tall min-height, restore left-to-right overlay */
  .sd-hero {
    min-height: unset;
    padding: var(--sd-space-lg) 0;
    align-items: center;
    background-image:
      linear-gradient(to right, #0f0c29 0%, rgb(15 12 41 / 92%) 20%, transparent 55%),
      var(--sd-hero-bg, none);
    background-position: 0 0, 65% center;
  }
  .sd-hero-inner { text-align: left; padding-top: 0; }
  .sd-hero-text { max-width: 400px; }
  .sd-hero-subtitle { margin-inline: unset; max-width: 380px; }
  .sd-hero-actions { justify-content: flex-start; }
  .sd-phone-mockup { width: 160px; }
}

/* ── Tablet (769–1024px) ────────────────────────────────────── */
@media (769px <= width <= 1024px) {
  /* Give the headline more room — mockup doesn't need equal space */
  .sd-hero-inner { grid-template-columns: 1.3fr 0.7fr; gap: var(--sd-space-2xl); }
}

/* ── Touch devices: prevent sticky hover states ─────────────── */
@media (hover: none) {
  .sd-step:hover .sd-step-icon { box-shadow: none; transform: none; }
  .sd-highlight:hover { transform: none; border-color: var(--sd-border); box-shadow: none; }
  .sd-star-node:hover .sd-star-dot { background: var(--sd-bg-card); box-shadow: none; }
  .sd-btn-ghost:hover { transform: none; }
}

@media (width >= 769px) {
  /* Hide mobile bottom nav on desktop */
  .sd-bottom-nav { display: none; }

  /* Make the layout a fixed-height viewport so sd-app-main is the scroll area */
  .sd-app-layout {
    height: calc(100vh - var(--sd-topbar-height) - env(safe-area-inset-top, 0px) - 24px);
    overflow: hidden;
  }

  .sd-app-main {
    height: 100%;
    padding-bottom: 0;
    overflow-y: auto;
  }

  /* Generator loading: no bottom nav on desktop */
  .sd-generator-loading { bottom: 0; }
}

/* ── Immersive mode (story player) ──────────────────────────── */
.sd-app--immersive .sd-app-topbar,
.sd-app--immersive .sd-sidebar,
.sd-app--immersive .sd-bottom-nav { display: none !important; }

/* Remove the topbar offset — no topbar means no dead space at top */
.sd-app--immersive .sd-app-layout {
  margin-top: 0;
  height: 100%;
}

.sd-app--immersive .sd-app-main {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100dvh;
  overflow-y: auto;
}

.sd-app--immersive .sd-playback {
  min-height: 100dvh;
  padding-top: calc(env(safe-area-inset-top, 16px) + var(--sd-space-xl));
}

.sd-app--immersive .sd-playback-back {
  top: calc(env(safe-area-inset-top, 0px) + var(--sd-space-xs));
}

/* ── Subscription page ───────────────────────────────────────── */
.sd-subscription-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-subscription-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-gold-muted);
  border: 1px solid rgb(251 191 36 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-gold);
  flex-shrink: 0;
}

.sd-subscription-tagline {
  font-size: 0.875rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

/* Current (free) plan — recedes visually so Premium stands out */
.sd-plan-card-current {
  background: var(--sd-bg-soft);
  border-color: var(--sd-border);
}

.sd-plan-card-current .sd-plan-price {
  color: var(--sd-text-soft);
}

/* "Tu plan actual" indicator — centered, separated, not a badge */
.sd-plan-active-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sd-text-muted);
  border-top: 1px solid var(--sd-border);
  padding-top: var(--sd-space-md);
  margin-top: auto;
}

.sd-plan-active-bar i {
  color: var(--sd-success);
  font-size: 1rem;
}

/* ── Settings page ───────────────────────────────────────────── */
.sd-settings-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-xl);
}

.sd-settings-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  flex-shrink: 0;
}

.sd-settings-email {
  font-size: 0.85rem;
  color: var(--sd-text-muted);
  margin: 0.2rem 0 0;
}

.sd-settings-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-text-muted);
  margin: var(--sd-space-lg) 0 var(--sd-space-xs) var(--sd-space-xs);
}

.sd-settings-nav-card { padding: 0; overflow: hidden; }

.sd-settings-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sd-space-md) var(--sd-space-lg);
  color: var(--sd-text-soft);
  text-decoration: none;
  transition: background var(--sd-transition);
}
.sd-settings-nav-row:hover { background: var(--sd-accent-muted); }

.sd-settings-nav-row-label {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
}

.sd-settings-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sd-radius-md);
  flex-shrink: 0;
}

.sd-settings-nav-icon--gold {
  background: var(--sd-gold-muted);
  color: var(--sd-gold);
}

.sd-settings-nav-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sd-settings-nav-row-text strong { font-size: 0.9rem; color: var(--sd-text); }
.sd-settings-nav-row-text small { font-size: 0.75rem; color: var(--sd-text-muted); }

.sd-settings-nav-row-arrow { color: var(--sd-text-muted); font-size: 0.75rem; }

/* ── Offline storage card (settings) ────────────────────────── */
.sd-offline-card-header {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-md);
}

.sd-offline-card-icon {
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
}

.sd-offline-empty {
  padding: 0 0 var(--sd-space-xs);
}

.sd-offline-empty-text {
  font-size: 0.85rem;
  color: var(--sd-text-muted);
  margin: 0;
  line-height: 1.5;
}

.sd-offline-ios-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: var(--sd-space-md) 0 0;
  padding: var(--sd-space-sm) var(--sd-space-md);
  background: rgb(167 139 250 / 8%);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  line-height: 1.5;
}

.sd-offline-ios-note i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--sd-accent);
  opacity: 0.7;
}

/* ── Offline item rows (manager list) ───────────────────────── */
.sd-offline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-sm);
  padding: var(--sd-space-sm) 0;
  border-top: 1px solid var(--sd-border);
}

.sd-offline-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.sd-offline-item-title {
  font-size: 0.88rem;
  color: var(--sd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-offline-item-meta {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
}

.sd-offline-item-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--sd-text-muted);
  cursor: pointer;
  border-radius: var(--sd-radius-sm);
  line-height: 1;
  transition: color var(--sd-transition), background var(--sd-transition);
}

.sd-offline-item-remove:hover {
  color: var(--sd-danger);
  background: var(--sd-rose-muted);
}

/* Error flash on save failure — base element transitions handle smooth entry/exit */
.sd-offline-save-error {
  color: var(--sd-danger) !important;
  border-color: var(--sd-danger) !important;
  opacity: 1 !important;
}

.sd-settings-logout {
  margin-top: var(--sd-space-xl);
}

/* ── Page subtitle (settings, family, etc.) ──────────────────── */
.sd-page-subtitle {
  font-size: 0.875rem;
  color: var(--sd-text-muted);
  margin: 0.15rem 0 0;
}

/* ── Family memberships member list ─────────────────────────── */
.sd-member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--sd-space-md) var(--sd-space-lg);
}

.sd-member-row + .sd-member-row {
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.sd-member-avatar-initial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sd-accent);
  text-transform: uppercase;
}

.sd-member-info {
  flex: 1;
  min-width: 0;
}

.sd-member-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sd-text);
}

.sd-member-email {
  margin: 0;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-member-status-badge {
  font-size: 0.69rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--sd-radius-pill);
  white-space: nowrap;
}

.sd-member-status-badge--pending {
  background: var(--sd-gold-muted);
  color: var(--sd-gold);
}

.sd-member-status-badge--accepted {
  background: rgb(74 222 128 / 15%);
  color: var(--sd-success);
}

.sd-member-remove-btn {
  background: none;
  border: none;
  padding: 0.4rem 0.5rem;
  border-radius: var(--sd-radius-sm);
  color: var(--sd-text-muted);
  cursor: pointer;
  line-height: 1;
  font-size: 0.8rem;
  transition: color var(--sd-transition), background var(--sd-transition);
  flex-shrink: 0;
}

.sd-member-remove-btn:hover {
  color: var(--sd-danger);
  background: rgb(248 113 113 / 10%);
}

.sd-family-actions {
  display: flex;
  gap: var(--sd-space-sm);
  margin-top: var(--sd-space-lg);
  flex-wrap: wrap;
}

/* ── Referral card (settings) ────────────────────────────────── */
.sd-settings-nav-icon--gift {
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
}

.sd-referral-card {
  border-color: rgb(167 139 250 / 25%);
  background: linear-gradient(145deg, var(--sd-bg-card) 0%, rgb(167 139 250 / 6%) 100%);
}

.sd-referral-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-md);
  padding-bottom: var(--sd-space-md);
  margin-bottom: var(--sd-space-lg);
  border-bottom: 1px solid var(--sd-border);
}

/* Link input+button on one row */
.sd-referral-link-row {
  display: flex;
  gap: var(--sd-space-xs);
  align-items: center;
  margin-bottom: var(--sd-space-sm);
}

.sd-referral-link-input {
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--sd-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-referral-copy-btn {
  flex-shrink: 0;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}

.sd-referral-copy-success {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--sd-accent);
  margin: 0 0 var(--sd-space-md);
}

/* Stats */
.sd-referral-stats {
  display: flex;
  gap: var(--sd-space-sm);
  margin: var(--sd-space-md) 0;
}

.sd-referral-stat {
  flex: 1;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  padding: var(--sd-space-md) var(--sd-space-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.sd-referral-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sd-accent);
  line-height: 1;
}

.sd-referral-stat-label {
  font-size: 0.68rem;
  color: var(--sd-text-muted);
  line-height: 1.35;
}

/* Progress bar */
.sd-referral-progress {
  height: 5px;
  background: var(--sd-border);
  border-radius: 99px;
  overflow: hidden;
}

.sd-referral-progress-bar {
  height: 100%;
  background: var(--sd-grad-accent);
  border-radius: 99px;
  transition: width 0.6s ease;
}

.sd-referral-progress-label {
  font-size: 0.72rem;
  color: var(--sd-text-muted);
  text-align: right;
  margin: 0.35rem 0 0;
}

/* ── Referral invite banner (login page) ─────────────────────── */
.sd-referral-banner {
  /* Bleed to the card edges, then sit above the form */
  margin: calc(-1 * var(--sd-space-xl)) calc(-1 * var(--sd-space-xl)) var(--sd-space-xl);
  padding: var(--sd-space-xl) var(--sd-space-xl) var(--sd-space-lg);
  background: linear-gradient(160deg, rgb(124 58 237 / 18%) 0%, rgb(167 139 250 / 8%) 100%);
  border-bottom: 1px solid rgb(167 139 250 / 22%);
  border-radius: var(--sd-radius-lg) var(--sd-radius-lg) 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sd-referral-banner-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  border: 1px solid rgb(167 139 250 / 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--sd-accent);
  margin-bottom: 0.35rem;
}

.sd-referral-banner-invite {
  font-size: 0.92rem;
  color: var(--sd-text-soft);
  margin: 0;
  line-height: 1.45;
}

.sd-referral-banner-invite strong {
  color: var(--sd-text);
  font-weight: 700;
}

.sd-referral-banner-reward {
  font-size: 0.88rem;
  color: var(--sd-accent);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* When banner is present, the auth-header is just the subtitle */
.sd-referral-banner + .sd-auth-header {
  margin-bottom: var(--sd-space-md);
}

/* ── Auth / Registration ─────────────────────────────────────── */
.sd-auth-page {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sd-space-2xl) var(--sd-space-lg);
}

.sd-auth-inner {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-xl);
}

@media (width >= 768px) {
  .sd-auth-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sd-space-2xl);
  }

  .sd-auth-benefits-col { width: 340px; flex-shrink: 0; }
  .sd-auth-form-col { flex: 1; }
}

/* Benefits panel */
.sd-auth-benefits {
  background: linear-gradient(145deg, #1e1b4b, #2d2a6e);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-lg);
}

.sd-auth-benefits-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border);
  color: var(--sd-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
}

.sd-auth-benefits-heading h3 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sd-text);
  line-height: 1.3;
}

.sd-auth-benefits-heading p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--sd-text-soft);
  line-height: 1.5;
}

.sd-auth-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  overflow: hidden;
}

.sd-auth-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--sd-border);
}

.sd-auth-benefit-item:last-child { border-bottom: none; }

.sd-auth-benefit-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.sd-auth-benefit-title {
  margin: 0 0 0.15rem;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--sd-text);
}

.sd-auth-benefit-desc {
  margin: 0;
  font-size: 0.775rem;
  color: var(--sd-text-muted);
  line-height: 1.4;
}

/* Auth card / form */
.sd-auth-card {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-lg);
  padding: var(--sd-space-xl);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgb(88 28 235 / 8%);
}

.sd-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--sd-accent);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: var(--sd-space-md);
}

.sd-auth-title {
  margin: 0 0 var(--sd-space-lg);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sd-text);
  text-align: center;
}

.sd-auth-form { display: flex; flex-direction: column; gap: var(--sd-space-md); }

.sd-auth-field { display: flex; flex-direction: column; gap: 0.35rem; }

.sd-auth-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sd-text-soft);
}

.sd-auth-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-md);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-auth-input::placeholder { color: var(--sd-text-muted); }

.sd-auth-input:focus {
  border-color: var(--sd-accent);
  box-shadow: 0 0 0 3px var(--sd-accent-muted);
}

.sd-auth-password-wrap { position: relative; }
.sd-auth-password-wrap .sd-auth-input { padding-right: 2.5rem; }

.sd-auth-eye-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--sd-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}

.sd-auth-hint {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
}

.sd-auth-submit {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
}

.sd-auth-links {
  margin-top: var(--sd-space-md);
  text-align: center;
  font-size: 0.85rem;
  color: var(--sd-text-muted);
}

.sd-auth-link {
  color: var(--sd-accent);
  text-decoration: none;
  font-weight: 600;
}

.sd-auth-link:hover { text-decoration: underline; }

/* ── Passwordless auth: card inner structure ─────────────────── */
.sd-auth-header { text-align: center; margin-bottom: var(--sd-space-lg); }
.sd-auth-icon { font-size: 2.5rem; color: var(--sd-accent); margin-bottom: var(--sd-space-sm); }

/* Override margin when title is inside the centered header (passwordless flow) */
.sd-auth-header .sd-auth-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--sd-text); }
.sd-auth-subtitle { color: var(--sd-text-muted); font-size: 0.9rem; margin: 0; }

.sd-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--sd-space-md) 0;
  color: var(--sd-text-muted);
  font-size: 0.85rem;
}

.sd-auth-divider::before,
.sd-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sd-border);
}

.sd-google-btn-wrapper { min-height: 44px; }

.sd-auth-note {
  color: var(--sd-text-muted);
  font-size: 0.78rem;
  text-align: center;
  margin-top: var(--sd-space-md);
  line-height: 1.5;
}

.sd-input--code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  text-align: center;
  font-family: monospace;
}

/* ── Flash messages (inside sd-app / sd-public) ─────────────── */
.sd-app .flash-message,
.sd-public .flash-message {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.875rem;
  border-radius: var(--sd-radius-md);
  font-size: 0.875rem;
  font-family: var(--sd-font);
  color: var(--sd-text);
  border: 1px solid var(--sd-border);
  background: var(--sd-bg-card);
}

.sd-app .flash-message > div,
.sd-public .flash-message > div {
  flex: 1;
  min-width: 0;
}

.sd-app .flash-message button,
.sd-public .flash-message button {
  background: none;
  border: none;
  padding: 0.2rem;
  margin: 0;
  cursor: pointer;
  color: currentcolor;
  opacity: 0.6;
  border-radius: var(--sd-radius-sm);
  line-height: 1;
  flex-shrink: 0;
}

.sd-app .flash-message button:hover,
.sd-public .flash-message button:hover {
  opacity: 1;
}

.sd-app .d-flash-success,
.sd-public .d-flash-success {
  background: #064e3b;
  border-color: #059669;
  color: #d1fae5;
}

.sd-app .d-flash-error,
.sd-public .d-flash-error {
  background: #7f1d1d;
  border-color: #dc2626;
  color: #fee2e2;
}

.sd-app .d-flash-warning,
.sd-public .d-flash-warning {
  background: #78350f;
  border-color: #d97706;
  color: #fef3c7;
}

.sd-app .d-flash-notice,
.sd-public .d-flash-notice {
  background: #2e1065;
  border-color: var(--sd-accent);
  color: #ede9fe;
}

.sd-app .flash-container,
.sd-public .flash-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  right: 1rem;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  /* Tailwind's `fixed right-4` etc. don't apply — sweetdreams.css has no Tailwind */
}

/* ── Language picker ─────────────────────────────────────────────── */
.sd-lang-picker {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.sd-lang-option {
  position: relative; /* needed for ::after tap expansion */
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--sd-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.35rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

/* Expand tap area to 44px without affecting layout */
.sd-lang-option::after {
  content: '';
  position: absolute;
  inset: -10px -4px;
}
.sd-lang-option:hover { color: var(--sd-text); border-color: var(--sd-border); }
.sd-lang-option.active { color: var(--sd-accent); border-color: var(--sd-accent); }

.sd-lang-picker--sidebar {
  margin-bottom: 0.5rem;
}
.sd-lang-picker--sidebar form { display: inline; }
.sd-lang-picker--sidebar .sd-lang-option { font-size: 0.7rem; }

/* ── Error Pages ─────────────────────────────────────────────── */
.sd-error-page { min-height: 100vh; background: var(--sd-grad-hero); }
.sd-error-page .sd-header { background: transparent; border-bottom: none; }

.sd-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 3rem 1.5rem;
  text-align: center;
}

.sd-error-sky {
  position: relative;
  height: 8rem;
  width: 8rem;
  margin-bottom: 2rem;
}

.sd-error-moon {
  font-size: 4rem;
  color: var(--sd-gold);
  filter: drop-shadow(0 0 20px rgb(251 191 36 / 40%));
  animation: sd-float 4s ease-in-out infinite;
}

.sd-error-cloud {
  position: absolute;
  bottom: 0;
  right: -1rem;
  font-size: 1.75rem;
  color: var(--sd-text-muted);
  opacity: 0.6;
}

.sd-error-star {
  position: absolute;
  font-size: 0.6rem;
  color: var(--sd-gold);
  animation: sd-twinkle 2s ease-in-out infinite;
}
.sd-error-star--1 { top: 0.25rem; right: 0.5rem; animation-delay: 0s; }
.sd-error-star--2 { top: 1.5rem; left: 0.25rem; animation-delay: 0.7s; font-size: 0.4rem; }
.sd-error-star--3 { bottom: 1.5rem; right: 1.5rem; animation-delay: 1.4s; font-size: 0.5rem; }

@keyframes sd-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes sd-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

.sd-error-code {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  background: var(--sd-grad-accent);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.sd-error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sd-text);
  margin-bottom: 0.75rem;
}

.sd-error-message {
  font-size: 1rem;
  color: var(--sd-text-soft);
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.sd-error-id-label {
  font-size: 0.8rem;
  color: var(--sd-text-muted);
  margin-bottom: 0.4rem;
}

.sd-error-id {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--sd-text);
  margin-bottom: 2rem;
  user-select: all;
}

.sd-error-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

@media (width >= 480px) {
  .sd-error-actions { flex-direction: row; justify-content: center; }
}

/* ── iOS install banner ──────────────────────────────────────────── */
#sd-ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: var(--sd-space-sm) var(--sd-space-md);
  background: var(--sd-bg-card);
  border-top: 1px solid var(--sd-border-strong);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 40%);
}

.sd-ios-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  max-width: 480px;
  margin: 0 auto;
}

.sd-ios-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--sd-radius-md);
  flex-shrink: 0;
}

.sd-ios-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--sd-font);
  font-size: 0.85rem;
  color: var(--sd-text);
  line-height: 1.3;
}

.sd-ios-banner-text strong {
  font-weight: 700;
}

.sd-ios-banner-text span {
  color: var(--sd-text-soft);
  font-size: 0.8rem;
}

.sd-ios-banner-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--sd-accent);
}

.sd-ios-banner-guide {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sd-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sd-ios-banner-close {
  background: none;
  border: none;
  color: var(--sd-text-muted);
  padding: var(--sd-space-xs);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

/* ── App update banner ───────────────────────────────────────────── */
#sd-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: var(--sd-space-xs) var(--sd-space-md);
  background: var(--sd-accent);
  box-shadow: 0 2px 12px rgb(0 0 0 / 30%);
}

.sd-update-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--sd-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.sd-update-banner-inner i { flex-shrink: 0; }

.sd-update-banner-inner span { flex: 1; }

.sd-update-banner-btn {
  background: rgb(255 255 255 / 20%);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--sd-radius-sm);
  color: #fff;
  cursor: pointer;
  font-family: var(--sd-font);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

.sd-update-banner-btn:hover { background: rgb(255 255 255 / 30%); }

/* ── Story type selector (story creation form) ───────────── */
.sd-story-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sd-story-type-option { cursor: pointer; }

.sd-story-type-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sd-story-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.1rem 0.75rem;
  border-radius: var(--sd-radius-lg);
  border: 2px solid var(--sd-border-strong);
  background: var(--sd-bg-soft);
  color: var(--sd-text-soft);
  text-align: center;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-story-type-btn i {
  font-size: 1.5rem;
  opacity: 0.7;
}

.sd-story-type-btn strong {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.sd-story-type-desc {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sd-text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sd-story-type-option input:checked ~ .sd-story-type-btn {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  color: var(--sd-accent);
  box-shadow: 0 0 0 2px rgb(167 139 250 / 25%), 0 2px 12px rgb(167 139 250 / 20%);
}

.sd-story-type-option input:checked ~ .sd-story-type-btn i { opacity: 1; }

.sd-story-type-option input:checked ~ .sd-story-type-btn .sd-story-type-desc {
  color: rgb(167 139 250 / 70%);
}

.sd-story-type-btn:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent);
  background: rgb(167 139 250 / 10%);
}

.sd-story-type-btn:hover i { opacity: 1; }

.sd-story-type-option:active .sd-story-type-btn { transform: scale(0.97); }

.sd-story-type-option:focus-within .sd-story-type-btn {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* ── Generation mode selector (text+audio vs text-only) ───── */
.sd-generation-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.sd-generation-mode-option { cursor: pointer; }

.sd-generation-mode-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sd-generation-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 56px;
  padding: 0.75rem 0.5rem;
  border-radius: var(--sd-radius-lg);
  border: 1.5px solid var(--sd-border-strong);
  background: var(--sd-surface-raised);
  color: var(--sd-text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition), box-shadow var(--sd-transition);
}

.sd-generation-mode-btn i { font-size: 1rem; opacity: 0.7; }

.sd-generation-mode-option input:checked ~ .sd-generation-mode-btn {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  color: var(--sd-accent);
  box-shadow: 0 0 0 2px rgb(167 139 250 / 25%), 0 2px 12px rgb(167 139 250 / 20%);
}

.sd-generation-mode-option input:checked ~ .sd-generation-mode-btn i { opacity: 1; }

.sd-generation-mode-btn:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent);
  background: rgb(167 139 250 / 10%);
}

.sd-generation-mode-btn:hover i { opacity: 1; }

.sd-generation-mode-option:active .sd-generation-mode-btn { transform: scale(0.97); }

.sd-generation-mode-option:focus-within .sd-generation-mode-btn {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

@media (width <= 360px) {
  .sd-generation-mode-grid { grid-template-columns: 1fr; }
}

/* Credit cost pop — fires once when mode toggles */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sd-credit-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); color: var(--sd-accent); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
  }

  .sd-length-cost--updating {
    animation: sd-credit-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Voice section fade-up entrance when revealed */
@media (prefers-reduced-motion: no-preference) {
  .sd-entering {
    animation: sd-fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* ── Profile tab nav ─────────────────────────────────────── */
.sd-profile-tab-nav {
  display: flex;
  gap: 0.75rem;
  margin-bottom: var(--sd-space-lg);
}

.sd-profile-tab-btn {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--sd-radius-md);
  border: 2px solid var(--sd-border-strong);
  background: var(--sd-bg-soft);
  color: var(--sd-text-soft);
  font-family: var(--sd-font);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;

  /* Only composite-friendly properties in the transition */
  transition: background var(--sd-transition), border-color var(--sd-transition),
              color var(--sd-transition);
}

/* Glow via pseudo-element — opacity transition is GPU-composited (no paint) */
.sd-profile-tab-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgb(167 139 250 / 30%), 0 2px 14px rgb(167 139 250 / 25%);
  opacity: 0;
  transition: opacity var(--sd-transition);
  pointer-events: none;
}

.sd-profile-tab-btn i {
  font-size: 0.95em;
  opacity: 0.7;
  transition: opacity var(--sd-transition);
}

.sd-profile-tab-btn:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent);
  background: var(--sd-accent-muted);
}

.sd-profile-tab-btn:hover i,
.sd-profile-tab-btn.is-active i { opacity: 1; }

.sd-profile-tab-btn:hover::after { opacity: 0.5; }

.sd-profile-tab-btn.is-active {
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
  color: var(--sd-accent);
}

.sd-profile-tab-btn.is-active::after { opacity: 1; }

/* Press feedback — tactile sink on click */
.sd-profile-tab-btn:active { transform: scale(0.96); }

.sd-profile-tab-panel[hidden] { display: none; }

/* Strip trailing margin from last field inside each panel */
.sd-profile-tab-panel > .sd-field:last-child,
.sd-profile-tab-panel > .sd-fieldset:last-child { margin-bottom: 0; }

@media (width <= 480px) {
  .sd-profile-tab-nav { flex-direction: column; }
}

/* ── Profile tab delight animations ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Panel entrance: content drifts softly upward as the stars appear */
  @keyframes sd-panel-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .sd-profile-tab-panel:not([hidden]) {
    animation: sd-panel-in 0.25s ease;
  }

  /* Icon "landing" pop when a tab becomes active */
  @keyframes sd-tab-icon-pop {
    0%   { transform: scale(0.6); opacity: 0.4; }
    65%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
  }

  .sd-profile-tab-btn.is-active i {
    animation: sd-tab-icon-pop 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Glow blooms in a beat slower on the active state for a "warm light" feel */
  .sd-profile-tab-btn.is-active::after {
    transition: opacity 0.35s ease;
  }
}

/* ── Family member picker ────────────────────────────────── */
.sd-family-member-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.sd-family-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sd-family-member-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  height: 2.5rem;
  box-sizing: border-box;
}

.sd-family-member-rel {
  flex: 0 0 140px;
}

.sd-family-member-rel .sd-select-trigger {
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
  height: 2.5rem;
}

.sd-family-member-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sd-radius-sm);
  border: 1.5px solid var(--sd-border-strong);
  background: transparent;
  color: var(--sd-text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  transition: background var(--sd-transition), color var(--sd-transition),
              border-color var(--sd-transition);
}

.sd-family-member-remove:hover {
  background: rgb(239 68 68 / 15%);
  border-color: rgb(239 68 68 / 50%);
  color: #f87171;
}

.sd-family-member-add {
  font-size: 0.8rem;
  padding: 0.3rem 0.85rem;
  height: auto;
}

/* ── Meditation badge ────────────────────────────────────── */
.sd-badge-meditation {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgb(99 102 241 / 15%);
  color: #818cf8;
  border-radius: var(--sd-radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Credits page ─────────────────────────────────────────── */

/* Staggered page entrance */
.sd-credits-page > * {
  animation: sd-credits-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sd-credits-page > *:nth-child(1) { animation-delay: 0s; }
.sd-credits-page > *:nth-child(2) { animation-delay: 0.07s; }
.sd-credits-page > *:nth-child(3) { animation-delay: 0.13s; }
.sd-credits-page > *:nth-child(4) { animation-delay: 0.19s; }
.sd-credits-page > *:nth-child(5) { animation-delay: 0.25s; }

@keyframes sd-credits-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Hero panel */
.sd-credits-hero {
  contain: layout;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1640 0%, #1e1b4b 45%, #2a1f5e 100%);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-2xl) var(--sd-space-lg) var(--sd-space-xl);
  margin-bottom: var(--sd-space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-sm);
}

/* Twinkling star field */
.sd-credits-hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sd-credits-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sd-gold);
  opacity: 0;
  animation: sd-credits-twinkle 2.8s ease-in-out infinite;
}

.sd-credits-star:nth-child(3n)   { width: 2px; height: 2px; background: var(--sd-text-soft); }
.sd-credits-star:nth-child(5n)   { width: 4px; height: 4px; }
.sd-credits-star:nth-child(7n)   { background: var(--sd-accent); }

@keyframes sd-credits-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 0.65; transform: scale(1.1); }
}

/* Floating coin icon */
.sd-credits-hero-coin {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--sd-gold-muted);
  border: 1px solid rgb(251 191 36 / 32%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--sd-gold);
  box-shadow: 0 0 36px rgb(251 191 36 / 20%);
  animation: sd-credits-float 4.5s ease-in-out infinite;
  margin-bottom: var(--sd-space-xs);
}

@keyframes sd-credits-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Balance number */
.sd-credits-hero-amount {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sd-space-xs);
}

.sd-credits-amount-number {
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 800;
  color: var(--sd-gold);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.sd-credits-amount-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sd-text-muted);
  align-self: flex-end;
  padding-bottom: 0.4em;
}

.sd-credits-hero-subtitle {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Cost section label */
.sd-credits-cost-label {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* Cost pills */
.sd-credits-cost-pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-xs);
  justify-content: center;
  margin-top: var(--sd-space-xs);
}

.sd-credits-cost-pill {
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-pill);
  padding: 0.28rem 0.9rem;
  font-size: 0.78rem;
  color: var(--sd-text-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* Section titles */
.sd-credits-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--sd-space-md);
}

/* Pack grid */
.sd-credits-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sd-space-md);
  margin-bottom: var(--sd-space-2xl);
}

.sd-credits-pack {
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  padding: var(--sd-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.sd-credits-pack:hover {
  transform: translateY(-4px);
  border-color: var(--sd-border-strong);
  box-shadow: var(--sd-shadow-card);
}

.sd-credits-pack--best {
  border-color: var(--sd-accent);
  background: linear-gradient(145deg, #1e1b4b, #2a1f5e);
  box-shadow: 0 0 0 1px var(--sd-accent), var(--sd-shadow-glow);
}

.sd-credits-pack--best:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--sd-accent), 0 0 48px rgb(167 139 250 / 32%);
}

.sd-credits-pack-badge {
  position: absolute;
  top: -1px;
  right: var(--sd-space-md);
  max-width: calc(100% - 2 * var(--sd-space-md));
  background: var(--sd-grad-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: 0 0 var(--sd-radius-md) var(--sd-radius-md);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
}

.sd-credits-pack-top {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.sd-credits-pack-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sd-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sd-credits-pack-unit {
  font-size: 0.78rem;
  color: var(--sd-text-muted);
  font-weight: 600;
}

.sd-credits-pack-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sd-text);
  line-height: 1;
}

.sd-credits-pack-currency {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sd-text-muted);
}

.sd-credits-pack-rate {
  font-size: 0.76rem;
  color: var(--sd-text-muted);
  margin: 0;
}

.sd-credits-pack-estimate {
  font-size: 0.78rem;
  color: var(--sd-text-soft);
  margin: var(--sd-space-xs) 0 0;
}

.sd-credits-pack-action {
  margin-top: auto;
  padding-top: var(--sd-space-xs);
}

.sd-credits-pack-action form { display: flex; }
.sd-credits-pack-action form .sd-btn { flex: 1; }

/* Transaction list */
.sd-credits-transactions {
  contain: layout;
  background: var(--sd-bg-card);
  border: 1px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  overflow: hidden;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sd-border-strong) transparent;
}

.sd-credits-tx {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  padding: 0.85rem var(--sd-space-lg);
  border-bottom: 1px solid var(--sd-border);
  transition: background var(--sd-transition);
}

.sd-credits-tx:last-child { border-bottom: none; }

.sd-credits-tx:hover { background: var(--sd-accent-muted); }

.sd-credits-tx-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.sd-credits-tx-icon--plus {
  background: rgb(74 222 128 / 14%);
  color: rgb(74 222 128);
}

.sd-credits-tx-icon--minus {
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
}

.sd-credits-tx-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sd-credits-tx-desc {
  font-size: 0.875rem;
  color: var(--sd-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-credits-tx-date {
  font-size: 0.72rem;
  color: var(--sd-text-muted);
}

.sd-credits-tx-amount {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.sd-credits-tx-amount--plus  { color: rgb(74 222 128); }
.sd-credits-tx-amount--minus { color: var(--sd-text-soft); }

/* Empty state */
.sd-credits-empty {
  text-align: center;
  padding: var(--sd-space-2xl) var(--sd-space-xl);
  color: var(--sd-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-space-sm);
}

.sd-credits-empty i {
  font-size: 2.5rem;
  color: var(--sd-border-strong);
}

/* Mobile */
@media (width <= 640px) {
  .sd-credits-packs {
    grid-template-columns: 1fr;
  }

  .sd-credits-hero {
    padding: var(--sd-space-xl) var(--sd-space-md) var(--sd-space-lg);
  }

  .sd-credits-tx {
    padding: 0.75rem var(--sd-space-md);
  }

  .sd-credits-tx-desc {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Credits page — delight (only when motion is OK) */
@media (prefers-reduced-motion: no-preference) {
  /* Shooting star — a rare slow streak of gold across the hero background */
  .sd-credits-hero::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 0;
    width: 70px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(251 191 36 / 55%), transparent);
    opacity: 0;
    transform: rotate(8deg) translateX(-90px);
    animation: sd-credits-shooting-star 17s ease-out infinite;
    animation-delay: 5s;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes sd-credits-shooting-star {
    0%   { opacity: 0; transform: rotate(8deg) translateX(-90px); }
    4%   { opacity: 0.6; }
    17%  { opacity: 0; transform: rotate(8deg) translateX(900px); }
    100% { opacity: 0; transform: rotate(8deg) translateX(900px); }
  }

  /* Balance number — one-time warm gleam on page load (filter is GPU-composited; no repaint) */
  .sd-credits-amount-number {
    animation: sd-credits-gleam 1.8s ease-out 0.8s 1 forwards;
  }

  @keyframes sd-credits-gleam {
    0%, 100% { filter: none; }
    40%, 60% { filter: brightness(1.18) drop-shadow(0 0 18px rgb(251 191 36 / 85%)); }
  }

  /* Pre-promote the coin layer before float starts — avoids mid-animation jank */
  .sd-credits-hero-coin {
    will-change: transform;
  }

  /* Best-value pack button — shimmer sweep (matches subscription CTA pattern) */
  .sd-credits-pack--best .sd-btn-primary {
    background-size: 200% auto;
    background-image: linear-gradient(
      105deg,
      var(--sd-accent-dark) 0%,
      var(--sd-accent) 45%,
      #c4b5fd 55%,
      var(--sd-accent) 65%,
      var(--sd-accent-dark) 100%
    );
    animation: sd-shimmer 4s linear infinite;
  }

  /* Cost pill — subtle hover lift */
  .sd-credits-cost-pill {
    transition: background var(--sd-transition), color var(--sd-transition),
                border-color var(--sd-transition), transform 0.15s ease;
    cursor: default;
  }

  .sd-credits-cost-pill:hover {
    background: var(--sd-border);
    color: var(--sd-text);
    border-color: var(--sd-border-strong);
    transform: translateY(-1px);
  }

  /* Transaction amount — scale on row hover (confirms detail, satisfying) */
  .sd-credits-tx-amount {
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .sd-credits-tx:hover .sd-credits-tx-amount {
    transform: scale(1.1);
  }

  /* Empty state coin — gentle breathing so it feels alive, not dead */
  .sd-credits-empty i {
    animation: sd-credits-breathe 4.5s ease-in-out infinite;
  }

  @keyframes sd-credits-breathe {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.07); }
  }
}

/* Reduced motion — disable all credits page animations */
@media (prefers-reduced-motion: reduce) {
  .sd-credits-page > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .sd-credits-star {
    animation: none;
    opacity: 0.3;
  }

  .sd-credits-hero-coin {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FAMILY STORIES
   ════════════════════════════════════════════════════════════════════ */

/* ── Selection count badge (shown inside section title) ─────────── */
.sd-selection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent-muted);
  color: var(--sd-accent);
  font-size: 0.75rem;
  font-weight: 800;
  margin-left: 0.25rem;
  vertical-align: middle;
  transition: background var(--sd-transition), color var(--sd-transition);
}

/* ── Profile selector grid ──────────────────────────────────────── */
.sd-profile-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sd-space-md);
}

.sd-profile-selector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: var(--sd-space-md) var(--sd-space-sm);
  background: var(--sd-bg-card);
  border: 2px solid var(--sd-border);
  border-radius: var(--sd-radius-xl);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--sd-transition), background var(--sd-transition), transform var(--sd-transition);
  overflow: hidden;
}

@media (hover: hover) {
  .sd-profile-selector-card:hover {
    border-color: var(--sd-accent);
    background: var(--sd-bg-card-hover);
    transform: translateY(-2px);
  }
}

.sd-profile-selector-card--selected {
  border-color: var(--sd-accent);
  background: var(--sd-accent-muted);
}

.sd-profile-selector-card--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Avatar circle inside selector card */
.sd-profile-selector-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sd-bg-soft);
  border: 2px solid var(--sd-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.5rem;
  color: var(--sd-accent);
  transition: border-color var(--sd-transition);
  flex-shrink: 0;
}

.sd-profile-selector-card--selected .sd-profile-selector-avatar {
  border-color: var(--sd-accent);
}

.sd-profile-selector-avatar .sd-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-profile-selector-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--sd-text);
  line-height: 1.2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-profile-selector-age {
  font-size: 0.75rem;
  color: var(--sd-text-muted);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkmark badge — hidden by default, shown when selected */
.sd-profile-selector-check {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  font-size: 0.9rem;
  color: var(--sd-accent);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sd-transition), transform var(--sd-transition);
}

.sd-profile-selector-card--selected .sd-profile-selector-check {
  opacity: 1;
  transform: scale(1);
}

/* ── Relationship editor rows ────────────────────────────────────── */
.sd-relationship-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-sm);
  margin-bottom: var(--sd-space-md);
}

.sd-relationship-row {
  display: flex;
  align-items: center;
  gap: var(--sd-space-sm);
  flex-wrap: wrap;
}

.sd-relationship-names {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sd-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 80px;
  max-width: 200px;
  flex-shrink: 0;
}

.sd-relationship-input {
  flex: 1;
  min-width: 140px;
}

@media (width <= 480px) {
  .sd-relationship-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sd-relationship-names {
    white-space: normal;
    min-width: 0;
  }
}

/* ── Toggle switch ───────────────────────────────────────────────── */
.sd-toggle-field {
  margin-bottom: 0;
}

.sd-toggle-label {
  position: relative; /* anchors the absolutely-positioned hidden input */
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  min-height: 44px; /* meets touch target minimum */
  user-select: none;
}

/* The checkbox is visually replaced by the track+thumb.
   Matches the 1px hidden-input pattern used by sd-mood-option, sd-theme-option, etc. */
.sd-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  margin: 0;
}

.sd-toggle-track {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1.4rem;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-border-strong);
  border-radius: var(--sd-radius-pill);
  flex-shrink: 0;
  transition: background var(--sd-transition), border-color var(--sd-transition);
}

.sd-toggle-input:checked + .sd-toggle-track {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
}

.sd-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--sd-text-muted);
  transition: transform var(--sd-transition), background var(--sd-transition);
}

.sd-toggle-input:checked + .sd-toggle-track .sd-toggle-thumb {
  transform: translateX(1.2rem);
  background: #fff;
}

.sd-toggle-text {
  font-size: 0.88rem;
  color: var(--sd-text-soft);
  line-height: 1.3;
}

/* Focus ring on the hidden input — targets the track */
.sd-toggle-input:focus-visible + .sd-toggle-track {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* ── Family story card on dashboard ─────────────────────────────── */

/* Inherits all sd-profile-card base styles; this modifier adds the
   accent-gradient shimmer to make it visually distinct from kid cards */
.sd-profile-card--family {
  background: linear-gradient(135deg, var(--sd-bg-card) 0%, rgb(124 58 237 / 18%) 100%);
  border-color: var(--sd-accent-muted);
  border-style: dashed;
}

@media (hover: hover) {
  .sd-profile-card--family:hover {
    border-color: var(--sd-accent);
    border-style: dashed;
    background: linear-gradient(135deg, var(--sd-bg-card-hover) 0%, rgb(124 58 237 / 28%) 100%);
  }
}

.sd-profile-card--family .sd-profile-avatar {
  color: var(--sd-accent);
  background: var(--sd-accent-muted);
  border-color: var(--sd-accent);
}

.sd-profile-card--family .sd-profile-name {
  color: var(--sd-accent);
}

.sd-profile-card--family .sd-profile-age {
  color: var(--sd-text-muted);
  font-style: italic;
}

/* ── Family story pill on story cards ───────────────────────────── */

/* Extends the base sd-story-cover-pill with an accent tint to
   distinguish multi-kid stories from single-profile stories */
.sd-story-cover-pill--family {
  background: rgb(124 58 237 / 45%);
  color: rgb(233 213 255 / 95%);
}

/* ── Small phone adaptations (≤360px) ───────────────────────────── */
@media (width <= 360px) {
  .sd-profile-selector-grid {
    grid-template-columns: repeat(2, 1fr); /* lock to 2 columns; auto-fill gets too tight */
  }

  .sd-profile-selector-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .sd-profile-selector-card {
    padding: var(--sd-space-sm) var(--sd-space-xs);
  }
}

/* ── Family stories delight ──────────────────────────────────────── */

/* Ring ripple radiates outward when a profile card is selected —
   same technique as sd-tag-pop but adapted for a card border */
@keyframes sd-selector-select {
  0%   { box-shadow: 0 0 0 0 rgb(167 139 250 / 50%); }
  70%  { box-shadow: 0 0 0 10px rgb(167 139 250 / 0%); }
  100% { box-shadow: none; }
}

/* Glow pulse plays once when the submit button transitions to enabled */
@keyframes sd-btn-unlock {
  0%   { box-shadow: 0 0 0 0 rgb(167 139 250 / 70%); }
  55%  { box-shadow: 0 0 0 14px rgb(167 139 250 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(167 139 250 / 0%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Ring ripple on card selection */
  .sd-profile-selector-card--selected {
    animation: sd-selector-select 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Checkmark pops in with rotation rather than plain fade — reuses sd-check-pop */
  .sd-profile-selector-card--selected .sd-profile-selector-check {
    animation: sd-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* Submit button glows once when it unlocks */
  .sd-btn-primary.sd-btn--just-unlocked {
    animation: sd-btn-unlock 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Each relationship row fades up; delay is set per-row by JS via --row-delay */
  .sd-relationship-row {
    animation: sd-fade-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--row-delay, 0s);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sd-profile-selector-card,
  .sd-profile-selector-check,
  .sd-toggle-thumb,
  .sd-toggle-track {
    transition: none;
  }
}

/* ── Install guide page ──────────────────────────────────────────── */
.sd-install-page {
  padding: var(--sd-space-3xl) 0;
}

.sd-install-page-header {
  text-align: center;
  margin-bottom: var(--sd-space-xl);
}

.sd-install-page-header .sd-section-heading {
  margin-bottom: var(--sd-space-xs);
}

.sd-install-subheading {
  font-family: var(--sd-font);
  font-size: 1.05rem;
  color: var(--sd-text-soft);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.sd-install-tip {
  display: flex;
  align-items: center;
  gap: var(--sd-space-xs);
  padding: var(--sd-space-sm) var(--sd-space-md);
  background: var(--sd-accent-muted);
  border: 1px solid var(--sd-accent);
  border-radius: var(--sd-radius-md);
  font-family: var(--sd-font);
  font-size: 0.9rem;
  color: var(--sd-text);
  line-height: 1.5;
  margin-top: var(--sd-space-lg);
}

.sd-install-tip i {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--sd-accent);
  font-size: 1rem;
}


.sd-install-tabs-wrapper {
  margin-top: var(--sd-space-xl);
}

.sd-install-panel {
  min-height: 60vh; /* prevents page reflow when switching between panels with different step counts */
}

.sd-install-tabs {
  display: flex;
  gap: var(--sd-space-xs);
  justify-content: center;
  margin-bottom: var(--sd-space-lg);
  flex-wrap: wrap;
}

.sd-install-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--sd-radius-pill);
  border: 1.5px solid var(--sd-border);
  background: transparent;
  color: var(--sd-text-soft);
  font-family: var(--sd-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sd-install-tab:hover {
  border-color: var(--sd-accent);
  color: var(--sd-accent);
}

.sd-install-tab:active {
  opacity: 0.8;
  transform: scale(0.97);
}

.sd-install-tab:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 3px;
}

.sd-install-tab.active {
  background: var(--sd-accent);
  border-color: var(--sd-accent);
  color: var(--sd-text);
}


.sd-install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-lg);
}

.sd-install-step {
  display: flex;
  gap: var(--sd-space-md);
  align-items: flex-start;
}

.sd-install-step-number {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-accent);
  color: var(--sd-text);
  font-family: var(--sd-font);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-install-step-body {
  flex: 1;
  min-width: 0;
}

.sd-install-step-title {
  display: block;
  font-family: var(--sd-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 2rem; /* matches circle height — centers text and circle on the same axis */
  color: var(--sd-text);
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.sd-install-step-desc {
  font-family: var(--sd-font);
  font-size: 0.9rem;
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-sm);
  line-height: 1.5;
}

.sd-install-step-screenshot {
  margin-top: var(--sd-space-xs);
}

.sd-install-step-img {
  display: block;
  max-width: 320px;
  width: 100%;
  border-radius: var(--sd-radius-lg);
  border: 1px solid var(--sd-border);
  box-shadow: var(--sd-shadow);
  aspect-ratio: 9 / 19; /* reserve space while loading (portrait phone screenshots) */
}

.sd-install-panel[data-platform="desktop"] .sd-install-step-img {
  aspect-ratio: 16 / 9; /* desktop/browser window screenshots */
}

/* ── Tablet: screenshot beside step text ── */
@media (width >= 640px) {
  .sd-install-step-body {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--sd-space-xl);
    align-items: start;
  }

  /* Explicit placement keeps title/desc in col 1 even when screenshot is absent */
  .sd-install-step-title {
    grid-column: 1;
    grid-row: 1;
  }

  .sd-install-step-desc {
    grid-column: 1;
    grid-row: 2;
  }

  .sd-install-step-screenshot {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
    width: 200px;
  }

  .sd-install-step-img {
    max-width: 200px;
  }
}

/* ── Desktop: wider screenshots ── */
@media (width >= 1024px) {
  .sd-install-step-screenshot {
    width: 260px;
  }

  .sd-install-step-img {
    max-width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-install-tab {
    transition: none;
  }

  .sd-install-tab:active {
    transform: none;
  }
}

/* ── Mobile ── */
@media (width <= 639px) {
  .sd-install-page {
    padding: var(--sd-space-md) 0 var(--sd-space-xl);
  }

  .sd-install-page-header {
    margin-bottom: var(--sd-space-md);
  }

  .sd-install-subheading {
    font-size: 0.9rem;
  }

  .sd-install-tip {
    font-size: 0.82rem;
    padding: var(--sd-space-sm) var(--sd-space-md);
    margin-top: var(--sd-space-md);
  }

  .sd-install-tabs-wrapper {
    margin-top: var(--sd-space-md);
  }

  .sd-install-tabs {
    gap: 0.35rem;
    margin-bottom: var(--sd-space-md);
    flex-wrap: nowrap;
  }

  .sd-install-tab {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.78rem;
    gap: 0.3rem;
  }

  .sd-install-steps {
    gap: var(--sd-space-md);
  }

  .sd-install-step-img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS — User review form and status views
   ═══════════════════════════════════════════════════════════════ */

/* ── Disclaimer notice ──────────────────────────────────────── */
.sd-review-disclaimer {
  padding: var(--sd-space-md) var(--sd-space-lg);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-gold-muted);
  border: 1px solid rgb(251 191 36 / 25%);
  margin-bottom: var(--sd-space-lg);
}

.sd-review-disclaimer-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sd-review-disclaimer-headline {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sd-gold);
  line-height: 1.3;
}

.sd-review-disclaimer-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--sd-text-soft);
}

/* ── Star picker row (stars + hint label side-by-side) ──────── */
.sd-star-picker-row {
  display: flex;
  align-items: center;
  gap: var(--sd-space-md);
  flex-wrap: wrap;
}

/* ── Star picker ────────────────────────────────────────────── */
.sd-star-picker {
  display: flex;
  gap: 0.125rem;
  align-items: center;
  padding: 0.25rem 0;
}

.sd-star-picker--error {
  outline: 2px solid rgb(239 68 68 / 60%);
  outline-offset: 4px;
  border-radius: var(--sd-radius-sm);
}

/* Color set on the button cascades to the FA SVG inside via fill:currentColor.
   We never target <i> or <svg> directly — FA SVG+JS replaces <i> tags. */
.sd-star-btn {
  all: unset;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sd-radius-sm);
  color: rgb(255 255 255 / 18%);
  transition: color 0.2s ease, transform 0.15s ease;
}

/* Selected: gold. data-selected is set server-side and updated by Stimulus. */
.sd-star-btn[data-selected="true"] {
  color: var(--sd-gold);
}

.sd-star-btn:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}

/* Size the icon child — works for both <i> (CSS FA) and <svg> (SVG+JS FA) */
.sd-star-btn > * {
  font-size: 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  pointer-events: none;
}

@media (hover: hover) {
  .sd-star-btn:hover {
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-star-btn { transition: none; }
  .sd-star-btn:hover { transform: none; }
}

/* ── Star hint label (e.g. "Excelente") ─────────────────────── */
.sd-star-hint {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sd-gold);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.sd-star-hint--visible {
  opacity: 1;
  transform: translateY(0);
}

.sd-star-hint--preview {
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .sd-star-hint { transition: none; }
}

/* ── Word counter ────────────────────────────────────────────── */
.sd-word-count {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.35rem;
  color: var(--sd-text-muted);
  transition: color 0.25s ease;
}

.sd-word-count--ok {
  color: var(--sd-success);
}

/* ── Review textarea ─────────────────────────────────────────── */
.sd-review-textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

/* ── Status card (pending / approved / rejected states) ─────── */
.sd-review-status-card {
  text-align: center;
}

.sd-review-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--sd-radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--sd-space-md);
}

.sd-review-status-badge--pending {
  background: var(--sd-gold-muted);
  color: var(--sd-gold);
  border: 1px solid var(--sd-gold-muted);
}

.sd-review-status-badge--approved {
  background: rgb(74 222 128 / 15%);
  color: var(--sd-success);
  border: 1px solid rgb(74 222 128 / 30%);
}

.sd-review-status-badge--rejected {
  background: rgb(248 113 113 / 12%);
  color: var(--sd-danger);
  border: 1px solid rgb(248 113 113 / 25%);
}

/* Use when badge is rendered outside a centered status card */
.sd-review-status-badge--block {
  margin-bottom: var(--sd-space-md);
}

.sd-review-status-notice {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sd-text-soft);
  margin: 0 0 var(--sd-space-lg);
}

/* ── Review preview (pending/approved read-only view) ───────── */
.sd-review-preview {
  text-align: left;
  padding-top: var(--sd-space-md);
  border-top: 1px solid var(--sd-border);
}

.sd-review-stars--display {
  display: flex;
  gap: 0.2rem;
  margin-bottom: var(--sd-space-sm);
}

/* Color on the span cascades to the FA SVG via fill:currentColor */
.sd-review-star {
  display: inline-flex;
  color: rgb(255 255 255 / 18%);
}

.sd-review-star--on {
  color: var(--sd-gold);
}

.sd-review-star > * {
  font-size: 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  pointer-events: none;
}

.sd-review-body-preview {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--sd-text-soft);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Rejection notes (inside form card) ─────────────────────── */
.sd-review-divider {
  border: none;
  border-top: 1px solid var(--sd-border);
  margin: var(--sd-space-lg) 0;
}

.sd-review-admin-notes {
  padding: var(--sd-space-md);
  background: var(--sd-gold-muted);
  border: 1px solid rgb(251 191 36 / 35%);
  border-radius: var(--sd-radius-md);
  text-align: left;
}

.sd-review-admin-notes-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sd-gold);
  margin: 0 0 0.35rem;
}

.sd-review-admin-notes-body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sd-text-soft);
  margin: 0;
  overflow-wrap: break-word;
}


.sd-trust-stars .far.fa-star {
  color: var(--sd-text-muted);
}

/* ── Trust section — 4-6 real reviews (star cluster variants) ── */
.sd-trust-quote:nth-child(4)::after {
  background-image:
    radial-gradient(1px   1px   at 30% 20%, rgb(251 191 36  / 45%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgb(167 139 250 / 50%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55% 80%, rgb(255 255 255 / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 10% 60%, rgb(167 139 250 / 35%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 90% 40%, rgb(251 191 36  / 30%)  0%, transparent 100%);
  animation-delay: 0.6s;
}

.sd-trust-quote:nth-child(5)::after {
  background-image:
    radial-gradient(1.5px 1.5px at 60% 15%, rgb(167 139 250 / 50%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 20% 75%, rgb(251 191 36  / 40%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85% 55%, rgb(167 139 250 / 40%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 40% 90%, rgb(255 255 255 / 35%)  0%, transparent 100%),
    radial-gradient(1px   1px   at  5% 30%, rgb(167 139 250 / 45%)  0%, transparent 100%);
  animation-delay: 1.8s;
}

.sd-trust-quote:nth-child(6)::after {
  background-image:
    radial-gradient(1px   1px   at 75% 25%, rgb(251 191 36  / 55%) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 50%, rgb(167 139 250 / 45%) 0%, transparent 100%),
    radial-gradient(1px   1px   at 48% 72%, rgb(167 139 250 / 35%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 85%, rgb(255 255 255 / 30%)  0%, transparent 100%),
    radial-gradient(1px   1px   at 35% 10%, rgb(167 139 250 / 50%)  0%, transparent 100%);
  animation-delay: 3.0s;
}

/* ── Mobile adaptations for review views (≤768px) ───────────── */
@media (width <= 768px) {
  /* Reduce star icon on narrow screens to keep all 5 in one row */
  .sd-star-btn > * {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Disclaimer stacks icon + text naturally; reduce padding */
  .sd-review-disclaimer {
    padding: var(--sd-space-sm) var(--sd-space-md);
  }

  /* Status badge wraps text on very narrow phones */
  .sd-review-status-badge {
    white-space: normal;
    text-align: center;
  }

  /* Reduce textarea height on mobile to save scroll */
  .sd-review-textarea {
    min-height: 6rem;
  }
}

/* ── Parental consent checkbox ───────────────────────────────── */
.sd-consent-section {
  padding: var(--sd-space-md) 0;
  border-top: 1px solid rgba(255 255 255 / 8%);
}

/* Disable submit until consent is checked */
.sd-form:has(.sd-consent-checkbox:not(:checked)) .sd-form-actions--profile [type="submit"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.sd-form:has(.sd-consent-checkbox:checked) .sd-form-actions--profile [type="submit"] {
  opacity: 1;
  pointer-events: auto;
}

.sd-consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sd-space-sm);
  cursor: pointer;
}

.sd-consent-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sd-consent-checkmark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid rgba(255 255 255 / 40%);
  border-radius: 4px;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.sd-consent-checkbox:checked + .sd-consent-checkmark {
  background: var(--sd-color-accent, #a78bfa);
  border-color: var(--sd-color-accent, #a78bfa);
}

.sd-consent-checkbox:checked + .sd-consent-checkmark::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.sd-consent-checkbox:focus-visible + .sd-consent-checkmark {
  outline: 2px solid var(--sd-color-accent, #a78bfa);
  outline-offset: 2px;
}

.sd-consent-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255 255 255 / 75%);
}

.sd-consent-text a {
  color: var(--sd-color-accent, #a78bfa);
  text-decoration: underline;
}

/* ── Very small phones (≤480px) ─────────────────────────────── */
@media (width <= 480px) {
  /* 5 × 40px + 4 × gap fits 320px-wide viewport (card has ~1rem padding each side) */
  .sd-star-btn {
    min-width: 40px;
  }

  .sd-star-btn > * {
    font-size: 1.4rem;
    width: 1.4rem;
    height: 1.4rem;
  }

  /* On very small screens, wrap hint to its own line */
  .sd-star-picker-row {
    gap: var(--sd-space-sm);
  }
}