/* The website's pages (/, /worlds/, /prices/): one stylesheet. Moved out of index.html when the play worlds and the
   prices got pages of their own; scripts/share-image.cjs reads it too. */
:root {
  --ground: #F4F3F0; --paper: #FFFFFF; --tint: #ECEAE5; --tint2: #E2DFD8; --sand: #D2CEC5;
  --line: #E3E0DA; --line2: #D0CCC4;
  --ink: #272B42; --ink2: #3D4260; --muted: #60647B;
  --primary: #343D70; --primary-deep: #262D55; --accent: #D8CAF4; --secondary: #EFB9A3;
  --serif: "Fraunces", Georgia, serif; --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lead: var(--primary); --deep: var(--primary); --wtint: #E8E6F2; --wtint2: #D8CAF4; --on: #FFFFFF;
}
/* one colour family per play world (open ones = the website's colours; the four coming ones from the sketches) */
[data-w=library]     { --lead: #23815B; --deep: #145F42; --wtint: #E6F1E2; --wtint2: #C9E3D3; --on: #FFFFFF; }
[data-w=supermarket] { --lead: #C8463D; --deep: #9E332C; --wtint: #FBE5E0; --wtint2: #F4C8C0; --on: #FFFFFF; }
[data-w=postoffice]  { --lead: #F4C542; --deep: #70521A; --wtint: #FCF0C8; --wtint2: #F7DE8F; --on: #272B42; }
[data-w=airport]     { --lead: #3267C8; --deep: #2855A6; --wtint: #E3EDFC; --wtint2: #C6D8F6; --on: #FFFFFF; }
[data-w=cinema]      { --lead: #7D3C98; --deep: #4F2161; --wtint: #F1E7F5; --wtint2: #E4D2EC; --on: #FFFFFF; }
[data-w=restaurant]  { --lead: #E2711D; --deep: #8A3E08; --wtint: #FCEADC; --wtint2: #F8D5BA; --on: #2A1400; }
[data-w=bank]        { --lead: #C2477E; --deep: #7E1F4D; --wtint: #FAE4EE; --wtint2: #F3C9DB; --on: #FFFFFF; }
[data-w=hunt]        { --lead: #9A5F24; --deep: #5E3A12; --wtint: #F4E9DA; --wtint2: #E9D3B5; --on: #FFFFFF; }
[data-w=doctor]      { --lead: #0E7C86; --deep: #0A4F56; --wtint: #E0F1F2; --wtint2: #C3E3E6; --on: #FFFFFF; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* a class with its own display must never beat `hidden` */
html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1240px, 100% - 56px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 650; font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.025em; line-height: 1.02; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--lead); }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--deep); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--primary); color: #FFFFFF; font: 750 18px/1.1 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(39, 43, 66, .55); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--big { min-height: 62px; padding: 0 32px; font-size: 20px; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn--ghost { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 10px 22px -14px rgba(39, 43, 66, .5); }
.btn--world { background: var(--lead); color: var(--on); }
.btn--line { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--lead); }
.btn--line:hover { background: var(--wtint); }
.btn--accent { background: var(--accent); color: var(--primary-deep); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn[hidden] { display: none; }

/* ---------- header ---------- */
.banner { background: var(--primary); color: #FFFFFF; }
.banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; font-weight: 650; }
.banner .btn { background: var(--accent); color: var(--primary-deep); min-height: 44px; }
.top { position: sticky; top: 0; z-index: 50; background: rgba(244, 243, 240, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 750 30px/1 var(--serif); letter-spacing: -1.5px; text-decoration: none; color: var(--ink); }
.logo .dot { color: var(--secondary); }
/* the mark as on the current site: a little taller than wide, tilted */
.logo-mark { display: grid; place-items: center; width: 34px; height: 37px; border-radius: 9px; background: var(--primary); color: var(--accent); transform: rotate(-6deg); }
.logo-mark svg { width: 24px; height: 24px; }
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a { padding: 9px 13px; border-radius: 999px; text-decoration: none; font-weight: 650; font-size: 16.5px; color: var(--ink2); white-space: nowrap; }
.nav a:hover { background: #FFFFFF; color: var(--ink); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-right > :not(.who) { flex: none; } /* when it gets tight, only the email (.who) gives way; the buttons keep their words on one line */
.who { font-size: 15px; color: var(--muted); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-status { padding: 14px 24px; text-align: center; background: #FFF4CF; color: #5C4300; font-weight: 700; }

.top { border-bottom-color: var(--line); }
.top .wrap { height: 96px; gap: 28px; }
.top .logo { font-size: 42px; gap: 16px; flex: none; }
.top .logo-mark { width: 50px; height: 54px; border-radius: 14px; }
.top .logo-mark svg { width: 34px; height: 34px; }
.top .nav { margin-inline: auto; gap: 8px; }
.top .nav a { font-weight: 500; font-size: 17px; }
.top-right { gap: 16px; margin-left: 0; }
.top .who { max-width: 130px; }
.top #loginBtn { border-radius: 0; border-left: 1px solid var(--line2); background: transparent; box-shadow: none; font-weight: 500; }
.top #headerTry, .top #playBtn { border-radius: 12px; min-height: 48px; font-weight: 650; }

/* ---------- hero + street ---------- */
.hero { padding-top: 30px; }
.hero-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); align-items: start; gap: clamp(28px, 3vw, 48px); }
.hero-text { padding: 28px 0; }
.hero .eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .2em; }
.hero h1 { font-size: clamp(46px, 5.15vw, 78px); line-height: 1.05; margin: 24px 0 0; font-weight: 600; letter-spacing: -.045em; }
.hero h1 em { color: inherit; font-weight: 450; }
.hero .lead { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.6; color: var(--ink2); margin: 26px 0 0; max-width: 580px; }
.ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .ctas { justify-content: flex-start; align-items: center; gap: 22px; margin-top: 38px; }
.hero .btn--big { min-height: 64px; padding-inline: 28px; border-radius: 16px; font-weight: 650; }
.hero .btn--big svg { margin-left: 8px; width: 24px; height: 24px; }
.hero-watch { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; color: var(--ink); text-decoration: none; font-size: 17px; line-height: 1.35; }
.hero-watch:hover { color: var(--primary); }
.hero-watch-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--primary); border-radius: 50%; flex: none; }
.hero-watch-icon svg { width: 18px; height: 18px; margin-left: 3px; }
.hero-note { margin-top: 22px; color: var(--muted); font-size: 15px; }
.hero-payment { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 22px; padding: 12px 16px; border: 1px solid rgba(57, 60, 122, .2); border-radius: 12px; background: #e9e8f3; color: var(--primary); font-size: 16px; line-height: 1.4; }
.hero-payment svg { flex: none; width: 22px; height: 22px; }
.hero-payment strong { display: block; font-weight: 700; }
.hero-payment-note { display: block; margin-top: 3px; font-size: 14px; }
.hero-payment + .hero-note { margin-top: 12px; }
.hero-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--tint); }
.hero-photo img { width: 100%; height: clamp(420px, 37vw, 570px); object-fit: cover; }
.hero-photo figcaption { position: absolute; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-radius: 12px; background: rgba(255, 252, 246, .94); color: var(--ink); font-size: 16px; }
.hero-photo figcaption svg { width: 24px; height: 24px; }
.hero-carousel { min-width: 0; }
.hero-carousel .hero-photo img { height: auto; aspect-ratio: 3 / 2; }
.hero-slides { display: grid; }
/* Responsive sources keep the family's photos filling the hero, including after a viewport resize. */
body[data-page="home"] .hero-slides > picture { display: contents; }
body[data-page="home"] .hero-slides > picture > img { position: absolute; inset: 0; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-controls { position: relative; display: flex; justify-content: center; align-items: center; min-height: 36px; margin-top: 6px; }
.hero-dots { display: flex; gap: 2px; }
.hero-dot, .hero-rotation { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--primary); cursor: pointer; }
.hero-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .4; transition: transform .2s, opacity .2s; }
.hero-dot[aria-pressed="true"]::before { opacity: 1; background: var(--primary); transform: scale(1.3); }
.hero-dot:hover::before { opacity: 1; }
.hero-dot:disabled { cursor: default; opacity: .3; }
.hero-rotation { position: absolute; right: 0; }
.hero-rotation:hover { background: var(--tint); }
.hero-rotation svg { width: 16px; height: 16px; }

.hero-street-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line2); }
.hero-street-head h2 { font-size: clamp(30px, 3vw, 44px); }
.hero-worlds-link { display: inline-flex; align-items: center; gap: 12px; color: var(--primary); font-weight: 650; font-size: 17px; text-decoration: none; }
.hero-worlds-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-worlds-link svg { width: 22px; height: 22px; flex: none; }
/* the street: at most five buildings in view (a slot is a fifth of the strip, never under 150px), soft edges,
   rolling left forever; it pauses while the pointer or the keyboard is on it */
.street-wrap { --street-w: min(1240px, 100vw - 56px); --slot: max(150px, calc(var(--street-w) / 5)); width: min(1240px, 100% - 56px); margin: 10px auto 0; }
/* (the same width as every .wrap: header, hero, sections; narrower screens below) */
.street { position: relative; overflow: hidden; container-type: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.street-track { display: flex; width: max-content; animation: roll 72s linear infinite; }
@keyframes roll { to { transform: translateX(-50%); } }
.street:hover *, .street:focus-within * { animation-play-state: paused !important; } /* everything in the street, legs too */
.street-svg { display: block; flex: none; width: calc(var(--slot) * 9); height: calc(var(--slot) * 360 / 175); }
.fg-track { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; width: max-content; pointer-events: none; animation: roll 50s linear infinite; }
.fg-svg { display: block; flex: none; width: calc(var(--slot) * 9); height: calc(var(--slot) * 34 / 175); }
.street-hint { display: none; }
.sky { position: absolute; inset: 0; pointer-events: none; }
.plane { position: absolute; top: calc(var(--slot) * .1); left: 0; width: calc(var(--slot) * .5); height: auto; animation: fly 30s linear infinite; }
@keyframes fly { from { transform: translate(calc(var(--slot) * -.7), 16px); } to { transform: translate(100cqw, -8px); } }
.birds { position: absolute; top: calc(var(--slot) * .34); left: 36%; width: calc(var(--slot) * .2); height: auto; opacity: .5; }
.bike { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--slot) * 36 / 175); height: calc(var(--slot) * 100 / 175); width: calc(var(--slot) * 130 / 175);
  transform: translateX(-50%); pointer-events: none; overflow: visible; }
.bike .ride { animation: bump .5s ease-in-out infinite; }
@keyframes bump { 50% { transform: translateY(-2.4px); } }
.bike .spokes { animation: spin .8s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.bike .flag { animation: wave .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0% 50%; }
.bike .thigh, .bike .shin, .bike .crank { transform-box: view-box; }
.bike .thigh { transform-origin: 55px 45px; }
.bike .shin { transform-origin: 75px 45px; }
.bike .crank { transform-origin: 60px 80px; animation: spin 1.1s linear infinite; }
@keyframes wave { from { transform: skewY(-8deg); } to { transform: skewY(6deg); } }
.bld { cursor: pointer; outline: none; }
.bld .lift { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bld:hover .lift, .bld:focus-visible .lift { transform: translateY(-12px); }
.bld .ring { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 9 7; opacity: 0; pointer-events: all; } /* the whole slot is clickable */
.bld:focus-visible .ring { opacity: 1; }
.hook { animation: sway 5s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes sway { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
.cloud { animation: drift 40s ease-in-out infinite alternate; }
.cloud--slow { animation-duration: 60s; }
@keyframes drift { from { transform: translateX(-20px); } to { transform: translateX(28px); } }
.beacon { animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- sections ---------- */
main > section { padding-top: clamp(72px, 9vw, 132px); }
.sec-head { max-width: 960px; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head h1, .sec-head h2 { font-size: clamp(44px, 6.4vw, 92px); margin-top: 14px; }
.sec-text { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.55; color: var(--ink2); margin-top: 20px; max-width: 760px; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center .sec-text { margin-inline: auto; }
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; padding: clamp(22px, 2.8vw, 36px); }
.label { font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }

/* ---------- why parents like it: learning through play, and on the move ---------- */
.learn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.learn-card { padding: 30px 28px 32px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; }
.learn-card .mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--wtint); color: var(--deep); }
.learn-card .mark svg { width: 30px; height: 30px; }
.mark-text { font: 700 24px/1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; letter-spacing: -.01em; }
.learn-card h3 { font-size: 27px; line-height: 1.1; margin-top: 22px; }
.learn-card p { margin-top: 12px; color: var(--ink2); font-size: 17px; line-height: 1.55; }
.together { margin-top: 18px; padding: 20px 26px; border-radius: 24px; background: var(--tint); color: var(--ink2); font-size: 17.5px; }
.together b { color: var(--ink); }
.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 22px;
  padding: clamp(28px, 4vw, 56px); border-radius: 38px; background: #FFFFFF; border: 1px solid var(--line); }
.active-copy { min-width: 0; }
.active-copy h3 { font-size: clamp(36px, 4.4vw, 62px); margin-top: 14px; overflow-wrap: break-word; hyphens: auto; }   /* "Bildschirmzeit," on a 320 px phone */
.active-copy p:not(.eyebrow) { margin-top: 18px; color: var(--ink2); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.active-copy .active-note { padding-left: 16px; border-left: 4px solid var(--secondary); font-weight: 600; }
.active-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
/* each world is a link to its section on /worlds/ */
.active-list li > a { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 20px; border-radius: 24px; background: var(--wtint);
  color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.active-list li > a:hover, .active-list li > a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(39, 43, 66, .55); }
.active-list li .bld-art { width: 58px; height: auto; }
.active-list li > a > span { color: var(--ink2); font-size: 16.5px; line-height: 1.5; overflow-wrap: break-word; hyphens: auto; }
.active-list b { display: block; color: var(--deep); font: 650 21px/1.15 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; margin-bottom: 4px; }

/* ---------- the open worlds ---------- */
.worlds .sec-head { margin-bottom: clamp(26px, 3vw, 40px); }
.world + .world { margin-top: clamp(56px, 7vw, 96px); }
.w-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: end;
  background: var(--wtint); border-radius: 38px; padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0; overflow: hidden; }
.w-text { padding-bottom: clamp(28px, 4vw, 56px); }
.w-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: 16px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--deep); }
.w-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lead); color: var(--on);
  font-size: 16px; letter-spacing: 0; }
.w-role { padding: 6px 14px; border-radius: 999px; background: #FFFFFF; font-size: 15.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.w-title { font-size: clamp(38px, 5.2vw, 76px); margin-top: 20px; max-width: 15ch; }
.w-lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.55; color: var(--ink2); margin-top: 20px; max-width: 640px; }
.w-art { align-self: end; }
.w-art .bld-art { display: block; width: 100%; height: auto; margin-bottom: -2px; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; color: var(--ink2);
  font-size: 15px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.chip b { color: var(--deep); font-weight: 800; }
.chip svg { width: 18px; height: 18px; color: var(--deep); flex: none; }
.chip .tag { color: var(--muted); font-size: 13px; font-weight: 700; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--wtint2); }
.dots i.on { background: var(--lead); }
.shop-link { display: inline-flex; align-items: center; gap: 4px; color: var(--deep); font-weight: 750; font-size: 15px; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.facts .shop-link { margin-left: 6px; }
.w-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 24px; margin-top: 24px; align-items: start; }
.w-steps .label { margin-bottom: 4px; }
.w-hint { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; width: 100%; padding: 11px 12px; border: 0; border-radius: 18px; background: none;
  color: var(--ink2); text-align: left; cursor: pointer; transition: background-color .15s; }
.step:hover { background: var(--ground); }
.step[aria-pressed="true"] { background: var(--wtint); }
.step .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wtint); color: var(--deep); font-weight: 800; font-size: 16px; }
.step[aria-pressed="true"] .n { background: var(--lead); color: var(--on); }
.step b { display: block; color: var(--ink); font-size: 19px; line-height: 1.3; padding-top: 5px; }
.step .d { display: block; margin-top: 6px; font-size: 16.5px; line-height: 1.55; }
.step:not([aria-pressed="true"]) .d { display: none; }
.w-skill { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 16.5px; }
.w-skill .lk { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }
.w-shot { position: sticky; top: 104px; }
.device { position: relative; display: block; width: 100%; padding: 12px; border: 0; border-radius: 26px; background: #262A3D; cursor: zoom-in;
  box-shadow: 0 30px 50px -28px rgba(39, 43, 66, .7); }
.device img { width: 100%; height: auto; aspect-ratio: 1200 / 820; border-radius: 14px; background: #F7F6F3; }
.device .zoom { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); opacity: 0; transition: opacity .2s; }
.device .zoom svg { width: 20px; height: 20px; }
.device:hover .zoom, .device:focus-visible .zoom { opacity: 1; }
.shot-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.round { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line2); cursor: pointer; }
.round:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.round svg { width: 22px; height: 22px; }
.shot-dots { display: inline-flex; gap: 8px; }
.shot-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); transition: background-color .2s, transform .2s; }
.shot-dots i.on { background: var(--lead); transform: scale(1.25); }
.w-caption { margin-top: 10px; text-align: center; color: var(--muted); font-size: 14px; }
.w-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px; padding: 22px 28px; background: #FFFFFF;
  border: 1px solid var(--line); border-radius: 30px; }
/* no price in a world's own section: Buy scrolls to #prices, and this line points to the bundle there */
.w-bundle { color: var(--deep); font-weight: 800; font-size: 17px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.w-bundle::after { content: "\00a0\2192"; } /* the arrow stays with the last word */
.w-bundle:hover { color: var(--ink); }
.was { color: var(--muted); font-size: 16px; }
.badge { padding: 4px 12px; border-radius: 999px; background: var(--wtint); color: var(--deep); font-size: 14px; font-weight: 800; white-space: nowrap; }
.amount { font: 650 46px/1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; color: var(--ink); letter-spacing: -.02em; }
.once { color: var(--muted); font-size: 16px; }
.acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.backtop { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; }
.backtop svg { width: 16px; height: 16px; }
.backtop:hover { color: var(--ink); }

/* ---------- under construction ---------- */
.soon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } /* the coming worlds (one now: the doctor) */
.soon-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 11px); justify-self: center; width: 100%; } /* an odd last one, centred */
.soon-card { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; }
.sc-art { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 280px; padding-top: 18px; background: var(--wtint);
  background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 255, 255, .35) 22px 44px); }
.sc-art .bld-art { width: 180px; height: auto; margin-bottom: -2px; }
.soon-badge { position: absolute; top: 16px; left: 16px; padding: 3px; border-radius: 11px; background: repeating-linear-gradient(-45deg, #F4C542 0 8px, #272B42 8px 16px); }
.soon-badge span { display: block; padding: 6px 11px; border-radius: 8px; background: #F4C542; color: #272B42; font-size: 13px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; }
.sc-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 24px 26px 26px; }
.sc-body h3 { font-size: 32px; }
.sc-hook { color: var(--ink2); font-size: 17px; line-height: 1.5; }
.sc-list { list-style: none; display: grid; gap: 6px; margin: 0 0 6px; padding: 0; color: var(--ink2); font-size: 16px; line-height: 1.45; }
.sc-list li { display: flex; gap: 10px; }
.sc-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--lead); }
.sc-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- an afternoon in six worlds ---------- */
.play-collage { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 24vw, 300px); gap: 18px; margin: 0; padding: 0; }
.play-moment { min-width: 0; grid-column: span 4; }
.play-moment:first-child, .play-moment:last-child { grid-column: span 5; }
.play-moment:nth-child(3), .play-moment:nth-child(4) { grid-column: span 3; }
.play-moment a { display: block; position: relative; height: 100%; overflow: hidden; border-radius: 22px;
  background: var(--wtint); text-decoration: none; }
.play-moment img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.play-moment-label { position: absolute; left: 16px; bottom: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px; padding: 8px 13px; border-radius: 10px; background: #F8F5EF;
  color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.4; }
.play-moment-label::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--deep); }
.play-moment-label > :first-child { overflow-wrap: anywhere; }
.play-moment-label > :last-child { color: var(--deep); }
.play-moment[data-w=library] .play-moment-label { left: auto; } /* keep the scanner on the left visible */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .play-moment a:hover img { transform: scale(1.035); }
}
@media (max-width: 900px) {
  .play-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
  .play-collage > .play-moment { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .play-collage { grid-template-columns: 1fr; gap: 14px; }
  .play-collage > .play-moment { aspect-ratio: 3 / 2; }
  .play-moment a { border-radius: 18px; }
  .play-moment-label { left: 12px; bottom: 12px; right: 12px; padding: 7px 11px; font-size: 15px; }
}

/* ---------- film ---------- */
.film-frame { position: relative; max-width: 1080px; margin: 0 auto; overflow: hidden; border-radius: 34px; background: #262A3D;
  box-shadow: 0 34px 60px -34px rgba(39, 43, 66, .75); }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; background: #262A3D; }
.film-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 9; padding: 24px;
  background: #262A3D url(/assets/beeptown-film-poster.webp) center / cover; background-blend-mode: multiply; color: #FFFFFF; text-align: center; font-weight: 700; }

/* ---------- how ---------- */
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; }
.how-steps li { padding: 34px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; }
.how-steps .big { display: block; font: 650 76px/1 var(--serif); font-variation-settings: "SOFT" 100, "opsz" 144; color: var(--primary); }
.how-steps h3 { font-size: 30px; margin-top: 18px; }
.how-steps p { margin-top: 12px; color: var(--ink2); }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.note { padding: 34px; border-radius: 30px; background: var(--tint); }
.note h3 { font-size: 30px; }
.note p { margin: 12px 0 16px; color: var(--ink2); }

/* ---------- prices ---------- */
.one-time { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 22px; padding: 10px 18px; border-radius: 999px;
  background: #F4C542; color: #2B2100; font-weight: 650; }
.one-time b { font-weight: 800; letter-spacing: .04em; }
/* five world cards: three on top, two centred below (six columns, two each) */
.coupon-note { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin-top: 12px; padding: 10px 18px; border-radius: 18px;
  background: var(--accent); color: var(--primary-deep); font-weight: 700; }
.coupon-note::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
/* eight world cards: four and four (eight columns, two each); three on a row on a small laptop (the last two
   centred), two on a tablet, one on a phone */
.prices-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; }
.price-card { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; }
.pc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 132px; padding: 0 18px 0 22px; background: var(--wtint); }
.pc-name { padding-bottom: 20px; font-size: 30px; line-height: 1.02; hyphens: manual; }
.pc-art { width: 70px; height: auto; flex: none; margin-bottom: -2px; }
.pc-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 22px 22px 24px; }
.pc-text { color: var(--ink2); font-size: 16.5px; line-height: 1.5; }
.facts--compact { margin-top: 0; gap: 6px; }
.facts--compact .chip { padding: 6px 11px; font-size: 14px; background: var(--ground); }
.pc-was { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; color: var(--muted); font-size: 15px; }
.pc-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pc-body .pc-amount { margin-top: auto; } /* price and buttons line up at the bottom of every card */
.pc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-acts .btn { padding: 0 12px; }
.pc-acts .btn[hidden] + .btn { grid-column: 1 / -1; }
.bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: stretch; } /* the bundles come first, the single worlds below */
.bundle { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(26px, 3.2vw, 44px); border-radius: 36px; }
.bundle h3 { font-size: clamp(34px, 3.8vw, 54px); }
.bundle .b-text { font-size: 18px; line-height: 1.5; color: var(--ink2); max-width: 520px; }
.bundle .pc-amount { margin-top: auto; padding-top: 6px; }
.bundle .amount { font-size: 60px; }
.bundle--ms { background: #FFFFFF; border: 1px solid var(--line); }
.ms-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.best-pick { padding: 5px 12px; border-radius: 999px; background: #F4C542; color: #272B42; font-size: 14px; font-weight: 800; white-space: nowrap; }
.ms-compare { margin-top: -8px; color: var(--muted); font-size: 16px; }
.ms-compare s { text-decoration-thickness: 2px; }
.bundle--all { background: var(--primary); color: #FFFFFF; }
.bundle--all .eyebrow { color: var(--accent); }
.bundle--all .b-text { color: #E7E6F3; }
.bundle--all .amount { color: #FFFFFF; }
.bundle--all .once { color: #CFCDE6; }
.bundle-art { width: 100%; height: auto; margin: 6px 0 2px; }
.bundle--all .bundle-art { margin-top: auto; } /* stretched to the Mainstreet card's height: the street and its legend sit in the middle of the free space */
.bundle-note { color: #CFCDE6; font-size: 15px; }
/* the Beeptown bundle is coming soon: the teaser cards' "under construction" badge instead of a Buy button */
.soon-badge.bundle-soon { position: static; padding: 4px; border-radius: 14px; }
.bundle-soon span { padding: 11px 20px; border-radius: 10px; font-size: 18px; }
.bt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #E7E6F3; font-size: 15px; font-weight: 700; }
.bt-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bt-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.lg-open::before { background: #3FB37A; }
.lg-soon::before { background: repeating-linear-gradient(-45deg, #F4C542 0 3px, #272B42 3px 6px); }
.ms-worlds { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 4px 0 0; padding: 0; }
.ms-world { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 22px; background: var(--wtint); }
.ms-world .bld-art { width: 62px; height: auto; }
.ms-name { font-size: 15px; font-weight: 750; line-height: 1.2; text-align: center; hyphens: manual; }
/* Pick any 3: eight worlds to tap, four across (.ms-worlds); two across on a phone, where "Schattenjacht" and
   "Bibliotheek" don't fit a quarter */
@media (max-width: 640px) { .pick-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-worlds li { display: flex; }
.pick-world { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 3px solid transparent; border-radius: 22px; background: var(--wtint); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, opacity .15s; }
.pick-world .bld-art { width: 62px; height: auto; }
.pick-world:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--wtint2); }
.pick-world:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.pick-world[aria-pressed="true"] { border-color: var(--lead); background: #FFFFFF; }
.pick-tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2, #D0CCC4); background: #FFFFFF; }
.pick-world[aria-pressed="true"] .pick-tick { border-color: var(--lead); background: var(--lead) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
[data-w=postoffice].pick-world[aria-pressed="true"] .pick-tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23272B42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick-world.is-full:not([aria-pressed="true"]) { opacity: .55; } /* three chosen: the others wait until one is tapped off again */
.pick-world:disabled { cursor: default; opacity: .45; }
.pick-world:disabled .pick-tick { display: none; }
.pick-owned { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pick-count { color: var(--ink2); font-size: 16px; font-weight: 700; }
.price-note { margin-top: 18px; color: var(--muted); font-size: 15px; max-width: 900px; }
.free-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: 22px; padding: 30px 34px;
  border-radius: 30px; background: #FFFFFF; border: 1px solid var(--line); }
.free-row h3 { font-size: 32px; }
.free-row p { margin-top: 8px; color: var(--ink2); max-width: 720px; }

/* ---------- parents + feedback ---------- */
.parents-grid, .fb-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.parents-copy h2, .fb-copy h2 { font-size: clamp(42px, 5.6vw, 80px); margin-top: 14px; }
.local-note { margin-top: 18px; padding: 18px 20px; border-radius: 20px; background: var(--tint); color: var(--ink2); font-size: 16px; }
.faq h3 { font-size: 30px; margin-bottom: 16px; }
.faq details { padding: 2px 24px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 22px; }
.faq details + details { margin-top: 10px; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-weight: 750; font-size: 19px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 600 30px/0.8 var(--serif); color: var(--primary); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-bottom: 18px; color: var(--ink2); }
.faq-shops { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fb-box { padding: clamp(24px, 3vw, 36px); background: #FFFFFF; border: 1px solid var(--line); border-radius: 30px; }
.fb-form { display: grid; gap: 10px; }
.fb-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; }
.fb-moods legend { width: 100%; margin-bottom: 10px; padding: 0; font-weight: 750; }
.fb-mood { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 8px; border-radius: 999px; background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--line); font-weight: 650; cursor: pointer; }
.fb-mood input { position: absolute; opacity: 0; pointer-events: none; }
.fb-mood:has(input:checked) { background: var(--accent); box-shadow: inset 0 0 0 2px var(--primary); }
.fb-mood .emo svg { display: block; width: 28px; height: 28px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.fb-mood:hover .emo svg { transform: scale(1.08); }
.fb-mood:has(input:checked) .emo svg { transform: scale(1.16) rotate(-8deg); }
.fb-mood:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.fb-label { margin-top: 8px; font-weight: 750; }
textarea, input[type=email], input[inputmode=numeric] { width: 100%; padding: 14px 16px; border: 2px solid var(--line2); border-radius: 16px; background: var(--ground);
  color: var(--ink); font: 400 18px/1.5 var(--sans); }
textarea:focus, input:focus { outline: none; border-color: var(--primary); background: #FFFFFF; }
.fb-trap { position: absolute; left: -9999px; }
/* give it as a present: what, how it arrives, (by post) the address, then the payment */
.gift-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(26px, 3.6vw, 52px); border-radius: 38px; background: var(--accent); }
.gift-copy h2 { font-size: clamp(42px, 5.6vw, 80px); margin-top: 14px; }
.gift-copy .sec-text { margin-top: 16px; }
.gift-copy .eyebrow { color: var(--primary); }
.gift-redeem { margin-top: 22px; font-weight: 700; }
.gift-redeem a { color: var(--primary); }
.gift-pic { display: block; width: 100%; height: auto; margin-top: clamp(20px, 3vw, 32px); border-radius: 24px; box-shadow: 0 18px 40px -24px rgba(36, 30, 20, .45); }
.gift-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); background: #FFFFFF; border-radius: 30px; }
.gift-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.gift-form legend { margin-bottom: 10px; padding: 0; font-weight: 750; }
.gift-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gift-opt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 18px; background: var(--ground); cursor: pointer; }
.gift-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gift-opt b { font-weight: 750; line-height: 1.25; }
.gift-opt span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.gift-opt .amount { font: 650 15px/1.4 var(--sans); font-variation-settings: normal; letter-spacing: 0; }
.gift-opt:has(input:checked) { background: var(--wtint); box-shadow: inset 0 0 0 3px var(--primary); }
.gift-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.gift-opts .gift-opt:last-child:nth-child(odd) { grid-column: 1 / -1; } /* the Mainstreet bundle, alone on its row, full width */
.gift-opts--how { grid-template-columns: 1fr; }
.gift-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gift-addr label, .gift-mail label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.gift-addr .wide { grid-column: 1 / -1; }
.gift-words { display: grid; gap: 10px; }
.gift-words legend { margin-bottom: 4px; }
.gift-words label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.gift-words .gift-small:empty { display: none; }
.gift-left { margin-top: -4px; text-align: right; }
.gift-left.is-over { color: #A53624; font-weight: 700; }
.gift-to:empty { display: none; }
.gift-opts--to { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; }
.gift-form textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--line2); border-radius: 14px; background: var(--ground); color: var(--ink);
  font: 400 17px/1.45 var(--sans); resize: vertical; min-height: 104px; }
.gift-form textarea:focus { outline: none; border-color: var(--primary); }
.gift-form input[type=text], .gift-form input[type=email] { width: 100%; padding: 12px 14px; border: 2px solid var(--line2); border-radius: 14px; background: var(--ground);
  color: var(--ink); font: 400 17px/1.4 var(--sans); }
.gift-to { color: var(--ink2); }
.gift-when { color: var(--ink2); font-weight: 650; }
.gift-when:empty { display: none; }
.gift-form .btn { justify-self: start; }
.gift-small { color: var(--muted); font-size: 15px; }
.gift-link { align-self: center; margin-top: -2px; padding: 4px 8px; border: 0; background: none; color: var(--deep); font: 700 15px/1.3 var(--sans); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.bundle--all .gift-link { color: #FFFFFF; }
.bundle .gift-link { align-self: flex-start; padding-left: 0; }
.err { min-height: 0; color: #A53624; font-weight: 700; }
.err:empty { display: none; }
.fb-form .btn { justify-self: start; margin-top: 6px; }
.fb-done { display: grid; justify-items: start; gap: 12px; }
.fb-done-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--primary); font-size: 28px; font-weight: 800; }
.fb-done strong { font: 650 34px/1.1 var(--serif); }
/* "Know a family who'd love this?": plain links to the share pages (none of their scripts, no referrer), the device's
   own share sheet where there is one, and the address to copy. Always https://beeptown.app/: each family gets its own language. */
.share { margin-top: clamp(26px, 3vw, 36px); padding: clamp(22px, 2.6vw, 30px); background: #FFFFFF; border: 1px solid var(--line); border-radius: 28px; }
.share h3 { font-size: clamp(24px, 2.4vw, 30px); }
.share > p { margin-top: 8px; color: var(--ink2); }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.share-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px 0 7px; border: 0; border-radius: 999px;
  background: var(--ground); color: var(--ink); font: 750 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(39, 43, 66, .6); }
.share-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.share-btn .ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #FFFFFF; }
.share-btn .ico svg { width: 18px; height: 18px; }
.share-btn[data-share=whatsapp] .ico { background: #25D366; }
.share-btn[data-share=facebook] .ico { background: #1877F2; }
.share-btn[data-share=pinterest] .ico { background: #E60023; }
.share-btn[data-share=copy] .ico { background: var(--muted); }
.share-done { min-height: 1.6em; margin: 10px 0 0; color: var(--deep); font-weight: 750; }

/* ---------- footer ---------- */
.foot { margin-top: clamp(72px, 9vw, 132px); padding: 40px 0 56px; border-top: 1px solid var(--line); }
.foot .wrap { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.foot p { margin-top: 10px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 16px; }
.foot-links a { text-decoration: none; font-weight: 650; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-links button { font: inherit; font-weight: 650; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.foot-links button:hover { color: var(--ink); text-decoration: underline; }
.foot-links button[hidden] { display: none; }

/* ---------- the Google Play app ---------- */
/* Inside the Play app (/account.js sets <html data-store-app>) nothing may sell or point to buying: Play allows
   only its own billing, so there the site is "log in to what you own". No prices, Buy buttons, bundles, buy
   banner or shop links (bol.com, Amazon); trying for free and logging in stay. Mark anything new that sells
   with data-sell (the script also keeps buy() and the banner shut: Beeptown.canBuy). */
html[data-store-app] [data-sell], html[data-store-app] [data-buy], html[data-store-app] .shop-link { display: none !important; }
/* a world's own bar then holds only "Try" (or, for a world you own, "Start playing"): no box, the world's colour */
html[data-store-app] .w-buy { padding: 0; background: none; border: 0; }
html[data-store-app] .w-buy .acts { margin-left: 0; }
html[data-store-app] .w-buy [data-try] { background: var(--lead); color: var(--on); box-shadow: none; }

/* ---------- dialogs ---------- */
dialog { max-width: min(560px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 30px; color: var(--ink); background: #FFFFFF;
  box-shadow: 0 34px 80px rgba(39, 43, 66, .35); }
dialog::backdrop { background: rgba(39, 43, 66, .5); }
.dlg { display: grid; gap: 12px; padding: 32px; }
.dlg h2 { font-size: 36px; }
.dlg label { margin-top: 6px; font-weight: 750; }
.dlg .row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dlg .small { color: var(--muted); font-size: 15px; }
.dlg .consent { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
.dlg .consent a { color: var(--ink2); }
.code-form { display: grid; gap: 8px; }
.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; letter-spacing: .3em; font-weight: 750; }
#devLink { color: var(--primary); font-weight: 700; }
.shot-dlg { max-width: min(1240px, calc(100% - 32px)); padding: 18px; background: #262A3D; color: #FFFFFF; }
.shot-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.shot-top p { font: 650 24px/1.2 var(--serif); }
.shot-dlg img { width: 100%; height: auto; border-radius: 14px; }
.shot-nav--dlg .round { background: rgba(255, 255, 255, .12); color: #FFFFFF; box-shadow: none; }
.shot-nav--dlg .shot-dots i { background: rgba(255, 255, 255, .3); }
.shot-nav--dlg .shot-dots i.on { background: #FFFFFF; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 9px 10px; font-size: 15.5px; }
  .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-band { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (min-width: 981px) and (max-width: 1240px) {
  /* the nav and Log in / Start playing on one line (a 1024 px iPad): no email, and below 1100 px tighter links and no globe */
  .who { display: none; }
  .prices-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* 3 + 3, and the last two centred */
  .price-card:nth-child(7) { grid-column: 2 / span 2; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .top .wrap { gap: 14px; }
  .nav a { padding: 9px 6px; font-size: 14.5px; }
}
@media (max-width: 980px) {
  .gift-box { grid-template-columns: 1fr; }
  .nav { display: none; }
  .w-play { grid-template-columns: 1fr; }
  .w-shot { position: static; grid-row: 1; }
  .prices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 + 2 + 2 + 2 */
  .price-card, .price-card:nth-child(7) { grid-column: auto; }
  .how-steps, .notes, .parents-grid, .fb-grid, .bundles { grid-template-columns: 1fr; }
  .active { grid-template-columns: minmax(0, 1fr); }   /* a long word or a world's line never widens the page on a phone */
}
@media (max-width: 640px) {
  .gift-opts, .gift-addr { grid-template-columns: 1fr; }
  body { font-size: 17px; }
  .wrap { width: calc(100% - 32px); }
  .top .wrap { height: 68px; gap: 10px; }
  .logo { font-size: 25px; }
  .logo-mark { width: 29px; height: 32px; }
  .logo-mark svg { width: 20px; height: 20px; }
  .who { display: none; }
  .btn--big { min-height: 58px; font-size: 18px; width: 100%; }
  .ctas { flex-direction: column; align-items: stretch; }
  .w-band { grid-template-columns: 1fr; padding-bottom: 0; }
  .w-text { padding-bottom: 8px; }
  .w-art { width: 150px; justify-self: end; margin-top: -6px; }
  .w-buy { padding: 20px; }
  .acts { margin-left: 0; width: 100%; }
  .acts .btn { flex: 1; }
  .soon-grid, .prices-grid, .learn-grid { grid-template-columns: 1fr; }
  .learn-card { padding: 26px 24px 28px; }
  .soon-card:last-child:nth-child(odd) { max-width: none; }
  .how-steps li, .note { padding: 26px; }
  .bundle .amount { font-size: 50px; }
  .ms-world .bld-art { width: 50px; }
  .ms-name { font-size: 13.5px; }
  .pick-world .bld-art { width: 50px; }
  .free-row { padding: 24px; }
}
@media (max-width: 640px) {
  .w-band { grid-template-columns: minmax(0, 1fr); } /* a long chip may never widen the column past the band */
}
@media (max-width: 420px) {
  /* the smallest phones: logo, language and log-in still on one line, chips may wrap */
  .top .wrap { gap: 8px; }
  .logo { font-size: 21px; gap: 7px; }
  .logo-mark { width: 26px; height: 28px; border-radius: 7px; }
  .logo-mark svg { width: 18px; height: 18px; }
  .top .btn--small { padding: 0 11px; font-size: 14px; }
  .chip { white-space: normal; border-radius: 16px; flex-wrap: wrap; max-width: 100%; }
  .ms-worlds { gap: 8px; }
  .ms-world { padding-inline: 3px; } /* four across: room for "Bibliotheek" */
  .ms-name { font-size: 13px; }
}
@media (max-width: 1250px) {
  .top .wrap { gap: 16px; }
  .top .logo { font-size: 34px; gap: 12px; }
  .top .logo-mark { width: 40px; height: 44px; }
  .top .logo-mark svg { width: 28px; height: 28px; }
  .top .nav { gap: 0; }
  .top .nav a { font-size: 15px; padding-inline: 8px; }
  .top .who { display: none; }
  .top-right { gap: 8px; }
}
@media (max-width: 980px) {
  .top-right { margin-left: auto; }
}
@media (max-width: 900px) {
  .top .wrap { height: 80px; }
  .hero-layout { grid-template-columns: 1fr; gap: 28px; }
  .hero-text { max-width: 650px; padding: 14px 0 0; }
  .hero h1 { font-size: clamp(42px, 7.7vw, 68px); margin-top: 20px; }
  .hero .lead { font-size: 20px; margin-top: 22px; }
  .hero .ctas { margin-top: 26px; flex-direction: row; align-items: center; }
  .hero .btn--big { width: auto; }
  .hero-photo img { height: auto; aspect-ratio: 3 / 2; }
  .hero-street-head { align-items: flex-start; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 88px; }
  .top .wrap { height: 72px; gap: 8px; }
  .top .logo { font-size: 28px; gap: 10px; }
  .top .logo-mark { width: 32px; height: 35px; border-radius: 9px; }
  .top .logo-mark svg { width: 23px; height: 23px; }
  .top #playBtn { max-width: 124px; font-size: 14px; padding-inline: 12px; }
  .top #headerTry { display: none; } /* the primary action is immediately below, in the hero */
  .top #loginBtn { padding-inline: 12px 0; font-size: 15px; }
  .hero { padding-top: 20px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .15em; }
  .hero .lead { font-size: 18px; }
  .hero .ctas { gap: 16px; }
  .hero .btn--big { min-height: 56px; padding-inline: 22px; }
  .hero-watch { font-size: 15px; gap: 10px; }
  .hero-watch-icon { width: 40px; height: 40px; }
  .hero-photo { border-radius: 14px; }
  .hero-photo figcaption { bottom: 12px; left: 12px; padding: 8px 12px; font-size: 14px; }
  .hero-street-head { flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 22px; }
  .hero-worlds-link { font-size: 15px; }
}
@media (max-width: 380px) {
  .top .logo { font-size: 23px; gap: 7px; }
  .top .logo-mark { width: 27px; height: 30px; }
  .top #playBtn { max-width: 100px; font-size: 12px; padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* no rolling: the street can be swiped instead, and only one copy of it shows */
  .street { overflow-x: auto; scrollbar-width: none; }
  .street-svg + .street-svg, .fg-svg + .fg-svg { display: none; }
  .street-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-weight: 700; font-size: 15px; }
  .street-hint svg { width: 18px; height: 18px; }
  .plane { transform: translate(calc(var(--slot) * 3.1), 0); }
}

/* the cyclist's legs (generated: each foot follows its pedal) */
@keyframes legNearT{0%{transform:rotate(36.37deg)}4.167%{transform:rotate(42.47deg)}8.333%{transform:rotate(48.98deg)}12.5%{transform:rotate(55.54deg)}16.667%{transform:rotate(61.55deg)}20.833%{transform:rotate(66.17deg)}25%{transform:rotate(68.55deg)}29.167%{transform:rotate(68.61deg)}33.333%{transform:rotate(67.07deg)}37.5%{transform:rotate(64.55deg)}41.667%{transform:rotate(61.35deg)}45.833%{transform:rotate(57.63deg)}50%{transform:rotate(53.43deg)}54.167%{transform:rotate(48.79deg)}58.333%{transform:rotate(43.78deg)}62.5%{transform:rotate(38.56deg)}66.667%{transform:rotate(33.41deg)}70.833%{transform:rotate(28.76deg)}75%{transform:rotate(25.13deg)}79.167%{transform:rotate(22.96deg)}83.333%{transform:rotate(22.52deg)}87.5%{transform:rotate(23.83deg)}91.667%{transform:rotate(26.76deg)}95.833%{transform:rotate(31.04deg)}100%{transform:rotate(36.37deg)}}
@keyframes legNearS{0%{transform:rotate(63.68deg)}4.167%{transform:rotate(54.85deg)}8.333%{transform:rotate(46.05deg)}12.5%{transform:rotate(37.80deg)}16.667%{transform:rotate(30.96deg)}20.833%{transform:rotate(26.92deg)}25%{transform:rotate(27.11deg)}29.167%{transform:rotate(31.45deg)}33.333%{transform:rotate(38.46deg)}37.5%{transform:rotate(46.78deg)}41.667%{transform:rotate(55.60deg)}45.833%{transform:rotate(64.41deg)}50%{transform:rotate(72.88deg)}54.167%{transform:rotate(80.67deg)}58.333%{transform:rotate(87.49deg)}62.5%{transform:rotate(93.00deg)}66.667%{transform:rotate(96.88deg)}70.833%{transform:rotate(98.85deg)}75%{transform:rotate(98.77deg)}79.167%{transform:rotate(96.62deg)}83.333%{transform:rotate(92.60deg)}87.5%{transform:rotate(86.97deg)}91.667%{transform:rotate(80.05deg)}95.833%{transform:rotate(72.19deg)}100%{transform:rotate(63.68deg)}}
.bike .legNear .thigh { transform: rotate(36.37deg); animation: legNearT 1.1s linear infinite; }
.bike .legNear .shin { transform: rotate(63.68deg); animation: legNearS 1.1s linear infinite; }
@keyframes legFarT{0%{transform:rotate(53.43deg)}4.167%{transform:rotate(48.79deg)}8.333%{transform:rotate(43.78deg)}12.5%{transform:rotate(38.56deg)}16.667%{transform:rotate(33.41deg)}20.833%{transform:rotate(28.76deg)}25%{transform:rotate(25.13deg)}29.167%{transform:rotate(22.96deg)}33.333%{transform:rotate(22.52deg)}37.5%{transform:rotate(23.83deg)}41.667%{transform:rotate(26.76deg)}45.833%{transform:rotate(31.04deg)}50%{transform:rotate(36.37deg)}54.167%{transform:rotate(42.47deg)}58.333%{transform:rotate(48.98deg)}62.5%{transform:rotate(55.54deg)}66.667%{transform:rotate(61.55deg)}70.833%{transform:rotate(66.17deg)}75%{transform:rotate(68.55deg)}79.167%{transform:rotate(68.61deg)}83.333%{transform:rotate(67.07deg)}87.5%{transform:rotate(64.55deg)}91.667%{transform:rotate(61.35deg)}95.833%{transform:rotate(57.63deg)}100%{transform:rotate(53.43deg)}}
@keyframes legFarS{0%{transform:rotate(72.88deg)}4.167%{transform:rotate(80.67deg)}8.333%{transform:rotate(87.49deg)}12.5%{transform:rotate(93.00deg)}16.667%{transform:rotate(96.88deg)}20.833%{transform:rotate(98.85deg)}25%{transform:rotate(98.77deg)}29.167%{transform:rotate(96.62deg)}33.333%{transform:rotate(92.60deg)}37.5%{transform:rotate(86.97deg)}41.667%{transform:rotate(80.05deg)}45.833%{transform:rotate(72.19deg)}50%{transform:rotate(63.68deg)}54.167%{transform:rotate(54.85deg)}58.333%{transform:rotate(46.05deg)}62.5%{transform:rotate(37.80deg)}66.667%{transform:rotate(30.96deg)}70.833%{transform:rotate(26.92deg)}75%{transform:rotate(27.11deg)}79.167%{transform:rotate(31.45deg)}83.333%{transform:rotate(38.46deg)}87.5%{transform:rotate(46.78deg)}91.667%{transform:rotate(55.60deg)}95.833%{transform:rotate(64.41deg)}100%{transform:rotate(72.88deg)}}
.bike .legFar .thigh { transform: rotate(53.43deg); animation: legFarT 1.1s linear infinite; }
.bike .legFar .shin { transform: rotate(72.88deg); animation: legFarS 1.1s linear infinite; }

/* ---------- the play worlds and the prices on their own pages (/worlds/, /prices/) ---------- */
body:not([data-page="home"]) main > section:first-child { padding-top: clamp(36px, 5vw, 64px); }
/* the homepage's doors to them */
.more-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.more-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 38px); background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 30px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.more-card:hover, .more-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); }
.more-card h2 { font-size: clamp(34px, 3.8vw, 54px); }
.more-card p { margin: 0; color: var(--ink2); font-size: 17.5px; }
.more-art { display: block; width: 100%; height: auto; max-height: 150px; margin-bottom: 6px; }
.more-price { order: -1; }
.more-price span { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--primary); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.more-go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; color: var(--primary); font-weight: 700; }
.more-go svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 800px) { .more-grid { grid-template-columns: 1fr; } }
/* /worlds/: the street in short, a building per world that jumps to its section */
.world-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.world-jump a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.world-jump a:hover, .world-jump a:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.world-jump svg { width: 34px; height: 46px; flex: none; }
@media (max-width: 640px) { /* one row to swipe, not four */
  .world-jump ul { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
  .world-jump li { flex: none; }
}
/* /worlds/ opens like the homepage's first hero did: the street, then "Welcome to Beeptown." large and centred, the lead
   under it, and room before the first world */
.street-wrap--worlds { margin-top: 0; }
.worlds-hero { text-align: center; padding-top: clamp(24px, 3.5vw, 48px); margin-bottom: clamp(40px, 5vw, 76px); }
.worlds-hero h1 { font-size: clamp(54px, 8.8vw, 128px); line-height: .94; margin: 0 auto; }
.worlds-hero h1 em { color: var(--primary); }
.worlds-hero .lead { font-size: clamp(19px, 1.75vw, 25px); line-height: 1.5; color: var(--ink2); max-width: 820px; margin: 26px auto 0; }
/* the menu button: below 980 px, where the menu folds away; it opens the menu as a panel under the header */
.menu-btn { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); cursor: pointer; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--tint); }
.menu-btn svg { width: 26px; height: 26px; }
.menu-btn .menu-x, .menu-btn[aria-expanded="true"] .menu-bars { display: none; }
.menu-btn[aria-expanded="true"] .menu-x { display: inline; }
@media (max-width: 980px) {
  .menu-btn { display: grid; flex: none; }
  .top .nav.is-open { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 10px 20px 18px; background: var(--ground); border-bottom: 1px solid var(--line2); box-shadow: 0 18px 30px -22px rgba(39, 43, 66, .45); }
  .top .nav.is-open a { padding: 14px 12px; border-radius: 12px; font-size: 18px; font-weight: 600; color: var(--ink); }
  .top .nav.is-open a:hover { background: var(--tint); }
}
/* the hero's title never moves while the page loads: the text sits at the top of its column (not centred against the
   photo, whose column grows when the slideshow's dots appear and whose neighbour shrinks when the fonts arrive), and
   the dots' row keeps its room before hero-slideshow.js shows it */
.hero-controls[hidden] { display: flex !important; visibility: hidden; }
/* the homepage's door to the prices: the site's midnight purple, a gold "you pay only once", the Mainstreet's four
   buildings, and a button; no amounts (prices live on /prices/ only) */
.more-card--prices { position: relative; overflow: hidden; background: var(--primary); border-color: var(--primary); color: #FFFFFF;
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .14), transparent 60%); }
.more-card--prices:hover, .more-card--prices:focus-visible { border-color: #F2B632; }
.more-card--prices h2 { color: #FFFFFF; }
.more-card--prices p { color: rgba(255, 255, 255, .86); }
.more-card--prices .more-price span { background: #F2B632; color: #2E1A00; }
.more-art--prices { order: 1; max-height: 150px; margin: 8px 0 0; }
.more-card--prices .more-go { order: 2; align-self: flex-start; margin-top: 10px; padding: 12px 20px; border-radius: 14px; background: #FFFFFF; color: var(--primary); }
.more-card--prices:hover .more-go { background: #F2B632; color: #2E1A00; }
@media (max-width: 640px) { .street-wrap { --street-w: calc(100vw - 32px); width: calc(100% - 32px); } } /* = .wrap there */
/* the language button and its menu: exactly the play-world picker's (/choose/) */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 800 12px/1 'Figtree', system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { background: #ecebe6; }
.lang-toggle svg { width: 17px; height: 17px; flex: none; color: #343d70; }
.lang-menu { position: fixed; z-index: 90; min-width: 200px; padding: 6px; display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 6px #272b421a, 0 24px 50px -20px #272b4259; }
.lang-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 15px/1.2 'Figtree', system-ui, sans-serif; text-align: left; cursor: pointer; }
.lang-item:hover, .lang-item:focus-visible { background: #ecebe6; outline: none; }
.lang-item[aria-checked="true"] { background: var(--ink); color: #fff; }
.lang-item-code { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 999px; background: #ecebe6; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.lang-item[aria-checked="true"] .lang-item-code { background: #ffffff2e; color: #fff; }
/* the smallest phones: the logo's mark alone (the link keeps its name, aria-label="Beeptown"), so the header's language
   button (the picker's own), Log in and the menu button still fit */
@media (max-width: 380px) { .top .logo > span:not(.logo-mark) { display: none; } }
@media (min-width: 381px) and (max-width: 420px) { .top .logo { font-size: 24px; gap: 8px; } }
/* logged in, "Start playing" is wider than "Log in": on a phone the mark alone then too */
@media (max-width: 560px) { .top:has(#playBtn:not([hidden])) .logo > span:not(.logo-mark) { display: none; } }
/* ---------- feedback and sharing: popups from the footer (on all three pages) ---------- */
.pop-dlg { position: fixed; width: min(620px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(22px, 3vw, 32px); }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pop-head h2, .pop-dlg .share h2 { font-size: clamp(30px, 4vw, 40px); }
.pop-text { margin: 10px 0 18px; color: var(--ink2); }
.pop-dlg .fb-box, .pop-dlg .share { margin: 0; padding: 0; border: 0; border-radius: 0; }
.pop-dlg .share h2 { padding-right: 52px; }
.pop-x { position: absolute; top: clamp(18px, 2.6vw, 28px); right: clamp(18px, 2.6vw, 28px); }
.dlg-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); cursor: pointer; }
.dlg-x:hover { background: var(--tint2); }
.dlg-x svg { width: 22px; height: 22px; }

/* ---------- the homepage's hero: the photo over the whole width, the words on a frosted glass card (the owner chose
   /heromock4/, 2026-10-12). The card sits at a fixed distance from the top, so the title never moves while the page
   loads (centred, it would follow the card's height as the fonts arrive). ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-start; min-height: min(88vh, 800px); padding: 0; overflow: hidden; background: #1E2238; }
.hero .hero-layout { display: block; pointer-events: none; }   /* clicks and the mouse pass to the photo's dots, pause button and hover pause… */
.hero .hero-carousel { position: absolute; inset: 0; z-index: -2; pointer-events: auto; }
.hero .hero-photo, .hero .hero-slides { position: absolute; inset: 0; margin: 0; border-radius: 0; background: none; }
.hero .hero-slide { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: 62% 40%; }
.hero .hero-photo figcaption { display: none; }
.hero .hero-text { pointer-events: auto; /* …but not through the card */ max-width: 600px; margin: clamp(48px, 7vh, 80px) 0 72px; padding: clamp(28px, 3.5vw, 48px); border-radius: 28px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px -30px rgba(20, 22, 40, .55); }
.hero h1 { font-size: clamp(42px, 4.6vw, 70px); }
.hero h1 em { color: var(--primary); }
.hero .hero-payment { background: #FFFFFF; }
/* the slideshow's dots and pause button: white, bottom right on the photo */
.hero .hero-controls { position: absolute; z-index: 1; right: max(28px, calc((100% - 1240px) / 2)); bottom: 20px; margin: 0; }
.hero .hero-rotation { position: static; color: #FFFFFF; }
.hero .hero-rotation:hover { background: rgba(255, 255, 255, .16); }
.hero .hero-dot::before { background: #FFFFFF; opacity: .6; }
.hero .hero-dot[aria-pressed="true"]::before { background: #FFFFFF; opacity: 1; }
@media (max-width: 900px) { .hero .hero-text { max-width: none; margin: 220px 0 70px; } }
@media (max-width: 640px) { .hero .hero-text { margin-top: 200px; } }
/* ---------- "Also lovely to give": a strip to the gift form (the homepage, under the prices) ---------- */
.gift-also { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 24px; border-radius: 22px; background: #F3E9FA;
  border: 1px solid #E4D2EC; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.gift-also:hover, .gift-also:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(39, 43, 66, .55); }
.gift-also-icon { flex: none; width: 34px; height: 34px; color: #7D3C98; }
.gift-also-text { flex: 1; color: var(--ink2); line-height: 1.45; }
.gift-also-text b { color: var(--ink); font-weight: 800; }
.gift-also-go { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--primary); font-weight: 800; white-space: nowrap; }
.gift-also-go svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .gift-also { flex-wrap: wrap; } .gift-also-go { width: 100%; padding-left: 52px; } }
/* the Beeptown bundle for sale (2026-10-12): a white Buy button on its midnight card, gold on hover */
.bundle--all .btn { align-self: flex-start; background: #FFFFFF; color: var(--primary); }
.bundle--all .btn:hover:not(:disabled) { background: #F2B632; color: #2E1A00; }
.bundle--all .btn:disabled { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.bundle--all .gift-link { color: #FFFFFF; }
.gift-opt--bundle { grid-column: 1 / -1; }