/* TurtleLuck home: background-band spacing + rhythm fix (design-QA mock, 2026-10-27).
   CSS only. Load LAST (after web/tl-layer.css). No colours, copy, images or order changed. */
:root{--hs-band:120px;--hs-gap:40px}
@media (max-width:734px){:root{--hs-band:76px;--hs-gap:40px}}

/* 1. Generous, equal top/bottom padding on every band */
.rd main .band{padding:var(--hs-band) 0!important}
.rd main .band.tcut{padding-bottom:0!important}          /* keep the intentional cropped-screenshot edge */
.rd main .band.pro{margin-top:0!important}               /* kill stray 20px white strip above Pro tools */

/* 2. Tinted bands can never collapse into thin stripes */
.rd main .band.grey{min-height:560px;display:flex;flex-direction:column;justify-content:center}
.rd main .band.grey.tcut{justify-content:flex-start}
@media (max-width:734px){.rd main .band.grey{min-height:420px}}
.rd main .band>.rw{width:100%}

/* 3. One heading scale; identical top offset whether or not an eyebrow sits above */
.rd main .band .h2{font-size:clamp(36px,5.5vw,56px)!important;font-weight:700!important;line-height:1.05!important;letter-spacing:-.04em!important;margin:8px auto 12px!important;max-width:820px}
.rd main .band .rw>.h2:first-child{margin-top:0!important}
.rd main .band .rw>.eyebrow:first-child{margin-top:0!important}

/* 4. One heading-to-content gap */
.rd main .band .intro{margin:0 auto var(--hs-gap)!important}
.rd main .band .h2+.g2,.rd main .band .h2+.g3,.rd main .band .h2+.gz,.rd main .band .h2+div{margin-top:var(--hs-gap)!important}
.rd main .band .ctas,.rd main .band .after{margin-top:32px!important}

/* 5. One body/caption style (16px -> 17px; nothing shrinks) */
.rd main .band .rw>p.m,.rd main .band .tile .m{font-size:17px!important;line-height:1.47!important}

/* 6. Private reading: centre it like every other section (rabbit untouched) */
.rd main #book .rw,.rd main #book h2,.rd main #book .intro,.rd main #book p{text-align:center!important}
.rd main #book .rw>*{margin-left:auto!important;margin-right:auto!important}
.rd main #book .intro{max-width:640px!important}
.rd main #book .ctas{justify-content:center!important}

/* phone keeps the site's original phone heading tracking */
@media (max-width:734px){.rd main .band .h2{letter-spacing:-.035em!important;line-height:1.08!important}}
.rd main #book{justify-content:flex-start!important} /* top aligns with the other bands */
.rd main .band .rw>.toon:first-child+.h2,.rd main .band .rw>.toon:first-child+.eyebrow{margin-top:0!important} /* Private reading: rabbit img is first child, so the first-child rule above missed its heading */