.product-page {
  --product-width: 1180px;
  --display: ui-rounded, "SF Pro Rounded", "Avenir Next", -apple-system, BlinkMacSystemFont, sans-serif;
  --page-canvas: #faf7f5;
  --page-surface: #fffdfc;
  --page-ink: #251e29;
  --page-muted: #665e68;
  --page-line: rgba(72, 52, 72, 0.14);
  --page-berry: #8e2550;
  --page-apricot: #c66031;
  --page-lilac: #50478f;
  --page-teal: #256e70;
  background:
    radial-gradient(circle at 8% 3%, rgba(242, 194, 145, 0.23), transparent 28rem),
    radial-gradient(circle at 96% 11%, rgba(188, 184, 243, 0.18), transparent 32rem),
    var(--page-canvas);
  color: var(--page-ink);
}

.product-shell {
  width: min(100% - 2.5rem, var(--product-width));
  padding-bottom: 2rem;
}

.product-masthead {
  padding: 0.85rem 0 clamp(3rem, 7vw, 6.5rem);
}

.product-masthead .brand { color: var(--page-ink); }
.product-masthead .nav a { color: var(--page-muted); }
.product-masthead .nav a[aria-current="page"] { color: var(--page-ink); }

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  min-height: min(77vh, 760px);
  padding-bottom: clamp(5rem, 11vw, 10rem);
}

.product-intro h1 {
  max-width: 10.5ch;
  margin: 0;
  font: 680 clamp(3.35rem, 7.4vw, 7.1rem)/0.91 var(--display);
  letter-spacing: -0.075em;
}

.product-lead {
  max-width: 40rem;
  margin: 1.7rem 0 0;
  color: var(--page-muted);
  font-size: clamp(1.06rem, 1.8vw, 1.32rem);
  line-height: 1.52;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 3.05rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--page-line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 720;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  border-color: var(--page-ink);
  color: var(--page-surface);
  background: var(--page-ink);
}

.button-quiet {
  color: var(--page-ink);
  background: rgba(255, 255, 255, 0.38);
}

.hero-proof {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin: 1.4rem 0 0;
  color: var(--page-muted);
  font-size: 0.72rem;
}

.hero-proof strong {
  color: var(--page-teal);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.orbit-figure {
  margin: 0;
  color: var(--page-muted);
  font-size: 0.78rem;
  text-align: center;
}

.orbit-art {
  position: relative;
  width: min(100%, 31rem);
  aspect-ratio: 1;
  margin-inline: auto;
  isolation: isolate;
}

.orbit,
.orbit-glow {
  position: absolute;
  top: 15%;
  width: 63%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.orbit {
  border: clamp(2px, 0.28vw, 4px) solid;
  animation: orbit-arrive 900ms cubic-bezier(.2, .8, .2, 1) both;
}

.orbit-one {
  left: 0;
  border-color: #df6b6a;
  box-shadow: inset 0 0 5rem rgba(242, 194, 145, 0.12), 0 0 4rem rgba(223, 107, 106, 0.08);
}

.orbit-two {
  right: 0;
  border-color: #8d79d6;
  box-shadow: inset 0 0 5rem rgba(188, 184, 243, 0.12), 0 0 4rem rgba(141, 121, 214, 0.08);
  animation-delay: 90ms;
}

.orbit-glow {
  z-index: -1;
  filter: blur(28px);
  opacity: 0.5;
}

.orbit-glow-warm { left: -2%; background: rgba(242, 194, 145, 0.24); }
.orbit-glow-cool { right: -2%; background: rgba(188, 184, 243, 0.21); }

.orbit-focus {
  position: absolute;
  top: 46.5%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: var(--page-ink);
  font-size: clamp(0.7rem, 1.2vw, 0.86rem);
  font-weight: 760;
  line-height: 1.15;
}

.orbit-label {
  position: absolute;
  bottom: 18%;
  color: var(--page-muted);
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.orbit-label-one { left: 16%; }
.orbit-label-two { right: 7%; }
.orbit-figure figcaption { margin: -0.5rem auto 0; }

.product-section {
  padding: clamp(5rem, 11vw, 10rem) 0;
  border-top: 1px solid var(--page-line);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(3rem, 0.18fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-heading h2,
.theme-copy h2,
.studio-copy h2,
.delivery-heading h2 {
  max-width: 18ch;
  margin: 0;
  font: 680 clamp(2.45rem, 5.25vw, 5rem)/0.98 var(--display);
  letter-spacing: -0.06em;
}

.section-index {
  margin: 0;
  color: var(--page-muted);
  font: 620 clamp(2rem, 4vw, 3.4rem)/1 var(--display);
  letter-spacing: -0.07em;
}

.section-lead {
  max-width: 47rem;
  margin: 1.15rem 0 0;
  color: var(--page-muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
}

.section-lead strong { color: var(--page-ink); }

.screen-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: start;
}

.screen-story,
.privacy-screen,
.theme-screens figure {
  margin: 0;
}

.screen-story {
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid var(--page-line);
  border-radius: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(255, 253, 252, 0.68);
  box-shadow: 0 24px 70px rgba(71, 40, 67, 0.07);
}

.screen-story-calendar { margin-top: 3.5rem; }
.screen-story-more { margin-top: 1.25rem; }

.screen-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.2rem 0.8rem;
  color: var(--page-berry);
  font-size: 0.69rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.screen-label b {
  color: var(--page-muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.device-frame {
  overflow: hidden;
  width: min(100%, 18.5rem);
  margin-inline: auto;
  padding: 0.42rem;
  border: 1px solid rgba(37, 30, 41, 0.16);
  border-radius: 2.55rem;
  background: #151118;
  box-shadow: 0 20px 45px rgba(37, 30, 41, 0.16);
}

.device-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.16rem;
  background: #faf7f5;
}

.screen-story figcaption,
.privacy-screen figcaption {
  max-width: 24rem;
  margin: 1rem auto 0.35rem;
  color: var(--page-muted);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}

.theme-stage {
  display: grid;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  margin: clamp(2rem, 7vw, 5rem) 0;
  padding: clamp(2rem, 6vw, 5.5rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  color: #fbf6fa;
  background:
    radial-gradient(circle at 92% 4%, rgba(141, 121, 214, 0.28), transparent 25rem),
    radial-gradient(circle at 0 100%, rgba(223, 107, 106, 0.18), transparent 28rem),
    #120f17;
}

.theme-stage .eyebrow { color: #ffc083; }
.theme-copy h2 { color: #fbf6fa; }

.theme-copy > p:not(.eyebrow) {
  max-width: 31rem;
  color: #cdc2cc;
  font-size: 1rem;
}

.range-key {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr) auto;
  align-items: center;
  margin-top: 2rem;
  color: #fbf6fa;
  font: 650 0.84rem/1 var(--display);
}

.range-key i {
  height: 0.55rem;
  background: rgba(192, 186, 255, 0.34);
}

.range-key span,
.range-key strong {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid #c0baff;
  border-radius: 50%;
  font-style: normal;
}

.theme-copy small {
  display: block;
  margin-top: 0.7rem;
  color: #a99eab;
  font-size: 0.69rem;
}

.theme-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.3rem);
  align-items: end;
}

.theme-screens figure > span {
  display: block;
  margin: 0 0 0.75rem;
  color: #fbf6fa;
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.theme-screens .device-frame {
  width: min(100%, 16.7rem);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
}

.device-frame-light { background: #f4ecef; }
.device-frame-dark { border-color: rgba(255, 255, 255, 0.17); background: #050407; }

.privacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.24fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 63rem;
  margin-inline: auto;
}

.privacy-screen {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--page-line);
  border-radius: 2.4rem;
  background: rgba(255, 253, 252, 0.64);
}

.privacy-screen .device-frame { width: min(100%, 17rem); }

.privacy-center {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  color: var(--page-muted);
  font-size: 0.6rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.privacy-center i {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--page-apricot), var(--page-lilac));
}

.privacy-center i::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 0.5rem;
  height: 0.5rem;
  transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--page-lilac);
  border-right: 1px solid var(--page-lilac);
  content: "";
}

.consent-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: consent;
}

.consent-flow li {
  position: relative;
  min-height: 9.5rem;
  padding: 2.8rem 1.2rem 1rem 0;
  border-top: 2px solid var(--page-line);
  counter-increment: consent;
}

.consent-flow li::before {
  position: absolute;
  top: -1rem;
  left: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--page-line);
  border-radius: 50%;
  color: var(--page-muted);
  background: var(--page-canvas);
  content: counter(consent);
  font-size: 0.68rem;
}

.consent-flow strong {
  display: block;
  font: 680 1.12rem/1.1 var(--display);
}

.consent-flow span {
  display: block;
  max-width: 13rem;
  margin-top: 0.6rem;
  color: var(--page-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.boundary-note {
  max-width: 59rem;
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--page-line);
  color: var(--page-muted);
  font-size: 0.9rem;
}

.boundary-note span {
  display: inline-block;
  margin-right: 0.55rem;
  color: var(--page-teal);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.delivery-section {
  margin: clamp(2rem, 7vw, 5rem) 0;
  padding: clamp(2rem, 6vw, 5.5rem);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  color: #fbf6fa;
  background:
    linear-gradient(122deg, rgba(142, 37, 80, 0.18), transparent 42%),
    radial-gradient(circle at 94% 0, rgba(80, 71, 143, 0.46), transparent 25rem),
    #17121c;
}

.delivery-section .eyebrow { color: #ffc083; }
.delivery-heading h2 { color: #fbf6fa; }

.proof-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: clamp(3rem, 7vw, 6rem) 0;
}

.proof-list p { margin: 0; }

.proof-list strong {
  display: block;
  font: 650 clamp(2.25rem, 4.4vw, 4.4rem)/1 var(--display);
  letter-spacing: -0.075em;
}

.proof-list span {
  display: block;
  margin-top: 0.65rem;
  color: #bfb4c6;
  font-size: 0.76rem;
  line-height: 1.45;
}

.honest-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.honest-status p { margin: 0; }
.honest-status .next-gate { color: #bfb4c6; }

.studio-story {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.05fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: center;
}

.studio-copy > p:not(.eyebrow) {
  max-width: 37rem;
  color: var(--page-muted);
}

.text-link {
  display: inline-flex;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--page-berry);
  font-weight: 720;
  text-decoration: none;
}

.studio-visual {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--page-line);
  border-radius: 2.5rem;
  background: rgba(255, 253, 252, 0.62);
}

.theme-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 0.55rem;
  min-height: 17rem;
}

.swatch {
  display: block;
  min-height: 8rem;
  border-radius: 999px 999px 1.1rem 1.1rem;
}

.swatch-berry { height: 78%; background: #8e2550; }
.swatch-apricot { height: 100%; background: #f2c291; }
.swatch-lilac { height: 68%; background: #bcb8f3; }
.swatch-teal { height: 87%; background: #256e70; }

.studio-visual p {
  margin: 0.8rem 0 0;
  color: var(--page-muted);
  font-size: 0.78rem;
}

.closing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(3rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--page-line);
  font: 680 clamp(1.5rem, 3vw, 2.55rem)/1.12 var(--display);
  letter-spacing: -0.04em;
}

.closing p { margin: 0; }
.closing a {
  flex: 0 0 auto;
  color: var(--page-berry);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.product-footer { color: var(--page-muted); }
.product-footer a { color: inherit; }

@keyframes orbit-arrive {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-color-scheme: dark) {
  .product-page {
    --page-canvas: #120f17;
    --page-surface: #1e1a23;
    --page-ink: #fbf6fa;
    --page-muted: #cdc2cc;
    --page-line: rgba(239, 227, 240, 0.14);
    --page-berry: #ff91b2;
    --page-apricot: #ffc083;
    --page-lilac: #c0baff;
    --page-teal: #78d0cd;
    background:
      radial-gradient(circle at 7% 3%, rgba(223, 107, 106, 0.14), transparent 28rem),
      radial-gradient(circle at 96% 11%, rgba(141, 121, 214, 0.17), transparent 32rem),
      var(--page-canvas);
  }

  .button-quiet,
  .screen-story,
  .privacy-screen,
  .studio-visual { background: rgba(255, 255, 255, 0.035); }

  .button-primary { color: #17121c; background: #fbf6fa; }
  .device-frame { border-color: rgba(255, 255, 255, 0.15); }
}

@media (max-width: 900px) {
  .product-hero,
  .theme-stage,
  .studio-story { grid-template-columns: 1fr; }

  .product-hero { min-height: auto; gap: 1.5rem; }
  .orbit-art { width: min(78vw, 27rem); }
  .screen-triptych { gap: 0.8rem; }
  .screen-story { padding: 0.7rem; }
  .screen-story figcaption { font-size: 0.76rem; }
  .theme-copy { max-width: 39rem; }
}

@media (max-width: 680px) {
  .product-shell { width: min(100% - 1.15rem, var(--product-width)); }
  .product-masthead { padding-bottom: 3.2rem; }
  .product-masthead .nav { max-width: 11rem; }
  .product-intro h1 { font-size: clamp(3.15rem, 16vw, 4.8rem); }
  .product-hero { padding-inline: 0.35rem; }
  .hero-proof { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .product-section { padding-inline: 0.35rem; }
  .section-heading { grid-template-columns: 2.1rem 1fr; gap: 0.8rem; }

  .screen-triptych { grid-template-columns: 1fr; gap: 1rem; }
  .screen-story,
  .screen-story-calendar,
  .screen-story-more {
    width: min(100%, 25rem);
    margin: 0 auto;
    padding: 1rem;
  }

  .device-frame { width: min(100%, 18rem); }
  .screen-story figcaption { font-size: 0.86rem; }

  .theme-stage {
    padding: 2rem 1rem 1.2rem;
    border-radius: 2rem;
  }

  .theme-screens { gap: 0.65rem; }
  .theme-screens .device-frame { padding: 0.26rem; border-radius: 1.7rem; }
  .theme-screens .device-frame img { border-radius: 1.45rem; }

  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-screen { width: min(100%, 25rem); margin-inline: auto; }
  .privacy-center { grid-template-columns: auto 1fr auto; width: min(100%, 19rem); margin-inline: auto; }
  .consent-flow { grid-template-columns: 1fr 1fr; gap: 1.7rem 0; }
  .consent-flow li { min-height: 8.8rem; }

  .delivery-section { border-radius: 2rem; }
  .proof-list { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .honest-status { grid-template-columns: 1fr; }
  .studio-story { gap: 2.5rem; }
  .theme-strip { min-height: 11rem; }
  .closing { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .product-masthead { align-items: flex-start; }
  .product-masthead .nav { gap: 0.35rem 0.7rem; font-size: 0.78rem; }
  .product-intro h1 { font-size: 3.05rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .theme-screens { grid-template-columns: 1fr; }
  .theme-screens figure + figure { margin-top: 1.5rem; }
  .consent-flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .consent-flow li { min-height: auto; }
  .proof-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit { animation: none; }
  .button { transition: none; }
}

@media (prefers-contrast: more) {
  .theme-stage,
  .delivery-section,
  .screen-story,
  .privacy-screen,
  .studio-visual,
  .device-frame { border: 2px solid currentColor; box-shadow: none; }
  .orbit-glow { display: none; }
}