@charset "UTF-8";

:root {
  color-scheme: light;
  --ink: #151719;
  --muted: #62686c;
  --paper: #fafbfc;
  --line: #dce1e4;
  --accent: #b7deed;
  --a: #6eb8f8;
  --b: #b9df7d;
  --c: #c497de;
  --ease: cubic-bezier(.22, .68, 0, 1.01);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; border: 0; background: none; appearance: none; }
button:disabled { cursor: default; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
figure, h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.6; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #5ba2d8; outline-offset: 5px; }
::selection { background: var(--accent); color: var(--ink); }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; top: -70px; left: 20px; padding: 12px 20px; background: white; z-index: 100; }
.skip-link:focus { top: 10px; }
.eyebrow { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 0; color: var(--muted); }
h2 { font-size: 48px; line-height: 1.12; font-weight: 550; letter-spacing: 0; text-wrap: balance; }
h3 { font-weight: 550; letter-spacing: 0; }
.section { padding: 112px 0; }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 90px; margin-bottom: 52px; }
.section-heading h2 { margin-top: 21px; }
.section-intro { font-size: 17px; line-height: 1.8; color: var(--muted); max-width: 420px; }
.button { min-height: 50px; padding: 12px 22px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-weight: 550; font-size: 14px; line-height: 1.45; transition: background .2s, color .2s, box-shadow .2s; text-align: center; }
.button-light { background: #fff; color: #151719; }
.button-light:hover { background: #edf4f7; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #30363a; }
.button-accent { background: var(--accent); color: #142a34; }
.button-accent:hover:not(:disabled) { background: #d0eaf4; }
.icon-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; }
.text-link { display: inline-flex; align-items: center; gap: 16px; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-size: 14px; }

/* The opening keeps the actual footage visible and all text outside the ride area. */
.site-header { position: absolute; z-index: 20; top: 0; width: 100%; color: white; border-bottom: 1px solid #ffffff26; }
.header-inner { width: min(1440px, calc(100% - 80px)); height: 80px; display: flex; align-items: center; gap: 30px; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 17px; font-weight: 650; }
.brand img { border-radius: 7px; width: 32px; height: 32px; }
.desktop-nav { display: flex; margin-left: auto; gap: 28px; font-size: 13px; }
.desktop-nav a { color: #ffffffd1; transition: color .2s; }
.desktop-nav a:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 22px; font-size: 12px; }
.header-download { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid #ffffff70; border-radius: 4px; }
.header-download svg { width: 15px; height: 15px; }
.header-download:hover { background: #ffffff1a; }
.language-link { padding: 8px 0; }
.menu-toggle { display: none; }
.mobile-nav { background: #171a1c; padding: 15px 26px 24px; border-top: 1px solid #ffffff20; }
.mobile-nav a { display: block; padding: 13px 0; }
.hero { min-height: 650px; height: min(820px, calc(100svh - 130px)); position: relative; background: #12222a; color: white; display: flex; align-items: center; isolation: isolate; }
.hero-video, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-video { object-fit: cover; object-position: 60% 50%; }
.hero-shade { background: linear-gradient(90deg, rgba(6,12,16,.86) 0%, rgba(7,15,20,.67) 37%, rgba(9,18,24,.07) 74%), linear-gradient(0deg, rgba(7,14,20,.7), transparent 22%, transparent 80%, rgba(5,11,16,.45)); }
.hero-content { padding-top: 63px; padding-bottom: 70px; }
.hero-content .eyebrow { color: #d7e4eb; }
.hero h1 { font-size: 72px; line-height: 1.08; font-weight: 550; margin-top: 26px; color: white; }
.hero-headline { font-size: 36px; line-height: 1.2; font-weight: 450; margin-top: 20px; max-width: 740px; letter-spacing: 0; color: #f1f7fa; }
.hero-intro { font-size: 19px; font-weight: 500; margin-top: 30px; }
.hero-description { font-size: 15px; line-height: 1.7; margin-top: 9px; color: #e2e9ed; max-width: 355px; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 31px; }
.hero-demo-link { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 12px 0; }
.hero-demo-link svg { width: 16px; }
.hero-demo-link:hover { color: var(--accent); }
.hero-bottom { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; align-items: center; gap: 28px; min-height: 40px; font-size: 11px; color: #dfe6ea; }
.hero-platforms { margin-left: auto; }
.video-toggle { border: 1px solid #ffffff66; color: white; }
.video-toggle:hover { background: #ffffff25; }
html[lang="zh-CN"] .hero-headline { font-size: 34px; line-height: 1.3; }
html[lang="zh-CN"] h2 { line-height: 1.24; }

/* Shared session time stays fixed as each ride moves into its rider's track. */
.process { background: var(--paper); }
.demo { border: 1px solid #343a3f; border-radius: 8px; background: #1b1e21; color: #edf0f2; overflow: hidden; box-shadow: 0 16px 45px #10182010; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 55px; padding: 12px 25px; font-size: 12px; border-bottom: 1px solid #ffffff15; }
.demo-toolbar > span { display: inline-flex; align-items: center; gap: 9px; }
.demo-toolbar svg { width: 15px; height: 15px; color: #aeb7bd; }
.demo-label { font-size: 9px; color: #a4afb7; }
.demo-local { font-size: 10px; color: #bcc6cd; }
.demo-workspace { display: grid; grid-template-columns: 1.55fr 1fr; min-height: 285px; }
.demo-footage { position: relative; margin: 23px 0 23px 23px; overflow: hidden; border-radius: 3px; }
.demo-footage img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.footage-caption { display: flex; align-items: center; gap: 9px; position: absolute; bottom: 13px; left: 13px; background: #101820c9; padding: 5px 9px; border-radius: 3px; font-size: 10px; }
.footage-caption svg { width: 13px; height: 13px; }
.demo-control { padding: 45px 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.demo-control .eyebrow { color: #adb9c1; font-size: 9px; }
.demo-control h3 { margin-top: 13px; font-size: 26px; line-height: 1.3; min-height: 68px; max-width: 280px; text-wrap: balance; }
.demo-control .button { margin-top: 20px; width: 100%; max-width: 230px; min-height: 44px; font-size: 12px; }
.demo-control .button svg { width: 17px; height: 17px; }
.demo-progress { height: 2px; width: 100%; max-width: 230px; background: #ffffff1f; margin-top: 16px; overflow: hidden; }
.demo-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.3s linear; }
.demo[data-state="scanning"] .demo-progress span { transform: scaleX(.5); }
.demo[data-state="detected"] .demo-progress span { transform: scaleX(.87); }
.demo[data-state="sorted"] .demo-progress span { transform: scaleX(1); transition-duration: .35s; }
.demo[data-state="idle"] .demo-progress span { transition: none; }
.demo-timeline { padding: 14px 25px 0; border-top: 1px solid #ffffff15; background: #15181b; }
.timeline-ruler { margin-left: 92px; display: flex; justify-content: space-between; color: #89969f; font-size: 8px; font-family: ui-monospace, monospace; padding-bottom: 12px; }
.timeline-body { display: grid; grid-template-columns: 92px 1fr; }
.track-labels { display: grid; grid-template-rows: repeat(4, 39px); font-size: 9px; color: #a4b1ba; }
.track-labels > span { display: flex; align-items: center; gap: 8px; }
.track-labels > span:first-child { color: #aab6bf; font-size: 8px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.rider-a { background: var(--a); }
.rider-b { background: var(--b); }
.rider-c { background: var(--c); }
.track-area { position: relative; height: 156px; background: repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 20%); }
.track-line { height: 39px; border-top: 1px solid #ffffff10; }
.track-line:last-of-type { border-bottom: 1px solid #ffffff10; }
.raw-recording { position: absolute; height: 25px; top: 7px; left: 0; width: 100%; background: #4b535a; border: 1px solid #74808a; border-radius: 3px; opacity: 1; transition: opacity .6s; }
.demo-clip { position: absolute; left: var(--start); width: var(--size); top: 7px; height: 25px; border: 1px solid #ffffff24; border-radius: 3px; background: #6a7680; opacity: 0; transform: translateY(0); transition: transform .8s var(--ease), background .4s, opacity .4s; transition-delay: var(--delay); overflow: hidden; }
.demo-clip:nth-of-type(1) { --start: 0%; --size: 9%; --row: 1; --delay: 0ms; }
.demo-clip:nth-of-type(2) { --start: 9%; --size: 23%; --row: 2; --delay: 35ms; }
.demo-clip:nth-of-type(3) { --start: 32%; --size: 11%; --row: 3; --delay: 70ms; }
.demo-clip:nth-of-type(4) { --start: 44%; --size: 10%; --row: 1; --delay: 105ms; }
.demo-clip:nth-of-type(5) { --start: 54%; --size: 16%; --row: 2; --delay: 140ms; }
.demo-clip:nth-of-type(6) { --start: 70%; --size: 2.5%; --row: 3; --delay: 175ms; }
.demo-clip:nth-of-type(7) { --start: 74%; --size: 10%; --row: 1; --delay: 210ms; }
.demo-clip:nth-of-type(8) { --start: 85%; --size: 7%; --row: 2; --delay: 245ms; }
.demo-clip:nth-of-type(9) { --start: 92%; --size: 8%; --row: 3; --delay: 280ms; }
.demo-clip b { display: block; font-size: 8px; line-height: 25px; padding-left: 7px; font-weight: 500; color: #142028; }
.demo[data-state="scanning"] .demo-clip { opacity: .45; }
.demo[data-state="detected"] .demo-clip, .demo[data-state="sorted"] .demo-clip { opacity: 1; }
.demo[data-state="detected"] .demo-clip[data-rider="a"], .demo[data-state="sorted"] .demo-clip[data-rider="a"] { background: var(--a); }
.demo[data-state="detected"] .demo-clip[data-rider="b"], .demo[data-state="sorted"] .demo-clip[data-rider="b"] { background: var(--b); }
.demo[data-state="detected"] .demo-clip[data-rider="c"], .demo[data-state="sorted"] .demo-clip[data-rider="c"] { background: var(--c); }
.demo[data-state="detected"] .raw-recording { opacity: .2; }
.demo[data-state="sorted"] .raw-recording { opacity: .08; }
.demo[data-state="sorted"] .demo-clip { transform: translateY(calc(var(--row) * 39px)); }
.demo[data-state="idle"] .demo-clip { transition: none; }
.scan-playhead { width: 1px; height: 33px; background: var(--accent); position: absolute; top: 3px; left: 0; opacity: 0; }
.demo[data-state="scanning"] .scan-playhead { opacity: 1; animation: scan 1.3s linear forwards; }
@keyframes scan { to { left: 100%; } }
.demo[data-filter="a"] .demo-clip:not([data-rider="a"]), .demo[data-filter="b"] .demo-clip:not([data-rider="b"]), .demo[data-filter="c"] .demo-clip:not([data-rider="c"]) { opacity: .14; }
.demo-timeline-footer { min-height: 60px; display: flex; align-items: center; gap: 16px; justify-content: space-between; border-top: 1px solid #ffffff10; }
.demo-timeline-footer p { color: #a0adb7; font-size: 10px; }
.after-label { display: none; }
.demo[data-state="sorted"] .before-label { display: none; }
.demo[data-state="sorted"] .after-label { display: inline; }
.rider-filters { display: flex; align-items: center; gap: 5px; }
.rider-filters button { display: flex; align-items: center; gap: 7px; min-width: 36px; min-height: 32px; padding: 5px 9px; border: 1px solid transparent; border-radius: 3px; font-size: 10px; color: #a6b3bc; }
.rider-filters button[aria-pressed="true"] { border-color: #697680; color: #eef3f6; background: #ffffff08; }
.rider-filters button:disabled { opacity: .45; }
.demo-note { text-align: right; margin-top: 12px; color: #6b747c; font-size: 10px; }
.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 50px; }
.process-steps li { display: flex; gap: 18px; border-top: 1px solid var(--line); padding-top: 20px; }
.step-index { font-size: 11px; color: #7a838a; padding-top: 3px; }
.process-steps h3 { font-size: 17px; }
.process-steps p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-top: 7px; }
.recording-link { margin-top: 25px; font-size: 13px; color: var(--muted); }
.recording-link .text-link { display: inline; line-height: 1.8; }
.recording-link svg { display: inline; width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; }

.editor { background: #eff3f5; border-top: 1px solid #dce1e4; border-bottom: 1px solid #dce1e4; overflow: hidden; }
.editor-layout { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; gap: 32px 75px; position: relative; min-height: 710px; }
.editor-copy { grid-column: 1; grid-row: 1; align-self: start; padding-top: 22px; }
.editor-copy h2 { margin-top: 24px; font-size: 45px; }
.editor-copy .section-intro { margin-top: 24px; max-width: 405px; }
.editor-tabs { display: inline-flex; align-items: stretch; gap: 25px; border-bottom: 1px solid #cdd6dd; margin-top: 37px; }
.editor-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 0; font-size: 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #626e77; }
.editor-tabs button[aria-selected="true"] { color: #151719; border-color: #151719; }
.editor-tabs button:hover { color: #111719; }
.editor-tabs svg { width: 16px; height: 16px; }
.editor-panel { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none; }
.editor-panel > * { pointer-events: auto; }
.editor-detail { grid-column: 1; grid-row: 2; max-width: 400px; align-self: start; }
.editor-detail h3 { font-size: 22px; line-height: 1.4; }
.editor-detail > p { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 13px; }
.editor-detail ul { display: grid; gap: 12px; margin-top: 23px; }
.editor-detail li { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.editor-detail li svg { width: 16px; height: 16px; color: #456f84; }
.phone-stage { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; flex-direction: column; align-items: center; }
.phone-device { position: relative; width: 320px; max-width: 100%; aspect-ratio: 1380 / 2880; filter: drop-shadow(0 18px 18px #10182018); }
.phone-bezel { display: block; width: 100%; height: 100%; }
/* Screen bounds and continuous corners sampled from the original Apple bezel. */
.phone-screen {
  position: absolute; top: 2.5%; left: 4.347826%; width: 91.304348%; height: 95%; object-fit: cover; background: #1c1c1e;
  clip-path: polygon(
    18.57143% 0%,81.42857% 0%,84.84127% .03655%,85.79365% .0731%,87.06349% .1462%,88.80952% .2924%,90% .4386%,90.87302% .5848%,91.66667% .73099%,92.93651% 1.02339%,94.12698% 1.38889%,95.07937% 1.75439%,95.95238% 2.11988%,96.5873% 2.48538%,97.22222% 2.85088%,97.69841% 3.21637%,98.49206% 3.94737%,99.12698% 4.67836%,99.52381% 5.40936%,99.7619% 6.14035%,99.92063% 6.87135%,100% 7.60234%,
    100% 92.39766%,99.92063% 93.12865%,99.7619% 93.85965%,99.52381% 94.59064%,99.12698% 95.32164%,98.49206% 96.05263%,97.69841% 96.78363%,97.22222% 97.14912%,96.5873% 97.51462%,95.95238% 97.88012%,95.07937% 98.24561%,94.12698% 98.61111%,92.93651% 98.97661%,91.66667% 99.26901%,90.87302% 99.4152%,90% 99.5614%,88.80952% 99.7076%,87.06349% 99.8538%,85.79365% 99.9269%,84.84127% 99.96345%,81.42857% 100%,
    18.57143% 100%,15.15873% 99.96345%,14.20635% 99.9269%,12.93651% 99.8538%,11.19048% 99.7076%,10% 99.5614%,9.12698% 99.4152%,8.33333% 99.26901%,7.06349% 98.97661%,5.87302% 98.61111%,4.92063% 98.24561%,4.04762% 97.88012%,3.4127% 97.51462%,2.77778% 97.14912%,2.30159% 96.78363%,1.50794% 96.05263%,.87302% 95.32164%,.47619% 94.59064%,.2381% 93.85965%,.07937% 93.12865%,0% 92.39766%,
    0% 7.60234%,.07937% 6.87135%,.2381% 6.14035%,.47619% 5.40936%,.87302% 4.67836%,1.50794% 3.94737%,2.30159% 3.21637%,2.77778% 2.85088%,3.4127% 2.48538%,4.04762% 2.11988%,4.92063% 1.75439%,5.87302% 1.38889%,7.06349% 1.02339%,8.33333% .73099%,9.12698% .5848%,10% .4386%,11.19048% .2924%,12.93651% .1462%,14.20635% .0731%,15.15873% .03655%
  );
}
.phone-stage figcaption { font-size: 10px; color: #78828a; margin-top: 20px; }
.editor-panel:not([hidden]) .editor-detail { animation: panel-in .32s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.platforms { padding-bottom: 84px; }
.platforms .section-heading { grid-template-columns: 1.4fr 1fr; }
.platforms h2 { font-size: 44px; }
.workspace-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 12px; }
.workspace-toolbar > span { display: inline-flex; align-items: center; gap: 9px; }
.workspace-toolbar svg { width: 16px; height: 16px; flex-shrink: 0; color: #536672; }
.workspace-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
.workspace-tabs button { min-height: 40px; border-bottom: 2px solid transparent; color: var(--muted); }
.workspace-tabs button[aria-selected="true"] { border-color: #151719; color: #151719; }
.workspace-panels { aspect-ratio: 2304 / 1445; }
.mac-stage { width: 100%; height: 100%; background: #202427; border: 1px solid #dce1e4; border-radius: 7px; overflow: hidden; box-shadow: 0 16px 38px #10182012; }
.mac-stage img { width: 100%; height: 100%; object-fit: contain; }
.platform-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 37px; }
.platform-list > div { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: center; }
.platform-list svg { color: #536672; }
.platform-list h3 { font-size: 18px; }
.platform-list p { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 6px; }
.privacy-band { background: #181c1f; color: #f4f6f8; padding: 76px 0; }
.privacy-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; }
.privacy-layout > div > svg { width: 27px; height: 27px; margin-bottom: 24px; color: var(--accent); }
.privacy-layout h2 { font-size: 38px; }
.privacy-layout p { font-size: 16px; color: #ced8df; max-width: 390px; }
.privacy-layout ul { display: grid; gap: 12px; margin-top: 22px; font-size: 12px; color: #cdd9e1; }
.privacy-layout li { display: flex; gap: 10px; align-items: center; }
.privacy-layout li svg { width: 16px; height: 16px; color: var(--accent); }
.privacy-layout .text-link { margin-top: 27px; font-size: 12px; border-color: #83949f; }
.privacy-layout .text-link svg { width: 15px; height: 15px; }
.closing { padding: 91px 0; background: #eaf1f5; }
.closing-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 100px; }
.closing h2 { font-size: 57px; margin-top: 23px; }
.closing-layout > div:last-child { justify-self: start; }
.closing img { width: 57px; height: 57px; border-radius: 12px; }
.closing p:not(.eyebrow) { font-size: 13px; color: #62686c; margin-top: 18px; margin-bottom: 22px; }
.site-footer { padding-block: 32px; display: flex; gap: 30px; align-items: center; min-height: 100px; }
.site-footer .brand { font-size: 15px; }
.site-footer p { font-size: 10px; color: #737c84; }
.site-footer nav { display: flex; gap: 26px; margin-left: auto; font-size: 11px; color: #56616a; }
.site-footer nav a:hover { color: #111; }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (min-width: 1600px) {
  .hero { height: min(820px, calc(100svh - 130px)); }
  .hero-content { width: min(1320px, calc(100% - 120px)); }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .header-inner { width: calc(100% - 56px); gap: 22px; }
  .desktop-nav { gap: 18px; font-size: 12px; }
  .header-actions { gap: 17px; }
  .section-heading, .privacy-layout, .closing-layout { gap: 45px; }
  h2 { font-size: 42px; }
  .demo-control { padding: 28px; }
  .demo-control h3 { font-size: 23px; }
  .editor-layout { column-gap: 25px; }
  .editor-copy h2 { font-size: 38px; }
  .editor-copy .section-intro { font-size: 15px; }
  .phone-device { width: 300px; }
  .platforms h2 { font-size: 38px; }
  .closing h2 { font-size: 50px; }
}
@media (max-width: 820px) {
  .wrap { width: calc(100% - 48px); }
  .header-inner { width: calc(100% - 40px); height: 68px; }
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; gap: 15px; }
  .menu-toggle { display: inline-flex; }
  .hero { min-height: 650px; }
  .hero h1 { font-size: 66px; }
  .hero-headline { font-size: 34px; }
  html[lang="zh-CN"] .hero-headline { font-size: 32px; }
  .hero-shade { background: linear-gradient(90deg, #071016d6, #0b1c2755), linear-gradient(0deg, #07101670, transparent 50%); }
  .section { padding: 80px 0; }
  .section-heading { gap: 35px; margin-bottom: 36px; grid-template-columns: 1fr 1fr; }
  h2 { font-size: 36px; }
  .section-intro { font-size: 15px; }
  .demo-toolbar { padding-inline: 18px; }
  .demo-label { display: none; }
  .demo-workspace { grid-template-columns: 1.2fr 1fr; min-height: 230px; }
  .demo-footage { margin: 18px 0 18px 18px; }
  .demo-control { padding: 25px 20px; }
  .demo-control h3 { font-size: 21px; min-height: 58px; }
  .demo-control .button { font-size: 11px; padding-inline: 10px; }
  .process-steps { gap: 22px; margin-top: 33px; }
  .process-steps li { gap: 12px; }
  .process-steps h3 { font-size: 15px; }
  .process-steps p { font-size: 12px; }
  .editor-layout { min-height: 690px; column-gap: 28px; }
  .editor-copy h2 { font-size: 33px; }
  .editor-copy .section-intro { font-size: 14px; }
  .editor-tabs { gap: 18px; margin-top: 24px; }
  .editor-tabs button { font-size: 11px; gap: 6px; }
  .editor-detail h3 { font-size: 20px; }
  .editor-detail p { font-size: 13px; }
  .phone-device { width: 285px; }
  .platforms .section-heading { grid-template-columns: 1.3fr 1fr; }
  .platforms h2 { font-size: 33px; }
  .mac-stage { padding: 0; }
  .platform-list { gap: 25px; }
  .privacy-layout h2 { font-size: 33px; }
  .closing h2 { font-size: 43px; }
  .site-footer { flex-wrap: wrap; gap: 17px 28px; }
  .site-footer nav { gap: 19px; }
}
@media (max-width: 600px) {
  :root { scroll-padding-top: 25px; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { width: calc(100% - 32px); gap: 10px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 10px; }
  .header-download { display: none; }
  .language-link { font-size: 11px; }
  .hero { height: calc(100svh - 112px); min-height: 620px; max-height: 820px; }
  .hero-video { object-position: 58% 50%; }
  .hero-content { padding-top: 75px; padding-bottom: 85px; }
  .hero-content .eyebrow { font-size: 9px; }
  .hero h1 { margin-top: 30px; font-size: 46px; }
  .hero-headline { font-size: 28px; line-height: 1.2; margin-top: 18px; }
  html[lang="zh-CN"] .hero-headline { font-size: 27px; line-height: 1.32; }
  .hero-intro { font-size: 15px; margin-top: 26px; max-width: 300px; }
  .hero-description { font-size: 13px; max-width: 275px; margin-top: 10px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 24px; }
  .hero-actions .button { min-height: 48px; font-size: 12px; padding: 12px 17px; }
  .hero-demo-link { font-size: 12px; }
  .hero-bottom { bottom: 17px; font-size: 9px; gap: 15px; }
  .hero-platforms { margin-left: auto; font-size: 8px; }
  .video-toggle { width: 34px; height: 34px; }
  .video-toggle svg { width: 15px; height: 15px; }
  .section { padding: 62px 0; }
  .eyebrow { font-size: 9px; }
  h2, .platforms h2 { font-size: 33px; }
  .section-heading, .platforms .section-heading { grid-template-columns: 1fr; gap: 23px; }
  .section-heading h2 { margin-top: 18px; }
  .section-intro { font-size: 14px; line-height: 1.8; }
  .demo-toolbar { min-height: 48px; padding: 10px 13px; font-size: 10px; }
  .demo-local { font-size: 8px; gap: 5px !important; }
  .demo-local svg { width: 12px; height: 12px; }
  .demo-workspace { display: block; }
  .demo-footage { margin: 12px; height: 165px; }
  .demo-control { padding: 11px 17px 22px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; }
  .demo-control .eyebrow { grid-column: 1; font-size: 8px; }
  .demo-control h3 { font-size: 17px; min-height: 66px; max-width: 185px; grid-column: 1; margin-top: 0; }
  .demo-control .button { grid-column: 2; grid-row: 1 / 3; width: 118px; margin: 0; padding: 10px 12px; gap: 7px; font-size: 10px; align-self: center; }
  .demo-control .button svg { width: 14px; height: 14px; }
  .demo-progress { grid-column: 1 / -1; max-width: none; margin-top: 0; }
  .demo-timeline { padding: 11px 12px 0; }
  .timeline-body { grid-template-columns: 64px 1fr; }
  .timeline-ruler { margin-left: 64px; font-size: 7px; }
  .track-labels { font-size: 8px; }
  .track-labels > span { gap: 5px; }
  .track-labels > span:first-child { font-size: 7px; }
  .demo-clip b { font-size: 7px; padding-left: 3px; }
  .demo-clip:nth-of-type(6) b { visibility: hidden; }
  .demo-timeline-footer { flex-direction: column; align-items: flex-start; gap: 5px; padding-block: 11px; }
  .demo-timeline-footer p { font-size: 9px; }
  .rider-filters { align-self: flex-end; }
  .rider-filters button { min-height: 35px; font-size: 10px; }
  .demo-note { text-align: left; font-size: 9px; line-height: 1.6; max-width: 300px; }
  .process-steps { grid-template-columns: 1fr; gap: 19px; margin-top: 29px; }
  .process-steps li { gap: 20px; padding-top: 16px; }
  .process-steps p { margin-top: 3px; }
  .editor-layout { display: block; min-height: 0; }
  .editor-copy { padding-top: 0; }
  .editor-copy h2 { font-size: 32px; margin-top: 18px; }
  .editor-copy .section-intro { margin-top: 20px; }
  .editor-tabs { display: flex; width: 100%; gap: 25px; margin-top: 26px; }
  .editor-tabs button { font-size: 12px; padding-block: 15px; }
  .editor-panel { display: flex; flex-direction: column; }
  .editor-detail { margin-top: 26px; min-height: 222px; }
  .editor-detail h3 { font-size: 21px; }
  .editor-detail ul { gap: 10px; margin-top: 17px; }
  .phone-stage { width: 100%; margin-top: 28px; }
  .phone-device { width: 275px; }
  .phone-stage figcaption { margin-top: 16px; }
  .workspace-toolbar { gap: 12px; font-size: 10px; }
  .workspace-tabs { gap: 16px; font-size: 11px; }
  .workspace-panels { width: calc(100% + 16px); margin-left: -8px; }
  .platform-list { grid-template-columns: 1fr; gap: 23px; margin-top: 30px; }
  .platform-list > div { padding-top: 18px; border-top: 1px solid var(--line); }
  .platform-list p { font-size: 12px; margin-top: 3px; }
  .privacy-band { padding: 58px 0; }
  .privacy-layout { grid-template-columns: 1fr; gap: 28px; }
  .privacy-layout h2 { font-size: 34px; }
  .privacy-layout > div > svg { margin-bottom: 19px; }
  .privacy-layout p { font-size: 14px; }
  .closing { padding: 61px 0; }
  .closing-layout { grid-template-columns: 1fr; gap: 33px; }
  .closing h2 { font-size: 43px; margin-top: 19px; }
  .closing img { display: none; }
  .closing p:not(.eyebrow) { font-size: 12px; margin-top: 0; }
  .closing .button { font-size: 12px; }
  .site-footer { gap: 14px; padding-block: 28px; }
  .site-footer p { margin-left: auto; font-size: 9px; }
  .site-footer nav { flex-basis: 100%; margin-left: 0; gap: 25px; font-size: 11px; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 39px; }
  .hero-headline { font-size: 26px; }
  html[lang="zh-CN"] .hero-headline { font-size: 25px; }
  h2, .editor-copy h2, .platforms h2 { font-size: 29px; }
  .demo-control { padding-inline: 13px; gap: 8px; }
  .demo-control h3 { font-size: 15px; }
  .demo-control .button { width: 104px; padding-inline: 8px; }
  .hero-platforms { display: none; }
  .video-toggle { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}