/* Paper cut layer. Loaded after marketing.css: the daycare, cut from paper.
   Cream, yellow, rust, and ink sheets with real depth between them. */
:root {
  --display: "Fraunces", Georgia, serif;
  --card: #fcf7eb;
  --peach: #f0d9c1;
  --ochre: #e2ad45;
  --rust: #b8532f;
  --rust-deep: #a3472d;
  --string: #6f5c49;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.32'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .11' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper-lift: 0 1px 1px rgb(60 40 20 / 14%), 0 10px 22px -10px rgb(60 40 20 / 42%);
  --torn: url("/assets/images/paper/torn-edge.svg");
}
.paper-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
body {
  background-color: var(--paper);
  background-image: var(--grain);
}

/* Type: a storybook serif for display, DM Sans stays for reading. */
h1,
h2,
h3,
.workspace-types-list dt {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h2 {
  letter-spacing: -0.025em;
}
h1 em,
h2 em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
}
.hand-note,
.app-documentary figcaption,
.public-page-example figcaption,
.workspace-preview figcaption span:first-child {
  font-family: var(--display);
  font-style: italic;
}

/* Buttons are small cut pieces sitting on a darker sheet. */
.button.button {
  border: 0;
  border-radius: 3px;
  rotate: -0.8deg;
  box-shadow:
    0 4px 0 -1px #b99a1d,
    0 12px 16px -8px rgb(36 40 33 / 55%);
  transition:
    translate 0.18s ease,
    rotate 0.18s ease,
    box-shadow 0.18s ease;
}
.button.button:hover {
  transform: none;
  translate: 0 -2px;
  rotate: 0deg;
  box-shadow:
    0 6px 0 -1px #b99a1d,
    0 16px 20px -8px rgb(36 40 33 / 50%);
}
.button.android {
  box-shadow:
    0 4px 0 -1px var(--rust),
    0 12px 16px -8px rgb(36 40 33 / 55%);
}
.sign-in {
  padding: 8px 14px;
  background: var(--card);
  box-shadow: var(--paper-lift);
  rotate: 1.5deg;
}

/* Tape */
.paper-tape {
  position: absolute;
  z-index: 3;
  width: 118px;
  height: 30px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 20%), transparent 30%, rgb(255 255 255 / 16%)),
    rgb(236 215 142 / 78%);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
  pointer-events: none;
}
.paper-tape.tape-left {
  top: -14px;
  left: 6%;
  rotate: -6deg;
}
.paper-tape.tape-right {
  top: -12px;
  right: 6%;
  rotate: 5deg;
}

/* ---------- The hero diorama ---------- */
.diorama {
  --sky-top: #f1d9b2;
  --sky-bottom: #fbf2df;
  --far: #edd2b0;
  --mid: #e0a947;
  --near: #b8532f;
  --ground: #2a2e27;
  --cloud: #fcf6ea;
  --cloud-edge: #e6d7bb;
  --wall: #fbf2df;
  --roof: #8f3a22;
  --window: #f5d833;
  position: relative;
  isolation: isolate;
  width: min(1400px, calc(100% - 40px));
  margin: 18px auto 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--sky-bottom);
  box-shadow:
    0 2px 2px rgb(60 40 20 / 18%),
    0 40px 70px -40px rgb(36 40 33 / 70%);
}
.diorama::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 4;
  border: 26px solid #efe3c8;
  border-radius: 38px;
  box-shadow:
    inset 0 0 0 1px rgb(80 55 30 / 22%),
    inset 0 6px 26px 4px rgb(60 38 18 / 42%);
  filter: url(#deckle);
  pointer-events: none;
}
.diorama-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.diorama-sky,
.diorama-sky::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 62%);
}
.diorama-sky::after {
  content: "";
  background:
    radial-gradient(ellipse at 66% 16%, rgb(245 216 51 / 18%), transparent 42%),
    linear-gradient(#11162a, #262b46 58%, #3a3350);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.diorama-grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain), var(--fibers);
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
}
[data-depth] {
  transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: translate;
}

.layer {
  position: absolute;
  left: -3%;
  bottom: -4px;
  width: 106%;
  display: block;
  overflow: visible;
  transition:
    translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.layer path,
.layer rect,
.layer circle {
  transition: fill 0.9s ease;
}
.layer-far {
  height: 440px;
  filter: drop-shadow(0 -2px 6px rgb(110 70 30 / 20%));
}
.layer-far > path {
  fill: var(--far);
}
.layer-mid {
  height: 340px;
  filter: drop-shadow(0 -3px 7px rgb(90 50 15 / 30%));
}
.layer-mid > path {
  fill: var(--mid);
}
.layer-near {
  height: 236px;
  filter: drop-shadow(0 -4px 8px rgb(60 25 10 / 34%));
}
.layer-near > path {
  fill: var(--near);
}
.layer-ground {
  height: 146px;
  filter: drop-shadow(0 -4px 8px rgb(30 15 5 / 42%));
}
.layer-ground > path {
  fill: var(--ground);
}
.house-wall {
  fill: var(--wall);
}
.house-roof,
.house-chimney {
  fill: var(--roof);
}
.house-door {
  fill: var(--ground);
}
.house-window {
  fill: var(--window);
  transition:
    fill 0.9s ease,
    filter 0.9s ease;
}

/* Hanging pieces: string, then paper, swaying from the top edge. */
.hanging {
  position: absolute;
  top: 0;
}
.hang-sway {
  position: relative;
  padding-top: var(--len, 40px);
  transform-origin: 50% 0;
  transform: rotate(var(--tilt, 0deg));
  animation: sway var(--sway, 7s) ease-in-out infinite alternate;
  transition: transform 0.9s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.hang-sway::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.75px);
  width: 1.5px;
  height: calc(var(--len, 40px) + 10px);
  background: var(--string);
}
.hang-sway > svg {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
}
@keyframes sway {
  from {
    rotate: -1.6deg;
  }
  to {
    rotate: 1.6deg;
  }
}
.hanging-sun {
  left: 60%;
  width: 150px;
}
.hanging-sun .hang-sway {
  --len: 0px;
  --sway: 6s;
}
.hanging-sun svg {
  filter: drop-shadow(0 10px 10px rgb(90 50 15 / 30%));
  transition: filter 0.9s ease;
}
.sun-rays {
  fill: var(--rust);
}
.sun-glass {
  fill: var(--ochre);
}
.sun-core {
  fill: var(--yellow);
}
.sun-filament {
  fill: none;
  stroke: var(--rust-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sun-shine {
  fill: none;
  stroke: #fff9da;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.85;
}
.sun-socket {
  fill: var(--ink);
}
.sun-ridges {
  stroke: #6b6d62;
  stroke-width: 2;
}
.hanging-cloud {
  width: 150px;
}
.hanging-cloud svg {
  filter: drop-shadow(0 8px 8px rgb(90 60 30 / 20%));
}
.cloud-face {
  fill: var(--cloud);
  transition: fill 0.9s ease;
}
.cloud-edge {
  fill: var(--cloud-edge);
  transition: fill 0.9s ease;
}
.cloud-one {
  left: 45%;
  width: 118px;
}
.cloud-one .hang-sway {
  --len: 34px;
  --sway: 8s;
}
.cloud-two {
  left: 84%;
}
.cloud-two .hang-sway {
  --len: 70px;
  --sway: 9s;
  animation-delay: -3s;
}

/* Stars only come down at nap time. */
.star {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 22px;
  padding-top: var(--len);
  translate: 0 -110%;
  transition: translate 0.9s cubic-bezier(0.34, 1.5, 0.5, 1) var(--delay);
}
.star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10.25px;
  width: 1.5px;
  height: calc(var(--len) + 4px);
  background: #9c8b72;
}
.star svg {
  display: block;
  width: 22px;
  fill: var(--yellow);
  filter: drop-shadow(0 0 6px rgb(245 216 51 / 70%));
}

/* Die-cut stickers tucked between the sheets. */
.cutout {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 8px 7px rgb(36 25 15 / 32%));
  transition:
    translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1),
    filter 0.9s ease;
}
.cutout-babies {
  right: 17%;
  bottom: 44px;
  width: 190px;
  rotate: -4deg;
}
.cutout-baby {
  left: 30%;
  bottom: 20px;
  width: 78px;
  rotate: 8deg;
}
.cutout-pointing {
  left: 3.6%;
  bottom: 30px;
  width: 116px;
  rotate: -4deg;
}
.cutout-robot {
  left: 47%;
  bottom: -10px;
  width: 200px;
  rotate: 3deg;
}

/* Pop-up book: once the hero is on screen, each sheet and sticker stands up
   from the ground, back to front. diorama.js animates --pop from 0 (flat) to 1. */
.diorama {
  --pop: 1;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .diorama {
    --pop: 0;
  }
}
.layer-far,
.layer-mid,
.layer-near,
.school,
.cutout {
  --p: clamp(0, (var(--pop) - var(--pop-at, 0)) / 0.45, 1);
  transform-origin: 50% 100%;
  transform: perspective(1100px) rotateX(calc((1 - var(--p)) * 88deg));
}
.layer-mid {
  --pop-at: 0.12;
}
.school {
  --pop-at: 0.18;
}
.layer-near {
  --pop-at: 0.24;
}
.cutout-babies {
  --pop-at: 0.3;
}
.cutout-baby {
  --pop-at: 0.4;
}
.cutout-pointing {
  --pop-at: 0.46;
}
.cutout-robot {
  --pop-at: 0.55;
}

/* The foreground copy: a hanging enrollment tag and a hanging film. */
.diorama-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding: 0 clamp(34px, 5vw, 76px) 214px;
}
.enrollment-tag {
  position: relative;
  padding-top: 34px;
  rotate: -1.2deg;
  filter: drop-shadow(0 2px 2px rgb(60 40 20 / 22%)) drop-shadow(0 22px 22px rgb(60 40 20 / 30%));
}
.enrollment-tag::after {
  content: "";
  position: absolute;
  top: -30px;
  left: calc(50% - 0.75px);
  width: 1.5px;
  height: 118px;
  background: var(--string);
}
.tag-card {
  position: relative;
  padding: 84px clamp(26px, 3.2vw, 50px) 30px;
  background-color: var(--card);
  background-image: var(--grain);
  clip-path: polygon(0 58px, 58px 0, calc(100% - 58px) 0, 100% 58px, 100% 100%, 0 100%);
  text-align: center;
}
.tag-card::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1.5px dashed #c7a283;
  pointer-events: none;
}
.tag-grommet {
  position: absolute;
  top: 28px;
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #243236;
  box-shadow:
    0 0 0 6px var(--ochre),
    0 0 0 7px rgb(90 55 20 / 30%),
    inset 0 3px 4px rgb(0 0 0 / 55%);
}
.tag-plate {
  margin: 0;
  font: 600 12px/1.5 var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
  text-wrap: balance;
}
.enrollment-tag h1 {
  margin: 16px 0 14px;
  font-size: clamp(38px, 3.9vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.enrollment-tag h1 em {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  padding: 0 0.22em 0.04em;
  isolation: isolate;
  color: var(--ink);
  font-weight: 500;
}
.enrollment-tag h1 em::before {
  content: "";
  position: absolute;
  inset: 8% 0 2%;
  z-index: -1;
  background: var(--yellow);
  rotate: -2deg;
  clip-path: polygon(1% 8%, 22% 2%, 48% 6%, 74% 0, 99% 5%, 97% 38%, 100% 70%, 98% 96%, 70% 100%, 44% 95%, 18% 100%, 2% 94%, 0 60%, 3% 32%);
  box-shadow: none;
}
.tag-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
}
.tag-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust);
}
.tag-dots span:nth-child(even) {
  background: var(--ochre);
}
.enrollment-tag .lede {
  max-width: 460px;
  margin: 0 auto 12px;
  font: italic 400 clamp(19px, 1.6vw, 22px)/1.4 var(--display);
  color: #3e4038;
}
.enrollment-tag .tag-story {
  font: 15.5px/1.6 var(--sans);
  color: #62665a;
}
.enrollment-tag .actions {
  justify-content: center;
  gap: 18px 24px;
  margin-top: 22px;
}
.enrollment-tag .hand-note {
  margin: 20px 0 0;
  font-size: 16px;
  color: var(--rust-deep);
}

.film-frame {
  position: relative;
  min-width: 0;
  margin: 190px 0 0;
  padding: 30px 16px 18px;
  background-color: var(--card);
  background-image:
    radial-gradient(circle at 14% 14px, #243236 3.5px, var(--ochre) 4px 7px, transparent 7.5px),
    radial-gradient(circle at 86% 14px, #243236 3.5px, var(--ochre) 4px 7px, transparent 7.5px),
    var(--grain);
  rotate: 1.4deg;
  box-shadow:
    0 2px 2px rgb(60 40 20 / 20%),
    0 26px 34px -14px rgb(60 40 20 / 50%);
}
.film-frame::before,
.film-frame::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 14px);
  width: 1.5px;
  height: 420px;
  background: var(--string);
}
.film-frame::before {
  left: 14%;
}
.film-frame::after {
  left: 86%;
}
.film-frame .film-slate {
  padding: 0 0 12px;
  color: #6b6358;
}
.film-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  object-fit: contain;
}
.film-frame .film-caption {
  color: #6b6358;
}
.film-note {
  margin: 10px 0 0;
  font: italic 15px/1.5 var(--display);
  color: #4f5248;
}

/* Scissor-cut controls. */
.diorama-controls {
  position: absolute;
  z-index: 3;
  left: clamp(128px, 12.5%, 196px);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 38%));
}
.paper-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 24px;
  border: 0;
  background-color: var(--card);
  background-image: var(--grain);
  color: var(--ink);
  font: italic 500 20px/1 var(--display);
  cursor: pointer;
  clip-path: polygon(2% 6%, 30% 0, 62% 5%, 98% 0, 100% 34%, 97% 68%, 100% 96%, 66% 100%, 34% 95%, 1% 100%, 3% 64%, 0 30%);
  transition:
    translate 0.18s ease,
    background-color 0.2s ease;
}
#diorama-lights {
  rotate: 1.4deg;
}
.paper-control:hover {
  translate: 0 -3px;
}
.paper-control:focus-visible {
  outline: 0;
  background-color: #fff3b8;
  box-shadow: inset 0 0 0 3px #2773aa;
}
.lights-track {
  position: relative;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  background: #e6d6b2;
  box-shadow: inset 0 2px 4px rgb(60 40 20 / 35%);
  transition: background 0.5s ease;
}
.lights-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0772f;
  box-shadow: 0 0 0 3px rgb(224 119 47 / 28%);
  transition:
    translate 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
    background 0.5s ease,
    box-shadow 0.5s ease;
}
.lights-label {
  min-width: 3.8em;
  text-align: left;
}

/* ---------- Nap time ---------- */
.diorama[data-time="night"] {
  --far: #3a4264;
  --mid: #2b3150;
  --near: #5e2c25;
  --ground: #0f110e;
  --cloud: #aeb0c8;
  --cloud-edge: #7e819e;
  --wall: #c7bda8;
  --roof: #3e1c14;
  --window: #ffe26a;
}
[data-time="night"] .diorama-sky::after {
  opacity: 1;
}
[data-time="night"] .star {
  translate: 0 0;
}
[data-time="night"] .hanging-sun svg {
  filter: drop-shadow(0 0 22px rgb(245 216 51 / 90%)) drop-shadow(0 0 70px rgb(245 200 51 / 60%));
}
[data-time="night"] .sun-rays {
  fill: #e0772f;
}
[data-time="night"] .house-window {
  filter: drop-shadow(0 0 8px #ffd84a);
}
[data-time="night"] .cutout {
  filter: drop-shadow(0 8px 7px rgb(0 0 0 / 50%)) brightness(0.62) saturate(0.8);
}
[data-time="night"] .cutout-robot {
  filter: drop-shadow(0 0 20px rgb(245 216 51 / 65%)) drop-shadow(0 8px 7px rgb(0 0 0 / 50%)) brightness(0.9);
}
[data-time="night"] .diorama-grain {
  mix-blend-mode: soft-light;
}
[data-time="night"] .lights-track {
  background: #2b3150;
}
[data-time="night"] .lights-knob {
  translate: 26px 0;
  background: #fbf2c8;
  box-shadow:
    inset -7px -3px 0 0 #d9cf9a,
    0 0 10px 2px rgb(255 240 170 / 55%);
}

@media (max-width: 1000px) {
  .diorama-content {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 214px;
  }
  .enrollment-tag {
    width: min(620px, 100%);
    margin-inline: auto;
    padding-top: 150px;
  }
  .enrollment-tag::after {
    height: 224px;
  }
  .film-frame {
    width: min(620px, 100%);
    margin: 0 auto;
  }
  .film-frame::before,
  .film-frame::after {
    height: 60px;
  }
  .hanging-sun {
    left: auto;
    right: 7%;
    width: 110px;
  }
  .cloud-one {
    left: 5%;
    width: 96px;
  }
  .cloud-two {
    left: 72%;
    display: none;
  }
}
@media (max-width: 700px) {
  .diorama {
    width: calc(100% - 20px);
    margin-top: 10px;
    border-radius: 22px;
  }
  .diorama::after {
    border-width: 20px;
    border-radius: 30px;
  }
  .diorama-content {
    padding: 0 20px 196px;
    gap: 28px;
  }
  .enrollment-tag {
    padding-top: 128px;
    rotate: -0.8deg;
  }
  .enrollment-tag::after {
    height: 200px;
  }
  .tag-card {
    padding: 74px 22px 30px;
    clip-path: polygon(0 44px, 44px 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  }
  .tag-card::before {
    inset: 11px;
  }
  .tag-grommet {
    top: 22px;
  }
  .tag-plate {
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .enrollment-tag h1 {
    font-size: clamp(33px, 9.4vw, 44px);
  }
  .film-frame {
    padding: 26px 10px 14px;
    rotate: 0.8deg;
  }
  .hanging-sun {
    right: 9%;
    width: 92px;
  }
  .cloud-one {
    left: 7%;
    width: 84px;
  }
  .cloud-one .hang-sway {
    --len: 24px;
  }
  .layer-far {
    height: 330px;
  }
  .layer-mid {
    height: 250px;
  }
  .layer-near {
    height: 176px;
  }
  .layer-ground {
    height: 112px;
  }
  .cutout-babies {
    right: 4%;
    bottom: 66px;
    width: 118px;
  }
  .cutout-baby {
    left: 38%;
    bottom: 26px;
    width: 50px;
  }
  .cutout-pointing {
    display: none;
  }
  .cutout-robot {
    left: auto;
    right: 5%;
    bottom: -6px;
    width: 118px;
  }
  .diorama-controls {
    left: 24px;
    bottom: 26px;
    gap: 8px;
  }
  .paper-control {
    min-height: 48px;
    padding: 8px 16px;
    gap: 9px;
    font-size: 17px;
  }
}
@media (max-width: 379px) {
  .lights-label {
    display: none;
  }
  .paper-control {
    padding-inline: 14px;
  }
  .cutout-robot {
    width: 96px;
  }
}

/* ---------- Ticker: a strip of yellow tape across the box ---------- */
.ticker-tape {
  position: relative;
  z-index: 5;
  width: min(1120px, calc(100% - 24px));
  margin: -30px auto 0;
  rotate: -1.1deg;
  filter: drop-shadow(0 8px 8px rgb(60 40 20 / 30%));
}
.ticker-tape .ticker {
  border: 0;
  transform: none;
  background-color: var(--yellow);
  background-image: var(--grain);
  color: var(--ink);
  font-weight: 600;
  clip-path: polygon(0 8%, 1.4% 30%, 0.4% 52%, 1.6% 76%, 0 100%, 100% 96%, 98.8% 70%, 100% 46%, 98.6% 22%, 100% 0);
}
.ticker-tape .ticker b {
  color: var(--rust);
}
@media (max-width: 700px) {
  .ticker-tape {
    margin-top: -22px;
  }
  .ticker-tape .ticker {
    gap: 8px 16px;
    padding: 13px 22px;
  }
}

/* ---------- The app: a screenshot taped onto stacked sheets ---------- */
.app-documentary {
  position: relative;
  isolation: isolate;
}
.app-documentary::before,
.app-documentary::after,
.public-page-example::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.app-documentary::before {
  inset: 10px -12px 44px 14px;
  background: var(--rust);
  rotate: 2.4deg;
  box-shadow: var(--paper-lift);
}
.app-documentary::after {
  inset: 18px 18px 36px -14px;
  background: var(--yellow) var(--grain);
  rotate: -2.6deg;
  box-shadow: var(--paper-lift);
}
.canvas-window {
  border-radius: 4px;
  box-shadow:
    0 2px 2px rgb(0 0 0 / 20%),
    0 24px 40px -18px rgb(20 20 10 / 60%);
}

/* ---------- The television: a photograph print, taped up ---------- */
.watch-section .tv-scene {
  position: relative;
  padding: 14px;
  background: var(--card) var(--grain);
  rotate: -0.6deg;
  box-shadow:
    0 2px 2px rgb(60 40 20 / 18%),
    0 30px 44px -22px rgb(60 40 20 / 55%);
}
.watch-section .photo-television {
  border-radius: 1px;
}
.watch-section {
  padding-top: 20px;
}

/* ---------- Community: three notes pinned to the wall ---------- */
.community-possibilities {
  gap: 34px;
  margin-top: 48px;
}
.community-possibilities article {
  position: relative;
  padding: 30px 26px 26px;
  border-top: 0;
  background: #fffaf0 var(--grain);
  box-shadow: var(--paper-lift);
  rotate: -1.3deg;
  transition:
    rotate 0.25s ease,
    translate 0.25s ease;
}
.community-possibilities article:nth-child(2) {
  background-color: var(--peach);
  rotate: 1deg;
  translate: 0 12px;
}
.community-possibilities article:nth-child(3) {
  background-color: #f8e8a4;
  rotate: -0.5deg;
}
.community-possibilities article::before {
  content: "";
  position: absolute;
  top: -13px;
  left: calc(50% - 50px);
  width: 100px;
  height: 26px;
  background: rgb(236 215 142 / 78%);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%);
  rotate: 3deg;
}
.community-possibilities article:hover {
  rotate: 0deg;
  translate: 0 -4px;
}
.community-possibilities p {
  color: #5a5d52;
}
.community-story-invite {
  position: relative;
  margin-top: 46px;
  background: var(--peach) var(--grain);
}
.community-story-invite::before,
.community-story-invite::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: var(--peach);
  -webkit-mask: var(--torn) repeat-x 0 100% / 700px 100%;
  mask: var(--torn) repeat-x 0 100% / 700px 100%;
}
.community-story-invite::before {
  bottom: calc(100% - 1px);
}
.community-story-invite::after {
  top: calc(100% - 1px);
  scale: 1 -1;
  -webkit-mask-position: 260px 100%;
  mask-position: 260px 100%;
}

/* ---------- Torn edges where black sheets meet the cream page ---------- */
.story-section,
.workspace-showcase,
.closing.shell {
  position: relative;
  border-top: 0;
  background-image: var(--grain);
}
.story-section::before,
.workspace-showcase::before,
.closing.shell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 34px;
  background: var(--rust);
  -webkit-mask: var(--torn) repeat-x 180px 100% / 760px 100%;
  mask: var(--torn) repeat-x 180px 100% / 760px 100%;
}
.story-section::after,
.workspace-showcase::after,
.closing.shell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 20px;
  background: #000;
  -webkit-mask: var(--torn) repeat-x 0 100% / 640px 100%;
  mask: var(--torn) repeat-x 0 100% / 640px 100%;
  pointer-events: none;
}
.workspace-showcase::before {
  background: var(--yellow);
}
.closing.shell::before {
  background: var(--yellow);
  height: 30px;
}
.closing.shell::after {
  background: #11162a;
}
.workspace-showcase {
  margin-top: 30px;
}
main {
  overflow-x: clip;
}
/* Cream sheets torn over the bottom of a black chapter. */
.workspace-types,
.community-story,
.public-page-showcase {
  position: relative;
}
.workspace-types::before,
.community-story::before,
.public-page-showcase::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  width: 100vw;
  height: 18px;
  translate: -50% 0;
  background: var(--paper);
  -webkit-mask: var(--torn) repeat-x 90px 100% / 700px 100%;
  mask: var(--torn) repeat-x 90px 100% / 700px 100%;
  pointer-events: none;
}
.public-page-showcase::before {
  -webkit-mask-position: 330px 100%;
  mask-position: 330px 100%;
}

/* ---------- The family: photos on a line ---------- */
.album-heading {
  position: relative;
}
.album-sticker {
  position: absolute;
  right: 170px;
  top: -30px;
  width: 64px;
  height: auto;
  rotate: 10deg;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 50%));
}
.album-photos {
  position: relative;
  padding-top: 26px;
  gap: 22px;
}
.album-photos::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 0;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q50 58 100 8' fill='none' stroke='%23b8a88f' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.album-photos figure {
  position: relative;
  padding: 9px 9px 30px;
  background: #fbf6ea var(--grain);
  box-shadow: 0 16px 22px -12px rgb(0 0 0 / 80%);
  transform-origin: 50% 0;
  rotate: -2.5deg;
  transition: rotate 0.4s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.album-photos figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -16px;
  left: calc(50% - 6px);
  width: 12px;
  height: 32px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c69a5f, #e1b97e 50%, #b98a52);
  box-shadow: 0 2px 3px rgb(0 0 0 / 45%);
}
.album-photos figure:nth-child(1) {
  margin-top: 4px;
}
.album-photos figure:nth-child(2) {
  margin-top: 16px;
  rotate: 2deg;
}
.album-photos figure:nth-child(3) {
  margin-top: 20px;
  rotate: -1deg;
}
.album-photos figure:nth-child(4) {
  margin-top: 16px;
  rotate: 3deg;
}
.album-photos figure:nth-child(5) {
  margin-top: 4px;
  rotate: -2deg;
}
.album-photos figure:hover {
  rotate: 0deg;
}
.album-photos .family-profile-caption {
  margin: 10px 0 -18px;
}
@media (max-width: 700px) {
  .album-sticker {
    right: 0;
    top: -8px;
    width: 52px;
  }
  .album-photos::before {
    display: none;
  }
  .album-photos {
    padding-top: 18px;
    gap: 26px 12px;
  }
  .album-photos figure,
  .album-photos figure:nth-child(n) {
    margin-top: 0;
    padding: 6px 6px 20px;
  }
}

/* ---------- Workspace types: cubby tags ---------- */
.workspace-types-list {
  gap: 26px 22px;
  filter: drop-shadow(0 2px 1px rgb(60 40 20 / 16%)) drop-shadow(0 10px 10px rgb(60 40 20 / 20%));
}
.workspace-types-list > div {
  position: relative;
  padding: 20px 20px 20px 44px;
  border-top: 0;
  background: #fffaf0 var(--grain);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  rotate: -0.8deg;
  transition: translate 0.2s ease;
}
.workspace-types-list > div::before {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow:
    inset 0 2px 3px rgb(60 40 20 / 45%),
    0 0 0 3px var(--ochre);
}
.workspace-types-list > div:nth-child(4n + 2) {
  background-color: var(--peach);
  rotate: 0.9deg;
}
.workspace-types-list > div:nth-child(4n + 3) {
  background-color: #f8e8a4;
  rotate: -0.4deg;
}
.workspace-types-list > div:nth-child(4n + 4) {
  background-color: #efe6d2;
  rotate: 1.1deg;
}
.workspace-types-list > div:hover {
  translate: 0 -3px;
}
.workspace-types-list dt {
  font-size: 24px;
  letter-spacing: -0.015em;
}
.workspace-types-list dd {
  color: #5a5d52;
}
@media (max-width: 700px) {
  .workspace-types-list {
    gap: 16px 12px;
  }
  .workspace-types-list > div {
    padding: 16px 12px 16px 32px;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  }
  .workspace-types-list > div::before {
    left: 10px;
    width: 11px;
    height: 11px;
    top: calc(50% - 5.5px);
    box-shadow:
      inset 0 2px 3px rgb(60 40 20 / 45%),
      0 0 0 2px var(--ochre);
  }
  .workspace-types-list dt {
    font-size: 19px;
  }
  .workspace-types-list dd {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ---------- Workspace showcase: folder tabs on a printed mat ---------- */
.workspace-switch,
.workspace-showcase .workspace-switch {
  gap: 6px;
  margin-top: 34px;
  border-bottom: 0;
  padding-left: 14px;
}
.workspace-switch button,
.workspace-showcase .workspace-switch button {
  padding: 12px 22px 10px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: #2c2f29;
  color: #c7c9bc;
  font: italic 500 18px var(--display);
}
.workspace-showcase .workspace-switch button[aria-pressed="true"] {
  background: #efe5cf;
  color: var(--ink);
}
.workspace-showcase .workspace-switch button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.workspace-preview {
  margin-top: 0;
}
.workspace-preview > a {
  display: block;
  padding: 12px;
  background: #efe5cf var(--grain);
  border-radius: 0 4px 4px;
  box-shadow: 0 30px 50px -24px rgb(245 216 51 / 18%);
}
.workspace-preview img {
  border-radius: 2px;
}
.workspace-preview figcaption {
  margin-top: 16px;
}

/* ---------- Public page ---------- */
.public-page-example {
  position: relative;
  isolation: isolate;
}
.public-page-example::before {
  inset: 16px -14px 30px 18px;
  background: var(--peach) var(--grain);
  rotate: 2.8deg;
  box-shadow: var(--paper-lift);
}
.public-page-example img {
  box-shadow:
    0 2px 2px rgb(0 0 0 / 20%),
    0 26px 40px -20px rgb(20 20 10 / 60%);
}
.public-page-benefits {
  list-style: none;
  padding-left: 0;
}
.public-page-benefits li {
  position: relative;
  padding-left: 30px;
}
.public-page-benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: var(--yellow);
  box-shadow:
    0 5px 0 -3px var(--ink),
    0 0 0 3px rgb(245 216 51 / 30%);
}

/* ---------- Rates: a rate sheet on stacked paper ---------- */
.rate-sheet {
  position: relative;
  isolation: isolate;
  border: 0;
  background: #fffaf0 var(--grain);
  box-shadow:
    0 2px 2px rgb(60 40 20 / 16%),
    0 30px 40px -24px rgb(60 40 20 / 45%);
}
.rate-sheet::before,
.rate-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #efe4cc;
  box-shadow: var(--paper-lift);
  pointer-events: none;
}
.rate-sheet::before {
  rotate: 1.4deg;
  translate: 8px 6px;
}
.rate-sheet::after {
  rotate: -1deg;
  translate: -6px 10px;
  background: var(--peach);
}
.rate-row + .rate-row {
  border-left: 1px dashed #c9bda6;
}
.rate-row:not(.rate-membership) {
  background: #fffaf0 var(--grain);
}
.rate-membership {
  background: var(--ink) var(--grain);
}
.rate-scholarship {
  border-top: 0;
  background: var(--peach) var(--grain);
  position: relative;
}
.rate-scholarship::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 14px;
  background: var(--peach);
  -webkit-mask: var(--torn) repeat-x 120px 100% / 600px 100%;
  mask: var(--torn) repeat-x 120px 100% / 600px 100%;
}
.rate-promise {
  background: #fffaf0 var(--grain);
}
.rate-row:not(.rate-membership) .rate-price {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
}
.membership-prices .rate-price strong {
  font-family: var(--display);
  font-weight: 600;
}
.billing-toggle {
  border-radius: 999px;
}
.billing-toggle label > span {
  border-radius: 999px;
}
@media (max-width: 700px) {
  .rate-row + .rate-row {
    border-left: 0;
    border-top: 1px dashed #c9bda6;
  }
}

/* ---------- Closing: lights out, the ideas keep glowing ---------- */
.closing.shell {
  isolation: isolate;
  margin-top: 40px;
  padding: 150px 24px 300px;
  background-color: #11162a;
  background-image: var(--grain), linear-gradient(#11162a, #262b46 70%, #3a3350);
}
.closing-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.closing-lights {
  position: absolute;
  inset: 0;
}
.night-bulb {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  padding-top: var(--len);
  transform-origin: 50% 0;
  animation: sway 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--delay) * -2);
}
.night-bulb::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.75px);
  width: 1.5px;
  height: calc(var(--len) + 4px);
  background: #6f6a7e;
}
.night-bulb svg {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgb(245 216 51 / 80%)) drop-shadow(0 0 40px rgb(245 200 51 / 45%));
}
.nb-socket {
  fill: #1b1d1a;
}
.nb-glass {
  fill: var(--yellow);
}
.nb-filament {
  fill: none;
  stroke: #e0772f;
  stroke-width: 2;
}
.closing-hill {
  position: absolute;
  left: -3%;
  width: 106%;
  bottom: -4px;
  display: block;
}
.closing-hill-back {
  height: 260px;
  filter: drop-shadow(0 -3px 8px rgb(0 0 0 / 40%));
}
.closing-hill-back path {
  fill: #2b3150;
}
.closing-hill-front {
  height: 130px;
  filter: drop-shadow(0 -4px 8px rgb(0 0 0 / 50%));
}
.closing-hill-front path {
  fill: #0d0f0c;
}
.closing-babies-wrap {
  position: absolute;
  left: 7%;
  bottom: 14px;
  width: 170px;
  rotate: -5deg;
}
.closing-babies {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 50%)) brightness(0.85);
}
.closing-robot-walk {
  position: absolute;
  right: 9%;
  bottom: -6px;
  width: 190px;
}
.closing-robot-cutout {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 22px rgb(245 216 51 / 55%)) drop-shadow(0 8px 8px rgb(0 0 0 / 50%));
}
.closing h2 {
  font-size: clamp(40px, 5.8vw, 84px);
  line-height: 1.02;
}
.closing .actions {
  position: relative;
}
@media (max-width: 700px) {
  .closing.shell {
    padding: 190px 20px 220px;
  }
  .closing-babies-wrap {
    left: 3%;
    width: 110px;
    bottom: 8px;
  }
  .closing-robot-walk {
    right: 3%;
    width: 120px;
  }
  .closing-hill-back {
    height: 190px;
  }
  .closing-hill-front {
    height: 96px;
  }
  .night-bulb:nth-child(2),
  .night-bulb:nth-child(5) {
    display: none;
  }
}
.footer {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .hang-sway,
  .night-bulb {
    animation: none;
  }
  [data-depth],
  .layer,
  .cutout,
  .star,
  .album-photos figure {
    transition: none;
  }
}

/* ---------- A quick headcount: idea babies everywhere, then the daycare ---------- */
.headcount {
  padding-block: 96px 40px;
}
.headcount-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}
.headcount-heading .eyebrow {
  color: var(--rust-deep);
}
.headcount-heading h2 {
  margin-bottom: 0;
}
.headcount-heading h2 em {
  color: var(--rust-deep);
}
.headcount-heading p:not(.eyebrow) {
  max-width: 540px;
  margin: 0 0 12px;
  font-size: 17px;
  color: #575c51;
}
.headcount-heading p:not(.eyebrow):first-child {
  font: italic 400 20px/1.45 var(--display);
  color: var(--ink);
}
.headcount-stage {
  --pl: 10%;
  --pb: 6%;
  --ph: 76%;
  --pen-x: 53%;
  --pen-y: 40%;
  --pen-w: 28%;
  --pen-h: 50%;
  --home-scale: 0.8;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 2 / 1;
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    0 2px 2px rgb(60 40 20 / 18%),
    0 40px 60px -36px rgb(36 40 33 / 65%);
}
.headcount-stage::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 40;
  border: 24px solid #efe3c8;
  border-radius: 34px;
  box-shadow:
    inset 0 0 0 1px rgb(80 55 30 / 22%),
    inset 0 6px 24px 4px rgb(60 38 18 / 38%);
  filter: url(#deckle);
  pointer-events: none;
}
.hc-scene {
  position: absolute;
  inset: 0;
}
.hc-wall {
  position: absolute;
  inset: 0;
  background-color: #f6ead3;
  background-image:
    var(--grain),
    radial-gradient(circle, rgb(184 83 47 / 16%) 2.5px, transparent 3px);
  background-size: auto, 36px 36px;
}
.hc-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: var(--peach) var(--grain);
  box-shadow: 0 -3px 8px rgb(60 38 18 / 22%);
}
.hc-floor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background: #d9b99a;
  -webkit-mask: var(--torn) repeat-x 0 100% / 520px 100%;
  mask: var(--torn) repeat-x 0 100% / 520px 100%;
  translate: 0 -10px;
}

/* The person: frazzled, then relieved. A paper puppet that flips over. */
.hc-person {
  position: absolute;
  z-index: 6;
  left: var(--pl);
  bottom: var(--pb);
  height: var(--ph);
  aspect-ratio: 460 / 940;
  perspective: 1400px;
  transform-origin: 50% 100%;
  animation: frazzled 0.5s ease-in-out infinite alternate;
}
@keyframes frazzled {
  from {
    rotate: -1.2deg;
  }
  to {
    rotate: 1.2deg;
  }
}
.hc-flip {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.3, 1.3) 0.4s;
}
.hc-flip img {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  backface-visibility: hidden;
  filter: drop-shadow(0 10px 10px rgb(36 25 15 / 30%));
}
/* The happy pose spends a lot of its height on the raised arm, so it is
   drawn taller and nudged over to put the head under the relief lines, and
   mirrored so he faces the daycare. */
.hc-flip .hc-calm {
  left: 56%;
  height: 118%;
  transform: rotateY(180deg) scaleX(-1);
}
.hc-stress,
.hc-relief {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 88%;
  width: 90%;
  translate: -50% 0;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    opacity 0.3s ease,
    scale 0.4s ease;
}
.hc-stress {
  stroke: var(--rust);
  stroke-width: 5;
  animation: stress 0.18s steps(2) infinite;
}
@keyframes stress {
  to {
    translate: -48% -3%;
  }
}
.hc-relief {
  stroke: var(--ochre);
  stroke-width: 6;
  opacity: 0;
  scale: 0.4;
}

/* The daycare: a paper playpen with a rug, a sign, and robot helpers. */
.hc-pen {
  position: absolute;
  z-index: 3;
  left: var(--pen-x);
  top: var(--pen-y);
  width: var(--pen-w);
  height: var(--pen-h);
}
.hc-pen-back,
.hc-pen-front {
  background:
    linear-gradient(var(--rail), var(--rail)) top / 100% 1.3cqi no-repeat,
    linear-gradient(var(--rail), var(--rail)) bottom / 100% 1.1cqi no-repeat,
    linear-gradient(90deg, var(--rail) 0 1.6cqi, transparent 1.6cqi calc(100% - 1.6cqi), var(--rail) 0),
    repeating-linear-gradient(90deg, transparent 0 1.4cqi, var(--slat) 1.4cqi 2.4cqi, transparent 2.4cqi 3.4cqi);
}
.hc-pen-back {
  --rail: #d9a75c;
  --slat: #ecc98a;
  position: absolute;
  inset: 0 3% auto;
  height: 56%;
  opacity: 0.9;
}
.hc-rug {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -3%;
  height: 34%;
  border-radius: 50%;
  background: #f5e2a0 var(--grain);
  box-shadow:
    inset 0 0 0 1cqi #f8ebc0,
    inset 0 0 0 1.8cqi var(--rust),
    0 6px 10px -4px rgb(60 38 18 / 35%);
}
.hc-pen-front {
  --rail: #b8742f;
  --slat: #e2ad45;
  position: absolute;
  z-index: 30;
  left: var(--pen-x);
  width: var(--pen-w);
  top: calc(var(--pen-y) + var(--pen-h) * 0.5);
  height: calc(var(--pen-h) * 0.5);
  filter: drop-shadow(0 8px 8px rgb(60 38 18 / 35%));
  pointer-events: none;
}
.hc-sign {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2.6cqi);
  translate: -50% 0;
  rotate: -2deg;
  filter: drop-shadow(0 6px 6px rgb(60 40 20 / 30%));
  transition: opacity 0.3s ease;
}
.hc-sign::before,
.hc-sign::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 1.5px;
  height: 200cqi;
  background: var(--string);
}
.hc-sign::before {
  left: 16%;
}
.hc-sign::after {
  right: 16%;
}
.hc-sign span {
  display: block;
  padding: 0.7cqi 2cqi;
  background: var(--yellow) var(--grain);
  font: 600 1.7cqi/1.2 var(--display);
  white-space: nowrap;
  color: var(--ink);
  clip-path: polygon(1% 6%, 50% 0, 99% 5%, 100% 50%, 98% 96%, 50% 100%, 2% 95%, 0 50%);
}
.hc-helper {
  position: absolute;
  z-index: 40;
  width: auto;
  filter: drop-shadow(0 8px 8px rgb(36 25 15 / 32%));
  opacity: 0;
  translate: 0 22%;
  scale: 0.7;
  transform-origin: 50% 100%;
  transition:
    opacity 0.3s ease,
    translate 0.7s cubic-bezier(0.34, 1.5, 0.5, 1),
    scale 0.7s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.hc-helper-nursery {
  left: 34%;
  bottom: 4%;
  height: 36%;
  rotate: -3deg;
}
.hc-helper-playground {
  right: 1.5%;
  bottom: 4%;
  height: 42%;
  rotate: 2deg;
}
.hc-blocks {
  position: absolute;
  z-index: 41;
  left: 62.5%;
  bottom: 4.5%;
  display: flex;
  align-items: flex-end;
  gap: 0.4cqi;
}
.hc-blocks span {
  display: grid;
  place-items: center;
  width: 2.2cqi;
  height: 2.2cqi;
  background: var(--yellow) var(--grain);
  box-shadow:
    inset 0 0 0 0.25cqi rgb(36 40 33 / 20%),
    0 4px 5px -2px rgb(36 25 15 / 40%);
  font: 700 1.4cqi/1 var(--display);
  color: var(--ink);
  opacity: 0;
  scale: 0.4;
  transition:
    opacity 0.25s ease,
    scale 0.5s cubic-bezier(0.34, 1.7, 0.5, 1);
}
.hc-blocks span:nth-child(2) {
  background-color: var(--rust);
  color: #fff4dc;
  rotate: 8deg;
}
.hc-blocks span:nth-child(3) {
  background-color: #fffaf0;
  rotate: -5deg;
}
.hc-blocks span:nth-child(4) {
  background-color: var(--ink);
  color: var(--yellow);
  rotate: 4deg;
}

/* The strays: each baby rides the scrap it was born on. */
.stray {
  position: absolute;
  z-index: calc(10 + var(--i));
  width: 13.5%;
  left: var(--lx);
  top: var(--ly);
  translate: -50% -50%;
  rotate: var(--lr);
  transition:
    left 0.9s cubic-bezier(0.55, 0, 0.25, 1) calc(var(--i) * 110ms),
    top 0.9s cubic-bezier(0.3, -0.55, 0.45, 1) calc(var(--i) * 110ms),
    rotate 0.9s ease calc(var(--i) * 110ms),
    scale 0.9s ease calc(var(--i) * 110ms);
}
.stray-body {
  position: relative;
  padding-top: 62%;
  animation: crawl 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.37s);
}
@keyframes crawl {
  from {
    translate: -0.5cqi 0;
    rotate: -4deg;
  }
  to {
    translate: 0.5cqi -0.4cqi;
    rotate: 4deg;
  }
}
.stray-baby {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 52%;
  height: auto;
  translate: -50% 0;
  scale: var(--flip) 1;
  filter: drop-shadow(0 5px 5px rgb(36 25 15 / 32%));
}
.scrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3cqi;
  min-height: 7cqi;
  margin: 0;
  padding: 3.6cqi 1.1cqi 1.1cqi;
  background: #fffdf6 var(--grain);
  box-shadow:
    0 1px 1px rgb(60 40 20 / 18%),
    0 8px 12px -6px rgb(60 40 20 / 45%);
  font: italic 500 1.2cqi/1.25 var(--display);
  color: var(--ink);
  text-align: center;
}
.scrap small {
  font: 600 0.8cqi/1.2 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.stray-napkin .scrap {
  background-image:
    var(--grain),
    repeating-linear-gradient(45deg, transparent 0 7px, rgb(120 100 80 / 7%) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgb(120 100 80 / 7%) 7px 8px);
  clip-path: polygon(0 2%, 6% 0, 12% 2%, 18% 0, 24% 2%, 30% 0, 36% 2%, 42% 0, 48% 2%, 54% 0, 60% 2%, 66% 0, 72% 2%, 78% 0, 84% 2%, 90% 0, 96% 2%, 100% 0, 100% 100%, 0 100%);
}
.stray-sticky .scrap {
  background-color: #f7df5e;
  box-shadow:
    0 1px 1px rgb(60 40 20 / 18%),
    6px 12px 12px -8px rgb(60 40 20 / 50%);
}
.stray-receipt .scrap {
  width: 78%;
  margin-inline: auto;
  padding-bottom: 2.2cqi;
  background-color: #fbfaf2;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 84% 94%, 76% 100%, 68% 94%, 60% 100%, 52% 94%, 44% 100%, 36% 94%, 28% 100%, 20% 94%, 12% 100%, 4% 94%, 0 100%);
}
.stray-phone .scrap {
  width: 70%;
  margin-inline: auto;
  border: 0.55cqi solid var(--ink);
  border-radius: 1.3cqi;
  background-color: #f3eee2;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1cqi;
}
.stray-memo .scrap {
  background: var(--rust) var(--grain);
  color: #fff4dc;
}
.stray-memo .scrap i {
  display: block;
  height: 1.8cqi;
  background: repeating-linear-gradient(90deg, #fff4dc 0 2px, transparent 2px 5px);
  -webkit-mask: linear-gradient(transparent 30%, #000 30% 70%, transparent 70%), radial-gradient(ellipse, #000 55%, transparent 56%);
  mask: radial-gradient(ellipse 50% 50%, #000 60%, transparent 62%);
  opacity: 0.85;
}
.stray-envelope .scrap {
  background-color: #efd9bd;
  background-image:
    var(--grain),
    linear-gradient(to bottom right, transparent 49.5%, rgb(120 80 40 / 25%) 50%, transparent 51%),
    linear-gradient(to bottom left, transparent 49.5%, rgb(120 80 40 / 25%) 50%, transparent 51%);
  background-size: auto, 50% 60%, 50% 60%;
  background-position: 0 0, 0 0, 100% 0;
  background-repeat: repeat, no-repeat, no-repeat;
}
.stray-thought .scrap {
  border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%;
  padding-inline: 1.8cqi;
  background-color: #fbfbf6;
}
.stray-late .scrap {
  background: #1e2238 var(--grain);
  color: var(--yellow);
}
.stray-late .scrap small {
  opacity: 1;
  color: #cfd0e0;
}

/* In the daycare: every stray hops into the playpen, or plays by the blocks. */
[data-state="home"] .stray {
  left: var(--hx);
  top: var(--hy);
  rotate: 0deg;
  scale: var(--home-scale);
}
[data-state="home"] .stray.on-floor {
  z-index: 42;
}
/* No more scraps of paper: the ideas are safe, so the scraps go away. */
.scrap {
  transition:
    opacity 0.4s ease,
    scale 0.4s ease;
}
[data-state="home"] .scrap {
  opacity: 0;
  scale: 0.5;
  transition-delay: calc(0.5s + var(--i) * 110ms);
}
[data-state="home"] .hc-person {
  animation: none;
}
[data-state="home"] .hc-flip {
  transform: rotateY(180deg);
}
[data-state="home"] .hc-stress {
  opacity: 0;
  scale: 0.4;
}
[data-state="home"] .hc-relief {
  opacity: 1;
  scale: 1;
  transition-delay: 1s;
}
[data-state="home"] .hc-helper {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition-delay: 1.1s;
}
[data-state="home"] .hc-helper-playground {
  transition-delay: 1.3s;
}
[data-state="home"] .hc-blocks span {
  opacity: 1;
  scale: 1;
  transition-delay: calc(1.5s + var(--b, 0) * 90ms);
}
.hc-blocks span:nth-child(2) {
  --b: 1;
}
.hc-blocks span:nth-child(3) {
  --b: 2;
}
.hc-blocks span:nth-child(4) {
  --b: 3;
}
[data-state="home"] .stray-body {
  animation: none;
}
.hc-note {
  position: absolute;
  left: 46%;
  top: 17%;
  z-index: 8;
  margin: 0;
  padding: 1.6cqi 2.6cqi;
  background: #fffaf0 var(--grain);
  box-shadow: var(--paper-lift);
  font: italic 500 2.2cqi/1.25 var(--display);
  color: var(--ink);
  text-align: center;
  translate: -50% -50%;
  rotate: -3deg;
  scale: 0.6;
  opacity: 0;
  transition:
    opacity 0.4s ease,
    scale 0.5s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.hc-note::before {
  content: "";
  position: absolute;
  top: -1.1cqi;
  left: calc(50% - 4cqi);
  width: 8cqi;
  height: 2.2cqi;
  background: rgb(236 215 142 / 80%);
  rotate: 4deg;
}
.hc-note em {
  display: block;
  color: var(--rust-deep);
}
[data-state="home"] .hc-note {
  opacity: 1;
  scale: 1;
  transition-delay: 1.5s;
}

.headcount-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 26px;
}
.headcount-controls .paper-control {
  filter: drop-shadow(0 6px 6px rgb(60 40 20 / 30%));
  rotate: -1.5deg;
  background-color: var(--yellow);
}
.headcount-controls .paper-control:focus-visible {
  background-color: #fff3b8;
}
.hc-lasso {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.headcount-count {
  margin: 0;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #62665a;
}
.headcount-count strong {
  display: inline-block;
  min-width: 1.2em;
  font: italic 600 24px/1 var(--display);
  color: var(--rust-deep);
  text-align: center;
}

@media (max-width: 900px) {
  .headcount-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
@media (max-width: 700px) {
  .headcount {
    padding-block: 60px 24px;
  }
  .headcount-stage {
    --pl: 34%;
    --pb: 50%;
    --ph: 40%;
    --pen-x: 31%;
    --pen-y: 64%;
    --pen-w: 65%;
    --pen-h: 32%;
    --home-scale: 0.85;
    aspect-ratio: 3 / 5;
    border-radius: 20px;
  }
  .headcount-stage::after {
    border-width: 18px;
    border-radius: 28px;
  }
  .hc-floor {
    height: 6%;
  }
  .hc-note {
    left: 50%;
    top: 57%;
    padding: 3cqi 5cqi;
    font-size: 5cqi;
  }
  .hc-note::before {
    top: -2cqi;
    height: 4cqi;
    width: 14cqi;
    left: calc(50% - 7cqi);
  }
  .hc-sign {
    bottom: calc(100% - 2cqi);
    z-index: 1;
  }
  .hc-sign::before,
  .hc-sign::after {
    display: none;
  }
  [data-state="home"] .hc-sign {
    opacity: 0;
  }
  .hc-pen-back,
  .hc-pen-front {
    background:
      linear-gradient(var(--rail), var(--rail)) top / 100% 2.4cqi no-repeat,
      linear-gradient(var(--rail), var(--rail)) bottom / 100% 2cqi no-repeat,
      linear-gradient(90deg, var(--rail) 0 3cqi, transparent 3cqi calc(100% - 3cqi), var(--rail) 0),
      repeating-linear-gradient(90deg, transparent 0 2.6cqi, var(--slat) 2.6cqi 4.4cqi, transparent 4.4cqi 6.2cqi);
  }
  .hc-rug {
    box-shadow:
      inset 0 0 0 2cqi #f8ebc0,
      inset 0 0 0 3.4cqi var(--rust),
      0 6px 10px -4px rgb(60 38 18 / 35%);
  }
  .hc-helper-nursery {
    left: 0;
    bottom: 3%;
    height: 17%;
  }
  .hc-helper-playground,
  .hc-blocks {
    display: none;
  }
  [data-state="home"] .stray {
    left: var(--mhx);
    top: var(--mhy);
  }
  .hc-sign span {
    padding: 1.4cqi 4cqi;
    font-size: 4cqi;
  }
  .stray {
    width: 25%;
    left: var(--mlx);
    top: var(--mly);
  }
  .scrap {
    min-height: 13cqi;
    padding: 6.5cqi 2cqi 2cqi;
    gap: 0.6cqi;
    font-size: 2.6cqi;
  }
  .scrap small {
    font-size: 1.8cqi;
  }
  .stray-phone .scrap {
    border-width: 1cqi;
    border-radius: 2.4cqi;
    font-size: 2.2cqi;
  }
  .stray-memo .scrap i {
    height: 3.4cqi;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stray-body,
  .hc-person,
  .hc-stress {
    animation: none;
  }
  .stray,
  .hc-flip,
  .hc-helper,
  .hc-blocks span {
    transition: none;
  }
}

/* The TV sits right under the hero's tape strip, then the headcount follows. */
.watch-section {
  padding-top: 64px;
}
.headcount {
  padding-top: 40px;
}
@media (max-width: 700px) {
  .watch-section {
    padding-top: 44px;
  }
  .headcount {
    padding-top: 24px;
  }
}

/* A hand-drawn arrow nudging visitors toward Focus mode. */
.workspace-switch {
  position: relative;
  align-items: flex-end;
}
.focus-hint {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  align-self: center;
  margin: -34px 0 0 6px;
  color: var(--yellow);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.focus-hint svg {
  width: 150px;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.focus-hint > span {
  margin-top: -4px;
  font: italic 500 21px/1.1 var(--display);
  white-space: nowrap;
  rotate: -4deg;
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}
.focus-hint-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.2s;
}
.focus-hint-head {
  opacity: 0;
  transition: opacity 0.2s ease 1.25s;
}
.is-hinting .focus-hint-line {
  stroke-dashoffset: 0;
}
.is-hinting .focus-hint-head,
.is-hinting .focus-hint > span {
  opacity: 1;
}
.is-hinting .focus-hint svg {
  animation: hint-nudge 3.2s ease-in-out 1.8s infinite;
}
@keyframes hint-nudge {
  0%,
  70%,
  100% {
    translate: 0 0;
  }
  78% {
    translate: -8px 3px;
  }
  86% {
    translate: 0 0;
  }
  92% {
    translate: -5px 2px;
  }
}
.is-explored .focus-hint {
  opacity: 0;
}
@media (max-width: 700px) {
  .focus-hint {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    margin: 0;
    align-items: center;
    gap: 0;
  }
  .focus-hint svg {
    order: 2;
    width: 74px;
    rotate: -78deg;
    translate: -6px 16px;
  }
  .focus-hint > span {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-hint-line,
  .focus-hint-head,
  .focus-hint > span {
    transition: none;
  }
  .is-hinting .focus-hint svg {
    animation: none;
  }
}

/* The start button sits above the scene in orange and pulses until pressed. */
.headcount-controls {
  margin: 0 0 26px;
}
.headcount-controls #headcount-toggle {
  position: relative;
  isolation: isolate;
  min-height: 60px;
  padding: 12px 28px;
  gap: 14px;
  border-radius: 6px;
  clip-path: none;
  background: #e8702a var(--grain);
  color: #fff8ea;
  font-size: 22px;
  font-weight: 600;
  rotate: -1.2deg;
  filter: none;
  box-shadow:
    0 5px 0 -1px #a8461c,
    0 16px 22px -8px rgb(120 50 15 / 55%);
  animation: cta-breathe 1.4s ease-in-out infinite alternate;
  transition:
    background-color 0.2s ease,
    translate 0.18s ease;
}
.headcount-controls #headcount-toggle:hover {
  background-color: #f27f35;
  animation-play-state: paused;
}
.headcount-controls #headcount-toggle:focus-visible {
  background-color: #f27f35;
  box-shadow:
    0 5px 0 -1px #a8461c,
    0 0 0 4px #fff8ea,
    0 0 0 7px #2773aa;
}
#headcount-toggle .hc-lasso {
  stroke: #fff8ea;
  width: 30px;
  height: 30px;
}
.hc-toggle-ring {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 8px;
  border: 3px solid #e8702a;
  pointer-events: none;
  animation: cta-ripple 1.8s ease-out infinite;
}
@keyframes cta-breathe {
  to {
    scale: 1.05;
  }
}
@keyframes cta-ripple {
  from {
    opacity: 0.9;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.14 1.55;
  }
}
/* Once the babies are in, it calms down into a quiet replay button. */
.headcount.is-home #headcount-toggle {
  min-height: 52px;
  padding: 10px 22px;
  background-color: var(--card);
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  box-shadow: var(--paper-lift);
  animation: none;
}
.headcount.is-home #headcount-toggle .hc-lasso {
  stroke: var(--ink);
}
.headcount.is-home .hc-toggle-ring {
  display: none;
}
@media (max-width: 700px) {
  .headcount-controls {
    margin-bottom: 18px;
  }
  .headcount-controls #headcount-toggle {
    min-height: 54px;
    padding: 10px 20px;
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .headcount-controls #headcount-toggle,
  .hc-toggle-ring {
    animation: none;
  }
  .hc-toggle-ring {
    display: none;
  }
}

/* ---------- Workspace types: an aisle of idea babies' first homes ---------- */
.aisle {
  --row: 300px;
  position: relative;
  margin-top: 150px;
}
.aisle-unit {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  overflow: hidden;
  background: #0c0c0b;
  box-shadow:
    0 2px 2px rgb(40 25 10 / 25%),
    0 40px 60px -36px rgb(20 20 15 / 75%);
}
/* The same torn cream mat as the other framed scenes. */
.aisle-unit::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 5;
  border: 24px solid #efe3c8;
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 1px rgb(80 55 30 / 22%),
    inset 0 6px 24px 4px rgb(0 0 0 / 55%);
  filter: url(#deckle);
  pointer-events: none;
}
.aisle-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 40px 20px 14px;
  background: linear-gradient(#050505, #121211);
  box-shadow: 0 8px 14px rgb(0 0 0 / 60%);
}
.aisle-sign {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 10px 24px 11px;
  background: var(--yellow) var(--grain);
  color: var(--ink);
  font: italic 500 22px/1.1 var(--display);
  rotate: -1.5deg;
  clip-path: polygon(1% 8%, 30% 0, 70% 6%, 99% 0, 100% 50%, 98% 96%, 60% 100%, 30% 94%, 2% 100%, 0 50%);
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 50%));
}
.aisle-sign span {
  padding: 3px 9px 4px;
  background: var(--ink);
  color: var(--yellow);
  font: 600 12px/1.2 var(--mono);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.aisle-shelves {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--row);
  margin: 0;
  padding: 0 0 70px;
  list-style: none;
  background: url("/assets/images/paper/shelf-band.webp") 18% 0 / auto var(--row) repeat;
}
.aisle-item {
  position: relative;
}
/* The object sits on the shelf floor, about three quarters down the band. */
.aisle-item img {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: auto;
  height: auto;
  max-width: 54%;
  max-height: 50%;
  translate: -50% 0;
  rotate: calc((var(--i) - 3.5) * 1.1deg);
  filter: drop-shadow(0 12px 8px rgb(0 0 0 / 70%)) drop-shadow(0 2px 1px rgb(0 0 0 / 60%));
  transform-origin: 50% 100%;
  transition:
    translate 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) calc(var(--i) * 90ms),
    opacity 0.3s ease calc(var(--i) * 90ms),
    scale 0.25s ease;
}
.aisle-item:nth-child(odd) img {
  rotate: calc((3.5 - var(--i)) * 0.9deg);
}
.aisle-item:hover img {
  scale: 1.06;
  transition-delay: 0s;
}
.aisle.is-waiting:not(.is-stocked) .aisle-item img {
  translate: -50% -90px;
  opacity: 0;
}
/* Our shelf tags replace the price tags, clipped to the chrome edge. */
.aisle-tag {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 85%;
  width: min(190px, 78%);
  padding: 8px 11px 9px;
  translate: -50% 0;
  background: #fffdf5 var(--grain);
  box-shadow:
    0 2px 2px rgb(0 0 0 / 45%),
    0 12px 14px -6px rgb(0 0 0 / 70%);
  rotate: -1deg;
}
.aisle-item:nth-child(3n + 2) .aisle-tag {
  rotate: 1.2deg;
}
.aisle-item:nth-child(3n) .aisle-tag {
  background-color: #fbeb9e;
}
.aisle-tag::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% - 18px);
  width: 36px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(#d9dbd6, #a3a6a0);
  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}
.aisle-tag h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.aisle-tag p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #55584e;
}
.aisle-robot,
.aisle-babies {
  position: absolute;
  z-index: 6;
  height: auto;
  filter: drop-shadow(0 8px 6px rgb(36 25 15 / 35%));
}
.aisle-robot {
  left: 3%;
  bottom: calc(100% - 14px);
  width: 96px;
  rotate: -3deg;
}
.aisle-babies {
  right: 5%;
  bottom: calc(100% - 18px);
  width: 150px;
  rotate: 4deg;
}
@media (max-width: 900px) {
  .aisle {
    --row: 270px;
  }
  .aisle-shelves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .aisle {
    --row: 236px;
    margin-top: 120px;
  }
  .aisle-unit {
    border-radius: 18px;
  }
  .aisle-unit::after {
    border-width: 16px;
    border-radius: 26px;
  }
  .aisle-header {
    padding: 26px 14px 10px;
  }
  .aisle-sign {
    gap: 10px;
    padding: 8px 16px 9px;
    font-size: 17px;
  }
  .aisle-sign span {
    font-size: 10px;
  }
  .aisle-shelves {
    padding: 0 8px 60px;
  }
  .aisle-item img {
    max-width: 66%;
    max-height: 50%;
  }
  .aisle-tag {
    width: 92%;
    padding: 7px 8px 8px;
  }
  .aisle-tag h3 {
    font-size: 16px;
  }
  .aisle-tag p {
    font-size: 11.5px;
  }
  .aisle-robot {
    width: 70px;
  }
  .aisle-babies {
    width: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aisle-item img {
    transition: none;
  }
  .aisle.is-waiting:not(.is-stocked) .aisle-item img {
    translate: -50% 0;
    opacity: 1;
  }
}

/* ---------- Closing: idea babies peek over the hill, the robot walks its rounds ---------- */
.closing-scene {
  container-type: inline-size;
}
.closing-peek {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--w);
  translate: 0 105%;
  animation: peek 8s ease-in-out var(--delay) infinite;
}
.closing-peek img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 6px 6px rgb(0 0 0 / 50%)) brightness(0.9);
  animation: peek-look 8s ease-in-out var(--delay) infinite;
}
@keyframes peek {
  0%,
  8% {
    translate: 0 105%;
  }
  16%,
  40% {
    translate: 0 -22%;
  }
  46% {
    translate: 0 -12%;
  }
  52% {
    translate: 0 -24%;
  }
  60%,
  100% {
    translate: 0 105%;
  }
}
@keyframes peek-look {
  0%,
  18% {
    rotate: 0deg;
  }
  24% {
    rotate: -9deg;
  }
  32% {
    rotate: 8deg;
  }
  38%,
  100% {
    rotate: 0deg;
  }
}
.closing-babies-wrap {
  animation: trio-peek 11s ease-in-out 2.5s infinite;
}
@keyframes trio-peek {
  0%,
  70%,
  100% {
    translate: 0 0;
  }
  76%,
  88% {
    translate: 0 -26%;
  }
}

/* The robot walks left, turns, walks back, and waddles the whole way. */
.closing-robot-walk {
  animation: robot-rounds 26s ease-in-out infinite;
}
.closing-robot-turn {
  animation: robot-turn 26s steps(1) infinite;
}
.closing-robot-cutout {
  transform-origin: 50% 100%;
  animation:
    robot-waddle 0.55s ease-in-out infinite alternate,
    robot-glow 2.6s ease-in-out infinite alternate;
}
@keyframes robot-rounds {
  0%,
  8% {
    translate: 0 0;
  }
  42%,
  54% {
    translate: -34cqi 0;
  }
  88%,
  100% {
    translate: 0 0;
  }
}
@keyframes robot-turn {
  0% {
    scale: 1 1;
  }
  48% {
    scale: -1 1;
  }
}
@keyframes robot-waddle {
  from {
    rotate: -4deg;
    translate: 0 0;
  }
  to {
    rotate: 4deg;
    translate: 0 -3px;
  }
}
@keyframes robot-glow {
  from {
    filter: drop-shadow(0 0 12px rgb(245 216 51 / 35%)) drop-shadow(0 8px 8px rgb(0 0 0 / 50%));
  }
  to {
    filter: drop-shadow(0 0 30px rgb(245 216 51 / 80%)) drop-shadow(0 8px 8px rgb(0 0 0 / 50%));
  }
}

/* Now and then a bulb flickers. */
.night-bulb:nth-child(2) svg,
.night-bulb:nth-child(5) svg {
  animation: flicker 7s linear infinite;
}
.night-bulb:nth-child(5) svg {
  animation-delay: -3.5s;
}
@keyframes flicker {
  0%,
  90%,
  100% {
    opacity: 1;
  }
  91%,
  93.5% {
    opacity: 0.35;
  }
  92.5%,
  95% {
    opacity: 0.9;
  }
}

/* Only animate while the closing is on screen. */
.closing:not(.is-live) .closing-scene *,
.closing:not(.is-live) .closing-scene {
  animation-play-state: paused;
}
@media (max-width: 700px) {
  .closing-peek.peek-extra {
    display: none;
  }
  .closing-peek {
    --w: 46px;
  }
  @keyframes robot-rounds {
    0%,
    8% {
      translate: 0 0;
    }
    42%,
    54% {
      translate: -48cqi 0;
    }
    88%,
    100% {
      translate: 0 0;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .closing-peek,
  .closing-peek img,
  .closing-babies-wrap,
  .closing-robot-walk,
  .closing-robot-turn,
  .closing-robot-cutout,
  .night-bulb svg {
    animation: none;
  }
  .closing-peek {
    display: none;
  }
}

/* ---------- Hero: the daycare schoolhouse on the hill, and a crib mobile ---------- */
.diorama {
  --trim: var(--yellow);
  --roof-deep: #7a2f1a;
}
.diorama[data-time="night"] {
  --trim: #c9a82a;
  --roof-deep: #2c140d;
}
.school {
  position: absolute;
  right: 5%;
  bottom: 124px;
  width: min(32%, 450px);
  height: auto;
  overflow: visible;
  transition:
    translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.school > *,
.school g > * {
  transition: fill 0.9s ease;
}
.school-wall {
  fill: var(--wall);
  filter: drop-shadow(0 4px 5px rgb(60 30 10 / 30%));
}
.school-shadow {
  fill: rgb(60 30 10 / 25%);
}
.school-roof {
  fill: var(--roof);
  filter: drop-shadow(0 5px 5px rgb(40 15 5 / 35%));
}
.school-roof-deep {
  fill: var(--roof-deep);
}
.school-trim {
  fill: var(--trim);
  filter: drop-shadow(0 3px 3px rgb(40 15 5 / 30%));
}
.school-sign rect {
  fill: #fffaf0;
  filter: drop-shadow(0 3px 3px rgb(40 15 5 / 30%));
}
.school-sign {
  transform: rotate(-1.5deg);
  transform-origin: 210px 243px;
}
.school-sign text {
  fill: var(--ink);
  font: 700 21px var(--display);
  letter-spacing: 0.06em;
}
.school-window {
  fill: var(--window);
  transition:
    fill 0.9s ease,
    filter 0.9s ease;
}
.school-frame {
  fill: none;
  stroke: var(--roof-deep);
  stroke-width: 6;
}
.school-mullion {
  stroke: var(--roof-deep);
  stroke-width: 4;
}
.school-door {
  fill: var(--ground);
}
.school-knob {
  fill: var(--yellow);
}
.school-bunting-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.school-flag-rust {
  fill: var(--rust);
}
.school-flag-yellow {
  fill: var(--yellow);
}
.school-bulb {
  fill: var(--yellow);
  transition: filter 0.9s ease;
}
.school-smoke circle {
  fill: #fffaf0;
  opacity: 0.85;
  animation: smoke 5s ease-in-out infinite;
}
.school-smoke circle:nth-child(2) {
  animation-delay: -1.6s;
}
.school-smoke circle:nth-child(3) {
  animation-delay: -3.2s;
}
@keyframes smoke {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.85;
  }
  50% {
    translate: 6px -6px;
    opacity: 0.55;
  }
}
[data-time="night"] .school-window {
  filter: drop-shadow(0 0 10px #ffd84a);
}
[data-time="night"] .school-bulb {
  filter: drop-shadow(0 0 10px #ffe46a) drop-shadow(0 0 24px rgb(245 216 51 / 70%));
}
[data-time="night"] .school-smoke circle {
  fill: #8d90ad;
}

.hanging-mobile {
  left: 86%;
  width: 150px;
}
.hanging-mobile .hang-sway {
  --len: 34px;
  --sway: 7s;
}
.hanging-mobile svg {
  filter: drop-shadow(0 8px 8px rgb(90 50 15 / 28%));
}
.mobile-strings {
  fill: none;
  stroke: var(--string);
  stroke-width: 1.5;
}
.mobile-hoop {
  fill: none;
  stroke: var(--ochre);
  stroke-width: 6;
}
.mobile-piece {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: dangle 3.2s ease-in-out var(--d) infinite alternate;
}
@keyframes dangle {
  from {
    rotate: -7deg;
  }
  to {
    rotate: 7deg;
  }
}
.mp-yellow {
  fill: var(--yellow);
}
.mp-rust {
  fill: var(--rust);
}
.mp-peach {
  fill: #e98f6b;
}
.mp-cream {
  fill: #fffaf0;
}
.mp-ink {
  fill: var(--ink);
}
.mp-line {
  fill: none;
  stroke: var(--rust-deep);
  stroke-width: 2;
}
[data-time="night"] .mobile-piece .mp-yellow {
  filter: drop-shadow(0 0 6px rgb(245 216 51 / 80%));
}
/* The hero now has one column of copy; the scene fills the right side. */
.diorama-content {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
@media (max-width: 1000px) {
  .hanging-mobile {
    display: none;
  }
  .diorama-content {
    grid-template-columns: 1fr;
    padding-bottom: 330px;
  }
  .school {
    right: 50%;
    translate: 50% 0;
    bottom: 96px;
    width: min(56%, 380px);
  }
  .cutout-robot {
    left: auto;
    right: 4%;
  }
}
@media (max-width: 700px) {
  .diorama-content {
    padding-bottom: 250px;
  }
  .school {
    right: 4%;
    left: auto;
    translate: none;
    bottom: 100px;
    width: 58%;
  }
  .cutout-robot,
  .cutout-babies {
    display: none;
  }
  .channel-film .tape-right {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .school-smoke circle,
  .mobile-piece {
    animation: none;
  }
}

/* ---------- The Daycare Channel: a paper theater ---------- */
.channel {
  --curtain: repeating-linear-gradient(90deg, #6d2215 0, #a8402a 16px, #c75a3c 24px, #9a3722 36px, #6d2215 48px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 0 150px;
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%, rgb(245 216 51 / 16%), transparent 70%),
    radial-gradient(ellipse at 50% 0%, #4a1e14, #22100b 70%);
  color: #f6f1e5;
}
.channel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.8;
  pointer-events: none;
}
/* Scalloped valance across the top. */
.channel-valance {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: var(--curtain);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 27px, #000 28px) 0 0 / 80px 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, transparent 27px, #000 28px) 0 0 / 80px 100% repeat-x;
  filter: drop-shadow(0 10px 10px rgb(0 0 0 / 55%));
}
.channel-valance::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  height: 7px;
  background: var(--ochre);
}
/* Curtains gathered back at the sides like a paper puppet theater. */
.channel-curtain {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 60px;
  width: 15%;
  background: var(--curtain);
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / 55%));
}
.channel-curtain-left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 88% 18%, 60% 48%, 34% 60%, 46% 74%, 64% 100%, 0 100%);
}
.channel-curtain-right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 36% 100%, 54% 74%, 66% 60%, 40% 48%, 12% 18%);
}
.channel-curtain::after {
  content: "";
  position: absolute;
  top: 57%;
  width: 60%;
  height: 16px;
  background: var(--ochre);
  box-shadow: 0 3px 4px rgb(0 0 0 / 40%);
}
.channel-curtain-left::after {
  left: 18%;
  rotate: -18deg;
}
.channel-curtain-right::after {
  right: 18%;
  rotate: 18deg;
}
.channel-floor {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  background:
    linear-gradient(rgb(0 0 0 / 55%), transparent 30%),
    repeating-linear-gradient(90deg, #8a5a2b 0 118px, #6f4520 118px 121px),
    #8a5a2b;
  box-shadow: 0 -6px 14px rgb(0 0 0 / 50%);
}
.channel-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
}
.channel-stage {
  position: relative;
  z-index: 4;
}

/* The marquee, with chasing bulbs. */
.marquee {
  --bulb: radial-gradient(circle, #fff1a8 0 3.5px, transparent 4.5px);
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 64px;
  padding: 30px 56px 28px;
  background: #1b1310 var(--grain);
  border: 4px solid var(--ochre);
  border-radius: 12px;
  text-align: center;
  rotate: -1deg;
  box-shadow:
    0 0 0 8px #1b1310,
    0 24px 40px -12px rgb(0 0 0 / 70%),
    0 0 60px rgb(245 216 51 / 12%);
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px #ffd84a);
  animation: chase 0.9s steps(1) infinite;
}
.marquee::before {
  background:
    var(--bulb) 0 0 / 24px 10px repeat-x,
    var(--bulb) 0 100% / 24px 10px repeat-x,
    var(--bulb) 0 0 / 10px 24px repeat-y,
    var(--bulb) 100% 0 / 10px 24px repeat-y;
}
.marquee::after {
  background:
    var(--bulb) 12px 0 / 24px 10px repeat-x,
    var(--bulb) 12px 100% / 24px 10px repeat-x,
    var(--bulb) 0 12px / 10px 24px repeat-y,
    var(--bulb) 100% 12px / 10px 24px repeat-y;
  animation-delay: -0.45s;
}
@keyframes chase {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
.marquee-kicker {
  margin: 0;
  font: 600 12px/1.4 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e9c9a4;
}
.marquee-title {
  margin: 6px 0 20px;
  font: italic 600 clamp(48px, 7vw, 96px)/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--yellow);
  text-shadow:
    0 0 24px rgb(245 216 51 / 45%),
    0 3px 0 #8f6e10;
}

.channel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.channel-film {
  position: relative;
  margin: 0;
  padding: 26px 16px 16px;
  background: var(--card) var(--grain);
  color: var(--ink);
  rotate: -1.4deg;
  box-shadow:
    0 2px 2px rgb(0 0 0 / 30%),
    0 34px 50px -20px rgb(0 0 0 / 80%);
}
.channel-film .film-slate {
  padding: 0 0 12px;
  color: #6b6358;
}
.channel-film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  object-fit: contain;
}
.channel-film .film-caption {
  color: #6b6358;
}
.channel-rec {
  position: absolute;
  top: -22px;
  right: -18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--rust) var(--grain);
  color: #fff4dc;
  font: 700 15px/1 var(--mono);
  letter-spacing: 0.16em;
  rotate: 8deg;
  box-shadow: 0 8px 12px -4px rgb(0 0 0 / 60%);
}
.channel-rec::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5a3c;
  box-shadow: 0 0 8px #ff5a3c;
  animation: rec-blink 1.2s steps(1) infinite;
}
@keyframes rec-blink {
  50% {
    opacity: 0.2;
  }
}
.channel-copy .eyebrow {
  color: var(--yellow);
}
.channel-copy h2 {
  color: #fffaf0;
}
.channel-copy h2 em {
  color: var(--yellow);
}
.channel-copy > p:not(.eyebrow) {
  max-width: 520px;
  font-size: 17px;
  color: #eadfcf;
}
.channel-copy .channel-free {
  font: italic 400 20px/1.45 var(--display);
  color: #fffaf0;
}
.button.channel-subscribe {
  gap: 12px;
  background: #e8452c;
  color: #fff8ea;
  box-shadow:
    0 4px 0 -1px #9a2716,
    0 14px 20px -8px rgb(0 0 0 / 70%);
}
.button.channel-subscribe:hover {
  box-shadow:
    0 6px 0 -1px #9a2716,
    0 18px 22px -8px rgb(0 0 0 / 70%);
}
.channel-subscribe .yt-play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 20px;
  border-radius: 6px;
  background: #fff8ea;
}
.channel-subscribe .yt-play::after {
  content: "";
  border-left: 8px solid #e8452c;
  border-block: 5px solid transparent;
  margin-left: 2px;
}
.channel-copy .text-link:hover {
  color: var(--yellow);
}
.channel-copy .button:focus-visible,
.channel-copy .text-link:focus-visible {
  outline-color: var(--yellow);
}
.call-sheet {
  position: relative;
  max-width: 330px;
  margin-top: 34px;
  padding: 18px 22px 16px;
  background: #fffaf0 var(--grain);
  color: var(--ink);
  rotate: 2deg;
  box-shadow: 0 16px 22px -10px rgb(0 0 0 / 70%);
}
.call-sheet::before {
  content: "";
  position: absolute;
  top: -12px;
  left: calc(50% - 45px);
  width: 90px;
  height: 24px;
  background: rgb(236 215 142 / 85%);
  rotate: -4deg;
}
.call-sheet-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px dashed #c9b79c;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.call-sheet dl {
  margin: 0;
}
.call-sheet dl > div {
  display: flex;
  gap: 10px;
  padding: 3px 0;
}
.call-sheet dt {
  min-width: 82px;
  font: 600 11px/1.9 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6358;
}
.call-sheet dd {
  margin: 0;
  font: italic 500 16px/1.5 var(--display);
}
/* The black family chapter tears into the theater. */
.story-section + .channel {
  margin-top: 0;
}
@media (max-width: 900px) {
  .channel-grid {
    grid-template-columns: 1fr;
  }
  .channel-copy {
    max-width: 620px;
  }
  .channel-curtain {
    width: 9%;
  }
}
@media (max-width: 700px) {
  .channel {
    padding: 110px 0 120px;
  }
  .channel-valance {
    height: 70px;
    -webkit-mask-size: 56px 100%;
    mask-size: 56px 100%;
  }
  .channel-valance::after {
    top: 38px;
    height: 5px;
  }
  .channel-curtain {
    width: 7%;
    bottom: 50px;
  }
  .channel-curtain::after {
    display: none;
  }
  .channel-floor {
    height: 56px;
  }
  .marquee {
    margin-bottom: 44px;
    padding: 24px 26px 22px;
  }
  .marquee-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .channel-film {
    padding: 22px 10px 12px;
    rotate: -0.8deg;
  }
  .channel-rec {
    top: -18px;
    right: -6px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee::before,
  .marquee::after,
  .channel-rec::before {
    animation: none;
  }
}

/* An idea baby floats over the scene in a paper balloon. */
.balloon {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 20%;
  width: 104px;
}
.balloon svg {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 10px rgb(90 50 15 / 28%));
  animation: balloon-float 9s ease-in-out infinite alternate;
}
@keyframes balloon-float {
  0% {
    translate: 0 0;
    rotate: -2deg;
  }
  50% {
    translate: 26px -16px;
    rotate: 2deg;
  }
  100% {
    translate: -14px 8px;
    rotate: -1deg;
  }
}
.balloon-rust {
  fill: var(--rust);
}
.balloon-yellow {
  fill: var(--yellow);
}
.balloon-cream {
  fill: #fffaf0;
}
.balloon-ropes {
  stroke: var(--string);
  stroke-width: 1.5;
}
.balloon-basket {
  fill: #9a6a35;
}
.balloon-weave {
  stroke: #6f4520;
  stroke-width: 2;
}
[data-time="night"] .balloon svg {
  filter: drop-shadow(0 0 16px rgb(245 216 51 / 35%));
}
/* The babies wave from the grass beside the daycare, not in its doorway. */
.cutout-babies {
  right: 1%;
  bottom: 62px;
  width: 140px;
}
@media (max-width: 1000px) {
  .balloon {
    left: auto;
    right: 8%;
    top: auto;
    bottom: 360px;
    width: 80px;
  }
}
@media (max-width: 700px) {
  .balloon {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .balloon svg {
    animation: none;
  }
}

/* ---------- Daycare page: its place inside Age of Robots ---------- */
.parent-strip {
  margin: 0;
  background: var(--ink);
  text-align: center;
}
.parent-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  color: #f6f1e5;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.parent-strip img {
  width: 18px;
  height: auto;
}
.parent-strip a:hover {
  color: var(--yellow);
}
.aor-band {
  position: relative;
  padding-block: 90px;
  background: #22100b var(--grain);
  color: #f6f1e5;
}
.aor-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22px;
  background: var(--curtain, repeating-linear-gradient(90deg, #6d2215 0, #a8402a 16px, #c75a3c 24px, #9a3722 36px, #6d2215 48px));
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 10px, #000 11px) 0 0 / 32px 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, transparent 10px, #000 11px) 0 0 / 32px 100% repeat-x;
}
.aor-band-inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.aor-band-robot {
  flex-shrink: 0;
  width: 130px;
  height: auto;
  rotate: -4deg;
  filter: drop-shadow(0 12px 10px rgb(0 0 0 / 60%));
}
.aor-band-ticket {
  position: relative;
  flex: 1;
  max-width: 760px;
  padding: 34px 40px 30px;
  background: #fffaf0 var(--grain);
  color: var(--ink);
  rotate: -0.8deg;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 16px, #000 17px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 16px, #000 17px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 16px, #000 17px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 16px, #000 17px) right / 51% 100% no-repeat;
}
.aor-band-ticket .eyebrow {
  color: var(--rust-deep);
}
.aor-band-ticket h2 {
  margin-top: 8px;
}
.aor-band-ticket h2 em {
  color: var(--rust-deep);
}
.aor-band-ticket > p:not(.eyebrow) {
  max-width: 560px;
  font-size: 17px;
}
.aor-band-ticket .text-link:hover {
  color: var(--rust-deep);
}
@media (max-width: 700px) {
  .aor-band {
    padding-block: 64px;
  }
  .aor-band-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .aor-band-robot {
    width: 90px;
    margin-bottom: -40px;
    position: relative;
    z-index: 1;
  }
  .aor-band-ticket {
    padding: 30px 26px 26px;
  }
}

/* ---------- Hero chaos: idea babies on the loose, robots in pursuit ----------
   Each chaser runs its baby's exact path a beat behind (same keyframes, a
   later delay), so it always arrives just after the baby has gone. Runners
   start once the pop-up has stood them up. */
.chase {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  container-type: inline-size;
  pointer-events: none;
  --start: 2s;
}
.runner {
  position: absolute;
  bottom: 12px;
  left: var(--x);
  width: var(--w);
  animation: var(--run) var(--dur) ease-in-out calc(var(--start) + var(--lag, 0s)) infinite;
}
.runner.chaser {
  bottom: -8px;
}
.runner-turn {
  transform-origin: 50% 100%;
  animation: var(--turn) var(--dur) steps(1) calc(var(--start) + var(--lag, 0s)) infinite;
}
.chase .runner img {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  rotate: 0deg;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 7px rgb(36 25 15 / 32%));
}
/* Babies bound along; robots waddle as fast as robots can. */
.chase-baby {
  animation: baby-bound 0.3s ease-in-out infinite alternate;
}
.chase-pointer,
.chase-bulbs,
.chase-playground {
  animation: robot-waddle 0.34s ease-in-out infinite alternate;
}
@keyframes baby-bound {
  from {
    translate: 0 0;
    rotate: -8deg;
  }
  to {
    translate: 0 -22%;
    rotate: 8deg;
  }
}

/* A: the big chase across the middle of the lawn. */
.run-a {
  --run: run-a;
  --turn: turn-a;
  --dur: 12s;
  --x: 42cqi;
  --w: clamp(44px, 5.4vw, 76px);
}
.run-a.chaser {
  --lag: 1.25s;
  --w: clamp(100px, 12.5vw, 176px);
  --x: 38cqi;
}
@keyframes run-a {
  0% {
    translate: 0 0;
  }
  18%,
  26% {
    translate: 28cqi 0;
  }
  42%,
  50% {
    translate: -14cqi 0;
  }
  64%,
  72% {
    translate: 10cqi 0;
  }
  90%,
  100% {
    translate: 0 0;
  }
}
@keyframes turn-a {
  0% {
    scale: 1 1;
  }
  26% {
    scale: -1 1;
  }
  50% {
    scale: 1 1;
  }
  72% {
    scale: -1 1;
  }
}
/* The bulb robot lunges for the baby just as it slips away, and faceplants. */
.run-a.chaser .runner-turn {
  animation:
    turn-a 12s steps(1) calc(var(--start) + var(--lag)) infinite,
    dive 12s ease-in-out calc(var(--start) + var(--lag)) infinite;
}
@keyframes dive {
  0%,
  17%,
  25.5%,
  100% {
    rotate: 0deg;
  }
  19%,
  23.5% {
    rotate: 38deg;
  }
}

/* B: a smaller loop on the left, with the pointing robot on its heels. */
.run-b {
  --run: run-b;
  --turn: turn-b;
  --dur: 8s;
  --x: 31cqi;
  --w: clamp(40px, 4.8vw, 66px);
}
.run-b.chaser {
  --lag: 1.05s;
  --w: clamp(72px, 8.4vw, 118px);
  --x: 30cqi;
}
@keyframes run-b {
  0% {
    translate: 0 0;
  }
  22%,
  32% {
    translate: -12cqi 0;
  }
  58%,
  68% {
    translate: 8cqi 0;
  }
  86%,
  100% {
    translate: 0 0;
  }
}
@keyframes turn-b {
  0% {
    scale: -1 1;
  }
  32% {
    scale: 1 1;
  }
  68% {
    scale: -1 1;
  }
}

/* C: every so often a baby streaks the whole width, a robot in hot pursuit. */
.run-c {
  --run: run-c;
  --turn: none;
  --dur: 13s;
  --x: 104cqi;
  --w: clamp(40px, 4.8vw, 66px);
}
.run-c.chaser {
  --lag: 0.9s;
  --w: clamp(90px, 10.5vw, 148px);
  --x: 106cqi;
}
/* Both run right to left, so both face left. */
.run-c .runner-turn {
  scale: -1 1;
}
@keyframes run-c {
  0%,
  58% {
    translate: 0 0;
  }
  78%,
  100% {
    translate: -125cqi 0;
  }
}

/* The trio by the school can't stop giggling. */
.cutout-babies {
  animation: giggle 1.7s ease-in-out infinite;
}
@keyframes giggle {
  0%,
  34%,
  100% {
    scale: 1 1;
  }
  8% {
    scale: 1.05 0.94;
  }
  16% {
    scale: 0.96 1.05;
  }
  24% {
    scale: 1.02 0.98;
  }
}

/* On phones the Daytime switch covers the left of the lawn, so the main
   chase runs on the open right side and the small loop sits out. */
@media (max-width: 700px) {
  .chase {
    height: 180px;
  }
  .run-a {
    --x: 52cqi;
  }
  .run-a.chaser {
    --x: 46cqi;
  }
  .run-b {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .runner,
  .runner-turn,
  .chase .runner img,
  .cutout-babies {
    animation: none !important;
  }
  .run-c {
    display: none;
  }
}

/* ---------- The kids peek over the community notes ----------
   Waist-up cutouts stand on each note's top edge as if hiding behind it. */
.community-possibilities {
  margin-top: 150px;
}
.peek {
  position: absolute;
  right: 22px;
  bottom: calc(100% - 2px);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.peek img {
  display: block;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 -2px 6px rgb(60 40 20 / 18%));
  transform-origin: 50% 100%;
  transition: translate 0.3s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.pk-lg {
  height: 142px;
}
.pk-md {
  height: 126px;
}
.pk-sm {
  height: 108px;
}
.peek-trio img + img {
  margin-left: -18px;
}
/* Hovering a note makes them pop up a little higher to see. */
.community-possibilities article:hover .peek img {
  translate: 0 -10px;
}
.community-possibilities article:hover .peek img:nth-child(2) {
  transition-delay: 0.05s;
}
.community-possibilities article:hover .peek img:nth-child(3) {
  transition-delay: 0.1s;
}
@media (max-width: 900px) {
  .community-possibilities {
    row-gap: 150px;
  }
}

/* ---------- Header: one clear door to the other half of the family ----------
   The channel links to the daycare with a yellow cut-paper button, and the
   daycare links back to the channel with a black one, next to each page's
   own action (Subscribe / Sign in). No other menu. */
.site-switch {
  display: flex;
  align-items: center;
  gap: 18px;
}
.switch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 18px 7px 12px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.05;
  text-decoration: none;
  rotate: -1.5deg;
  transition:
    translate 0.18s ease,
    rotate 0.18s ease,
    box-shadow 0.18s ease;
}
.switch-btn:hover {
  translate: 0 -2px;
  rotate: 0deg;
}
.switch-btn:focus-visible {
  outline: 3px solid #2773aa;
  outline-offset: 3px;
}
.switch-label {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.switch-label small {
  font: 600 9.5px/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.switch-daycare {
  background: var(--yellow) var(--grain);
  color: var(--ink);
  box-shadow:
    0 4px 0 -1px #b99a1d,
    0 12px 16px -8px rgb(36 40 33 / 55%);
}
.switch-daycare:hover {
  color: var(--ink);
}
/* An idea baby hops out of the button now and then. */
.switch-baby {
  width: 22px;
  height: auto;
  margin: -14px 0 -6px;
  transform-origin: 50% 100%;
  animation: switch-hop 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgb(60 40 20 / 30%));
}
@keyframes switch-hop {
  0%,
  70%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  78% {
    translate: 0 -7px;
    rotate: -10deg;
  }
  86% {
    translate: 0 0;
    rotate: 8deg;
  }
}
.switch-channel {
  background: #151515;
  color: #f6f1e5;
  rotate: 1.5deg;
  box-shadow:
    0 4px 0 -1px #e8452c,
    0 12px 16px -8px rgb(36 40 33 / 55%);
}
.switch-channel:hover {
  color: #fff;
}
/* A tiny YouTube-red play button with a blinking REC light. */
.switch-icon {
  position: relative;
  width: 26px;
  height: 19px;
  border-radius: 5px;
  background: #e8452c;
}
.switch-icon::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  border-left: 8px solid #fff;
  border-block: 4.5px solid transparent;
}
.switch-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2px #151515;
  animation: rec-blink 1.2s steps(1) infinite;
}
@media (max-width: 700px) {
  .site-header {
    flex-wrap: nowrap;
  }
  .site-switch {
    gap: 10px;
  }
  .switch-btn {
    min-height: 42px;
    padding: 6px 12px 6px 9px;
    font-size: 13.5px;
    gap: 7px;
  }
  .switch-label small {
    display: none;
  }
  .brand-note {
    display: none;
  }
}
@media (max-width: 420px) {
  .site-header {
    gap: 8px;
  }
  .brand {
    gap: 7px;
  }
  .brand img,
  .aor-page .brand img {
    width: 30px;
    height: auto;
  }
  .brand > span {
    font-size: 13.5px;
  }
  .site-switch {
    gap: 8px;
  }
  .switch-btn {
    padding: 6px 10px 6px 8px;
    font-size: 13px;
  }
  .site-switch .sign-in {
    padding-inline: 9px;
    font-size: 13px;
  }
  .site-switch .sign-in span {
    display: none;
  }
}
@media (max-width: 350px) {
  .brand > span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .switch-baby,
  .switch-icon::after {
    animation: none;
  }
}

/* Membership: straight to the app stores, no detour through the page. */
.rate-cta-label {
  margin: 26px 0 12px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
}
.rate-stores {
  gap: 14px 16px;
  margin-top: 0;
}
.button.rate-android {
  background: #f6f1e5 var(--grain);
  color: var(--ink);
  rotate: 0.8deg;
  box-shadow:
    0 4px 0 -1px var(--rust),
    0 12px 16px -8px rgb(0 0 0 / 55%);
}
.button.rate-android:hover {
  color: var(--ink);
}

/* ---------- Reviews: notes stuck on the family fridge ----------
   Placeholder reviews from the family, framed honestly as the staff's own
   (biased) opinions until real ones come in. Notes land on the door one by
   one when the section scrolls in (.fridge.is-live, marketing.js). */
.fridge {
  --hand: "Gochi Hand", var(--display);
  --marker: "Permanent Marker", var(--display);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-block: 110px 120px;
}
.fridge-head .eyebrow {
  color: var(--rust-deep);
}
.fridge-head h2 {
  margin: 12px 0 16px;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
}
.fridge-head h2 em {
  color: var(--rust-deep);
}
.fridge-head > p:last-child {
  max-width: 360px;
  font-size: 17px;
  color: #55584e;
}

/* The door: enameled paper with a chrome handle and a rounded corner. */
.fridge-door {
  position: relative;
  padding: 44px 40px 34px 64px;
  border-radius: 26px 26px 18px 18px;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 55%), transparent 22%, transparent 70%, rgb(255 255 255 / 25%) 88%, transparent),
    #cfe3dc var(--grain);
  box-shadow:
    inset 0 0 0 1px rgb(40 70 60 / 18%),
    inset -10px -12px 24px rgb(40 70 60 / 16%),
    0 2px 2px rgb(60 40 20 / 18%),
    0 40px 60px -34px rgb(36 40 33 / 70%);
  rotate: 0.6deg;
}
.fridge-handle {
  position: absolute;
  left: 20px;
  top: 16%;
  width: 16px;
  height: 46%;
  border-radius: 10px;
  background: linear-gradient(90deg, #8f9a97, #eef2f1 40%, #aab4b1 70%, #7c8683);
  box-shadow: 3px 6px 8px rgb(30 50 45 / 35%);
}
.fridge-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.note {
  position: relative;
  padding: 26px 18px 16px;
  background: #fffdf6 var(--grain);
  box-shadow: 0 14px 18px -10px rgb(30 50 45 / 50%);
  rotate: var(--r);
  transition: rotate 0.25s ease, translate 0.25s ease;
}
.note:hover {
  rotate: 0deg;
  translate: 0 -4px;
}
.note:nth-child(4) {
  grid-column: 1 / span 2;
  justify-self: end;
  width: 70%;
}
.note-lined {
  background:
    repeating-linear-gradient(transparent 0 23px, rgb(39 115 170 / 18%) 23px 24px) 0 20px / 100% calc(100% - 20px) no-repeat,
    #fffdf6 var(--grain);
}
.note-yellow {
  background-color: #f8e8a4;
}
.note-pink {
  background-color: #f7d3d8;
}
/* Kid notes: construction paper, crayon handwriting. */
/* The torn edge is on a backing sheet, so the magnet isn't clipped. */
.note-crayon {
  isolation: isolate;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 12px 10px rgb(30 50 45 / 35%));
}
.note-crayon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f5efe0 var(--grain);
  clip-path: polygon(1% 3%, 30% 0, 62% 2%, 99% 0, 100% 40%, 98% 72%, 100% 99%, 64% 97%, 30% 100%, 0 98%, 2% 60%);
}
.note blockquote {
  margin: 0;
  font: italic 500 17px/1.4 var(--display);
  color: var(--ink);
}
.note-crayon blockquote {
  font: 400 22px/1.2 var(--hand);
  color: #2f4fa0;
}
.note-small blockquote {
  font-size: 30px;
  color: #c9331e;
}
.stars {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 2px;
  color: #e2ad45;
  text-shadow: 0 1px 0 rgb(120 80 10 / 35%);
}
.note-crayon .stars {
  font: 400 20px/1 var(--marker);
  color: #e8452c;
  letter-spacing: 1px;
}
.note-by {
  margin: 12px 0 0;
  font: 700 15px/1.2 var(--sans);
  color: var(--ink);
}
.note-by span {
  display: block;
  margin-top: 3px;
  font: 600 10px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.note-crayon .note-by {
  font: 400 19px/1.1 var(--hand);
}

/* Fridge magnets. */
.magnet {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  filter: drop-shadow(2px 5px 3px rgb(20 40 35 / 40%));
}
.magnet-bulb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff39a, #f5d833 55%, #b89a10);
}
.magnet-heart {
  width: 26px;
  height: 26px;
  background: #e8452c;
  clip-path: path("M13 25C3 17 0 12 0 7.5 0 3 3.5 0 7.5 0c2.4 0 4.3 1.3 5.5 3 1.2-1.7 3.1-3 5.5-3C22.5 0 26 3 26 7.5 26 12 23 17 13 25z");
}
.magnet-robot {
  width: 30px;
  height: 26px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 45%, #fff 0 3px, #242821 3.5px 5px, transparent 5.5px),
    radial-gradient(circle at 70% 45%, #fff 0 3px, #242821 3.5px 5px, transparent 5.5px),
    #d8341c;
}
.magnet-star {
  width: 32px;
  height: 32px;
  background: #2773aa;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 97%, 50% 75%, 20% 97%, 30% 60%, 0 38%, 38% 36%);
}
.magnet-letter {
  top: -20px;
  font: 400 40px/1 var(--marker);
  color: #3aa35a;
  -webkit-text-stroke: 1px rgb(0 0 0 / 15%);
}
.fridge-disclaimer {
  margin: 26px 0 0;
  text-align: right;
  font: 600 10.5px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4d6a61;
}

/* Notes land one by one. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .fridge .note {
    opacity: 0;
    translate: 0 -30px;
  }
  .fridge.is-live .note {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.3s ease calc(var(--n) * 0.18s),
      translate 0.5s cubic-bezier(0.34, 1.6, 0.5, 1) calc(var(--n) * 0.18s),
      rotate 0.25s ease;
  }
  .fridge.is-live .note:hover {
    translate: 0 -4px;
  }
}
.note:nth-child(1) { --n: 0; }
.note:nth-child(2) { --n: 1; }
.note:nth-child(3) { --n: 2; }
.note:nth-child(4) { --n: 3; }
.note:nth-child(5) { --n: 4; }

@media (max-width: 1100px) {
  .fridge {
    grid-template-columns: 1fr;
  }
  .fridge-head {
    text-align: center;
  }
  .fridge-head > p:last-child {
    margin-inline: auto;
  }
}
@media (max-width: 760px) {
  .fridge {
    padding-block: 80px 90px;
  }
  .fridge-door {
    padding: 36px 18px 26px 40px;
  }
  .fridge-handle {
    left: 12px;
    width: 12px;
  }
  .fridge-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 14px;
  }
  .note:nth-child(4) {
    grid-column: auto;
    width: auto;
  }
  .note:nth-child(1) {
    grid-column: 1 / -1;
  }
  .note blockquote {
    font-size: 15.5px;
  }
  .note-crayon blockquote {
    font-size: 19px;
  }
  .stars {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .note-small .stars {
    font-size: 14px;
    letter-spacing: 0;
  }
  .note-small blockquote {
    font-size: 24px;
  }
}

/* ---------- The kitchen wall behind the fridge ----------
   A full-bleed mustard wallpaper band breaks up the cream page between
   pricing and the family, and gives the reviews some punk: a sticker
   slapped on the door, magnet letters, duct tape, a crayon drawing, and a
   marker strike through "un" in the headline. */
.fridge-wall {
  position: relative;
  margin-top: 40px;
  background:
    radial-gradient(circle at 50% 50%, rgb(184 83 47 / 30%) 0 2.5px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(circle at 50% 50%, rgb(255 250 230 / 45%) 0 2px, transparent 2.5px) 17px 17px / 34px 34px,
    var(--grain),
    #e9bf45;
}
.fridge-wall::before,
.fridge-wall::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--paper);
  pointer-events: none;
}
.fridge-wall::before {
  top: -1px;
  -webkit-mask: var(--torn) repeat-x 60px 0 / 700px 100%;
  mask: var(--torn) repeat-x 60px 0 / 700px 100%;
  rotate: 180deg;
}
.fridge-wall::after {
  bottom: -1px;
  -webkit-mask: var(--torn) repeat-x 260px 100% / 640px 100%;
  mask: var(--torn) repeat-x 260px 100% / 640px 100%;
}
.fridge-wall .fridge-head .eyebrow,
.fridge-wall .fridge-head h2 em {
  color: #7a2410;
}
.fridge-wall .fridge-head > p:last-child {
  color: #3d2e14;
}
.strike {
  position: relative;
  color: #7a2410;
}
.strike::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -8%;
  top: 52%;
  height: 0.12em;
  background: var(--ink);
  border-radius: 3px;
  rotate: -8deg;
}
.fridge-door {
  background:
    linear-gradient(100deg, rgb(255 255 255 / 55%), transparent 22%, transparent 70%, rgb(255 255 255 / 25%) 88%, transparent),
    #d9ece6 var(--grain);
}

/* Magnet letters on the top edge. */
.fridge-letters {
  position: absolute;
  top: 12px;
  right: 34px;
  display: flex;
  gap: 2px;
  margin: 0;
}
.fridge-letters span {
  font: 400 34px/1 "Permanent Marker", var(--display);
  filter: drop-shadow(2px 4px 2px rgb(20 40 35 / 35%));
}
.fridge-letters span:nth-child(1) {
  color: #d8341c;
  rotate: -10deg;
}
.fridge-letters span:nth-child(2) {
  color: #2773aa;
  rotate: 6deg;
}
.fridge-letters span:nth-child(3) {
  color: #3aa35a;
  rotate: -4deg;
}
.fridge-letters span:nth-child(4) {
  color: #e2ad45;
  rotate: 12deg;
}
.fridge-door {
  padding-top: 64px;
}

/* A punk sticker slapped across the corner of the door. */
.fridge-sticker {
  position: absolute;
  z-index: 3;
  left: -34px;
  bottom: 40px;
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: #151515;
  color: var(--yellow);
  font: 400 17px/1 "Allerta Stencil", "Permanent Marker", var(--mono);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  rotate: -16deg;
  box-shadow:
    0 0 0 4px #fff,
    0 12px 16px -4px rgb(0 0 0 / 50%);
}

/* A crayon drawing taped to the door. */
.fridge-drawing {
  position: absolute;
  z-index: 1;
  left: 40px;
  bottom: -26px;
  width: 170px;
  margin: 0;
  padding: 10px 10px 6px;
  background: #fff var(--grain);
  rotate: -5deg;
  box-shadow: 0 12px 16px -8px rgb(30 50 45 / 55%);
}
.fridge-drawing::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 40%;
  width: 60px;
  height: 20px;
  background: rgb(236 215 142 / 80%);
  rotate: 4deg;
}
.fridge-drawing svg {
  display: block;
  width: 100%;
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cr-sun {
  stroke: #e2ad45;
}
.cr-bot {
  stroke: #d8341c;
}
.cr-baby {
  stroke: #e0772f;
}
.cr-heart {
  stroke: #e8457a;
}
.cr-ground {
  stroke: #3aa35a;
}
.fridge-drawing figcaption {
  font: 400 15px/1 "Gochi Hand", var(--display);
  color: #2f4fa0;
  text-align: right;
}

/* Duct tape instead of a magnet on one note. */
.duct-strip {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 90px;
  height: 26px;
  translate: -50% 0;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 12%) 0 2px, transparent 2px 5px),
    linear-gradient(#b9bcbd, #8f9496);
  clip-path: polygon(0 12%, 6% 0, 12% 14%, 18% 2%, 82% 0, 88% 16%, 94% 3%, 100% 14%, 97% 50%, 100% 88%, 93% 100%, 87% 86%, 80% 100%, 20% 98%, 13% 86%, 7% 100%, 0 90%, 3% 50%);
  rotate: -4deg;
}
.fridge .fridge-disclaimer {
  padding-left: 190px;
}

/* ---------- The family, now on cream so the page ends on one dark night ---------- */
.fridge-wall + .story-section {
  background-color: var(--paper);
  color: var(--ink);
  padding-block: 110px 110px;
}
.fridge-wall + .story-section::before,
.fridge-wall + .story-section::after {
  display: none;
}
.fridge-wall + .story-section .eyebrow,
.fridge-wall + .story-section .story-layout > .eyebrow {
  color: var(--rust-deep);
}
.fridge-wall + .story-section h2 {
  color: var(--ink);
}
.fridge-wall + .story-section .story-layout p:not(.eyebrow) {
  color: #4f5248;
}
.fridge-wall + .story-section .story-layout .story-signoff,
.fridge-wall + .story-section .story-signoff {
  color: var(--rust-deep) !important;
  border-color: var(--rust);
}
.fridge-wall + .story-section .hand-note {
  color: var(--rust-deep);
}
.fridge-wall + .story-section .album-photos figure {
  box-shadow:
    0 2px 2px rgb(60 40 20 / 18%),
    0 22px 28px -14px rgb(60 40 20 / 50%);
}
.fridge-wall + .story-section .album-sticker {
  filter: drop-shadow(0 6px 6px rgb(60 40 20 / 30%));
}

@media (max-width: 760px) {
  .fridge-sticker {
    left: -14px;
    bottom: auto;
    top: -34px;
    width: 76px;
    height: 76px;
    font-size: 13px;
  }
  .fridge-letters span {
    font-size: 26px;
  }
  .fridge-drawing {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 30px auto 0;
  }
  .fridge .fridge-disclaimer {
    padding-left: 0;
  }
}

/* ---------- The team: staff ID badges ----------
   A lean startup team row (photo, name, title, one line) dressed as
   laminated daycare staff badges on clips, with staff numbers, a barcode,
   and whether the head is human or cardboard. */
.team {
  padding-block: 110px 120px;
}
.team-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.team-head .eyebrow {
  color: var(--rust-deep);
}
.team-head h2 {
  margin: 12px 0 14px;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.02;
}
.team-head h2 em {
  color: var(--rust-deep);
}
.team-head > p:last-child {
  margin: 0;
  font-size: 17px;
  color: #4f5248;
}
.badges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.badge {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: #fffdf6 var(--grain);
  box-shadow:
    inset 0 0 0 1px rgb(60 40 20 / 10%),
    0 2px 2px rgb(60 40 20 / 14%),
    0 22px 28px -16px rgb(60 40 20 / 48%);
  rotate: calc((var(--i) - 2) * 0.8deg);
  transform-origin: 50% -30px;
  transition: rotate 0.35s cubic-bezier(0.34, 1.5, 0.5, 1), translate 0.25s ease;
}
/* Laminate sheen. */
.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgb(255 255 255 / 45%), transparent 30%, transparent 70%, rgb(255 255 255 / 20%));
  pointer-events: none;
}
.badge:hover {
  rotate: 0deg;
  translate: 0 -4px;
}
/* The metal clip and the punched slot. */
.badge-clip {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 34px;
  height: 24px;
  translate: -50% 0;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(90deg, #8f9a97, #eef2f1 45%, #aab4b1 70%, #7c8683);
  box-shadow: 0 3px 4px rgb(30 30 30 / 30%);
}
.badge-clip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 26px;
  height: 7px;
  translate: -50% 0;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: inset 0 1px 2px rgb(60 40 20 / 35%);
}
.badge-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0 10px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--yellow);
  font: 600 8.5px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge-top span:last-child {
  color: #f6f1e5;
}
.badge img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}
.badge h3 {
  margin: 12px 0 2px;
  font-size: 24px;
  line-height: 1.1;
}
.badge-role {
  margin: 0;
  font: 600 10.5px/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.badge-line {
  margin: 8px 0 12px;
  font: italic 400 15px/1.4 var(--display);
  color: #4f5248;
}
.badge-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-top: 9px;
  border-top: 1.5px dashed #d8c7a8;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a6a55;
}
.badge-code {
  width: 58px;
  height: 16px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px);
  opacity: 0.8;
}
/* Cardboard heads get a red strip. */
.badge:nth-child(n + 3) .badge-top {
  background: #c9331e;
}
.badge:nth-child(n + 3) .badge-top span:first-child {
  color: #fff4e0;
}
@media (max-width: 1100px) {
  .badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 22px;
  }
}
@media (max-width: 640px) {
  .team {
    padding-block: 80px 90px;
  }
  .badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 14px;
  }
  .badge {
    padding: 12px 10px 10px;
  }
  .badge h3 {
    font-size: 20px;
  }
  .badge-line {
    font-size: 13.5px;
  }
  .badge-top {
    font-size: 7.5px;
    letter-spacing: 0.06em;
  }
  .badge-top span:first-child {
    display: none;
  }
  .badge:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);
  }
}

/* ---------- Hero: what a new member pays ---------- */
.enrollment-tag .hero-trial {
  margin: 14px 0 0;
  font: 500 14px/1.45 var(--sans);
  color: #62665a;
}

/* ---------- Step 3: Free to Build ----------
   Copy on the left, a daycare adoption slip on the right: releasing an idea
   Free to Build lets anyone raise it. (Held the agent permission slip until
   agents went on hold, 28 Sep 2026.) */
.adopt-section {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 55px;
  align-items: center;
  padding-block: 65px 40px;
}
.adopt-copy .eyebrow {
  color: var(--rust-deep);
}
.adopt-copy > p:not(.eyebrow) {
  font-size: 18px;
}
.adopt-slip {
  position: relative;
  max-width: 420px;
  justify-self: center;
  padding: 26px 28px 24px;
  background: #fffaf0 var(--grain);
  border: 2px dashed #c9b894;
  box-shadow: var(--paper-lift);
  rotate: 1.2deg;
}
.adopt-slip-title {
  margin: 0;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.adopt-slip-name {
  margin: 12px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3d8bf;
  font: 600 20px/1.2 var(--display);
}
.adopt-slip-name span {
  font-family: "Permanent Marker", var(--display);
  font-weight: 400;
  color: #2b4c9b;
}
.adopt-slip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.adopt-slip li {
  position: relative;
  margin-block: 10px;
  padding-left: 32px;
  font-size: 16px;
}
.adopt-slip li::before {
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #6d7064;
  font: 400 17px/20px "Permanent Marker", var(--display);
  text-align: center;
}
.adopt-slip li.yes::before {
  content: "✓";
  color: #2b4c9b;
}
.adopt-slip li.no::before {
  content: "✗";
  color: var(--rust-deep);
}
.adopt-slip li.no {
  color: #7a7d70;
  text-decoration: line-through;
  text-decoration-color: rgb(163 71 45 / 55%);
}
/* A rubber stamp across the slip. */
.adopt-slip-stamp {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 1;
  padding: 6px 16px;
  border: 3px solid rgb(184 83 47 / 85%);
  border-radius: 6px;
  translate: -50% -50%;
  rotate: -12deg;
  font: 400 clamp(22px, 3vw, 30px)/1 "Permanent Marker", var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(184 83 47 / 88%);
  background: rgb(255 250 240 / 55%);
  pointer-events: none;
  white-space: nowrap;
}
.adopt-slip-sign {
  margin: 16px 0 0;
  text-align: right;
  font: italic 400 16px/1 var(--display);
  color: #62665a;
}
.adopt-slip-sign em {
  font: 400 22px/1 "Permanent Marker", var(--display);
  color: #2b4c9b;
}
@media (max-width: 900px) {
  .adopt-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 700px) {
  .adopt-section {
    padding-block: 36px 10px;
  }
}

/* The hero's "Android or browser" link lands here; leave room above it. */
#get-the-app {
  scroll-margin-top: 140px;
}

/* ---------- More than ideas: two notes, family and game night ---------- */
.more-rooms .community-possibilities {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
}
@media (max-width: 700px) {
  .more-rooms .community-possibilities {
    grid-template-columns: 1fr;
  }
}

/* ---------- Why we built this: a note from the founder ---------- */
.founder-note {
  padding-block: 20px 60px;
}
.founder-card {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 36px 40px 30px;
  background: #fffaf0 var(--grain);
  box-shadow: var(--paper-lift);
  rotate: -0.6deg;
}
.founder-card .eyebrow {
  color: var(--rust-deep);
}
.founder-card h2 em {
  color: var(--rust-deep);
}
.founder-card > p:not(.eyebrow) {
  font-size: 18px;
}
.founder-card > p.founder-sign {
  margin: 22px 0 0;
  font: 400 30px/1 "Gochi Hand", var(--display);
  color: #2b4c9b;
}
.founder-sign span {
  display: block;
  margin-top: 6px;
  font: 500 14px/1.4 var(--sans);
  color: #62665a;
}
@media (max-width: 700px) {
  .founder-note {
    padding-block: 10px 36px;
  }
  .founder-card {
    padding: 26px 20px 22px;
    rotate: 0deg;
  }
  .founder-card > p:not(.eyebrow) {
    font-size: 16px;
  }
}

/* The stamp sits on the slip's corner so it never covers the list. */
.adopt-slip-stamp {
  top: -18px;
  left: auto;
  right: -22px;
  translate: none;
  rotate: 9deg;
  font-size: clamp(18px, 2.2vw, 24px);
  background: #fffaf0;
}
@media (max-width: 700px) {
  .adopt-slip-stamp {
    right: -6px;
  }
}

.closing .closing-trial {
  font-size: 15px;
}
/* A shelf with its own page: the whole shelf slot is the link (1 Oct 2026). */
.aisle-link::after {
  content: "";
  position: absolute;
  inset: -400% -30% -60%;
}
.aisle-link span {
  color: var(--rust);
}
.aisle-item:has(.aisle-link):hover .aisle-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}