/* Match the default PageBackground01 wallpaper used by the iOS home screen. */
:root {
  --ink: #f7fbff;
  --muted: #d0dce6;
  --blue: #91c9e8;
  --paper: #1f425a;
  --line: #a7d7f74d;
  --app-deep: #1f2f3f;
  --app-mid: #5e758b;
  --app-surface: #365b75;
  --app-bottom: #1f425a;
  --app-secondary: #d0dce6;
}

html { background: var(--app-bottom); }
body {
  background: var(--app-bottom) url("assets/page-background-ios.png") center top / 100% 100vh fixed no-repeat;
  color: var(--ink);
}
button { color: inherit; }
:is(a, button, summary, [tabindex]):focus-visible { outline-color: #b5e8ff; }
.skip { background: var(--app-deep); color: #fff; }

.hero { background: transparent; }
.hero h1 { color: #fff; }
.hero h1 span {
  color: #e1eff9;
  background: none;
  -webkit-text-fill-color: #e1eff9;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px var(--site-gutter);
  border-bottom: 0.5px solid transparent;
  background: transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.site-header.is-scrolled {
  border-bottom-color: #b8dbf12b;
  background: #1f3d55c9;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--site-content-width);
  min-height: 44px;
  margin-inline: auto;
}
.site-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
}
.site-download:not(:disabled):hover { background: #f0f0f0; }
.site-download:disabled {
  border: 0;
  background: #5b6068;
  color: #d2d4d7;
  cursor: not-allowed;
  opacity: 1;
}
.site-download svg { width: 22px; height: 26px; flex: 0 0 auto; fill: currentColor; }
.guidance-section { background: transparent; padding-top: 110px; padding-bottom: 42px; }
.guidance-section .section-heading h1 span { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.guidance-section .section-heading > p { margin-top: 0; }
.guidance-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  color: #f7fbff;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .02em;
}
.guidance-brand img {
  width: 44px;
  height: 44px;
  border-radius: 9px;
}
.guidance-section .sync-experience { margin-top: 46px; }
.section-heading h2 { color: #fff; }
.section-heading > p:last-child:not(.eyebrow) { color: var(--app-secondary); }
.sync-experience {
  background: #2b506c91;
  border-color: #a7d7f773;
  max-width: 1600px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  row-gap: 10px;
  padding: clamp(34px, 4.5vw, 72px);
}
.sync-product header, .sync-product header > span, .sync-equals,
.sync-explanation { color: #e1eff9; }
.sync-product header > span { color: var(--app-secondary); }
.sync-pair {
  grid-template-columns: minmax(0, 1.2fr) 52px minmax(0, .8fr);
  align-items: center;
  justify-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.sync-phone-product { width: 100%; max-width: 550px; }
.sync-phone-product header { justify-content: flex-end; margin-bottom: 10px; }
.sync-phone-product header > span { font-size: 11px; }
.sync-center-product { width: 100%; max-width: 760px; justify-self: center; }
.sync-equals { align-items: center; justify-content: center; line-height: 1; }
.sync-equals > svg { display: block; width: 22px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sync-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: center;
  width: min(100%, 920px);
  gap: 14px;
  margin-top: 16px;
}
.sync-controls button {
  width: 100%;
  padding: 15px 10px;
  text-align: center;
  white-space: nowrap;
  color: #edf8ff;
  background: #31587591;
  border-color: #b8dbf180;
}
.sync-controls button.active { color: #fff; background: #668ca8b0; border-color: #b5dff6; }
.sync-controls #sync-play, .sync-controls #sync-original {
  color: #f4fbff;
  background: #31587591;
  border-color: #b8dbf180;
}

.dashboard-section { background: transparent; color: #fff; padding-top: 48px; }
.native-carousel-shell {
  background: #2b506c91;
  border: 0.5px solid #a7d7f773;
}
.native-carousel-status { color: #fff; }
.native-carousel-status span { color: var(--app-secondary); }

.connected, .journeys { color: #fff; }
.feature-lines h4, .trip-experience-copy h3 { color: #fff; }
.feature-lines p, .line-icon, .phone-footnote,
.trip-source-note, .trip-experience-copy > p:not(.eyebrow) { color: var(--app-secondary); }
.phone-halo { background: radial-gradient(ellipse, #8db5ce44, transparent 68%); }
.phone-backword { color: #ffffff20; }
.journeys { border-top: 0; }
.trip-demo-controls { background: #2a4d6899; }
.trip-demo-controls button { color: #d6e9f5; }
.trip-demo-controls button.active { background: #7196b2; color: #fff; }
.trip-replay { color: #b3e4ff; }
.trip-feature { border-top-color: #ffffff35; }
.trip-feature b { color: #fff; }
.trip-feature p { color: var(--app-secondary); }

.wrap-section {
  color: #fff;
  background: transparent;
}
.wrap-showcase { background: #345e7aa1; }
.wrap-label > span, .wrap-label p, .wrap-bottom, .wrap-note { color: var(--app-secondary); }
.wrap-label h3 { color: #fff; }
.wrap-backword { color: #ffffff14; }
.wrap-option {
  color: #eef7fd;
  background: #31587591;
  border-color: #b8dbf180;
}
.wrap-option.active {
  color: #fff;
  background: #668ca8b0;
  border-color: #b5dff6;
  box-shadow: 0 0 0 1px #b5dff6;
}
.wrap-option small, .wrap-check { color: var(--app-secondary); }
.wrap-thumb { background: #496c85; }

.closing { color: #fff; background: transparent; }
.closing h2 { color: #fff; }
.download-note, .closing p:not(.eyebrow) { color: var(--app-secondary); }
.button { color: #fff; background: #648aa6ba; border: 0.5px solid #b8dbf180; }
.button:hover { background: #779bb5; }

footer { color: #f7fbff; background: transparent; }
.footer-bottom {
  color: #d2e2ee;
  opacity: .8;
  border-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  text-align: center;
}
.footer-bottom > div { justify-content: center; gap: 24px; }
.footer-inner .fine-print, .footer-inner > p { color: rgba(187, 207, 222, 0.5); }
.footer-inner .fine-print { text-align: center; }
.brand-en { color: #b8d0e0; }
.community { margin-bottom: 34px; }
.community-heading { margin-bottom: 40px; }
.community-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 60px 32px 32px;
  border: 0.5px solid #a7d7f773;
  border-radius: 24px;
  background: #2b506c91;
}
.footer-group-qr {
  flex: 0 0 auto;
  width: clamp(176px, 19vw, 224px);
  height: auto;
  border-radius: 12px;
  background: #fff;
  -webkit-touch-callout: default;
  user-select: auto;
}
.contributors {
  width: 100%;
}
.contributors h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  color: #fff;
  font-size: 22px;
  text-align: center;
}
.contributors h3::before, .contributors h3::after {
  content: "";
  width: 42px;
  height: 1px;
  background: #b8dbf180;
}
.contributors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 28px auto 0;
}
.contributors-grid img { width: 100%; height: 100px; object-fit: contain; }

@media (min-width: 601px) {
  .contributors-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 801px) {
  .contributors-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .site-header { padding-block: 8px; }
  .site-header-inner { gap: 12px; }
  .site-download { gap: 7px; padding-inline: 12px 14px; font-size: 12px; }
  .site-download svg { width: 18px; height: 21px; }
  .guidance-section { padding-top: 48px; padding-bottom: 28px; }
  .guidance-section .sync-experience {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 42px;
    padding: 16px 16px 28px;
  }
  .guidance-brand { gap: 8px; font-size: 15px; }
  .guidance-brand img { width: 38px; height: 38px; border-radius: 9px; }
  .dashboard-section { padding-top: 38px; }
  .sync-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sync-phone-product { width: 88%; max-width: 450px; }
  .sync-phone-product header > span { display: block; }
  .sync-center-product { width: 100%; max-width: 600px; }
  .sync-equals { font-size: 0; }
  .sync-equals > svg { width: 16px; height: 12px; transform: rotate(90deg); }
  .sync-controls { display: none; }
  .community-card { gap: 26px; padding: 60px 18px 22px; }
  .footer-group-qr { width: min(64vw, 224px); }
  .contributors h3 { gap: 10px; font-size: 18px; }
  .contributors h3::before, .contributors h3::after { width: 28px; }
  .contributors-grid { gap: 10px 8px; margin-top: 22px; }
  .footer-bottom { flex-direction: row; gap: 14px; }
  .footer-bottom > div { gap: 14px; }
}

@media (max-width: 600px) {
  .contributors-grid img { height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}