/* ═══════════════════════════════════════════════════════════
   STUPID SIMPLE STARTUP — WordPress Custom Styles
   Ported from static site CSS for use with Kadence theme.
   Nav, footer, modal, cookie banner handled by Kadence.
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STUPID SIMPLE STARTUP — Stylesheet
   stupidsimplestartup.com
   Fonts: Montserrat (structure/UI) · Libre Baskerville (titles/body)
   Palette: IS warm white + warm dark, no SSS accent color
   IS step colors appear only on impact-system.html
═══════════════════════════════════════════════════════════ */


/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:       #faf8f4;
  --card:     #ffffff;
  --ink-bg:   #1c1a17;   /* dark strip / footer */

  /* Text */
  --ink:      #1c1a17;
  --muted:    #6b6966;
  --on-dark:  rgba(255,255,255,0.88);
  --on-dark-m: rgba(255,255,255,0.45);

  /* Borders */
  --border:   rgba(28,26,23,0.13);

  /* Typography */
  --sans:     'Montserrat', sans-serif;
  --serif:    'Libre Baskerville', Georgia, serif;

  /* Layout */
  --max:      960px;
  --pad:      clamp(20px, 5vw, 60px);
  --section-gap: clamp(64px, 10vw, 120px);

  /* IS step colors — used only on impact-system.html */
  --identify:   #E05252;
  --monetize:   #4A90C4;
  --productize: #E6A817;
  --activate:   #4AA85A;
  --campaign:   #E07830;
  --triumph:    #9B5CC4;

  /* Picture Book Project Playbook brand */
  --pb:         #818b7e;   /* sage green */
  --pb-accent:  #D4643A;   /* warm coral */
}




/* ── LAYOUT HELPERS ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}


/* ── SECTION BASE ────────────────────────────────────────── */
.section {
  padding-block: var(--section-gap);
}

.section + .section,
.hero  + .section {
  border-top: 1px solid var(--border);
}

/* Tighter top-padding so the border sits close to the section heading */
.hero + .section {
  padding-top: clamp(40px, 4vw, 56px);
}

.section-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.section-head {
  margin-bottom: 48px;
}

.section-head h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 12px;
}

.section-head p {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
}


/* ── HERO ────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(64px, 10vw, 120px);
  padding-bottom: clamp(64px, 10vw, 120px);
  background: #f0ede8;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 14ch;
  margin-bottom: 24px;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ── Problem stat callout (PBPP) ────────────────────── */
.problem-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 36px 0;
  flex-wrap: wrap;
}
.problem-stat { text-align: center; }
.problem-stat-num {
  font-family: var(--sans);
  font-size: clamp(40px, 7vw, 60px);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}
.problem-stat--loss .problem-stat-num { color: var(--accent); }
.problem-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.problem-stat-vs {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--border);
  align-self: center;
}

/* ── Ghost (coming-soon) book cover ─────────────────── */
.pbpp-cover--ghost .pbpp-cover-band    { background: #a09890; }
.pbpp-cover--ghost .pbpp-cover-brand   { color: rgba(255,255,255,.4); }
.pbpp-cover--ghost .pbpp-cover-rule    { background: rgba(255,255,255,.3); }
.pbpp-cover--ghost .pbpp-cover-sub     { color: rgba(255,255,255,.45); }
.pbpp-cover--ghost .pbpp-cover-lower   { background: #e8e4de; }
.pbpp-cover--ghost .pbpp-cover-system-label { color: #bbb; }
.pbpp-cover--ghost .pbpp-dot           { background: #c8c4be; }
.pbpp-cover--ghost .pbpp-cover-lower:empty { display: none; }

.pbpp-cover-coming-soon {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28,26,23,.72);
  color: #fff;
  font-family: var(--sans);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Neutral step (community flow) ──────────────────── */
.wf-step--neutral { background: var(--ink); }


/* ── Hero IMPACT step row ───────────────────────────── */
.hero-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--card);
  padding: 32px 28px;
}

.card-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.card h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 10px;
}

.card p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}


/* ── WHO CARDS ───────────────────────────────────────────── */
.who-card {
  background: var(--card);
  padding: 32px 28px;
}

.who-card h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

.who-card p {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}


/* ── WHY / ROADMAP ───────────────────────────────────────── */
.why-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: 32px;
}

.why-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: opacity 0.15s;
}

.why-link:hover {
  opacity: 0.6;
  text-decoration: none;
}


/* ── CTA LIGHT (mid-page, above dark strip) ──────────────── */
.cta-light {
  background: var(--card);
  padding-block: clamp(56px, 8vw, 96px);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cta-light .section-label {
  color: var(--muted);
}

.cta-light h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 12px;
}

.cta-light p {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 44ch;
  margin-inline: auto;
}


/* ── CTA STRIP (dark) ────────────────────────────────────── */
.cta-strip {
  background: #a74d4a;   /* muted red — master guide CTA */
  padding-block: clamp(56px, 8vw, 96px);
  text-align: center;
}

.cta-strip .section-label {
  color: var(--on-dark-m);
}

.cta-strip h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 9.5vw, 40px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--on-dark);
  margin-bottom: 12px;
}

.cta-strip p {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--on-dark-m);
  margin-bottom: 36px;
  max-width: 44ch;
  margin-inline: auto;
  letter-spacing: .02em;
}


/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.btn:hover { opacity: 0.75; text-decoration: none; }

.btn-primary {
  background: #a74d4a;
  color: #fff;
  padding: 14px 28px;
}

.btn-primary-light {
  background: var(--on-dark);
  color: var(--ink);
  padding: 14px 28px;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1.5px solid var(--ink);
}


/* ── IS STEP PILLS (impact-system.html only) ─────────────── */
.step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.step-pill {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
}

.step-pill--identify   { background: var(--identify); }
.step-pill--monetize   { background: var(--monetize); }
.step-pill--productize { background: var(--productize); }
.step-pill--activate   { background: var(--activate); }
.step-pill--campaign   { background: var(--campaign); }
.step-pill--triumph    { background: var(--triumph); }


/* ── IMPACT phases flow diagram ─────────────────────────── */
.impact-phases {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.impact-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.impact-phase-tag {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 132px;
  flex-shrink: 0;
}

.impact-phase-div {
  font-size: 18px;
  color: var(--border);
  margin: 8px 0 8px 140px;
  line-height: 1;
}

.impact-loop-badge {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 5px 10px;
  white-space: nowrap;
  margin-left: 4px;
}


/* ── IS STEPS LIST (impact-system.html only) ─────────────── */
.steps-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 8px;
}

.step-item {
  background: var(--card);
  padding: 28px 24px;
  border-left: 3px solid transparent;
}

.step-item--identify   { border-left-color: var(--identify); }
.step-item--monetize   { border-left-color: var(--monetize); }
.step-item--productize { border-left-color: var(--productize); }
.step-item--activate   { border-left-color: var(--activate); }
.step-item--campaign   { border-left-color: var(--campaign); }
.step-item--triumph    { border-left-color: var(--triumph); }

.step-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.step-name {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.step-desc {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}


/* ── IMPACT WORDMARK (impact-system.html hero) ───────────── */
.impact-wordmark {
  /* Inherits parent font — color cascades from step pills */
}

/* Subtle step-color striping on the IMPACT letters */
.impact-i  { color: var(--identify);   font-weight: 900; }
.impact-m  { color: var(--monetize);   font-weight: 900; }
.impact-p  { color: var(--productize); font-weight: 900; }
.impact-a  { color: var(--activate);   font-weight: 900; }
.impact-c  { color: var(--campaign);   font-weight: 900; }
.impact-t  { color: var(--triumph);    font-weight: 900; }


/* ── PLAYBOOK STEP LIST ──────────────────────────────────── */
/* Used on playbooks.html (index) and playbooks/picture-book-project.html */

.playbook-steps {
  border: 1px solid var(--border);
  margin: 0 0 40px;
}

.playbook-step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--card);
}

.playbook-step + .playbook-step {
  border-top: 1px solid var(--border);
}

.playbook-step-body {
  flex: 1;
}

.playbook-step-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: 3px;
}

.playbook-step-desc {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Paid steps: keep pills vibrant, soften text */
.playbook-step--paid .playbook-step-name {
  color: var(--muted);
}

.playbook-badge {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  flex-shrink: 0;
  white-space: nowrap;
}

.playbook-badge--free {
  background: var(--activate);
  color: #fff;
}

.playbook-badge--paid {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.playbook-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.playbook-ctas-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 28px;
}

.playbook-ctas-sub a {
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.playbook-byline {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ── PLAYBOOK SALES PAGE ─────────────────────────────────── */

/* Journey callout — "Built in public" section */
.journey-head {
  font-family: var(--serif);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 28ch;
}

.journey-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 560px;
}

/* Workbook / Worksheet flow diagram */
.workbook-flow {
  margin-top: 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.workbook-flow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.wf-step {
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--pb);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wf-arrow {
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.wf-workbook {
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--pb);
  color: var(--pb);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wf-worksheets {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-sheet {
  padding: 6px 11px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.wf-sheet--more {
  font-style: italic;
  opacity: .7;
}

/* Step-colour modifiers for flow diagram */
.wf-step--identify   { background: var(--identify);   }
.wf-step--monetize   { background: var(--monetize);   }
.wf-step--productize { background: var(--productize); }
.wf-step--activate   { background: var(--activate);   }
.wf-step--campaign   { background: var(--campaign);   }
.wf-step--triumph    { background: var(--triumph);    }

.wf-workbook--identify   { border-color: var(--identify);   color: var(--identify);   }
.wf-workbook--monetize   { border-color: var(--monetize);   color: var(--monetize);   }
.wf-workbook--productize { border-color: var(--productize); color: var(--productize); }
.wf-workbook--activate   { border-color: var(--activate);   color: var(--activate);   }
.wf-workbook--campaign   { border-color: var(--campaign);   color: var(--campaign);   }
.wf-workbook--triumph    { border-color: var(--triumph);    color: var(--triumph);    }

/* ── Workbook tree diagram ───────────────────────────── */
.wf-tree {
  margin-top: 48px;
}

.wf-tree-summary {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.65;
  margin: 0 0 28px;
}

.wf-tree-root-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wf-tree-root-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.wf-tree-trunk-line {
  width: 2px;
  height: 16px;
  background: var(--border);
  margin-left: 18px;
}

.wf-tree-stages {
  margin-left: 18px;
  padding-left: 28px;
  border-left: 2px solid var(--border);
}

.wf-tree-stage {
  position: relative;
  padding: 14px 0;
}

.wf-tree-stage:first-child {
  padding-top: 10px;
}

.wf-tree-stage::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 20px;
  width: 28px;
  height: 2px;
  background: var(--border);
}

.wf-tree-stage-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.wf-tree-stage-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.wf-tree-stage-count {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}

.wf-tree-stage-sheets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 480px;
}

/* CSS-drawn page/document icon */
.wf-tree-ws {
  display: inline-block;
  width: 13px;
  height: 15px;
  border: 1.5px solid var(--muted);
  border-radius: 2px;
  position: relative;
  opacity: 0.45;
  flex-shrink: 0;
}

.wf-tree-ws::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 2px;
  right: 2px;
  height: 1px;
  background: var(--muted);
  box-shadow: 0 2.5px 0 var(--muted), 0 5px 0 var(--muted);
}

.wf-tree-ws--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 15px;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 1;
}

.wf-tree-ws--more::after {
  display: none;
}

.wf-tree-stage--more .wf-tree-stage-label {
  color: var(--muted);
  opacity: 0.75;
}

.wf-tree-stage--more .wf-tree-stage-count {
  opacity: 0.65;
}

/* Price panel */
.price-panel {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 48px 40px;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.price-product-name {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.price-amount {
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}

.price-desc {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
}

.price-includes {
  list-style: none;
  margin-bottom: 36px;
  text-align: left;
}

.price-includes li {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-includes li::before {
  content: '✓';
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--activate);
  flex-shrink: 0;
}

.price-note {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 16px;
}

/* FAQ */
.faq-list {
  max-width: 640px;
}

.faq-item {
  border-top: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1;
}

.faq-item[open] summary::after { content: '−'; }

.faq-item .faq-answer {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  padding-bottom: 20px;
}

.faq-item .faq-answer a {
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}


/* ── PLAYBOOK LIBRARY LISTING ────────────────────────────── */
/* Two-col entry: label+title left, content right */

.playbook-library-entry {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px 64px;
  align-items: start;
  padding-bottom: 48px;
  margin-bottom: 40px;
}

.playbook-library-meta h3 {
  font-family: var(--sans);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 10px;
}

.playbook-library-body > p:first-child {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 20px;
}

.playbook-library-bullets {
  list-style: none;
}

.playbook-library-bullets li {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  padding: 9px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.playbook-library-bullets li::before {
  content: '→';
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

/* Centered CTA box below the entry */
.playbook-library-cta {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 32px 40px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.playbook-library-cta-name {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.playbook-library-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.playbook-library-cta-sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.playbook-library-cta-sub a {
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 720px) {
  .playbook-library-entry {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 32px;
  }

  .playbook-library-cta {
    padding: 28px 24px;
  }
}


/* ── UTILITIES ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 720px) {

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .steps-list {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }



  /* Playbook step list */
  .playbook-step {
    padding: 18px 20px;
    gap: 13px;
    align-items: flex-start;
  }

  .playbook-badge {
    font-size: 8px;
    padding: 4px 9px;
    align-self: center;
  }

  /* Price panel */
  .price-panel {
    padding: 32px 24px;
  }
}


/* ── Playbook Library (playbooks.html) ────────────────────────────── */

#pb-library {
  background: var(--alt, #e9e9e9);
  border-top: 1px solid var(--line, #e9e9e9);
}

#pb-library .section-label {
  text-align: center;
  margin-bottom: 40px;
}

#pb-library .pb-row {
  margin-top: 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  padding: 26px;
  border-radius: var(--radius, 18px);
  border: 1px solid var(--line, #e9e9e9);
  background: var(--card, #ffffff);
  box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.08));
}

#pb-library .pb-row-cover {
  display: flex;
  align-items: flex-start;
}

#pb-library .pb-row-cta {
  border-radius: calc(var(--radius, 18px) - 4px);
  border: 1px solid var(--line, #e9e9e9);
  background: var(--alt, #f7f7f7);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

#pb-library .pb-row-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

#pb-library .pb-row-cta-inline {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}

#pb-library .pb-cta-btn {
  background: var(--pb);
}

#pb-library .pb-cta-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #5a5a5a);
}

#pb-library .pb-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #5a5a5a);
}

#pb-library .pb-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
  color: var(--text, #111);
  font-weight: 600;
  letter-spacing: .01em;
}

#pb-library .pb-sub {
  margin: 0;
  color: var(--muted, #5a5a5a);
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
}

#pb-library .pb-sub + .pb-sub { margin-top: 10px; }

#pb-library .pb-footnote {
  margin-top: 22px;
  color: var(--muted, #5a5a5a);
  font-size: 14px;
  text-align: center;
}

#pb-library .pb-footnote a {
  border-bottom: 1px solid var(--line, #e9e9e9);
  padding-bottom: 2px;
  text-decoration: none;
}

#pb-library .pb-row--ghost {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}

@media (max-width: 900px) {
  #pb-library .pb-row {
    grid-template-columns: 1fr;
  }
  #pb-library .pb-row-cta {
    text-align: left;
    align-items: flex-start;
  }
}


/* ── Home Page (index.html) ──────────────────────────────── */

#what + .section { border-top: none; }
#what   { padding-bottom: clamp(32px, 4vw, 48px); }
#impact { padding-top:    clamp(32px, 4vw, 48px); }

#impact .hero-actions { justify-content: center; }

.impact-frame-head {
  font-family: var(--sans);
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 20px;
}

.impact-letters {
  font-family: var(--sans);
  font-size: clamp(52px, 9vw, 88px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
}

.impact-tagline {
  font-family: var(--serif);
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--muted);
  margin-bottom: 24px;
}

.impact-desc {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 48px;
}

.impact-steps-prose {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 64px;
  margin-bottom: 8px;
}

.isp-num {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding: 7px 12px;
  margin-bottom: 14px;
}

.isp-row--identify   .isp-num { background: var(--identify); }
.isp-row--monetize   .isp-num { background: var(--monetize); }
.isp-row--productize .isp-num { background: var(--productize); }
.isp-row--activate   .isp-num { background: var(--activate); }
.isp-row--campaign   .isp-num { background: var(--campaign); }
.isp-row--triumph    .isp-num { background: var(--triumph); }

.isp-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

.isp-desc {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 720px) {
  .impact-steps-prose { grid-template-columns: 1fr; gap: 28px; }
}


/* ── FROM THE CREATOR ────────────────────────────────────── */
.creator-wrap {
  display: flex;
  gap: 52px;
  align-items: flex-start;
  margin-top: 32px;
}

.creator-photo {
  flex: 0 0 200px;
}

.creator-photo img {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.creator-bio {
  flex: 1;
  max-width: 56ch;
}

.creator-bio p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 18px;
}

.creator-bio p:last-child { margin-bottom: 0; }

.creator-bio strong {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
}

.creator-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}

.creator-link:hover { color: var(--pb); }

@media (max-width: 720px) {
  .creator-wrap { flex-direction: column; gap: 28px; }
  .creator-photo { flex: 0 0 auto; width: 140px; }
}


/* ── Picture Book Project Playbook (.pbpp) ───────────────── */

/* Hero — teal bg */
.pbpp .hero                  { background: var(--pb); }
.pbpp .hero-eyebrow          { color: rgba(255,255,255,0.5); }
.pbpp .hero h1               { font-family: var(--sans); font-weight: 600; color: #fff; max-width: 24ch; }
.pbpp .hero h2               { font-family: var(--serif); font-size: clamp(16px,2vw,20px); font-weight: 400; color: rgba(255,255,255,0.72); max-width: 42ch; line-height: 1.55; margin-bottom: 40px; }
.pbpp .hero .btn-primary     { background: var(--pb-accent); color: #fff; }
.pbpp .hero .btn-ghost       { color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.4); }

/* Teal accent throughout */
.pbpp .section-label         { color: var(--pb); }
.pbpp .card-label            { color: var(--pb); }
.pbpp .journey-head          { color: var(--pb); }
.pbpp .cta-strip             { background: var(--pb); }
.pbpp #buy .section-label    { text-align: center; }

/* Coral badge */
.pbpp .playbook-badge--free  { background: var(--pb-accent); }
.pbpp .playbook-badge        { min-width: 108px; text-align: center; text-decoration: none; transition: opacity 0.15s; }
.pbpp .playbook-badge:hover  { opacity: 0.75; text-decoration: none; }

/* Price panel */
.pbpp .price-panel           { border-top: 3px solid var(--pb); }
.pbpp .price-includes li::before { color: var(--pb); }

/* Step list overrides */
.pbpp .playbook-step-desc    { display: block !important; }
.pbpp .playbook-step         { align-items: flex-start; padding: 24px 28px; }
.pbpp .playbook-steps .step-pill {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.1em;
  padding: 0; margin-top: 2px;
}

/* Kit modal — coral submit */
.pbpp #optinModal .formkit-form[data-uid="7d2826bed8"] .formkit-submit       { background-color: var(--pb-accent) !important; border-radius: 0 !important; }
.pbpp #optinModal .formkit-form[data-uid="7d2826bed8"] .formkit-submit > span { background-color: transparent !important; }

/* Pillar dividers */
.pillar-divider {
  margin: 52px 0 28px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.pillar-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb);
  margin: 0 0 8px;
}
.pillar-head {
  font-family: var(--sans);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}
.pillar-intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 0 28px;
}
.pillar-cta-line {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Tools examples list */
.tools-examples {
  list-style: none;
  padding: 0;
  margin: -8px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tools-examples li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
}
.tools-examples li::before {
  content: "→";
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--pb-accent);
  flex-shrink: 0;
}
.tools-tagline {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}

/* Inline "Learn how" explainer — below the tagline */
.tools-learn-how-inline {
  max-width: 56ch;
  margin: 0 0 36px;
  padding: 22px 26px;
  border-left: 3px solid var(--pb);
  background: rgba(27, 94, 90, 0.04);
  border-radius: 0 8px 8px 0;
}

.tools-learn-how-head {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}

.tools-learn-how-body {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 10px;
}

.tools-learn-how-close {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pb);
  margin: 0;
}

/* Worksheet preview mockup */
.worksheet-preview {
  max-width: 680px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--pb);
  box-shadow: 0 4px 28px rgba(0,0,0,0.07);
}
.worksheet-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.worksheet-preview-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb);
  margin: 0 0 4px;
}
.worksheet-preview-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.worksheet-preview-badge {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--pb-accent);
  color: #fff;
  padding: 4px 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.worksheet-preview-badge:hover { opacity: 0.82; }
.worksheet-preview-body {
  padding: 24px 28px;
  background: #fff;
}
.worksheet-section          { margin-bottom: 22px; }
.worksheet-section:last-child { margin-bottom: 0; }
.worksheet-section-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.worksheet-checklist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.worksheet-check-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.worksheet-check-item--done  { color: var(--muted); }
.worksheet-checkbox {
  flex-shrink: 0;
  width: 17px; height: 17px;
  border: 1.5px solid #ccc;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.worksheet-checkbox--done    { background: var(--pb); border-color: var(--pb); }
.worksheet-field-prompt      { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.worksheet-field-mock {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  font-family: var(--serif);
}
.worksheet-field-blank {
  display: inline-block;
  min-width: 90px;
  border-bottom: 1.5px solid var(--ink);
  color: var(--muted);
  font-style: normal;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  vertical-align: baseline;
  margin: 0 2px;
}
.worksheet-preview-footer {
  padding: 14px 28px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.worksheet-preview-footer p  { font-size: 13px; color: var(--muted); margin: 0; }
.worksheet-preview-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pb-accent);
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--pb-accent);
  padding: 0 0 1px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.worksheet-preview-cta:hover { opacity: 0.7; }

/* Worksheet checklist — Learn how button layout */
.worksheet-check-text {
  flex: 1;
}

.worksheet-learn-btn {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb);
  background: none;
  border: 1px solid var(--pb);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 12px;
  transition: background 0.15s, color 0.15s;
}

.worksheet-learn-btn:hover {
  background: var(--pb);
  color: #fff;
}

@media (max-width: 720px) {
  .pbpp .playbook-step { padding: 20px; }
  .pillar-divider { margin-top: 40px; }
  .worksheet-preview-header,
  .worksheet-preview-body,
  .worksheet-preview-footer { padding-left: 20px; padding-right: 20px; }
}


/* ══════════════════════════════════════════════════════════
   PLAYBOOK COVER COMPONENT
   CSS-rendered book cover — Option B (split teal/cream)
   Usage: .pbpp-cover  /  .pbpp-cover--sm  /  .pbpp-cover--lg
══════════════════════════════════════════════════════════ */

.pbpp-cover {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  /* Default size */
  width: 190px;
  height: 285px;
  box-shadow:
    3px 0 8px rgba(0,0,0,.14),
    0 14px 40px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.06);
}

/* Spine shadow */
.pbpp-cover::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: rgba(0,0,0,.18);
  z-index: 1;
  pointer-events: none;
}

/* Teal header band */
.pbpp-cover-band {
  background: var(--pb);
  height: 56%;
  padding: 16px 16px 12px 20px;
  display: flex;
  flex-direction: column;
}

.pbpp-cover-brand {
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.pbpp-cover-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  line-height: 1.08;
  flex: 1;
}

.pbpp-cover-rule {
  width: 24px;
  height: 2px;
  background: #E6A817;
  margin: 8px 0 7px;
  flex-shrink: 0;
}

.pbpp-cover-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* Cream lower section */
.pbpp-cover-lower {
  background: #FAF8F4;
  height: 44%;
  padding: 12px 16px 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pbpp-cover-system-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.55;
}

.pbpp-cover-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 9px;
  width: 100%;
}

.pbpp-dot {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pb);
  color: #fff;
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual step colours — matches IMPACT System palette */
.pbpp-dot--i { background: #E05252; } /* Identify   */
.pbpp-dot--m { background: #4A90C4; } /* Monetize   */
.pbpp-dot--p { background: #E6A817; } /* Productize */
.pbpp-dot--a { background: #4AA85A; } /* Activate   */
.pbpp-dot--c { background: #E07830; } /* Campaign   */
.pbpp-dot--t { background: #9B5CC4; } /* Triumph    */

.pbpp-cover-brand-foot {
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #777;
}

/* ── Size: Small (library thumbnail) ──────────────────── */
.pbpp-cover--sm {
  width: 110px;
  height: 165px;
}
.pbpp-cover--sm .pbpp-cover-band  { padding: 11px 10px 9px 14px; }
.pbpp-cover--sm .pbpp-cover-lower { padding: 9px 10px 9px 14px; }
.pbpp-cover--sm .pbpp-cover-brand { font-size: 5px; }
.pbpp-cover--sm .pbpp-cover-title { font-size: 13px; }
.pbpp-cover--sm .pbpp-cover-rule  { width: 18px; margin: 5px 0 4px; }
.pbpp-cover--sm .pbpp-cover-sub   { font-size: 5.5px; }
.pbpp-cover--sm .pbpp-cover-system-label { font-size: 5px; margin-bottom: 4px; }
.pbpp-cover--sm .pbpp-cover-dots  { gap: 2px; margin-bottom: 6px; }
.pbpp-cover--sm .pbpp-dot         { font-size: 5px; }
.pbpp-cover--sm .pbpp-cover-brand-foot { font-size: 5px; }

/* ── Size: Large (sales page hero) ────────────────────── */
.pbpp-cover--lg {
  width: 210px;
  height: 315px;
}
.pbpp-cover--lg .pbpp-cover-band  { padding: 18px 18px 14px 22px; }
.pbpp-cover--lg .pbpp-cover-lower { padding: 14px 18px 14px 22px; }
.pbpp-cover--lg .pbpp-cover-title { font-size: 26px; }
.pbpp-cover--lg .pbpp-cover-rule  { width: 28px; margin: 10px 0 8px; }
.pbpp-cover--lg .pbpp-cover-dots  { gap: 4px; margin-bottom: 10px; }
.pbpp-cover--lg .pbpp-dot         { font-size: 8px; }


/* ── Hero split layout (text | cover) ─────────────────── */
.hero-cover-split {
  display: flex;
  align-items: flex-start;
  gap: 52px;
}

.hero-cover-split .hero-text {
  flex: 1;
  min-width: 0;
}

.hero-cover-split .hero-cover-slot {
  padding-top: 8px;
  flex-shrink: 0;
}

/* Library entry — 2-col when cover present (cover | meta+body) */
.playbook-library-entry--has-cover {
  grid-template-columns: auto 1fr;
}

.playbook-library-cover {
  display: flex;
  align-items: flex-start;
}

.playbook-library-content {
  min-width: 0;
}

@media (max-width: 860px) {
  .hero-cover-split {
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .playbook-library-entry--has-cover {
    grid-template-columns: 1fr;
  }
  /* Cover stays visible on mobile — stacks above content */
  .playbook-library-cover {
    justify-content: center;
  }
}



/* ── SSS Custom Footer ───────────────────────────────────── */
.sss-footer {
  background: var(--ink-bg);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-block: 32px;
}
.sss-footer-row {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}
.sss-footer-nav-row {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sss-footer-nav {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.sss-footer-nav a,
.sss-footer-legal a {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.15s;
}
.sss-footer-nav a:hover,
.sss-footer-legal a:hover {
  color: rgba(255,255,255,0.88);
}
.sss-footer-middle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sss-footer-copy {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.sss-footer-legal {
  display: flex;
  gap: 24px;
}
.sss-footer-trademark-row {
  margin-top: 20px;
}
.sss-footer-trademark {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  opacity: 0.65;
  text-align: center;
  margin: 0;
}

@media (max-width: 720px) {
  .sss-footer-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .sss-footer-middle-row {
    flex-direction: column;
    text-align: center;
  }
  .sss-footer-legal {
    justify-content: center;
  }
}


/* ── Opt-in Modal ────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,.55);
}
.modal-dialog {
  position: relative;
  background: #fff;
  width: 92%;
  max-width: 520px;
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.modal-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover {
  color: var(--ink);
}
.modal-body {
  padding: 24px;
}
body.modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .modal-dialog {
    width: 96%;
  }
  .modal-header,
  .modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Modal form styles ───────────────────────────────────── */
.sss-modal-heading {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  text-align: left;
}
.sss-modal-subheading {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 20px;
}
.sss-modal-disclaimer {
  font-size: 13px;
  color: #8b8b8b;
  margin: 12px 0 0;
}

/* FluentForm overrides inside the modal */
.modal-body .fluentform {
  max-width: 100%;
}
.modal-body .fluentform .ff-el-form--top .ff-el-input--label {
  display: none;
}
.modal-body .fluentform input[type="email"] {
  border: none;
  border-bottom: 1px solid #e3e3e3;
  border-radius: 0;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.3s;
}
.modal-body .fluentform input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: none;
}
.modal-body .fluentform input[type="email"]::placeholder {
  color: #8b8b8b;
}
.modal-body .fluentform .ff_submit_btn_wrapper {
  margin-top: 15px;
}
.modal-body .fluentform .ff-btn-submit {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ── Kadence header overrides — match live site nav ──────── */
.site-header .site-title {
  text-transform: uppercase;
}

.site-header .header-navigation a {
  text-transform: uppercase;
}