/* Glass Carriers — Toybox Primary, shared by the landing and the legal pages */

@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/baloo2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --cream: #FFF6E6;
  --cream-lip: #E9DCC2;
  --ink: #1F1A4D;
  --ink-soft: #4A4478;
  --lip: #3B3190;
  --night-lip: #3E2396;
  --sunshine: #FFC940;
  --sky: #3FA9F5;
  --grass: #4CC26E;
  --night: #6C3FDB;
  --tomato: #FF4B3E;
  --orange: #FF8A1F;
  --orange-lip: #C8620A;
  --btn: #E05A0B;
  --btn-lip: #9E3D06;
  --glass: #9EE0FF;
  --deep: #17133A;

  --display: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, sans-serif;
  --body: "Nunito", ui-rounded, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
::selection { background: var(--sunshine); color: var(--ink); }
:focus-visible { outline: 4px solid var(--sunshine); outline-offset: 3px; border-radius: 12px; }
html { scrollbar-color: var(--lip) var(--cream); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--lip); border-radius: 12px; border: 3px solid var(--cream); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--sunshine); color: var(--ink); padding: 10px 18px; border-radius: 14px; font-weight: 800; }
.skip:focus { top: 16px; }

/* ---------- Toy headline: stepped lip, one word on a studded block ---------- */
.toy {
  font-family: var(--display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--ink);
  --lipc: var(--lip);
  text-shadow:
    0 .015em 0 var(--lipc), 0 .03em 0 var(--lipc), 0 .044em 0 var(--lipc), 0 .059em 0 var(--lipc),
    0 .167em .137em rgba(58, 36, 16, .2);
}
.toy--light { color: var(--cream); --lipc: var(--night-lip); }
.toy .ln { display: block; }
.blk {
  --bt: #FFE38A; --bb: #FFC940; --bb2: #F7B82E; --bs: #E0A21C;
  position: relative;
  display: inline-block;
  padding: .04em .2em 0;
  margin: .1em .04em 0;
  color: var(--ink);
  border-radius: .196em;
  text-shadow: 0 .03em 0 var(--bs);
  background: linear-gradient(180deg, var(--bt) 0 .127em, var(--bb) .127em 72%, var(--bb2) 100%);
  box-shadow:
    0 .108em 0 var(--bs), 0 .108em 0 .015em var(--bs),
    0 .27em .21em rgba(70, 40, 10, .3),
    inset 0 -.06em .11em rgba(0, 0, 0, .07), inset 0 .015em 0 rgba(255, 255, 255, .55);
}
.blk--sky { --bt: #9ED6FC; --bb: #3FA9F5; --bb2: #2F9BEA; --bs: #1E7FCC; }
.blk::before, .blk::after {
  content: "";
  position: absolute;
  top: -.24em;
  width: .51em;
  height: .29em;
  background:
    radial-gradient(closest-side at 38% 40%, rgba(255, 255, 255, .8) 0 14%, var(--bt) 40%, var(--bb) 92%, transparent 100%) top / 100% 64% no-repeat,
    linear-gradient(90deg, var(--bs) 0, var(--bt) 28%, var(--bb) 55%, var(--bs) 100%) bottom / 100% 66% no-repeat;
  border-radius: 0 0 .06em .06em;
  pointer-events: none;
}
.blk::before { left: 16%; }
.blk::after { left: 58%; }

/* ---------- Sticker: cream card with a solid under-lip ---------- */
.sticker {
  background: var(--cream);
  color: var(--ink);
  border-radius: 30px;
  box-shadow: 0 10px 0 var(--cream-lip), 0 26px 40px rgba(31, 26, 77, .32);
}

/* ---------- Buttons ---------- */
.btn {
  --c: var(--btn); --l: var(--btn-lip);
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1;
  color: #fff; text-decoration: none;
  background: var(--c);
  border: 0; border-radius: 20px;
  padding: .85em 1.25em .75em;
  box-shadow: 0 .32em 0 var(--l), 0 .9em 1.2em rgba(31, 26, 77, .25);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 .42em 0 var(--l), 0 1.1em 1.4em rgba(31, 26, 77, .28); }
.btn:active { transform: translateY(.26em); box-shadow: 0 .06em 0 var(--l), 0 .4em .6em rgba(31, 26, 77, .25); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 168px;
  padding: 9px 16px 9px 13px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  line-height: 1.05;
  box-shadow: 0 5px 0 #0E0B26;
  position: relative;
}
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-family: var(--body); font-weight: 800; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #FFE38A; }
.store b { display: block; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.store[aria-disabled="true"] { cursor: default; }
.store[href]:hover { transform: translateY(-2px); }
.store--light { background: var(--cream); color: var(--ink); box-shadow: 0 5px 0 var(--cream-lip); }
.store--light small { color: var(--orange-lip); }

/* ---------- Top bar ---------- */
.bar {
  position: fixed; z-index: 50; top: 14px; left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
  transition: translate .45s var(--ease-out);
}
.bar.is-tucked { translate: 0 -120px; }
.bar > * { pointer-events: auto; }
.bar__home { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 5px 14px 5px 5px; border-radius: 18px; background: rgba(23, 19, 58, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__home img { width: 40px; height: 40px; border-radius: 12px; }
.bar__home span { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 rgba(14, 11, 38, .45); }
.bar__nav { display: flex; gap: 6px; padding: 6px; border-radius: 18px; background: rgba(23, 19, 58, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__nav a { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: #fff; text-decoration: none; padding: 6px 13px 4px; border-radius: 12px; transition: background .2s; }
.bar__nav a:hover { background: rgba(255, 255, 255, .16); }
.bar__nav a.is-cta { background: var(--sunshine); color: var(--ink); box-shadow: 0 3px 0 #E0A21C; }

/* ---------- Footer ---------- */
.foot { background: var(--deep); color: #E6E1FF; padding: 64px var(--gutter) 40px; }
.foot__in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.foot__logo { width: 230px; }
.foot__tag { margin-top: 14px; color: #B9B1F0; max-width: 34ch; }
.foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; justify-self: end; }
.foot__links a { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
.foot__links a:hover { color: var(--sunshine); }
.foot__small { max-width: 1240px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; color: #9C93D6; }
@media (max-width: 720px) {
  .foot__in { grid-template-columns: 1fr; }
  .foot__links { justify-self: start; }
  .bar__home span { display: none; }
  .bar__home { padding: 5px; }
  .store b { font-size: 1.05rem; }
  .store { padding: 9px 12px 9px 11px; gap: 8px; }
  .bar__nav a { font-size: .95rem; padding: 6px 10px 4px; }
}