@font-face {
  font-family: Fredoka;
  src: url('/assets/sunnybites/Fredoka.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
.sunny-body {
  --sunny-ink: #63416f;
  --sunny-pink: #bd326c;
  background: #fff8fc;
  color: var(--sunny-ink);
  font-family: 'Inter Display', sans-serif;
  margin: 0;
}
.sunny-body * { box-sizing: border-box; }
.sunny-body img { display: block; max-width: 100%; height: auto; }
.sunny-body a { text-decoration: none; }
.sunny-body h1, .sunny-body h2, .sunny-body h3 {
  font-family: Fredoka, sans-serif;
  font-weight: 550;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.sunny-body h2 { font-size: clamp(36px, 3.8vw, 54px); }
.sunny-body p { line-height: 1.65; }
.sunny-body em { font-style: normal; color: var(--sunny-pink); }
.sunny-body a:focus-visible, .sunny-body button:focus-visible, .sunny-body video:focus-visible {
  outline: 3px solid #8b448c;
  outline-offset: 5px;
}
.sunny-body section[id] { scroll-margin-top: 24px; }
.sunny-skip { position: absolute; top: -100px; left: 16px; z-index: 20; background: white; padding: 16px; }
.sunny-skip:focus { top: 10px; }
.sunny-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 27px 5%; max-width: 1500px; margin: auto; }

.sunny-header nav { display: flex; gap: 32px; font-size: 14px; }
.sunny-header nav a:hover, .sunny-back:hover { text-decoration: underline; text-underline-offset: 5px; }
.sunny-back { font-size: 13px; border: 1px solid #caa6cd; border-radius: 30px; padding: 10px 18px; }
.sunny-back span { margin-left: 16px; }
.sunny-hero {
  display: grid;
  grid-template-columns: .88fr 1.2fr;
  align-items: center;
  gap: 40px;
  padding: 66px 5% 76px;
  background: radial-gradient(ellipse at 80% 70%, #dceeff 0, transparent 60%), linear-gradient(130deg, #ffedf5, #ffe1ed);
}
.sunny-eyebrow, .sunny-section-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .13em; margin-bottom: 18px; }
.sunny-hero h1 { font-size: clamp(44px, 4.6vw, 68px); margin-bottom: 22px; }
.sunny-lead { font-size: 17px; margin-bottom: 26px; }
.sunny-button { display: inline-flex; gap: 28px; align-items: center; background: #bd326c; color: #fff; border-radius: 32px; padding: 15px 23px; font-size: 14px; font-weight: 800; box-shadow: 0 4px 0 #982856; transition: transform .2s; }
.sunny-button:hover { transform: translateY(-3px); }
.sunny-status { font-size: 11px; margin-top: 18px; }
.sunny-hero-art { position: relative; min-width: 0; transform: rotate(2deg); }
.sunny-hero-art img { width: 100%; border: 7px solid #fff8fc; border-radius: 28px; box-shadow: 0 18px 0 -7px #e5afd0, 0 22px 45px #995b9820; }
.sunny-feature { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 65px; align-items: center; padding: 64px max(5%, calc((100vw - 1320px)/2)); }
.sunny-feature-copy p { font-size: 16px; margin-top: 20px; }
.sunny-play { background: #e4f5ff; }
.sunny-play .sunny-section-label { color: #435da3; }
.sunny-character { width: 108px; margin: 24px 0 0 18px; transform: rotate(-6deg); }
.sunny-media { min-width: 0; margin: 0; }
.sunny-media > img, .sunny-media > video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 6px solid white; border-radius: 22px; background: #fff5fa; box-shadow: 0 8px 0 -2px #c5d9f080; }
.sunny-media figcaption { text-align: center; font-size: 12px; margin-top: 16px; }
.sunny-decorate { background: #ffedf5; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); }
.sunny-decorate .sunny-feature-copy { grid-column: 2; grid-row: 1; }
.sunny-decorate .sunny-media { grid-column: 1; grid-row: 1; }
.sunny-decorate .sunny-section-label { color: #ad396e; }
.sunny-decorate .sunny-media > img { box-shadow: 0 8px 0 -2px #efbfda90; }
.sunny-social { background: #f0e8ff; padding: 64px max(5%, calc((100vw - 1320px)/2)); }
.sunny-social-heading { text-align: center; margin-bottom: 36px; }
.sunny-social-heading h2 br { display: none; }
.sunny-social-heading h2 em { margin-left: .18em; }
.sunny-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.sunny-social-grid article { min-width: 0; background: #fff9fc; border-radius: 24px; padding: 8px; }
.sunny-social .sunny-media > img, .sunny-social .sunny-media > video { border-width: 0; border-radius: 18px; box-shadow: none; }
.sunny-social-copy { padding: 22px 20px 24px; }
.sunny-social-copy h3 { font-size: 29px; margin-bottom: 12px; }
.sunny-social-copy p { font-size: 15px; }
.sunny-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 5%; }
.sunny-footer p, .sunny-footer>a:last-child { font-size: 12px; }
.sunny-footer > span { display: flex; align-items: center; gap: 18px; }
.sunny-footer > span a { font-size: 12px; }
.sunny-policy { padding-bottom: 72px; }
.sunny-policy-hero { background: radial-gradient(ellipse at 80% 70%, #dceeff 0, transparent 60%), linear-gradient(130deg, #ffedf5, #ffe1ed); padding: 72px max(5%, calc((100vw - 1120px)/2)); }
.sunny-policy-hero h1 { font-size: clamp(44px, 4.6vw, 68px); margin: 0 0 22px; }
.sunny-policy-hero > p:not(.sunny-eyebrow):not(.sunny-policy-date) { font-size: 17px; max-width: 660px; }
.sunny-policy-date { font-size: 12px; margin-top: 26px; }
.sunny-policy-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: 70px; max-width: 1120px; margin: 0 auto; padding: 58px 5% 0; }
.sunny-policy-toc { align-self: start; position: sticky; top: 20px; display: grid; gap: 11px; font-size: 13px; }
.sunny-policy-toc strong { font-size: 10px; letter-spacing: .13em; margin-bottom: 8px; }
.sunny-policy-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sunny-policy-content section { scroll-margin-top: 24px; padding: 0 0 34px; }
.sunny-policy-content h2 { font-size: clamp(30px, 3vw, 40px); margin: 0 0 16px; }
.sunny-policy-content p { font-size: 16px; margin: 0 0 16px; }
.sunny-policy-content a { color: #a32660; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1600px) { .sunny-hero { padding-inline: max(5%, calc((100vw - 1440px)/2)); } }
@media (max-width: 1000px) {
  .sunny-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
  .sunny-hero-copy { text-align: center; }
  .sunny-hero h1 { font-size: 58px; }
  .sunny-hero-art { width: 92%; max-width: 760px; margin: auto; }
  .sunny-feature { gap: 32px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); padding-block: 48px; }
  .sunny-decorate { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }
  .sunny-character { width: 75px; }
  .sunny-social-copy { padding: 20px 14px; }
  .sunny-social-copy p br { display: none; }
}
@media (max-width: 620px) {
  .sunny-header { flex-wrap: wrap; gap: 20px; padding: 22px 6%; }
  .sunny-header nav { order: 3; width: 100%; justify-content: space-between; gap: 12px; font-size: 13px; }

  .sunny-back { font-size: 12px; padding: 8px 14px; }
  .sunny-hero { padding: 36px 6% 46px; gap: 32px; }
  .sunny-hero h1 { font-size: clamp(38px, 10.5vw, 56px); }
  .sunny-eyebrow, .sunny-section-label { font-size: 9px; margin-bottom: 14px; }
  .sunny-lead { font-size: 15px; }
  .sunny-lead br { display: none; }
  .sunny-hero-art { width: 100%; }
  .sunny-hero-art img { border-width: 5px; border-radius: 20px; }
  .sunny-feature { grid-template-columns: 1fr; gap: 24px; padding: 40px 6%; }
  .sunny-feature-copy { position: relative; }
  .sunny-feature-copy p { font-size: 15px; margin-top: 14px; }
  .sunny-body .sunny-character { display: none; }
  .sunny-media > img, .sunny-media > video { border-width: 4px; border-radius: 14px; }
  .sunny-media figcaption { font-size: 11px; margin-top: 12px; }
  .sunny-decorate .sunny-feature-copy, .sunny-decorate .sunny-media { grid-column: auto; grid-row: auto; }
  .sunny-social { padding: 40px 6%; }
  .sunny-social-heading { text-align: left; margin-bottom: 26px; }
  .sunny-social-heading h2 br { display: initial; }
  .sunny-social-heading h2 em { margin-left: 0; }
  .sunny-social-grid { grid-template-columns: 1fr; gap: 24px; }
  .sunny-social-grid article { border-radius: 18px; padding: 6px; }
  .sunny-social .sunny-media > img, .sunny-social .sunny-media > video { border-radius: 12px; }
  .sunny-social-copy { padding: 20px 14px; }
  .sunny-social-copy h3 { font-size: 27px; }
  .sunny-footer { flex-wrap: wrap; gap: 16px; padding: 26px 6%; }
  .sunny-footer p { order: 3; width: 100%; font-size: 11px; }
  .sunny-footer > span { gap: 12px; }
  .sunny-policy { padding-bottom: 40px; }
  .sunny-policy-hero { padding: 48px 6%; }
  .sunny-policy-layout { grid-template-columns: 1fr; gap: 30px; padding: 38px 6% 0; }
  .sunny-policy-toc { position: static; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .sunny-policy-toc strong { grid-column: 1 / -1; }
  .sunny-policy-content section { padding-bottom: 28px; }
  .sunny-policy-content p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .sunny-body * { transition: none !important; scroll-behavior: auto !important; } }