/* The d'Event app's landing page (www/app.njk), on top of css/tokens.css,
 * src/css/base.css and landing.css (header, chips, lead, footer, the legal
 * pages). Mobile-first; every section wraps at phone width. Colours are the
 * tokens only, so the dark scheme and the toggle need nothing here. */

.app-inner { max-width: 74rem; margin: 0 auto; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); box-sizing: border-box; }
.app-section { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); display: flex; flex-direction: column; gap: 2rem; }
.app-section > p { margin: 0; }
.app-band { background: var(--tint); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.app-band h2, .app-section h2, .app-hosts h2, .app-final h2 { margin: 0; }
.app-link { font-weight: 600; text-underline-offset: .2em; }

.app-wordmark svg { height: 24px; }

/* ---- hero ------------------------------------------------------------ */
.app-hero {
  max-width: 74rem; margin: 0 auto; box-sizing: border-box;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 3.5rem;
}
.app-hero-copy { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.app-hero-copy h1 { margin: 0; }
.app-hero-copy .lead { margin: 0; }
.app-hero-copy .chips { margin-top: .4rem; }
.app-hero-copy .chips li::before { content: none; }
.app-hero-phones { flex: 1 1 26rem; min-width: 0; display: flex; justify-content: center; align-items: flex-end; gap: 1.1rem; }
.app-phone {
  width: min(250px, 44%); padding: 9px; border-radius: 38px; background: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / .18);
}
.app-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.app-phone-back { transform: translateY(28px) rotate(-3deg); }
.app-phone-front { transform: rotate(2.5deg); }

/* ---- the App Store badge --------------------------------------------- */
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; margin-top: .4rem; }
.store-badge { display: inline-flex; }
.store-badge img { display: block; height: 50px; width: auto; }
/* The badge in the page's language: Apple draws one per locale. */
html:not([lang="en"]) .badge-en, html[lang="en"] .badge-es { display: none; }
.store-note { display: flex; flex-direction: column; font-size: .92rem; color: var(--muted); line-height: 1.35; }
.store-note strong { color: var(--ink); }

/* ---- how it works ------------------------------------------------------ */
.app-band .app-inner { display: flex; flex-direction: column; gap: 2.4rem; }
.app-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.app-steps li { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.app-steps h3, .app-features h3 { margin: 0; font-size: 1.45rem; }
.app-steps p, .app-features p { margin: 0; color: var(--muted); }
.app-step-n { font-family: var(--display); font-style: italic; font-size: 2.1rem; line-height: 1; color: var(--accent); }

/* ---- features ---------------------------------------------------------- */
.app-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.8rem; }
.app-features article { display: flex; flex-direction: column; gap: 1rem; }
.app-shot { border-radius: 26px; background: var(--tint); padding: 1.75rem 1.75rem 0; height: 26rem; overflow: hidden; display: flex; justify-content: center; }
.app-shot img { width: 15rem; height: auto; align-self: flex-start; border-radius: 28px 28px 0 0; border: 8px solid var(--ink); border-bottom: 0; }

/* ---- for hosts: the page's one dark band ------------------------------- */
.app-dark { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.app-dark h2 { color: var(--paper); }
.app-hosts { display: flex; flex-wrap: wrap; gap: 3rem; }
.app-hosts-head { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 1rem; }
.app-hosts-head p { margin: 0; opacity: .82; }
.app-hosts-list { flex: 2 1 30rem; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem 2rem; }
.app-hosts-list li { display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-top: 1rem; }
.app-hosts-list strong { font-size: 1.1rem; }
.app-hosts-list span { opacity: .82; }

/* ---- privacy ----------------------------------------------------------- */
.app-privacy { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; }
.app-privacy li { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.2rem 1.4rem; max-width: none; }

/* ---- questions --------------------------------------------------------- */
.app-faq { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: flex; flex-direction: column; gap: .9rem; }
.app-faq h2 { margin-bottom: .9rem; }
.app-faq details { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 1.1rem 1.4rem; }
.app-faq summary { font-weight: 600; cursor: pointer; }
.app-faq details p { margin: .6rem 0 0; color: var(--muted); }

/* ---- the last word ----------------------------------------------------- */
.app-final { padding-top: clamp(4rem, 9vw, 7.5rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.app-final h2 { max-width: 18ch; }
.store-soon { font-size: .95rem; }