/* Store campaign: original App Store photography, unchanged app screenshots.
   Device geometry stays in styles.css; all three demos keep one shared clock. */
.page-overview { --orange: #ff8833; }
.edition-home {
  --orange: #ff8833;
  --ink: #f7f7f8;
  --muted: #aeb3b9;
  --muted-2: #999fa6;
  --line: #ffffff1f;
  background: #090d10;
  color: var(--ink);
  color-scheme: dark;
}
.edition-home .edition-wrap { width: min(1200px, calc(100% - 96px)); }
.edition-home h1, .edition-home h2 { font-weight: 750; letter-spacing: -.055em; }
.edition-home h1 { font-size: clamp(64px, 7.1vw, 102px); line-height: .99; }
.edition-home h2 { line-height: 1.05; }
.edition-home .store-accent, .edition-home .video-heading h2 span { color: var(--orange); }
.edition-home .edition-label { color: #b2b8be; letter-spacing: .13em; font-weight: 600; }
.edition-home .text-link, .edition-home .video-link { color: var(--orange); }
.edition-home .text-link:hover, .edition-home .video-link:hover { color: #ffb279; }
.edition-home .edition-hero { background: #090d10; overflow: hidden; }
.edition-home .hero-atmosphere { opacity: 1; }
.edition-home .store-hero-background {
  position: absolute; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%; opacity: .92;
}
.edition-home .hero-atmosphere::after {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 1; filter: none; transform: none; animation: none;
  background: linear-gradient(90deg, #090d10b8 0%, #090d10a3 27%, #090d1033 60%, #090d100d),
    linear-gradient(0deg, #090d10 0%, #090d1022 30%, transparent 65%, #090d1044 100%);
}
.edition-home .edition-hero-grid {
  grid-template-columns: .95fr 1.05fr; gap: 48px;
  min-height: 790px; padding-block: 70px 58px; align-items: center;
}
.edition-home .edition-hero.hero-demo-ready .edition-hero-grid { padding-bottom: 58px; }
.edition-home .edition-hero-copy { padding-bottom: 50px; }
.edition-home .edition-intro { color: #c2c6cb; font-size: 20px; line-height: 1.6; max-width: 500px; }
.edition-home .edition-hero-copy .actions { gap: 20px; flex-wrap: wrap; }
.edition-home .edition-free { color: #d9dde1; }
.edition-home .edition-free span { color: #a6adb5; }
/* Extra space beneath the phones keeps the watch inside the stage. */
.edition-home .edition-product-dual { aspect-ratio: 535 / 625; width: 100%; max-width: 570px; }
/* Keep animated image/SVG groups unfiltered: composited shadows can expose
   rectangular layer edges over the hero photograph. */
.edition-home .edition-product-dual > .hero-phone { width: 44%; filter: none; }
.edition-home .edition-hero-sprint { left: 0; top: 0; }
.edition-home .edition-product-dual > .edition-hero-race { left: 53%; top: 5%; }
.edition-home .edition-hero-watch { width: 26%; left: 36%; bottom: 6%; filter: none; }
.edition-home .hero-demo-control {
  left: 49%; bottom: 0; min-height: 44px; padding: 10px 17px;
  color: #e7e9ec; background: #11191de6; border-color: #ffffff30;
  backdrop-filter: blur(12px); font-size: 12px;
}
.edition-home .hero-demo-control:hover { color: #ffab6e; background: #20272d; }
.edition-home .edition-basis { padding: 28px 0 64px; background: #090d10; border: 0; }
.edition-home .edition-foundation { display: grid; grid-template-columns: 1fr; gap: 12px; }
.edition-home .edition-foundation > p { font-size: 23px; }
.edition-home .edition-foundation > span { color: #aeb3b9; }
.edition-home .edition-foundation nav {
  grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px; margin-top: 22px;
}
.edition-home .edition-foundation a {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end;
  min-height: 205px; padding: 25px; border: 1px solid #ffffff21; border-radius: 16px;
  color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.035em;
  background-color: #151b20; background-size: cover; background-position: center;
  transition: border-color .2s, transform .2s;
}
.edition-home .edition-foundation a:nth-child(1) { background-image: linear-gradient(0deg,#090d10eb,transparent 95%),url('assets/store/sprint.webp'); }
.edition-home .edition-foundation a:nth-child(2) { background-image: linear-gradient(0deg,#090d10eb,transparent 95%),url('assets/store/race.webp'); }
.edition-home .edition-foundation a:nth-child(3) { background-image: linear-gradient(0deg,#090d10eb,transparent 95%),url('assets/store/video.webp'); }
.edition-home .edition-foundation a span { color: #ff9b55; font-size: 24px; font-weight: 400; }
.edition-home .edition-foundation a:hover { border-color: #ff883399; transform: translateY(-3px); }
.edition-home .edition-section { padding-block: 100px; border-top: 1px solid #ffffff14; }
.edition-home .edition-sprint, .edition-home .edition-explore, .edition-home .edition-buy { background: #090d10; }
.edition-home .edition-race { background: #0d1216; }
.edition-home .edition-mode-copy { column-gap: 80px; margin-bottom: 50px; }
.edition-home .edition-mode-lede, .edition-home .edition-ai p,
.edition-home .edition-explore .edition-heading > p:last-child { color: #b6bcc3; }
.edition-home .edition-scope, .edition-home .edition-price-note { color: #9fa7b0; }
.edition-home .edition-related { color: #bcc2c9; border-color: #ffffff24; }
.edition-home .edition-related a:hover { color: var(--orange); }
.edition-home .edition-screen,
.edition-home .edition-sprint .edition-screen {
  background: linear-gradient(180deg,#171c21 0%,#10161a 25%,#10161a70 57%,#0c1115 100%),url('assets/store/sprint.webp') center 65% / auto 72% no-repeat;
  border: 1px solid #ffffff17; border-radius: 20px; padding-top: 30px;
}
.edition-home .edition-race .edition-screen {
  background: linear-gradient(180deg,#171c21 0%,#10161a 25%,#10161a70 57%,#0c1115 100%),url('assets/store/race.webp') center 65% / auto 72% no-repeat;
}
.edition-home .edition-screen figcaption strong { color: #f5f7f9; font-size: 24px; }
.edition-home .edition-screen-number { color: #ff9b55; }
.edition-home .edition-screen figcaption > span:last-child, .edition-home .edition-screen > p { color: #aeb6bf; }
.edition-home .edition-screen img { filter: drop-shadow(0 18px 20px #0008); }
.edition-home .edition-gallery-controls, .edition-home .edition-gallery-controls span { color: #aeb6bf; }
.edition-home .edition-gallery-controls button { background: #171e24; color: #f5f7f9; border-color: #ffffff26; }
.edition-home .edition-gallery-controls button:disabled { opacity: .35; }
.edition-home .video-feature { background: #090d10; }
.edition-home .video-new { color: #ffab6e; background: #ff88331a; border-color: #ff883355; }
.edition-home .edition-preview-grid > a { background: #141a20; border: 1px solid #ffffff17; }
.edition-home .edition-preview-grid > a:hover { background: #1c242c; }
.edition-home .edition-preview-grid p { color: #aeb6bf; }
.edition-home .edition-preview-grid > a > span { color: #ff9b55; }
.edition-home .edition-science { background: #10171c; }
.edition-home .edition-reading > a { border-color: #ffffff24; }
.edition-home .edition-reading > a span:last-child, .edition-home .edition-reading > a:hover { color: #ff9b55; }
.edition-home .edition-plans { align-items: stretch; }
.edition-home .edition-plans article { background: #141a20; border: 1px solid #ffffff1f; padding: 32px; }
.edition-home .edition-plans article + article { background: linear-gradient(140deg,#261d17,#141a20 65%); border-color: #ff883366; }
.edition-home .edition-plans article > p:not(.edition-label), .edition-home .edition-plan-list li { color: #b8bfc6; }
.edition-home .edition-plans article > p.edition-once { color: #f0f2f4; }
.edition-home .edition-plan-list li::before { color: #ff9b55; }
@media (min-width: 761px) and (max-width: 1100px) {
  .edition-home .edition-wrap { width: calc(100% - 64px); }
  .edition-home .edition-hero-grid { gap: 28px; min-height: 680px; }
  .edition-home h1 { font-size: clamp(58px,7.8vw,78px); }
  .edition-home .edition-intro { font-size: 18px; }
  .edition-home .edition-mode-copy { column-gap: 40px; }
  .edition-home .edition-foundation a { min-height: 180px; padding: 20px; }
}
@media (max-width: 760px) {
  .edition-home .edition-wrap { width: calc(100% - 40px); }
  .edition-home .edition-hero-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 46px 34px; min-height: 0; }
  .edition-home .edition-hero.hero-demo-ready .edition-hero-grid { padding-bottom: 34px; }
  .edition-home .edition-hero-copy { padding: 0; }
  .edition-home h1 { font-size: clamp(52px,13vw,76px); margin-bottom: 22px; }
  .edition-home .edition-intro { font-size: 17px; max-width: 510px; margin-inline: auto; }
  .edition-home .edition-hero-copy .actions { gap: 12px; }
  .edition-home .edition-hero-copy .edition-label { margin-bottom: 18px; }
  .edition-home .edition-product-dual { width: min(100%,430px); }
  .edition-home .store-hero-background { object-position: 60% 100%; }
  .edition-home .hero-atmosphere::after {
    background: linear-gradient(180deg,#090d10 0%,#090d10ed 25%,#090d1022 62%,#090d10 100%);
  }
  .edition-home .edition-basis { padding: 20px 0 50px; }
  .edition-home .edition-foundation > span { max-width: 360px; }
  .edition-home .edition-foundation nav { gap: 10px; margin-top: 16px; }
  .edition-home .edition-foundation a { min-height: 130px; padding: 13px 10px; font-size: 19px; border-radius: 12px; }
  .edition-home .edition-foundation a span { font-size: 17px; margin-left: 4px; }
  .edition-home .edition-section { padding-block: 64px; }
  .edition-home .edition-mode-copy { margin-bottom: 34px; }
  .edition-home .edition-screen figcaption strong { font-size: 22px; }
  .edition-home .edition-plans article { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .edition-home .edition-foundation a { transition: none; }
  .edition-home .edition-foundation a:hover { transform: none; }
}

/* Three chapters: a promise, the app views that explain it, then the next step. */
.edition-home .edition-basis { padding-bottom: 80px; }
.edition-home .edition-foundation > p { font-size: clamp(28px,3.4vw,42px); line-height: 1.15; max-width: 850px; }
.edition-home .edition-foundation nav { margin-top: 28px; }
.edition-home .edition-foundation a { min-height: 290px; align-items: flex-end; gap: 14px; padding: 28px; }
.edition-home .edition-foundation a:nth-child(1) { background-image: linear-gradient(0deg,#090d10 0%,#090d1099 65%,#090d1011),url('assets/store/sprint.webp'); }
.edition-home .edition-foundation a:nth-child(2) { background-image: linear-gradient(0deg,#090d10 0%,#090d1099 65%,#090d1011),url('assets/store/race.webp'); }
.edition-home .edition-foundation a:nth-child(3) { background-image: linear-gradient(0deg,#090d10 0%,#090d1099 65%,#090d1011),url('assets/store/video.webp'); }
.edition-home .edition-foundation a small { display: block; color: #ffab6e; font-size: 12px; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 12px; }
.edition-home .edition-foundation a strong { display: block; font-size: clamp(25px,2.6vw,34px); line-height: 1.12; letter-spacing: -.04em; }
.edition-home .edition-foundation a p { color: #c5cbd0; font-size: 15px; font-weight: 400; letter-spacing: normal; line-height: 1.5; margin: 12px 0 0; }
.edition-home .edition-foundation a > span { flex-shrink: 0; margin: 0; align-self: flex-end; }
.edition-home .story-intro { grid-template-columns: 1.1fr 1fr; column-gap: 70px; align-items: center; }
.edition-home .story-intro > .edition-label { align-self: end; }
.edition-home .story-intro > h2 { grid-row: 2; max-width: 580px; }
.edition-home .story-lede { grid-column: 2; grid-row: 1 / 3; }
.edition-home .story-lede > p { font-size: 21px; line-height: 1.65; color: #bfc5cc; margin: 0 0 26px; }
.edition-home .edition-screen-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #ff883355; border-radius: 50%; background: #ff883312; font-size: 12px; }
.edition-home .story-detail { margin-top: 30px; border-block: 1px solid #ffffff24; }
.edition-home .story-detail > summary { position: relative; list-style: none; padding: 24px 42px 24px 0; cursor: pointer; color: #e4e8ec; font-size: 17px; font-weight: 550; line-height: 1.5; }
.edition-home .story-detail > summary::-webkit-details-marker { display: none; }
.edition-home .story-detail > summary::after { content: '+'; position: absolute; right: 3px; top: 20px; font-size: 25px; color: #ff9b55; font-weight: 400; }
.edition-home .story-detail[open] > summary::after { content: '−'; }
.edition-home .story-detail-body { max-width: 850px; padding: 4px 0 30px; }
.edition-home .story-detail-body .edition-mode-lede { margin-top: 0; font-size: 18px; }
.edition-home .story-detail-body .edition-ai { padding-top: 22px; }
.edition-home .story-detail-body .edition-ai h3 { font-size: 19px; }
.edition-home .story-detail-body .edition-ai p { margin-bottom: 18px; }
.edition-home .story-next { margin-top: 40px; }
.edition-home .story-next a { display: grid; grid-template-columns: 1fr auto 32px; align-items: center; gap: 24px; padding-block: 22px 0; }
.edition-home .story-next span { color: #9da7b1; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.edition-home .story-next strong { font-size: 17px; font-weight: 550; color: #ffab6e; }
.edition-home .story-next b { color: #ffab6e; font-size: 28px; font-weight: 400; text-align: right; }
.edition-home .story-next a:hover strong { color: #ffd0ab; }
.edition-home .story-workflow { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding: 0; margin: 0 0 56px; }
.edition-home .story-workflow li { display: flex; align-items: flex-start; gap: 16px; border-top: 1px solid #ffffff24; padding-top: 23px; }
.edition-home .story-workflow li > span { flex: none; color: #ff9b55; font: 13px ui-monospace,monospace; padding-top: 5px; }
.edition-home .story-workflow h3 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; }
.edition-home .story-workflow p { color: #b6bfc8; font-size: 15px; line-height: 1.6; margin: 0; }
.edition-home .story-video-details { margin-top: 36px; }
.edition-home .story-video-details .story-detail-body { max-width: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .edition-home .edition-foundation a { min-height: 270px; padding: 22px 18px; gap: 8px; }
  .edition-home .story-intro { column-gap: 36px; }
  .edition-home .story-intro h2 { font-size: 48px; }
  .edition-home .story-lede > p { font-size: 18px; }
  .edition-home .story-workflow { gap: 24px; }
  .edition-home .story-workflow li { flex-direction: column; gap: 12px; }
}
@media (max-width: 760px) {
  .edition-home .edition-basis { padding-bottom: 54px; }
  .edition-home .edition-foundation { text-align: start; }
  .edition-home .edition-foundation > span { margin: 0; max-width: none; }
  .edition-home .edition-foundation nav { grid-template-columns: 1fr; gap: 12px; }
  .edition-home .edition-foundation a { min-height: 190px; padding: 24px; background-position: center 55%; }
  .edition-home .edition-foundation a strong { font-size: 29px; }
  .edition-home .edition-foundation a p { font-size: 15px; margin-top: 8px; }
  .edition-home .story-intro { display: block; }
  .edition-home .story-lede > p { font-size: 18px; margin-top: 24px; }
  .edition-home .story-detail > summary { font-size: 16px; padding-block: 21px; }
  .edition-home .story-detail-body .edition-mode-lede { font-size: 17px; }
  .edition-home .story-next { margin-top: 25px; }
  .edition-home .story-next a { grid-template-columns: 1fr 28px; gap: 10px 14px; }
  .edition-home .story-next span { grid-column: 1; }
  .edition-home .story-next strong { grid-column: 1; font-size: 16px; }
  .edition-home .story-next b { grid-column: 2; grid-row: 1 / 3; }
  .edition-home .story-workflow { grid-template-columns: 1fr; gap: 22px; margin-bottom: 45px; }
  .edition-home .story-workflow li { padding-top: 20px; }
  .edition-home .story-workflow h3 { font-size: 21px; margin-bottom: 8px; }
}

/* Shared Store language for discovery, documentation and legal reading. */
body { background: #090d10; --orange: #ff8833; --muted: #b6bec7; --muted-2: #99a4af; --surface: #11181e; --surface-2: #192128; }
:is(.page-methods,.page-faq,.page-features) main, .app-explorer, .video-page {
  --ink: #f5f7f9; --orange: #ff8833; --muted: #b6bec7; --muted-2: #99a4af;
  --line: #ffffff24; --surface: #11181e; --surface-2: #192128;
  color: var(--ink); background: #090d10; color-scheme: dark;
}
.store-accent { color: #ff8833; }
body:not(.page-overview) .page-hero,
body:not(.page-overview) .journey-hero {
  padding-block: 90px 64px;
  background: radial-gradient(ellipse at 85% 5%,#ff883315,transparent 60%),#090d10;
  border-bottom: 1px solid #ffffff14;
}
body:not(.page-overview) .page-hero h1, .video-page .video-heading h1 {
  font-size: clamp(44px,6.1vw,80px); font-weight: 750; letter-spacing: -.05em; line-height: 1.05;
}
body:not(.page-overview) .page-hero .lede { color: #bfc6ce; line-height: 1.65; font-size: 20px; }
body:not(.page-overview) .eyebrow, .video-page .edition-label { color: #b6bfc8; letter-spacing: .12em; }
body:not(.page-overview) .text-link, .video-page .text-link { color: #ff9b55; }
body:not(.page-overview) .journey-hero-race {
  background: linear-gradient(90deg,#090d10 8%,#090d10e6 43%,#090d1066),linear-gradient(0deg,#090d10,transparent),url('assets/store/race.webp') center / cover;
}
body:not(.page-overview) .journey-hero-video {
  background: linear-gradient(90deg,#090d10f2,#090d10a6),linear-gradient(0deg,#090d10,transparent),url('assets/store/video.webp') center / cover;
}
.journey-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 42px; }
.journey-nav a { min-width: 0; padding: 23px 22px; border: 1px solid #ffffff26; border-radius: 16px; background: #151c22d9; display: grid; grid-template-columns: 1fr 20px; gap: 15px 10px; transition: border-color .18s,background .18s; }
.journey-nav a > span { font: 12px ui-monospace,monospace; color: #ff9b55; grid-column: 1 / -1; }
.journey-nav strong { font-size: 18px; font-weight: 600; line-height: 1.35; }
.journey-nav b { align-self: end; font-size: 20px; color: #ff9b55; font-weight: 400; }
.journey-nav a:hover { border-color: #ff883380; background: #202830; }
.journey-tabs { display: flex; gap: 8px 24px; flex-wrap: wrap; }
.journey-tabs a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0; min-height: 44px; }
.journey-tabs span { color: #ff9b55; font: 11px ui-monospace,monospace; }
.journey-tabs strong { font-size: 14px; font-weight: 550; }
.journey-tabs b { display: none; }
.journey-tabs a:hover { color: #ffab6e; }
.journey-chapter-heading { display: flex; align-items: baseline; gap: 22px; }
.journey-chapter-heading > span, .journey-chapter-number { font: 13px ui-monospace,monospace; color: #ff9b55; font-weight: 400; letter-spacing: normal; }
.journey-chapter-number { display: inline-block; margin-inline-end: 16px; }
.journey-chapter-heading h2 { font-size: clamp(32px,4vw,48px); font-weight: 700; letter-spacing: -.04em; margin: 0; }
.journey-end { padding: 70px 0; background: #10171d; border-top: 1px solid #ffffff1f; }
.journey-end > div { display: flex; gap: 40px; justify-content: space-between; align-items: center; }
.journey-end h2 { font-size: clamp(30px,4vw,48px); max-width: 700px; margin: 0; font-weight: 700; letter-spacing: -.04em; }
.journey-end .text-link { flex-shrink: 0; }
/* Discover an ordered set of app views; the same assets also fill the dialog. */
.app-explorer { padding-bottom: 0; }
.app-explorer .page-hero .lede { max-width: 720px; }
.app-explorer-tools { background: #0c1217f2; border-color: #ffffff24; padding-block: 9px 13px; }
.app-explorer-count { color: #9faab6; margin-top: 5px; }
.explorer-chapter { padding-block: 64px 24px; scroll-margin-top: 185px; }
.explorer-chapter + .explorer-chapter { border-top: 1px solid #ffffff1a; }
.explorer-chapter .app-explorer-grid { padding-top: 30px; gap: 42px 25px; }
.app-view-image { background: linear-gradient(145deg,#20272e,#11171c); border: 1px solid #ffffff1f; }
.app-view button:hover .app-view-image { background: #252e37; border-color: #ff883366; }
.app-view-image > span { background: #0b1015d9; color: #ffad70; }
.app-view h3 { font-size: 21px; line-height: 1.2; margin-bottom: 11px; letter-spacing: -.025em; }
.app-view p { color: #aeb8c2; }
.app-view-dialog { background: #11191f; color: #f5f7f9; border: 1px solid #ffffff29; box-shadow: 0 35px 100px #000a; }
.app-view-dialog::backdrop { background: #03080cce; }
.app-view-dialog p { color: #b4bec8; }
.app-view-dialog .text-link, .app-view-dialog .eyebrow { color: #ffab6e; }
.app-view-close { background: #2b353e; color: #fff; }
.app-view-close:hover { background: #414e59; }
.explorer-extras { border-top: 1px solid #ffffff24; }
.explorer-extras p { color: #aeb8c2; }
.explorer-extra-grid article { border-color: #ffffff24; }
/* Measurement overview and explanatory cards. */
.page-methods .narrow { width: min(1080px,calc(100% - 64px)); }
.page-methods .page-hero h1 { max-width: 850px; }
.method-chapter { display: flex; align-items: baseline; gap: 10px; padding-top: 20px; margin-block: 46px 28px; scroll-margin-top: 100px; font-size: clamp(28px,3.6vw,42px); }
.method-mini-grid { gap: 24px; }
.method-explainer { background: #121a21; border: 1px solid #ffffff20; border-radius: 20px; padding: 28px; }
.method-explainer h2 { color: #f1f4f7; }
.method-explainer p { color: #b6c0ca; }
.method-explainer .method-limit { padding: 16px 0 0; border-top: 1px solid #ffffff20; color: #9faab6; }
.method-explainer .sketch-caption { color: #9faab6; }
.method-sketch { color: #37342e; background: #eeebe5; }
.method-sketch p { color: #625e57; }
.method-overview-list { padding-bottom: 70px; }
/* Find a topic, search across the app's reference, then read the full answer. */
.page-faq .narrow { width: min(1080px,calc(100% - 64px)); }
.page-faq .page-hero h1 { max-width: 900px; }
.page-faq .faq-tools { background: #0d141af5; border-color: #ffffff24; }
.faq-search { border-color: #ffffff30; background: #18222b; }
.faq-search::placeholder { color: #9faab6; }
.faq-category-card { color: #f2f5f7; background: #151d24; border-color: #ffffff24; box-shadow: none; }
.faq-category-card:hover { background: #202a33; border-color: #ff883377; box-shadow: none; }
.faq-category-card.is-active { background: #281f18; border-color: #ff8833; box-shadow: inset 0 0 0 1px #ff88331a; }
.faq-category-icon { background: #ff883312; color: #ffab6e; border-color: #ff88333b; box-shadow: none; }
.faq-category-card.is-active .faq-category-icon { background: #ff8833; border-color: #ff8833; color: #17110c; }
.faq-category-summary { color: #aeb9c4; }
.faq-category-count, .faq-category-card.is-active .faq-category-count { color: #bbc5cf; background: #ffffff0f; }
.faq-category-all { background: #1b252e; }
.page-faq .faq-answer { max-width: 860px; color: #bfc8d1; }
.page-faq .faq-item[open] { padding-inline: 24px; border-radius: 16px; background: #121c24; border-color: #ff883355; }
.page-faq .faq-item { transition: background .15s; }
#find-answer, #choose-topic { scroll-margin-top: 80px; }
#read-answer { scroll-margin-top: 200px; }
/* Video moves from capture to design to the final export format. */
.video-page .edition-wrap { width: min(1200px,calc(100% - 96px)); }
.video-page .edition-section { padding-block: 90px; border-bottom: 1px solid #ffffff1a; }
.video-page h2 { font-weight: 720; letter-spacing: -.045em; }
.video-page .video-heading { margin-bottom: 0; }
.video-page .video-heading h1 span { color: #ff8833; }
.video-page .video-workflow, .video-page .video-formats, .video-page .video-notes { background: #090d10; }
.video-page .video-editor, .video-page .video-pro { background: #10171d; }
.video-page .video-steps li, .video-page .video-editor-features article, .video-page .video-format-layout-note { border-color: #ffffff24; }
.video-page .video-steps li > span { color: #ff9b55; }
.video-page .video-steps p, .video-page .video-editor-features p, .video-page .video-notes p,
.video-page .video-body-intro, .video-page .video-format-layout-note p, .video-page .video-pro > div > p:not(.edition-label) { color: #b6c0ca; }
.video-page .video-editor .video-explorer { margin-top: 46px; }
.video-page .video-editor-features { margin-top: 40px; }
.video-page .video-format-examples figcaption strong { color: #f1f4f7; }
.video-page .video-format-examples figcaption p, .video-page .video-format-note { color: #aeb8c2; }
.video-page .video-notes-grid article { border-top: 1px solid #ffffff24; padding-top: 24px; }
.video-page .video-privacy { background: #10171d; }
#workflow, #studio-design, #formats { scroll-margin-top: 85px; }
.journey-details { margin-top: 30px; border-block: 1px solid #ffffff24; }
.journey-details > summary { list-style: none; cursor: pointer; padding: 23px 40px 23px 0; font-size: 18px; position: relative; }
.journey-details > summary::-webkit-details-marker { display: none; }
.journey-details > summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font-size: 28px; color: #ffab6e; }
.journey-details[open] > summary::after { content: '−'; }
.journey-details > :last-child { margin-bottom: 28px; }
/* Policies remain exact text, with a generated outline and quiet reading rhythm. */
:is(.page-privacy,.page-websitePrivacy,.page-imprint) .page-hero { padding-block: 78px 52px; }
body:is(.page-privacy,.page-websitePrivacy,.page-imprint) .page-hero h1 { font-size: clamp(40px,5.3vw,64px); max-width: 950px; }
.privacy-switch a { background: #151d24; border-color: #ffffff24; }
.privacy-switch a[aria-current="page"] { background: #ff883310; border-color: #ff883380; }
.privacy-switch span { color: #aeb8c2; }
.legal-outline { margin-bottom: 48px; background: #141e26; border: 1px solid #ffffff24; border-radius: 18px; }
.legal-outline > summary { cursor: pointer; padding: 24px 28px; color: #ffab6e; font-size: 18px; font-weight: 600; }
.legal-outline nav { padding: 0 28px 28px; }
.legal-outline ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.legal-outline a { display: block; font-size: 13px; line-height: 1.5; color: #bdc7d0; padding-block: 7px; }
.legal-outline a:hover { color: #ffab6e; }
.legal h2 { font-size: clamp(24px,2.8vw,31px); line-height: 1.3; scroll-margin-top: 90px; }
.legal > section { border-top: 1px solid #ffffff24; padding-top: 28px; }
.legal p, .legal li { color: #b9c3cd; line-height: 1.8; }
.legal-card { background: #172129; border: 1px solid #ffffff24; }
:is(.page-privacy,.page-websitePrivacy,.page-imprint) [data-reveal] { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .journey-nav { gap: 12px; }
  .journey-nav a { padding: 20px 16px; }
  .journey-nav strong { font-size: 16px; }
  .journey-end > div { align-items: flex-start; flex-direction: column; gap: 25px; }
}
@media (max-width: 760px) {
  body:not(.page-overview) .page-hero, body:not(.page-overview) .journey-hero { padding-block: 48px 36px; }
  body:not(.page-overview) .page-hero h1, .video-page .video-heading h1 { font-size: clamp(38px,10.5vw,60px); }
  body:not(.page-overview) .page-hero .lede { font-size: 17px; }
  .journey-nav { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .journey-nav a { grid-template-columns: 25px 1fr 20px; align-items: center; min-height: 64px; padding: 17px 18px; gap: 12px; }
  .journey-nav a > span { grid-column: auto; }
  .journey-nav b { align-self: center; }
  .journey-tabs { gap: 0 18px; }
  .journey-tabs strong { font-size: 12px; }
  .journey-tabs span { font-size: 10px; }
  .app-explorer-count { font-size: 11px; }
  .explorer-chapter { padding-top: 40px; scroll-margin-top: 210px; }
  .explorer-chapter .app-explorer-grid { gap: 30px 16px; }
  .app-view h3 { font-size: 18px; }
  .app-view p { font-size: 13px; }
  .journey-chapter-heading { gap: 15px; }
  .journey-chapter-heading h2 { font-size: 30px; }
  .page-methods .narrow, .page-faq .narrow { width: calc(100% - 40px); }
  .method-mini-grid { grid-template-columns: 1fr; gap: 18px; }
  .method-explainer { padding: 23px 20px; }
  .method-chapter { font-size: 28px; margin-top: 30px; }
  .method-chapter .journey-chapter-number { margin-inline-end: 4px; }
  .method-overview-list { padding-bottom: 45px; }
  .page-faq .faq-item[open] { padding-inline: 14px; }
  .page-faq .faq-answer { padding-inline-end: 0; font-size: 16px; }
  .video-page .edition-wrap { width: calc(100% - 40px); }
  .video-page .edition-section { padding-block: 60px; }
  .video-page .video-heading { gap: 28px; }
  .journey-end { padding-block: 50px; }
  .legal-outline > summary { padding: 20px; }
  .legal-outline nav { padding: 0 20px 20px; }
  .legal-outline ol { grid-template-columns: 1fr; gap: 5px; }
  .legal > section { padding-top: 22px; }
}
html[lang="ar"] :is(.journey-nav,.journey-tabs,.journey-chapter-heading,.page-hero,.video-heading) * { letter-spacing: normal; }
@media (prefers-reduced-motion: reduce) { .journey-nav a, .faq-category-card, .faq-item { transition: none; } }

.journey-faq-nav { margin-top: 28px; padding-top: 18px; border-top: 1px solid #ffffff24; }
/* Long translated labels must not set a grid column's minimum width. */
.method-mini-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.method-explainer { min-width: 0; overflow-wrap: anywhere; }
.method-sketch .sample-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
@media (max-width: 760px) { .method-mini-grid { grid-template-columns: minmax(0,1fr); } }

/* Measurement illustrations: readable instruments on the same dark stage as the app. */
.page-methods .method-explainer { background: linear-gradient(145deg,#17212a,#11191f 65%); }
.page-methods .method-sketch {
  position: relative; padding: 22px 18px; color: #c4ced7;
  background: radial-gradient(ellipse at 50% 0,#1d2c36 0,transparent 74%),#0b1218;
  border: 1px solid #8da8bd26; border-radius: 14px;
  box-shadow: inset 0 1px #ffffff05;
}
.page-methods .method-sketch p { color: #aebbc6; }
.page-methods .method-diagram text { fill: #b9c7d2; font-size: 13px; }
.page-methods .diagram-axis { stroke: #73899b; stroke-width: 1.2; }
.page-methods .diagram-guide { stroke: #71889b; stroke-dasharray: 4 5; }
.page-methods .diagram-line { stroke: #ff984c; stroke-width: 3; stroke-linejoin: round; }
.page-methods .diagram-blue { stroke: #6bcbe3; }
.page-methods .method-diagram [fill="#a55b18"] { fill: #ff984c; }
.page-methods .method-diagram [fill="#437a85"] { fill: #6bcbe3; }
.page-methods .method-diagram .braking-phase-label { fill: #ffc496; }
.page-methods .plot-grid { stroke: #92b3ca13; stroke-width: 1; fill: none; }
.page-methods .plot-sample { fill: #6bcbe3; stroke: #0b1218; stroke-width: 2; }
.page-methods .plot-motion { fill: #6bcbe3; stroke: #0b1218; stroke-width: 1; }
.page-methods .plot-gps { fill: #ff984c; stroke: #0b1218; stroke-width: 2; }
.page-methods .plot-crossing { fill: #0b1218; stroke: #ffad6f; stroke-width: 3; }
.page-methods .plot-halo { fill: #ff984c18; stroke: #ff984c44; stroke-width: 1; }
.page-methods .plot-projection { fill: none; stroke: #6bcbe34d; stroke-dasharray: 3 5; }
.page-methods .plot-road { fill: none; stroke: #263640; stroke-width: 44; }
.page-methods .plot-road-center { fill: none; stroke: #a4b9c533; stroke-width: 1; stroke-dasharray: 6 8; }
.page-methods .plot-finish { fill: none; stroke: #ff984c; stroke-width: 4; }
.page-methods .plot-difference { fill: none; stroke: #edf3f7; stroke-width: 1.4; stroke-linecap: round; }
.page-methods .plot-car { fill: #20333f; stroke: #c0d6e4; stroke-width: 1.7; stroke-linejoin: round; }
.page-methods .plot-window { fill: none; stroke: #75a6bf; stroke-width: 1.3; }
.page-methods .plot-tyres { fill: none; stroke: #e5edf2; stroke-width: 4; stroke-linecap: round; }
.page-methods .plot-key { display: flex; gap: 9px; align-items: center; font-size: 12px; line-height: 1.45; }
.page-methods .plot-key::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--key-color); }
.page-methods .key-gps, .page-methods .key-accelerate { --key-color: #ff984c; }
.page-methods .key-motion, .page-methods .key-brake { --key-color: #6bcbe3; }
.page-methods .key-neutral { --key-color: #b8c2cc; }
.page-methods .fusion-sketch .sample-row { margin: 8px 0; }
.page-methods .sketch-result { border-color: #8da8bd26; color: #edf3f7; font-size: 14px; margin-top: 16px; padding-top: 14px; }
.page-methods .method-flow { gap: 8px; font-size: 12px; align-items: start; }
.page-methods .method-flow span { padding: 10px 4px; color: #b5d9e3; }
.page-methods .method-flow span + span::before { content: none; }
.page-methods .method-flow span:nth-child(2) { border: 1px solid #ff984c55; background: #ff984c0d; color: #ffbb88; border-radius: 8px; }
.page-methods .ideal-example { gap: 8px; font-size: 13px; }
.page-methods .ideal-example > b { color: #95a9b8; font-size: 11px; letter-spacing: .08em; padding-bottom: 6px; }
.page-methods .ideal-example > strong { text-align: start; color: #c4d0d9; font-weight: 500; font-size: 12px; }
.page-methods .ideal-example span { padding: 14px 3px; background: #19242d; color: #94a5b2; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.page-methods .ideal-example .sector-selected { color: #ffc294; border-color: #ff984c77; background: #ff984c10; font-weight: 650; }
.page-methods .ideal-example .sector-total { color: #ffc294; background: #ff984c20; font-weight: 650; }
.page-methods .track-brake { stroke: #6bcbe3; }
.page-methods .track-neutral { stroke: #b8c2cc; }
.page-methods .track-accelerate { stroke: #ff984c; }
.page-methods .track-supports { stroke: #748b9b; }
.page-methods .track-shadow { stroke: #000; opacity: .5; }
.page-methods .height-arrow { stroke: #8ba5b8; }
.page-methods .plot-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; padding-top: 10px; }
.page-methods .quality-steps { display: grid; gap: 28px; list-style: none; counter-reset: quality-step; padding: 0; margin: 12px 0; }
.page-methods .quality-steps li { position: relative; display: flex; gap: 16px; align-items: center; background: #17242e; border: 1px solid #8da8bd30; border-radius: 10px; padding: 18px 16px; font-size: 13px; line-height: 1.5; }
.page-methods .quality-steps li::before { counter-increment: quality-step; content: counter(quality-step,decimal-leading-zero); color: #ffaf74; font-size: 11px; font-variant-numeric: tabular-nums; }
.page-methods .quality-steps li + li::after { content: '↓'; position: absolute; left: 50%; top: -26px; color: #7792a6; }
.page-methods .quality-readings { display: grid; gap: 2px; }
.page-methods .quality-reading { display: flex; gap: 13px; align-items: center; padding: 13px 8px; }
.page-methods .quality-reading + .quality-reading { border-top: 1px solid #8da8bd20; }
.page-methods .quality-reading i { flex: 0 0 10px; height: 10px; background: var(--quality-color); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb,var(--quality-color) 10%,transparent); }
.page-methods .quality-reading strong { display: block; font-size: 13px; line-height: 1.5; color: #e3ecf3; font-weight: 600; }
.page-methods .quality-reading span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #a0b1bf; }
.page-methods .quality-good { --quality-color: #64d394; }
.page-methods .quality-limited { --quality-color: #e2c15a; }
.page-methods .quality-fusion { --quality-color: #6ab8f0; }
.page-methods .quality-estimate { --quality-color: #e5a657; }
.page-methods .quality-unknown { --quality-color: #99a5ae; }
html[dir="rtl"] .page-methods :is(.quality-readings,.quality-steps,.plot-key) { direction: rtl; }
@media(max-width:760px) {
  .page-methods .narrow { width: calc(100% - 32px); }
  .page-methods .method-explainer { padding: 22px 18px; }
  .page-methods .method-sketch { padding: 18px 10px; }
  .page-methods .method-flow { font-size: 11px; }
  .page-methods .ideal-example { gap: 5px; }
  .page-methods .quality-steps li { padding: 16px 12px; gap: 12px; }
}
/* Input cadence is separate from the reconstructed curve: sensor samples
   must not look like independently measured GPS speeds. */
.page-methods .fusion-inputs { border-bottom: 1px solid #8da8bd26; padding-bottom: 12px; margin-bottom: 14px; }
.page-methods .fusion-inputs .sample-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.page-methods .fusion-inputs .sample-row::before { content: none; }
.page-methods .input-samples { display: block; height: 16px; background-repeat: repeat-x; }
.page-methods .input-gps { background-image: radial-gradient(circle at 5px 8px,#ff984c 0 3px,transparent 3.5px); background-size: 36px 16px; }
.page-methods .input-motion { background-image: radial-gradient(circle at 3px 8px,#6bcbe3 0 1.5px,transparent 2px); background-size: 9px 16px; }

/* All video tiles retain the portrait tile's dimensions, even with a landscape device. */
#views-video .app-view-image { display: grid; place-items: center; }
#views-video .app-view-image::before {
  content: ''; display: block; grid-area: 1 / 1;
  width: min(100%,165px); aspect-ratio: 1470 / 3000;
}
#views-video .app-view-image > .iphone-device { grid-area: 1 / 1; }
#views-video .app-view-landscape .iphone-device { width: 100%; }
.app-view-composite .iphone-landscape { width: 100%; }

/* Every additional feature has a visual; the watch leads into four paired cards. */
.explorer-extras { scroll-margin-top: 185px; }
.explorer-extra-grid { gap: 24px; margin-block: 34px; }
.explorer-extra-grid > article {
  display: flex; flex-direction: column; min-width: 0; padding: 28px;
  border: 1px solid #ffffff20; border-radius: 20px;
  background: linear-gradient(145deg,#17212a,#10171d 70%);
}
.explorer-extra-grid > article > .text-link { margin-top: auto; align-self: flex-start; }
.explorer-extra-grid h3 { margin: 24px 0 0; line-height: 1.25; }
.explorer-extra-grid p { margin-block: 16px 24px; }
.explorer-extra-grid .extra-watch {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 44px; align-items: center; padding: 34px;
}
.extra-watch-copy { min-width: 0; }
.extra-watch-copy h3 { margin-top: 0; }
.explorer-extra-grid .watch-strip { margin: 0; background: transparent; box-shadow: none; padding: 0; justify-items: center; }
.explorer-extra-grid .watch-device { width: 100%; filter: none; }
.extra-visual {
  width: 100%; aspect-ratio: 480 / 230; overflow: hidden; border-radius: 13px;
  background: radial-gradient(ellipse at 50% 40%,#21303a,transparent 75%),#0a1218;
  border: 1px solid #8da8bd22;
}
.extra-visual svg { width: 100%; height: 100%; display: block; }
.extra-ground { fill: #0005; }
.extra-car { fill: #273c49; stroke: #d0e0e9; stroke-width: 2; stroke-linejoin: round; }
.extra-glass { fill: #13222c; stroke: #72a6bd; stroke-width: 1.5; }
.extra-line { stroke: #a5bfce; stroke-width: 2; stroke-linecap: round; }
.extra-wheel { fill: #0b131a; stroke: #a7becd; stroke-width: 2; }
.extra-ring { fill: #263b48; stroke: #ffad72; stroke-width: 2; }
.extra-panel { fill: #17242e; stroke: #8ba9bd66; stroke-width: 1.5; }
.extra-muted { stroke: #7e9aae; stroke-width: 3; stroke-linecap: round; }
.extra-accent { stroke: #ff9e59; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.extra-dot { fill: #ffad72; }
.extra-connector { stroke: #6bcbe3; stroke-width: 1.5; stroke-dasharray: 4 6; }
.extra-file { fill: #182831; stroke: #9bb9c9; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.extra-file > path + path { fill: none; stroke: #ffad72; }
.extra-signal { stroke: #6bcbe3; stroke-width: 2; stroke-linecap: round; }
.extra-phone { fill: #0a1015; stroke: #ffad72; stroke-width: 2; }
.extra-map-grid { stroke: #8da8bd20; stroke-width: 1; }
.extra-route { stroke: #779eb5; stroke-width: 5; stroke-linecap: round; }
.extra-halo { fill: #ff984c1a; stroke: #ff984c66; }
.extra-axis { stroke: #6f8b9e; stroke-width: 1; }
.extra-wave { stroke: #ff984c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media(prefers-reduced-motion:no-preference) {
  .explorer-extra-grid article:is(:hover,:focus-within) .extra-flow { animation: extra-data-flow 2s linear; }
  .explorer-extra-grid article:is(:hover,:focus-within) .extra-wave { animation: extra-wave-draw 1.6s ease-out; }
}
@keyframes extra-data-flow { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes extra-wave-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@media(max-width:760px) {
  .explorer-extra-grid { gap: 18px; }
  .explorer-extra-grid > article { padding: 20px; }
  .explorer-extra-grid .extra-watch { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; }
  .extra-watch-copy { order: 2; }
  .extra-watch .watch-strip { order: 1; }
  .explorer-extra-grid h3 { font-size: 21px; }
}

/* Only neighboring illustrations share a height; stacked cards stay natural. */
.page-methods .method-sketch {
  display: flex; align-items: center;
  min-height: var(--method-visual-height,0px);
}
.page-methods .method-sketch-content { display: flow-root; width: 100%; min-width: 0; flex: none; }
.page-methods .method-explainer > h2 { min-height: var(--method-title-height,0px); }

/* Matching GT silhouettes: top, front and side, with the original rotation axes. */
.performance-cars { stroke-linecap: round; stroke-linejoin: round; }
.performance-cars .car-body { fill: url(#method-car-paint); stroke: #c2d3dc; stroke-width: .8; }
.performance-cars .car-glass { fill: url(#method-car-glass); stroke: #a0bdcc; stroke-width: .65; }
.performance-cars .car-roof { fill: #557082; stroke: #b6cbd6; stroke-width: .6; }
.performance-cars .car-contour { fill: none; stroke: #d1e0e8; stroke-width: .65; opacity: .7; }
.performance-cars .car-seam { fill: none; stroke: #213c4b; stroke-width: .7; }
.performance-cars .car-rubber { fill: #080e13; stroke: #718896; stroke-width: .7; }
.performance-cars .car-mirror { fill: #8ba7b7; stroke: #c2d3dc; stroke-width: .5; }
.performance-cars .car-intake { fill: #0c1822; stroke: #6d899a; stroke-width: .5; }
.performance-cars .car-light { fill: none; stroke: #effaff; stroke-width: 1.6; }
.performance-cars .car-tail { fill: none; stroke: #ff8758; stroke-width: 1.4; }
.performance-cars .car-stripe { fill: none; stroke: #eea367; stroke-width: 2; }
.performance-cars .car-splitter, .performance-cars .car-wing { fill: none; stroke: #0c1720; stroke-width: 1.7; }
.performance-cars .car-rim { fill: #172a36; stroke: #b9ced9; stroke-width: .8; }
.performance-cars .car-spoke { fill: none; stroke: #92b0c1; stroke-width: .65; }

/* Elevation is explicit geometry above a projected ground plane, not a flat loop shadow. */
.elevation-floor { fill: #15232c; fill-opacity: .75; stroke: #607e9338; stroke-width: 1; }
.elevation-grid { fill: none; stroke: #7799ae22; stroke-width: .7; }
.elevation-projection { fill: none; stroke: #a6bfce66; stroke-width: 1.4; stroke-dasharray: 3 4; }
.elevation-wall { fill: url(#track-elevation-wall); stroke: none; }
.elevation-drop { fill: none; stroke: #97b6ca70; stroke-width: .85; stroke-dasharray: 2 3; }
.elevation-foot { fill: #758e9e; }
.elevation-edge { fill: none; stroke: #071018; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.page-methods .track-profile-diagram .track-segment { stroke-width: 6; }
.elevation-highlight { fill: none; stroke: #e6f6ff; stroke-opacity: .3; stroke-width: .7; }
.elevation-measure { fill: none; stroke: #d3e5f0; stroke-width: 1.1; stroke-dasharray: 3 3; }
.elevation-peak { fill: #dbe8ef; stroke: #10232f; stroke-width: 1.2; }
.performance-cars .car-wing-support { fill: none; stroke: #b3c6d0; stroke-width: 1.5; }
.performance-cars .car-aero-wing { fill: #142531; stroke: #9ab8c9; stroke-width: .65; }
.performance-cars .car-aero-edge { fill: none; stroke: #eaa26a; stroke-width: 1.1; }
.performance-cars .car-hub { fill: #eea367; }

/* Show the finished look immediately, before explaining the recording workflow. */
.page-video .video-page .video-hero { padding-block: 42px 48px; }
.video-page .video-hero > .edition-wrap { max-width: 960px; }
.video-page .video-hero .video-heading { display: block; margin-bottom: 26px; }
.video-page .video-hero .video-heading h1 { font-size: clamp(42px,5vw,68px); }
.video-page .video-hero .video-heading h1 br { display: none; }
.video-page .video-hero .video-heading h1 span::before { content: ' '; white-space: pre; }
.video-page .video-hero .video-explorer > :is(.video-preview,.video-explorer-intro,.video-topic-buttons,.video-explanation) { max-width: none; }
.video-page .video-hero .video-preview-image { border-radius: 16px; border: 1px solid #ffffff26; }
.video-page .video-hero .video-explorer-intro { margin-block: 12px 18px; }
.video-page .video-quick-nav { margin-top: 30px; border-top: 1px solid #ffffff24; padding-top: 22px; }
.video-page .video-workflow .video-lede { max-width: 800px; margin-block: 22px 32px; }
@media(max-width:760px) {
  .page-video .video-page .video-hero { padding-top: 26px; }
  .video-page .video-hero .edition-label { margin-bottom: 16px; }
  .video-page .video-hero .video-heading { margin-bottom: 22px; }
  .video-page .video-hero .video-heading h1 { font-size: clamp(36px,10vw,52px); }
  .video-page .video-hero .video-heading h1 br { display: block; }
  .video-page .video-hero .video-heading h1 span::before { content: none; }
  .video-page .video-hero .video-preview-image { border-radius: 9px; }
}

/* Mobile hero: see all three devices before the longer introduction. svh also
   reserves the space occupied by Safari's expanded browser controls. */
@media(max-width:760px) {
  .edition-home .edition-hero-grid,
  .edition-home .edition-hero.hero-demo-ready .edition-hero-grid {
    gap: 12px; padding-block: 16px 24px;
  }
  .edition-home .edition-hero-copy { display: contents; }
  .edition-home .edition-hero-copy > .edition-label {
    order: 1; margin: 0; text-align: center; font-size: 10px;
  }
  .edition-home .edition-hero-copy > h1 {
    order: 2; margin: 0; text-align: center;
    font-size: clamp(34px,9vw,42px); line-height: 1;
  }
  .edition-home .edition-product-dual {
    order: 3; width: min(100%,360px,calc((100svh - 220px) * .856));
  }
  .edition-home .edition-hero-watch { bottom: 54px; }
  .edition-home .edition-hero-copy > .actions {
    order: 4; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 10px 16px; margin: 2px 0 0;
  }
  .edition-home .edition-hero-copy > .edition-intro {
    order: 5; margin: 4px auto 0; text-align: center;
    font-size: 15px; line-height: 1.5;
  }
  .edition-home .edition-hero-copy > .edition-free {
    order: 6; margin: 0; text-align: center; font-size: 12px; line-height: 1.5;
  }
}

/* Keep the complete App Store panorama on phones instead of cropping it to
   the height of the entire hero. The device stage starts below the scene. */
@media(max-width:760px) {
  .edition-home .store-hero-background {
    inset: 0 0 auto; width: 100%; height: auto; object-fit: contain;
    object-position: center top; opacity: 1;
  }
  .edition-home .hero-atmosphere::after {
    background: linear-gradient(180deg,transparent 0%,#090d1010 65%,#090d10 100%);
    height: 44vw;
  }
  .edition-home .edition-hero-copy > .edition-label {
    width: 52%; text-align: start; font-size: 9px; line-height: 1.4;
    text-shadow: 0 1px 8px #000;
  }
  .edition-home .edition-hero-copy > h1 {
    width: 52%; min-height: max(80px,calc(43vw - 42px));
    text-align: start; font-size: clamp(24px,7.1vw,38px); line-height: 1.04;
    text-shadow: 0 2px 12px #0009;
  }
  .edition-home .edition-product-dual {
    width: min(100%,360px,calc((100svh - 300px) * .856));
  }
}
/* Short landscape screens need a height-based stage, including Safari chrome.
   Keep the complete animated devices alongside the title; details follow below. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1400px) {
  .edition-home .edition-hero-grid,
  .edition-home .edition-hero.hero-demo-ready .edition-hero-grid {
    width: calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right));
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto 1fr auto auto;
    gap: 10px 24px; min-height: 0; padding-block: 12px 24px;
    align-items: start;
  }
  .edition-home .edition-hero-copy { display: contents; }
  .edition-home .edition-hero-copy > .edition-label {
    grid-column: 1; grid-row: 1; width: auto; margin: 0;
    font-size: 9px; line-height: 1.4; text-align: start;
  }
  .edition-home .edition-hero-copy > h1 {
    grid-column: 1; grid-row: 2; width: auto; min-height: 0; margin: 0;
    font-size: clamp(30px,5vw,52px); line-height: 1; text-align: start;
  }
  .edition-home .edition-hero-copy > .actions {
    grid-column: 1; grid-row: 3; align-self: start; margin: 4px 0 0;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 10px 16px;
    font-size: 13px;
  }
  .edition-home .edition-product-dual {
    grid-column: 2; grid-row: 1 / 4; justify-self: center;
    width: min(100%,360px,calc((100svh - 92px) * .856));
    margin: 0; align-self: start;
  }
  .edition-home .edition-hero-watch { bottom: 48px; }
  .edition-home .edition-product-dual > .hero-phone { width: 40%; }
  .edition-home .edition-hero-copy > .edition-intro {
    grid-column: 1 / -1; grid-row: 4; max-width: 640px;
    margin: 16px 0 0; font-size: 15px; line-height: 1.5; text-align: start;
  }
  .edition-home .edition-hero-copy > .edition-free {
    grid-column: 1 / -1; grid-row: 5;
    margin: 0; font-size: 12px; line-height: 1.5; text-align: start;
  }
  .edition-home .store-hero-background {
    inset: 0 0 auto; width: 100%; height: calc(100svh - 59px);
    object-fit: cover; object-position: center; opacity: .92;
  }
  .edition-home .hero-atmosphere::after {
    height: 100%;
    background: linear-gradient(90deg,#090d10c9,transparent 75%),
      linear-gradient(180deg,transparent,#090d10 85%);
  }
}

/* Landscape phones remain short screens throughout the page, not just the hero. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1400px) {
  .edition-home .edition-section { padding-block: 36px; }
  .edition-home h2, .edition-home .story-intro h2 { font-size: clamp(28px,4vw,38px); }
  .edition-home .edition-mode-copy { margin-bottom: 24px; }
  .edition-home .story-lede > p { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
  .edition-home .edition-foundation a { min-height: 170px; padding: 18px; }
  .edition-home .edition-foundation a strong { font-size: 24px; }
  .edition-home .edition-triptych {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px; overflow: visible; padding: 0;
  }
  .edition-home .edition-screen {
    display: grid; grid-template-rows: auto minmax(0,1fr) auto;
    height: min(430px,calc(100svh - 83px));
    padding: 12px; scroll-margin-top: 71px;
  }
  .edition-home .edition-screen figcaption {
    display: grid; grid-template-columns: 24px minmax(0,1fr);
    align-items: center; gap: 4px 8px; margin-bottom: 10px;
    text-align: start;
  }
  .edition-home .edition-screen-number {
    grid-row: 1 / 3; width: 24px; height: 24px; font-size: 10px;
  }
  .edition-home .edition-screen figcaption strong { font-size: 16px; line-height: 1.2; margin: 0; }
  .edition-home .edition-screen figcaption > span:last-child { grid-column: 2; font-size: 11px; line-height: 1.3; }
  .edition-home .edition-screen img {
    width: 100%; height: 100%; min-height: 0;
    max-width: 100%; object-fit: contain;
  }
  .edition-home .edition-screen > p { margin-top: 10px; font-size: 11px; line-height: 1.3; }
  .edition-home .edition-gallery-controls { display: none; }
  .edition-home .edition-preview-grid img {
    width: auto; height: min(210px,calc(100svh - 160px)); max-width: 100%; object-fit: contain;
    margin-bottom: 16px;
  }
  .edition-home .edition-preview-grid h3 { font-size: 18px; }
  .edition-home .video-preview {
    width: min(100%,calc((100svh - 110px) * 1.773)); margin-inline: auto;
  }
}

/* Keep the Video Studio scene at its own panoramic ratio on portrait phones.
   A long explanatory section must not enlarge and crop the background photo. */
@media (max-width: 760px) and (orientation: portrait) {
  .page-video .video-page .video-hero {
    position: relative; isolation: isolate; padding-top: 12px;
    background: #090d10;
  }
  .page-video .video-page .video-hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    inset: 0 0 auto; width: 100%; aspect-ratio: 1670 / 942;
    background: linear-gradient(90deg,#090d1066,transparent 75%),
      linear-gradient(180deg,transparent 70%,#090d10),
      url('assets/store/video.webp') center / 100% 100% no-repeat;
  }
  .video-page .video-hero .edition-label { margin-bottom: 12px; text-shadow: 0 1px 6px #000; }
  .video-page .video-hero .video-new { background: #090d1099; }
  .video-page .video-hero .video-heading {
    min-height: calc(56.4vw - 62px); margin-bottom: 16px;
  }
  .video-page .video-hero .video-heading h1 {
    font-size: clamp(32px,9vw,48px); text-shadow: 0 2px 12px #0009;
  }
}

/* Sensor fusion: two sources, a reconstruction step and an illustrative result. */
.page-methods .fusion-sketch { border-color: #ff984c42; background: radial-gradient(ellipse at 50% 40%,#233641,transparent 68%),#0b1218; }
.fusion-sources { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.fusion-source { min-width: 0; padding: 10px 12px 3px; border: 1px solid #ff984c40; background: #ff984c08; border-radius: 10px; color: #ffb47d; }
.fusion-source-motion { border-color: #6bcbe340; background: #6bcbe308; color: #8cd9ec; }
.fusion-source > span { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; }
.fusion-source svg { display: block; width: 100%; height: 30px; overflow: visible; }
.fusion-source path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; }
.fusion-source circle { fill: currentColor; }
.fusion-source path.fusion-wave { stroke-width: 1.5; opacity: 1; }
.fusion-processor { position: relative; height: 70px; direction: ltr; }
.fusion-processor > svg { width: 100%; height: 100%; overflow: visible; fill: none; }
.fusion-wire { stroke: #69859466; stroke-width: 1; }
.fusion-packet { stroke-width: 2; stroke: #ff984c; }
.fusion-packet-motion { stroke: #6bcbe3; }
.fusion-output { stroke: #ff984c; stroke-width: 2; }
.fusion-core { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 85%; padding: 8px 14px; border-radius: 10px; border: 1px solid #ffb47d80; background: #192731; box-shadow: 0 0 24px #ff984c18; }
.fusion-core strong { color: #f3f7fa; font-size: 13px; line-height: 1.3; text-align: center; }
.fusion-core svg { flex: none; width: 25px; height: 25px; fill: none; stroke: #ffb47d; stroke-width: 1.2; }
.fusion-plot { display: block; width: 100%; overflow: visible; }
.fusion-grid { fill: none; stroke: #92b3ca18; stroke-width: 1; }
.fusion-reference { fill: none; stroke: #ffb47d55; stroke-width: 1; stroke-dasharray: 3 5; }
.fusion-curve { fill: none; stroke: #8cd9ec; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px #6bcbe333); }
.fusion-anchor { fill: #ffb47d; stroke: #0b1218; stroke-width: 2; }
.fusion-result { margin-top: 8px; font-size: 13px; color: #dceef4; text-align: center; }
.fusion-console-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #8da8bd26; }
.fusion-development { flex: 1 1 120px; font-size: 11px; line-height: 1.5; color: #ffb47d; }
.fusion-play { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid #8da8bd50; border-radius: 24px; background: #20313e; color: #e6f1f7; font: inherit; font-size: 12px; cursor: pointer; }
.fusion-play[hidden] { display: none; }
.fusion-play:hover { background: #2c4352; }
.fusion-play:focus-visible { outline: 2px solid #ffb47d; outline-offset: 3px; }
.fusion-play svg { width: 14px; height: 14px; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .fusion-running .fusion-samples, .fusion-running .fusion-wave { animation: fusion-source-arrive 4.8s ease both; }
  .fusion-running .fusion-packet { stroke-dasharray: 7 100; animation: fusion-transfer 4.8s linear both; }
  .fusion-running .fusion-core { animation: fusion-compute 4.8s ease both; }
  .fusion-running .fusion-curve { stroke-dasharray: 1; animation: fusion-reconstruct 4.8s ease both; }
  .fusion-running .fusion-area, .fusion-running .fusion-result { animation: fusion-result-arrive 4.8s ease both; }
}
@keyframes fusion-source-arrive { 0% { opacity: .2; } 18%,100% { opacity: 1; } }
@keyframes fusion-transfer { 0%,12% { stroke-dashoffset: 110; opacity: 0; } 15% { opacity: 1; } 50% { stroke-dashoffset: 0; opacity: 1; } 55%,100% { opacity: 0; } }
@keyframes fusion-compute { 0%,18%,75%,100% { box-shadow: 0 0 24px #ff984c18; } 38%,55% { box-shadow: 0 0 32px #ff984c60; border-color: #ffd0ad; } }
@keyframes fusion-reconstruct { 0%,35% { stroke-dashoffset: 1; } 90%,100% { stroke-dashoffset: 0; } }
@keyframes fusion-result-arrive { 0%,45% { opacity: .08; } 95%,100% { opacity: 1; } }

/* Keep the download and update links centered in a single column at every size. */
.edition-home .edition-hero-copy > .actions {
  flex-direction: column; flex-wrap: nowrap; align-items: center;
  justify-content: center; gap: 12px; text-align: center;
}

/* Motorsport precision: quiet technical framing around the actual app imagery. */
:root {
  --precision-line: #8da8bd30;
  --precision-number-font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --precision-radius: 16px;
  --precision-gain: #70dda5;
}
.edition-screen-number, .journey-chapter-number, .journey-chapter-heading > span,
.journey-nav a > span, .journey-tabs a > span, .video-steps li > span,
.story-workflow li > span, .edition-gallery-controls [data-gallery-status],
.mobile-gallery-status, .app-explorer-count, .faq-category-count, #faq-count {
  font-family: var(--precision-number-font); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .025em;
}
.edition-home .edition-screen-number {
  border-radius: 6px; background: #ff88330a; border-color: #ff984c60;
}
.journey-chapter-number, .journey-chapter-heading > span {
  padding: 5px 8px; border: 1px solid #ff984c45; border-radius: 5px;
  line-height: 1.3; background: #ff883308;
}
.edition-home .edition-screen, .edition-home .edition-preview-grid > a,
.method-explainer, .explorer-extra-grid > article, .journey-nav a {
  border-radius: var(--precision-radius); border-color: var(--precision-line);
}
.edition-home .edition-screen figcaption {
  padding-bottom: 14px; border-bottom: 1px solid #b9ced71f;
}
.edition-home .edition-screen figcaption strong { font-weight: 650; letter-spacing: -.025em; }
.edition-home .edition-screen > p { color: #b6c1c9; font-variant-numeric: tabular-nums; }
.method-chapter::after { content: ''; height: 1px; background: var(--precision-line); flex: 1; align-self: center; margin-inline-start: 14px; }
.page-methods .method-sketch { border-radius: 12px; }
.page-methods .ideal-example { grid-template-columns: minmax(0,1.15fr) repeat(3,minmax(0,1fr)); gap: 6px; }
.page-methods .ideal-example > b { text-align: center; font-family: var(--precision-number-font); }
.page-methods .ideal-example span, .page-methods .sketch-result strong {
  font-family: var(--precision-number-font); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.025em;
}
.page-methods .ideal-example .sector-selected {
  color: var(--precision-gain); border-color: #70dda566; background: #70dda50b;
  box-shadow: inset 0 -2px #70dda580;
}
.page-methods .ideal-example .sector-total { color: var(--precision-gain); background: #70dda515; }
.video-facts { gap: 0; border-color: var(--precision-line); }
.video-facts > div { min-width: 0; padding-inline: 22px; }
.video-facts > div:first-child { padding-inline-start: 0; }
.video-facts > div + div { border-inline-start: 1px solid var(--precision-line); }
.video-facts dt { font-variant-numeric: tabular-nums lining-nums; font-weight: 650; }
.video-facts dd { max-width: 260px; }
/* Every screenshot sits on one common portrait-sized stage. Landscape examples
   keep that same tile; the source images and device frames remain untouched. */
.app-view-image, #views-video .app-view-image {
  display: grid; place-items: center; border-radius: var(--precision-radius);
  border-color: var(--precision-line);
  --precision-stage: linear-gradient(#91b4cc06 1px,transparent 1px) center / 32px 32px,
    linear-gradient(90deg,#91b4cc06 1px,transparent 1px) center / 32px 32px,
    radial-gradient(ellipse at 50% 18%,#263641,#111a21 80%);
  background: var(--precision-stage);
}
.app-view-image::before, #views-video .app-view-image::before {
  content: ''; display: block; grid-area: 1 / 1;
  width: min(100%,165px); aspect-ratio: 1470 / 3000;
}
.app-view-image > img {
  grid-area: 1 / 1; width: min(100%,165px); aspect-ratio: 1470 / 3000; object-fit: contain;
}
.app-view-image::after {
  content: ''; pointer-events: none; position: absolute; inset: 10px;
  background: linear-gradient(#a6c1d25c,#a6c1d25c) left top / 12px 1px no-repeat,
    linear-gradient(#a6c1d25c,#a6c1d25c) left top / 1px 12px no-repeat,
    linear-gradient(#a6c1d25c,#a6c1d25c) right top / 12px 1px no-repeat,
    linear-gradient(#a6c1d25c,#a6c1d25c) right top / 1px 12px no-repeat;
}
.app-view button:hover .app-view-image { background: var(--precision-stage); border-color: #ff984c88; }
.app-view-image > span { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #ff984c55; }
.app-view h3 { font-weight: 650; }
@media (min-width: 761px) and (min-height: 601px) {
  .edition-triptych { grid-template-rows: auto auto auto; row-gap: 0; }
  .edition-screen { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}
@media (max-width: 760px) {
  .video-facts > div { padding-inline: 12px; }
  .video-facts dt { font-size: 19px; }
  .journey-chapter-number { padding: 4px 6px; }
  .method-chapter::after { margin-inline-start: 4px; }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1400px) {
  .edition-home .edition-screen figcaption { padding-bottom: 8px; }
}
:lang(ar) .journey-chapter-number, :lang(ar) .app-explorer-count { letter-spacing: normal; }

/* Replay controls belong to the illustration caption, outside the data area. */
.method-motion-play {
  float: inline-end; display: inline-grid; place-items: center; width: 44px; height: 44px;
  margin-inline-start: 10px; margin-block: 0 4px; border: 1px solid #8da8bd50;
  border-radius: 8px; background: #20313e; color: #d7e5ed; cursor: pointer;
}
.method-motion-play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.method-motion-play:hover { background: #2c4352; border-color: #8da8bd88; }
.method-motion-play:focus-visible { outline: 2px solid #ffb47d; outline-offset: 3px; }
.sketch-caption:has(.method-motion-play) { display: flow-root; }
@media (prefers-reduced-motion: reduce) { .method-motion-play, .fusion-play { display: none; } }

/* Explanatory motion uses the original plotted geometry and real sector values. */
.method-sketch[data-motion-kind] { position: relative; }
.motion-overlay { pointer-events: none; }
.motion-height-probe { fill: none; stroke: #a1e5f4; stroke-width: 1.8; stroke-dasharray: 3 3; }
.ideal-example { position: relative; }
.page-methods .ideal-example .motion-sector { position: absolute; display: grid; place-items: center; margin: 0; box-sizing: border-box; z-index: 2; background: #19352d; color: #b5ffda; border: 1px solid #70dda5; border-radius: 5px; box-shadow: 0 6px 22px #0009; pointer-events: none; }

.explorer-extra-grid .hardware-notice { font-size: 13px; line-height: 1.6; color: #aebcc7; border-top: 1px solid #8da8bd2b; padding-top: 14px; margin-top: 18px; }

/* Product-led presentation: quiet surfaces, readable evidence, optional depth. */
:root { --product-surface: #11191f; --product-rule: #a6bdcc24; --product-copy: #bcc6cf; }
.edition-home .edition-hero-copy > .actions { align-items: flex-start; }
.edition-home .edition-intro { max-width: 440px; font-size: 21px; line-height: 1.55; }
.edition-home .edition-foundation nav { gap: 0; border-block: 1px solid var(--product-rule); }
.edition-home .edition-foundation a,
.edition-home .edition-foundation a:nth-child(n) {
  min-height: 170px; border: 0; border-radius: 0; background: transparent;
  padding: 26px; transform: none; transition: color .15s;
}
.edition-home .edition-foundation a + a { border-inline-start: 1px solid var(--product-rule); }
.edition-home .edition-foundation a:hover { background: #ffffff03; }
.edition-home .edition-foundation a small { color: #aab9c5; }
.product-story {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center;
  gap: clamp(32px,6vw,88px); padding: 48px; background: var(--product-surface);
  border-block: 1px solid var(--product-rule); border-radius: 12px;
}
.product-story-visual { margin: 0; min-width: 0; }
.product-story-visual a { display: block; width: fit-content; margin: auto; border-radius: 34px; }
.product-story-visual a:focus-visible { outline: 2px solid #ffad72; outline-offset: 8px; }
.product-story-visual img { width: min(100%,276px); max-height: 580px; object-fit: contain; margin: auto; }
.product-story-visual figcaption { color: #98a9b7; font-size: 12px; text-align: center; margin-top: 18px; }
.edition-home .product-story-copy h3 { font-size: clamp(28px,3.2vw,42px); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 22px; }
.product-story-copy > p { color: var(--product-copy); font-size: 18px; line-height: 1.65; margin: 0; }
.product-insights { margin: 30px 0; }
.product-insights > div { padding: 18px 0; border-top: 1px solid var(--product-rule); }
.product-insights dt { display: flex; gap: 12px; align-items: baseline; font-size: 17px; font-weight: 600; color: #eef3f6; }
.product-insights dt span { font: 11px var(--precision-number-font); color: #8da7b9; }
.product-insights dd { margin: 8px 0 0; color: var(--product-copy); font-size: 15px; line-height: 1.6; }
.edition-home .product-more { margin-top: 20px; border-bottom: 0; }
.edition-home .product-more .story-detail-body { max-width: none; }
.edition-home .product-more .edition-triptych { padding-top: 16px; }
.edition-home .product-more .edition-screen { background: transparent; border: 0; border-radius: 0; }
.edition-home .product-more .edition-screen img { filter: none; }
.edition-home .story-detail + .story-detail { margin-top: 0; }
.edition-home .edition-preview-grid { gap: 28px; }
.edition-home .edition-preview-grid > a { background: transparent; border: 0; border-top: 1px solid var(--product-rule); border-radius: 0; padding-inline: 0; }
.edition-home .edition-preview-grid > a:hover { background: transparent; border-color: #8299aa; }
.edition-home .edition-plans article, .edition-home .edition-plans article + article { background: var(--product-surface); border: 1px solid var(--product-rule); border-radius: 12px; }
.edition-home .edition-plans article + article { border-top: 2px solid #ff984c; }
.plan-details { margin-top: 20px; border-top: 1px solid var(--product-rule); }
.plan-details > summary, .method-technical > summary { cursor: pointer; padding-block: 16px; color: #dbe6ed; font-size: 14px; line-height: 1.5; }
.plan-details .edition-plan-list { margin-top: 0; }
.app-explorer-tools { padding: 0; }
.app-explorer-tools .journey-tabs { flex-wrap: nowrap; gap: 28px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.app-explorer-tools .journey-tabs::-webkit-scrollbar { display: none; }
.app-explorer-tools .journey-tabs a { flex: 0 0 auto; white-space: nowrap; min-height: 52px; padding-block: 14px; border-bottom: 2px solid transparent; }
.app-explorer-tools .journey-tabs a[aria-current="location"] { color: #fff; border-bottom-color: #ff984c; }
.app-explorer .page-hero .app-explorer-count { font-family: inherit; letter-spacing: normal; margin-top: 24px; font-size: 12px; color: #b2bec8; }
.explorer-chapter, .app-view { scroll-margin-top: 130px; }
.app-view-image, #views-video .app-view-image { --precision-stage: #131d24; border-color: var(--product-rule); }
.app-view-image::after { opacity: .35; }
.explorer-extra-grid > article { background: transparent; border: 0; border-top: 1px solid var(--product-rule); border-radius: 0; padding: 30px 0; }
.extra-visual { background: var(--product-surface); border-color: var(--product-rule); border-radius: 12px; }
.page-methods .method-explainer { background: transparent; border: 0; border-top: 1px solid var(--product-rule); border-radius: 0; padding: 28px 0; }
.page-methods .method-sketch { background: var(--product-surface); box-shadow: none; }
.method-technical { order: 7; border-top: 1px solid var(--product-rule); margin-top: 20px; }
.method-technical p { font-size: 15px; line-height: 1.65; }
.video-more-grid > li, .video-page .video-editor-features article { background: transparent; box-shadow: none; border-radius: 0; }
.video-topic-buttons button { background: #131d24; border-radius: 8px; }
.video-topic-buttons button[aria-pressed="true"] { background: #ffd0a5; color: #21170f; }
.video-page .video-hero .video-explorer-intro h3 { font-size: clamp(22px,2.5vw,30px); }
@media (min-width: 761px) {
  .app-explorer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-view-image, #views-video .app-view-image { padding: 30px 24px; }
  .app-view-image::before, #views-video .app-view-image::before, .app-view-image > img { width: min(100%,205px); }
  .app-view-image > .iphone-device.iphone-portrait { width: min(100%,205px); }
  .video-page .video-hero > .edition-wrap { max-width: 1100px; }
}
@media (max-width: 760px) {
  .edition-home .edition-foundation a:nth-child(n) { min-height: 156px; padding: 18px 10px; }
  .edition-home .edition-foundation a strong { font-size: 22px; }
  .edition-home .edition-foundation a p { font-size: 12px; line-height: 1.5; }
  .edition-home .edition-foundation a > span { display: none; }
  .product-story { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 26px 20px; }
  .product-story-visual img { width: min(100%,230px); max-height: 470px; }
  .edition-home .product-story-copy h3 { font-size: 29px; margin-bottom: 16px; }
  .product-story-copy > p { font-size: 16px; }
  .product-insights { margin-block: 22px; }
  .product-insights dt { font-size: 16px; }
  .product-insights dd { font-size: 14px; }
  .edition-home .edition-preview-grid { gap: 24px 18px; }
  .app-explorer-tools .wrap { width: calc(100% - 32px); }
  .app-explorer-tools .journey-tabs { gap: 22px; }
  .app-explorer-tools .journey-tabs a { min-height: 48px; padding-block: 11px; }
  .app-explorer-tools .journey-tabs strong { font-size: 13px; }
  .app-explorer-tools .journey-tabs span { display: none; }
  .app-explorer .page-hero .lede { font-size: 17px; }
  .explorer-chapter { padding-top: 40px; scroll-margin-top: 118px; }
  .app-view { scroll-margin-top: 118px; }
  .explorer-extra-grid > article { padding: 24px 0; }
}
/* Three visual entry points: a real app view beside each short introduction. */
.edition-home .edition-foundation nav { gap: 14px; border: 0; margin-top: 18px; }
.edition-home .edition-foundation a:nth-child(n) {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.7fr); align-items: center;
  gap: 12px; min-height: 220px; padding: 22px; overflow: hidden;
  border: 1px solid #a6bdcc30; border-radius: 14px; isolation: isolate;
  background: #11191f; transform: none;
}
.edition-home .edition-foundation a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background-size: cover;
  background-position: center; opacity: .5;
}
.edition-home .edition-foundation a:nth-child(1)::before { background-image: linear-gradient(90deg,#090d10f5,#090d1066),url('assets/store/sprint.webp'); }
.edition-home .edition-foundation a:nth-child(2)::before { background-image: linear-gradient(90deg,#090d10f5,#090d1066),url('assets/store/race.webp'); }
.edition-home .edition-foundation a:nth-child(3)::before { background-image: linear-gradient(90deg,#090d10f5,#090d1066),url('assets/store/video.webp'); }
.edition-home .edition-foundation a small { color: #ffb078; font-size: 11px; margin-bottom: 10px; }
.edition-home .edition-foundation a strong { font-size: 26px; }
.edition-home .edition-foundation a p { font-size: 14px; margin-top: 10px; }
.foundation-preview { display: grid; place-items: center; min-width: 0; }
.foundation-preview img { display: block; object-fit: contain; max-width: 100%; filter: drop-shadow(0 10px 12px #0008); }
.foundation-preview-phone img { width: auto; height: 184px; }
.foundation-preview-video img { width: 100%; height: auto; border: 1px solid #adb9c74d; border-radius: 8px; }
.edition-home .edition-foundation a > .foundation-arrow { display: block; position: absolute; inset-inline-end: 12px; bottom: 9px; font-size: 18px; line-height: 1; }
.edition-home .edition-foundation a:hover { border-color: #ff984c99; }
.edition-home .edition-foundation a:focus-visible { outline: 2px solid #ffb078; outline-offset: 4px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .edition-home .edition-foundation a:nth-child(n) { padding: 16px; grid-template-columns: minmax(0,1fr) 76px; gap: 8px; }
  .edition-home .edition-foundation a strong { font-size: 23px; }
  .foundation-preview-phone img { height: 155px; }
}
@media (max-width: 760px) {
  .edition-home .edition-basis { padding-block: 24px 36px; }
  .edition-home .edition-foundation > p { font-size: 28px; }
  .edition-home .edition-foundation > span { font-size: 14px; }
  .edition-home .edition-foundation nav { gap: 10px; margin-top: 10px; }
  .edition-home .edition-foundation a:nth-child(n) { min-height: 166px; padding: 16px 20px; grid-template-columns: minmax(0,1fr) minmax(92px,.85fr); }
  .edition-home .edition-foundation a strong { font-size: 24px; }
  .edition-home .edition-foundation a p { font-size: 13px; line-height: 1.45; }
  .foundation-preview-phone img { height: 142px; }
}
/* The supplied tablet frame surrounds the complete 16:9 video, with letterboxing. */
.video-tablet { position: relative; width: 100%; aspect-ratio: 3000 / 2300; direction: ltr; }
.video-page .video-hero .video-explorer > .video-preview { width: 90%; max-width: 760px; margin-inline: auto; }
.video-tablet > .video-tablet-frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
.video-tablet-display {
  position: absolute; left: 4.1%; right: 4.1%; top: 5.08%; bottom: 5.08%;
  display: flex; align-items: center; background: #000; border-radius: 2.5%; overflow: hidden;
}
.video-tablet .video-preview-image, .video-page .video-hero .video-tablet .video-preview-image {
  width: 100%; flex: 0 0 100%; border: 0; border-radius: 0; box-shadow: none; background: #000;
}
.video-tablet .video-preview-image > img { display: block; width: 100%; height: auto; }
/* The full campaign photograph and complete devices each get their own space. */
@media (max-width: 760px) and (orientation: portrait) {
  .edition-home .hero-atmosphere { position: relative; inset: auto; aspect-ratio: 1916 / 821; }
  .edition-home .hero-atmosphere::after { height: 100%; background: linear-gradient(180deg,transparent 55%,#090d10); }
  .edition-home .edition-hero-grid, .edition-home .edition-hero.hero-demo-ready .edition-hero-grid {
    gap: 10px; padding-block: 0 26px; width: calc(100% - 40px); min-height: 0;
  }
  .edition-home .edition-hero-copy > .edition-label { width: 100%; text-align: center; font-size: 9px; margin: 0; }
  .edition-home .edition-hero-copy > h1 { width: 100%; min-height: 0; font-size: clamp(30px,8.8vw,40px); text-align: center; margin: 0; line-height: 1.1; }
  .edition-home .edition-hero-copy > h1 br { display: none; }
  .edition-home .edition-hero-copy > h1 span::before { content: ' '; white-space: pre; }
  .edition-home .edition-hero-copy > .edition-intro { order: 3; font-size: 16px; max-width: 350px; margin: 0 auto; line-height: 1.5; }
  .edition-home .edition-hero-copy > .actions { order: 4; align-items: center; gap: 8px 14px; margin: 4px 0; }
  .edition-home .edition-hero-copy > .actions .text-link { font-size: 12px; }
  .edition-home .edition-hero-copy > .actions .app-store-badge img { height: 42px; width: auto; }
  .edition-home .edition-product-dual { order: 5; width: min(100%,280px,calc((100svh - 440px) * .856)); margin-top: 8px; }
  .edition-home .edition-hero-watch { bottom: 12%; }
  .edition-home .edition-hero-copy > .edition-free { order: 6; font-size: 12px; margin: 0; }
  .edition-home .hero-demo-control { min-height: 44px; bottom: 0; padding: 8px 12px; font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1400px) {
  .product-story { grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 28px; padding: 24px; }
  .product-story-visual img { height: min(340px,calc(100svh - 110px)); width: auto; max-width: 100%; }
  .edition-home .product-story-copy h3 { font-size: 27px; }
  .product-story-copy > p { font-size: 15px; }
  .product-insights { margin-block: 14px; }
  .product-insights > div { padding-block: 12px; }
  .product-insights dd { font-size: 13px; }
  .app-view-image::before, #views-video .app-view-image::before, .app-view-image > img { width: min(100%,145px); }
  .app-view-image > .iphone-device.iphone-portrait { width: min(100%,145px); }
}

/* Sensor fusion explained at the reader's pace, on one shared speed/time plot. */
.fusion-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 26px; }
.fusion-steps[hidden] { display: none; }
.fusion-steps button { min-width: 0; min-height: 64px; padding: 12px 8px; border: 1px solid #8da8bd45; border-radius: 8px; background: #17232c; color: #c5d1db; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.fusion-steps button span { display: block; color: #ffb47d; font-size: 11px; margin-bottom: 4px; }
.fusion-steps button[aria-pressed="true"] { border-color: #ffad72; background: #302920; color: #fff; }
.fusion-steps button:focus-visible { outline: 2px solid #ffb47d; outline-offset: 3px; }
.fusion-axis-label, .fusion-axis-time { font-size: 12px; color: #bccbd6; }
.fusion-axis-label { margin-inline-start: 5.5%; margin-bottom: 10px; }
.fusion-axis-time { text-align: end; margin-inline-end: 5.5%; margin-top: 6px; }
.fusion-explanation { border-top: 1px solid #8da8bd30; margin-top: 20px; padding-top: 16px; min-height: 155px; }
.page-methods .fusion-explanation p { margin: 0; color: #d4dfe6; font-size: 15px; line-height: 1.65; }
.fusion-explanation p[hidden] { display: none; }
.fusion-console[data-step="1"] .fusion-curve, .fusion-console[data-step="1"] .fusion-area { opacity: 0; }
.fusion-console[data-step="2"] .fusion-curve { stroke-dasharray: .025 .025; }
.fusion-console[data-step="2"] .fusion-area { opacity: 0; }
.fusion-console .fusion-reference { stroke: #ffb47d88; }
@media (max-width: 420px) { .fusion-steps { gap: 5px; } .fusion-steps button { padding-inline: 5px; font-size: 12px; } }

/* Technical instrument styling, with AI credited to development, not measurement. */
.page-methods .fusion-sketch { border-color: #66879766; background: #0c141b; }
.fusion-science-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #7996aa30; text-align: start; }
.fusion-science-heading strong { display: block; font-size: 20px; letter-spacing: -.02em; color: #eef5fa; }
.page-methods .fusion-science-heading p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: #a8c5d6; }
.fusion-chip { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid #80c9de66; border-radius: 10px; background: #152a36; }
.fusion-chip svg { width: 31px; height: 31px; fill: none; stroke: #8cd9ec; stroke-width: 1.2; }
.fusion-steps { margin-bottom: 20px; }
.fusion-steps button { border-radius: 5px; background: #111e28; }
.fusion-steps button[aria-pressed="true"] { border-color: #89cfdf; background: #1a303c; box-shadow: inset 0 -2px #89cfdf; }
.fusion-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; font-size: 11px; color: #c5d5e0; text-align: start; }
.fusion-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.fusion-legend i { display: inline-block; flex: none; }
.fusion-legend-gps i { width: 7px; height: 7px; border-radius: 50%; background: #ffb47d; }
.fusion-legend-model i { width: 19px; height: 2px; background: #8cd9ec; }
.fusion-console[data-step="1"] .fusion-legend-model { opacity: .35; }
.fusion-coordinate, .fusion-ticks { fill: none; stroke: #8aa3b6; stroke-width: .6; }
.fusion-console .fusion-plot { background: repeating-linear-gradient(0deg,transparent,transparent 19px,#90b8cc08 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#90b8cc08 20px); }
.fusion-console .fusion-curve { stroke-width: 2; filter: none; }
.fusion-console .fusion-anchor { r: 3.5; stroke-width: 1.5; }
.fusion-console .fusion-reference { stroke-width: .8; }
.page-methods .fusion-explanation p { text-align: start; font-size: 14px; }
.fusion-axis-label, .fusion-axis-time, .fusion-steps button span { font-family: var(--precision-number-font); }