/* Generated by scripts/bundle-preview-motion-css.mjs.
   Edit the source motion CSS files, then regenerate this bundle. */

/* Source: motion.css */

:root {
  --paper: #f4efe8;
  --paper-light: #fcf8f1;
  --ink: #2e2925;
  --muted: #746b62;
  --line: #cabfb1;
  --line-soft: rgba(110, 78, 59, .16);
  --clay: #c9794a;
  --coral: #e66f56;
  --lake: #82afc3;
  --sage: #809783;
  --walnut: #6e4e3b;
  --display: "Iowan Old Style", Baskerville, "Songti SC", serif;
  --body: "Avenir Next", "PingFang SC", "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", Menlo, Monaco, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: #d9d2c7;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  color: var(--ink);
  background: #d9d2c7;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
img {
  -webkit-user-drag: none;
}

button {
  font: inherit;
}

.stage-viewport {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}

.hero-viewport {
  background:
    radial-gradient(circle at 50% -8%, rgba(255,255,255,.55), transparent 42%),
    #d9d2c7;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background:
    radial-gradient(circle at 48% 2%, rgba(255,255,255,.34), transparent 34%),
    radial-gradient(circle at 82% 24%, rgba(201,121,74,.05), transparent 28%),
    var(--paper);
  box-shadow: 0 30px 90px rgba(58,45,34,.2);
}

.paper-grain {
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(46,41,37,.025) 0, rgba(46,41,37,.025) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 18% 33%, rgba(46,41,37,.13) 0 1px, transparent 1.4px),
    radial-gradient(circle at 71% 17%, rgba(46,41,37,.09) 0 1px, transparent 1.4px);
  background-size: 100% 100%, 89px 73px, 117px 101px;
}

.stage-header {
  position: absolute;
  z-index: 22;
  inset: 0;
  pointer-events: none;
}

.brand-lockup {
  position: absolute;
  top: 18px;
  left: 40px;
  width: 190px;
  height: 106px;
  object-fit: contain;
  transform-origin: 0 50%;
}

.edition {
  position: absolute;
  top: 42px;
  right: 58px;
  color: #93877b;
  font: 650 10px/1 var(--mono);
  letter-spacing: .18em;
}

.hero-copy {
  position: absolute;
  z-index: 18;
  top: 136px;
  left: 80px;
  width: 690px;
}

.eyebrow {
  margin: 0 0 17px;
  color: var(--clay);
  font: 700 11px/1.2 var(--mono);
  letter-spacing: .13em;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1 {
  max-width: 690px;
  color: #3e342d;
  font: 500 68px/.98 var(--display);
  letter-spacing: -.048em;
  text-wrap: balance;
}

.title-line {
  display: block;
  overflow: hidden;
  padding: 0 0 .08em;
}

.title-line > span {
  display: block;
  will-change: transform, opacity;
}

.loop-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 15px 9px;
  color: #fffaf4;
  background: #413a34;
  border-radius: 999px;
  font: 650 10px/1 var(--mono);
  letter-spacing: .1em;
}

.loop-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(230,111,86,.14);
}

.loop-note {
  position: absolute;
  z-index: 18;
  top: 214px;
  right: 84px;
  width: 370px;
  color: #665c53;
  font: 500 16px/1.62 var(--body);
  text-wrap: pretty;
}

.loop-note strong {
  display: block;
  margin-bottom: 8px;
  color: var(--sage);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .14em;
}

.memory-sky {
  position: absolute;
  z-index: 6;
  top: 326px;
  left: 0;
  width: 100%;
  height: 286px;
  overflow: hidden;
}

.memory-sky-inner {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.moment-track {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: flex;
  width: 3200px;
  height: 255px;
  will-change: transform;
}

.moment-set {
  position: relative;
  flex: 0 0 1600px;
  width: 1600px;
  height: 255px;
}

.moment-card {
  position: absolute;
  width: 148px;
  padding: 7px 7px 9px;
  color: #65594f;
  background: rgba(253,249,242,.97);
  border: 1px solid rgba(110,78,59,.31);
  box-shadow: 0 15px 32px rgba(78,56,40,.15);
  transform-origin: 50% 70%;
  will-change: transform;
}

.moment-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.25;
  object-fit: cover;
  filter: saturate(.79) sepia(.08) contrast(.96);
}

.moment-card figcaption {
  margin-top: 7px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.moment-graduation {
  top: 76px;
  left: 262px;
  transform: rotate(-3.2deg);
}

.moment-birthday {
  top: 38px;
  left: 716px;
  transform: rotate(2.7deg);
}

.moment-lake {
  top: 84px;
  left: 1195px;
  transform: rotate(-2deg);
}

.cloud-track {
  position: absolute;
  left: 0;
  display: flex;
  width: max-content;
  pointer-events: none;
  will-change: transform;
}

.cloud-track img {
  display: block;
  flex: none;
  width: auto;
  object-fit: contain;
}

.cloud-back {
  z-index: 2;
  top: 22px;
  height: 220px;
  opacity: .47;
  filter: blur(.35px) saturate(.72);
}

.cloud-back img {
  height: 220px;
}

.cloud-front {
  z-index: 5;
  top: 34px;
  height: 286px;
  opacity: .94;
  filter: saturate(.72) contrast(.96);
}

.cloud-front img {
  height: 286px;
}

.horizon-rule {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: rgba(83,71,61,.39);
  transform-origin: 0 50%;
}

.family-rail {
  position: absolute;
  z-index: 12;
  top: 612px;
  left: 0;
  width: 100%;
  height: 264px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(252,248,241,.32), rgba(245,238,228,.9)),
    var(--paper);
  border-bottom: 1px solid rgba(83,71,61,.34);
}

.family-rail::before,
.family-rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(83,71,61,.35) 25%, transparent 25%);
  background-size: 9px 1px;
}

.family-rail::before {
  top: 52px;
}

.family-rail::after {
  bottom: 42px;
}

.rail-meta {
  position: absolute;
  z-index: 10;
  top: 15px;
  left: 62px;
  color: #8e8175;
  font: 650 9px/1.2 var(--mono);
  letter-spacing: .13em;
}

.rail-meta b {
  color: var(--clay);
}

.rail-meta small {
  display: inline-block;
  margin-left: 20px;
  color: rgba(116,107,98,.65);
  font-size: 7px;
}

.rail-path {
  position: absolute;
  z-index: 1;
  top: 118px;
  left: 50px;
  width: 1440px;
  height: 46px;
  border-top: 1px dashed rgba(110,78,59,.2);
  border-radius: 50%;
  transform: rotate(-1.2deg);
}

.signal-bead {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 5px rgba(230,111,86,.1), 0 0 18px rgba(230,111,86,.25);
  will-change: transform;
}

.family-track {
  position: absolute;
  z-index: 5;
  top: 56px;
  left: 0;
  display: flex;
  width: 3200px;
  height: 164px;
  will-change: transform;
}

.family-set {
  display: grid;
  flex: 0 0 1600px;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  width: 1600px;
  height: 164px;
  padding: 0 72px;
}

.family-node {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  width: 132px;
  margin: 0 auto;
  will-change: transform;
}

.portrait {
  position: relative;
  width: 88px;
  height: 110px;
  padding: 5px;
  overflow: hidden;
  background: rgba(255,253,249,.83);
  border: 1.5px solid #4f4944;
  border-radius: 44px;
  box-shadow: 0 12px 26px rgba(74,54,39,.13);
  transform-origin: 50% 70%;
  will-change: transform, box-shadow;
}

.portrait::before,
.portrait::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 3px;
  border: 1px solid rgba(79,73,68,.28);
  border-radius: inherit;
  pointer-events: none;
}

.portrait::after {
  inset: 8px 5px;
  border-color: rgba(79,73,68,.15);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  border-radius: 37px;
  filter: saturate(.72) sepia(.06) contrast(.96);
}

.family-node b {
  margin-top: 8px;
  color: #655b52;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .04em;
}

.return-gate {
  position: absolute;
  z-index: 8;
  top: 17px;
  right: -56px;
  width: 205px;
  height: 225px;
  border: 1px solid rgba(83,71,61,.46);
  border-left-color: rgba(83,71,61,.25);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(244,239,232,.93) 64%);
  box-shadow: inset 12px 0 24px rgba(110,78,59,.04);
}

.return-gate::before,
.return-gate::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border: 1px dashed rgba(83,71,61,.2);
  border-radius: 50%;
}

.return-gate::after {
  top: 32px;
  left: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  border-style: solid;
  border-color: rgba(83,71,61,.13);
}

.return-gate span {
  position: absolute;
  top: 92px;
  right: 60px;
  width: 10px;
  height: 42px;
  border: 1px solid rgba(83,71,61,.35);
  border-radius: 8px;
}

.loop-legend {
  position: absolute;
  z-index: 10;
  right: 66px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #877a6e;
  font: 650 8px/1 var(--mono);
  letter-spacing: .11em;
}

.loop-legend b {
  color: var(--clay);
  font-weight: 500;
}

.scroll-cue {
  position: absolute;
  z-index: 40;
  top: 581px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  color: rgba(65,58,52,.7);
  background: rgba(252,248,241,.7);
  border: 1px solid rgba(83,71,61,.16);
  border-radius: 999px;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  font: 650 8px/1 var(--mono);
  letter-spacing: .13em;
}

.scroll-cue i {
  display: block;
  width: 30px;
  height: 1px;
  overflow: hidden;
  background: rgba(65,58,52,.17);
}

.scroll-cue i::after {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background: var(--clay);
}

.product-section {
  position: relative;
  height: 260svh;
  min-height: 1600px;
  background: var(--paper);
}

.product-sticky {
  position: sticky;
  top: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(217,171,116,.14), transparent 36%),
    radial-gradient(circle at 16% 26%, rgba(130,175,195,.06), transparent 26%),
    radial-gradient(circle at 86% 74%, rgba(201,121,74,.06), transparent 25%),
    var(--paper);
}

.product-stage {
  background: transparent;
  box-shadow: none;
  perspective: 1800px;
}

.product-kicker {
  position: absolute;
  z-index: 12;
  top: 76px;
  left: 50%;
  width: 660px;
  color: #3e342d;
  text-align: center;
  transform: translateX(-50%);
}

.product-kicker small {
  display: block;
  margin-bottom: 12px;
  color: var(--clay);
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .15em;
}

.product-kicker h2 {
  font: 500 48px/1.04 var(--display);
  letter-spacing: -.04em;
}

.handoff-field {
  position: absolute;
  z-index: 6;
  inset: 0;
}

.handoff-chip {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 112px;
  padding: 10px 16px 9px;
  color: #77695e;
  background: rgba(252,248,241,.84);
  border: 1px solid rgba(110,78,59,.25);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(78,56,40,.09);
  font: 650 9px/1 var(--mono);
  letter-spacing: .12em;
  will-change: transform, opacity, filter;
}

.chip-moments { top: 282px; left: 222px; }
.chip-voice { top: 580px; left: 300px; }
.chip-reminders { top: 238px; right: 308px; }
.chip-care { top: 540px; right: 232px; }
.chip-memory { top: 712px; left: 50%; transform: translateX(-50%); }

.product-orbit {
  position: absolute;
  z-index: 2;
  top: 447px;
  left: 50%;
  border: 1px dashed rgba(110,78,59,.19);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.orbit-one {
  width: 700px;
  height: 430px;
}

.orbit-two {
  width: 900px;
  height: 570px;
  border-style: solid;
  border-color: rgba(130,175,195,.1);
}

.product-halo {
  position: absolute;
  z-index: 1;
  top: 450px;
  left: 50%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  background:
    radial-gradient(circle, rgba(255,255,255,.64) 0, rgba(217,171,116,.15) 36%, rgba(217,171,116,0) 70%);
  filter: blur(4px);
}

.product-reveal {
  position: absolute;
  z-index: 8;
  top: 245px;
  left: 50%;
  width: 600px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.product-float {
  position: relative;
  width: 100%;
  will-change: transform;
}

.product-image {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: saturate(.82) contrast(.97) drop-shadow(0 28px 28px rgba(76,51,34,.13));
}

.product-callout {
  position: absolute;
  z-index: 11;
  width: 320px;
  padding-top: 16px;
  border-top: 1px solid rgba(110,78,59,.38);
  opacity: 0;
  will-change: transform, opacity, filter;
}

.product-callout::before {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.product-callout.west::before { left: 0; }
.product-callout.east::before { right: 0; }
.product-callout.east { text-align: right; }

.product-callout small {
  display: block;
  margin-bottom: 10px;
  color: var(--clay);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .14em;
}

.product-callout h3 {
  color: #463b33;
  font: 500 25px/1.05 var(--display);
  letter-spacing: -.025em;
}

.product-callout p {
  margin-top: 10px;
  color: #75695e;
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.callout-moments { top: 292px; left: 86px; }
.callout-voice { top: 594px; left: 118px; }
.callout-care { top: 292px; right: 86px; }
.callout-memory { top: 594px; right: 118px; }

.product-footer-note {
  position: absolute;
  z-index: 12;
  bottom: 32px;
  left: 50%;
  color: #9b8d80;
  transform: translateX(-50%);
  font: 650 8px/1 var(--mono);
  letter-spacing: .15em;
  opacity: 0;
}

.motion-controls {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 7px;
  opacity: .34;
  transition: opacity .25s ease;
}

.motion-controls:hover,
.motion-controls:focus-within {
  opacity: 1;
}

.motion-controls button {
  appearance: none;
  padding: 8px 11px 7px;
  color: #5f554d;
  background: rgba(252,248,241,.86);
  border: 1px solid rgba(79,68,59,.27);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  font: 700 8px/1 var(--mono);
  letter-spacing: .1em;
}

.motion-controls button:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .motion-controls {
    right: 10px;
    bottom: 10px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .motion-controls,
  .scroll-cue {
    display: none;
  }
}

/* Source: motion-v3.0.css */

html { scroll-behavior: smooth; }

body {
  background: #e4ddd3;
}

a { color: inherit; }

.flow-story {
  position: relative;
  height: 430svh;
  min-height: 3300px;
  background: var(--paper);
}

.story-sticky {
  position: sticky;
  top: 0;
  background:
    radial-gradient(circle at 74% 43%, rgba(224, 169, 107, .14), transparent 33%),
    var(--paper);
}

.story-stage {
  --background-shift: 0px;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% calc(45% + var(--background-shift)), rgba(255, 255, 255, .82), transparent 28%),
    linear-gradient(180deg, #faf6ef 0%, #f3ede5 100%);
  box-shadow: 0 30px 90px rgba(58, 45, 34, .17);
}

.story-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background:
    linear-gradient(90deg, transparent 49.96%, rgba(92, 76, 64, .12) 50%, transparent 50.04%),
    linear-gradient(0deg, transparent 49.96%, rgba(92, 76, 64, .08) 50%, transparent 50.04%);
}

.paper-grain {
  opacity: .075;
  will-change: transform;
}

.story-header {
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

.story-brand {
  position: absolute;
  top: 22px;
  left: 42px;
  width: 150px;
  height: 42px;
  overflow: hidden;
  pointer-events: auto;
}

.story-brand img {
  position: absolute;
  top: -28px;
  left: -10px;
  width: 170px;
  max-width: none;
}

.story-edition {
  position: absolute;
  top: 41px;
  right: 54px;
  color: #8e8176;
  font: 650 9px/1 var(--mono);
  letter-spacing: .18em;
}

.hero-copy {
  position: absolute;
  z-index: 20;
  top: 172px;
  left: 86px;
  width: 650px;
  will-change: transform, opacity, filter;
}

.hero-copy .eyebrow,
.section-intro .eyebrow,
.relationship-heading .eyebrow,
.closing .eyebrow {
  margin: 0 0 17px;
  color: var(--clay);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .14em;
}

.hero-copy h1 {
  max-width: 650px;
  color: #3d332d;
  font: 500 64px/.98 var(--display);
  letter-spacing: -.05em;
}

.hero-description {
  width: 535px;
  margin-top: 24px;
  color: #685d54;
  font-size: 17px;
  line-height: 1.58;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
  text-decoration: none;
}

.primary-action {
  padding: 0 22px;
  color: #fffaf4;
  background: #403831;
  border: 1px solid #403831;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.primary-action:hover { background: #5a4b40; transform: translateY(-2px); }

.secondary-action {
  color: #76695f;
  border-bottom: 1px solid rgba(118, 105, 95, .55);
}

.primary-action:focus-visible,
.secondary-action:focus-visible,
.flow-replay:focus-visible,
.closing a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

.hero-aside {
  position: absolute;
  z-index: 20;
  top: 106px;
  right: 74px;
  width: 330px;
  color: #75695f;
  font-size: 12px;
  line-height: 1.55;
  will-change: transform, opacity;
}

.hero-aside strong {
  display: block;
  margin-bottom: 8px;
  color: var(--sage);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .14em;
}

.flow-device {
  position: absolute;
  z-index: 12;
  top: 188px;
  left: 68%;
  width: 725px;
  transform: translateX(-50%);
  transform-origin: 50% 53%;
  will-change: transform, opacity, filter;
}

.device-entrance,
.device-depth {
  position: relative;
  width: 100%;
  transform-origin: 50% 53%;
  will-change: transform, opacity, filter;
}

.device-glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 460px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: .78;
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(220, 170, 111, .14) 44%, transparent 72%);
  filter: blur(8px);
}

.device-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 28px 28px rgba(76, 51, 34, .15));
}

.device-image,
.device-lamp-off,
.device-lamp-bloom {
  display: block;
  width: 100%;
  height: auto;
}

.device-image {
  position: relative;
  z-index: 1;
  filter: saturate(.88) contrast(.98);
}

.device-lamp-off,
.device-lamp-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
}

.device-lamp-off {
  z-index: 4;
  clip-path: polygon(24.55% 27.62%, 80.15% 29.34%, 78.18% 32.58%, 25.88% 30.8%);
  filter: brightness(.94) saturate(.82);
  will-change: opacity, filter;
}

.device-lamp-bloom {
  z-index: 3;
  opacity: 0;
  clip-path: polygon(24.55% 27.62%, 79.18% 29.31%, 77.03% 32.46%, 25.88% 30.8%);
  filter: brightness(1.1) saturate(1.06) blur(6px);
  mix-blend-mode: screen;
}

.device-screen-blank,
.device-screen-moment {
  position: absolute;
  z-index: 2;
  top: 31.9%;
  left: 24.7%;
  width: 51.8%;
  height: 35.8%;
  clip-path: polygon(5.5% 0, 100% 7%, 95% 100%, 0 91%);
}

.device-screen-blank {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #9d8f82;
  background:
    linear-gradient(rgba(238, 231, 221, .83), rgba(238, 231, 221, .83)),
    url("./generated/moment-lake.jpg") center / cover no-repeat;
}

.device-screen-blank i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 6px rgba(230, 111, 86, .1);
}

.device-screen-blank small {
  font: 700 7px/1 var(--mono);
  letter-spacing: .13em;
}

.device-screen-moment {
  object-fit: cover;
  opacity: 0;
  filter: saturate(.78) sepia(.04) contrast(.96);
}

.device-reminder,
.family-memory-seal {
  position: absolute;
  z-index: 5;
  width: 190px;
  padding: 11px 13px;
  color: #59483d;
  background: rgba(255, 251, 244, .95);
  box-shadow: 0 10px 24px rgba(63, 45, 34, .16);
}

.device-reminder {
  right: 25%;
  bottom: 34%;
  border-left: 2px solid var(--sage);
}

.family-memory-seal {
  right: 25%;
  bottom: 34%;
  border-left: 2px solid var(--coral);
}

.device-reminder small,
.family-memory-seal small {
  display: block;
  margin-bottom: 4px;
  font: 700 6.3px/1.2 var(--mono);
  letter-spacing: .11em;
}

.device-reminder small { color: var(--sage); }
.family-memory-seal small { color: var(--clay); }

.device-reminder b,
.family-memory-seal b {
  display: block;
  font: 500 13px/1.1 var(--display);
}

.device-reminder span,
.family-memory-seal span {
  display: block;
  margin-top: 4px;
  color: #806f63;
  font-size: 6.8px;
}

.flow-source {
  position: absolute;
  z-index: 8;
  top: 412px;
  width: 210px;
  opacity: 0;
  color: #6c6057;
}

.flow-source small {
  display: block;
  margin-bottom: 6px;
  color: var(--clay);
  font: 700 8px/1 var(--mono);
  letter-spacing: .14em;
}

.flow-source span {
  font: 500 18px/1.1 var(--display);
}

.source-family { left: 86px; }
.source-home { right: 86px; text-align: right; }
.source-home small { color: #6f95a5; }

.route {
  position: absolute;
  z-index: 4;
  left: 280px;
  width: 1040px;
  height: 1px;
  opacity: 0;
  transform-origin: 0 50%;
}

.route::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  background-image: linear-gradient(90deg, currentColor 25%, transparent 25%);
  background-position: center;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  opacity: .45;
}

.route i {
  position: absolute;
  top: -4px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.route-out { top: 505px; color: #d7835f; }
.route-back { top: 696px; color: #79a9bd; transform-origin: 100% 50%; }
.route-back i { right: auto; left: -1px; transform: rotate(-135deg); }

.moment-token {
  position: absolute;
  z-index: 16;
  top: 468px;
  left: 112px;
  width: 178px;
  padding: 7px 7px 9px;
  color: #65594f;
  background: rgba(253, 249, 242, .98);
  border: 1px solid rgba(110, 78, 59, .28);
  box-shadow: 0 14px 30px rgba(78, 56, 40, .14);
  will-change: transform, opacity, filter;
}

.moment-token img {
  display: block;
  width: 100%;
  aspect-ratio: 1.25;
  object-fit: cover;
  filter: saturate(.8) sepia(.05) contrast(.96);
}

.moment-token figcaption {
  margin-top: 6px;
  font-size: 8px;
}

.moment-token small {
  display: block;
  margin-bottom: 3px;
  color: #a06f56;
  font: 700 6.5px/1.2 var(--mono);
  letter-spacing: .11em;
}

.message-token {
  position: absolute;
  z-index: 16;
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 11px 13px;
  background: rgba(255, 253, 248, .97);
  border: 1px solid rgba(110, 78, 59, .2);
  box-shadow: 0 12px 28px rgba(78, 56, 40, .1);
  will-change: transform, opacity, filter;
}

.message-token small {
  display: block;
  margin-bottom: 3px;
  font: 700 6.7px/1.2 var(--mono);
  letter-spacing: .11em;
}

.message-token b {
  display: block;
  color: #54483f;
  font-size: 10px;
  font-weight: 650;
}

.message-token span {
  display: block;
  margin-top: 2px;
  color: #88796d;
  font-size: 7.8px;
}

.reminder-token {
  top: 620px;
  left: 112px;
  grid-template-columns: 22px 1fr;
  width: 230px;
  border-top: 2px solid var(--sage);
}

.reminder-token small { color: var(--sage); }

.calendar-icon {
  width: 18px;
  height: 18px;
  border: 1px solid var(--sage);
  border-radius: 2px;
}

.voice-token {
  top: 650px;
  right: 112px;
  grid-template-columns: 10px 1fr auto;
  width: 220px;
  border-top: 2px solid #79a9bd;
}

.voice-token small { color: #6f95a5; }

.voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #79a9bd;
  box-shadow: 0 0 0 5px rgba(121, 169, 189, .12);
}

.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}

.voice-wave i {
  display: block;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #6e8792;
  transform-origin: 50% 50%;
}

.voice-wave i:nth-child(2),
.voice-wave i:nth-child(4) { height: 15px; }
.voice-wave i:nth-child(3) { height: 21px; }

.chapter-status {
  position: absolute;
  z-index: 24;
  bottom: 28px;
  left: 50%;
  width: 520px;
  height: 35px;
  transform: translateX(-50%);
  color: #88796d;
  text-align: center;
  pointer-events: none;
}

.status-copy {
  position: absolute;
  inset: 0 0 auto;
  font: 700 7px/1.2 var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
}

.status-track {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.status-track i {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(120, 100, 85, .2);
}

.status-track i:first-child { background: var(--clay); }

.story-next {
  position: absolute;
  z-index: 20;
  bottom: 88px;
  left: 50%;
  width: 540px;
  transform: translateX(-50%);
  opacity: 0;
  color: #4c4037;
  text-align: center;
}

.story-next small {
  display: block;
  margin-bottom: 10px;
  color: var(--clay);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .14em;
}

.story-next span { font: 500 24px/1.1 var(--display); }

.scroll-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.anchor-flow { top: 16%; }

.section-shell {
  width: min(1240px, calc(100% - 96px));
  margin: 0 auto;
}

.capabilities,
.relationship {
  position: relative;
  background: #f7f2eb;
  border-top: 1px solid rgba(93, 77, 64, .22);
}

.capabilities { padding: 136px 0 150px; }

.section-intro {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  column-gap: 80px;
  align-items: end;
}

.section-intro .eyebrow { grid-column: 1 / -1; }

.section-intro h2,
.relationship-heading h2,
.closing h2 {
  color: #3f352e;
  font: 500 52px/1 var(--display);
  letter-spacing: -.04em;
}

.section-intro > p:last-child {
  max-width: 480px;
  color: #70645a;
  font-size: 16px;
  line-height: 1.6;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 84px;
}

.capability-grid article {
  position: relative;
  min-height: 240px;
  padding: 28px 8px 0 0;
  border-top: 1px solid rgba(98, 76, 61, .34);
}

.capability-grid article::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.capability-grid small,
.relationship-side small,
.relationship-product span {
  color: var(--clay);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .13em;
}

.capability-grid h3 {
  margin-top: 26px;
  color: #493d35;
  font: 500 25px/1.08 var(--display);
  letter-spacing: -.025em;
}

.capability-grid p {
  margin-top: 16px;
  color: #76695f;
  font-size: 13px;
  line-height: 1.65;
}

.relationship {
  padding: 136px 0 170px;
  background: #eee6dc;
}

.relationship-heading { text-align: center; }

.relationship-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: center;
  gap: 64px;
  min-height: 530px;
  margin-top: 42px;
}

.relationship-side {
  position: relative;
  z-index: 3;
  text-align: center;
}

.portrait-row {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.portrait-row img {
  width: 86px;
  height: 105px;
  margin-left: -18px;
  padding: 4px;
  object-fit: cover;
  object-position: center 22%;
  background: #fbf8f2;
  border: 1px solid rgba(70, 58, 49, .72);
  border-radius: 46px;
  box-shadow: 0 14px 28px rgba(79, 57, 41, .1);
  filter: saturate(.75) sepia(.04);
}

.portrait-row img:first-child { margin-left: 0; }

.relationship-side h3 {
  margin-top: 10px;
  color: #55483f;
  font: 500 22px/1.15 var(--display);
}

.parents-side small { color: #6f95a5; }

.relationship-product {
  position: relative;
  z-index: 4;
  text-align: center;
}

.relationship-product img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 25px 24px rgba(76, 51, 34, .14)) saturate(.88);
}

.relationship-product span { display: block; margin-top: -26px; color: #8a7567; }

.relationship-arrow {
  position: absolute;
  right: 21%;
  left: 21%;
  height: 1px;
  color: #b17154;
  background-image: linear-gradient(90deg, currentColor 28%, transparent 28%);
  background-size: 11px 1px;
}

.relationship-arrow::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.relationship-arrow span {
  position: absolute;
  left: 50%;
  padding: 0 10px;
  transform: translate(-50%, -50%);
  background: #eee6dc;
  font: 700 7px/1 var(--mono);
  letter-spacing: .12em;
  white-space: nowrap;
}

.arrow-out { top: 38%; }
.arrow-out::after { right: 0; transform: rotate(45deg); }
.arrow-back { top: 68%; color: #6f95a5; }
.arrow-back::after { left: 0; transform: rotate(-135deg); }

.closing {
  position: relative;
  display: grid;
  min-height: 620px;
  place-items: center;
  align-content: center;
  overflow: hidden;
  padding: 120px 32px;
  background: #f8f4ed;
  text-align: center;
}

.closing-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224, 169, 107, .18), transparent 67%);
}

.closing > *:not(.closing-glow) { position: relative; z-index: 2; }

.closing > img {
  width: 142px;
  height: 58px;
  margin-bottom: 26px;
  object-fit: cover;
  object-position: left center;
}

.closing h2 { font-size: 62px; }

.closing a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  margin-top: 34px;
  padding: 0 24px;
  color: #fffaf4;
  background: #403831;
  font: 700 9px/1 var(--mono);
  letter-spacing: .13em;
  text-decoration: none;
}

.flow-replay {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 18px;
  min-width: 104px;
  padding: 10px 14px 9px;
  color: #7c7065;
  background: rgba(249, 245, 238, .87);
  border: 1px solid rgba(110, 78, 59, .17);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(73, 55, 43, .08);
  font: 700 7px/1 var(--mono);
  letter-spacing: .13em;
  cursor: pointer;
  opacity: .55;
  backdrop-filter: blur(8px);
  transition: opacity .2s ease;
}

.flow-replay:hover { opacity: 1; }

.flow-replay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .section-shell { width: min(100% - 48px, 720px); }
  .section-intro { grid-template-columns: 1fr; gap: 22px; }
  .section-intro .eyebrow { grid-column: auto; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .relationship-map { grid-template-columns: 1fr; gap: 56px; }
  .relationship-product { width: min(520px, 90%); margin: 0 auto; }
  .relationship-arrow { display: none; }
}

@media (max-width: 700px) {
  .flow-story { height: 420svh; min-height: 2900px; }

  .story-stage { width: 900px; height: 1440px; }
  .story-brand { top: 28px; left: 36px; }
  .story-edition { top: 45px; right: 38px; }

  .hero-copy { top: 132px; left: 64px; width: 772px; }
  .hero-copy h1 { max-width: 760px; font-size: 62px; }
  .hero-description { width: 690px; font-size: 20px; }
  .hero-aside { top: 405px; right: auto; left: 64px; width: 650px; font-size: 15px; }
  .hero-aside { display: none; }
  .hero-actions { margin-top: 28px; }
  .primary-action, .secondary-action { min-height: 52px; font-size: 10px; }

  .flow-device { top: 548px; left: 50%; width: 800px; }
  .flow-source { top: 1160px; }
  .source-family { left: 64px; }
  .source-home { right: 64px; }
  .route { left: 220px; width: 460px; }
  .route-out { top: 1240px; }
  .route-back { top: 1330px; }
  .moment-token { top: 1040px; left: 64px; }
  .reminder-token { top: 1190px; left: 64px; }
  .voice-token { top: 1260px; right: 64px; }
  .chapter-status { bottom: 36px; width: 700px; }
  .status-copy { font-size: 9px; }
  .story-next { bottom: 92px; }

  .capabilities,
  .relationship { padding: 96px 0 110px; }
  .section-intro h2,
  .relationship-heading h2 { font-size: 42px; }
  .capability-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 58px; }
  .capability-grid article { min-height: auto; padding-bottom: 34px; }
  .relationship-map { min-height: auto; margin-top: 70px; }
  .relationship-product span { margin-top: -12px; }
  .closing { min-height: 520px; }
  .closing h2 { font-size: 48px; }
  .flow-replay { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .paper-grain,
  .hero-copy,
  .flow-device,
  .device-entrance,
  .device-depth,
  .moment-token,
  .message-token { will-change: auto; }
}

/* Source: motion-v4.0.css */

.flow-story {
  height: 390svh;
  min-height: 2900px;
}

.story-stage {
  background:
    radial-gradient(circle at 50% calc(48% + var(--background-shift)), rgba(255, 255, 255, .86), transparent 29%),
    radial-gradient(circle at 18% 58%, rgba(230, 111, 86, .045), transparent 24%),
    radial-gradient(circle at 82% 58%, rgba(121, 169, 189, .055), transparent 24%),
    linear-gradient(180deg, #faf6ef 0%, #f3ede5 100%);
}

.hero-copy {
  top: 88px;
  left: 80px;
  width: 660px;
}

.hero-copy h1 {
  max-width: 660px;
  font-size: 58px;
}

.hero-description {
  width: 520px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
}

.primary-action {
  width: max-content;
  margin-top: 22px;
  text-decoration: none;
}

.hero-aside {
  top: 126px;
  right: 80px;
  width: 340px;
}

.flow-device {
  top: 166px;
  left: 50%;
  width: 720px;
}

.people-group {
  position: absolute;
  z-index: 9;
  top: 442px;
  width: 282px;
}

.family-group { left: 54px; }
.parents-group { right: 54px; }

.group-label { margin-bottom: 18px; }
.parents-group .group-label { text-align: right; }

.group-label small {
  display: block;
  margin-bottom: 6px;
  color: #a97860;
  font: 700 8px/1.2 var(--mono);
  letter-spacing: .13em;
}

.parents-group .group-label small { color: #6f95a5; }

.group-label b {
  display: block;
  color: #53473e;
  font: 500 20px/1.05 var(--display);
  letter-spacing: -.02em;
}

.people-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.parents-group .people-row { justify-content: flex-end; }

.person {
  display: grid;
  justify-items: center;
  width: 70px;
  color: #70645a;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .03em;
}

.person-portrait {
  position: relative;
  width: 58px;
  height: 72px;
  padding: 3px;
  overflow: hidden;
  background: rgba(255, 253, 249, .94);
  border: 1px solid rgba(79, 73, 68, .72);
  border-radius: 30px;
  box-shadow: 0 10px 24px rgba(74, 54, 39, .11);
}

.person-portrait::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(79, 73, 68, .18);
  border-radius: inherit;
}

.person-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 26px;
  filter: saturate(.72) sepia(.06) contrast(.96);
}

.person span { margin-top: 7px; }

.route-out {
  top: 505px;
  left: 330px;
  width: 470px;
}

.route-back {
  top: 704px;
  left: 330px;
  width: 790px;
}

.direction-note {
  position: absolute;
  z-index: 8;
  opacity: 0;
  color: #9a7b68;
  font: 700 7px/1 var(--mono);
  letter-spacing: .13em;
  white-space: nowrap;
}

.outbound-note { top: 477px; left: 485px; }
.return-note { top: 723px; left: 687px; color: #708d99; }

.moment-token {
  top: 382px;
  left: 286px;
}

.reminder-token {
  top: 584px;
  left: 286px;
}

.voice-token {
  top: 666px;
  right: 270px;
}

.chapter-status { bottom: 26px; }

.scroll-anchor {
  position: absolute;
  top: 18%;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

@media (max-width: 700px) {
  .flow-story {
    height: 390svh;
    min-height: 2800px;
  }

  .hero-copy {
    top: 118px;
    left: 64px;
    width: 772px;
  }

  .hero-copy h1 {
    max-width: 760px;
    font-size: 62px;
  }

  .hero-description {
    width: 700px;
    font-size: 19px;
  }

  .primary-action {
    min-height: 52px;
    font-size: 10px;
  }

  .hero-aside { display: none; }

  .flow-device {
    top: 500px;
    left: 50%;
    width: 800px;
  }

  .people-group {
    top: 1140px;
    width: 300px;
  }

  .family-group { left: 64px; }
  .parents-group { right: 64px; }
  .group-label b { font-size: 23px; }
  .person { width: 78px; font-size: 9px; }
  .person-portrait { width: 66px; height: 82px; }

  .route-out {
    top: 1015px;
    left: 220px;
    width: 230px;
  }

  .route-back {
    top: 1325px;
    left: 220px;
    width: 470px;
  }

  .outbound-note { top: 987px; left: 270px; }
  .return-note { top: 1344px; left: 385px; }

  .moment-token {
    top: 930px;
    left: 72px;
  }

  .reminder-token {
    top: 1300px;
    left: 72px;
  }

  .voice-token {
    top: 1300px;
    right: 72px;
  }

  .chapter-status { bottom: 36px; }
}

/* Source: motion-v4.1.css */

/*
 * v4.1 — visual-language calibration only.
 * Layout, family relationships and GSAP choreography remain inherited from v4.0.
 */

:root {
  --paper: #f8f5ef;
  --paper-light: #fffdf9;
  --ink: #3b322d;
  --muted: #736a64;
  --line: #d9d1c8;
  --line-soft: rgba(74, 61, 53, .12);
  --clay: #df886b;
  --coral: #e99274;
  --lake: #b18d7c;
  --sage: #a58a78;
  --walnut: #6e4e3b;
  --display: Baskerville, "Iowan Old Style", "Times New Roman", serif;
  --body: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --mono: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
  background: #e8e3dc;
}

.story-sticky {
  background: var(--paper);
}

.story-stage {
  background:
    radial-gradient(circle at 50% calc(48% + var(--background-shift)), rgba(255, 255, 255, .92), transparent 31%),
    radial-gradient(circle at 50% 65%, rgba(233, 146, 116, .05), transparent 34%),
    linear-gradient(180deg, #fbfaf7 0%, #f7f3ed 100%);
  box-shadow: 0 30px 90px rgba(59, 50, 45, .12);
}

.story-stage::before {
  opacity: .055;
}

.paper-grain {
  opacity: .035;
}

.story-edition,
.hero-description,
.hero-aside,
.person,
.chapter-status {
  color: var(--muted);
}

.hero-copy .eyebrow,
.hero-aside strong,
.group-label small,
.parents-group .group-label small,
.moment-token small,
.reminder-token small,
.voice-token small,
.direction-note,
.return-note {
  color: var(--coral);
}

.story-edition,
.hero-copy .eyebrow,
.hero-aside strong,
.group-label small,
.moment-token small,
.message-token small,
.direction-note,
.status-copy {
  font-weight: 600;
  letter-spacing: .15em;
}

.hero-copy h1 {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.043em;
}

.hero-description {
  font-weight: 400;
}

.primary-action {
  min-height: 48px;
  padding: 0 24px;
  color: #fffdf9;
  background: var(--coral);
  border-color: var(--coral);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(210, 116, 87, .16);
}

.primary-action:hover {
  background: #dc8468;
  border-color: #dc8468;
}

.group-label b,
.message-token b,
.device-reminder,
.family-memory-seal {
  color: #4b4039;
}

.person-portrait {
  background: rgba(255, 253, 249, .98);
  border-color: rgba(91, 74, 63, .42);
  box-shadow: 0 10px 24px rgba(74, 54, 39, .08);
}

.person-portrait::after {
  border-color: rgba(91, 74, 63, .12);
}

.person-portrait img,
.moment-token img,
.device-screen-moment {
  filter: saturate(.84) sepia(.025) contrast(.98);
}

.device-image {
  filter: saturate(.92) contrast(.99);
}

.device-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, .96), rgba(233, 146, 116, .1) 45%, transparent 72%);
}

.moment-token,
.message-token,
.device-reminder,
.family-memory-seal {
  background: rgba(255, 253, 249, .97);
  border-color: rgba(91, 74, 63, .16);
  box-shadow: 0 12px 28px rgba(78, 56, 40, .09);
}

.reminder-token,
.voice-token {
  border-top-color: var(--coral);
}

.calendar-icon {
  border-color: var(--coral);
}

.voice-dot,
.voice-wave i {
  background: var(--coral);
}

.voice-dot {
  box-shadow: 0 0 0 5px rgba(233, 146, 116, .12);
}

.route-out,
.route-back {
  color: rgba(223, 136, 107, .78);
}

.status-track i {
  background: rgba(91, 74, 63, .14) !important;
}

.status-track i:nth-child(1),
.status-track i:nth-child(5) {
  background: var(--coral) !important;
}

.status-track i:nth-child(2) {
  background: #e7b39f !important;
}

.status-track i:nth-child(3) {
  background: #c9aa99 !important;
}

.status-track i:nth-child(4) {
  background: #a98776 !important;
}

.flow-replay {
  color: #5e524b;
  background: rgba(255, 253, 249, .86);
  border-color: rgba(91, 74, 63, .18);
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(78, 56, 40, .06);
}

/* Source: motion-v4.3.css */

/*
 * v4.3 — family portraits are promoted from secondary labels to clear people anchors.
 * The frame, relationship groups and GSAP choreography remain unchanged.
 */

.people-group {
  width: 318px;
}

.family-group { left: 42px; }
.parents-group { right: 42px; }

.people-row {
  gap: 10px;
}

.person {
  width: 96px;
  font-size: 9px;
}

.person-portrait {
  width: 84px;
  height: 104px;
  padding: 4px;
  border-radius: 44px;
  box-shadow: 0 14px 30px rgba(74, 54, 39, .11);
}

.person-portrait::after {
  inset: 5px;
}

.person-portrait img {
  border-radius: 39px;
}

.person span {
  margin-top: 9px;
}

@media (max-width: 700px) {
  .people-group {
    width: 340px;
  }

  .family-group { left: 48px; }
  .parents-group { right: 48px; }

  .people-row {
    gap: 10px;
  }

  .person {
    width: 104px;
    font-size: 10px;
  }

  .person-portrait {
    width: 88px;
    height: 110px;
  }
}

/* Source: motion-v4.4.css */

/*
 * v4.4 — dedicated mobile composition.
 * Desktop remains inherited from v4.3. Mobile uses a native portrait stage:
 * family → Little Update → fixed frame → returning Voice → family memory.
 */

@media (max-width: 700px) {
  html,
  body {
    background: var(--paper);
  }

  .flow-story {
    height: 360svh;
    min-height: 3000px;
  }

  .stage-viewport {
    min-height: 640px;
  }

  .story-stage {
    width: 900px;
    height: 1800px;
    background:
      radial-gradient(circle at 50% calc(54% + var(--background-shift)), rgba(255, 255, 255, .94), transparent 29%),
      radial-gradient(circle at 50% 67%, rgba(233, 146, 116, .055), transparent 30%),
      linear-gradient(180deg, #fbfaf7 0%, #f7f3ed 100%);
  }

  .story-stage::before {
    opacity: .04;
  }

  .story-brand {
    top: 54px;
    left: 58px;
    width: 188px;
    height: 72px;
  }

  .story-brand img {
    top: -30px;
    left: -10px;
    width: 205px;
  }

  .hero-copy {
    top: 188px;
    left: 60px;
    width: 780px;
  }

  .hero-copy .eyebrow {
    margin-bottom: 20px;
    font-size: 17px;
  }

  .hero-copy h1 {
    max-width: 780px;
    font-size: 100px;
    line-height: .96;
    letter-spacing: -.047em;
  }

  .flow-device {
    top: 684px;
    left: 50%;
    width: 780px;
  }

  .device-glow {
    width: 680px;
    height: 520px;
  }

  .people-group {
    left: 60px;
    width: 780px;
    text-align: center;
  }

  .family-group {
    top: 448px;
  }

  .parents-group {
    top: 1320px;
    right: auto;
  }

  .parents-group .group-label {
    text-align: center;
  }

  .group-label {
    margin-bottom: 20px;
  }

  .group-label small {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .group-label b {
    font-size: 31px;
  }

  .people-row,
  .parents-group .people-row {
    justify-content: center;
    gap: 18px;
  }

  .person {
    width: 140px;
    font-size: 17px;
  }

  .person-portrait {
    width: 120px;
    height: 148px;
    padding: 5px;
    border-radius: 64px;
    box-shadow: 0 16px 34px rgba(74, 54, 39, .11);
  }

  .person-portrait::after {
    inset: 6px;
  }

  .person-portrait img {
    border-radius: 57px;
  }

  .person span {
    margin-top: 11px;
  }

  .route {
    left: 50%;
    width: 1px;
    transform-origin: 50% 0;
  }

  .route::before {
    inset: 0 -8px;
    background-image: linear-gradient(180deg, currentColor 25%, transparent 25%);
    background-position: center;
    background-size: 1px 11px;
    background-repeat: repeat-y;
  }

  .route-out {
    top: 650px;
    left: 430px;
    width: 1px;
    height: 285px;
    transform-origin: 50% 0;
  }

  .route-out i {
    top: auto;
    right: -4px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .route-back {
    top: 624px;
    left: 486px;
    width: 1px;
    height: 810px;
    transform-origin: 50% 100%;
  }

  .route-back i {
    top: 0;
    right: auto;
    left: -4px;
    transform: rotate(-45deg);
  }

  .direction-note {
    font-size: 14px;
    letter-spacing: .15em;
  }

  .outbound-note {
    top: 710px;
    left: 456px;
  }

  .return-note {
    top: 694px;
    left: 512px;
  }

  .moment-token {
    top: 610px;
    left: 318px;
    width: 250px;
    padding: 10px 10px 13px;
  }

  .moment-token figcaption {
    margin-top: 8px;
    font-size: 14px;
  }

  .moment-token small {
    font-size: 12px;
  }

  .message-token {
    min-height: 92px;
    padding: 16px 18px;
  }

  .message-token small {
    font-size: 12px;
  }

  .message-token b {
    font-size: 17px;
  }

  .message-token span {
    font-size: 13px;
  }

  .reminder-token {
    top: 650px;
    left: 290px;
    grid-template-columns: 34px 1fr;
    width: 320px;
  }

  .calendar-icon {
    width: 28px;
    height: 28px;
  }

  .voice-token {
    top: 1330px;
    right: 68px;
    grid-template-columns: 16px 1fr auto;
    width: 300px;
  }

  .voice-dot {
    width: 12px;
    height: 12px;
  }

  .voice-wave {
    gap: 3px;
    height: 30px;
  }

  .voice-wave i {
    width: 3px;
    height: 12px;
  }

  .voice-wave i:nth-child(2),
  .voice-wave i:nth-child(4) { height: 21px; }
  .voice-wave i:nth-child(3) { height: 29px; }

  .chapter-status {
    bottom: 62px;
    width: 760px;
    height: 54px;
  }

  .status-copy {
    font-size: 15px;
  }

  .status-track {
    gap: 11px;
  }

  .status-track i {
    width: 34px;
    height: 3px;
  }

  .flow-replay {
    right: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    min-width: 118px;
    min-height: 44px;
    transform: translateX(50%);
  }
}

/* Source: motion-v4.5.css */

/*
 * v4.5 — mobile semicircle relationship path.
 * The five portraits become the two fixed endpoints of one shared arc.
 */

.mobile-flow-arc {
  display: none;
}

@media (max-width: 700px) {
  .hero-copy {
    top: 178px;
  }

  .flow-device {
    top: 780px;
    width: 820px;
  }

  .group-label {
    display: none;
  }

  .people-group {
    top: 650px;
    text-align: center;
  }

  .family-group {
    left: 38px;
    width: 352px;
  }

  .parents-group {
    right: 38px;
    left: auto;
    width: 232px;
  }

  .people-row,
  .parents-group .people-row {
    gap: 6px;
  }

  .family-group .people-row {
    justify-content: flex-start;
  }

  .parents-group .people-row {
    justify-content: flex-end;
  }

  .person {
    width: 112px;
    font-size: 16px;
  }

  .person-portrait {
    width: 102px;
    height: 126px;
    padding: 5px;
    border-radius: 55px;
  }

  .person-portrait img {
    border-radius: 49px;
  }

  .person span {
    margin-top: 9px;
  }

  .route {
    display: none;
  }

  .mobile-flow-arc {
    position: absolute;
    z-index: 7;
    inset: 0;
    display: block;
    width: 900px;
    height: 1800px;
    overflow: visible;
    pointer-events: none;
  }

  .mobile-flow-arc path {
    fill: none;
    vector-effect: non-scaling-stroke;
  }

  .mobile-arc-base {
    stroke: rgba(143, 111, 94, .22);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: .025 .026;
  }

  .mobile-route {
    opacity: 0;
    stroke: var(--coral);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: .035 .023;
    stroke-dashoffset: 1;
  }

  .mobile-route-back {
    stroke: #b18d7c;
  }

  .direction-note {
    font-size: 13px;
  }

  .outbound-note,
  .return-note {
    top: 532px;
    left: 50%;
    transform: translateX(-50%);
  }

  .moment-token {
    top: 806px;
    left: 145px;
    width: 210px;
  }

  .reminder-token {
    top: 804px;
    left: 120px;
    width: 260px;
  }

  .voice-token {
    top: 804px;
    right: 120px;
    width: 260px;
  }

  .chapter-status {
    bottom: 62px;
  }
}

/* Source: motion-v4.6.css */

/*
 * v4.6 — the portraits themselves form the semicircle on mobile.
 * There is no drawn relationship path and no group heading.
 */

@media (max-width: 700px) {
  .mobile-flow-arc,
  .direction-note {
    display: none;
  }

  .flow-device {
    top: 790px;
  }

  .people-group,
  .people-row,
  .parents-group .people-row {
    display: contents;
  }

  .person {
    position: absolute;
    z-index: 18;
    width: 130px;
    font-size: 17px;
  }

  .person-portrait {
    width: 112px;
    height: 138px;
    border-radius: 60px;
  }

  .person-portrait img {
    border-radius: 54px;
  }

  .family-group .person:nth-child(1) {
    top: 750px;
    left: 65px;
  }

  .family-group .person:nth-child(2) {
    top: 590px;
    left: 220px;
  }

  .family-group .person:nth-child(3) {
    top: 520px;
    left: 385px;
  }

  .parents-group .person:nth-child(1) {
    top: 590px;
    left: 550px;
  }

  .parents-group .person:nth-child(2) {
    top: 750px;
    left: 705px;
  }

  .moment-token {
    top: 820px;
    left: 130px;
  }

  .reminder-token {
    top: 815px;
    left: 110px;
  }

  .voice-token {
    top: 815px;
    right: 110px;
  }
}

/* Source: motion-v4.7.css */

/*
 * v4.7 — mobile portrait row reset.
 * All five people share one baseline and equal center-to-center spacing.
 */

@media (max-width: 700px) {
  .flow-device {
    top: 790px;
  }

  .family-group .person:nth-child(1),
  .family-group .person:nth-child(2),
  .family-group .person:nth-child(3),
  .parents-group .person:nth-child(1),
  .parents-group .person:nth-child(2) {
    top: 620px;
  }

  .family-group .person:nth-child(1) { left: 40px; }
  .family-group .person:nth-child(2) { left: 213px; }
  .family-group .person:nth-child(3) { left: 385px; }
  .parents-group .person:nth-child(1) { left: 558px; }
  .parents-group .person:nth-child(2) { left: 730px; }

  .moment-token {
    top: 805px;
  }

  .reminder-token,
  .voice-token {
    top: 800px;
  }
}

/* Source: motion-v4.8.css */

/* v4.8 — removes the initial scroll instruction and Replay control. */

/* Source: motion-v4.9.css */

/*
 * v4.9 — mobile portrait order becomes:
 * Dad → Mom → Brother → Sister → Grandkids.
 */

@media (max-width: 700px) {
  .parents-group .person:nth-child(1) { left: 40px; }
  .parents-group .person:nth-child(2) { left: 213px; }
  .family-group .person:nth-child(1) { left: 385px; }
  .family-group .person:nth-child(2) { left: 558px; }
  .family-group .person:nth-child(3) { left: 730px; }

  .moment-token {
    right: 130px;
    left: auto;
  }

  .reminder-token {
    right: 110px;
    left: auto;
  }

  .voice-token {
    right: auto;
    left: 110px;
  }
}

/* Source: motion-v4.10.css */

/*
 * v4.10 — the Moment originates beneath Brother, then travels into the frame.
 * The in-frame photo is revealed only after the card reaches the screen.
 */

@media (max-width: 700px) {
  .moment-token {
    top: 805px;
    right: auto;
    left: 345px;
  }
}

/* Source: motion-v4.11.css */

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans-normal-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans-normal-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans-normal-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans-normal-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("./fonts/newsreader-normal-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/*
 * v4.11 — type and color calibration against heybondi.ai/early-access.
 * Layout and GSAP choreography remain inherited from v4.10.
 */

:root {
  --paper: #F8F5F0;
  --paper-light: #FFFDF9;
  --ink: #3A3028;
  --muted: rgba(58, 48, 40, .82);
  --line: rgba(58, 48, 40, .10);
  --line-soft: rgba(58, 48, 40, .10);
  --clay: #E8896A;
  --coral: #E8896A;
  --display: "Newsreader", serif;
  --body: "DM Sans", sans-serif;
  --mono: "DM Sans", sans-serif;
}

html,
body {
  color: var(--ink);
  background: #E0DDD6;
  font-family: var(--body);
}

.story-sticky,
.story-stage {
  background: var(--paper);
}

.hero-copy h1 {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.045em;
}

.story-edition,
.hero-description,
.hero-aside,
.person,
.chapter-status,
.device-screen-blank,
.person span,
.message-token span,
.device-reminder span,
.family-memory-seal span {
  color: rgba(58, 48, 40, .62);
}

.group-label b,
.message-token b,
.device-reminder b,
.family-memory-seal b,
.moment-token figcaption {
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
}

.group-label small,
.parents-group .group-label small,
.moment-token small,
.reminder-token small,
.voice-token small,
.device-reminder small,
.family-memory-seal small,
.device-screen-blank small,
.direction-note,
.return-note {
  color: var(--coral);
  font-family: var(--body);
}

.person span,
.status-copy {
  font-family: var(--body);
  font-weight: 600;
}

.device-screen-blank small {
  color: rgba(58, 48, 40, .62);
}

.chapter-status {
  justify-content: center;
}

.status-track {
  display: none !important;
}

/* Source: motion-v6.7.css */

/*
 * v6.7 — inbound cards are absorbed by the frame and never retrace outward.
 * Sender portraits retain the single quiet scale cue from v6.6.
 */

:root {
  --ink: #4B4037;
  --muted: #756A61;
  --clay: #C96F52;
  --coral: #C96F52;
}

.hero-highlight {
  color: var(--coral);
}

.moment-token small,
.message-token small,
.device-reminder small,
.family-memory-seal small {
  color: var(--coral);
  font-weight: 700;
  letter-spacing: .1em;
}

.person span,
.message-token span,
.device-reminder span,
.family-memory-seal span {
  color: rgba(75, 64, 55, .68);
}

.person > span {
  display: none;
}

.device-lamp-color {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  color: #F2B7C0;
  background: currentColor;
  clip-path: polygon(24.80% 28.07%, 79.11% 30.70%, 77.91% 32.38%, 26.00% 29.82%);
  filter: saturate(1.05);
  mix-blend-mode: color;
  will-change: color, opacity, filter;
}

.device-lamp-color::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .42;
  mix-blend-mode: screen;
}

.person-portrait {
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none !important;
  transform-origin: 50% 68%;
  will-change: transform;
  backface-visibility: hidden;
}

.person-portrait::before,
.person-portrait::after {
  content: none !important;
  display: none !important;
}

.person-portrait img {
  border-radius: 50%;
}

@media (min-width: 701px) {
  .family-group { left: 72px; }
  .parents-group { right: 72px; }
}

@media (max-width: 700px) {
  html,
  body,
  .story-sticky,
  .story-stage {
    background: var(--paper);
  }

  .flow-story {
    height: 340svh;
    min-height: 2400px;
  }

  .stage-viewport {
    height: 100svh;
    min-height: 0;
  }

  .story-stage {
    width: 100vw;
    height: 100svh;
    min-height: 0;
    box-shadow: none;
    background: var(--paper);
  }

  .story-stage::before {
    display: none;
  }

  .paper-grain {
    opacity: .025;
  }

  .story-brand {
    top: max(20px, env(safe-area-inset-top));
    left: 24px;
    width: 92px;
    height: 36px;
  }

  .story-brand img {
    top: -13px;
    left: -4px;
    width: 100px;
  }

  .hero-copy {
    top: max(82px, calc(env(safe-area-inset-top) + 70px));
    left: 24px;
    width: calc(100vw - 48px);
  }

  .hero-copy h1 {
    max-width: none;
    font-size: clamp(40px, 12vw, 52px);
    line-height: .94;
    letter-spacing: -.045em;
  }

  .people-group,
  .people-row,
  .parents-group .people-row {
    display: contents;
  }

  .person,
  .family-group .person:nth-child(1),
  .family-group .person:nth-child(2),
  .family-group .person:nth-child(3),
  .parents-group .person:nth-child(1),
  .parents-group .person:nth-child(2) {
    top: clamp(232px, 67vw, 288px);
    width: 20vw;
    font-size: 11px;
  }

  .parents-group .person:nth-child(1) { left: 0; }
  .parents-group .person:nth-child(2) { left: 20vw; }
  .family-group .person:nth-child(1) { left: 40vw; }
  .family-group .person:nth-child(2) { left: 60vw; }
  .family-group .person:nth-child(3) { left: 80vw; }

  .person-portrait {
    width: clamp(54px, 15vw, 66px);
    height: clamp(54px, 15vw, 66px);
    padding: 0;
    border-radius: 50%;
  }

  .person-portrait::after {
    inset: 4px;
  }

  .person-portrait img {
    border-radius: 50%;
  }

  .person span {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.15;
  }

  .flow-device {
    top: clamp(318px, 82vw, 353px);
    left: 50%;
    width: min(92vw, 400px);
  }

  .device-glow {
    width: 82%;
    height: 70%;
  }

  .device-screen-blank {
    gap: 9px;
  }

  .device-screen-blank small {
    font-size: 10px;
    letter-spacing: .1em;
  }

  .moment-token {
    top: clamp(322px, 90vw, 388px);
    right: auto;
    left: calc(50% - clamp(75px, 21vw, 90px));
    width: clamp(150px, 42vw, 180px);
    padding: 8px 8px 10px;
  }

  .moment-token figcaption {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.25;
  }

  .moment-token small {
    margin-bottom: 2px;
    font-size: 9px;
  }

  .message-token {
    min-height: 64px;
    padding: 10px 12px;
    gap: 8px;
  }

  .message-token small {
    font-size: 9px;
  }

  .message-token b {
    font-size: 13px;
  }

  .message-token span {
    font-size: 10px;
  }

  .reminder-token {
    top: clamp(322px, 90vw, 388px);
    right: auto;
    left: calc(70% - clamp(85px, 24vw, 105px));
    grid-template-columns: 24px 1fr;
    width: clamp(170px, 48vw, 210px);
  }

  .voice-token {
    top: clamp(322px, 90vw, 388px);
    right: auto;
    left: calc(30% - clamp(85px, 24vw, 105px));
    grid-template-columns: 12px 1fr auto;
    width: clamp(170px, 48vw, 210px);
  }

  .calendar-icon {
    width: 22px;
    height: 22px;
  }

  .voice-dot {
    width: 9px;
    height: 9px;
  }

  .voice-wave {
    gap: 2px;
    height: 22px;
  }

  .voice-wave i {
    width: 2px;
  }

  .device-reminder,
  .family-memory-seal {
    right: 27%;
    bottom: 35%;
    width: 46%;
    padding: 10px 11px;
  }

  .device-reminder small,
  .family-memory-seal small {
    font-size: 8px;
  }

  .device-reminder b,
  .family-memory-seal b {
    font-size: 14px;
  }

  .device-reminder span,
  .family-memory-seal span {
    font-size: 9px;
  }

  .chapter-status {
    display: none;
  }
}

/* Scroll remains reversible, but absorbed cards never fly back out of the frame. */
.flow-story.is-reversing .moment-token,
.flow-story.is-reversing .reminder-token,
.flow-story.is-reversing .voice-token {
  visibility: hidden !important;
}

@media (max-width: 350px) {
  .story-brand {
    left: 20px;
    width: 82px;
  }

  .story-brand img {
    width: 90px;
  }

  .hero-copy {
    top: 68px;
    left: 20px;
    width: calc(100vw - 40px);
  }

  .hero-copy h1 {
    font-size: 40px;
  }

  .person span {
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  /* Desktop places parents to the frame's right. On mobile they move to the
     left half of the row, so mirror them to keep their gaze aimed at the frame. */
  .parents-group .person-portrait img,
  .family-group .person:nth-child(n + 2) .person-portrait img {
    transform: scaleX(-1);
  }
}

/* Source: motion-v6.9.css */

/* v6.9 — Family Memory resolves as a single description over the same photo. */
.family-memory-seal .memory-description {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
}

@media (max-width: 700px) {
  .family-memory-seal .memory-description {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.22;
  }
}

/* Source: motion-v6.11.css */

/* v6.11 — Family Memory is a quiet outcome state, not a duplicate card. */
.family-memory-seal {
  right: 25.5%;
  bottom: 33%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 49%;
  padding: 0;
  color: #fffaf3;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow: 0 1px 8px rgba(43, 29, 20, .72);
}

.family-memory-seal small {
  flex: 0 0 auto;
  margin: 0;
  color: #f3a28a;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .11em;
}

.family-memory-seal .memory-description {
  margin: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
}

@media (max-width: 700px) {
  .family-memory-seal {
    right: 26%;
    bottom: 32.5%;
    gap: 5px;
    width: 48%;
    padding: 0;
  }

  .family-memory-seal small {
    font-size: 5px;
    letter-spacing: .09em;
  }

  .family-memory-seal .memory-description {
    margin: 0;
    font-size: 7px;
    line-height: 1.2;
  }
}

/* Source: motion-v6.12.css */

/* v6.12 — the frame screen resolves each incoming content type into its own UI. */
.device-reminder,
.device-voice {
  position: absolute;
  z-index: 4;
  top: 31.9%;
  left: 24.7%;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  width: 51.8%;
  height: 35.8%;
  overflow: hidden;
  color: var(--ink);
  border: 0;
  clip-path: polygon(5.5% 0, 100% 7%, 95% 100%, 0 91%);
  box-shadow: none;
}

.device-reminder {
  display: grid;
  align-content: center;
  padding: 8.5% 11% 7% 12%;
  background:
    radial-gradient(circle at 84% 18%, rgba(114, 195, 200, .18), transparent 34%),
    #f4f1eb;
}

.screen-context {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.screen-calendar {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 1.5px solid #55aeb4;
  border-radius: 4px;
}

.screen-calendar::before,
.screen-calendar::after {
  content: "";
  position: absolute;
}

.screen-calendar::before {
  top: 5px;
  left: 0;
  width: 100%;
  border-top: 1px solid #55aeb4;
}

.screen-calendar::after {
  top: -3px;
  left: 5px;
  width: 9px;
  height: 5px;
  border-right: 1.5px solid #55aeb4;
  border-left: 1.5px solid #55aeb4;
}

.device-reminder small,
.device-voice small {
  display: block;
  margin: 0;
  color: #429ba2;
  font-family: var(--body);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .11em;
}

.device-reminder b {
  display: block;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.08;
}

.device-reminder .screen-time {
  display: block;
  margin-top: 5px;
  color: #429ba2;
  font-size: 9px;
  font-weight: 600;
}

.device-reminder p {
  margin: 8px 0 0;
  color: rgba(75, 64, 55, .7);
  font-size: 8px;
  line-height: 1.3;
}

.device-voice {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-content: center;
  padding: 8% 10% 7% 11%;
  background:
    radial-gradient(circle at 12% 88%, rgba(231, 182, 125, .2), transparent 38%),
    #f5f0e9;
}

.voice-screen-header {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
}

.voice-screen-header img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}

.device-voice small {
  color: #b67b46;
}

.device-voice b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}

.device-voice time {
  color: rgba(75, 64, 55, .56);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.voice-screen-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 35px;
  margin-top: 5px;
}

.voice-screen-wave i {
  width: 3px;
  height: 42%;
  border-radius: 99px;
  background: #d4a06f;
}

.voice-screen-wave i:nth-child(3n + 1) { height: 72%; }
.voice-screen-wave i:nth-child(4n + 2) { height: 94%; }
.voice-screen-wave i:nth-child(5n) { height: 55%; }

.voice-screen-progress {
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(75, 64, 55, .14);
}

.voice-screen-progress i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: #c88c55;
}

.device-voice > p {
  margin: 7px 0 0;
  overflow: hidden;
  color: rgba(75, 64, 55, .7);
  font-size: 7.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .device-reminder,
  .device-voice {
    right: auto;
    bottom: auto;
    width: 51.8%;
    height: 35.8%;
  }

  .device-reminder {
    padding: 8% 10% 7% 12%;
  }

  .screen-context {
    gap: 5px;
    margin-bottom: 4px;
  }

  .screen-calendar {
    width: 14px;
    height: 14px;
    border-width: 1px;
    border-radius: 3px;
  }

  .screen-calendar::before {
    top: 3px;
  }

  .screen-calendar::after {
    top: -2px;
    left: 3px;
    width: 6px;
    height: 3px;
    border-width: 0 1px;
    border-style: solid;
  }

  .device-reminder small,
  .device-voice small {
    font-size: 4.5px;
  }

  .device-reminder b {
    font-size: 10px;
  }

  .device-reminder .screen-time {
    margin-top: 3px;
    font-size: 5.5px;
  }

  .device-reminder p {
    margin-top: 4px;
    font-size: 5px;
  }

  .device-voice {
    padding: 8% 9% 7% 11%;
  }

  .voice-screen-header {
    grid-template-columns: 20px 1fr auto;
    gap: 5px;
  }

  .voice-screen-header img {
    width: 20px;
    height: 20px;
  }

  .device-voice b {
    margin-top: 1px;
    font-size: 7px;
  }

  .device-voice time {
    font-size: 5px;
  }

  .voice-screen-wave {
    gap: 2px;
    height: 20px;
    margin-top: 3px;
  }

  .voice-screen-wave i {
    width: 2px;
  }

  .device-voice > p {
    margin-top: 4px;
    font-size: 5px;
  }
}

/* Source: motion-v6.13.css */

/* v6.13 — more scroll distance on mobile reinforces the chapter holds. */
@media (max-width: 700px) {
  .flow-story {
    height: 390svh;
    min-height: 2700px;
  }
}

/* Source: motion-v6.14.css */

/* v6.14 — UI baselines follow the photographed frame's lower screen edge. */
:root {
  --frame-screen-slope: 3.45deg;
}

.device-reminder,
.device-voice {
  display: block;
  padding: 0;
}

.screen-plane-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  transform: rotate(var(--frame-screen-slope)) scale(.965);
  transform-origin: 50% 50%;
  will-change: transform;
}

.device-reminder .screen-plane-content {
  display: grid;
  align-content: center;
  padding: 7.5% 11% 8.5% 12%;
}

.device-voice .screen-plane-content {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-content: center;
  padding: 7% 10% 8% 11%;
}

.device-voice .screen-plane-content > p {
  margin: 7px 0 0;
  overflow: hidden;
  color: rgba(75, 64, 55, .7);
  font-size: 7.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-memory-seal {
  display: block;
  gap: 0;
}

.memory-line-content {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  transform: rotate(var(--frame-screen-slope));
  transform-origin: 50% 100%;
}

@media (max-width: 700px) {
  .device-reminder,
  .device-voice {
    padding: 0;
  }

  .screen-plane-content {
    transform: rotate(var(--frame-screen-slope)) scale(.97);
  }

  .device-reminder .screen-plane-content {
    padding: 7% 10% 8% 12%;
  }

  .device-voice .screen-plane-content {
    padding: 7% 9% 8% 11%;
  }

  .device-voice .screen-plane-content > p {
    margin-top: 4px;
    font-size: 5px;
  }

  .memory-line-content {
    gap: 5px;
  }
}

/* Source: motion-v6.16.css */

/* v6.16 — the Bondi agent replaces the reminder glyph, and the voice screen
   resolves into the Story Card. Family Memory is retired: the Story Card is it. */

:root {
  --bondi-agent: var(--landing-coral, #e8896a);
  --bondi-agent-eye: #fffaf5;
  /* The hero chain paints #f4efe8 and the landing sections #f8f5f0, with a
     darker #E0DDD6 body behind both — three creams meeting at the hero's lower
     edge, which reads as a seam. One paper for the whole page. */
  --paper: #f8f5f0;
}

html,
body { background: #f8f5f0; }

/* The page nav occupies normal-flow space before becoming sticky. Keep the
   hero pinned to that same lower edge from its very first pixel of scroll;
   otherwise the stage travels upward by one nav-height before ScrollTrigger
   starts, making the headline slip underneath the nav. JS replaces the
   fallback with the nav's measured height on load and resize. */
.flow-story { --hero-nav-offset: 58px; }

.story-sticky {
  top: var(--hero-nav-offset);
}

.story-sticky.stage-viewport {
  height: calc(100svh - var(--hero-nav-offset));
  min-height: 0;
}

@media (min-width: 960px) {
  .flow-story { --hero-nav-offset: 72px; }
}

/* Keep the headline emphasis on the landing-page brand coral rather than the
   older, darker motion-system coral token. */
.hero-copy,
.people-group,
.flow-device,
.route,
.direction-note,
.chapter-status { pointer-events: none; }

.person-portrait[data-hero-flight] {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.person-portrait[data-hero-flight]:focus-visible {
  outline: 2px solid var(--coral, #e8896a);
  outline-offset: 4px;
}

.hero-highlight { color: var(--landing-coral, #e8896a); }

/* Only the moving cards are promoted to compositor layers. */
.moment-token,
.reminder-token,
.voice-token { will-change: transform, opacity; }

/* The timeline owns each card's outer travel. This inner compositor layer
   carries velocity lag without competing for the same transform. */
.token-mass {
  width: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.moment-token > .token-mass { position: relative; }

.message-token > .token-mass {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  align-items: center;
  gap: inherit;
}

.calendar-icon {
  display: grid;
  place-items: center;
  color: var(--coral, #e8896a);
  background: rgba(232, 137, 106, .08);
  font-size: 13px;
  font-style: normal;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

@media (prefers-reduced-motion: reduce) {
  .token-mass { will-change: auto; }
}

@media (min-width: 701px) {
  /* Desktop tells the complete three-card story automatically, so the Hero no
     longer needs a multi-viewport scroll runway or a sticky pin. It occupies
     the viewport below the in-flow sticky navigation and then releases into
     the press row with normal page scrolling. */
  .flow-story {
    height: calc(100svh - var(--hero-nav-offset));
    min-height: 0;
  }

  .story-sticky {
    position: relative;
    top: 0;
  }
}

@media (max-width: 700px) {
  /* Mobile now tells the same automatic loop as desktop. Remove the old
     multi-viewport scrub runway and let the next section follow normally. */
  .flow-story {
    /* Restore the original mobile composition and let the section, rather
       than its internal spacing, absorb short browser viewports. The stage is
       centred 29px above this nav-offset viewport, so include that offset and
       keep an exact 100px after the frame's square bounds. */
    --mobile-composition-lift: 24px;
    --mobile-frame-top: calc(
      clamp(282px, 73vw, 318px)
      + 80px
      - var(--mobile-composition-lift)
    );
    --mobile-frame-size: min(92vw, 400px);
    --mobile-hero-stage-height: max(
      100svh,
      calc(29px + var(--mobile-frame-top) + var(--mobile-frame-size) + 100px)
    );
    height: calc(var(--mobile-hero-stage-height) - var(--hero-nav-offset, 58px));
    min-height: 0;
  }

  .story-sticky.stage-viewport {
    height: calc(var(--mobile-hero-stage-height) - var(--hero-nav-offset, 58px));
  }

  .story-sticky {
    position: relative;
    top: 0;
  }

  .story-stage { height: var(--mobile-hero-stage-height); }

  .calendar-icon { font-size: 17px; }
}

/* One full-bleed paper surface for the desktop hero. The stage uses `cover`
   in JS, and every surrounding layer shares this exact solid so a responsive
   crop can never reveal a different-coloured gutter. */
@media (min-width: 701px) {
  .flow-story,
  .story-sticky,
  .stage-viewport {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .flow-story,
  .story-sticky,
  .stage-viewport,
  .story-stage { background: #f8f5f0; }

  .story-stage { box-shadow: none; }

  .hero-copy {
    left: 0;
    width: 100%;
  }

  .hero-copy h1 {
    max-width: 900px;
    margin-inline: auto;
    font-size: 68px;
    line-height: .95;
    letter-spacing: -.048em;
    text-align: center;
    text-wrap: balance;
  }

  .hero-break-mobile { display: none; }
  .hero-break-desktop { display: inline; }
}

@media (max-width: 700px) {
  .hero-break-mobile { display: inline; }
  .hero-break-desktop { display: none; }

  .hero-copy h1 {
    font-size: clamp(26px, 8.2vw, 34px);
    line-height: .98;
    letter-spacing: -.052em;
    white-space: nowrap;
  }
}

/* ── The agent: a low-saturation squircle that keeps living while you read ── */
.bondi-agent { display: block; width: 22px; height: 22px; flex: none; }
.bondi-agent svg { display: block; width: 100%; height: 100%; overflow: visible; animation: agentBob 3.6s ease-in-out infinite; }
.agent-body { fill: var(--bondi-agent); transform-box: fill-box; transform-origin: 50% 100%; animation: agentBreath 3.6s ease-in-out infinite; }
.agent-eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
.agent-eye {
  fill: var(--bondi-agent-eye);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
.agent-eye-l { transform: rotate(-18.07deg); transform-origin: 20.96px 24.43px; }
.agent-eye-r { transform: rotate(-26.86deg); transform-origin: 31.66px 21.79px; }

@keyframes agentBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1.5px) rotate(-2.4deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-1.5px) rotate(2.4deg); }
}
@keyframes agentBreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes agentBlink { 0%, 86%, 100% { transform: scaleY(1); } 90% { transform: scaleY(.1); } 94% { transform: scaleY(1); } }

/* ── Reminder screen: compact event summary with clear hierarchy ── */
.device-reminder .screen-plane-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 7% 10% 8% 11%;
  text-align: center;
}

/* A real paper scan keeps the in-frame UI tactile without muddying the copy. */
.device-reminder::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10%;
  pointer-events: none;
  background: url("/early-access/assets/paper-texture-c.webp") center 46% / cover no-repeat;
  opacity: .48;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(.55);
}

.bondi-agent-lg { width: 52px; height: 52px; margin-bottom: 14px; }
.bondi-agent-alert {
  transform-origin: 50% 68%;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes agentAlertBlink {
  0%, 56%, 67%, 74%, 100% { transform: scaleY(1); }
  61%, 71% { transform: scaleY(.08); }
}
.device-reminder b {
  font-family: var(--display), "Newsreader", "Iowan Old Style", Baskerville, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.device-reminder .screen-time {
  margin-top: 8px;
  font-family: var(--display), "Newsreader", "Iowan Old Style", Baskerville, serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
}
.device-reminder .screen-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 13px;
  color: rgba(75, 64, 55, .72);
  font-family: var(--body), "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.device-reminder .screen-location > span { font-size: 13px; }
.device-reminder .screen-location em { font-style: italic; }

/* ── Voice screen resolves into the Story Card — same object as section 02:
   the photo keeps the whole screen, the story sits on it. ── */
.device-voice { background: var(--landing-cream, #efeae2); }

.device-voice .story-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device-voice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24,18,14,0) 34%, rgba(24,18,14,.42) 58%, rgba(24,18,14,.86) 100%);
  pointer-events: none;
}

.device-voice .screen-plane-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: stretch;
  padding: 7% 8% 8% 10%;
}

.story-people { display: flex; flex-wrap: wrap; gap: 5px; }
.story-people span {
  padding: 3px 8px;
  color: #fff5ec;
  background: rgba(30, 23, 18, .62);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.story-lines { display: flex; flex-direction: column; gap: 4px; }
.device-voice .story-lines b {
  display: block;
  margin: 0;
  color: #fff6ee;
  font-family: var(--display), "Newsreader", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.018em;
}
.device-voice .story-lines p {
  margin: 0;
  color: rgba(255, 246, 238, .82);
  font-family: var(--body);
  font-size: 8.5px;
  line-height: 1.4;
}
.device-voice .story-lines time {
  margin-top: 2px;
  padding-top: 5px;
  color: rgba(255, 246, 238, .92);
  border-top: 1px solid rgba(255, 246, 238, .26);
  font-family: var(--body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* The sticky nav carries the wordmark at every width now, so a second lockup
   inside the stage reads as a duplicate. The header is absolutely positioned
   over the stage, so hiding it costs the hero no layout. */
.story-header { display: none; }

/* Desktop: give the family portraits enough presence beside the frame. */
.person > span {
  display: block;
  margin-top: 8px;
  color: rgba(58, 48, 40, .68);
  font-family: var(--body, "DM Sans", sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .015em;
  text-align: center;
  white-space: nowrap;
}

/* The source portrait has a narrow black matte outside its circular crop.
   A tiny optical crop removes that matte without changing the visible face. */
.family-group .person:first-child .person-portrait img {
  transform: scale(1.03);
}

@media (min-width: 701px) {
  /* Flight cards rest at z-index 16 until they reach the frame portal. Keep
     the headline one layer below so the cards cover its letterforms instead
     of requiring an opacity fade. */
  .hero-copy { z-index: 15; }

  .person-portrait { width: 92px; height: 92px; }

  /* The desktop composition already explains the two sides spatially. Remove
     the duplicated routing and audience eyebrow copy, keeping only each
     group's meaningful description. */
  .direction-note,
  .group-label small { display: none; }

  /* The chapter narration is a mobile affordance; on desktop the whole scene
     is visible at once and the running commentary just adds noise. */
  .chapter-status { display: none; }
}

@media (max-width: 700px) {
  /* Original mobile spacing: headline to portraits is about 62px and portrait
     labels to the frame's outer box is about 61px at the reference viewport.
     Lift the complete composition together so those relationships remain. */
  .hero-copy {
    top: calc(
      max(102px, calc(env(safe-area-inset-top) + 90px))
      - var(--mobile-composition-lift)
    );
  }

  .person,
  .family-group .person:nth-child(1),
  .family-group .person:nth-child(2),
  .family-group .person:nth-child(3),
  .parents-group .person:nth-child(1),
  .parents-group .person:nth-child(2) {
    top: calc(
      clamp(216px, 58vw, 244px)
      - var(--mobile-composition-lift)
    );
  }

  .flow-device {
    top: var(--mobile-frame-top);
  }

  .person > span {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .bondi-agent { width: 14px; height: 14px; }
  .bondi-agent-lg { width: 31px; height: 31px; margin-bottom: 7px; }
  .device-reminder .screen-plane-content { padding: 7% 9% 8% 10%; }
  .device-reminder b { font-size: 18px; }
  .device-reminder .screen-time { margin-top: 4px; font-size: 11px; }
  .device-reminder .screen-location { gap: 2px; margin-top: 5px; font-size: 6.5px; }
  .device-reminder .screen-location > span { font-size: 7px; }
  .device-voice .screen-plane-content { padding: 7% 7% 8% 9%; }
  .story-people { gap: 3px; }
  .story-people span { padding: 2px 5px; font-size: 5px; }
  .story-lines { gap: 2px; }
  .device-voice .story-lines b { font-size: 11px; }
  .device-voice .story-lines p { font-size: 5px; line-height: 1.35; }
  .device-voice .story-lines time { margin-top: 1px; padding-top: 3px; font-size: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bondi-agent svg,
  .agent-body,
  .agent-eyes,
  .agent-eye { animation: none; }
}

/* Idle screen: keep the family photo clear. The SVG filter feathers the body
   inward from its own contour; no outer halo or shadow is painted around it. */
.device-screen-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9%;
  background: transparent;
}

.bondi-agent-idle {
  position: absolute;
  inset-inline-end: 5%;
  inset-block-end: 5%;
  width: 15%;
  height: auto;
  aspect-ratio: 1;
}

.bondi-agent-idle svg {
  animation: agentIdle 5.4s ease-in-out infinite;
}
.device-screen-blank small { position: static; }

@keyframes agentIdle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  18% { transform: translateY(-4%) rotate(-3.4deg) scale(1.03); }
  38% { transform: translateY(0) rotate(0deg) scale(1); }
  56% { transform: translateY(-4%) rotate(3.4deg) scale(1.03); }
  76% { transform: translateY(0) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bondi-agent-idle svg { animation: none; }
}

/* Preserve the timber recess and add light inside it instead of painting a
   flat white trapezoid over the product. The core is slightly inset, the
   highlight rolls across the surface, and only the outer bloom is softened. */
.device-lamp-bloom {
  clip-path: polygon(24.72% 27.82%, 79.42% 29.48%, 77.42% 32.35%, 25.74% 30.62%);
  filter: brightness(1.14) saturate(.96) blur(1.6px);
  mix-blend-mode: screen;
  will-change: opacity;
}
.device-lamp-bloom.is-idle-breathing { animation: lampIdleBreath 3.2s ease-in-out infinite; }
.device-lamp-color {
  --lamp-pulse: .18;
  overflow: hidden;
  clip-path: polygon(25.02% 28.12%, 79.02% 30.69%, 77.83% 32.16%, 26.17% 29.77%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .72) 0%,
    currentColor 46%,
    rgba(255, 255, 255, .22) 100%
  );
  filter:
    brightness(1.035)
    saturate(.94)
    blur(.16px)
    drop-shadow(0 0 3px currentColor);
  mix-blend-mode: normal;
  will-change: color, opacity;
}
.device-lamp-color::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .42) 18%,
    rgba(255, 255, 255, .16) 52%,
    rgba(255, 255, 255, .34) 84%,
    transparent 100%
  );
  opacity: .72;
  mix-blend-mode: screen;
}
.device-lamp-color::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: calc(var(--lamp-pulse) * .9);
  mix-blend-mode: screen;
}
@keyframes lampIdleBreath {
  0%, 100% { opacity: .07; }
  50% { opacity: .19; }
}
@media (prefers-reduced-motion: reduce) {
  .device-lamp-bloom.is-idle-breathing { animation: none; }
}

/* Every visual state belongs to one physical display. A single perspective
   mask prevents the source photo from leaking between a state layer and the
   timber bezel, most visibly along the screen's receding right edge. */
.device-screen-mask {
  position: absolute;
  z-index: 2;
  top: 31.9%;
  left: 24.7%;
  width: 52.1%;
  height: 35.8%;
  overflow: hidden;
  clip-path: polygon(5.5% 0, 99.6% 7%, 95% 100%, 0 91%);
  contain: paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.device-screen-mask > .device-screen-blank,
.device-screen-mask > .device-screen-moment,
.device-screen-mask > .device-reminder,
.device-screen-mask > .device-voice {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: none;
}

/* Keep the walnut frame warm and dimensional without returning to the
   heavier, redder treatment used in earlier revisions. */
.device-image {
  filter: saturate(.99) contrast(1.015) brightness(.99);
}