/* Original product screens alongside the design rationale. */
.ab-testing-page .scout-gallery-controls .editorial-symbol { display: block; width: 24px; height: 24px; fill: currentColor; stroke: none; }
.ab-testing-page .scout-screens figcaption > span > span { display: inline; margin: 0; }
.ab-testing-page .image-dialog { width: min(530px, calc(100% - 24px)); }
.ab-testing-page .image-dialog img { display: block; width: auto; max-width: 100%; height: auto; max-height: max(160px, calc(100dvh - 180px)); object-fit: contain; margin-inline: auto; }
@media (min-width: 721px) {
  .ab-testing-page .case-layout > .case-aside { z-index: 3; padding: 16px; margin: -16px; border-radius: 18px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background-color 240ms ease, backdrop-filter 240ms ease, box-shadow 240ms ease; }
  .ab-testing-page .case-layout > .case-aside.has-underlap { box-shadow: 0 8px 28px light-dark(#1c2a2214,#0005), 0 1px 5px light-dark(#1c2a220a,#0003); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ab-testing-page .case-layout > .case-aside.has-underlap { background: var(--glass-tint, var(--bg)); -webkit-backdrop-filter: blur(28px) saturate(1.35); backdrop-filter: blur(28px) saturate(1.35); }
  }
}
@media (prefers-reduced-motion: reduce) { .ab-testing-page .case-layout > .case-aside { transition: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .ab-testing-page .case-layout > .case-aside.has-underlap { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) { .ab-testing-page .case-layout > .case-aside.has-underlap { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } }
.ab-screen-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 36px 0 20px; align-items: start; }
.ab-screen-gallery-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; gap: 40px; }
.ab-screen-gallery-single { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
.ab-screen-gallery .evidence-figure { margin: 0; min-width: 0; }
[data-design] .ab-screen-gallery .evidence-figure > button { padding: 0; background: transparent; border-radius: 0; cursor: zoom-in; }
.ab-screen-gallery .evidence-figure img { display: block; width: 100%; height: auto; border-radius: 0; }
.ab-screen-gallery figcaption { display: grid; gap: 8px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ab-screen-gallery figcaption strong { color: var(--ink); font-weight: 550; }
.ab-screen-gallery figcaption > span:last-child { color: var(--accent); }
.story-section .ab-screen-note { font-size: 13px; line-height: 1.6; color: var(--muted); }
.ab-testing-page .case-hero h1 { max-width: 13ch; }
.ab-testing-page .ab-intro { max-width: 57ch; color: var(--muted); font-size: 18px; line-height: 1.6; margin: 24px 0; }
.ab-comparison { margin: 32px 0; }
.ab-contrast, .ab-timing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-card, 24px); background: var(--surface); }
.ab-contrast > div, .ab-timing > div { min-width: 0; }
.ab-contrast > div + div, .ab-timing > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
.story-section .ab-comparison h3 { font: 400 28px/1.2 var(--display); margin: 14px 0; }
.story-section .ab-comparison p { font-size: 15px; margin: 0; }
.ab-comparison figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ab-timing ol { list-style: none; padding: 0; margin: 18px 0 0; }
.ab-timing li { position: relative; padding: 0 0 22px 19px; font-size: 15px; color: var(--ink); }
.ab-timing li::before { content: ''; position: absolute; inset-inline-start: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ab-timing li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 2.5px; top: calc(.5em + 9px); bottom: 4px; width: 1px; background: var(--line); }
.ab-timing li:last-child { padding-bottom: 0; }
.ab-rationale { margin: 28px 0; }
.ab-rationale > div { display: grid; grid-template-columns: 1fr 2fr; gap: 28px; border-top: 1px solid var(--line); padding: 20px 0; }
.ab-rationale dt { font-weight: 550; color: var(--ink); }
.ab-rationale dd { margin: 0; color: var(--muted); }
.ab-work-cover { display: flex; flex-direction: column; justify-content: center; padding: 32px 28px 64px; }
.ab-work-preview { display: grid; gap: 24px; width: 100%; }
.ab-work-preview > div { border-inline-start: 2px solid var(--accent); padding-inline-start: 20px; }
.ab-work-preview span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.ab-work-preview strong { display: block; font: 400 clamp(26px, 3vw, 40px)/1.2 var(--display); color: var(--ink); }
@media (max-width: 620px) {
  .ab-screen-gallery, .ab-screen-gallery-pair { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; gap: 36px; }
  .ab-contrast, .ab-timing { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .ab-contrast > div + div, .ab-timing > div + div { border-inline-start: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .ab-rationale > div { grid-template-columns: 1fr; gap: 8px; }
}
@media print { .ab-comparison, .ab-rationale > div { break-inside: avoid; } }