/* The landing: Pip growing on its floating island, how it works, the live "teach Pip" demo, the nine worlds, Ask Pip,
   the price and questions, the band. */
body.home { background: var(--paper); overflow-x: hidden; }
.wrap { width: min(1160px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.top { position: fixed; z-index: 10; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: var(--paper); border-bottom: var(--line); }
.top-r { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 24px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.brand img { border: var(--line-2); border-radius: 9px; }
.brand .wm span { color: var(--leaf); }
section h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 10px 0 16px; }
h2 em { font-style: normal; color: var(--leaf); }
.lead { font-size: 19px; font-weight: 600; color: var(--ink-2); max-width: 30em; }
.two { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }

/* hero */
.hero { padding: 64px 0 0; background: var(--mint); border-bottom: var(--line); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: center; min-height: min(760px, calc(100svh - 64px)); padding-top: 24px; padding-bottom: 24px; }
.hero-copy { display: grid; gap: 16px; justify-items: start; }
.hero h1 { font-size: clamp(40px, min(5.4vw, 9vh), 72px); max-width: 10em; text-wrap: balance; }
.hero .sub { font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; max-width: 27em; background: var(--paper); border: var(--line); border-radius: 16px; padding: 12px 16px; }
.hero .small { font-weight: 700; background: var(--white); border: var(--line-2); border-radius: 999px; padding: 6px 12px; }
.scene { position: relative; height: min(560px, 70svh); }
.isl { position: absolute; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 92'%3E%3Cpath d='M8 36 Q18 82 60 90 Q102 82 112 36Z' fill='%23e8c79a' stroke='%2310223d' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M30 60 l6 14 M60 66 l0 18 M86 60 l-5 14' stroke='%23b98a55' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='36' rx='54' ry='19' fill='%232fbf71' stroke='%2310223d' stroke-width='3'/%3E%3Cellipse cx='44' cy='31' rx='12' ry='4' fill='%23fff' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat; animation: float 5s ease-in-out infinite; }
.isl.big { width: min(420px, 82%); aspect-ratio: 120 / 92; left: 50%; bottom: 8%; margin-left: max(-210px, -41%); }
.isl.small { width: 110px; aspect-ratio: 120 / 92; filter: hue-rotate(160deg) saturate(.7); }
.isl.i1 { left: 2%; top: 14%; animation-delay: -1.5s; }
.isl.i2 { right: 2%; top: 34%; width: 80px; animation-delay: -3s; filter: hue-rotate(-60deg); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-pip { position: absolute; left: 50%; bottom: 56%; width: 46%; transform: translateX(-50%); }
.hero-pip .pip-svg { width: 100%; }
.glitch-peek { position: absolute; right: 6%; bottom: 4%; width: 92px; transform: rotate(10deg); }
.grow-label { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); background: var(--white); border: var(--line-2); border-radius: 999px; padding: 8px 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.grow-label #growPart { color: var(--pink); font-family: var(--display); font-size: 19px; }
.cloud { position: absolute; width: 90px; height: 34px; background: var(--white); border: var(--line-2); border-radius: 999px; animation: drift 24s ease-in-out infinite; }
.cloud::before { content: ''; position: absolute; width: 44px; height: 40px; left: 18px; top: -20px; background: var(--white); border: var(--line-2); border-bottom: 0; border-radius: 50% 50% 0 0; }
.cloud.c1 { left: 10%; top: 6%; } .cloud.c2 { right: 8%; top: 18%; animation-delay: -8s; transform: scale(.8); } .cloud.c3 { left: 30%; top: 30%; animation-delay: -15s; transform: scale(.6); }
@keyframes drift { 0%, 100% { translate: -20px 0; } 50% { translate: 20px 0; } }

/* how */
.how { padding: clamp(56px, 8vw, 100px) 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.step { position: relative; background: var(--white); border: var(--line); border-radius: 24px; padding: 22px; box-shadow: 0 6px 0 var(--ink); display: grid; gap: 8px; }
.step .n { position: absolute; top: -16px; left: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); border: var(--line-2); font: 800 17px/30px var(--display); text-align: center; }
.step .ic { font-size: 44px; }
.step h3 { font-size: 28px; }
.step p { font-weight: 600; color: var(--ink-2); }

/* the demo */
.what { padding: clamp(56px, 8vw, 100px) 0; background: var(--sun); border-top: var(--line); border-bottom: var(--line); }
.what .kick { color: var(--ink); }
.demo { background: var(--paper); border: var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); padding: 20px; display: grid; gap: 14px; min-height: 430px; align-content: start; }
.demo .dsay { display: flex; gap: 10px; align-items: flex-end; }
.demo .dsay .who { width: 70px; flex: none; }
.demo .dsay p { flex: 1; background: var(--white); border: var(--line-2); border-radius: 18px; padding: 10px 14px; font-weight: 600; }
.demo .item { display: grid; justify-items: center; background: var(--white); border: var(--line-2); border-radius: 22px; padding: 14px; }
.demo .item .emo { font-size: 74px; line-height: 1; }
.demo .item b { font: 800 20px/1.2 var(--display); }
.demo .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo .btns .btn { width: 100%; }
.demo .bins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo .bin { background: var(--white); border: var(--line-2); border-radius: 14px; padding: 8px 10px; min-height: 58px; font-weight: 800; font-size: 14px; }
.demo .bin span { font-size: 24px; }
.demo .res { display: grid; gap: 8px; }
.demo .res div { display: flex; gap: 10px; align-items: center; background: var(--white); border: var(--line-2); border-radius: 14px; padding: 8px 12px; font-weight: 600; }
.demo .res .e { font-size: 34px; }

/* worlds */
.learn { padding: clamp(56px, 8vw, 100px) 0; background: var(--white); border-bottom: var(--line); }
.isles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.isle { display: flex; gap: 12px; align-items: center; background: var(--paper); border: var(--line); border-radius: 20px; padding: 14px 16px; box-shadow: 0 4px 0 var(--ink); }
.isle i { width: 52px; height: 52px; flex: none; border-radius: 14px; border: var(--line-2); display: grid; place-items: center; font-style: normal; font-size: 26px; }
.isle b { font: 800 18px/1.15 var(--display); display: block; }
.isle small { font-size: 14px; font-weight: 600; color: var(--muted); }
.isle .free { font: 700 11px/1 var(--mono); color: var(--leaf); letter-spacing: .08em; }
.isle .part { font: 700 11px/1 var(--mono); color: var(--pink); letter-spacing: .04em; }

/* Ask Pip */
.safe { padding: clamp(56px, 8vw, 100px) 0; background: var(--grape-2); border-bottom: var(--line); }
.chatmock { background: var(--white); border: var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--ink); padding: 20px; display: grid; gap: 10px; }
.cm { max-width: 86%; padding: 10px 14px; border: var(--line-2); border-radius: 18px; font-weight: 600; }
.cm.kid { justify-self: end; background: var(--sky); border-bottom-right-radius: 4px; }
.cm.pip { justify-self: start; background: var(--leaf-2); border-bottom-left-radius: 4px; }
.cm.warn { justify-self: center; background: var(--pink-2); text-align: center; }
.safe .ticks2 { margin-top: 18px; }

/* price + faq */
.price { padding: clamp(56px, 8vw, 100px) 0; background: var(--paper); }
.price-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; background: var(--sun); border: var(--line); border-radius: 30px; padding: clamp(22px, 4vw, 44px); box-shadow: 0 8px 0 var(--ink); width: min(1160px, calc(100% - 2 * var(--gutter))); }
.price .kick { color: var(--ink); }
.price-right { display: grid; gap: 18px; justify-items: start; }
.ticks2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-weight: 700; font-size: 17px; }
.ticks2 li { display: flex; gap: 10px; align-items: center; }
.ticks2 li::before { content: '✓'; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--white); border: var(--line-2); display: grid; place-items: center; font-weight: 800; }
.faq-h { margin-top: clamp(48px, 6vw, 80px); }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border: var(--line); border-radius: 18px; padding: 0 18px; box-shadow: 0 4px 0 var(--ink); }
.faq summary { cursor: pointer; padding: 16px 0; font: 800 19px/1.2 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 16px; font-weight: 600; color: var(--ink-2); }

/* band */
.band { padding: clamp(40px, 6vw, 70px) 0; background: var(--mint); border-top: var(--line); border-bottom: var(--line); }
.band-in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.band-pip { width: 120px; }
.band h2 { margin: 0 0 6px; font-size: clamp(28px, 3.4vw, 42px); }
.foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 26px; font-weight: 600; font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .top { height: 58px; }
  .hide-s { display: none; }
  .hero { padding-top: 58px; }
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .scene { order: -1; height: 360px; }
  .isl.big { width: min(290px, 74%); margin-left: max(-145px, -37%); bottom: 4%; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 46px); }
  .hero .sub { font-size: 16px; }
  .cta, .cta .btn { width: 100%; }
  .cta .btn { white-space: normal; text-align: center; line-height: 1.15; padding: 10px 18px; }
  .two, .price-in, .steps { grid-template-columns: 1fr; }
  .steps { gap: 26px; }
  .isles { grid-template-columns: 1fr; }
  .price-right .btn { width: 100%; }
  .band-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .band-in .btn { width: 100%; }
  .grow-label { font-size: 14px; }
  .glitch-peek { width: 70px; }
}