/* ============================================================================
   Use cases — the SAJA case study
   Built on ds.css tokens (accent, hairline, type ladder, radii). Visual first:
   short copy, real screens, and the platforms shown in the same laptop the
   walkthrough films use.

   Layers:
   1. uc-*          the page: head, overview, wall, sections, journey, delivered.
   2. uc-device     the device stage: a black stage holding one laptop, a film
                    or a screen at a time, and a filmstrip of thumbnails grouped
                    under the design file's section names. Generated by
                    figma-export/gen-devices.js.
   SAJA green appears only inside the product screens.
   ============================================================================ */

:root{
  /* badge tiers (Saja Academy) */
  --t-bronze:   #9A6235;
  --t-silver:   #6F7A87;
  --t-gold:     #A67C12;
  --t-platinum: #204289;   /* the site accent: SAJA green stays in the screens */
  --t-locked:   #A3A8B2;
  /* the device stages and the wall: the brand's deep blue, so the screens
     sit on the site's own colour rather than a black box */
  --stage:      #13307A;
  --stage-bg:   radial-gradient(70% 90% at 90% 0%, rgba(19,174,219,.30) 0%, transparent 60%),
                radial-gradient(60% 80% at 0% 100%, rgba(47,107,255,.28) 0%, transparent 60%),
                linear-gradient(150deg,#1B3A8C 0%,#163683 50%,#10265F 100%);
  --stage-ink:  rgba(255,255,255,.72);
  --stage-line: rgba(255,255,255,.14);
}

/* The masthead is solid over the full-bleed head, as on the channel pages. */
.mast.glass, .mast.glass.is-stuck{
  background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid var(--divider-soft); box-shadow:none;
}
.mast.glass.is-stuck{ box-shadow:0 1px 14px -8px rgba(10,16,32,.22) }

/* ============================ head ====================================== */
.uc-head .phero__in{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) }
.uc-head .h1{ max-width:20ch }
/* back to the list, as the service pages do it */
.uc-crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font:var(--t-caption); color:#C6D2EC; margin:0 0 var(--s-md) }
.uc-crumb a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3) }
.uc-crumb a:hover{ border-bottom-color:#fff }
.uc-facts{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(28px,4vw,48px) 0 0; padding:0;
  border-top:1px solid rgba(255,255,255,.18);
}
.uc-facts div{ padding:var(--s-md) var(--s-lg) 0 0 }
.uc-facts dt{ font:600 11px/1.2 var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--c-accent-on-dark) }
.uc-facts dd{ margin:6px 0 0; font:var(--t-caption); letter-spacing:var(--track-caption); color:var(--on-dark) }
@media (max-width:900px){
  .uc-head .phero__in{ grid-template-columns:1fr }
  .uc-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s-sm) }
}

/* ---- a laptop: the stages' machine, cut out of its black ground ----------
   The frame image sits over a screen placed in its display box (percentages
   of the cut-out frame, 1896 × 1151). Used by the head and the four cards. */
.hl{ position:relative; display:block; aspect-ratio:1896 / 1151 }
.hl__screen{
  position:absolute; left:10.127%; top:2.433%; width:79.747%; height:85.317%;
  overflow:hidden; background:#fff;
}
.hl__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
.hl__frame{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }

/* ---- the head: four laptops, one per platform ----------------------------
   Laid out in percentages of one box, so the group scales like one picture.
   A laptop's height is 97% of its width in this box (1.6 box, 1.647 laptop):
   a 0–56, b 6–62, c 44–92, d 40–98. They rise in once the intro lifts
   (usecases.js holds them with .is-waiting), then lean with the pointer. */
.uc-collage{ position:relative; aspect-ratio:1.6/1; --px:0; --py:0 }
.uc-collage__in{ position:absolute; inset:0 }
.uc-collage .hl{
  position:absolute; --k:0; --depth:.6;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));
  translate:calc(var(--px) * var(--depth) * 1.4%) calc(var(--py) * var(--depth) * 1.4%);
  transition:opacity .9s var(--ease-out) calc(var(--k) * 130ms),
             transform 1.2s var(--ease-out) calc(var(--k) * 130ms),
             translate .8s var(--ease-out);
}
.hl--a{ left:0;  top:0;   width:58%; --k:0; --depth:.35 }
.hl--b{ right:0; top:6%;  width:58%; --k:1; --depth:.45; z-index:1 }
.hl--c{ left:3%; top:44%; width:50%; --k:2; --depth:.8;  z-index:2 }
.hl--d{ right:1%; top:40%; width:60%; --k:3; --depth:1;  z-index:3 }
.uc-collage.is-waiting .hl{ opacity:0; transform:translateY(12%) scale(.96) }
@media (prefers-reduced-motion:reduce){ .uc-collage .hl{ transition:none; translate:none } }

/* ============================ section nav ================================ */
/* Same pattern as the channels page: sticky under the masthead, scrolls
   sideways on a narrow screen, the current chapter filled with the accent. */
.subnav{ position:sticky; top:var(--nav-h); z-index:var(--z-sticky) }
.subnav.glass{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid var(--divider-soft);
}
.subnav ul{
  display:flex; gap:var(--s-xxs); list-style:none; margin:0 auto;
  padding:var(--s-xs) var(--pad-x); max-width:var(--maxw);
  overflow-x:auto; scrollbar-width:none;
  justify-content:center; justify-content:safe center;
}
.subnav ul::-webkit-scrollbar{ display:none }
.subnav a{
  display:flex; align-items:center; white-space:nowrap; text-decoration:none;
  font:var(--t-button-utility); letter-spacing:var(--track-caption); color:var(--ink-muted-80);
  padding:9px var(--s-sm); border-radius:var(--r-pill);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.subnav a:hover{ background:rgba(10,16,32,.05); color:var(--ink) }
.subnav a.on{ background:var(--c-accent); color:#fff }

/* ============================ shared ===================================== */
.uc-sec{ scroll-margin-top:calc(var(--nav-h) + 56px) }
.uc-idx{ margin-right:var(--s-xs); color:var(--ink-muted-48); font-variant-numeric:tabular-nums }
.uc-center{ text-align:center }
.uc-center .h2, .uc-center .lede{ margin-inline:auto }
.uc-center .h2{ max-width:24ch }
.uc-center .lede{ max-width:60ch }
.uc-sec-head + *{ margin-top:clamp(36px,4vw,56px) }

/* ---- overview: the scale, then the four platforms ------------------------ */
.uc-scale{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(32px,3.6vw,52px) 0 0; padding:0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.uc-scale div{ padding:var(--s-lg) var(--s-lg) var(--s-lg) 0 }
.uc-scale div + div{ padding-left:var(--s-lg); border-left:1px solid var(--hairline) }
.uc-scale dt{ font:600 clamp(40px,5vw,64px)/1 var(--font-display); letter-spacing:-.03em; color:var(--c-accent-text) }
.uc-scale dd{ margin:var(--s-xs) 0 0; font:var(--t-caption); letter-spacing:var(--track-caption); color:var(--ink-muted-80); max-width:24ch }
@media (max-width:820px){
  .uc-scale{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .uc-scale div:nth-child(3){ padding-left:0; border-left:0 }
  .uc-scale div:nth-child(n+3){ border-top:1px solid var(--hairline) }
}

.uc-four{
  list-style:none; margin:clamp(28px,3vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-lg);
}
.uc-four a{
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.uc-four a:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c-accent) 38%,transparent);
  box-shadow:0 18px 36px -24px rgba(10,16,32,.4);
}
.uc-four__vis{
  position:relative; display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden;
  background:radial-gradient(90% 80% at 50% 100%, color-mix(in srgb,var(--c-accent) 14%,#fff), var(--canvas-parchment));
  border-bottom:1px solid var(--hairline);
}
.uc-four__vis .hl{
  width:86%; filter:drop-shadow(0 12px 14px rgba(10,16,32,.28));
  transition:transform .7s var(--ease-out);
}
.uc-four a:hover .uc-four__vis .hl{ transform:translateY(-4%) scale(1.04) }
.uc-four__body{ flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--s-lg) }
.uc-four__num{ font:var(--t-caption-strong); letter-spacing:var(--track-caption); color:var(--c-accent-text) }
.uc-four h3{ margin:0; font:var(--t-tagline); letter-spacing:.231px }
.uc-four p{ margin:0; font:var(--t-caption); letter-spacing:var(--track-caption); color:var(--ink-muted-80) }
.uc-four__for{
  align-self:flex-start; margin-top:auto; padding:5px 10px; border-radius:var(--r-pill);
  font:600 11.5px/1.2 var(--font-text); color:var(--c-accent-text);
  background:color-mix(in srgb,var(--c-accent) 7%,#fff);
}
.uc-four p + .uc-four__for{ margin-top:var(--s-md) }
@media (max-width:1100px){ .uc-four{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .uc-four{ grid-template-columns:1fr } }

/* ---- the wall: every screen, drifting past ------------------------------
   Two rows moving in opposite directions. Each track holds its screens twice,
   so a move of half its width loops without a seam; the space between
   screens is a margin on each, not a gap, so both halves are the same width.
   It stops off screen, on hover, and for good with the pause button.
   Stills for reduced motion, where the button has nothing to do. */
.uc-wall{ background:var(--stage-bg); color:var(--on-dark); padding:clamp(56px,7vw,96px) 0; overflow:hidden }
.uc-wall__head{ text-align:center }
.uc-wall__head .eyebrow{ color:var(--c-accent-on-dark) }
.uc-wall__head .h2{ color:var(--on-dark); margin-inline:auto; max-width:24ch }
.uc-wall__ctl{
  margin-top:var(--s-md); font:var(--t-caption-strong); color:#fff; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:7px 14px;
}
.uc-wall__ctl:hover{ background:rgba(255,255,255,.1) }
.uc-wall__ctl:focus-visible{ outline:2px solid var(--c-accent-on-dark); outline-offset:3px }
.uc-wall__rows{ display:grid; gap:14px; margin-top:clamp(32px,4vw,52px) }
.uc-wall__row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.uc-wall__track{ display:flex; width:max-content; animation:uc-wall 110s linear infinite }
.uc-wall__row--rev .uc-wall__track{ animation-direction:reverse; animation-duration:130s }
.uc-wall__track img{ display:block; flex:none; margin-right:14px; width:clamp(160px,17vw,236px); height:auto; aspect-ratio:360/234; border-radius:10px; outline:1px solid var(--stage-line) }
.uc-wall.is-paused .uc-wall__track, .uc-wall.is-held .uc-wall__track,
.uc-wall__rows:hover .uc-wall__track{ animation-play-state:paused }
@keyframes uc-wall{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .uc-wall__track{ animation:none } .uc-wall__ctl{ display:none } }

/* ---- ecosystem: four platforms around one record ------------------------- */
.uc-eco{
  --gap-x:clamp(40px,5vw,84px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr) minmax(0,1fr);
  grid-template-areas:"a hub b" "c hub d";
  column-gap:var(--gap-x); row-gap:var(--s-lg);
  align-items:center;
}
.uc-eco__card{
  position:relative; display:block; text-decoration:none; color:var(--ink);
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s-lg);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.uc-eco__card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--c-accent) 38%,transparent);
  box-shadow:0 14px 30px -22px rgba(10,16,32,.34);
}
.uc-eco__card{ display:flex; align-items:center; gap:var(--s-md) }
.uc-eco__card .hl{ flex:none; width:clamp(88px,9vw,120px); filter:drop-shadow(0 6px 8px rgba(10,16,32,.22)) }
.uc-eco__card h3{ margin:0; font:var(--t-tagline); letter-spacing:.231px }
.uc-eco__card--a{ grid-area:a } .uc-eco__card--b{ grid-area:b }
.uc-eco__card--c{ grid-area:c } .uc-eco__card--d{ grid-area:d }

/* the wire between a card and the hub, with a pulse travelling each way:
   once as the diagram arrives, and again for as long as a card is hovered,
   so nothing on the page moves on its own for more than a few seconds */
.uc-wire{ position:absolute; top:50%; width:var(--gap-x); height:2px; background:color-mix(in srgb,var(--c-accent) 26%,transparent) }
.uc-eco__card--a .uc-wire, .uc-eco__card--c .uc-wire{ left:100% }
.uc-eco__card--b .uc-wire, .uc-eco__card--d .uc-wire{ right:100% }
.uc-wire i{
  position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--c-accent); left:0;
  opacity:0; animation:uc-flow 2.6s var(--ease) 1 paused;
}
.uc-wire i + i{ animation-name:uc-flow-back; animation-delay:1.3s; background:var(--c-accent-on-dark); box-shadow:0 0 0 2px var(--c-accent) }
.reveal.is-in .uc-wire i{ animation-play-state:running }
.uc-eco__card:hover .uc-wire i{ animation-iteration-count:infinite }
@keyframes uc-flow     { 0%{ left:0; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:calc(100% - 8px); opacity:0 } }
@keyframes uc-flow-back{ 0%{ left:calc(100% - 8px); opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ left:0; opacity:0 } }

.uc-eco__hub{
  grid-area:hub; position:relative; z-index:1;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--c-accent) 78%,#fff) 0%, transparent 70%),
    var(--c-accent);
  color:var(--on-dark); border-radius:26px; padding:var(--s-xl) var(--s-lg);
  text-align:center;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--c-accent) 70%,#000);
}
.uc-eco__hub svg{ width:44px; height:44px; margin:0 auto var(--s-md); display:block; stroke:var(--c-accent-on-dark); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.uc-eco__hub h3{ margin:0; font:var(--t-display-md); letter-spacing:var(--track-md); color:var(--on-dark) }
.uc-chips{ list-style:none; margin:var(--s-lg) 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px }
.uc-chips li{
  font:400 12px/1 var(--font-text); letter-spacing:0; padding:7px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:var(--on-dark);
}
.uc-chips li.is-consent{ background:var(--c-accent-on-dark); border-color:var(--c-accent-on-dark); color:var(--c-accent); font-weight:600 }

@media (max-width:900px){
  .uc-eco{ grid-template-columns:1fr; grid-template-areas:"hub" "a" "b" "c" "d"; row-gap:var(--s-xl) }
  .uc-wire{ top:auto; bottom:100%; left:50% !important; right:auto !important;
            width:2px; height:var(--s-xl); margin-left:-1px }
  .uc-wire i{ left:50%; margin:0 0 0 -4px; top:0; animation-name:uc-flow-v }
  .uc-wire i + i{ animation-name:uc-flow-v-back }
  @keyframes uc-flow-v     { 0%{ top:calc(100% - 8px); opacity:0 } 20%,80%{ opacity:1 } 100%{ top:0; opacity:0 } }
  @keyframes uc-flow-v-back{ 0%{ top:0; opacity:0 } 20%,80%{ opacity:1 } 100%{ top:calc(100% - 8px); opacity:0 } }
}
@media (prefers-reduced-motion:reduce){ .uc-wire i{ animation:none; opacity:0 } }

/* ============================ a platform ================================ */
/* The same template four times: number, name, one line, capability pills,
   then the device stage. The words stay short; the screens do the talking. */
.uc-plat__head{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(20px,3vw,48px); align-items:start }
.uc-plat__num{
  font:600 clamp(72px,9vw,132px)/.8 var(--font-display); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--c-accent) 60%,transparent);
  font-variant-numeric:tabular-nums; user-select:none;
}
.uc-plat__head .h2{ max-width:20ch }
.uc-plat__head .lede{ margin-top:var(--s-sm) }
@media (max-width:620px){
  .uc-plat__head{ grid-template-columns:1fr }
  .uc-plat__num{ font-size:64px; margin-bottom:var(--s-md) }
}

.uc-pills{ list-style:none; margin:var(--s-lg) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.uc-pills li{
  font:400 13px/1 var(--font-text); letter-spacing:0; padding:9px 13px; border-radius:var(--r-pill);
  color:var(--ink); background:var(--canvas); border:1px solid var(--hairline);
}
.uc-pills li.is-for{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; font-weight:600 }

/* ---- the device stage ------------------------------------------------------
   A black stage the size of the laptop frame (--fw × --fh), sized so the whole
   machine fits the window. A screen sits in the frame's display box (--dl,
   --dt, --dw, --dh, cut from the film itself), and a page taller than the
   display pans inside it. The frame stays on top of the film too: it was cut
   from the film, so it matches, and it covers the film's laptop base. Only a
   phone screen hides it (.is-bare) and gets a phone instead. */
.uc-device{
  --fitd:clamp(260px, calc(100svh - var(--nav-h) - 300px), 820px);
  margin-top:clamp(28px,3.4vw,48px);
  background:var(--stage-bg); color:var(--stage-ink); position:relative;
  border-radius:28px; padding:clamp(12px,2.2vw,28px) clamp(10px,2.2vw,28px) clamp(14px,2vw,24px);
}
.uc-device__stage{
  position:relative; margin-inline:auto; overflow:hidden;
  width:min(100%, calc(var(--fitd) * var(--fw) / var(--fh)));
  aspect-ratio:var(--fw) / var(--fh);
}
.uc-device__frame{
  position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%;
  pointer-events:none; transition:opacity var(--dur-3) var(--ease);
}
.uc-device.is-bare .uc-device__frame{ opacity:0 }

.uc-device__film{ position:absolute; inset:0; z-index:1 }
.uc-device__video{ display:block; width:100%; height:100%; object-fit:contain; background:transparent }
/* the walkthroughs were filmed on black: the film is cut to the laptop's
   display, and the frame's own body sits on top, so no black shows round it */
.uc-device__film{ clip-path:inset(var(--dt) calc(100% - var(--dl) - var(--dw)) calc(100% - var(--dt) - var(--dh)) var(--dl)) }

.uc-device__shot{
  position:absolute; z-index:1; margin:0; overflow:hidden; background:#fff;
  left:var(--dl); top:var(--dt); width:var(--dw); height:var(--dh);
  container-type:size;
}
.uc-device__shot img{
  display:block; width:100%; height:auto;
  animation:uc-pan var(--pan,10s) ease-in-out infinite; animation-play-state:paused;
}
.uc-device.is-live .uc-device__shot img{ animation-play-state:running }
/* a screen the display's own shape is shown still and whole; a shorter one
   sits at the top on white, uncropped */
.uc-device__shot.is-fit img{ height:100%; object-fit:cover; object-position:top; animation:none }
.uc-device__shot.is-short img{ animation:none }
/* hold at the top, glide down, hold, glide back */
@keyframes uc-pan{
  0%, 12%{ transform:translateY(0) }
  60%, 70%{ transform:translateY(calc(-100% + 100cqh)) }
  100%{ transform:translateY(0) }
}
/* the phone: centred on the stage, the page panning inside it */
.uc-device__shot--phone{
  left:50%; top:5%; height:90%; width:auto; aspect-ratio:430 / 932; transform:translateX(-50%);
  border:9px solid #23262C; border-radius:40px; box-shadow:0 0 0 1px #3A3E46;
}
/* reduced motion starts held; an explicit "Play motion" still plays */
@media (prefers-reduced-motion:reduce){ .uc-device:not(.is-live) .uc-device__shot img{ animation:none } }
/* the panels come before their tablist and hold nothing focusable, so they
   take focus themselves; the ring sits inside the clipped stage */
.uc-device__shot:focus-visible, .uc-device__film:focus-visible{ outline:3px solid var(--c-accent-on-dark); outline-offset:-3px }
.uc-device__shot--phone:focus-visible{ outline-offset:2px }
/* on a phone the laptop's shape leaves a phone screen tiny, so the stage
   turns portrait while a phone screen is up */
@media (max-width:620px){
  .uc-device.is-bare .uc-device__stage{ aspect-ratio:3 / 4 }
  .uc-device__shot--phone{ border-width:6px; border-radius:26px }
}

/* caption row: what is on the stage, a link to see it full size, and the
   control that pauses every moving thing in this stage */
.uc-device__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:clamp(12px,1.6vw,18px) auto 0; max-width:calc(var(--fitd) * var(--fw) / var(--fh));
}
.uc-device__now{ margin:0 auto 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:var(--t-caption); color:#fff }
.uc-device__tag{
  font:600 10.5px/1 var(--font-text); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 8px; border-radius:var(--r-pill); color:var(--c-accent-on-dark); border:1px solid rgba(109,207,246,.4);
}
.uc-device__open{ font:var(--t-caption); color:var(--c-accent-on-dark) }
.uc-device__open[hidden]{ display:none }
.uc-device__motion{
  font:var(--t-caption-strong); color:#fff; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pill); padding:7px 14px;
}
.uc-device__motion:hover{ background:rgba(255,255,255,.1) }
.uc-device__motion[hidden]{ display:none }
.uc-device__motion:focus-visible, .uc-device__open:focus-visible{ outline:2px solid var(--c-accent-on-dark); outline-offset:3px }

/* the filmstrip */
.uc-device__strip{
  display:flex; gap:22px; overflow-x:auto; margin-top:clamp(14px,1.8vw,22px);
  padding:8px 8px 10px; scroll-padding-inline:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent;
}
.uc-device__group{ flex:none; display:flex; flex-direction:column; gap:8px }
.uc-device__glabel{ margin:0; font:600 10.5px/1.2 var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap }
.uc-device__row{ display:flex; gap:10px }
.uc-thumb{
  flex:none; width:150px; padding:0; cursor:pointer; text-align:left;
  background:none; border:0; color:var(--stage-ink);
  font:400 12px/1.3 var(--font-text); letter-spacing:0;
}
.uc-thumb img{
  display:block; width:100%; height:auto; aspect-ratio:360/234; border-radius:8px;
  outline:1px solid var(--stage-line); outline-offset:0;
  transition:transform var(--dur-2) var(--ease), outline-color var(--dur-2) var(--ease);
}
.uc-thumb span{ display:block; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.uc-thumb:hover img{ transform:translateY(-2px); outline-color:rgba(255,255,255,.4) }
.uc-thumb[aria-selected="true"]{ color:#fff }
.uc-thumb[aria-selected="true"] img{ outline:2px solid var(--c-accent-on-dark); outline-offset:2px }
.uc-thumb:focus-visible{ outline:2px solid var(--c-accent-on-dark); outline-offset:4px; border-radius:8px }
/* the film thumbnail carries a play mark */
.uc-thumb--film{ position:relative }
.uc-thumb--film::after{
  content:''; position:absolute; left:calc(50% - 16px); top:calc(97.5px / 2 - 16px);
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 10.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat;
}
@media (max-width:620px){
  .uc-device{ border-radius:20px }
  .uc-thumb{ width:120px }
  .uc-thumb--film::after{ top:calc(78px / 2 - 16px) }
}

/* ---- Saja Academy: the journey and the badges, compact ------------------ */
.uc-learn{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,3vw,48px);
  align-items:center; margin-top:clamp(28px,3.4vw,44px);
}
.uc-steps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.uc-steps li{
  counter-increment:s; display:flex; align-items:center; gap:10px;
  padding:12px 14px; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--canvas);
  font:var(--t-caption-strong); letter-spacing:var(--track-caption); color:var(--ink);
}
.uc-steps li::before{
  content:counter(s); flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--c-accent); color:var(--c-accent-text); font:600 12px/1 var(--font-text);
}
.uc-steps li:last-child::before{ background:var(--c-accent); color:#fff }
.uc-badges{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.uc-badges span{ display:grid; justify-items:center; gap:6px; font:var(--t-caption); color:var(--ink-muted-80); text-align:center }
.bdg{ width:52px; height:52px; flex:none; color:var(--tier,var(--t-locked)); overflow:visible }
.bdg use{ stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.bdg use:first-of-type{ fill:color-mix(in srgb,var(--tier,var(--t-locked)) 13%,#fff) }
.bdg use + use{ fill:none }
[data-tier="bronze"]  { --tier:var(--t-bronze) }
[data-tier="silver"]  { --tier:var(--t-silver) }
[data-tier="gold"]    { --tier:var(--t-gold) }
[data-tier="platinum"]{ --tier:var(--t-platinum) }
@media (max-width:1000px){ .uc-learn{ grid-template-columns:1fr } }
@media (max-width:620px){ .uc-steps{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---- one doctor, one journey -------------------------------------------- */
.uc-journey{
  list-style:none; margin:clamp(36px,4vw,56px) 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s-lg);
}
.uc-journey::before{
  content:''; position:absolute; left:18px; right:18px; top:17px; height:2px;
  background:linear-gradient(90deg, var(--c-accent), color-mix(in srgb,var(--c-accent) 30%,transparent));
}
.uc-journey li{ position:relative }
.uc-journey__n{
  position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--canvas); border:2px solid var(--c-accent); color:var(--c-accent-text); font:var(--t-caption-strong);
}
.uc-journey li:last-child .uc-journey__n{ background:var(--c-accent); color:#fff }
.uc-journey p{ margin:var(--s-sm) 0 0; font:var(--t-body); letter-spacing:var(--track-body); color:var(--ink) }
.uc-ch{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-md);
  font:600 11px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:var(--r-pill);
  color:var(--c-accent-text); background:color-mix(in srgb,var(--c-accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--c-accent) 24%,transparent);
}
.uc-ch--wa{ color:var(--c-whatsapp-ink); background:#EAF8EF; border-color:rgba(37,211,102,.35) }
@media (max-width:1100px){
  .uc-journey{ grid-template-columns:1fr; gap:0 }
  .uc-journey::before{ left:17px; right:auto; top:18px; bottom:18px; width:2px; height:auto;
    background:linear-gradient(180deg, var(--c-accent), color-mix(in srgb,var(--c-accent) 30%,transparent)) }
  .uc-journey li{ display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:var(--s-md); padding-bottom:var(--s-lg) }
  .uc-journey li:last-child{ padding-bottom:0 }
  .uc-journey__n{ grid-row:1 / span 2 }
  .uc-ch{ margin-top:6px; justify-self:start }
  .uc-journey p{ grid-column:2; margin-top:6px; max-width:60ch }
}

/* ---- what we delivered: one row of pills -------------------------------- */
.uc-deliv{ justify-content:center; max-width:900px; margin:clamp(28px,3vw,40px) auto 0 }
.uc-deliv li{ font-size:14px; padding:11px 16px }

.outro{ text-align:center }
.outro .h1, .outro .lede{ margin-inline:auto }

/* previous / next: two round buttons either side of the screen */
.uc-device__view{ position:relative; margin-inline:auto; width:min(100%, calc(var(--fitd) * var(--fw) / var(--fh))) }
.uc-device__view .uc-device__stage{ width:100% }
.uc-nav{
  position:absolute; top:50%; z-index:4; width:48px; height:48px; margin-top:-24px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:0; padding:0;
  background:#fff; color:var(--c-accent); box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.uc-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.uc-nav--prev{ left:0; transform:translateX(-50%) }
.uc-nav--next{ right:0; transform:translateX(50%) }
.uc-nav:hover{ background:var(--c-accent); color:#fff }
.uc-nav--prev:hover{ transform:translateX(-50%) scale(1.08) }
.uc-nav--next:hover{ transform:translateX(50%) scale(1.08) }
.uc-nav:focus-visible{ outline:3px solid #8FD8F5; outline-offset:3px }
@media (max-width:620px){
  .uc-nav{ width:38px; height:38px; margin-top:-19px }
  .uc-nav--prev{ transform:translateX(-30%) } .uc-nav--next{ transform:translateX(30%) }
}