:root {
  --ink:#232333;
  --muted:#74737e;
  --paper:#fffaf1;
  --white:#fff;
  --yellow:#fdc033;
  --orange:#fd8734;
  --pink:#f24c97;
  --purple:#7647cf;
  --blue:#1a9ada;
  --teal:#29b89f;
  --green:#63b45a;
  --line:#e9e4dc;
  --shadow:0 24px 70px #23233312
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.75 'DM Sans',sans-serif
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%
}

::selection {
  background:#e1d1ff
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:Manrope,sans-serif;
  line-height:1.13;
  font-weight:700;
  letter-spacing:-.055em
}

h1 {
  font-size:clamp(44px,4.9vw,72px);
  margin-bottom:24px
}

h2 {
  font-size:clamp(34px,3.8vw,52px);
  margin-bottom:24px
}

.keep-together {
  white-space:nowrap
}

h3 {
  font-size:25px
}

.container {
  width:min(1200px,calc(100% - 80px));
  margin:auto
}

.section {
  padding:104px 0
}

.eyebrow {
  display:block;
  color:var(--purple);
  font-size:10px;
  font-weight:800;
  letter-spacing:.19em;
  margin-bottom:23px
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(105deg,#fff7e9f2 0%,#fff0f5f2 45%,#f1edfff2 75%,#eaf8fbf2 100%);
  backdrop-filter:blur(20px);
  border-bottom:1px solid #e7def0;
  transition:box-shadow .3s
}

.site-header.scrolled {
  box-shadow:0 4px 24px #2323330a
}

.nav-wrap {
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px
}

.brand img {
  width:300px;
  max-height:130px;
  object-fit:contain
}

.nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
  font-weight:600
}

.nav a {
  transition:color .2s
}

.nav a:hover,.nav a.active {
  color:var(--purple)
}

.nav .nav-cta {
  padding:12px 21px;
  border:1px solid var(--ink);
  border-radius:50px
}

.nav-cta:hover {
  background:var(--ink);
  color:white!important
}

.nav-toggle {
  display:none
}

.hero {
  padding:68px 0 55px;
  overflow:hidden;
  position:relative;
  background:radial-gradient(circle at 88% 22%,#e8f7fb 0%,transparent 32%),radial-gradient(circle at 48% 72%,#ffeef4 0%,transparent 38%),linear-gradient(120deg,#fff9ee 0%,#fff4e8 48%,#f7efff 100%)
}

.hero-grid {
  display:grid;
  grid-template-columns:1.06fr 1fr;
  gap:64px;
  align-items:center
}

.hero h1 span {
  color:var(--purple);
  background:linear-gradient(100deg,var(--purple) 10%,var(--pink) 55%,var(--orange) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.hero-lead {
  font-size:16px;
  color:var(--muted);
  max-width:470px;
  margin-bottom:28px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border:0;
  border-radius:50px;
  padding:16px 24px;
  font-size:12px;
  font-weight:700;
  transition:transform .25s,box-shadow .25s,background .25s
}

.btn:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 25px #2323331a
}

.btn-primary {
  background:linear-gradient(110deg,var(--purple),#9650cc,var(--pink));
  color:white
}

.btn-primary span {
  font-size:18px
}

.affiliate-cta {
  margin-top:48px;
  max-width:100%;
  text-align:center
}

.btn-ghost {
  padding-left:0;
  padding-right:0;
  border-radius:0;
  border-bottom:1px solid var(--line)
}

.hero-proof {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:42px;
  padding-top:25px;
  border-top:1px solid var(--line)
}

.hero-proof strong {
  font-size:10px;
  letter-spacing:.1em;
  display:block
}

.hero-proof span {
  font-size:10px;
  color:var(--muted)
}

.hero-art {
  height:520px;
  position:relative
}

.hero-photo {
  position:absolute;
  inset:30px 15px 35px 10px;
  border-radius:180px 180px 22px 22px;
  overflow:hidden;
  background:#e3d4b7;
  transform:rotate(3deg)
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:48% center;
  transition:transform 1s
}

.hero-art:hover .hero-photo img {
  transform:scale(1.04)
}

.photo-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,#232333aa);
  padding:65px 25px 22px;
  color:white;
  font-size:11px
}

.live-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--yellow);
  border-radius:50%;
  margin-right:8px
}

.hero-orbit {
  position:absolute;
  inset:5px 0 65px -15px;
  border:1px solid #7647cf35;
  border-radius:50%;
  transform:rotate(-20deg)
}

.floating-label {
  position:absolute;
  z-index:2;
  background:white;
  box-shadow:var(--shadow);
  border:1px solid #ffffffb3;
  border-radius:14px;
  animation:float 6s ease-in-out infinite
}

.label-top {
  top:48px;
  left:-32px;
  padding:14px 20px;
  font-size:11px;
  transform:rotate(-7deg)
}

.label-top>span {
  font-size:24px;
  color:var(--orange);
  margin-right:10px;
  vertical-align:middle
}

.label-bottom {
  bottom:55px;
  right:-25px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 22px;
  animation-delay:-3s
}

.label-icon {
  background:#ede5fa;
  color:var(--purple);
  border-radius:12px;
  padding:8px 12px;
  font-size:22px;
  font-weight:700
}

.label-bottom b,.label-bottom small {
  display:block
}

.label-bottom b {
  font-size:12px
}

.label-bottom small {
  font-size:10px;
  color:var(--muted)
}

.hero-flower {
  position:absolute;
  right:-8px;
  top:-5px;
  font-size:96px;
  line-height:1;
  color:var(--yellow);
  animation:rotate 40s linear infinite
}

.art-index {
  position:absolute;
  bottom:0;
  left:25px;
  font-size:9px;
  letter-spacing:.17em;
  color:var(--muted)
}

.hero-cloud {
  display:none
}

.shop-feature {
  overflow:hidden;
  scroll-margin-top:105px;
  padding:clamp(24px,4vh,48px) 0;
  color:#09264e;
  background:radial-gradient(ellipse at 90% 5%,#bdeefa 0,transparent 48%),linear-gradient(135deg,#f3fbff,#fffdf5 55%,#fff0f5)
}

.shop-feature-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:clamp(24px,4vw,60px)
}

.shop-feature .eyebrow {
  color:#174c70;
  margin-bottom:12px
}

.shop-rainbow-line {
  width:190px;
  height:5px;
  border-radius:10px;
  margin-bottom:28px;
  background:linear-gradient(90deg,#f34c84 25%,#ff981f 25% 40%,#f9c51b 40% 65%,#68bf73 65% 78%,#1eafbf 78% 88%,#1686dd 88%)
}

.shop-feature h2 {
  font-size:clamp(42px,5vw,70px);
  font-weight:800;
  line-height:1.12;
  margin-bottom:24px
}

.shop-made { color:#1aa9b7 }
.shop-joyful {
  background:linear-gradient(90deg,#f33566,#ff9220,#f4c21a,#22b5ae,#8d33bf);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.shop-read { color:#e63668 }
.shop-learn { color:#0788be }
.shop-create { color:#d9720c }
.shop-play { color:#248d62 }
.shop-explore { color:#8b35b5 }

.shop-feature-copy>p {
  font-size:18px;
  line-height:1.7;
  max-width:530px;
  margin-bottom:28px
}

.shop-button {
  background:#ee3869;
  color:white;
  border-radius:50px;
  padding:10px 36px;
  line-height:1.2;
  font-size:18px;
  box-shadow:0 5px 0 #cc2854
}
.shop-button:hover { background:#d92c5b }
.shop-button span { font-size:26px; line-height:1 }

.shop-feature-art { position:relative; padding:34px 0 20px }
.shop-feature-art>img {
  position:relative;
  width:100%;
  aspect-ratio:1.12;
  object-fit:contain;
  background:#fffdf5;
  border:8px solid white;
  border-radius:100px 30px 100px 30px;
  box-shadow:0 20px 45px #164c701a;
  transform:rotate(2deg)
}
.shop-rainbow {
  position:absolute;
  width:85%;
  aspect-ratio:1;
  top:-30px;
  right:-35px;
  border-radius:50%;
  background:radial-gradient(circle,transparent 41%,#81cdb5 41% 48%,#f9d86c 48% 55%,#ffb56e 55% 62%,#f58099 62% 69%,transparent 69%)
}
.shop-art-note {
  position:relative;
  display:table;
  margin:-12px auto 0;
  padding:10px 20px;
  background:#fff1bc;
  border-radius:30px;
  font-size:14px;
  font-weight:700
}
.shop-categories {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:clamp(20px,3vh,40px)
}
.shop-category {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px;
  border-radius:24px;
  background:#ffffffb8;
  transition:transform .2s,box-shadow .2s
}
.shop-category:hover { transform:translateY(-4px); box-shadow:0 10px 25px #164c7012 }
.shop-category img {
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  border:5px solid #dff6fb
}
.shop-category:nth-child(2) img { border-color:#fff0be }
.shop-category:nth-child(3) img { border-color:#ffe3ef }
.shop-category h3 { margin-bottom:8px; font-size:26px }
.shop-category p { margin:0; font-size:15px; line-height:1.5; color:#45617d }

/* Keep the whole promotion within a desktop viewport below the sticky header. */
@media(min-width:801px) {
  .shop-feature-grid>div { min-width:0 }
  .shop-feature-art { padding:20px 0 10px }
  .shop-feature-art>img {
    height:clamp(220px,calc(100svh - 340px),480px);
    aspect-ratio:auto;
    transform:none
  }
  .shop-feature h2 { font-size:clamp(36px,7vh,64px); margin-bottom:16px }
  .shop-feature-copy>p { font-size:clamp(15px,2.2vh,18px); margin-bottom:20px }
  .shop-rainbow-line { margin-bottom:18px }
  .shop-button { padding:10px 30px }
  .shop-category img { width:clamp(64px,11vh,100px); height:clamp(64px,11vh,100px); flex-shrink:0 }
  .shop-category { gap:14px; padding:14px }
  .shop-category h3 { font-size:24px }
}

@media(max-width:1050px) {
  .shop-feature-grid { gap:30px }
  .shop-category { flex-direction:column; align-items:flex-start }
}
@media(max-width:800px) {
  .shop-feature { padding:55px 0 36px }
  .shop-feature-grid { grid-template-columns:1fr }
  .shop-feature-art { max-width:420px; width:100%; margin:auto }
  .shop-feature-grid>div { min-width:0 }
  .shop-feature-art>img { transform:none }
  .shop-categories { gap:12px; margin-top:30px }
}
@media(max-width:480px) {
  .shop-categories { grid-template-columns:1fr }
  .shop-category { flex-direction:row; align-items:center }
  .shop-category img { width:76px; height:76px; flex-shrink:0 }
  .shop-category>div { min-width:0 }
  .shop-feature h2 { font-size:clamp(34px,10vw,46px) }
  .shop-art-note { font-size:12px; text-align:center; padding:10px 14px }
  .shop-feature-copy>p { font-size:16px }
  .shop-rainbow { right:-15px }
}

.brand-strip {
  border-block:1px solid var(--line);
  background:#fffdf8;
  padding:23px 0
}

.brand-strip .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand-strip span {
  font-size:9px;
  letter-spacing:.12em;
  color:var(--muted)
}

.brand-strip b {
  font-family:Manrope;
  font-size:17px;
  letter-spacing:-.04em
}

.brand-strip i {
  font-style:normal;
  font-size:18px
}

.brand-strip b:nth-of-type(1) {
  color:#7541c7
}

.brand-strip b:nth-of-type(2) {
  color:#cf3177
}

.brand-strip b:nth-of-type(3) {
  color:#c86b20
}

.brand-strip b:nth-of-type(4) {
  color:#178d7b
}

.brand-strip b:nth-of-type(5) {
  color:#167daf
}

.brand-strip i:nth-of-type(1) {
  color:var(--orange)
}

.brand-strip i:nth-of-type(2) {
  color:var(--purple)
}

.brand-strip i:nth-of-type(3) {
  color:var(--teal)
}

.brand-strip i:nth-of-type(4) {
  color:var(--pink)
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px
}

.intro {
  background:linear-gradient(115deg,#e8f7ef 0%,#f4faef 54%,#fff0dc 100%)
}

.intro .eyebrow {
  color:#a94435
}

.intro h2 {
  color:#173e45
}

.intro-highlight {
  color:#b24935;
  background:linear-gradient(transparent 62%,#ffd48d 62%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.intro .intro-copy {
  color:#46676a
}

.intro .intro-copy strong {
  color:#146b68;
  background:#d8f3dc;
  border-radius:4px;
  padding:0 3px
}

.intro-copy {
  color:var(--muted);
  font-size:16px
}

.intro-copy strong {
  color:var(--ink);
  font-weight:500
}

.intro-copy p:last-child {
  margin:0
}

.section-heading {
  max-width:680px;
  margin-bottom:40px
}

.section-heading p {
  color:var(--muted);
  max-width:590px
}

.ecosystem {
  background:#f3eee6
}

.ecosystem-filters {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px
}

.ecosystem-filters button {
  border:1px solid #ded7cd;
  background:transparent;
  padding:9px 18px;
  border-radius:50px;
  font-size:11px;
  transition:.2s
}

.ecosystem-filters button.active {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}

.ecosystem-filters span {
  margin-left:8px;
  opacity:.5
}

.ecosystem-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.eco-card {
  position:relative;
  background:#fffdf9;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  padding:0 25px 25px;
  transition:transform .3s,box-shadow .3s;
  display:flex;
  flex-direction:column
}

.eco-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow)
}

.eco-card[hidden] {
  display:none
}

.eco-photo {
  margin:0 -25px 25px;
  height:205px;
  overflow:hidden;
  background:#e4ddce
}

.eco-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}

.eco-card:hover img {
  transform:scale(1.06)
}

.eco-number {
  position:absolute;
  right:15px;
  top:15px;
  font-size:10px;
  background:#ffffffd9;
  border-radius:50%;
  padding:7px 10px
}

.eco-icon {
  display:none
}

.eco-tag {
  font-size:9px;
  letter-spacing:.15em;
  font-weight:700;
  color:var(--purple)
}

.stories .eco-tag {
  color:var(--pink)
}

.create .eco-tag {
  color:var(--blue)
}

.play .eco-tag {
  color:var(--teal)
}

.academy .eco-tag {
  color:#b87f00
}

.eco-card h3 {
  font-size:23px;
  line-height:1.3;
  margin:10px 0 13px
}

.eco-card p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:22px
}

.eco-card a {
  font-size:11px;
  font-weight:700;
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:16px
}

.eco-card:nth-child(4),.eco-card:nth-child(5) {
  grid-column:auto
}

.ecosystem {
  background:linear-gradient(130deg,#f3edff 0%,#fff4e8 46%,#eaf8f5 100%)
}

.ecosystem .eyebrow {
  color:#b24d73
}

.ecosystem-highlight {
  color:#9a4bba;
  background:linear-gradient(transparent 64%,#ffe1a2 64%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.ecosystem .section-heading p {
  color:#5e6174
}

.ecosystem-filters button {
  background:#ffffffb8
}

.ecosystem-filters button:hover {
  border-color:var(--purple);
  background:white
}

.ecosystem-filters button.active {
  background:linear-gradient(110deg,var(--purple),var(--pink));
  border-color:transparent;
  color:white
}

.eco-card:nth-child(1) {
  --eco-accent:#8a55c7;
  --eco-soft:#faf4ff
}

.eco-card:nth-child(2) {
  --eco-accent:#c23678;
  --eco-soft:#fff3f8
}

.eco-card:nth-child(3) {
  --eco-accent:#be6927;
  --eco-soft:#fff7ee
}

.eco-card:nth-child(4) {
  --eco-accent:#198b78;
  --eco-soft:#effaf5
}

.eco-card:nth-child(5) {
  --eco-accent:#247cae;
  --eco-soft:#eff8ff
}

.ecosystem .eco-card {
  background:var(--eco-soft);
  border-color:#ffffffb8;
  border-top:4px solid var(--eco-accent);
  box-shadow:0 12px 32px #3e315710
}

.ecosystem .eco-card:hover {
  box-shadow:0 22px 44px #3e315724
}

.ecosystem .eco-card .eco-tag,.ecosystem .eco-card a {
  color:var(--eco-accent)
}

.ecosystem .eco-card .eco-number {
  background:var(--eco-accent);
  color:white
}

.ecosystem .eco-card h3 {
  color:#292638
}

.ecosystem .eco-card p {
  color:#5f5b6b
}

.js .ecosystem .eco-card:nth-child(2) {
  transition-delay:.08s
}

.js .ecosystem .eco-card:nth-child(3) {
  transition-delay:.16s
}

.js .ecosystem .eco-card:nth-child(4) {
  transition-delay:.24s
}

.js .ecosystem .eco-card:nth-child(5) {
  transition-delay:.32s
}

.philosophy {
  background:white
}

.philosophy-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:center
}

.philosophy-copy>p {
  color:var(--muted);
  max-width:490px
}

.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:35px
}

.principles div {
  border-top:3px solid var(--step-color);
  padding-top:13px
}

.principles span {
  font-size:9px;
  color:var(--step-color);
  font-weight:800
}

.principles b,.principles small {
  display:block
}

.principles b {
  font-size:11px;
  margin:7px 0
}

.principles small {
  font-size:10px;
  line-height:1.5;
  color:var(--muted)
}

.journey-panel {
  background:linear-gradient(155deg,#f0e7ff 0%,#eaf7fc 38%,#fff3df 72%,#ffe8ed 100%);
  padding:38px 40px;
  border-radius:150px 150px 20px 20px;
  position:relative;
  overflow:hidden
}

.journey-title {
  font-size:9px;
  letter-spacing:.15em;
  text-align:center;
  margin:18px 0 30px;
  color:var(--purple)
}

.journey-symbol {
  text-align:center;
  color:var(--orange);
  font-size:65px;
  line-height:1;
  margin-bottom:25px
}

.journey-step {
  display:flex;
  align-items:center;
  gap:20px
}

.journey-step>span {
  height:36px;
  width:36px;
  display:grid;
  place-items:center;
  background:var(--step-bg);
  border:2px solid var(--step-color);
  border-radius:50%;
  font-size:10px;
  font-weight:800;
  color:var(--step-color)
}

.journey-step b {
  font-size:11px;
  letter-spacing:.1em;
  display:block
}

.journey-step small {
  font-size:11px;
  color:var(--muted)
}

.journey-line {
  height:18px;
  width:1px;
  background:#cfc0e5;
  margin:5px 0 5px 18px
}

.principles div:nth-child(1),.journey-step:nth-of-type(3) {
  --step-color:#7647cf;
  --step-bg:#efe5ff
}

.principles div:nth-child(2),.journey-step:nth-of-type(5) {
  --step-color:#1a9ada;
  --step-bg:#e3f4fc
}

.principles div:nth-child(3),.journey-step:nth-of-type(7) {
  --step-color:#179c85;
  --step-bg:#ddf7ef
}

.principles div:nth-child(4),.journey-step:nth-of-type(9) {
  --step-color:#b47a00;
  --step-bg:#fff3d1
}

.principles div:nth-child(5),.journey-step:nth-of-type(11) {
  --step-color:#df6e1e;
  --step-bg:#fff0e2
}

.principles div:nth-child(6),.journey-step:nth-of-type(13) {
  --step-color:#d73a52;
  --step-bg:#ffe5e9
}

.capabilities {
  background:var(--paper)
}

.cap-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0
}

.cap {
  padding:28px 28px 28px 0;
  border-top:1px solid var(--line)
}

.cap span {
  font-size:10px;
  color:var(--purple)
}

.cap h3 {
  font-size:22px;
  margin:18px 0 12px
}

.cap p {
  font-size:13px;
  color:var(--muted);
  max-width:300px
}

.capabilities {
  background:linear-gradient(145deg,#fffaf1 0%,#f9f5ff 52%,#eef9f7 100%)
}

.capabilities .eyebrow {
  color:#157f81
}

.capabilities-highlight {
  color:#157f81;
  background:linear-gradient(transparent 64%,#c7f1df 64%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.cap-grid {
  gap:14px
}

.cap {
  position:relative;
  overflow:hidden;
  min-height:190px;
  padding:20px 22px;
  border:1px solid #e8e5eb;
  border-radius:16px;
  background:radial-gradient(circle at 100% 0,var(--cap-wash),transparent 38%),#fffdfa;
  box-shadow:0 8px 22px #342d4a0a;
  transition:transform .3s,box-shadow .3s
}

.cap:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 30px #342d4a18
}

.cap:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:var(--cap-accent)
}

.cap span {
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--cap-bg);
  border:1px solid var(--cap-accent);
  color:var(--cap-accent);
  font-size:10px;
  font-weight:800
}

.cap h3 {
  color:#292637;
  font-size:19px;
  margin:14px 0 8px
}

.cap p {
  color:#575b68;
  max-width:none;
  font-size:12px;
  line-height:1.55;
  margin-bottom:0
}

.cap:nth-child(1) {
  --cap-accent:#7548b6;
  --cap-bg:#f5efff;
  --cap-wash:#e7d8ff
}

.cap:nth-child(2) {
  --cap-accent:#b53977;
  --cap-bg:#fff0f6;
  --cap-wash:#ffd8e9
}

.cap:nth-child(3) {
  --cap-accent:#c36a27;
  --cap-bg:#fff4e7;
  --cap-wash:#ffe0bc
}

.cap:nth-child(4) {
  --cap-accent:#178e7a;
  --cap-bg:#eafaf3;
  --cap-wash:#c7f3df
}

.cap:nth-child(5) {
  --cap-accent:#237ead;
  --cap-bg:#edf8ff;
  --cap-wash:#d1eefa
}

.cap:nth-child(6) {
  --cap-accent:#c84551;
  --cap-bg:#fff0ee;
  --cap-wash:#ffd6d4
}

.js .cap:nth-child(2) {
  transition-delay:.06s
}

.js .cap:nth-child(3) {
  transition-delay:.12s
}

.js .cap:nth-child(4) {
  transition-delay:.18s
}

.js .cap:nth-child(5) {
  transition-delay:.24s
}

.js .cap:nth-child(6) {
  transition-delay:.3s
}

.flagship {
  padding-top:0
}

.flagship-box {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  border-radius:24px;
  overflow:hidden;
  background:#f5e9d2
}

.flagship-art {
  position:relative;
  min-height:450px;
  background:radial-gradient(circle at center,#ffeac4 0 45%,transparent 45%),#f4ddb3;
  display:grid;
  place-items:center
}

.book-stack {
  width:245px;
  transform:rotate(-12deg)
}

.book {
  padding:24px;
  border-radius:7px 15px 15px 7px;
  margin-top:-5px;
  font:700 20px Manrope;
  color:white;
  box-shadow:5px 14px 25px #674b2830;
  border-left:8px solid #ffffff40
}

.book-a {
  background:var(--purple)
}

.book-b {
  background:var(--teal);
  margin-left:20px
}

.book-c {
  background:var(--orange);
  margin-left:40px
}

.spark {
  position:absolute;
  font-size:40px;
  color:var(--purple)
}

.s1 {
  top:60px;
  left:50px
}

.s2 {
  bottom:65px;
  right:50px;
  color:var(--pink)
}

.s3 {
  top:80px;
  right:65px;
  color:var(--teal)
}

.flagship-copy {
  padding:62px
}

.flagship-copy p {
  font-size:14px;
  color:#81735f
}

.flagship-copy .quote {
  font-size:24px;
  color:var(--ink);
  letter-spacing:-.04em
}

.text-link {
  font-size:11px;
  font-weight:700;
  border-bottom:1px solid #c7b99d;
  padding-bottom:8px
}

.flagship-box {
  background:linear-gradient(125deg,#eaf9f5 0%,#fff0e2 51%,#f9eafb 100%);
  box-shadow:0 20px 52px #61416012
}

.flagship-art {
  background:radial-gradient(circle at center,#fff7dc 0 45%,transparent 45%),linear-gradient(145deg,#d8f5ed,#e9e3fb)
}

.flagship .book-a {
  background:#c94875
}

.flagship .book-b {
  background:#188e9d
}

.flagship .book-c {
  background:#7652ba
}

.flagship .spark.s1 {
  color:#e58227
}

.flagship .spark.s2 {
  color:#c94875
}

.flagship .spark.s3 {
  color:#188e9d
}

.flagship-copy .eyebrow {
  color:#a63c69
}

.flagship-copy h2 {
  color:#273149
}

.flagship-copy h2 .aksharakkuda-name {
  color:#aa3e83;
  background:linear-gradient(100deg,#b73f80,#7047bd,#188e9d);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.flagship-copy p {
  color:#615a68
}

.flagship-copy p .aksharakkuda-name {
  color:#a63c69;
  font-weight:800
}

.flagship-copy .quote {
  color:#176a73
}

.flagship-copy .text-link {
  color:#7445a8;
  border-bottom-color:#b997d0
}

.flagship-copy .text-link .aksharakkuda-name {
  color:#aa3e83
}

.partnerships {
  background:white
}

.partnerships .eyebrow {
  color:#157e88
}

.partnerships h2 {
  color:#263347
}

.partnerships-highlight {
  color:#bd4e53;
  background:linear-gradient(transparent 62%,#ffe3a8 62%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.partnerships .section-heading p {
  color:#4e6570
}

.partner-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.partner-card {
  position:relative;
  overflow:hidden;
  min-height:320px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:194px 24px 24px;
  background:var(--card-tint);
  transition:transform .3s,box-shadow .3s
}

.partner-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}

.partner-card:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:172px;
  background-image:var(--card-image);
  background-size:cover;
  background-position:center 28%;
  border-bottom:5px solid var(--card-accent)
}

.partner-card:nth-child(1) {
  --card-image:url("assets/partner-schools.jpg");
  --card-tint:#fff7e6;
  --card-accent:var(--yellow)
}

.partner-card:nth-child(2) {
  --card-image:url("assets/partner-publishers.jpg");
  --card-tint:#fff0f6;
  --card-accent:var(--pink)
}

.partner-card:nth-child(3) {
  --card-image:url("assets/partner-community.jpg");
  --card-tint:#ecfaf6;
  --card-accent:var(--teal)
}

.partner-card:nth-child(4) {
  --card-image:url("assets/partner-education.jpg");
  --card-tint:#f2edfc;
  --card-accent:var(--purple)
}

.partner-card b {
  display:block;
  font:600 19px/1.3 Manrope;
  letter-spacing:-.04em;
  margin-bottom:15px
}

.partner-card span {
  font-size:11px;
  color:#595868
}

.future {
  background:linear-gradient(115deg,#fff4e8 0%,#fcecf4 48%,#eaf6fa 100%)
}

.future-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.future p {
  color:#4d626b;
  font-size:14px
}

.future h2 {
  color:#253243
}

.future-highlight {
  color:#b64275;
  background:linear-gradient(transparent 62%,#ffe0a5 62%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.future .eyebrow {
  color:#157f89
}

.future-map {
  height:340px;
  position:relative;
  background:radial-gradient(circle,#fffdfbcc,transparent 72%);
  border:1px solid #ffffffcc;
  border-radius:50%
}

.node {
  position:absolute;
  z-index:2;
  padding:11px 20px;
  border-radius:50px;
  background:white;
  font-size:11px;
  box-shadow:0 10px 30px #7647cf10
}

.node.n1 {
  background:#fff3d6;
  color:#875700
}

.node.n2 {
  background:#ffe8f2;
  color:#a52964
}

.node.n3 {
  background:#e9e0fb;
  color:#6234ac
}

.node.n4 {
  background:#dff7ef;
  color:#176c5b
}

.node.n5 {
  background:#e1f3fc;
  color:#17658d
}

.node.main {
  top:44%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--purple);
  color:white;
  font-weight:700;
  letter-spacing:.07em;
  padding:20px 24px
}

.n1 {
  top:12%;
  left:12%
}

.n2 {
  top:12%;
  right:12%
}

.n3 {
  bottom:22%;
  left:3%
}

.n4 {
  bottom:22%;
  right:3%
}

.n5 {
  bottom:3%;
  left:50%;
  transform:translateX(-50%)
}

.connector {
  position:absolute;
  background:#d5b8d7;
  height:1px;
  width:32%;
  left:50%;
  top:44%;
  transform-origin:left
}

.c1 {
  transform:rotate(220deg)
}

.c2 {
  transform:rotate(-40deg)
}

.c3 {
  transform:rotate(150deg)
}

.c4 {
  transform:rotate(30deg)
}

.c5 {
  transform:rotate(90deg);
  width:30%
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.faq-grid>div>p {
  color:var(--muted)
}

.faq {
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,#fff4df 0%,#f4f8f3 48%,#f5ecfb 100%)
}

.faq-grid {
  position:relative;
  z-index:1
}

.faq .eyebrow {
  color:#ad4a65
}

.faq h2 {
  color:#26364a
}

.faq-highlight {
  color:#a74375;
  background:linear-gradient(transparent 64%,#ffd989 64%);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone
}

.faq-grid>div>p {
  color:#566a73
}

.faq-list details,.faq-list details:first-child {
  margin-bottom:12px;
  padding:18px 22px;
  border:1px solid #e8deea;
  border-radius:14px;
  background:#ffffffc9;
  box-shadow:0 6px 20px #5448640a;
  transition:background .25s,border-color .25s
}

.faq-list details[open] {
  background:#fffdfa;
  border-color:#d9bedf
}

.faq-list summary {
  color:#2e4058
}

.faq-list details[open] summary {
  color:#9b3e74
}

.faq-list summary:after {
  color:#b94b78
}

.faq-list details p {
  color:#5c6873
}

.faq-toys {
  position:absolute;
  z-index:0;
  width:120px;
  height:175px;
  pointer-events:none
}

.faq-toys-left {
  left:3%;
  bottom:42px;
  transform:rotate(-12deg)
}

.faq-toys-right {
  right:3%;
  top:45px
}

.toy-block {
  position:absolute;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:16px;
  color:#fff;
  font:800 30px Manrope,sans-serif;
  box-shadow:0 12px 24px #4a395526
}

.toy-block:first-child {
  left:4px;
  top:9px;
  background:#f5a935
}

.toy-block:nth-child(2) {
  left:43px;
  top:65px;
  background:#42b7a5;
  transform:rotate(12deg)
}

.toy-star {
  position:absolute;
  color:#bd5ab1;
  font-size:40px;
  line-height:1
}

.faq-toys-left .toy-star {
  left:79px;
  top:0
}

.toy-ball {
  position:absolute;
  right:8px;
  top:10px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%,#fff7cd 0 15%,#f9b148 16% 43%,#ef6996 44% 68%,#8559c5 69%);
  box-shadow:0 13px 25px #61487024
}

.toy-ring {
  position:absolute;
  left:6px;
  top:93px;
  width:77px;
  height:77px;
  border:16px solid #58c4b6;
  border-radius:50%;
  transform:rotate(-20deg);
  box-shadow:0 10px 20px #427b7620
}

.faq-toys-right .toy-star {
  left:8px;
  top:3px;
  color:#e39b2f
}

@media(max-width:1500px) {
  .faq-toys {
    display:none
  }
}

details {
  border-bottom:1px solid var(--line);
  padding:22px 0
}

details:first-child {
  border-top:1px solid var(--line)
}

summary {
  cursor:pointer;
  list-style:none;
  font-size:14px;
  font-weight:600;
  padding-right:25px;
  position:relative
}

summary::-webkit-details-marker {
  display:none
}

summary:after {
  content:'+';
  position:absolute;
  right:0;
  color:var(--purple);
  font-size:20px
}

details[open] summary:after {
  content:'−'
}

details p {
  font-size:13px;
  color:var(--muted);
  margin:14px 0 0
}

.contact {
  background:var(--ink);
  color:white
}

.contact-box {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.contact h2 {
  max-width:510px
}

.contact-highlight {
  color:#ffd066;
  background:linear-gradient(100deg,#ffd066 0%,#ff9b8d 55%,#87dfce 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent
}

.contact .eyebrow {
  color:var(--yellow)
}

.contact-box>div>p {
  color:#b2b1bd;
  max-width:410px
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.contact-form label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.02em
}

.contact-form label:nth-child(n+3) {
  grid-column:1/-1
}

input,select,textarea {
  width:100%;
  border:1px solid #ffffff30;
  border-radius:9px;
  padding:12px 14px;
  background:#ffffff08;
  color:white;
  font-size:12px;
  outline:none
}

input::placeholder,textarea::placeholder {
  color:#9695a3
}

select option {
  color:var(--ink);
  background:white
}

textarea {
  resize:vertical
}

input:focus,textarea:focus,select:focus {
  border-color:#b791f7
}

.contact-form .btn {
  grid-column:1/-1;
  width:100%;
  background:var(--yellow);
  color:var(--ink);
  margin-top:4px
}

.form-note {
  grid-column:1/-1;
  margin:0;
  font-size:10px;
  color:#b2b1bd
}

.contact-email {
  grid-column:1/-1;
  font-size:11px;
  color:#e8d7ff;
  overflow-wrap:anywhere
}

footer {
  background:#1c1c29;
  color:white
}

.footer-top {
  padding:55px 0;
  display:flex;
  justify-content:space-between;
  gap:50px
}

.footer-brand .brand {
  display:inline-block
}

.footer-brand .brand img {
  width:150px
}

.footer-brand p {
  font-size:11px;
  color:#9c9baa;
  margin-top:15px
}

.footer-links {
  display:flex;
  gap:90px
}

.footer-links div {
  display:flex;
  flex-direction:column;
  gap:9px
}

.footer-links b {
  font-size:11px;
  margin-bottom:6px
}

.footer-links a,
.footer-shop {
  font-size:11px;
  color:#9c9baa
}

.footer-links a:hover,
.footer-shop:hover {
  color:white
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  border-top:1px solid #ffffff15;
  font-size:10px;
  color:#8e8d9c
}

/* Larger labels and supporting copy throughout the site. */
body {
  font-size:16px
}

.nav {
  font-size:15px
}

.eyebrow {
  font-size:14px
}

.btn {
  font-size:14px
}

.hero-lead,
.intro-copy {
  font-size:18px
}

.hero-proof strong,
.hero-proof span {
  font-size:14px;
  white-space:nowrap
}

.photo-caption,
.label-top {
  font-size:14px
}

.label-bottom b {
  font-size:15px
}

.label-bottom small,
.art-index {
  font-size:13px
}

.brand-strip span {
  font-size:14px;
  font-weight:800
}

.brand-strip b {
  font-size:20px
}

.section-heading p,
.philosophy-copy>p,
.future p,
.faq-grid>div>p,
.contact-box>div>p {
  font-size:17px
}

.ecosystem-filters button,
.eco-number,
.eco-tag,
.principles span,
.journey-title,
.journey-step>span,
.cap span {
  font-size:13px
}

.node {
  font-size:14px
}

.eco-card p,
.faq-list details p {
  font-size:16px
}

.eco-card a,
.partner-card span,
.principles b,
.principles small,
.journey-step b,
.journey-step small,
.cap p {
  font-size:15px
}

.flagship-copy p {
  font-size:17px
}

.text-link {
  font-size:16px
}

.faq-list summary {
  font-size:17px
}

.contact-form label,
.contact-email {
  font-size:15px
}

input,select,textarea {
  font-size:16px
}

.form-note {
  font-size:14px
}

.footer-brand p,
.footer-links a,
.footer-shop {
  font-size:15px
}

.footer-links b {
  font-size:16px
}

.footer-bottom {
  font-size:14px
}

.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));
  z-index:50;
  width:0
}

.back-top {
  position:fixed;
  right:25px;
  bottom:25px;
  background:white;
  border:1px solid var(--line);
  border-radius:50%;
  height:44px;
  width:44px;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  z-index:25;
  opacity:0;
  visibility:hidden;
  transition:.3s
}

.back-top.visible {
  opacity:1;
  visibility:visible
}

.skip-link {
  position:fixed;
  top:-60px;
  left:15px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:10px 20px
}

.skip-link:focus {
  top:10px
}

:focus-visible {
  outline:3px solid var(--pink);
  outline-offset:5px
}

.js .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s,transform .7s
}

.js .reveal.shown {
  opacity:1;
  transform:none
}

@keyframes float {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -10px
  }
}

@keyframes rotate {
  to {
    rotate:360deg
  }
}

@media(min-width:1000px) {
  .eco-card:nth-child(4),.eco-card:nth-child(5) {
    max-width:none
  }
  .ecosystem-grid:has(.eco-card[hidden]) {
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:1050px) {
  .container {
    width:calc(100% - 48px)
  }
  .nav {
    gap:17px
  }
  .hero-grid {
    gap:30px
  }
  .hero-art {
    height:460px
  }
  .label-bottom {
    right:0
  }
  .two-col,.philosophy-grid,.future-grid,.faq-grid,.contact-box {
    gap:50px
  }
  .flagship-copy {
    padding:40px
  }
  .partner-card {
    padding:190px 20px 20px
  }
  .hero h1 {
    font-size:52px
  }
}

@media(max-width:800px) {
  .nav-wrap {
    height:76px
  }
  .nav-toggle {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border:0;
    background:none
  }
  .nav-toggle span {
    width:24px;
    height:2px;
    background:var(--ink)
  }
  .nav {
    display:none;
    position:absolute;
    top:76px;
    left:24px;
    right:24px;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:20px;
    border-radius:14px;
    flex-direction:column;
    align-items:stretch
  }
  .nav.open {
    display:flex
  }
  .nav a {
    padding:8px
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-proof {
    grid-template-columns:repeat(2,1fr)
  }
  .hero {
    padding-top:45px
  }
  .hero-copy {
    max-width:600px
  }
  .hero-art {
    width:min(500px,100%);
    margin:15px auto 0;
    height:490px
  }
  .hero h1 {
    font-size:clamp(42px,7vw,62px)
  }
  .section {
    padding:70px 0
  }
  .two-col,.philosophy-grid,.future-grid,.faq-grid,.contact-box {
    grid-template-columns:1fr;
    gap:30px
  }
  .ecosystem-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .partner-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .brand-strip .container {
    flex-wrap:wrap;
    justify-content:center;
    gap:13px 22px
  }
  .brand-strip span {
    width:100%;
    text-align:center
  }
  .brand-strip b {
    font-size:17px
  }
  .cap-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .flagship-box {
    grid-template-columns:1fr
  }
  .flagship-art {
    min-height:330px
  }
  .future-map {
    max-width:500px;
    width:100%;
    margin:auto
  }
  .journey-panel {
    max-width:500px;
    width:100%;
    margin:auto
  }
  .contact h2 {
    max-width:600px
  }
  .footer-links {
    gap:50px
  }
}

@media(max-width:480px) {
  .container {
    width:calc(100% - 36px)
  }
  .brand img {
    width:130px
  }
  .hero-art {
    height:395px
  }
  .hero-photo {
    inset:25px 5px 35px 5px
  }
  .label-top {
    left:0;
    top:20px;
    padding:9px 12px;
    font-size:12px
  }
  .label-bottom {
    bottom:35px;
    padding:12px;
    right:0
  }
  .hero-flower {
    font-size:70px;
    right:-7px
  }
  .hero-proof {
    gap:8px
  }
  .hero-proof span {
    font-size:14px
  }
  .hero-actions {
    gap:12px
  }
  .btn {
    padding:14px 18px
  }
  .btn-ghost {
    padding:10px 0
  }
  .ecosystem-grid,.cap-grid {
    grid-template-columns:1fr
  }
  .ecosystem-filters {
    gap:7px
  }
  .ecosystem-filters button {
    padding:8px 12px
  }
  .eco-photo {
    height:220px
  }
  .principles {
    grid-template-columns:repeat(2,1fr)
  }
  .partner-grid {
    gap:12px
  }
  .partner-card {
    padding:190px 18px 18px
  }
  .partner-card b {
    font-size:17px
  }
  .flagship-copy {
    padding:32px 25px
  }
  .footer-top {
    flex-direction:column;
    gap:30px
  }
  .footer-links {
    gap:25px
  }
  .footer-bottom {
    flex-direction:column;
    gap:6px
  }
  .contact-form {
    grid-template-columns:1fr
  }
  .contact-form label {
    grid-column:1/-1
  }
  .brand-strip i {
    display:none
  }
  .brand-strip .container {
    gap:12px 20px
  }
  .future-map {
    height:290px
  }
  .node {
    padding:9px 15px
  }
  .node.main {
    font-size:13px;
    padding:15px
  }
  .journey-panel {
    padding:30px
  }
  .section-heading {
    margin-bottom:30px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .js .reveal {
    opacity:1;
    transform:none
  }
}

/* Keep the shop call to action compact at every screen size. */
.shop-feature .shop-button {
  padding:10px 30px;
  font-size:14px;
  line-height:1.2;
  gap:20px;
}
.shop-feature .shop-button span { font-size:26px; line-height:1; }