/* Homepage redesign (Figma: July 26 Sprint, node 831-5200).
   Loaded after styles.css and scoped to the hp- prefixed sections so the
   rest of the site keeps the existing styles. */

:root {
  --hp-shell: #f9f8fa;
  --hp-purple: #9841e6;
  /* Same orange as the sitewide --brand. */
  --hp-orange: #e75619;
  --hp-yellow: #fdbc2c;
  --hp-green: #325725;
  --hp-pink: #e9a29e;
  --hp-ink: #371b0a;
  --hp-gutter: clamp(20px, 5vw, 140px);
  --hp-section-y: clamp(64px, 8vw, 120px);
}

body:has(.hp-hero) {
  background: #fff;
}

/* The hero carries its own centred wordmark, so the site header only shows
   once it pins past the hero. */
body:has(.hp-hero) .site-header:not(.is-pinned) {
  display: none;
}

/* Same gutters as the sections below, so the wordmark lines up with the
   PlayTime feature copy. */
body:has(.hp-hero) .site-header .page,
body.ff-page .site-header .page,
body.essay-page .site-header .page {
  width: 100%;
  max-width: calc(1400px + var(--hp-gutter) * 2);
  padding: 0 var(--hp-gutter);
}

.hp-hero,
.hp-tagline,
.hp-intro-wrap,
.hp-apps,
.hp-tutor,
.hp-playtime,
.hp-text-daso,
.hp-testimonials,
.hp-faq {
  font-family: var(--sans);
}

.hp-hero h1,
.hp-tagline p,
.hp-intro h2,
.hp-section-head h2,
.hp-app-card h3,
.hp-value-card h3,
.hp-triptych-item h3,
.hp-rail-item h3,
.hp-faq-item summary,
.hp-testimonials .quote-chip blockquote p {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

/* Section headers -------------------------------------------------------- */

.hp-section-head {
  /* 1216px of text, matching the Figma headline column, plus the gutter. */
  max-width: calc(1216px + var(--hp-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--hp-gutter);
  text-align: center;
}

.hp-kicker {
  margin: 0 0 10px;
  color: inherit;
  opacity: 0.5;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hp-kicker-pink {
  color: var(--hp-pink);
  opacity: 1;
}

.hp-kicker-green {
  color: var(--hp-green);
}

.hp-kicker-purple {
  color: var(--hp-purple);
}

.hp-section-head h2 {
  margin: 0;
  color: var(--hp-ink);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.15;
}

.hp-section-head-light,
.hp-section-head-light h2 {
  color: #fff;
}

.hp-title-orange {
  color: var(--hp-orange);
}

.hp-title-green {
  color: var(--hp-green);
}

.hp-title-purple {
  color: var(--hp-purple);
}

/* Hero ------------------------------------------------------------------- */

.hp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The Figma frame leaves 84px of air under the CTA at its 1680px width. */
  gap: clamp(28px, 5vw, 84px);
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) var(--hp-gutter) 0;
  background: var(--hp-shell);
  text-align: center;
}

.hp-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3vw, 40px);
  width: 100%;
  max-width: 760px;
}

.hp-hero-wordmark {
  display: block;
  width: clamp(140px, 14vw, 212px);
  height: auto;
}

.hp-hero h1 {
  position: relative;
  margin: 0;
  color: var(--hp-purple);
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
}

/* Section headlines break where the Figma frame breaks them. */
.hp-wrap {
  display: inline;
}

/* Except this one, which reads better wrapping on its own on phones. */
@media (max-width: 700px) {
  .hp-wrap-wide {
    display: none;
  }
}

.hp-underlined {
  position: relative;
  white-space: nowrap;
}

.hp-underlined::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -3%;
  width: 106%;
  height: clamp(14px, 1.7vw, 26px);
  margin-top: -0.06em;
  background: url("assets/redesign/hero-underline.svg") no-repeat center / 100% 100%;
}

.hp-cta {
  margin-top: clamp(12px, 2vw, 32px);
  padding: clamp(14px, 1.6vw, 20px) clamp(22px, 2.4vw, 28px);
  border: 0;
  border-radius: 40px;
  background: var(--hp-orange);
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hp-cta:hover {
  background: #cf4a12;
  transform: translateY(-1px);
}

.hp-hero-device {
  display: block;
  width: calc(100% + var(--hp-gutter) * 2);
  max-width: none;
  height: auto;
  margin: 0 calc(var(--hp-gutter) * -1) -2px;
}

/* Tagline ---------------------------------------------------------------- */

/* Two sentences that fade in letter by letter as the section scrolls past. The
   section is tall and its stage sticks to the viewport for the duration. */
.hp-tagline {
  background: #fff;
}

.hp-tagline-stage {
  display: grid;
  place-items: center;
  padding: clamp(90px, 13vw, 200px) var(--hp-gutter);
}

.hp-tagline-line {
  grid-area: 1 / 1;
  max-width: 1216px;
  margin: 0;
  color: #000;
  font-size: clamp(28px, 3.9vw, 64px);
  line-height: 1.18;
  text-align: center;
}

.hp-tagline-word {
  white-space: nowrap;
}

.hp-tagline.is-scrollytelling {
  height: 160vh;
}

/* The scroll runway has to be reserved before script.js adds
   .is-scrollytelling. Without this the section is content-height at first
   paint, the document is ~1.5 screens short, and a reload restores the saved
   scroll offset against the short page — so the browser paints the hero (or a
   position 600px off) until the class lands and the height settles.
   Gated on `scripting` so a no-JS page keeps its content-height section
   instead of a mostly blank runway; the .is-scrollytelling rules above stay as
   the fallback for browsers without the feature. Every branch below must match
   the .is-scrollytelling height for the same conditions, or the shift is only
   moved rather than removed. */
@media (scripting: enabled) {
  .hp-tagline {
    height: 160vh;
  }
}

@media (scripting: enabled) and (max-width: 768px) {
  .hp-tagline {
    height: 140svh;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  .hp-tagline {
    height: auto;
  }
}

.hp-tagline.is-scrollytelling .hp-tagline-letter {
  opacity: 0;
}

.hp-tagline.is-scrollytelling .hp-tagline-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.hp-tagline.is-scrollytelling .hp-tagline-line {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hp-tagline.is-scrollytelling .hp-tagline-line.is-active {
  opacity: 1;
}

/* On phones, keep the pinned one-sentence-at-a-time crossfade but compress
   the pacing: the whole two-sentence sequence gets ~1.5 screens of runway
   (not one per thought), and the copy pins ~22% down the viewport instead of
   dead center so there is no blank half-screen after the hero. */
@media (max-width: 768px) {
  .hp-tagline.is-scrollytelling {
    height: 140svh;
  }

  /* A short pinned stage (not 100svh) keeps the next section riding close
     beneath the copy instead of leaving most of a blank screen under it. */
  .hp-tagline.is-scrollytelling .hp-tagline-stage {
    align-items: start;
    height: 60svh;
    padding-top: 20svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-tagline.is-scrollytelling {
    height: auto;
  }

  .hp-tagline.is-scrollytelling .hp-tagline-stage {
    position: static;
    height: auto;
    gap: 40px;
  }

  .hp-tagline.is-scrollytelling .hp-tagline-line {
    grid-area: auto;
    opacity: 1;
  }

  .hp-tagline.is-scrollytelling .hp-tagline-letter {
    opacity: 1;
  }
}

/* Intro panel ------------------------------------------------------------ */

.hp-intro-wrap {
  --hp-intro-inset: clamp(16px, 2.4vw, 40px);

  padding: 0 var(--hp-intro-inset);
  background: #fff;
}

.hp-intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 46vw, 760px);
  /* Pulls the copy out to the page gutter so it lines up with the sections
     above and below, which the panel's own inset would otherwise offset. */
  padding: clamp(48px, 8vw, 200px)
    max(24px, calc(var(--hp-gutter) - var(--hp-intro-inset)));
  overflow: hidden;
  border-radius: clamp(24px, 2.6vw, 40px);
  background: #2a1b12 url("assets/redesign/intro.jpg") no-repeat center / cover;
}

.hp-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 29%,
    rgba(0, 0, 0, 0.55) 77%
  );
}

.hp-intro-copy {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  color: #fff;
}

.hp-intro-copy > * {
  max-width: 42%;
}

.hp-intro h2 {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
}

.hp-intro p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.hp-intro p:last-child {
  margin-bottom: 0;
}

/* Creative apps ---------------------------------------------------------- */

.hp-apps {
  position: relative;
  padding: var(--hp-section-y) 0;
  overflow: hidden;
  background: #fff;
}

/* The cards cascade diagonally; every offset below is a percentage of the
   column width, which keeps the Figma stagger at any viewport. */
.hp-app-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 40px);
  max-width: calc(1376px + var(--hp-gutter) * 2);
  margin: clamp(28px, 3vw, 48px) auto 0;
  padding: 0 var(--hp-gutter);
}

.hp-app-column {
  display: flex;
  flex-direction: column;
}

.hp-app-column:nth-child(1) .hp-app-card + .hp-app-card {
  margin-top: 226%;
}

.hp-app-column:nth-child(2) .hp-app-card + .hp-app-card {
  margin-top: 58%;
}

.hp-app-column:nth-child(2) {
  margin-top: 65%;
}

.hp-app-column:nth-child(3) {
  margin-top: 140%;
}

.hp-app-card {
  border-radius: 30px;
  background: #f2f2f2;
}

/* Opacity and transform only: the reveal must not change layout, or it would
   shift the page after first paint the way the tagline runway used to. */
.hp-app-card.hp-reveal,
.hp-value-card.hp-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.hp-app-card.hp-reveal.is-visible,
.hp-value-card.hp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hp-app-card.hp-reveal,
  .hp-value-card.hp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hp-prop {
    --parallax: 0px;
  }
}

.hp-app-card-media {
  padding: 10px;
}

.hp-app-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 412 / 322;
  object-fit: cover;
  border-radius: 20px;
}

.hp-app-card-body {
  padding: 20px;
}

.hp-app-card-kicker {
  margin: 0 0 4px;
  opacity: 0.5;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hp-app-card h3 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.15;
}

.hp-app-card-body > p:last-child {
  margin: 0;
  opacity: 0.7;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hp-app-card-music {
  background: #dfeef7;
  color: #0a65a1;
}

.hp-app-card-camera {
  background: #e2d9e4;
  color: #5f396d;
}

.hp-app-card-write {
  background: #ffe5e5;
  color: #420c06;
}

.hp-app-card-draw {
  background: #e1eadc;
  color: var(--hp-green);
}

.hp-app-card-film {
  background: #fbecc7;
  color: #7e4d0f;
}

.hp-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The props sit on the same 1376px column as the cards, so their Figma
   offsets hold at any width. Percentages are of that column. */
.hp-prop {
  position: absolute;
  left: 50%;
  width: calc(var(--prop-w) * min(1376px, 100vw - var(--hp-gutter) * 2) / 100);
  height: auto;
  margin-left: calc(
    (var(--prop-x) - 50) * min(1376px, 100vw - var(--hp-gutter) * 2) / 100
  );
  transform: translateY(var(--parallax, 0px));
  will-change: transform;
}

/* Depth: near props sit in front of the cards and travel furthest against the
   scroll, far props sit behind them and barely move. --drift is the travel in
   pixels over one viewport of scroll, read by the parallax loop in script.js. */
.hp-prop-near {
  z-index: 2;
  --drift: 110;
}

.hp-prop-mid {
  z-index: 2;
  --drift: 58;
}

.hp-prop-far {
  z-index: 0;
  --drift: 22;
  opacity: 0.94;
}

.hp-prop-piano {
  --prop-x: 28.4;
  --prop-w: 13.77;
  top: 15.9%;
}

.hp-prop-headphones {
  --prop-x: 27.1;
  --prop-w: 12.14;
  top: 86.2%;
}

.hp-prop-palette {
  --prop-x: 88.5;
  --prop-w: 11.45;
  top: 14.1%;
}

.hp-prop-maracas {
  --prop-x: 77.7;
  --prop-w: 12.5;
  top: 85.6%;
}

.hp-prop-notebook {
  --prop-x: 57.7;
  --prop-w: 13.93;
  top: 45.8%;
}

.hp-prop-scissors {
  --prop-x: 60.2;
  --prop-w: 11.92;
  top: 73.4%;
}

.hp-prop-crayons {
  --prop-x: 9.3;
  --prop-w: 12.72;
  top: 45.5%;
}

.hp-prop-clapper {
  --prop-x: -7.5;
  --prop-w: 10.02;
  top: 71.4%;
}

.hp-prop-camera {
  --prop-x: 23.8;
  --prop-w: 13.31;
  top: 61.6%;
}

.hp-prop-microphone {
  --prop-x: 53.8;
  --prop-w: 11.92;
  top: 95.9%;
}

.hp-prop-xylophone {
  --prop-x: 61.1;
  --prop-w: 15.77;
  top: 29.0%;
}

/* AI tutor --------------------------------------------------------------- */

.hp-tutor {
  position: relative;
  padding: clamp(48px, 4.8vw, 80px) 0;
  overflow: hidden;
  background: #1b1b1b url("assets/redesign/ai-tutor-bg.jpg") no-repeat center / cover;
}

.hp-tutor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 50%);
}

.hp-tutor > * {
  position: relative;
}

/* Reserves the illustration's height under the headline, matching the
   proportions of the Figma frame. */
.hp-tutor-stage {
  height: min(795px, 47.3vw);
  margin-top: clamp(48px, 4.8vw, 80px);
}


/* PlayTime --------------------------------------------------------------- */

.hp-playtime {
  padding: var(--hp-section-y) 0;
  background: #fff;
}

.hp-playtime-figure {
  max-width: calc(1400px + var(--hp-gutter) * 2);
  margin: clamp(28px, 3vw, 40px) auto 0;
  padding: 0 var(--hp-gutter);
}

.hp-playtime-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: clamp(24px, 2.6vw, 40px);
}

.hp-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  max-width: calc(1400px + var(--hp-gutter) * 2);
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 0 var(--hp-gutter);
}

.hp-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
  color: var(--hp-orange);
}

.hp-rail-item .hp-icon {
  color: var(--slide-color, var(--hp-green));
}

.hp-triptych-item h3,
.hp-rail-item h3 {
  margin: 0 0 10px;
  /* Headings carry the same colour as the icon above them. */
  color: var(--hp-orange);
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.2;
}

.hp-rail-item h3 {
  color: var(--slide-color, var(--hp-green));
}

.hp-triptych-item p,
.hp-rail-item p {
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@media (min-width: 1001px) {
  .hp-playtime {
    padding: clamp(24px, 2vw, 32px) 0;
  }

  .hp-playtime-figure {
    margin-top: clamp(16px, 1.4vw, 22px);
  }

  .hp-playtime-figure img {
    height: min(40vw, 580px);
  }

  .hp-triptych {
    margin-top: clamp(20px, 1.7vw, 28px);
  }
}

/* Text Daso -------------------------------------------------------------- */

.hp-text-daso {
  /* Keeps the oversized render inside the band, so it tucks behind the next
     section instead of painting over it. */
  overflow: clip;
  padding: var(--hp-section-y) 0 0;
  background: #fff;
}

.hp-text-daso-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Bottoms out the render on the section edge, against the next band. */
  align-items: end;
  gap: clamp(32px, 5vw, 80px);
  max-width: calc(1400px + var(--hp-gutter) * 2);
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 0 var(--hp-gutter);
}

.hp-rail {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0 0 clamp(48px, 6vw, 96px);
  list-style: none;
}

/* The left rule doubles as the slideshow's progress bar: one track per step,
   separated by a gap, filling only while that step is active. */
.hp-rail-item {
  position: relative;
  /* Even 32px of air around the copy, measured from the progress track. */
  padding: 32px 32px 32px 40px;
  transition: background 0.2s ease;
}

.hp-slideshow-ready .hp-rail-item {
  cursor: pointer;
}

.hp-rail-item:hover,
.hp-rail-item.is-active {
  background: rgba(0, 0, 0, 0.03);
}

.hp-rail-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.hp-rail-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hp-green);
  transform: scaleY(0);
  transform-origin: top;
}

.hp-rail-item.is-active .hp-rail-progress span {
  animation: hp-rail-fill var(--slide-duration, 6s) linear forwards;
}

.hp-slideshow-paused .hp-rail-item.is-active .hp-rail-progress span {
  animation-play-state: paused;
}

/* The whole step is clickable; this button only carries keyboard focus. */
.hp-rail-jump {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: none;
}

.hp-rail-jump:focus-visible {
  outline: 2px solid var(--hp-green);
  outline-offset: 2px;
}

@keyframes hp-rail-fill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.hp-rail-item h3,
.hp-rail-item p,
.hp-rail-item .hp-icon {
  transition: opacity 0.4s ease;
}


.hp-slideshow-ready .hp-rail-item:not(.is-active) h3,
.hp-slideshow-ready .hp-rail-item:not(.is-active) p,
.hp-slideshow-ready .hp-rail-item:not(.is-active) .hp-icon {
  opacity: 0.4;
}

.hp-rail-nav {
  display: none;
  justify-content: flex-end;
  gap: 12px;
}

.hp-triptych-nav {
  display: none;
}

.hp-rail-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
}

/* Stretches to the full height of the rail beside it, so the render's top
   edge lines up with the first step. */
.hp-phone {
  display: flex;
  position: relative;
  align-self: stretch;
  justify-content: center;
  margin: 0;
  text-align: center;
}

/* Taken out of flow so the render never drives the row's height: the rail sets
   it, and the phone's top then lands on the first card's top. Taller than the
   rail so the device bottom reaches the last card, with the overflow running
   under the next band. */
.hp-phone-render {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 120%;
  max-width: none;
  /* The device sits at 31.5% of the render, so this centres the phone itself
     in the column rather than the whole photo. */
  transform: translateX(-31.5%);
}

.hp-phone img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0 auto;
}

/* Tinted screen, masked to the phone's display area. */
.hp-phone-screen {
  position: absolute;
  inset: 0;
  background: var(--slide-color, var(--hp-green));
  transition: background 0.5s ease;
  -webkit-mask: url("assets/redesign/phone-hand-screen-mask.png") no-repeat center / 100% 100%;
  mask: url("assets/redesign/phone-hand-screen-mask.png") no-repeat center / 100% 100%;
}

/* iOS Messages thread, laid over the display area of the render. The inset
   matches the opaque region of the screen mask, so the fingers still clip it.
   Everything inside is sized in cqw against that box, so the whole UI scales
   with the phone. */
.hp-phone-thread {
  container-type: inline-size;
  position: absolute;
  top: 1.64%;
  left: 10.77%;
  width: 41.45%;
  height: 60.36%;
  border-radius: 9.7% / 4.5%;
  overflow: hidden;
  background: #f5f6f5;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
}

/* The fingers and the screen's rounded corners, laid back over the thread so
   the hand still passes in front of the UI. */
.hp-phone .hp-phone-hands {
  position: absolute;
  top: 1.64%;
  left: 10.77%;
  z-index: 3;
  width: 41.45%;
  height: 60.36%;
  pointer-events: none;
}

.hp-phone-status {
  position: absolute;
  top: 3.4cqw;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7.4cqw;
  color: #000;
}

.hp-phone-time {
  font-family: inherit;
  font-size: 4.2cqw;
  font-weight: 600;
  letter-spacing: 0.05cqw;
}

.hp-phone-status-icons {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
}

.hp-phone-status-icons svg {
  height: 3.2cqw;
  width: auto;
}

/* Contact header: back chevron, avatar and name, FaceTime button. */
.hp-phone-header {
  position: absolute;
  top: 13.5cqw;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.8cqw 2.4cqw;
  border-bottom: 0.25cqw solid rgba(0, 0, 0, 0.08);
  background: rgba(245, 246, 245, 0.92);
  color: #269dfd;
}

.hp-phone-back svg {
  display: block;
  width: 2.6cqw;
}

.hp-phone-facetime svg {
  display: block;
  width: 7.4cqw;
  overflow: visible;
}

/* The two side buttons take equal space, so the contact lands on the middle of
   the screen rather than being pushed off by the wider FaceTime icon. */
.hp-phone-back,
.hp-phone-facetime {
  display: flex;
  flex: 1 0 0;
  align-items: center;
}

.hp-phone-facetime {
  justify-content: flex-end;
}

.hp-phone-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
}

.hp-phone-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.6cqw;
  height: 10.6cqw;
  border-radius: 50%;
  background: var(--hp-purple);
  color: #fff;
  font-family: inherit;
  font-size: 5.3cqw;
  font-weight: 600;
  line-height: 1;
}

.hp-phone-name {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  color: #000;
  font-family: inherit;
  font-size: 3.4cqw;
  line-height: 1;
}

.hp-phone-name svg {
  width: 1.5cqw;
  color: #89898d;
}

/* Sits over the bottom of the thread the way the iOS compose bar does. */
.hp-phone-input {
  position: absolute;
  right: 4.8cqw;
  bottom: 3.7cqw;
  left: 4.8cqw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
}

.hp-phone-plus {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 8.5cqw;
  height: 8.5cqw;
  border-radius: 50%;
  background: #e2e2e3;
  color: #5b5b60;
  font-size: 5cqw;
  line-height: 1;
}

.hp-phone-field {
  flex: 1;
  padding: 2.4cqw 4cqw;
  border: 0.4cqw solid #e2e2e3;
  border-radius: 6cqw;
  color: #89898d;
  font-size: 4.2cqw;
}

.hp-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 35cqw 4.8cqw 16cqw;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.hp-thread.is-active {
  opacity: 1;
}

.hp-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 69.6cqw;
}

.hp-msg-out {
  align-items: flex-end;
  align-self: flex-end;
}


.hp-msg .hp-msg-bubble {
  position: relative;
  font-family: inherit;
  margin: 0;
  padding: 2.6cqw 3.7cqw;
  border-radius: 5.6cqw;
  font-size: 4.6cqw;
  letter-spacing: 0.16cqw;
  line-height: 1.2;
}

.hp-msg-in .hp-msg-bubble {
  background: #e2e2e3;
  color: #000;
}

.hp-msg-out .hp-msg-bubble {
  background: #269dfd;
  color: #fff;
}

/* Bubble tail: a rounded lobe of the bubble colour hooking out of the bottom
   corner, notched back in with a matching lobe of the screen colour. */
.hp-msg .hp-msg-bubble::before,
.hp-msg .hp-msg-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 6.6cqw;
}

.hp-msg-in .hp-msg-bubble::before {
  left: -2.1cqw;
  width: 5.3cqw;
  border-bottom-right-radius: 4.2cqw;
  background: #e2e2e3;
}

.hp-msg-in .hp-msg-bubble::after {
  left: -6.9cqw;
  width: 6.9cqw;
  border-bottom-right-radius: 2.6cqw;
  background: #f5f6f5;
}

.hp-msg-out .hp-msg-bubble::before {
  right: -2.1cqw;
  width: 5.3cqw;
  border-bottom-left-radius: 4.2cqw;
  background: #269dfd;
}

.hp-msg-out .hp-msg-bubble::after {
  right: -6.9cqw;
  width: 6.9cqw;
  border-bottom-left-radius: 2.6cqw;
  background: #f5f6f5;
}

/* Video message: the poster frame with the iOS play badge over it. */
.hp-msg-video {
  position: relative;
  display: block;
  width: 46cqw;
  overflow: hidden;
  border-radius: 5.6cqw;
  line-height: 0;
}

.hp-msg-video img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.hp-msg-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12cqw;
  height: 12cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.hp-msg-play svg {
  width: 6cqw;
}

.hp-msg-duration {
  position: absolute;
  right: 2.6cqw;
  bottom: 2.4cqw;
  padding: 0.6cqw 2cqw;
  border-radius: 4cqw;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 3cqw;
  line-height: 1.6;
}

.hp-msg-stack {
  position: relative;
  /* Room for the tapback to sit clear of the message above. */
  margin-top: 3.5cqw;
}

/* Tapback: the heart sits on the top corner of the bubble it belongs to. */
.hp-msg-react {
  position: absolute;
  top: -4.5cqw;
  right: -3.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.1cqw;
  height: 8.1cqw;
  border-radius: 50%;
  background: #269dfd;
  font-size: 4cqw;
  line-height: 1;
}

/* The two trailing dots iOS draws between the tapback and its bubble. */
.hp-msg-react::before,
.hp-msg-react::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #269dfd;
}

.hp-msg-react::before {
  right: -0.4cqw;
  bottom: -2.2cqw;
  width: 2.6cqw;
  height: 2.6cqw;
}

.hp-msg-react::after {
  right: -2.4cqw;
  bottom: -4.4cqw;
  width: 1.5cqw;
  height: 1.5cqw;
}

.hp-msg-read {
  margin: 1.3cqw 5.8cqw 0 0;
  font-family: inherit;
  color: #89898d;
  font-size: 3cqw;
  letter-spacing: 0.1cqw;
  line-height: 1.2;
}

.hp-msg-read b {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .hp-rail-item.is-active .hp-rail-progress span {
    animation: none;
    transform: scaleY(1);
  }
}

/* Testimonials ----------------------------------------------------------- */

.hp-testimonials {
  padding: var(--hp-section-y) 0;
  background: var(--hp-yellow);
  color: #000;
}

.hp-testimonials .hp-section-head h2 {
  color: #000;
}

.hp-testimonials .quote-marquee {
  margin-top: clamp(32px, 4vw, 60px);
}

.hp-testimonials .quote-chip {
  width: 380px;
  max-width: 380px;
  padding: 20px;
  border: 0;
  border-radius: 20px;
  background: #fff;
}

/* Figma's quote glyph, in flow so the copy starts on the design's baseline. */
.hp-testimonials .quote-chip::before {
  content: "";
  position: static;
  width: 24px;
  height: 18px;
  margin: 0 0 20px;
  opacity: 0.5;
  background: var(--hp-ink);
  -webkit-mask: url("assets/redesign/quote-mark.svg") no-repeat center / contain;
  mask: url("assets/redesign/quote-mark.svg") no-repeat center / contain;
}

@media (max-width: 640px) {
  .hp-testimonials .quote-chip {
    width: 330px;
    max-width: 330px;
    padding: 20px;
    border-radius: 14px;
  }

  .hp-testimonials .quote-chip::before {
    margin-bottom: 16px;
  }
}

.hp-testimonials .quote-chip blockquote p {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
}

.hp-testimonials .quote-source {
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.hp-belief-link {
  margin: clamp(32px, 4vw, 60px) 0 0;
  text-align: center;
}

.hp-pill-link {
  display: inline-block;
  padding: 18px 28px;
  border-radius: 40px;
  background: #000;
  color: #fff;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.hp-pill-link:hover {
  background: #222;
}

/* Values ----------------------------------------------------------------- */

/* Its own white section between the yellow quotes band and the FAQ, keeping
   the page's alternating grounds. */
.hp-values {
  padding: var(--hp-section-y) 0;
  background: #fff;
}

/* A centred cluster rather than a column grid: each statement is only as wide as
   it needs to be, and the row rewraps on its own as the viewport narrows — no
   column breakpoints, and no pill padded out to match a neighbour. align-items
   keeps a one-line pill from stretching to a taller wrapped one on its row. */
.hp-value-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 1.6vw, 24px);
  /* Same column as the section head above it. */
  max-width: calc(1216px + var(--hp-gutter) * 2);
  margin: clamp(32px, 4vw, 60px) auto 0;
  padding: 0 var(--hp-gutter);
  list-style: none;
}

/* Statement pills that hug their type: tight vertically, generous horizontally,
   each as tall as its own title. No shared height — a stretched card is mostly
   empty ground, which reads unfinished next to the two-word one. */
.hp-value-card {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  max-width: 100%;
  /* The icon sets the pill's height, so the vertical padding is lighter than
     the horizontal to keep the shape squat. */
  padding: clamp(10px, 1vw, 14px) clamp(20px, 2.2vw, 30px);
  border-radius: 999px;
}

.hp-value-icon {
  flex: none;
  width: auto;
  height: clamp(48px, 4.4vw, 64px);
}

.hp-value-card h3 {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.2;
}

/* Borrowed from the creative app cards so the two card families match. The
   pale yellow of .hp-app-card-film is left out — it disappears into this
   section's background. Pink and green are swapped from the app grid's order
   so the pink brain icon doesn't sit on a pink ground and lose its outline. */
.hp-value-card-make {
  background: #ffe5e5;
  color: #420c06;
}

.hp-value-card-tool {
  background: #dfeef7;
  color: #0a65a1;
}

.hp-value-card-calm {
  background: #e1eadc;
  color: var(--hp-green);
}

.hp-value-card-grown {
  background: #e2d9e4;
  color: #5f396d;
}

/* FAQ -------------------------------------------------------------------- */

.hp-faq {
  padding: var(--hp-section-y) 0;
  background: #fff;
}

.hp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Same column as the signup panel below. */
  width: 100%;
  max-width: 1200px;
  margin: clamp(32px, 4vw, 60px) auto 0;
  padding: 0 var(--hp-gutter);
}

.hp-faq-item {
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px);
  border-radius: 20px;
  background: #f7f7fa;
}

.hp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #000;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.hp-faq-item summary::-webkit-details-marker {
  display: none;
}

.hp-faq-item summary::after {
  content: "+";
  flex: none;
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.hp-faq-item[open] summary::after {
  content: "\2212";
}

.hp-faq-body {
  overflow: hidden;
}

.hp-faq-item p {
  margin: 16px 0 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.45;
}

/* Closing signup band --------------------------------------------------- */

body:has(.hp-hero) .final-cta {
  padding: 0 0 var(--hp-section-y);
  border-top: 0;
  background: #fff;
}

/* Same column as the FAQ list above it. */
body:has(.hp-hero) .final-cta .page {
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--hp-gutter);
}

body:has(.hp-hero) .final-cta-layout {
  align-items: start;
  gap: clamp(20px, 2.5vw, 36px) clamp(28px, 4vw, 64px);
  padding: clamp(32px, 4.5vw, 72px);
  border-radius: clamp(24px, 2.6vw, 40px);
  background: var(--hp-purple);
  color: #fff;
}

body:has(.hp-hero) .final-cta h2 {
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
}

/* Lifts the headline and copy into the layout grid, so the headline spans the
   container and the copy starts on the same line as the email input. */
body:has(.hp-hero) .final-cta-layout > div:first-child {
  display: contents;
}

body:has(.hp-hero) .final-cta-layout h2 {
  grid-column: 1 / -1;
}

/* The narrower FAQ column needs a smaller form track than the sitewide one. */
@media (min-width: 920px) {
  body:has(.hp-hero) .final-cta-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

body:has(.hp-hero) .final-cta-layout > div > p {
  color: rgba(255, 255, 255, 0.82);
}

body:has(.hp-hero) .signup-panel .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

body:has(.hp-hero) .signup-panel .subscribe-form {
  margin-top: 0;
}

body:has(.hp-hero) .signup-panel .form-field input {
  border-radius: 999px;
  padding-inline: 22px;
}

/* The panel is the container now, so the form sits straight on the purple. */
body:has(.hp-hero) .signup-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body:has(.hp-hero) .signup-panel .form-status:empty {
  display: none;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* The diagonal cascade needs three tall columns; below the desktop width it
     turns into stagger gaps and an orphaned fifth card. Stack the cards in a
     single centered column instead. */
  .hp-app-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .hp-app-column,
  .hp-app-column:nth-child(2),
  .hp-app-column:nth-child(3) {
    display: contents;
  }

  .hp-app-card,
  .hp-app-column:nth-child(1) .hp-app-card + .hp-app-card,
  .hp-app-column:nth-child(2) .hp-app-card + .hp-app-card {
    width: min(100%, 480px);
    margin: 0 auto;
  }

  /* The DOM order serves the desktop cascade; the stack reads top to bottom. */
  .hp-app-card-draw { order: 1; }
  .hp-app-card-music { order: 2; }
  .hp-app-card-camera { order: 3; }
  .hp-app-card-film { order: 4; }
  .hp-app-card-write { order: 5; }

  .hp-triptych {
    grid-template-columns: 1fr;
  }

  /* One step at a time under the phone, stepped through with the arrows. */
  .hp-text-daso-layout {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }

  .hp-rail {
    padding-bottom: 0;
  }

  .hp-phone {
    order: -1;
    margin-top: -1%;
    margin-right: calc(var(--hp-gutter) * -1);
    /* Pulls the steps up to 40px under the bottom of the device. */
    margin-bottom: calc(40px - min(77.8%, 406px));
    margin-left: calc(var(--hp-gutter) * -1);
    overflow: hidden;
    pointer-events: none;
  }

  /* Wider than the viewport so the phone itself fills ~60% of it, and the
     phone sits left of centre in the render, so nudge it back over. */
  .hp-phone-render {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    width: min(130%, 760px);
    max-width: none;
    transform: translateX(18.5%);
  }

  .hp-phone img {
    width: 100%;
    height: auto;
  }

  /* Sits over the bottom of the render, so the phone tucks into the card, and
     the hand runs on past it to be cut off by the next band. */
  .hp-rail-panel {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    padding: 24px;
    border-radius: 20px;
    background: #f7f7fa;
  }

  .hp-rail-item {
    display: none;
    padding: 0;
  }

  .hp-rail-item.is-active {
    display: block;
    background: none;
  }

  .hp-rail-progress {
    display: none;
  }

  .hp-rail-nav {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

/* Tablet: every prop drops behind the cards, since the columns sit closer
   together here and the near ones would land on the copy. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hp-prop-near,
  .hp-prop-mid {
    z-index: 0;
  }
}

/* Tablet: the PlayTime points share one card, stepped through with the arrows,
   the same way the Text Daso steps do. */
@media (min-width: 701px) and (max-width: 1000px) {
  /* The gutter becomes a margin, so the card sits on the image's edges. */
  .hp-triptych {
    position: relative;
    gap: 0;
    margin-right: var(--hp-gutter);
    margin-left: var(--hp-gutter);
    padding: 24px;
    border-radius: 20px;
    background: #f7f7fa;
  }

  .hp-triptych-item {
    display: none;
    padding-right: 112px;
  }

  .hp-triptych-item.is-active {
    display: block;
  }

  .hp-triptych-nav {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .hp-confetti {
    display: none;
  }

  /* Title over the artwork only; the bubbles are desktop-only. The crop sits
     right of centre so the tablet is in frame instead of running off the edge. */
  .hp-tutor {
    /* Height follows the zoomed artwork, so it still fills the section. */
    min-height: 158vw;
    padding: clamp(56px, 12vw, 96px) 0 0;
    background-position: 64% bottom;
    background-size: 250%;
  }

  /* An eased black wash, so the headline sits on darkness that fades into the
     scene instead of ending on a hard line. */
  .hp-tutor::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.88) 9%,
      rgba(0, 0, 0, 0.78) 16%,
      rgba(0, 0, 0, 0.61) 23%,
      rgba(0, 0, 0, 0.42) 30%,
      rgba(0, 0, 0, 0.25) 37%,
      rgba(0, 0, 0, 0.12) 44%,
      rgba(0, 0, 0, 0.04) 52%,
      transparent 60%
    );
  }

  .hp-tutor-stage {
    height: min(420px, 84vw);
  }

  .hp-hero-device {
    width: 150%;
    margin-left: -25%;
    margin-right: -25%;
  }

  /* Artwork on top, easing into the panel's dominant brown, copy below. */
  .hp-intro {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(32px, 8vw, 48px);
    background-color: #5a341c;
    background-image: none;
  }

  .hp-intro::before {
    position: relative;
    display: block;
    inset: auto;
    aspect-ratio: 1 / 1;
    /* Crops in on the girl and her tablet so the screen reads on a phone. */
    background: url("assets/redesign/intro.jpg") no-repeat 72% center / 170%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.94) 53%,
      rgba(0, 0, 0, 0.85) 60%,
      rgba(0, 0, 0, 0.72) 67%,
      rgba(0, 0, 0, 0.55) 74%,
      rgba(0, 0, 0, 0.37) 81%,
      rgba(0, 0, 0, 0.2) 88%,
      rgba(0, 0, 0, 0.07) 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.94) 53%,
      rgba(0, 0, 0, 0.85) 60%,
      rgba(0, 0, 0, 0.72) 67%,
      rgba(0, 0, 0, 0.55) 74%,
      rgba(0, 0, 0, 0.37) 81%,
      rgba(0, 0, 0, 0.2) 88%,
      rgba(0, 0, 0, 0.07) 95%,
      transparent 100%
    );
  }

  .hp-intro-copy {
    margin-top: -12%;
    padding: 0 24px;
  }

  .hp-intro-copy > * {
    max-width: none;
  }
}

/* Footer: same column as the header, four even columns, one text colour. */
/* The footer shares the 1060px content column (the same one the final CTA
   panel sits in), not the full-width header column. */
body:has(.hp-hero) .footer .page,
body.ff-page .footer .page,
body.essay-page .footer .page {
  color: var(--hero-green);
}

body:has(.hp-hero) .footer .footer-brand p,
body.ff-page .footer .footer-brand p,
body.essay-page .footer .footer-brand p {
  color: inherit;
}

/* Essay pages (What we believe) on the refreshed system: site header and footer,
   display headings, and the body type the rest of the site uses. */
body.essay-page {
  background: #fff;
}

/* Same static bar as the founding family page, since there is no hero here for
   the header to sit over. */
.essay-page .site-header {
  position: static;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.essay-page .site-header .wordmark {
  width: 92px;
  height: auto;
}

.essay-page .entity-page {
  background: #fff;
  padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 120px);
}

/* The essay sits in one centred measure: heading centred, copy left aligned. */
.essay-page .entity-page .page {
  width: min(100% - 40px, 760px);
  max-width: none;
  padding: 0;
}

.essay-page .entity-page .section-kicker,
.essay-page .entity-page h1 {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.essay-page .section-kicker {
  margin-bottom: 14px;
  padding-top: 0;
  border-top: 0;
  color: var(--hp-purple);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
}

.essay-page .entity-page h1 {
  max-width: none;
  color: #000;
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.04;
}

.essay-page .essay-copy {
  max-width: none;
  margin-top: clamp(28px, 3vw, 44px);
}

.essay-page .essay-copy p {
  margin: 0 0 26px;
  color: var(--hp-ink);
  font-family: var(--sans);
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.6;
}