/* V20: Apple Store motion with slightly softer shadows, per user refinement.
   The source uses a 1% scale, not a translateY lift.
   Shared by actual card surfaces on every page. Open text, lists and forms stay flat.
   Only transform and shadow transition here, avoiding unrelated layout animation. */
:is(
  .home-page :is(.service-grid > li, .comparison-card, .process-section .process-steps > .process-card, .process-section .success-panel),
  .services-page .services-bento .service-detail,
  .locale-page .locale-market-grid > :is(p, .locale-market-card),
  .locale-page .locale-services .service-grid > li,
  .locale-page .process-section :is(.process-steps > .process-card, .success-panel),
  .compare-page :is(.article-comparison-card, .article-cost-breakdown, .article-cost-professional)
) {
  box-shadow: 2px 4px 14px rgb(0 0 0 / 6%);
  transform-origin: center;
  transition: transform .3s cubic-bezier(0, 0, .5, 1), box-shadow .3s cubic-bezier(0, 0, .5, 1);
}
@media (hover: hover) and (pointer: fine) {
  :is(
  .home-page :is(.service-grid > li, .comparison-card, .process-section .process-steps > .process-card, .process-section .success-panel),
  .services-page .services-bento .service-detail,
  .locale-page .locale-market-grid > :is(p, .locale-market-card),
  .locale-page .locale-services .service-grid > li,
  .locale-page .process-section :is(.process-steps > .process-card, .success-panel),
  .compare-page :is(.article-comparison-card, .article-cost-breakdown, .article-cost-professional)
):is(:hover, :focus-within) {
    box-shadow: 2px 4px 18px rgb(0 0 0 / 12%);
    transform: scale3d(1.01, 1.01, 1.01);
  }
}

/* Leave room for the shadow and scale inside the horizontal gallery. */
.home-page .service-grid.v12-service-track,
.home-page .service-grid:not(.v12-service-track),
.locale-page .locale-services .service-grid { padding-block: 20px 28px; }
:is(.home-page, .locale-page) .v12-service-gallery { margin-top: 20px; }
:is(.home-page, .locale-page) .v12-gallery-controls { margin-top: 4px; }
.home-page .comparison-stage { overflow-clip-margin: 28px; }

/* Six consecutive steps, with the compact icon/title rhythm of Store benefit cards. */
:is(.home-page, .locale-page) .process-steps { gap: 20px; }
:is(.home-page, .locale-page) .process-section .process-steps > .process-card {
  padding: 28px;
  gap: 12px;
  border-radius: 18px;
}
:is(.home-page, .locale-page) .process-section .stage-heading { gap: 14px; }
:is(.home-page, .locale-page) .process-section .stage-icon { width: 36px; height: 36px; }
:is(.home-page, .locale-page) .process-section .stage-icon .icon { width: 32px; height: 32px; }
:is(.home-page, .locale-page) .process-section .stage-heading h3 {
  min-height: 0;
  font-size: 1.5rem;
  line-height: 1.1667;
  letter-spacing: -.018em;
}
:is(.home-page, .locale-page) .process-section .process-steps .stage-footer { top: 30px; right: 28px; }
:is(.home-page, .locale-page) .process-section .success-panel {
  width: 100%;
  max-width: none;
  margin: 24px auto 0;
  border-radius: 18px;
}
:is(.home-page, .locale-page) .process-section .success-card { padding: 28px 32px; gap: 14px; }
:is(.home-page, .locale-page) .process-section .success-card .stage-heading { gap: 16px; }
:is(.home-page, .locale-page) .process-section .success-card .stage-icon { width: 48px; height: 48px; flex-basis: 48px; }
:is(.home-page, .locale-page) .process-section .success-card .stage-icon .icon { width: 28px; height: 28px; }
:is(.home-page, .locale-page) .process-section .success-card .stage-heading h3 { min-height: 0; font-size: 1.5rem; line-height: 1.1667; }
:is(.home-page, .locale-page) .process-section .success-card > p { max-width: 540px; }

@media (max-width: 699px) {
  :is(.home-page, .locale-page) .process-steps { gap: 16px; }
  :is(.home-page, .locale-page) .process-section .process-steps > .process-card { padding: 24px; }
  :is(.home-page, .locale-page) .process-section .stage-heading h3 { min-height: 0; }
  :is(.home-page, .locale-page) .process-section .process-steps .stage-footer { top: 26px; right: 24px; }
  :is(.home-page, .locale-page) .process-section .success-panel { margin-top: 16px; }
  :is(.home-page, .locale-page) .process-section .success-card { padding: 28px 24px; }
}
@media (max-width: 639px) {
  .home-page .service-grid.v12-service-track,
.home-page .service-grid:not(.v12-service-track),
.locale-page .locale-services .service-grid { padding-block: 20px 24px; }
  :is(.home-page, .locale-page) .v12-service-gallery { margin-top: 12px; }
  :is(.home-page, .locale-page) .v12-gallery-controls { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(
  .home-page :is(.service-grid > li, .comparison-card, .process-section .process-steps > .process-card, .process-section .success-panel),
  .services-page .services-bento .service-detail,
  .locale-page .locale-market-grid > :is(p, .locale-market-card),
  .locale-page .locale-services .service-grid > li,
  .locale-page .process-section :is(.process-steps > .process-card, .success-panel),
  .compare-page :is(.article-comparison-card, .article-cost-breakdown, .article-cost-professional)
) {
    transform: none !important;
    transition: none;
  }
}

/* Locale chapters use the same surfaces, spacing and controls throughout. */
.locale-page .locale-cases { width: min(var(--ui-width, 1200px), calc(100% - var(--ui-gutter, 24px) * 2)); }
.locale-page .locale-scope {
  margin: 1.75rem auto 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.locale-page .locale-insight-grid article { border: 0; padding: 0; }
.locale-page .locale-other {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 80px max(var(--ui-gutter, 24px), calc((100% - var(--ui-width, 1200px)) / 2));
  border: 0;
  border-radius: 0;
  background: #f5f5f7;
}
.locale-page .locale-other .language-list li { background: #fff; }
.locale-page .locale-other .language-list a {
  background: #fff;
  color: #1d1d1f;
}
.locale-page .locale-other .language-list a:is(:hover, :focus-visible) { background: #e8e8ed; color: #1d1d1f; }
.locale-page .locale-market-grid > .locale-market-card {
  min-width: 0;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  border-radius: 1.75rem;
  background: #fff;
  color: #1d1d1f;
  font-size: 1.1875rem;
  line-height: 1.4737;
}
.locale-page .market-illustration {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 28px;
}
.locale-page .locale-market-card h3 {
  margin: 0 0 24px;
  font: 600 1.5rem/1.1667 var(--heading);
  letter-spacing: -.018em;
  text-transform: none;
  text-wrap: balance;
}
.locale-page .market-card-copy p { max-width: none; margin: 0; }
.locale-page .market-card-copy p + p { margin-top: 1.25rem; }
@media (max-width: 699px) {
  .locale-page .locale-other { padding-block: 64px; }
  .locale-page .locale-market-grid > .locale-market-card { padding: 1.75rem; font-size: 1.0625rem; line-height: 1.4706; }
  .locale-page .market-illustration { height: 140px; margin-bottom: 24px; }
}
@media (max-width: 399px) {
  .locale-page .locale-market-grid > .locale-market-card { padding: 1.5rem; }
}

/* Keep the same quote control and preserve the approved inline emphasis. */
.locale-page .locale-hero .primary-button { padding-inline: 26px; }
.services-page .services-intro strong { font-weight: 600; }

/* A quiet physical response for the open use-case examples. */
:is(.home-page, .locale-page) .use-cases li {
  transition: transform .3s cubic-bezier(0, 0, .5, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.home-page, .locale-page) .use-cases li:hover {
    transform: translateY(-5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-page, .locale-page) .use-cases li {
    transform: none;
    transition: none;
  }
}