/* ═══════════════════════════════════════════════════════
   PATHNUMBERS: COMPLETE NUMEROLOGY READING SALES PAGE
   Deep-space palette, gold accents, restrained and premium.
   Self-contained: every token used here is declared on
   .sales-page, so the sheet does not depend on load order.
═══════════════════════════════════════════════════════ */

.sales-page {
  --sp-card: rgba(20, 18, 58, 0.72);
  --sp-card-2: rgba(28, 24, 78, 0.5);
  --sp-border: rgba(139, 127, 217, 0.22);
  --sp-border-strong: rgba(139, 127, 217, 0.42);
  --sp-text-1: #FFFFFF;
  --sp-text-2: #D8D5F0;
  --sp-text-3: #A8A5C8;
  --sp-text-4: #7A7798;
  --sp-gold: #FFD93D;
  --sp-gold-2: #F9C846;
  --sp-purple: #B794F4;
  --sp-shell: 1120px;

  /* No background override. base.css paints the unified cosmic webp as a
     viewport-fixed body::before; any background here covers it and reads
     as a flat purple panel sitting on top of the site. */
  color: var(--sp-text-2);
  font-family: var(--font-secondary, 'Inter', sans-serif);
  overflow-x: hidden;
}

.sp-shell {
  max-width: var(--sp-shell);
  margin: 0 auto;
  padding: 0 20px;
}

.sp-section {
  padding: 56px 0;
  position: relative;
}

.sp-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 14px;
}

.sp-h2 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--sp-text-1);
  margin: 0 0 16px;
  text-wrap: balance;
}

.sp-lead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--sp-text-3);
  max-width: 68ch;
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* ── Hero ─────────────────────────────────────────── */

.sp-hero {
  padding: 40px 0 48px;
}

.sp-hero h1 {
  font-size: clamp(30px, 5.2vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--sp-text-1);
  margin: 0 0 18px;
  text-wrap: balance;
}

.sp-hero-sub {
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--sp-text-2);
  max-width: 60ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.sp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}

.sp-price-amount {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  color: var(--sp-gold);
  line-height: 1;
}

.sp-price-note {
  font-size: 15px;
  color: var(--sp-text-3);
}

.sp-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-facts li {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--sp-text-2);
  background: var(--sp-card-2);
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ── Buttons ──────────────────────────────────────── */

.sp-btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--sp-gold) 0%, var(--sp-gold-2) 100%);
  color: #1A1608;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 34px rgba(255, 217, 61, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
  text-align: center;
}

.sp-btn:hover,
.sp-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(255, 217, 61, 0.34);
  color: #1A1608;
}

.sp-btn-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-text-4);
  max-width: 52ch;
}

/* ── Chapter list ─────────────────────────────────── */

.sp-chapters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  counter-reset: sp-chapter;
}

.sp-chapters li {
  counter-increment: sp-chapter;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sp-text-2);
}

.sp-chapters li::before {
  content: counter(sp-chapter, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sp-gold);
}

/* ── Sample chapter ───────────────────────────────── */

.sp-sample {
  background: var(--sp-card);
  border: 1px solid var(--sp-border-strong);
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}

.sp-sample-caption {
  border-bottom: 1px solid var(--sp-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.sp-sample-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sp-text-1);
  margin: 0 0 8px;
}

.sp-sample-meta {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-text-4);
  margin: 0;
}

.sp-sample-body p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sp-text-2);
  margin: 0 0 1.2em;
  text-wrap: pretty;
}

.sp-sample-body p:last-child {
  margin-bottom: 0;
}

/* ── Steps ────────────────────────────────────────── */

.sp-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  counter-reset: sp-step;
}

.sp-steps li {
  counter-increment: sp-step;
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 20px;
}

.sp-steps li h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--sp-text-1);
  margin: 0 0 8px;
}

.sp-steps li h3::before {
  content: 'Step ' counter(sp-step) '. ';
  color: var(--sp-gold);
}

.sp-steps li p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sp-text-3);
  margin: 0;
}

/* ── Built-from panel ─────────────────────────────── */

.sp-panel {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  padding: 24px 20px;
}

.sp-panel h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--sp-text-1);
  margin: 0 0 10px;
}

.sp-panel p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sp-text-3);
  margin: 0 0 1.1em;
}

.sp-panel p:last-child {
  margin-bottom: 0;
}

/* ── FAQ ──────────────────────────────────────────── */

.sp-faq-list {
  display: grid;
  gap: 12px;
}

.sp-faq-item {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 20px;
}

.sp-faq-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--sp-text-1);
  margin: 0 0 10px;
}

.sp-faq-item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sp-text-3);
  margin: 0;
}

/* ── Final CTA ────────────────────────────────────── */

.sp-final {
  text-align: center;
  background: var(--sp-card-2);
  border: 1px solid var(--sp-border-strong);
  border-radius: 20px;
  padding: 36px 20px;
}

.sp-final .sp-lead {
  margin-left: auto;
  margin-right: auto;
}

.sp-final .sp-btn-note {
  margin-left: auto;
  margin-right: auto;
}

/* ── Disclaimer ───────────────────────────────────── */

.sp-disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: var(--sp-text-4);
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
  padding-bottom: 48px;
}

.sp-disclaimer a {
  color: var(--sp-text-3);
}

/* ── Larger screens ───────────────────────────────── */

@media (min-width: 720px) {
  .sp-shell { padding: 0 28px; }
  .sp-section { padding: 72px 0; }
  .sp-hero { padding: 56px 0 64px; }
  .sp-sample { padding: 36px 34px; }
  .sp-panel { padding: 32px 28px; }
  .sp-chapters { grid-template-columns: 1fr 1fr; }
  .sp-steps { grid-template-columns: 1fr 1fr; }
  .sp-final { padding: 48px 32px; }
}

@media (min-width: 1024px) {
  .sp-chapters li { font-size: 16px; }
  .sp-sample-body p { font-size: 17px; }
}