/* Family pages explainer (family-pages/). Builds on hub.css (fonts, colours,
   the bouncy wordmark and the kids' animations) and pages.css (top bar,
   cards, chunky buttons). Example banners are scaled with container query
   units so they look like the homepage hero at any frame size. */

:root {
  --purple: #9775fa;
  --purple-d: #6a4bc4;
  --lilac: #f3ecff;
}

.fp { max-width: 1100px; }
.fp h1, .fp h2, .fp h3 { line-height: 1.12; }
.center { justify-content: center; }
.small { font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* A button with a price under-line: "Get your family page · from £5 a month". */
.btn small { font-size: 15px; font-weight: 600; opacity: 0.92; }
.btn:has(small) { flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
.btn.white { text-decoration: none; }

.section-title { margin: 0 0 8px; text-align: center; font-size: clamp(30px, 4.6vw, 42px); }
.section-title::after { content: ''; display: block; width: 120px; height: 8px; margin: 10px auto 0; border-radius: 8px; background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffd43b, #51cf66, #4dabf7, #9775fa, #f783ac); }
.section-sub { max-width: 640px; margin: 0 auto 22px; text-align: center; font-size: 18px; color: var(--ink-soft); line-height: 1.45; }
section { scroll-margin-top: 16px; }

/* ---------------------------------------------------------------- hero */

.hero-band { display: grid; gap: 30px; align-items: center; margin: 8px 0 44px; }
@media (min-width: 980px) {
  .hero-band { grid-template-columns: 1fr 1.12fr; gap: 40px; margin-top: 18px; }
}
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.eyebrow-row .manage-link { margin: 0; font-size: 16px; }
.eyebrow { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--lilac); color: var(--purple-d); font-size: 16px; font-weight: 700; box-shadow: 0 3px 0 #ddd0ff; }
.hero-text h1 { margin: 0 0 14px; font-size: clamp(40px, 6.4vw, 64px); letter-spacing: -0.5px; }
.hl { background: linear-gradient(transparent 62%, rgba(255, 212, 59, 0.85) 62% 92%, transparent 92%); padding: 0 4px; }
.lead { margin: 0 0 24px; font-size: clamp(19px, 2.2vw, 21px); line-height: 1.5; color: var(--ink); }
.lead b { color: var(--purple-d); }

/* Browser window frame around an example family homepage. */
.browser { margin: 0; border-radius: 26px; background: #fff; border: 4px solid #fff; box-shadow: 0 10px 0 var(--line-d), var(--shadow); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f6efe6; }
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff6b6b; }
.dots i:nth-child(2) { background: #ffd43b; }
.dots i:nth-child(3) { background: #51cf66; }
.address { flex: 1; min-width: 0; padding: 6px 14px; border-radius: 999px; background: #fff; font-size: 15px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 2px var(--line); }
.address b { color: var(--ink); }
.screen {
  position: relative; padding: 4% 3% 5%;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.7) 0 3px, transparent 4px) 0 0 / 46px 46px,
    linear-gradient(180deg, #ffe2c4 0%, #ffd0e0 70%, #e6e4ff 100%);
}
.browser figcaption { padding: 10px 16px 12px; font-size: 15px; color: var(--ink-soft); text-align: center; background: #fff; }

/* Mini game cards under the hero banner, just a hint of the homepage. */
.fake-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin-top: 6%; }
.mini { display: block; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 4px 0 var(--line-d); }
.mini i { display: block; height: 10px; }
.mini img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mini::after { content: ''; display: block; height: 14px; margin: 6px 10% 8px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0 60%, transparent 60%); }

/* The example banner: the homepage .hero.family, sized to its frame. */
.banner { container-type: inline-size; transition: opacity 0.3s, transform 0.3s; }
.banner.swap { opacity: 0; transform: scale(0.97); }
.banner .hero { --kid-h: 24cqi; padding: 3cqi calc(var(--kid-h) * 0.72) 1cqi; }
.banner .hero.family.two { --kid-h: 19cqi; padding-left: calc(var(--kid-h) * 1.2); padding-right: calc(var(--kid-h) * 1.2); }
.banner .hero.family .logo-top { font-size: calc(7.6cqi * var(--fit, 1)); }
.banner .logo-word { font-size: 13.5cqi; letter-spacing: 0.8cqi; }
.banner .kid { bottom: -1cqi; }
.banner.solo .hero { padding-top: 5cqi; padding-bottom: 3cqi; }
@container (max-width: 420px) {
  .banner .logo-top .ltr { text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 0 4px 0 rgba(61, 44, 85, 0.22); }
  .banner .logo-word { text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 2px 2px var(--ink), -2px -2px var(--ink), 2px -2px var(--ink), -2px 2px var(--ink), 0 7px 0 var(--ink); }
}
/* In the maker the banner redraws on every tap, so only new things pop. */
.banner .calm .kid, .banner .calm .logo-word, .banner .calm .ltr.still { animation: none; }
.banner .calm .ltr:not(.still) { animation-delay: 0s; }
.banner .kid.bump { animation: bump 0.45s cubic-bezier(0.2, 1.8, 0.4, 1); }
@keyframes bump { from { transform: scale(0.8) translateY(6px); } to { transform: none; } }

/* ---------------------------------------------------------------- perks */

.perks { margin: 0 0 40px; }
.perk-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .perk-list { grid-template-columns: repeat(6, 1fr); gap: 18px; }
  .perk { grid-column: span 2; }
  .perk:nth-child(n + 4) { grid-column: span 3; }
}
.perk { padding: 20px 18px 18px; border-radius: 26px; background: var(--paper); box-shadow: 0 7px 0 var(--line-d), 0 12px 26px rgba(61, 44, 85, 0.1); }
.perk-ico { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 20px; font-size: 34px; background: var(--tint); }
.perk h3 { margin: 0 0 6px; font-size: 21px; }
.perk p { margin: 0; font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); }

/* ---------------------------------------------------------------- try it */

.try { padding-bottom: 28px; background: linear-gradient(180deg, var(--paper), #fff6fb); }
.try h2 { font-size: clamp(26px, 3.6vw, 32px); }
.try-intro { margin: 0 0 18px; }
.try-grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .try-grid { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .try-preview { position: sticky; top: 16px; }
}
.browser.small { border-radius: 22px; }
.browser.small .address { font-size: 14px; }
.preview-note { margin: 14px 2px 0; padding: 12px 16px; border-radius: 18px; background: #fff6d6; border: 3px dashed var(--yellow); font-size: 16px !important; line-height: 1.4 !important; }

.maker .field { margin-bottom: 14px; }
.maker .hint { margin: 6px 2px 0; font-size: 15px; color: var(--ink-soft); }
.maker .hint.nudge { color: var(--red-d); }
.sw-row { margin: 0 0 14px; }
.sw-title { display: block; margin: 0 0 7px; font-size: 18px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw {
  width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 4px solid #fff; background: var(--sw); box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--line-d);
  transition: transform 0.12s, box-shadow 0.12s;
}
.sw[aria-pressed="true"] { transform: scale(1.12); box-shadow: 0 0 0 4px var(--ink), 0 5px 0 rgba(61, 44, 85, 0.35); }
.sw-icon {
  width: 56px; height: 56px; padding: 3px; border-radius: 16px; cursor: pointer;
  background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line-d);
  transition: transform 0.12s, border-color 0.12s;
}
.sw-icon svg { display: block; width: 100%; height: 100%; }
.sw-icon[aria-pressed="true"] { border-color: var(--green); background: #f0fbf2; box-shadow: 0 4px 0 var(--green-d); transform: translateY(-2px); }
.sw:active, .sw-icon:active { transform: translateY(3px); }
.sw:focus-visible, .sw-icon:focus-visible { outline: 4px solid rgba(77, 171, 247, 0.8); outline-offset: 3px; }
.maker-actions { margin-top: 18px; }

/* ---------------------------------------------------------------- how it works */

.how { margin: 44px 0 40px; }
.steps { display: grid; gap: 22px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 26px 20px 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.step-n { position: absolute; top: -16px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; font-weight: 700; color: #fff; background: var(--green); box-shadow: 0 4px 0 var(--green-d); border: 3px solid #fff; }
.step:nth-child(2) .step-n { background: var(--blue); box-shadow: 0 4px 0 var(--blue-d); }
.step:nth-child(3) .step-n { background: var(--purple); box-shadow: 0 4px 0 var(--purple-d); }
.step h3 { margin: 12px 0 6px; font-size: 23px; }
.step p { margin: 0 auto; max-width: 300px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }

/* Phone, tablet and laptop frames around screenshots. */
.phone { position: relative; width: min(240px, 72%); margin: 20px auto 0; padding-top: 24px; border: 9px solid var(--ink); border-radius: 36px; overflow: hidden; background: #ffe6d2; box-shadow: 0 8px 0 rgba(61, 44, 85, 0.25), var(--shadow); }
.phone::before { content: ''; position: absolute; z-index: 1; top: 7px; left: 50%; translate: -50% 0; width: 34%; height: 15px; border-radius: 10px; background: var(--ink); }
.phone img, .tablet img, .laptop img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- gallery */

.games-gallery { margin: 44px 0 40px; }
.shots { display: grid; gap: 22px; }
@media (min-width: 760px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .shot.wide { grid-column: 1 / -1; }
}
.shot { position: relative; display: flex; flex-direction: column; margin: 0; border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 8px 0 var(--line-d), var(--shadow); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: #cfe9ff; }
.shot.wide img { aspect-ratio: auto; }
.shot figcaption { padding: 14px 20px 18px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.shot figcaption b { display: block; margin-bottom: 2px; font-size: 22px; color: var(--ink); }

/* ---------------------------------------------------------------- progress */

.progress h2, .safe h2 { font-size: clamp(26px, 3.6vw, 32px); }
.progress-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 860px) { .progress-grid { grid-template-columns: 1fr 1.1fr; } }
.lead-sm { margin: 0 0 14px; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 17.5px !important; line-height: 1.45 !important; }
.ticks li > span:first-child { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--line); font-size: 22px; }

.devices { display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 6px; align-items: center; }
.tablet { border: 8px solid var(--ink); border-radius: 22px; overflow: hidden; background: #fff; transform: rotate(-3deg); box-shadow: 0 6px 0 rgba(61, 44, 85, 0.25), var(--shadow); }
.laptop { transform: rotate(2deg); }
.laptop-screen { border: 7px solid var(--ink); border-bottom-width: 9px; border-radius: 14px 14px 4px 4px; overflow: hidden; background: #fff; }
.laptop-base { height: 12px; margin: 0 -10%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #b9aecb, #8f82a6); box-shadow: 0 6px 14px rgba(61, 44, 85, 0.2); }
.sync span { display: block; font-size: 34px; animation: float 2.4s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------- safe */

.safe { background: linear-gradient(180deg, var(--paper), #f2fbf4); }
.safe-grid { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .safe-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .safe-grid { grid-template-columns: repeat(3, 1fr); } }
.safe-grid li { padding: 16px 18px; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 var(--line); font-size: 16.5px !important; line-height: 1.45 !important; color: var(--ink-soft); }
.safe-grid li > span { display: block; font-size: 30px; margin-bottom: 4px; }
.safe-grid b { display: block; margin-bottom: 3px; font-size: 19px; color: var(--ink); }

/* ---------------------------------------------------------------- faq */

.faq { max-width: 820px; margin: 44px auto 40px; }
.faq .section-title { margin-bottom: 22px; }
.faq details { margin: 0 0 12px; border-radius: 22px; background: var(--paper); box-shadow: 0 5px 0 var(--line-d); overflow: hidden; }
.faq summary { position: relative; padding: 18px 60px 18px 22px; font-size: 20px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--lilac); color: var(--purple-d); font-size: 26px; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 4px solid rgba(77, 171, 247, 0.8); outline-offset: -4px; border-radius: 22px; }
.faq details p { margin: 0; padding: 0 22px 20px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------------- final */

.final { position: relative; margin: 44px 0 10px; padding: 30px 22px 30px; border-radius: 32px; text-align: center; background: linear-gradient(135deg, #f3ecff, #ffe3ef 60%, #fff1c9); box-shadow: 0 10px 0 #e2d4ff, var(--shadow); }
.final h2 { margin: 6px 0 10px; font-size: clamp(28px, 4.4vw, 40px); }
.final > p { max-width: 560px; margin: 0 auto 20px; font-size: 19px; line-height: 1.5; }
.final > p.muted { margin: 16px auto 0; font-size: 16px; }
.final-kids { display: flex; justify-content: center; gap: 4px; }
.final-kids .kid { position: static; width: 92px; height: 115px; animation: none; }
.final-kids .kid.l .kid-wave { animation: kidWaveL 0.42s ease-in-out calc(var(--k) * -0.1s) infinite alternate; }
.final-kids .kid.r .kid-wave { animation: kidWaveR 0.42s ease-in-out calc(var(--k) * -0.1s) infinite alternate; }
.final-kids .kid .kid-body, .final-kids .kid .kid-shadow { animation-delay: calc(var(--k) * -0.3s); }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 600px) {
  .hero-text h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .btn:has(small) { width: 100%; }
  .hero-text .btn { width: 100%; }
  .browser-bar { padding: 8px 10px; gap: 8px; }
  .dots i { width: 9px; height: 9px; }
  .address { font-size: 13px; padding: 5px 10px; }
  .perk { padding: 16px; }
  .sw { width: 36px; height: 36px; border-width: 3px; }
  .sw-icon { width: 50px; height: 50px; border-radius: 14px; }
  .swatches { gap: 7px; }
  .final-kids .kid { width: 70px; height: 88px; }
  .faq summary { font-size: 18px; }
  .shot figcaption b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .banner, .sw, .sw-icon, .faq summary::after { transition: none; }
  .sync span { animation: none; }
}

/* Phones and portrait tablets: the example banner straight after the
   headline, and compact perk rows with the icon at the side. */
@media (max-width: 979px) {
  .hero-band { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-text { display: contents; }
  .eyebrow-row { order: 0; align-self: flex-start; }
  .hero-text h1 { order: 1; }
  .hero-demo { order: 2; margin-bottom: 24px; }
  .lead { order: 3; }
  .hero-text .actions { order: 4; }
}
@media (max-width: 600px) {
  .perk { display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px; align-items: start; }
  .perk-ico { grid-row: span 2; width: 52px; height: 52px; margin: 0; font-size: 28px; border-radius: 16px; }
  .perk h3 { margin: 4px 0 4px; font-size: 19px; }
  .perk p { font-size: 16px; }
  .perk-list { gap: 12px; }
}
/* On narrow screens the preview stays in view while you tap the swatches. */
@media (max-width: 899px) {
  .try-preview { display: contents; }
  .try-preview .browser { position: sticky; top: 8px; z-index: 2; box-shadow: 0 6px 0 var(--line-d), 0 10px 24px rgba(61, 44, 85, 0.22); }
  .preview-note { margin: 0; }
}
@media (max-width: 600px) {
  .try { padding-left: 18px; padding-right: 18px; }
  .sw { width: 33px; height: 33px; }
  .swatches.colours { gap: 5px; }
}
/* overflow: hidden on .card would stop the sticky preview, so round the
   rainbow strip itself instead. */
.card.try { overflow: visible; }
.card.try::before { border-radius: 28px 28px 0 0; }
@media (max-width: 979px) {
  .hero-demo { width: 100%; max-width: 640px; align-self: center; }
}
@media (max-width: 899px) {
  .try-preview .browser { width: 100%; max-width: 480px; margin: 0 auto; }
}

/* "Already a supporter? Manage your family page": small, under the hero buttons and the FAQ title. */
.manage-link { margin: 16px 0 0; font-size: 17px; color: var(--ink-soft); }
.manage-link a { font-weight: 700; color: var(--purple-d); white-space: nowrap; }
.faq .manage-link { margin: -8px auto 18px; }