/* ─────────────────────────────────────────────────────────────────────────────
   Skill Forward — style guide v2.9 applied to the live site.
   Loads AFTER each page's own <style>, BEFORE nothing else. Every value comes
   from /assets/tokens.css (generated from design-system/tokens — never hand-type
   a value here). Pages carry a body class so each template's rules stay scoped:
   .page-home · .page-catalog · .page-detail · .page-about · .page-legal · .page-404
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. Every page ══════════════════════════════════════════════════════════ */

/* Focus: coral 700 on light (5.15 on cream), coral 300 on dark panels. */
:focus-visible { outline: var(--border-width-focus) solid var(--color-action-focus); outline-offset: 3px; }
.site-footer :focus-visible,
.bottom-cta :focus-visible,
.proof :focus-visible,
.belief :focus-visible { outline-color: var(--color-action-focus-on-dark); }

/* Nav */
nav.scrolled, #main-nav.scrolled { box-shadow: var(--shadow-2); }
.nav-cta { border-radius: var(--radius-control); }
.nav-cta:hover { background: var(--color-action-primary-hover); }
@media (pointer: coarse) { .nav-cta { min-height: var(--layout-tap-min); } }

/* Buttons: every corner 12, one primary padding */
.skip-link { border-radius: var(--radius-control); }
.btn-foot {
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
}
.btn-foot:hover { background: var(--color-action-primary-hover); }

/* Level badges: 12px semibold, sentence case (tiny caps read as an AI trope) */
.hero-badge, .buy-badge, .buybar-tier, .pb-badge {
  font-size: var(--type-badge-size);
  font-weight: var(--type-badge-weight);
  letter-spacing: var(--type-badge-tracking);
  text-transform: none;
  border-radius: var(--badge-tier-radius);
  padding: var(--badge-tier-padding-y) var(--badge-tier-padding-x);
}
.badge-expert, .pb-badge-expert { background: var(--color-tier-expert-bg); }

/* Pre-launch "coming soon" buttons: one disabled style */
[data-buy][aria-disabled="true"] {
  background: var(--color-state-disabled-bg) !important;
  color: var(--color-text-secondary) !important;
}
/* …and on dark bands (footer, bottom band), the same "coming soon" state flipped for plum.
   Was 8% charcoal on charcoal, nearly invisible (live site too). */
.site-footer [data-buy][aria-disabled="true"],
.bottom-cta [data-buy][aria-disabled="true"] {
  background: var(--color-border-inverse) !important;
  color: var(--color-text-inverse-muted) !important;
}



/* ═══ 2. Home ════════════════════════════════════════════════════════════════
   Same block Dan approved in design-system/preview/compare-home.html.       */
.page-home .topics-title,
.page-home .stories-title,
.page-home .journey-title,
.page-home .bottom h2 { font-size: var(--type-h2-size); }
.page-home .hero-full p { font-size: var(--type-lead-size); }
.page-home .cell-topic,
.page-home .jstep-tier,
.page-home .story-playbook { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
.page-home .photo-label-title,
.page-home .jstep-title { font-size: var(--type-title-size); }
.page-home .topic-chip { font-size: var(--type-chip-size); }
.page-home .btn-hero-soft,
.page-home .btn-bottom { border-radius: var(--radius-control); }
.page-home .btn-bottom:hover { background: var(--color-action-primary-hover); }
.page-home .topics-bento,
.page-home .hero-bento > div,
.page-home .stories-bento,
.page-home .bento-right { gap: var(--space-gap-grid) !important; }
.page-home .bcell-cream,
.page-home .bcell-stat[style*="white"] { box-shadow: var(--shadow-2) !important; border-color: var(--color-border-subtle) !important; }
.page-home .bcell-photo:hover img { transform: scale(var(--motion-scale-media)); }


/* ═══ 3. Catalog (/playbooks/) ═══════════════════════════════════════════════ */
.page-catalog .page-def { font-size: var(--type-lead-size); }
@media (max-width: 768px) { .page-catalog .page-def { font-size: var(--type-body-size); } }

/* Lanes: grid 16, label 12. Lane button = option A (see-through), compact size. */
.page-catalog .lanes-grid { gap: var(--space-gap-grid); }
.page-catalog .lane { border-radius: var(--radius-container); }
.page-catalog .lane-label { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
.page-catalog .lane-btn {
  font-size: var(--type-button-sm-size);
  border-radius: var(--button-on-color-radius);
  padding: var(--button-compact-padding-y) var(--button-compact-padding-x);
  min-height: var(--button-compact-min-height);
  display: inline-flex; align-items: center;
  background: var(--button-on-color-bg);
}
.page-catalog .lane-btn:hover { background: var(--button-on-color-bg-hover); }

/* Filter bar */
.page-catalog .filter-bar { border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.page-catalog .filter-label { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
.page-catalog .filter-pill,
.page-catalog .topic-trigger { border-radius: var(--radius-pill); }
.page-catalog .topic-menu { border-radius: var(--radius-card); box-shadow: var(--shadow-3); }
.page-catalog .topic-opt { border-radius: var(--radius-nested); }
.page-catalog .filter-search-input { font-size: var(--type-field-size); border-radius: var(--radius-pill); }
.page-catalog .filter-search-input:focus { box-shadow: 0 0 0 2px var(--color-field-ring); }

/* Cards */
.page-catalog .pb-card { box-shadow: var(--card-playbook-shadow); }
.page-catalog .pb-card:hover { box-shadow: var(--card-playbook-shadow-hover); }
.page-catalog .pb-card-soon:hover { box-shadow: var(--card-playbook-shadow); }
.page-catalog .pb-title { font-size: var(--type-title-size); }
/* Topic chip: outline (filled pill = level, outlined pill = topic) */
.page-catalog .pb-topic {
  background: var(--chip-topic-bg);
  color: var(--chip-topic-text);
  border: var(--border-width-hairline) solid var(--chip-topic-border);
  border-radius: var(--chip-topic-radius);
  font-size: var(--type-chip-size);
  align-self: flex-start;
}
.page-catalog .pb-soon-flag {
  font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-1);
}
.page-catalog .empty-reset { border-radius: var(--radius-control); }
.page-catalog .empty-reset:hover { background: var(--color-action-primary-hover); }

/* Bottom CTA */
.page-catalog .page-cta h2 { font-size: var(--type-h2-size); }
.page-catalog .btn-bottom { border-radius: var(--button-primary-radius); }
.page-catalog .btn-bottom:hover { background: var(--color-action-primary-hover); }
@media (hover: none) { .page-catalog .pb-card:hover { box-shadow: var(--card-playbook-shadow); } }


/* ═══ 4. Playbook detail pages ═══════════════════════════════════════════════ */
.page-detail .hero-figure { box-shadow: var(--shadow-5); border-radius: var(--radius-container); }
.page-detail .hero-headline {
  line-height: var(--type-h1-interior-line);
  letter-spacing: var(--type-h1-interior-tracking);
}
.page-detail .hero-cta {
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
  box-shadow: var(--shadow-glow);
}
.page-detail .hero-cta:hover {
  transform: scale(var(--motion-scale-hover));
  box-shadow: var(--shadow-glow-hover);
  background: var(--color-action-primary-hover);
}

/* Section heads 34 → 32 (h3 role) */
.page-detail .section-heading,
.page-detail .fit-inner .section-heading {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-tracking);
}
/* v2.10 subhead rule: under the PAGE headline = lead (17); under a SECTION heading = body (16) */
.page-detail .hero-transform { font-size: var(--type-lead-size); }
.page-detail .section-lead,
.page-detail .outcomes-intro { font-size: var(--type-body-size); }

/* Small caps labels → 12 */
.page-detail .turn-kicker,
.page-detail .proof-kicker,
.page-detail .fit-box-label { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }

/* Fit boxes (v2.10): both on the white card surface, plum only. Teal is the Mastery
   level color and coral already means "action" + Foundation, so neither belongs here.
   "For you" = solid plum ink; "not for you" = faded grey. */
.page-detail .fit-box { border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
.page-detail .fit-box-yes,
.page-detail .fit-box-no { background: var(--color-bg-surface); border-color: var(--color-border-subtle); }
.page-detail .fit-box-yes .fit-box-label { color: var(--color-black-plum); }
.page-detail .fit-box-yes .fit-item::before { background: var(--color-black-plum); }
.page-detail .fit-box-no .fit-box-label { color: var(--color-text-secondary); }
.page-detail .fit-box-no .fit-item::before { background: var(--color-black-plum); opacity: .3; }
@media (hover: hover) {
  .page-detail .fit-box:hover { transform: translateY(var(--motion-distance-lift)); box-shadow: var(--shadow-3); }
  .page-detail .fit-box-yes:hover { border-color: var(--color-border-subtle); }
}

/* Buy card */
.page-detail .buy-card { border-radius: var(--radius-container); box-shadow: var(--shadow-4); }
.page-detail .buy-title { font-size: var(--type-title-size); }
.page-detail .buy-cta {
  font-size: var(--type-button-size);
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--space-6);
  box-shadow: var(--shadow-glow);
}
.page-detail .buy-cta:hover { box-shadow: var(--shadow-glow-hover); }

/* Bottom band + sticky buy bar */
.page-detail .bottom-cta h2 { font-size: var(--type-h2-size); }
.page-detail .bottom-cta-btn {
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
}
.page-detail .buybar { box-shadow: var(--shadow-bar-up); }
.page-detail .buybar-cta { border-radius: var(--radius-control); }
@media (pointer: coarse) { .page-detail .nav-cta { min-height: var(--layout-tap-min); } }
/* Scroll reveal distance 14 → 12 (only while JS runs and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .page-detail .reveal:not(.is-visible):not(.outcomes-list) { transform: translateY(var(--motion-distance-reveal)); }
}


/* ═══ 5. About ═══════════════════════════════════════════════════════════════ */
.page-about .eyebrow { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
/* v2.10 subhead rule: hero subhead = lead (17); section subhead = body (16) */
.page-about .hero-sub { font-size: var(--type-lead-size); }
.page-about .whatis-lead { font-size: var(--type-body-size); }
.page-about .img-slot { border-radius: var(--radius-container); background: var(--color-bg-placeholder); }
.page-about .hero-media { box-shadow: var(--shadow-4); }
.page-about .team-media { box-shadow: var(--shadow-3); }
.page-about .belief p,
.page-about .team p { font-size: var(--type-lead-size); }
.page-about .no-chip { border-radius: var(--radius-pill); }
@media (prefers-reduced-motion: no-preference) {
  .js .page-about .reveal:not(.in) { transform: translateY(var(--motion-distance-reveal)); }
}


/* ═══ 6. Terms + Privacy ═════════════════════════════════════════════════════ */
.page-legal .eyebrow,
.page-legal .short h2 { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
.page-legal .legal h1 {
  font-size: var(--type-h1-interior-size);
  line-height: var(--type-h1-interior-line);
  letter-spacing: var(--type-h1-interior-tracking);
}
.page-legal .short { border-radius: var(--radius-card); }
.page-legal .sec h2 { font-size: var(--type-title-lg-size); }
.page-legal .sec p,
.page-legal .sec li { font-size: var(--type-body-size); }
.page-legal .quote { border-radius: 0 var(--radius-nested) var(--radius-nested) 0; }


/* ═══ 7. 404 ═════════════════════════════════════════════════════════════════ */
.page-404 h1 {
  font-size: var(--type-h1-interior-size);
  line-height: var(--type-h1-interior-line);
  letter-spacing: var(--type-h1-interior-tracking);
}
.page-404 p { font-size: var(--type-lead-size); }
.page-404 .code { font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); }
.page-404 .btn {
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
}
.page-404 .btn:hover { background: var(--color-action-primary-hover); }