/* =========================================================
   Smile & Speak — "storybook sky"
   A painted-sky / rolling-meadow theme: soft gouache colours,
   drifting cloud banks, warm paper, hand-lettered accents.
   ========================================================= */

:root{
  /* sky */
  --sky-high:#A6CDE8;
  --sky-mid:#C8E1F0;
  --sky-warm:#F0E3CE;

  /* meadow */
  --green-far:#AFC7A0;
  --green-mid:#83A96E;

  /* paper & ink */
  --paper:#FBF4E6;
  --paper-2:#FFFCF6;
  --paper-3:#F5EAD6;
  --ink:#2C4257;
  --ink-soft:#46566A;
  --muted:#5F6875;

  /* accents */
  --sun:#F3C56B;
  --sun-soft:#FBE6B8;
  --persimmon:#D9814F;
  --rose:#DC868F;
  --rose-soft:#F7DDDF;
  --lav:#B4A6D4;
  --lav-soft:#EBE4F6;
  --sky-ink:#35548F;

  /* form */
  --shadow:0 18px 40px rgba(56,84,116,.13), 0 3px 10px rgba(56,84,116,.06);
  --shadow-sm:0 8px 20px rgba(56,84,116,.10);
  --shadow-lift:0 26px 54px rgba(56,84,116,.20);
  --radius:26px;
  --radius-sm:18px;
  --maxw:1120px;

  --font-head:'Literata', Georgia, 'Times New Roman', serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;
  --font-script:'Caveat', 'Segoe Script', cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.7;
  background:var(--paper);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);line-height:1.18;margin:0 0 .45em;letter-spacing:-.01em}
p{margin:0 0 1em}
img{max-width:100%;display:block}
strong{color:var(--ink)}
.muted{color:var(--muted)}
.tiny{font-size:.84rem;line-height:1.5}
.center{text-align:center}
.handwritten{font-family:var(--font-script);font-size:1.42rem;line-height:1.4;color:var(--persimmon)}

:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px;border-radius:6px}

/* =========================================================
   painted sky — fixed behind everything
   ========================================================= */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(251,232,190,.95), transparent 62%),
    linear-gradient(180deg, var(--sky-high) 0%, var(--sky-mid) 34%, var(--sky-warm) 62%, var(--paper) 78%);
}
.sun{
  position:absolute;top:-70px;right:6%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,249,232,.98) 0%, rgba(247,214,140,.55) 42%, rgba(247,214,140,0) 70%);
  animation:sunBreathe 12s ease-in-out infinite;
}
.cloud-bank{
  position:absolute;left:-10%;width:220%;
  transform:translate3d(0, var(--py,0px), 0);
  will-change:transform;
}
.cloud-bank svg{width:50%;height:100%;float:left}
/* banks sit low enough to leave the headline on open sky, and gather
   toward the horizon the way a real cloud line does */
.bank-far{top:5%;height:150px;color:rgba(255,255,255,.5);filter:blur(3px);animation:drift 190s linear infinite}
.bank-mid{top:20%;height:200px;color:rgba(255,255,255,.68);filter:blur(1.4px);animation:drift 130s linear infinite}
.bank-near{top:42%;height:240px;color:rgba(255,255,255,.86);animation:drift 88s linear infinite}

@keyframes drift{from{margin-left:0}to{margin-left:-110%}}
@keyframes sunBreathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* paper grain — the whole page gets a faint tooth, like gouache on board */
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   header
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:11px clamp(16px,4vw,34px);
  background:rgba(253,247,236,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(120,150,180,.16);
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-logo{border-radius:50%;box-shadow:var(--shadow-sm)}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.24rem;color:var(--ink);letter-spacing:-.02em}
.main-nav{display:flex;gap:6px}
.main-nav a{
  font-weight:700;font-size:.95rem;color:var(--ink);opacity:.8;
  padding:7px 12px;border-radius:999px;
  transition:opacity .2s, background .2s, transform .2s;
}
.main-nav a:hover{opacity:1;background:rgba(255,255,255,.75);transform:translateY(-1px)}

.lang-switch{display:flex;gap:3px;background:rgba(255,255,255,.7);padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(120,150,180,.18)}
.lang-switch button{
  border:0;background:transparent;cursor:pointer;
  font-family:var(--font-body);font-weight:800;font-size:.78rem;letter-spacing:.03em;color:var(--ink);
  padding:6px 10px;border-radius:999px;transition:background .2s,color .2s;
}
.lang-switch button:hover{background:rgba(180,205,230,.4)}
.lang-switch button.active{background:var(--sky-ink);color:#fff;box-shadow:var(--shadow-sm)}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:3px;border-radius:3px;background:var(--ink);transition:.3s}

/* =========================================================
   buttons & pills
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:800;font-size:1rem;
  padding:14px 28px;border-radius:999px;cursor:pointer;border:0;
  transition:transform .18s ease, box-shadow .18s ease, background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(140deg,#4A72B8,var(--sky-ink));color:#fff;box-shadow:0 12px 26px rgba(53,84,143,.34)}
.btn-primary:hover{box-shadow:0 18px 34px rgba(53,84,143,.42)}
/* the hairline keeps the ghost button legible when a cloud drifts behind it */
.btn-ghost{background:var(--paper-2);color:var(--ink);box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(53,84,143,.14)}
.btn-ghost:hover{box-shadow:var(--shadow), inset 0 0 0 1px rgba(53,84,143,.2)}
.btn-play{background:linear-gradient(140deg,#F8D588,#E9A85C);color:#3E2B12;box-shadow:0 14px 30px rgba(203,146,66,.4)}
.btn-play:hover{box-shadow:0 20px 40px rgba(203,146,66,.5)}
.btn-quiet{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(53,84,143,.22)}
.btn-quiet:hover{background:#fff}
.play-mark{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.8);
}
.play-mark svg{width:16px;height:16px;display:block;margin-left:1px}

.pill{display:inline-block;background:var(--paper-2);color:var(--ink);font-weight:700;font-size:.88rem;
  padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.pill-soft{background:rgba(255,255,255,.72);color:var(--sky-ink);box-shadow:inset 0 0 0 1px rgba(53,84,143,.16)}
.pill-glow{background:linear-gradient(135deg,var(--sun-soft),#F7D9A6);color:#6B4A16;box-shadow:none}

/* =========================================================
   layout
   ========================================================= */
main{position:relative;z-index:1}
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(38px,5.5vw,72px) clamp(18px,4vw,28px)}
.section-title{font-size:clamp(1.9rem,4.2vw,2.7rem);text-align:center}
.section-sub{text-align:center;max-width:640px;margin:0 auto 2.4em;color:var(--muted);font-size:1.06rem}

.card{
  background:var(--paper-2);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(22px,3vw,32px);
  border:1px solid rgba(255,255,255,.9);
}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* =========================================================
   icon badges

   Hand-drawn SVG rather than emoji: emoji render as a different picture on
   every OS and carry their own font metrics, so they never sit centred in a
   circle. A fixed-size <svg> in a grid centre always does.
   ========================================================= */
.ico{display:grid;place-items:center;margin:0 auto .55em;flex:none}
.icon{
  width:62px;height:62px;display:block;overflow:visible;
  filter:drop-shadow(0 5px 8px rgba(56,84,116,.2));
}
.format-card:hover .icon,.why-card:hover .icon,.contact-card:hover .icon{transform:translateY(-2px) rotate(-2deg)}
.icon{transition:transform .22s ease}

/* =========================================================
   hero
   ========================================================= */
.hero{position:relative;padding-bottom:clamp(110px,13vw,200px)}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:34px;
  padding:clamp(30px,5vw,68px) clamp(18px,4vw,28px) 0;
}
.hero-title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2.9rem,8.4vw,5rem);color:var(--ink);
  margin:.16em 0 0;line-height:1.02;letter-spacing:-.03em;
  text-shadow:0 2px 0 rgba(255,255,255,.5);
}
.hero-tagline{font-family:var(--font-script);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.15rem);
  color:var(--persimmon);margin:.1em 0 .45em;line-height:1.2}
.hero-sub{font-size:1.1rem;max-width:31em;color:var(--ink-soft)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:1.1em 0 1.3em}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}

.hero-art{display:flex;justify-content:center}
.logo-halo{position:relative}
/* sunny glow behind the balloon */
.logo-halo::after{content:"";position:absolute;inset:-10% -10% 4%;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(250,224,160,.6), transparent 64%);
  z-index:-1;animation:haloPulse 6s ease-in-out infinite}
/* soft ground shadow that shrinks as the balloon rises, selling the float */
.logo-halo::before{content:"";position:absolute;left:50%;bottom:-26px;width:58%;height:24px;
  transform:translateX(-50%);border-radius:50%;filter:blur(4px);z-index:-2;
  background:radial-gradient(ellipse at center, rgba(56,84,116,.28), transparent 70%);
  animation:shadowPulse 6s ease-in-out infinite}
.hero-logo{width:min(78vw,380px);height:auto;border-radius:50%;
  box-shadow:0 30px 60px rgba(56,84,116,.26);background:var(--paper-2);
  transform-origin:50% 62%;will-change:transform;
  animation:balloonDrift 6s ease-in-out infinite}

@keyframes balloonDrift{
  0%{transform:translateY(0) rotate(-2deg)}
  25%{transform:translateY(-12px) rotate(1.4deg)}
  50%{transform:translateY(-20px) rotate(-0.8deg)}
  75%{transform:translateY(-9px) rotate(2.2deg)}
  100%{transform:translateY(0) rotate(-2deg)}
}
@keyframes shadowPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.5}
  50%{transform:translateX(-50%) scale(.74);opacity:.26}
}
@keyframes haloPulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}

/* rolling meadow — the nearest bank is the paper itself, so the page
   flows out of the landscape instead of butting against it */
.hills{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.hills svg{width:100%;height:clamp(150px,17vw,290px);display:block}
.hill-3{fill:var(--green-far);opacity:.75}
.hill-2{fill:var(--green-mid);opacity:.85}
.hill-1{fill:var(--paper)}

/* =========================================================
   paper — everything below the hero
   ========================================================= */
.paper{position:relative;background:var(--paper);z-index:1}
/* faint gouache washes so the long cream stretch never reads as flat fill */
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 88% 6%,  rgba(212,231,243,.55), transparent 70%),
    radial-gradient(560px 380px at 4%  30%, rgba(240,226,246,.5),  transparent 72%),
    radial-gradient(720px 460px at 92% 58%, rgba(250,232,206,.55), transparent 70%),
    radial-gradient(600px 400px at 6%  82%, rgba(224,238,216,.5),  transparent 72%);
}
.paper > .section{position:relative}
/* the hero's near hill already provides the breathing room above the first card */
.paper > .section:first-child{padding-top:clamp(8px,1.5vw,20px)}

/* =========================================================
   about
   ========================================================= */
.about-card{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  background:linear-gradient(140deg,var(--paper-2), #FFF7E9)}
.about-portrait{
  width:150px;height:150px;border-radius:50%;padding:6px;flex:none;
  background:linear-gradient(140deg,var(--sun-soft),var(--rose-soft));
  box-shadow:var(--shadow-sm);
}
.about-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--paper-2)}
.about-card h2{font-size:clamp(1.5rem,3vw,2rem)}

/* =========================================================
   formats
   ========================================================= */
.format-card{text-align:center;transition:transform .22s ease, box-shadow .22s ease}
.format-card:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:var(--shadow-lift)}
.format-card h3{margin-bottom:.3em;font-size:1.25rem}
.format-card p{margin:0;color:var(--muted);font-size:.97rem}

/* =========================================================
   games room
   ========================================================= */
.games-band{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,50px);align-items:center;
  padding:clamp(28px,4.5vw,52px);
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(140deg,#E9F2E2 0%, #FBF1DC 52%, #F7E4DC 100%);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.85);
}
/* a pale sun arc rising behind the copy */
.games-band::before{
  content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.games-copy{position:relative}
.games-band h2{font-size:clamp(1.8rem,3.8vw,2.5rem);margin-top:.35em}
.games-sub{color:var(--ink-soft);max-width:34em;margin-bottom:1.4em}
.games-cta{display:flex;gap:14px;flex-wrap:wrap}
.games-note{margin:1em 0 0}

.games-points{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.games-points li{
  display:flex;align-items:center;gap:15px;
  background:rgba(255,255,255,.82);
  border-radius:var(--radius-sm);padding:14px 18px;
  box-shadow:var(--shadow-sm);
}
.games-points .ico{margin:0}
.games-points .icon{width:44px;height:44px}
.games-points strong{display:block;font-size:1rem;line-height:1.3}
.games-points span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45}

/* =========================================================
   pricing
   ========================================================= */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.price-card{text-align:center;position:relative;border:2px solid transparent;transition:transform .22s ease, box-shadow .22s ease}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.price-card.featured{border-color:var(--lav);background:linear-gradient(180deg,var(--paper-2),var(--lav-soft))}
.price-tag{display:block;font-family:var(--font-body);font-weight:800;color:var(--ink);margin-bottom:.55em}
.price-amount{font-family:var(--font-head);font-weight:700;font-size:2.3rem;color:var(--sky-ink);line-height:1}
.price-amount .cur{font-size:1.3rem}
.price-usd{color:var(--muted);font-size:.9rem;margin-top:.45em}

.free-banner{
  margin:30px auto 10px;max-width:620px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(135deg,var(--sun),#EFB755);
  color:#5C3F0E;font-weight:800;font-size:1.14rem;
  padding:16px 24px;border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
/* the banner is already saturated yellow, so this icon keeps a white plate */
.free-ico{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.75)}
.free-ico .icon{width:32px;height:32px;filter:none}

/* =========================================================
   online
   ========================================================= */
.online-card{background:linear-gradient(140deg,var(--paper-2),#E7F1F8);text-align:center}
.online-card h2{margin-bottom:.1em}
.check-list{list-style:none;padding:0;margin:1.5em auto;max-width:660px;text-align:left;display:grid;gap:13px}
.check-list li{position:relative;padding-left:38px;font-weight:600;color:var(--ink-soft)}
/* drawn tick rather than a "✓" glyph, so it matches the icon set's stroke */
.check-list li::before{content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--sky-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.4l4.2 4.2L18 7.4'/%3E%3C/svg%3E") center/15px 15px no-repeat}
.online-prices{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:1.4em}
.online-prices .op{background:var(--paper-2);border-radius:var(--radius-sm);padding:16px 24px;box-shadow:var(--shadow-sm);min-width:210px}
.online-prices .op span{display:block;color:var(--muted);font-size:.9rem;margin-bottom:4px}
.online-prices .op strong{font-family:var(--font-head);font-weight:700;font-size:1.45rem;color:var(--sky-ink)}
.online-prices .op em{font-style:normal;font-size:.85rem;color:var(--muted);font-weight:600}

/* =========================================================
   why
   ========================================================= */
.why-card{text-align:center;transition:transform .22s ease, box-shadow .22s ease}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.why-card h3{font-size:1.14rem;margin-bottom:.25em}
.why-card p{margin:0;color:var(--muted);font-size:.96rem}

/* =========================================================
   coco
   ========================================================= */
.coco-card{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  background:linear-gradient(140deg,var(--paper-2),#FFF0E0)}
.coco-face{display:grid;place-items:center;flex:none;animation:bob 6s ease-in-out infinite}
.coco-face .icon{width:118px;height:118px;filter:drop-shadow(0 10px 14px rgba(56,84,116,.24))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.coco-text h2{margin-bottom:.25em}
.coco-text .btn{margin-top:.5em}
#coco-hint{margin-top:.8em}

/* =========================================================
   contact
   ========================================================= */
.contact-card{text-align:center;transition:transform .22s ease, box-shadow .22s ease}
.contact-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.c-label{display:block;color:var(--muted);font-size:.86rem}
.contact-card strong,.address-card strong{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1.08rem}
.address-card{display:flex;gap:20px;align-items:center;justify-content:center;text-align:left;margin:22px auto 0;max-width:540px}
.address-card .ico{margin:0;flex:none}
.address-card .icon{width:46px;height:46px}
.address-card .c-label{margin-bottom:2px}
.contact-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* =========================================================
   footer
   ========================================================= */
.site-footer{
  position:relative;z-index:1;text-align:center;
  padding:clamp(100px,11vw,150px) 20px 56px;
  margin-top:clamp(10px,2vw,26px);
  background:linear-gradient(180deg, var(--paper) 0%, #F6E3CE 46%, #EFD3BC 100%);
}
.footer-hills{position:absolute;left:0;right:0;top:0;line-height:0;pointer-events:none}
.footer-hills svg{width:100%;height:clamp(90px,11vw,170px);display:block}
.footer-hills .hill-3{fill:var(--green-far);opacity:.5}
.footer-hills .hill-1{fill:var(--green-mid);opacity:.42}
.footer-inner{position:relative}
.footer-logo{margin:0 auto 12px;border-radius:50%;box-shadow:var(--shadow-sm)}
.footer-name{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--ink);margin:0}
.site-footer p{margin:.15em 0}
.footer-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:1.1em 0 .8em}
.footer-links a{font-weight:700;font-size:.92rem;color:var(--ink);opacity:.78;padding:6px 12px;border-radius:999px;transition:opacity .2s,background .2s}
.footer-links a:hover{opacity:1;background:rgba(255,255,255,.55)}

/* =========================================================
   reveal on scroll (only when JS runs, so no-JS keeps content visible)
   ========================================================= */
.js .section .card,
.js .section .games-band{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.js .reveal .card,
.js .reveal .games-band{opacity:1;transform:none}
.js .reveal .card:nth-child(2){transition-delay:.08s}
.js .reveal .card:nth-child(3){transition-delay:.16s}
.js .reveal .card:nth-child(4){transition-delay:.24s}
.js .reveal .card:nth-child(5){transition-delay:.32s}
.js .reveal .card:nth-child(6){transition-delay:.4s}

/* ElevenLabs widget tuck */
elevenlabs-convai{position:fixed;bottom:0;right:0;z-index:60}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:980px){
  .main-nav a{padding:7px 9px;font-size:.9rem}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-text{order:2}
  .hero-art{order:1}
  .hero-cta,.hero-pills{justify-content:center}
  .hero-sub{margin-inline:auto}
  .grid-4,.price-grid{grid-template-columns:repeat(2,1fr)}
  .games-band{grid-template-columns:1fr}
  .games-cta{justify-content:flex-start}
  /* the header itself expands into the menu — no absolute positioning,
     so the panel can never overlap or need a magic offset */
  .site-header{flex-wrap:wrap}
  .main-nav,.lang-switch{display:none}
  .site-header.open .main-nav{
    display:flex;flex-direction:column;flex-basis:100%;order:3;gap:2px;
    margin-top:10px;padding-top:10px;border-top:1px solid rgba(120,150,180,.18)}
  .site-header.open .main-nav a{padding:11px 14px;font-size:1rem}
  .site-header.open .lang-switch{display:flex;flex-basis:100%;order:4;justify-content:center;margin:10px 0 4px}
  .nav-toggle{display:flex}
  .about-card,.coco-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .games-points li{text-align:left}
}
@media (max-width:640px){
  /* the cloud SVGs stretch to their box, so the banks have to get shorter
     on narrow screens or the puffs smear into blobs */
  .bank-far{height:78px}
  .bank-mid{height:100px;top:24%}
  .bank-near{height:120px;top:46%}
  .sun{width:210px;height:210px;top:-50px}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid-3,.grid-4,.price-grid{grid-template-columns:1fr}
  .about-portrait{width:120px;height:120px}
  .brand-name{font-size:1.1rem}
  .games-cta .btn{width:100%}
  .address-card{flex-direction:column;text-align:center}
}

/* =========================================================
   reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .js .section .card,.js .section .games-band{opacity:1;transform:none}
  .cloud-bank{transform:none!important}
}