/* Public pages: home, features, pricing and the legal pages. Same tokens as
 * the app, with bigger type and more room. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer layout {
  .public-nav { gap: var(--space-2); }
  .public-nav .button { color: var(--action-ink); padding: .45rem 1rem; }
  .public-nav .button:hover { background: var(--action-hover); color: var(--action-ink); }
  .public-main { max-width: 64rem; }

  .site-footer {
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between;
    max-width: 64rem; margin: 0 auto; padding: var(--space-5); border-top: 1px solid var(--line);
    font-size: var(--text-sm); color: var(--muted);
  }
  .site-footer p { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .site-footer a { color: var(--ink-soft); }
}

@layer components {
  .landing-hero { max-width: 44rem; margin-block: var(--space-7) var(--space-6); }
  .landing-hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-top: var(--space-2); }
  .landing-lead { font-size: var(--text-lg); font-weight: var(--weight-light); color: var(--ink-soft); }

  .section-title { font-size: var(--text-xl); font-weight: var(--weight-light); margin-top: var(--space-7); }

  .landing-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); padding: 0; list-style: none; }
  .landing-steps .card { margin: 0; }
  .landing-steps h3 { margin-block: var(--space-3) var(--space-2); font-weight: var(--weight-medium); }
  .landing-steps p { margin: 0; color: var(--ink-soft); }
  .landing-step-number {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--sheen); color: #121316; font-weight: var(--weight-medium); /* the sheen is pale in both themes */
  }

  .landing-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
  .landing-split .card { margin: 0; }
  .landing-list { padding-left: 1.1rem; color: var(--ink-soft); }
  .landing-list li { margin-block: var(--space-2); }

  .landing-pricing { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-top: var(--space-6); }
  .landing-pricing h2 { margin-block: var(--space-2) var(--space-1); }
  .landing-pricing p { margin: 0; color: var(--ink-soft); }

  /* Features page */
  .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
  .feature-grid .card { margin: 0; }
  .feature-grid h2 { margin-top: var(--space-1); }

  /* Pricing page */
  .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
  .plan { display: flex; flex-direction: column; margin: 0; }
  .plan h2 { margin-top: var(--space-1); }
  .plan-price { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-light); }
  .plan-price small { font-size: var(--text-sm); color: var(--muted); }
  .plan-for { color: var(--ink-soft); }
  .plan--featured { border: 2px solid var(--ink); }
  .faq dt { margin-top: var(--space-4); font-weight: var(--weight-medium); }
  .faq dd { margin: var(--space-1) 0 0; color: var(--ink-soft); }

  /* Legal pages */
  .legal { max-width: 46rem; }
  .legal h2 { margin-top: var(--space-6); }
  .legal p, .legal li { color: var(--ink-soft); }
}