/* Reviewed draft: shared navigation, activity layout, and band play. */
:root { --pink:#e700ce; --blue:#1675e8; --yellow:#fff34c; --body-copy: "Jost", system-ui, sans-serif; --nav-h:72px; }
body { background:#fff; }
[hidden] { display:none !important; }
.navbar { background:#fff; border-bottom:1px solid #e6def0; }
.navbar__inner { justify-content:space-between; gap:16px; }
.navbar .navbar__brand { display:block; flex:none; position:relative; left:auto; top:auto; transform:none; }
.navbar .nav { margin-inline:auto; }
.navbar__brand img { width:50px; height:50px; object-fit:contain; }
.nav a { color:var(--navy); font-size:1.125rem; padding:12px; }
.nav a:hover,.nav a[aria-current="page"] { color:#9d007e; }
.cart-toggle { color:var(--navy); }
.nav-toggle { color:var(--navy); }
.nav-toggle > span:first-child,.nav-toggle > span:first-child::before,.nav-toggle > span:first-child::after { background:var(--navy); }
.masthead picture,.masthead img { display:block; width:100%; height:auto; }
.masthead { background:#a936e5; }
/* Vector lettering stays sharp at any pixel density. Artwork is never stretched. */
.masthead .masthead__art { display:block; width:100%; height:auto; }
.masthead .masthead__art--mobile { display:none; }
@media (max-width:640px) {
  .masthead .masthead__art--desktop { display:none; }
  .masthead .masthead__art--mobile { display:block; }
}
.home-book-announcement { padding-top:16px; }
.home-book-announcement .new-banner:focus-visible { outline:3px solid var(--navy); outline-offset:4px; }
.home-actions { padding:24px; background:#fff; display:flex; justify-content:center; gap:16px; }
.action-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:60px; padding:16px 34px; border-radius:16px; text-decoration:none; font-size:1.35rem; font-weight:700; color:#fff; background:var(--navy); box-shadow:0 4px 0 #0d072b; }
.action-link--play { background:var(--yellow); color:var(--navy); box-shadow:0 4px 0 #d4c812; }
.action-link:hover { box-shadow:inset 0 0 0 3px #9d007e, 0 4px 0 #0d072b; }
.home-feature { padding:42px 24px 48px; background:linear-gradient(115deg,#ffe4fb,#eef5ff); }
.home-feature__inner { max-width:1160px; margin:auto; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:32px; align-items:center; }
.home-feature__art { min-width:0; }
.home-band { display:block; width:100%; height:auto; overflow:visible; }
.eyebrow { display:block; font:700 .9375rem/1.4 var(--body-copy); color:#92127d; margin-bottom:10px; text-transform:uppercase; letter-spacing:.1em; }
.home-feature h2 { font-size:clamp(2.6rem,5vw,4.6rem); }
.home-feature p,.intro-copy { font:400 1.125rem/1.6 var(--body-copy); text-transform:none; margin:16px 0 22px; max-width:42rem; }
.section--grey { background:#fff; }
.section { padding-block:48px; }
.section__title { font-size:clamp(2rem,4vw,3rem); }
.activity-page { background:linear-gradient(135deg,#fff0fc,#eef7ff); }
.activity-page .section { padding:28px 0 40px; background:transparent; }
.activity-page .wrap { max-width:1160px; }
.activity-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:24px; }
.activity-heading h1 { font-size:clamp(2.4rem,5vw,4rem); }
.activity-heading p { font:1rem/1.5 var(--body-copy); text-transform:none; margin-top:8px; }
.activity-links { display:flex; gap:8px; flex-wrap:wrap; }
.activity-links a { display:inline-flex; align-items:center; min-height:46px; padding:8px 16px; color:var(--navy); background:#fff; border:2px solid #ded0eb; border-radius:12px; text-decoration:none; font-size:1.125rem; }
.play-screen { scroll-margin-top:90px; }
.play-hub { display:grid; gap:18px; }
.hub-group { font-size:1.4rem; margin:22px 0 0; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.play-hub .game-card { position:relative; display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto auto; text-align:left; align-content:center; align-items:center; gap:4px 16px; min-height:132px; border:2px solid #e7dcf1; border-radius:20px; padding:18px; background:#fff; color:var(--navy); box-shadow:0 5px 0 #e5d8ed; }
.play-hub .game-card:hover { border-color:#a01691; transform:translateY(-2px); }
.game-card__art { grid-column:1; grid-row:1 / 3; width:88px; height:92px; object-fit:contain; }
.game-card__symbol { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; font:700 2.8rem/1 var(--font-head); color:#81196d; }
.play-hub .game-card__name { grid-column:2; font:700 1.5rem/1.1 var(--font-head); color:var(--navy); }
.play-hub .game-card__desc { grid-column:2; font:.9375rem/1.4 var(--body-copy); text-transform:none; color:#514165; }
.play-hub .game-card--featured { border-color:#b41198; background:#fff5fe; }
.play-screen .game-stage { max-width:100%; margin:0; background:#24163c; border-radius:24px; padding:24px; color:#fff; }
.play-screen .game-stage[hidden],.play-hub[hidden] { display:none; }
.play-screen .arcade-topbar { margin-bottom:20px; }
.play-screen .arcade-topbar__title { color:#fff; font-size:1.5rem; }
.play-screen .arcade-back { min-height:48px; min-width:90px; font-size:1.125rem; }
.play-screen .game-howto { font:1rem/1.55 var(--body-copy); text-transform:none; max-width:720px; margin:0 auto 18px; color:#eee7f5; }
.play-screen .game-area { max-width:960px; margin:auto; }
.play-screen .count-num { min-width:60px; min-height:60px; }
.game-stage[data-game="make"] { background:white; border:2px solid #e7d7ed; color:var(--navy); box-shadow:0 10px 30px #6d317912; }
.game-stage[data-game="make"] .arcade-topbar__title { color:var(--navy); }
.game-stage[data-game="make"] .arcade-back { color:var(--navy); background:#f5eef9; box-shadow:none; }
.game-stage[data-game="make"] .game-howto { color:#5a476a; }
.game-stage[data-game="make"] .game-howto { display:none; }
.activity-page .footer-signup { display:none; }
.activity-page .cart-toggle { display:none; }
.activity-page .site-footer { padding-block:24px; }
.footer-links { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin:12px 0 24px; }
.footer-links a { color:#fff; font-size:1.0625rem; padding-block:8px; }
.simple-heading { font-size:clamp(2.5rem,5vw,4rem); margin-bottom:20px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.choice-card { border:2px solid #e7dcf1; border-radius:24px; padding:32px; background:#fff; }
.choice-card h2 { font-size:2.25rem; }
.choice-card p { font:1.0625rem/1.65 var(--body-copy); text-transform:none; margin:18px 0 24px; }
.choice-card img { width:100%; height:180px; object-fit:contain; margin-bottom:24px; }
.choice-card .action-link { font-size:1.15rem; }
.lp-lbl { font-size:.9375rem; color:#514165; }
.activity-page .learn-piano { padding:20px; }
.lp-keys { max-width:100%; gap:3px; }
.lp-key { min-width:0; }
.activity-page .game-stage:focus { outline:none; }
.band-prompt { font:700 clamp(1.8rem,4vw,2.6rem)/1.15 var(--font-head); text-align:center; margin:12px 0 24px; }
.band-players { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.band-player { min-width:0; border:3px solid #e6dcef; background:#fff; border-radius:22px; padding:16px 10px 14px; color:var(--navy); display:flex; align-items:center; flex-direction:column; box-shadow:0 5px 0 #e6dcef; transition:border-color .15s,background .15s; touch-action:manipulation; }
.band-player:hover { border-color:var(--player-color); }
.band-player.is-selected { border-color:var(--player-color); box-shadow:0 5px 0 var(--player-color); background:#fffceb; }
.band-player__art { width:100%; height:200px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:14px; }
.band-player__art img { height:100%; max-height:100%; width:100%; object-fit:contain; object-position:center bottom; transition:transform .12s ease; }
.band-player.is-beating .band-player__art img { transform:translateY(-5px); }
.band-player__name { font:700 1.65rem/1.1 var(--font-head); }
.band-player__instrument { font:.9375rem/1.5 var(--body-copy); text-transform:none; color:#5c466c; margin:4px 0 12px; }
.band-player__state { font:600 .875rem/1.35 var(--body-copy); text-transform:none; padding:8px 9px; border-radius:9px; background:#f2ecf7; width:100%; }
.band-player.is-selected .band-player__state { color:white; background:var(--player-color); }
.band-status { font:1rem/1.4 var(--body-copy); text-transform:none; text-align:center; color:#584268; margin:22px 0 12px; }
.band-beats { display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.band-beats span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:2px solid #e0d5eb; color:#766587; font:600 .875rem/1 var(--body-copy); }
.band-beats span.is-on { color:var(--navy); background:var(--yellow); border-color:#cdc025; }
.band-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:22px; }
.band-control { min-height:50px; padding:12px 20px; background:#f6eefb; color:var(--navy); border:2px solid #ded0eb; border-radius:12px; font-size:1.125rem; }
.band-control--stop { background:var(--navy); color:white; border-color:var(--navy); }
.band-control:disabled { opacity:.45; cursor:default; }
.band-pattern-picker { border-top:1px solid #e6dcef; margin-top:28px; padding-top:20px; }
.band-pattern-picker p { font:1rem/1.5 var(--body-copy); text-transform:none; color:#584268; margin:8px 0 18px; }
.band-patterns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.band-patterns label { font:600 .9375rem/1.5 var(--body-copy); text-transform:none; }
.band-patterns select { display:block; width:100%; min-height:48px; padding:10px 12px; font:1rem var(--body-copy); border:2px solid #d1bddf; border-radius:10px; margin-top:6px; color:var(--navy); background:#fff; }
.band-error { font:1rem/1.5 var(--body-copy); text-transform:none; color:#a21337; text-align:center; margin:16px; }
.beat-drum { width:min(300px,100%); margin:auto; }
.beat-drum img { width:100%; height:160px; object-fit:contain; }
.beat-drum.is-hit { animation:beatLift .25s ease; }
@keyframes beatLift { 50% { transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .band-player.is-beating .band-player__art img { transform:none; } .beat-drum.is-hit { animation:none; } }
@media(max-width:900px) {
 .home-feature__inner { grid-template-columns:1fr; gap:28px; }
 .home-feature__inner > div:first-child { text-align:center; }
 .home-feature p { margin-inline:auto; }
 .home-feature__art { width:100%; max-width:680px; margin-inline:auto; }
 .nav { background:#fff; }
 .navbar__inner { padding-right:76px; }
 .navbar .nav { margin:0; }
 .nav .socials a { color:var(--navy); }
 .nav a { font-size:1.35rem; min-height:52px; }
 .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .band-players { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .band-player__art { height:180px; }
 .navbar__inner { justify-content:space-between; }
}
@media(max-width:640px) {
 :root { --nav-h:64px; }
 .wrap { padding-inline:16px; }
 .home-actions { padding:18px 16px 24px; gap:12px; }
 .home-actions .action-link { flex:1; padding:14px 10px; font-size:1.2rem; }
 .home-feature { padding:32px 20px; }
 .home-feature__inner { grid-template-columns:1fr; gap:24px; }
 .home-feature__art { order:2; }
 .activity-page .section { padding-top:20px; }
 .activity-heading { margin-bottom:18px; }
 .activity-heading h1 { font-size:2.4rem; }
 .play-hub .game-card { grid-template-columns:1fr; gap:6px; padding:14px 10px; min-height:190px; text-align:center; justify-items:center; }
 .game-card__art,.game-card__symbol { grid-column:1; grid-row:1; height:90px; }
 .play-hub .game-card__name,.play-hub .game-card__desc { grid-column:1; }
 .play-hub .game-card__name { font-size:1.45rem; }
 .play-hub .game-card__desc { font-size:.875rem; }
 .game-grid { gap:12px; }
 .play-screen .game-stage { padding:16px 12px; border-radius:18px; }
 .play-screen .arcade-topbar { gap:12px; }
 .play-screen .arcade-topbar__title { font-size:1.4rem; }
 .play-screen .game-howto { font-size:1rem; }
 .choice-grid { grid-template-columns:1fr; }
 .choice-card { padding:24px; }
 .activity-page .learn-piano { padding:16px 8px; }
 .lp-key { flex:1 1 0; width:auto; height:160px; }
 .section { padding-block:32px; }
 .band-prompt { margin:8px 0 16px; font-size:1.8rem; }
 .band-players { gap:12px; }
 .band-player { padding:10px 6px; border-radius:16px; }
 .band-player__art { height:95px; margin-bottom:8px; }
 .band-player__name { font-size:1.45rem; }
 .band-player__instrument { margin-bottom:6px; font-size:.875rem; }
 .band-player__state { min-height:40px; padding:6px; font-size:.875rem; display:grid; place-items:center; }
 .band-control { flex:1 1 auto; padding:12px; }
 .band-status { margin-top:18px; }
 .band-patterns { grid-template-columns:1fr; }
}

/* Consistent cards, shared across the full site. */
.choice-grid { align-items:stretch; }
.choice-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; }
.choice-card h2 { margin:0; }
.choice-card p { max-width:36rem; flex:1; }
.choice-card .action-link { align-self:center; margin-top:auto; }
.parents-page .simple-heading { max-width:1050px; line-height:1.15; text-transform:none; }
.parents-page .intro-copy { margin-bottom:36px; }
.parents-page .choice-card img { height:156px; flex:none; margin:0 0 24px; }
.product .btn,.color-card .btn,.merch .btn { align-self:center; margin-inline:auto; display:flex; justify-content:center; text-align:center; width:fit-content; max-width:100%; }
.play-hub .game-card::before,.play-hub .game-card::after { content:none !important; }
.play-hub .game-card__name { margin:0; }
.play-hub .game-card__desc { margin:0; }

.first-book { border:0; padding:0 24px 28px; border-radius:24px; width:min(720px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); color:var(--navy); background:#fff; box-shadow:0 24px 90px #17083155; overflow:auto; margin:auto; }
.first-book::backdrop { background:#17083199; }
.first-book-open { overflow:hidden; }
.first-book__top { position:sticky; top:0; display:flex; justify-content:flex-end; background:#fff; padding:12px 0; z-index:1; }
.first-book__close { min-width:88px; min-height:44px; border:2px solid #ded0eb; border-radius:12px; background:#f7f0fb; color:var(--navy); font:600 1rem var(--body-copy); }
.first-book__content { display:grid; grid-template-columns:190px 1fr; gap:28px; align-items:center; text-align:center; }
.first-book__content img { width:100%; height:240px; object-fit:contain; }
.first-book h2 { font-size:2.25rem; line-height:1.1; }
.first-book p { font:1rem/1.6 var(--body-copy); text-transform:none; margin:16px 0 24px; }
.first-book .action-link { min-height:48px; padding:12px 22px; }
.first-book__later { display:block; margin:14px auto 0; padding:12px; min-height:44px; border:0; background:none; color:#654873; text-decoration:underline; font:1rem var(--body-copy); }
.video-section-title { text-align:center; margin:32px 0 24px; font-size:2rem; }
.vcard__thumb { width:100%; display:block; overflow:hidden; }
.vcard__thumb img { display:block; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.vcard__duration { position:absolute; right:8px; bottom:8px; background:#18102c; color:#fff; border-radius:4px; padding:3px 6px; font:600 .8rem/1.2 var(--body-copy); z-index:1; }
.vcard__title { text-align:center; width:100%; font-weight:500; }
@media(max-width:560px) { .first-book { padding:0 20px 20px; } .first-book__content { grid-template-columns:1fr; gap:16px; } .first-book__content img { height:130px; } .first-book h2 { font-size:1.8rem; } .first-book p { margin:10px 0 16px; } }
/* Keep every game inside its panel, with high-contrast controls. */
.play-screen { position:relative; }
.play-screen .game-stage { overflow:hidden; }
.play-screen .game-stat,.play-screen .game-prompt,.play-screen .mem-win,.play-screen .mem-win h2 { color:#fff; }
.play-screen .game-stat b { color:#fff34c; }
.play-screen .game-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.play-screen .count-num { background:#fff; color:#251442; border:2px solid #d7c8e5; box-shadow:0 4px 0 #bdaacb; display:grid; place-items:center; }
.play-screen .count-num.ok { background:#c0f2c9; border-color:#238744; }
.play-screen .btn { color:#251442; background:#fff34c; box-shadow:0 4px 0 #c9bc20; }
.play-screen .quiz-grid { margin-top:20px; }
.play-screen .quiz-choice { background:#49345e; border-color:#9b80b9; }
.play-screen .quiz-choice.is-right { background:#146639; }
.play-screen .quiz-num { color:#fff; }
.play-screen .arcade-topbar__title { text-shadow:none; }
.play-screen .make-row__label { color:#251442; }
.play-screen .make-pill { background:#f0e5fa; color:#251442; border:2px solid #c6acd8; }
.play-screen .make-pill.on { background:#65238c; color:white; }
.band-beats span { width:12px; height:12px; background:#e6dcef; border:0; }
.band-beats span.is-on { background:#92127d; }
.featured-product__info .btn,.product-hero__info .btn { display:flex; justify-content:center; width:fit-content; margin-inline:auto; }
@media(max-width:640px) {
 .play-hub .game-card--featured { grid-column:1 / -1; grid-template-columns:110px 1fr; grid-template-rows:auto auto; min-height:136px; padding:18px; column-gap:14px; }
 .game-card--featured .game-card__art { grid-column:1; grid-row:1 / 3; width:110px; height:100px; }
 .play-hub .game-card--featured .game-card__name,.play-hub .game-card--featured .game-card__desc { grid-column:2; }
}
.home-feature__inner > div:not(.home-feature__art) .action-link,
.featured-product__body .btn { display:flex; justify-content:center; width:fit-content; max-width:100%; margin-inline:auto; }

/* Equal side columns keep the navigation centered, with or without a cart. */
.navbar .navbar__inner { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; gap:12px; padding-inline:24px; }
.navbar .navbar__brand { grid-column:1; grid-row:1; justify-self:start; }
.navbar .nav { grid-column:2; grid-row:1; justify-self:center; margin:0; }
.navbar .cart-toggle { position:relative; top:auto; right:auto; transform:none; grid-column:3; grid-row:1; justify-self:end; width:44px; height:44px; }
.navbar .nav > a { text-align:center; }
.btn,.action-link,.activity-links a,.band-control,.arcade-back { text-align:center; align-items:center; justify-content:center; }
.btn { display:inline-flex; }
.btn--block { display:flex; }
.cta-row,.make-controls { justify-content:center; }
.home-feature__inner > div:first-child { text-align:center; }
.home-feature p,.intro-copy { margin-inline:auto; }
.simple-heading,.simple-heading + .intro-copy,.wrap > .eyebrow { text-align:center; }
.form__row > .btn,.wrap > .btn { display:flex; width:fit-content; max-width:100%; margin-inline:auto; }
.product-hero .product__options { justify-content:center; }
.product-hero__info,.featured-product__body { text-align:center; }
.newsletter { justify-content:center; }
@media(max-width:900px) {
 .navbar .navbar__inner { grid-template-columns:50px minmax(0,1fr) 44px 44px; gap:8px; padding-inline:16px; }
 .navbar .nav-toggle { position:relative; top:auto; right:auto; transform:none; grid-column:3; grid-row:1; justify-self:end; }
 .navbar .cart-toggle { grid-column:4; }
 .activity-page .navbar .nav-toggle { grid-column:4; }
 .navbar .nav { grid-column:auto; grid-row:auto; justify-self:stretch; margin:0; }
 .navbar .nav > a { position:relative; justify-content:center; padding-inline:40px; text-align:center; border-color:#e8daef; background:#fcf8ff; }
 .navbar .nav > a::after { position:absolute; right:20px; border-color:#9142b0; }
 .navbar .nav .socials { justify-content:center; }
}

/* Sketch guide controls stay separate from the child's drawing. */
.sk-guide-controls {max-width:800px;margin:0 auto 20px;text-align:center;color:#532379;}
.sk-guide-controls label {display:inline-flex;align-items:center;gap:10px;font-weight:600;min-height:44px;}
.sk-guide-controls input {width:20px;height:20px;accent-color:#8b3cab;}
.sk-guide-controls p {font-size:.95rem;line-height:1.5;margin:4px 0 0;}
.sk-tpl.is-on {border-color:#a82eac;}
/* Keep the drawing's native proportions when a narrow layout changes height. */
@media (max-width:640px) {
  .sketch {height:auto;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto auto;align-items:start;}
  .sk-stage {width:100%;height:auto;max-height:none;aspect-ratio:4/5;align-self:start;}
  .sk-rail--tools {max-height:none;overflow:visible;}
  .sk-tool {min-height:44px;}
  .sk-act {min-height:44px;}
}

/* Newsletter gift is revealed in-place only after an accepted signup. */
.form-success__download { display:inline-flex; align-items:center; justify-content:center; min-height:54px; width:100%; max-width:360px; margin-top:12px; padding:14px 20px; border-radius:12px; background:#fff34c; color:#21174c; font:700 1.05rem/1.4 var(--body-copy); text-align:center; text-decoration:none; box-shadow:0 4px 0 #d4c812; }
.form-success__download:hover,.form-success__download:focus-visible { outline:3px solid #a30085; outline-offset:3px; }
.form-success__details { color:#5d506c; font:.875rem/1.5 var(--body-copy); text-transform:none; }
.footer-signup__consent { color:#e5d9f3; font:.875rem/1.5 var(--body-copy); text-align:center; margin:12px 0 0; text-transform:none; }

/* Comfortable tap targets without squeezing the drawing paper on phones. */
.sk-size,.sk-swatch { width:44px; height:44px; flex-shrink:0; }
.sk-act { min-height:44px; }
.qty__btn,.cart-item__qty .qty__btn { width:44px; height:44px; flex-shrink:0; }
@media(max-width:640px) {
  .sketch { display:flex; flex-direction:column; height:auto; gap:18px; }
  .sk-rail--tpl { width:100%; height:auto; min-height:72px; flex-shrink:0; }
  .sk-tpl { flex-basis:64px; min-height:64px; }
  .sk-tpl__name { display:block; font-size:.68rem; }
  .sk-stage { width:100%; height:auto; flex:none; aspect-ratio:1000 / 1250; }
  .sk-rail--tools { width:100%; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px; }
  .sk-swatches { width:100%; grid-template-columns:repeat(auto-fit,44px); justify-content:center; gap:10px; }
  .sk-actions { flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .sk-act { font-size:.9rem; padding:10px 16px; }
}
.form-success__note { font:1rem/1.5 var(--body-copy); text-transform:none; max-width:42ch; }
.form-success__download { text-transform:none; }

/* Give every footer element the same center line as the main page. */
.site-footer > .wrap { display:flex; flex-direction:column; align-items:center; }
.site-footer .footer-links { width:100%; justify-content:center; }
.site-footer .footer-signup { width:100%; max-width:620px; margin:0 auto 24px; text-align:center; }
.site-footer .footer-signup__label { max-width:42ch; margin:0 auto 18px; }
.site-footer .footer-newsletter { display:flex; flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:360px; margin:0 auto; }
.site-footer .footer-newsletter input[type=email],
.site-footer .footer-newsletter button { flex:none; width:100%; max-width:none; min-height:52px; margin:0; box-sizing:border-box; }
.site-footer .footer-newsletter button { display:flex; align-items:center; justify-content:center; }
.site-footer .footer-newsletter .form__status { width:100%; margin:0; text-align:center; }
.site-footer .footer-newsletter .form__status:empty { display:none; }
.site-footer .footer-signup__consent { max-width:46ch; margin:14px auto 0; line-height:1.5; }
.site-footer .socials { justify-content:center; margin:0 auto 14px; }
.site-footer .form-success { margin-inline:auto; }

.media-fallback {text-align:center;margin:16px 0 0;line-height:1.7}
.media-fallback a {font-weight:600;text-underline-offset:3px}
.amp__knobs {pointer-events:none}
.knob__dial {cursor:default}

/* Shared touch controls: matching line boxes and a hover border inside the shape. */
.btn,.action-link,.activity-links a,.band-control,.arcade-back,.lp-btn,.trace-mode,.song-btn,.inst-tab {
  display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:.4em;
  line-height:1.15; box-sizing:border-box; vertical-align:middle;
}
.btn,.action-link,.band-control,.arcade-back,.lp-btn,.activity-links a {
  padding-block:.8em; min-height:48px;
}
/* DIN's capitals sit high within its em box. Cap trimming centers the visible ink. */
@supports (text-box:trim-both cap alphabetic) {
  .btn,.action-link,.activity-links a,.band-control,.arcade-back,.lp-btn,.trace-mode,.song-btn,.inst-tab { text-box:trim-both cap alphabetic; }
}
.btn:hover,.lp-btn:hover,.band-control:hover,.activity-links a:hover {
  outline:none; box-shadow:inset 0 0 0 2px currentColor;
}
.btn:focus-visible,.action-link:focus-visible,.band-control:focus-visible,.lp-btn:focus-visible,.activity-links a:focus-visible {
  outline:3px solid #731e99; outline-offset:4px;
}
.band-pattern-group { min-width:0; margin:0; padding:14px; border:2px solid #e6dcef; border-radius:18px; }
.band-pattern-group legend { padding:0 6px; font:700 1.2rem/1.25 var(--body-copy); text-transform:none; }
.band-pattern-buttons { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.band-pattern { min-width:0; min-height:50px; display:grid; place-items:center; border:2px solid var(--player-color); border-radius:12px; background:white; color:var(--navy); font:700 1.3rem/1 var(--body-copy); cursor:pointer; }
.band-pattern[aria-pressed="true"] { background:var(--player-color); color:white; box-shadow:0 3px 0 #28143a; }
.band-pattern:focus-visible { outline:3px solid #4d175f; outline-offset:3px; }
.games-page .pop-mole { background-size:contain; background-origin:content-box; padding:10%; }
.games-page .pop-mole[data-friend="barry"] { background-origin:padding-box; background-size:auto 84%; background-position:47% 64%; }
@media(max-width:420px) { .band-pattern-group {padding:12px 8px;} .band-pattern-buttons {gap:5px;} }
/* A real keyboard silhouette, with easy-to-reach white-key labels. */
.lp-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:22px; }
.lp-controls .lp-btn { font:700 1rem/1.2 var(--body-copy); text-transform:none; letter-spacing:0; }
.lp-free { color:#532178; background:#f4e8fc; border:2px solid #aa77c5; }
.lp-free[aria-pressed="true"] { background:#532178; color:white; }
.lp-now { display:block; text-align:center; font:700 1.05rem/1.4 var(--body-copy); text-transform:none; color:#532178; margin:16px 0 10px; min-height:3em; }
.lp-phrase { display:flex; justify-content:center; gap:12px; min-height:54px; margin-bottom:18px; }
.lp-note { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:46px; padding:8px; border:2px solid #e2d3ed; border-radius:12px; font:700 1.35rem/1 var(--body-copy); color:#675373; background:white; }
.lp-note.is-current { color:#fff; background:#8829ba; border-color:#8829ba; }
.lp-note.is-done { color:#1d714c; border-color:#76cfa9; background:#e7fff3; }
.lp-note small,.lp-key__label small { display:block; font:600 .65rem/1.1 var(--body-copy); margin-top:4px; text-transform:none; }
.lp-keys { position:relative; display:flex; gap:2px; max-width:650px; padding:8px 3px 5px; background:#352447; border:2px solid #352447; border-radius:12px; }
.lp-keys .lp-key { flex:1 1 0; width:0; min-width:0; height:210px; border-radius:0 0 9px 9px; border:1px solid #bdaccb; margin:0; padding:0 0 17px; display:flex; align-items:flex-end; justify-content:center; touch-action:manipulation; }
.lp-keys .lp-key--black { position:absolute; z-index:2; top:7px; width:calc(60% / var(--key-count)); height:117px; transform:translateX(-50%); background:linear-gradient(#44344e,#17111e); border:1px solid #0e0915; border-radius:0 0 6px 6px; box-shadow:0 4px 0 #07040b; padding-bottom:10px; }
.lp-key--black .lp-key__label { color:#fff; font:500 .6rem/1 var(--body-copy); }
.lp-key .lp-key__label { pointer-events:none; }
.lp-key--black.is-lit { background:#8834b5; }
.lp-hint,.lp-grownups { font:400 1rem/1.6 var(--body-copy); text-transform:none; color:#514165; }
.lp-grownups { margin-top:24px; border-top:1px solid #e2d3ed; padding-top:14px; }
.lp-grownups summary { cursor:pointer; font-weight:600; }
.lp-grownups p { margin-top:12px; }
@media(max-width:420px) { .activity-page .learn-piano {padding:14px 8px;} .lp-controls{gap:8px;} .lp-controls .lp-btn{flex:1 1 40%;} .lp-keys .lp-key {height:185px;} .lp-keys .lp-key--black {height:103px;} .lp-key__label {font-size:1.25rem;} }

/* Keep shop cards and their purchase controls inside narrow phone screens. */
.product-hero > * { min-width:0; }
.product-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
@media(max-width:640px) {
  .merch { padding:16px; }
  .product-hero { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:420px) {
  .product__addrow { flex-direction:column; align-items:stretch; }
  .product__addrow .qty { align-self:center; }
  .product__addrow .product__add { width:100%; }
}