/* Explain: Scoped styles for the Digital Growth campaign page. */
/* =========================================================
   DMA — CAMPAIGN LANDING PAGE
   Scoped styles for the Digital Growth campaign page.
   Tokens live in css/theme.css (--lp-*).
   Every show/hide state is defined here so no utility class
   and no project class fight over `display`.
   ========================================================= */

/* ---------- predictable typography rhythm on this page ---------- */
.lp-campaign h1,
.lp-campaign h2,
.lp-campaign h3,
.lp-campaign p,
.lp-campaign dl,
.lp-campaign dd,
.lp-campaign figure {
  margin: 0;
}

.lp-campaign ul,
.lp-campaign ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-campaign fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.lp-campaign {
  background: var(--lp-canvas);
  color: var(--lp-ink);
}

/* ---------- type helpers ---------- */
.lp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}

.lp-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0;
}

.lp-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--lp-accent);
}

/* ---------- entrance (CSS only — content is never hidden by scripts) ---------- */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-rise { animation: lp-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
  .lp-rise-2 { animation-delay: .08s; }
  .lp-rise-3 { animation-delay: .16s; }
  .lp-rise-4 { animation-delay: .24s; }
}

/* ---------- actions ---------- */
.lp-cta,
.lp-cta-sm,
.lp-cta-quiet {
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 16px 30px;
  background: var(--lp-ink);
  color: var(--lp-canvas);
  border: 1px solid var(--lp-ink);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .25s ease, border-color .25s ease;
}

.lp-cta:hover { background: var(--lp-accent); border-color: var(--lp-accent); }
.lp-cta:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp-cta:disabled { opacity: .5; cursor: default; }

.lp-cta-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  background: var(--lp-ink);
  color: var(--lp-canvas);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .25s ease;
}

.lp-cta-sm:hover { background: var(--lp-accent); }
.lp-cta-sm:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }

.lp-cta-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .25s ease, opacity .25s ease;
}

.lp-cta-quiet:hover { border-color: var(--lp-ink); opacity: .7; }
.lp-cta-quiet:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }

@media (max-width: 639px) {
  .lp-cta { width: 100%; }
}

/* ---------- qualification fields ---------- */
.lp-field {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp-ink);
  transition: border-color .25s ease;
}

.lp-field:focus { outline: none; border-bottom-color: var(--lp-ink); }
.lp-field::placeholder { color: var(--lp-placeholder); }
select.lp-field { appearance: none; cursor: pointer; }

/* ---------- blocks ---------- */
.lp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 28px;
  border-top: 1px solid var(--lp-line);
}

.lp-stage {
  padding-top: 28px;
  border-top: 1px solid var(--lp-line-inverse);
}

/* ---------- consent bar + swapped panels ---------- */
.lp-consent { display: none; }

.lp-consent.is-open {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--lp-canvas);
  border-top: 1px solid var(--lp-line);
  box-shadow: 0 -10px 30px var(--lp-shadow);
  padding-bottom: env(safe-area-inset-bottom);
}

.lp-hidden { display: none; }