/* Mobile refinement: keep the footer, app handoff and support marks readable at phone widths. */
[data-visual-shell="9c33417b"] .footer-brand-logo--en { width: auto; min-width: 0; padding: 0; border-radius: 0; background: transparent; overflow: visible; display: inline-flex; align-items: center; gap: 12px; }
[data-visual-shell="9c33417b"] .footer-brand-logo--en .brand-mark { width: 52px !important; height: 52px !important; margin: 0 !important; border-radius: 14px; background: #fff; object-fit: cover; }
[data-visual-shell="9c33417b"] .footer-brand-logo--en .brand-type { display: grid; gap: 3px; text-align: left; }
[data-visual-shell="9c33417b"] .footer-brand-logo--en .brand-type strong { color: #fff; font-size: 1.35rem; line-height: 1; }
[data-visual-shell="9c33417b"] .footer-brand-logo--en .brand-type small { color: #bdb7ae; font-size: .72rem; line-height: 1.25; }

/* Match the footer product mark to the navigation logo frame: rounded rectangle, not a full capsule. */
[data-visual-shell="9c33417b"] .footer-brand-logo:not(.footer-brand-logo--en) {
  border-radius: 28px;
}

/* The bundled base sheet styles tabs as buttons. Reapply the section's reveal
   delay here so its three steps still follow the heading in reading order. */
.motion-enabled .app-tabs button.motion-reveal {
  transition:
    opacity 460ms cubic-bezier(.22, 1, .36, 1),
    filter 460ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    color 180ms ease,
    background 180ms ease !important;
  transition-delay:
    calc(var(--motion-order, 0) * var(--motion-reveal-stagger, 96ms)),
    calc(var(--motion-order, 0) * var(--motion-reveal-stagger, 96ms)),
    calc(var(--motion-order, 0) * var(--motion-reveal-stagger, 96ms)),
    0ms,
    0ms !important;
}

/* Animation timing is based on the amount of material visible at once, not a
   blanket slow-down. Columns have room for a slightly wider beat; stacked
   cards move sooner, while still following a clear reading sequence. */
:root { --motion-reveal-stagger: 90ms; }

.motion-enabled .motion-reveal {
  transition-delay: calc(var(--motion-order, 0) * var(--motion-reveal-stagger)) !important;
  transition-duration: 460ms, 460ms, 520ms !important;
}

/* The installation cards stack below this layout breakpoint, including tablets. */
@media (max-width: 1182px) {
  :root { --motion-reveal-stagger: 80ms; }

  .motion-enabled .motion-reveal {
    transform: translate3d(0, 18px, 0) scale(.99);
    transition-duration: 400ms, 400ms, 460ms !important;
  }

  .motion-enabled .app-tabs button.motion-reveal {
    transition-duration: 400ms, 400ms, 460ms, 180ms, 180ms !important;
  }
}

/* Hero reading order: headline → context → guard dog → promise → primary
   action → secondary action. Each beat starts after the prior one has become
   legible, rather than treating the opening screen as one large reveal. */
.motion-enabled .hero-copy > :is(.eyebrow, h1, .hero-promise) {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 22px, 0);
  transition: opacity 460ms cubic-bezier(.22, 1, .36, 1), filter 460ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1) !important;
}

.motion-enabled.motion-hero-visible .hero-copy > :is(.eyebrow, h1, .hero-promise) {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.motion-enabled .hero-copy > .button-row {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none !important;
}

.motion-enabled .hero-copy > .button-row > :is(.button, .text-link) {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 18px, 0);
  transition: opacity 460ms cubic-bezier(.22, 1, .36, 1), filter 460ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1) !important;
}

.motion-enabled.motion-hero-visible .hero-copy > .button-row > :is(.button, .text-link) {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.motion-enabled.motion-hero-visible .hero-copy > h1 { transition-delay: 0ms !important; }
.motion-enabled.motion-hero-visible .hero-copy > .eyebrow { transition-delay: 70ms !important; }
.motion-enabled.motion-hero-visible .hero-copy > .hero-promise { transition-delay: 330ms !important; }
.motion-enabled.motion-hero-visible .hero-copy > .button-row > .button { transition-delay: 460ms !important; }
.motion-enabled.motion-hero-visible .hero-copy > .button-row > .text-link { transition-delay: 540ms !important; }

.motion-enabled .hero-visual {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 22px, 0);
}

.motion-enabled.motion-hero-visible .hero-visual {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 460ms cubic-bezier(.22, 1, .36, 1), filter 460ms cubic-bezier(.22, 1, .36, 1), transform 520ms cubic-bezier(.22, 1, .36, 1) !important;
  transition-delay: 180ms !important;
}

/* Animated sections need their real height before a visitor reaches them. */
[data-visual-shell="9c33417b"] :is(#support, #risk-story, #how-it-works, #evidence, #pricing, #about, #faq, #contact) {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Decorative movement waits until its content has entered, then stays quiet on phones. */
.motion-ambient::before {
  transition: opacity 500ms ease 80ms, transform 600ms cubic-bezier(.22, 1, .36, 1) 80ms;
}

[data-visual-shell="9c33417b"] #support .support-track,
[data-visual-shell="9c33417b"] #about .client-track {
  animation-play-state: paused !important;
}

[data-visual-shell="9c33417b"] #support .support-marquee.motion-visible .support-track,
[data-visual-shell="9c33417b"] #about .client-grid.motion-visible .client-track {
  animation-play-state: running !important;
}

@media (max-width: 809.98px) {
  :root { --motion-reveal-stagger: 70ms; }

  .motion-enabled .motion-reveal {
    transform: translate3d(0, 14px, 0) scale(.995);
    transition-duration: 340ms, 340ms, 400ms !important;
  }

  .motion-enabled .app-tabs button.motion-reveal {
    transition-duration: 340ms, 340ms, 400ms, 180ms, 180ms !important;
  }

  .motion-enabled .hero-copy > :is(.eyebrow, h1, .hero-promise),
  .motion-enabled .hero-copy > .button-row > :is(.button, .text-link) {
    transform: translate3d(0, 14px, 0);
    transition-duration: 340ms, 340ms, 400ms !important;
  }

  .motion-enabled .hero-visual {
    transform: translate3d(0, 14px, 0);
  }

  .motion-enabled.motion-hero-visible .hero-copy > h1 { transition-delay: 0ms !important; }
  .motion-enabled.motion-hero-visible .hero-copy > .eyebrow { transition-delay: 55ms !important; }
  .motion-enabled.motion-hero-visible .hero-visual { transition-delay: 140ms !important; }
  .motion-enabled.motion-hero-visible .hero-copy > .hero-promise { transition-delay: 260ms !important; }
  .motion-enabled.motion-hero-visible .hero-copy > .button-row > .button { transition-delay: 370ms !important; }
  .motion-enabled.motion-hero-visible .hero-copy > .button-row > .text-link { transition-delay: 440ms !important; }

  .motion-ambient::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .hero-copy > :is(.eyebrow, h1, .hero-promise),
  .motion-enabled .hero-copy > .button-row > :is(.button, .text-link),
  .motion-enabled .hero-visual {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  [data-visual-shell="9c33417b"] #support .support-track,
  [data-visual-shell="9c33417b"] #about .client-track {
    animation: none !important;
  }
}

/* One visual system for the black navigation rail, brand lockup and menu control. */
[data-visual-shell="9c33417b"] .site-nav {
  border-radius: 30px;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link {
  width: 150px;
  min-width: 0;
  flex: 0 0 150px;
  padding: 3px 7px 6px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link-logo {
  display: block;
  width: 136px;
  height: auto;
}

html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link {
  width: 205px;
  flex-basis: 205px;
  padding: 4px 10px;
  gap: 9px;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #080808;
  line-height: 1;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link-text strong {
  color: #080808;
  font-size: 1.08rem;
  line-height: 1;
}

[data-visual-shell="9c33417b"] .site-nav .brand-link-text small {
  display: block;
  color: rgb(8 8 8 / 62%);
  font-size: .62rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Reuse the English footer lockup in the navigation: icon tile, white product
   name and muted descriptor.  This avoids a second, competing logo treatment. */
html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link {
  display: inline-flex !important;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  color: #c9c2b9;
  background: transparent;
  font-weight: 400;
  line-height: 1.8;
  white-space: normal;
  overflow: visible;
}

html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px;
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
}

html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link-text {
  display: block;
  min-width: 0;
  overflow: visible;
  color: #fff;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.8;
  text-overflow: clip;
  white-space: normal;
}

html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link-text strong {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.15;
}

html[lang="en"][data-visual-shell="9c33417b"] .site-nav .brand-link-text small {
  color: #bdb7ae;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  white-space: normal;
}

[data-visual-shell="9c33417b"] .site-nav .menu-toggle {
  border-radius: 50%;
}

[data-visual-shell="9c33417b"] :is(.footer-downloads, .step-store-downloads) .store-badges { display: flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%; gap: 12px; }
[data-visual-shell="9c33417b"] :is(.footer-downloads, .step-store-downloads) .store-badges a { display: block; width: auto; min-width: 0; height: auto; line-height: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; }
[data-visual-shell="9c33417b"] :is(.footer-downloads, .step-store-downloads) .store-badges img { display: block; width: auto !important; max-width: none !important; height: 48px !important; margin: 0 !important; object-fit: contain !important; }
[data-visual-shell="9c33417b"] :is(.footer-downloads, .step-store-downloads) .store-badges a:nth-child(2) img { height: 54px !important; transform: none; }

/* The installation card has an older ID-specific badge rule. Override it here so the
   visible black areas, rather than the source canvases, share one height. */
[data-visual-shell="9c33417b"] #how-it-works .step-store-downloads .store-badges {
  align-items: center;
}

[data-visual-shell="9c33417b"] #how-it-works .step-store-downloads .store-badges a {
  height: auto;
  overflow: visible;
}

[data-visual-shell="9c33417b"] #how-it-works .step-store-downloads .store-badges img {
  width: auto !important;
  max-width: none !important;
  height: 48px !important;
  margin: 0 !important;
}

[data-visual-shell="9c33417b"] #how-it-works .step-store-downloads .store-badges a:nth-child(2) img {
  height: 64px !important;
}

/* The Apple asset contains transparent pixels before its visible black frame. On desktop,
   offset that artwork-only margin so the visible store buttons share the logo's left edge. */
@media (width >= 810px) {
  [data-visual-shell="9c33417b"] .footer-grid--version-a .footer-downloads .store-badges {
    justify-content: flex-start;
    margin-inline: -14px 0;
  }
}

[data-visual-shell="9c33417b"] .site-footer .copyright { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 34rem; margin-inline: auto; padding-inline: 20px; text-align: center; text-wrap: balance; }
[data-visual-shell="9c33417b"] .site-footer .copyright :is(span, a, time) { display: block; }

@media (max-width: 809.98px) {
  [data-visual-shell="9c33417b"] #support { padding-block: 36px 32px; }
  [data-visual-shell="9c33417b"] #support,
  [data-visual-shell="9c33417b"] #support .support-marquee,
  [data-visual-shell="9c33417b"] #support .support-track {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
    content-visibility: visible !important;
  }
  [data-visual-shell="9c33417b"] #support .support-marquee { display: block; width: min(calc(100% - 40px), 540px); margin: 24px auto 0; overflow: visible; }
  [data-visual-shell="9c33417b"] #support .support-track { position: static !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; transform: none !important; }
  [data-visual-shell="9c33417b"] #support .support-track.support-track--duplicate { display: none !important; }
  [data-visual-shell="9c33417b"] #support .support-card { display: grid; place-items: center; height: 108px; min-height: 108px; padding: 14px; overflow: hidden; }
  [data-visual-shell="9c33417b"] #support .support-card img { display: block; width: 100%; max-width: 138px; height: 66px; margin: 0; object-fit: contain; }
  [data-visual-shell="9c33417b"] #support .trademark-notice { position: static !important; z-index: auto !important; clear: both; display: block; width: min(calc(100% - 40px), 540px); margin: 24px auto 0; font-size: .68rem !important; line-height: 1.45 !important; transform: none !important; }
  [data-visual-shell="9c33417b"] .footer-grid--version-a .footer-downloads .store-badges, [data-visual-shell="9c33417b"] #how-it-works .step-store-downloads .store-badges { margin-inline: auto; }

  /* Desktop has two logo rows; on a phone they become one continuous two-column grid. */
  [data-visual-shell="9c33417b"] #about .client-grid.client-marquee {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  [data-visual-shell="9c33417b"] #about .client-marquee-row,
  [data-visual-shell="9c33417b"] #about .client-grid .client-grid__items.client-track {
    display: contents !important;
  }

  [data-visual-shell="9c33417b"] #about .client-grid .client-grid__items.client-track--duplicate {
    display: none !important;
  }

  [data-visual-shell="9c33417b"] #about .client-grid .client-card {
    width: auto !important;
    min-width: 0 !important;
    height: 98px !important;
    min-height: 98px !important;
    margin: 0 !important;
  }

  [data-visual-shell="9c33417b"] #about .client-marquee-row--reverse .client-track:not(.client-track--duplicate) .client-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px) !important;
  }
}

/* Use a drawn icon rather than a Unicode arrow: iOS otherwise may render it as an emoji. */
[data-visual-shell="9c33417b"] #support .support-intro .text-link {
  align-items: center;
  gap: .34em;
  display: inline-flex;
}

[data-visual-shell="9c33417b"] #support .external-link-icon {
  flex: 0 0 auto;
  width: .9em;
  height: .9em;
  transform: translateY(-.04em);
}

/* Team profiles show an intentional preview, then soften into a small ellipsis.
   The card that is not opened keeps its own natural height on a two-column layout. */
[data-visual-shell="9c33417b"] #team .team-grid {
  align-items: start;
}

[data-visual-shell="9c33417b"] #team .team-card {
  align-self: start;
  height: fit-content;
}

[data-visual-shell="9c33417b"] #team .team-details {
  position: relative;
  margin-top: 22px;
  transition: max-height 420ms cubic-bezier(.22, 1, .36, 1);
}

[data-visual-shell="9c33417b"] #team .team-details > h4:first-child {
  margin-top: 0;
}

[data-visual-shell="9c33417b"] #team .team-details:not(.is-expanded) {
  max-height: 8.75rem;
  padding-bottom: 1.5rem;
  overflow: hidden;
}

[data-visual-shell="9c33417b"] #team .team-details:not(.is-expanded)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4.25rem;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(16 16 16 / 0), #101010 78%);
}

[data-visual-shell="9c33417b"] #team .team-details:not(.is-expanded)::before {
  position: absolute;
  z-index: 1;
  right: .1rem;
  bottom: .05rem;
  content: "…";
  color: #c8a57c;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
}

[data-visual-shell="9c33417b"] #team .team-toggle::after {
  display: inline-block;
  margin-left: .45em;
  width: .42em;
  height: .42em;
  content: "";
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: transform 180ms ease;
  transform: translateY(-.12em) rotate(45deg);
}

[data-visual-shell="9c33417b"] #team .team-toggle[aria-expanded="true"]::after {
  transform: translateY(.08em) rotate(225deg);
}