/* Shared by the three inner pages (how-it-works, use-cases, case-studies). Motion: shared core (css/site-motion.css) + this page's own pieces below.
   Builds on ../css/home.css?v=e4aa017aba (tokens, .sec/.wrap/.sec-head, .win, .fig, .chain, .sc, .mega, .marks, .btn). */

/* current page in the nav */
.nav ul a[aria-current="page"]{color:rgb(var(--ink))}

/* ---------- page hero: shorter than Home, centred, a quiet radial glow (the .hero-lift look) and no wave ---------- */
.phero{position:relative;min-height:max(64svh,520px);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;padding:calc(var(--nav) + 40px) 0 72px}
.phero .hero-field{position:absolute;inset:0;z-index:-2;pointer-events:none}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;z-index:-1;background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)));pointer-events:none}
.phero .hero-stack h1{max-width:920px}
.phero .hero-stack .sub{max-width:640px}
.phero{min-height:auto;padding-bottom:24px}


/* shared bits */
.sec-head p,.sub,.uc-l,.case-what{text-wrap:pretty}
.centre-src{margin-top:28px;text-align:center}
.sec-head .eyebrow{margin-bottom:0}
@media (max-width:760px){
  footer nav{gap:12px 20px;font-size:14px}
  .phero{min-height:auto;padding:calc(var(--nav) + 48px) 0 56px}
}
@media (max-width:420px){
  .phero .hero-stack .eyebrow{letter-spacing:.14em;font-size:11px;gap:10px}
  .phero .hero-stack .eyebrow::before,.phero .hero-stack .eyebrow::after{width:16px}
}


/* ================= USE CASES ================= */
.sec-head p:not(.eyebrow){max-width:720px}

/* the film grid, taken from the brag page's "Made in house. Made to move." wall: 4 columns of 16:9 tiles, title and label over the still,
   a round play badge top right, the tile under the cursor lifts and takes its own glow while the others dim. Click plays in place. */
.films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 16px}
.film{position:relative;margin:0;min-width:0;box-shadow:none}   /* home.css .film carries a big glow shadow that only paints outside the box, leaving a hard dark block per card */
/* .lift (core) owns the translateY; it is also given the dimming transitions the grid needs. Ring and glow live on the media (below), so .lift-t */
.film.lift{transition:transform var(--m-hover) var(--m-ease),opacity .4s var(--m-ease),filter .4s var(--m-ease)}
.film-v{position:relative;aspect-ratio:16/9;border-radius:var(--r1);overflow:hidden;background:rgb(var(--s1));isolation:isolate;z-index:1;
  box-shadow:0 20px 50px -30px rgb(0 0 0/.9)}
.film-v::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;border:1px solid rgb(var(--line-br)/.7);pointer-events:none;transition:border-color .4s var(--m-ease)}
.film video,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:rgb(var(--s1))}
/* the still sits over the video and cross-fades away once the first frame is really playing (600ms), and comes back in 300ms */
.film-poster{z-index:1;opacity:1;transition:opacity .3s var(--m-ease)}
.film.playing .film-poster{opacity:0;transition-duration:.6s}
.film-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:inherit}
.film-open{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;
  font:600 12.5px/1 Inter,sans-serif;color:rgb(var(--ink));background:rgb(var(--bg)/.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.28);
  transition:transform .2s cubic-bezier(.23,1,.32,1),background-color .2s cubic-bezier(.23,1,.32,1)}
.film-open .ic{width:14px;height:14px}
.film-hit:focus-visible{outline:2px solid rgb(var(--c,var(--a4)));outline-offset:3px}
@media (hover:hover) and (pointer:fine){.film:hover .film-open{background:rgb(var(--c,var(--a4))/.9);transform:translate3d(0,-2px,0)}}
.film-meta{display:flex;flex-direction:column;gap:4px;margin-top:14px;text-align:left}
.film-meta b{font:800 clamp(17px,1.4vw,21px)/1.1 Cabinet,Inter,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}
.film-meta small{font:500 12.5px/1.3 Inter,sans-serif;color:rgb(var(--muted))}
/* glow behind the media: an overlay whose OPACITY animates (no box-shadow transition) */
.film:not(.film-link)::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;border-radius:var(--r1);z-index:0;pointer-events:none;opacity:0;
  box-shadow:0 30px 80px rgb(0 0 0/.65),0 0 60px rgb(var(--c,var(--a4))/.4);transition:opacity .4s var(--m-ease)}
@media (hover:hover) and (pointer:fine){
  .films:has(.film:hover) .film:not(:hover),.films:has(.film:focus-within) .film:not(:focus-within){opacity:.45;filter:saturate(.55)}
  .film:hover::before,.film:focus-within::before{opacity:1}
  .film:hover .film-v::after,.film:focus-within .film-v::after{border-color:rgb(var(--c,var(--a4))/.75)}
}
.film:focus-within .film-v::after{border-color:rgb(var(--c,var(--a4))/.75)}
/* the eighth tile is the way out: a link to the brag page */
.film-link{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;aspect-ratio:16/9;padding:20px;text-decoration:none;text-align:left;--c:var(--a6);
  border-radius:var(--r1);border:1px solid rgb(var(--line-br)/.7);
  background:radial-gradient(120% 120% at 100% 0,rgb(var(--a6)/.34),transparent 60%),linear-gradient(180deg,rgb(var(--s2)),rgb(var(--s1)))}
.film-link:hover,.film-link:focus-visible{border-color:rgb(var(--a6)/.8)}
.film-link.lift::after{box-shadow:inset 0 0 0 1px rgb(var(--a6)/.7),0 14px 40px -8px rgb(0 0 0/.6),0 0 28px -4px rgb(var(--a6)/.35)}
.film-link .fl-k{font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--muted))}
.film-link b{font:800 clamp(20px,1.8vw,26px)/1.05 Cabinet,Inter,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}
.film-link .fl-go{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 Inter,sans-serif;color:rgb(var(--ink))}
.film-link .fl-go .ic{display:block;width:14px;height:14px}
.film-link:hover .fl-go .arr{transform:translate3d(2px,0,0)}

/* the three rules */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;position:relative}
/* v46: the full-width hairline ran through the badges and the hover glow (.lift::after) painted over them. As on How it works: the badge sits above
   the glow, and short connectors (.cx) join one box to the next at the badge row */
.trio .cx{position:absolute;left:100%;top:-.5px;width:24px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgb(var(--c)/.55),rgb(var(--c)/.12))}
.trio li:last-child .cx{display:none}
.trio li{position:relative;margin-top:21px;border-radius:var(--r1);border:1px solid rgb(var(--line));background:rgb(var(--s1)/.6);padding:56px 28px 32px;text-align:center}
.trio .n{position:absolute;left:50%;top:-21px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--bg));border:1px solid rgb(var(--c));color:rgb(var(--ink));font:800 17px/1 Cabinet,sans-serif;box-shadow:0 0 0 6px rgb(var(--bg)),0 0 24px rgb(var(--c)/.35);z-index:2}
/* number badge: one ring ping when its card arrives (core adds .is-in; nothing exists under reduced motion) */
.trio .n::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgb(var(--c));opacity:0;pointer-events:none}
html.js.ssm .trio li.is-in .n::after{animation:ucPing .9s var(--m-ease) .5s 1 both}
@keyframes ucPing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.trio h3{font-size:clamp(20px,1.8vw,26px);margin-bottom:12px}
.trio p{font-size:15.5px;line-height:1.55;color:rgb(var(--muted));max-width:32ch;margin-inline:auto}

@media (max-width:1000px){
  .films{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .films{grid-template-columns:1fr}
  .film-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--bg)/.82)}
  .film-link{aspect-ratio:auto;min-height:150px}
  .trio{grid-template-columns:1fr;row-gap:40px}
  .trio .cx{display:none}
  .trio li{padding:50px 22px 26px}
}

/* ================= v46 ================= */
/* hero: the seven jobs as a plain row of chips. Each chip opens that job's example page */
/* hero: one live example page that steps through the seven, the chips are its tabs */
.uc-show{--dur:7s;width:min(940px,100%);margin:36px auto 0}
.uc-win{position:relative;text-align:left;box-shadow:0 40px 90px -40px rgb(0 0 0/.7)}
.uc-win .lp{transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .26s cubic-bezier(.23,1,.32,1)}
.uc-win.swap .lp{opacity:0;transform:translate3d(0,6px,0)}
.uc-win .lp-hero{padding-bottom:clamp(20px,3.4cqw,40px)}
.uc-win .lp-slots{display:none}
.uc-hit{position:absolute;inset:46px 0 0;display:flex;align-items:flex-end;justify-content:flex-end;padding:14px;border:0;background:none;cursor:pointer}
.uc-hit>span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgb(11 11 12/.82);color:#fff;font:600 13px/1 Inter,sans-serif;
  opacity:0;transform:translate3d(0,4px,0);transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1)}
.uc-hit .ic{width:14px;height:14px}
.uc-hit:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:-4px}
.uc-hit:focus-visible>span{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.uc-hit:hover>span{opacity:1;transform:none}}
.uc-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px auto 0;max-width:900px}
.uc-chips button{position:relative;overflow:hidden}
.uc-chips button[aria-current="true"]{background:rgb(var(--c)/.26);border-color:rgb(var(--c))}
.uc-t{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgb(var(--c));transform-origin:0 50%;transform:scaleX(0)}
.uc-show.run [aria-current="true"] .uc-t{animation:ucT var(--dur) linear forwards}
.uc-show.hold [aria-current="true"] .uc-t{animation-play-state:paused}
@keyframes ucT{to{transform:scaleX(1)}}
@media (max-width:760px){
  .uc-show{margin-top:26px}
  .uc-hit{inset:40px 0 0}
  .uc-win .lp-p,.uc-win .lp-by{display:none}
  /* SSWEB-5352: the seven tabs ran off the side as one scrolling row. On phones they are a two-column grid, all seven in view */
  .uc-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 0}
  .uc-chips li:last-child{grid-column:1/-1}
}
.uc-chips button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgb(var(--c)/.45);background:rgb(var(--c)/.1);
  font:600 13.5px/1 Inter,sans-serif;color:rgb(var(--ink));cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s cubic-bezier(.23,1,.32,1),border-color .2s cubic-bezier(.23,1,.32,1)}
.uc-chips button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--c))}
.uc-chips button:active{transform:scale(.97)}
.uc-chips button:focus-visible{outline:2px solid rgb(var(--c));outline-offset:2px}
@media (hover:hover) and (pointer:fine){.uc-chips button:hover{background:rgb(var(--c)/.22);border-color:rgb(var(--c)/.8)}}
@media (max-width:420px){.uc-chips button{height:34px;padding:0 12px;font-size:13px}}
@media (max-width:760px){.uc-chips button{width:100%;height:auto;min-height:40px;padding:8px 10px;border-radius:12px;font-size:12.5px;line-height:1.2;text-align:left}.uc-chips button::before{flex:none}}


/* ---------- the example page viewer: a native modal <dialog>. Desktop: a centred window that scales in from .96. Phones: a sheet that rises from the bottom,
   drag the handle down (or tap the cross) to close, swipe the page sideways for the next example. Esc closes, focus stays inside (native modal). ---------- */
html.ucv-open{overflow:hidden}
.ucv{position:fixed;inset:0;margin:auto;padding:0;border:0;background:none;color:rgb(var(--ink));width:min(1120px,calc(100vw - 48px));max-width:none;max-height:calc(100svh - 48px);overflow:visible}
.ucv::backdrop{background:rgb(4 6 12/.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.ucv.on::backdrop{opacity:1}
.ucv-in{display:flex;flex-direction:column;max-height:calc(100svh - 48px);border-radius:var(--r2);border:1px solid rgb(var(--line-br));background:rgb(var(--bg));box-shadow:0 60px 140px -40px rgb(0 0 0/.9);overflow:hidden;
  opacity:0;transform:scale(.96);transition:opacity .22s cubic-bezier(.23,1,.32,1),transform .28s cubic-bezier(.23,1,.32,1)}
.ucv.on .ucv-in{opacity:1;transform:none}
.ucv-head{display:flex;align-items:center;gap:16px;padding:16px 16px 14px 24px;border-bottom:1px solid rgb(var(--line))}
.ucv-grab{display:none}
.ucv-ttl{flex:1;min-width:0}
.ucv-k{font:600 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--faint));margin-bottom:6px}
.ucv-head h2{font-size:clamp(20px,2vw,26px);line-height:1.1;margin:0}
.ucv-x{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgb(var(--line-br));background:rgb(var(--s1));color:rgb(var(--ink));cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.ucv-x .ic{width:16px;height:16px}
.ucv-x:active,.ucv-nav:active{transform:scale(.94)}
.ucv-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px 22px}
.ucv-body.out .ucv-win{opacity:0;transform:translate3d(calc(var(--dir,1) * -16px),0,0)}
.ucv-win{transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .22s cubic-bezier(.23,1,.32,1)}
.ucv-win .win-bar .url{max-width:340px}
.ucv-io{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.ucv-io>div{border-radius:14px;border:1px solid rgb(var(--line));background:rgb(var(--s1)/.6);padding:14px 16px}
.ucv-io dt{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint));margin-bottom:8px}
.ucv-io dd{margin:0;font:500 14.5px/1.45 Inter,sans-serif;color:rgb(var(--body))}
.ucv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid rgb(var(--line));background:rgb(var(--s1)/.5)}
.ucv-nav{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgb(var(--line-br));background:rgb(var(--s1));color:rgb(var(--ink));cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .2s cubic-bezier(.23,1,.32,1)}
.ucv-nav .ic{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.ucv-nav:hover,.ucv-x:hover{border-color:rgb(var(--ink)/.5)}}
.ucv :focus-visible{outline:2px solid rgb(var(--a1));outline-offset:2px}

/* the mini page inside the viewer: the How it works page mock, recoloured per brand through --pb (page), --pi (ink), --pa (accent), --pc (text on accent) */
.lp{container-type:inline-size;background:var(--pf,#fff6ef);color:var(--pi)}
.lp-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(12px,1.9cqw,24px) clamp(16px,3.4cqw,44px);background:var(--pb)}
.lp-logo{display:inline-flex;align-items:center;gap:.7em;font:800 clamp(13px,1.5cqw,19px)/1 Cabinet,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--pi);white-space:nowrap}
.lp-logo i{display:block;width:1.15em;height:1.15em;background:var(--pa);border-radius:var(--pr,0)}
.lp-for{font:600 clamp(11px,1cqw,13px)/1 Inter,sans-serif;color:var(--pi);border:1px solid color-mix(in srgb,var(--pi) 50%,transparent);border-radius:999px;padding:.75em 1.2em;white-space:nowrap}
.lp-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3.4cqw,48px);align-items:center;padding:clamp(8px,1.4cqw,20px) clamp(16px,3.4cqw,44px) clamp(28px,4.4cqw,60px);
  background-color:var(--pb);background-image:linear-gradient(color-mix(in srgb,var(--pi) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pi) 7%,transparent) 1px,transparent 1px);background-size:clamp(36px,6cqw,80px) clamp(36px,6cqw,80px);background-position:-1px -1px}
.lp-k{font:700 clamp(10px,.95cqw,12px)/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--pa);margin-bottom:clamp(10px,1.3cqw,16px)}
.lp-copy h3{font:800 clamp(24px,3.5cqw,46px)/1.02 var(--pfont,Cabinet),system-ui,sans-serif;letter-spacing:-.03em;color:var(--pi);text-wrap:balance}
.lp-p{margin-top:clamp(10px,1.4cqw,18px);font:500 clamp(13px,1.3cqw,16.5px)/1.5 Inter,sans-serif;color:color-mix(in srgb,var(--pi) 82%,transparent);max-width:44ch;text-wrap:pretty}
.lp-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(14px,2cqw,26px);padding:clamp(12px,1.35cqw,17px) clamp(18px,2cqw,26px);background:var(--pa);color:var(--pc);border-radius:var(--pr,0);font:800 clamp(13px,1.4cqw,17px)/1 Cabinet,system-ui,sans-serif;letter-spacing:.02em}
.lp-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,1.2cqw,14px)}
.lp-slots span{font:600 clamp(11px,1cqw,12.5px)/1 Inter,sans-serif;color:var(--pi);border:1px solid color-mix(in srgb,var(--pi) 45%,transparent);border-radius:999px;padding:.72em 1.1em}
.lp-by{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2.2cqw,28px);font:500 clamp(11.5px,1.05cqw,13.5px)/1.35 Inter,sans-serif;color:color-mix(in srgb,var(--pi) 80%,transparent)}
.lp-av{position:relative;flex:none;width:clamp(48px,4.6cqw,62px);height:clamp(48px,4.6cqw,62px);border-radius:50%;padding:2px;background:var(--pa)}
.lp-av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--pb)}
.lp-av b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:2px solid var(--pb);background:var(--pb);color:var(--pa);font:800 1.1em/1 Cabinet,sans-serif}
.lp-bt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.lp-bt small{font-size:.86em;opacity:.75}
.lp-bt b{font-size:1.08em;color:var(--pi)}
.lp-bt>span{font-size:.92em;opacity:.85}
.lp-vid{position:relative;aspect-ratio:16/9;border-radius:clamp(8px,1.1cqw,14px);overflow:hidden;background:#0b0b0c;box-shadow:0 30px 70px -28px rgb(0 0 0/.65),0 0 0 3px var(--pa)}
.lp-vid video{display:block;width:100%;height:100%;object-fit:cover}
.lp-ctl{position:absolute;inset:0;display:flex;align-items:flex-end;gap:10px;width:100%;padding:0 clamp(10px,1.4cqw,16px) clamp(9px,1.1cqw,13px);border:0;background:linear-gradient(transparent 70%,rgb(0 0 0/.55));color:#fff;cursor:pointer}
.lp-ctl .ic,.lp-ctl .ic-pause{width:13px;height:13px;flex:none}
.lp-ctl .ic-pause{display:none;gap:3px}.lp-ctl .ic-pause i{width:4px;height:13px;background:#fff;border-radius:1px}
.lp-vid.playing .lp-ctl .ic-play{display:none}.lp-vid.playing .lp-ctl .ic-pause{display:flex}
.lp-ctl::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(0 0 0/.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat;
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.4);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.lp-vid.playing .lp-ctl::before{opacity:0;transform:scale(.9)}
.lp-scrub{flex:1;height:3px;margin-bottom:5px;border-radius:3px;background:rgb(255 255 255/.3);overflow:hidden}
.lp-scrub i{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.lp-f{padding:clamp(12px,1.5cqw,18px) clamp(16px,3.4cqw,44px);font:500 clamp(10.5px,.95cqw,12px)/1.4 Inter,sans-serif;background:var(--pb);color:color-mix(in srgb,var(--pi) 62%,transparent);border-top:1px solid color-mix(in srgb,var(--pi) 12%,transparent)}
@container (max-width:680px){
  .lp-hero{grid-template-columns:1fr;gap:20px;padding-top:6px}
  .lp-vid{order:-1}
  .lp-copy h3{font-size:clamp(24px,7.4cqw,34px)}
  .lp-slots{display:none}
}

@media (max-width:760px){
  .ucv{inset:auto 0 0 0;margin:0;width:100%;max-height:none;height:calc(100svh - 16px)}
  .ucv-in{height:100%;max-height:none;border-radius:22px 22px 0 0;border-bottom:0;transform:translate3d(0,100%,0);opacity:1;transition:transform .32s cubic-bezier(.32,.72,0,1)}
  .ucv.on .ucv-in{transform:translate3d(0,var(--drag,0px),0)}
  .ucv.dragging .ucv-in{transition:none}
  .ucv-head{position:relative;padding:22px 12px 12px 18px;touch-action:none}
  .ucv-grab{display:block;position:absolute;left:50%;top:8px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgb(var(--ink)/.3)}
  .ucv-body{padding:14px 14px 18px}
  .ucv-win{border-radius:14px}
  .ucv-win .win-bar{height:40px;padding:0 10px}
  .ucv-io{grid-template-columns:1fr;gap:8px;margin-top:12px}
  .ucv-io>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 14px}
  .ucv-io dt{margin:0}
  .ucv-io dd{font-size:14px}
  /* SSWEB-5352: the bottom bar sat under Safari's floating toolbar. On phones the arrows and the call button sit under the title instead,
     and the page scrolls clear of the toolbar */
  .ucv-head{order:0}.ucv-foot{order:1}.ucv-body{order:2}
  .ucv-foot{padding:10px 14px;border-top:0;border-bottom:1px solid rgb(var(--line))}
  .ucv-foot .btn{flex:1;justify-content:center}
  .ucv-body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .film-link{display:none}   /* the work showcase is not built for phones yet */
}
@media (prefers-reduced-motion:reduce){
  .ucv-in,.ucv::backdrop,.ucv-win{transition:opacity .2s linear!important;transform:none!important}
  .ucv-in{opacity:0}.ucv.on .ucv-in{opacity:1}
  .lp-ctl::before{transition:none}
}