/* Finished photographs carry the delivery story. */
.delivery-story{padding-block:85px 55px}
.delivery-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:36px}
.delivery-heading .eyebrow{font-size:15px;font-weight:400;margin-bottom:18px}
.delivery-heading h2{font-size:clamp(38px,4vw,57px);font-weight:400;line-height:1.06;letter-spacing:-.045em}
.delivery-copy{max-width:360px;padding-bottom:3px}
.delivery-copy p{font-size:18px;line-height:1.6}
.delivery-copy .text-link{font-size:16px;justify-content:flex-start;margin-top:15px}
.album-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.album-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.album-strip figcaption{font-size:13px;color:#aaa;margin-top:12px}

/* The complete photo and all controls share the available viewport. */
.transformation{height:min(830px,calc(100svh - 112px));padding:24px 0;margin-block:50px 65px;text-align:left}
.transformation .demo-shell{width:100%;max-width:none;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto 18px;gap:18px;position:relative}
.demo-disclosure{margin:0;font-size:12px;line-height:18px;color:#aaa;text-align:center}
.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:25px}
.demo-heading h2{font-size:clamp(29px,3vw,42px);font-weight:400;letter-spacing:-.04em;line-height:1.1}
.transformation .example-choices{display:flex;gap:4px;margin:0;flex-shrink:0;border-bottom:1px solid #303030}
.example-choices button{min-height:44px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:10px 14px;font-size:15px;color:#999;line-height:1.3}
.example-choices button[aria-pressed=true]{color:#fff;border-bottom-color:#eee}
.example-choices button:hover{color:#fff}
.transformation .transform-preview{height:100%;min-height:0;display:grid;place-items:center;container-type:size}
.transformation .transform-frame{width:min(100cqw,calc(100cqh * 4 / 3));height:min(100cqh,calc(100cqw * .75));max-width:100%;max-height:100%;aspect-ratio:auto;background:#000;border-radius:4px}
.transformation .transform-frame>img{width:100%;height:100%;object-fit:contain}
.photo-next{position:absolute;inset:0;z-index:5;width:100%;height:100%;border:0;border-radius:inherit;padding:0;background:transparent;cursor:pointer}
.photo-next:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.transformation .transform-badge{top:15px;left:15px;font-size:13px;padding:7px 13px;background:#000b}
.demo-footer{display:flex;justify-content:space-between;align-items:center;gap:20px}
.transformation .edit-choices{display:flex;gap:6px;padding:0;background:none;border-radius:0}
.edit-choices button{min-height:44px;border:1px solid transparent;border-radius:25px;background:none;padding:10px 19px;font-size:15px;line-height:1.3;color:#aaa;white-space:nowrap}
.edit-choices button[aria-pressed=true]{background:#eee;color:#111}
.edit-choices button:hover:not([aria-pressed=true]){color:#fff;background:#171717}
.slideshow-controls{display:flex;align-items:center;gap:7px}
.slideshow-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #393939;border-radius:50%;padding:0;background:#000;color:#eee}
.slideshow-controls button:hover{background:#202020;border-color:#777}
.slideshow-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-error{position:absolute;bottom:12px;left:12px;right:12px;z-index:6;padding:12px 15px;border-radius:6px;background:#121212ec;font-size:15px;color:#eee}
@media(max-width:900px){.demo-heading{gap:14px}.example-choices button{font-size:14px;padding-inline:10px}.demo-heading h2{font-size:31px}.delivery-copy{max-width:290px}.delivery-copy p{font-size:17px}}
@media(max-width:760px){
 .delivery-story{padding-block:56px 30px}.delivery-heading{display:block;margin-bottom:27px}.delivery-heading h2{font-size:39px}.delivery-heading .eyebrow{font-size:14px;margin-bottom:16px}.delivery-copy{max-width:380px;margin-top:22px}.delivery-copy p{font-size:17px;line-height:1.5}.delivery-copy .text-link{margin-top:10px}.album-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.album-strip figure:first-child{grid-column:1/-1}.album-strip figure:first-child img{aspect-ratio:1.6}.album-strip figcaption{font-size:12px;margin-top:8px}
 .transformation{height:min(calc((100vw - 40px) * .75 + 246px),calc(100svh - 100px));padding-block:20px;margin-block:35px 45px}.transformation .demo-shell{gap:13px}.demo-heading{display:block}.demo-heading h2{font-size:32px;margin-bottom:13px}.transformation .example-choices{justify-content:space-between;gap:4px;width:100%}.example-choices button{flex:1;padding:9px 7px;font-size:14px}.demo-footer{display:grid;justify-items:center;gap:12px}.transformation .edit-choices{justify-content:center;gap:3px}.edit-choices button{font-size:14px;padding:10px 16px}.slideshow-controls{gap:10px}.slideshow-controls button{width:44px;height:44px}.transformation .transform-badge{font-size:12px;top:10px;left:10px;padding:5px 10px}
}
@media(max-height:560px) and (min-width:761px){.transformation{height:calc(100svh - 100px);padding-block:12px}.transformation .demo-shell{gap:10px}.demo-heading h2{font-size:29px}}
@media(max-width:760px){.transformation{height:min(calc((100vw - 40px) * .75 + 277px),calc(100svh - 100px))}.edit-choices button{padding-inline:11px}.demo-disclosure{font-size:11px}}
@media(max-width:360px){.delivery-heading h2{font-size:35px}.demo-heading h2{font-size:29px}.example-choices button{font-size:13px;padding-inline:5px}.edit-choices button{font-size:13px;padding-inline:9px}.demo-disclosure{font-size:10px}}

/* Fixed device marks meet a world-horizontal line as the phone is levelled. */
.level-guide{display:block;width:240px;height:44px;filter:drop-shadow(0 1px 3px #0009);color:#ff8279}
.level-guide>.level-tick{position:absolute;top:calc(50% - 1px);width:27px;height:2px;border-radius:2px;background:currentColor}
.level-left{left:0}.level-right{right:0}
.level-moving{position:absolute;left:44px;right:44px;top:calc(50% - 1px);height:2px;transform-origin:center;will-change:transform}
.level-moving>i{position:absolute;top:0;width:calc(50% - 9px);height:2px;border-radius:2px;background:currentColor}
.level-moving>i:first-child{left:0}.level-moving>i:last-child{right:0}
.level-guide>b{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border:1.5px solid currentColor;background:transparent}
.level-angle{position:absolute;top:calc(50% + 16px);left:50%;transform:translateX(-50%);font-size:12px;font-variant-numeric:tabular-nums;line-height:1}
.capture-story.is-near-level .level-guide,.capture-story.is-near-level .coach{color:#ffd60a}
.capture-story.is-level .level-guide>b{background:currentColor}
@media(max-width:760px){.level-guide{width:132px;height:30px}.level-guide>.level-tick{width:18px}.level-moving{left:27px;right:27px}.level-guide>b{width:8px;height:8px;left:calc(50% - 4px);top:calc(50% - 4px)}.level-angle{font-size:10px;top:calc(50% + 12px)}}

/* Live coaching stays beside the level, as it does in the camera. */
.coach{top:calc(50% + 54px);bottom:auto;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:#ff8279;background:#251311ed;border:1px solid #ff827960}
.coach svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.coach .coach-check{display:none}
.capture-story.is-near-level .coach{background:#251e08ed;border-color:#ffd60a60}
.capture-story.is-level .coach{background:#10271fed;border-color:#a4eac070}
.capture-story.is-level .coach-turn{display:none}.capture-story.is-level .coach-check{display:block}
@media(max-width:760px){.coach{top:calc(50% + 36px);font-size:10px;gap:4px;padding:5px 8px}.coach svg{width:12px;height:12px}}