@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-variable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --sky: #ddf3f4;
  --berry: #443953;
  --muted: #756d80;
  --marigold: #f8d77f;
  --leaf: #9bcb91;
  --coral: #f3a1a4;
  --night: #5f568e;
  --paper: #fff9ec;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { color: var(--berry); background: var(--sky); font-family: "Nunito", sans-serif; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 4px solid var(--night); outline-offset: 4px; }

.doodle-nav {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(1160px, calc(100% - 32px));
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 18px auto 0;
}

.doodle-brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Fredoka", sans-serif; font-size: 21px; font-weight: 600; text-decoration: none; }
.drop { display: grid; width: 38px; height: 43px; place-items: center; border-radius: 52% 48% 55% 45% / 65% 62% 38% 35%; background: #8b72bd; color: white; font-size: 12px; transform: rotate(45deg); }
.drop span { transform: rotate(-45deg); }
.doodle-nav nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; font-size: 14px; font-weight: 800; }
.doodle-nav nav a { text-decoration: none; }
.doodle-nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.storybook-hero {
  position: relative;
  display: grid;
  min-height: 760px;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr);
  align-items: center;
  overflow: hidden;
  padding: clamp(70px, 9vw, 125px) max(24px, calc((100vw - 1120px)/2));
}

.sun { position: absolute; top: 2%; right: 5%; width: min(25vw, 310px); aspect-ratio: 1; border-radius: 50%; background: var(--marigold); }
.cloud { position: absolute; width: 145px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.72); }
.cloud::before,.cloud::after { position:absolute; bottom:0; border-radius:50%; background:inherit; content:""; }
.cloud::before { left: 22px; width: 62px; height: 62px; }
.cloud::after { right: 16px; width: 50px; height: 50px; }
.cloud-a { top: 22%; left: 42%; }
.cloud-b { top: 48%; right: 3%; transform: scale(.7); }
.hill { position: absolute; bottom: -17%; width: 66%; height: 40%; border-radius: 55% 55% 0 0; }
.hill-a { left: -17%; background: var(--leaf); }
.hill-b { right: -18%; background: #f4d6a0; }

.hero-copy { position: relative; z-index: 2; align-self: center; }
.hero-copy h1 { max-width: 11ch; margin: 0; font-family: "Fredoka", sans-serif; font-size: clamp(58px, 8.5vw, 112px); font-weight: 500; letter-spacing: -.035em; line-height: .91; }
.hero-copy p { max-width: 54ch; margin: 25px 0 0; font-size: clamp(18px, 2vw, 23px); font-weight: 650; line-height: 1.45; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.primary-action { display: inline-flex; min-height: 55px; align-items:center; padding: 0 22px; border-radius: 20px; background: var(--marigold); box-shadow: 0 6px 0 var(--berry); font-weight: 900; text-decoration: none; }
.quiet-action { font-weight: 900; text-underline-offset: 4px; }

.phone-wrap { position: relative; z-index: 2; justify-self: center; width: min(88%, 355px); }
.phone-wrap::before { position: absolute; inset: -28px; z-index: -1; border-radius: 46% 54% 51% 49%; background: rgba(255,255,255,.5); content:""; transform: rotate(-7deg); }
.phone-wrap img { display:block; width:100%; border: 10px solid white; border-radius: 48px; box-shadow: 0 24px 55px rgba(68,57,83,.22); transform: rotate(2.5deg); }

.worlds { position: relative; z-index: 2; padding: 80px max(24px, calc((100vw - 1120px)/2)); background: var(--paper); }
.worlds h2,.parent-note h2,.legal-main h1 { margin:0; font-family:"Fredoka",sans-serif; font-weight:550; letter-spacing:-.02em; }
.worlds h2,.parent-note h2 { max-width: 15ch; font-size: clamp(42px, 6vw, 72px); line-height: 1; }
.world-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 38px; }
.world { min-height: 210px; padding: 26px; border-radius: 42px 20px 38px 18px; }
.world:nth-child(even) { border-radius: 20px 42px 18px 38px; }
.world h3 { margin:0 0 9px; font-family:"Fredoka",sans-serif; font-size: 28px; font-weight:600; }
.world p { margin:0; color: #5e5669; font-weight:650; }
.world-math { background:#d8f2ee; }
.world-letters { background:#fbe4ec; }
.world-create { background:#eae1f3; }

.parent-note { display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px,7vw,100px); padding: 90px max(24px, calc((100vw - 1120px)/2)); background: #f7d889; }
.parent-points { display:grid; gap: 0; margin:0; padding:0; list-style:none; }
.parent-points li { display:grid; grid-template-columns: minmax(145px,.45fr) 1fr; gap:18px; padding:18px 0; border-top: 2px solid rgba(68,57,83,.25); }
.parent-points strong { font-family:"Fredoka",sans-serif; font-size:19px; }

.doodle-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:28px max(24px, calc((100vw - 1120px)/2)); background:var(--berry); color:white; }
.doodle-footer nav { display:flex; flex-wrap:wrap; gap:18px; }

.legal-shell { min-height:100vh; background: var(--paper); }
.legal-main { width:min(820px,calc(100% - 40px)); margin:70px auto 100px; }
.legal-main h1 { max-width: 12ch; font-size:clamp(48px,8vw,82px); line-height:.95; }
.effective { margin:18px 0 42px; color:var(--muted); font-weight:800; }
.legal-section { padding:28px 0; border-top:2px solid rgba(68,57,83,.2); }
.legal-section h2 { margin:0 0 12px; font-family:"Fredoka",sans-serif; font-size:28px; font-weight:600; }
.legal-section p,.legal-section li { font-size:17px; line-height:1.65; }
.legal-section ul { padding-left:22px; }
.support-box { margin:34px 0; padding:28px; border-radius:38px 18px 36px 20px; background:#d8f2ee; }
.support-box h2 { margin-top:0; }

@media (max-width: 780px) {
  .doodle-nav { align-items:flex-start; }
  .doodle-nav nav { gap:10px; }
  .storybook-hero { min-height:auto; grid-template-columns:1fr; gap:65px; padding-top:90px; padding-bottom:150px; }
  .phone-wrap { width:min(72vw,320px); }
  .world-grid,.parent-note { grid-template-columns:1fr; }
  .world-grid { gap:12px; }
}

@media (max-width: 520px) {
  .doodle-nav { flex-direction:column; }
  .storybook-hero { padding-top:70px; }
  .hero-copy h1 { font-size:58px; }
  .parent-points li { grid-template-columns:1fr; gap:4px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }