/* Landing page (design-spec.md §7). Mobile first; tokens only. */
main:has(> .hero) { padding-top: var(--s-5); }
main > section { margin-bottom: var(--s-8); scroll-margin-top: 80px; }
main > section > h2 { max-width: 28ch; }

/* §7.1 Hero */
.hero { display: grid; gap: var(--s-5); }
.eyebrow { color: var(--ink-muted); margin-bottom: var(--s-3); }
.hero h1 { margin-bottom: var(--s-4); }
.hero-actions { display: grid; gap: var(--s-2); margin-block: var(--s-5) var(--s-3); }
.hero-actions .btn-lg { width: 100%; }
.price-hint { max-width: 52ch; }
.hero-panel {
  background: var(--brand); color: var(--paper); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4) var(--s-2); box-shadow: var(--shadow-paper);
  -webkit-mask: var(--edge-scallop), linear-gradient(black 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  mask: var(--edge-scallop), linear-gradient(black 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  -webkit-mask-size: 12px 12px, 100% calc(100% - 6px);
  mask-size: 12px 12px, 100% calc(100% - 6px);
}
.hero-art { display: block; width: 100%; height: 240px; }
.trust-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--s-7); }
  .hero-actions { grid-auto-flow: column; justify-content: start; }
  .hero-actions .btn-lg { width: auto; }
  .hero-panel { transform: rotate(-2deg); }
  .hero-art { height: 320px; }
  .trust-row { grid-column: 1 / -1; }
}

/* Hero motion: silhouettes rise 12 px with 60 ms stagger; the gift unfolds once (§2.3) */
/* CSS transforms replace the SVG transform attribute, so the keyframes carry the full placement. */
.hero-art g.rise:nth-of-type(1) { animation: rise-l 600ms var(--ease-paper) both; }
.hero-art g.rise:nth-of-type(2) { animation: rise-r 600ms var(--ease-paper) 60ms both; }
@keyframes rise-l { from { transform: translate(92px, 108px); opacity: 0; } to { transform: translate(92px, 96px); } }
@keyframes rise-r { from { transform: translate(228px, 108px) scale(-1, 1); opacity: 0; } to { transform: translate(228px, 96px) scale(-1, 1); } }
.gift-right { transform-origin: 160px 180px; transform-box: view-box; animation: unfold var(--t-unfold) var(--ease-unfold) 300ms both; }
.gift-crease { animation: crease var(--t-unfold) var(--ease-unfold) 300ms both; }
@keyframes crease { to { opacity: 0; } }
.name-tag { animation: fade-in 300ms var(--ease-paper) 1200ms both; }
.tag { fill: var(--brand-strong); font: 600 12px/1 var(--font-sans); }
.tag-b { opacity: 0; }
.tag-a { animation: tag-a 8s steps(1) 1500ms infinite; }
.tag-b { animation: tag-b 8s steps(1) 1500ms infinite; }
@keyframes tag-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tag-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.hero-art:hover .tag { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-art .rise, .gift-right, .gift-crease, .name-tag { animation-name: fade-in !important; }
  .gift-crease { opacity: 0; }
  .tag-a { animation: none !important; opacity: 1; }
  .tag-b { animation: none !important; opacity: 0; }
}

/* §7.2 Proof */
.proof-counter { color: var(--brand-strong); }
.proof-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.proof-fact { display: flex; gap: var(--s-3); align-items: flex-start; }
.proof-fact p { margin: 0; }
.proof-fact .icon { color: var(--ink); }
@media (min-width: 768px) { .proof-facts { grid-template-columns: 1fr 1fr; } }

/* §7.3 Steps: vertical timeline with a dotted scissor line on mobile, a row from md */
.step-cards { list-style: none; padding: 0 0 0 var(--s-5); margin: 0 0 var(--s-6); display: grid; gap: var(--s-5); border-left: 2px dotted var(--line); }
.step-card { position: relative; }
.step-disc {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink); font: var(--type-door); font-style: normal;
  box-shadow: var(--shadow-paper); margin-bottom: var(--s-3);
}
@media (min-width: 768px) {
  .step-cards { grid-template-columns: repeat(3, 1fr); padding-left: 0; border-left: 0; }
}
.everyone { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.everyone li { display: flex; gap: var(--s-2); align-items: center; font: var(--type-small); }
.everyone .icon { width: 20px; height: 20px; color: var(--brand); }
@media (min-width: 768px) { .everyone { grid-template-columns: repeat(4, 1fr); } }

/* §7.4 Pricing with the calculator island (src/islands/calculator.ts) */
.pricing .card { max-width: 640px; }
.calc { margin-block: var(--s-4); }
.calc .input { width: 100%; max-width: 12rem; }
.calc-range { width: 100%; min-height: var(--hit); accent-color: var(--brand); }
.calc-currency { display: flex; gap: var(--s-4); border: 0; padding: 0; margin: 0 0 var(--s-4); }
.calc-currency legend { font: 600 14px/20px var(--font-sans); padding: 0; margin-bottom: var(--s-1); }
.calc-currency label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); }
.calc-out { display: block; }
.calc-lines, .calc-total { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
.calc-lines li { color: var(--ink-muted); }
.calc-total { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-weight: 600; }
.bands { width: 100%; border-collapse: collapse; margin-block: var(--s-4); }
.bands caption { text-align: left; caption-side: bottom; padding-top: var(--s-2); }
.bands th, .bands td { text-align: left; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: 1px dotted var(--line); }
.bands td { font-variant-numeric: tabular-nums; }
.examples { padding-left: var(--s-5); margin: var(--s-2) 0 var(--s-4); }

/* §7.5 FAQ */
.faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; min-height: var(--hit); padding-block: var(--s-3); font-weight: 600; }
.faq-item p { color: var(--ink-muted); }

/* §7.6 Final CTA: Nachtblau band with the village along the bottom edge */
.final-cta {
  background: var(--ink); color: var(--paper); border-radius: var(--r-md);
  padding: var(--s-7) var(--s-5) 0; overflow: hidden; text-align: center;
}
.final-inner { max-width: 640px; margin-inline: auto; padding-bottom: var(--s-5); }
.final-cta .small { color: var(--paper); margin-top: var(--s-4); }
.final-cta .btn-primary { background: var(--paper); color: var(--ink); }
.village { display: block; width: 100%; height: 90px; color: var(--paper); opacity: .9; }
main > section.final-cta { margin-bottom: 0; }
.final-cta .optin-form label, .final-cta .optin-form .small { color: var(--paper); margin: 0; }