/* Shared public-site experience layer. Individual pages keep their local
   product logic; this file gives the whole journey one visual grammar. */

body[data-page] { overflow-x: hidden; }
body[data-page] .logo,
body[data-page] h1,
body[data-page] h2,
body[data-page] .eyebrow,
body[data-page] .kicker { letter-spacing: 0; }

body[data-page] .btn,
body[data-page] button { transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
body[data-page] .btn:hover:not(:disabled),
body[data-page] button:hover:not(:disabled) { transform: translateY(-1px); }
body[data-page] .btn:active:not(:disabled),
body[data-page] button:active:not(:disabled) { transform: translateY(0) scale(.985); }

/* Homepage: bring a truthful product surface into the first viewport. */
body[data-page="home"] .hero { padding: 30px 0 18px; }
body[data-page="home"] .hero h1 { font-size: clamp(36px, 4.75vw, 54px); line-height: 1.03; margin-top: 12px; max-width: 940px; }
body[data-page="home"] .hero .sub { font-size: 18px; line-height: 1.5; margin-top: 12px; max-width: 760px; }
body[data-page="home"] .audience-toggle-wrap { margin-top: 16px; }
body[data-page="home"] .trust { margin-top: 16px; }
body[data-page="home"] .shot { margin-top: 20px; }
body[data-page="home"] .window { border-radius: 18px; }
body[data-page="home"] .win-main { padding: 22px; }
body[data-page="home"] .mtile { border-radius: 12px; padding: 14px; }

/* Individual account, confirmation, and connection pages are one calm path. */
body[data-page="journey"] { background: var(--wash, #F4F3EF); }
body[data-page="journey"] nav { background: var(--nav-wash, rgba(250,250,248,.94)); }
body[data-page="journey"] .navbar { height: 70px; }
body[data-page="journey"] main { padding: 64px 24px 68px; position: relative; }
body[data-page="journey"] .card {
  max-width: 560px;
  border-radius: 20px;
  border-top: 4px solid var(--gold);
  box-shadow: 0 2px 5px rgba(28,25,23,.06), 0 28px 64px rgba(28,25,23,.12);
  padding: 42px 40px 36px;
}
body[data-page="journey"] .card h1 { font-size: clamp(30px,4.4vw,42px); line-height: 1.08; }
body[data-page="journey"] .eyebrow { font-weight: 800; }
body[data-page="journey"] .input,
body[data-page="journey"] .codebox { background: var(--field, #FCFCFA); }
body[data-page="journey"] .trust { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
body[data-page="journey"] .steps { margin-top: 28px; }
body[data-page="journey"] .steps li { padding: 16px 0; }
body[data-page="journey"] footer { padding-top: 24px; }

/* Giving remains church-branded but gains a real public-facing frame. */
body[data-page="give"] { background: var(--wash, #F4F3EF); }
body[data-page="give"] .page { max-width: 560px; padding-top: 22px; }
body[data-page="give"] .head {
  margin-top: 0;
  padding: 28px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--brand-soft);
  box-shadow: 0 8px 24px rgba(28,25,23,.05);
}
body[data-page="give"] .church-name { font-size: 27px; line-height: 1.16; letter-spacing: 0; }
body[data-page="give"] .card { border-radius: 18px; padding: 24px; margin-top: 18px; box-shadow: 0 2px 5px rgba(28,25,23,.05), 0 18px 36px rgba(28,25,23,.08); }
body[data-page="give"] .chip { min-height: 56px; }
body[data-page="give"] .pay { border-radius: 12px; min-height: 54px; }
body[data-page="give"] .foot { padding-bottom: 16px; }

/* Church onboarding uses the same confident framing as the console entrance. */
body[data-page="onboarding"] .top { padding: 24px 32px 18px; }
body[data-page="onboarding"] .wrap {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 560px);
  gap: 64px;
  place-content: center;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  padding: 28px 32px 42px;
}
body[data-page="onboarding"] .journey-intro { color: #EDEAE4; align-self: center; }
body[data-page="onboarding"] .journey-intro .kicker { color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; }
body[data-page="onboarding"] .journey-intro h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px,4vw,52px); line-height: 1.05; margin: 14px 0; }
body[data-page="onboarding"] .journey-intro p { color: var(--side-ink); font-size: 15px; line-height: 1.65; max-width: 32ch; }
body[data-page="onboarding"] .journey-points { display: grid; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
body[data-page="onboarding"] .journey-point b { color: #F3F0E9; display: block; font-size: 13px; margin-bottom: 3px; }
body[data-page="onboarding"] .journey-point span { color: var(--side-ink); font-size: 12.5px; }
body[data-page="onboarding"] .card { border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
body[data-page="onboarding"] .body { padding: 32px 34px 12px; }
body[data-page="onboarding"] h1 { font-size: 26px; line-height: 1.2; letter-spacing: 0; }
body[data-page="onboarding"] .foot { padding: 18px 34px 26px; }

/* The early-access flow already owns a darker, immersive moment; keep its
   composition but align its type, action feedback, and motion accessibility. */
body[data-page="early"] .cover h1,
body[data-page="early"] .q h1,
body[data-page="early"] .done h1 { letter-spacing: 0; }
body[data-page="early"] .slide-inner { border-left: 1px solid rgba(201,168,76,.32); padding-left: 26px; }
body[data-page="early"] .choice { border-radius: 12px; }

/* Legal pages should read like a considered policy center, not raw text. */
body[data-page="legal"] { background: var(--wash, #F4F3EF); }
body[data-page="legal"] header { background: var(--nav-wash, rgba(250,250,248,.92)); position: sticky; top: 0; z-index: 5; }
body[data-page="legal"] .bar { height: 70px; }
body[data-page="legal"] main {
  max-width: 820px;
  margin: 48px auto 72px;
  padding: 50px 58px 58px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(28,25,23,.05), 0 24px 56px rgba(28,25,23,.08);
}
body[data-page="legal"] h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px,5vw,48px); line-height: 1.05; letter-spacing: 0; }
body[data-page="legal"] .meta { margin: 14px 0 6px; }
body[data-page="legal"] .draft { border-radius: 12px; margin: 28px 0 42px; padding: 15px 17px; }
body[data-page="legal"] h2 { border-top: 1px solid var(--line); font-size: 21px; letter-spacing: 0; margin: 38px 0 13px; padding-top: 28px; }
body[data-page="legal"] footer { background: var(--surface, #FFFFFF); }

@media (max-width:760px) {
  body[data-page="home"] .hero { padding-top: 34px; }
  body[data-page="home"] .hero h1 { font-size: clamp(36px,11vw,46px); }
  body[data-page="home"] .hero .sub { font-size: 16.5px; }
  body[data-page="home"] .shot { margin-top: 28px; }
  body[data-page="journey"] main { padding: 32px 18px 48px; }
  body[data-page="journey"] .card { padding: 30px 24px 26px; border-radius: 18px; }
  body[data-page="give"] .page { padding-top: 16px; }
  body[data-page="give"] .head { padding: 24px 18px 20px; }
  body[data-page="onboarding"] .wrap { display: block; padding: 16px 18px 32px; }
  body[data-page="onboarding"] .journey-intro { display: none; }
  body[data-page="onboarding"] .body { padding: 26px 22px 10px; }
  body[data-page="onboarding"] .foot { padding: 16px 22px 22px; }
  body[data-page="legal"] main { margin: 26px 18px 46px; padding: 32px 24px 38px; border-radius: 18px; }
}

@media (prefers-reduced-motion:reduce) {
  body[data-page] *, body[data-page] *::before, body[data-page] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}