/* Home page fixes, 9 Oct 2026 (owner) */

/* "every one starring your child" was clipped at the top of the stories section */
.burst .books__note{top:1.6em}

/* How it works: a switch between the two ways to make a book */
.how__switch{position:relative;align-self:center;display:flex;gap:.3em;padding:.35em;border-radius:99em;background:var(--white);box-shadow:0 .4em 1.2em rgba(29,22,64,.12);z-index:3}
.how__switch button{font:700 1.35em/1 var(--f-body);color:var(--ink);padding:.75em 1.3em;border-radius:99em;transition:background-color .25s,color .25s}
.how__switch button[aria-selected=true]{background:var(--ink);color:var(--white)}
.how__switch button:not([aria-selected=true]):hover{background:var(--soft-pink)}
.how__cards[hidden]{display:none}
@media (max-width:767px){.how__switch{margin:1em auto 0}}

/* Why DreamsComeTrue: the new logo picture in the middle of the ring */
.why__ring .mark--logo{display:grid;place-items:center;border-radius:50%;background:#fff8ec;box-shadow:0 .6em 2em rgba(59,47,143,.18);padding:5%}
.why__ring .mark--logo img{width:100%;height:auto;display:block}

/* Categories: on hover, 3 covers pop up in the empty space either side of the list (owner, 9 Oct 2026),
   never over the words; placed by home-extras.js */
.cats__float{transform-origin:50% 60%;width:17em}
/* How it works: the handwritten note sits in the heading row, between the heading and the switch, so neither
   the switch nor the cards (which rise up under the heading) can cover it */
@media (min-width:768px){.how__note{position:static;align-self:center;transform:rotate(-6deg);max-width:none;white-space:nowrap}}
/* "A gift they'll keep for ever": the curved line started up behind the FAQ section's rounded bottom and lost
   the tops of its letters; it is now smaller with a gentler wave (index.html) and starts just below that edge */
.sec.gift.under{padding-top:calc(var(--round) + 2em)}

/* Gift section: the book floats inside a coloured card, the same kind of card as the ready-made book cards
   (solid colour, big rounded corners, a slight tilt); owner, 9 Oct 2026 */
.gift__visual{position:relative}
.gift__card{position:absolute;left:50%;top:50%;width:34em;height:42em;border-radius:2.6em;background:var(--pink);
  transform:translate(-50%,-50%) rotate(-3deg)}
.gift__star{display:none}
.gift__float{position:relative;z-index:1;animation:gift-float 5s ease-in-out infinite}
@keyframes gift-float{0%,100%{transform:translateY(-.8em)}50%{transform:translateY(.8em)}}
@media (prefers-reduced-motion:reduce){.gift__float{animation:none}}
@media (max-width:767px){.gift__card{width:28em;height:34em}}
/* Footer: the new, almost-square logo at its own proportions (the old rule was sized for the wide logo) */
html[data-hero] .footer__logo{width:13em;height:auto;padding:1em 1.2em}
/* Ready-made / Create-your-own switch made more prominent so people see they choose one (owner, 11 Oct 2026). */
.how__pick{display:flex;flex-direction:column;align-items:center;gap:.3em;align-self:center;position:relative;z-index:3}
.how__pick-note{font-size:2.6em;transform:rotate(-3deg);color:var(--violet)}
.how__switch{border:3px solid var(--ink);box-shadow:0 .35em 0 var(--ink);padding:.45em;gap:.45em}
.how__switch button{font-size:1.75em;padding:.8em 1.5em}
.how__switch button:not([aria-selected=true]){background:var(--yellow);animation:how-nudge 2.4s ease-in-out infinite}
.how__switch.is-used button{animation:none}
@keyframes how-nudge{0%,80%,100%{transform:none}86%{transform:rotate(-3deg) scale(1.05)}92%{transform:rotate(3deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.how__switch button{animation:none!important}}