/* Podcast Marketing Engine, /podcast-engine
   Loads after styles.css. Everything here is pe- prefixed except
   page-scoped overrides under #book, which resize the shared .talk
   band for this page's longer closing headline. */

/* ---------- Shared page primitives ---------- */

.pe-measure { max-width: 760px; }
.pe-measure--flush { max-width: 66ch; }

.pe-head {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: -.02em;
  max-width: 900px;
  margin-bottom: 22px;
}
.pe-lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 62ch;
  margin: 0 0 36px;
}
.pe-body {
  font-size: clamp(1rem, 2vw, 1.13rem);
  color: #2A2A2A;
  max-width: 66ch;
  margin-bottom: 18px;
}
.pe-body:last-child { margin-bottom: 0; }

.pe-pull {
  margin: 34px 0;
  padding-left: 22px;
  border-left: 4px solid var(--coral);
}
.pe-pull p {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  max-width: 28ch;
}
.pe-pull--dark p { color: var(--paper); }

.pe-callout {
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: 12px;
  max-width: 680px;
}
.pe-callout__label {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 8px;
}
.pe-callout .pe-body { margin-bottom: 0; }

.pe-tablewrap { overflow-x: auto; margin-top: 18px; }
.pe-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.pe-table th, .pe-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.pe-table thead th {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pe-table tbody th { font-weight: 600; }
.pe-table td { color: #2A2A2A; }

/* ---------- Hero ---------- */

.pe-hero { padding-top: clamp(40px, 7vw, 80px); }
.pe-hero__title {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.pe-hero__sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  margin: 22px 0 20px;
  max-width: 52ch;
}
.pe-hero .btn { margin-top: 10px; }
.pe-hero__alt { margin-top: 18px; font-size: .95rem; color: var(--muted); max-width: 56ch; }

/* ---------- The reframe ---------- */

.pe-method {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .01em;
  margin: 4px 0 20px;
}
.pe-method span { color: var(--coral); }

/* ---------- The engine ---------- */

.pe-engine { background: #FAFAFA; border-block: 1px solid var(--line); }

.pe-outputs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.pe-output {
  grid-column: span 3;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.pe-output__num {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .1em;
  color: var(--coral);
  margin-bottom: 10px;
}
.pe-output__name { font-size: 1.2rem; }
.pe-output__desc { color: var(--muted); font-size: .95rem; margin-top: 8px; }

.pe-output--feature {
  grid-column: span 6;
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 5%, var(--paper));
  padding: 34px;
}
.pe-output--feature .pe-output__num { font-size: 1.05rem; }
.pe-output--feature .pe-output__name { font-size: 1.45rem; }
.pe-output--feature .pe-output__desc {
  color: #2A2A2A;
  font-size: 1.02rem;
  max-width: 66ch;
}
.pe-output__go {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pe-output__go:hover { text-decoration: underline; }

.pe-output--quiet { grid-column: span 2; background: transparent; padding: 22px; }
.pe-output--quiet .pe-output__num { color: var(--muted); }
.pe-output--quiet .pe-output__name { font-size: 1.05rem; }

.pe-gate {
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: 12px;
}
.pe-gate__head { font-size: 1.25rem; margin-bottom: 10px; max-width: 44ch; }

/* ---------- The intelligence layer (dark chapter) ---------- */

.pe-intel {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(72px, 10vw, 150px);
}
.pe-intel .eyebrow { color: var(--pink); }
.pe-intel__title { max-width: 920px; margin-bottom: 16px; }
.pe-intel__sub { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: rgba(255, 255, 255, .85); }
.pe-intel .pe-body { color: rgba(255, 255, 255, .78); }
.pe-intel .pe-body strong { color: var(--paper); }

.pe-intel__block {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  max-width: 820px;
}
.pe-intel__head { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin-bottom: 14px; }
.pe-intel__claim {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.25;
  margin-bottom: 14px;
  max-width: 40ch;
}

.pe-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
}
.pe-track {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 24px;
}
.pe-track .pe-body { margin-bottom: 0; }

.pe-steps {
  list-style: none;
  counter-reset: pe-step;
  margin-top: 20px;
}
.pe-steps li {
  counter-increment: pe-step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 2vw, 1.1rem);
  max-width: 62ch;
}
.pe-steps li:last-child { margin-bottom: 0; }
.pe-steps li::before {
  content: counter(pe-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--coral-lt);
}
.pe-steps strong { color: var(--paper); }

.pe-table--dark { min-width: 520px; }
.pe-table--dark th, .pe-table--dark td { border-bottom-color: rgba(255, 255, 255, .14); }
.pe-table--dark thead th { color: rgba(255, 255, 255, .6); }
.pe-table--dark tbody th { color: var(--paper); }
.pe-table--dark td { color: rgba(255, 255, 255, .82); }

/* ---------- Proof ---------- */

.pe-proof .pe-tablewrap { max-width: 680px; }
.pe-proof .pe-pull { margin-bottom: 22px; }

/* ---------- Fit ---------- */

.pe-fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 16px;
}
.pe-fit__col { border-top: 3px solid var(--coral); padding-top: 20px; }
.pe-fit__col + .pe-fit__col { border-top-color: var(--ink); }
.pe-fit__head { font-size: 1.35rem; margin-bottom: 18px; }
.pe-list { list-style: none; }
.pe-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: #2A2A2A;
  font-size: 1rem;
}
.pe-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.pe-list--for li::before { content: "\2713"; color: var(--coral); }
.pe-list--not li::before { content: "\2715"; color: var(--ink); }
.pe-fit__note { color: var(--muted); font-size: .95rem; margin-top: 20px; max-width: 60ch; }

/* ---------- How to start ---------- */

.pe-start__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 10px 0 30px;
}
.pe-start__cta { margin-top: 30px; }
.pe-start__alt { margin-top: 16px; font-size: .95rem; color: var(--muted); }
.pe-start__alt a { color: var(--ink); font-weight: 600; }

/* ---------- Closing band (page-scoped resize of the shared .talk) ---------- */

#book .talk__head { font-size: clamp(1.6rem, 4vw, 2.6rem); max-width: 30ch; margin-inline: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .pe-outputs { grid-template-columns: 1fr 1fr; }
  .pe-output, .pe-output--quiet { grid-column: span 1; }
  .pe-output--feature { grid-column: span 2; }
}
@media (max-width: 620px) {
  .pe-outputs { grid-template-columns: 1fr; }
  .pe-output, .pe-output--feature, .pe-output--quiet { grid-column: span 1; }
  .pe-tracks { grid-template-columns: 1fr; }
  .pe-fit__grid { grid-template-columns: 1fr; }
  .pe-steps li { padding-left: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}