/* Page content only; shared chrome is owned by report-shell.css. */
.proposal-stage{min-width:0;padding:0}
.comparison-group{min-width:0}
.proposal-stage .group-heading{display:none}
.group-heading{text-align:center;margin:0 0 12px}
.group-heading p{font-size:12px;line-height:18px;color:var(--muted);margin:0 0 4px}
.group-heading h3{font-size:14px;line-height:20px;font-weight:500;margin:0;color:var(--muted)}
.comparison-pair{display:flex;justify-content:center;align-items:flex-start;width:var(--comparison-width);margin-inline:auto;gap:calc(var(--comparison-gap,28px) * var(--pair-scale,1));min-width:0}
.device-column{margin:0;width:calc(var(--device-width) * 1px * var(--device-scale));flex:none;min-width:0}
.device-column figcaption{font-size:12px;line-height:18px;text-align:center;color:var(--muted);margin:0 0 12px;white-space:nowrap}
.device-frame{width:100%;aspect-ratio:var(--device-width) / var(--device-height);border:2px solid #343c37;border-radius:var(--device-radius);background:#fff;overflow:hidden;position:relative;box-shadow:0 4px 18px #26392c0a}
.device-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.device-frame.has-preview{border:0}
.device-frame.has-preview::after{content:"";position:absolute;inset:0;border:2px solid #343c37;border-radius:inherit;pointer-events:none}
.device-preview{display:block;border:0;position:absolute;inset:0;width:calc(var(--device-width) * 1px);height:calc(var(--device-height) * 1px);transform:scale(var(--device-scale));transform-origin:top left;background:#fff}
.screen-placeholder{position:absolute;inset:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}
.screen-placeholder .placeholder-mark{width:36%;aspect-ratio:1.3;border:1px solid var(--line);border-radius:4px;position:relative;margin-bottom:4px}
.placeholder-mark::before,.placeholder-mark::after{content:"";position:absolute;background:var(--line);height:1px;width:44%;left:28%;top:50%;transform:rotate(35deg)}
.placeholder-mark::after{transform:rotate(-35deg)}
.screen-placeholder small{font:inherit;color:var(--disabled)}
.duo-switch{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:8px auto 0;max-width:100%}
.duo-switch button{font:inherit;font-size:12px;line-height:18px;min-height:36px;padding:6px 9px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;cursor:pointer;white-space:nowrap}
.duo-switch button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.duo-switch button:disabled{opacity:.4;cursor:not-allowed}
.duo-switch button:hover:not(:disabled):not([aria-pressed=true]){background:var(--hover);color:var(--green)}
.proposal-context-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:32px;align-items:center;margin-top:48px}
.preview-slot{display:flex;align-items:center;justify-content:center;min-width:0}
.previous-preview .comparison-group{max-width:240px;width:100%}
.next-preview .comparison-group{max-width:160px;width:100%}
.previous-preview .comparison-pair{opacity:.65}
.next-preview .comparison-pair{opacity:.35}
.preview-slot .screen-placeholder,.preview-slot .device-column figcaption{display:none}
.preview-slot .device-frame{border-width:1px;box-shadow:none}
.preview-slot .preview-suppressed{display:none}
.step-navigation{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;max-width:300px}
.step-dots{display:flex;gap:6px;align-items:center;justify-content:center;flex-basis:100%;order:3}
.step-dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.step-dots span.current{width:18px;background:var(--green);border-radius:3px}
.research-panel{min-width:0}
.research-heading{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%;margin:0 0 28px}
.research-panel h2{font-size:24px;line-height:1.35;font-weight:500;margin:0}
.research-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.research-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:#e6ece6;color:var(--green);font-size:12px;line-height:18px;font-weight:500;white-space:nowrap}
.research-shots{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;width:100%;container-type:inline-size}
.research-shot{width:max-content;max-width:100%;margin:0}
.research-shot figcaption{font-size:14px;line-height:24px;margin:0 0 8px;color:var(--muted)}
.research-frame{width:max-content;max-width:100%}
.research-shot img{display:block;width:auto;height:auto;max-width:100%;border-radius:8px;background:#eef1ec}
.research-shot.is-landscape{width:min(100%,980px)}
.research-shot.is-landscape .research-frame,.research-shot.is-landscape .research-zoom,.research-shot.is-landscape img{width:100%;height:auto}
.research-shot.is-portrait{width:min(100%,540px)}
.research-shot.is-portrait .research-frame,.research-shot.is-portrait .research-zoom{width:100%}
.research-shot.is-portrait img{width:auto;max-width:100%;max-height:860px}
@container (min-width: 880px){
 .research-shots:has(> .research-shot:nth-child(2)) > .research-shot{width:calc((100% - 28px) / 2);max-width:calc((100% - 28px) / 2)}
}
.research-zoom{display:block;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:8px}
.research-zoom:disabled{cursor:default}
.research-viewer{width:auto;max-width:96vw;max-height:96vh;margin:auto;padding:48px 24px 24px;border:0;border-radius:12px;background:#1c2622}
.research-viewer::backdrop{background:rgba(20,28,24,.78)}
.research-viewer img{display:block;max-width:min(92vw,1400px);max-height:calc(96vh - 88px);width:auto;height:auto;margin:auto}
.research-viewer-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.research-viewer-close:hover{background:rgba(255,255,255,.12)}
.research-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:min(100%,420px);aspect-ratio:3 / 4;border-radius:8px;color:var(--muted);font-size:14px;background:#eef1ec}
.research-placeholder[hidden]{display:none}
.research-placeholder svg{width:28px;height:28px;stroke:var(--disabled)}
@media(max-width:999px){.proposal-context-row{gap:16px}.step-navigation .report-action{padding-left:12px;padding-right:12px}}
@media(max-width:767px){
 .research-panel h2{font-size:20px}
 .device-frame{border-width:1px}.device-column figcaption{white-space:normal}
 .device-frame.has-preview::after{border-width:1px}
 .screen-placeholder{font-size:11px;gap:2px}.screen-placeholder .placeholder-mark{display:none}
 .duo-switch button{padding:5px 6px}
 .proposal-context-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px}
 .step-navigation{grid-column:1/-1;grid-row:1;justify-self:center}
 .previous-preview{grid-column:1;grid-row:2}.next-preview{grid-column:2;grid-row:2}
 .research-shots{gap:16px}.research-heading{margin-bottom:20px}
 .research-shot.is-portrait img{max-height:82vh;max-width:min(100%,420px)}
}

/* Reserve the inner screen slot so the comparison anchor stays fixed. */
.duo-column{width:var(--duo-slot-width)}
.duo-column .device-frame{width:calc(var(--device-width) * 1px * var(--device-scale));height:calc(var(--device-height) * 1px * var(--device-scale));aspect-ratio:auto;margin-inline:auto 0}
/* Device motion uses the existing live preview, without scaling or duplicating it. */
.duo-column .device-frame{transform-origin:50% 50%;backface-visibility:hidden}
.duo-moving{will-change:transform,opacity;pointer-events:none}
.duo-fold-crease{position:absolute;z-index:2;top:0;bottom:0;left:calc(50% - 18px);width:36px;background:linear-gradient(90deg,transparent,#0005 45%,#ffffff66 52%,transparent);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.duo-moving{will-change:auto}.duo-fold-crease{display:none}}

/* A real centre hinge: the stationary screen and the moving half are separate. */
.duo-column{position:relative}
.duo-fold-layer{position:absolute;perspective:1800px;pointer-events:none;z-index:3}
.duo-fold-leaf{position:absolute;left:0;top:0;width:50%;height:100%;transform-origin:right center;transform-style:preserve-3d;will-change:transform}
.duo-fold-front,.duo-fold-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.duo-fold-front{border-radius:55px 0 0 55px;background:#fff;box-shadow:inset -2px 0 #343c37}
.duo-fold-back{transform:rotateY(180deg);border-radius:0 55px 55px 0;background:linear-gradient(110deg,#3b403d,#202522);border:2px solid #343c37;box-shadow:8px 0 24px #0002}
.duo-fold-surface{max-width:none;pointer-events:none}
.duo-fold-shade{position:absolute;inset:0;background:linear-gradient(270deg,#0009,transparent 50%);pointer-events:none}

/* Keep controls and the screen right edge anchored across fold states. */
.duo-column .duo-switch{justify-content:flex-end}

/* Scheme choice is independent from the physical screen controls. */
.duo-scheme-switch{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin:8px 0 0}
.duo-scheme-switch[hidden]{display:none}
.duo-scheme-switch button{font:inherit;font-size:12px;line-height:18px;min-height:36px;padding:6px 12px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.duo-scheme-switch button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.duo-scheme-switch button:hover:not([aria-pressed=true]){background:var(--hover);color:var(--green)}