/* sune.cl landing (frontend/landing). Prefix ld-. Reuses home.css: hero-*, home-sec, steps, alerts-*. */
@layer views {
  .ld-hero { position: relative; scroll-margin-top: var(--hdr-h); padding-bottom: var(--space-8); }
  .ld-main { background: radial-gradient(80% 640px at 80% 0, var(--primary-tint), transparent) no-repeat; }
  .ld-hero .hero-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .ld-hero h1 { font: var(--fs-display); letter-spacing: var(--track-display); max-width: 20ch; text-wrap: balance; }
  .ld-kicker { display: inline-block; margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-ink); font: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .ld-lead { max-width: var(--measure); margin-top: var(--space-5); }

  .ld-form { display: grid; gap: var(--space-3); max-width: 640px; margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-2); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ld-form { background: var(--material-bar); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
  }
  .ld-row { display: grid; gap: var(--space-3); }
  .ld-email { -webkit-appearance: none; appearance: none; width: 100%; height: 56px; padding-inline: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 17px; outline: none; }
  .ld-email::placeholder { color: var(--text-3); }
  .ld-email:focus-visible { box-shadow: var(--focus); }
  .ld-email[aria-invalid="true"] { border-color: var(--warn-ink); }
  .ld-msg { height: auto; min-height: 120px; padding-block: var(--space-4); border-radius: var(--radius-2xl); font-family: inherit; line-height: 1.4; resize: vertical; }
  .ld-form .btn-primary { height: 56px; font-size: 17px; }
  .ld-consent { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-2); font: var(--fs-sm); }
  .ld-consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }
  .ld-consent input:focus-visible { box-shadow: var(--focus); }
  .ld-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .ld-status { min-height: 1.5em; font: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  .ld-status[data-tone="ok"] { color: var(--best-ink); }
  .ld-status[data-tone="error"] { color: var(--warn-ink); }

  .ld-sec { scroll-margin-top: var(--hdr-h); }
  .ld-sec > h2 { position: sticky; top: var(--hdr-h); z-index: 1; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3) var(--gutter); font: var(--fs-title); letter-spacing: var(--track-tight); background: var(--bg); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ld-sec > h2 { background: var(--material-bar); -webkit-backdrop-filter: blur(var(--material-blur)); backdrop-filter: blur(var(--material-blur)); }
  }
  .ld-how .steps li { font: var(--fs-h3); }
  .ld-how .steps li::before { width: 36px; height: 36px; background: var(--primary-soft); color: var(--primary-ink); }

  .ld-compare { list-style: none; display: grid; gap: var(--space-3); max-width: 960px; }
  .ld-compare li { display: grid; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-2xl); background: var(--surface-2); }
  .ld-compare strong { font: var(--fs-h3); }
  .ld-compare span { color: var(--text-2); }
  .ld-lost { padding-block: var(--space-9); }
  .ld-lost .btn-secondary { margin-top: var(--space-5); }

  .ld-faq { display: grid; max-width: 760px; }
  .ld-faq details { border-bottom: 1px solid var(--line); }
  .ld-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-h); padding-block: var(--space-4); cursor: pointer; list-style: none; }
  .ld-faq summary::-webkit-details-marker { display: none; }
  .ld-faq summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-m); }
  .ld-faq summary h3 { font: var(--fs-h3); }
  .ld-faq summary::after { content: "+"; flex: none; font: var(--fs-title); color: var(--text-3); }
  .ld-faq details[open] summary::after { content: "\2212"; }
  .ld-faq .prose { padding-bottom: var(--space-4); color: var(--text-2); }

  .ld-end { padding: var(--space-7) var(--space-5); }
  .ld-end h2 { font: var(--fs-title); letter-spacing: var(--track-tight); }
  .ld-end .btn-secondary { background: var(--surface); }
  .ld-end .btn-secondary:hover { background: var(--surface-3); }

  .ld-social { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
  .ld-social a { display: inline-block; padding-block: var(--space-2); font-weight: 600; }

  /* The header shows the brand lockup in every theme. The lockup is drawn for light; dark inverts it until a dark variant exists. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hdr-logo > img.hdr-mark { display: block; filter: invert(1) hue-rotate(180deg); }
  }
  :root[data-theme="dark"] .hdr-logo > img.hdr-mark { display: block; filter: invert(1) hue-rotate(180deg); }

  @media (min-width: 720px) {
    .ld-hero { padding-bottom: var(--space-9); }
    .ld-hero h1 { max-width: 20ch; }
    .ld-form { padding: var(--space-6); }
    .ld-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ld-end { padding: var(--space-8) var(--space-7); }
    .ld-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}