.story-context-space {
  display: grid;
  margin-top: 13px;
  padding: 8px;
  grid-template-columns: 74px 1fr;
  gap: 11px;
  align-items: center;
  border-radius: 17px;
  background: #eef0e7;
}

.story-context-space img {
  width: 74px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
}

.story-context-space > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.story-context-space small {
  color: var(--moss-dark);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .09em;
}

.story-context-space strong {
  margin: 5px 0 1px;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-context-space span {
  color: #777970;
  font-size: 7px;
}

.story-context-row {
  padding-block: 14px;
}

.story-context-row time {
  width: 34px;
  color: #777970;
  font-size: 7px;
}

.story-inline-ai .story-agent-dock {
  bottom: 18px;
  padding: 15px;
  border-radius: 21px;
}

.story-inline-ai .story-agent-dock > p {
  margin: 13px 0 12px;
  font-size: 15px;
}

.story-suggestion-preview {
  display: grid !important;
  min-height: 50px;
  margin-bottom: 13px;
  padding: 9px 10px;
  grid-template-columns: 12px 1fr;
  justify-content: initial !important;
  gap: 8px !important;
  align-items: center;
  border-radius: 13px;
  background: #f1f2eb;
}

.story-suggestion-preview > i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--moss);
  border-radius: 50%;
}

.story-suggestion-preview > span {
  display: flex;
  flex-direction: column;
}

.story-suggestion-preview strong {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 400;
}

.story-suggestion-preview small {
  margin-top: 2px;
  color: #777970;
  font-size: 6px;
}

@media (max-width: 600px) {

  .story-inline-ai .story-ui-phone {
    min-height: 576px;
  }
}

/* Website product stories. These are narrow, phone-constrained compositions
   built from the same visual grammar as the app, with a different story in
   each section instead of repeating a screen plus a floating toolbar. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

.story-illustration {
  position: relative;
  width: 100%;
  min-height: 640px;
  font-family: var(--sans);
  color: #22231e;
}

.story-phone {
  position: relative;
  overflow: hidden;
  border: 7px solid #20211d;
  border-radius: 46px;
  background: #f7f7f2;
  box-shadow: 0 28px 68px rgba(40, 42, 32, 0.18), inset 0 0 0 1px rgba(255,255,255,0.3);
}

.story-capture-phone {
  width: 278px;
}

.story-capture-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.story-ui-phone {
  width: 302px;
  min-height: 618px;
  padding: 20px 17px 18px;
}

.story-status {
  display: flex;
  height: 25px;
  align-items: flex-start;
  gap: 5px;
  color: #111;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.story-status span {
  margin-right: auto;
}

.story-status i,
.story-status b,
.story-status em {
  display: block;
  width: 9px;
  height: 6px;
  margin-top: 2px;
  border: 1px solid #505149;
  border-radius: 4px;
}

.story-status i {
  width: 4px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top, #505149 35%, transparent 35%);
}

.story-status em {
  width: 14px;
  background: #505149;
}

.story-phone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 2px 13px;
  border-bottom: 1px solid rgba(73,79,56,0.12);
}

.story-phone-head span {
  font-family: var(--serif);
  font-size: 21px;
}

.story-phone-head small {
  color: #73746c;
  font-size: 8px;
}

.story-days-scene,
.story-space-capture,
.story-inline-ai,
.story-project-space {
  display: grid;
  place-items: center;
}

.story-days-scene .story-phone,
.story-space-capture .story-phone {
  max-height: 610px;
}

.story-inline-ai .story-ui-phone {
  min-height: 604px;
}

.story-today-row {
  display: flex;
  gap: 11px;
  padding: 15px 9px;
  align-items: center;
  border-bottom: 1px solid rgba(73,79,56,0.1);
}

.story-today-row > i {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--moss);
  border-radius: 50%;
}

.story-today-row p {
  display: flex;
  margin: 0;
  flex-direction: column;
}

.story-today-row strong {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}

.story-today-row small {
  margin-top: 3px;
  color: #777970;
  font-size: 7px;
}

.story-agent-dock {
  position: absolute;
  right: 12px;
  bottom: 13px;
  left: 12px;
  padding: 16px;
  border: 1px solid rgba(73,79,56,0.13);
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(40,42,32,0.14);
}

.story-agent-dock header {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 6px;
  align-items: center;
  color: var(--moss-dark);
  font-family: var(--serif);
  font-size: 15px;
}

.story-agent-dock header i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
}

.story-agent-dock header small {
  grid-column: 2;
  color: #85867e;
  font-family: var(--sans);
  font-size: 7px;
}

.story-agent-dock > p {
  margin: 17px 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
}

.story-agent-dock > div {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.story-agent-dock button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d9dbd1;
  border-radius: 18px;
  background: #fff;
  color: #5e6058;
  font-family: var(--sans);
  font-size: 8px;
}

.story-agent-dock button:last-child {
  border-color: var(--moss);
  background: var(--moss);
  color: white;
}

.story-project-space .story-ui-phone {
  min-height: 610px;
}

.showcase-section .story-phone {
  box-shadow: 0 30px 70px rgba(0,0,0,0.34);
}

@media (max-width: 600px) {
  .story-illustration {
    min-height: 585px;
  }

  .story-capture-phone {
    width: 248px;
  }

  .story-ui-phone {
    width: 270px;
    min-height: 560px;
    padding: 17px 14px 15px;
    border-width: 6px;
    border-radius: 40px;
  }
}

.story-step-phone .story-status {
  height: 18px;
  font-size: 6px;
}

.story-step-phone .story-status i,
.story-step-phone .story-status b,
.story-step-phone .story-status em {
  width: 6px;
  height: 4px;
  margin-top: 1px;
}

.story-step-phone .story-status i {
  width: 3px;
}

.story-step-phone .story-status em {
  width: 9px;
}

.story-ai-pair > .story-phone {
  position: absolute;
  padding: 18px 16px 15px;
  border-width: 6px;
  background: #f8f8f4;
}

@media (max-width: 600px) {

  .story-ai-pair > .story-phone {
    position: relative;
    inset: auto;
    margin-inline: auto;
  }
}

/* Unified product-device system. Every website-rendered phone uses the exact
   1320 × 2868 proportion of the primary Oat2 Days capture. */
:root {
  --oat2-phone-ratio: 1320 / 2868;
}

.story-phone {
  box-sizing: border-box;
  aspect-ratio: var(--oat2-phone-ratio);
  min-height: 0 !important;
  height: auto;
  border: 6px solid #20211d;
  border-radius: 44px;
  background: #f8f8f4;
  box-shadow:
    0 30px 72px rgba(45, 39, 29, 0.18),
    0 0 0 1px rgba(31, 33, 27, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.story-phone::after {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: 37px;
  box-shadow: inset 0 0 0 1px rgba(28, 30, 25, 0.04);
  content: "";
  pointer-events: none;
}

.story-capture-phone {
  width: 290px;
  padding: 0;
}

.story-capture-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-ui-phone {
  width: 306px;
  padding: 19px 16px 29px;
}

.story-status {
  display: grid;
  height: 25px;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  color: #11120f;
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
  line-height: 1;
}

.story-status time {
  padding-top: 2px;
}

.story-status > .story-dynamic-island {
  display: block;
  width: 54px;
  height: 16px;
  margin: -1px auto 0;
  border: 0;
  border-radius: 999px;
  background: #080908;
}

.story-status > .story-status-icons {
  display: flex;
  margin: 0;
  padding-top: 2px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.story-status-icons > i,
.story-status-icons > b,
.story-status-icons > em {
  display: block;
  box-sizing: border-box;
  height: 5px;
  margin: 0;
  border: 0;
  background: #52534d;
}

.story-status-icons > i {
  width: 4px;
  border-radius: 1px;
}

.story-status-icons > b {
  width: 8px;
  border: 1px solid #52534d;
  border-radius: 4px;
  background: transparent;
}

.story-status-icons > em {
  width: 13px;
  border-radius: 3px;
}

.story-home-indicator {
  position: absolute;
  right: 50%;
  bottom: 9px;
  z-index: 19;
  display: block;
  width: 84px;
  height: 3px;
  border-radius: 999px;
  background: rgba(22, 23, 19, 0.82);
  transform: translateX(50%);
}

.story-illustration {
  min-height: 690px;
}

.story-ai-pair > .story-phone {
  padding: 18px 16px 29px;
}

.story-days-scene,
.story-space-capture,
.story-inline-ai,
.story-project-space {
  min-height: 690px;
}

.story-days-scene .story-phone,
.story-space-capture .story-phone {
  max-height: none;
}

.story-inline-ai .story-agent-dock {
  bottom: 27px;
}

.premium-scene.product-visual {
  min-height: 710px;
}

.space-stack.product-visual {
  min-height: 690px;
}

@media (max-width: 900px) {
  .premium-scene.product-visual {
    min-height: 710px;
  }
}

@media (max-width: 600px) {

  .story-illustration,
  .story-days-scene,
  .story-space-capture,
  .story-inline-ai,
  .story-project-space,
  .showcase-stage,
  .space-stack.product-visual {
    min-height: 625px;
  }

  .story-capture-phone {
    width: 276px;
  }

  .story-ui-phone {
    width: 282px;
    padding: 17px 14px 27px;
    border-width: 6px;
    border-radius: 42px;
  }

  .story-ai-pair,
  .premium-scene.product-visual {
    width: min(100%, 350px);
  }

  .premium-scene.product-visual {
    min-height: 1220px;
  }

  .story-ai-pair > .story-phone {
    position: relative;
    inset: auto;
    margin: 0;
    padding: 16px 14px 27px;
  }

  .story-home-indicator {
    bottom: 8px;
    width: 72px;
  }

  .story-inline-ai .story-agent-dock {
    bottom: 25px;
  }
}

@media (max-width: 600px) {
  .premium-scene.product-visual {
    min-height: 830px;
  }
}

.story-ai-value-minimal .story-puppy-result-phone {
  position: absolute;
  top: 0;
  right: 15px;
  z-index: 2;
  width: 326px;
  height: auto;
  aspect-ratio: auto;
  border-radius: 48px;
  background: #f8f8f4;
}

.story-ai-value-minimal .story-puppy-result-phone::after {
  border-radius: 41px;
}

.story-ai-value-minimal .story-puppy-result-phone img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Two real app captures form a shallow V: ask behind, result in front. */
.story-ai-phone-pair {
  width: min(100%, 570px);
  min-height: 690px;
  margin-inline: auto;
}

.story-ai-phone-pair .story-capture-phone {
  position: absolute;
  top: 0;
  width: 284px;
  height: auto;
  aspect-ratio: auto;
  border-radius: 48px;
  background: #f8f8f4;
  transform-origin: 50% 92%;
}

.story-ai-phone-pair .story-capture-phone::after {
  border-radius: 41px;
}

.story-ai-phone-pair .story-capture-phone img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.story-ai-phone-pair .story-puppy-prompt-phone {
  top: 48px;
  left: 22px;
  z-index: 1;
  transform: rotate(-5deg);
  box-shadow: 0 25px 60px rgba(45, 39, 29, .16);
}

.story-ai-phone-pair .story-puppy-result-phone {
  top: 6px;
  right: 58px;
  z-index: 2;
  width: 290px;
  transform: rotate(4.5deg);
  box-shadow: 0 34px 80px rgba(45, 39, 29, .25);
}

.story-composer-popout {
  position: absolute;
  top: 344px;
  left: 142px;
  z-index: 5;
  width: 410px;
  min-height: 132px;
  padding: 18px 16px 10px;
  border: 1px solid #e7e9df;
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 30px 72px rgba(54, 45, 33, .26),
    0 0 0 1px rgba(72, 66, 54, .08);
  transform: translateX(-50%) rotate(-5deg);
  transform-origin: 50% 50%;
}

.story-composer-popout p {
  min-height: 42px;
  margin: 0;
  padding-inline: 6px;
  color: #1a1a1a;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 28px;
}

.story-composer-controls {
  display: flex;
  height: 48px;
  margin-top: 6px;
  align-items: center;
  gap: 4px;
}

.story-composer-spacer {
  flex: 1;
}

.story-composer-target {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
}

.story-composer-tool > i,
.story-composer-voice > i {
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid #dbddd2;
  border-radius: 50%;
  place-items: center;
}

.story-composer-target svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #6f6d68;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.story-composer-voice > i {
  border-color: #a2a98f;
}

.story-composer-voice svg {
  stroke: #6c7454;
}

.story-composer-send > i {
  display: grid;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6c7454;
  place-items: center;
}

.story-composer-send svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.story-spaces-capture {
  display: grid;
  place-items: center;
}

.story-spaces-capture .story-spaces-device {
  width: min(355px, 76%);
}

@media (max-width: 1200px) {

  .story-ai-value-minimal .story-puppy-result-phone {
    right: 0;
  }
}

@media (max-width: 900px) {

  .story-ai-value-minimal .story-puppy-result-phone {
    right: 26px;
  }
}

@media (max-width: 600px) {
  .premium-scene.product-visual {
    min-height: 752px;
  }

  .story-ai-value-minimal .story-puppy-result-phone {
    top: 108px;
    right: auto;
    left: 50%;
    width: 294px;
    transform: translateX(-50%);
  }

  .premium-scene.product-visual {
    min-height: 570px;
  }

  .story-ai-phone-pair {
    width: min(100%, 350px);
    min-height: 570px;
  }

  .story-ai-phone-pair .story-capture-phone {
    width: 210px;
    border-width: 5px;
    border-radius: 40px;
  }

  .story-ai-phone-pair .story-capture-phone::after {
    border-radius: 34px;
  }

  .story-ai-phone-pair .story-puppy-prompt-phone {
    top: 52px;
    left: 17px;
    transform: rotate(-5deg);
  }

  .story-ai-phone-pair .story-puppy-result-phone {
    top: 17px;
    right: 14px;
    width: 214px;
    transform: rotate(4.5deg);
  }

  .story-composer-popout {
    top: 254px;
    left: 140px;
    width: 290px;
    min-height: 108px;
    padding: 14px 12px 8px;
    border-radius: 22px;
    transform: translateX(-50%) rotate(-5deg);
  }

  .story-composer-popout p {
    min-height: 34px;
    font-size: 16px;
    line-height: 22px;
  }

  .story-composer-controls {
    height: 44px;
    margin-top: 4px;
  }

  .story-composer-target {
    width: 44px;
    height: 44px;
  }

  .story-composer-tool > i,
  .story-composer-voice > i {
    width: 34px;
    height: 34px;
  }

  .story-composer-tool > i::before {
    top: 6px;
    left: 10px;
  }

  .story-composer-tool > i::after {
    top: 10px;
    left: 13px;
  }

  .story-composer-voice > i::before {
    top: 5px;
    left: 11px;
  }

  .story-composer-voice > i::after {
    top: 16px;
    left: 8px;
  }

  .story-composer-send > i {
    width: 36px;
    height: 36px;
  }

  .story-composer-send > i::before {
    top: 9px;
    left: 17px;
    height: 17px;
  }

  .story-composer-send > i::after {
    top: 9px;
    left: 12px;
  }
}

/* ====================================================================== */

/* Oat2 landing page.

   The shared shell (tokens, header, footer, buttons, store badges, legal and
   invitation pages) lives in styles.css. This file owns the landing sections,
   the install surfaces, and the mounts for the React product scenes.

   Two rules keep this file from drifting back into stacked override passes:
   1. Mobile first. Every block states the phone layout, then widens at 900px.
   2. One scale. Type and spacing come from the --lp-* tokens below, never from
      a literal that was measured off a single comp.
*/

:root {
  /* Type scale. Five display steps and three text steps, nothing between. */
  --lp-display: clamp(40px, 6.2vw, 74px);
  --lp-title: clamp(31px, 4.3vw, 58px);
  --lp-subtitle: clamp(23px, 2.3vw, 31px);
  --lp-lede: clamp(17px, 1.3vw, 20px);
  --lp-body: 17px;
  --lp-meta: 13px;

  /* Vertical rhythm on an 8px base. */
  --lp-1: 8px;
  --lp-2: 16px;
  --lp-3: 24px;
  --lp-4: 32px;
  --lp-5: 48px;
  --lp-6: 64px;
  --lp-section: clamp(72px, 7.4vw, 112px);

  /* The mobile install bar is fixed, so the page reserves its height once and
     never reflows when it appears. */
  --lp-bar: 68px;
}

/* Page frame ------------------------------------------------------------- */

.landing-page {
  padding-bottom: calc(var(--lp-bar) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .landing-page {
    padding-bottom: 0;
  }
}

/* Header. A landing page has one job, so the phone header carries the
   wordmark only and the fixed install bar carries the persistent call to
   action. Anchor navigation is a desktop affordance. */

.landing-page .landing-nav {
  margin-left: auto;
}

.landing-page .header-cta {
  margin-left: var(--lp-3);
}

@media (max-width: 899px) {
  .landing-page .landing-nav,
  .landing-page .header-cta {
    display: none;
  }
}

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

.hero {
  overflow: hidden;
  padding-block: var(--lp-3) 0;
}

/* Tight, so the product clears a real phone fold rather than a tall one. */
.hero-shell {
  display: grid;
  gap: var(--lp-1);
}

/* The button below fills this column, so the column is what keeps the line
   length readable. On desktop the hero grid does that job instead. */
.hero-copy {
  max-width: 500px;
}

.hero .eyebrow {
  margin-bottom: var(--lp-2);
}

.hero h1 {
  margin: 0;
  font-size: var(--lp-display);
  font-weight: 400;
  letter-spacing: -0.038em;
  line-height: 1;
}

.hero-lede {
  max-width: 32em;
  margin: var(--lp-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--lp-lede);
  line-height: 1.45;
}

.hero-actions {
  margin-top: var(--lp-3);
}

/* One primary action on a phone. It fills the copy column: a filled shape that
   stops short of the text above it reads as a mistake in a way ragged text
   does not. */
.cta-primary {
  width: 100%;
}

.desktop-download {
  display: none;
}

/* Short enough to hold one line down to a 320px screen, so the call to action
   lands on a single quiet row instead of trailing off over three. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: var(--lp-3) 0 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--lp-meta);
  list-style: none;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-trust li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss-soft);
  content: "";
}

/* The phone is cropped on small screens: enough of the real product to be
   recognisable, and a fade that reads as "keep scrolling" rather than as a
   half-empty block.

   The cut is derived rather than eyeballed. The capture is 1320x2868, so its
   height is 2.1727 of its width, and the frame adds 16px of chrome around it.
   Scanning the image for rows of flat background finds a gap at 0.579 to 0.625
   of its height, under the day's list. Cutting at 0.625 (2.1727 x 0.625 =
   1.358) and fading only across that band means the crop never dissolves a row
   half way, and because both numbers are proportions it holds at every width
   rather than at one. */
.hero-product {
  --device-width: min(300px, 72vw);
  position: relative;
  height: calc(8px + (var(--device-width) - 16px) * 1.358);
  margin: var(--lp-2) 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 92.5%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 92.5%, transparent 100%);
}

.hero-device {
  position: relative;
  z-index: 2;
  width: var(--device-width, min(300px, 72vw));
  margin-inline: auto;
  padding: 7px;
  border: 1px solid #30312c;
  border-radius: 50px;
  background: #171814;
  box-shadow:
    0 42px 90px rgba(37, 39, 29, 0.2),
    0 10px 28px rgba(37, 39, 29, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hero-device img {
  width: 100%;
  height: auto;
  border-radius: 43px;
  background: var(--canvas);
}

.hero-plan-card {
  display: none;
}

/* Problem -------------------------------------------------------------- */

.problem-section {
  border-top: 1px solid var(--hairline);
}

.problem-shell {
  display: grid;
  gap: var(--lp-5);
}

.problem-copy h2 {
  max-width: 16em;
  margin: 0;
  font-size: var(--lp-title);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.04;
}

.problem-copy > p:last-child {
  max-width: 32em;
  margin: var(--lp-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--lp-lede);
}

/* On a phone the scattered pieces settle into a grid: the same story, told in
   a third of the height. The loose composition returns on desktop. */
.problem-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scatter-piece,
.gather-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(73, 79, 56, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.scatter-piece {
  justify-content: center;
  padding: 14px 16px;
}

.scatter-piece span,
.gather-card > span {
  margin-bottom: 7px;
  color: var(--moss-dark);
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.scatter-piece strong {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.16;
}

.piece-message { background: var(--blush); }
.piece-date { background: var(--sky); }
.piece-note { background: var(--sand); grid-column: 1 / -1; }

.gather-card {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 20px;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}

.gather-card > strong {
  margin-top: var(--lp-2);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.gather-card > small {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
}

.people-stack {
  display: flex;
  align-items: center;
}

.people-stack i {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: -5px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #f4c0d1;
  color: #72243e;
  font-family: var(--sans);
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}

.people-stack i:nth-child(2) {
  background: #f5c4b3;
  color: #712b13;
}

.gather-card .people-stack {
  margin-top: var(--lp-3);
  padding-left: 5px;
}

/* Section scaffolding -------------------------------------------------- */

.section {
  padding-block: var(--lp-section);
}

.section-heading {
  margin-bottom: clamp(36px, 4.4vw, 60px);
}

.section-heading h2,
.spaces-copy h2,
.premium-copy h2,
.closing-shell h2 {
  margin: 0;
  font-size: var(--lp-title);
  font-weight: 400;
  letter-spacing: -0.036em;
  line-height: 1.02;
}

.feature-heading-side {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--lp-2);
}

.feature-heading-side .eyebrow {
  margin-bottom: 0;
}

/* Stacked, the illustration and the heading need the gap the desktop grid
   provides through its columns. */
.feature-heading h2 {
  margin-top: var(--lp-3);
}

.feature-illustration {
  width: min(100%, 240px);
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 82%);
  mix-blend-mode: multiply;
}

/* Oat2 AI ---------------------------------------------------------------- */

.premium-section {
  position: relative;
  overflow: hidden;
  background: var(--clay-soft);
}

.premium-section::before,
.premium-section::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  filter: blur(2px);
  pointer-events: none;
}

.premium-section::before {
  top: -280px;
  right: -190px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255, 247, 233, 0.84), rgba(255, 247, 233, 0) 70%);
}

.premium-section::after {
  bottom: -330px;
  left: -220px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(192, 141, 87, 0.24), rgba(192, 141, 87, 0) 68%);
}

.premium-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--lp-5);
}

.premium-mark {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: var(--lp-3);
  border-radius: 46% 54% 64% 36% / 44% 36% 64% 56%;
  background: var(--clay);
  box-shadow: inset 8px -6px 0 rgba(255, 255, 255, 0.22);
  transform: rotate(17deg);
}

.premium-copy h2 {
  max-width: 14em;
}

.premium-copy > p:not(.eyebrow) {
  max-width: 30em;
  margin: var(--lp-3) 0 var(--lp-4);
  color: #5f4937;
  font-size: var(--lp-lede);
}

.premium-copy .button {
  width: min(100%, 260px);
}

/* Features --------------------------------------------------------------- */

.section-features {
  background: var(--paper);
}

.feature-grid {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.feature-card {
  padding-block: var(--lp-3);
  border-bottom: 1px solid var(--hairline);
}

.feature-card:last-child {
  border-bottom: 0;
}

.feature-number {
  color: var(--moss);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.feature-card h3 {
  max-width: 14em;
  margin: 10px 0 var(--lp-1);
  font-size: var(--lp-subtitle);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.feature-card p {
  max-width: 32em;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--lp-body);
}

/* Spaces ----------------------------------------------------------------- */

.spaces-section {
  overflow: hidden;
  background: var(--paper);
}

.spaces-shell {
  display: grid;
  gap: var(--lp-5);
}

.spaces-copy h2 {
  max-width: 11em;
}

.spaces-copy > p:not(.eyebrow) {
  max-width: 30em;
  margin: var(--lp-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--lp-lede);
}

.structure-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: var(--lp-3) 0 0;
  padding: 0;
  list-style: none;
}

.structure-list li {
  padding: 9px 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--moss-dark);
  font-family: var(--sans);
  font-size: 10px;
}

.text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-top: var(--lp-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.link-line {
  position: relative;
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 160ms ease;
}

.link-line::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.text-link:hover .link-line {
  width: 36px;
}

/* Principles ------------------------------------------------------------- */

.principles-section {
  background: var(--paper);
}

.principle-grid {
  display: grid;
  border-top: 1px solid var(--hairline);
}

.principle-grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 var(--lp-2);
  padding-block: var(--lp-3);
  border-bottom: 1px solid var(--hairline);
}

.principle-grid article:last-child {
  border-bottom: 0;
}

.principle-mark {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  grid-row: 1 / span 2;
  border-radius: 50%;
  background: var(--sage);
}

.principle-mark::before,
.principle-mark::after {
  position: absolute;
  content: "";
}

.note-mark::before {
  top: 14px;
  left: 13px;
  width: 22px;
  height: 17px;
  border-top: 1px solid var(--moss-dark);
  border-bottom: 1px solid var(--moss-dark);
}

.note-mark::after {
  top: 23px;
  left: 13px;
  width: 15px;
  height: 1px;
  background: var(--moss-dark);
}

.free-mark::before {
  inset: 12px;
  border: 1px solid var(--moss-dark);
  border-radius: 4px;
}

.free-mark::after {
  top: 19px;
  left: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--moss-soft);
}

.calm-mark::before,
.calm-mark::after {
  width: 18px;
  height: 18px;
  border: 1px solid var(--moss-dark);
  border-radius: 50%;
}

.calm-mark::before {
  top: 15px;
  left: 9px;
}

.calm-mark::after {
  top: 15px;
  right: 9px;
  background: rgba(238, 240, 229, 0.72);
}

.principle-grid h3 {
  margin: 4px 0 6px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
}

.principle-grid p {
  max-width: 32em;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

/* Questions -------------------------------------------------------------- */

.faq-section {
  background: var(--canvas);
}

.faq-shell {
  display: grid;
  gap: var(--lp-5);
}

/* The wide sections give their heading a two-column grid, but the questions
   column is too narrow to split: the 190px eyebrow track would leave the
   heading a few characters wide and set it one word per line. Higher
   specificity than the desktop rule, so it holds at every width. */
.faq-shell .section-heading {
  display: block;
  margin: 0;
}

/* Closing call to action -------------------------------------------------- */

.closing-cta {
  padding-block: var(--lp-section);
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}

.closing-shell {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.closing-illustration {
  width: min(260px, 62vw);
  height: auto;
  margin-bottom: var(--lp-1);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 46%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 46%, transparent 78%);
  mix-blend-mode: multiply;
}

.closing-shell h2 {
  max-width: 13em;
}

.closing-shell > p {
  max-width: 30em;
  margin: var(--lp-3) 0 var(--lp-4);
  color: var(--ink-soft);
  font-size: var(--lp-lede);
}

.download-options {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--lp-2);
  scroll-margin-top: 104px;
}

.closing-qr {
  margin-top: var(--lp-4);
}

/* Scan to install --------------------------------------------------------- */

.qr-card {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: var(--paper-raised);
}

.qr-card img {
  width: 76px;
  height: 76px;
  border-radius: 6px;
}

.qr-card p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: var(--sans);
  text-align: left;
}

.qr-card strong {
  font-size: 14px;
  font-weight: 600;
}

.qr-card span {
  color: var(--muted);
  font-size: 12px;
}

/* Reveal on scroll -------------------------------------------------------- */

.hero-rise {
  animation: hero-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-rise-two { animation-delay: 70ms; }
.hero-rise-three { animation-delay: 140ms; }
.hero-rise-four { animation-delay: 210ms; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tablet. Still one column, but the hero has room to show more of the phone. */

@media (min-width: 600px) and (max-width: 899px) {
  .hero-product {
    --device-width: 340px;
  }

  .problem-scene,
  .feature-grid,
  .principle-grid {
    max-width: 620px;
  }
}

/* Desktop ----------------------------------------------------------------- */

@media (min-width: 900px) {
  .hero {
    padding-block: clamp(32px, 3.4vw, 64px) clamp(56px, 5vw, 96px);
  }

  .hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
  }

  .hero-copy {
    max-width: none;
  }

  .cta-primary {
    display: none;
  }

  .desktop-download {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lp-3);
  }

  .qr-card {
    display: flex;
  }

  .hero-trust {
    gap: 8px 22px;
    margin-top: var(--lp-4);
  }

  .hero-product {
    height: auto;
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-product .hero-device {
    width: min(318px, 80%);
    transform: rotate(1.2deg);
  }

  .hero-product .hero-device::before,
  .hero-product .hero-device::after {
    position: absolute;
    left: -11px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: #2d2e29;
    content: "";
  }

  .hero-product .hero-device::before {
    top: 142px;
    height: 52px;
  }

  .hero-product .hero-device::after {
    top: 210px;
    height: 78px;
  }

  .hero-plan-card {
    position: absolute;
    bottom: 42px;
    left: 0;
    z-index: 4;
    display: block;
    width: 214px;
    overflow: hidden;
    border: 1px solid rgba(73, 79, 56, 0.16);
    border-radius: 22px;
    background: rgba(250, 250, 245, 0.97);
    box-shadow: 0 22px 52px rgba(52, 55, 42, 0.18);
    transform: rotate(-3deg);
  }

  .hero-plan-card > img {
    width: 100%;
    height: 114px;
    object-fit: cover;
  }

  .hero-plan-card > div {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 15px;
  }

  .hero-plan-card span,
  .hero-plan-card small {
    color: var(--muted);
    font-family: var(--sans);
    font-size: 8px;
  }

  .hero-plan-card span {
    color: var(--moss-dark);
    font-weight: 600;
    letter-spacing: 0.11em;
  }

  .hero-plan-card strong {
    margin: 7px 0 3px;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.05;
  }

  /* The scattered pieces regain their loose composition where there is room
     for it, and settle when the section scrolls into view. */
  .problem-shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(48px, 5vw, 78px);
  }

  .problem-scene {
    position: relative;
    display: block;
    min-height: 430px;
    isolation: isolate;
  }

  .problem-scene::before {
    position: absolute;
    inset: 1% 0;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(162, 169, 143, 0.24), rgba(162, 169, 143, 0) 70%);
    content: "";
  }

  .scatter-piece,
  .gather-card {
    position: absolute;
    opacity: 0;
    transition: opacity 520ms ease, transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scatter-piece {
    width: 222px;
    min-height: 100px;
    padding: 18px 20px;
    border-radius: 17px;
  }

  .scatter-piece strong {
    font-size: 17px;
  }

  .piece-message {
    top: 8px;
    left: 0;
    transform: translate(-38px, -24px) rotate(-8deg);
    transition-delay: 80ms;
  }

  .piece-date {
    top: 34px;
    right: 0;
    transform: translate(42px, -18px) rotate(8deg);
    transition-delay: 150ms;
  }

  .piece-note {
    bottom: 18px;
    left: 8%;
    grid-column: auto;
    transform: translate(-28px, 34px) rotate(-7deg);
    transition-delay: 220ms;
  }

  .gather-card {
    top: 126px;
    left: 50%;
    z-index: 2;
    width: 330px;
    min-height: 200px;
    padding: 28px;
    border-radius: 22px;
    transform: translate(-50%, 22px) rotate(1deg) scale(0.96);
    transition-delay: 120ms;
  }

  .gather-card > strong {
    font-size: 33px;
  }

  .gather-card .people-stack {
    margin-top: auto;
  }

  .problem-scene.is-visible .scatter-piece,
  .problem-scene.is-visible .gather-card {
    opacity: 1;
  }

  .problem-scene.is-visible .piece-message,
  .problem-scene.is-visible .piece-note {
    transform: translate(0, 0) rotate(-3deg);
  }

  .problem-scene.is-visible .piece-date {
    transform: translate(0, 0) rotate(3deg);
  }

  .problem-scene.is-visible .gather-card {
    transform: translate(-50%, 0) rotate(1deg) scale(1);
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 3.4vw, 46px);
  }

  .section-heading .eyebrow {
    padding-top: 12px;
  }

  .feature-heading h2 {
    margin-top: 0;
  }

  .feature-illustration {
    width: min(100%, 280px);
  }

  .premium-shell {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(48px, 5.4vw, 86px);
  }

  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature-card {
    min-height: 250px;
    padding: 28px 32px 22px 0;
    border-right: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .feature-card + .feature-card {
    padding-left: 32px;
  }

  .feature-card:last-child {
    border-right: 0;
  }

  .feature-card h3 {
    margin-top: var(--lp-5);
  }

  .spaces-shell {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(48px, 6vw, 100px);
  }

  .principle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-3);
    border-top: 0;
  }

  .principle-grid article {
    display: block;
    padding: 28px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--canvas);
  }

  .principle-mark {
    margin-bottom: var(--lp-5);
  }

  .principle-grid h3 {
    margin: 0 0 10px;
    font-size: 24px;
  }

  .faq-shell {
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
    align-items: start;
    gap: clamp(48px, 5.4vw, 88px);
  }

  .closing-illustration {
    width: min(320px, 40vw);
  }

  .download-options {
    gap: var(--lp-3);
  }

  .closing-qr {
    margin-top: var(--lp-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rise {
    animation: none;
  }

  .scatter-piece,
  .gather-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Product scene mounts. The React scenes below bring their own internals;
   these rules own only how much room each one takes on the page. */

.product-visual {
  position: relative;
  width: min(100%, 620px);
  margin-inline: auto;
  filter: drop-shadow(0 26px 52px rgba(46, 36, 24, 0.13));
}

.product-visual > div {
  width: 100%;
}

.premium-scene.product-visual,
.space-stack.product-visual {
  min-height: 0;
}