/* Jibber marketing site — "Paper & Stars", extended from the app's design
   system in apps/flutter/lib/theme/jibber_tokens.dart. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/BricolageGrotesque-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/BricolageGrotesque-Bold.ttf') format('truetype');
  font-display: swap;
}

  /* ============ TOKENS — lifted from apps/flutter/lib/theme/jibber_tokens.dart ============ */
  :root {
    --raspberry: #CE3B5D;
    --raspberry-ink: #A82C49;
    --starlight: #FFC94D;
    --aqua: #3ED3B8;
    --steel: #5C87B5;
    --on-action: #FFFFFF;
    --on-lit: #1D2733;

    --stage: #E8ECF0;
    --surface: #FFFFFF;
    --surface-alt: #F1F4F7;
    --ink-strong: #1D2733;
    --ink-muted: #55636F;
    --ink-faint: #7E8B99;
    --hairline: #C6CFDA;

    --night-stage: #121A22;
    --night-surface: #1B2733;
    --night-surface-alt: #26333F;
    --night-ink-strong: #E8ECF0;
    --night-ink-muted: #9DAAB8;
    --night-ink-faint: #6B7A88;
    --night-hairline: #2C3B4A;
    --night-steel: #7BA3CC;

    --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
    --sp-xl: 24px; --sp-xxl: 32px; --sp-xxxl: 48px; --sp-huge: 64px;

    --r-small: 8px; --r-card: 12px; --r-device: 16px; --r-pill: 999px;

    --paper-shadow: 3px 3px 0 rgba(29,39,51,0.18);
    --paper-shadow-lg: 5px 5px 0 rgba(29,39,51,0.16);
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-ui: 'Bricolage Grotesque', system-ui, sans-serif;
    --measure: 62ch;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  body {
    margin: 0;
    background: var(--stage);
    color: var(--ink-strong);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
  p { margin: 0; }
  section { position: relative; }
  .wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--sp-xl); padding-right: var(--sp-xl); }
  @media (max-width: 640px) { .wrap { padding-left: var(--sp-lg); padding-right: var(--sp-lg); } }

  .eyebrow {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--raspberry);
  }
  .night .eyebrow { color: var(--starlight); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-ui); font-weight: 700; font-size: 0.98rem;
    padding: 14px 26px; border-radius: var(--r-pill);
    border: none; cursor: pointer; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
  .btn-primary { background: var(--raspberry); color: var(--on-action); box-shadow: var(--paper-shadow); }
  .btn-primary:hover { box-shadow: var(--paper-shadow-lg); }
  .btn-ghost { background: transparent; color: var(--ink-strong); border: 1.5px solid var(--hairline); }
  .btn-ghost:hover { border-color: var(--ink-faint); }
  .night .btn-ghost { color: var(--night-ink-strong); border-color: var(--night-hairline); }
  .night .btn-ghost:hover { border-color: var(--night-steel); box-shadow: 0 0 16px rgba(123,163,204,0.35); }
  .btn-lit { background: var(--starlight); color: var(--on-lit); }
  .night .btn-lit { box-shadow: 0 0 24px rgba(255,201,77,0.45); }
  .btn-sm { padding: 10px 18px; font-size: 0.88rem; }

  /* ============ THEME SECTIONS ============ */
  .day { background: var(--stage); color: var(--ink-strong); }
  .night {
    background:
      radial-gradient(1200px 500px at 15% -10%, rgba(92,135,181,0.18), transparent 60%),
      radial-gradient(900px 500px at 90% 10%, rgba(206,59,93,0.14), transparent 55%),
      var(--night-stage);
    color: var(--night-ink-strong);
  }
  .night .ink-muted { color: var(--night-ink-muted); }
  .day .ink-muted { color: var(--ink-muted); }

  /* cut-paper card (day) */
  .card {
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--paper-shadow);
  }
  /* lit card (night) */
  .night .card {
    background: var(--night-surface);
    border: 1px solid var(--night-hairline);
    box-shadow: none;
  }

  /* ============ HEADER ============ */
  header.site {
    position: sticky; top: 0; z-index: 40;
    background: rgba(18,26,34,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--night-hairline);
  }
  .nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); padding: 14px 0; }
  .brand-mark { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.55rem; color: var(--night-ink-strong); text-decoration: none; letter-spacing: 0; }
  .brand-mark .spark { color: var(--starlight); font-size: 1.1rem; }
  nav.primary { display: flex; gap: var(--sp-xl); list-style: none; margin: 0; padding: 0; }
  nav.primary a { font-size: 0.92rem; font-weight: 600; color: var(--night-ink-muted); text-decoration: none; transition: color 0.15s ease; }
  nav.primary a:hover { color: var(--night-ink-strong); }
  .nav-actions { display: flex; align-items: center; gap: var(--sp-md); }
  .nav-actions .btn-ghost { color: var(--night-ink-strong); border-color: var(--night-hairline); }
  .nav-toggle { display: none; }
  @media (max-width: 980px) {
    nav.primary { display: none; }
    .nav-toggle { display: inline-flex; }
  }
  @media (max-width: 520px) {
    .nav-actions .btn-ghost span.full { display: none; }
  }

  /* ============ HERO ============ */
  .hero { padding: var(--sp-huge) 0 96px; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-huge); align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-xxxl); } }
  .hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.03; color: var(--night-ink-strong); margin: var(--sp-lg) 0 var(--sp-lg); }
  .hero h1 em { font-style: normal; color: var(--starlight); }
  .hero p.lead { font-size: 1.2rem; color: var(--night-ink-muted); max-width: 46ch; margin-bottom: var(--sp-xxl); }
  .hero-ctas { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

  .hero-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 28px; max-width: 560px; margin: 0 auto; padding-top: 40px; }
  .constellation { position: absolute; inset: -18% -10% -10%; z-index: 0; pointer-events: none; }
  .device-cluster { position: relative; width: 300px; flex-shrink: 0; }
  .device-illustration { position: relative; z-index: 2; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45)); margin: 0 auto; display: block; }
  .device-illustration svg { width: 100%; height: auto; display: block; }
  .orbit-card { position: absolute; width: 92px; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.16); z-index: 3; }
  .orbit-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
  .orbit-1 { top: -18px; left: -14px; transform: rotate(-6deg); }
  .orbit-2 { top: 6px; right: -22px; transform: rotate(5deg); }
  .orbit-3 { bottom: 8px; left: -34px; transform: rotate(4deg); }
  .phone-frame {
    position: relative; z-index: 2; width: 168px; flex-shrink: 0; margin-bottom: -12px;
    background: #0d1319; border-radius: 26px; border: 3px solid #2c3b4a;
    box-shadow: 0 24px 48px rgba(0,0,0,0.5);
    aspect-ratio: 9/18.5; padding: 7px;
  }
  .phone-screen { width: 100%; height: 100%; border-radius: 19px; overflow: hidden; position: relative;
    background: linear-gradient(160deg, #1B2733, #121A22); }
  .phone-screen .ps-top { padding: 12px 10px 5px; font-size: 8px; color: var(--night-ink-faint); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .phone-screen .ps-title { padding: 0 10px; font-family: var(--font-display); font-size: 13px; color: var(--night-ink-strong); }
  .phone-screen .ps-row { margin: 8px 8px 0; background: var(--night-surface); border: 1px solid var(--night-hairline); border-radius: 9px; padding: 6px; display: flex; align-items: center; gap: 6px; }
  .phone-screen .ps-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--starlight); flex-shrink: 0; }
  .phone-screen .ps-line { height: 5px; border-radius: 3px; background: var(--night-hairline); flex: 1; }
  .phone-screen .ps-play { position: absolute; bottom: 10px; left: 8px; right: 8px; background: var(--raspberry); border-radius: 999px; padding: 8px; text-align: center; font-size: 9px; font-weight: 700; color: #fff; letter-spacing: 0.04em; box-shadow: 0 0 18px rgba(206,59,93,0.5); }

  @keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
  .star-dot { animation: twinkle 3.4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .star-dot { animation: none; opacity: 0.7; } }

  @media (max-width: 900px) {
    .hero-stage { max-width: 420px; }
  }
  @media (max-width: 460px) {
    .hero-stage { gap: 14px; }
    .device-cluster { width: 220px; }
    .phone-frame { width: 128px; }
    .orbit-card { width: 68px; }
  }

  /* ============ DEMO (make-a-story) ============ */
  .demo-section { padding: var(--sp-huge) 0; }
  .demo-card { padding: var(--sp-xxl); }
  .demo-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-xxl); }
  .demo-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: var(--sp-md); }
  .demo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
  @media (max-width: 820px) { .demo-cols { grid-template-columns: 1fr; } }
  .demo-col-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: var(--sp-md); }
  .demo-col-label .swatch { width: 10px; height: 10px; border-radius: 50%; }
  .swatch.character { background: var(--raspberry); }
  .swatch.place { background: var(--steel); }
  .swatch.twist { background: var(--aqua); }
  .jib-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
  .jib-opt {
    border-radius: var(--r-card); overflow: hidden; cursor: pointer; border: 3px solid transparent;
    background: var(--surface-alt); position: relative; aspect-ratio: 4/5;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }
  .jib-opt img { width: 100%; height: 100%; object-fit: cover; }
  .jib-opt:hover { transform: translateY(-2px); }
  .jib-opt.selected { border-color: var(--raspberry); }
  .jib-opt .jib-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 0.62rem; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); text-align: left; }
  .jib-opt:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 2px; }

  .demo-preview { margin-top: var(--sp-xxl); border-radius: var(--r-device); padding: var(--sp-xl); background: var(--night-stage);
    background-image: radial-gradient(700px 260px at 20% 0%, rgba(255,201,77,0.10), transparent 60%);
    color: var(--night-ink-strong); position: relative; overflow: hidden; }
  .demo-preview .eyebrow { color: var(--starlight); }
  .demo-preview h3 { font-family: var(--font-display); font-size: 1.7rem; margin: var(--sp-sm) 0 var(--sp-md); color: #fff; }
  .demo-preview p { color: var(--night-ink-muted); max-width: 56ch; }
  .demo-preview .placeholder-txt { color: var(--night-ink-faint); font-style: italic; }
  .demo-preview .play-row { margin-top: var(--sp-lg); display: flex; align-items: center; gap: var(--sp-md); }
  .play-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--starlight); color: var(--on-lit); border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 20px rgba(255,201,77,0.5); }
  .waveform { display: flex; align-items: center; gap: 3px; height: 24px; }
  .waveform span { width: 3px; background: var(--steel); border-radius: 2px; }

  /* ============ HOW IT WORKS ============ */
  .steps-section { padding: var(--sp-huge) 0; }
  .section-head { max-width: 640px; margin-bottom: var(--sp-xxl); }
  .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: var(--sp-md); }
  .section-head p { font-size: 1.08rem; color: var(--ink-muted); }
  .night .section-head p { color: var(--night-ink-muted); }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
  @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
  .step { padding: var(--sp-xl); position: relative; }
  .step .step-no { font-family: var(--font-display); font-size: 2.6rem; color: var(--hairline); line-height: 1; margin-bottom: var(--sp-md); }
  .step h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.15rem; margin-bottom: var(--sp-sm); }
  .step p { color: var(--ink-muted); font-size: 0.96rem; }

  /* ============ TWO WAYS TO PLAY ============ */
  .ways-section { padding: var(--sp-huge) 0; }
  .ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
  @media (max-width: 820px) { .ways-grid { grid-template-columns: 1fr; } }
  .way-card { padding: var(--sp-xxl); display: flex; flex-direction: column; gap: var(--sp-md); }
  .way-icon { width: 52px; height: 52px; border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--sp-sm); }
  .way-icon.physical { background: var(--raspberry); color: #fff; }
  .way-icon.app { background: var(--aqua); color: var(--on-lit); }
  .way-card h3 { font-family: var(--font-display); font-size: 1.5rem; }
  .way-card p { color: var(--ink-muted); }
  .way-tag { display: inline-flex; width: fit-content; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-alt); color: var(--ink-muted); margin-top: var(--sp-sm); }

  /* ============ PARENTS / SAFETY ============ */
  .parents-section { padding: var(--sp-huge) 0; }
  .parents-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-huge); align-items: flex-start; }
  @media (max-width: 900px) { .parents-grid { grid-template-columns: 1fr; gap: var(--sp-xxl); } }
  .trust-list { display: grid; gap: var(--sp-md); margin-top: var(--sp-xl); }
  .trust-item { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-lg); }
  .trust-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--aqua); color: var(--on-lit); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; }
  .trust-item p { font-weight: 600; font-size: 0.96rem; }

  /* ============ PREMIUM ============ */
  .premium-section { padding: var(--sp-huge) 0 96px; }
  .price-toggle { display: inline-flex; background: var(--night-surface); border: 1px solid var(--night-hairline); border-radius: var(--r-pill); padding: 4px; margin: var(--sp-lg) 0 var(--sp-xxl); }
  .price-toggle button { border: none; background: transparent; color: var(--night-ink-muted); font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem; padding: 9px 18px; border-radius: var(--r-pill); cursor: pointer; }
  .price-toggle button.active { background: var(--raspberry); color: #fff; }
  .price-toggle button:focus-visible { outline: 2px solid var(--starlight); }

  .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--sp-xl); }
  .compare-table th, .compare-table td { text-align: left; padding: 14px var(--sp-lg); border-bottom: 1px solid var(--night-hairline); font-size: 0.96rem; }
  .compare-table th { font-family: var(--font-ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--night-ink-faint); font-weight: 700; padding-bottom: var(--sp-md); }
  .compare-table th.col-free { color: var(--night-ink-muted); }
  .compare-table th.col-premium { color: var(--starlight); }
  .compare-table td.row-label { color: var(--night-ink-muted); font-weight: 600; }
  .compare-table td.col-premium { color: var(--night-ink-strong); font-weight: 600; }
  .compare-table tr:last-child td { border-bottom: none; }
  .compare-table .dash { color: var(--night-ink-faint); }
  .premium-wrap-table { overflow-x: auto; }
  .premium-cta-row { margin-top: var(--sp-xxl); display: flex; gap: var(--sp-md); flex-wrap: wrap; align-items: center; }
  .premium-note { color: var(--night-ink-faint); font-size: 0.86rem; margin-top: var(--sp-md); max-width: 60ch; }

  /* ============ PHYSICAL PRODUCT ============ */
  .physical-section { padding: var(--sp-huge) 0; }
  .physical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-huge); align-items: center; }
  @media (max-width: 900px) { .physical-grid { grid-template-columns: 1fr; gap: var(--sp-xxl); } }
  .physical-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-alt); border-radius: var(--r-pill); padding: 6px 14px; font-size: 0.78rem; font-weight: 700; color: var(--ink-muted); margin-bottom: var(--sp-lg); }
  .physical-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--starlight); }
  .physical-stage { position: relative; aspect-ratio: 1/0.9; }

  /* ============ FAQ ============ */
  .faq-section { padding: var(--sp-huge) 0; }
  .faq-list { max-width: 760px; }
  .faq-item { border-bottom: 1px solid var(--hairline); padding: var(--sp-lg) 0; }
  .faq-item summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-md); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .plus { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hairline); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--ink-muted); transition: transform 0.2s ease; }
  .faq-item[open] summary .plus { transform: rotate(45deg); }
  .faq-item p { color: var(--ink-muted); margin-top: var(--sp-md); max-width: 62ch; }

  /* ============ TESTIMONIALS ============ */
  .testi-section { padding: 0 0 var(--sp-huge); }
  .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
  @media (max-width: 820px) { .testi-grid { grid-template-columns: 1fr; } }
  .testi-card { padding: var(--sp-xl); }
  .testi-card p.quote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; margin-bottom: var(--sp-md); }
  .testi-card .who { font-size: 0.82rem; color: var(--ink-muted); font-weight: 600; }
  .testi-empty { padding: var(--sp-xxl); text-align: center; color: var(--ink-muted); border: 1.5px dashed var(--hairline); border-radius: var(--r-card); }

  /* ============ DOWNLOAD / FOOTER ============ */
  .download-section { padding: var(--sp-huge) 0; text-align: center; }
  .store-badges { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-xl); }
  .store-badge { display: flex; align-items: center; gap: 10px; background: var(--night-surface); border: 1px solid var(--night-hairline); border-radius: 10px; padding: 10px 18px; text-decoration: none; color: var(--night-ink-strong); }
  .store-badge .glyph { font-size: 1.4rem; }
  .store-badge .txt-sm { font-size: 0.62rem; color: var(--night-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
  .store-badge .txt-lg { font-size: 0.98rem; font-weight: 700; font-family: var(--font-ui); }

  footer.site { background: var(--night-stage); color: var(--night-ink-muted); padding: var(--sp-xxxl) 0 var(--sp-xxl); border-top: 1px solid var(--night-hairline); }
  .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-xl); }
  @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
  .footer-grid h4 { font-family: var(--font-ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--night-ink-faint); margin-bottom: var(--sp-md); }
  .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .footer-grid a { text-decoration: none; color: var(--night-ink-muted); font-size: 0.9rem; }
  .footer-grid a:hover { color: var(--night-ink-strong); }
  .footer-bottom { margin-top: var(--sp-xxxl); padding-top: var(--sp-xl); border-top: 1px solid var(--night-hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-md); font-size: 0.82rem; color: var(--night-ink-faint); }

  /* ============ LOGIN MODAL ============ */
  .modal-overlay { position: fixed; inset: 0; background: rgba(9,13,17,0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-lg); }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--night-surface); border: 1px solid var(--night-hairline); border-radius: var(--r-device); max-width: 420px; width: 100%; padding: var(--sp-xxl); color: var(--night-ink-strong); position: relative; }
  .modal-close { position: absolute; top: var(--sp-md); right: var(--sp-md); background: none; border: none; color: var(--night-ink-faint); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 6px; }
  .modal-close:focus-visible { outline: 2px solid var(--starlight); }
  .modal-steps { display: flex; gap: 6px; margin-bottom: var(--sp-xl); }
  .modal-steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--night-hairline); }
  .modal-steps span.done { background: var(--aqua); }
  .modal-steps span.active { background: var(--starlight); }
  .modal h3 { font-size: 1.5rem; margin-bottom: var(--sp-sm); }
  .modal p.sub { color: var(--night-ink-muted); font-size: 0.92rem; margin-bottom: var(--sp-lg); }
  .modal input {
    width: 100%; background: var(--night-stage); border: 1.5px solid var(--night-hairline); border-radius: var(--r-pill);
    padding: 13px 18px; color: var(--night-ink-strong); font-family: var(--font-ui); font-size: 1rem; margin-bottom: var(--sp-md);
  }
  .modal input:focus-visible { outline: none; border-color: var(--raspberry); }
  .modal .btn-primary { width: 100%; }
  .modal .code-input { letter-spacing: 0.5em; text-align: center; font-weight: 700; }
  .household-row { display: flex; align-items: center; gap: var(--sp-md); background: var(--night-stage); border-radius: var(--r-card); padding: var(--sp-md); margin-bottom: var(--sp-md); }
  .household-row .av { width: 36px; height: 36px; border-radius: 50%; background: var(--steel); flex-shrink: 0; }
  .entitlement-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: var(--sp-lg); }
  .entitlement-pill.premium { background: rgba(255,201,77,0.16); color: var(--starlight); }
  .entitlement-pill.free { background: rgba(157,170,184,0.16); color: var(--night-ink-muted); }
  .form-error { color: #FF8095; font-size: 0.84rem; margin-top: -4px; margin-bottom: var(--sp-md); }
  .household-row:empty { display: none; }

  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip-link { position: absolute; left: -9999px; top: 0; background: var(--raspberry); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
  .skip-link:focus { left: 0; }