/* ==========================================================================
   Waypoint — waypointdrive.app
   Design tokens mirror the iOS app's WaypointCanvas system.
   Layer order: fonts → tokens → reset → type → layout → components → utils
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Role colours — stable across themes (from WaypointCanvas) */
  --wp-teal: #157A6B;
  --wp-teal-deep: #0F5A4E;
  --wp-teal-light: #36C7AC;
  --wp-coral: #FF6B5C;
  --wp-coral-deep: #E2503F;
  --wp-sky: #5CB8E4;
  --wp-sky-deep: #3E97C4;
  --wp-green: #2FA876;
  --wp-green-deep: #1E8A5E;
  --wp-sun: #FFC44D;
  --wp-sun-deep: #E0A02A;
  --wp-sun-ink: #3A2A00;

  /* Dark-hero specifics (onboarding / paywall / Pit Stop surfaces) */
  --wp-hero-base: #0F5A4E;
  --wp-hero-glow: #1C7A66;
  --wp-hero-grad-top: #1E8676;
  --wp-on-teal-soft: #EAF4F1;

  /* Light surfaces */
  --wp-bg: #F4F1EA;
  --wp-card: #FFFFFF;
  --wp-card-alt: #FBFAF5;
  --wp-ink: #1C2A28;
  /* Web-only: darker than the app's #6E7A76, which fails AA at body size */
  --wp-muted: #5C6A66;
  --wp-muted-lg: #6E7A76;
  --wp-line: rgba(20, 40, 36, .10);
  --wp-faint: rgba(20, 40, 36, .05);
  --wp-shadow: rgba(20, 40, 36, .07);
  --wp-shadow-lift: rgba(20, 40, 36, .12);

  /* Translucent-white scale used on dark surfaces */
  --wp-on-dark-14: rgba(255, 255, 255, .14);
  --wp-on-dark-16: rgba(255, 255, 255, .16);
  --wp-on-dark-18: rgba(255, 255, 255, .18);
  --wp-on-dark-28: rgba(255, 255, 255, .28);
  --wp-on-dark-50: rgba(255, 255, 255, .50);

  /* Shape */
  --wp-r-chip: 12px;
  --wp-r-pill: 14px;
  --wp-r-card: 20px;
  --wp-r-cta: 18px;
  --wp-r-panel: 24px;
  --wp-r-full: 999px;

  /* Layout */
  --wp-container: 1120px;
  --wp-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --wp-section-y: clamp(4rem, 10vw, 7.5rem);
  --wp-header-h: 68px;

  /* Motion */
  --wp-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --wp-bg: #0D1714;
    --wp-card: #16221D;
    --wp-card-alt: #1B2922;
    --wp-ink: #EAF1EC;
    --wp-muted: #8AA399;
    --wp-muted-lg: #8AA399;
    --wp-line: rgba(255, 255, 255, .10);
    --wp-faint: rgba(255, 255, 255, .05);
    --wp-shadow: rgba(0, 0, 0, .40);
    --wp-shadow-lift: rgba(0, 0, 0, .55);
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp-header-h) + 1rem);
  /* Safety net against sideways scroll. `clip` rather than `hidden` so it
     doesn't turn the root into a scroll container (which breaks sticky). */
  overflow-x: clip;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wp-ink);
  background: var(--wp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--wp-teal-light);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.wp-h1 { font-size: clamp(2.15rem, 5.4vw, 3.4rem); }
.wp-h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); letter-spacing: -.015em; }
.wp-h3 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); letter-spacing: -.01em; }
.wp-h4 { font-size: 1.125rem; letter-spacing: -.005em; }

.wp-lead {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

.wp-body-muted { color: var(--wp-muted); }

.wp-small {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--wp-muted);
}

.wp-num {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

/* Eyebrow / pill label — the app's signature uppercase tracked chip */
.wp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: var(--wp-r-full);
  background: var(--wp-faint);
  color: var(--wp-teal);
}
.wp-eyebrow svg { width: 14px; height: 14px; flex: none; }

.on-dark .wp-eyebrow,
.wp-dark .wp-eyebrow {
  background: var(--wp-on-dark-18);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.wp-container {
  width: 100%;
  max-width: var(--wp-container);
  margin-inline: auto;
  padding-inline: var(--wp-gutter);
}
.wp-container--narrow { max-width: 780px; }
.wp-container--prose { max-width: 74ch; }

.wp-section { padding-block: var(--wp-section-y); }
.wp-section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

/* Deep-teal immersive surface — mirrors onboarding / paywall / Pit Stop */
.wp-dark {
  position: relative;
  background: var(--wp-hero-base);
  color: #fff;
  isolation: isolate;
}
.wp-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, var(--wp-hero-glow) 0%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}
.wp-dark .wp-body-muted,
.wp-dark .wp-small { color: rgba(255, 255, 255, .78); }

.wp-alt { background: var(--wp-card-alt); }

.wp-stack > * + * { margin-top: var(--flow, 1rem); }
.wp-center { text-align: center; }
.wp-center .wp-lead { margin-inline: auto; max-width: 62ch; }

.wp-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .wp-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .wp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.wp-section-head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.wp-section-head .wp-eyebrow { margin-bottom: 1rem; }
.wp-section-head .wp-lead { margin-top: .875rem; color: var(--wp-muted); }
.wp-dark .wp-section-head .wp-lead { color: rgba(255, 255, 255, .82); }
/* Both forms: .wp-center on an ancestor, or on the section head itself.
   Without the second selector the 42rem block stays left-aligned and only its
   text centres — which reads as off-centre on wide screens but looks fine on
   mobile, where the block fills the width anyway. */
.wp-center .wp-section-head,
.wp-section-head.wp-center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.wp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 1rem 1.75rem;
  border-radius: var(--wp-r-cta);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: transform .18s var(--wp-ease), box-shadow .18s var(--wp-ease),
              background-color .18s var(--wp-ease);
  will-change: transform;
}
.wp-cta svg { width: 18px; height: 18px; flex: none; }

.wp-cta--sun {
  background: var(--wp-sun);
  color: var(--wp-sun-ink);
  box-shadow: 0 6px 16px rgba(255, 196, 77, .28);
}
.wp-cta--sun:hover { background: #FFD070; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 196, 77, .34); }
.wp-cta--sun:active { transform: translateY(0); }

.wp-cta--teal {
  background: var(--wp-teal-deep);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 90, 78, .22);
}
.wp-cta--teal:hover { background: var(--wp-teal); transform: translateY(-2px); }

.wp-cta--ghost {
  background: var(--wp-on-dark-18);
  color: #fff;
  border: 1px solid var(--wp-on-dark-28);
}
.wp-cta--ghost:hover { background: var(--wp-on-dark-28); }

.wp-cta--block { display: flex; width: 100%; }

.wp-link {
  color: var(--wp-teal);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.wp-dark .wp-link { color: var(--wp-sun); }
.wp-link:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.wp-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--wp-header-h);
  display: flex;
  align-items: center;
  transition: background-color .25s var(--wp-ease), box-shadow .25s var(--wp-ease),
              border-color .25s var(--wp-ease);
  border-bottom: 1px solid transparent;
}
.wp-header.is-stuck {
  background: color-mix(in srgb, var(--wp-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--wp-line);
}
/* Over a dark hero, before scroll: force light-on-dark */
.wp-header--over-dark:not(.is-stuck) { color: #fff; }
.wp-header--over-dark:not(.is-stuck) .wp-wordmark { color: #fff; }

.wp-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.wp-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  margin-right: auto;
}
.wp-brand__tile {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--wp-teal-deep);
  display: grid;
  place-items: center;
  flex: none;
}
.wp-brand__tile svg { width: 17px; height: 17px; }
.wp-wordmark {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wp-nav { display: none; align-items: center; gap: 1.75rem; }
.wp-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  opacity: .82;
  transition: opacity .15s var(--wp-ease);
}
.wp-nav a:hover { opacity: 1; }

.wp-header .wp-cta { padding: .625rem 1.125rem; font-size: .9375rem; border-radius: 12px; }
/* On the narrowest phones the header CTA and burger crowd the wordmark.
   The drawer carries the same CTA, so drop it from the bar. */
@media (max-width: 419px) { .wp-header .wp-cta { display: none; } }

.wp-burger {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--wp-line);
}
.wp-header--over-dark:not(.is-stuck) .wp-burger { border-color: var(--wp-on-dark-28); }
.wp-burger svg { width: 20px; height: 20px; }

@media (min-width: 900px) {
  .wp-nav { display: flex; }
  .wp-burger { display: none; }
}

/* Mobile drawer */
.wp-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--wp-bg);
  padding: 1.25rem var(--wp-gutter) 2rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--wp-ease), transform .22s var(--wp-ease), visibility .22s;
}
.wp-drawer[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
.wp-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.wp-drawer__close { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--wp-line); }
.wp-drawer__close svg { width: 20px; height: 20px; }
.wp-drawer nav { display: flex; flex-direction: column; gap: .25rem; margin-top: 2rem; }
.wp-drawer nav a {
  text-decoration: none;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.015em;
  padding: .75rem 0;
  border-bottom: 1px solid var(--wp-line);
}
.wp-drawer .wp-cta { margin-top: auto; }
@media (min-width: 900px) { .wp-drawer { display: none; } }

.wp-skip {
  position: absolute;
  left: -9999px;
  top: .5rem;
  z-index: 300;
  background: var(--wp-card);
  color: var(--wp-ink);
  padding: .75rem 1.25rem;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--wp-shadow-lift);
}
.wp-skip:focus { left: var(--wp-gutter); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.wp-hero {
  position: relative;
  padding-top: calc(var(--wp-header-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
}
.wp-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .wp-hero__grid { grid-template-columns: 1.05fr .95fr; }
}
.wp-hero h1 { margin-top: 1.25rem; }
.wp-hero h1 .accent { color: var(--wp-sun); }
.wp-hero .wp-lead { margin-top: 1.25rem; max-width: 34rem; color: rgba(255, 255, 255, .86); }
.wp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}
.wp-hero__note { margin-top: 1.25rem; color: rgba(255, 255, 255, .7); }

/* Route spine artwork */
.wp-route { position: relative; }
.wp-route svg { width: 100%; height: auto; overflow: visible; }

/* Dashed centre line. Kept on its own class so the draw-on animation below
   (which overrides stroke-dasharray) can't flatten the dashes. */
.wp-route .road-line {
  stroke-dasharray: 14 12;
  animation: wp-road-flow 1.6s linear infinite;
}
@keyframes wp-road-flow { to { stroke-dashoffset: -26; } }

/* fill-box is required or SVG scale() pivots on the viewBox origin, not the pin */
.wp-route .pin { transform-origin: center; transform-box: fill-box; }
.js-anim .wp-route .pin { opacity: 0; transform: scale(.6); }
.js-anim .wp-route.is-in .pin { animation: wp-pin-pop .5s var(--wp-ease) forwards; }
.js-anim .wp-route.is-in .pin:nth-of-type(1) { animation-delay: .9s; }
.js-anim .wp-route.is-in .pin:nth-of-type(2) { animation-delay: 1.05s; }
.js-anim .wp-route.is-in .pin:nth-of-type(3) { animation-delay: 1.2s; }
.js-anim .wp-route.is-in .pin:nth-of-type(4) { animation-delay: 1.35s; }
@keyframes wp-pin-pop { to { opacity: 1; transform: scale(1); } }

/* Draw-on applies to the asphalt base only */
.js-anim .wp-route .road-base { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.js-anim .wp-route.is-in .road-base { animation: wp-draw 1.4s var(--wp-ease) forwards; }
@keyframes wp-draw { to { stroke-dashoffset: 0; } }

/* Centre line fades in once the road is drawn */
.js-anim .wp-route .road-line { opacity: 0; }
.js-anim .wp-route.is-in .road-line {
  animation: wp-road-flow 1.6s linear infinite,
             wp-fade-in .5s var(--wp-ease) .95s forwards;
}
@keyframes wp-fade-in { to { opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .wp-route .road-line { animation: none; opacity: .85; }
  .js-anim .wp-route .road-line { opacity: .85; animation: none; }
  .js-anim .wp-route .pin { opacity: 1; transform: none; }
  .js-anim .wp-route .road-base { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Trust strip under hero */
.wp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2.5rem;
  padding: 1.75rem 0 0;
  list-style: none;
  border-top: 1px solid var(--wp-on-dark-18);
}
.wp-trust li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  list-style: none;
}
.wp-trust svg { width: 16px; height: 16px; color: var(--wp-sun); flex: none; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.wp-card {
  background: var(--wp-card);
  border-radius: var(--wp-r-card);
  padding: clamp(1.35rem, 3vw, 1.75rem);
  box-shadow: 0 2px 10px var(--wp-shadow);
  border: 1px solid var(--wp-line);
}
.wp-dark .wp-card {
  background: var(--wp-on-dark-14);
  border-color: var(--wp-on-dark-28);
  box-shadow: none;
  color: #fff;
}

/* Icon tile — rounded square with role-coloured glyph */
.wp-tile {
  width: 46px; height: 46px;
  border-radius: var(--wp-r-chip);
  display: grid;
  place-items: center;
  flex: none;
  margin-bottom: 1.125rem;
}
.wp-tile svg { width: 22px; height: 22px; }
.wp-tile--teal  { background: color-mix(in srgb, var(--wp-teal) 12%, transparent);  color: var(--wp-teal); }
.wp-tile--coral { background: color-mix(in srgb, var(--wp-coral) 14%, transparent); color: var(--wp-coral-deep); }
.wp-tile--sky   { background: color-mix(in srgb, var(--wp-sky) 16%, transparent);   color: var(--wp-sky-deep); }
.wp-tile--green { background: color-mix(in srgb, var(--wp-green) 13%, transparent); color: var(--wp-green-deep); }
.wp-tile--sun   { background: color-mix(in srgb, var(--wp-sun) 20%, transparent);   color: var(--wp-sun-deep); }
.wp-dark .wp-tile { background: var(--wp-on-dark-16); color: var(--wp-sun); }

.wp-card h3 { margin-bottom: .5rem; }
.wp-card p { color: var(--wp-muted); font-size: .9688rem; }
.wp-dark .wp-card p { color: rgba(255, 255, 255, .8); }

/* Left-accent card — mirrors the app's quiz cards */
.wp-feature {
  position: relative;
  overflow: hidden;
  padding-left: clamp(1.5rem, 3vw, 1.9rem);
}
.wp-feature::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, var(--wp-teal));
}
.wp-feature--teal  { --accent: var(--wp-teal); }
.wp-feature--coral { --accent: var(--wp-coral); }
.wp-feature--sky   { --accent: var(--wp-sky); }
.wp-feature--green { --accent: var(--wp-green); }
.wp-feature--sun   { --accent: var(--wp-sun); }

.wp-feature__meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent, var(--wp-teal));
  margin-bottom: .625rem;
}

/* Step list with connecting spine.
   list-style/padding reset matters: the numbers come from the counter on
   .wp-step__num, so native <ol> markers would double them up. */
.wp-steps {
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 900px) { .wp-steps { grid-template-columns: repeat(4, 1fr); } }
.wp-step { position: relative; }
.wp-step__num {
  counter-increment: step;
  width: 38px; height: 38px;
  border-radius: var(--wp-r-full);
  background: var(--wp-teal-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9375rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.wp-step__num::after { content: counter(step); }
@media (min-width: 900px) {
  .wp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 19px; left: 38px; right: -1.25rem;
    border-top: 2px dashed var(--wp-line);
  }
}
.wp-step h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.wp-step p { color: var(--wp-muted); font-size: .9375rem; }

/* Stat block */
.wp-stat { text-align: center; }
.wp-stat .wp-num { color: var(--wp-teal); }
.wp-dark .wp-stat .wp-num { color: var(--wp-sun); }
.wp-stat p {
  font-size: .875rem;
  font-weight: 600;
  color: var(--wp-muted);
  margin-top: .375rem;
}
.wp-dark .wp-stat p { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   10a. Pit Stop simulator — walks the whole loop: locked app → shield →
        notification → three questions → unlocked. Mirrors the real flow.
   -------------------------------------------------------------------------- */
/* Roughly phone-proportioned (~1:2) — at 390x640 it read as a squat tablet. */
.wp-sim {
  position: relative;
  width: 100%;
  max-width: 328px;
  margin-inline: auto;
  background: #0B463C;
  border: 1px solid var(--wp-on-dark-28);
  border-radius: 32px;
  padding: 1.125rem;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .34);
}
@media (max-width: 420px) { .wp-sim { min-height: 590px; border-radius: 26px; padding: 1rem; } }

/* flex-basis auto (not 0) so a tall stage grows the frame past its min-height
   instead of being clipped by overflow:hidden — the question card is taller
   than 600px on narrow screens. */
.wp-sim__stage { display: none; flex: 1 0 auto; flex-direction: column; }
.wp-sim__stage.is-active { display: flex; animation: wp-stage-in .34s var(--wp-ease) both; }
@keyframes wp-stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wp-sim__eyebrow {
  display: block;
  text-align: center;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 1rem;
}

/* Progress dots across the three questions */
.wp-sim__dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 1rem; }
.wp-sim__dots span {
  width: 26px; height: 4px;
  border-radius: 99px;
  background: var(--wp-on-dark-28);
  transition: background-color .25s var(--wp-ease);
}
.wp-sim__dots span.is-done { background: var(--wp-sun); }

/* --- Stage: home screen ------------------------------------------------- */
.wp-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem .5rem;
  margin: auto 0;
}
.wp-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  padding: 0;
}
.wp-app__tile {
  width: 58px; height: 58px;
  border-radius: 17px;
  background: var(--wp-on-dark-16);
  display: grid;
  place-items: center;
  transition: transform .18s var(--wp-ease);
}
.wp-app__tile svg { width: 27px; height: 27px; color: rgba(255, 255, 255, .6); }
.wp-app span { font-size: .6875rem; font-weight: 600; color: rgba(255, 255, 255, .62); }

button.wp-app { cursor: pointer; }
button.wp-app:hover .wp-app__tile { transform: scale(1.06); }
.wp-app--target .wp-app__tile {
  background: var(--wp-coral);
  animation: wp-app-pulse 2.2s ease-out infinite;
}
.wp-app--target .wp-app__tile svg { color: #fff; }
.wp-app--target span { color: #fff; font-weight: 800; }
@keyframes wp-app-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 92, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 107, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 92, 0); }
}
@media (prefers-reduced-motion: reduce) { .wp-app--target .wp-app__tile { animation: none; } }

.wp-sim__foot {
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
  margin-top: 1.25rem;
}

/* --- Stage: shield + notification --------------------------------------- */
.wp-notif {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .96);
  color: #1C2A28;
  border-radius: 17px;
  padding: .75rem .875rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  cursor: pointer;
  animation: wp-notif-drop .45s var(--wp-ease) both;
}
@keyframes wp-notif-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.wp-notif__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--wp-teal-deep);
  display: grid; place-items: center; flex: none;
}
.wp-notif__icon svg { width: 17px; height: 17px; }
.wp-notif strong { display: block; font-size: .8125rem; font-weight: 800; }
.wp-notif small { font-size: .75rem; color: var(--wp-muted); }
.wp-notif__now { margin-left: auto; font-size: .6875rem; color: var(--wp-muted); font-weight: 600; flex: none; }

.wp-sim__shield { margin: auto 0; text-align: center; }
.wp-sim__shield-mark {
  width: 84px; height: 84px;
  margin: 0 auto 1.5rem;
  border-radius: 26px;
  background: var(--wp-on-dark-16);
  display: grid; place-items: center;
}
.wp-sim__shield-mark svg { width: 40px; height: 40px; color: #fff; }
.wp-sim__shield h3 { font-size: 1.5rem; color: #fff; margin-bottom: .5rem; }
.wp-sim__shield p { font-size: .9375rem; color: rgba(255, 255, 255, .74); }

/* --- Stage: white cards (question + success) ---------------------------- */
.wp-sim__card {
  /* Always the light palette, like the real in-app card on teal */
  --wp-ink: #1C2A28;
  --wp-muted: #5C6A66;
  --wp-card-alt: #FBFAF5;
  background: #fff;
  color: var(--wp-ink);
  border-radius: 22px;
  padding: 1.125rem;
  margin: auto 0;
}

.wp-sim__q {
  background: var(--wp-card-alt);
  border-radius: 15px;
  padding: 1.125rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: .875rem;
}
.wp-sim__meta {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp-muted);
  margin-bottom: .75rem;
}
.wp-sim__meta .tag { color: var(--wp-coral-deep); }

/* --- Stage: success ------------------------------------------------------ */
.wp-sim__win { text-align: center; }
.wp-sim__tick {
  width: 76px; height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--wp-green);
  display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(47, 168, 118, .16);
  animation: wp-tick-in .45s var(--wp-ease) both;
}
@keyframes wp-tick-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.wp-sim__tick svg { width: 36px; height: 36px; color: #fff; }
.wp-sim__win .label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wp-green-deep);
}
.wp-sim__win h3 { font-size: 1.875rem; margin: .375rem 0 .5rem; }
.wp-sim__win .sub { font-size: .9375rem; color: var(--wp-muted); }
.wp-sim__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.25rem;
}
.wp-sim__tiles div {
  background: var(--wp-card-alt);
  border-radius: 14px;
  padding: .75rem .375rem;
}
.wp-sim__tiles b { display: block; font-size: 1.0625rem; font-weight: 800; }
.wp-sim__tiles small { font-size: .625rem; font-weight: 600; color: var(--wp-muted); line-height: 1.3; display: block; margin-top: 2px; }
.wp-sim__win .note {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 40, 36, .1);
  font-size: .8125rem;
  color: var(--wp-muted);
  line-height: 1.5;
}

.wp-sim__restart {
  display: block;
  margin: 1rem auto 0;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wp-sim__restart:hover { color: #fff; }

/* --------------------------------------------------------------------------
   10b. Shared answer-option styling (used by the simulator)
   -------------------------------------------------------------------------- */
.wp-demo {
  max-width: 34rem;
  margin-inline: auto;
}
.wp-demo__frame {
  /* The in-app Pit Stop card is always a white card on deep teal, in both
     appearances. Re-declaring the surface tokens locally keeps every child
     on the light palette even when the site is in dark mode. */
  --wp-ink: #1C2A28;
  --wp-muted: #5C6A66;
  --wp-card-alt: #FBFAF5;
  --wp-line: rgba(20, 40, 36, .10);
  --wp-faint: rgba(20, 40, 36, .05);

  background: #fff;
  border-radius: var(--wp-r-panel);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  color: var(--wp-ink);
}
.wp-demo__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.wp-demo__shield {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--wp-sun) 22%, transparent);
  color: var(--wp-sun-deep);
  display: grid; place-items: center; flex: none;
}
.wp-demo__shield svg { width: 19px; height: 19px; }
.wp-demo__bar strong { font-size: .9375rem; font-weight: 800; display: block; }
.wp-demo__bar span { font-size: .75rem; color: var(--wp-muted); font-weight: 600; }

.wp-demo__q {
  background: var(--wp-card-alt);
  border-radius: 16px;
  padding: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: 1rem;
}
.wp-demo__id {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp-muted);
  margin-bottom: .75rem;
}
.wp-demo__id .tag { color: var(--wp-coral); }

.wp-demo__opts { display: grid; gap: .5rem; }
.wp-opt {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  text-align: left;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--wp-card-alt);
  border: 1.5px solid transparent;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  transition: background-color .15s var(--wp-ease), border-color .15s var(--wp-ease);
}
.wp-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--wp-teal) 6%, var(--wp-card-alt)); }
.wp-opt__letter {
  width: 24px; height: 24px;
  border-radius: var(--wp-r-full);
  background: rgba(20, 40, 36, .07);
  display: grid; place-items: center;
  font-size: .75rem;
  font-weight: 800;
  flex: none;
}
.wp-opt[aria-pressed='true'] {
  border-color: var(--wp-teal);
  background: color-mix(in srgb, var(--wp-teal) 8%, var(--wp-card-alt));
}
.wp-opt[aria-pressed='true'] .wp-opt__letter { background: var(--wp-teal); color: #fff; }
.wp-opt.is-correct {
  border-color: var(--wp-green);
  background: color-mix(in srgb, var(--wp-green) 12%, #fff);
}
.wp-opt.is-correct .wp-opt__letter { background: var(--wp-green); color: #fff; }
.wp-opt.is-wrong {
  border-color: var(--wp-coral);
  background: color-mix(in srgb, var(--wp-coral) 10%, #fff);
}
.wp-opt.is-wrong .wp-opt__letter { background: var(--wp-coral); color: #fff; }
.wp-opt:disabled { cursor: default; }

.wp-demo__cta { margin-top: 1rem; }
.wp-demo__cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.wp-demo__result {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 16px;
  background: var(--wp-card-alt);
  font-size: .9375rem;
  line-height: 1.55;
}
.wp-demo__result[hidden] { display: none; }
.wp-demo__result strong { display: block; font-weight: 800; margin-bottom: .25rem; }
.wp-demo__result.is-correct { background: color-mix(in srgb, var(--wp-green) 12%, #fff); }
.wp-demo__result.is-correct strong { color: var(--wp-green-deep); }
.wp-demo__result.is-wrong { background: color-mix(in srgb, var(--wp-coral) 10%, #fff); }
.wp-demo__result.is-wrong strong { color: var(--wp-coral-deep); }

.wp-demo__foot {
  text-align: center;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */
.wp-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--wp-r-full);
  background: var(--wp-faint);
  border: 1px solid var(--wp-line);
  margin-bottom: 2rem;
}
.wp-switch button {
  padding: .5rem 1.25rem;
  border-radius: var(--wp-r-full);
  font-weight: 800;
  font-size: .875rem;
  color: var(--wp-muted);
  transition: background-color .18s var(--wp-ease), color .18s var(--wp-ease);
}
.wp-switch button[aria-selected='true'] {
  background: var(--wp-card);
  color: var(--wp-ink);
  box-shadow: 0 1px 4px var(--wp-shadow);
}

/* On teal sections the selected pill goes white with dark ink, matching the
   app's selected plan card. */
.wp-dark .wp-switch {
  background: var(--wp-on-dark-14);
  border-color: var(--wp-on-dark-28);
}
.wp-dark .wp-switch button { color: rgba(255, 255, 255, .72); }
.wp-dark .wp-switch button[aria-selected='true'] {
  background: #fff;
  color: #1C2A28;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.wp-price {
  max-width: 27rem;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.wp-price__badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--wp-sun);
  color: var(--wp-sun-ink);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--wp-r-full);
  white-space: nowrap;
}
.wp-price .amount {
  font-size: clamp(2.5rem, 7vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.wp-price .period { font-size: 1rem; font-weight: 600; color: var(--wp-muted); }
.wp-price__list {
  text-align: left;
  display: grid;
  gap: .625rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.wp-price__list li {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  font-size: .9375rem;
  list-style: none;
}
.wp-price__list svg { width: 18px; height: 18px; color: var(--wp-green); flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. Screenshot gallery
   -------------------------------------------------------------------------- */
.wp-shots {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: .5rem 1.5rem;
  padding-inline: var(--wp-gutter);
  margin-inline: calc(var(--wp-gutter) * -1);
  scrollbar-width: thin;
}
.wp-shots::-webkit-scrollbar { height: 6px; }
.wp-shots::-webkit-scrollbar-thumb { background: var(--wp-line); border-radius: 99px; }
.wp-shot {
  scroll-snap-align: center;
  flex: 0 0 clamp(215px, 62vw, 260px);
}
.wp-shot img {
  width: 100%;
  border-radius: 26px;
  border: 1px solid var(--wp-line);
  box-shadow: 0 12px 32px var(--wp-shadow-lift);
  background: var(--wp-card);
}
.wp-shot figcaption {
  margin-top: .875rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 700;
}
.wp-shot small { display: block; font-weight: 500; color: var(--wp-muted); font-size: .8125rem; }

/* Placeholder while real screenshots are pending */
.wp-shot__ph {
  aspect-ratio: 9 / 19.5;
  border-radius: 26px;
  border: 1px dashed var(--wp-line);
  background: var(--wp-card-alt);
  display: grid;
  place-items: center;
  color: var(--wp-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.wp-faq { display: grid; gap: .625rem; max-width: 48rem; margin-inline: auto; }
.wp-faq details {
  background: var(--wp-card);
  border: 1px solid var(--wp-line);
  border-radius: 16px;
  overflow: hidden;
}
.wp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.wp-faq summary::-webkit-details-marker { display: none; }
.wp-faq summary::after {
  content: '';
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--wp-muted);
  border-bottom: 2.5px solid var(--wp-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
  transition: transform .2s var(--wp-ease);
}
.wp-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.wp-faq details[open] summary { padding-bottom: .5rem; }
.wp-faq .answer { padding: 0 1.25rem 1.25rem; color: var(--wp-muted); }
.wp-faq .answer p + p { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   14. Independence notice
   -------------------------------------------------------------------------- */
.wp-notice {
  border-radius: var(--wp-r-panel);
  border: 1px solid var(--wp-line);
  background: var(--wp-card-alt);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 52rem;
  margin-inline: auto;
}
.wp-notice h2 { font-size: 1.25rem; margin-bottom: .875rem; }
.wp-notice p { color: var(--wp-muted); font-size: .9375rem; }
.wp-notice p + p { margin-top: .75rem; }
.wp-notice__ogl {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp-line);
  font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.wp-footer {
  background: var(--wp-hero-base);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
}
.wp-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--wp-on-dark-18);
}
@media (min-width: 760px) {
  .wp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.wp-footer .wp-wordmark { color: #fff; }
.wp-footer__blurb { color: rgba(255, 255, 255, .72); font-size: .9375rem; margin-top: 1rem; max-width: 30rem; }
.wp-footer h3 {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 1rem;
}
.wp-footer nav { display: grid; gap: .625rem; }
.wp-footer nav a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}
.wp-footer nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wp-footer__base {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}
.wp-footer__legal { max-width: 46rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   16. Prose (legal pages)
   -------------------------------------------------------------------------- */
.wp-doc {
  padding-top: calc(var(--wp-header-h) + clamp(2.5rem, 6vw, 4rem));
  /* Breathing room before the footer's teal band starts */
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.wp-doc__head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.wp-doc__head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.wp-doc__stamp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--wp-muted);
  background: var(--wp-faint);
  padding: .375rem .875rem;
  border-radius: var(--wp-r-full);
}

.wp-doc__layout { display: block; }
@media (min-width: 1080px) {
  .wp-doc__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}
.wp-toc {
  background: var(--wp-card);
  border: 1px solid var(--wp-line);
  border-radius: 16px;
  padding: 1rem 1.125rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 1080px) {
  .wp-toc { position: sticky; top: calc(var(--wp-header-h) + 1.5rem); margin-bottom: 0; }
}
.wp-toc summary, .wp-toc__title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-muted);
  cursor: pointer;
  list-style: none;
}
.wp-toc summary::-webkit-details-marker { display: none; }
.wp-toc ol { list-style: none; padding: 0; margin: .875rem 0 0; display: grid; gap: .5rem; counter-reset: toc; }
.wp-toc a {
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--wp-muted);
  line-height: 1.35;
  display: block;
}
.wp-toc a:hover { color: var(--wp-teal); }
@media (min-width: 1080px) { .wp-toc summary { pointer-events: none; } }

.wp-prose { max-width: 74ch; }
.wp-prose h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: .875rem;
  scroll-margin-top: calc(var(--wp-header-h) + 1.5rem);
}
.wp-prose h2:first-child { margin-top: 0; }
.wp-prose h3 {
  font-size: 1.125rem;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}
.wp-prose p, .wp-prose ul, .wp-prose ol, .wp-prose blockquote, .wp-prose table { margin-bottom: 1.125rem; }
.wp-prose ul, .wp-prose ol { padding-left: 1.375rem; }
.wp-prose li { margin-bottom: .5rem; }
.wp-prose li::marker { color: var(--wp-teal); }
.wp-prose a { color: var(--wp-teal); font-weight: 600; text-underline-offset: 3px; }
.wp-prose strong { font-weight: 800; }
.wp-prose blockquote {
  border-left: 3px solid var(--wp-teal);
  padding: .875rem 1.125rem;
  background: var(--wp-card-alt);
  border-radius: 0 12px 12px 0;
  color: var(--wp-muted);
  font-size: .9375rem;
}
.wp-prose blockquote p:last-child { margin-bottom: 0; }
.wp-prose hr { border: none; border-top: 1px solid var(--wp-line); margin: 2.5rem 0; }
.wp-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  display: block;
  overflow-x: auto;
}
.wp-prose th, .wp-prose td {
  text-align: left;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--wp-line);
  vertical-align: top;
}
.wp-prose th { font-weight: 800; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wp-muted); }
.wp-prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .875em;
  background: var(--wp-faint);
  padding: .15em .4em;
  border-radius: 5px;
}
.wp-prose .lead {
  font-size: 1.125rem;
  color: var(--wp-muted);
  font-weight: 500;
}

/* Contact card used on legal/support pages */
.wp-contact {
  background: var(--wp-card);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-card);
  padding: 1.5rem;
  margin-top: 2rem;
}
.wp-contact h3 { margin-top: 0; margin-bottom: .5rem; }
.wp-contact address { font-style: normal; color: var(--wp-muted); font-size: .9375rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--wp-ease), transform .6s var(--wp-ease);
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.wp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wp-mt-sm { margin-top: 1rem; }
.wp-mt-md { margin-top: 2rem; }
.wp-mt-lg { margin-top: 3rem; }
[hidden] { display: none !important; }