/* ==========================================================================
   Home Page CSS — H&T Library Theme
   ========================================================================== */

/* ── Home wrapper — bleeds behind the transparent fixed header ───────────── */
.ht-library-home {
  margin-top: calc(-1 * var(--bpt-header-h));
}


/* ══════════════════════════════════════════════════════════════════════════
   1. HERO SLIDER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Slider shell ────────────────────────────────────────────────────────── */
.ht-library-hero-slider {
  position:   relative;
  min-height: calc(100vh + 70px);
  overflow:   hidden;
  background: var(--dark-ink);
}
.ht-library-hero-slider::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
  z-index:        2;
}

/* ── Track — slides laid out horizontally, track translates left/right ────── */
.ht-library-hero-slider__track {
  display:      flex;
  width:        200%;
  min-height:   inherit;
  transition:   transform .78s cubic-bezier(.45, 0, .15, 1);
  will-change:  transform;
}

/* ── Individual slides ────────────────────────────────────────────────────── */
.ht-library-hero-slide {
  position:    relative;
  width:       50%;
  min-height:  inherit;
  flex-shrink: 0;
  display:     flex;
  align-items: flex-start;
  overflow:    hidden;
}

/* ── Ken Burns — bg zooms slowly in while slide is active ────────────────── */
@keyframes htLibraryKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1);    }
}

.ht-library-hero-slide__bg {
  position:            absolute;
  inset:               0;
  background-position: center top;
  background-size:     cover;
  background-repeat:   no-repeat;
  z-index:             0;
  transform:           scale(1.04);
}


.ht-library-hero-slide.is-active .ht-library-hero-slide__bg {
  animation: htLibraryKenBurns 9s ease-out forwards;
}

.ht-library-hero-slide__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 6, .72) 0%,
    rgba(10, 8, 6, .42) 50%,
    rgba(10, 8, 6, .70) 100%
  );
}

/* ── Content entrance — text fades up when slide becomes active ──────────── */
@keyframes htLibraryHeroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Slide inner ─────────────────────────────────────────────────────────── */
.ht-library-hero-slide__inner {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  width:          100%;
  padding-top:    calc(var(--bpt-header-h) + clamp(5rem, 14vw, 12rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ht-library-hero-slide__copy {
  max-width: 860px;
  width:     100%;
  opacity:   0;
}

.ht-library-hero-slide.is-active .ht-library-hero-slide__copy {
  animation: htLibraryHeroIn .72s .42s both ease-out;
}

/* ── Hero copy atoms (shared across all slides) ──────────────────────────── */
.ht-library-hero__eyebrow {
  display:                 inline-flex;
  align-items:             center;
  gap:                     .65rem;
  font-size:               .7rem;
  font-weight:             700;
  text-transform:          uppercase;
  letter-spacing:          .2em;
  color:                   var(--cream);
  margin-bottom:           1.4rem;
  background:              rgba(255, 247, 240, .08);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:                  1px solid rgba(255, 247, 240, .25);
  border-radius:           100px;
  padding:                 .42rem 1.2rem;
}
.ht-library-hero__eyebrow::before,
.ht-library-hero__eyebrow::after {
  content:     '✦';
  font-size:   .55rem;
  color:       var(--primary);
  opacity:     .75;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-hero__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2.4rem, 5vw + .4rem, 4.2rem);
  font-weight:    700;
  line-height:    1.15;
  color:          var(--cream);
  margin-bottom:  1.5rem;
  letter-spacing: -.02em;
}

.ht-library-hero__desc {
  font-size:     clamp(1rem, 1.1vw + .65rem, 1.2rem);
  line-height:   1.85;
  color:         rgba(255, 247, 240, .75);
  margin-bottom: 2.5rem;
  max-width:     540px;
  margin-inline: auto;
}

.ht-library-hero__actions {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .6rem;
}

.ht-library-hero__actions .ht-library-btn {
  padding:   .92rem 2.4rem;
  font-size: 1rem;
}

.ht-library-hero__cta-note {
  margin:      0;
  font-size:   .85rem;
  color:       rgba(255, 247, 240, .8);
  text-align:  center;
}

/* Outline button on the dark hero overlay needs light text/border, not the global dark-ink version */
.ht-library-hero__actions .ht-library-btn--outline {
  color:       var(--cream);
  border-color: rgba(255, 247, 240, .55);
}
.ht-library-hero__actions .ht-library-btn--outline:hover {
  background: var(--cream);
  color:      var(--dark-ink);
  border-color: var(--cream);
}

/* ── Slide 1 feature bullets (icon + label, horizontal row) ──────────────── */
.ht-library-hero__features {
  list-style:      none;
  padding:         0;
  margin:          0 0 2.5rem;
  display:         flex;
  align-items:     stretch;
  justify-content: center;
  flex-wrap:       wrap;
}

.ht-library-hero__feature {
  display:     flex;
  align-items: center;
  gap:         .65rem;
  padding:     .55rem 1.6rem;
}

.ht-library-hero__feature + .ht-library-hero__feature {
  border-left: 1px solid rgba(255, 247, 240, .18);
}

.ht-library-hero__feature-icon {
  flex-shrink:             0;
  width:                   40px;
  height:                  40px;
  border-radius:           50%;
  background:              rgba(255, 247, 240, .1);
  border:                  1.5px solid rgba(255, 247, 240, .28);
  display:                 flex;
  align-items:             center;
  justify-content:         center;
  color:                   #FFF7F0;
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ht-library-hero__feature-label {
  font-size:   .92rem;
  line-height: 1.45;
  color:       rgba(255, 247, 240, .85);
  font-weight: 500;
  text-align:  left;
}

/* ── Prev / Next arrows ──────────────────────────────────────────────────── */
.ht-library-hero-slider__arrow {
  position:               absolute;
  top:                    0;
  bottom:                 0;
  margin-block:           auto;           /* centres vertically — no transform needed */
  z-index:                10;
  width:                  48px;
  height:                 48px;
  border-radius:          50%;
  background:             rgba(255, 247, 240, .1);
  backdrop-filter:        blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:                 1.5px solid rgba(255, 247, 240, .3);
  color:                  var(--cream);
  display:                flex;
  align-items:            center;
  justify-content:        center;
  cursor:                 pointer;
  transition:             background var(--bpt-t), opacity var(--bpt-t);
  opacity:                .85;
  transform:              none;           /* explicitly block any inherited hover transform */
}
.ht-library-hero-slider__arrow--prev { left:  clamp(.75rem, 3vw, 2.5rem); }
.ht-library-hero-slider__arrow--next { right: clamp(.75rem, 3vw, 2.5rem); }
.ht-library-hero-slider__arrow:hover,
.ht-library-hero-slider__arrow:focus-visible {
  background: rgba(255, 247, 240, .22);
  opacity:    1;
  transform:  none;                       /* pin — prevent any global button:hover transform */
}
.ht-library-hero-slider__arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ── Dot indicators ──────────────────────────────────────────────────────── */
.ht-library-hero-slider__dots {
  position:   absolute;
  bottom:     2rem;
  left:       50%;
  transform:  translateX(-50%);
  z-index:    10;
  display:    flex;
  align-items: center;
  gap:        .55rem;
}

.ht-library-hero-slider__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    rgba(255, 247, 240, .3);
  border:        1.5px solid rgba(255, 247, 240, .3);
  cursor:        pointer;
  padding:       0;
  transition:    background .25s, width .3s, border-radius .3s;
  flex-shrink:   0;
}
.ht-library-hero-slider__dot.is-active {
  background:    var(--primary);
  border-color:  var(--primary);
  width:         28px;
  border-radius: 5px;
}
.ht-library-hero-slider__dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }


/* ══════════════════════════════════════════════════════════════════════════
   WHY WE MADE ABIDE
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   HOW FAMILIES USE HUGS & TALES
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-howto {
  background-color: #1C1510;
  padding-block:    clamp(4rem, 7vw, 6rem);
  position:         relative;
  overflow:         hidden;
}
.ht-library-howto::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(183,83,61,.12) 0%, transparent 65%);
  pointer-events: none;
}
.ht-library-howto::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(to right, transparent, rgba(183,83,61,.4), transparent);
  pointer-events: none;
}

/* Header */
.ht-library-howto__header {
  text-align:    center;
  max-width:     760px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ht-library-howto__title {
  font-family:    var(--bpt-heading-font, serif);
  font-size:      clamp(1.9rem, 3.2vw + .4rem, 2.9rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  margin:         0 0 .5rem;
}
.ht-library-howto__header .ht-library-why__divider {
  justify-content: center;
  margin-block:    .6rem;
}
.ht-library-howto__sub {
  font-size:   1.05rem;
  line-height: 1.7;
  color:       rgba(255, 247, 240, .6);
  margin:      0;
}

/* Steps row */
.ht-library-howto__steps {
  display:        grid;
  grid-template-columns: repeat(5, 1fr);
  gap:            .5rem;
  position:       relative;
  margin-bottom:  clamp(2rem, 4vw, 3rem);
}
/* Horizontal connecting line at icon center */
.ht-library-howto__steps::before {
  content:    '';
  position:   absolute;
  top:        44px;
  left:       10%;
  right:      10%;
  height:     1.5px;
  background: rgba(206, 123, 99, .4);
  pointer-events: none;
}

/* Individual step */
.ht-library-howto__step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            .85rem;
  padding-top:    .25rem;
}

/* Icon wrapper — positions badge relative to circle */
.ht-library-howto__step-wrap {
  position: relative;
  display:  inline-block;
}

/* Numbered badge */
.ht-library-howto__step-num {
  position:        absolute;
  top:             -5px;
  right:           -5px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--primary);
  color:           #fff;
  font-size:       .68rem;
  font-weight:     700;
  line-height:     1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         2;
}

/* Icon circle */
.ht-library-howto__step-icon {
  width:           88px;
  height:          88px;
  border-radius:   50%;
  border:          1.5px solid rgba(255, 255, 255, .16);
  background:      #211D18;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--primary-light);
  position:        relative;
  z-index:         1;
}

/* Step title */
.ht-library-howto__step-title {
  font-family:    var(--bpt-heading-font, serif);
  font-size:      clamp(.95rem, 1.1vw + .4rem, 1.1rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.01em;
  line-height:    1.3;
  margin:         0;
}

/* Step description */
.ht-library-howto__step-desc {
  font-size:   .85rem;
  line-height: 1.65;
  color:       rgba(255, 247, 240, .6);
  margin:      0;
}
.ht-library-howto__accent {
  font-style:  normal;
  font-weight: 600;
  color:       var(--primary-light);
}

/* Tip card */
.ht-library-howto__tip {
  display:       flex;
  align-items:   center;
  gap:           1.25rem;
  background:    rgba(255, 247, 240, .04);
  border:        1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding:       1.25rem 1.75rem;
  max-width:     680px;
  margin-inline: auto;
}
.ht-library-howto__tip-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  border:          1.5px solid rgba(255, 255, 255, .16);
  background:      #211D18;
  color:           var(--primary-light);
  flex-shrink:     0;
}
.ht-library-howto__tip-rule {
  width:      1.5px;
  height:     44px;
  background: rgba(255, 255, 255, .14);
  flex-shrink: 0;
}
.ht-library-howto__tip-text {
  font-size:   .95rem;
  line-height: 1.65;
  color:       rgba(255, 247, 240, .7);
  margin:      0;
}

/* Scroll-in animation */
.ht-library-howto__header,
.ht-library-howto__step,
.ht-library-howto__tip {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.ht-library-howto.is-visible .ht-library-howto__header { opacity: 1; transform: none; transition-delay: .05s; }
.ht-library-howto.is-visible .ht-library-howto__step:nth-child(1) { opacity: 1; transform: none; transition-delay: .15s; }
.ht-library-howto.is-visible .ht-library-howto__step:nth-child(2) { opacity: 1; transform: none; transition-delay: .25s; }
.ht-library-howto.is-visible .ht-library-howto__step:nth-child(3) { opacity: 1; transform: none; transition-delay: .35s; }
.ht-library-howto.is-visible .ht-library-howto__step:nth-child(4) { opacity: 1; transform: none; transition-delay: .45s; }
.ht-library-howto.is-visible .ht-library-howto__step:nth-child(5) { opacity: 1; transform: none; transition-delay: .55s; }
.ht-library-howto.is-visible .ht-library-howto__tip { opacity: 1; transform: none; transition-delay: .65s; }

/* Tablet: 3+2 layout, hide connector line */
@media (max-width: 900px) {
  .ht-library-howto__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
  }
  .ht-library-howto__steps::before { display: none; }
}

/* Mobile: 2 column */
@media (max-width: 540px) {
  .ht-library-howto__steps { grid-template-columns: repeat(2, 1fr); }
  .ht-library-howto__step-icon { width: 72px; height: 72px; }
  .ht-library-howto__tip-rule { width: 1.5px; height: 44px; }
  .ht-library-howto__tip-text { font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-stats {
  background:    #141210;
  border-top:    1px solid rgba(255,247,240,.07);
  border-bottom: 1px solid rgba(255,247,240,.07);
  padding-block: clamp(2rem, 4vw, 3rem);
  position:      relative;
  overflow:      hidden;
}
.ht-library-stats::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(183,83,61,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ht-library-stats__inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  position:        relative;
}

.ht-library-stats__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .3rem;
  padding:        .75rem clamp(1.5rem, 4vw, 3.5rem);
  flex:           1;
  text-align:     center;

  opacity:    0;
  transform:  translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.ht-library-stats.is-visible .ht-library-stats__item:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.ht-library-stats.is-visible .ht-library-stats__item:nth-child(3) { opacity: 1; transform: none; transition-delay: .15s; }
.ht-library-stats.is-visible .ht-library-stats__item:nth-child(5) { opacity: 1; transform: none; transition-delay: .25s; }
.ht-library-stats.is-visible .ht-library-stats__item:nth-child(7) { opacity: 1; transform: none; transition-delay: .35s; }

.ht-library-stats__num {
  display:        block;
  font-family:    var(--bpt-heading-font, serif);
  font-size:      clamp(1.8rem, 3vw + .5rem, 2.8rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.025em;
  line-height:    1;
}

.ht-library-stats__label {
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          rgba(255,247,240,.45);
  white-space:    nowrap;
}

.ht-library-stats__sep {
  display:     block;
  width:       1px;
  height:      52px;
  background:  rgba(255,247,240,.1);
  flex-shrink: 0;
}

/* Tablet: 2×2 */
@media (max-width: 768px) {
  .ht-library-stats__inner { flex-wrap: wrap; }
  .ht-library-stats__item  { flex: 1 1 50%; padding: 1.25rem 1rem; }
  .ht-library-stats__sep   { display: none; }
}

/* Mobile: 2 columns */
@media (max-width: 480px) {
  .ht-library-stats__item { flex: 1 1 50%; padding: 1rem .75rem; }
  .ht-library-stats__num  { font-size: 1.8rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. WHY WE MADE HUGS & TALES
   ══════════════════════════════════════════════════════════════════════════ */
.ht-library-why {
  background-color: #181512;
  padding-block:    clamp(5.5rem, 9vw, 8rem);
  position:         relative;
}
.ht-library-why::before {
  content: none;
}
.ht-library-why::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(to right, transparent, rgba(183,83,61,.4), transparent) bottom / 100% 2px no-repeat,
    radial-gradient(ellipse 55% 50% at 100% 50%, rgba(183,83,61,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ht-library-why__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap:         clamp(2.5rem, 6vw, 5rem);
}

/* ── Left: image ──────────────────────────────────────────────────────────── */
.ht-library-why__media {
  display:         flex;
  justify-content: center;
}

.ht-library-why__img-frame {
  position:  relative;
  max-width: 520px;
  width:     100%;
}

/* Decorative offset border behind the image */
.ht-library-why__img-frame::before {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: 24px;
  border:        2px solid var(--primary-light);
  opacity:       .45;
  transform:     translate(14px, 14px);
  z-index:       0;
}

/* Warm blurred glow under the image */
.ht-library-why__img-frame::after {
  content:       '';
  position:      absolute;
  bottom:        -18px;
  left:          10%;
  right:         10%;
  height:        60px;
  background:    radial-gradient(ellipse at center, rgba(183, 83, 61, .22) 0%, transparent 70%);
  z-index:       0;
  filter:        blur(8px);
}

.ht-library-why__img {
  position:      relative;
  z-index:       1;
  width:         100%;
  height:        auto;
  border-radius: 20px;
  object-fit:    cover;
  box-shadow:    0 20px 56px rgba(58, 34, 20, .18);
  display:       block;
}

/* Floating badge */
.ht-library-why__img-badge {
  position:        absolute;
  bottom:          24px;
  right:           -16px;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .35rem;
  background:      #fff;
  border:          1px solid var(--border);
  border-radius:   16px;
  padding:         .8rem 1.1rem;
  box-shadow:      0 8px 28px rgba(58, 34, 20, .14);
  font-size:       .75rem;
  font-weight:     700;
  color:           var(--dark-ink);
  text-align:      center;
  line-height:     1.3;
  color:           var(--primary);
}

/* ── Right: content ──────────────────────────────────────────────────────── */
.ht-library-why__content {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.ht-library-why__eyebrow {
  display:        inline-flex;
  align-items:    center;
  align-self:     flex-start;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin:         0;
}

.ht-library-why__eyebrow::before,
.ht-library-why__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-why__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.9rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  line-height:    1.2;
  letter-spacing: -.02em;
  margin:         0;
}

/* Modern divider — gradient lines flanking a heart icon */
.ht-library-why__divider {
  display:     flex;
  align-items: center;
  gap:         .75rem;
}

.ht-library-why__divider-line {
  height:      1.5px;
  width:       56px;
  background:  linear-gradient(to right, var(--primary-light), transparent);
  flex-shrink: 0;
}
.ht-library-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}

.ht-library-why__divider-icon {
  color:      var(--primary);
  flex-shrink: 0;
  opacity:    .85;
}

.ht-library-why__desc {
  font-size:   clamp(1rem, 1vw + .6rem, 1.15rem);
  line-height: 1.85;
  color:       rgba(255, 247, 240, .75);
  margin:      0;
}

/* ── Featured statement ──────────────────────────────────────────────────── */
.ht-library-why__quote {
  margin:        0;
  padding:       1rem 1.4rem;
  background:    rgba(183, 83, 61, .12);
  border-left:   3px solid var(--primary-light);
  border-radius: 0 10px 10px 0;
  font-family:   var(--bpt-heading-font);
  font-style:    italic;
  font-size:     clamp(1rem, 1.1vw + .55rem, 1.15rem);
  line-height:   1.65;
  color:         #FFF7F0;
}

/* ── Copy points ─────────────────────────────────────────────────────────── */
.ht-library-why__points {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        .6rem;
}

.ht-library-why__points li {
  display:     flex;
  align-items: flex-start;
  gap:         .8rem;
  font-family: var(--bpt-heading-font);
  font-style:  italic;
  font-size:   clamp(.95rem, .8vw + .6rem, 1.05rem);
  color:       rgba(255, 247, 240, .85);
  line-height: 1.55;
}

.ht-library-why__points svg {
  flex-shrink: 0;
  width:       15px;
  height:      15px;
  color:       var(--primary);
  opacity:     .7;
  margin-top:  .22rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. SECTION HEADER ENTRANCE ANIMATIONS (why / products / experience)
   ══════════════════════════════════════════════════════════════════════════ */

/* Initial hidden state — each element has its own delay via --d */
.ht-library-why__eyebrow,
.ht-library-why__title,
.ht-library-why__divider,
.ht-library-why__desc,
.ht-library-why__quote,
.ht-library-products__eyebrow,
.ht-library-products__title,
.ht-library-products__subtitle,
.ht-library-experience__eyebrow,
.ht-library-experience__headline,
.ht-library-experience__desc {
  opacity:          0;
  transform:        translateY(16px);
  transition:       opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}

/* Stagger delays */
.ht-library-why__eyebrow  { --d: 0s; }
.ht-library-why__title    { --d: .1s; }
.ht-library-why__divider  { --d: .21s; }
.ht-library-why__desc     { --d: .32s; }
.ht-library-why__quote    { --d: .43s; }

.ht-library-products__eyebrow                    { --d: 0s;   }
.ht-library-products__title                      { --d: .1s;  }
.ht-library-products__header .ht-library-why__divider { --d: .18s; }
.ht-library-products__subtitle                   { --d: .28s; }

.ht-library-experience__eyebrow                      { --d: 0s;  }
.ht-library-experience__headline                     { --d: .1s; }
.ht-library-experience__header .ht-library-why__divider   { --d: .18s; }
.ht-library-experience__desc                         { --d: .27s; }

/* Reveal when section enters viewport */
.ht-library-why.is-visible      .ht-library-why__eyebrow,
.ht-library-why.is-visible      .ht-library-why__title,
.ht-library-why.is-visible      .ht-library-why__divider,
.ht-library-why.is-visible      .ht-library-why__desc,
.ht-library-why.is-visible      .ht-library-why__quote,
.ht-library-products.is-visible .ht-library-products__eyebrow,
.ht-library-products.is-visible .ht-library-products__title,
.ht-library-products.is-visible .ht-library-products__header .ht-library-why__divider,
.ht-library-products.is-visible .ht-library-products__subtitle,
.ht-library-experience.is-visible .ht-library-experience__eyebrow,
.ht-library-experience.is-visible .ht-library-experience__headline,
.ht-library-experience.is-visible .ht-library-experience__header .ht-library-why__divider,
.ht-library-experience.is-visible .ht-library-experience__desc,
.ht-library-howto.is-visible    .ht-library-why__divider,
.ht-library-benefits.is-visible .ht-library-why__divider {
  opacity:   1;
  transform: none;
}


/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .ht-library-why__eyebrow, .ht-library-why__title, .ht-library-why__divider,
  .ht-library-why__desc, .ht-library-why__quote,
  .ht-library-products__eyebrow, .ht-library-products__title,
  .ht-library-products__header .ht-library-why__divider, .ht-library-products__subtitle,
  .ht-library-experience__eyebrow, .ht-library-experience__headline,
  .ht-library-experience__header .ht-library-why__divider,
  .ht-library-experience__desc {
    opacity: 1; transform: none; transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. EXPERIENCE BEDTIME + WHY PARENTS LOVE IT
   ══════════════════════════════════════════════════════════════════════════ */

/* Background/overlay/border now come from the shared .ht-library-audio rule
   (audio-player.css) via the dual class on the <section> — keep only the
   header text styling here, recoloured for the dark surface. */

/* ── Header ──────────────────────────────────────────────────────────────── */
.ht-library-experience__header {
  text-align:    center;
  max-width:     640px;
  margin:        0 auto clamp(3rem, 5vw, 4rem);
  position:      relative;
  z-index:       2;
}

.ht-library-products__header .ht-library-why__divider,
.ht-library-experience__header .ht-library-why__divider {
  justify-content: center;
  margin-top:      1.1rem;
}


.ht-library-experience__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin-bottom:  1.2rem;
}
.ht-library-experience__eyebrow::before,
.ht-library-experience__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-experience__headline {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  line-height:    1.2;
  margin:         0 0 1rem;
}

.ht-library-experience__desc {
  font-size:   .975rem;
  color:       rgba(255, 247, 240, .6);
  line-height: 1.7;
  margin:      1rem auto 0;
  max-width:   52ch;
}

/* ── Shared player polish (same overrides as the audio page's audio-page.css) ── */
.ht-library-audio {
  background-image: none;
  background-color: #181512;
}
.ht-library-audio::before,
.ht-library-audio::after {
  content: none;
}
/* Restore bottom divider on the homepage experience+audio section */
.ht-library-experience.ht-library-audio::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}

.ht-library-audio-page__player .ht-library-track.is-active .ht-library-track__num {
  color: rgba(255, 247, 240, .85);
}

.ht-library-np__intro {
  width:         100%;
  text-align:    center;
  margin-bottom: .25rem;
}
.ht-library-np__intro-eyebrow {
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--primary-light);
  margin:      0 0 .3rem;
}
.ht-library-np__intro-desc {
  font-size:   .82rem;
  line-height: 1.5;
  color:       rgba(255, 247, 240, .5);
  margin:      0;
}

.ht-library-playlist__badge {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .04em;
  color:          rgba(255, 247, 240, .5);
  background:     rgba(255, 247, 240, .06);
  padding:        .3rem .75rem;
  border-radius:  50px;
  flex-shrink:    0;
}

.ht-library-track--locked { cursor: default; }
.ht-library-track--locked .ht-library-track__title { color: rgba(255, 247, 240, .45); }
.ht-library-track--locked .ht-library-track__cat   { color: rgba(255, 247, 240, .25); }
.ht-library-track__lock {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255, 247, 240, .3);
  flex-shrink:     0;
}

.ht-library-playlist__footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  padding:         .9rem 1.5rem;
  border-top:      1px solid rgba(255, 247, 240, .08);
  font-size:       .8rem;
  color:           rgba(255, 247, 240, .45);
  flex-shrink:     0;
  text-align:      center;
}
.ht-library-playlist__footer svg { color: var(--primary-light); flex-shrink: 0; }
.ht-library-playlist__footer a {
  color:           var(--primary-light);
  text-decoration: none;
  font-weight:     600;
}
.ht-library-playlist__footer a:hover { color: #fff; }


/* ══════════════════════════════════════════════════════════════════════════
   7. WHY PARENTS LOVE IT
   ══════════════════════════════════════════════════════════════════════════ */

.ht-library-benefits {
  background-color: #23211B;
  padding-block:    clamp(5rem, 9vw, 8rem);
  position:         relative;
}
.ht-library-benefits::before {
  content:        '';
  position:       absolute;
  top:            0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}
.ht-library-benefits::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(to right, transparent, rgba(183,83,61,.4), transparent) bottom / 100% 2px no-repeat,
    radial-gradient(ellipse 65% 55% at 50% 100%, rgba(183,83,61,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Header */
.ht-library-benefits__header {
  text-align:    center;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.ht-library-benefits__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin:         0 0 1.2rem;
}
.ht-library-benefits__eyebrow::before,
.ht-library-benefits__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-benefits__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.02em;
  line-height:    1.2;
  margin:         0 0 .2rem;
}

.ht-library-benefits__header .ht-library-why__divider {
  justify-content: center;
  margin-block:    1.25rem 0;
}

/* Pull quote */
.ht-library-benefits__quote {
  position:      relative;
  margin:        0 0 clamp(2rem, 4vw, 3rem);
  padding:       2.25rem clamp(2rem, 5vw, 4rem) 2.25rem clamp(3rem, 6vw, 5rem);
  background:    rgba(183,83,61,.07);
  border:        1px solid rgba(183,83,61,.18);
  border-radius: 20px;
  text-align:    center;
}
.ht-library-benefits__quote::before {
  content:        '\201C';
  position:       absolute;
  top:            .2rem;
  left:           clamp(1rem, 3vw, 2.25rem);
  font-family:    Georgia, serif;
  font-size:      clamp(5rem, 8vw, 8rem);
  line-height:    1;
  color:          var(--primary);
  opacity:        .25;
  pointer-events: none;
}
.ht-library-benefits__quote p {
  font-family:    var(--bpt-heading-font);
  font-style:     italic;
  font-size:      clamp(1.1rem, 1.5vw + .6rem, 1.45rem);
  color:          #FFF7F0;
  line-height:    1.7;
  margin:         0;
  position:       relative;
  z-index:        1;
}

/* Comparison grid */
.ht-library-benefits__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           stretch;
  gap:                   1.5rem;
}

/* VS divider hidden */
.ht-library-benefits__vs { display: none; }

/* Columns */
.ht-library-benefits__col {
  padding:        2.25rem 2rem 2.5rem;
  border-radius:  20px;
  border:         1px solid rgba(255,247,240,.07);
}
.ht-library-benefits__col--less {
  background: rgba(224,121,106,.05);
  border-color: rgba(224,121,106,.12);
}
.ht-library-benefits__col--more {
  background: rgba(79,199,135,.05);
  border-color: rgba(79,199,135,.12);
}

/* Column header */
.ht-library-benefits__col-header {
  display:        flex;
  align-items:    center;
  gap:            .75rem;
  margin-bottom:  1.75rem;
  padding-bottom: 1.25rem;
  border-bottom:  1px solid rgba(255,247,240,.07);
}

.ht-library-benefits__col-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  flex-shrink:     0;
}
.ht-library-benefits__col-badge--less { background: rgba(224,121,106,.18); color: #E0796A; }
.ht-library-benefits__col-badge--more { background: rgba(79,199,135,.18);  color: #4FC787; }

.ht-library-benefits__col-heading {
  font-family:    var(--bpt-heading-font);
  font-size:      1.05rem;
  font-weight:    700;
  letter-spacing: -.01em;
  color:          #FFF7F0;
}

/* List items */
.ht-library-benefits__col ul {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.ht-library-benefits__col li {
  display:  flex;
  gap:      1rem;
  align-items: flex-start;
}

.ht-library-benefits__item-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  flex-shrink:     0;
  margin-top:      .1rem;
}
.ht-library-benefits__item-icon--less { background: rgba(224,121,106,.15); color: #E0796A; }
.ht-library-benefits__item-icon--more { background: rgba(79,199,135,.15);  color: #4FC787; }

.ht-library-benefits__item-text {
  display:        flex;
  flex-direction: column;
  gap:            .25rem;
}
.ht-library-benefits__item-text strong {
  font-size:   .95rem;
  font-weight: 700;
  color:       #FFF7F0;
  line-height: 1.3;
}
.ht-library-benefits__item-text span {
  font-size:   .82rem;
  color:       rgba(255,247,240,.5);
  line-height: 1.55;
}

/* ── Benefits entrance animation ─────────────────────────────────────────── */
.ht-library-benefits__header,
.ht-library-benefits__quote,
.ht-library-benefits__grid {
  opacity:          0;
  transform:        translateY(20px);
  transition:       opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.ht-library-benefits__header { --d: 0s;   }
.ht-library-benefits__quote  { --d: .15s; }
.ht-library-benefits__grid   { --d: .3s;  }

.ht-library-benefits.is-visible .ht-library-benefits__header,
.ht-library-benefits.is-visible .ht-library-benefits__quote,
.ht-library-benefits.is-visible .ht-library-benefits__grid {
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ht-library-benefits__header,
  .ht-library-benefits__quote,
  .ht-library-benefits__grid { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ht-library-benefits__grid { grid-template-columns: 1fr; }
  .ht-library-benefits__vs   { display: none; }
  .ht-library-benefits__col  { padding: 1.75rem 1.5rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ht-library-exp-eq span,
  .ht-library-exp-mini-eq span { animation: none; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. STORY LIBRARY
   ══════════════════════════════════════════════════════════════════════════ */

/* (Story Library CSS follows) */

.ht-library {
  background-color: #181512;
  padding-block:    clamp(4.5rem, 9vw, 7.5rem);
  position:         relative;
  overflow:         hidden;
}
.ht-library::after {
  content:        '';
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .4), transparent);
  pointer-events: none;
}

.ht-library__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   clamp(2.5rem, 6vw, 5rem);
}

/* ── Left: content ───────────────────────────────────────────────────────── */
.ht-library__content {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.ht-library__eyebrow {
  display:        inline-flex;
  align-items:    center;
  align-self:     flex-start;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin:         0;
}
.ht-library__eyebrow::before,
.ht-library__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.9rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  line-height:    1.2;
  letter-spacing: -.02em;
  margin:         0;
}

/* Left-align the shared divider (default is flex, no center override needed) */
.ht-library__divider { margin: 0; }

.ht-library__desc {
  font-size:   clamp(1rem, 1vw + .6rem, 1.15rem);
  line-height: 1.85;
  color:       rgba(255, 247, 240, .75);
  margin:      0;
}

/* ── Story list ──────────────────────────────────────────────────────────── */
.ht-library__stories {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
}

.ht-library__stories li {
  display:       flex;
  align-items:   center;
  gap:           .875rem;
  padding:       .875rem 0;
  border-bottom: 1px solid rgba(255, 247, 240, .08);
}
.ht-library__stories li:last-child { border-bottom: none; }

.ht-library__stories svg {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  color:       var(--primary-light);
  opacity:     .85;
}

.ht-library__story-name {
  display:     block;
  font-family: var(--bpt-heading-font);
  font-size:   clamp(.92rem, .7vw + .6rem, 1rem);
  font-weight: 700;
  color:       #FFF7F0;
  line-height: 1.3;
}

.ht-library__story--future .ht-library__story-name {
  color:      rgba(255, 247, 240, .38);
  font-style: italic;
}
.ht-library__story--future svg {
  opacity: .32;
}

/* ── Right: image ────────────────────────────────────────────────────────── */
.ht-library__media {
  display:         flex;
  justify-content: center;
}

.ht-library__img-frame {
  position:  relative;
  max-width: 520px;
  width:     100%;
}

/* Decorative offset border (mirrored to the left for right-side image) */
.ht-library__img-frame::before {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: 24px;
  border:        2px solid var(--primary-light);
  opacity:       .45;
  transform:     translate(-14px, 14px);
  z-index:       0;
}

/* Warm glow beneath */
.ht-library__img-frame::after {
  content:    '';
  position:   absolute;
  bottom:     -18px;
  left:       10%;
  right:      10%;
  height:     60px;
  background: radial-gradient(ellipse at center, rgba(183, 83, 61, .22) 0%, transparent 70%);
  z-index:    0;
  filter:     blur(8px);
}

.ht-library__img {
  position:      relative;
  z-index:       1;
  width:         100%;
  height:        auto;
  border-radius: 20px;
  object-fit:    cover;
  box-shadow:    0 20px 56px rgba(0, 0, 0, .4);
  display:       block;
}

/* Floating badge (bottom-left for right-side image) */
.ht-library__img-badge {
  position:        absolute;
  bottom:          24px;
  left:            -16px;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .35rem;
  background:      #fff;
  border:          1px solid var(--border);
  border-radius:   16px;
  padding:         .8rem 1.1rem;
  box-shadow:      0 8px 28px rgba(58, 34, 20, .14);
  font-size:       .75rem;
  font-weight:     700;
  color:           var(--primary);
  text-align:      center;
  line-height:     1.3;
}
.ht-library__img-badge svg {
  color: var(--primary);
}

/* ── Entrance animations ─────────────────────────────────────────────────── */
.ht-library__eyebrow,
.ht-library__title,
.ht-library__divider,
.ht-library__desc,
.ht-library__stories {
  opacity:          0;
  transform:        translateY(16px);
  transition:       opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.ht-library__eyebrow  { --d: 0s;   }
.ht-library__title    { --d: .1s;  }
.ht-library__divider  { --d: .18s; }
.ht-library__desc     { --d: .28s; }
.ht-library__stories  { --d: .38s; }

.ht-library__media {
  opacity:   0;
  transform: translateX(28px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: .2s;
}

.ht-library.is-visible .ht-library__eyebrow,
.ht-library.is-visible .ht-library__title,
.ht-library.is-visible .ht-library__divider,
.ht-library.is-visible .ht-library__desc,
.ht-library.is-visible .ht-library__stories {
  opacity:   1;
  transform: none;
}
.ht-library.is-visible .ht-library__media {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ht-library__eyebrow, .ht-library__title, .ht-library__divider,
  .ht-library__desc, .ht-library__stories, .ht-library__media {
    opacity: 1; transform: none; transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. WHAT'S INCLUDED
   ══════════════════════════════════════════════════════════════════════════ */

.ht-library-includes {
  background-color: #23211B;
  padding-block:    clamp(5rem, 9vw, 8rem);
  position:         relative;
}
.ht-library-includes::before {
  content: none;
}
.ht-library-includes::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(to right, transparent, rgba(183,83,61,.4), transparent) bottom / 100% 2px no-repeat,
    radial-gradient(ellipse 55% 50% at 0% 50%, rgba(183,83,61,.06) 0%, transparent 70%);
  pointer-events: none;
}

.ht-library-includes__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   clamp(2.5rem, 6vw, 5rem);
}

/* ── Left: image (identical frame to ht-library-why) ──────────────────────────── */
.ht-library-includes__media {
  display:         flex;
  justify-content: center;
}

.ht-library-includes__img-frame {
  position:  relative;
  max-width: 520px;
  width:     100%;
}

.ht-library-includes__img-frame::before {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: 24px;
  border:        2px solid var(--primary-light);
  opacity:       .45;
  transform:     translate(14px, 14px);
  z-index:       0;
}

.ht-library-includes__img-frame::after {
  content:    '';
  position:   absolute;
  bottom:     -18px;
  left:       10%;
  right:      10%;
  height:     60px;
  background: radial-gradient(ellipse at center, rgba(183, 83, 61, .22) 0%, transparent 70%);
  z-index:    0;
  filter:     blur(8px);
}

.ht-library-includes__img {
  position:      relative;
  z-index:       1;
  width:         100%;
  height:        auto;
  border-radius: 20px;
  object-fit:    cover;
  box-shadow:    0 20px 56px rgba(0, 0, 0, .4);
  display:       block;
}

.ht-library-includes__img-badge {
  position:        absolute;
  bottom:          24px;
  right:           -16px;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             .35rem;
  background:      #fff;
  border:          1px solid var(--border);
  border-radius:   16px;
  padding:         .8rem 1.1rem;
  box-shadow:      0 8px 28px rgba(58, 34, 20, .14);
  font-size:       .75rem;
  font-weight:     700;
  color:           var(--primary);
  text-align:      center;
  line-height:     1.3;
}
.ht-library-includes__img-badge svg { color: var(--primary); }

/* ── Right: content ──────────────────────────────────────────────────────── */
.ht-library-includes__content {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.ht-library-includes__eyebrow {
  display:        inline-flex;
  align-items:    center;
  align-self:     flex-start;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          var(--primary-light);
  background:     rgba(255, 247, 240, .06);
  border:         1px solid rgba(255, 247, 240, .18);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin:         0;
}
.ht-library-includes__eyebrow::before,
.ht-library-includes__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .65;
  flex-shrink: 0;
  line-height: 1;
}

.ht-library-includes__title {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(1.9rem, 3vw + .5rem, 3rem);
  font-weight:    700;
  color:          #FFF7F0;
  line-height:    1.2;
  letter-spacing: -.02em;
  margin:         0;
}

.ht-library-includes__divider { margin: 0; }

.ht-library-includes__desc {
  font-size:   clamp(1rem, 1vw + .6rem, 1.15rem);
  line-height: 1.85;
  color:       rgba(255, 247, 240, .75);
  margin:      0;
}

/* ── Includes checklist ──────────────────────────────────────────────────── */
.ht-library-includes__list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
}

.ht-library-includes__list li {
  display:       flex;
  align-items:   flex-start;
  gap:           .875rem;
  padding:       .875rem 0;
  border-bottom: 1px solid rgba(255, 247, 240, .08);
}
.ht-library-includes__list li:last-child { border-bottom: none; }

.ht-library-includes__check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      .1rem;
  color:           #4FC787;
}

.ht-library-includes__item-name {
  display:     block;
  font-family: var(--bpt-heading-font);
  font-size:   clamp(.92rem, .7vw + .6rem, 1rem);
  font-weight: 700;
  color:       #FFF7F0;
  line-height: 1.3;
}


/* ── Entrance animations ─────────────────────────────────────────────────── */
.ht-library-includes__eyebrow,
.ht-library-includes__title,
.ht-library-includes__divider,
.ht-library-includes__desc,
.ht-library-includes__list {
  opacity:          0;
  transform:        translateY(16px);
  transition:       opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0s);
}
.ht-library-includes__eyebrow  { --d: 0s;   }
.ht-library-includes__title    { --d: .1s;  }
.ht-library-includes__divider  { --d: .18s; }
.ht-library-includes__desc     { --d: .28s; }
.ht-library-includes__list     { --d: .38s; }

.ht-library-includes__media {
  opacity:          0;
  transform:        translateX(-28px);
  transition:       opacity .7s ease, transform .7s ease;
  transition-delay: .2s;
}

.ht-library-includes.is-visible .ht-library-includes__eyebrow,
.ht-library-includes.is-visible .ht-library-includes__title,
.ht-library-includes.is-visible .ht-library-includes__divider,
.ht-library-includes.is-visible .ht-library-includes__desc,
.ht-library-includes.is-visible .ht-library-includes__list {
  opacity:   1;
  transform: none;
}
.ht-library-includes.is-visible .ht-library-includes__media {
  opacity:   1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ht-library-includes__eyebrow, .ht-library-includes__title, .ht-library-includes__divider,
  .ht-library-includes__desc, .ht-library-includes__list, .ht-library-includes__media {
    opacity: 1; transform: none; transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero: vertically centre content */
  .ht-library-hero-slide {
    align-items: center;
  }
  .ht-library-hero-slide__inner {
    padding-top:    calc(var(--bpt-header-h) + 2rem);
    padding-bottom: 2rem;
  }

  .ht-library-why__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ht-library-why__media     { order: -1; }
  .ht-library-why__img-frame { max-width: 420px; margin-inline: auto; }
  .ht-library-why__img-badge { right: 0; }

  .ht-library__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ht-library__media     { order: -1; }
  .ht-library__img-frame { max-width: 420px; margin-inline: auto; }
  .ht-library__img-frame::before { transform: translate(-8px, 8px); }
  .ht-library__img-badge { left: 0; }

  .ht-library-includes__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ht-library-includes__img-frame { max-width: 420px; margin-inline: auto; }
  .ht-library-includes__img-badge { right: 0; }
}

/* ── Mobile (≤640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero slider */
  .ht-library-hero-slider                     { min-height: calc(90svh + 70px); }
  .ht-library-hero-slide__bg                  { background-size: auto; }
  .ht-library-hero-slide--2 .ht-library-hero-slide__bg { background-size: cover; background-position: 68% center; }
  .ht-library-hero-slide__inner {
    padding-top:    calc(var(--bpt-header-h) + 8rem);
    padding-bottom: 3rem;
  }
  .ht-library-hero__title                     { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
  .ht-library-hero__desc                      { font-size: .95rem; }
  .ht-library-hero__actions                   { flex-direction: column; gap: .75rem; }
  .ht-library-hero__actions .ht-library-btn        { width: 100%; justify-content: center; }
  .ht-library-hero-slider__arrow              { display: none; }

  .ht-library-hero__features                  { flex-direction: column; align-items: center; gap: 0; }
  .ht-library-hero__feature                   { padding: .55rem 0; width: 100%; max-width: 280px; }
  .ht-library-hero__feature + .ht-library-hero__feature {
    border-left:  none;
    border-top:   1px solid rgba(90, 70, 54, .15);
    padding-top:  .7rem;
  }

  /* Why section */
  .ht-library-why           { padding-block: 3rem; }
  .ht-library-why__img      { max-width: 100%; }
  .ht-library-why__title    { font-size: 1.6rem; }
  .ht-library-why__desc     { font-size: .95rem; }

  /* Experience section */
  .ht-library-experience__body     { grid-template-columns: 1fr; }
  .ht-library-experience__card     { padding: 1.1rem 1.1rem .9rem; }
  .ht-library-experience__includes { padding: 1.1rem; }

  /* Library section */
  .ht-library__title        { font-size: 1.6rem; }
  .ht-library__desc         { font-size: .95rem; }
  .ht-library__img-badge    { left: 0; }

  /* Includes section */
  .ht-library-includes__title       { font-size: 1.6rem; }
  .ht-library-includes__desc        { font-size: .95rem; }
  .ht-library-includes__img-badge   { right: 0; }
}


/* ==========================================================================
   Section 10 — Join The Launch List (CTA)
   ========================================================================== */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.ht-library-cta {
  position:         relative;
  overflow:         hidden;
  padding-block:    clamp(5.5rem, 11vw, 9rem);
  text-align:       center;
  background-color: var(--dark-ink);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(183, 83, 61, .13) 0%, transparent 70%),
    repeating-linear-gradient(0deg,   rgba(255, 247, 240, .016) 0px, rgba(255, 247, 240, .016) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg,  rgba(255, 247, 240, .016) 0px, rgba(255, 247, 240, .016) 1px, transparent 1px, transparent 44px),
    radial-gradient(rgba(255, 247, 240, .03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px;
}

/* Botanical texture */
.ht-library-cta::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: url('../images/container-bg.jpeg');
  background-size:  560px auto;
  background-repeat: repeat;
  opacity:          .022;
  pointer-events:   none;
}

/* Top warm accent line */
.ht-library-cta::after {
  content:        '';
  position:       absolute;
  top:            0;
  left:           0;
  right:          0;
  height:         2px;
  background:     linear-gradient(to right, transparent, rgba(183, 83, 61, .55), transparent);
  pointer-events: none;
}

/* ── Decorative stars ────────────────────────────────────────────────────── */
.ht-library-cta__star {
  position:       absolute;
  color:          rgba(255, 230, 200, .18);
  line-height:    1;
  pointer-events: none;
  user-select:    none;
}
.ht-library-cta__star--1 { top: 14%;    left: 11%;  font-size: .55rem; }
.ht-library-cta__star--2 { top: 22%;    right: 9%;  font-size: .9rem;  }
.ht-library-cta__star--3 { bottom: 18%; left: 16%;  font-size: .65rem; }

/* ── Inner container ─────────────────────────────────────────────────────── */
.ht-library-cta__inner {
  position:       relative;
  z-index:        1;
  max-width:      680px;
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.ht-library-cta__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .55rem;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          rgba(255, 220, 190, .8);
  background:     rgba(183, 83, 61, .18);
  border:         1px solid rgba(183, 83, 61, .38);
  border-radius:  100px;
  padding:        .38rem 1rem;
  margin-bottom:  1.5rem;
}
.ht-library-cta__eyebrow::before,
.ht-library-cta__eyebrow::after {
  content:     '✦';
  font-size:   .48rem;
  color:       var(--primary);
  opacity:     .8;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Headline ────────────────────────────────────────────────────────────── */
.ht-library-cta__headline {
  font-family:    var(--bpt-heading-font);
  font-size:      clamp(2.2rem, 4vw + 1rem, 4rem);
  font-weight:    700;
  color:          #FFF7F0;
  letter-spacing: -.025em;
  line-height:    1.12;
  margin:         0 0 1.5rem;
}

/* ── Divider (dark background overrides) ─────────────────────────────────── */
.ht-library-cta__divider {
  justify-content: center;
  margin-bottom:   1.75rem;
}
.ht-library-cta .ht-library-why__divider-line {
  background: linear-gradient(to right, var(--primary-light), transparent);
}
.ht-library-cta .ht-library-why__divider-line:last-child {
  background: linear-gradient(to left, var(--primary-light), transparent);
}
.ht-library-cta .ht-library-why__divider-icon {
  color:   var(--primary);
  opacity: .85;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */
.ht-library-cta__copy {
  font-size:   clamp(1rem, 1.2vw + .5rem, 1.15rem);
  line-height: 1.8;
  color:       rgba(255, 230, 200, .65);
  max-width:   480px;
  margin:      0 0 2.5rem;
}

/* ── CTA button ──────────────────────────────────────────────────────────── */
.ht-library-cta__actions {
  margin-bottom: 1.4rem;
}
.ht-library-cta__btn {
  background: var(--primary);
  color:      #fff;
  font-size:  1.05rem;
  padding:    1.05rem 2.75rem;
  box-shadow: 0 6px 28px rgba(183, 83, 61, .42);
}
.ht-library-cta__btn:hover {
  background: var(--primary-dark);
  color:      #fff;
  transform:  translateY(-3px);
  box-shadow: 0 12px 40px rgba(183, 83, 61, .52);
}
.ht-library-cta__btn svg { flex-shrink: 0; }

/* ── Micro-note ──────────────────────────────────────────────────────────── */
.ht-library-cta__note {
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          rgba(255, 220, 190, .28);
}

/* ── Entrance animations ─────────────────────────────────────────────────── */
.ht-library-cta__eyebrow,
.ht-library-cta__headline,
.ht-library-cta__divider,
.ht-library-cta__copy,
.ht-library-cta__actions,
.ht-library-cta__note {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
              transform .6s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
}
.ht-library-cta__eyebrow  { --d: .00s; }
.ht-library-cta__headline { --d: .10s; }
.ht-library-cta__divider  { --d: .18s; }
.ht-library-cta__copy     { --d: .25s; }
.ht-library-cta__actions  { --d: .32s; }
.ht-library-cta__note     { --d: .40s; }

.ht-library-cta.is-visible .ht-library-cta__eyebrow,
.ht-library-cta.is-visible .ht-library-cta__headline,
.ht-library-cta.is-visible .ht-library-cta__divider,
.ht-library-cta.is-visible .ht-library-cta__copy,
.ht-library-cta.is-visible .ht-library-cta__actions,
.ht-library-cta.is-visible .ht-library-cta__note {
  opacity:   1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .ht-library-cta           { padding-block: 3.5rem; }
  .ht-library-cta__headline { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .ht-library-cta__btn      { width: 100%; justify-content: center; }
}