:root {
    --g1: #FF3B1F;
    --g2: #FF8A1E;
    --surface: #15151B;
    --on-surface: #F5F6F8;
    --muted: #A8A8B3;
    --muted-2: #72727E;
    --on-primary: #FFFFFF;
    --on-accent: #15151B;
    --hairline: rgba(255, 255, 255, 0.10);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* The wordmark carries the gradient — same g1→g2 the app puts on its
     primary CTAs. This is the one place the brand signature appears, so it is
     the one place worth the extra paint. */
  .frapp-logo {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    background: linear-gradient(90deg, var(--g1), var(--g2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  h1 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; font-weight: 700; }
  h2 { font-size: 18px; line-height: 1.3; margin: 28px 0 8px; font-weight: 600; }
  p  { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
  a  { color: var(--g2); }

  .btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 650;
    font-size: 15px;
    text-decoration: none;
    margin: 6px;
    transition: transform 120ms ease, opacity 120ms ease;
  }
  .btn:active { transform: scale(0.97); opacity: 0.9; }

  /* Primary = the app's gradient CTA at full strength, with a dark label.
     See the --on-accent note in TOKENS: white on this gradient measures
     2.36:1 at the g2 end. Dark measures 5.11:1 at worst. */
  .btn.primary {
    background: linear-gradient(90deg, var(--g1), var(--g2));
    color: var(--on-accent);
    font-weight: 700;
  }
  .btn.ghost {
    border: 1px solid var(--hairline);
    color: var(--on-surface);
  }

  .wrap { max-width: 640px; margin: 0 auto; padding: 72px 24px 56px; }
  .center { text-align: center; }

  /* ── Landing card (premium pass) ─────────────────────────────────────────
     The shared-link page is the first thing a person without FRAPP ever
     sees. One quiet hairline card, the real wordmark, media clean. */
  .logo-img { height: 30px; display: block; margin: 0 auto 30px; }
  .card {
    max-width: 380px;
    margin: 0 auto;
    padding: 34px 26px 30px;
    border: 1px solid var(--hairline);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
  }
  .cover {
    width: 100%;
    border-radius: 16px;
    display: block;
    margin: 0 0 22px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #0B0B0D;
  }
  .footer {
    margin-top: 34px;
    font-size: 12px;
    color: var(--muted-2);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:active { transform: none; }
  }