/* revision 5: inside the room (site/js/room.js). The picture is the page; content sits on its screens and boards. */
body.room5{background:#0b0a2a;overflow-x:hidden}
body.room5 main{position:relative}
.rm{position:fixed;inset:0;z-index:0;overflow:hidden;background:#1a1d3a}
.rm-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.rm.gl .rm-img{display:none}
.rm-img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.rm-img img{position:absolute;left:0;top:0;display:block;max-width:none}
.rm-img .rm-n{opacity:0;transition:opacity 1s}
html.night .rm.night-ready .rm-img .rm-n{opacity:1}
.rm-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 55%,transparent 60%,rgba(5,3,29,.28));}
.rm-track{position:relative;width:1px;pointer-events:none}
.rm-surfs{position:fixed;inset:0;z-index:2;pointer-events:none;perspective:none}
body:not(.rm-on) .rm-surfs{position:relative;padding:110px 20px 40px;display:grid;gap:20px;justify-items:center}
body:not(.rm-on) .rm-surf{position:relative;width:min(640px,100%);background:rgba(255,255,255,.9);border-radius:16px;padding:24px}
.rm-on .rm-surf{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;will-change:transform;backface-visibility:hidden}
.rm-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.55em;padding:6% 7%;font-size:17px;line-height:1.32;color:var(--fg);
  transition:filter .3s;overflow:hidden}
.rm-surf:not(.live) .rm-face{pointer-events:none}
.rm-face h1{font:800 2.05em/1.02 var(--display);letter-spacing:-.02em;margin:0;color:inherit}
.rm-face .rm-h{font:800 1.42em/1.08 var(--display);letter-spacing:-.015em;margin:0;color:inherit}
.rm-face .kicker{font-size:.72em;margin:0}
.rm-face p{margin:0}
.rm-lead{font:700 1.08em/1.25 var(--display)}
.rm-body,.rm-sub,.rm-why{font-size:.9em;color:var(--soft)}
.rm-ctas{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.2em}
.rm-ctas .btn{font-size:.82em;padding:.62em 1.05em;min-height:0}
.rm-crumbs a{display:inline-flex;align-items:center;gap:.35em;font-size:.74em;font-weight:700;color:var(--accent);text-decoration:none}
.rm-crumbs svg{width:1.1em;height:1.1em}
.rm-list{list-style:none;margin:.1em 0 0;padding:0;display:grid;gap:.42em}
.rm-list.two{grid-template-columns:1fr 1fr;column-gap:1.1em}
.rm-list li{display:flex;gap:.45em;align-items:flex-start;font-weight:650;font-size:.92em;line-height:1.2}
.rm-list i{flex:none;width:1.15em;height:1.15em;color:var(--accent);margin-top:.02em}
.rm-list i svg{width:100%;height:100%}
.rm-std,.rm-parts{list-style:none;margin:.2em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.rm-std li,.rm-parts li{font-size:.8em;font-weight:700;padding:.35em .7em;border-radius:99px;border:1px solid var(--line);background:rgba(var(--fg-rgb),.04)}
.rm-std li{border-radius:.6em}
.rm-vals{list-style:none;margin:.2em 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:.6em}
.rm-vals li{display:flex;gap:.55em;align-items:flex-start}
.rm-vals b{flex:none;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:800 .95em var(--display)}
.rm-vals span{display:flex;flex-direction:column;font-size:.86em;line-height:1.2}
.rm-vals em{font-style:normal;color:var(--soft);font-size:.9em}
[hidden]{display:none!important}

/* the surfaces, as the room's own objects */
.rm-k-screen .rm-face{background:linear-gradient(160deg,#fff,#eef9fa);box-shadow:inset 0 0 0 1px rgba(9,0,87,.06),inset 0 0 40px rgba(2,211,224,.10)}
.rm-k-board .rm-face{background:linear-gradient(180deg,#fff,#f5f7fa);color:#0b1150}
.rm-k-board .rm-list i{color:#00a6b2}
.rm-k-board .rm-h{font-family:var(--display)}
.rm-k-glass .rm-face{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,250,252,.92));-webkit-backdrop-filter:none;padding:7% 8%}
.rm-k-mon .rm-face{background:var(--bg);padding:0;justify-content:stretch;color:var(--fg)}
.rm-k-rack .rm-face{background:linear-gradient(160deg,#0b0848,#090057);color:#fff;--fg:#fff;--soft:rgba(255,255,255,.78);--accent:#6ff0f7;--line:rgba(255,255,255,.18);--fg-rgb:255,255,255;padding:6% 7%}
.rm-k-rack .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.rm-next{display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.8em;color:var(--accent);text-decoration:none}
.rm-next svg{width:1.1em;height:1.1em}
html.night .rm-k-screen .rm-face{background:linear-gradient(160deg,rgba(13,10,70,.94),rgba(9,0,87,.92));box-shadow:inset 0 0 0 1px rgba(111,240,247,.18),inset 0 0 50px rgba(2,211,224,.16)}
html.night .rm-k-board .rm-face{background:linear-gradient(180deg,#e9edf4,#dfe5ee);--fg:#0b1150;--soft:rgba(11,17,80,.75);--accent:#00747c;--line:rgba(9,0,87,.12);--fg-rgb:9,0,87;color:#0b1150}
html.night .rm-k-glass .rm-face{background:linear-gradient(180deg,rgba(10,8,60,.94),rgba(8,5,47,.92));box-shadow:inset 0 0 0 1px rgba(111,240,247,.14)}

/* the Try it monitor */
.rm-mon{position:absolute;inset:0;display:flex;flex-direction:column}
.rm-mon-top{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.45em;padding:7% 8%;height:100%;
  background:radial-gradient(120% 90% at 20% 10%,rgba(2,211,224,.16),transparent 60%),var(--bg)}
.rm-play{display:none;flex:1;overflow:auto;padding:14px;-webkit-overflow-scrolling:touch}
.rm-play .play{margin:0 auto;max-width:760px}
.rm-close{display:none;position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(var(--fg-rgb),.08);color:var(--fg);cursor:pointer;z-index:3}
.rm-close svg{width:18px;height:18px}
.rm-surf.focused{z-index:20;box-shadow:0 0 0 10px #15172b,0 0 0 12px rgba(111,240,247,.35),0 40px 90px -20px rgba(0,0,0,.7);border-radius:6px;transition:box-shadow .3s}
.rm-surf.focused .rm-face{opacity:1;font-size:16px!important;border-radius:6px}
.rm-surf.focused .rm-mon-top{display:none}
.rm-surf.focused .rm-play{display:block}
.rm-surf.focused .rm-close{display:grid;place-items:center}
body.rm-focus .rm-dots,body.rm-focus .rm-hint{opacity:0;pointer-events:none}
body.rm-focus .rm-guide{visibility:hidden!important}
body.rm-focus .rm::after{content:"";position:absolute;inset:0;background:rgba(5,3,29,.28);transition:opacity .3s}

/* the guide in the room */
.rm-guide{position:fixed;left:0;top:0;z-index:3;width:auto;aspect-ratio:.62;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;height:300px;pointer-events:none;will-change:transform;opacity:0}
.rm-guide .clic-bubble{display:none}
body:not(.rm-on) .rm-guide{display:none}

/* stops */
.rm-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:6px;transition:opacity .3s}
.rm-dots button{display:flex;align-items:center;justify-content:flex-end;gap:10px;background:none;border:0;padding:6px;cursor:pointer;color:#fff;font:700 13px var(--body)}
.rm-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(9,0,87,.35);transition:transform .3s,background .3s;order:2}
.rm-dots span:not(.sr-only){opacity:0;transform:translateX(6px);transition:.25s;background:rgba(9,0,87,.82);padding:4px 9px;border-radius:99px;white-space:nowrap}
.rm-dots button:hover span:not(.sr-only),.rm-dots button:focus-visible span:not(.sr-only){opacity:1;transform:none}
.rm-dots button.on i{background:#02d3e0;transform:scale(1.35)}
.rm-hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(5,3,29,.6);opacity:0;transition:opacity .5s;pointer-events:none}
.rm.entered~.rm-hint,.entered .rm-hint{opacity:1}
.rm-hint i{width:22px;height:34px;border:2px solid rgba(255,255,255,.85);border-radius:12px;position:relative}
.rm-hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#fff;animation:rmh 1.6s infinite}
@keyframes rmh{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
body.rm-scrolled .rm-hint{opacity:0!important}

/* slim footer at the last stop */
.rm-foot{position:fixed;left:0;right:0;bottom:0;z-index:6;transform:translateY(105%);transition:transform .5s var(--ease);background:rgba(9,0,87,.9);;color:rgba(255,255,255,.8);
  --lg-w:#fff;--lg-r:#02d3e0;--lg-d:#fff}
body.rm-end .rm-foot{transform:none}
.rm-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:12px 90px 12px 24px;font-size:13px}
.rm-foot a{color:#fff;text-decoration:none;font-weight:700}
.rm-foot-logo svg{width:96px;height:18px;display:block}

/* arrival: through the door */
.rm-door{position:fixed;inset:0;z-index:7;pointer-events:none;--hx:50%;--hy:57%;--dw:30vw;--dh:64vh}
.rm-wall{position:absolute;inset:0;background:linear-gradient(180deg,#eef1f6 0 80%,#d9dde6 80% 81%,#c9ced9 81%);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(var(--hy) - var(--dh)/2) no-repeat,linear-gradient(#000 0 0) bottom/100% calc(100% - var(--hy) - var(--dh)/2) no-repeat,linear-gradient(#000 0 0) left/calc(var(--hx) - var(--dw)/2) 100% no-repeat,linear-gradient(#000 0 0) right/calc(100% - var(--hx) - var(--dw)/2) 100% no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(var(--hy) - var(--dh)/2) no-repeat,linear-gradient(#000 0 0) bottom/100% calc(100% - var(--hy) - var(--dh)/2) no-repeat,linear-gradient(#000 0 0) left/calc(var(--hx) - var(--dw)/2) 100% no-repeat,linear-gradient(#000 0 0) right/calc(100% - var(--hx) - var(--dw)/2) 100% no-repeat}
html.night .rm-wall{background:linear-gradient(180deg,#0e0b4a 0 80%,#02d3e0 80% 80.3%,#0a0838 80.3%)}
.rm-frame{position:absolute;left:calc(var(--hx) - var(--dw)/2);top:calc(var(--hy) - var(--dh)/2);width:var(--dw);height:var(--dh);box-shadow:0 0 0 14px #090057,0 0 0 16px rgba(2,211,224,.6),0 30px 60px 10px rgba(9,0,87,.25);overflow:hidden}
.rm-leaf{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(105deg,rgba(220,240,246,.82),rgba(190,225,235,.62));border:1px solid rgba(9,0,87,.15);display:grid;place-items:center;
  --lg-w:#090057;--lg-r:#02d3e0;--lg-d:#090057}
.rm-leaf.l{left:0;border-right:2px solid rgba(9,0,87,.35)}
.rm-leaf.r{right:0}
.rm-leaf svg{width:30%;max-width:70px;aspect-ratio:1;opacity:.85}
.rm-plaque{position:absolute;left:calc(var(--hx) + var(--dw)/2 + 34px);top:calc(var(--hy) - 60px);display:flex;align-items:center;gap:8px;background:#090057;color:#fff;padding:8px 14px;border-radius:8px;font:800 15px var(--display);
  --lg-w:#fff;--lg-r:#02d3e0;--lg-d:#fff;box-shadow:0 10px 24px -10px rgba(9,0,87,.5)}
.rm-plaque svg{width:20px;height:20px}
.rm-door{opacity:1}   /* smooth pass: the closed door is up from the first paint while the room's pictures decode */
.rm-door.go .rm-leaf.l{animation:rmL .7s .15s cubic-bezier(.6,0,.3,1) forwards}
.rm-door.go .rm-leaf.r{animation:rmR .7s .15s cubic-bezier(.6,0,.3,1) forwards}
.rm-door.go{animation:rmPush 1.55s .45s cubic-bezier(.55,0,.25,1) forwards;transform-origin:var(--hx) var(--hy)}
@keyframes rmL{to{transform:translateX(-102%)}}
@keyframes rmR{to{transform:translateX(102%)}}
@keyframes rmPush{0%{transform:scale(1);opacity:1}70%{opacity:1}100%{transform:scale(5.5);opacity:0}}
html.no-js .rm-door,body:not(.rm-on) .rm-door{display:none}

body.room5 .hdr{background:var(--hdr-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}

@media (max-width:759px){
  .rm-face{padding:6% 6.5%}
  .rm-list.two{grid-template-columns:1fr}
  .rm-dots{right:auto;left:50%;top:auto;bottom:14px;transform:translateX(-50%);flex-direction:row;gap:2px;background:rgba(9,0,87,.55);padding:2px 6px;border-radius:99px;}
  .rm-dots span:not(.sr-only){display:none}
  .rm-dots button{padding:9px 7px}
  .rm-hint{bottom:156px}
  .rm-door{--dw:62vw;--dh:52vh;--hy:56%}
  .rm-plaque{left:50%;top:calc(var(--hy) - var(--dh)/2 - 64px);transform:translateX(-50%)}
  .rm-foot-in{padding:10px 16px 60px;font-size:12px;gap:4px 14px}
  .rm-foot-in span:first-of-type{flex-basis:100%}
  body.rm-end .rm-dots{bottom:auto;top:calc(var(--hdr) + 10px)}
}
@media (prefers-reduced-motion:reduce){.rm-door{display:none}.rm-hint i::after{animation:none}}

/* ---- revision 6 ---- */
.rm-guide{transform-origin:0 0}
.rm-img img{will-change:auto}
.rm-foot{background:#090057}
.rm-foot-next{color:#6ff0f7!important}
.rm-foot-call{display:inline-flex;align-items:center;gap:6px}
.rm-foot-call svg{width:14px;height:14px}
/* the Try it button: always in view on a service room until the demo is open */
.rm-tryfab{position:fixed;z-index:8;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  padding:10px 18px 10px 10px;border-radius:99px;background:#02d3e0;color:#090057;font:800 16px/1.1 var(--display);text-align:left;
  box-shadow:0 10px 28px -8px rgba(2,211,224,.75),0 0 0 4px rgba(2,211,224,.22);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s,visibility 0s linear .4s;pointer-events:none;visibility:hidden}
.rm-tryfab i{width:38px;height:38px;border-radius:50%;background:#090057;color:#fff;display:grid;place-items:center;flex:none}
.rm-tryfab i svg{width:18px;height:18px}
.rm-tryfab small{display:block;font:700 12px/1.2 var(--body);opacity:.8;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm.entered~.rm-tryfab{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .4s,transform .4s,visibility 0s;animation:rmfab 2.4s 1s ease-in-out 3}
@keyframes rmfab{0%,100%{box-shadow:0 10px 28px -8px rgba(2,211,224,.75),0 0 0 4px rgba(2,211,224,.22)}50%{box-shadow:0 10px 28px -8px rgba(2,211,224,.75),0 0 0 12px rgba(2,211,224,.12)}}
body.rm-focus .rm-tryfab,body.rm-end .rm-tryfab{opacity:0!important;pointer-events:none!important}
/* round 3 (Oct 23): a hidden Try it pill is hidden for real (out of the tab order and the accessibility tree), after its fade */
body.rm-focus .rm-tryfab,body.rm-end .rm-tryfab,body.rm-at-try .rm-tryfab,body.rm-out .rm-tryfab{visibility:hidden!important;transition:opacity .4s,transform .4s,visibility 0s linear .4s!important}
/* the monitor's own Try it button is big and glowing */
.rm-k-mon .rm-try{font-size:1.15em;padding:.75em 1.3em;box-shadow:0 0 0 0 rgba(2,211,224,.6);animation:rmglow 1.8s ease-in-out infinite}
@keyframes rmglow{0%,100%{box-shadow:0 0 0 0 rgba(2,211,224,.55)}50%{box-shadow:0 0 0 10px rgba(2,211,224,0)}}
/* the open demo: big enough to play, easy to close, the page behind it holds still */
.rm-shade{position:fixed;inset:0;z-index:19;background:rgba(5,3,29,.55);opacity:0;pointer-events:none;transition:opacity .25s}
body.rm-focus .rm-shade{opacity:1;pointer-events:auto}
html.rm-lock,html.rm-lock body{overflow:hidden;overscroll-behavior:none}
.rm-surf.focused .rm-face{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rm-surf.focused .rm-close{width:46px;height:46px;top:8px;right:8px;background:#090057;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.rm-surf.focused .rm-play{padding-top:58px}
/* the doorway: a real corridor wall, not a flat colour */
.rm-wall{background:
  linear-gradient(180deg,rgba(255,255,255,0) 0 79.4%,#02d3e0 79.4% 80%,#090057 80% 83%,#d8c7ad 83%),
  repeating-linear-gradient(90deg,#e9dcc8 0 46px,#e2d3bc 46px 48px),
  linear-gradient(#efe6d8,#efe6d8)}
html.night .rm-wall{background:
  linear-gradient(180deg,rgba(0,0,0,0) 0 79.4%,#02d3e0 79.4% 80%,#05033a 80% 83%,#1a1650 83%),
  repeating-linear-gradient(90deg,#1b1760 0 46px,#16124f 46px 48px),linear-gradient(#1b1760,#1b1760)}
/* QA overview (screenshot thumbnails of each room with its screens on) */
.rm-ov .hdr,.rm-ov .rm-dots,.rm-ov .rm-hint,.rm-ov .rm-guide,.rm-ov .rm-tryfab,.rm-ov .rm-foot,.rm-ov .rm-door,.rm-ov .pwr,.rm-ov .skip{display:none!important}
@media (max-width:759px){
  .rm-dots{background:rgba(9,0,87,.82)}
  .rm-tryfab{left:auto;right:12px;bottom:92px;transform:translate(0,16px)}
  .rm.entered~.rm-tryfab{transform:translate(0,0)}
  .rm-surf.focused{border-radius:0!important;box-shadow:none!important}
  .rm-surf.focused .rm-face{border-radius:0!important}
}

.rm-foot-next svg,.rm-foot a svg{width:14px;height:14px;vertical-align:-2px}
.room-page .rm-hint{display:none}

/* the security operations centre is a dark room: its screens are dark too */
.p-cybersecurity .rm-surf:not(.rm-k-mon) .rm-face{background:linear-gradient(160deg,rgba(11,8,72,.95),rgba(9,0,87,.93));color:#fff;--fg:#fff;--soft:rgba(255,255,255,.8);--accent:#6ff0f7;--line:rgba(255,255,255,.18);--fg-rgb:255,255,255;box-shadow:inset 0 0 0 1px rgba(111,240,247,.25),inset 0 0 40px rgba(2,211,224,.18)}
.p-cybersecurity .rm-surf:not(.rm-k-mon) .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}

body.rm-at-try .rm-tryfab{opacity:0!important;pointer-events:none!important}

@media (max-width:759px){
  .rm-foot-in{padding:10px 14px 58px;gap:6px 14px}
  .rm-foot-in>span,.rm-foot-in>a[href^="mailto"],.rm-foot-in>a[href$="privacy/"],.rm-foot-logo{display:none!important}
  .rm-foot-next{flex:1 1 100%;font-size:15px}
}

/* the guide in a room: no per-frame filter work, and no crossfade between his walk and his pose (no ghosting) */
.rm-guide .clic-walk,.rm-guide .clic-img{filter:none;transition:none}

body.rm-focus .rm-surfs{z-index:21}
.rm-surf.focused .rm-face{pointer-events:auto}
body.rm-focus .rm-foot{transform:translateY(105%)!important}

.rm-surf{transition:opacity .22s}.rm-surf.rm-ovh{opacity:0!important;pointer-events:none}

/* phones: a soft, still copy of the room behind the moving picture, so a strongly turned view never shows an empty edge */
.rm-bd{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:brightness(.92);pointer-events:none}   /* pre-blurred canvas (room.js addBackdrop): no live blur */
html.night .rm-bd{filter:brightness(.4) saturate(.8)}

.rm .rm-guide{transition:opacity .25s ease}

/* no words float on an empty screen while the room picture is still loading */
.rm:not(.ready) .rm-surf,.rm:not(.ready) .rm-guide{opacity:0!important}

/* rev6: industry standards as small chips under "Day to day" (the game sits on the monitor) */
.rm-stdw{margin-top:14px}.rm-stdw .kicker{display:block;margin-bottom:6px}
.rm-std.sm li{font-size:.78em;padding:.25em .6em}

/* rev6: the room's game is VISIBLE on its monitor before you open it: a live, scaled-down peek under the title
   (not interactive; tapping the face or Try it opens it full size). Zoom is set by room.js from the face width. */
.rm-surf:not(.focused) .rm-mon-top{height:auto;flex:none;padding-bottom:3%}
.rm-surf:not(.focused) .rm-play{display:block;position:relative;flex:1;min-height:0;overflow:hidden;padding:0 6% 5%;pointer-events:none}
.rm-surf:not(.focused) .rm-play .play{width:600px;max-width:none;zoom:var(--pz,.4);margin:0 auto}
.rm-surf:not(.focused) .rm-play::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,var(--bg))}
.rm-surf:not(.focused) .rm-play .play-bar{display:none}

/* ---- Instinct round 1: phone room steps = a labelled step bar with real 44px+ tap targets ---- */
.rm-dots em{display:none}
@media (max-width:759px){
  .rm-dots{left:10px;right:90px;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:none;justify-content:space-between;gap:6px;padding:5px;border-radius:16px;
    background:rgba(9,0,87,.78);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12)}
  .rm-dots button{flex:1 1 0;min-width:44px;min-height:48px;padding:4px 2px;justify-content:center;border-radius:11px;color:#fff;-webkit-tap-highlight-color:transparent;transition:background .25s,color .25s}
  .rm-dots button i{display:none}
  .rm-dots button em{display:flex;flex-direction:column;align-items:center;gap:1px;font:700 11.5px/1.1 var(--body);font-style:normal;letter-spacing:0;white-space:nowrap;opacity:.82}
  .rm-dots button em b{font:800 10.5px/1 var(--body);letter-spacing:.06em;opacity:.7}
  .rm-dots button.on{background:#02d3e0;color:#090057}
  .rm-dots button.on em{opacity:1}
  .rm-dots button:active{background:rgba(255,255,255,.16)}
  .rm-dots button.on:active{background:#02d3e0}
  body.rm-end .rm-dots{top:calc(var(--hdr) + 8px);bottom:auto}
  .rm-tryfab{bottom:96px!important}
  .rm-hint{bottom:150px}
}

/* ---- Instinct round 1: desktop panels sit IN the scene (phones keep their own treatment) ----
   The station quads are measured 3% larger than the real surface, so the panel covered the room's own bezel/frame and read as
   pasted on. On desktop the face now sits just inside the real surface (the room's frame shows around it), is recessed with an
   inner edge shadow, picks up the room light (soft falloff + a glass glare on screens and glass), and screens cast a faint glow
   onto the wall. All of it rides the same perspective transform as the surface, so it is anchored to the plane. */
@media (min-width:760px){
  .rm-surf:not(.focused) > .rm-face{transform:scale(.955);transform-origin:50% 50%;border-radius:3px;overflow:hidden}
  .rm-surf:not(.focused) > .rm-face::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
    background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(9,0,87,.07)),radial-gradient(130% 120% at 50% 40%,transparent 62%,rgba(9,0,87,.10));
    box-shadow:inset 0 0 0 1px rgba(9,0,87,.16),inset 0 3px 7px -2px rgba(9,0,87,.22),inset 0 -1px 0 rgba(255,255,255,.35)}
  .rm-k-screen:not(.focused) > .rm-face::after,.rm-k-glass:not(.focused) > .rm-face::after,.rm-k-mon:not(.focused) > .rm-face::after{
    background:linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 31%,rgba(255,255,255,0) 100%),
      linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(9,0,87,.07)),radial-gradient(130% 120% at 50% 40%,transparent 62%,rgba(9,0,87,.10))}
  .rm-k-board:not(.focused) > .rm-face{background:linear-gradient(180deg,#fbfcfd,#eef1f5)}
  .rm-k-screen:not(.focused) > .rm-face,.rm-k-mon:not(.focused) > .rm-face{box-shadow:0 0 22px 2px rgba(120,225,240,.30)}
  .rm-k-board:not(.focused) > .rm-face,.rm-k-glass:not(.focused) > .rm-face{box-shadow:0 12px 18px -6px rgba(9,0,87,.28),0 2px 4px rgba(9,0,87,.12)}
  html.night .rm-surf:not(.focused) > .rm-face::after{box-shadow:inset 0 0 0 1px rgba(111,240,247,.16),inset 0 3px 8px -2px rgba(0,0,0,.45)}
  html.night .rm-k-screen:not(.focused) > .rm-face,html.night .rm-k-mon:not(.focused) > .rm-face{box-shadow:0 0 30px 3px rgba(2,211,224,.36)}
  html.night .rm-k-board:not(.focused) > .rm-face,html.night .rm-k-glass:not(.focused) > .rm-face{box-shadow:0 12px 22px -6px rgba(0,0,0,.5)}
}

/* ---- Instinct round 3: the Try it pill and the theme orb never share a spot ----
   Under 1280px the orb sits bottom-right (site.css .pwr: 56px, 24px in). On phones the pill already rides above it;
   tablets and small laptops now do the same, so neither control covers the other at any width. */
@media (min-width:760px) and (max-width:1279px){
  .rm-tryfab{right:18px;bottom:calc(98px + env(safe-area-inset-bottom,0px))}
}

/* smooth pass (Oct 22): the two pulsing glows animated box-shadow, which repaints every frame. The monitor's Try it button
   lives inside a perspective-mapped surface layer, so its glow repainted the WHOLE surface 60 times a second, glides
   included. Same pulses now as a ring on a pseudo-element animated with transform + opacity only (compositor-only). */
.rm-k-mon .rm-try{animation:none;box-shadow:none;position:relative;isolation:isolate}
.rm-k-mon .rm-try::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 10px rgba(2,211,224,.55);opacity:0;transform:scale(.92);
  pointer-events:none;z-index:-1;animation:rmglow2 1.8s ease-in-out infinite}
@keyframes rmglow2{0%{opacity:.0;transform:scale(.9)}35%{opacity:.75;transform:scale(.96)}100%{opacity:0;transform:scale(1.06)}}
.rm.entered~.rm-tryfab{animation:none}
.rm-tryfab::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 8px rgba(2,211,224,.16);opacity:0;pointer-events:none}
.rm.entered~.rm-tryfab::after{animation:rmfab2 2.4s 1s ease-in-out 3}
@keyframes rmfab2{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:1;transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.rm-k-mon .rm-try::after,.rm.entered~.rm-tryfab::after{animation:none}}

/* smooth pass: no live backdrop blur over the moving room on phones/touch (it re-blurred the header and the step bar on
   every frame of every glide); a slightly denser fill keeps the same look */
@media (max-width:899px),(pointer:coarse){
  body.room5 .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94)}
  html.night body.room5 .hdr{background:rgba(8,5,47,.93)}
}
@media (max-width:759px){ body.room5 .rm-dots{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,0,87,.9)} }

/* ==== journey round (Oct 23): object stations = a callout card + a pin on the real object + a leader line ==== */
.rm-on .rm-surf.rm-call:not(.focused){height:auto;will-change:transform,opacity}
.rm-surf.rm-call:not(.focused) > .rm-face{position:relative;inset:auto;display:block;padding:18px 20px 19px;border-radius:18px;font-size:16px;overflow:visible;
  background:rgba(255,255,255,.96);color:#090057;--fg:#090057;--fg-rgb:9,0,87;--soft:rgba(9,0,87,.74);--accent:#00747c;--line:rgba(9,0,87,.12);
  box-shadow:0 26px 60px -26px rgba(9,0,87,.5),0 2px 6px rgba(9,0,87,.10),0 0 0 1px rgba(9,0,87,.07)}
html.night .rm-surf.rm-call:not(.focused) > .rm-face{background:rgba(11,9,56,.95);color:#fff;--fg:#fff;--fg-rgb:255,255,255;--soft:rgba(255,255,255,.76);--accent:#6ff0f7;--line:rgba(255,255,255,.16);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.75),0 0 0 1px rgba(111,240,247,.22)}
.rm-surf.rm-call:not(.focused) > .rm-face::after{display:none}
.rm-surf.rm-call:not(.focused) > .rm-face::before{content:"";position:absolute;left:20px;top:0;width:46px;height:3px;border-radius:0 0 3px 3px;background:#02d3e0}
.rm-call:not(.focused) .kicker{font-size:11.5px;letter-spacing:.15em}
.rm-call:not(.focused) h1,.rm-call:not(.focused) .rm-h{font:800 26px/1.08 var(--display);letter-spacing:-.02em;margin:.32em 0 .28em;color:inherit}
.rm-call:not(.focused) .rm-ct{font:500 15.5px/1.45 var(--body);margin:0;color:var(--soft)}
.rm-call:not(.focused) .rm-crumbs{margin-bottom:8px}
.rm-call:not(.focused) .rm-crumbs a{font-size:12.5px}
.rm-call .rm-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:700 13.5px var(--display);color:var(--accent);text-decoration:none}
.rm-call .rm-more svg{width:14px;height:14px}
.rm-call .rm-cbtn{margin-top:14px;height:46px;font-size:15px}
.rm-call:not(.focused) .rm-mon{position:relative;inset:auto;display:block}
.rm-call:not(.focused) .rm-mon-top{display:block;padding:0;height:auto;background:none}
.rm-surf.rm-call:not(.focused) .rm-play{display:none!important}
.rm-call:not(.focused) .rm-try{margin-top:14px;height:46px;font-size:15px;padding:0 22px}
.rm-call:not(.focused) .rm-vals{margin-top:10px;gap:9px;font-size:15px}
.rm-call:not(.focused) .rm-parts{margin-top:10px;font-size:15px}
.rm-pin{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#02d3e0;pointer-events:none;will-change:transform,opacity;
  box-shadow:0 0 0 4px rgba(255,255,255,.92),0 6px 16px rgba(9,0,87,.5)}
.rm-pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(2,211,224,.9);animation:rmpin 2.2s ease-out infinite}
html.night .rm-pin{box-shadow:0 0 0 4px rgba(9,0,87,.9),0 0 18px rgba(2,211,224,.7)}
@keyframes rmpin{0%{transform:scale(1);opacity:.85}80%,100%{transform:scale(2.7);opacity:0}}
.rm-lead{position:absolute;left:0;top:-1px;width:1px;height:2px;background:#02d3e0;transform-origin:0 50%;pointer-events:none;will-change:transform,opacity;box-shadow:0 0 0 .5px rgba(255,255,255,.5)}
body.rm-focus .rm-pin,body.rm-focus .rm-lead{opacity:0!important;visibility:hidden!important}
@media (prefers-reduced-motion: reduce){.rm-pin::after{animation:none}}
@media (min-width:760px){.rm-call:not(.focused) h1,.rm-call:not(.focused) .rm-h{font-size:30px}.rm-call:not(.focused) .rm-ct{font-size:16.5px}.rm-surf.rm-call:not(.focused) > .rm-face{padding:22px 26px 24px}}

/* ---- the end of every room: the room fades out, the page's details come up (and back down the same way) ---- */
.rm-exit{position:fixed;inset:0;z-index:6;background:var(--bg);opacity:var(--rx,0);pointer-events:none}
.rm-info{position:relative;z-index:7;padding:52vh 0 0;color:var(--fg)}
.rm-info-in{max-width:920px;margin:0 auto;padding:0 22px 28px;opacity:clamp(0,calc(var(--rx,0) * 1.6 - .45),1);transform:translate3d(0,calc((1 - var(--rx,0)) * 28px),0)}
.rm-foot{opacity:calc(1 - var(--rx,0) * 1.6)}
body.rm-out .rm-foot,body.rm-out .rm-dots,body.rm-out .rm-tryfab,body.rm-out .rm-surfs,body.rm-out .rm-guide{pointer-events:none!important}
body.rm-out .rm-dots,body.rm-out .rm-tryfab{opacity:0!important}
/* bug report C2 follow-up: once the room has faded out (.rm-exit covers it in the page colour) the page itself takes the page
   colour too, so what is painted under the details matches what tools such as axe compute for their contrast */
body.room5.rm-out{background-color:var(--bg)}
.rm-ih{font:800 clamp(34px,5vw,56px)/1.03 var(--display);letter-spacing:-.03em;margin:.28em 0 .35em}
.rm-ilead{font:500 clamp(17px,1.6vw,20px)/1.55 var(--body);color:var(--soft);max-width:64ch;margin:0}
.rm-ip{font:500 17px/1.6 var(--body);color:var(--soft);max-width:66ch;margin:0}
.rm-igrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0 0}
.rm-igrid > div{background:var(--bg-2);border-radius:20px;padding:22px 24px;box-shadow:var(--card-sh);border:1px solid var(--line)}
.rm-igrid h3,.rm-i3{font:750 21px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 14px;color:var(--fg)}
.rm-i3{margin:48px 0 16px}
.rm-ilist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rm-ilist li{display:flex;gap:10px;align-items:flex-start;font:600 16px/1.4 var(--body)}
.rm-ilist i{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:rgba(2,211,224,.16);color:var(--accent);display:grid;place-items:center}
.rm-ilist i svg{width:13px;height:13px}
/* round 3 (Oct 23): industry details. "What we cover" is four short labels and "Day to day" four to eight full lines, so two
   equal columns left a big empty card. The labels now sit as a row of chips across the top card, and the lines below run in
   two columns on wide screens: both cards are filled by their own content, no holes */
.rm-igrid-ind{grid-template-columns:1fr}
.rm-itags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rm-itags li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:99px;background:rgba(2,211,224,.10);border:1px solid rgba(2,211,224,.35);font:700 15px/1.2 var(--body);color:var(--fg)}
.rm-itags li i{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(2,211,224,.2);color:var(--accent);display:grid;place-items:center}
.rm-itags li i svg{width:13px;height:13px}
@media (min-width:760px){.rm-icols{grid-template-columns:1fr 1fr;column-gap:30px;row-gap:12px}}
@media (max-width:759px){.rm-itags{gap:8px}.rm-itags li{padding:7px 12px 7px 7px;font-size:14px;gap:6px}.rm-itags li i{width:18px;height:18px}}
.rm-istd,.rm-iparts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rm-istd li,.rm-iparts li{font:650 14.5px/1.3 var(--body);padding:8px 13px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.rm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rm-steps li{display:flex;flex-direction:column;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.rm-steps b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#090057;color:#02d3e0;font:800 16px var(--display)}
html.night .rm-steps b{background:#02d3e0;color:#090057}
.rm-steps span{display:flex;flex-direction:column;gap:6px}
.rm-steps strong{font:750 17px/1.25 var(--display)}
.rm-steps em{font:500 15px/1.5 var(--body);font-style:normal;color:var(--soft)}
.rm-steps a,.rm-faq a{color:var(--accent);font-weight:700}
.rm-ivals{grid-template-columns:1fr 1fr;gap:14px 22px;font-size:17px}
.rm-faq details{border-bottom:1px solid var(--line)}
.rm-faq details:first-child{border-top:1px solid var(--line)}
.rm-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 2px;font:700 17px/1.3 var(--display)}
.rm-faq summary::-webkit-details-marker{display:none}
.rm-faq summary::after{content:"+";flex:none;font:500 24px/1 var(--display);color:var(--accent);transition:transform .3s var(--ease)}
.rm-faq details[open] summary::after{transform:rotate(45deg)}
.rm-faq p{margin:0 0 18px;font:500 16px/1.55 var(--body);color:var(--soft);max-width:64ch}
.rm-icta{margin:56px 0 0;padding:34px 30px;border-radius:26px;color:#fff;background:radial-gradient(120% 140% at 85% 0%,rgba(2,211,224,.28),transparent 55%),#090057;box-shadow:0 30px 70px -36px rgba(9,0,87,.7)}
html.night .rm-icta{box-shadow:0 0 0 1px rgba(111,240,247,.2)}
.rm-icta h2{font:800 clamp(26px,3.4vw,38px)/1.08 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.rm-icta p{margin:0 0 20px;color:rgba(255,255,255,.78);font:500 16.5px/1.5 var(--body)}
.rm-icta .rm-ctas{display:flex;flex-wrap:wrap;gap:12px}
.rm-icta .btn-ghost{--b-bg:rgba(255,255,255,.08);--b-fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.rm-inext{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#6ff0f7;font:700 15.5px var(--display);text-decoration:none}
.rm-inext svg{width:15px;height:15px}
.rm-ifoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:40px 0 0;padding:22px 0 124px;border-top:1px solid var(--line);font:600 14px/1.4 var(--body);color:var(--soft)}
.rm-ifoot a{color:var(--fg);text-decoration:none;font-weight:700;display:inline-block;padding:6px 0}
.rm-ifoot .rm-foot-logo svg{width:92px;height:24px;display:block}
@media (max-width:759px){
  .rm-igrid,.rm-steps,.rm-ivals{grid-template-columns:1fr}
  .rm-info{padding-top:48vh}
  .rm-info-in{padding:0 18px 20px}
  .rm-icta{padding:26px 20px}
  .rm-icta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){.rm-info-in{transform:none}}

.rm-jr .rm-hint{display:none!important}
.rm-facts li{gap:0}
.rm-facts strong::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:#02d3e0;margin-bottom:12px}

/* art pass (Oct 23): solid card backing during the station crossfade (room.js placeCall sets --co, the words' share of the fade) */
html .rm-surf.rm-call:not(.focused) > .rm-face{background:#fff}
html.night .rm-surf.rm-call:not(.focused) > .rm-face{background:#0b0938}
.rm-call:not(.focused) > .rm-face > *{opacity:var(--co,1)}

/* art pass (Oct 23): step labels at 320-379 wide. Narrower gaps, a smaller face, and a two-line wrap for two-word labels
   ("Shop floor", "Exam room"), so no label runs past its own pill or into the next one */
@media (max-width:379px){
  .rm-dots{gap:3px;padding:4px}
  .rm-dots button{min-width:0;padding:3px 1px}
  .rm-dots button em{font-size:10.5px;line-height:1.05;white-space:normal;text-align:center;letter-spacing:-.015em;max-width:100%;overflow-wrap:normal}
  .rm-dots button em b{font-size:9.5px}
}
@media (max-width:339px){
  .rm-dots button em{font-size:10px;letter-spacing:-.02em}
}

/* art pass (Oct 23): the page behind the fixed room is the room's own dark tone, not white. While a scroll tween is moving the
   document, a browser that paints fixed layers a frame late (software compositing, some low-end GPUs) showed a white band
   above the room on desktop; now any such gap is the same colour as the room's edge */
html:has(body.rm-on),body.rm-on{background:#1a1d3a}

/* Instinct retest: never a blank room. The inlined blurred thumbnail (--phd / --phn, about 0.5 KB) is the room's backdrop
   from the first paint; room.js draws it at the plate size under the picture, and the picture fades in over it once decoded. */
.rm{background:#1a1d3a var(--phd,none) 50% 50%/cover no-repeat}
html.night .rm{background-image:var(--phn,var(--phd,none))}
.rm-img .rm-pn{opacity:0}
html.night .rm-img .rm-pn{opacity:1}
.rm-img .rm-d{opacity:0;transition:opacity .45s ease-out}
.rm-img .rm-d.in{opacity:1}
html.night .rm:not(.night-ready) .rm-img .rm-d{opacity:0}
.rm-img .rm-pd:not([src]),.rm-img .rm-pn:not([src]),.rm-img .rm-d:not([src]),.rm-img .rm-n:not([src]){visibility:hidden}
@media (prefers-reduced-motion:reduce){.rm-img .rm-d{transition:none}}
/* before room.js runs (it is deferred): the closed door and the placeholder, not the stacked no-JS cards on navy. rm-js is set by
   an inline head script and dropped again after 8 s if room.js never ran, so the no-JS layout still works without it. */
html.rm-js body.room5:not(.rm-on) .rm-surfs,html.rm-js body.room5:not(.rm-on) .rm-dots,html.rm-js body.room5:not(.rm-on) .rm-hint,html.rm-js body.room5:not(.rm-on) .rm-guide{visibility:hidden}
@media (prefers-reduced-motion:no-preference){html.rm-js body.room5:not(.rm-on) .rm-door{display:block}}

/* Instinct round 4 (Oct 23): a station card's opening is drawn by room.js frame by frame (on the real clock); the generic .22 s
   opacity transition only made it trail the camera (a whole frame or more in a slow browser). The overlay hide keeps it. */
.rm-on .rm-surf.rm-call:not(.rm-ovh):not(.focused){transition:none}

/* r13: the arrival doors are gone (one smooth push in) */
.rm-door{display:none!important}

/* r13: the site footer at the end of every room's details */
.rm-info .ftr{margin-top:56px;border-radius:0}
.rm-hws{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:700 15px var(--display);color:var(--accent);text-decoration:none}
.rm-hws svg{width:14px;height:14px}
.rm-info{padding-top:16vh}
@media (max-width:899px){.rm-info{padding-top:14vh}}
.rm-rev{margin:40px 0 0;padding:24px;border-radius:18px;background:rgba(9,0,87,.04);box-shadow:inset 0 0 0 1px rgba(9,0,87,.08)}
html.night .rm-rev{background:rgba(255,255,255,.05)}
.rm-rev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}.rm-rev-more{margin-left:auto;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}.rm-rev-more:hover{text-decoration:underline}
.rm-rev blockquote{margin:10px 0;font-size:17px;line-height:1.55}.rm-rev .rv-stars{color:#f5b400}.rm-rev .rv-stars i{font-style:normal;opacity:.25}.rm-rev figcaption em{font-style:normal;color:var(--soft)}
.rm-hwsl{margin-top:26px;font-size:17px;color:var(--soft)}
.rm-hwsl .rm-hws{margin:0 0 0 6px}

/* owner r2: the zoom's last frame, held over the room until its picture is drawn (js/rm-land.js, room.js) */
.rm-cover{position:fixed;z-index:400;overflow:hidden;pointer-events:none;transition:opacity .4s ease-out;animation:rmcov .4s 3.6s forwards}
.rm-cover img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}.rm-cover.out{opacity:0}
@keyframes rmcov{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.rm-cover{display:none}}
/* owner r2 dark-mode picture pass: the darkest night plates (backup, cybersecurity, network, construction, retail) read murky on a phone; a gentle lift */
html.night .rm-img .rm-n{filter:brightness(1.14) contrast(1.05) saturate(1.08)}
/* owner r2 (copy helper follow-up): the reach-us links in Who we are read as links */
.rm-reach a,.rm-ireach a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* owner r4 / r11, rooms: on phones the power button sits at the RIGHT end of the station bar row (vertically centred on it) and
   the bar ends to its left, so neither covers the other; the room footer keeps a clear strip for it */
@media (max-width:759px){
  body.room5 .pwr,body.room5 .pwr.pwr-tuck{bottom:calc(29px + env(safe-area-inset-bottom,0px))}
  body.room5 .rm-dots{left:calc(10px + env(safe-area-inset-left,0px));right:calc(66px + env(safe-area-inset-right,0px))}
  body.room5 .rm-foot-in{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:760px){ body.room5 .rm-foot-in{padding-right:calc(88px + env(safe-area-inset-right,0px))} }
/* owner r11: on wide screens the Try it pill rides above the bottom-right power button (below 1280px it already does) */
@media (min-width:1280px){.rm-tryfab{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}