/* ===================================================================
   PAYMENT SUCCESS — STYLESHEET
   Part of the Consciousversity Funnel UI System.

   This file intentionally reuses the SAME design tokens (Section 1)
   as the Recovery Insights page, so any future funnel page (Welcome,
   Onboarding, Intake, Client Portal) can drop in this token block
   unchanged and feel like the same product.

   Mobile-first methodology:
   - Every base rule below targets the smallest (mobile) viewport.
   - Tablet/desktop refinements are layered on ONLY via min-width
     media queries further down the file.
   =================================================================== */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   Shared 1:1 with the Recovery Insights page. Keep this block
   identical across funnel pages — it is the system's source of
   truth for color, type, spacing, radius, shadow, and motion.
   ------------------------------------------------------------- */
:root {
  /* Color palette */
  --color-forest: #1B3A2E;
  --color-forest-deep: #102822;
  --color-warm-white: #FBF9F4;
  --color-beige: #EDE6D6;
  --color-beige-deep: #E2D8C2;
  --color-gold: #B8924A;
  --color-gold-bright: #CDA866;
  --color-gray: #6B7268;
  --color-ink: #1F2A24;

  /* Semantic aliases */
  --bg-page: var(--color-warm-white);
  --bg-tinted: var(--color-beige);
  --text-body: var(--color-ink);
  --text-muted: var(--color-gray);
  --accent: var(--color-gold);
  --brand: var(--color-forest);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (mobile base, rem) */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;

  /* Radii & shadow */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 8px 30px -8px rgba(16, 40, 34, 0.18);
  --shadow-card: 0 4px 18px -6px rgba(16, 40, 34, 0.12);

  /* Motion */
  --ease-calm: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* -------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-body);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
}

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

h1, h2, p { margin: 0; }

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

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   3. LAYOUT PRIMITIVES (mobile base)
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Funnel pages are single-column and intentionally narrower than
   the marketing site — there is nowhere else to look. */
.container--narrow { max-width: 100%; }

.section {
  padding: var(--space-2xl) 0;
}

.section--tinted { background: var(--bg-tinted); }

.section-head {
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* -------------------------------------------------------------
   4. TYPOGRAPHY (mobile base)
   ------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.2;
  color: var(--brand);
}

.display-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--brand);
}

.lede {
  margin-top: var(--space-sm);
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------
   5. LOADER (shared pattern with Recovery Insights)
   ------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background: var(--color-forest);
  z-index: 999;
  transition: opacity var(--dur-slow) var(--ease-calm);
}

.loader[data-hide] {
  opacity: 0;
  pointer-events: none;
}

.loader__ring {
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
}

.loader__ring-track {
  fill: none;
  stroke: rgba(251, 249, 244, 0.18);
  stroke-width: 3;
}

.loader__ring-progress {
  fill: none;
  stroke: var(--color-gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: loaderSpin 1.4s var(--ease-calm) forwards;
}

@keyframes loaderSpin {
  to { stroke-dashoffset: 30; }
}

.loader__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-beige);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .loader__ring-progress { animation: none; stroke-dashoffset: 60; }
}

/* -------------------------------------------------------------
   6. SCROLL REVEAL (shared pattern)
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-calm),
              transform var(--dur-slow) var(--ease-calm);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

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

/* -------------------------------------------------------------
   7. HERO — PAYMENT SUCCESSFUL
   ------------------------------------------------------------- */
.section--hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
  text-align: center;
}

.success-mark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.success-mark__svg { width: 64px; height: 64px; }

.success-mark__circle {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  animation: drawCircle 900ms var(--ease-calm) forwards 200ms;
}

.success-mark__check {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: drawCheck 500ms var(--ease-calm) forwards 1000ms;
}

@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* Slightly warmer "celebration" glow behind the mark — restrained,
   a single soft pulse, not confetti. This page's one accent. */
.success-mark--celebrate {
  position: relative;
}

.success-mark--celebrate::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,146,74,0.22) 0%, rgba(184,146,74,0) 70%);
  animation: celebrateGlow 2.2s var(--ease-calm) forwards;
}

@keyframes celebrateGlow {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .success-mark__circle, .success-mark__check { animation: none; stroke-dashoffset: 0; }
  .success-mark--celebrate::before { animation: none; opacity: 0; }
}

.section--hero .lede {
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-divider {
  width: 48px;
  height: 2px;
  background: var(--color-gold);
  margin: var(--space-lg) auto 0;
  border-radius: 2px;
  opacity: 0.6;
}

/* -------------------------------------------------------------
   8. NEXT STEP CARD (primary conversion component)
   ------------------------------------------------------------- */
.next-step-card {
  background: #fff;
  border: 1px solid rgba(27, 58, 46, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-md);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.next-step-card__body {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.next-step-card__during-label {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--brand);
}

.check-list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-body);
}

.check-list__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-beige);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 1px;
}

.next-step-card__helper {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------------
   9. BUTTONS (shared pattern with Recovery Insights)
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-calm),
              box-shadow var(--dur-fast) var(--ease-calm);
}

.btn--primary {
  background: var(--color-gold);
  color: var(--color-forest-deep);
  box-shadow: 0 10px 30px -10px rgba(184, 146, 74, 0.55);
  animation: ctaPulse 3.6s ease-in-out infinite;
}

.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--color-gold-bright);
}

.btn--block { width: 100%; }

.btn--lg {
  padding: 1.1rem 2.2rem;
  font-size: 1.02rem;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 30px -10px rgba(184, 146, 74, 0.55); }
  50% { box-shadow: 0 10px 36px -8px rgba(184, 146, 74, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary { animation: none; }
}

.btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: rippleAnim 600ms var(--ease-calm);
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

/* -------------------------------------------------------------
   10. TIMELINE — "WHAT HAPPENS AFTER BOOKING"
   ------------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 440px;
  margin: 0 auto;
}

.timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.timeline__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--color-warm-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__text {
  font-size: 0.96rem;
  color: var(--text-body);
  padding-top: 5px;
}

/* -------------------------------------------------------------
   11. INFO BOXES — REMINDER + SUPPORT
   ------------------------------------------------------------- */
.section--footer-info {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.info-box {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.info-box:last-child { margin-bottom: 0; }

.info-box--reminder {
  background: var(--color-beige);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: left;
}

.info-box--reminder .info-box__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.info-box--reminder .info-box__text {
  font-size: 0.92rem;
  color: var(--text-body);
}

.info-box--support {
  background: transparent;
  border: 1px solid rgba(27, 58, 46, 0.14);
  text-align: center;
}

.info-box__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--brand);
  margin-bottom: 6px;
}

.info-box--support .info-box__text {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 auto;
}

/* -------------------------------------------------------------
   12. MINIMAL CLOSE MARK
   Replaces a footer entirely. No links, no nav — just enough
   brand presence that the page doesn't feel cut off.
   ------------------------------------------------------------- */
.funnel-close-mark {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.6;
  padding: var(--space-lg) 0 var(--space-xl);
}

/* ===================================================================
   TABLET ENHANCEMENTS (≥600px)
   =================================================================== */
@media (min-width: 600px) {
  .container { max-width: 600px; padding: 0 var(--space-lg); }
  .container--narrow { max-width: 560px; }

  :root { --space-2xl: 6.5rem; }

  .next-step-card { padding: var(--space-2xl) var(--space-xl); }

  .btn--block { width: auto; min-width: 360px; }

  .timeline__item { padding: var(--space-lg); }
}

/* ===================================================================
   DESKTOP ENHANCEMENTS (≥1024px)
   =================================================================== */
@media (min-width: 1024px) {
  .container--narrow { max-width: 640px; }

  .display-xl { font-size: clamp(2.4rem, 3.6vw, 3rem); }
  .display-lg { font-size: clamp(2rem, 2.6vw, 2.4rem); }
  .display-md { font-size: 1.7rem; }
  .lede { font-size: 1.2rem; }

  .section--hero { padding-top: 6.5rem; }

  .next-step-card { padding: 4.5rem; }

  .timeline { max-width: 480px; }
}