/* Landing sections. Breakpoints 600 and 1024 px, same as the Mini App. */

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], details[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

.band { padding-block: var(--space-10); }
.band h2 { margin-bottom: var(--space-6); }
.section-lead { max-width: 62ch; margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-6); }
.narrow { max-width: calc(760px + 2 * var(--space-6)); }

/* Hero: copy and the example lead card */
.hero { padding-block: var(--space-8) var(--space-10); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-copy > * + * { margin-top: var(--space-5); }
.hero h1 { max-width: 20ch; hyphens: manual; }
.hero-lead { max-width: 62ch; }
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-12); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); }
}

.mock { margin: 0; max-width: 440px; width: 100%; justify-self: center; }
.mock > * + * { margin-top: var(--space-3); }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mock-text {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.mock-actions { display: flex; gap: var(--space-2); }
.mock-btn {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: var(--text-small);
}

/* How it works */
.steps { display: grid; gap: var(--space-5); counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-weight: 700;
}
.step > * + * { margin-top: var(--space-2); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Features */
.feature-grid { display: grid; gap: var(--space-4); }
.feature { padding: var(--space-5); }
.feature > * + * { margin-top: var(--space-2); }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

/* What we do not do */
.notdo { max-width: 760px; }
.notdo h2 { margin-bottom: var(--space-4); }
.notdo > * + * { margin-top: var(--space-4); }
.notdo-list { padding-left: 1.25em; }
.notdo-list > li + li { margin-top: var(--space-2); }

/* Pricing shell; cards are rendered into #plans */
.period-switch { margin-bottom: var(--space-6); flex-wrap: wrap; }
.plans { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
.plans:empty { display: none; }
#pricing .small + .small { margin-top: var(--space-2); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.plan.is-highlighted { order: -1; border: 2px solid var(--color-accent); }
.plan-badge { align-self: flex-start; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.plan-amount { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.plan-features { display: grid; gap: var(--space-1); font-weight: 600; }
.plan-limits { display: grid; gap: var(--space-2); padding-left: 1.1em; list-style: disc; }
.plan-actions { margin-top: auto; padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan-actions .btn { flex: 1 1 auto; }
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .plan.is-highlighted { order: 0; }
}

/* FAQ */
#faq details { border-bottom: 1px solid var(--color-border); }
#faq details:first-of-type { border-top: 1px solid var(--color-border); }
#faq summary {
  min-height: 44px; padding-block: var(--space-4);
  font: var(--text-strong);
  cursor: pointer;
}
#faq details > p { padding-bottom: var(--space-4); max-width: 70ch; }
#faq details > p + p { margin-top: calc(-1 * var(--space-2)); }

/* Footer */
.footer-grid { display: grid; gap: var(--space-6); }
.footer-side > * + * { margin-top: var(--space-3); }

/* Narrow phones: the header has to fit wordmark, language switch and theme button */
@media (max-width: 399px) {
  .site-header .container { gap: var(--space-2); }
  .site-header .segmented > button { min-width: 36px; padding: 0 var(--space-2); }
}

/* Payment in progress bar (stored cl.order.<ref> younger than 7 days) */
.order-bar { background: var(--color-accent-soft); border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); font: var(--text-small); }
.order-bar a { font-weight: 600; }