/* Virtual canvas: 6180 × 4320. Original PNG shadows stay inside each export. */
.case-figal { --screen-board:#ededed; --screen-label:#09090d; }
:root[data-theme=dark] .case-figal { --screen-board:#202022; --screen-label:#f3f3f4; }
.case-figal .screen-figure { margin:0; min-width:0; width:100%; }
/* Center wider artwork on the reading column, reserving room for desktop navigation. */
.case-figal main .screen-figure { width:calc(100vw - 32px); max-width:none; justify-self:center; margin-inline:calc((100% - (100vw - 32px)) / 2); }
@media(min-width:600px) and (max-width:999.98px) {
  .case-figal main .screen-figure { width:calc(100vw - 64px); margin-inline:calc((100% - (100vw - 64px)) / 2); }
}
@media(min-width:1000px) {
  .case-figal main .screen-figure { width:100%; margin-inline:0; }
}
@media(min-width:1200px) {
  .case-figal main .screen-figure { width:min(960px,calc(100vw - 560px)); margin-inline:calc((100% - min(960px,100vw - 560px)) / 2); }
}
.case-figal .screen-demo { position:relative; min-width:0; }
.case-figal .screen-stage { position:relative; width:100%; aspect-ratio:6180/4320; isolation:isolate; overflow:hidden; container-type:inline-size; border-radius:12px; background:var(--screen-board); }
/* One shared scale keeps every phone identical across the original compositions. */
.case-figal .screen-stage:not(.card-fan) { --phone-scale:1; --phone-offset:0%; }
.case-figal .screen-stage .screen-art { position:absolute; top:.833333%; left:calc(var(--art-x) * var(--phone-scale) + var(--phone-offset)); width:calc(var(--art-width) * var(--phone-scale)); display:block; height:auto; max-width:none; max-height:none; margin:0; border:0; border-radius:0; }
.case-figal .screen-stage--pair .screen-art { --art-x:16.407767%; --art-width:67.961165%; }
.case-figal .screen-stage--triple .screen-art { --art-x:2.491909%; --art-width:95.792880%; }
.case-figal .screen-stage--receive .screen-art { --art-x:-.032362%; --art-width:98.333333%; }
.case-figal .screen-stage--insights .screen-art { --art-x:35.711974%; --art-width:32.637540%; top:6.736111%; }
.case-figal .screen-stage--onboarding .screen-art { --art-x:16.407767%; --art-width:40.129450%; }
.case-figal .screen-stage--onboarding .screen-login { --art-x:44.239482%; }
.case-figal .screen-label { position:absolute; z-index:2; left:calc(var(--label-x) * var(--phone-scale) + var(--phone-offset)); top:7.1%; width:25.242718%; color:var(--screen-label); font:400 1.3cqw/1.3 "Geist",sans-serif; letter-spacing:0; }
.case-figal .screen-figure figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 0; font:400 11px/1.5 "Geist",sans-serif; color:var(--muted); }
.case-figal .screen-expand { position:absolute; right:12px; bottom:12px; z-index:40; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); cursor:zoom-in; opacity:0; pointer-events:none; transition:opacity 150ms ease; }
.case-figal .screen-demo:hover .screen-expand,.case-figal .screen-demo:focus-within .screen-expand { opacity:1; pointer-events:auto; }
@media(hover:none) { .case-figal .screen-expand { opacity:1; pointer-events:auto; } }
.case-figal .screen-dialog .screen-expand { display:none; }
.case-figal .screen-expand svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }
.case-figal .screen-expand[hidden] { display:none; }
.case-figal .screen-figure button:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
.case-figal .onboarding-slide { position:absolute; inset:0; visibility:visible; }
.case-figal .onboarding-slide[aria-hidden=true] { visibility:hidden; pointer-events:none; }

/* Hit targets follow the card face, never the oversized transparent shadow. */
.case-figal .fan-card { --fan-shift:0cqw; position:absolute; left:var(--card-x); top:var(--card-y); width:23.3%; aspect-ratio:1796/2498; z-index:var(--card-layer); margin:0; padding:0; border:0; border-radius:10% / 7.2%; background:none; cursor:pointer; touch-action:manipulation; transform:translateX(calc(-50% + var(--fan-shift))) translateY(0) rotate(var(--card-angle)) scale(1); transform-origin:50% 50%; transition:transform 140ms cubic-bezier(.16,1,.3,1); -webkit-tap-highlight-color:transparent; }
.case-figal .fan-card { box-shadow:12px 32px 30px -15px #0003; }
.case-figal .fan-card img { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; border-radius:0; pointer-events:none; user-select:none; }
.case-figal .fan-count { position:absolute; left:4.65%; top:47.4%; color:#000; font:400 1.414cqw/1.2 Arial,sans-serif; letter-spacing:0; pointer-events:none; }
.case-figal .fan-card[data-complete=true] .fan-count { color:#187348; }
.case-figal .fan-reset { position:absolute; right:56px; bottom:12px; z-index:20; width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--screen-label); font:26px/1 Arial,sans-serif; cursor:pointer; }
.case-figal .fan-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.case-figal .fan-confetti { position:absolute; z-index:30; width:6px; height:10px; pointer-events:none; }
.case-figal .fan-card[aria-pressed=true] { z-index:10; transform:translateX(-50%) translateY(-14%) rotate(var(--active-angle)) scale(var(--active-scale,1.18)); }
.case-figal .fan-card[data-card="2"] { --active-scale:1.24; }
.case-figal .fan-card:focus-visible { outline:2px solid var(--screen-label); outline-offset:5px; }
.case-figal .screen-dialog { width:min(1320px,calc(100% - 32px),calc((100dvh - 150px) * 1.4305556)); max-width:calc(100% - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--fg); overflow:auto; overscroll-behavior:contain; }
.case-figal .screen-dialog::backdrop { background:#0009; backdrop-filter:blur(5px); }
.case-figal .screen-dialog header { display:flex; position:sticky; top:0; z-index:20; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--line); }
.case-figal .screen-dialog header p { margin:0; color:var(--fg); font:400 13px/1.5 "Geist",sans-serif; }
.case-figal .screen-dialog header button { flex:none; }
.case-figal .screen-expand,.case-figal .fan-reset,.case-figal .screen-dialog header button { display:grid; place-items:center; width:36px; height:36px; padding:8px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:none; }
.case-figal .screen-expand:hover,.case-figal .fan-reset:hover,.case-figal .screen-dialog header button:hover { background:var(--soft); color:var(--fg); }
.case-figal .screen-expand svg,.case-figal .fan-reset svg,.case-figal .screen-dialog header button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.case-figal .screen-dialog .screen-expand { display:none; }
/* Prepare the five heavy SVG layers before hover, including their shadows. */
.case-figal .card-fan[data-ready] .fan-card { will-change:transform; }
.case-figal .screen-dialog .screen-stage { border-radius:0; }
.case-figal .screen-dialog button:focus-visible { outline:2px solid var(--fg); outline-offset:-2px; }
body:has(.screen-dialog[open]) { overflow:hidden; }
@media(max-width:599px) {
  .case-figal .screen-stage { border-radius:8px; }
  .case-figal .screen-figure figcaption { font-size:10px; }
  .case-figal .screen-dialog { width:calc(100% - 16px); max-width:calc(100% - 16px); }
  .case-figal .screen-dialog-content { overflow-x:auto; }
  .case-figal .screen-dialog .screen-demo { min-width:700px; }
}
@media(prefers-reduced-motion:reduce) {
  .case-figal .fan-card { transition:none; }
  .case-figal .card-fan[data-ready] .fan-card { will-change:auto; }
}
@media print {
  .case-figal .screen-expand { display:none; }
  .case-figal .screen-figure { break-inside:avoid; }
}