/* /local and the legal pages (privacy, terms, sms-terms). Shared parts live in site.css. */
@layer page {
  /* /local */
  .hero { padding: 56px 0 72px; }
  .hero h1 { margin-top: 16px; max-width: 900px; font-weight: 800; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
  .hero-copy { margin-top: 22px; max-width: 620px; font-size: 20px; color: var(--muted); }
  .hero .actions, .section .actions { margin-top: 30px; align-items: center; gap: 12px 24px; }
  .text-link { font-weight: 700; }
  .section { padding: 80px 0; }
  .section--surface { background: var(--surface); }
  .section-heading { max-width: 720px; }
  .section-heading h2 { margin-top: 10px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 32px; }
  .card { padding: 28px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
  .card-number { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-tint); color: var(--green-text); font-family: var(--mono); font-size: 13px; font-weight: 500; }
  .card h3 { margin-top: 16px; font-size: 22px; font-weight: 800; }
  .card p { margin-top: 8px; color: var(--muted); }
  .steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .steps li { padding: 22px 24px; border-radius: var(--radius); background: var(--surface); font-weight: 800; font-size: 18px; border-top: 3px solid var(--green); }
  .section--surface .steps li { background: var(--card); }
  .company-panel { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: center; justify-content: space-between; padding: 44px; border-radius: 24px; background: var(--dark); color: var(--dark-text); }
  .company-panel h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
  .company-details { max-width: 520px; color: var(--dark-muted); line-height: 1.7; }
  .company-details strong { color: var(--dark-text); }
  .company-details a { color: var(--dark-green); }
  @media (max-width: 640px) { .hero { padding: 24px 0 48px; } .section { padding: 56px 0; } .company-panel { padding: 28px 20px; } }

  /* legal pages */
  .legal-hero { padding-top: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .legal-hero h1 { margin-top: 12px; font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.035em; }
  .effective-date { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--faint); }
  .legal-content { max-width: var(--wrap); margin: 0 auto; padding: 16px 32px 0; }
  .legal-content > * { max-width: 760px; }
  .legal-content section { padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
  .legal-content h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
  .legal-content h3 { margin-top: 18px; font-size: 18px; font-weight: 800; }
  .legal-content p, .legal-content li { margin-top: 10px; color: var(--body); }
  .legal-content ul, .legal-content ol { margin: 10px 0 0; padding-left: 22px; }
  .sms-notice { padding: 16px 18px; border-radius: var(--radius); background: var(--green-row); border: 1px solid var(--tint-line); }
  @media (max-width: 640px) { .legal-hero { padding-top: 24px; } .legal-content { padding: 8px 16px 0; } }
}