/* ==========================================================================
   2. Base
   ========================================================================== */

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

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--surface-invert-deep);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:1.03rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3 {
  margin:0 0 0.6em;
  font-family:var(--font-display);
  color:var(--text-strong);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.01em;
}

h1 { font-size:var(--step-hero); }
h2 { font-size:var(--step-h2); }
h3 { font-size:var(--step-h3); }

p { margin:0 0 1rem; }
p:last-child { margin-bottom:0; }

a { color:var(--ppe-magenta); }

img { max-width:100%; height:auto; display:block; }

ul, ol { margin:0 0 1rem; padding-left:1.1rem; }

.shell {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section-heading { max-width:48rem; margin-bottom:2.5rem; }
.section-intro { font-size:var(--step-lede); color:var(--text-muted); }

.eyebrow {
  margin:0 0 0.5rem;
  font-family:var(--font-display);
  font-size:var(--step-small);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ppe-magenta);
}

.lede { font-size:var(--step-lede); }

.placeholder {
  font-size:var(--step-small);
  font-weight:700;
  color:var(--text-muted);
  text-align:center;
  padding:0.5rem;
}

.sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }

.icon { width:1.15rem; height:1.15rem; flex:none; }

.skip-link {
  position:absolute;
  left:50%;
  top:-4rem;
  transform:translateX(-50%);
  z-index:100;
  padding:0.7rem 1.2rem;
  background:var(--ppe-gold);
  color:var(--ppe-navy-deep);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-weight:800;
  text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:0; }

:focus-visible {
  outline:3px solid var(--ppe-gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   14. Motion
   ========================================================================== */

.js-motion .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-motion .reveal.is-in { opacity:1; transform:none; }

.js-motion .steps .reveal.is-in { transition-delay:calc(var(--i, 0) * 70ms); }

.js-motion .reveal .price-badge {
  transform:rotate(-30deg) scale(0);
  transition:transform var(--dur-slow) var(--ease-pop);
}
.js-motion .reveal.is-in .price-badge {
  transform:rotate(12deg);
  transition-delay:var(--dur-slow);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,
  *::before,
  *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .btn:hover,
  .social-links a:hover { transform:none; }
  .marquee-track { animation:none; }
}

/* ==========================================================================
   15. Breakpoints
   ========================================================================== */

@media (min-width:640px) {
  :root { --gutter:1.75rem; --section-y:4.5rem; --band-arc:38px; --letter-scale:1.15; }
}

@media (min-width:900px) {
  :root { --gutter:2rem; --section-y:5.5rem; --band-arc:50px; --letter-scale:1.35; }
}

@media (min-width:1200px) {
  :root { --container:1200px; }
}