/* Shared brand tokens from DESIGN-SYSTEM.md; editorial layouts belong to the promotional site. */
:root {
  color-scheme: dark;
  --brand-primary: #f03cd0;
  --brand-secondary: #f83b9e;
  --brand-gradient-start: #ff3ec7;
  --brand-gradient-end: #a930ff;
  --brand-gradient: linear-gradient(90deg, var(--brand-gradient-start), var(--brand-gradient-end));
  --surface-bg: #000000;
  --surface-0: #161616;
  --surface-1: #1e1e24;
  --surface-2: #2a2a2a;
  --surface-3: #393a3e;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-tertiary: #757575;
  --border-divider: #2a2a2a;
  --border-strong: #393a3e;
  --radius-card: 16px;
  --radius-dialog: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;
  --content-width: 1248px;
  --header-height: 80px;
  --font-body: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --font-display: 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --duration-press: 80ms;
  --duration-ui: 180ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --duration-hero: 720ms;
  --duration-atmosphere: 16s;
  --duration-trail: 6s;
  --duration-float: 8s;
  --duration-sheen: 9s;
  --duration-rim: 12s;
  --motion-fps: 30;
  --motion-float: 8px;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --edge-soft: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --edge-light: color-mix(in srgb, var(--text-primary) 24%, transparent);
  --light-skim: color-mix(in srgb, var(--text-primary) 12%, transparent);
  --light-crest: color-mix(in srgb, var(--text-primary) 32%, transparent);
  --header-glass: color-mix(in srgb, var(--surface-bg) 86%, transparent);
  --cut-shade: color-mix(in srgb, var(--brand-gradient-end) 58%, var(--surface-bg));
  --shadow-cta: 0 4px 12px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}
body {
  margin: 0;
  background: var(--surface-bg);
  color: var(--text-primary);
  font: 1rem/1.8 var(--font-body);
}
a,
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  text-wrap: balance;
}
h1 {
  font-size: clamp(3rem, 5.3vw, 4.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.045em;
}
h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: var(--space-1);
}
::selection {
  background: var(--brand-primary);
  color: var(--surface-bg);
}
.container {
  width: min(calc(100% - var(--space-9)), var(--content-width));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 20;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-1);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--border-divider);
  transition:
    background-color var(--duration-base),
    border-color var(--duration-base);
}
.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: 44px;
}
.brand-mark {
  width: 32px;
  height: 32px;
}
.brand-wordmark {
  width: 108px;
  height: 36px;
  object-fit: contain;
}
.site-context {
  border-left: 1px solid var(--border-strong);
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  position: relative;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast);
}
.navigation a:hover,
.text-link:hover {
  color: var(--text-primary);
}
.navigation .nav-action {
  padding-inline: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
}
.navigation .nav-action:hover {
  border-color: var(--brand-primary);
}
.menu-toggle {
  display: none;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--duration-press),
    opacity var(--duration-press),
    border-color var(--duration-ui),
    translate var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base);
}
.button:active,
.menu-toggle:active,
.feature-tabs button:active {
  transform: scale(0.96);
  opacity: 0.9;
}
.button-primary {
  background: var(--brand-gradient);
  color: var(--surface-bg);
  border-color: var(--edge-light);
}
.button-secondary {
  background: var(--surface-bg);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.button-secondary:hover {
  border-color: var(--brand-primary);
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: 0.875rem;
}

.system-hero {
  padding-top: var(--space-8);
}
.system-intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: end;
  gap: var(--space-8);
}
.system-intro-copy {
  padding-bottom: var(--space-1);
  max-width: 30em;
}
.system-intro-copy > p {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.9;
}
.system-showcase {
  height: 520px;
  position: relative;
  margin-top: var(--space-7);
  isolation: isolate;
  overflow: hidden;
}
.showcase-cut {
  position: absolute;
  inset: var(--space-6) 0 var(--space-7) 54%;
  --cut-shape: polygon(22% 0, 100% 0, 100% 74%, 78% 100%, 0 100%, 0 26%);
  clip-path: var(--cut-shape);
  z-index: -1;
}
.showcase-dashboard {
  position: absolute;
  top: var(--space-8);
  left: 0;
  width: 82%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  background: var(--surface-0);
}
.window-heading {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border-strong);
}
.window-heading > span:last-child:not(.window-dot) {
  margin-left: auto;
  color: var(--text-secondary);
}
.window-dot {
  flex: 0 0 var(--space-2);
  height: var(--space-2);
  background: var(--brand-primary);
  border-radius: 50%;
}
.showcase-phone {
  width: 212px;
  position: absolute;
  right: var(--space-8);
  top: 0;
}
.showcase-phone > figcaption {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.phone-screen {
  --screen-radius: var(--radius-dialog);
  display: block;
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--screen-radius);
  overflow: hidden;
  padding: var(--space-1);
  background:
    linear-gradient(var(--surface-0), var(--surface-bg)) padding-box,
    linear-gradient(
        145deg,
        var(--edge-light),
        var(--surface-2) 38%,
        var(--border-strong) 76%,
        var(--edge-light)
      )
      border-box;
  transition:
    transform var(--duration-press),
    opacity var(--duration-press);
}
.showcase-caption {
  position: absolute;
  bottom: 0;
  right: var(--space-4);
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: right;
  padding-left: var(--space-4);
  background: var(--surface-bg);
}
.showcase-caption span {
  color: var(--text-secondary);
}
.system-parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border-strong);
  gap: var(--space-5);
}
.system-parts p {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.system-parts strong {
  font-size: 0.875rem;
  font-weight: 500;
}
.system-parts span {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.section {
  padding-block: var(--space-10);
}
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}
.section-heading > p {
  max-width: 30em;
  color: var(--text-secondary);
}
.section-note {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.product-section {
  margin-top: var(--space-7);
  background: var(--surface-0);
}
.product-browser {
  display: grid;
  grid-template-columns: 212px 1fr;
  gap: var(--space-7);
}
.feature-tabs {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-5);
}
.feature-tabs button {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  min-height: 80px;
  border: 0;
  border-left: 2px solid var(--border-strong);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--duration-ui),
    border-color var(--duration-ui),
    transform var(--duration-press);
}
.feature-tabs button + button {
  margin-top: var(--space-2);
}
.feature-tabs span {
  font-size: 1.0625rem;
  font-weight: 600;
}
.feature-tabs small {
  font-size: 0.75rem;
  margin-top: var(--space-1);
  color: var(--text-secondary);
}
.feature-tabs button[aria-selected='true'] {
  border-color: var(--brand-primary);
  color: var(--text-primary);
  background: var(--surface-bg);
}
.feature-tabs button[aria-selected='true'] small {
  color: var(--text-secondary);
}
.feature-panels {
  min-width: 0;
}
.feature-panel {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: center;
  gap: var(--space-6);
  min-height: 600px;
}
.feature-copy h3 {
  font-size: clamp(1.75rem, 2.5vw, 2.125rem);
  line-height: 1.45;
  letter-spacing: -0.035em;
}
.feature-copy > p {
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.feature-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
.feature-list li::before {
  content: '';
  position: absolute;
  width: var(--space-2);
  height: var(--space-2);
  left: 0;
  top: 18px;
  border-left: 1px solid var(--brand-primary);
  border-bottom: 1px solid var(--brand-primary);
  transform: rotate(-45deg);
}
.feature-stage {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-5);
}
.feature-stage::before {
  content: '';
  position: absolute;
  inset: var(--space-9) 0;
  background: var(--surface-2);
  clip-path: polygon(18% 0, 100% 0, 100% 80%, 82% 100%, 0 100%, 0 20%);
}
.feature-screen {
  position: relative;
  width: 238px;
}
.feature-stage figcaption {
  position: relative;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

.operations-section {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  align-items: center;
  gap: var(--space-8);
}
.operations-copy > p {
  margin-top: var(--space-5);
  color: var(--text-secondary);
}
.operations-details {
  margin: var(--space-6) 0 0;
}
.operations-details > div {
  border-top: 1px solid var(--border-divider);
  padding-block: var(--space-4);
}
.operations-details dt {
  font-size: 0.9375rem;
}
.operations-details dd {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.operations-figure {
  min-width: 0;
}
.operations-figure .window-heading {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.admin-screen {
  display: block;
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
}
.operations-figure figcaption {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.operations-figure figcaption .text-link {
  display: flex;
  font-size: inherit;
  width: fit-content;
}
.deployment-section {
  background: var(--surface-0);
}
.deployment-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.deployment-steps li {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-5);
}
.step-number {
  color: var(--brand-primary);
  font: 500 2rem/1 var(--font-display);
}
.deployment-steps h3 {
  margin-top: var(--space-5);
  font-size: 1.125rem;
}
.deployment-steps p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  max-width: 24em;
}
.engineering-note {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-7);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-6);
}
.engineering-note > p {
  color: var(--text-secondary);
  font-size: 1.125rem;
}
.engineering-note strong {
  color: var(--text-primary);
  font-weight: 500;
}
.engineering-note dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0;
}
.engineering-note dt {
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.engineering-note dd {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
}
.closing-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-10);
}
.closing-section p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: var(--space-5);
  max-width: 32em;
}
.closing-section .actions {
  margin: 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 180px;
}
.closing-section .text-link {
  justify-content: center;
}

.site-footer {
  border-top: 1px solid var(--border-divider);
  padding-block: var(--space-7) var(--space-5);
}
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.footer-brand img {
  width: min(32%, 280px);
  height: auto;
  margin-left: -6px;
}
.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: var(--text-tertiary);
  font-size: 0.75rem;
}
.footer-inner > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.noscript-notice {
  padding: var(--space-5);
  color: var(--text-secondary);
  text-align: center;
}

/* Consumer page: a brand poster, followed by a quieter product story. */
.poster-stage {
  position: relative;
  min-height: 740px;
  isolation: isolate;
}
.poster-heading {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: clamp(4rem, 7.65vw, 6.75rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  pointer-events: none;
}
.poster-heading span {
  position: absolute;
  top: 96px;
  left: 0;
}
.poster-heading span + span {
  top: 278px;
  left: auto;
  right: -0.065em;
}
.poster-cut {
  position: absolute;
  top: 54px;
  left: 28%;
  width: 44%;
  height: 580px;
  z-index: -1;
  --cut-shape: polygon(29% 0, 100% 0, 71% 100%, 0 100%);
  clip-path: var(--cut-shape);
}
.poster-phone {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 264px;
  transform: translateX(-50%);
  z-index: 1;
}
.poster-phone figcaption {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-top: var(--space-4);
  text-align: center;
}
.poster-copy {
  position: absolute;
  left: 0;
  top: 310px;
  max-width: 310px;
}
.poster-copy p:first-child {
  font-size: 1.5rem;
  line-height: 1.7;
}
.poster-copy p + p {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.poster-copy .text-link {
  margin-top: var(--space-5);
}
.poster-action {
  position: absolute;
  right: 76px;
  top: 460px;
}
.poster-action p {
  color: var(--text-secondary);
  margin-top: var(--space-4);
  font-size: 0.75rem;
  line-height: 1.9;
  max-width: 19em;
}
.experience-section {
  background: var(--surface-0);
}
.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: var(--space-5);
  align-items: start;
}
.story {
  background: var(--surface-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: var(--space-7) var(--space-6) var(--space-6);
  border: 1px solid var(--edge-soft);
}
.story-copy h3 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  letter-spacing: -0.04em;
}
.story-copy p {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
.story-profile {
  margin-top: var(--space-8);
}
.story-profile > figure {
  width: 250px;
  max-width: 100%;
  margin: var(--space-6) auto 0;
}
.story figcaption {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: var(--space-4);
}
.story-duet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.story-chat {
  margin-top: var(--space-9);
}
.story-duet figure {
  min-width: 0;
}
.privacy-section {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--space-9);
}
.privacy-copy > p {
  margin-top: var(--space-5);
  max-width: 30em;
  color: var(--text-secondary);
}
.privacy-copy .section-note {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.privacy-list li {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-divider);
}
.privacy-list strong {
  font-size: 0.9375rem;
  font-weight: 500;
}
.privacy-list span {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: var(--space-1);
}
.privacy-figure {
  padding: var(--space-7);
  background: var(--surface-0);
  border-radius: var(--radius-card);
}
.privacy-screen {
  width: 238px;
  margin-inline: auto;
}
.privacy-figure figcaption {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.download-section {
  background: var(--surface-0);
}
.download-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: start;
  gap: var(--space-8);
}
.download-brand {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-card);
}
.download-intro > p {
  margin-top: var(--space-5);
  color: var(--text-secondary);
}
.download-intro .release-notice {
  font-size: 0.8125rem;
  padding-left: var(--space-4);
  border-left: 2px solid var(--brand-primary);
}
.download-card {
  display: grid;
  grid-template-columns: var(--space-6) 1fr auto;
  align-items: center;
  column-gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-strong);
  min-height: 116px;
}
.download-card:first-child {
  border-top: 1px solid var(--border-strong);
}
.platform-icon {
  width: var(--space-6);
  height: var(--space-6);
  color: var(--text-secondary);
}
.download-platform h3 {
  font-size: 1.0625rem;
}
.download-platform p {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}
.unavailable-status {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.download-card .button {
  font-size: 0.8125rem;
  padding-inline: var(--space-4);
}
.download-list .section-note {
  margin-top: var(--space-4);
}
.download-list .text-link {
  font-size: inherit;
}
.mobile-download-bar {
  display: none;
}

/* Light belongs to the brand cut and device edges, keeping the reading surfaces quiet. */
.showcase-cut,
.poster-cut {
  background: linear-gradient(
    145deg,
    var(--edge-light),
    var(--brand-primary) 42%,
    var(--cut-shade)
  );
  overflow: hidden;
}
.showcase-cut::before,
.poster-cut::before {
  content: '';
  position: absolute;
  inset: 1px;
  clip-path: var(--cut-shape);
  background:
    radial-gradient(ellipse at 18% 18%, var(--light-crest), transparent 54%),
    linear-gradient(
      135deg,
      var(--cut-shade),
      var(--brand-primary) 28%,
      var(--brand-gradient-start) 46%,
      var(--brand-gradient-end) 72%,
      var(--cut-shade)
    );
}
.showcase-cut::after,
.poster-cut::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    112deg,
    transparent 26%,
    var(--light-skim) 43%,
    var(--light-crest) 45%,
    var(--light-skim) 47%,
    transparent 64%
  );
  translate: calc(var(--pointer-x, 0) * 48px) calc(var(--pointer-y, 0) * 16px);
  transition: translate var(--duration-slow) var(--ease-out-quart);
  pointer-events: none;
}
.phone-screen img {
  border-radius: calc(var(--screen-radius) - var(--space-1));
}
.phone-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--rim-angle, 0deg),
    transparent 0turn 0.65turn,
    var(--brand-primary) 0.78turn,
    var(--text-primary) 0.86turn,
    var(--brand-gradient-end) 0.92turn,
    transparent 1turn
  );
  -webkit-mask:
    linear-gradient(var(--text-primary) 0 0) content-box,
    linear-gradient(var(--text-primary) 0 0);
  mask:
    linear-gradient(var(--text-primary) 0 0) content-box,
    linear-gradient(var(--text-primary) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.phone-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--edge-soft);
  background: linear-gradient(115deg, transparent 35%, var(--light-skim) 50%, transparent 65%);
  opacity: 0;
  translate: calc(var(--pointer-x, 0) * 24px) 0;
  transition:
    opacity var(--duration-slow),
    translate var(--duration-slow) var(--ease-out-quart);
  pointer-events: none;
}
.showcase-dashboard {
  border-color: var(--edge-light);
}
.window-heading {
  background: linear-gradient(110deg, var(--surface-2), var(--surface-1) 54%);
  border-bottom-color: var(--edge-soft);
}
.feature-stage::before {
  background: linear-gradient(145deg, var(--surface-3), var(--surface-1) 54%, var(--surface-2));
}
.product-section,
.experience-section {
  background: linear-gradient(180deg, var(--surface-0), var(--surface-bg));
  border-block: 1px solid var(--edge-soft);
}
.deployment-section,
.download-section {
  background: linear-gradient(125deg, var(--surface-0), var(--surface-bg));
  border-block: 1px solid var(--edge-soft);
}
.privacy-figure {
  background: linear-gradient(145deg, var(--surface-1), var(--surface-bg));
  border: 1px solid var(--edge-soft);
}
.feature-tabs button {
  transition:
    background-color var(--duration-base),
    color var(--duration-fast),
    border-color var(--duration-base),
    transform var(--duration-press);
}
.feature-tabs button[aria-selected='true'] {
  background: linear-gradient(90deg, var(--surface-1), transparent);
}
.feature-tabs span,
.feature-tabs small {
  transition: translate var(--duration-base) var(--ease-out-quart);
}
.feature-tabs button[aria-selected='true'] span,
.feature-tabs button[aria-selected='true'] small {
  translate: var(--space-1) 0;
}
.site-header.is-scrolled {
  background-color: var(--header-glass);
  border-color: var(--edge-soft);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.brand img {
  mix-blend-mode: screen;
}
.navigation a[href^='#']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-1);
  height: 1px;
  background: var(--brand-primary);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--duration-base) var(--ease-out-quart);
}
.navigation a[aria-current='location'] {
  color: var(--text-primary);
}
.navigation a[aria-current='location']::after {
  scale: 1 1;
}
.navigation .nav-action[aria-current='location'] {
  border-color: var(--brand-primary);
}
.navigation .nav-action::after {
  display: none;
}
.reading-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-gradient);
  scale: 0 1;
  transform-origin: left;
}
.button-primary::after {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(110deg, transparent 37%, var(--light-skim) 49%, transparent 61%);
  translate: -80% 0;
  pointer-events: none;
  transition: translate var(--duration-slow) var(--ease-out-quart);
}
.text-link {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  transition:
    color var(--duration-fast),
    text-decoration-color var(--duration-base);
}
.text-link:hover,
.text-link:focus-visible {
  text-decoration-color: var(--brand-primary);
}

/* A single entrance sequence; content remains visible without JavaScript or motion support. */
@keyframes title-arrive {
  from {
    opacity: 0;
    translate: 0 var(--space-5);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0);
  }
}
@keyframes surface-arrive {
  from {
    opacity: 0;
    translate: 0 var(--space-5);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes cut-unfold {
  from {
    opacity: 0;
    scale: 0.82 1;
  }
  to {
    opacity: 1;
    scale: 1 1;
  }
}
@keyframes panel-copy {
  from {
    opacity: 0;
    translate: 0 var(--space-2);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes panel-screen {
  from {
    opacity: 0;
    translate: var(--space-3) 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes menu-arrive {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-2));
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .system-intro h1,
  .poster-heading > span {
    animation: title-arrive var(--duration-hero) var(--ease-out-expo) both;
  }
  .poster-heading > span + span {
    animation-delay: var(--duration-fast);
  }
  .system-intro-copy,
  .poster-copy,
  .poster-action {
    animation: surface-arrive var(--duration-hero) var(--ease-out-expo) var(--duration-fast) both;
  }
  .showcase-cut,
  .poster-cut {
    transform-origin: right center;
    animation: cut-unfold var(--duration-hero) var(--ease-out-expo) both;
  }
  .showcase-dashboard,
  .showcase-phone > .phone-screen,
  .poster-phone > .phone-screen {
    animation: surface-arrive var(--duration-hero) var(--ease-out-expo) var(--duration-base) both;
  }
  .feature-panel:not([hidden]) .feature-copy {
    animation: panel-copy var(--duration-slow) var(--ease-out-quart) both;
  }
  .feature-panel:not([hidden]) .feature-screen {
    animation: panel-screen var(--duration-slow) var(--ease-out-quart) both;
  }
  .navigation.is-open {
    animation: menu-arrive var(--duration-base) var(--ease-out-quart) both;
  }
  .mobile-download-bar:not([hidden]) {
    animation: panel-copy var(--duration-base) var(--ease-out-quart) both;
  }
}
@media (hover: hover) and (pointer: fine) {
  .button-primary:hover,
  .button-primary:focus-visible {
    box-shadow: var(--shadow-cta);
  }
  .button-primary:hover::after,
  .button-primary:focus-visible::after {
    translate: 80% 0;
  }
  .phone-screen:hover::after {
    opacity: 0.55;
  }
  .navigation a:hover::after {
    scale: 1 1;
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .button:hover {
    translate: 0 -2px;
  }
  .poster-phone > .phone-screen,
  .showcase-phone > .phone-screen {
    transform: perspective(1200px) rotateX(calc(var(--pointer-y, 0) * -2deg))
      rotateY(calc(var(--pointer-x, 0) * 3deg));
    transition: transform var(--duration-slow) var(--ease-out-quart);
  }
}
.page-inactive *,
.page-inactive *::before,
.page-inactive *::after {
  animation-play-state: paused !important;
}

@media (max-width: 1120px) {
  .site-context {
    display: none;
  }
  .system-intro {
    gap: var(--space-7);
  }
  .system-showcase {
    height: 516px;
  }
  .showcase-phone {
    width: 212px;
    right: var(--space-6);
  }
  .product-browser {
    grid-template-columns: 176px 1fr;
    gap: var(--space-6);
  }
  .feature-panel {
    grid-template-columns: 1fr 232px;
    gap: var(--space-5);
  }
  .feature-screen {
    width: 212px;
  }
  .operations-section {
    gap: var(--space-7);
  }
  .poster-phone {
    width: 234px;
    top: 64px;
  }
  .poster-heading {
    font-size: clamp(3.5rem, 7.5vw, 5.25rem);
  }
  .poster-stage {
    min-height: 690px;
  }
  .poster-cut {
    height: 530px;
    top: 64px;
  }
  .poster-copy {
    max-width: 260px;
  }
  .poster-copy p:first-child {
    font-size: 1.25rem;
  }
  .poster-copy p + p {
    font-size: 0.875rem;
  }
  .poster-action {
    right: var(--space-5);
  }
  .story {
    padding-inline: var(--space-5);
  }
}
@media (max-width: 960px) {
  .container {
    width: calc(100% - var(--space-8));
  }
  .navigation {
    gap: var(--space-5);
  }
  .system-intro {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-6);
  }
  h1 {
    font-size: 3rem;
  }
  .system-intro-copy > p {
    font-size: 0.9375rem;
  }
  .system-intro-copy .actions {
    gap: var(--space-2);
  }
  .system-intro-copy .button {
    padding-inline: var(--space-4);
    font-size: 0.8125rem;
  }
  .product-browser {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .feature-tabs {
    flex-direction: row;
    gap: var(--space-2);
    padding: 0;
  }
  .feature-tabs button {
    width: 25%;
    border-left: 0;
    border-bottom: 2px solid var(--border-strong);
    padding: var(--space-4);
  }
  .feature-tabs button + button {
    margin: 0;
  }
  .feature-tabs small {
    font-size: 0.6875rem;
  }
  .feature-panel {
    grid-template-columns: 1fr 280px;
    min-height: 570px;
    gap: var(--space-7);
  }
  .feature-screen {
    width: 232px;
  }
  .operations-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .operations-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .operations-figure {
    width: 100%;
  }
  .poster-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
    min-height: 0;
  }
  .poster-heading {
    position: static;
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: clamp(3rem, 8vw, 4.5rem);
  }
  .poster-heading span,
  .poster-heading span + span {
    position: static;
  }
  .poster-phone {
    position: static;
    grid-column: 2;
    grid-row: 2 / span 2;
    transform: none;
    justify-self: center;
    width: 234px;
  }
  .poster-copy {
    position: static;
    align-self: end;
    max-width: none;
  }
  .poster-copy p:first-child {
    font-size: 1.5rem;
  }
  .poster-copy p + p {
    font-size: 0.9375rem;
  }
  .poster-action {
    position: static;
    grid-column: 1;
    align-self: start;
  }
  .poster-cut {
    top: 200px;
    left: 46%;
    width: 54%;
    height: 460px;
  }
  .story-grid {
    grid-template-columns: 1fr 1fr;
  }
  .story-profile > figure {
    width: 212px;
  }
  .story-duet {
    gap: var(--space-2);
  }
  .story-chat {
    margin-top: var(--space-8);
  }
  .privacy-section {
    gap: var(--space-7);
  }
  .privacy-figure {
    padding: var(--space-6) var(--space-4);
  }
  .download-layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .download-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
  .download-brand {
    grid-column: 1 / -1;
  }
  .download-intro h2 {
    grid-row: 2 / span 2;
  }
  .download-intro > p {
    margin-top: 0;
  }
  .download-intro .release-notice {
    margin-top: var(--space-4);
  }
}
@media (max-width: 700px) {
  :root {
    --header-height: 72px;
  }
  .container {
    width: calc(100% - var(--space-7));
  }
  .header-inner {
    position: relative;
    justify-content: space-between;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
  }
  .brand-wordmark {
    width: 100px;
    height: 34px;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.8125rem;
  }
  .menu-toggle span {
    width: 12px;
    height: 6px;
    border-block: 1px solid var(--text-primary);
  }
  .navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface-bg);
  }
  .navigation.is-open {
    display: flex;
  }
  .navigation a {
    padding-inline: var(--space-4);
  }
  h1 {
    font-size: clamp(2.375rem, 7.4vw, 3.5rem);
  }
  h2 {
    font-size: clamp(1.875rem, 5.7vw, 2.5rem);
  }
  .system-hero {
    padding-top: var(--space-7);
  }
  .system-intro {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .system-intro-copy {
    max-width: 34em;
  }
  .system-intro-copy .actions {
    margin-top: var(--space-5);
    gap: var(--space-3);
  }
  .system-intro-copy .button {
    font-size: 0.875rem;
    padding-inline: var(--space-5);
  }
  .system-showcase {
    height: 396px;
    margin-top: var(--space-6);
  }
  .showcase-dashboard {
    width: 92%;
    top: var(--space-7);
  }
  .showcase-dashboard .window-heading {
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    font-size: 0.625rem;
  }
  .showcase-dashboard .window-heading > span:last-child {
    display: none;
  }
  .showcase-cut {
    inset: 0 0 var(--space-6) 35%;
  }
  .showcase-phone {
    width: 146px;
    right: var(--space-3);
    top: auto;
    bottom: var(--space-5);
  }
  .showcase-phone > figcaption {
    display: none;
  }
  .showcase-phone .phone-screen {
    --screen-radius: var(--radius-card);
  }
  .showcase-caption {
    left: 0;
    right: auto;
    bottom: var(--space-2);
    max-width: 150px;
    padding: 0;
    text-align: left;
    font-size: 0.6875rem;
  }
  .system-parts {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-5);
  }
  .system-parts strong {
    font-size: 0.8125rem;
  }
  .system-parts span {
    font-size: 0.75rem;
  }
  .section {
    padding-block: var(--space-8);
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
  }
  .section-heading > p {
    font-size: 0.9375rem;
  }
  .product-section {
    margin-top: var(--space-6);
  }
  .feature-tabs {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .feature-tabs button {
    width: calc(50% - var(--space-1));
    min-height: 72px;
    padding: var(--space-3);
  }
  .feature-tabs span {
    font-size: 0.9375rem;
  }
  .feature-tabs small {
    font-size: 0.6875rem;
  }
  .feature-panel {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    min-height: 0;
    padding-top: var(--space-5);
  }
  .feature-copy h3 {
    font-size: 1.75rem;
  }
  .feature-copy > p {
    margin-top: var(--space-4);
  }
  .feature-stage {
    padding: var(--space-5) 0;
  }
  .feature-stage::before {
    inset: var(--space-9) 0;
  }
  .feature-screen {
    width: 232px;
  }
  .operations-details {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .operations-figure .window-heading {
    font-size: 0.6875rem;
  }
  .deployment-steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-block: var(--space-6) var(--space-7);
  }
  .deployment-steps li {
    display: grid;
    grid-template-columns: var(--space-7) 1fr;
    column-gap: var(--space-4);
  }
  .step-number {
    grid-row: span 2;
    font-size: 1.5rem;
    line-height: 1.4;
  }
  .deployment-steps h3 {
    margin: 0;
  }
  .deployment-steps p {
    margin-top: var(--space-2);
  }
  .engineering-note {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .engineering-note dl {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .engineering-note dl > div {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--space-3);
  }
  .engineering-note dd {
    margin: 0;
  }
  .closing-section {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  .closing-section .actions {
    flex-direction: row;
    align-items: center;
  }
  .footer-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }
  .footer-brand img {
    width: 200px;
  }
  .footer-inner {
    gap: var(--space-3);
  }
  .footer-inner > div {
    gap: var(--space-4);
  }

  .poster-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-7) var(--space-6);
    align-items: center;
  }
  .poster-heading {
    display: block;
    align-self: stretch;
    font-size: clamp(3rem, 14.3vw, 5rem);
  }
  .poster-heading span {
    display: block;
  }
  .poster-heading span + span {
    text-align: right;
    margin-top: var(--space-2);
  }
  .poster-copy {
    order: 1;
    align-self: stretch;
    margin-top: var(--space-5);
    display: grid;
    grid-template-columns: 1fr;
  }
  .poster-copy p:first-child {
    font-size: 1.0625rem;
    line-height: 1.8;
  }
  .poster-copy p:first-child br {
    display: none;
  }
  .poster-copy p + p {
    font-size: 0.875rem;
    margin-top: var(--space-2);
  }
  .poster-copy p + p br {
    display: none;
  }
  .poster-copy .text-link {
    margin: var(--space-2) 0 0;
    justify-self: start;
  }
  .poster-action {
    order: 2;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
  .poster-action .button {
    flex-shrink: 0;
  }
  .poster-action p {
    font-size: 0.6875rem;
    margin: 0;
  }
  .poster-phone {
    order: 3;
    width: 218px;
    margin-top: var(--space-7);
  }
  .poster-phone figcaption {
    margin-top: var(--space-5);
  }
  .poster-cut {
    top: auto;
    bottom: var(--space-8);
    left: 0;
    width: 100%;
    height: 432px;
  }
  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .story {
    padding: var(--space-6) var(--space-5);
  }
  .story-profile {
    margin-top: 0;
  }
  .story-profile > figure {
    width: 232px;
  }
  .story-copy h3 {
    font-size: 1.75rem;
  }
  .story-copy p {
    font-size: 0.875rem;
  }
  .story-duet {
    gap: var(--space-3);
  }
  .story-duet .phone-screen {
    --screen-radius: var(--radius-card);
  }
  .privacy-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .privacy-copy > p {
    font-size: 0.9375rem;
  }
  .privacy-figure {
    padding-block: var(--space-6);
  }
  .privacy-screen {
    width: 232px;
  }
  .download-intro {
    display: block;
  }
  .download-intro > p {
    margin-top: var(--space-5);
  }
  .download-intro .release-notice {
    margin-top: var(--space-5);
  }
  .download-card {
    grid-template-columns: var(--space-5) 1fr auto;
    column-gap: var(--space-3);
    min-height: 104px;
    padding-block: var(--space-5);
  }
  .platform-icon {
    width: var(--space-5);
    height: var(--space-5);
  }
  .download-platform h3 {
    font-size: 1rem;
  }
  .download-platform p {
    font-size: 0.6875rem;
    max-width: 17em;
  }
  .download-card .button {
    font-size: 0.75rem;
    max-width: 112px;
    padding-inline: var(--space-3);
  }
  .unavailable-status {
    padding: var(--space-1) var(--space-2);
    font-size: 0.6875rem;
  }
  .download-page {
    --download-bar-space: calc(84px + env(safe-area-inset-bottom));
    padding-bottom: var(--download-bar-space);
  }
  .mobile-download-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    border-top: 1px solid var(--border-strong);
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--surface-bg);
  }
  .mobile-download-bar > span {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
  }
  .mobile-download-bar small {
    display: block;
    font: 0.6875rem/1.5 var(--font-body);
    color: var(--text-secondary);
  }
  .mobile-download-bar .button {
    min-height: 48px;
    font-size: 0.8125rem;
  }
}
@media (max-width: 380px) {
  .container {
    width: calc(100% - var(--space-6));
  }
  h1 {
    font-size: 2.2rem;
  }
  .system-intro-copy .button {
    padding-inline: var(--space-4);
  }
  .showcase-phone {
    width: 136px;
    right: var(--space-2);
  }
  .system-showcase {
    height: 376px;
  }
  .showcase-caption {
    max-width: 130px;
    font-size: 0.625rem;
  }
  .poster-action {
    gap: var(--space-3);
  }
  .poster-action .button {
    padding-inline: var(--space-4);
    font-size: 0.875rem;
  }
  .story {
    padding-inline: var(--space-4);
  }
  .story-profile > figure,
  .privacy-screen {
    width: 212px;
  }
  .download-card {
    column-gap: var(--space-2);
  }
}
/* Scroll chapters: the page stays native; only the stage is pinned inside its own section. */
.scroll-cue,
.scroll-instruction {
  display: none;
}
.story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.story-community > figure,
.story-conversation > figure {
  width: 250px;
  max-width: 100%;
  margin: var(--space-6) auto 0;
}
.story-navigation {
  display: flex;
  gap: var(--space-5);
}
.story-navigation button {
  position: relative;
  min-height: 44px;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
}
.story-navigation button::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base);
}
.story-navigation button[aria-pressed='true'] {
  color: var(--text-primary);
}
.story-navigation button[aria-pressed='true']::after {
  transform: scaleX(1);
}
.has-scroll-scene {
  --scene-progress: 0;
  --scene-focus: 0;
  --scene-leave: 0;
}
.motion-field {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.has-ambient-motion .motion-field {
  display: block;
}
.motion-field-poster {
  mask-image: linear-gradient(90deg, transparent 6%, black 28%, black 74%, transparent 96%);
}
.motion-field-product {
  left: 50%;
  width: 50%;
}
.motion-field-story {
  left: 44%;
  width: 56%;
}
.has-scroll-scene .showcase-cut::after,
.has-scroll-scene .poster-cut::after {
  translate: calc(-45% + var(--scene-progress) * 90% + var(--pointer-x, 0) * 48px)
    calc(var(--pointer-y, 0) * 16px);
  opacity: calc(0.4 + var(--scene-focus) * 0.6);
}
.has-scroll-scene .scroll-cue {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-height: 44px;
}
.has-scroll-scene .scroll-cue > span:last-child {
  color: var(--brand-primary);
  font-size: 1.25rem;
  transform: translateY(calc(var(--scene-progress) * 8px));
}
.system-hero.has-scroll-scene {
  height: calc(var(--scene-vh) * 1.9);
  padding-top: 0;
}
.has-scroll-scene .system-hero-frame {
  position: sticky;
  top: var(--header-height);
  height: var(--scene-vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-3);
}
.has-scroll-scene .system-intro {
  transform: translateY(calc(var(--scene-focus) * -16px)) scale(calc(1 - var(--scene-focus) * 0.07));
  transform-origin: left bottom;
  opacity: calc(1 - var(--scene-leave) * 0.35);
}
.has-scroll-scene .system-intro h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
}
.has-scroll-scene .system-intro-copy > p {
  font-size: 0.9375rem;
  line-height: 1.8;
}
.has-scroll-scene .system-intro-copy .actions {
  margin-top: var(--space-4);
}
.has-scroll-scene .system-showcase {
  flex: 1;
  min-height: 240px;
  margin: 0;
  overflow: clip;
}
.has-scroll-scene .showcase-dashboard {
  top: var(--space-7);
  width: 82%;
  transform: perspective(1200px) translateY(calc(28px - var(--scene-focus) * 28px))
    rotateX(calc(9deg - var(--scene-focus) * 9deg))
    rotateY(calc(-12deg + var(--scene-focus) * 12deg)) scale(calc(0.9 + var(--scene-focus) * 0.1));
  transform-origin: left top;
}
.has-scroll-scene .showcase-phone {
  width: clamp(128px, calc(var(--scene-vh) * 0.215), 230px);
  right: var(--space-8);
  transform: translate(
      calc(40px - var(--scene-focus) * 180px),
      calc(24px - var(--scene-focus) * 24px)
    )
    rotate(calc(8deg - var(--scene-focus) * 12deg));
}
.has-scroll-scene .showcase-phone > figcaption {
  display: none;
}
.has-scroll-scene .showcase-cut {
  transform: translateX(calc(var(--scene-focus) * -120px))
    scaleX(calc(1 + var(--scene-focus) * 0.22));
}
.has-scroll-scene .system-parts {
  padding-block: var(--space-3);
}
.has-scroll-scene .system-hero-frame > .scroll-cue {
  min-height: 28px;
}
.poster-hero.has-scroll-scene {
  height: calc(var(--scene-vh) * 1.75);
}
.has-scroll-scene .poster-stage {
  position: sticky;
  top: var(--header-height);
  height: var(--scene-vh);
  min-height: 0;
  overflow: clip;
}
.has-scroll-scene .poster-heading {
  opacity: calc(1 - var(--scene-focus) * 0.54);
  filter: blur(calc(var(--scene-leave) * 2px));
}
.has-scroll-scene .poster-heading > span {
  top: 14%;
  transform: perspective(1200px) translateX(calc(var(--scene-focus) * -150px))
    rotateY(calc(var(--scene-focus) * 10deg));
}
.has-scroll-scene .poster-heading > span + span {
  top: 39%;
  transform: perspective(1200px) translateX(calc(var(--scene-focus) * 150px))
    rotateY(calc(var(--scene-focus) * -10deg));
}
.has-scroll-scene .poster-phone {
  top: var(--space-6);
  width: clamp(194px, calc(var(--scene-vh) * 0.315), 290px);
  scale: calc(1 + var(--scene-focus) * 0.26);
  rotate: calc(var(--scene-focus) * -6deg);
  transform: translateX(-50%) perspective(1200px) rotateX(calc(var(--scene-focus) * 8deg))
    rotateY(calc(var(--scene-focus) * -8deg));
  transform-origin: center top;
}
.has-scroll-scene .poster-cut {
  top: var(--space-7);
  height: calc(var(--scene-vh) - 124px);
  transform: scaleX(calc(1 + var(--scene-focus) * 0.48)) skewY(calc(var(--scene-focus) * -6deg));
}
.has-scroll-scene .poster-copy {
  top: 44%;
  transform: translateY(calc(var(--scene-focus) * 36px));
}
.has-scroll-scene .poster-action {
  top: 70%;
  transform: translateY(calc(var(--scene-focus) * 36px));
}
.has-scroll-scene .poster-stage > .scroll-cue {
  position: absolute;
  right: 0;
  bottom: var(--space-5);
}
.product-section.has-scroll-scene {
  padding: 0;
  margin: 0;
  height: calc(var(--scene-vh) * 4.2);
}
.has-scroll-scene .product-sticky {
  position: sticky;
  top: var(--header-height);
  height: var(--scene-vh);
  padding-block: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}
.has-scroll-scene .product-sticky .section-heading {
  margin: 0;
}
.has-scroll-scene .product-sticky h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.has-scroll-scene .scroll-instruction {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  margin-top: var(--space-2);
}
.has-scroll-scene .product-browser {
  flex: 1;
  min-height: 0;
  align-items: center;
}
.has-scroll-scene .feature-panel {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  pointer-events: none;
}
.has-scroll-scene .feature-panel[aria-hidden='false'] {
  pointer-events: auto;
}
.has-scroll-scene .feature-panels {
  height: calc(var(--scene-vh) - 215px);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.has-scroll-scene .feature-panel:focus-visible {
  outline-offset: -4px;
}
.has-scroll-scene .feature-stage {
  opacity: min(1, calc(var(--screen-opacity, 1) * 4));
  transform: perspective(1200px) translateX(calc(var(--chapter-offset, 0) * 160px))
    rotateY(calc(var(--chapter-offset, 0) * -22deg))
    scale(calc(1 - var(--chapter-offset, 0) * var(--chapter-offset, 0) * 0.08));
}
.has-scroll-scene .feature-stage::before {
  opacity: 0.45;
}
.has-scroll-scene .feature-panel[aria-hidden='true'] .feature-copy {
  visibility: hidden;
}
.has-scroll-scene .feature-panel[aria-hidden='true'] figcaption,
.has-scroll-scene .story[aria-hidden='true'] figcaption {
  visibility: hidden;
}
.has-scroll-scene .feature-screen {
  width: clamp(150px, calc((var(--scene-vh) - 280px) * 0.462), 256px);
}
.has-scroll-scene .feature-tabs button {
  position: relative;
  min-height: 72px;
  padding-block: var(--space-4);
}
.has-scroll-scene .feature-tabs {
  padding-top: 0;
}
.has-scroll-scene .feature-tabs button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 2px;
  background: var(--brand-gradient);
  transform: scaleY(var(--chapter-progress, 0));
  transform-origin: top;
}
.has-scroll-scene .product-sticky > .section-note {
  margin: 0;
  font-size: 0.6875rem;
}
.experience-section.has-scroll-scene {
  padding: 0;
  height: calc(var(--scene-vh) * 3.6);
  overflow-x: clip;
}
.has-scroll-scene .experience-sticky {
  --story-vh: calc(var(--scene-vh) - var(--download-bar-space, 0px));
  position: sticky;
  top: var(--header-height);
  height: var(--story-vh);
  display: flex;
  flex-direction: column;
  padding-block: var(--space-6) var(--space-5);
}
.has-scroll-scene .experience-sticky .section-heading {
  margin-bottom: var(--space-5);
}
.has-scroll-scene .experience-sticky h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
}
.has-scroll-scene .story-grid {
  display: block;
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate;
}
.has-scroll-scene .story {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
.has-scroll-scene .story[aria-hidden='false'] {
  pointer-events: auto;
}
.has-scroll-scene .story-copy {
  position: absolute;
  top: 32%;
  left: 0;
  width: 44%;
  opacity: var(--copy-opacity, 1);
  transform: translateY(calc((1 - var(--copy-opacity, 1)) * 28px));
}
.has-scroll-scene .story-copy h3 {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
}
.has-scroll-scene .story > figure {
  position: absolute;
  left: 68%;
  top: 0;
  width: clamp(150px, calc((var(--story-vh) - 245px) * 0.462), 285px);
  margin: 0;
  opacity: min(1, calc(var(--screen-opacity, 1) * 4));
  transform: perspective(1200px) translateX(calc(-50% + var(--story-offset, 0) * 220px))
    rotateY(calc(var(--story-offset, 0) * -18deg))
    scale(calc(1 - var(--story-offset, 0) * var(--story-offset, 0) * 0.12));
}
.has-scroll-scene .story-grid::before {
  content: '';
  position: absolute;
  inset: var(--space-5) 0 var(--space-5) 44%;
  z-index: -1;
  background: linear-gradient(130deg, var(--surface-3), var(--surface-1), var(--cut-shade));
  clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%);
  transform: translateX(calc(var(--scene-progress) * -48px));
}
.has-scroll-scene .story-navigation {
  flex-shrink: 0;
  width: 44%;
}
.has-scroll-scene .story-navigation button {
  flex: 1;
}
.has-scroll-scene .story-navigation button::after {
  transform: scaleX(var(--chapter-progress, 0));
}
.has-scroll-scene .experience-sticky > .section-note {
  margin-top: var(--space-3);
  font-size: 0.6875rem;
}
@media (max-width: 960px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .has-scroll-scene .experience-sticky .section-heading {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--space-4);
  }
  .has-scroll-scene .experience-sticky .section-heading > p {
    display: none;
  }
  .has-scroll-scene .experience-sticky h2 {
    font-size: clamp(1.625rem, 6.2vw, 2.5rem);
  }
  .has-scroll-scene .experience-sticky {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }
  .has-scroll-scene .story-copy {
    top: 0;
    width: 100%;
  }
  .has-scroll-scene .story-copy h3 {
    font-size: 1.375rem;
  }
  .has-scroll-scene .story-copy p {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
  }
  .has-scroll-scene .story > figure {
    top: 106px;
    left: 50%;
    width: clamp(88px, calc((var(--story-vh) - 360px) * 0.462), 212px);
    transform: translateX(calc(-50% + var(--story-offset, 0) * 150px))
      rotate(calc(var(--story-offset, 0) * 8deg));
  }
  .has-scroll-scene .story figcaption {
    font-size: 0.6875rem;
    line-height: 1.5;
    margin-top: var(--space-3);
  }
  .has-scroll-scene .story-grid::before {
    inset: 114px 0 var(--space-6) 0;
  }
  .motion-field-story {
    inset: 100px 0 0;
    width: 100%;
    height: calc(100% - 100px);
    opacity: 0.7;
  }
  .has-scroll-scene .story-navigation {
    width: 100%;
    gap: var(--space-3);
  }
  .has-scroll-scene .story-navigation button {
    font-size: 0.75rem;
    min-height: 44px;
  }
  .has-scroll-scene .experience-sticky > .section-note {
    font-size: 0.625rem;
    margin-top: var(--space-2);
  }
}
@keyframes chapter-title {
  from {
    clip-path: inset(100% 0 0);
    translate: 0 var(--space-4);
  }
  to {
    clip-path: inset(0);
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .has-scroll-scene .feature-panel .feature-copy,
  .has-scroll-scene .feature-panel .feature-screen {
    animation: none;
  }
  .has-scroll-scene .feature-panel[aria-hidden='false'] h3,
  .has-scroll-scene .story[aria-hidden='false'] h3 {
    animation: chapter-title var(--duration-slow) var(--ease-out-expo) both;
  }
  .has-scroll-scene .feature-panel[aria-hidden='false'] .feature-copy > p,
  .has-scroll-scene .feature-panel[aria-hidden='false'] .feature-list,
  .has-scroll-scene .story[aria-hidden='false'] .story-copy > p {
    animation: panel-copy var(--duration-slow) var(--ease-out-quart) var(--duration-press) both;
  }
}
/* The cut, ribbon and device share one atmosphere; text stays still and readable. */
@keyframes device-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(var(--motion-float) * -1);
  }
}
@property --rim-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes device-rim {
  to {
    --rim-angle: 360deg;
  }
}
@keyframes cut-flow {
  0%,
  100% {
    background-position: 0% 25%;
  }
  50% {
    background-position: 100% 75%;
  }
}
@keyframes cut-sheen {
  0%,
  12% {
    transform: translateX(-42%);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  88%,
  100% {
    transform: translateX(42%);
    opacity: 0;
  }
}
@keyframes screen-sheen {
  0%,
  20% {
    background-position: 180% 0;
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  80%,
  100% {
    background-position: -80% 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .has-ambient-motion .poster-phone,
  .has-ambient-motion .showcase-phone {
    animation: device-float var(--duration-float) ease-in-out infinite;
  }
  .has-ambient-motion .poster-cut::before,
  .has-ambient-motion .showcase-cut::before {
    background-size:
      180% 180%,
      100% 100%;
    animation: cut-flow var(--duration-atmosphere) ease-in-out infinite;
  }
  .has-ambient-motion .poster-cut::after,
  .has-ambient-motion .showcase-cut::after {
    animation: cut-sheen var(--duration-sheen) ease-in-out infinite;
  }
  .has-ambient-motion .phone-screen::before {
    opacity: 0.72;
    animation: device-rim var(--duration-rim) linear infinite;
  }
  .has-ambient-motion .phone-screen::after {
    background-size: 220% 100%;
    animation: screen-sheen var(--duration-sheen) ease-in-out infinite;
  }
  .has-ambient-motion .poster-phone,
  .has-ambient-motion .showcase-phone,
  .has-ambient-motion .poster-cut::before,
  .has-ambient-motion .showcase-cut::before,
  .has-ambient-motion .poster-cut::after,
  .has-ambient-motion .showcase-cut::after,
  .has-ambient-motion .phone-screen::before,
  .has-ambient-motion .phone-screen::after {
    animation-play-state: paused;
  }
  .is-ambient-active .poster-phone,
  .is-ambient-active .showcase-phone,
  .is-ambient-active .poster-cut::before,
  .is-ambient-active .showcase-cut::before,
  .is-ambient-active .poster-cut::after,
  .is-ambient-active .showcase-cut::after,
  .is-ambient-active .phone-screen::before,
  .is-ambient-active .phone-screen::after {
    animation-play-state: running;
  }
  .feature-panel[aria-hidden='true'] .phone-screen::before,
  .feature-panel[aria-hidden='true'] .phone-screen::after,
  .story[aria-hidden='true'] .phone-screen::before,
  .story[aria-hidden='true'] .phone-screen::after {
    animation-play-state: paused;
  }
}
@media (max-width: 960px) {
  :root {
    --motion-fps: 20;
    --motion-float: 4px;
  }
  .motion-field-poster {
    mask-image: linear-gradient(180deg, transparent 42%, black 70%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}