/* Brand and the landing page on the bare domain. Mobile first: one column,
   then two or three from 48rem / 64rem. Every stylesheet loads on every
   page, so landing-only rules sit under .landing or carry a landing- prefix. */
@layer components {
  .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg); }
  .brand__mark { inline-size: 2rem; block-size: 2rem; flex: none; }
  .brand__name { font: 800 1.375rem/1 var(--font-display); letter-spacing: -0.02em; }
  .brand--large .brand__mark { inline-size: 3rem; block-size: 3rem; }
  .brand--large .brand__name { font-size: 2rem; }

  .site-header, .site-footer, .landing {
    inline-size: min(100% - 2rem, 64rem);
    margin-inline: auto;
  }

  .site-header { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); }
  .site-header__home { text-decoration: none; }
  .site-header__login { font-weight: 700; text-decoration: none; }

  .landing { display: grid; gap: 3.5rem; padding-block: var(--space-6) var(--space-8); }

  .landing-hero { display: grid; gap: var(--space-8); align-items: center; }
  .landing-hero__text { display: grid; gap: var(--space-4); justify-items: start; }
  .landing-hero h1 { font-size: clamp(2rem, 8vw, 3.25rem); }
  .landing-hero__lead { font-size: 1.125rem; color: var(--muted); }
  .landing-hero__fine { font-size: 0.875rem; color: var(--muted); }
  .landing-hero .btn { inline-size: 100%; }
  .landing-hero__card { transform: rotate(-2deg); }

  /* The sample card is a plain panel in Fielito's colors; it stamps itself
     and has a button to give a stamp (landing_card_controller.js), which
     keeps its own width, and the reward line pops when the card fills. */
  .landing-hero .landing-card .btn { inline-size: auto; justify-self: start; }
  .card-left--won { color: var(--brand); animation: reward-pop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

  .landing .section { display: grid; gap: var(--space-4); }
  .landing .section > h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  .how-steps { display: grid; gap: var(--space-4); padding: 0; list-style: none; counter-reset: how-step; }
  .how-step { counter-increment: how-step; display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
  .how-step::before {
    content: counter(how-step);
    display: grid; place-items: center;
    inline-size: 2rem; block-size: 2rem; margin-block-end: var(--space-2);
    border-radius: 50%; background: var(--brand-soft); color: var(--brand);
    font: 800 1rem/1 var(--font-display);
  }

  .landing .features { display: grid; gap: var(--space-4); padding: 0; list-style: none; }
  .landing .feature { display: grid; gap: var(--space-1); }
  .landing .feature h3 { font-size: 1.0625rem; }
  .landing .feature p { color: var(--muted); }

  .badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 700 0.75rem/1.4 var(--font-body); vertical-align: middle; }

  .landing .plans { display: grid; gap: var(--space-4); }
  .landing .plan { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  .landing .plan--highlighted { border: 2px solid var(--brand); box-shadow: var(--shadow); }
  .plan__name { font-size: 1.25rem; }
  .plan__price { font: 800 2rem/1.1 var(--font-display); }
  .plan__note { font-size: 0.875rem; color: var(--muted); }
  .plan__tax { display: block; font: 600 0.875rem/1.4 var(--font-body); color: var(--muted); }
  .plan__features { display: grid; gap: var(--space-2); padding-inline-start: 1.25rem; }

  .landing .cta { justify-items: center; text-align: center; padding: var(--space-8) var(--space-4); border-radius: var(--radius-lg); background: var(--brand-soft); }

  .site-footer { display: grid; gap: var(--space-3); justify-items: center; padding-block: var(--space-8); border-block-start: 1px solid var(--line); text-align: center; font-size: 0.9375rem; }
  .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); }
  .site-footer__mail { display: inline-flex; align-items: center; gap: var(--space-2); }

  @media (min-width: 48rem) {
    .landing-hero { grid-template-columns: 1.2fr 1fr; }
    .landing-hero .btn, .landing .cta .btn { inline-size: auto; }
    .how-steps { grid-template-columns: repeat(3, 1fr); }
    .landing .features { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .landing .plans { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 64rem) {
    .landing .features { grid-template-columns: repeat(3, 1fr); }
  }
}

@layer components {
  .made-with { display: flex; justify-content: center; padding-block: var(--space-4); font-size: 0.8125rem; color: var(--muted); }
  .made-with__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); text-decoration: none; }
  .made-with .brand__mark { inline-size: 1.25rem; block-size: 1.25rem; }
  .made-with .brand__name { font-size: 1rem; }
}