/* ============================================================
   Dang! Payoff — Web foundation  (W1-LP vanilla port)
   Responsive layout + web-native primitives layered on top of
   the Payoff tokens. Used by the marketing site.
   Faithful port of _design/Dang-Payoff-Handoff/site/site.css.

   NOTE: the design file opens with `@import "../payoff/tokens.css"`.
   In the web/ layout the tokens are already loaded ahead of this
   file via <link> in index.html (web/css/{dang-tokens,payoff-tokens}.css),
   so the @import is intentionally omitted (Disc-C). No other change.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--payoff-bg);
  color: var(--payoff-text);
  font-family: var(--payoff-font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--payoff-sage-bg); }

/* ── Layout container ─────────────────────────────────────── */
.po-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.po-wrap--narrow { max-width: 960px; }
@media (max-width: 820px) {
  .po-wrap { padding-left: 22px; padding-right: 22px; }
}

/* ── Display type scale (web) ─────────────────────────────── */
.po-display {
  font-family: var(--payoff-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.po-d1 { font-size: clamp(48px, 8vw, 104px); letter-spacing: -0.045em; line-height: 0.97; }
.po-d2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.03em; line-height: 1.03; }
.po-d3 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; line-height: 1.1; }

.po-lede {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.5;
  color: var(--payoff-text-2);
  text-wrap: pretty;
  margin: 0;
}
.po-eyebrow-lg {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--payoff-text-3);
}

/* Big numeral — the brand motif */
.po-figure {
  font-family: var(--payoff-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* ── Buttons ──────────────────────────────────────────────── */
.po-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 14px;
  border: 0;
  background: var(--payoff-coral);
  color: #fff;
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms cubic-bezier(0.33,1,0.68,1), transform 140ms cubic-bezier(0.33,1,0.68,1);
}
.po-cta:hover { background: var(--payoff-coral-press); }
.po-cta:active { transform: translateY(1px); }

.po-cta--ghost {
  background: transparent;
  border: 1.5px solid var(--payoff-border);
  color: var(--payoff-text);
}
.po-cta--ghost:hover { background: var(--payoff-coral-ghost); border-color: var(--payoff-coral); }

.po-cta--lg { padding: 17px 30px; font-size: 17px; border-radius: 15px; }
.po-cta--sm { padding: 10px 16px; font-size: 14px; border-radius: 11px; }

.po-cta--sage { background: var(--payoff-sage); }
.po-cta--sage:hover { background: var(--payoff-sage-deep); }

/* Disabled / coming-soon control (no silently dead taps — brief L6).
   Used for the "iPhone app coming soon" secondary CTA. */
.po-cta--disabled,
.po-cta[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

/* ── Card ─────────────────────────────────────────────────── */
.po-surface {
  background: var(--payoff-card);
  border: 0.5px solid var(--payoff-border);
  border-radius: 20px;
}

/* ── Section rhythm ───────────────────────────────────────── */
.po-section { padding: clamp(72px, 11vw, 140px) 0; }
.po-section--tight { padding: clamp(48px, 7vw, 88px) 0; }

/* ── Scroll reveal ────────────────────────────────────────── */
.po-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms cubic-bezier(0.33,1,0.68,1), transform 720ms cubic-bezier(0.33,1,0.68,1);
  will-change: opacity, transform;
}
.po-reveal.is-in { opacity: 1; transform: none; }
.po-reveal[data-delay="1"] { transition-delay: 80ms; }
.po-reveal[data-delay="2"] { transition-delay: 160ms; }
.po-reveal[data-delay="3"] { transition-delay: 240ms; }
.po-reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .po-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Marketing nav ────────────────────────────────────────── */
.po-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 0.5px solid transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.po-nav.is-stuck { border-bottom-color: var(--payoff-border-2); }
.po-nav__inner {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
}
.po-nav__links { display: flex; gap: 30px; align-items: center; }
.po-nav__link {
  font-size: 14.5px; font-weight: 500; color: var(--payoff-text-2);
  text-decoration: none; transition: color 140ms ease;
}
.po-nav__link:hover { color: var(--payoff-text); }
@media (max-width: 860px) {
  .po-nav__links .po-nav__link { display: none; }
}

/* ── Tag / pill ───────────────────────────────────────────── */
.po-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--payoff-sage-bg); color: var(--payoff-sage-deep);
  white-space: nowrap;
}
.po-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--payoff-sage); }
.po-tag--amber { background: var(--payoff-amber-bg); color: var(--payoff-amber-deep); }
.po-tag--amber .po-tag__dot { background: var(--payoff-amber); }

/* ── Utility ──────────────────────────────────────────────── */
.po-mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.po-divider { height: 0.5px; background: var(--payoff-border); border: 0; }
.po-italic-sage { font-style: italic; color: var(--payoff-sage-deep); }

/* Hide scrollbar but keep scroll */
.po-noscroll::-webkit-scrollbar { width: 0; height: 0; }
.po-noscroll { scrollbar-width: none; }