/* Motion has a static, readable resting composition. No hidden-content boot state. */
.hp-overview { background: transparent; padding: 16px 20px; }
.hp-overview .hp-steps { display: grid; gap: 14px; }
.hp-overview .hp-steps > li {
  border: 1px solid var(--presta-hairline);
  border-radius: 18px;
  padding: 24px;
  background: var(--presta-canvas);
  box-shadow: 0 12px 32px rgb(34 34 34 / .045);
}
.hp-overview .hp-steps > li:nth-child(2) { margin-inline: 24px -8px; background: var(--presta-blue-soft); }
.hp-overview .hp-steps > li:nth-child(3) { margin-inline: 48px -16px; }
.hp-flow .hp-steps > li { position: relative; padding-left: 20px; }
.hp-flow .hp-steps > li::before {
  content: ''; position: absolute; inset: 24px auto 24px 0; width: 2px;
  background: var(--presta-blue); transform-origin: top;
}

@media (min-width: 961px) {
  .hp-flow .hp-heading { position: sticky; top: 120px; padding-bottom: 32px; }
  .hp-flow .hp-steps > li { min-height: 220px; align-content: center; }
  body:not(.page-home) .provider-landing-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0; padding: 24px 12px 32px;
  }
  body:not(.page-home) .provider-landing-device {
    width: calc(100% + 24px); border-radius: 20px;
  }
  body:not(.page-home) .provider-landing-device--feed { margin-bottom: 64px; }
  body:not(.page-home) .provider-landing-device--proposal { margin-top: 64px; margin-left: -24px; }
}

@keyframes assemble-on-scroll {
  from { transform: translate(calc(var(--motion-side, 1) * 40px), 48px) rotate(calc(var(--motion-side, 1) * 2deg)) scale(.97); opacity: .55; }
  to { transform: none; opacity: 1; }
}
@keyframes trace-step { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
@supports (animation-timeline: view()) {
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .has-scroll-motion [data-motion-assembly] { view-timeline-name: --assembly; view-timeline-axis: block; }
    .has-scroll-motion [data-motion-piece] {
      animation: assemble-on-scroll linear both;
      animation-timeline: --assembly;
      animation-range: entry 0% cover 70%;
    }
    .has-scroll-motion .hp-flow .hp-steps > li { view-timeline-name: --step; }
    .has-scroll-motion .hp-flow .hp-steps > li::before {
      animation: trace-step linear both;
      animation-timeline: --step;
      animation-range: entry 10% cover 50%;
    }
    .has-scroll-motion [data-motion-assembly]:focus-within [data-motion-piece],
    .has-scroll-motion [data-motion-assembly]:target [data-motion-piece],
    .motion-keyboard [data-motion-piece],
    .motion-keyboard .hp-flow .hp-steps > li::before { animation: none; }
  }
}

@media (max-width: 767px) {
  .hp-overview { padding: 0; }
  .hp-overview .hp-steps > li { padding: 20px; }
  .hp-overview .hp-steps > li:nth-child(2) { margin-inline: 8px 0; }
  .hp-overview .hp-steps > li:nth-child(3) { margin-inline: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-piece], .hp-flow .hp-steps > li::before { animation: none !important; }
}
.site-header .site-nav { transform-origin: top right; }
.request-example { display: grid; gap: 12px; margin-block: 24px; max-width: 680px; }
.request-example > div { padding: 20px 24px; border: 1px solid var(--presta-hairline); border-radius: 14px; background: var(--presta-canvas); }
.request-example > div:nth-child(2) { margin-left: 16px; }
.request-example > div:nth-child(3) { margin-left: 32px; background: var(--presta-blue-soft); }
.request-example span { display: block; margin-bottom: 8px; color: var(--presta-blue-ink); font-size: 13px; }
.request-example strong { font-size: 17px; font-weight: 650; }

/* Component feedback: transitions retarget from their current position. */
:is(.hp-button, .provider-primary-action, .provider-secondary-action, .text-action,
    .store-badge-link, .story-carousel__button, .story-picker, .site-menu-toggle,
    .referral-copy-button, a.compare-card, .hp-service-grid a, .seo-link-list a) {
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1),
    background-color 160ms ease, color 160ms ease;
}
:is(.hp-button, .provider-primary-action, .provider-secondary-action, .text-action,
    .store-badge-link, .story-carousel__button, .story-picker, .site-menu-toggle,
    .referral-copy-button, a.compare-card, .hp-service-grid a, .seo-link-list a):active {
  transform: scale(.97);
}
.hp-service-grid a > span:last-child,
.story-picker img,
.story-picker strong,
.store-badge-link img {
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.story-picker[aria-current="true"] img { transform: scale(1.08); }
.story-picker[aria-current="true"] strong { transform: translateX(2px); }

/* Two strokes become one without swapping a text glyph mid-transition. */
:is(.hp-faq-items, .provider-faq__items) summary {
  position: relative;
  padding-right: 36px;
  list-style: none;
}
:is(.hp-faq-items, .provider-faq__items) summary::-webkit-details-marker { display: none; }
:is(.hp-faq-items, .provider-faq__items) summary::before,
:is(.hp-faq-items, .provider-faq__items) summary::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 6px;
  width: 16px;
  height: 2px;
  background: var(--presta-blue-ink);
  border: 0;
  margin: 0;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 140ms ease;
}
:is(.hp-faq-items, .provider-faq__items) summary::after { transform: rotate(90deg); }
:is(.hp-faq-items, .provider-faq__items) details[open] summary::after {
  content: '';
  transform: rotate(0deg);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.hp-button, .provider-primary-action, .provider-secondary-action):hover { transform: translateY(-2px); }
  :is(.hp-button, .provider-primary-action, .provider-secondary-action):active { transform: scale(.97); }
  .hp-service-grid a:hover > span:last-child { transform: translate(3px, -3px); }
  .store-badge-link:hover img { transform: translateY(-2px); }
  a.compare-card:hover { transform: translateY(-3px); }
  a.compare-card:active { transform: scale(.98); }
  .seo-link-list a:hover { transform: translateX(3px); }
  .seo-link-list a:active { transform: scale(.98); }
}

/* Keyboard state changes are immediate, including the carousel's nested pieces. */
.motion-keyboard :is(.hp-button, .provider-primary-action, .provider-secondary-action,
    .text-action, .store-badge-link, .story-carousel__button, .story-picker,
    .site-menu-toggle, .referral-copy-button, a.compare-card, .hp-service-grid a,
    .seo-link-list a, .story-picker img, .story-picker strong, .store-badge-link img),
.motion-keyboard .hp-service-grid a > span:last-child {
  transition: none !important;
  transform: none !important;
}
.motion-keyboard .story-picker::after,
.motion-keyboard :is(.hp-faq-items, .provider-faq__items) summary::before,
.motion-keyboard :is(.hp-faq-items, .provider-faq__items) summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.hp-button, .provider-primary-action, .provider-secondary-action, .text-action,
      .store-badge-link, .story-carousel__button, .story-picker, .site-menu-toggle,
      .referral-copy-button, a.compare-card, .hp-service-grid a, .seo-link-list a,
      .story-picker img, .story-picker strong, .store-badge-link img),
  .hp-service-grid a > span:last-child { transition: none !important; transform: none !important; }
  .story-picker::after,
  :is(.hp-faq-items, .provider-faq__items) summary::before,
  :is(.hp-faq-items, .provider-faq__items) summary::after { transition: none; }
}


/* Mobile motion follows each component's own viewport progress, not its group. */
@keyframes mobile-settle {
  from { transform: translateY(44px) scale(.98); opacity: .65; }
  to { transform: none; opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .has-scroll-motion [data-motion-mobile] {
      animation: mobile-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .has-scroll-motion [data-motion-mobile]:is(:focus-within, :target, :active),
    .motion-keyboard [data-motion-mobile] { animation: none; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-anchor-scroll:not(.motion-keyboard) { scroll-behavior: smooth; }
}


/* Marketing sections form native scroll pages; oversized sections remain scrollable. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.home-document:not(.motion-keyboard),
  html:has(.page-providers):not(.motion-keyboard) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 64px;
  }
  :is(.page-home, .page-providers) main > section {
    min-height: calc(100svh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  :is(.page-home, .page-providers) .site-footer { scroll-snap-align: start; }
}