.club-playbook-page {
  background:
    radial-gradient(circle at 82% 4%, rgba(227, 241, 36, 0.1), transparent 25%),
    var(--colour-background-deep);
}

.club-playbook-page .club-site-nav .active {
  color: var(--colour-electric);
}

.playbook-intro {
  display: grid;
  gap: clamp(42px, 6vw, 88px);
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.74fr);
  margin: 0 auto;
  max-width: 1244px;
  padding: 88px 32px 72px;
}

.playbook-intro-copy {
  align-self: center;
}

.playbook-intro h1 {
  font-size: clamp(48px, 6vw, 82px);
  line-height: 0.98;
  margin: 18px 0 28px;
  max-width: 780px;
}

.playbook-intro-copy > p {
  color: #bdc6ce;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.58;
  max-width: 680px;
}

.playbook-promise {
  align-items: center;
  border-left: 3px solid var(--colour-electric);
  display: flex;
  gap: 18px;
  margin-top: 38px;
  padding-left: 20px;
}

.playbook-promise strong {
  color: var(--colour-electric);
  font-size: 26px;
}

.playbook-promise span {
  color: var(--colour-silver);
  max-width: 230px;
}

.start-card {
  background: var(--colour-off-white);
  border-radius: 26px;
  color: var(--colour-background-deep);
  padding: clamp(28px, 4vw, 48px);
}

.start-card h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
  margin: 10px 0 28px;
}

.start-card ol,
.progress-strip ol,
.event-card ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.start-card li {
  display: grid;
  gap: 16px;
  grid-template-columns: 42px 1fr;
  padding: 19px 0;
}

.start-card li + li {
  border-top: 1px solid #d7dce1;
}

.start-card li > span {
  align-items: center;
  background: var(--colour-electric);
  border-radius: 50%;
  display: flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.start-card li strong {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}

.start-card li p {
  color: #505c69;
  font-size: 15px;
  line-height: 1.5;
}

.progress-strip {
  background: var(--colour-electric);
  color: var(--colour-background-deep);
  overflow-x: auto;
}

.progress-strip ol {
  display: grid;
  grid-template-columns: repeat(8, minmax(138px, 1fr));
  margin: 0 auto;
  max-width: 1440px;
  min-width: 1120px;
}

.progress-strip li {
  border-right: 1px solid rgba(3, 9, 16, 0.18);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  padding: 20px 18px;
}

.progress-strip li span {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.58;
}

.playbook-section,
.ownership-section {
  margin: 0 auto;
  max-width: 1180px;
  padding: 110px 32px;
}

.playbook-section-heading {
  max-width: 790px;
}

.playbook-section-heading.compact {
  max-width: 850px;
}

.playbook-section-heading h2,
.readiness-card h2,
.playbook-cta h2 {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.04;
  margin: 14px 0 22px;
}

.playbook-section-heading > p {
  color: var(--colour-silver);
  font-size: 18px;
  line-height: 1.6;
}

.stage-list {
  border-top: 1px solid var(--colour-border-strong);
  margin-top: 68px;
}

.stage-card {
  display: grid;
  gap: 50px;
  grid-template-columns: 180px 1fr;
  padding: 48px 0;
}

.stage-card + .stage-card {
  border-top: 1px solid var(--colour-border-strong);
}

.stage-meta span {
  color: var(--colour-electric);
  display: block;
  font: 800 50px/1 var(--font-heading);
  margin-bottom: 12px;
}

.stage-meta strong {
  color: var(--colour-silver);
  font-size: 14px;
  text-transform: uppercase;
}

.stage-content h3 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin-bottom: 13px;
}

.stage-content > p:not(.milestone) {
  color: var(--colour-silver);
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
}

.ownership {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  margin: 28px 0;
}

.ownership p {
  background: var(--colour-surface);
  border-radius: 13px;
  color: #b8c1cc;
  line-height: 1.55;
  padding: 18px 20px;
}

.ownership strong {
  color: var(--colour-off-white);
}

.milestone {
  align-items: baseline;
  border-left: 2px solid var(--colour-electric);
  color: var(--colour-off-white);
  display: flex;
  gap: 12px;
  padding-left: 16px;
}

.milestone span {
  color: var(--colour-electric);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readiness-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 1244px;
}

.readiness-card {
  min-height: 640px;
  padding: clamp(44px, 6vw, 76px);
}

.gate-card {
  background: var(--colour-off-white);
  color: var(--colour-background-deep);
}

.event-card {
  background: var(--colour-surface-raised);
}

.check-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}

.check-list li {
  border-top: 1px solid #d7dce1;
  font-size: 16px;
  padding: 18px 0 18px 30px;
  position: relative;
}

.check-list li::before {
  color: #76810b;
  content: "✓";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.event-card li {
  border-top: 1px solid var(--colour-border-strong);
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 1fr;
  padding: 17px 0;
}

.event-card li strong {
  color: var(--colour-electric);
  font-size: 14px;
}

.event-card li span {
  color: #bdc6ce;
}

.owner-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  margin-top: 58px;
}

.owner-grid article {
  background: var(--colour-surface);
  padding: clamp(34px, 4vw, 54px);
}

.owner-grid article:first-child {
  border-radius: 20px 0 0 20px;
}

.owner-grid article:last-child {
  border-radius: 0 20px 20px 0;
}

.owner-grid article > span {
  color: var(--colour-electric);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.owner-grid h3 {
  font-size: 28px;
  margin: 15px 0 16px;
}

.owner-grid p,
.decision-note,
.playbook-cta p {
  color: var(--colour-silver);
  font-size: 16px;
  line-height: 1.6;
}

.decision-note {
  border-left: 3px solid var(--colour-electric);
  margin-top: 28px;
  padding-left: 18px;
}

.decision-note strong {
  color: var(--colour-off-white);
}

.playbook-cta {
  align-items: center;
  background: linear-gradient(115deg, #21342f, #111d28 66%);
  border: 1px solid var(--colour-border-strong);
  border-radius: 24px;
  display: flex;
  gap: 44px;
  justify-content: space-between;
  margin: 0 auto 110px;
  max-width: 1180px;
  padding: clamp(38px, 6vw, 72px);
}

.club-playbook-page .pilot-cta {
  margin-bottom: 28px;
}

.playbook-cta > div {
  max-width: 700px;
}

.playbook-cta .button {
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .playbook-intro,
  .readiness-section {
    grid-template-columns: 1fr;
  }

  .playbook-intro {
    padding-top: 72px;
  }

  .readiness-section {
    margin: 0 32px;
  }

  .readiness-card {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .playbook-intro,
  .playbook-section,
  .ownership-section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .playbook-intro {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 58px;
  }

  .playbook-intro h1 {
    font-size: 46px;
  }

  .playbook-promise,
  .milestone {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .start-card {
    border-radius: 18px;
  }

  .stage-card {
    gap: 26px;
    grid-template-columns: 1fr;
    padding: 40px 0;
  }

  .stage-meta {
    align-items: baseline;
    display: flex;
    gap: 18px;
  }

  .stage-meta span {
    font-size: 38px;
    margin: 0;
  }

  .ownership,
  .owner-grid {
    grid-template-columns: 1fr;
  }

  .readiness-section {
    margin: 0;
  }

  .readiness-card {
    padding: 54px 22px;
  }

  .event-card li {
    grid-template-columns: 1fr;
  }

  .owner-grid article:first-child {
    border-radius: 16px 16px 0 0;
  }

  .owner-grid article:last-child {
    border-radius: 0 0 16px 16px;
  }

  .playbook-cta {
    align-items: flex-start;
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    flex-direction: column;
    margin-bottom: 78px;
    padding: 54px 22px;
  }

  .playbook-cta .button {
    width: 100%;
  }
}