/* Pixelated toggle (top of the process nav) + the original Figma case-study design.
   Pixel mode is the default. html.figma-mode restyles the same content with the Figma
   file's type, colour, cards and non-pixel illustrations (Figma file X6Tq672LW2S6NF4PoluGKJ). */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url("/fonts/Pretendard-Regular.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;src:url("/fonts/Pretendard-Medium.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url("/fonts/Pretendard-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url("/fonts/Pretendard-Bold.woff2") format("woff2")}

/* ---- Toggle (pixel look by default) ---- */
.style-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;padding:10px 12px;border:1px solid var(--ink);background:#f8faf1}
.style-toggle-label{font:12px var(--pixel);letter-spacing:.4px;text-transform:uppercase;color:var(--ink)}
.style-switch{position:relative;flex:none;width:44px;height:22px;padding:0;border:1px solid var(--ink);background:#dce9e2;cursor:pointer}
.style-switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--ink);transition:left .15s steps(3)}
.style-switch[aria-checked=true]{background:#cf6844}
.style-switch[aria-checked=true] .style-switch-thumb{left:24px;background:#fbfcf4;box-shadow:inset 0 0 0 1px var(--ink)}
.style-switch:focus-visible{outline:2px solid #a94b2e;outline-offset:2px}
.figma-art{display:none}
@media(max-width:1000px){.style-toggle{margin:0;padding:6px 10px;align-self:center}}
@media(max-width:550px){.style-toggle-label{display:none}}
@media(prefers-reduced-motion:reduce){.style-switch-thumb{transition:none}}

/* ---- Figma original ---- */
.figma-mode{--fg-font:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic",system-ui,sans-serif;--fg-ink:#111;--fg-ink2:#5f5f5f;--fg-blue:#0059d8;--fg-eyebrow:#2976e9;--fg-stat:#3376cd;--fg-border:#ccd3dc;--fg-hairline:#e8edf5;--fg-emphasis:#e3e8f1;--fg-chip:#cbe0ff;--fg-tint:#f0f7fc;--fg-canvas:#f2f6f0;--fg-shadow:0 6px 24px rgba(15,18,24,.06),0 1px 3px rgba(15,18,24,.05)}
.figma-mode .case-body{background:var(--fg-canvas)}
.figma-mode .case-main,.figma-mode .case-copyright,.figma-mode .case-process{font-family:var(--fg-font);color:var(--fg-ink);letter-spacing:-.02em}

/* toggle, Figma style */
.figma-mode .style-toggle{border:1px solid var(--fg-border);border-radius:12px;background:#fff}
.figma-mode .style-toggle-label{font:500 14px var(--fg-font);letter-spacing:-.02em;text-transform:none;color:var(--fg-ink)}
.figma-mode .style-switch{width:40px;height:24px;border:0;border-radius:999px;background:#ccd3dc}
.figma-mode .style-switch-thumb{top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,18,24,.25);transition:left .2s ease}
.figma-mode .style-switch:focus-visible{outline-color:var(--fg-blue)}

/* process nav */
.figma-mode .case-back{border-bottom-color:var(--fg-border)}
.figma-mode .case-back:hover{background:var(--fg-tint)}
.figma-mode .case-process ol{border-left-color:var(--fg-hairline)}
.figma-mode .case-process li a{color:var(--fg-ink2);border-radius:0 8px 8px 0}
.figma-mode .case-process li a:hover{background:var(--fg-tint)}
.figma-mode .case-process li a[aria-current=location]{color:var(--fg-blue);background:var(--fg-tint);border-left-color:var(--fg-eyebrow)}
.figma-mode .process-number{font:600 12px/1.7 var(--fg-font);color:var(--fg-eyebrow)}
@media(max-width:1000px){.figma-mode .case-process{background:var(--fg-canvas);border-bottom-color:var(--line)}}

/* type */
.figma-mode .case-label{font:600 20px/1.3 var(--fg-font);letter-spacing:-.4px;text-transform:none;color:var(--fg-eyebrow)}
.figma-mode .case-hero h1{font:700 clamp(44px,5.6vw,80px)/1.08 var(--fg-font);letter-spacing:-.035em}
.figma-mode .case-section h2{font:600 clamp(26px,2.6vw,36px)/1.3 var(--fg-font);letter-spacing:-.02em}
.figma-mode .case-lead{font-size:19px;line-height:1.65}
.figma-mode .case-section>p:not(.case-label),.figma-mode .case-feature>p{font-size:17px;line-height:1.65}
.figma-mode .case-feature h3,.figma-mode .carousel-slide h3,.figma-mode .platform-summary h3{font-weight:600;letter-spacing:-.02em}

/* hero meta + metrics */
.figma-mode .case-meta{border:0;border-radius:16px;background:#fff;box-shadow:var(--fg-shadow);padding:24px 28px}
.figma-mode .case-meta dt{font:500 14px var(--fg-font);color:var(--fg-ink2)}
.figma-mode .case-meta dd{font-size:16px}
.figma-mode .case-metrics strong{font:600 44px var(--fg-font);letter-spacing:-.02em;color:var(--fg-stat)}

/* cards */
.figma-mode .case-card{border:0;border-radius:16px;background:#fff;box-shadow:var(--fg-shadow);padding:28px}
.figma-mode .case-index{display:inline-block;font:600 13px/1 var(--fg-font);letter-spacing:-.02em;color:var(--fg-blue);background:var(--fg-chip);border-radius:6px;padding:6px 10px;margin-bottom:16px}
.figma-mode .case-card h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.figma-mode .case-card p{font-size:15px;line-height:1.6;color:var(--fg-ink2)}
.figma-mode .platform-summary .case-card{box-shadow:none;border:1px solid var(--fg-hairline)}

/* illustrations: swap pixel crops for the original Figma artwork, built as live HTML + SVG
   (from the Figma-exact components). case-study.js scales each fixed-size frame to its card. */
.figma-mode .card-illustration{display:block;background:transparent;aspect-ratio:auto}
.figma-mode .card-illustration>:not(.figma-art){display:none}
.figma-mode .figma-art{display:block;position:relative;width:100%;aspect-ratio:var(--fg-ar);overflow:hidden;line-height:normal;font-weight:400;letter-spacing:normal;color:#111;font-family:var(--fg-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:light}
.figma-art-inner{position:absolute;left:50%;top:50%;transform-origin:0 0;transform:scale(var(--fg-scale,1)) translate(-50%,-50%)}
.figma-art *,.figma-art ::before,.figma-art ::after{margin:0;padding:0;border:0 solid;box-sizing:border-box}
.figma-mode .figma-art p{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;letter-spacing:inherit;max-width:none}
.figma-art svg{display:block;vertical-align:middle}

/* callouts */
.figma-mode .case-section blockquote{border:0;border-radius:12px;background:var(--fg-emphasis);font-size:19px;font-weight:500;line-height:1.6}
.figma-mode .case-section blockquote strong{color:var(--fg-blue)}
.figma-mode .case-steps li{border-bottom-color:var(--fg-hairline)}
.figma-mode .case-steps li::marker{font:600 15px var(--fg-font);color:var(--fg-eyebrow)}

/* images */
.figma-mode .case-main figure a{border:0;border-radius:12px;box-shadow:var(--fg-shadow)}
.figma-mode .case-main .transparent-figure a,.figma-mode .case-main .carousel-slide figure a{box-shadow:none;border-radius:0}
.figma-mode .case-main figcaption{color:var(--fg-ink2)}

/* video tabs + carousels */
.figma-mode .video-showcase,.figma-mode .interface-carousel{border:0;border-radius:16px;background:#fff;box-shadow:var(--fg-shadow);overflow:hidden}
.figma-mode .microsoft-case .interface-carousel:has(#refinement-track){box-shadow:none;background:transparent}
.figma-mode .platform-tabs{border-bottom-color:var(--fg-hairline)}
.figma-mode .platform-tabs button{font:600 16px var(--fg-font);letter-spacing:-.02em;color:var(--fg-ink2);border-bottom-width:3px}
.figma-mode .platform-tabs button[aria-selected=true]{background:transparent;color:var(--fg-ink);border-bottom-color:var(--fg-eyebrow)}
.figma-mode .platform-tabs button:focus-visible,.figma-mode .carousel-track:focus-visible{outline-color:var(--fg-blue)}
.figma-mode .device-frame{display:none}
.figma-mode .device-screen{box-shadow:0 0 0 2.4cqw #1d1f23}
.figma-mode .device--desktop .device-screen{border-radius:.6cqw}
.figma-mode .device--desktop::before{content:"";position:absolute;left:43%;width:14%;top:calc(var(--st) + var(--sh) + 2.4cqw);height:15%;background:linear-gradient(90deg,#b9bfc8,#dfe3e8 45%,#c4c9d1);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.figma-mode .device--desktop::after{content:"";position:absolute;left:31%;width:38%;top:calc(var(--st) + var(--sh) + 2.4cqw + 15%);height:3.2%;border-radius:1cqw 1cqw .6cqw .6cqw;background:linear-gradient(#e4e7eb,#b9bfc8);box-shadow:0 1.4cqw 2.4cqw rgba(15,18,24,.12)}
.figma-mode .device--phone .device-screen{border-radius:8cqw;box-shadow:0 0 0 4cqw #1d1f23,0 0 0 4.6cqw #3a3d42}
.figma-mode .device--phone::after{content:"";position:absolute;z-index:2;left:50%;top:calc(var(--st) + 2.4cqw);width:26cqw;height:6.4cqw;transform:translateX(-50%);border-radius:4cqw;background:#1d1f23}
.figma-mode .carousel-controls{border-top-color:var(--fg-hairline)}
.figma-mode .carousel-prev,.figma-mode .carousel-next{border:1px solid var(--fg-border);border-radius:8px;box-shadow:none;background:#fff}
.figma-mode .carousel-dot::after{border:0;border-radius:50%;background:var(--fg-border)}
.figma-mode .carousel-dot[aria-current="true"]::after{background:var(--fg-blue)}
.figma-mode .carousel-count{font:500 13px var(--fg-font)}

/* end links */
.figma-mode .case-end{border-top-color:var(--fg-hairline)}
.figma-mode .case-end a{border:1px solid var(--fg-border);border-radius:999px;background:#fff;box-shadow:none}
.figma-mode .case-end a:hover{background:var(--fg-tint)}
.figma-mode .case-copyright{color:var(--fg-ink2)}
.figma-art li::marker{font-size:.72em}
.figma-mode .previous-carousel .shot-name{font-family:var(--fg-font)}
.figma-mode .shot-viewport{border:1px solid var(--fg-hairline);border-radius:12px}
.figma-mode .shot-viewport:focus-visible{outline-color:var(--fg-blue)}
.figma-mode .scroll-cue{font:600 13px var(--fg-font);letter-spacing:-.01em;text-transform:none;color:#fff;background:rgba(17,17,17,.82);border:0;border-radius:999px;padding:9px 16px;box-shadow:var(--fg-shadow)}
.figma-mode .shot-frame.is-long:not(.cue-done)::after{border-radius:0 0 12px 12px;background:linear-gradient(transparent,rgba(255,255,255,.92))}
.figma-mode .scroll-cue-arrow{animation-timing-function:ease-in-out}