/* 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);
  /* springs back slowly (about 220ms) and sinks quickly (about 140ms, see the pressed rule below) */
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
/* Pressed: the face sinks by the lip depth and the lip collapses. .is-pressed is added by nav.js on pointer down, Space and Enter,
   and held for a moment after release, so a quick tap still shows the press. Nothing around the button moves (a transform does not reflow). */
.btn:active,
.btn.is-pressed {
  transform: translateY(var(--lip-button));
  box-shadow: 0 0 0 var(--edge);
  transition-duration: 140ms, 140ms, 120ms;
  transition-timing-function: ease-out;
}
.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;
  }
  .pet-disc,
  .pet-disc img {
    transition: none;
  }
  /* Reduced motion: the button does not move. Pressing only darkens the face a little and shortens the lip, for a quick moment. */
  .btn {
    transition: filter 80ms linear, box-shadow 80ms linear;
  }
  .btn.btn:active,
  .btn.btn.is-pressed {
    transform: none;
    box-shadow: 0 1px 0 var(--edge);
    filter: brightness(0.93);
    transition-duration: 80ms;
    transition-timing-function: linear;
  }
}

/* =====================================================================
   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;
}

/* The battery figure's fourth card: Plus never runs out (peach, like the Plus plan card; the same Coming soon tag) */
.bcard--plus {
  --face: var(--cc-peach);
  --edge: var(--cc-peach-edge);
  grid-column: 1 / -1;
  grid-template-rows: none;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 24px;
}
.bcard--plus .plus-txt h3 {
  min-height: 0;
  margin: 0;
}
.bcard--plus .plus-txt p {
  margin: 6px 0 0;
}
.bcard--plus .soon-tag {
  align-self: center;
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .bcard--plus {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
    gap: 24px;
  }
  .bcard--plus .plus-txt h3 {
    justify-content: flex-start;
  }
}

/* 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;
}
/* Compact set on the parents page: two across on a phone, three across from 640px */
.chips--compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.chips--compact .chip span {
  min-height: 60px;
  padding: 10px 18px;
  font-size: 0.95rem;
}
@media (min-width: 640px) {
  .chips--compact {
    grid-template-columns: repeat(3, 1fr);
  }
}
.chips-more {
  margin: 22px 0 0;
}
.sec-head--tight {
  margin-bottom: 24px;
}

.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;
}
/* Air between "You teach." and the rest, so the tilted sticker never crowds the first line. */
.hero h1 .ln:first-child {
  margin-bottom: 0.2em;
}
.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 companion is centered in the right half of the page (it used to stand against the window edge, far from the words) */
  .hero-art {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    width: 46%;
    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);
}

/* 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 the app's skill pieces snapping together
   ===================================================================== */

.hero {
  position: relative;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}
.hero-copy {
  padding-bottom: 8px;
}
.hero-pieces {
  position: relative;
  max-width: 400px;
  margin: 28px 0 0;
  padding-bottom: 44px;
}
/* The 2 by 2 puzzle: the SVG draws the shapes, the words are HTML laid over it (so they wrap and follow the text size) */
.jg {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.jigsaw {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.jg-dash {
  stroke: #434c7e;
  stroke-opacity: 0.75;
  stroke-width: 1.5;
  stroke-dasharray: 4.6 4;
  stroke-linejoin: round;
}
.jg-hi {
  stroke: #fff;
  stroke-opacity: 0.5;
  stroke-width: 2;
  stroke-linejoin: round;
}
.jg-t {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* the companion sits at the top of the piece, the label under it */
  gap: 0.25em;
  text-align: center;
  color: var(--jg-ink);
  font-size: 1.05rem;
  font-size: clamp(1rem, 4.1cqw, 1.35rem);
}
.jg-t--lav {
  --jg-ink: #1b2150;
}
.jg-t--mint {
  --jg-ink: #082a20;
}
.jg-t--sky {
  --jg-ink: #14275e;
}
.jg-t--ghost {
  --jg-ink: #25306b; /* 6.8:1 on the pale empty slot */
}
.jg-av {
  display: block;
  flex: 0 1 auto;
  width: 19cqw;
  min-height: 0;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain; /* the art keeps its own proportions inside the square slot */
  object-position: 50% 100%;
}
.jg-l {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero-caption {
  margin: 18px 0 0;
  max-width: 34ch;
  color: var(--ink);
  font-size: clamp(17px, 0.85rem + 0.5vw, 20px);
  line-height: 1.4;
  font-weight: 500;
}
.hero-caption strong {
  font-weight: 700;
}
@media (min-width: 1180px) {
  .hero .wrap {
    min-height: 830px;
  }
  .hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
  }
  .hero p.lede {
    margin-top: 18px;
  }
  .hero p.lede {
    max-width: 33ch;
  }
  /* the pieces fill the right half of the SAME centered container as everything else: their right edge is the content column's right edge */
  .hero-pieces {
    position: absolute;
    right: var(--gutter);
    top: 262px;
    width: 440px;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero-caption {
    max-width: none;
    font-size: 20px;
  }
}

/* Contact: four cards, 2 by 2 on desktop, and a slim security row below */
@media (min-width: 900px) {
  .mailgrid--four {
    grid-template-columns: 1fr 1fr;
  }
}
.mailc--rose {
  --face: var(--ws-coral-card);
  --edge: var(--ws-coral-lip);
}
.mailrow {
  margin-top: 28px;
}
.mailc--slim {
  gap: 18px;
  align-items: stretch;
}
.mailc--slim .slim-text h2 {
  font-size: 1.5rem;
}
.mailc--slim .slim-text p {
  margin: 8px 0 0;
}
.mailc--slim .slim-act {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}
.mailc--slim .slim-act .btn {
  min-height: 58px;
}
@media (min-width: 900px) {
  .mailc--slim {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .mailc--slim .slim-act {
    flex: none;
    width: 380px;
  }
}
.mail-act {
  margin: 14px 0 0;
}
.mail-act .btn {
  min-height: 58px;
}
.mailc--sky {
  --face: var(--cc-sky);
  --edge: var(--cc-sky-edge);
}

/* ---------- /open/* pages (emailed links): one big button, and what to do if the app does not open ---------- */
.btn--big {
  min-height: 76px;
  padding: 0 48px;
  min-width: min(100%, 320px);
  font-size: 24px;
  border-radius: 34px;
}
.btn--big[aria-disabled="true"] {
  --face: var(--ws-soft);
  --edge: var(--ws-soft-lip);
  --ink-on: var(--ws-ink-muted);
  pointer-events: none;
}
.open-bad {
  margin: 18px 0 0;
  max-width: 34ch;
  font-weight: 700;
  color: var(--ink);
}
.open-bad[hidden] {
  display: none;
}
.open-fallback {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 560px;
  padding: 36px 0 12px;
}
.open-fallback h2 {
  margin: 0;
}
.open-fallback p {
  margin: 0;
  color: var(--paragraph);
}

/* 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);
}

/* =====================================================================
   THE WAITLIST (/waitlist, the join links in the header, menu, footer and pages, and the two /open/waitlist-* pages)
   Same raised look as the rest of the site. The form is a real <form>: labels, fieldsets with legends, native checkboxes and radios.
   Sizes use rem so Bigger text works; every target is at least 44px; nothing moves unless motion is allowed.
   ===================================================================== */

/* The header join button: a small raised purple button after the nav links (the .nav a rules would otherwise flatten it) */
.nav a.nav-join {
  margin-left: 10px;
  padding: 0 20px;
  border-radius: 22px;
  color: var(--ws-piece-ink);
  font-size: 16px;
  white-space: nowrap;
}
/* The plain nav link rules (.nav a, .nav a:hover) are more specific than .btn, so on hover they turned this pill light gray and
   replaced its press transition. Put the button's own face, ink and transition back for every state. */
.nav a.nav-join,
.nav a.nav-join:hover,
.nav a.nav-join:focus-visible {
  background: var(--face);
  color: var(--ink-on);
}
.nav a.nav-join {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 120ms ease-out;
}
.nav a.nav-join:active,
.nav a.nav-join.is-pressed {
  transition-duration: 140ms, 140ms, 120ms;
  transition-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav a.nav-join {
    transition: filter 80ms linear;
  }
}
@media (min-width: 980px) and (max-width: 1139px) {
  .nav a.nav-join {
    margin-left: 4px;
    padding: 0 14px;
    font-size: 15px;
  }
}
/* The full-screen menu: one raised button after the page names */
.mnav-list li.mnav-joinrow {
  padding: 8px 0 4px 22px;
}
.mnav-join {
  min-height: 60px;
  padding: 0 32px;
  font-size: clamp(22px, 6.5vw, 28px);
}
@media (max-height: 720px) {
  .mnav-join {
    min-height: 52px;
    font-size: 22px;
  }
}
.foot-join {
  margin: 18px 0 0;
}
.hero .hero-fine {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--eyebrow);
}
.ph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 26px;
}
.ph-actions .btn {
  margin-top: 0;
}
.wl-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 22px;
}
.wl-inline p {
  max-width: 44ch;
  color: var(--eyebrow);
  font-weight: 600;
}
.wl-inline .btn {
  margin-bottom: 3px;
}
.faq-join {
  margin-top: 14px;
}

/* The page head */
.wl-hero h1 {
  font-size: clamp(40px, 22px + 4.6vw, 76px);
  max-width: 15ch;
}
.wl-hero p.lede {
  max-width: 40ch;
}
.wl-hero .hero-fine {
  margin: 10px 0 0;
}
.wl-hero .hero-art {
  display: none;
}
@media (min-width: 1180px) {
  .wl-hero .hero-art {
    display: flex;
  }
}
.wl-why {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.wl-why li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.wl-why img {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
}

/* The card */
.wl-sec {
  padding-top: 40px;
}
.wl-card {
  --face: var(--cc-soft);
  --edge: var(--cc-soft-edge);
  max-width: 640px;
  margin: 0 auto 4px;
  padding: 28px 22px 30px;
  background: var(--face);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--lip-card) 0 var(--edge);
  scroll-margin-top: 96px;
}
@media (min-width: 640px) {
  .wl-card {
    padding: 36px 40px 40px;
  }
}
.wl-card [hidden] {
  display: none !important;
}
.wl-card h2,
.wl-card h3 {
  scroll-margin-top: 110px;
}
.wl-card h2 {
  font-size: 1.7rem;
  line-height: 1.15;
}
.wl-card h3 {
  font-size: 1.35rem;
  line-height: 1.2;
}
html:not(.js) .wl-form {
  display: none;
}
.wl-nojs {
  font-weight: 700;
  font-size: 1.15rem;
}
.wl-field {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.wl-card label,
.wl-group legend {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ws-ink);
}
.wl-opt {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ws-ink-muted);
}
.wl-card input[type="email"],
.wl-card input[type="text"],
.wl-card textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--ws-card-lip);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: 600 1.125rem/1.35 var(--font);
  box-shadow: inset 0 2px 0 var(--hairline);
}
.wl-card textarea {
  resize: vertical;
  min-height: 96px;
}
.wl-card input[aria-invalid="true"] {
  border-color: var(--error-text);
}
.wl-card input:focus-visible,
.wl-card textarea:focus-visible {
  outline: 3px solid var(--nav-active);
  outline-offset: 2px;
}
.wl-group {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.wl-group legend {
  padding: 0;
  margin-bottom: 10px;
}
.wl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.wl-chip {
  position: relative;
  display: inline-flex;
  margin-bottom: 3px;
}
.wl-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.wl-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 3px 0 var(--cc-soft-edge);
  color: var(--ws-ink);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}
.wl-chips--three .wl-chip {
  flex: 1 1 84px;
  min-width: 0;
}
.wl-chips--three .wl-chip span {
  width: 100%;
  justify-content: center;
  gap: 6px;
  padding: 8px 8px;
  min-height: 60px;
  font-size: 1.05rem;
}
.wl-chips--three .wl-tick {
  width: 14px;
  height: 14px;
}
@media (min-width: 480px) {
  .wl-chips--three .wl-chip span {
    padding: 8px 18px;
    font-size: 1.2rem;
  }
}
.wl-chip .wl-tick {
  display: none;
  flex: none;
}
.wl-chip input:checked + span {
  background: var(--ws-mint-soft);
  box-shadow: 0 3px 0 var(--ws-mint-soft-lip);
  color: var(--ws-mint-ink);
}
.wl-chip input:checked + span .wl-tick {
  display: block;
}
.wl-chip input:focus-visible + span {
  outline: 3px solid var(--nav-active);
  outline-offset: 3px;
}
.wl-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding: 6px 0;
}
.wl-consent input {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 8px 0 0 2px;
  accent-color: var(--ws-purple);
  cursor: pointer;
}
.wl-consent input[aria-invalid="true"] {
  outline: 3px solid var(--error-text);
  outline-offset: 2px;
}
.wl-consent label {
  padding: 6px 0;
  cursor: pointer;
}
.wl-err {
  margin: 0;
  color: var(--error-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.wl-err:not(:empty) {
  margin-top: 8px;
}
.wl-err--form:not(:empty) {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--error-bg);
}
.wl-form .btn,
.wl-more .btn {
  white-space: normal;
  text-align: center;
}
.wl-form .btn--big {
  width: 100%;
  margin-top: 24px;
}
.btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}
.wl-privacy {
  margin-top: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--paragraph);
}
/* The honeypot: out of sight and out of reach for people (also aria-hidden and tabindex -1 in the markup) */
.wl-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* After joining */
.wl-hello {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wl-hello img {
  flex: none;
  width: 92px;
  height: auto;
}
.wl-hello p {
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ws-ink);
}
.wl-more {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 2px solid var(--cc-soft-edge);
}
.wl-hint {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--paragraph);
}
.wl-warn {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ws-ink);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--cc-sunny);
}
.wl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 26px;
}
.wl-actions .btn {
  margin-bottom: var(--lip-button);
}
.wl-skip {
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--nav-active);
  font: 700 1.05rem/1.2 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wl-share-ask {
  margin-top: 22px;
  font-weight: 700;
  font-size: 1.1rem;
}
.wl-status {
  margin-top: 8px;
  min-height: 1.3em;
  font-weight: 700;
  color: var(--ok-text);
}
.wl-linkrow {
  margin-top: 8px;
}
.wl-linkrow input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--ws-card-lip);
  border-radius: 16px;
  background: #fff;
  font: 600 1rem/1.3 var(--font);
}
@media (prefers-reduced-motion: no-preference) {
  .wl-thanks:not([hidden]),
  .wl-done:not([hidden]) {
    animation: wl-in 260ms ease-out;
  }
  @keyframes wl-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* The two /open/waitlist-* pages: the states share one hero; the retry button sits under the text */
.wl-linkhero [hidden] {
  display: none !important;
}
.wl-linkhero h1:focus {
  outline: none;
}
@media (min-width: 1180px) {
  .wl-hero .wrap,
  .wl-linkhero .wrap {
    min-height: 0;
  }
}
/* The menu has one more row now (the join button), so Pip stands a little smaller to keep it all on one screen */
.mnav-pip {
  height: clamp(140px, 19dvh, 270px);
}
.mnav-list li.mnav-joinrow {
  padding-top: 4px;
  padding-bottom: 0;
}
@media (max-height: 720px) {
  .mnav-pip {
    height: 110px;
  }
}
.wl-linkhero h1 {
  font-size: clamp(38px, 22px + 3.8vw, 64px);
  max-width: 16ch;
}
.wl-linkhero .hero-copy {
  max-width: 640px;
}
.wl-hello {
  flex-wrap: wrap;
}
.wl-hello > div {
  flex: 1 1 12rem;
}
html:not(.js) .wl-linkhero [data-state="ask"] {
  display: none;
}