/* Landing (O-01): the pitch with the 10% example, then bands that alternate the page and card surfaces */
.bh-landing { display: grid; }
.bh-landing-inner, .bh-landing-hero { display: grid; gap: var(--space-6); width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--page-pad); }
.bh-landing-band { background: var(--card); border-block: 1px solid var(--line); }
.bh-landing-pitch { display: grid; gap: var(--space-4); align-content: start; }
.bh-landing-cta { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.bh-landing-cta > .bh-btn { width: 100%; }
.bh-strong { font-weight: var(--weight-bold); }

.bh-landing-fee { display: grid; gap: var(--space-3); }
.bh-landing-sum { display: grid; margin: 0; }
.bh-landing-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.bh-landing-sum dd { margin: 0; white-space: nowrap; }
.bh-landing-payout { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3) !important; border-radius: var(--radius-control); background: var(--primary-soft); font-weight: var(--weight-bold); }
.bh-landing-arrival { border-top-width: 2px !important; }

.bh-landing-grid { display: grid; gap: var(--space-6); }
.bh-landing-grid > li { display: grid; gap: var(--space-2); align-content: start; }
.bh-landing-thumb, .bh-landing-step {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control);
  background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold);
}
.bh-landing-step { border-radius: 50%; }

.bh-landing-faq { display: grid; }
.bh-landing-faq details { border-top: 1px solid var(--line); }
.bh-landing-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-3) 0;
  font-weight: var(--weight-bold); cursor: pointer; list-style: none;
}
.bh-landing-faq summary::-webkit-details-marker { display: none; }
.bh-landing-faq summary > .bh-icon { flex: none; transition: transform var(--dur-fade) var(--ease); }
.bh-landing-faq details[open] summary > .bh-icon { transform: rotate(180deg); }
.bh-landing-faq details > p { padding-bottom: var(--space-4); }

.bh-landing-end { gap: var(--space-6); }
.bh-landing-guest, .bh-landing-final { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-card); }
.bh-landing-guest { background: var(--sunken); }
.bh-landing-final { background: var(--primary); color: var(--on-primary); }
.bh-landing-final-btn { background: var(--card); border-color: var(--card); color: var(--primary); }
.bh-landing-final-btn:hover { background: var(--primary-soft); color: var(--primary-hover); }

@media (min-width: 768px) {
  .bh-landing-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: center; gap: var(--space-16); padding-block: var(--space-16); }
  .bh-landing-inner { padding-block: var(--space-16); }
  .bh-landing-cta > .bh-btn { width: auto; justify-self: start; }
  .bh-landing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-10) var(--space-12); }
  .bh-landing-faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; column-gap: var(--space-12); }
  .bh-landing-end { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
  .bh-landing-guest > .bh-btn, .bh-landing-final > .bh-btn { justify-self: start; }
}