.ap-sites-page .cs-hero { position: relative; color: #fff; background: #080808; padding-block: var(--hero-space); }
.ap-sites-page .cs-hero-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); align-items: center; gap: var(--space-5); }
.ap-sites-page .cs-hero-copy { position: relative; z-index: 1; min-width: 0; }
.ap-sites-page .cs-hero .eyebrow { color: #bcbcbc; }
.ap-sites-page .cs-hero h1 { margin: var(--space-5) 0 0; font-size: var(--type-display); font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: #fff; }
.ap-sites-page .cs-hero h1 span { color: #bcbcbc; }
.ap-sites-page .cs-hero-copy > p { max-width: 400px; margin: var(--space-4) 0 var(--space-5); color: #bcbcbc; font-size: var(--type-lead); line-height: var(--leading-lead); }
.ap-sites-page .cs-button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--cta-height); padding: var(--space-2) var(--cta-padding-x); border-radius: 999px; font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: 1.4; text-decoration: none; }
.ap-sites-page .cs-button-white { color: #080808; background: #fff; }
.ap-sites-page .cs-button-dark { color: #fff; background: #111; }
.ap-sites-page .cs-button:hover { box-shadow: inset 0 0 0 2px #888; }
.ap-sites-page .cs-text-link { display: flex; align-items: center; gap: var(--space-2); width: fit-content; margin-top: var(--space-4); color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.ap-sites-page .cs-showcase { position: relative; min-width: 0; width: 100%; margin: 0; padding: 0 0 var(--space-7); isolation: isolate; }
.ap-sites-page .cs-laptop { position: relative; width: 100%; aspect-ratio: 1559 / 1009; }
.ap-sites-page .cs-laptop-screen { position: absolute; top: 7.75%; left: 11.9%; width: 76.33%; height: 67.3%; overflow: hidden; background: #fff; clip-path: polygon(.3% 0,99.7% 0,100% 100%,0 100%); }
.ap-sites-page .cs-laptop-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.ap-sites-page .cs-laptop-screen::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 12px #0004; background: linear-gradient(115deg,#fff1,transparent 45%); pointer-events: none; }
.ap-sites-page .cs-laptop-frame { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.ap-sites-page .cs-phone { position: absolute; z-index: 2; width: 23%; aspect-ratio: 375 / 811; bottom: var(--space-7); right: 0; border: 6px solid #181817; border-radius: 25px; overflow: hidden; background: #fff; box-shadow: 0 18px 35px #0008,0 0 0 1px #777; }
.ap-sites-page .cs-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ap-sites-page .cs-phone-camera { position: absolute; z-index: 1; top: 5px; left: 50%; width: 35%; height: 8px; transform: translateX(-50%); border-radius: 999px; background: #181817; }
.ap-sites-page .cs-showcase figcaption { position: absolute; bottom: var(--space-2); left: 12%; color: #bcbcbc; font-size: var(--type-body-small); line-height: var(--leading-body); }
.ap-sites-page .cs-showcase figcaption span { display: block; color: #fff; font-weight: var(--weight-semibold); }
.ap-sites-page .cs-section { position: relative; z-index: 2; padding-block: var(--section-space); }
.ap-sites-page .cs-section h2 { margin: 0; font-size: var(--type-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-semibold); color: inherit; }
.ap-sites-page .cs-section h3 { margin: 0; font-size: var(--type-subheading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-semibold); color: inherit; }
.ap-sites-page .cs-section p { margin: var(--space-3) 0 0; font-size: var(--type-body); line-height: var(--leading-body); color: var(--muted); }
.ap-sites-page .cs-section-heading { margin-bottom: var(--space-6); }
.ap-sites-page .cs-section-heading > p { font-size: var(--type-lead); }
.ap-sites-page .cs-formats { background: #fff; scroll-margin-top: var(--cs-header-height,72px); }
.ap-sites-page .cs-format-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gap); }
.ap-sites-page .cs-format { min-width: 0; min-height: 350px; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius); background: #f3f3f3; }
.ap-sites-page .cs-number { display: block; font-size: var(--type-body-small); color: var(--muted); }
.ap-sites-page .cs-format-dark { color: #fff; background: #080808; }
.ap-sites-page .cs-format-dark p,.ap-sites-page .cs-format-dark .cs-number { color: #bcbcbc; }
.ap-sites-page .cs-format-bottom { display: block; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid #d5d5d5; font-size: var(--type-body-small); line-height: var(--leading-body); }
.ap-sites-page .cs-format-dark .cs-format-bottom { border-color: #444; }
.ap-sites-page .cs-content { background: #f3f3f3; }
.ap-sites-page .cs-content-heading h2 { font-size: var(--type-heading); line-height: var(--leading-heading); }
.ap-sites-page .cs-content-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.ap-sites-page .cs-content-list > div { padding-top: var(--space-4); border-top: 1px solid #d1d1d1; }
.ap-sites-page .cs-process { color: #fff; background: #080808; }
.ap-sites-page .cs-process-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); }
.ap-sites-page .cs-process-grid li { padding-top: var(--space-4); border-top: 1px solid #444; }
.ap-sites-page .cs-process-grid h3 { margin-top: var(--space-5); }
.ap-sites-page .cs-process-grid p,.ap-sites-page .cs-process-grid .cs-number { color: #bcbcbc; }
.ap-sites-page .cs-questions { background: #fff; }
.ap-sites-page .cs-questions-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); gap: var(--space-7); }
.ap-sites-page .cs-question-list details { border-top: 1px solid #d1d1d1; }
.ap-sites-page .cs-question-list details:last-child { border-bottom: 1px solid #d1d1d1; }
.ap-sites-page .cs-question-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; list-style: none; font-size: var(--type-body); font-weight: var(--weight-semibold); line-height: var(--leading-body); }
.ap-sites-page .cs-question-list summary::-webkit-details-marker { display: none; }
.ap-sites-page .cs-question-list summary span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #f0eee8; font-size: var(--type-subheading); line-height: 1; }
.ap-sites-page .cs-question-list details[open] summary span { transform: rotate(45deg); }
.ap-sites-page .cs-question-list details p { margin: 0; padding: 0 var(--space-6) var(--space-4) 0; }
.ap-sites-page .cs-question-list details p a { display: block; margin-top: var(--space-3); text-decoration: underline; text-underline-offset: 4px; }
.ap-sites-page .cs-closing { background: var(--background); }
.ap-sites-page .cs-closing h2 { font-size: var(--type-display); line-height: var(--leading-display); }
.ap-sites-page .cs-closing p { font-size: var(--type-lead); }
.ap-sites-page .cs-closing .cs-button { margin-top: var(--space-5); min-width: 300px; }
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .ap-sites-page .cs-hero { position: sticky; top: var(--cs-header-height,72px); height: calc(100dvh - var(--cs-header-height,72px)); min-height: 0; padding-block: var(--space-5); }
  .ap-sites-page .cs-hero-grid { height: 100%; }
}
@media (min-width:901px) and (max-height:650px) {
  .ap-sites-page .cs-hero { padding-block: var(--space-3); }
  .ap-sites-page .cs-hero h1 { font-size: var(--type-heading); margin-top: var(--space-4); }
  .ap-sites-page .cs-hero-copy > p { font-size: var(--type-body); margin-block: var(--space-3); }
  .ap-sites-page .cs-text-link { margin-top: var(--space-2); }
  .ap-sites-page .cs-showcase { max-width: 500px; justify-self: end; padding-bottom: var(--space-6); }
  .ap-sites-page .cs-phone { bottom: var(--space-6); }
  .ap-sites-page .cs-showcase figcaption { bottom: 0; }
}
@media (max-width:900px) {
  .ap-sites-page .cs-hero-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }
  .ap-sites-page .cs-hero-copy > p { max-width: 520px; }
  .ap-sites-page .cs-showcase { max-width: 640px; justify-self: center; }
  .ap-sites-page .cs-questions-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
  .ap-sites-page .cs-format { padding: var(--space-4); }
}
@media (max-width:760px) {
  .ap-sites-page .cs-format-grid,.ap-sites-page .cs-process-grid,.ap-sites-page .cs-content-list { grid-template-columns: minmax(0,1fr); }
  .ap-sites-page .cs-format { min-height: 0; gap: var(--space-4); }
  .ap-sites-page .cs-format-bottom { margin-top: var(--space-2); padding-top: var(--space-3); }
  .ap-sites-page .cs-section-heading { margin-bottom: var(--space-5); }
  .ap-sites-page .cs-process-grid { gap: var(--space-5); }
  .ap-sites-page .cs-process-grid h3 { margin-top: var(--space-3); }
  .ap-sites-page .cs-hero h1 { margin-top: var(--space-4); }
}
@media (max-width:480px) {
  .ap-sites-page .cs-hero { padding-block: var(--space-5); }
  .ap-sites-page .cs-hero-grid { gap: var(--space-5); }
  .ap-sites-page .cs-showcase { width: calc(100% + var(--space-4)); max-width: none; padding-bottom: var(--space-6); }
  .ap-sites-page .cs-phone { width: 25%; bottom: var(--space-6); right: var(--space-2); border-width: 4px; border-radius: 18px; }
  .ap-sites-page .cs-phone-camera { top: 4px; height: 5px; }
  .ap-sites-page .cs-showcase figcaption { left: var(--space-4); bottom: 0; }
  .ap-sites-page .cs-closing .cs-button { min-width: 0; width: 100%; }
}