/* Landing-only styles */
    .landing { background: var(--bg); }

    .hero {
      position: relative;
      padding: var(--s-6) var(--s-5) var(--s-8);
      overflow: hidden;
    }

    .hero-art {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: var(--r-xl);
      margin-bottom: var(--s-6);
      position: relative;
    }
    .hero-art::before {
      /* a faux cinematic horizon — gradient sunset over silhouette */
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(120% 70% at 50% 100%, rgba(26, 26, 46, 0.85) 0%, rgba(26, 26, 46, 0) 60%),
        linear-gradient(180deg, #5B3BFF 0%, #8470FF 40%, #FFD382 78%, #FFB37A 100%);
    }
    .hero-art::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 18%;
      transform: translateX(-50%);
      width: 12%;
      height: 22%;
      background: rgba(26, 26, 46, 0.9);
      border-radius: 50% 50% 8% 8% / 30% 30% 8% 8%;
    }
    .hero-sun {
      position: absolute;
      left: 50%;
      bottom: 30%;
      width: 38%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, #FFE9B8 0%, #FFD382 50%, rgba(255, 211, 130, 0) 75%);
      transform: translateX(-50%);
      filter: blur(2px);
    }
    .hero-ground {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 18%;
      background: linear-gradient(180deg, rgba(26, 26, 46, 0.5), rgba(26, 26, 46, 0.95));
      border-radius: 0 0 var(--r-xl) var(--r-xl);
    }

    .hero h1 {
      font-size: 40px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .hero h1 .accent { color: var(--primary); display: block; }
    .hero p {
      color: var(--text-muted);
      font-size: 16px;
      margin-top: var(--s-4);
      max-width: 36ch;
    }

    .login-section {
      padding: var(--s-6) var(--s-5) var(--s-8);
      background: var(--bg-soft);
      border-top: 1px solid var(--border-soft);
    }
    .login-section h2 {
      font-size: 22px;
      letter-spacing: -0.01em;
    }
    .login-section .lead {
      color: var(--text-muted);
      margin-top: var(--s-2);
      font-size: 15px;
    }

    .login-buttons {
      display: flex;
      flex-direction: column;
      gap: var(--s-3);
      margin-top: var(--s-6);
    }

    .login-btn {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      width: 100%;
      padding: 14px 18px;
      background: white;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: all var(--transition);
    }
    .login-btn:hover {
      border-color: var(--primary);
      background: var(--accent-2);
    }
    .login-btn .icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .login-btn .label { flex: 1; text-align: left; }

    .divider {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      color: var(--text-soft);
      font-size: 13px;
      margin: var(--s-5) 0;
    }
    .divider::before,
    .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .private-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      padding: 8px 12px;
      background: var(--accent);
      color: var(--primary-dark);
      border-radius: var(--r-pill);
      font-size: 12px;
      font-weight: 500;
      margin-top: var(--s-6);
    }

    .footer-note {
      text-align: center;
      color: var(--text-soft);
      font-size: 12px;
      padding: var(--s-4) var(--s-5) var(--s-6);
    }
    .footer-note a { color: var(--primary); text-decoration: none; }