/* The 11th Step — redesign 2026-11-06. Four colours (sky, ink, pastel UV yellow, white), one gesture with a
   consequence, no pinned stages. The base rules are the finished page without JavaScript (data-state="done");
   samsung.js resets the phone to its first state and adds the motion. */
.s11{--s-sky:#a1c7eb;--s-ink:#0e2529;--s-uv:#f6e48b;--s-white:#ffffff;--s-paper:#f6f2ea;--s-lilac:#dfccf7;--s-red:#c8102e;--s-screen:#0b0d0e;--s-cap:rgba(14,37,41,.88);--s-off:rgba(255,255,255,.18);--s-gut:clamp(1.25rem,3.2vw,3.5rem);--case-paper:#ffffff;--case-ink:var(--s-ink);--case-accent:var(--s-ink);--case-line:#0e252933;--case-muted:var(--s-ink);padding-top:0;overflow:clip;color:var(--s-ink)}
.s11-page{background:#ffffff}
.s11-page .site-header{position:absolute;inset:0 0 auto;z-index:20;color:#0e2529;background:linear-gradient(180deg,#a1c7ebf2 0%,#a1c7ebbf 55%,#a1c7eb00 100%)}
.s11-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* —— Type roles —— */
.s11-tag{display:block;margin:0;font:700 .8125rem/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:inherit}
.s11-context p,.s11-idea-lead,.s11-exec-a{margin:0;max-width:32em;font:500 clamp(1.25rem,1.9vw,1.75rem)/1.35 Manrope,Arial,sans-serif;letter-spacing:-.02em;text-wrap:pretty}
.s11-intro p,.s11-exec-b,.s11-hint,.s11-facts{font-family:Manrope,Arial,sans-serif;font-weight:500}
.s11-exec-b{margin:0;max-width:58ch;font-size:clamp(1.0625rem,1.25vw,1.25rem);line-height:1.5;text-wrap:pretty}
.s11-idea-q,.s11-quote{margin:0;max-width:18ch;font:700 clamp(2.25rem,4.6vw,4.75rem)/1 'DM Sans',Arial,sans-serif;letter-spacing:-.04em;text-wrap:balance}

/* —— 0 · Opening: the approved key visual, untouched, beside the title —— */
.s11-hero{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh;min-height:100svh;background:var(--s-sky);color:var(--s-ink)}
.s11-hero-photo{position:relative;margin:0;height:100vh;height:100svh;aspect-ratio:.885;overflow:clip;background:var(--s-sky)}
.s11-hero-photo>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0 50%}
.s11-hero-copy{container-type:inline-size;display:flex;flex-direction:column;min-width:0;padding:clamp(5rem,12svh,6.5rem) var(--s-gut) 1.25rem}
.s11-hero .case-topline{grid-template-columns:auto 1fr auto;gap:1.5rem}
.s11-hero .case-topline>span:nth-child(2){justify-self:start}
.s11-lockup{position:relative;margin-block:auto;padding-block:1rem}
.s11-title{position:relative;z-index:1;margin:0;font:700 min(40cqw,23svh)/.83 'DM Sans',Arial,sans-serif;letter-spacing:-.062em;-webkit-text-stroke:.014em currentColor;color:var(--s-ink)}
.s11-title span{display:block}
.s11-scribble{position:absolute;overflow:visible;pointer-events:none}
.s11-scribble path{fill:none;stroke:var(--s-uv);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.s11-lockup .s11-scribble{left:-6%;top:22%;width:96%;height:auto;z-index:0}
.s11-motion .s11-lockup .s11-scribble path{stroke-dasharray:1;stroke-dashoffset:1;animation:s11-draw .7s .3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes s11-draw{to{stroke-dashoffset:0}}
.s11-intro{position:relative;z-index:1;max-width:31rem;margin-top:auto}
.s11-intro .case-category{margin-bottom:.6rem;color:var(--s-ink);font-weight:700}
.s11-intro p{font-size:clamp(1.0625rem,1.25vw,1.25rem);line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.s11-hero .case-caption-line{margin-top:1.25rem;padding-top:.75rem;color:var(--s-ink)}
.s11-hero .case-caption-line>span:last-child{color:var(--s-ink)}

/* —— 1 · Context and 3 · Idea share one grid: label in columns 1-2, text from column 4 —— */
.s11-context,.s11-idea{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-gut);row-gap:clamp(1.25rem,3vh,2rem);padding:clamp(4rem,10vh,7rem) var(--s-gut);background:var(--s-sky);color:var(--s-ink)}
.s11-context>.s11-tag,.s11-idea>.s11-tag{grid-column:1/3;padding-top:.5em}
.s11-context>p{grid-column:4/11}
.s11-idea>*:not(.s11-tag){grid-column:4/13}
.s11-idea>.s11-tag{grid-row:1}
.s11-idea-q{margin-top:clamp(.5rem,2vh,1.5rem)}
.s11-idea-q.is-split [data-w]{opacity:.14;transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.s11-idea-q.is-split.is-on [data-w]{opacity:1}
.s11-row{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(4px,.6vw,8px);height:clamp(2.25rem,3.5vw,3.5rem);max-width:52rem;margin-top:clamp(.75rem,3vh,2rem)}
.s11-row i{display:block;border-radius:4px;background:var(--s-ink);will-change:transform}
.s11-row b{display:grid;place-items:center;border:2px dashed var(--s-ink);border-radius:4px;font:700 clamp(.95rem,1.4vw,1.35rem)/1 'DM Sans',Arial,sans-serif;letter-spacing:-.02em}
.s11-go{justify-self:start;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;width:fit-content;padding:.7rem 1.35rem;border-radius:99px;background:var(--s-ink);color:#fff;font:700 .9375rem/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.01em;text-decoration:none;-webkit-tap-highlight-color:transparent}
.s11-go:hover{background:#1d3a40}
.s11-go:focus-visible,.s11-apply:focus-visible,.s11-track:focus-visible,.s11-track-ui button:focus-visible{outline:2px solid var(--s-ink);outline-offset:3px}

/* —— 2 · Posters: three bluffs, one slide each. Ten cells full, the eleventh missing —— */
.s11-posters{background:var(--s-ink);color:#fff;padding:clamp(3.5rem,9vh,6rem) 0 clamp(2.5rem,6vh,4rem)}
.s11-posters>.s11-tag{padding:0 var(--s-gut) clamp(1.25rem,3vh,2rem)}
.s11-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s11-track::-webkit-scrollbar{display:none}
.s11-track:focus-visible{outline-color:#fff;outline-offset:-4px}
.s11-poster{flex:0 0 100%;box-sizing:border-box;margin:0;scroll-snap-align:start;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-gut);align-items:end;padding:0 var(--s-gut)}
.s11-quote{grid-column:1/6;grid-row:1;color:#fff;hanging-punctuation:first;padding-bottom:.1em}
.s11-shot{grid-column:6/13;grid-row:1/3;position:relative;width:100%;max-width:880px;justify-self:end;margin:0}
.s11-shot a{display:block;border-radius:2px;overflow:hidden}
.s11 .s11-shot a:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.s11 .s11-shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-height:none}
.s11-track-ui{display:flex;justify-content:flex-end;align-items:center;gap:1rem;padding:clamp(1rem,2.5vh,1.5rem) var(--s-gut) 0;font:700 .8125rem/1 'DM Sans',Arial,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.s11-track-ui button{width:44px;height:44px;padding:0;border:1.5px solid #fff;border-radius:50%;background:transparent;color:#fff;font:700 1rem/1 'DM Sans',Arial,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.s11-track-ui button:hover{background:#ffffff1f}
.s11-track-ui button:focus-visible{outline-color:#fff}

/* The bar: the campaign's scan bar, drawn small over the photo. Ten white cells, the eleventh dashed and empty */
.s11-bar{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;padding:4px;box-sizing:border-box;background:var(--s-cap);border-radius:6px;pointer-events:none}
.s11-bar i{display:block;border-radius:2px;background:#fff;transform-origin:50% 100%}
.s11-js .s11-bar i:not(.on){background:var(--s-off)}
.s11-bar b{position:relative;display:block;border-radius:2px;outline:1.5px dashed var(--s-uv);outline-offset:-1.5px;overflow:hidden}
/* Under the quote, as the note on the excuse: ten steps done, the eleventh missing. The poster stays untouched */
.s11-bar--sm{grid-column:1/6;grid-row:2;align-self:start;width:min(100%,320px);height:28px;margin-top:1.25rem}

/* —— 4 · Step 11: the only yellow surface. Copy, phone, and what the app says next —— */
.s11-step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-gut);row-gap:clamp(2rem,5vh,3rem);align-items:center;padding:clamp(4rem,9vh,6rem) var(--s-gut) clamp(5rem,12vh,8rem);background:var(--s-uv);color:var(--s-ink)}
.s11-step-copy{grid-column:1/6;display:grid;gap:clamp(1rem,2.5vh,1.5rem)}
.s11-phone{grid-column:6/10;justify-self:center}
.s11-notifs{grid-column:10/13;justify-self:end;display:flex;flex-direction:column;gap:14px;width:100%;max-width:300px}
.s11-notif:nth-child(2){margin-left:24px}
.s11-notif:nth-child(3){margin-left:-12px}
.s11-k{padding:0 .2em .05em;margin-inline:-.04em;border-radius:.16em;background:linear-gradient(var(--s-ink),var(--s-ink)) no-repeat 0 0/100% 100%;color:var(--s-uv);white-space:nowrap;transition:background-size .5s cubic-bezier(.6,0,.2,1),color .2s .14s}
.s11-js .s11-k:not(.is-lit){background-size:0 100%;color:inherit}

/* The phone, drawn: no logo, no brand, no clock */
.s11-phone{--pw:min(320px,74vw,max(240px,calc((100svh - 14rem)*.4615)));margin:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.s11-device{position:relative;box-sizing:border-box;width:var(--pw);aspect-ratio:9/19.5;padding:calc(var(--pw)*.031);border-radius:calc(var(--pw)*.14);background:var(--s-ink);box-shadow:0 var(--shy,40px) 60px -30px rgba(14,37,41,.45);will-change:transform}
.s11-device::after{content:"";position:absolute;right:-3px;top:24%;width:3px;height:14%;border-radius:0 2px 2px 0;background:var(--s-ink)}
.s11-screen{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:calc(var(--pw)*.11);background:var(--s-screen);color:#fff;font:400 calc(var(--pw)*.04)/1.2 'DM Sans',Arial,sans-serif;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.s11-cam-top{position:relative;flex:0 0 auto;height:calc(var(--pw)*.13);display:flex;align-items:center;justify-content:space-between;padding:0 6%;color:rgba(255,255,255,.75)}
.s11-dot{position:absolute;left:50%;top:calc(var(--pw)*.035);width:calc(var(--pw)*.035);height:calc(var(--pw)*.035);margin-left:calc(var(--pw)*-.0175);border-radius:50%;background:#000}
.s11-pill{display:inline-flex;align-items:center;gap:.35em;color:rgba(255,255,255,.6);font-weight:700}
.s11-pill b{padding:.15em .45em;border-radius:99px;background:var(--s-uv);color:var(--s-ink)}
.s11-vf{position:relative;flex:0 0 auto;width:100%;aspect-ratio:3/4;background:url(/assets/supplied-v24/samsung-uvcam-board-soft.jpg) center/100% 100% no-repeat;touch-action:none;cursor:crosshair}
/* Until the result is in (and once the step is done) a vertical swipe over the face scrolls the page */
.s11-phone:is([data-state=idle],[data-state=analysing],[data-state=done]) .s11-vf{touch-action:pan-y}
.s11-cream,.s11-pulse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.s11-cream{mix-blend-mode:multiply;opacity:.32}
.s11-pulse{opacity:0;mix-blend-mode:multiply;transition:opacity .6s ease-out}
.s11-pulse.is-on{opacity:1;transition:none}
.s11-blackout{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
/* Covers the board's own bar completely: x .207-.570, y .686-.717 of the crop */
.s11-bar--vf{position:absolute;left:20%;top:67.6%;width:47.2%;height:5.2%;gap:calc(var(--pw)*.006);padding:calc(var(--pw)*.009);border-radius:calc(var(--pw)*.015)}
.s11-bar--vf b::after{content:"";position:absolute;inset:0;background:var(--s-uv);transform-origin:0 50%;transform:scaleX(var(--f,1))}
html:not(.s11-js) .s11-bar--vf b,.s11-bar--vf b.is-full{background:var(--s-uv)}
.s11-cam-bottom{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--pw)*.05);padding:0 6%}
.s11-modes{text-align:center;color:rgba(255,255,255,.6);letter-spacing:.04em;font-weight:700}
.s11-modes b{color:var(--s-uv)}
.s11-shutter-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}
.s11-thumb{width:calc(var(--pw)*.11);aspect-ratio:1;border-radius:50%;box-sizing:border-box;border:1.5px solid rgba(255,255,255,.4);background:center/cover no-repeat}
html:not(.s11-js) .s11-thumb{background-image:url(/assets/supplied-v24/samsung-uvcam-board-soft.jpg)}
.s11-shutter{display:grid;place-items:center;width:calc(var(--pw)*.2);aspect-ratio:1;box-sizing:border-box;border:4px solid #fff;border-radius:50%}
.s11-shutter::after{content:"";width:78%;aspect-ratio:1;border-radius:50%;background:#fff}
/* The result sheet: the campaign's own lilac tile */
.s11-card{display:grid;gap:.42rem;padding:1.25rem 1.4rem 1.4rem;border-radius:1.5rem;background:var(--s-lilac);color:#14141a;font:500 clamp(1rem,1.25vw,1.25rem)/1.3 Manrope,Arial,sans-serif;box-shadow:0 22px 48px -18px #1a1a3a4d}
.s11-card strong{font-family:'DM Sans',Arial,sans-serif;font-weight:700;letter-spacing:.01em;margin-bottom:.45em}
.s11-card em{font-style:normal;font-weight:700;color:var(--s-red)}
.s11-screen .s11-card{position:absolute;left:4%;right:4%;bottom:3%;gap:calc(var(--pw)*.018);padding:calc(var(--pw)*.05);border-radius:calc(var(--pw)*.06);font:400 calc(var(--pw)*.047)/1.3 'DM Sans',Arial,sans-serif;box-shadow:0 -10px 30px -12px #0008;will-change:transform}
.s11-screen .s11-card strong{margin-bottom:calc(var(--pw)*.01)}
.s11-screen .s11-card>*{display:block;transform-origin:0 50%}
.s11-phone figcaption{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:var(--pw);text-align:center;padding:0}
.s11-hint{min-height:3em;display:flex;align-items:center;justify-content:center;text-wrap:balance;margin:0;font-size:clamp(1.0625rem,1.25vw,1.25rem);line-height:1.5}
.s11-apply{min-height:44px;padding:.7rem 1.35rem;border:0;border-radius:99px;background:var(--s-ink);color:#fff;font:700 .9375rem/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.s11-apply:hover{background:#1d3a40}
.s11-phone .s11-note{margin:0;font:500 .8125rem/1.35 Manrope,Arial,sans-serif;opacity:.8}
html:not(.s11-js) .s11-apply,html:not(.s11-js) .s11-hint,html:not(.s11-js) .s11-track-ui{display:none}
/* The messages: white, the board's layout, dropped in by samsung.js once the step is done */
.s11-notif{position:relative;margin:0;padding:1rem 1.25rem 1.1rem;border-radius:1.5rem;background:#fff;color:var(--s-ink);font:500 clamp(1rem,1.15vw,1.125rem)/1.3 Manrope,Arial,sans-serif;letter-spacing:-.01em;box-shadow:0 0 0 1px #0e252914,0 22px 48px -18px #0e25294d;will-change:transform}
.s11-notif.is-empty{background:none;box-shadow:none;outline:1.5px dashed #0e252966;outline-offset:-1.5px}
.s11-notif.is-empty>*{visibility:hidden}
.s11-notif p{margin:0;padding-right:1.2rem}
.s11-notif b{font-weight:700;font-family:'DM Sans',Arial,sans-serif}
.s11-nb{white-space:nowrap}
.s11-heart{position:absolute;right:1rem;bottom:1rem;width:1.05rem;height:1.05rem;fill:none;stroke:var(--s-ink);stroke-width:2.4}

/* —— 5 · App: white, the torn strip astride the yellow, the chip, the card over m003 —— */
.s11-app{isolation:isolate;position:relative;background:#fff;color:var(--s-ink);padding:0 var(--s-gut) clamp(2.5rem,7vh,4.5rem)}
.s11-paper{position:relative;z-index:2;margin:0 auto;width:fit-content;max-width:min(62rem,100%);text-wrap:balance;transform:translateY(-26%) rotate(-1.2deg);padding:clamp(1.3rem,2.6vw,2.6rem) clamp(1.5rem,3.4vw,3.6rem);background:var(--s-paper);color:#16181a;font:700 clamp(1.25rem,2.75vw,3rem)/1.14 Georgia,'Times New Roman',serif;letter-spacing:-.015em;filter:drop-shadow(0 18px 26px #0e252940);clip-path:polygon(0 4%,5% 1%,11% 4%,18% 1%,27% 3%,36% .6%,46% 3.6%,57% 1%,66% 3.4%,76% .8%,85% 3.4%,93% 1%,100% 4%,99.4% 24%,100% 48%,99.2% 72%,100% 96%,92% 99%,84% 96.4%,73% 99.4%,62% 96.6%,51% 99.2%,40% 96.4%,29% 99.4%,19% 96.8%,9% 99.4%,0 96%,.6% 72%,0 48%,.8% 24%)}
.s11-index{display:flex;gap:.35em;width:fit-content;margin:0 auto;padding:.35em .7em;border-radius:6px;background:var(--s-uv);color:var(--s-ink);font:700 clamp(1.1rem,1.6vw,1.5rem)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.01em}
.s11-index strong{font-weight:inherit}
.s11-app-grid{display:flex;flex-direction:column;gap:1.25rem;margin-top:clamp(1rem,3vh,2rem)}
.s11-app-img{order:1;margin:0 calc(var(--s-gut)*-1);mix-blend-mode:multiply}
.s11-card--static{order:2;width:100%;box-sizing:border-box}
/* Stacked, the crop stops where the empty sky begins and gives the devices the width */
.s11-app-img a{display:block;overflow:hidden;aspect-ratio:1092/673}
.s11 .s11-app-img img{display:block;width:128.2%;max-width:none;height:auto;margin:-17.4% 0 0 -14.1%}
@media(min-width:700px){.s11-card--static{max-width:30rem;margin-inline:auto}}
/* Wide screens: the live card sits on the phone's own tile, translating the English one in the picture */
@media(min-width:900px){.s11-poster{flex-basis:86%}}
@media(min-width:1024px) and (min-aspect-ratio:5/4){
 .s11-app-grid{display:block;position:relative;container-type:inline-size;max-width:1500px;margin-inline:auto}
 .s11-app-img{margin:0}
 .s11-app-img a{aspect-ratio:auto}
 .s11 .s11-app-img img{width:100%;margin:0}
 .s11-app-grid{margin-top:-7vw}
 /* Exactly on the tile in the picture (35.7 / 21.0 / 13.9 / 14.7 cqw), in the tile's own type: DM Sans, centred */
 .s11-card--static{position:absolute;z-index:2;left:35.6cqw;top:20.9cqw;width:14cqw;max-width:none;min-height:14.8cqw;margin:0;align-content:center;justify-items:center;gap:.45cqw;padding:1cqw 1.1cqw;border-radius:1.5cqw;font:500 clamp(10px,.95cqw,15px)/1.3 'DM Sans',Arial,sans-serif;text-align:center;box-shadow:none}
 .s11-card--static strong{margin-bottom:.5cqw}
}

/* —— 6 · Close: the original board, small and on the sky, with the facts beside it —— */
.s11-close{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-gut);row-gap:2.5rem;align-items:start;padding:clamp(4rem,10vh,7rem) var(--s-gut);background:var(--s-sky);color:var(--s-ink)}
.s11-board{grid-column:1/8;margin:0;max-width:720px;width:100%}
.s11-board a{display:block;box-shadow:0 30px 60px -30px rgba(14,37,41,.35)}
.s11 .s11-board img{display:block;width:100%;height:auto}
.s11 .s11-board [data-board-label]::after{display:none}
.s11 .s11-board figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0 0;font:700 .8125rem/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--s-ink)}
.s11 .s11-facts{grid-column:9/13;display:grid;grid-template-columns:1fr;gap:1.75rem;margin:0;padding:0;border:0;width:auto;max-width:none;background:none;color:var(--s-ink);font-size:clamp(1.0625rem,1.25vw,1.25rem);line-height:1.5}
.s11 .s11-facts p,.s11 .s11-facts .original-context{color:var(--s-ink);font-size:inherit;margin:0}
.s11 .s11-facts h2{margin:0 0 .5rem;color:var(--s-ink);font:700 .8125rem/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.s11 .case-next-art{background:#fff;border-top:0}
.s11 .case-next-art>div>span:first-child,.s11 .case-next-arrow{color:var(--s-ink)}
.s11 .case-next-art strong{font-family:'DM Sans',Arial,sans-serif;font-weight:700;letter-spacing:-.05em}

/* —— Step 11 between 768 and 1099: copy and phone side by side, the messages in a row below —— */
@media(max-width:1099px){
 .s11-step-copy{grid-column:1/7}
 .s11-phone{grid-column:7/13}
 .s11-notifs{grid-column:1/-1;justify-self:stretch;flex-direction:row;align-items:flex-start;max-width:none}
 .s11-notif{flex:1 1 0}
 .s11-notif:nth-child(2),.s11-notif:nth-child(3){margin-left:0}
}
/* —— Posters below 900: the next slide peeks in, the photo is cropped to 4:5 on the poster, the quote below —— */
@media(max-width:899px){
 .s11-track{gap:12px;padding:0 16px;scroll-padding-inline:16px}
 .s11-track::after{content:"";flex:0 0 4px}
 .s11-poster{flex:0 0 88%;display:flex;flex-direction:column;align-items:stretch;padding:0;gap:1rem}
 .s11-shot{order:1;max-width:none}
 .s11-quote{order:2;font-size:2rem;max-width:none}
 .s11 .s11-shot img{aspect-ratio:4/5;object-position:center 40%}
 .s11-bar--sm{order:3;width:min(100%,260px);height:20px;margin-top:0;padding:3px;gap:2px}
 .s11-posters>.s11-tag,.s11-track-ui{padding-inline:16px}
}
/* —— Phones —— */
@media(max-width:767px){
 .s11{--s-gut:16px}
 .s11-context,.s11-idea,.s11-step,.s11-close{grid-template-columns:minmax(0,1fr)}
 .s11-context>*,.s11-context>p,.s11-idea>*,.s11-idea>*:not(.s11-tag),.s11-step>*,.s11-close>*,.s11 .s11-close>.s11-facts{grid-column:1/-1}
 .s11-context>.s11-tag,.s11-idea>.s11-tag{padding-top:0}
 .s11-idea-q{font-size:2rem}
 .s11-row{max-width:none}
 .s11-phone{--pw:min(260px,68vw,max(210px,calc((100svh - 10rem)*.4615)))}
 .s11-notifs{flex-direction:column;align-items:stretch;max-width:30rem;justify-self:center}
 .s11-close{row-gap:2rem}
 .s11-board{max-width:none}
}

/* —— Portrait (phones, tablets upright): the opening as approved. A landscape phone keeps two columns —— */
@media(max-aspect-ratio:5/4){
 .s11-hero{grid-template-columns:minmax(0,1fr);min-height:0}
 .s11-hero-photo{width:100%;height:auto;aspect-ratio:.8}
 .s11-hero-photo>img{object-position:7.4% 50%}
 .s11-hero-copy{padding:0 1.25rem 1.25rem}
 .s11-hero .case-topline{order:3;margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--case-line)}
 .s11-lockup{order:0;margin-block:max(-.1em,-.5rem) .5rem;padding-block:0;pointer-events:none}
 .s11-title{font-size:min(25.6vw,16svh);line-height:.86;margin-top:max(-.2em,-1rem)}
 .s11-title span:nth-child(-n+2){display:inline}
 .s11-title span:nth-child(3){display:block}
 .s11-lockup .s11-scribble{left:-3%;top:-22%;width:104%}
 .s11-intro{order:1;margin-top:.5rem}
 .s11-hero .case-caption-line{order:2;margin-top:1rem}
}
@media(max-aspect-ratio:5/4) and (min-width:700px){
 .s11-hero-photo{aspect-ratio:.885}
 .s11-hero-photo>img{object-position:0 50%}
 .s11-title{font-size:min(20vw,13svh)}
 .s11-lockup .s11-scribble{left:-2%;top:-12%;width:76%}
}
@media(max-height:500px) and (min-aspect-ratio:5/4){
 .s11-hero-copy{padding-top:3.5rem;padding-bottom:.5rem}
 .s11-title{font-size:min(36cqw,25svh)}
 .s11-intro p{font-size:.82rem;line-height:1.25}
 .s11-intro .case-category{margin-bottom:.15rem;font-size:.75rem}
 .s11-hero .case-caption-line,.s11-hero .case-topline{font-size:.72rem}
 .s11-hero .case-caption-line{margin-top:.4rem;padding-top:.3rem}
 .s11-phone{--pw:min(220px,74vw)}
}
@media(prefers-reduced-motion:reduce){
 .s11-scribble path{animation:none!important;stroke-dashoffset:0!important}
 .s11-k,.s11-idea-q.is-split [data-w],.s11-pulse{transition:none}
}