body{margin:0;font-family:'Nunito',ui-rounded,system-ui,sans-serif;color:#1F1838;background:#FFFFFF}
a{color:#5429AE;text-decoration:none}a:hover{color:#3E1F85}
button{font:inherit;cursor:pointer}
.press{transition:transform 90ms ease-out, box-shadow 90ms ease-out}
.press:active{transform:translateY(4px);box-shadow:none !important}
.lift{transition:transform 120ms ease-out}
.lift:hover{transform:translateY(-2px)}
@keyframes kipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.kip-bob{animation:kipBob 3.2s ease-in-out infinite}
@keyframes kipBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(0.08)}}
.kip-blink{animation:kipBlink 4.8s infinite}
@keyframes kipWave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-16deg)}70%{transform:rotate(10deg)}}
.kip-wave{animation:kipWave 1.5s ease-in-out infinite}
@keyframes kipSprout{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
.kip-sprout{animation:kipSprout 3.6s ease-in-out infinite}
@keyframes kipZzz{0%{opacity:0;transform:translate(0,8px)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-16px)}}
.kip-zzz{animation:kipZzz 2.8s ease-in-out infinite}
@keyframes kipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.kip-float{animation:kipFloat 2.6s ease-in-out infinite}
@keyframes kipJump{0%,100%{transform:translateY(0) scale(1,1)}28%{transform:translateY(-22px) scale(0.95,1.05)}52%{transform:translateY(0) scale(1.07,0.93)}66%{transform:translateY(0) scale(1,1)}}
.kip-jump{animation:kipJump 1.3s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes pulseRing{0%{transform:scale(0.9);opacity:0.7}100%{transform:scale(1.35);opacity:0}}
.pulse-ring{animation:pulseRing 1.8s ease-out infinite}
@keyframes confettiFall{0%{transform:translateY(-60px) rotate(0deg)}100%{transform:translateY(900px) rotate(620deg)}}
.confetti{animation:confettiFall 3.4s linear infinite}
@keyframes shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
.shine{animation:shine 2.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0.25}50%{opacity:1}}
.twinkle{animation:twinkle 2.4s ease-in-out infinite}
@keyframes fillBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.fill-bar{animation:fillBar 1.2s cubic-bezier(.2,.8,.2,1) both;transform-origin:left center}
@media (prefers-reduced-motion: reduce){.kip-bob,.kip-blink,.kip-wave,.kip-sprout,.kip-zzz,.kip-float,.kip-jump,.pulse-ring,.confetti,.shine,.twinkle,.fill-bar{animation:none}}

@keyframes enterUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
@keyframes enterRight{0%{opacity:0;transform:translateX(32px)}100%{opacity:1;transform:none}}
@keyframes enterLeft{0%{opacity:0;transform:translateX(-32px)}100%{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(0.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes sheetUp{0%{transform:translateY(100%)}100%{transform:none}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-14px) scale(0.97,1.03)}65%{transform:translateY(0) scale(1.04,0.96)}}
@keyframes shimmer{0%{background-position:-240px 0}100%{background-position:240px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes countPulse{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.enter-up{animation:enterUp 400ms cubic-bezier(.05,.7,.1,1) both}
.enter-right{animation:enterRight 320ms cubic-bezier(.2,0,0,1) both}
.enter-left{animation:enterLeft 320ms cubic-bezier(.2,0,0,1) both}
.pop{animation:pop 420ms cubic-bezier(.34,1.56,.64,1) both}
.sheet-up{animation:sheetUp 400ms cubic-bezier(.05,.7,.1,1) both}
.fade-in{animation:fadeIn 250ms ease-out both}
.shake{animation:shake 420ms cubic-bezier(.36,.07,.19,.97) both}
.hop{animation:hop 700ms cubic-bezier(.3,.7,.4,1) both}
.shimmer{background:linear-gradient(90deg,#EFEDF6 0,#F8F7FC 50%,#EFEDF6 100%);background-size:480px 100%;animation:shimmer 1.4s linear infinite}
.spin{animation:spin 900ms linear infinite}
@media (prefers-reduced-motion: reduce){.enter-up,.enter-right,.enter-left,.pop,.sheet-up,.fade-in,.shake,.hop,.shimmer,.spin{animation:none}}

:root{--grape50:#F5F1FF;--grape100:#ECE4FF;--grape200:#D8C9FF;--grape300:#BBA2FA;--grape400:#9C74F2;--grape500:#8250E6;--grape600:#6A3CCB;--grape700:#5429AE;--grape800:#3E1F85;--grape900:#2A1660;--leaf50:#EEFBEF;--leaf100:#D6F5DA;--leaf300:#8FE09A;--leaf500:#3DB94F;--leaf600:#2E9A3F;--leaf700:#1F7A30;--sun50:#FFF9E6;--sun100:#FFF0C2;--sun300:#FFDC7A;--sun500:#FFC53D;--sun600:#E0A21A;--sun800:#7A5000;--coral50:#FFF1F1;--coral100:#FFE0E0;--coral300:#FFA3A6;--coral500:#FF5A5F;--coral600:#D93A42;--coral700:#B42A31;--sky50:#EEF8FF;--sky100:#DBF0FF;--sky300:#8FD3FF;--sky500:#2CA6F4;--sky600:#1A88D0;--sky700:#0B6AA8;--night950:#120E2E;--night900:#1B1540;--night800:#251D57;--night700:#33297A;--night300:#A99BEA;--moon:#FFD76A;--cream:#FFF1D6;--blush:#FF8DAA;--ink900:#1F1838;--ink700:#4A4368;--ink500:#645D82;--ink400:#948DAE;--ink300:#C5C0D8;--ink200:#E2DEEE;--ink100:#EFEDF6;--ink50:#F8F7FC;--white:#FFFFFF;--paper:#F7F5FE;--fd:'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;--fb:'Nunito', ui-rounded, system-ui, sans-serif;--wrap:1120px;--gut:20px;--hdr:72px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-settle:cubic-bezier(.2,.9,.3,1.1);--ease-out:cubic-bezier(.2,0,0,1);
  --ease-emph:cubic-bezier(.05,.7,.1,1);--ease-in:cubic-bezier(.3,0,1,1);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink900);font-family:var(--fb);font-weight:600;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--grape700);text-decoration:none}
a:hover{color:var(--grape800)}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;text-wrap:balance;color:var(--ink900)}
:focus-visible{outline:3px solid var(--grape400);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--grape700);color:#fff;padding:10px 16px;border-radius:12px;font-weight:800}
.skip:focus{top:12px;color:#fff}

/* ---------------------------------------------------------------- buttons (the app's: a 4 px lip that presses down) */
.btn{--bg:var(--grape500);--fg:#fff;--lip:var(--grape600);--bd:transparent;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;height:56px;padding:0 26px;border-radius:16px;border:2px solid var(--bd);background:var(--bg);color:var(--fg);
  box-shadow:0 4px 0 var(--lip);font-family:var(--fb);font-weight:800;font-size:17px;letter-spacing:.01em;white-space:nowrap;
  cursor:pointer;transition:transform 90ms ease-out,box-shadow 90ms ease-out,filter 150ms var(--ease-out);text-decoration:none}
.btn:hover{color:var(--fg);filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
.btn svg{flex-shrink:0}
.btn-outline{--bg:#fff;--fg:var(--grape700);--lip:var(--ink200);--bd:var(--ink200)}
.btn-outline:hover{filter:none;background:var(--grape50)}
.btn-sun{--bg:var(--sun500);--fg:var(--ink900);--lip:var(--sun600)}
.btn-white{--bg:#fff;--fg:var(--grape700);--lip:rgba(31,24,56,.22)}
.btn-moon{--bg:var(--moon);--fg:var(--night950);--lip:#B98F2A}
.btn-sm{height:44px;padding:0 18px;border-radius:14px;font-size:15px}
.btn-block{width:100%}

/* the Google Play badge, drawn to Google's layout: black, rounded, the four-colour mark, two lines of text */
.gplay{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 14px;border-radius:12px;background:#0B0B0F;
  color:#fff;border:1.5px solid #A6A6A6;text-decoration:none;transition:transform 120ms var(--ease-out)}
.gplay:hover{color:#fff;transform:translateY(-2px)}
.gplay b{display:block;font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.06em;line-height:1;text-transform:uppercase}
.gplay span{display:block;font-family:var(--fb);font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.01em}

.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:900;
  letter-spacing:.02em;white-space:nowrap;background:var(--grape100);color:var(--grape700)}
.chip-premium{background:var(--sun500);color:var(--ink900);box-shadow:0 3px 0 var(--sun600)}
.chip-free{background:var(--leaf100);color:var(--leaf700)}
.chip-new{background:var(--sky100);color:var(--sky700)}
.chip-soon{background:var(--ink100);color:var(--ink500)}
.chip-night{background:rgba(255,255,255,.1);color:var(--moon)}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--hdr);background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid transparent;
  transition:transform 130ms var(--ease-out),border-color 150ms linear}
.hdr.lined{border-bottom-color:var(--ink100)}
.hdr.away{transform:translateY(calc(-100% - 4px));transition:transform 100ms var(--ease-in)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink900);font-family:var(--fd);font-weight:600;font-size:25px;
  letter-spacing:-.005em;white-space:nowrap}
.logo:hover{color:var(--ink900)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:12px;color:var(--ink700);font-weight:800;font-size:15px}
.nav a:hover{background:var(--grape50);color:var(--grape700)}
.nav a[aria-current="page"]{color:var(--grape700);background:var(--grape50)}
.hdr-cta{display:flex;align-items:center;width:0;overflow:visible;opacity:0;transform:translateY(6px) scale(.96);pointer-events:none;
  transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out),width 150ms var(--ease-out)}
.hdr.cta .hdr-cta{width:auto;opacity:1;transform:none;pointer-events:auto}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:2px solid var(--ink200);background:#fff;
  box-shadow:0 3px 0 var(--ink200);align-items:center;justify-content:center;cursor:pointer;color:var(--ink700)}
.menu{display:none}
@media (max-width: 920px){
  .nav{display:none}.menu-btn{display:inline-flex}.hdr .wrap{gap:12px}.hdr-cta{display:none}
  .menu{position:fixed;left:12px;right:12px;top:calc(var(--hdr) + 8px + env(safe-area-inset-top,0px));z-index:49;background:#fff;
    border:2px solid var(--ink200);box-shadow:0 6px 0 var(--ink200),0 24px 60px rgba(31,24,56,.18);border-radius:24px;padding:10px;
    flex-direction:column;gap:2px}
  .menu.open{display:flex;animation:menuIn 180ms var(--ease-emph) both}
  .menu a{height:52px;display:flex;align-items:center;padding:0 16px;border-radius:14px;color:var(--ink900);font-weight:800}
  .menu a:hover,.menu a[aria-current="page"]{background:var(--grape50);color:var(--grape700)}
  .menu .btn{margin-top:8px}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:96px}
.sec-tight{padding-block:64px}
.paper{background:var(--paper)}
.eyebrow{font-family:var(--fb);font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grape600)}
.lede{font-size:19px;line-height:1.6;color:var(--ink700);max-width:36em}
.big{font-size:clamp(40px,5.6vw,64px);line-height:1.04;letter-spacing:-.015em}
.h2{font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.012em}
.h3{font-size:24px;line-height:1.2}
.accent{color:var(--grape500)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* hero */
.hero{padding-block:80px 112px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:96px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px;align-items:flex-start;order:2}
.hero-copy .lede{margin-bottom:12px}
.hero-art{order:1}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink700);font-weight:800;font-size:15px;padding:0;margin:0;list-style:none}
.ticks li{display:inline-flex;align-items:center;gap:7px}
@media (max-width: 960px){.hero{padding-block:48px 72px}.hero .wrap{grid-template-columns:1fr;gap:40px}.hero-copy{order:1;align-items:center;text-align:center}
  .hero-ctas,.ticks{justify-content:center}.hero-art{order:2}}

/* the rules strip under the hero (Duolingo's course strip) */
.strip{border-block:2px solid var(--ink100);background:#fff}
.strip .wrap{display:flex;align-items:center;gap:8px;height:84px}
.strip-track{flex:1;display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px;
  mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.strip-track::-webkit-scrollbar{display:none}
.strip-item{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 8px;border-radius:16px;white-space:nowrap;
  color:var(--ink700);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.strip-item:hover{background:var(--grape50);color:var(--grape700)}
.strip-arrow{width:40px;height:40px;border-radius:12px;border:none;background:transparent;color:var(--ink400);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.strip-arrow:hover{background:var(--grape50);color:var(--grape700)}

/* feature rows: words on one side, the scene on the other, swapping every row */
.feat{padding-block:112px}
.feat + .feat{padding-top:48px}
.feat .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:96px;align-items:center}
.feat.flip .wrap{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.feat-copy{display:flex;flex-direction:column;gap:24px;max-width:30em}
.feat-copy .h2{color:var(--grape500)}
.feat.flip .feat-copy{order:2}
.feat-list{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:16px}
.feat-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink700);font-size:16px;line-height:1.5}
.feat-list li svg{margin-top:2px}
.feat-list strong{color:var(--ink900);font-weight:900}
.feat-more{font-weight:900;display:inline-flex;align-items:center;gap:6px;margin-top:4px}
@media (max-width: 1100px){.feat .wrap{grid-template-columns:minmax(0,1fr) minmax(0,468px);gap:64px}
  .feat.flip .wrap{grid-template-columns:minmax(0,468px) minmax(0,1fr)}}
@media (max-width: 960px){.feat{padding-block:72px}.feat + .feat{padding-top:24px}
  .feat .wrap,.feat.flip .wrap{grid-template-columns:1fr;gap:36px}.feat.flip .feat-copy{order:0}
  .feat-copy{max-width:none}}

/* ---------------------------------------------------------------- scenes (the drawings that act on screen) */
.scene{position:relative;width:100%;display:flex;justify-content:center}
.stage{position:relative;width:520px;height:480px;flex-shrink:0}
.stage > *{position:absolute}
.stage-hero{width:540px;height:610px}
@media (max-width: 1100px){.stage{zoom:.9}}
@media (min-width: 961px) and (max-width: 1100px){.hero .wrap{grid-template-columns:minmax(0,486px) minmax(0,1fr);gap:56px}}
@media (max-width: 600px){.stage{zoom:.7}.stage-hero{zoom:.64}}
@media (max-width: 400px){.stage{zoom:.62}.stage-hero{zoom:.57}}
.scene.off *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){.scene *{animation:none !important;transition:none !important}}
.halo{border-radius:999px}
.float{animation:floaty 3.2s ease-in-out infinite}
.float.d1{animation-duration:2.8s;animation-delay:-.6s}.float.d2{animation-duration:3.6s;animation-delay:-1.3s}
.float.d3{animation-duration:3s;animation-delay:-2s}.float.d4{animation-duration:3.4s;animation-delay:-.2s}
.float.d5{animation-duration:2.6s;animation-delay:-1.7s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-9px) rotate(calc(var(--r,0deg) + 3deg))}}
.twinkle-a{animation:tw 2.4s ease-in-out infinite}.twinkle-b{animation:tw 3.1s ease-in-out -1s infinite}
@keyframes tw{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.kip-bob{animation:kipBob 3.2s ease-in-out infinite}
@keyframes kipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.kip-blink{animation:kipBlink 4.8s infinite}
@keyframes kipBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.kip-wave{animation:kipWave 1.5s ease-in-out infinite}
@keyframes kipWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}70%{transform:rotate(10deg)}}
.kip-sprout{animation:kipSprout 3.6s ease-in-out infinite}
@keyframes kipSprout{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
.kip-zzz{animation:kipZzz 2.8s ease-in-out infinite}
@keyframes kipZzz{0%{opacity:0;transform:translate(0,8px)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-16px)}}
.burst{width:120px;height:120px;border-radius:999px;border:5px dashed var(--grape300);opacity:0;pointer-events:none}
@keyframes burst{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.5)}}

/* the soft band with phones floating in it (Duolingo's "learn anytime"): the header steps aside over it */
.band{position:relative;overflow:hidden}
.band-sky{background:linear-gradient(180deg,#FFFFFF 0,var(--grape50) 120px,var(--grape100) 100%)}
.band-night{background:var(--night950);color:#fff}
.band-night h2,.band-night h3{color:#fff}

/* cards */
.card{background:#fff;border:2px solid var(--ink200);box-shadow:0 4px 0 var(--ink200);border-radius:24px;padding:24px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:2px solid var(--ink200);box-shadow:0 4px 0 var(--ink200);border-radius:20px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  font-family:var(--fd);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform 200ms var(--ease-out);flex-shrink:0}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{padding:0 22px 20px;color:var(--ink700);display:flex;flex-direction:column;gap:10px}

/* the last call: Kip on a grape hill that becomes the footer */
.finale{position:relative;padding-top:88px;background:#fff;overflow:hidden}
.finale .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}

/* footer */
.foot{background:var(--grape500);color:#fff;padding-block:64px 40px;position:relative}
.foot a{color:#fff;opacity:.92;font-weight:700}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot h4{font-family:var(--fb);font-weight:900;font-size:15px;color:#fff;margin-bottom:12px;letter-spacing:.01em}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot-base{margin-top:48px;padding-top:24px;border-top:2px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:12px 24px;
  justify-content:space-between;font-size:14px;color:rgba(255,255,255,.86)}
@media (max-width: 860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 520px){.foot-grid{grid-template-columns:1fr}}

/* page heads on the inner pages */
.phead{padding-block:56px 40px;background:linear-gradient(180deg,var(--grape50),#fff)}
.phead .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.phead p{margin-top:14px}
@media (max-width: 760px){.phead .wrap{grid-template-columns:1fr}.phead-art{display:none}}

/* legal text */
.legal{max-width:780px;margin-inline:auto;padding-block:16px 96px;color:var(--ink700);font-size:16.5px;line-height:1.7}
.legal h2{font-size:26px;margin:44px 0 12px;color:var(--ink900);scroll-margin-top:96px}
.legal h3{font-family:var(--fb);font-weight:900;font-size:17px;margin:24px 0 8px;color:var(--ink900)}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:10px 0}
.legal li{margin:6px 0}
.legal strong{color:var(--ink900);font-weight:800}
.legal .meta{font-weight:800;color:var(--ink500)}
.toc{background:var(--paper);border:2px solid var(--ink100);border-radius:20px;padding:18px 22px;margin:24px 0 8px}
.toc ol{margin:8px 0 0;padding-left:22px;columns:2;column-gap:32px;font-weight:800;font-size:15px}
.toc li{margin:4px 0;break-inside:avoid}
@media (max-width: 640px){.toc ol{columns:1}}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;margin:14px 0}
.tbl-wrap{overflow-x:auto;border:2px solid var(--ink200);border-radius:18px;margin:14px 0}
.tbl-wrap .tbl{margin:0}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:2px solid var(--ink100)}
.tbl tr:last-child td{border-bottom:none}
.tbl th{background:var(--paper);color:var(--ink900);font-weight:900;font-size:14px}
.tbl th:first-child,.tbl td:first-child{min-width:150px;width:26%}
.tbl td{color:var(--ink700)}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--sky50);border:2px solid var(--sky100);color:var(--ink700);
  border-radius:18px;padding:14px 16px;margin:16px 0;font-size:15.5px}
.note.warm{background:var(--sun50);border-color:var(--sun100)}
.note.green{background:var(--leaf50);border-color:var(--leaf100)}
.note svg{flex-shrink:0;margin-top:2px}

/* SPA pages */
[data-page]{display:block}
.spa [data-page]:not(.on){display:none}

.kipw{will-change:transform}
.kipw > div{width:100%;height:100%}
/* hero: Kip idles (bob, blink, sprout); the fact under him floats */
.h-pill{animation:floaty 3.4s ease-in-out -1s infinite}

/* apps: TikTok flies at the phone, Kip slides out from behind it palm first, TikTok bounces off and waits, locked */
.a-tik-in{position:relative}
.sc-apps .a-tik{transform:rotate(8deg);animation:aWait 3.6s ease-in-out 3s infinite}
@keyframes aWait{0%,70%,100%{transform:rotate(8deg)}78%{transform:translateX(-10px) rotate(-4deg)}86%{transform:translateX(4px) rotate(10deg)}}
.sc-apps.armed .a-tik{transform:translate(60px,-150px) rotate(-10deg)}
.sc-apps.armed .a-kip{transform:translateX(-120px)}
.sc-apps.armed .a-lock,.sc-apps.armed .a-note{transform:scale(0)}
.sc-apps.play .a-tik{animation:aTik 1.2s cubic-bezier(.3,.7,.3,1) both,aWait 3.6s ease-in-out 3.2s infinite}
@keyframes aTik{0%{transform:translate(60px,-150px) rotate(-10deg)}10%{transform:translate(70px,-158px) rotate(-14deg)}
  35%{transform:translate(-6px,-112px) rotate(-4deg) scale(1.1,.9)}42%{transform:translate(-12px,-108px) rotate(0) scale(.84,1.12)}
  65%{transform:translate(30px,-60px) rotate(16deg)}85%{transform:translate(0,6px) rotate(6deg) scale(1.06,.94)}100%{transform:rotate(8deg)}}
.sc-apps.play .a-kip{animation:aKip .45s var(--ease-pop) .12s both}
@keyframes aKip{0%{transform:translateX(-120px)}70%{transform:translateX(12px) rotate(4deg)}100%{transform:none}}
.sc-apps.play .a-burst{animation:burst .5s ease-out .48s both}
.sc-apps.play .a-lock{animation:pop .42s var(--ease-pop) 1.05s both}
.sc-apps.play .a-note{animation:pop .46s var(--ease-pop) 1.3s both}
.a-note{transform-origin:20% 50%}

/* web */
.w-cover{clip-path:inset(0 0 0 0)}
.sc-web.armed .w-cover{clip-path:inset(0 0 100% 0)}
.sc-web.armed .w-kip{transform:scale(0)}
.sc-web.armed .w-chip-in{transform:scale(0)}
.sc-web .w-bubble{opacity:0}
.sc-web.armed .w-bubble{opacity:1;transform:translate(70px,-40px) scale(.3)}
.sc-web.play .w-bubble{animation:wBub .62s cubic-bezier(.2,.8,.3,1) both}
@keyframes wBub{0%{opacity:1;transform:translate(70px,-40px) scale(.3)}80%{opacity:1;transform:translate(0,0) scale(1.15)}
  100%{opacity:0;transform:scale(1.4)}}
.sc-web.play .w-burst{animation:burst .55s ease-out .55s both}
.w-kip{transform-origin:50% 80%}
.sc-web.play .w-kip{animation:wKip .5s var(--ease-pop) .58s both}
@keyframes wKip{0%{transform:scale(0)}65%{transform:scale(1.08,.94)}100%{transform:none}}
.sc-web.play .w-cover{animation:wWipe .55s var(--ease-emph) .82s both}
@keyframes wWipe{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
.sc-web.play .w-chip-in{animation:pop .42s var(--ease-pop) both}

/* shorts */
.feed{animation:feed 7.5s cubic-bezier(.7,0,.3,1) infinite}
@keyframes feed{0%,14%{transform:translateY(0)}20%,34%{transform:translateY(-844px)}40%,54%{transform:translateY(-1688px)}
  60%,74%{transform:translateY(-2532px)}80%,94%{transform:translateY(-3376px)}100%{transform:translateY(-4220px)}}
.s-cover{clip-path:inset(0 0 0 0)}
.s-track{background:var(--leaf500)}.s-knob{transform:translateX(24px)}
.sc-shorts.armed .s-cover{clip-path:inset(100% 0 0 0)}
.sc-shorts.armed .s-track{background:var(--ink200)}.sc-shorts.armed .s-knob{transform:none}
.sc-shorts.armed .s-kip{transform:translate(150px,-210px) scale(.12) rotate(-20deg)}
.sc-shorts.play .s-kip{animation:sKip 1s cubic-bezier(.2,.75,.25,1) both}
@keyframes sKip{0%{transform:translate(150px,-210px) scale(.12) rotate(-20deg)}35%{transform:translate(90px,-150px) scale(.4) rotate(12deg)}
  62%{transform:translate(10px,-30px) scale(.86) rotate(-8deg)}80%{transform:translate(-6px,8px) scale(1.06,.94) rotate(3deg)}100%{transform:none}}
.sc-shorts.play .s-track{animation:sTrack .2s linear 1s both}
@keyframes sTrack{from{background:var(--ink200)}to{background:var(--leaf500)}}
.sc-shorts.play .s-knob{animation:sKnob .22s var(--ease-pop) 1s both}
@keyframes sKnob{from{transform:none}to{transform:translateX(24px)}}
.sc-shorts.play .s-burst{animation:burst .5s ease-out 1s both}
.sc-shorts.play .s-cover{animation:sWipe .5s var(--ease-emph) 1.18s both}
@keyframes sWipe{0%{clip-path:inset(100% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.sc-shorts:not(.armed):not(.play) .feed{animation-play-state:paused}

/* limits: Kip's note drops in, the phone's time ends kindly, Kip hops in, then the card for more time */
.l-cover{clip-path:inset(0 0 0 0)}
.sc-limits.armed .l-cover{clip-path:inset(100% 0 0 0)}
.sc-limits.armed .l-note{transform:translateY(-30px);opacity:0}
.sc-limits.armed .l-add{transform:scale(0)}
.sc-limits.armed .l-kip{transform:translateX(150px) rotate(14deg);opacity:0}
.sc-limits.play .l-note{animation:lNote .46s var(--ease-pop) both}
@keyframes lNote{0%{transform:translateY(-30px);opacity:0}100%{transform:none;opacity:1}}
.sc-limits.play .l-cover{animation:lWipe .55s var(--ease-emph) 1.1s both}
@keyframes lWipe{0%{clip-path:inset(100% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.sc-limits.play .l-kip{animation:lKip .7s cubic-bezier(.3,.7,.4,1.2) 1.25s both}
@keyframes lKip{0%{transform:translateX(150px) rotate(14deg);opacity:0}12%{opacity:1}55%{transform:translateX(-8px) translateY(-26px) rotate(-6deg)}
  80%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
.sc-limits.play .l-add{animation:pop .46s var(--ease-pop) 1.85s both}
.l-add{transform-origin:20% 50%}

/* bedtime */
.b-night{opacity:1}.b-moon{transform:none}
.b-star{position:absolute;border-radius:999px;background:#fff;animation:bStar .01s linear both,tw 2.6s ease-in-out infinite}
@keyframes bStar{from{opacity:0}to{opacity:1}}
.b-cover{opacity:1}.b-awake{opacity:0}.b-asleep{opacity:1}
.sc-bedtime.armed .b-night{opacity:0}.sc-bedtime.armed .b-moon{transform:translateY(90px);opacity:0}
.sc-bedtime.armed .b-cover{opacity:0}.sc-bedtime.armed .b-awake{opacity:1}.sc-bedtime.armed .b-asleep{opacity:0}
.sc-bedtime.armed .b-star{opacity:0;animation:none}.sc-bedtime.armed .b-chip{transform:scale(0)}
.sc-bedtime.play .b-night{animation:fadeIn 1.4s ease-in-out both}
.sc-bedtime.play .b-moon{animation:bMoon 1.3s var(--ease-emph) .3s both}
@keyframes bMoon{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}
.sc-bedtime.play .b-star{animation:bStar .3s ease-out both,tw 2.6s ease-in-out infinite}
.sc-bedtime.play .b-cover{animation:fadeIn .8s ease-in-out 1.1s both}
.sc-bedtime.play .b-awake{animation:bOut .5s ease-in 1.2s both}
@keyframes bOut{0%{opacity:1;transform:none}40%{opacity:1;transform:scale(1.04,.96)}100%{opacity:0;transform:scale(1,.98)}}
.sc-bedtime.play .b-asleep{animation:fadeIn .5s ease-out 1.25s both}
.sc-bedtime.play .b-chip{animation:pop .42s var(--ease-pop) 1.8s both}
.b-chip{transform-origin:20% 50%}

/* guard */
.g-tap{opacity:0}
.g-over .g-scrim{opacity:1}.g-over .g-pop{transform:none}
.sc-guard.armed .g-scrim{opacity:0}.sc-guard.armed .g-pop{transform:translateY(110%)}
.sc-guard.armed .g-kip{transform:translateY(60px) scale(.5);opacity:0}.sc-guard.armed .g-chip{transform:scale(0)}
.sc-guard.play .g-tap{animation:gTap .5s ease-out .15s both}
@keyframes gTap{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
.sc-guard.play .g-scrim{animation:fadeIn .25s ease-out .5s both}
.sc-guard.play .g-pop{animation:gPop .55s cubic-bezier(.2,.9,.3,1.12) .55s both}
@keyframes gPop{from{transform:translateY(110%)}to{transform:none}}
.sc-guard.play .g-kip{animation:gKip .5s var(--ease-pop) .85s both}
@keyframes gKip{from{transform:translateY(60px) scale(.5);opacity:0}to{transform:none;opacity:1}}
.sc-guard.play .g-chip{animation:pop .46s var(--ease-pop) 1.1s both}
.g-chip{transform-origin:0 50%}

/* Kip's kind screens: a spotlight walks along the row, lifting one phone and filling its label */
.kind-row{list-style:none;margin:0;display:flex;justify-content:center;align-items:flex-end;gap:44px;padding:56px var(--gut) 96px}
.kind{display:flex;flex-direction:column;align-items:center;gap:22px;flex-shrink:0}
.kind .phone{position:relative;animation:kindLift 10s var(--ease-settle) infinite;animation-delay:calc(var(--i) * 2.5s)}
@keyframes kindLift{0%,27%,100%{transform:none}5%,22%{transform:translateY(-22px)}}
.kind-cap{height:40px;padding:0 16px;border-radius:999px;border:2px solid var(--grape200);background:#fff;color:var(--grape700);
  display:inline-flex;align-items:center;font-weight:900;font-size:14px;white-space:nowrap;
  animation:kindCap 10s ease infinite;animation-delay:calc(var(--i) * 2.5s)}
@keyframes kindCap{0%,27%,100%{background:#fff;color:var(--grape700);border-color:var(--grape200)}
  5%,22%{background:var(--grape500);color:#fff;border-color:var(--grape500)}}
@media (max-width: 960px){.kind-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:28px;
  padding-inline:calc(50% - 98px);scrollbar-width:none}.kind-row::-webkit-scrollbar{display:none}.kind{scroll-snap-align:center}}
@media (prefers-reduced-motion: reduce){.kind .phone,.kind-cap{animation:none}}

/* premium: a gold crown floats down onto Kip; he cheers; the crown hovers */
.stage-premium{width:480px;height:440px}
.sc-premium .pr-glow{animation:tw 3s ease-in-out infinite}
.pr-crown{animation:prHover 3.2s ease-in-out infinite}
@keyframes prHover{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.sc-premium.armed .pr-crown{transform:translateY(-170px) rotate(-30deg);opacity:0}
.sc-premium.play .pr-crown{animation:prDrop .9s cubic-bezier(.3,.8,.35,1.15) both,prHover 3.2s ease-in-out .9s infinite}
@keyframes prDrop{0%{transform:translateY(-170px) rotate(-30deg);opacity:0}25%{opacity:1}70%{transform:translateY(8px) rotate(4deg) scale(1.08,.9)}
  100%{transform:translateY(0) rotate(-4deg)}}
.sc-premium.play .pr-burst{animation:burst .6s ease-out .62s both}
.pr-kip{transform-origin:50% 100%}
.sc-premium.play .pr-kip{animation:prCheer .5s var(--ease-pop) .62s both}
@keyframes prCheer{0%{transform:none}40%{transform:scale(1.05,.95)}70%{transform:translateY(-10px)}100%{transform:none}}
@media (max-width: 600px){.stage-premium{zoom:.72}}

/* finale: Kip comes up from behind the hill and waves */
.sc-finale{position:relative;display:block;width:100%;height:400px;margin-top:28px;overflow:hidden}
.f-hill{position:absolute;left:0;bottom:-2px;width:100%;height:260px}
.f-stage{position:absolute;left:50%;top:34px;width:230px;height:230px;margin-left:-115px}
.f-stage > *{position:absolute}
.sc-finale.armed .f-kip{transform:translateY(210px)}
.sc-finale.play .f-kip{animation:fRise .75s var(--ease-pop) both}
@keyframes fRise{0%{transform:translateY(210px)}70%{transform:translateY(-10px)}100%{transform:none}}
@media (max-width: 700px){.sc-finale{height:340px}.f-hill{height:220px}.f-stage{top:8px}}

.prem-word{display:flex;align-items:center;gap:14px;font-family:var(--fd);font-weight:700;font-size:clamp(56px,7vw,84px);line-height:1;
  letter-spacing:-.02em;background:linear-gradient(100deg,#FFE08A 0%,#FFC53D 45%,#F5A524 75%,#FFD76A 100%);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.band-night .prem-word{color:transparent;-webkit-text-fill-color:transparent}
.prem-word svg{flex-shrink:0;-webkit-text-fill-color:initial}
@media (max-width: 900px){#prem-grid{grid-template-columns:1fr !important}.promise-head{grid-template-columns:1fr !important}}
@media (max-width: 640px){.cta-card{grid-template-columns:1fr !important;justify-items:center;text-align:center}
  #contact-card{grid-template-columns:1fr !important;justify-items:center;text-align:center}
  #prem-grid ul{grid-template-columns:1fr !important}}