/* Compact previews keep each feature visible; opening one shows the original. */
html { scrollbar-gutter:stable; }
.gallery-hint { margin:0 0 14px; color:var(--faint); font-size:14px; }
.gallery-trigger { display:block; cursor:zoom-in; }
.gallery-video-trigger { display:block; max-width:100%; border-radius:10px; cursor:zoom-in; }
.gallery-video-trigger:focus-visible { outline:2px solid var(--accent-text); outline-offset:5px; }
.gallery-video-trigger video { pointer-events:none; }
.feature-preview-grid { --gallery-media-height:280px; --gallery-media-inset:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.feature-preview-grid > .feature-preview { position:relative; display:flex; flex-direction:column; min-width:0; }
.feature-preview > .gallery-trigger::after { content:""; position:absolute; inset:0; border-radius:12px; }
.feature-preview-grid .feature-preview-media {
  display:flex; flex:none; align-items:center; justify-content:center;
  height:var(--gallery-media-height); min-width:0; padding:var(--gallery-media-inset);
  border:1px solid var(--line); border-radius:12px; background:#111114;
}
.feature-preview-grid figcaption { padding:16px 2px 0; }
.feature-preview-grid h3,.feature-preview-grid h4 { margin:0 0 7px; font-size:16px; line-height:1.4; font-weight:500; letter-spacing:-.015em; }
.feature-preview-grid p { color:var(--muted); font-size:14px; line-height:1.65; }
.feature-preview-media .product-image--dialog {
  width:min(calc(100% - 2 * var(--dialog-frame-gutter)),calc((var(--gallery-media-height) - 2 * var(--gallery-media-inset) - 2px - 2 * var(--dialog-frame-gutter)) * var(--dialog-width) / var(--dialog-height)));
}
/* A 32px bezel surrounds the 1179 × 2556 capture at its original proportions. */
.phone-frame {
  position:relative; flex:none; aspect-ratio:1243 / 2620;
  border:1px solid #606066; border-radius:14% / 6.64%;
  background:linear-gradient(135deg,#45454b,#161619 28%,#2c2c31 72%,#505056);
  box-shadow:inset 0 0 0 1px #09090b,0 12px 24px #0005;
}
.phone-frame img {
  position:absolute; left:calc(32 / 1243 * 100%); top:calc(32 / 2620 * 100%);
  width:calc(1179 / 1243 * 100%); height:calc(2556 / 2620 * 100%); max-width:none;
  border:0; border-radius:12% / 5.5352%; object-fit:contain;
}
.phone-frame::before,.phone-frame::after {
  content:""; position:absolute; width:1.2%; border-radius:2px;
  background:linear-gradient(90deg,#242429,#68686f,#2c2c31); pointer-events:none;
}
.phone-frame::before {
  left:-1.35%; top:19%; height:13%;
  background:linear-gradient(to bottom,#4b4b51 0 43%,transparent 43% 56%,#4b4b51 56%);
}
.phone-frame::after { right:-1.35%; top:24%; height:10%; }
.phone-frame-camera {
  position:absolute; z-index:1; top:2.6%; left:35%; width:30%; height:3.3%;
  border-radius:999px; background:#030304; box-shadow:inset 0 0 0 1px #ffffff05;
  pointer-events:none;
}
.feature-preview--phone .phone-frame { width:auto; height:100%; max-width:100%; }
.feature-preview--phone .feature-preview-media { border:0; border-radius:0; background:transparent; }
#conflict-management .feature-preview-media { background:#141218; border-color:#bda7ff1c; }

/* Activity and recovery form one smaller row beneath the conflict comparison. */
.sync-detail-galleries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:48px; }
.sync-detail-galleries .feature-group { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:24px; margin-top:0; }
.sync-detail-galleries .feature-group-heading { display:block; margin-bottom:0; }
.sync-detail-galleries h3 { font-size:23px; }
.sync-detail-galleries .feature-group-heading p { margin-top:12px; font-size:14px; line-height:1.7; max-width:none; }
.sync-detail-galleries .feature-preview-grid { --gallery-media-height:200px; --gallery-media-inset:8px; gap:18px; }
.recovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-radius:0; overflow:visible; background:transparent; }

/* Related phone views share equal cards, screen sizes, and caption placement. */
.mobile-gallery { --gallery-media-height:240px; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; }
.reading-previews { --gallery-media-height:300px; grid-template-columns:repeat(3,minmax(0,1fr)); }

@media(max-width:1000px) {
  .sync-detail-galleries { grid-template-columns:minmax(0,1fr); gap:48px; }
  .sync-detail-galleries .feature-preview-grid { --gallery-media-height:240px; }
  .mobile-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .feature-preview-grid { --gallery-media-height:210px; --gallery-media-inset:8px; gap:20px 16px; }
  .sync-detail-galleries { margin-top:40px; }
  .feature-preview-grid--conflicts,.sync-detail-galleries .feature-preview-grid { --gallery-media-height:clamp(240px,70vw,380px); grid-template-columns:minmax(0,1fr); gap:28px; }
  .feature-preview-grid figcaption { padding:12px 0 0; }
  .feature-preview-grid h3,.feature-preview-grid h4 { font-size:15px; }
  .mobile-gallery { --gallery-media-height:260px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reading-previews { --gallery-media-height:260px; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Native dialog supplies focus containment, Escape, and an inert page behind it. */
html.gallery-open { overflow:hidden; }
.media-viewer {
  position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; color:var(--text); background:#09090c; overflow:hidden;
  overscroll-behavior:contain;
  /* Image clicks can focus the dialog; only its controls need a focus ring. */
  outline:none;
}
.media-viewer::backdrop { background:#09090c; }
.media-viewer[open] { animation:gallery-appear 150ms ease-out; }
.media-viewer-layout {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto; height:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.media-viewer-header { display:flex; align-items:center; gap:20px; min-height:84px; padding:16px 24px; }
.media-viewer-header > div { flex:1; min-width:0; }
.media-viewer-group { color:var(--muted); font-size:12px; margin-bottom:5px; }
.media-viewer-header h2 { margin:0; font-size:18px; line-height:1.3; letter-spacing:-.015em; text-wrap:initial; }
.media-viewer-count { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.media-viewer-control {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:8px; background:transparent; color:var(--muted); flex-shrink:0;
}
.media-viewer-control:hover { color:var(--text); background:#ffffff08; }
.media-viewer-stage { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; align-items:center; gap:12px; min-height:0; padding:0 16px; }
.media-viewer-content { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-width:0; min-height:0; container-type:size; }
.media-viewer-media { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.media-viewer-content .phone-frame { width:min(calc(100cqw - 12px),calc(100cqh * 1243 / 2620)); }
.media-viewer-caption { margin:0 auto; padding:16px 24px 12px; max-width:760px; color:var(--muted); text-align:center; font-size:14px; line-height:1.6; }
.media-viewer-thumbnails { display:flex; gap:10px; max-width:100%; width:max-content; margin:0 auto; padding:6px 24px 20px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.media-viewer-thumbnail {
  position:relative; display:grid; place-items:center; flex:0 0 92px; height:62px; padding:4px;
  border:1px solid var(--line-strong); border-radius:8px; background:#141417;
}
.media-viewer-thumbnail img { width:100%; height:100%; min-height:0; object-fit:contain; border-radius:3px; }
.media-viewer-thumbnail[aria-current] { border-color:var(--accent-text); box-shadow:0 0 0 1px var(--accent-text); }
.media-viewer-thumbnail-play { position:absolute; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#000a; color:white; font-size:9px; }
@keyframes gallery-appear { from { opacity:0; } to { opacity:1; } }
@media(max-width:700px) {
  .media-viewer-header { min-height:76px; padding:12px 10px 12px 16px; gap:12px; }
  .media-viewer-header h2 { font-size:16px; }
  .media-viewer-stage { grid-template-columns:44px minmax(0,1fr) 44px; gap:0; padding:0 4px; }
  .media-viewer-stage .media-viewer-control { width:44px; height:48px; }
  .media-viewer-caption { padding:12px 20px; font-size:14px; }
  .media-viewer-thumbnails { gap:8px; padding:4px 16px 16px; }
  .media-viewer-thumbnail { flex-basis:68px; height:50px; }
}
@media(max-height:500px) {
  .media-viewer-header { min-height:56px; padding-block:6px; }
  .media-viewer-group,.media-viewer-caption { display:none; }
  .media-viewer-thumbnails { padding-block:4px 8px; }
  .media-viewer-thumbnail { height:42px; flex-basis:64px; }
}
@media(prefers-reduced-motion:reduce) { .media-viewer[open] { animation:none; } }

/* Pointer use and slide arrows keep focus without outlining gallery controls. */
html:is([data-gallery-input="pointer"],[data-gallery-input="arrows"]) :is(.gallery-trigger,.gallery-video-trigger,.media-viewer button):focus {
  outline:none;
}
html[data-gallery-input="keyboard"] :is(.gallery-trigger,.gallery-video-trigger,.media-viewer button):focus {
  outline:2px solid var(--accent);
  outline-offset:4px;
}