/* Dilly site styles. Colors, radii and lips come from tokens.css (which names the app file each one is copied from). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--paragraph);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

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

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.35rem, 7.4vw, 4.1rem);
  line-height: 1.08;
}
h2 {
  font-size: clamp(1.85rem, 5vw, 2.7rem);
  line-height: 1.15;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

p {
  margin: 0;
}

a {
  color: var(--nav-active);
  font-weight: 700;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--nav-active);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 16px;
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Raised look (components/RaisedButton.tsx): a face over a darker edge ---------- */

.btn {
  --face: var(--ws-mint);
  --edge: var(--ws-mint-lip);
  --ink-on: var(--ws-mint-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  margin-bottom: var(--lip-button);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--face);
  color: var(--ink-on);
  font: 700 19px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--lip-button) 0 var(--edge);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: translateY(var(--lip-button));
  box-shadow: 0 0 0 var(--edge);
}
.btn--purple {
  --face: var(--ws-purple);
  --edge: var(--ws-purple-lip);
  --ink-on: var(--ws-piece-ink);
}
.btn--soft {
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  --ink-on: var(--ws-soft-ink);
}
.btn--small {
  min-height: 46px;
  padding: 0 20px;
  font-size: 16px;
  border-radius: 22px;
  --lip-button: 3px;
}

/* A raised surface that does nothing: same look, never moves */
.raised {
  --face: var(--ws-card);
  --edge: var(--ws-card-lip);
  background: var(--face);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--lip-card) 0 var(--edge);
  margin-bottom: var(--lip-card);
}

.soon {
  --face: #fff;
  --edge: var(--lip);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 12px;
  margin-bottom: var(--lip-button);
  border-radius: var(--radius-button);
  background: var(--face);
  box-shadow: 0 var(--lip-button) 0 var(--edge);
  color: var(--ink);
  text-align: left;
  line-height: 1.2;
  cursor: default;
}
.soon img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.soon small {
  display: block;
  color: var(--eyebrow);
  font-size: 13px;
  font-weight: 600;
}
.soon strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--page);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand img {
  height: 42px;
  width: auto;
}
.nav {
  display: none;
  align-items: center;
  gap: 4px;
}
.nav a {
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--eyebrow);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}
.nav a:hover {
  color: var(--nav-active);
}
.nav a[aria-current="page"] {
  color: var(--nav-active);
  background: var(--nav-active-pill);
}
.menu-btn {
  display: none;
  min-height: 46px;
  --lip-button: 3px;
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  --ink-on: var(--ws-soft-ink);
  padding: 0 20px;
  font-size: 16px;
  border-radius: 22px;
}
/* With JavaScript the button opens the menu; without it the same label jumps to the site map in the footer */
.js .menu-btn:not(.menu-nojs) {
  display: inline-flex;
}
html:not(.js) .menu-nojs {
  display: inline-flex;
}

@media (min-width: 980px) {
  .nav {
    display: flex;
  }
  .menu-btn,
  .menu-nojs,
  .mnav {
    display: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Mobile menu: a full-screen overlay (dialog), opened by nav.js ---------- */

html.mnav-open,
html.mnav-open body {
  overflow: hidden;
}
.mnav {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--menu-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 240ms ease-out, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mnav[hidden] {
  display: none;
}
.mnav.is-open {
  opacity: 1;
  transform: none;
}
.mnav-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding: 12px var(--gutter);
}
.mnav-close {
  --lip-button: 4px;
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  --ink-on: var(--ws-soft-ink);
  width: 60px;
  height: 60px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  flex: none;
}
.mnav-nav {
  flex: 1 0 auto;
  display: flex;
}
.mnav-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 4px;
  margin: 0;
  padding: 4px var(--gutter) 8px;
  list-style: none;
}
.mnav-list li {
  display: flex;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 260ms ease-out, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(110ms + var(--i) * 45ms);
}
.mnav.is-open .mnav-list li {
  opacity: 1;
  transform: none;
}
.mnav-link {
  --c: var(--ink);
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 4px 22px 6px;
  border-radius: 18px;
  color: var(--c);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(34px, 11vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  -webkit-tap-highlight-color: transparent;
}
.mnav-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.mnav-link:active {
  transform: translateY(2px);
}
.mnav-home {
  --c: var(--menu-home);
}
.mnav-how {
  --c: var(--menu-how);
}
.mnav-workshop {
  --c: var(--menu-workshop);
}
.mnav-parents {
  --c: var(--menu-parents);
}
.mnav-plans {
  --c: var(--menu-plans);
}
.mnav-faq {
  --c: var(--menu-faq);
}
.mnav-contact {
  --c: var(--menu-contact);
}
/* The current page: a raised white pill, the app's raised look */
.mnav-link[aria-current="page"] {
  background: #fff;
  box-shadow: 0 5px 0 var(--cc-sunny-edge);
  margin-bottom: 5px;
}
.mnav-pip {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(190px, 30dvh, 270px);
  margin-top: 4px;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  pointer-events: none;
}
.mnav-pip img {
  height: 100%;
  width: auto;
  display: block;
  margin-bottom: -2px;
  transform: translateY(46px) scale(0.92);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 460ms cubic-bezier(0.2, 1.35, 0.4, 1), opacity 200ms ease-out;
  transition-delay: 520ms;
}
.mnav.is-open .mnav-pip img {
  transform: none;
  opacity: 1;
}
.mnav-pip img {
  flex: none;
}
/* Short screens: tighter rows and a smaller Pip; the overlay scrolls if it still does not fit */
@media (max-height: 720px) {
  .mnav-top {
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .mnav-link {
    min-height: 50px;
    font-size: clamp(30px, 9vw, 38px);
  }
  .mnav-pip {
    height: 130px;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .mnav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: space-evenly;
    gap: 4px 16px;
  }
  .mnav-link {
    min-height: 48px;
    font-size: 32px;
  }
  .mnav-pip {
    height: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mnav,
  .mnav-list li,
  .mnav-pip img {
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Hero: the brand light green ---------- */

.hero {
  background: var(--brand);
  color: var(--ink);
  border-radius: 0 0 44px 44px;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  gap: 8px;
  padding-top: 36px;
  padding-bottom: 0;
  align-items: end;
}
.hero-copy {
  padding-bottom: 28px;
}
.hero p.lede {
  margin-top: 18px;
  font-size: 1.28rem;
  color: var(--ink);
  max-width: 34ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
  margin-top: 30px;
  align-items: center;
}
.hero-art {
  position: relative;
  padding-top: 64px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 340px;
}
.bubble {
  --face: var(--ws-panel);
  position: relative;
  display: inline-block;
  max-width: 21ch;
  padding: 12px 18px;
  border-radius: var(--radius-bubble);
  border-bottom-left-radius: var(--radius-bubble-tail);
  background: var(--face);
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}
.bubble--mine {
  --face: var(--ws-sky);
  color: var(--ws-sky-ink);
  border-bottom-left-radius: var(--radius-bubble);
  border-bottom-right-radius: var(--radius-bubble-tail);
}

@media (min-width: 980px) {
  .hero .wrap {
    grid-template-columns: 1.05fr 1fr;
    padding-top: 64px;
    gap: 24px;
  }
  .hero-copy {
    padding-bottom: 72px;
  }
  .hero-art {
    min-height: 480px;
  }
}

/* ---------- Sections ---------- */

section {
  padding: 64px 0;
}
.sec-head {
  max-width: 640px;
  margin-bottom: 40px;
}
.lede {
  margin-top: 14px;
  font-size: 1.15rem;
  color: var(--paragraph);
}

/* Flat rows with a raised icon dot (the app uses flat rows, not stacks of cards) */
.rows {
  display: grid;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
}
.dot {
  --dot-face: var(--cc-lavender);
  --dot-edge: var(--cc-lavender-edge);
  width: 64px;
  height: 64px;
  margin-bottom: 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dot-face);
  box-shadow: 0 3px 0 var(--dot-edge);
}
.dot img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.dot--mint {
  --dot-face: var(--cc-mint);
  --dot-edge: var(--cc-mint-edge);
}
.dot--sky {
  --dot-face: var(--cc-sky);
  --dot-edge: var(--cc-sky-edge);
}
.dot--peach {
  --dot-face: var(--cc-peach);
  --dot-edge: var(--cc-peach-edge);
}
.dot--sunny {
  --dot-face: var(--cc-sunny);
  --dot-edge: var(--cc-sunny-edge);
}
.row h3 {
  margin-bottom: 4px;
}

.two {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .two {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
  }
  .two--flip > :first-child {
    order: 2;
  }
}

/* ---------- Companions ---------- */

.pets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .pets {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
}
@media (min-width: 1000px) {
  .pets {
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 20px;
  }
  .pet-name {
    font-size: 1.15rem;
  }
  .pet-line {
    font-size: 14.5px;
  }
}
.pet-btn {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pet-disc {
  --bg: var(--pip-bg);
  --edge: var(--pip-lip);
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 var(--lip-button) 0 var(--edge);
  margin-bottom: var(--lip-button);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.pet-btn:active .pet-disc {
  transform: translateY(var(--lip-button));
  box-shadow: 0 0 0 var(--edge);
}
.pet-disc img {
  width: 78%;
  height: 90%;
  object-fit: contain;
  object-position: bottom;
  margin-bottom: 4%;
  transition: opacity 160ms ease-out;
}
.pet-name {
  display: block;
  margin-top: 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.3rem;
}
.pet-line {
  display: block;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 600;
  color: var(--eyebrow);
}
.hint {
  margin-top: 26px;
  color: var(--eyebrow);
  font-size: 16px;
}

/* ---------- iPhone frame (one component, every mock-up uses it) ----------
   Drawn at iPhone 15/16 Pro size in logical points: screen 393 by 852, bezel 9.5, titanium band 3.5,
   so the body is 419 by 878. The frame is scaled as a whole by --k, so the shape never distorts. */

.iphone {
  --k: 0.8;
  --ti-a: #cbc9c4;
  --ti-b: #8f8d89;
  --ti-c: #e1dfda;
  --ti-d: #77756f;
  --btn: linear-gradient(90deg, #6f6d68, #bdbbb6 55%, #8d8b86);
  position: relative;
  width: calc(419px * var(--k));
  aspect-ratio: 419 / 878;
  margin: 0 auto 8px;
  flex: none;
}
.iphone--black {
  --ti-a: #4a4a4e;
  --ti-b: #26262a;
  --ti-c: #5a5a5f;
  --ti-d: #1d1d20;
  --btn: linear-gradient(90deg, #1b1b1e, #56565b 55%, #2b2b2f);
}
@media (min-width: 760px) {
  .iphone {
    --k: 0.82;
  }
}
@media (max-width: 374px) {
  .iphone {
    --k: 0.7;
  }
}
.ip-fit {
  position: absolute;
  left: 0;
  top: 0;
  width: 419px;
  height: 878px;
  transform: scale(var(--k));
  transform-origin: 0 0;
}
.ip-body {
  position: relative;
  z-index: 1;
  width: 419px;
  height: 878px;
  padding: 3.5px;
  border-radius: 68px;
  background: linear-gradient(145deg, var(--ti-a) 0%, var(--ti-c) 13%, var(--ti-b) 30%, var(--ti-a) 52%, var(--ti-d) 74%, var(--ti-c) 90%, var(--ti-a) 100%);
  box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.45), 0 34px 44px -22px rgba(6, 6, 31, 0.42), 0 12px 20px -10px rgba(6, 6, 31, 0.3);
}
.ip-bezel {
  width: 100%;
  height: 100%;
  padding: 9.5px;
  border-radius: 64.5px;
  background: #050507;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.ip-screen {
  --screen: var(--page);
  --ink-sb: #06061f;
  position: relative;
  width: 393px;
  height: 852px;
  overflow: hidden;
  border-radius: 55px;
  background: var(--screen);
  color: var(--ws-ink);
  font-size: 15px;
  line-height: 1.35;
  isolation: isolate;
}
.ip-light {
  --ink-sb: #fff;
}
.ip-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 650px;
  transform: scale(1.31);
  transform-origin: 0 0;
}
.ip-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 37px;
  color: var(--ink-sb);
  z-index: 4;
  pointer-events: none;
}
.ip-time {
  position: absolute;
  left: 0;
  width: 133px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  line-height: 1;
}
.ip-icons {
  position: absolute;
  left: 259px;
  width: 134px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ip-icons svg {
  display: block;
  flex: none;
}
.ip-island {
  position: absolute;
  left: 133.5px;
  top: 11px;
  width: 126px;
  height: 37px;
  border-radius: 18.5px;
  background: #000;
  z-index: 5;
}
.ip-island i {
  position: absolute;
  right: 17px;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1b2347 0, #0a0d1f 55%, #05060d 100%);
  box-shadow: 0 0 0 1.5px #0b0b0e;
}
.ip-home {
  position: absolute;
  left: 129.5px;
  bottom: 8px;
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: var(--ink-sb);
  z-index: 4;
  pointer-events: none;
}
.ip-sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 32%), linear-gradient(0deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0) 14%);
}
.ip-btn {
  position: absolute;
  z-index: 0;
  width: 5px;
  background: var(--btn);
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.ip-action,
.ip-vol1,
.ip-vol2 {
  left: -3.5px;
}
.ip-action {
  top: 118px;
  height: 32px;
}
.ip-vol1 {
  top: 176px;
  height: 60px;
}
.ip-vol2 {
  top: 252px;
  height: 60px;
}
.ip-power {
  right: -3.5px;
  top: 214px;
  height: 96px;
}
.sbody {
  position: absolute;
  inset: 0;
  padding: 45px 16px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  min-height: 36px;
}
.status > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ws-gold-text);
}
.status img {
  height: 24px;
  width: auto;
}
.status .streak-n {
  color: var(--streak-plate-accent);
}
.status .bat {
  color: var(--ws-ink-soft);
}
.s-title {
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ws-ink);
  padding: 0 4px;
}
.s-sub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ws-ink-muted);
  padding: 0 4px;
  margin-top: -6px;
}
.s-comp {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 4px;
}
.s-comp img {
  width: 96px;
  flex: none;
}
.s-comp .bubble {
  font-size: 14.5px;
  padding: 9px 14px;
  margin-bottom: 30px;
  box-shadow: 0 3px 0 var(--ws-panel-lip);
  border-radius: 18px;
  border-bottom-left-radius: 5px;
}

/* The jigsaw piece (components/companion/teaching/PuzzlePiece.tsx, lib/companion/teaching/puzzleGeometry.ts):
   a rounded block with a round bite in the middle of its left and right edges, drawn twice, the second a little lower for the lip. */
.shelf {
  display: flex;
  gap: 10px;
  padding: 0 2px 8px;
}
.piece {
  --face: var(--ws-panel);
  --edge: var(--ws-panel-lip);
  --ink-on: var(--ws-ink);
  --bite: radial-gradient(circle 11px at 0 36%, #0000 10.5px, #000 11px) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 36%, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 5px;
}
.piece::before,
.piece .pf {
  border-radius: 22px;
  -webkit-mask: var(--bite);
  mask: var(--bite);
}
.piece::before {
  content: "";
  position: absolute;
  inset: 5px 0 -5px 0;
  background: var(--edge);
}
.piece .pf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 12px;
  height: 100%;
  background: var(--face);
  color: var(--ink-on);
  text-align: center;
}
.piece img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  object-position: bottom;
}
.piece .pt {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
}
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--ws-mint-soft);
  box-shadow: 0 2px 0 var(--ws-mint-soft-lip);
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ws-mint-ink);
}
.piece--sky {
  --face: var(--ws-sky);
  --edge: var(--ws-sky-lip);
  --ink-on: var(--ws-sky-ink);
}
.piece--mint {
  --face: var(--ws-mint-soft);
  --edge: var(--ws-mint-soft-lip);
  --ink-on: var(--ws-mint-ink);
}
.piece--gold {
  --face: var(--ws-gold);
  --edge: var(--ws-gold-lip);
  --ink-on: var(--ws-gold-ink);
}
.dots {
  display: flex;
  gap: 5px;
}
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ws-sky-lip);
}
.dots i.on {
  background: var(--ws-purple);
}

.h-sec {
  padding: 0 4px;
}
.h-sec h4 {
  font-size: 18px;
  color: var(--ws-ink);
  line-height: 1.2;
}
.h-sec p {
  font-size: 13px;
  font-weight: 600;
  color: var(--ws-ink-muted);
}

.keep {
  --face: var(--ws-mint);
  --edge: var(--ws-mint-lip);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 24px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
  color: var(--ws-mint-ink);
}
.keep img {
  width: 54px;
  flex: none;
}
.keep .kt {
  flex: 1;
}
.keep small {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
}
.keep strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.keep .chev {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ws-mint-bubble);
  display: grid;
  place-items: center;
  flex: none;
}
.keep .bar {
  height: 8px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--ws-mint-track);
  overflow: hidden;
}
.keep .bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--ws-mint-lip);
  border-radius: 6px;
}

/* Training chat (components/companion/training/*) */
.tbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  min-height: 32px;
}
.tbar .track {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: var(--ws-mint-track);
  overflow: hidden;
}
.tbar .track i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--ws-mint-lip);
}
.tbar .bat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ws-ink-soft);
}
.tbar .bat img {
  height: 22px;
  width: auto;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.msg.me {
  justify-content: flex-end;
}
.msg img {
  width: 44px;
  flex: none;
}
.msg .bubble {
  font-size: 15px;
  padding: 9px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  max-width: 78%;
}
.msg.me .bubble {
  border-radius: 18px;
  border-bottom-right-radius: 5px;
}
.ask {
  font-weight: 700;
  font-size: 16px;
  color: var(--ws-ink);
  padding: 2px 4px;
}
.choices {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.choice {
  --face: var(--ws-card);
  --edge: var(--ws-card-lip);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 20px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ws-ink);
  line-height: 1.25;
}
.choice.on {
  --face: var(--ws-chosen);
  --edge: var(--ws-chosen-lip);
}
.choice .tick {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--ws-chosen-lip);
  display: grid;
  place-items: center;
}
.coach {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--ws-card);
  color: var(--ws-ink-soft);
  font-weight: 600;
  font-size: 14px;
}
.sendbtn {
  --face: var(--ws-mint);
  --edge: var(--ws-mint-lip);
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 24px;
  background: var(--face);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
  color: var(--ws-mint-ink);
  font-weight: 700;
  font-size: 17px;
}
.sendbtn.off {
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  color: var(--ws-soft-ink);
  opacity: 0.55;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 44px 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
.step-cap {
  max-width: 320px;
  margin: 22px auto 0;
  text-align: left;
}
.step-n {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--ws-purple);
  box-shadow: 0 3px 0 var(--ws-purple-lip);
  color: #fff;
  font-weight: 700;
}
.step-cap h3 {
  margin-bottom: 4px;
}

/* Build board (components/build/snap) */
.board {
  --face: var(--ws-card);
  padding: 14px 10px 10px;
  border-radius: var(--radius-card);
  background: var(--face);
  box-shadow: 0 4px 0 var(--ws-card-lip);
  margin-bottom: 4px;
}
.board svg {
  display: block;
  width: 100%;
  height: auto;
}
.recipe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--ws-mint-soft);
  box-shadow: 0 4px 0 var(--ws-mint-soft-lip);
  margin-bottom: 4px;
  color: var(--ws-mint-ink);
}
.recipe img {
  width: 44px;
  flex: none;
}
.recipe strong {
  display: block;
  font-size: 15.5px;
  line-height: 1.2;
}
.recipe small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

/* Rewards */
.stack {
  display: grid;
  gap: 28px;
}
.battery-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}
.battery-row img {
  width: 56px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.battery-row strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}
.battery-row span {
  color: var(--paragraph);
}
.panel-streak {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 24px 22px 16px;
  border-radius: 30px;
  background: var(--streak-screen);
  box-shadow: 0 6px 0 var(--streak-screen-lip);
  margin-bottom: 6px;
  color: var(--on-streak-screen);
}
.panel-streak .big {
  font-size: 2.6rem;
  line-height: 1.05;
  font-weight: 700;
  color: var(--on-streak-screen);
}
.panel-streak .plate {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--streak-plate);
  box-shadow: 0 4px 0 var(--streak-plate-lip);
  margin-bottom: 4px;
  color: var(--streak-plate-ink);
  font-weight: 700;
  font-size: 16px;
}
.panel-streak img {
  width: 120px;
}

.room-wrap {
  position: relative;
}

/* The Room (components/room/RoomScene.tsx, lib/room/layout.ts: every spot is a fraction of the scene) */
.room {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.25;
  background: #e2ac6f; /* floor_start, lib/theme/roomPalette.ts */
  overflow: hidden;
}
.room .wall {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 49%;
  background: #c9eedb; /* wall_start, lib/theme/roomPalette.ts */
}
.room img,
.room .pc {
  position: absolute;
}
.room img.fill {
  inset: 0;
  width: 100%;
  height: 100%;
}
.room .pc {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.room .pc img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.room .mid {
  align-items: center;
}

/* Band of lavender for grown-ups (the app's lavender panel) */
.band {
  background: var(--cc-lavender);
  border-radius: 44px;
  padding: 56px 24px;
}
@media (min-width: 720px) {
  .band {
    padding: 72px 56px;
  }
}
.band-wrap {
  padding: 0 12px;
}
@media (min-width: 720px) {
  .band-wrap {
    padding: 0 var(--gutter);
  }
}

/* Plans */
.plans {
  display: grid;
  gap: 28px;
}
@media (min-width: 820px) {
  .plans {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
.plan {
  padding: 30px 26px 26px;
}
.plan .price {
  margin: 10px 0 2px;
  color: var(--ink);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.plan .price small {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--eyebrow);
}
.plan ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.plan li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ws-ink);
  font-weight: 600;
}
.plan li img {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  justify-self: center;
}
.plan li img.bat-ic {
  width: 36px;
  height: auto;
  aspect-ratio: 200 / 125;
  margin-top: 4px;
}
.plan--core {
  --face: var(--cc-lavender);
  --edge: var(--cc-lavender-edge);
}
.plan--free {
  --face: var(--cc-soft);
  --edge: var(--cc-soft-edge);
}

.faq {
  max-width: var(--reading-max);
  display: grid;
  gap: 28px;
}
.faq h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.faq p + p {
  margin-top: 6px;
}

.list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}
.list li img {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px 40px;
}
@media (min-width: 760px) {
  .skills {
    grid-template-columns: 1fr 1fr;
  }
}
.skills li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink);
  font-weight: 600;
}
.skills li i {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--sk-edge, var(--ws-mint-soft-lip));
  box-shadow: 0 2px 0 var(--sk-edge, var(--ws-mint-soft-lip));
}

.note {
  max-width: var(--reading-max);
  color: var(--eyebrow);
  font-size: 16px;
}

.prose {
  max-width: var(--reading-max);
}
.prose p + p {
  margin-top: 14px;
}

/* ---------- Footer ---------- */

.foot {
  margin-top: 48px;
  padding: 44px 0 56px;
  background: var(--cc-soft);
  border-radius: 44px 44px 0 0;
  color: var(--paragraph);
}
.foot .wrap {
  display: grid;
  gap: 24px;
}
.foot img.fw {
  height: 38px;
  width: auto;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.foot small {
  display: block;
  font-size: 15px;
  color: var(--eyebrow);
  max-width: 60ch;
}
.foot .muted {
  color: var(--ink-soft);
  font-weight: 700;
}
@media (min-width: 820px) {
  .foot .wrap {
    grid-template-columns: minmax(200px, 220px) 1fr;
    align-items: end;
    gap: 48px;
  }
  .foot nav {
    justify-content: flex-end;
  }
}

/* ---------- Motion: modest reveal (transform and opacity only); everything shows without it ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

.ln {
  display: block;
}

.lede + .iphone,
p + .iphone {
  margin-top: 30px;
}

/* The battery is always drawn at its native proportions (200 by 125) */
img[src*="battery-"] {
  height: auto;
  aspect-ratio: 200 / 125;
  flex: none;
}
.status img[src*="battery-"] {
  height: 24px;
  width: auto;
}
.tbar .bat img[src*="battery-"] {
  height: 22px;
  width: auto;
}
.bsteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
  max-width: var(--reading-max);
}
.bstep {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
}
.bstep img {
  width: 96px;
  height: auto;
}
.bstep h3 {
  margin-bottom: 4px;
}

.rlist {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.rlist li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
}

/* ---------- Pages ---------- */

.pagehead {
  background: var(--head-bg, var(--cc-lavender));
  border-radius: 0 0 44px 44px;
  overflow: hidden;
}
.pagehead .wrap {
  display: grid;
  gap: 4px;
  align-items: end;
  padding-top: 40px;
}
.pagehead .lede {
  color: var(--ink);
  max-width: 36ch;
}
.pagehead > .wrap > div:first-child {
  padding-bottom: 28px;
}
.ph-art {
  justify-self: center;
  width: 190px;
  height: auto;
  margin-bottom: -2px;
}
@media (min-width: 760px) {
  .pagehead .wrap {
    /* two real columns: the character is centered in the right one, not pushed to the window edge */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
    padding-top: 56px;
  }
  .pagehead > .wrap > div:first-child {
    padding-bottom: 56px;
  }
  .ph-art {
    width: 260px;
    margin-bottom: 0;
  }
}

.row--pet {
  grid-template-columns: 84px 1fr;
  align-items: center;
}
.react {
  width: 84px;
  height: 84px;
  object-fit: contain;
  object-position: bottom;
}

.three {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 34px;
}
@media (min-width: 800px) {
  .three {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.three h3 {
  margin: 4px 0;
}
.step-n {
  margin-bottom: 12px;
}

.chapter .step-n {
  margin-bottom: 14px;
}

.art-stage {
  display: grid;
  justify-items: center;
}
.art-stage .pet-disc.big {
  width: min(300px, 80%);
}

.learned-can {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--ws-sky);
  box-shadow: 0 3px 0 var(--ws-sky-lip);
  margin-bottom: 3px;
}
.learned-can p {
  font-weight: 700;
  font-size: 14px;
  color: var(--ws-sky-ink);
}
.rep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rep > div {
  display: grid;
  padding: 8px 10px;
  border-radius: 16px;
  background: var(--ws-card);
  box-shadow: 0 3px 0 var(--ws-card-lip);
  margin-bottom: 3px;
}
.rep strong {
  font-size: 13px;
  color: var(--ws-ink-muted);
}
.rep span {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ws-ink);
}
.note-s {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ws-ink-muted);
  text-align: center;
}

.sbody.roomscreen {
  padding: 45px 0 0;
  gap: 0;
}
.roomscreen .status {
  padding: 0 22px;
}
.roomtitle {
  padding: 2px 18px 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ws-ink);
}
.roomscreen .room {
  flex: none;
}
.roomscreen .sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  padding: 18px 18px 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--card);
  box-shadow: 0 -4px 0 var(--hairline);
}
.sheet h4 {
  font-size: 17px;
  color: var(--ws-ink);
}
.sheet p {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ws-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .pet-disc,
  .pet-disc img {
    transition: none;
  }
}

/* =====================================================================
   VISUAL PASS: bands, characters, jigsaw cards, accordion, closing band
   ===================================================================== */

h2 {
  font-size: clamp(2rem, 5.2vw, 3rem);
}
.lede {
  max-width: 40ch;
}
.sec-head {
  margin-bottom: 44px;
}

.btn:hover {
  filter: brightness(1.04);
}
.btn--soft:hover {
  filter: brightness(0.98);
}

/* Header gets a lip line once the page scrolls (the app's raised edge) */
.top {
  transition: box-shadow 160ms ease-out;
}
.top.lifted {
  box-shadow: 0 3px 0 var(--hairline);
}
.nav a {
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.nav a:hover {
  background: var(--card-recessed);
}
.nav a[aria-current="page"]:hover {
  background: var(--nav-active-pill);
}

/* Soft bands in the app's own tints */
.bandsec {
  padding: 76px 0;
  border-radius: 44px;
  margin: 14px 0;
}
.bandsec--lav {
  background: var(--cc-lavender);
}
.bandsec--sky {
  background: var(--cc-sky);
}
.bandsec--mint {
  background: var(--cc-mint);
}
.bandsec--sunny {
  background: var(--cc-sunny);
}
.bandsec--peach {
  background: var(--cc-peach);
}
.bandsec--soft {
  background: var(--cc-soft);
}
.bandsec .lede,
.bandsec p {
  color: var(--ws-ink-soft);
}
.bandsec h2,
.bandsec h3 {
  color: var(--ink);
}
.bandsec .lede {
  color: var(--paragraph);
}

/* A character standing on a soft ground (the app's disc, seen from the side) */
.stand {
  --ground: var(--pip-bg);
  --ground-lip: var(--pip-lip);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.stand::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 36px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 5px 0 var(--ground-lip);
  z-index: 0;
}
.stand img {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}
.stand--lg img {
  width: min(78%, 360px);
}
.hero-art.cast-art {
  min-height: 0;
  padding-top: 76px;
}
.hero-art .stand {
  width: 100%;
  --ground: var(--brand-soft);
  --ground-lip: var(--brand-soft-lip);
}
.hero-art .stand::after {
  height: 40px;
  bottom: 2px;
}

/* Page heads with a standing character */
.pagehead .wrap {
  align-items: end;
  padding-top: 44px;
}
.pagehead h1 {
  max-width: 14ch;
}
.pagehead .lede {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 1.22rem;
}
.pagehead .btn {
  margin-top: 26px;
}
.pagehead .stand {
  width: min(300px, 80vw);
  justify-self: center;
  --ground: rgba(255, 255, 255, 0.7);
  --ground-lip: rgba(6, 6, 31, 0.12);
}
.pagehead .stand img {
  width: 76%;
  margin-bottom: 16px;
}
@media (min-width: 760px) {
  .pagehead .stand {
    width: min(380px, 100%);
  }
  .pagehead > .wrap > div:first-child {
    padding-bottom: 72px;
  }
  .pagehead h1 {
    font-size: 4rem;
  }
}

/* Teacher rows: a two column grid of flat rows with a character beside each */
.rows--grid {
  gap: 36px 48px;
}
@media (min-width: 900px) {
  .rows--grid {
    grid-template-columns: 1fr 1fr;
  }
}
.row--pet {
  grid-template-columns: 104px 1fr;
  gap: 20px;
  align-items: center;
}
.react {
  width: 104px;
  height: 104px;
}
.row--pet h3 {
  font-size: 1.35rem;
}

/* Jigsaw cards: the app's puzzle piece, large */
.pieces3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}
@media (min-width: 720px) {
  .pieces3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
}
.piece--lg {
  --bite: radial-gradient(circle 17px at 0 32%, #0000 16.5px, #000 17px) left / 51% 100% no-repeat,
    radial-gradient(circle 17px at 100% 32%, #0000 16.5px, #000 17px) right / 51% 100% no-repeat;
  flex: none;
  margin-bottom: 6px;
}
.piece--lg::before,
.piece--lg .pf {
  border-radius: 30px;
}
.piece--lg::before {
  inset: 6px 0 -6px 0;
}
.piece--lg .pf {
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  padding: 26px 26px 30px;
}
.piece--lg .pf img {
  width: auto;
  height: 132px;
  align-self: center;
  margin-bottom: 8px;
}
.piece--lg .pf h3 {
  font-size: 1.35rem;
  color: var(--ink-on);
}
.piece--lg .pf p {
  color: var(--ink-on);
  font-size: 1.02rem;
  line-height: 1.45;
  font-weight: 600;
}
.piece--lg .pn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ws-purple);
  box-shadow: 0 3px 0 var(--ws-purple-lip);
  color: #fff;
  font-weight: 700;
  margin-bottom: 3px;
}
.piece--lav {
  --face: var(--ws-panel);
  --edge: var(--ws-panel-lip);
}

/* Closing call to action: the brand light green, with a character peeking in */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  border-radius: 44px;
  padding: 56px 28px 0;
  display: grid;
  gap: 8px;
  align-items: end;
  color: var(--ink);
}
.cta h2 {
  max-width: 16ch;
}
.cta .lede {
  color: var(--ink);
  margin-top: 14px;
}
.cta .cta-copy {
  padding-bottom: 44px;
}
.cta .hero-actions {
  margin-top: 26px;
}
.cta .stand {
  --ground: var(--brand-soft);
  --ground-lip: var(--brand-soft-lip);
  justify-self: center;
  width: min(300px, 90%);
}
.cta .stand img {
  width: 72%;
}
@media (min-width: 820px) {
  .cta {
    grid-template-columns: 1.3fr 1fr;
    padding: 72px 64px 0;
  }
  .cta .cta-copy {
    padding-bottom: 72px;
  }
  .cta .stand {
    width: 360px;
  }
}

/* Footer: the crew peeks over the top */
.foot {
  position: relative;
  margin-top: 110px;
  padding-top: 70px;
}
.crew {
  position: absolute;
  bottom: calc(100% - 26px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2px, 1.5vw, 18px);
  pointer-events: none;
}
.crew img {
  width: clamp(46px, 11.5vw, 104px);
  height: auto;
}

/* FAQ accordion: raised rows */
.acc {
  max-width: 760px;
  display: grid;
  gap: 4px;
}
.acc details {
  --edge: var(--ws-card-lip);
  background: var(--ws-card);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--lip-card) 0 var(--edge);
  margin-bottom: 14px;
}
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 18px 14px 24px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  border-radius: var(--radius-card);
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5 2.5 9.5 7 5 11.5' fill='none' stroke='%231b2150' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform 160ms ease-out;
}
.acc details[open] summary::after {
  transform: rotate(90deg);
}
.acc details[open] {
  --edge: var(--ws-panel-lip);
  background: var(--ws-panel);
}
.acc .ans {
  padding: 0 24px 22px;
  color: var(--ws-ink);
  font-weight: 600;
  animation: ansin 240ms ease-out;
}
.acc .ans p + p {
  margin-top: 8px;
}
@keyframes ansin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Plans: cards, comparison, battery cards */
.plans {
  align-items: stretch;
}
.plan {
  padding: 34px 30px 30px;
}
.plan h2 {
  font-size: 1.9rem;
}
.plan .price {
  font-size: 3rem;
  margin: 12px 0 4px;
}
.plan--core {
  --face: var(--ws-panel);
  --edge: var(--ws-panel-lip);
}
.plan--free {
  --face: var(--cc-mint);
  --edge: var(--cc-mint-edge);
}
.plan p {
  color: var(--ws-ink-soft);
  font-weight: 600;
}
.plan .plan-face {
  display: block;
  width: 130px;
  margin: 0 0 14px;
}
.plan-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.plan-top img {
  width: 120px;
  margin-bottom: -4px;
}
.cmp {
  display: grid;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp li {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1rem;
}
.cmp li:nth-child(even) {
  background: var(--card-recessed);
}
.cmp .cmp-head {
  background: none;
  font-size: 1.1rem;
  color: var(--ink);
}
.cmp span:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.cmp img {
  width: 22px;
  height: 22px;
  flex: none;
}
@media (max-width: 600px) {
  .cmp li {
    grid-template-columns: 1.1fr 1fr 1fr;
    font-size: 0.92rem;
    padding: 12px 8px;
  }
}

.bviz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
@media (min-width: 860px) {
  .bviz {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}
.bcard {
  grid-template-rows: 150px 78px auto 1fr;
  align-items: start;
  --face: var(--cc-mint);
  --edge: var(--cc-mint-edge);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 22px 28px;
  border-radius: 30px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
}
.bcard--sunny {
  --face: var(--cc-sunny);
  --edge: var(--cc-sunny-edge);
}
.bcard--coral {
  --face: var(--cc-coral);
  --edge: var(--cc-coral-edge);
}
.bcard .who {
  height: 150px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  align-self: end;
}
.bcard .bat {
  align-self: center;
}
.bcard .bat {
  width: 92px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.bcard h3 {
  font-size: 1.3rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}
.bcard p {
  color: var(--ws-ink);
  font-weight: 600;
}

/* Privacy and the like: raised soft cards in a calm column */
.notes {
  max-width: 760px;
  display: grid;
  gap: 22px;
}
.note-card {
  padding: 26px 28px 28px;
  --face: var(--cc-soft);
  --edge: var(--cc-soft-edge);
  background: var(--face);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--lip-card) 0 var(--edge);
  margin-bottom: var(--lip-card);
}
.note-card h2 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.note-card p {
  color: var(--ws-ink);
  font-weight: 600;
}
.note-card p + p {
  margin-top: 10px;
}
.note-card--lav {
  --face: var(--cc-lavender);
  --edge: var(--cc-lavender-edge);
}
.note-card--mint {
  --face: var(--cc-mint);
  --edge: var(--cc-mint-edge);
}
.note-card--sky {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
}
.note-card--sunny {
  --face: var(--cc-sunny);
  --edge: var(--cc-sunny-edge);
}

/* Skills as small jigsaw chips */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .chips {
    grid-template-columns: repeat(3, 1fr);
  }
}
.chip {
  --bite: radial-gradient(circle 9px at 0 50%, #0000 8.5px, #000 9px) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, #0000 8.5px, #000 9px) right / 51% 100% no-repeat;
  position: relative;
  margin-bottom: 4px;
}
.chip::before,
.chip span {
  border-radius: 18px;
  -webkit-mask: var(--bite);
  mask: var(--bite);
}
.chip::before {
  content: "";
  position: absolute;
  inset: 4px 0 -4px 0;
  background: var(--edge);
}
.chip span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 14px 22px;
  background: var(--face);
  color: var(--ink-on);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.checks li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 var(--cc-lavender-edge);
  margin-bottom: 3px;
  color: var(--ws-ink);
  font-weight: 700;
}
.checks img {
  width: 26px;
  height: 26px;
}

.phone-wrap {
  position: relative;
  display: grid;
  justify-items: center;
}
.phone-wrap {
  padding-bottom: 38px;
}
.phone-wrap .buddy {
  position: absolute;
  z-index: 3;
  width: 100px;
  height: auto;
  bottom: 0;
}
.phone-wrap .buddy--l {
  left: 2px;
}
.phone-wrap .buddy--r {
  right: 2px;
}
@media (min-width: 980px) {
  .phone-wrap .buddy {
    width: 150px;
  }
  .phone-wrap {
    padding-bottom: 0;
  }
  .phone-wrap .buddy {
    width: 132px;
    bottom: 0;
  }
  .phone-wrap .buddy--l {
    left: calc(50% - 306px);
  }
  .phone-wrap .buddy--r {
    left: auto;
    right: calc(50% - 306px);
  }
}

.big-note {
  max-width: 62ch;
  font-size: 1.12rem;
}

@media (prefers-reduced-motion: reduce) {
  .acc .ans {
    animation: none;
  }
  .top,
  .nav a,
  .acc summary::after {
    transition: none;
  }
}

.plan-top h2,
.plan-top h3 {
  font-size: 2rem;
}

/* ?still in the address turns the reveal off (used to take screenshots) */
.still [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.plans .plan h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.plans .plan p strong {
  color: var(--ink);
}

.stand--sm img {
  width: min(62%, 280px);
}
.split {
  display: grid;
  gap: 40px;
  align-items: start;
}
.split .side {
  display: none;
}
@media (min-width: 980px) {
  .split {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
  }
  .split .side {
    display: block;
    position: sticky;
    top: 110px;
    align-self: start;
    padding-top: 12px;
  }
  .split .side .stand img {
    width: 82%;
  }
}
.split .acc,
.split .notes {
  max-width: none;
}

/* Icons never stretch: they keep their own proportions inside their box */
.list li img,
.checks img,
.cmp img,
.plan li img,
.dot img,
.row img,
.react {
  object-fit: contain;
}

/* =====================================================================
   HERO TYPE SYSTEM: big, tight, ink on the brand green. The text column is the star.
   Home hero: 56px at 390 wide, about 96px at 1280, 112px cap. Page heads: 44px to 80px.
   ===================================================================== */

.hero h1 {
  font-size: clamp(56px, 35px + 5.39vw, 100px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .ln {
  display: block;
}
.hero p.lede {
  max-width: 44ch;
  margin-top: 22px;
  font-size: clamp(18px, 0.9rem + 0.7vw, 24px);
  line-height: 1.4;
  text-wrap: pretty;
}
.hero .hero-actions {
  margin-top: 30px;
}
.hero .hero-actions .btn {
  min-height: 62px;
  padding: 0 32px;
  font-size: 20px;
}
.hero .wrap {
  padding-top: 32px;
}
.hero-copy {
  padding-bottom: 36px;
}

@media (min-width: 760px) {
  .hero .hero-actions .btn {
    min-height: 68px;
    padding: 0 38px;
    font-size: 22px;
  }
}

@media (min-width: 1180px) {
  .hero .wrap {
    display: block;
    position: relative;
    padding-top: 40px;
    min-height: 0;
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    padding-bottom: 56px;
  }
  .hero p.lede {
    max-width: 40ch;
  }
  /* the 404's companion stands against the right edge of the window */
  .hero-art {
    position: absolute;
    right: calc((100% - 100vw) / 2 + 12px);
    bottom: 0;
    width: 480px;
    min-height: 0;
    padding-top: 0;
    z-index: 1;
  }
  .hero-art .stand {
    width: 100%;
  }
  .hero-art.cast-art {
    padding-top: 0;
  }
}

/* The 404 is a quieter hero: page head sizes */
.hero--page h1 {
  font-size: clamp(44px, 24px + 4.4vw, 80px);
  line-height: 1.02;
}
.hero--page h1 .ln {
  display: inline;
}
.hero--page h1 .ln:first-child::after {
  content: "";
  display: block;
}
.hero--page p.lede {
  font-size: clamp(18px, 0.85rem + 0.5vw, 22px);
}
@media (min-width: 1180px) {
  .hero--page .hero-art {
    width: 420px;
  }
}

/* Page heads: same system, scaled down for longer titles */
.pagehead h1 {
  font-size: clamp(44px, 24px + 4.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 14ch;
  text-wrap: balance;
}
.pagehead .lede {
  font-size: clamp(18px, 0.85rem + 0.5vw, 22px);
  line-height: 1.4;
  text-wrap: pretty;
}
.pagehead .btn {
  min-height: 62px;
  padding: 0 32px;
  font-size: 20px;
}
@media (min-width: 760px) {
  .pagehead h1 {
    font-size: clamp(56px, 24px + 4.4vw, 80px);
  }
}

/* 980 to 1179px: keep the single column hero (the side by side layout starts at 1180) */
@media (min-width: 980px) and (max-width: 1179px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 8px;
  }
  .hero-copy {
    padding-bottom: 28px;
  }
  .hero-art {
    min-height: 0;
  }
}


.still .mnav,
.still .mnav * {
  transition: none !important;
}

/* a longer page headline stays in the same system, one step smaller */
.pagehead h1.h1-long {
  max-width: 19ch;
  font-size: clamp(38px, 20px + 3.6vw, 62px);
}
@media (min-width: 760px) {
  .pagehead h1.h1-long {
    font-size: clamp(44px, 20px + 3.2vw, 62px);
  }
}

/* ---------- Four plans: Free, Starter, Core, Plus ---------- */
.plans--four {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .plans--four {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
.plan--starter {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
}
.plan--plus {
  --face: var(--cc-peach);
  --edge: var(--cc-peach-edge);
}
.plan-top {
  min-height: 46px;
}
.plan-top h2,
.plan-top h3 {
  align-self: center;
}
/* Coming soon: a small raised tag, no button, no link */
.soon-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 14px 7px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 3px 0 var(--edge, var(--cc-soft-edge));
  margin-bottom: 3px;
  white-space: nowrap;
}
.plan .plan-note {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--ink);
}
.plans--compact .plan {
  padding: 22px 22px 22px;
}
.plans--compact .plan .price {
  font-size: 2.1rem;
  margin: 8px 0 4px;
}
@media (min-width: 1000px) {
  .plans--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .plans--compact .plan-top {
    flex-wrap: wrap;
    gap: 6px;
  }
  .plans--compact .plan .price small {
    display: block;
    font-size: 0.95rem;
  }
}

/* Battery ladder: how often each plan recharges (batteries never show a count) */
.ladder-title {
  margin: 44px 0 18px;
  font-size: 1.35rem;
}
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
@media (min-width: 760px) {
  .ladder {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}
.rung {
  --face: var(--cc-soft);
  --edge: var(--cc-soft-edge);
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 22px 22px;
  border-radius: 26px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
}
.rung--free {
  --face: var(--cc-mint);
  --edge: var(--cc-mint-edge);
}
.rung--starter {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
}
.rung--core {
  --face: var(--ws-panel);
  --edge: var(--ws-panel-lip);
}
.rung--plus {
  --face: var(--cc-peach);
  --edge: var(--cc-peach-edge);
}
.rung img {
  width: 84px;
  height: auto;
  aspect-ratio: 200 / 125;
}
.rung h3 {
  font-size: 1.3rem;
}
.rung p {
  margin: 2px 0 0;
  color: var(--ws-ink);
  font-weight: 600;
  line-height: 1.35;
}
.rung .rung-when {
  color: var(--ink);
  font-weight: 700;
}

/* Side by side with four plans: a table on wide screens, stacked rows on phones */
.cmp--four li {
  grid-template-columns: 0.8fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 760px) {
  .cmp--four .cmp-head {
    display: none;
  }
  .cmp--four li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 16px;
  }
  .cmp--four li > span:first-child {
    font-size: 1.1rem;
    color: var(--ink);
  }
  .cmp--four li > span[data-l]::before {
    content: attr(data-l) ": ";
    font-weight: 700;
    color: var(--ink);
    white-space: pre;
  }
  .cmp--four li > span[data-l] {
    display: block;
  }
}
@media (min-width: 760px) {
  .plans--four:not(.plans--compact) .plan-top {
    min-height: 112px;
  }
}

/* compact plan cards on the home page: name, then the tag under it, so every price lines up */
.plans--compact .plan-top {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 82px;
}
.plans--compact .soon-tag {
  align-self: flex-start;
}
.plans--compact .plan-top h3 {
  align-self: flex-start;
}

/* Included ticks: the verify badge from the Dilly icons, drawn in its own colors, always 1:1 */
.checks img,
.list li img[src$="verify.svg"],
.plan li img[src$="verify.svg"],
.cmp img[src$="verify.svg"] {
  flex: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.checks img {
  width: 30px;
  height: 30px;
}
.plan li img[src$="verify.svg"],
.list li img[src$="verify.svg"] {
  width: 30px;
  height: 30px;
  margin-top: -2px;
}
.list li {
  grid-template-columns: 30px 1fr;
}
.plan li {
  grid-template-columns: 36px 1fr;
}
.cmp img[src$="verify.svg"] {
  width: 30px;
  height: 30px;
  margin: -4px -2px;
}
/* Not included: a neutral, hollow ring and softer ink, so it reads differently from the badge */
.cmp-no {
  color: var(--ws-ink-muted);
}
.cmp-no i {
  flex: none;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2.5px solid var(--cc-soft-edge);
  background: transparent;
}

/* ---------- Contact ---------- */
.mailgrid {
  display: grid;
  gap: 26px;
}
@media (min-width: 900px) {
  .mailgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
.mailc {
  --face: var(--cc-lavender);
  --edge: var(--cc-lavender-edge);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 30px;
  border-radius: 30px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
}
.mailc--mint {
  --face: var(--cc-mint);
  --edge: var(--cc-mint-edge);
}
.mailc--peach {
  --face: var(--cc-peach);
  --edge: var(--cc-peach-edge);
}
.mailc h2 {
  font-size: 1.75rem;
}
.mailc > p:not(.mailc-link) {
  flex: none;
}
.mailc p {
  margin: 10px 0 24px;
  color: var(--ws-ink);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
}
.mailc .btn--wide {
  width: 100%;
  min-height: 64px;
  font-size: 21px;
}
.addr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}
.addr {
  flex: 1 1 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow-wrap: normal;
  user-select: all;
  -webkit-user-select: all;
}
.copy-btn {
  display: none;
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 700 15px/1 var(--font);
  box-shadow: 0 3px 0 var(--edge);
  margin-bottom: 3px;
  cursor: pointer;
}
.js .copy-btn {
  display: inline-flex;
  align-items: center;
}
.copy-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.mailc .mailc-link {
  margin: 16px 0 0;
  font-size: 1rem;
}
.foot small.foot-mail {
  display: block;
  margin-top: 6px;
}
@media (min-width: 900px) {
  .mailc > p:not(.mailc-link) {
    min-height: 4.2em;
  }
}

/* ---------- Help center links ---------- */
.mnav-help {
  --c: var(--menu-help);
}
.nav {
  gap: 2px;
}
@media (min-width: 980px) and (max-width: 1139px) {
  .nav a {
    padding: 9px 11px;
    font-size: 15px;
  }
}
.helpcard {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
  margin-top: 34px;
  padding: 28px 28px 30px;
  border-radius: 30px;
  background: var(--face);
  box-shadow: 0 5px 0 var(--edge);
  margin-bottom: 5px;
}
.helpcard h2 {
  font-size: 1.75rem;
}
.helpcard p {
  margin: 8px 0 20px;
  color: var(--ws-ink);
  font-weight: 600;
  font-size: 1.05rem;
}
.helpcard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.helpcard-mail {
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.help-line {
  margin: 26px 0 0;
  font-weight: 600;
  color: var(--ws-ink);
  font-size: 1.1rem;
}
.help-line a {
  font-weight: 700;
}

/* very short screens (about 600px tall): eight rows still fit with Pip standing below them */
@media (max-height: 660px) {
  .mnav-top {
    min-height: 64px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .mnav-close {
    width: 52px;
    height: 52px;
  }
  .mnav-link {
    min-height: 42px;
    font-size: clamp(26px, 8vw, 32px);
    padding-top: 2px;
    padding-bottom: 4px;
  }
  .mnav-list {
    padding-top: 0;
    padding-bottom: 0;
    gap: 2px;
  }
  .mnav-pip {
    height: 120px;
  }
}

/* =====================================================================
   HOME HERO, text only: the blue band, the headline, and three of the app's puzzle pieces on a soft ground
   ===================================================================== */

.hero {
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -70px;
  width: 150%;
  height: 170px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--brand-soft);
  z-index: 0;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero-copy {
  padding-bottom: 28px;
}
.hero-pieces {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 4px calc(var(--gutter) * -1) 0;
  padding: 6px var(--gutter) 0;
  transform: translateY(30px);
  pointer-events: none;
  user-select: none;
}
.hp {
  flex: 0 0 auto;
  width: clamp(116px, 31vw, 190px);
  --r: -3deg;
  transform: rotate(var(--r));
  transform-origin: 50% 100%;
}
.hp .pf {
  padding: 16px 12px 14px;
  gap: 10px;
  min-height: 112px;
  justify-content: center;
}
.hp .pt {
  font-size: clamp(14px, 3.6vw, 18px);
}
.hp-b {
  --r: 2.5deg;
  margin-top: 14px;
}
.hp-c {
  --r: -2deg;
}
.hp .pill {
  font-size: 14px;
}
@media (max-width: 420px) {
  .hp-c {
    display: none;
  }
  .hp {
    width: calc((100% - 12px) / 2);
  }
}
@media (min-width: 1180px) {
  .hero::after {
    left: auto;
    right: -120px;
    bottom: -150px;
    width: 640px;
    height: 640px;
    transform: none;
  }
  .hero-pieces {
    position: absolute;
    right: -10px;
    bottom: 40px;
    width: 440px;
    height: 330px;
    margin: 0;
    padding: 0;
    transform: none;
    display: block;
  }
  .hp {
    position: absolute;
    width: 210px;
  }
  .hp .pf {
    min-height: 124px;
    padding: 18px 14px 16px;
  }
  .hp .pt {
    font-size: 18px;
  }
  .hp-a {
    left: 0;
    top: 70px;
    --r: -4deg;
  }
  .hp-b {
    left: 214px;
    top: 14px;
    margin-top: 0;
    --r: 3deg;
  }
  .hp-c {
    display: block;
    left: 96px;
    top: 196px;
    --r: -2deg;
  }
}

/* Links and focus rings on the brand-green bands: ink, not the indigo link color (ink on the light green is about 17:1) */
.hero a:not(.btn),
.hhero a:not(.btn),
.cta a:not(.btn) {
  color: var(--ink);
}
.hero :focus-visible,
.hhero :focus-visible,
.cta :focus-visible {
  outline-color: var(--ink);
}

/* =====================================================================
   THE QUOTED "AI" (founder, 2026-10-18): there is no real AI in the app, so the quoted “AI” in "Your “AI” companion" is emphasized.
   The span wraps the opening quote, the letters and the closing quote. It is added by the generators, only in visible body HTML.
   The sticker is a real <button class="ai-q"> that opens the "no AI" dialog (nav.js). Where it sits inside a link (help center article lists) it is a plain <span class="ai-q"> instead, so a click follows the link.
   It is a STICKER: golden --ai-yellow fill, an ink outline (-webkit-text-stroke with paint-order: stroke fill so the fill stays full) and a small HARD ink offset shadow (no blur, no glow).
   Plain yellow text on a light page is about 1.2:1, so the outline carries legibility (ink on white is about 19:1, on the light green band about 17:1).
   The whole word leans like a head tilting: --ai-q-tilt is the ONE number to change (positive = clockwise/right, negative = left, 0 = upright).
   display: inline-block + transform-origin: center keeps the tilt from breaking the line; line-height 0 keeps the larger size from growing the line box.
   Font: a rounded system stack (Arial Rounded MT Bold on Apple devices, Nunito 700 elsewhere); no new font file is shipped. At rest it is static; the button gets a small scale on hover and press (only when motion is allowed).
   ===================================================================== */
.ai-q {
  --ai-q-tilt: 4deg;
  display: inline-block;
  transform: rotate(var(--ai-q-tilt));
  transform-origin: center;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 0;
  color: var(--ai-yellow);
  -webkit-text-stroke: 0.09em var(--ai-ink);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.05em 0 var(--ai-ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* It is a real <button> (opens the "no AI" dialog, see below): strip the button chrome, keep the sticker. */
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-transform: none;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* line-height 0 would give the focus ring no height: pad the box and cancel the padding with the same margin, so layout does not move. */
button.ai-q {
  padding: 0.45em 0.12em;
  margin: -0.45em -0.12em;
}
.js button.ai-q {
  cursor: pointer;
}
button.ai-q:hover {
  transform: rotate(var(--ai-q-tilt)) scale(1.06);
}
button.ai-q:active {
  transform: rotate(var(--ai-q-tilt)) scale(0.96);
}
button.ai-q:focus-visible {
  outline: 3px solid var(--ai-ink);
  outline-offset: 2px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  button.ai-q {
    transition: transform 120ms ease-out;
  }
}

/* =====================================================================
   THE "NO AI" DIALOG (founder, 2026-10-18): one native <dialog> per page that has a sticker, opened by nav.js with showModal().
   The browser gives the backdrop, Escape, the focus trap and the top layer; nav.js adds scroll lock, focus return and click-on-backdrop.
   It is a raised card (the site's lip look) with Pip on one side and a speech bubble on the other. No glow, no sparkle.
   Motion: a gentle fade only when motion is allowed; none otherwise. It scrolls inside itself when the screen is short.
   ===================================================================== */
html.ai-dlg-open,
html.ai-dlg-open body {
  overflow: hidden;
}
html.ai-dlg-open {
  padding-right: var(--ai-sbw, 0px);
}
.ai-dlg {
  --face: var(--cc-sunny);
  --edge: var(--cc-sunny-edge);
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--face);
  box-shadow: 0 var(--lip-card) 0 var(--edge);
  color: var(--paragraph);
  overflow: hidden;
}
.ai-dlg[open] {
  display: flex;
  flex-direction: column;
}
.ai-dlg::backdrop {
  background: rgba(6, 6, 31, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .ai-dlg[open] {
    animation: ai-dlg-fade 180ms ease-out;
  }
  .ai-dlg[open]::backdrop {
    animation: ai-dlg-fade 180ms ease-out;
  }
}
@keyframes ai-dlg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ai-dlg-x {
  --lip-button: 4px;
  --face: #fff;
  --edge: var(--cc-sunny-edge);
  --ink-on: var(--ws-soft-ink);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
}
.ai-dlg-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px 24px;
}
.ai-dlg-grid {
  display: grid;
  gap: 18px;
  justify-items: center;
}
.ai-dlg-pip img {
  width: 132px;
  height: auto;
}
.ai-dlg-say {
  position: relative;
  width: 100%;
  padding: 20px 20px 22px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 var(--lip-card) 0 var(--lip);
  margin-bottom: var(--lip-card);
}
/* the bubble's tail points at Pip: up on a phone, left on a wide screen */
.ai-dlg-say::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fff;
  border-radius: 5px 0 0 0;
  transform: rotate(45deg);
}
.ai-dlg-say h2 {
  font-size: clamp(1.45rem, 5.4vw, 1.9rem);
  line-height: 1.15;
}
.ai-dlg-say h3 {
  margin-top: 14px;
  font-size: 1.15rem;
  color: var(--ws-ink-soft);
}
.ai-dlg-say p {
  margin-top: 8px;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ws-ink);
}
.ai-dlg-say .ai-dlg-fine {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--hairline);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-ink-muted);
}
.ai-dlg-actions {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}
@media (min-width: 640px) {
  .ai-dlg-scroll {
    padding: 64px 32px 30px; /* the top clears the close button, which sits in the corner */
  }
  .ai-dlg-grid {
    grid-template-columns: 150px 1fr;
    gap: 26px;
    align-items: end;
    justify-items: stretch;
  }
  .ai-dlg-pip img {
    width: 150px;
  }
  .ai-dlg-say::before {
    top: auto;
    bottom: 38px;
    left: -9px;
    margin-left: 0;
    border-radius: 0 0 0 5px;
  }
}

/* The founder's "Kids should learn about AI" block: a band with the three paragraphs and a companion. Bold stays at the site's 700 ceiling. */
.kids .lede {
  max-width: 60ch;
}
.kids .lede + .lede {
  margin-top: 14px;
}
.kids h2 + .lede {
  margin-top: 16px;
}
.kids strong {
  font-weight: 700;
  color: var(--ink);
}