/* ==== 61-proekti.css ==== */
/* ---------- PROEKTI „Кино“ (.pr-) : fanned phones sub-hero (real sites only), then three scenes on the shared stage:
   #pr-live (the 4 live client sites: laptop + phone screening room), #pr-con (the 5 flagship concepts: a coverflow of screens)
   and #pr-gal (all 12 concepts: filter + lit thumbnails). Sequencing comes from 04-stage.css (.sq in [data-play] groups).
   The one loop per scene is the auto-advance of the room (progress bar per tab), gated by .live; clips are handled by 61-proekti.js.
   Honesty: live = green dot „На живо“ + the real domain; concept = hollow ring „Концепция“, on every item and in every state. ---------- */

/* ---------- device mockups (page-local names, so nothing collides with the home mockups) ---------- */
.pr-phone{position:relative;background:#0A0D1F;border-radius:17%/7.9%;padding:3.6%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 34px 60px -24px rgba(0,0,30,.75)}
.pr-ph-view{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:14%/6.5%;background:#000}
.pr-ph-view::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000}
.pr-ph-view::after,.pr-lap-view::after,.pr-cs-scr::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 34%)}
.pr-ph-view img,.pr-lap-view img{width:100%;height:auto}
.pr-lap{position:relative}
.pr-lap-screen{position:relative;background:#0A0D1F;border-radius:18px 18px 4px 4px;padding:1.5% 1.5% 2.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.05),0 50px 90px -40px rgba(0,0,30,.85)}
.pr-lap-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 5px 5px;background:#000}
.pr-lap-base{position:relative;height:clamp(9px,1.3vw,16px);margin-inline:-6.5%;background:linear-gradient(180deg,#EEF0F6 0%,#C7CCDA 45%,#8E95AB 100%);border-radius:2px 2px 18px 18px/2px 2px 14px 14px;box-shadow:0 26px 40px -14px rgba(0,0,30,.6)}
.pr-lap-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:38%;translate:-50% 0;background:#B3B9CA;border-radius:0 0 10px 10px}

/* browser address bar: the real domain, with the lock of a secure site */
.pr-url{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:6px 6px 0 0}
.pr-url i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263}
.pr-url span{flex:1;display:flex;align-items:center;gap:6px;min-width:0;height:20px;margin:0 8% 0 5%;padding-left:12px;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden}
.pr-url span b{font-weight:500}
.pr-url svg{width:12px;height:12px;flex:none;fill:none;stroke:#34D27B;stroke-width:2.6;stroke-linecap:round}

/* the fan's tall screenshot scrolls slowly inside the phone while the fan is on screen */
@media (prefers-reduced-motion:no-preference){
  .pr-scr{animation:prScroll var(--dur,28s) ease-in-out 1.2s infinite alternate;animation-play-state:paused;will-change:transform}
  .pr-fan.play .pr-scr{animation-play-state:running}
}
@keyframes prScroll{0%,8%{transform:translateY(0)}30%,38%{transform:translateY(calc(var(--max) * .33))}62%,70%{transform:translateY(calc(var(--max) * .66))}92%,100%{transform:translateY(var(--max))}}
@keyframes prBob{to{transform:translateY(-10px)}}

/* ---------- sub-hero: three real sites fanned out, floating ---------- */
.pr-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pr-fan{position:relative;min-height:clamp(420px,40vw,580px)}
.pr-fan::before{content:'';position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}
.pr-fan .pr-phone{position:absolute;top:50%;left:50%;width:clamp(150px,15.5vw,226px);translate:-50% -50%}
.pr-fan-c{z-index:3}
.pr-fan-l,.pr-fan-r{z-index:1;scale:.86;filter:saturate(.92)}
.pr-fan .pr-fan-l{translate:-118% -45%;rotate:-11deg}
.pr-fan .pr-fan-r{translate:18% -45%;rotate:11deg}
.pr-fan-tag{position:absolute;z-index:4;left:50%;bottom:3%;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,40,.55)}
.pr-fan-tag i{width:9px;height:9px;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)}
.pr-fan-tag span{color:var(--muted);font-weight:500}
@media (prefers-reduced-motion:no-preference){
  html.js .pr-fan-l{animation:prFanL 1.3s var(--ease) .35s both,prBob 7s ease-in-out 1.7s infinite alternate}
  html.js .pr-fan-r{animation:prFanR 1.3s var(--ease) .35s both,prBob 8s ease-in-out 2.6s infinite alternate}
  html.js .pr-fan-c{animation:prFanC 1.1s var(--ease) .15s both,prBob 6s ease-in-out 1.3s infinite alternate}
  html.js .pr-fan-tag{animation:prTag .9s var(--ease) 1.1s both}
  html.js .pr-fan:not(.play) .pr-phone{animation-play-state:running,paused}
  .pr-fan-tag i{animation:prLive 2.4s ease-in-out infinite}
  html.js .pr-fan:not(.play) .pr-fan-tag i{animation-play-state:paused}
}
@keyframes prFanL{from{translate:-50% -46%;rotate:0deg}}
@keyframes prFanR{from{translate:-50% -46%;rotate:0deg}}
@keyframes prFanC{from{opacity:0;translate:-50% -44%}}
@keyframes prTag{from{opacity:0;translate:-50% 14px}}
@keyframes prLive{50%{box-shadow:0 0 0 7px rgba(52,210,123,.08)}}

/* ---------- the rooms (shared by #pr-live and #pr-con) ---------- */
.pr-sc{overflow-x:clip} /* the site's light and the side screens may spill past the viewport edge */
.pr-sc .scn-head{margin-bottom:clamp(30px,3.4vw,52px)}
/* each site brings its own light onto the stage: two stacked layers, JS paints the new colour on the hidden one and they crossfade
   with opacity only (no colour transition, so the big gradient is painted once per change, never per frame) */
.pr-glow{position:absolute;inset:-20% -16% -16%;pointer-events:none}
.pr-gl{position:absolute;inset:0;border-radius:50%;--c:transparent;opacity:0;transition:opacity 1.4s var(--ease);
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 62%,transparent) 48%,color-mix(in srgb,var(--c) 22%,transparent) 74%,transparent 100%)}
.pr-gl.on{opacity:1}
html.js .play .pr-glow.sq{animation-duration:1.8s}
.pr-vf{position:absolute;inset:0;pointer-events:none;--c:rgba(255,255,255,.42);--k:30px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 0/2px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 0/2px var(--k),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 0 100%/2px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 2px,linear-gradient(var(--c),var(--c)) 100% 100%/2px var(--k);
  background-repeat:no-repeat}

/* stills crossfade; the one clip fades in over its still once it really plays */
.pr-still{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pr-lap-view .pr-still,.pr-ph-view .pr-still{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.pr-lap-view .pr-still.on,.pr-ph-view .pr-still.on{opacity:1}
.pr-vid{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:transparent;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.pr-vid.on{opacity:1}
.pr-rviz>.pr-vid,.pr-cf>.pr-vid{display:none} /* parked until JS moves it into the chosen screen */

/* tabs: progress bar, name, badge + branch, the link */
.pr-tabs{display:flex;flex-direction:column;gap:6px}
.pr-t{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 8px}
.pr-tb{display:flex;flex-direction:column;align-items:flex-start;gap:9px;width:100%;min-height:48px;padding:14px 0 6px;text-align:left;color:inherit;cursor:pointer;background:none;border:0;font:inherit}
.pr-tb:focus-visible{outline-offset:4px;border-radius:12px}
.pr-bar{position:relative;display:block;width:100%;height:3px;margin-bottom:8px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.pr-bar b{position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.pr-t.done .pr-bar b{transform:none;background:rgba(255,255,255,.5)}
.pr-t.cur .pr-bar b{animation:prBar var(--t,9.4s) linear forwards;animation-play-state:paused}
.pr-room.run.live:not(.hold) .pr-t.cur .pr-bar b{animation-play-state:running}
@keyframes prBar{from{transform:scaleX(0)}to{transform:none}}
.pr-tn{font-size:clamp(22px,1.9vw,28px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--on);transition:color .4s}
.pr-tm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pr-br{font-size:16px;line-height:1.3;color:var(--on-3);transition:color .4s}
.pr-t:not(.cur) .pr-tn{color:rgba(255,255,255,.6)}
.pr-t:not(.cur) .pr-tb:hover .pr-tn{color:#fff}
.pr-t.cur .pr-br{color:var(--on-2)}
/* the honesty badge: live = filled green dot, concept = hollow ring; the words say it too */
.pr-bd{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.pr-bd::before{content:'';width:8px;height:8px;flex:none;border-radius:50%}
.pr-bd.live{background:rgba(52,210,123,.14);color:#BDF5D5}
.pr-bd.live::before{background:#34D27B}
.pr-bd.cpt{background:rgba(201,210,255,.1);color:#DDE2FF;box-shadow:inset 0 0 0 1px rgba(201,210,255,.3)}
.pr-bd.cpt::before{box-shadow:inset 0 0 0 2px #C9D2FF}
/* live tabs: the laptop tag already says „На живо“; the per-tab badge stays for screen readers only */
#pr-live .pr-tb .pr-bd.live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font-size:16px;font-weight:600;color:#C9D2FF;text-decoration:underline;text-decoration-color:rgba(201,210,255,.35);text-underline-offset:5px;transition:color .3s,text-decoration-color .3s}
.pr-go:hover{color:#fff;text-decoration-color:#fff}
.pr-go .ic{width:17px;height:17px;transition:transform .3s var(--ease)}
.pr-go:hover .ic{transform:translate(2px,-2px)}
.pr-t:not(.cur) .pr-go{color:rgba(201,210,255,.7)}

/* ---------- #pr-live: laptop + phone, tabs at the side ---------- */
.pr-room{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(40px,5vw,84px);align-items:center}
.pr-rviz{position:relative;aspect-ratio:1.42}
.pr-rviz .pr-lap{position:absolute;left:3%;top:4%;width:83%}
.pr-rviz .pr-phone{position:absolute;z-index:3;right:0;bottom:9%;width:21%}
/* the tag under the laptop repeats what is on screen: live dot, „На живо“, the domain */
.pr-tag{position:absolute;z-index:4;left:6%;bottom:0;display:inline-flex;align-items:center;gap:10px;max-width:70%;padding:11px 18px 11px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;line-height:1.1;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(0,0,40,.55)}
.scene .pr-tag{color:var(--ink)}
.pr-tag i{width:9px;height:9px;flex:none;border-radius:50%;background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.22)}
.pr-tag span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:500}

/* ---------- #pr-con: a coverflow of screens, tabs in a row underneath ---------- */
.pr-cfr{grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px)}
.pr-cf{position:relative;touch-action:pan-y}
.pr-cf-row{position:relative;width:min(60%,720px);margin-inline:auto}
.pr-cs{position:absolute;inset:0 0 auto;z-index:calc(10 - var(--a,0));--a:max(var(--p),calc(var(--p) * -1));
  transform:translateX(calc(var(--p) * 74%)) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .34);
  transition:transform .95s var(--ease),opacity .95s var(--ease);cursor:pointer}
.pr-cs.on{position:relative;cursor:default}
.pr-cs.warp{transition:none;opacity:0}
.pr-cs-dev{position:relative;background:#0A0D1F;border-radius:16px;padding:0 0 1.2%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 60px 100px -46px rgba(0,0,30,.95)}
.pr-cs:not(.on) .pr-cs-dev{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,30,.8)}
.pr-cs-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#171B31;border-radius:16px 16px 0 0}
.pr-cs-bar i{width:8px;height:8px;flex:none;border-radius:50%;background:#3B4263}
.pr-cs-bar span{display:flex;align-items:center;gap:7px;height:20px;margin:0 auto;padding:0 14px 0 10px;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.pr-cs-bar span::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF}
.pr-cs-scr{position:relative;aspect-ratio:16/10;margin:0 1.2%;overflow:hidden;border-radius:0 0 6px 6px;background:#000}
.pr-cs-scr picture{display:contents}
.pr-cs-scr .pr-still{position:absolute;inset:0}
.pr-cs-bd{display:none}
/* the side screens dim so the chosen one owns the light */
.pr-cs:not(.on) .pr-cs-scr::after{background:rgba(6,9,40,.38)}
.pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .24)}
.pr-cfr .pr-tabs{flex-direction:row;gap:clamp(16px,2vw,28px)}
.pr-cfr .pr-t{flex:1 1 0;min-width:0}
.pr-cfr .pr-tn{font-size:clamp(20px,1.6vw,24px)}
/* desktop: a slightly smaller coverflow and a tighter head, so the names show together with the screens (1440x900 too) */
@media (min-width:1001px){
  #pr-con .scn-head{margin-bottom:clamp(24px,2.2vw,34px)}
  .pr-cfr{gap:clamp(28px,2.6vw,40px)}
  .pr-cf-row{width:min(56%,660px)}
}
/* with the chapter rail on the left (≥1280), the side screens stay clear of it: their reach shrinks with the viewport,
   the next pair dims further and the far pair steps out, so the rail reads on the dark stage */
@media (min-width:1280px){
  .pr-cs{transform:translateX(calc(var(--p) * min(74%, 50vw - 330px))) scale(calc(1 - var(--a) * .2));opacity:calc(1 - var(--a) * .45)}
  .pr-cs:not(.on):hover{opacity:calc(1 - var(--a) * .3)}
  .pr-cs.far,.pr-cs.far:hover{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .pr-still,.pr-vid,.pr-cs,.pr-gl,.pr-cs-bd{transition:none!important}
  .pr-t.cur .pr-bar b{animation:none;transform:none}
}

/* ---------- #pr-gal: 12 concepts, filter by branch, lit thumbnails ---------- */
.pr-fbar{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto clamp(40px,4.5vw,64px)}
.pr-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pr-chip{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:16px;font-weight:600;color:var(--on-2);white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,color .3s,border-color .3s,transform .35s var(--ease)}
.pr-chip:has(.pr-ci){padding-left:16px}
.pr-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.pr-chip:focus-visible{border-radius:999px;outline-color:#fff}
.pr-chip:active{transform:scale(.97)}
.pr-chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 16px 34px -18px rgba(0,0,0,.7)}
.pr-ci{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#9FAEFF}
.pr-chip[aria-pressed="true"] .pr-ci{color:var(--cobalt)}
.pr-count{font-size:16px;font-weight:500;color:var(--on-3)}

.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.pr-g[hidden]{display:none}
.pr-gc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;color:var(--on)}
.pr-gc:focus-visible{border-radius:28px;outline-offset:6px}
.pr-gstage{grid-column:1/-1;position:relative;display:block;aspect-ratio:4/3;border-radius:28px;overflow:hidden;
  --pa:.28;background:radial-gradient(ellipse 70% 60% at 45% 25%,rgba(143,160,255,var(--pa)),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--hair);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transition:transform .6s var(--ease),box-shadow .6s var(--ease),--pa .6s var(--ease)}
@property --pa{syntax:'<number>';inherits:false;initial-value:.28}
.pr-gwin{position:absolute;left:7%;top:12%;width:78%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,18,51,.08),0 22px 40px -18px rgba(11,18,51,.45);transition:translate .6s var(--ease)}
.pr-gwin::before{content:'';display:block;height:clamp(12px,1.25vw,18px);background:radial-gradient(circle at 10px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 20px 50%,#D5D9E4 2.6px,transparent 3.2px),radial-gradient(circle at 30px 50%,#D5D9E4 2.6px,transparent 3.2px),#EEF0F6;border-bottom:1px solid var(--line)}
.pr-gwin img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pr-gph{position:absolute;right:6%;top:30%;width:21%;padding:2.2%;background:#0A0D1F;border-radius:16%/7.4%;box-shadow:0 24px 40px -18px rgba(0,0,30,.6);transition:translate .6s var(--ease)}
.pr-gph img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:13%/6%}
/* every thumbnail says what it is */
.pr-gbd{position:absolute;z-index:2;left:5%;bottom:6%;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(10,13,40,.78);box-shadow:inset 0 0 0 1px rgba(201,210,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#DDE2FF;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.pr-gbd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px #C9D2FF}
.pr-gc:hover .pr-gstage,.pr-gc:focus-visible .pr-gstage{--pa:.4;transform:translateY(-6px);box-shadow:0 50px 90px -40px rgba(0,0,0,.85)}
.pr-gc:hover .pr-gwin{translate:0 -4px}
.pr-gc:hover .pr-gph{translate:0 -12px}
.pr-gt{display:flex;flex-direction:column;gap:5px;min-width:0;padding-left:6px}
.pr-gt b{font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--on)}
/* the new-tab cue shows only when the tile is pointed at */
.pr-gt b::after{content:'\2197' / '';display:inline-block;margin-left:8px;font-weight:500;color:#AEB9FF;opacity:0;transform:translate(-4px,2px);transition:opacity .3s,transform .4s var(--ease)}
.pr-gc:hover .pr-gt b::after,.pr-gc:focus-visible .pr-gt b::after{opacity:1;transform:none}
.pr-gt span{font-size:16px;line-height:1.3;color:var(--on-3)}
.pr-gal .scn-foot{margin-top:clamp(56px,6vw,88px)}
/* „Започнете“ over the quiet audit link (the audit stays the lighter second path) */
#pr-gal .scn-foot{flex-direction:column;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}
  /* the rooms stack: visual first, then the tabs as a swipeable strip */
  .pr-room{grid-template-columns:minmax(0,1fr);gap:34px}
  .pr-tabs,.pr-cfr .pr-tabs{position:relative;flex-direction:row;gap:14px;margin-inline:calc(var(--gut,20px) * -1);padding:0 var(--gut,20px) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut,20px);scrollbar-width:none}
  .pr-tabs::-webkit-scrollbar{display:none}
  .pr-t,.pr-cfr .pr-t{flex:0 0 min(42%,300px);scroll-snap-align:start;padding:2px 16px 8px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair)}
  .pr-t.cur{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
  .pr-cf-row{width:min(72%,620px)}
}
@media (max-width:900px){
  .pr-fan{min-height:clamp(360px,90vw,480px);margin-top:12px}
  .pr-fan .pr-phone{width:clamp(130px,36vw,190px)}
}
/* phones: one big phone plays the -mob clip; the laptop and the browser chrome step aside */
@media (max-width:720px){
  .pr-rviz{aspect-ratio:auto;display:flex;justify-content:center;padding:14px 0 70px}
  .pr-rviz .pr-lap{display:none}
  .pr-rviz .pr-phone{position:relative;right:auto;bottom:auto;width:min(52vw,212px)}
  .pr-vf{--k:20px}
  .pr-tag{left:50%;translate:-50% 0;max-width:calc(100% - 8px)}
  .pr-t,.pr-cfr .pr-t{flex-basis:min(76%,290px)}
  .pr-tn,.pr-cfr .pr-tn{font-size:22px}
  .pr-tb{gap:7px;padding-top:12px}
  .pr-bar{margin-bottom:5px}
  .pr-t{padding-bottom:4px}

  .pr-cf{padding:6px 0 4px}
  .pr-cf-row{width:min(52vw,212px)}
  .pr-cs{transform:translateX(calc(var(--p) * 88%)) scale(calc(1 - var(--a) * .18))}
  .pr-cs-dev{border-radius:17%/7.9%;padding:3.6%}
  .pr-cs-bar{display:none}
  .pr-cs-scr{aspect-ratio:9/19.5;margin:0;border-radius:14%/6.5%}
  .pr-cs-scr::before{content:'';position:absolute;z-index:3;top:2.6%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:99px;background:#000}
  .pr-cs-bd{position:absolute;z-index:4;left:50%;bottom:-18px;translate:-50% 0;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 16px 30px -12px rgba(0,0,40,.6)}
  .pr-cs-bd::before{content:'';width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cobalt)}
  .pr-cs-bd{transition:opacity .5s var(--ease)}
  .pr-cs:not(.on) .pr-cs-bd{opacity:0} /* the side phones are cut by the viewport edge: only the chosen one wears the pill */
  .pr-cfr{gap:44px}
}
@media (max-width:620px){
  .pr-hero-act .btn{flex:1 1 100%}
  .pr-fbar{gap:14px}
  .pr-filter{gap:8px}
  .pr-chip,.pr-chip:has(.pr-ci){flex:1 1 auto;justify-content:center;min-height:46px;padding:0 13px;font-size:15px}
  .pr-ci{display:none}
  .pr-count{font-size:15px;color:var(--on-2)}
  .pr-grid{gap:28px 14px}
  .pr-gc{gap:12px}
  .pr-gc:focus-visible{border-radius:18px}
  .pr-gstage{border-radius:18px}
  /* on a phone the tiny phone overlay only adds clutter: the browser preview fills the stage instead */
  .pr-gph{display:none}
  .pr-gwin{left:6%;top:9%;width:88%;border-radius:6px}
  .pr-gbd{left:6%;bottom:7%;height:26px;padding:0 10px 0 8px;gap:6px;font-size:13px;letter-spacing:.02em}
  .pr-gbd::before{width:7px;height:7px}
  .pr-gt{padding-left:2px;gap:3px}
  .pr-gt b{font-size:16px}
  .pr-gt span{font-size:14px;color:var(--on-2)}
}