/*
  McCamley Mobile Overrides
  Purpose: final responsive/mobile/tablet stylesheet loaded after main.css.
  Keep changes targeted, reversible, and scoped to mobile/tablet where possible.
*/

/* ==========================================================================
   Homepage Hero — Responsive Book Cover Scaling
   ========================================================================== */

@media (max-width: 1399px) {
  .hero .hero-book,
  .hero .hero-book img,
  .hero .book-cover,
  .hero .book-cover img {
    max-height: 560px;
  }
}

@media (max-width: 1199px) {
  .hero .hero-book,
  .hero .hero-book img,
  .hero .book-cover,
  .hero .book-cover img {
    max-height: 500px;
  }
}

@media (max-width: 1200px) {
  .hero .hero-book,
  .hero .hero-book img,
  .hero .book-cover,
  .hero .book-cover img {
    max-height: 430px;
  }
}

@media (max-width: 575px) {
  .hero .hero-book,
  .hero .hero-book img,
  .hero .book-cover,
  .hero .book-cover img {
    max-height: 360px;
  }
}

/* ==========================================================================
   Homepage Hero — Responsive 3D Book Scaling
   ========================================================================== */

@media (max-width: 1399px) {
  .hero.hero-book .hero-book-3d {
    max-width: 420px !important;
  }
}

@media (max-width: 1199px) {
  .hero.hero-book .hero-book-3d {
    max-width: 370px !important;
  }
}

@media (max-width: 1200px) {
  .hero.hero-book .hero-book-3d {
    max-width: 320px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 575px) {
  .hero.hero-book .hero-book-3d {
    max-width: 270px !important;
  }
}

/* ==========================================================================
   Homepage Hero — Mobile/Tablet Type Scale
   ========================================================================== */

@media (max-width: 1200px) {
  .hero.hero-book h1 {
    font-size: clamp(2.7rem, 7.5vw, 4.35rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  .hero.hero-book .lead,
  .hero.hero-book p.lead {
    font-size: clamp(1.12rem, 2.6vw, 1.35rem) !important;
    line-height: 1.55 !important;
    max-width: 42rem !important;
  }
}

@media (max-width: 575px) {
  .hero.hero-book h1 {
    font-size: clamp(2.55rem, 10.8vw, 3.35rem) !important;
    line-height: 1 !important;
  }

  .hero.hero-book .lead,
  .hero.hero-book p.lead {
    font-size: clamp(1.08rem, 4.4vw, 1.22rem) !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   Homepage Hero — Mobile CTA Width + Centering
   ========================================================================== */

@media (max-width: 575px) {
  .hero.hero-book .hero-cta,
  .hero.hero-book .hero-buttons,
  .hero.hero-book .cta-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
  }

  .hero.hero-book .hero-cta .btn,
  .hero.hero-book .hero-buttons .btn,
  .hero.hero-book .cta-group .btn,
  .hero.hero-book a.btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .hero.hero-book .hero-cta,
  .hero.hero-book .hero-buttons,
  .hero.hero-book .cta-group {
    justify-content: center !important;
  }

  .hero.hero-book .hero-cta .btn,
  .hero.hero-book .hero-buttons .btn,
  .hero.hero-book .cta-group .btn,
  .hero.hero-book a.btn {
    width: auto !important;
    min-width: 220px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Why This Book — Mobile Image Rhythm + CTA Placement
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-book-layout,
  #why-this-book .why-audience-layout {
    row-gap: 2rem !important;
  }

  #why-this-book .why-book-layout > [class*="col-"],
  #why-this-book .why-audience-layout > [class*="col-"] {
    width: 100% !important;
  }

  #why-this-book .why-book-visual,
  #why-this-book .why-audience-visual {
    max-width: min(88vw, 360px) !important;
    margin: 0 auto 1.35rem !important;
  }

  #why-this-book .why-book-visual img,
  #why-this-book .why-audience-visual img {
    width: 100% !important;
    max-height: 340px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #why-this-book .why-book-quote-actions,
  #why-this-book .why-audience-image-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
    margin-top: 1.35rem !important;
  }

  #why-this-book .why-book-quote-actions .btn,
  #why-this-book .why-audience-image-actions .btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #why-this-book .why-audience {
    margin-top: 3.25rem !important;
    padding-top: 3rem !important;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 84%) !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .why-book-visual,
  #why-this-book .why-audience-visual {
    max-width: min(86vw, 310px) !important;
  }

  #why-this-book .why-book-visual img,
  #why-this-book .why-audience-visual img {
    max-height: 295px !important;
  }

  #why-this-book .why-audience {
    margin-top: 2.75rem !important;
    padding-top: 2.5rem !important;
  }
}

/* ==========================================================================
   Why This Book — Hide Decorative Images on Mobile/Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-book-visual,
  #why-this-book .why-audience-visual {
    display: none !important;
  }

  #why-this-book .why-book-layout,
  #why-this-book .why-audience-layout {
    row-gap: 0 !important;
  }

  #why-this-book .why-audience {
    margin-top: 3rem !important;
    padding-top: 2.5rem !important;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 84%) !important;
  }
}

/* ==========================================================================
   Why This Book — Move Audience Buttons Below Mobile Text
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-audience-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  #why-this-book .why-audience-layout > [class*="col-"]:has(.why-audience-image-actions) {
    order: 2 !important;
  }

  #why-this-book .why-audience-layout > [class*="col-"]:not(:has(.why-audience-image-actions)) {
    order: 1 !important;
  }

  #why-this-book .why-audience-image-actions {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   Why This Book — Requested Mobile Heading + Section Spacing Fixes
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-book-content h2,
  #why-this-book .why-audience-content h2 {
    font-size: clamp(2.25rem, 8.5vw, 3.35rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  #why-this-book .why-audience {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
  }

  #why-this-book .why-audience-image-actions {
    margin-top: 1rem !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .why-book-content h2,
  #why-this-book .why-audience-content h2 {
    font-size: clamp(2.15rem, 10vw, 2.9rem) !important;
  }

  #why-this-book .why-audience {
    margin-top: 1.15rem !important;
    padding-top: 1.25rem !important;
  }

  #why-this-book .why-audience-image-actions {
    margin-top: 0.85rem !important;
  }
}

/* ==========================================================================
   Why This Book — Corrected Mobile Heading + Button Spacing
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .section-heading {
    font-size: clamp(2.65rem, 9vw, 3.7rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  #why-this-book .why-book-quote-actions,
  #why-this-book .why-audience-image-actions {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
  }

  #why-this-book .why-audience {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .section-heading {
    font-size: clamp(2.45rem, 11.5vw, 3.15rem) !important;
  }

  #why-this-book .why-book-quote-actions,
  #why-this-book .why-audience-image-actions {
    margin-top: 0.5rem !important;
  }

  #why-this-book .why-audience {
    margin-top: 0.75rem !important;
    padding-top: 0.85rem !important;
  }
}

/* ==========================================================================
   Why This Book — Tighten Final CTA Gap Only
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-audience-layout > [class*="col-"]:has(.why-audience-image-actions) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #why-this-book .why-audience-image-actions {
    margin-top: -0.5rem !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .why-audience-image-actions {
    margin-top: 0.35rem !important;
  }
}

/* ==========================================================================
   What This Book Takes On — Mobile Type + Button Sizing
   ========================================================================== */

@media (max-width: 1200px) {
  .services.themes-section .section-heading,
  #themes .section-heading,
  #what-this-book-takes-on .section-heading {
    font-size: clamp(2.65rem, 9vw, 3.7rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  .services.themes-section .section-lead,
  #themes .section-lead,
  #what-this-book-takes-on .section-lead {
    font-size: clamp(1.08rem, 3.4vw, 1.25rem) !important;
    line-height: 1.58 !important;
  }

  .services.themes-section .cta-group,
  .services.themes-section .hero-cta,
  .services.themes-section .theme-actions,
  #themes .cta-group,
  #themes .hero-cta,
  #themes .theme-actions,
  #what-this-book-takes-on .cta-group,
  #what-this-book-takes-on .hero-cta,
  #what-this-book-takes-on .theme-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
  }

  .services.themes-section .btn,
  #themes .btn,
  #what-this-book-takes-on .btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 575px) {
  .services.themes-section .section-heading,
  #themes .section-heading,
  #what-this-book-takes-on .section-heading {
    font-size: clamp(2.45rem, 11.5vw, 3.15rem) !important;
  }

  .services.themes-section .btn,
  #themes .btn,
  #what-this-book-takes-on .btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
  }
}

/* ==========================================================================
   What This Book Takes On — Mobile Order, Heading, and Buttons
   ========================================================================== */

@media (max-width: 1200px) {
  #what-this-book-takes-on .services-row > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  #what-this-book-takes-on .services-headline {
    order: 1 !important;
  }

  #what-this-book-takes-on .services-description {
    order: 2 !important;
  }

  #what-this-book-takes-on .services-row > .row > .col-lg-8 {
    order: 3 !important;
  }

  #what-this-book-takes-on .theme-section-actions {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.85rem !important;
    margin-top: 1.5rem !important;
  }

  #what-this-book-takes-on .services-title {
    font-size: clamp(2.65rem, 9vw, 3.7rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
  }

  #what-this-book-takes-on .theme-section-actions .btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 575px) {
  #what-this-book-takes-on .services-title {
    font-size: clamp(2.45rem, 11.5vw, 3.15rem) !important;
  }

  #what-this-book-takes-on .theme-section-actions {
    margin-top: 1.25rem !important;
  }
}

/* ==========================================================================
   What This Book Takes On — Center Mobile Actions
   ========================================================================== */

@media (max-width: 1200px) {
  #what-this-book-takes-on .theme-section-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
  }

  #what-this-book-takes-on .theme-section-actions .btn {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Slider Controls Beside Card
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slider-shell {
    position: relative !important;
  }

  #stay-connected .conversation-slider-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 42% !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 0.35rem !important;
  }

  #stay-connected .conversation-control {
    pointer-events: auto !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slider-controls {
    top: 40% !important;
    padding: 0 0.15rem !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Card Button Width
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide-actions {
    display: flex !important;
    justify-content: center !important;
  }

  #stay-connected .conversation-slide-actions .btn {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide-actions .btn {
    width: min(100%, 260px) !important;
    max-width: 260px !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Image/Text Gap
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide-visual {
    margin-bottom: 1rem !important;
  }

  #stay-connected .conversation-slide-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide-visual {
    margin-bottom: 0.75rem !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Control Size + Image/Text Gap
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide {
    gap: 0.85rem !important;
  }

  #stay-connected .conversation-slide-content {
    gap: 0.75rem !important;
  }

  #stay-connected .conversation-control {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide {
    gap: 0.65rem !important;
  }

  #stay-connected .conversation-slide-content {
    gap: 0.6rem !important;
  }

  #stay-connected .conversation-control {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   Stay Connected — Pull Mobile Card Text Up
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide-content {
    margin-top: -2rem !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide-content {
    margin-top: -2.75rem !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Card Text Styling
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide h3 {
    color: var(--heading-color) !important;
    font-size: clamp(2rem, 7.5vw, 2.75rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    max-width: 12ch !important;
  }

  #stay-connected .conversation-slide p {
    color: var(--default-color) !important;
    font-size: clamp(1rem, 3.4vw, 1.15rem) !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide h3 {
    font-size: clamp(1.9rem, 8.8vw, 2.45rem) !important;
  }
}

/* ==========================================================================
   Stay Connected — Match Mobile Card Text to Section Heading Style
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide h3 {
    color: var(--heading-color) !important;
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    font-size: clamp(2.15rem, 8vw, 2.85rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    max-width: 13ch !important;
  }

  #stay-connected .conversation-slide-label {
    color: var(--accent-color) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
    font-weight: 800 !important;
  }

  #stay-connected .conversation-slide p {
    color: var(--default-color) !important;
    font-size: clamp(1rem, 3.2vw, 1.12rem) !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide h3 {
    font-size: clamp(2rem, 8.6vw, 2.45rem) !important;
  }
}

/* ==========================================================================
   Stay Connected — Match Mobile Card Text to Section Heading Style
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide h3 {
    color: var(--heading-color) !important;
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    font-size: clamp(2.15rem, 8vw, 2.85rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    max-width: 13ch !important;
  }

  #stay-connected .conversation-slide-label {
    color: var(--accent-color) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.22em !important;
    font-weight: 800 !important;
  }

  #stay-connected .conversation-slide p {
    color: var(--default-color) !important;
    font-size: clamp(1rem, 3.2vw, 1.12rem) !important;
    line-height: 1.58 !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide h3 {
    font-size: clamp(2rem, 8.6vw, 2.45rem) !important;
  }
}

/* ==========================================================================
   Stay Connected — Mobile Primary Card Text Readability
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide-primary .conversation-slide-label,
  #stay-connected .conversation-slide:first-child .conversation-slide-label {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  #stay-connected .conversation-slide-primary h3,
  #stay-connected .conversation-slide:first-child h3 {
    color: #ffffff !important;
  }

  #stay-connected .conversation-slide-primary p,
  #stay-connected .conversation-slide:first-child p {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  #stay-connected .conversation-slide-primary p strong,
  #stay-connected .conversation-slide-primary p em,
  #stay-connected .conversation-slide:first-child p strong,
  #stay-connected .conversation-slide:first-child p em {
    color: #ffffff !important;
  }
}

/* ==========================================================================
   Stay Connected — Keep First Mobile Card Text Below Image
   ========================================================================== */

@media (max-width: 1200px) {
  #stay-connected .conversation-slide:first-child .conversation-slide-content,
  #stay-connected .conversation-slide-primary .conversation-slide-content {
    margin-top: 0.75rem !important;
  }
}

@media (max-width: 575px) {
  #stay-connected .conversation-slide:first-child .conversation-slide-content,
  #stay-connected .conversation-slide-primary .conversation-slide-content {
    margin-top: 0.65rem !important;
  }
}

/* ==========================================================================
   Watch / Listen / Read — Mobile Slider Controls
   ========================================================================== */

@media (max-width: 1200px) {
  #watch-listen-read .media-prototype-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin: 1.25rem auto 0 !important;
  }

  #watch-listen-read .media-prototype-prev,
  #watch-listen-read .media-prototype-next {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(27, 67, 145, 0.22) !important;
    box-shadow: 0 10px 24px rgba(5, 28, 65, 0.12) !important;
    color: var(--accent-color) !important;
  }

  #watch-listen-read .media-prototype-prev::after,
  #watch-listen-read .media-prototype-next::after {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  #watch-listen-read .media-prototype-pagination {
    position: static !important;
    width: auto !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }
}

@media (max-width: 575px) {
  #watch-listen-read .media-prototype-prev,
  #watch-listen-read .media-prototype-next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  #watch-listen-read .media-prototype-prev::after,
  #watch-listen-read .media-prototype-next::after {
    font-size: 0.9rem !important;
  }
}

/* ==========================================================================
   Speaking / Events — Mobile Heading Consistency
   ========================================================================== */

@media (max-width: 1200px) {
  #speaking-media .speaking-media-intro h2,
  #speaking-media .event-format-heading h3 {
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    font-size: clamp(2.45rem, 9vw, 3.25rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }

  #speaking-media .event-format-heading h3 {
    font-size: clamp(2.25rem, 8vw, 3rem) !important;
  }
}

/* ==========================================================================
   Speaking / Events — Heading Consistency, All Viewports
   ========================================================================== */

#speaking-media .speaking-media-intro h2,
#speaking-media .event-format-heading h3 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
}

#speaking-media .speaking-media-intro h2 {
  font-size: clamp(3rem, 5vw, 5rem) !important;
}

#speaking-media .event-format-heading h3 {
  font-size: clamp(2.25rem, 3.4vw, 3.25rem) !important;
}

@media (max-width: 1200px) {
  #speaking-media .speaking-media-intro h2 {
    font-size: clamp(2.45rem, 9vw, 3.25rem) !important;
  }

  #speaking-media .event-format-heading h3 {
    font-size: clamp(2.25rem, 8vw, 3rem) !important;
  }
}

/* ==========================================================================
   Speaking / Events — Desktop Lead Weight
   ========================================================================== */

@media (min-width: 1201px) {
  #speaking-media .speaking-media-intro .lead {
    font-weight: 500 !important;
  }
}

/* ==========================================================================
   Speaking / Events — Event Date Badge Alignment
   ========================================================================== */

#speaking-media .event-date {
  justify-content: center !important;
  gap: 0.15rem !important;
}

#speaking-media .event-month {
  line-height: 1 !important;
  margin-bottom: 0 !important;
}

#speaking-media .event-day {
  line-height: 0.95 !important;
  margin-top: -0.05rem !important;
}

/* ==========================================================================
   Speaking / Events — Event Day Tighter Under Month
   ========================================================================== */

#speaking-media .event-day {
  margin-top: -0.22rem !important;
}

/* ==========================================================================
   Speaking / Events — Date Badge Month/Day Alignment
   ========================================================================== */

#speaking-media .event-date {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.08rem !important;
  text-align: center !important;
}

#speaking-media .event-month {
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: translateY(0.08rem) !important;
}

#speaking-media .event-day {
  display: block !important;
  line-height: 0.9 !important;
  margin: 0 !important;
  transform: translateY(-0.08rem) !important;
}

/* ==========================================================================
   Why This Book — Match Who It's For Mobile Heading
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-audience .section-heading {
    font-size: clamp(3rem, 12vw, 4.25rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    max-width: 9.5ch !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .why-audience .section-heading {
    font-size: clamp(2.85rem, 13.5vw, 3.85rem) !important;
    line-height: 0.95 !important;
  }
}

/* ==========================================================================
   Why This Book — Match Who It's For Mobile Heading, Correct Selector
   ========================================================================== */

@media (max-width: 1200px) {
  #why-this-book .why-audience-heading {
    font-size: clamp(3rem, 12vw, 4.25rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    max-width: 9.5ch !important;
  }
}

@media (max-width: 575px) {
  #why-this-book .why-audience-heading {
    font-size: clamp(2.85rem, 13.5vw, 3.85rem) !important;
    line-height: 0.95 !important;
  }
}

/* ==========================================================================
   Why This Book — Slightly Reduce Who It's For Heading on Mobile
   ========================================================================== */

@media (max-width: 575px) {
  #why-this-book .why-audience-heading {
    font-size: clamp(2.55rem, 11.5vw, 3.35rem) !important;
    line-height: 0.96 !important;
  }
}

/* ==========================================================================
   Why This Book — Loosen Who It's For Heading Width on Mobile
   ========================================================================== */

@media (max-width: 575px) {
  #why-this-book .why-audience-heading {
    max-width: 11.5ch !important;
  }
}

/* ==========================================================================
   Footer — Mobile Centered Layout
   ========================================================================== */

@media (max-width: 767px) {
  .footer {
    text-align: center !important;
  }

  .footer .container,
  .footer .row,
  .footer [class*="col-"] {
    text-align: center !important;
  }

  .footer .footer-about,
  .footer .footer-links,
  .footer .footer-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer .sitename,
  .footer h3,
  .footer h4,
  .footer p {
    text-align: center !important;
  }

  .footer p {
    max-width: 34rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .social-links,
  .footer .footer-socials {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer-links ul,
  .footer ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }

  .footer .footer-links li,
  .footer li {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer .footer-links a,
  .footer a {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer .row {
    row-gap: 2rem !important;
  }
}

/* ==========================================================================
   Footer — Mobile Centered Layout
   ========================================================================== */

@media (max-width: 767px) {
  .footer {
    text-align: center !important;
  }

  .footer .container,
  .footer .row,
  .footer [class*="col-"] {
    text-align: center !important;
  }

  .footer .footer-about,
  .footer .footer-links,
  .footer .footer-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer .sitename,
  .footer h3,
  .footer h4,
  .footer p {
    text-align: center !important;
  }

  .footer p {
    max-width: 34rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .social-links,
  .footer .footer-socials {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer-links ul,
  .footer ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }

  .footer .footer-links li,
  .footer li {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer .footer-links a,
  .footer a {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer .row {
    row-gap: 2rem !important;
  }
}

/* ==========================================================================
   Footer — Compact Mobile Link Grid
   ========================================================================== */

@media (max-width: 767px) {
  .footer {
    text-align: center !important;
  }

  .footer .row {
    row-gap: 1.6rem !important;
  }

  .footer .footer-about {
    margin-bottom: 0.75rem !important;
  }

  .footer .social-links,
  .footer .footer-socials {
    justify-content: center !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .footer .footer-links {
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .footer .footer-links h4 {
    margin-bottom: 0.65rem !important;
  }

  .footer .footer-links ul {
    padding-left: 0 !important;
    margin: 0 !important;
  }

  .footer .footer-links li {
    margin-bottom: 0.4rem !important;
  }

  .footer .footer-links a {
    display: inline-flex !important;
    justify-content: center !important;
  }

  .footer .row > [class*="col-"]:not(:first-child) {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 420px) {
  .footer .row > [class*="col-"]:not(:first-child) {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .footer .footer-links h4 {
    font-size: 1rem !important;
  }

  .footer .footer-links a {
    font-size: 0.92rem !important;
  }
}

/* ==========================================================================
   Footer — Mobile Flush-Left Layout
   ========================================================================== */

@media (max-width: 767px) {
  .footer,
  .footer .container,
  .footer .row,
  .footer [class*="col-"],
  .footer .footer-about,
  .footer .footer-links,
  .footer .footer-contact,
  .footer .sitename,
  .footer h3,
  .footer h4,
  .footer p,
  .footer li,
  .footer a {
    text-align: left !important;
  }

  .footer .footer-about,
  .footer .footer-links,
  .footer .footer-contact {
    align-items: flex-start !important;
  }

  .footer p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .footer .social-links,
  .footer .footer-socials {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .footer .footer-links a,
  .footer a {
    justify-content: flex-start !important;
  }

  .footer .footer-links li,
  .footer li {
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   Footer — Mobile Social Icon Centering
   ========================================================================== */

@media (max-width: 767px) {
  .footer .social-links a,
  .footer .footer-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .footer .social-links a i,
  .footer .footer-socials a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   Homepage — Mobile Heading Font Consistency
   ========================================================================== */

@media (max-width: 767px) {
  .index-page #why-bill .section-heading,
  .index-page .conversation-slider-header h2,
  .index-page #watch-listen-read .section-title h2,
  .index-page #speaking-media .speaking-media-intro h2 {
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }
}

/* ==========================================================================
   Sitewide — Mobile CTA System
   Keeps buttons tappable without making short CTAs feel oversized.
   ========================================================================== */

@media (max-width: 767px) {
  .btn,
  a.btn,
  button.btn,
  .submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: min(100%, 12rem) !important;
    max-width: min(100%, 18rem) !important;
    min-height: 44px !important;
    padding-block: clamp(0.62rem, 2.4vw, 0.76rem) !important;
    padding-inline: clamp(1rem, 4.6vw, 1.35rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(0.9rem, 3.7vw, 1rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .hero .btn,
  .hero a.btn,
  .hero button.btn {
    min-width: min(100%, 13rem) !important;
    max-width: min(100%, 18rem) !important;
  }

  .cta-group,
  .hero-cta,
  .hero-buttons,
  .button-group,
  .theme-section-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .header .btn-getstarted {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding-block: 0.54rem !important;
    padding-inline: 0.9rem !important;
    margin-left: auto !important;
    margin-right: 0.45rem !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .btn,
  a.btn,
  button.btn,
  .submit-btn {
    min-width: min(100%, 11.25rem) !important;
    max-width: min(100%, 16.5rem) !important;
    padding-inline: clamp(0.88rem, 4.2vw, 1.12rem) !important;
    font-size: clamp(0.84rem, 3.7vw, 0.94rem) !important;
  }

  .hero .btn,
  .hero a.btn,
  .hero button.btn {
    min-width: min(100%, 12rem) !important;
    max-width: min(100%, 16.5rem) !important;
  }

  .header .btn-getstarted {
    min-height: 36px !important;
    padding-block: 0.5rem !important;
    padding-inline: 0.78rem !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   Book Page — Hide Cover Image on Mobile/Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page .book-cover-image,
  body.book-page .book-cover-wrap,
  body.book-page .book-image,
  body.book-page .preorder-image,
  body.book-page .book-hero-cover {
    display: none !important;
  }
}

/* ==========================================================================
   Book Page — Hide Subpage Hero Cover Image on Mobile/Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page .subpage-hero-image {
    display: none !important;
  }
}

/* ==========================================================================
   Book Page — Mobile Hero Quote Formatting
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page .book-hero-quote {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-left: 4px solid var(--accent-color) !important;
    border-radius: 16px !important;
    padding: 1.25rem 1.2rem !important;
    margin-top: 1.5rem !important;
  }

  body.book-page .book-hero-quote blockquote {
    margin: 0 !important;
  }

  body.book-page .book-hero-quote blockquote p {
    font-size: clamp(1.05rem, 3.7vw, 1.22rem) !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
  }

  body.book-page .book-hero-quote figcaption {
    margin-top: 0.75rem !important;
  }

  body.book-page .book-hero-quote .quote-author {
    display: block !important;
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
  }

  body.book-page .book-hero-quote .quote-role {
    display: block !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    opacity: 0.88 !important;
  }
}

/* ==========================================================================
   Book Page — Remove Mobile Quote Interior Line
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page .book-hero-quote blockquote {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   Book Page — Mobile Single-Page Excerpt Reader
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page .book-spread-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.book-page .book-spread-stage {
    order: 1 !important;
    width: 100% !important;
  }

  body.book-page .book-spread-arrows {
    order: 2 !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    margin: 1rem auto 0 !important;
  }

  body.book-page .book-spread {
    display: block !important;
  }

  body.book-page .book-spread[hidden] {
    display: none !important;
  }

  body.book-page .book-spread::before {
    display: none !important;
  }

  body.book-page .book-spread .book-page-right {
    display: none !important;
  }

  body.book-page .book-spread .book-page-left {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================================
   Book Page — Preorder Section Kicker Consistency
   ========================================================================== */

body.book-page .book-preorder-header .section-kicker {
  color: var(--accent-color) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-bottom: 0.85rem !important;
}

/* ==========================================================================
   Book Page — Mobile Details Card Centering
   ========================================================================== */

@media (max-width: 767px) {
  body.book-page .book-details-card,
  body.book-page .book-details-card *,
  body.book-page .book-meta-card,
  body.book-page .book-meta-card *,
  body.book-page .book-specs-card,
  body.book-page .book-specs-card * {
    text-align: center !important;
  }
}

/* ==========================================================================
   Book Page — Mobile Details Panel Centering, Correct Selector
   ========================================================================== */

@media (max-width: 767px) {
  body.book-page .book-details-panel,
  body.book-page .book-details-list,
  body.book-page .book-details-list div,
  body.book-page .book-details-list dt,
  body.book-page .book-details-list dd {
    text-align: center !important;
  }

  body.book-page .book-details-list div {
    justify-items: center !important;
  }
}

/* ==========================================================================
   About Page — Mobile Author Image Size + Centering
   ========================================================================== */

@media (max-width: 1200px) {
  body.about-page .subpage-author-image,
  body.about-page .about-author-image,
  body.about-page .bill-photo,
  body.about-page .image-stack img {
    display: block !important;
    width: min(78vw, 320px) !important;
    max-width: 320px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.about-page .image-stack,
  body.about-page .about-image,
  body.about-page .author-image-wrap {
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 575px) {
  body.about-page .subpage-author-image,
  body.about-page .about-author-image,
  body.about-page .bill-photo,
  body.about-page .image-stack img {
    width: min(72vw, 280px) !important;
    max-width: 280px !important;
  }
}

/* ==========================================================================
   About Page — Mobile Author Image Top Gap
   ========================================================================== */

@media (max-width: 1200px) {
  body.about-page .subpage-author-image,
  body.about-page .about-author-image,
  body.about-page .bill-photo,
  body.about-page .image-stack img {
    margin-top: 1.25rem !important;
  }

  body.about-page .subpage-hero .row,
  body.about-page .about .row {
    row-gap: 1.5rem !important;
  }
}

@media (max-width: 575px) {
  body.about-page .subpage-author-image,
  body.about-page .about-author-image,
  body.about-page .bill-photo,
  body.about-page .image-stack img {
    margin-top: 0.75rem !important;
  }

  body.about-page .subpage-hero .row,
  body.about-page .about .row {
    row-gap: 1rem !important;
  }
}

/* ==========================================================================
   About Page — Reduce Mobile Gap Before Author Image
   ========================================================================== */

@media (max-width: 1200px) {
  body.about-page .subpage-hero .row,
  body.about-page .subpage-hero .gy-5 {
    --bs-gutter-y: 1rem !important;
  }

  body.about-page .subpage-hero .row > [class*="col-"] {
    margin-top: 0 !important;
  }

  body.about-page .subpage-author-image {
    margin-top: 0 !important;
  }
}

@media (max-width: 575px) {
  body.about-page .subpage-hero .row,
  body.about-page .subpage-hero .gy-5 {
    --bs-gutter-y: 0.5rem !important;
  }
}

/* ==========================================================================
   Media Page — Mobile Stay Connected Heading Match
   ========================================================================== */

@media (max-width: 1200px) {
  body.media-page .stay-connected h2,
  body.media-page #stay-connected h2,
  body.media-page .connect-section h2,
  body.media-page .media-connect h2 {
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    font-size: clamp(3.25rem, 12vw, 4.75rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    max-width: 10.5ch !important;
  }
}

@media (max-width: 575px) {
  body.media-page .stay-connected h2,
  body.media-page #stay-connected h2,
  body.media-page .connect-section h2,
  body.media-page .media-connect h2 {
    font-size: clamp(3rem, 13vw, 4.15rem) !important;
  }
}

/* ==========================================================================
   Media Page — Mobile Subpage Hero Heading Match
   ========================================================================== */

@media (max-width: 1200px) {
  body.media-page .subpage-hero h1 {
    font-family: var(--heading-font) !important;
    font-weight: 800 !important;
    font-size: clamp(3.25rem, 12vw, 4.75rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    max-width: 10.5ch !important;
  }
}

@media (max-width: 575px) {
  body.media-page .subpage-hero h1 {
    font-size: clamp(3rem, 13vw, 4.15rem) !important;
  }
}

/* ==========================================================================
   Media Page — Match Subpage Hero Heading to About Page
   ========================================================================== */

body.media-page .subpage-hero h1 {
  max-width: 10em !important;
  font-size: clamp(3.4rem, 5.6vw, 5.75rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  font-weight: 800 !important;
}

@media (max-width: 767px) {
  body.media-page .subpage-hero h1 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    letter-spacing: -0.055em !important;
  }
}

/* ==========================================================================
   About Page — Conversation Section Heading Style Correction
   ========================================================================== */

body.about-page .conversation-slider-header h2 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  font-size: clamp(3.5rem, 6.25vw, 6.25rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  max-width: 10em !important;
}

body.about-page .conversation-slide h3 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  font-size: clamp(2.35rem, 3.6vw, 3.5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
}

@media (max-width: 767px) {
  body.about-page .conversation-slider-header h2 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.055em !important;
  }

  body.about-page .conversation-slide h3 {
    font-size: clamp(2.15rem, 9vw, 3rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }
}

/* ==========================================================================
   About Page — Match Conversation Headings to Hero Headline
   ========================================================================== */

body.about-page .conversation-slider-header h2,
body.about-page .conversation-slide h3 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
}

body.about-page .conversation-slider-header h2 {
  max-width: 10em !important;
  font-size: clamp(3.4rem, 5.6vw, 5.75rem) !important;
}

body.about-page .conversation-slide h3 {
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
}

@media (max-width: 767px) {
  body.about-page .conversation-slider-header h2 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    letter-spacing: -0.055em !important;
  }

  body.about-page .conversation-slide h3 {
    font-size: clamp(2.45rem, 10vw, 3.35rem) !important;
    letter-spacing: -0.055em !important;
  }
}

/* ==========================================================================
   About Page — Conversation Heading Style Match
   Scope: about page conversation section only
   ========================================================================== */

body.about-page .conversation-slider-header h2 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  max-width: 10em !important;
  font-size: clamp(3.4rem, 5.6vw, 5.75rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
}

body.about-page .conversation-slider .conversation-slide h3 {
  font-family: var(--heading-font) !important;
  font-weight: 800 !important;
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
}

@media (max-width: 767px) {
  body.about-page .conversation-slider-header h2 {
    font-size: clamp(2.75rem, 12vw, 4rem) !important;
    letter-spacing: -0.055em !important;
  }

  body.about-page .conversation-slider .conversation-slide h3 {
    font-size: clamp(2.45rem, 10vw, 3.35rem) !important;
    letter-spacing: -0.055em !important;
  }
}

/* ==========================================================================
   References Page — Hero Headline + Remove Book Cover
   ========================================================================== */

body.references-page .references-hero-cover,
body.references-page .references-hero-image,
body.references-page .subpage-hero-image,
body.references-page .subpage-hero img {
  display: none !important;
}

body.references-page .subpage-hero h1 {
  font-size: clamp(4rem, 7vw, 7rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.07em !important;
  max-width: 9em !important;
}

body.references-page .subpage-hero .row,
body.references-page .references-hero .row {
  justify-content: flex-start !important;
}

body.references-page .subpage-hero [class*="col-"],
body.references-page .references-hero [class*="col-"] {
  max-width: 760px !important;
}

@media (max-width: 767px) {
  body.references-page .subpage-hero h1 {
    font-size: clamp(3rem, 13vw, 4.25rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
  }

  body.references-page .subpage-hero [class*="col-"],
  body.references-page .references-hero [class*="col-"] {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Contact Page — Mobile Submit Button Centering
   ========================================================================== */

@media (max-width: 767px) {
  body.contact-page .site-contact-form .col-12:has(button[type="submit"]) {
    display: flex !important;
    justify-content: center !important;
  }

  body.contact-page .site-contact-form button[type="submit"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}



/* ==========================================================================
   Hero Lead — Mobile Readability
   ========================================================================== */

@media (max-width: 767px) {
  .hero .lead,
  .hero p.lead {
    font-size: clamp(1.08rem, 4.65vw, 1.22rem) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.005em !important;
    max-width: 34ch !important;
  }
}

@media (max-width: 390px) {
  .hero .lead,
  .hero p.lead {
    font-size: clamp(1.05rem, 4.85vw, 1.16rem) !important;
    line-height: 1.52 !important;
  }
}


/* ==========================================================================
   Homepage Hero Lead — Phone/Tablet Readability Pass
   ========================================================================== */

@media (max-width: 1200px) {
  body.index-page .hero.hero-book .lead,
  body.index-page .hero.hero-book p.lead,
  .hero.hero-book .lead,
  .hero.hero-book p.lead {
    font-size: clamp(1.2rem, 2.35vw, 1.42rem) !important;
    line-height: 1.58 !important;
    letter-spacing: 0.002em !important;
    max-width: 36ch !important;
  }
}

@media (max-width: 767px) {
  body.index-page .hero.hero-book .lead,
  body.index-page .hero.hero-book p.lead,
  .hero.hero-book .lead,
  .hero.hero-book p.lead {
    font-size: clamp(1.2rem, 5.15vw, 1.38rem) !important;
    line-height: 1.55 !important;
    max-width: 34ch !important;
  }
}

@media (max-width: 390px) {
  body.index-page .hero.hero-book .lead,
  body.index-page .hero.hero-book p.lead,
  .hero.hero-book .lead,
  .hero.hero-book p.lead {
    font-size: clamp(1.14rem, 5.25vw, 1.28rem) !important;
    line-height: 1.52 !important;
    max-width: 32ch !important;
  }
}


/* ==========================================================================
   What This Book Takes On — Intro Text Readability on Phone/Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  body.index-page #what-this-book-takes-on .services-description,
  body.index-page #what-this-book-takes-on .services-description p,
  #what-this-book-takes-on .services-description,
  #what-this-book-takes-on .services-description p {
    font-size: clamp(1.2rem, 2.35vw, 1.44rem) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.002em !important;
    max-width: 40ch !important;
  }
}

@media (max-width: 767px) {
  body.index-page #what-this-book-takes-on .services-description,
  body.index-page #what-this-book-takes-on .services-description p,
  #what-this-book-takes-on .services-description,
  #what-this-book-takes-on .services-description p {
    font-size: clamp(1.2rem, 5.15vw, 1.38rem) !important;
    line-height: 1.58 !important;
    max-width: 35ch !important;
  }
}

@media (max-width: 390px) {
  body.index-page #what-this-book-takes-on .services-description,
  body.index-page #what-this-book-takes-on .services-description p,
  #what-this-book-takes-on .services-description,
  #what-this-book-takes-on .services-description p {
    font-size: clamp(1.16rem, 5.1vw, 1.28rem) !important;
    line-height: 1.55 !important;
    max-width: 33ch !important;
  }
}


/* ==========================================================================
   What This Book Takes On — Topic Card Descriptions on Phone/Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  body.index-page #what-this-book-takes-on .service-card .service-info p,
  #what-this-book-takes-on .service-card .service-info p {
    font-size: clamp(1.12rem, 2.15vw, 1.32rem) !important;
    line-height: 1.62 !important;
    letter-spacing: 0.002em !important;
    max-width: 34ch !important;
  }
}

@media (max-width: 767px) {
  body.index-page #what-this-book-takes-on .service-card .service-info p,
  #what-this-book-takes-on .service-card .service-info p {
    font-size: clamp(1.14rem, 4.75vw, 1.3rem) !important;
    line-height: 1.58 !important;
    max-width: 31ch !important;
  }

  body.index-page #what-this-book-takes-on .service-card .service-info h3,
  #what-this-book-takes-on .service-card .service-info h3 {
    font-size: clamp(1.55rem, 6.1vw, 1.95rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 390px) {
  body.index-page #what-this-book-takes-on .service-card .service-info p,
  #what-this-book-takes-on .service-card .service-info p {
    font-size: clamp(1.08rem, 4.9vw, 1.22rem) !important;
    line-height: 1.56 !important;
    max-width: 30ch !important;
  }

  body.index-page #what-this-book-takes-on .service-card .service-info h3,
  #what-this-book-takes-on .service-card .service-info h3 {
    font-size: clamp(1.42rem, 6vw, 1.78rem) !important;
  }
}


/* ==========================================================================
   Sitewide Section Body Copy Floor — Phone/Tablet
   Raises small readable prose without affecting nav, buttons, labels, or metadata.
   ========================================================================== */

@media (max-width: 1200px) {
  main section :where(
    .section-description p,
    .services-description p,
    .about-content p,
    .media-prototype-content p,
    .conversation-slider-header p,
    .conversation-slide-meta p,
    .testimonial-content p,
    .contact-content p
  ) {
    font-size: clamp(1.1rem, 2vw, 1.28rem);
    line-height: 1.6;
  }
}

@media (max-width: 767px) {
  main section :where(
    .section-description p,
    .services-description p,
    .about-content p,
    .media-prototype-content p,
    .conversation-slider-header p,
    .conversation-slide-meta p,
    .testimonial-content p,
    .contact-content p
  ) {
    font-size: clamp(1.1rem, 4.65vw, 1.24rem);
    line-height: 1.58;
  }
}

@media (max-width: 390px) {
  main section :where(
    .section-description p,
    .services-description p,
    .about-content p,
    .media-prototype-content p,
    .conversation-slider-header p,
    .conversation-slide-meta p,
    .testimonial-content p,
    .contact-content p
  ) {
    font-size: clamp(1.06rem, 4.75vw, 1.18rem);
    line-height: 1.56;
  }
}


/* ==========================================================================
   Why Bill — Tablet/Phone Correction
   Desktop remains controlled by main.css.
   ========================================================================== */

@media (max-width: 1200px) {
  body.index-page #why-bill,
  body.index-page #why-bill.why-bill-section,
  #why-bill,
  #why-bill.why-bill-section {
    background-image: none !important;
    background: var(--surface-cream, #f4ead8) !important;
  }

  body.index-page #why-bill .col-lg-5,
  #why-bill .col-lg-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  body.index-page #why-bill .bill-photo-wrap,
  #why-bill .bill-photo-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.index-page #why-bill .bill-photo-socials,
  #why-bill .bill-photo-socials {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  body.index-page #why-bill .section-heading,
  body.index-page #why-bill h2.section-heading,
  #why-bill .section-heading,
  #why-bill h2.section-heading {
    font-size: clamp(3rem, 6vw, 4.4rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;
    max-width: 13.5ch !important;
  }

  body.index-page #why-bill .why-bill-content,
  body.index-page #why-bill .why-bill-normalized-copy,
  #why-bill .why-bill-content,
  #why-bill .why-bill-normalized-copy {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  body.index-page #why-bill .section-heading,
  body.index-page #why-bill h2.section-heading,
  #why-bill .section-heading,
  #why-bill h2.section-heading {
    font-size: clamp(2.05rem, 8.2vw, 2.75rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    max-width: 14ch !important;
  }

  body.index-page #why-bill .why-bill-content,
  body.index-page #why-bill .why-bill-normalized-copy,
  #why-bill .why-bill-content,
  #why-bill .why-bill-normalized-copy {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 390px) {
  body.index-page #why-bill .section-heading,
  body.index-page #why-bill h2.section-heading,
  #why-bill .section-heading,
  #why-bill h2.section-heading {
    font-size: clamp(1.95rem, 8vw, 2.45rem) !important;
  }
}


/* ==========================================================================
   Why Bill — Mobile Headline Measure Tweak
   Keeps the current size, but lets the headline run wider on phones.
   ========================================================================== */

@media (max-width: 767px) {
  body.index-page #why-bill .section-heading,
  body.index-page #why-bill h2.section-heading,
  #why-bill .section-heading,
  #why-bill h2.section-heading {
    max-width: 16ch !important;
    margin-right: auto !important;
  }
}

@media (max-width: 390px) {
  body.index-page #why-bill .section-heading,
  body.index-page #why-bill h2.section-heading,
  #why-bill .section-heading,
  #why-bill h2.section-heading {
    max-width: 15ch !important;
  }
}

/* ==========================================================================
   Book Page - Mobile Chapter Outline Toggle
   ========================================================================== */

body.book-page #chapter-outline .chapter-outline-toggle-cell {
  display: none;
}

@media (max-width: 991.98px) {
  body.book-page #chapter-outline:not(.is-expanded) .chapter-outline-extra {
    display: none !important;
  }

  body.book-page #chapter-outline .chapter-outline-toggle-cell {
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 1rem;
    z-index: 20;
  }

  body.book-page #chapter-outline .chapter-outline-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 22rem);
    min-height: 3rem;
    padding: 0.85rem 1.25rem;
    border: 1px solid rgba(254, 254, 254, 0.24);
    border-radius: 999px;
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 16px 40px rgba(6, 26, 64, 0.22);
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
  }
}


/* ==========================================================================
   Book Page — Sticky Show Fewer Chapters Button
   Keeps the collapse control visible while the expanded chapter list is long.
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page #chapter-outline .chapter-outline-toggle-cell {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
  }

  body.book-page #chapter-outline.is-expanded .chapter-outline-toggle-cell {
    position: sticky !important;
    top: clamp(4.25rem, 10vw, 5.5rem) !important;
    bottom: auto !important;
    z-index: 90 !important;
    margin-top: 1.35rem !important;
    margin-bottom: 1.5rem !important;
  }

  body.book-page #chapter-outline.is-expanded .chapter-outline-toggle {
    box-shadow: 0 18px 44px rgba(6, 26, 64, 0.32) !important;
  }
}


/* ==========================================================================
   Book Page — Fixed Show Fewer Chapters Button Test
   Collapsed: button stays after Chapter 3.
   Expanded: button stays visible with the visitor.
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page #chapter-outline:not(.is-expanded) .chapter-outline-extra {
    display: none !important;
  }

  body.book-page #chapter-outline .chapter-outline-toggle-cell {
    display: flex !important;
    justify-content: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: 20 !important;
    width: 100% !important;
    margin: 1.35rem 0 1.4rem !important;
    pointer-events: none !important;
  }

  body.book-page #chapter-outline .chapter-outline-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 22rem) !important;
    min-height: 3rem !important;
    padding: 0.85rem 1.25rem !important;
    border: 1px solid rgba(254, 254, 254, 0.24) !important;
    border-radius: 999px !important;
    background: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(6, 26, 64, 0.22) !important;
    font: inherit !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    pointer-events: auto !important;
  }

  body.book-page #chapter-outline.is-expanded {
    padding-bottom: 5.75rem !important;
  }

  body.book-page #chapter-outline.is-expanded .chapter-outline-toggle-cell {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: min(calc(100% - 2rem), 24rem) !important;
    margin: 0 !important;
  }

  body.book-page #chapter-outline.is-expanded .chapter-outline-toggle {
    width: 100% !important;
    box-shadow: 0 18px 44px rgba(6, 26, 64, 0.36) !important;
  }
}

@media (min-width: 1201px) {
  body.book-page #chapter-outline .chapter-outline-toggle-cell {
    display: none !important;
  }

  body.book-page #chapter-outline .chapter-outline-extra {
    display: block !important;
  }
}


/* ==========================================================================
   Book Page — Hide Fixed Chapter Toggle Outside Chapter Section
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page #chapter-outline.is-expanded .chapter-outline-toggle-cell {
    display: none !important;
  }

  body.book-page #chapter-outline.is-expanded.toggle-in-view .chapter-outline-toggle-cell {
    display: flex !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: min(calc(100% - 2rem), 24rem) !important;
    margin: 0 !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  body.book-page #chapter-outline.is-expanded.toggle-in-view .chapter-outline-toggle {
    width: 100% !important;
    pointer-events: auto !important;
  }
}


/* ==========================================================================
   Book Page — Excerpt Mobile/Tablet Reading Width
   Gives the sample-page reader more usable text width on compressed screens.
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page #sample-pages .container {
    width: min(100%, calc(100vw - 1rem)) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.book-page .book-spread-shell,
  body.book-page .book-spread-stage {
    width: min(100%, calc(100vw - 1rem)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.book-page .book-spread {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(0.7rem, 2vw, 1rem) !important;
  }

  body.book-page .book-spread .book-page {
    padding-left: clamp(1.5rem, 4vw, 2.4rem) !important;
    padding-right: clamp(1.5rem, 4vw, 2.4rem) !important;
  }
}

@media (max-width: 767px) {
  body.book-page #sample-pages .container,
  body.book-page .book-spread-shell,
  body.book-page .book-spread-stage {
    width: min(100%, calc(100vw - 0.5rem)) !important;
  }

  body.book-page .book-spread {
    padding: 0.55rem !important;
  }

  body.book-page .book-spread .book-page {
    padding-left: clamp(1rem, 4.5vw, 1.35rem) !important;
    padding-right: clamp(1rem, 4.5vw, 1.35rem) !important;
  }
}

@media (max-width: 390px) {
  body.book-page #sample-pages .container,
  body.book-page .book-spread-shell,
  body.book-page .book-spread-stage {
    width: min(100%, calc(100vw - 0.25rem)) !important;
  }

  body.book-page .book-spread {
    padding: 0.45rem !important;
  }

  body.book-page .book-spread .book-page {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }
}


/* ==========================================================================
   Book Page — Excerpt Inner Page Padding Tighten
   Reduces left/right white space inside the sample-page card on tablet/phone.
   ========================================================================== */

@media (max-width: 1200px) {
  body.book-page #sample-pages .book-spread .book-page {
    padding-left: clamp(1.1rem, 2.6vw, 1.8rem) !important;
    padding-right: clamp(1.1rem, 2.6vw, 1.8rem) !important;
  }
}

@media (max-width: 767px) {
  body.book-page #sample-pages .book-spread .book-page {
    padding-left: clamp(0.78rem, 3.4vw, 1rem) !important;
    padding-right: clamp(0.78rem, 3.4vw, 1rem) !important;
  }

  body.book-page #sample-pages .book-spread {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }
}

@media (max-width: 390px) {
  body.book-page #sample-pages .book-spread .book-page {
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
  }

  body.book-page #sample-pages .book-spread {
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
  }
}


/* ==========================================================================
   Book Page — Mobile Book Spread Arrow Optical Centering
   Centers the chevron glyphs inside their circular controls.
   ========================================================================== */

@media (max-width: 767px) {
  body.book-page .book-spread-arrow {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body.book-page .book-spread-arrow i {
    display: grid !important;
    place-items: center !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.35rem !important;
  }

  body.book-page .book-spread-arrow i::before {
    display: block !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.book-page .book-spread-arrow.book-spread-prev i {
    transform: translate(-0.03em, 0.01em) !important;
  }

  body.book-page .book-spread-arrow.book-spread-next i {
    transform: translate(0.03em, 0.01em) !important;
  }
}