/* ===== HERO ===== */

.hero {
  padding-block: var(--space-section-y);
  text-align: center;
  background-color: #E7E7E7;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.hero__title {
  /* Wider than --content-narrow-width so the headline breaks onto
     two lines instead of three at desktop widths */
  max-width: 1200px;
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* Copy left, video right (video is first in markup for mobile order) */
  .hero__copy { order: -1; text-align: left; }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 1023px) {
  .hero__copy { align-items: center; }
}

.hero__subtitle {
  max-width: var(--content-narrow-width);
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-md);
  cursor: pointer;
  border: none;
  padding: 0;
}

.hero__video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__video-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hero__play-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__play-button::before {
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.hero__play-button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--color-text-primary);
  transform: translateX(3px);
}

.hero__cta {
  margin-top: var(--space-md);
}

/* ===== AS SEEN ON ===== */

.as-seen-on {
  padding-block: var(--space-2xl);
  background-color: var(--color-bg);
}

.as-seen-on__label {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-blue-primary);
  margin-bottom: var(--space-xl);
}

/* ===== BONUSES ===== */

.bonuses {
  padding-block: var(--space-section-y);
  background-color: var(--color-gray-2);
}

#bonuses-pre-form .section__eyebrow {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-blue-primary);
  margin-bottom: calc(var(--space-3xl) + var(--space-lg));
  text-transform: none;
  letter-spacing: -0.02em;
}

.bonuses__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .bonuses__cards { grid-template-columns: 1fr 1fr; }
}

.bonuses__card-title {
  font-size: 1.75rem;
  margin-bottom: var(--space-xl);
}

.bonuses__card-body {
  font-size: 1.375rem;
  color: var(--color-text-secondary);
  /* Last thing in the card, and the card's padding is the space below it. The
     rich-text default carries a bottom margin because most bodies have something
     after them; here it would just deepen the card. */
  margin-bottom: 0;
}

/* A card's body is one WYSIWYG field, so its list arrives as a bare <ul> with no
   class, and base.css strips list markers from every <ul>. Without these the
   items rendered as unmarked indented text — the arrow and the breathing room
   between items both came from .bonuses__card-list, which now only serves the
   hand-written home page below.

   flex + gap rather than a margin on each item, exactly as that class does, so
   there is no trailing space to undo after the last one. The section block is
   named on the list rules for the same reason it is under ABOUT THE BOOK: the
   .library-rich-text defaults load later and would otherwise win on source
   order. */
.bonuses .bonuses__card-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding-left: 0;
}

/* Arrow bullets are for unordered lists only; an <ol> keeps its numbers and the
   generic rich-text indent. */
.bonuses .bonuses__card-body ul > li {
  position: relative;
  margin: 0;
  padding-left: var(--space-xl);
}

.bonuses__card-body ul > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-blue-primary);
  font-weight: var(--font-weight-bold);
}

.bonuses__card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  font-size: 1.375rem;
}

.bonuses__card-list li {
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.bonuses__card-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-blue-primary);
  font-weight: var(--font-weight-bold);
}

.bonuses__form-heading {
  text-align: center;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-2xl);
}

.bonus-form-region__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .bonus-form-region__layout {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}

.bonus-form-region__image {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.bonus-form-region__image img {
  width: 60%;
  max-width: 480px;
  height: auto;
  transform: rotate(-6deg);
  //box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .bonus-form-region__image img {
    width: 100%;
  }
}

.bonus-form-region__form {
  position: relative;
  z-index: 2;
  background-color: rgba(238, 238, 238, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  padding: 40px;
}

@media (min-width: 768px) {
  .bonus-form-region__form {
    margin-left: calc(-1 * var(--space-2xl));
  }
}

.bonuses__success {
  //max-width: 640px;
  margin: 0 auto;
  //background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  //padding: var(--space-2xl);
  text-align: center;
  scroll-margin-top: calc(var(--header-height) + var(--space-xl));
}

.bonuses__success-title {
  margin-bottom: var(--space-2xl);
  margin-top: var(--space-md);
}

.bonuses__success-subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3xl);
}

.bonuses__success-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.bonuses__success-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg);
  background-color: var(--color-bg);
  //border: 1px solid var(--color-blue-primary);
  border-radius: var(--radius-xl);
}

.bonuses__success-row span,
.bonuses__success-row strong {
  //color: #ffffff;
}

.bonuses__success-row-body {
  color: var(--color-text-secondary);
  //max-width: 560px;
}

.bonuses__success-row-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  //max-width: 560px;
  text-align: left;
}

.bonuses__success-row-list li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-text-secondary);
}

.bonuses__success-row-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-blue-secondary);
}


.bonuses__success-video {
  margin-top: var(--space-md);
  background-color: var(--color-bg);
  border-radius: var(--radius-xl);
}

.bonuses__success-video__header {
  text-align: center;
  border-bottom: 1px solid var(--color-gray-2);
  background-color: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-xl);
}

.bonuses__success-video__body {
  padding: var(--space-xl);
  background-color: var(--color-gray-1);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.bonuses__success-video-copy {
  text-align: center;
  padding: 10px 40px 50px 40px;
}

.bonuses__success-video h3 {
  margin-bottom: var(--space-sm);
}

.bonuses__success-video span {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.bonuses__success-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bonuses__success-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
}

.bonuses__success-note {
  margin-top: var(--space-xl);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ===== ABOUT THE BOOK ===== */

.about-book {
  padding-block: var(--space-section-y);
  background-color: var(--color-blue-primary);
}

.about-book .section__eyebrow {
  color: var(--color-blue-light);
}

.about-book__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .about-book__columns { grid-template-columns: 1fr 1fr; }
}

.about-book__col-title {
  font-size: 1.875rem;
  margin-bottom: var(--space-2xl);
  color: #FFFFFF;
}

/* A column's copy is one WYSIWYG field, so it arrives as bare <p>, <ul>, <li>
   and <strong> with no classes — hence descendant selectors on the body rather
   than the old .about-book__list / .about-book__paragraph classes. Typography
   is set once on the container and the nested blocks inherit it via the
   .library-rich-text rules at the foot of this file. The list rules name the
   section block as well: those same rich-text defaults load later and would
   otherwise win the cascade on source order. */
.about-book__body {
  color: var(--color-cool-gray);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-body-lg);
}

.about-book__body strong {
  color: #FFFFFF;
}

.about-book__body p + p {
  margin-top: var(--space-md);
}

.about-book .about-book__body ul {
  margin: 0 0 var(--space-lg);
  padding-left: 0;
}

/* Arrow bullets are for unordered lists only; an <ol> keeps its numbers and the
   generic rich-text indent. */
.about-book .about-book__body ul > li {
  position: relative;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-md);
}

.about-book__body ul > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-yellow);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
  .about-book__body {
    font-size: var(--font-size-form);
  }
}

/* ===== AUDIOBOOK ===== */

.audiobook {
  padding-block: var(--space-section-y);
}

.audiobook__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: var(--content-narrow-width);
  margin-inline: auto;
}

.audiobook__title {
  margin-bottom: var(--space-xs);
}

.audiobook__body {
  color: var(--color-text-secondary);
}

.audiobook__cover {
  width: 200px;
  margin: var(--space-xl) auto 0;
  border-radius: var(--radius-md);
}

.audiobook__player {
  width: 100%;
  max-width: 560px;
  margin-block: var(--space-md);
}

.audiobook__inner .plyr {
  width: 100%;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
  overflow: visible !important;
  --plyr-color-main: var(--color-blue-primary);
  --plyr-audio-controls-background: var(--color-gray-2);
  --plyr-audio-control-color: var(--color-blue-primary);
  --plyr-audio-control-color-hover: var(--color-blue-secondary);
  --plyr-audio-control-background-hover: transparent;
  --plyr-range-fill-background: var(--color-blue-primary);
  --plyr-range-thumb-background: var(--color-blue-primary);
  --plyr-control-spacing: 14px;
  --plyr-range-track-height: 4px;
  --plyr-range-thumb-height: 14px;
  --plyr-range-thumb-width: 14px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ===== TESTIMONIALS ===== */

.testimonials {
  padding-block: var(--space-section-y);
  background-color: var(--color-gray-2);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

/* ===== MEET AUTHORS ===== */

.meet-authors {
  //padding-block: var(--space-section-y);
  text-align: center;
}

.meet-authors__photos {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.meet-authors__photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.meet-authors__image {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.meet-authors__image--dan {
  object-position: 50% 0%;
}

@media (min-width: 768px) {
  .meet-authors__image {
    width: 240px;
    height: 240px;
  }
}

.meet-authors__name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body-lg);
}

.meet-authors__bio {
  max-width: var(--content-narrow-width);
  margin: var(--space-2xl) auto 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.meet-authors__bio p + p {
  margin-top: var(--space-md);
}

/* ===== FINAL CTA ===== */

.final-cta {
  padding-block: var(--space-section-y);
  background-color: var(--color-bg-alt);
  text-align: center;
}

.final-cta__title {
  margin-bottom: var(--space-md);
  color: var(--color-blue-primary);
}

.final-cta__body {
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-3xl);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.final-cta__retailer-label {
  margin: 0 0 var(--space-xl);
  color: var(--color-text-secondary);
  font-size: var(--font-size-form);
  font-weight: var(--font-weight-regular);
}

.final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .final-cta__buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .final-cta__buttons .button { width: 100%; }
}

.final-cta__buttons .button {
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  gap: var(--space-sm);
  flex-direction: column;
  color: var(--color-text-secondary); /* was text-muted (#888) — failed AA; text-secondary (#404040) passes */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-2xl);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow var(--transition-normal);
  flex: 1 1 0;
  min-height: 130px;
  white-space: normal;
  text-align: center;
}

.final-cta__buttons .button:hover {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.final-cta__retailer-logo {
  display: block;
  width: auto;
  filter: none;
  opacity: 1;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.final-cta__buttons .button:hover .final-cta__retailer-logo {
  filter: brightness(0);
  opacity: 0.55;
}

.final-cta__retailer-logo--amazon { 
  height: 30px; 
  //transform: translateY(15px); 
  transform: translateY(6px); 
}
.final-cta__retailer-logo--audible { 
  height: 33px; 
  //transform: translateY(0); 
  transform: translateY(-5px); 
}
.final-cta__retailer-logo--sc-store { 
  height: 75px; 
  //transform: translateY(5px); 
}
.final-cta__retailer-logo--porchlight { 
  height: 55px; 
  //transform: translateY(-7px); 
}
.final-cta__retailer-logo--barnes-noble { 
  height: 16px; 
  //transform: translateY(8px); 
}
.final-cta__retailer-logo--bookshop { 
  height: 25px; 
  //transform: translateY(6px); 
}

/* ===== PODCAST PAGE ===== */

.podcast-page {
  padding-block: var(--space-section-y);
  text-align: center;
  background-color: var(--color-gray-2);
}

.podcast-page__title {
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-2xl);
}

.podcast-page__body {
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-md);
  color: var(--color-text-secondary);
}

.podcast-page__subscribe-card {
  background-color: #EBF2F7;
}

.podcast-page__subscribe-label {
  //margin-top: var(--space-2xl);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.podcast-page__subscribe-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.podcast-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 100px;
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity var(--transition-fast);
}

.podcast-btn:hover {
  opacity: 0.7;
}

.podcast-btn__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.podcast-page__note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ===== MEASUREMENTS PAGE ===== */

.measurements-page {
  padding-block: var(--space-section-y);
  background-color: var(--color-gray-2);
}

.measurements-page__intro {
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-2xl);
  text-align: center;
}

.measurements-page__intro-body {
  margin-top: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.measurements-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .measurements-page__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .measurements-page__grid { grid-template-columns: repeat(4, 1fr); }
}

.measurement-card__stage {
  display: block;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  color: var(--color-blue-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.measurement-card__name {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-md);
}

.measurement-card__body {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.measurements-page__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.measurements-page__cta-text {
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

/* ===== AUTHORS PAGE ===== */

.authors-page {
  padding-block-start: var(--space-section-y);
  padding-block-start: 0;
  padding-block-end: 0;
  background-color: var(--color-bg);
}

.authors-page__hero {
  text-align: center;
  max-width: var(--content-narrow-width);
  margin: auto;
  padding: 60px 0;
}

.author-section {
  padding-block: var(--space-lg) 0;
  background-color: var(--color-gray-2);
  overflow: hidden;
}

.author-section--reverse {
  background-color: var(--color-cool-gray);
}

.author-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 768px) {
  .author-section__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); }
  .author-section--reverse .author-section__inner { grid-template-columns: 1fr 1.1fr; }
  .author-section--reverse .author-section__image { order: 2; }
}

.author-section__content {
  padding-block: var(--space-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .author-section__content { padding-block: var(--space-section-y); }
}

.author-section__image {
  align-self: end;
  position: relative;
}

.author-section__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 59%, var(--color-gray-2) 100%);
  pointer-events: none;
}

.author-section--reverse .author-section__image::after {
  background: linear-gradient(to bottom, transparent 55%, var(--color-cool-gray) 100%);
}

@media (min-width: 768px) {
  .author-section__image::after { display: none; }
}

.author-section__image img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.author-section--reverse .author-section__image img {
  width: 88%;
  margin-inline: auto;
}

.author-section__name {
  margin-bottom: var(--space-md);
  color: var(--color-blue-primary);
}

.author-section__bio {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

.authors-page__closing-wrap {
  background-color: var(--color-gray-2);
  padding-block: var(--space-3xl);
}

.authors-page__closing {
  text-align: center;
  max-width: var(--content-narrow-width);
  margin: 0 auto;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-blue-primary);
  line-height: var(--line-height-relaxed);
}

/* ===== BULK ORDERS PAGE ===== */

.bulk-orders-page {
  padding-block: var(--space-section-y);
  background-color: var(--color-gray-2);
  flex: 1;
}

.bulk-orders-page__hero {
  text-align: center;
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-2xl);
}

.bulk-orders-page__body {
  margin-top: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: left;
}

.porchlight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  background-color: var(--color-gray-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
  text-align: center;
}

.podcast-page__subscribe-card.porchlight-card {
  background-color: var(--color-bg);
}

.porchlight-card__body {
  flex: 1;
  color: var(--color-text-secondary);
}

.button__retailer-logo {
  height: 44px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(766%) hue-rotate(163deg) brightness(94%) contrast(93%);
  transition: filter var(--transition-fast);
}

.button:hover .button__retailer-logo {
  filter: brightness(0) invert(1);
}

/* ===========================================================================
   Library component sections. Layout for the Butter-backed components that had
   no direct counterpart in the original single-tenant site.
   =========================================================================== */

/* Interior-page hero (library_hero) */
.page-hero { padding: var(--space-section-y) 0 var(--space-2xl); }
.page-hero__inner { text-align: center; }
.page-hero__body {
  max-width: var(--content-narrow-width);
  margin: 0 auto var(--space-xl);
  color: var(--color-text-secondary);
  /* Long-form prose. Two of the three hand-written intros this replaced —
     .bulk-orders-page__body and .measurements-page__intro-body — set relaxed
     leading and lost it in the port; only .podcast-page__body did not. */
  line-height: var(--line-height-relaxed);
}
.page-hero__image { max-width: 100%; height: auto; margin-top: var(--space-xl); }

/* Generic rich text (library_text_block) */
.text-block { padding: var(--space-section-y) 0; }
.text-block--center { text-align: center; }
.text-block__body {
  color: var(--color-text-secondary);
  /* As .page-hero__body: every hand-written prose block set relaxed leading. */
  line-height: var(--line-height-relaxed);
}

/* Retailer strip as a page component (library_retailer_bar) */
.retailer-bar { padding: var(--space-lg) 0; border-block: 1px solid var(--color-border); }
.retailer-bar__intro {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-small);
  text-align: center;
  color: var(--color-text-secondary);
}
.retailer-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: center;
}
.retailer-bar__logo { max-height: 28px; width: auto; }
.retailer-bar--grid .retailer-bar__list { gap: var(--space-xl); }

/* Framework list (library_framework_list) */
.framework-list { padding: var(--space-section-y) 0; }
.framework-list__intro { text-align: center; margin-bottom: var(--space-2xl); }
.framework-list__intro-body {
  max-width: var(--content-narrow-width);
  margin: 0 auto;
  color: var(--color-text-secondary);
}
.framework-list__grid { display: grid; gap: var(--space-lg); }
.framework-list__grid--2 { grid-template-columns: 1fr; }
.framework-list__grid--3 { grid-template-columns: 1fr; }
.framework-list__grid--4 { grid-template-columns: 1fr; }
.framework-list__icon { max-height: 48px; width: auto; margin-bottom: var(--space-md); }
.framework-list__label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
.framework-list__name { margin-bottom: var(--space-sm); }
.framework-list__body { color: var(--color-text-secondary); }
.framework-list__cta { margin-top: var(--space-2xl); text-align: center; }
.framework-list__cta-text { margin-bottom: var(--space-md); }

@media (min-width: 768px) {
  .framework-list__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .framework-list__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .framework-list__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .framework-list__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Standalone button row (library_buttons) */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}
.button-row--left   { justify-content: flex-start; }
.button-row--center { justify-content: center; }
.button-row--right  { justify-content: flex-end; }

/* Logo marquee items (library_logo_marquee) */
.marquee__item { display: inline-flex; align-items: center; padding-inline: var(--space-xl); }
.marquee__logo { max-height: 40px; width: auto; }
.marquee--slow   .marquee__track { animation-duration: 60s; }
.marquee--medium .marquee__track { animation-duration: 40s; }
.marquee--fast   .marquee__track { animation-duration: 20s; }

/* Author role line (library_author_list) */
.author-section__title {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Audiobook player (library_audiobook) */
.audiobook__player { width: 100%; margin-block: var(--space-lg); }

/* Hero with no video collapses to a single column */
.hero__content--no-video { grid-template-columns: 1fr; }

/* Dark call to action (library_call_to_action theme=dark) */
.final-cta--dark {
  background: var(--color-blue-primary);
  color: var(--color-cta-text);
}
.final-cta--dark .final-cta__title,
.final-cta--dark .final-cta__body { color: var(--color-cta-text); }

/* ===========================================================================
   Bonuses section heading
   main styles this text via `#bonuses-pre-form .section__eyebrow` on an <h1>.
   library_bonus_form renders it as a semantic h2.section__title instead, so the
   same treatment is scoped to the component. Values kept in step with that rule.
   =========================================================================== */
.bonuses .section__title {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--color-blue-primary);
  margin-bottom: calc(var(--space-3xl) + var(--space-lg));
}

/* Retailer logos are sized by per-retailer modifier classes (--amazon,
   --sc-store, --barnes-noble, …). .final-cta__retailer-logo has no base height, so
   a logo whose Logo Key matches no rule rendered at intrinsic SVG size — which on
   these files is several hundred pixels tall. This caps the fallback: a
   misconfigured key now looks slightly wrong rather than breaking the layout. */
.final-cta__retailer-logo { max-height: 40px; }
.retailer-bar__logo { max-height: 32px; }


/* ===========================================================================
   WYSIWYG containers (.library-rich-text)

   The live site puts typography classes directly on the <p>, e.g.
   `<p class="testimonials-grid__quote">`, so the class wins over the base `p`
   rule. Butter returns a WYSIWYG field as its own markup, so a component has to
   wrap it: `<div class="testimonials-grid__quote"><p>…</p></div>`. The inner <p>
   then matches base.css `p { font-size: var(--font-size-body-lg) }` — 1.5rem —
   and overrides the container. On the testimonial quote that meant 24px instead
   of 16px.

   One rule, applied to every WYSIWYG container, rather than a per-container fix:
   nested block elements take the container's typography.
   =========================================================================== */
.library-rich-text > p,
.library-rich-text > ul,
.library-rich-text > ol,
.library-rich-text > blockquote {
  font-size: inherit;
  line-height: inherit;
}

.library-rich-text > :first-child { margin-top: 0; }
.library-rich-text > :last-child { margin-bottom: 0; }

/* Lists arrive from Butter as bare <ul>/<ol> with no class. */
.library-rich-text ul,
.library-rich-text ol {
  margin: var(--space-md) 0;
  padding-left: var(--space-lg);
}

.library-rich-text li { margin-bottom: var(--space-xs); }
.library-rich-text li:last-child { margin-bottom: 0; }

/* ===========================================================================
   Section bands. The vocabulary for the Butter `css_class` fields, applied by
   pages/show.html.erb — to each component's wrapper div, and to the single
   <section> the page type's own css_class wraps every component in.

   Together these are what a page composed of components uses to reproduce the
   banding the hand-written pages got from their root <section> — the grey
   behind /podcast and /bulk-book-orders, for example.

   Composable: `css_class` takes a space-separated list, e.g.
   "section--muted section--fill".
   =========================================================================== */

/* The grey band. Matches the legacy .podcast-page / .measurements-page /
   .bulk-orders-page background. */
.section--muted { background-color: var(--color-gray-2); }

/* The lighter band, matching the header and footer surface. */
.section--alt { background-color: var(--color-bg-alt); }

/* Vertical padding, for components that carry none of their own.
   Most section-rooted components already pad themselves — .text-block,
   .page-hero, .framework-list — and adding this to those would double it.
   The components that need it are the ones rooting at a bare .container:
   library_buttons, library_partner_card, library_podcast_subscribe.

   The one-sided pair is for a page band whose ends are padded unequally by
   what is inside it. A page opening with library_hero already has its top
   padding from .page-hero and needs only --pad-end; using --pad there would
   stack two full --space-section-y at the top. */
.section--pad       { padding-block: var(--space-section-y); }
.section--pad-start { padding-block-start: var(--space-section-y); }
.section--pad-end   { padding-block-end: var(--space-section-y); }

/* Stretch a band to the footer. <main> is a column flex container
   (layout.css), so this makes a short page fill the viewport instead of
   leaving white below the band. This is what .bulk-orders-page used flex: 1
   for, and what .podcast-page was missing.

   Goes on whichever element is the direct child of <main>: the last component
   wrapper on an unwrapped page, or the page <section> when the page type's
   css_class is set. Inside a page <section> it has no effect, since that
   section is not itself a flex container. */
.section--fill { flex: 1; }


/* ===========================================================================
   Prose alignment, as a context.

   The hand-written pages tuned their copy through per-page BEM blocks, so each
   page's body carried its own rules: .bulk-orders-page__body set
   text-align: left inside a .bulk-orders-page__hero that was centred, while
   .podcast-page__body and .measurements-page__intro-body stayed centred. The
   components collapsed all three into one .page-hero__body, which can only
   have one alignment — so the bulk-orders copy came back centred.

   Those legacy selectors cannot be revived by naming a page. They are flat BEM
   (`.bulk-orders-page__body`), matching only an element that literally carries
   that class, so a page-level css_class of "bulk-orders-page" reaches nothing:
   the element beneath it is .page-hero__body. A page class only works as a
   CONTEXT, which means a descendant selector — the form used here.

   The hook is .library-rich-text, which every WYSIWYG body container already
   carries and a test in ComponentsTest enforces. So one pair of rules covers
   every component, at any depth, and works identically whether the class is
   typed into a component's css_class or the page's.

   Only the body copy moves; headings keep the alignment their component gives
   them. That is exactly the legacy shape — centred hero, left-aligned prose. */
.section--body-left  .library-rich-text { text-align: left; }
.section--body-right .library-rich-text { text-align: right; }

/* The inverse, for a component whose own rules align left. */
.section--body-center .library-rich-text { text-align: center; }

/* "At any depth" reaches further than intended: a self-contained card that
   happens to sit in the section is not the section's prose, and its own centring
   is part of the card rather than a default waiting to be overridden. On
   /bulk-book-orders the page carries section--body-left for its two intro
   paragraphs, and that was pulling the Porchlight card's single centred line
   flush left under a centred logo.

   Two classes each, the same as the rules above, so these have to stay below
   them. Named per component because only the component knows its body is not
   the section's prose. */
.section--body-left  .porchlight-card__body,
.section--body-right .porchlight-card__body,
.section--body-left  .author-section__bio,
.section--body-right .author-section__bio {
  text-align: center;
}