.ap-sites-page .cs-models { --model-cut: 0px; --model-phone-width: 232.5px; --models-tab-height: 128px; --models-gutter: max(calc((100% - 1180px) / 2), clamp(16px, 4vw, 40px)); color: #181817; background: transparent; padding: 0 0 16px; isolation: isolate; scroll-margin-top: var(--cs-header-height,72px); }
.ap-sites-page .cs-models::before { content: ""; position: absolute; inset: var(--models-tab-height) 0 0; z-index: -1; background: #f0eee8; }
.ap-sites-page .cs-models::after { content: ""; position: absolute; top: 0; left: 0; width: calc(var(--models-gutter) + min(40vw, 520px)); height: var(--models-tab-height); z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 160' preserveAspectRatio='none'%3E%3Cpath fill='%23f0eee8' d='M0 0H780C890 0 870 160 1000 160V161H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ap-sites-page .cs-models-layout.container { display: block; max-width: none; width: 100%; padding: 0; }
.ap-sites-page .cs-models-heading { height: var(--models-tab-height); padding-left: var(--models-gutter); display: flex; align-items: center; box-sizing: border-box; }
.ap-sites-page .cs-models-heading h2 { font-size: var(--type-heading); line-height: var(--leading-heading); max-width: 44%; }
.ap-sites-page .cs-model-navigation { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin-top: 0; }
.ap-sites-page .cs-model-navigation button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #555; font-size: 20px; cursor: pointer; }
.ap-sites-page .cs-model-navigation button:hover { background: #dfddd7; }
.ap-sites-page .cs-model-navigation button:disabled { opacity: .3; cursor: default; }
.ap-sites-page .cs-model-counter { min-width: 54px; text-align: center; color: var(--muted); font-size: var(--type-body-small); font-variant-numeric: tabular-nums; }
.ap-sites-page .cs-model-navigation .cs-model-autoplay { margin-left: 8px; font-size: 16px; }
.ap-sites-page .cs-model-track { display: flex; gap: 32px; overflow-x: auto; min-width: 0; width: 100%; box-sizing: border-box; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 48px var(--models-gutter) 56px; scroll-padding-inline: var(--models-gutter); overscroll-behavior-x: contain; }
.ap-sites-page .cs-model-track::-webkit-scrollbar { display: none; }
.ap-sites-page .cs-model-group { flex: 0 0 auto; box-sizing: border-box; padding: 0; scroll-snap-align: none; }
.ap-sites-page .cs-model-cluster { display: flex; gap: 24px; align-items: end; }
.ap-sites-page .cs-model-slide { position: relative; flex: 0 0 var(--model-phone-width); width: var(--model-phone-width); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ap-sites-page .cs-model-handset { --screen-left: 8.8%; --screen-top: 6.6%; --screen-width: 82.5%; --screen-height: 88.9%; position: relative; width: 100%; aspect-ratio: 898 / 1751; filter: drop-shadow(0 10px 12px #0002); transition: transform 240ms ease, filter 240ms ease; }
.ap-sites-page .cs-model-frame { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }
.ap-sites-page .cs-model-phone-screen { position: absolute; left: var(--screen-left); top: var(--screen-top); width: var(--screen-width); height: var(--screen-height); border-radius: 8% / 4%; overflow: hidden; background: #fff; }
.ap-sites-page .cs-model-handset::after { content: ""; position: absolute; z-index: 5; left: var(--screen-left); top: var(--screen-top); width: var(--screen-width); height: var(--screen-height); border-radius: 8% / 4%; pointer-events: none; opacity: .7; background: linear-gradient(115deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 38%,transparent 64%); box-shadow: inset 0 0 0 1px #0003,inset 2px 0 4px #fff1,inset 0 3px 10px #0001; transition: opacity 240ms ease; }
.ap-sites-page .cs-model-slide:hover .cs-model-handset::after,.ap-sites-page .cs-model-slide:focus-within .cs-model-handset::after { opacity: 1; }
.ap-sites-page .cs-model-phone-screen iframe { position: absolute; top: 0; left: 0; display: block; width: 390px; height: 780px; border: 0; transform-origin: top left; pointer-events: none; background: #fff; }
.ap-sites-page .cs-model-open { position: absolute; inset: 0; z-index: 4; display: block; color: #fff; text-decoration: none; cursor: pointer; }
.ap-sites-page .cs-model-action { position: absolute; bottom: calc(4.5% + 8px); left: calc(8.8% + 8px); right: calc(8.7% + 8px); display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; box-sizing: border-box; border-radius: 999px; color: #fff; background: #111; white-space: nowrap; font-size: var(--type-body-small); line-height: 1.25; font-weight: var(--weight-semibold); }
.ap-sites-page .cs-model-action > span:last-child { flex: 0 0 auto; font-size: 20px; }
.ap-sites-page .cs-model-hover-name { position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; color: var(--text); font-size: var(--type-body-small); font-weight: var(--weight-semibold); white-space: nowrap; transition: opacity 160ms ease; }
.ap-sites-page .cs-open-short { display: none; }
@media (hover:hover) and (pointer:fine) {
  .ap-sites-page .cs-model-slide:hover { z-index: 5; }
  .ap-sites-page .cs-model-slide:hover .cs-model-hover-name { opacity: 1; visibility: visible; }
  .ap-sites-page .cs-model-slide:hover .cs-model-handset { transform: translateY(-12px) scale(1.15); filter: drop-shadow(0 18px 16px #0004); }
}
.ap-sites-page .cs-model-slide:focus-within { z-index: 5; }
.ap-sites-page .cs-model-slide:focus-within .cs-model-hover-name { opacity: 1; visibility: visible; }
.ap-sites-page .cs-model-slide:focus-within .cs-model-handset { transform: translateY(-12px) scale(1.15); filter: drop-shadow(0 18px 16px #0004); }
@media (prefers-reduced-motion:reduce) {
  .ap-sites-page .cs-model-handset { transition: none; }
  .ap-sites-page .cs-model-slide:hover .cs-model-handset,.ap-sites-page .cs-model-slide:focus-within .cs-model-handset { transform: none; }
}
.ap-sites-page .cs-model-open:hover { text-decoration: underline; text-underline-offset: 4px; }
.ap-sites-page .cs-models button:focus-visible,.ap-sites-page .cs-model-open:focus-visible,.ap-sites-page .cs-model-track:focus-visible,.ap-sites-page .cs-model-dialog button:focus-visible { outline: 3px solid #777; outline-offset: 3px; }
.ap-sites-page .cs-model-devices { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: #fff; flex: 0 0 auto; }
.ap-sites-page .cs-model-devices button { min-height: var(--cta-height-compact); padding: var(--space-1) var(--space-3); border: 0; border-radius: 999px; color: #111; background: none; font: inherit; font-size: var(--type-body-small); cursor: pointer; }
.ap-sites-page .cs-model-devices button[aria-pressed=true] { color: #fff; background: #111; }
.ap-sites-page .cs-model-dialog { box-sizing: border-box; width: min(1440px,calc(100% - 32px)); max-width: none; height: calc(100dvh - 32px); max-height: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: var(--surface-secondary); box-shadow: 0 24px 64px #0005; overflow: hidden; }
.ap-sites-page .cs-model-dialog::backdrop { background: #000c; }
.ap-sites-page .cs-model-dialog[open] { display: flex; flex-direction: column; }
.ap-sites-page .cs-dialog-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; }
.ap-sites-page .cs-dialog-toolbar > div:first-child { flex: 1; min-width: 0; }
.ap-sites-page .cs-dialog-label { display: none; }
.ap-sites-page .cs-dialog-toolbar h2 { margin: 0; font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.ap-sites-page .cs-dialog-close { display: grid; place-items: center; width: var(--cta-height-compact); height: var(--cta-height-compact); flex: 0 0 var(--cta-height-compact); padding: 0; border: 1px solid var(--line); border-radius: 50%; color: #111; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.ap-sites-page .cs-model-full-stage { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; background: var(--surface-secondary); }
.ap-sites-page .cs-model-full-stage iframe { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform-origin: top left; background: #fff; }

@media (max-width:900px) {
  .ap-sites-page .cs-models { --models-tab-height: 112px; }
  .ap-sites-page .cs-models::after { background: #f0eee8; width: 100%; }
  .ap-sites-page .cs-models-heading h2 { max-width: none; }
}
@media (max-width:760px) {
  .ap-sites-page .cs-model-dialog { width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
}
@media (max-width:480px) {
  .ap-sites-page .cs-dialog-toolbar { display: grid; grid-template-columns: minmax(0,1fr) var(--cta-height-compact); column-gap: var(--space-2); row-gap: 4px; padding: var(--space-1) var(--space-2); }
  .ap-sites-page .cs-dialog-toolbar > div:first-child { grid-column: 1 / -1; }
  .ap-sites-page .cs-dialog-toolbar h2 { font-size: var(--type-body-small); }
  .ap-sites-page .cs-dialog-toolbar .cs-model-devices { justify-self: start; }
  .ap-sites-page .cs-dialog-close { grid-column: 2; grid-row: 2; }
}
@media (max-width:760px) {
  .ap-sites-page .cs-models { --model-phone-width: 226.5px; }
  .ap-sites-page .cs-model-navigation button { width: 44px; height: 44px; }
  .ap-sites-page .cs-model-track { gap: 24px; }
  .ap-sites-page .cs-model-cluster { gap: 16px; }

  .ap-sites-page .cs-model-action { min-height: 44px; bottom: calc(4.5% + 3px); left: calc(8.8% + 3px); right: calc(8.7% + 3px); padding: 6px; gap: 2px; }
}