/* /hanh-trinh/ — Hành trình khách hàng as a flight inside a big ship: the viewer looks out of a panoramic window while a navigation console (the panel) lists ten situations a business
   owner recognises as a flight route: numbered pins joined by a dashed line, the same pins that sit on the map. Picking one flies the camera to a backdrop body (decoration only,
   never named) and the console shows what ONMATE will look at, the related services, three quick questions and one contact button.
   The console is on the left of the window on desktop (corner brackets like the reticle, hairlines, no boxes inside) and a bottom sheet on phones and tablets.
   Everything is scoped to body.pw-journey (classes jr-*).
   Static first: without JavaScript (or if journey.js fails) the cabin is a plain readable page (intro, situation list, ten situation cards).
   The live layout (pinned 100svh cabin, 3D scene, console, deck) is keyed on .jr-cabin.is-live, which the inline script in the page (and journey.js) adds.
   Layout split by media query, the same query journey.js asks (isSide): SIDE = (min-width:1000px), (min-width:600px) and (max-height:519px); SHEET = everything else (portrait tablets);
   PHONE = (max-width:599.98px), keyed on [data-layout=phone] (set by journey.js and by the inline script in the page): no map, a swipeable row of cards in a three-step sheet. */

body.pw-journey{--hh:82px;background:#02040a}
/* colours follow the homepage: every control, label and frame is the site cyan; only the marks that belong to a situation keep their group colour (--planet) */
body.pw-journey .jr-cabin[data-accent],body.pw-journey .jr-cabin [data-accent]{--accent:#72eaff}
body.pw-journey [data-accent=ads]{--planet:#88e4ff}
body.pw-journey [data-accent=commerce]{--planet:#ffbd80}
body.pw-journey [data-accent=web]{--planet:#c0a2ff}
body.pw-journey [data-accent=social]{--planet:#ff9bc1}
body.pw-journey [data-accent=ai]{--planet:#85e1c1}
body.pw-journey [data-accent=data]{--planet:#e0cd9b}
body.pw-journey [data-accent=seo]{--planet:#9db8ff}
body.pw-journey [data-accent=strategy]{--planet:#ffa98a}
body.pw-journey [data-accent=training]{--planet:#b6e36f}
body.pw-journey [data-accent=crm]{--planet:#f5a3c0}
@media(max-width:1100px){body.pw-journey{--hh:75px}}

/* the fixed 3D backdrop (created by solar.js): purely visual here, so it never takes pointer events */
#solar-explorer{position:fixed;inset:0;z-index:0;background:#02040a;pointer-events:none;overflow:hidden}
#solar-explorer canvas{display:block;width:100%;height:100%;pointer-events:none}
.solar-labels{display:none}
.jr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.jr-cabin [hidden]{display:none!important}

/* ---------- shared bits: the round icon of a situation (stage card, bar), the numbered pin (list, map, chips), the backdrop body used when 3D is unavailable ---------- */
.jr-badge{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 40%,#0000);border-radius:13px;background:color-mix(in srgb,var(--planet,var(--accent)) 16%,#0000);color:var(--planet,var(--accent))}
.jr-badge .ico{width:21px;height:21px}
.jr-badge.is-s{width:28px;height:28px;border-radius:50%}
.jr-badge.is-s .ico{width:14px;height:14px}
.jr-no{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid var(--planet,var(--accent));border-radius:50%;background:#050b16;color:var(--planet,var(--accent));font-size:11px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums;line-height:1;transition:background .2s,color .2s,box-shadow .25s}
.jr-no::before{content:'';position:absolute;inset:-5px;border:1px solid var(--planet,var(--accent));border-radius:50%;opacity:0;transform:scale(.72);transition:opacity .25s,transform .35s var(--ease)}
.jr-no.is-s{width:24px;height:24px;border-width:1px;font-size:10px}
.jr-no.is-s::before{inset:-4px}
.jr-orb{position:relative;display:block;flex:none;width:var(--os,44px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#0a1626;box-shadow:0 0 0 1px #ffffff1c,0 0 22px color-mix(in srgb,var(--planet,var(--accent,#88e4ff)) 32%,#0000)}
.jr-orb::before{content:'';position:absolute;inset:0 -300% 0 0;background:var(--tex) 0 0/auto 100% repeat-x}
.jr-orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff40,#0000 36%),radial-gradient(circle at 70% 76%,#000000c4,#0000 66%);box-shadow:inset -6px -6px 16px #000b}
@keyframes jr-spin{to{transform:translateX(-50%)}}

/* ---------- the cabin: static layout ---------- */
.jr-cabin{position:relative;padding:calc(var(--hh) + 40px) 0 72px;background:radial-gradient(ellipse 70% 55% at 82% 0,#16345a55,#0000 70%),radial-gradient(ellipse 50% 40% at 0 40%,#2a1a4a33,#0000 70%),var(--bg-night)}
.jr-console{width:min(980px,100%);margin:0 auto;padding:0 5%;container-type:inline-size}
.jr-frame{display:none}
.jr-head,.jr-back,.jr-corner{display:none}
.jr-corner{border-style:solid;border-width:0}
.jr-kicker{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.jr-kicker span{flex:none;width:30px;height:1px;background:currentColor}
.jr-title{margin:0;line-height:1}
.jr-t-brand{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the kicker already says "Hành trình khách hàng" */
.jr-t-sub{display:block;font-size:clamp(34px,4.3vw,60px);font-weight:800;line-height:1.06;letter-spacing:-.04em;text-wrap:balance;color:var(--text);text-shadow:0 2px 30px #02050c99}
.jr-t-sub b{font-weight:800;background:linear-gradient(95deg,#72eaff 5%,#9fb4ff 55%,#cfa5ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.jr-lead{margin:20px 0 0;max-width:56ch;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.75;color:var(--text-2);text-wrap:pretty}
.jr-hint{margin-top:16px;max-width:56ch;font-size:12.5px;line-height:1.7;color:var(--muted)}
.jr-hint .btn{margin-top:10px;padding:9px 16px;font-size:12.5px}
.jr-stages{display:grid;gap:22px;margin-top:44px;padding:0;list-style:none}

/* the situation list: ten things a business owner says, one numbered pin each (the pin is the same as on the map); each opens its own answer */
.jr-menu{display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px;margin:30px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--edge)}
.jr-menu li{border-top:1px solid var(--edge)}
@container (min-width:560px){.jr-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jr-pick{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;height:100%;padding:13px 8px;transition:background .2s}
.jr-pick:hover,.jr-pick.is-hot{background:linear-gradient(90deg,color-mix(in srgb,var(--planet,var(--accent)) 13%,#0000),#0000 90%)}
.jr-pick:hover .jr-no,.jr-pick.is-hot .jr-no,.jr-also-chip:hover .jr-no{background:var(--planet,var(--accent));color:#04101a;box-shadow:0 0 16px color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000)}
.jr-pick:hover .jr-no::before,.jr-pick.is-hot .jr-no::before,.jr-also-chip:hover .jr-no::before{opacity:.5;transform:none}
.jr-pick-body{display:block;min-width:0}
.jr-pick-body small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--planet,var(--accent))}
.jr-pick-body b{display:block;margin-top:3px;font-size:14.5px;font-weight:500;line-height:1.45;color:var(--text);text-wrap:pretty}
.jr-pick-go{flex:none;margin-left:auto;color:var(--accent);transition:transform .25s var(--ease),opacity .25s}
.jr-pick:hover .jr-pick-go{transform:translateX(4px)}

/* situation card: the situation, what ONMATE looks at, the related services, quick questions, the contact button */
.jr-stage article{position:relative;overflow:hidden;padding:clamp(22px,3vw,34px);border:1px solid var(--edge);border-radius:18px;background:radial-gradient(90% 38% at 0 0,color-mix(in srgb,var(--planet,var(--accent)) 12%,#0000),#0000 72%),linear-gradient(165deg,#10203af0,#09131ff5);box-shadow:var(--card-shadow)}
.jr-stage article::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--planet,var(--accent)),#0000 72%)}
.jr-stage-num{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px}
.jr-stage-k{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.3;color:var(--muted)}
.jr-stage-k b{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--planet,var(--accent))}
.jr-stage-num em{margin-left:auto;padding:5px 12px;border:1px solid var(--accent-line);border-radius:99px;background:var(--accent-bg);font-size:12px;font-style:normal;font-weight:600;color:var(--text)}
.jr-stage h2{margin:0 0 12px;font-size:clamp(25px,2.4vw,36px);font-weight:800;line-height:1.18;letter-spacing:-.03em;text-wrap:balance}
.jr-stage h2:focus{outline:none}
.jr-stage h2:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.jr-lede{margin:0;font-size:15.5px;line-height:1.7;color:var(--text-2);text-wrap:pretty}
.jr-part{margin-top:26px}
/* a part opens with a small HUD label: number, name, a hairline that fades out */
.jr-part h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.jr-part h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--edge-strong),#0000)}
.jr-pn{display:inline-flex;align-items:center;flex:none;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--planet,var(--accent))}
.jr-pn::after{content:'/';margin-left:9px;font-weight:400;color:var(--edge-strong)}
/* what ONMATE looks at: scan lines, each with a small target mark */
.jr-checks{display:grid;margin:0;padding:0;list-style:none}
.jr-checks li{position:relative;padding:10px 0 10px 30px;border-top:1px solid var(--edge);font-size:14.5px;line-height:1.6;color:var(--text);text-wrap:pretty}
.jr-checks li:first-child{border-top:0}
.jr-checks li::before{content:'';position:absolute;left:1px;top:14px;width:14px;height:14px;border:1.5px solid var(--planet,var(--accent));border-radius:50%}
.jr-checks li::after{content:'';position:absolute;left:6.5px;top:19.5px;width:3px;height:3px;border-radius:50%;background:var(--planet,var(--accent));box-shadow:0 0 8px var(--planet,var(--accent))}
.jr-prep{margin:12px 0 0;padding:10px 14px 11px;border-radius:0 12px 12px 0;border-style:solid;border-width:0 0 0 2px;border-color:var(--accent);background:linear-gradient(90deg,var(--accent-bg),#0000 94%);font-size:14px;line-height:1.65;color:var(--text-2)}
.jr-prep b{display:block;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.jr-promise{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.jr-svcs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jr-svcs a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 15px;border:1px solid var(--edge-strong);border-radius:99px;background:#ffffff08;font-size:14px;font-weight:500;line-height:1.3;color:var(--text);transition:border-color .2s,background .2s,transform .25s var(--ease)}
.jr-svcs a::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--planet,var(--accent));box-shadow:0 0 9px var(--planet,var(--accent))}
.jr-svcs a:hover{border-color:var(--accent);background:var(--accent-bg);transform:translateY(-1px)}
.jr-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:14px;font-weight:600;color:var(--accent)}
/* quick questions: hairline rows, a plus that turns into a cross */
.jr-ask{margin:0;border-top:1px solid var(--edge);transition:background .25s}
.jr-ask:last-of-type{border-bottom:1px solid var(--edge)}
.jr-ask[open]{background:linear-gradient(90deg,var(--accent-bg),#0000 78%)}
.jr-ask summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:11px 8px 11px 0;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;line-height:1.5}
.jr-ask summary::-webkit-details-marker{display:none}
.jr-ask summary::after{content:'+';display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--edge-strong);border-radius:50%;font-size:16px;font-weight:500;line-height:1;color:var(--accent);transition:transform .25s var(--ease),border-color .2s,background .2s}
.jr-ask[open]>summary::after{transform:rotate(45deg);border-color:var(--accent);background:var(--accent-bg)}
.jr-ask>p{margin:0;padding:0 8px 14px 0;font-size:14px;line-height:1.7;color:var(--text-2)}
.jr-ask>.jr-ask-links{display:flex;flex-wrap:wrap;gap:6px;padding-top:0}
.jr-ask-links a{display:inline-flex;gap:5px;padding:6px 12px;border:1px solid var(--accent-line);border-radius:99px;background:var(--accent-bg);font-size:12.5px;font-weight:500;color:var(--accent);transition:background .2s,color .2s}
.jr-ask-links a:hover{background:var(--accent);color:#04101a}
.jr-alsos{display:flex;flex-wrap:wrap;gap:8px}
.jr-also-chip{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:5px 15px 5px 6px;border:1px solid var(--edge);border-radius:99px;background:#ffffff06;font-size:13.5px;font-weight:500;color:var(--text);transition:border-color .2s,background .2s}
.jr-also-chip:hover{border-color:var(--accent);background:var(--accent-bg)}
.jr-ft{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.jr-ft .btn{padding:13px 20px;font-size:14px}

/* ---------- the live cabin: a pinned 100svh window onto the 3D scene; the footer slides over its lower edge ---------- */
body.pw-journey #main:has(.jr-cabin.is-live){min-height:100svh}
.jr-cabin.is-live{--jr-m:clamp(10px,2.2vw,34px);--jr-desk:96px;--jr-wh:calc(100svh - var(--hh) - 8px - var(--jr-desk));position:fixed;inset:0;z-index:1;height:100svh;padding:0;overflow:hidden;background:none}
.jr-cabin.is-live::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 82% 0,#16345a55,#0000 70%),radial-gradient(ellipse 50% 40% at 0 40%,#2a1a4a33,#0000 70%),var(--bg-night);transition:opacity 1.1s .1s}
.jr-cabin.is-live.is-3d::before{opacity:0}
/* a still of the scene (a webp, preloaded in the page head) stands in until the 3D scene is ready, so the first frame is the sky and not a dark plate; it fades out as the scene fades in.
   It sits on ::after (the theme twins re-colour ::before). Not used for a link to one goal (the camera starts elsewhere), nor without WebGL (the flat fallback draws its own backdrop). */
.jr-cabin.is-live:not([data-still=off])::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/journey/poster-wide.webp) center/cover no-repeat;transition:opacity 1.1s .1s}
.jr-cabin.is-live.is-3d::after,.jr-cabin.is-live.is-flat::after{opacity:0}
@media(min-width:600px) and (max-width:999.98px) and (min-height:520px){.jr-cabin.is-live:not([data-still=off])::after{background-image:url(/assets/journey/poster-tablet.webp)}}
@media(max-width:599.98px){.jr-cabin.is-live:not([data-still=off])::after{background-image:url(/assets/journey/poster-phone.webp)}}
.jr-cabin.is-live.is-covered{visibility:hidden}
.jr-cabin.is-live .jr-frame{display:block;position:absolute;inset:0;pointer-events:none}
.jr-window{position:absolute;z-index:2;left:var(--jr-m);right:var(--jr-m);top:calc(var(--hh) + 8px);bottom:var(--jr-desk);container:jrw/inline-size;pointer-events:none}
.jr-window :is(button,a){pointer-events:auto}

/* the console: a navigation panel, hairline frame with four corner brackets (the reticle's language), faint scan lines at the top. Folded it is one bar, open it is the whole panel.
   It only moves with transform; its height is the bar + the scroll area (max-height --jr-ph). */
.jr-cabin.is-live .jr-console{--jr-bar:64px;--jr-steps:0px;position:absolute;z-index:5;width:auto;margin:0;padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 24%,#ffffff12);border-radius:16px;background:radial-gradient(120% 42% at 0 0,color-mix(in srgb,var(--accent) 14%,#0000),#0000 72%),linear-gradient(180deg,#071322f2,#040a14f6);box-shadow:0 30px 70px -18px #000d,0 0 0 1px #02050c80,0 12px 90px -30px color-mix(in srgb,var(--accent) 50%,#0000);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);transition:transform 1s cubic-bezier(.18,.92,.28,1.05),visibility 0s}
.jr-cabin.is-live .jr-console::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,#0000 1px 4px);-webkit-mask-image:linear-gradient(#000,#0000 60%);mask-image:linear-gradient(#000,#0000 60%)}
.jr-cabin.is-live .jr-corner{display:block;position:absolute;z-index:4;width:16px;height:16px;border-color:var(--accent);opacity:.9;pointer-events:none;transition:border-color .6s}
.jr-cabin.is-live[data-state=fly] .jr-corner{border-color:var(--planet,var(--accent))}
.jr-corner.is-tl{left:0;top:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:15px}
.jr-corner.is-tr{right:0;top:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:15px}
.jr-corner.is-bl{left:0;bottom:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:15px}
.jr-corner.is-br{right:0;bottom:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:15px}
.jr-cabin.is-live .jr-head{display:block;position:relative;z-index:1}
.jr-cabin.is-live[data-panel=open] .jr-head::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent-line),#0000)}
.jr-cabin.is-live .jr-bar{position:relative;display:flex;align-items:center;gap:13px;width:100%;height:var(--jr-bar);padding:3px 20px 0 16px;border:0;background:none;color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.jr-bar:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* the badge is a small radar: a faint sweep turns behind the icon (stopped by the pause button and reduced motion) */
.jr-cabin.is-live .jr-bar-badge{position:relative;overflow:hidden;width:42px;height:42px;border-width:1.5px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--planet,var(--accent)) 24%,#0000),#0000 76%)}
.jr-bar-badge::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000),#0000 30%);animation:jr-sweep 4.5s linear infinite}
.jr-bar-badge .ico{position:relative}
@keyframes jr-sweep{to{transform:rotate(360deg)}}
.jr-bar-txt{display:block;flex:1;min-width:0}
.jr-bar-txt small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.jr-bar-txt b{display:block;margin-top:2px;overflow:hidden;font-size:15.5px;font-weight:600;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.jr-bar-chev{flex:none;width:9px;height:9px;margin:0 4px 3px 0;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .4s var(--ease)}
.jr-bar[aria-expanded=true] .jr-bar-chev{margin-bottom:-3px;transform:rotate(-135deg)}
.jr-cabin.is-live[data-panel=away] .jr-bar-chev{opacity:0}
.jr-cabin.is-live[data-panel=away] .jr-bar::after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;background:linear-gradient(90deg,#0000,var(--accent),#0000) -40% 0/40% 100% no-repeat;animation:jr-fly 1.5s linear infinite}
@keyframes jr-fly{to{background-position:140% 0}}

/* the three steps, as a short flight plan: the situation, what ONMATE looks at, send a request */
.jr-steps{display:none} /* the title, the tabs and the way back already say where you are */

/* sheet only: pull the sheet up to nearly the whole window and put it back */
.jr-size{display:none;position:absolute;right:46px;top:calc(var(--jr-bar)/2 - 17px);z-index:3;width:34px;height:34px;padding:0;border:1px solid var(--edge-strong);border-radius:50%;background:#ffffff0a;cursor:pointer}
.jr-size span{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-2px 0 0 -5px;border-left:2px solid var(--text-2);border-top:2px solid var(--text-2);transform:rotate(45deg);transition:transform .3s var(--ease)}
.jr-size[aria-pressed=true] span{margin-top:-7px;transform:rotate(225deg)}
.jr-size:hover{border-color:var(--accent)}

/* in ngắm cảnh the panel is out of sight */
.jr-cabin.is-live.is-scenic .jr-console{transition:transform .8s var(--ease),visibility 0s .8s}
.jr-cabin.is-live.is-scenic .jr-console{visibility:hidden}

.jr-cabin.is-live .jr-body{position:relative;z-index:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .8s var(--ease),visibility 0s}
.jr-cabin.is-live:is([data-panel=folded],[data-panel=away]) .jr-body{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.jr-cabin.is-live .jr-scroll{min-height:0;max-height:var(--jr-ph);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff30 #0000;transition:opacity .3s}
.jr-cabin.is-live[data-state=intro] .jr-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),#0000);mask-image:linear-gradient(#000 calc(100% - 22px),#0000)} /* the list goes on below: a fade says so */
.jr-cabin.is-live[data-panel=away] .jr-scroll{opacity:0}

/* boarding (intro): a short title and the ten situations as a route; the flight: one situation and its answer */
.jr-cabin.is-live .jr-intro{padding:8px 16px 26px}
.jr-cabin.is-live .jr-kicker{display:none}
.jr-cabin.is-live .jr-t-sub{font-size:clamp(21px,1.75vw,25px);font-weight:800;line-height:1.15;text-shadow:none}
.jr-cabin.is-live .jr-lead{display:none} /* the title already says what to do; the text stays for the static page */
.jr-cabin.is-live .jr-hint{display:none}
.jr-cabin.is-live.is-flat .jr-hint{display:block}
.jr-cabin.is-live .jr-menu{display:block;margin:14px -8px 0;border-bottom:0}
.jr-cabin.is-live .jr-menu li{position:relative;border-top:0}
.jr-cabin.is-live .jr-menu li:not(:last-child)::before{content:'';position:absolute;left:23px;top:39px;bottom:-4px;border-left:1px dashed color-mix(in srgb,var(--accent) 40%,#0000)}
.jr-cabin.is-live .jr-pick{grid-template-columns:30px minmax(0,1fr);align-items:start;gap:12px;height:auto;padding:6px 30px 6px 8px;border-radius:12px}
.jr-cabin.is-live .jr-pick .jr-no{margin-top:1px}
.jr-cabin.is-live .jr-pick-body small{font-size:10.5px;letter-spacing:.14em}
.jr-cabin.is-live .jr-pick-body b{margin-top:2px;font-size:13.5px;font-weight:500;line-height:1.42}
.jr-cabin.is-live .jr-pick-go{position:absolute;right:12px;top:50%;margin:-9px 0 0;opacity:0;transform:translateX(-6px)}
.jr-cabin.is-live .jr-pick:hover .jr-pick-go,.jr-cabin.is-live .jr-pick:focus-visible .jr-pick-go{opacity:1;transform:none}
.jr-cabin.is-live[data-state=intro] :is(.jr-stages,.jr-back){display:none}
.jr-cabin.is-live[data-state=fly] .jr-intro{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jr-back{padding:4px 16px 0}
.jr-cabin.is-live .jr-back{display:block;margin:0}
.jr-back button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 0;border:0;background:none;color:var(--text-4);font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.jr-back button:hover{color:var(--accent)}
.jr-cabin.is-live .jr-stages{margin:0}
.jr-cabin.is-live .jr-stage{display:none}
.jr-cabin.is-live .jr-stage.is-current{display:block;animation:jr-card .6s var(--ease) both}
@keyframes jr-card{from{opacity:0;transform:translateY(14px)}}

/* the situation, flat inside the console. Three tabs (what ONMATE looks at | the services | quick questions) show one part at a time, so nothing is cut by the foot;
   the tabs stay at the top of the scroll area, the contact button stays at the bottom. Phones have their own sheet (rules further down). */
.jr-cabin.is-live .jr-stage article{padding:2px 16px 0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.jr-cabin.is-live .jr-stage article::before,.jr-cabin.is-live .jr-stage-num{display:none}
.jr-cabin.is-live .jr-stage h2{margin:4px 0 8px;font-size:clamp(20px,1.2vw + 9px,24px);font-weight:750;line-height:1.24;letter-spacing:-.02em}
.jr-cabin.is-live .jr-lede{font-size:14px;line-height:1.62}
.jr-cabin.is-live:not([data-layout=phone]) .jr-lede{margin-bottom:12px} /* the sticky tabs have no margin of their own: a margin would stay as a gap when they stick */
.jr-cabin.is-live .jr-part{margin-top:22px}
.jr-cabin.is-live .jr-checks li{padding:9px 0 9px 30px;font-size:14px;line-height:1.55}
.jr-cabin.is-live .jr-checks li::before{top:12.5px}
.jr-cabin.is-live .jr-checks li::after{top:18px}

.jr-cabin.is-live[data-state=fly][data-panel=open]:not([data-layout=phone]) .jr-scroll{display:flex;flex-direction:column;min-height:var(--jr-ph)}
.jr-cabin.is-live[data-state=fly]:not([data-layout=phone]) :is(.jr-stages,.jr-stage.is-current,.jr-stage.is-current article){display:flex;flex:1 0 auto;flex-direction:column}
.jr-cabin.is-live:not([data-layout=phone]) .jr-ft{margin-top:auto}

/* the way back to the ten situations: a small chip, not a shouting label */
.jr-cabin.is-live:not([data-layout=phone]) .jr-back button{min-height:30px;margin:6px 0 2px;padding:0 13px 0 10px;border:1px solid var(--edge);border-radius:99px;background:#ffffff08;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--text-2);transition:color .2s,border-color .2s,background .2s}
.jr-cabin.is-live:not([data-layout=phone]) .jr-back button:hover{border-color:var(--accent-line);background:var(--accent-bg);color:var(--accent)}

/* the three tabs: a segmented control that rides on top of whatever scrolls under it */
.jr-cabin.is-live:not([data-layout=phone]) .jr-tabs{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 -16px;padding:11px 19px 13px;background:linear-gradient(180deg,#06101c 78%,#06101c00)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tabs::before{content:'';position:absolute;z-index:-1;left:16px;right:16px;top:8px;bottom:10px;border:1px solid var(--edge);border-radius:13px;background:#0d1b2e}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tab{min-height:36px;padding:0 6px;border:0;border-radius:10px;background:none;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;color:var(--text-2);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tab:hover{color:var(--text)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tab[aria-selected=true]{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#0000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);color:var(--text)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* one part at a time; the tab already names it, so its small label is only for a screen reader */
.jr-cabin.is-live:not([data-layout=phone]) .jr-part{display:none;margin-top:4px}
.jr-cabin.is-live:not([data-layout=phone])[data-tab=look] .jr-look,.jr-cabin.is-live:not([data-layout=phone])[data-tab=rel] .jr-rel,.jr-cabin.is-live:not([data-layout=phone])[data-tab=qa] :is(.jr-qa,.jr-also){display:block}
.jr-cabin.is-live:not([data-layout=phone]) :is(.jr-look,.jr-rel,.jr-qa)>h3{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jr-cabin.is-live:not([data-layout=phone]) .jr-also{margin-top:20px}
.jr-cabin.is-live:not([data-layout=phone]) .jr-also .jr-pn{display:none}
.jr-cabin.is-live:not([data-layout=phone]) .jr-also h3{margin-bottom:9px;color:var(--text-4)}
/* the services: hairline rows with an arrow, like the questions */
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs{display:grid;gap:0}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs li{border-top:1px solid var(--edge)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs li:first-child{border-top:0}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs a{display:flex;min-height:48px;padding:9px 4px 9px 2px;border:0;border-radius:0;background:none;font-size:14.5px;font-weight:550;transform:none}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs a::after{content:'→';margin-left:auto;font-size:15px;color:var(--text-4);transition:transform .25s var(--ease),color .2s}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs a:hover{background:none;color:var(--accent)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-svcs a:hover::after{color:var(--accent);transform:translateX(3px)}
.jr-cabin.is-live:not([data-layout=phone]) .jr-all{display:flex;justify-content:space-between;min-height:46px;margin-top:12px;padding:0 14px;border:1px solid var(--edge);border-radius:12px;background:#ffffff06;font-size:13.5px;transition:border-color .2s,background .2s}
.jr-cabin.is-live:not([data-layout=phone]) .jr-all:hover{border-color:var(--accent-line);background:var(--accent-bg)}

/* the foot: only the contact button (the group page has its own link in the services tab); the text above it fades out instead of being cut by a bar */
.jr-cabin.is-live .jr-ft{position:sticky;bottom:0;z-index:2;display:block;margin:10px -16px 0;padding:24px 16px 14px;border:0;background:linear-gradient(180deg,#040a1400,#040a14 22px)}
.jr-cabin.is-live .jr-ft .btn-ghost{display:none}
.jr-cabin.is-live .jr-ft .jr-cta{display:flex;justify-content:space-between;width:100%;min-height:50px;padding:0 8px 0 20px;border-radius:14px;font-size:14.5px;font-weight:700;line-height:1.3;text-align:left}
.jr-cabin.is-live .jr-ft .jr-cta span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,currentColor 14%,#0000);font-size:17px;transition:transform .25s var(--ease)}
.jr-cabin.is-live .jr-ft .jr-cta:hover span{transform:translateX(3px)}

/* fallback picture: only when 3D is unavailable (centred in the part of the window the panel leaves free) */
.jr-orbfall{position:absolute;right:0;top:0;left:var(--jr-free-l,0px);bottom:var(--jr-free-b,0px);container-type:size;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .6s}
.jr-orbfall .jr-orb{--os:min(62cqw,300px,82cqh);width:var(--os);box-shadow:0 0 0 1px #ffffff1c,0 0 70px color-mix(in srgb,var(--planet,var(--accent)) 38%,#0000)}
.jr-orbfall .jr-orb::before{animation:jr-spin-fall 90s linear infinite}
@keyframes jr-spin-fall{to{transform:translateX(-50%)}}
.jr-cabin.is-live.is-flat .jr-orbfall{opacity:1}
.jr-cabin.is-live.is-3d .jr-orbfall{visibility:hidden;transition:opacity .6s,visibility 0s .6s} /* once the real scene runs the stand-in is not painted at all */

/* ---------- window furniture: reticle, service chips, pins, caption ---------- */
.jr-lock,.jr-pins,.jr-moons{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.jr-lock{position:absolute;left:0;top:0;z-index:3;width:var(--ls,120px);height:var(--ls,120px);pointer-events:none;transform:translate(calc(var(--lx,-999px) - 50%),calc(var(--ly,-999px) - 50%))}
.jr-cabin.is-lock .jr-lock{opacity:1;visibility:visible}
.jr-lock i{position:absolute;width:16px;height:16px;border:2px solid var(--planet,var(--accent));animation:jr-lock 2.4s ease-in-out infinite}
.jr-lock i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:7px 0 0 0}
.jr-lock i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 7px 0 0}
.jr-lock i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 7px}
.jr-lock i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 7px 0}
@keyframes jr-lock{50%{transform:scale(.88)}}
.jr-lock span{position:absolute;left:50%;top:100%;transform:translate(-50%,12px);white-space:nowrap;padding:4px 12px;border:1px solid var(--accent-line);border-radius:99px;background:#050a14d9;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.jr-moons{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.jr-cabin.is-lock:not(.is-map):not(.is-scenic) .jr-moons{opacity:1;visibility:visible}
.jr-moon{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border:1px solid var(--accent-line);border-radius:99px;background:#050a14d9;font-size:11.5px;font-weight:500;white-space:nowrap;color:var(--text);opacity:var(--mo,0);transform:translate(calc(var(--mx,-999px) - 50%),calc(var(--my,-999px) - 50%)) scale(var(--ms,1));z-index:var(--mz,1);pointer-events:auto;transition:border-color .2s,background .2s}
.jr-moon::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--planet,var(--accent));box-shadow:0 0 9px var(--planet,var(--accent))}
.jr-moon:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,#050a14)}
.jr-pins{position:absolute;inset:0;z-index:3;pointer-events:none}
.jr-cabin.is-map .jr-pins{opacity:1;visibility:visible}
.jr-pin{position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1.5px solid var(--planet,var(--accent));border-radius:50%;background:#050b16e6;color:var(--planet,var(--accent));font-family:inherit;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transform:translate(calc(var(--x,-999px) - 50%),calc(var(--y,-999px) - 50%));transition:background .2s,color .2s,box-shadow .25s}
.jr-pin::before{content:'';position:absolute;inset:-6px;border:1px solid var(--planet,var(--accent));border-radius:50%;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.jr-pin b{font-weight:700}
.jr-pin span{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:3px 9px;border-radius:99px;background:#050b16e6;font-size:11px;font-weight:500;white-space:nowrap;color:var(--text);opacity:0;pointer-events:none;transition:opacity .2s}
/* the pin of the situation being read (not while the list is still open: nothing is chosen yet) and the pin matching the list row under the pointer light up the same way */
.jr-pin:hover,.jr-pin:focus-visible,.jr-pin.is-hot,.jr-cabin:not([data-state=intro]) .jr-pin.is-cur{z-index:2;background:var(--planet,var(--accent));color:#04101a;box-shadow:0 0 18px color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000)}
.jr-pin:hover::before,.jr-pin:focus-visible::before,.jr-pin.is-hot::before,.jr-cabin:not([data-state=intro]) .jr-pin.is-cur::before{opacity:.55;transform:none}
.jr-pin:hover span,.jr-pin:focus-visible span,.jr-pin.is-hot span,.jr-cabin:not([data-state=intro]) .jr-pin.is-cur span{opacity:1}
.jr-window::before{content:'Bản đồ · bấm một số để xem tình huống';position:absolute;left:0;right:0;z-index:3;text-align:center;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);text-shadow:0 1px 10px #000;opacity:0;transition:opacity .4s;pointer-events:none}
.jr-cabin.is-map .jr-window::before{opacity:1}
.jr-cap{position:absolute;z-index:3;left:0;right:0;bottom:34px;display:none;flex-direction:column;align-items:center;gap:4px;margin:0 auto;padding:0 16px;text-align:center;text-shadow:0 2px 22px #000;pointer-events:none}
.jr-cap{isolation:isolate}
.jr-cap::before{content:'';position:absolute;left:-6%;right:-6%;top:-26px;bottom:-30px;z-index:-1;background:radial-gradient(58% 62% at 50% 56%,#02060cd9,#02060c8c 52%,#0000 100%)}
.jr-cap b{font-size:11px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent)}
.jr-cap span{max-width:34ch;font-size:clamp(17px,2.1cqw,24px);font-weight:400;line-height:1.35;color:var(--text)}
.jr-cabin.is-scenic .jr-cap{display:flex}
.jr-cabin.is-scenic .jr-lock span{display:none}
.jr-cabin.is-scenic.is-map .jr-window::before{opacity:0}

/* ---------- the deck: controls on the ship's console below the window ---------- */
.jr-deck{position:absolute;z-index:6;left:var(--jr-m);right:var(--jr-m);bottom:calc(var(--jr-desk)/2 - 24px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 16px;pointer-events:none}
.jr-deck :is(button,a){pointer-events:auto}
.jr-tools{display:flex;gap:8px}
.jr-tools.is-r{justify-self:end}
.jr-nav{display:flex;align-items:center;gap:10px}
.jr-rail{display:block} /* style.css hides every bare nav element on phones */
.jr-rail ol{margin:0;list-style:none}
.jr-tool{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border:1px solid var(--edge-strong);border-radius:99px;background:#050b16e6;color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.jr-tool .ico{width:15px;height:15px}
.jr-tool:hover{border-color:var(--accent);color:var(--text)}
.jr-tool[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,#050b16);color:var(--accent)}
.jr-arrow{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0 0 3px;border:1px solid var(--edge-strong);border-radius:50%;background:#050b16e6;color:var(--text);font-family:inherit;font-size:24px;line-height:1;cursor:pointer;transition:opacity .3s,border-color .2s,background .2s}
.jr-arrow:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,#050b16)}
.jr-arrow[aria-disabled=true]{opacity:.28;pointer-events:none}
.jr-rail ol{display:flex;gap:6px;padding:6px 9px;border:1px solid var(--edge-strong);border-radius:99px;background:#050b16e6}
.jr-rail button{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--edge);border-radius:50%;background:#0e1c32;color:var(--text-4);font-family:inherit;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.jr-rail button:hover{border-color:var(--accent);color:var(--text)}
.jr-rail button[aria-current=step]{border-color:var(--accent);background:var(--accent);color:#04101a;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,#0000)}
.jr-rail button::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,4px);padding:4px 10px;border:1px solid var(--accent-line);border-radius:8px;background:#050a14f2;font-size:11px;font-weight:500;white-space:nowrap;color:var(--text);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.jr-rail button:hover::after,.jr-rail button:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.jr-cabin :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the orbiting chips need room around the body: on narrow windows only the panel lists the services (pins and the panel stay) */
@container jrw (max-width:560px){
.jr-window::before{content:'Bản đồ'}
}

/* ---------- SIDE: desktop (and landscape phones). The console is on the left, the body is centred in the window to its right ---------- */
@media(min-width:1000px),(min-width:600px) and (max-height:519px){
.jr-cabin.is-live{--jr-ph:max(200px,calc(var(--jr-wh) - 98px))}
.jr-cabin.is-live .jr-console{left:calc(var(--jr-m) + 14px);top:calc(var(--hh) + 22px);width:min(440px,calc(100% - 2*var(--jr-m) - 28px))}
.jr-cabin.is-live.is-scenic .jr-console{transform:translateX(calc(-100% - 60px))}
.jr-window::before{bottom:34px}
}
@media(min-width:1000px) and (max-height:760px){
.jr-cabin.is-live{--jr-desk:84px}
}
/* landscape phones: a lower deck (one row, icons only) and a tighter panel */
@media(min-width:600px) and (max-height:519px){
.jr-cabin.is-live{--jr-desk:62px}
.jr-cabin.is-live .jr-console{--jr-bar:54px;width:min(400px,46vw);top:calc(var(--hh) + 14px)}
.jr-cabin.is-live,.jr-cabin.is-live[data-state=intro]{--jr-ph:max(104px,calc(var(--jr-wh) - 74px))} /* the panel must end above the deck: bar + the strip above it + a margin */
.jr-cabin.is-live .jr-lock span,.jr-cabin.is-live .jr-ft .btn-ghost{display:none}
.jr-cabin.is-live .jr-ft{margin-top:4px;padding:12px 16px 8px}
.jr-cabin.is-live .jr-ft .jr-cta{min-height:36px;padding:0 5px 0 14px;border-radius:11px;font-size:13px}
.jr-cabin.is-live .jr-ft .jr-cta span{width:26px;height:26px;border-radius:8px;font-size:15px}
.jr-cabin.is-live .jr-stage h2{margin:2px 0 6px;font-size:19px}
.jr-cabin.is-live .jr-lede{font-size:13px;line-height:1.55}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tabs{position:relative;padding:6px 19px 8px}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tabs::before{top:3px;bottom:5px}
.jr-cabin.is-live:not([data-layout=phone]) .jr-tab{min-height:30px;font-size:12.5px}
.jr-cabin.is-live .jr-bar-badge{width:36px;height:36px}
.jr-tool{width:38px;height:38px;justify-content:center;padding:0}
.jr-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-arrow{width:34px;height:34px}
.jr-rail button{width:26px;height:26px;font-size:10.5px}
}

/* ---------- SHEET: phones and tablets. The console is a sheet at the bottom of the window, the body is centred above it ---------- */
@media(max-width:599.98px),(max-width:999.98px) and (min-height:520px){
.jr-cabin.is-live{--jr-desk:116px;--jr-ph:clamp(190px,calc(var(--jr-wh)*.52),500px)}
.jr-cabin.is-live[data-state=intro]{--jr-ph:clamp(230px,calc(var(--jr-wh)*.56),520px)}
.jr-cabin.is-live[data-size=full]:not([data-state=intro]){--jr-ph:max(220px,calc(var(--jr-wh) - 130px))}
.jr-cabin.is-live .jr-console{--jr-bar:60px;left:calc(var(--jr-m) + 4px);right:calc(var(--jr-m) + 4px);bottom:calc(var(--jr-desk) + 8px)}
.jr-cabin.is-live.is-scenic .jr-console{transform:translateY(calc(100% + var(--jr-desk) + 40px))}
.jr-cabin.is-live .jr-bar-badge{width:38px;height:38px}
.jr-cabin.is-live:not([data-layout=phone])[data-state=fly][data-panel=open] .jr-size{display:block}
.jr-cabin.is-live:not([data-layout=phone])[data-state=fly][data-panel=open] .jr-bar{padding-right:86px}
.jr-cabin.is-live:not([data-layout=phone])[data-state=fly][data-panel=open] .jr-bar-chev{position:absolute;right:18px;top:calc(var(--jr-bar)/2 - 5px)}
.jr-window::before{top:14px}
.jr-cabin.is-live:not([data-panel=folded]) .jr-lock span{display:none} /* the sheet already names the situation, and the tag would land on the deck */
.jr-cabin.is-live .jr-stage h2{font-size:clamp(19px,5.6vw,24px)}
.jr-cabin.is-live .jr-ft .btn-ghost{display:none}
.jr-deck{bottom:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nav nav" "l r";gap:8px}
.jr-nav{grid-area:nav;justify-content:center}
.jr-tools.is-l{grid-area:l}
.jr-tools.is-r{grid-area:r;justify-self:end}
.jr-tool{justify-content:center;width:42px;height:38px;padding:0}
.jr-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-rail ol{gap:3px;padding:5px 7px}
.jr-rail button{width:26px;height:26px;font-size:10.5px}
.jr-cabin.is-scenic .jr-cap{bottom:30px}
}
@media(max-width:999.98px) and (min-width:420px) and (min-height:520px){
.jr-tool{width:auto;padding:0 14px}
.jr-tool span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
@media(max-width:420px){
.jr-nav{gap:6px}
.jr-arrow{width:34px;height:34px;font-size:21px}
.jr-rail ol{gap:2px;padding:5px 6px}
.jr-rail button{width:24px;height:24px;font-size:10px}
.jr-pin{width:26px;height:26px;font-size:10.5px}
}
@media(max-width:370px){
.jr-rail button{width:22px;height:22px;font-size:9.5px}
.jr-rail ol{padding:4px 5px}
}
/* tablets in portrait: the list is two columns of five rows */
@media(min-width:600px) and (max-width:999.98px) and (min-height:520px){
.jr-cabin.is-live[data-state=intro]{--jr-ph:clamp(260px,calc(var(--jr-wh)*.5),560px)}
}
@media(max-width:600px){
.jr-cabin:not(.is-live){padding-top:calc(var(--hh) + 26px)}
.jr-ft .btn{flex:1 1 auto;justify-content:center}
.jr-stage-num em{margin-left:0}
}
/* phones: the three-step strip is dropped (the sticky button already says what comes next) and its height goes to the reading area */
@media(max-width:599.98px){
.jr-cabin.is-live:not([data-state=intro]){--jr-ph:clamp(210px,calc(var(--jr-wh)*.5),480px)}
.jr-cabin.is-live .jr-ft{margin-top:14px;padding:10px 16px 12px}
.jr-cabin.is-live .jr-ft .btn{padding:11px 18px}
}

/* ---------- PHONE (under 600px): no map. The planet of the chosen situation fills the top; a row of cards sits in a sheet with three steps (collapsed, half, full) that is pulled by its head;
   the services of the situation circle the planet as chips. journey.js sets --jr-sh (the height of the step) and data-snap / data-tab, and adds the tabs inside each situation. ---------- */
@media(max-width:599.98px){
.jr-cabin.is-live[data-layout=phone]{--jr-m:10px;--jr-desk:calc(58px + env(safe-area-inset-bottom,0px));--jr-peek:210px;--jr-sh:210px}
.jr-cabin.is-live[data-layout=phone] .jr-console{--jr-bar:54px;display:flex;flex-direction:column;left:calc(var(--jr-m) + 2px);right:calc(var(--jr-m) + 2px);bottom:calc(var(--jr-desk) + 6px);height:var(--jr-drag,var(--jr-sh));border-color:color-mix(in srgb,var(--planet,var(--accent)) 36%,#ffffff14);border-radius:20px;background:radial-gradient(110% 40% at 50% 0,color-mix(in srgb,var(--planet,var(--accent)) 17%,#0000),#0000 74%),linear-gradient(180deg,#0a1727f8,#050c18fb);-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform 1s cubic-bezier(.18,.92,.28,1.05),height .5s var(--ease),border-color .6s,visibility 0s}
.jr-cabin.is-live[data-layout=phone].is-scenic .jr-console{transition:transform .8s var(--ease),height .5s var(--ease),visibility 0s .8s}
.jr-cabin.is-live[data-layout=phone].is-drag .jr-console{transition:none}
.jr-cabin.is-live[data-layout=phone] .jr-corner{width:14px;height:14px}

/* the head is the handle: a small pill on top, the badge, one line of text, an arrow that says which way the sheet goes */
.jr-cabin.is-live[data-layout=phone] .jr-head{flex:none;touch-action:none;-webkit-user-select:none;user-select:none}
.jr-cabin.is-live[data-layout=phone] .jr-bar{height:var(--jr-bar);gap:11px;padding:9px 14px 0 14px}
.jr-cabin.is-live[data-layout=phone] .jr-bar::before{content:'';position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:color-mix(in srgb,var(--planet,var(--accent)) 55%,#ffffff2e);transition:background .6s}
.jr-cabin.is-live[data-layout=phone] .jr-bar-badge{width:32px;height:32px}
.jr-cabin.is-live[data-layout=phone] .jr-bar-badge .ico{width:17px;height:17px}
.jr-cabin.is-live[data-layout=phone] .jr-bar-txt small{font-size:10px;letter-spacing:.14em}
.jr-cabin.is-live[data-layout=phone] .jr-bar-txt b{margin-top:1px;font-size:14.5px}
.jr-cabin.is-live[data-layout=phone] .jr-bar-chev{margin:0 2px -3px 0;transform:rotate(-135deg)}
.jr-cabin.is-live[data-layout=phone] .jr-bar[aria-expanded=true] .jr-bar-chev{margin:0 2px 3px 0;transform:rotate(45deg)}
.jr-cabin.is-live[data-layout=phone] .jr-size{display:none!important}
.jr-cabin.is-live[data-layout=phone][data-panel] .jr-head::after{left:14px;right:14px}

/* the body: whatever is under the head scrolls; the contact button stays at the foot */
.jr-cabin.is-live[data-layout=phone][data-panel] .jr-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;visibility:inherit;transition:none}
.jr-cabin.is-live[data-layout=phone] .jr-scroll{display:flex;flex:1 1 auto;flex-direction:column;max-height:none;overflow:hidden auto;scrollbar-width:none}
.jr-cabin.is-live[data-layout=phone] .jr-scroll::-webkit-scrollbar{display:none}
.jr-cabin.is-live[data-layout=phone] .jr-back{display:none}
.jr-cabin.is-live[data-layout=phone][data-state] .jr-intro{position:static;flex:none;width:auto;height:auto;margin:0;padding:5px 0 0;overflow:visible;clip-path:none;white-space:normal}
.jr-cabin.is-live[data-layout=phone]:not([data-snap=peek]):not(.is-list) .jr-intro{padding:0}
.jr-cabin.is-live[data-layout=phone] .jr-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the head already says it */
.jr-cabin.is-live[data-layout=phone] .jr-hint{display:none}
.jr-cabin.is-live[data-layout=phone].is-list.is-flat .jr-hint{display:block;padding:0 16px 14px}

/* the row of cards: swipe, stop, and the camera flies to that planet; tap to open it */
.jr-cabin.is-live[data-layout=phone] .jr-menu{position:relative;display:flex;gap:10px;margin:0;padding:3px 16px 10px;overflow:auto hidden;border:0;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.jr-cabin.is-live[data-layout=phone] .jr-menu::-webkit-scrollbar{display:none}
.jr-cabin.is-live[data-layout=phone] .jr-menu li{flex:0 0 78%;min-width:0;scroll-snap-align:center}
.jr-cabin.is-live[data-layout=phone] .jr-menu li::before{content:none;display:none}
.jr-cabin.is-live[data-layout=phone] .jr-pick{grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;height:100%;min-height:74px;padding:9px 12px 9px 10px;border-style:solid;border-width:1px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 30%,#ffffff12);border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--planet,var(--accent)) 13%,#0b1626),#071120);transition:border-color .4s,box-shadow .4s}
.jr-cabin.is-live[data-layout=phone] .jr-pick[aria-current=true]{border-color:color-mix(in srgb,var(--planet,var(--accent)) 72%,#ffffff20);box-shadow:0 0 0 1px color-mix(in srgb,var(--planet,var(--accent)) 28%,#0000),0 8px 22px -10px color-mix(in srgb,var(--planet,var(--accent)) 65%,#0000)}
.jr-cabin.is-live[data-layout=phone] .jr-pick[aria-current=true] .jr-no{background:var(--planet,var(--accent));color:#04101a}
.jr-cabin.is-live[data-layout=phone] .jr-pick .jr-no{margin-top:0}
.jr-cabin.is-live[data-layout=phone] .jr-pick-body small{font-size:10px;line-height:1.3;letter-spacing:.12em}
.jr-cabin.is-live[data-layout=phone] .jr-pick-body b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:2px;font-size:13px;line-height:1.35}
.jr-cabin.is-live[data-layout=phone] .jr-pick-go{position:static;margin:0;font-size:15px;opacity:.85;transform:none}

/* the list ("Danh sách"): every situation one under the other, in the sheet pulled to its top step */
.jr-cabin.is-live[data-layout=phone].is-list .jr-menu{display:block;padding:4px 12px 16px;overflow:visible;touch-action:auto;scroll-snap-type:none}
.jr-cabin.is-live[data-layout=phone].is-list .jr-menu li{margin-top:8px}
.jr-cabin.is-live[data-layout=phone].is-list .jr-pick{height:auto;min-height:0}
.jr-cabin.is-live[data-layout=phone].is-list .jr-pick-body b{-webkit-line-clamp:3;line-clamp:3}
.jr-cabin.is-live[data-layout=phone].is-list .jr-stages{display:none}
.jr-cabin.is-live[data-layout=phone]:not([data-snap=peek]):not(.is-list) .jr-menu{display:none}

/* a situation: only the contact button when the sheet is collapsed; the goal, three tabs and one of three panels when it is pulled up */
.jr-cabin.is-live[data-layout=phone] .jr-stages{display:flex;flex:1 0 auto;flex-direction:column;margin:0}
.jr-cabin.is-live[data-layout=phone] .jr-stage.is-current{display:flex;flex:1 0 auto;flex-direction:column}
.jr-cabin.is-live[data-layout=phone] .jr-stage article{display:flex;flex:1 0 auto;flex-direction:column;padding:0 14px}
.jr-cabin.is-live[data-layout=phone][data-snap=peek] .jr-stage :is(h2,.jr-lede,.jr-tabs,.jr-part){display:none}
.jr-cabin.is-live[data-layout=phone] .jr-stage h2{margin:0 0 9px;padding-top:10px;font-size:16.5px;line-height:1.28;letter-spacing:-.015em}
.jr-cabin.is-live[data-layout=phone] .jr-lede,.jr-cabin.is-live[data-layout=phone] .jr-promise,.jr-cabin.is-live[data-layout=phone] .jr-part h3{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* read by a screen reader; the tab already names the part */
.jr-cabin.is-live[data-layout=phone] .jr-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--edge);border-radius:13px;background:#ffffff08}
.jr-cabin.is-live[data-layout=phone] .jr-tab{min-height:40px;padding:0 6px;border:0;border-radius:10px;background:none;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--text-2);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.jr-cabin.is-live[data-layout=phone] .jr-tab[aria-selected=true]{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#0000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);color:var(--text)}
.jr-cabin.is-live[data-layout=phone] .jr-part{display:none;margin-top:8px}
.jr-cabin.is-live[data-layout=phone]:not([data-snap=peek])[data-tab=look] .jr-look,.jr-cabin.is-live[data-layout=phone]:not([data-snap=peek])[data-tab=rel] .jr-rel,.jr-cabin.is-live[data-layout=phone]:not([data-snap=peek])[data-tab=qa] .jr-qa{display:block}
.jr-cabin.is-live[data-layout=phone] .jr-checks li{padding:8px 0 8px 28px;font-size:13.5px;line-height:1.5}
.jr-cabin.is-live[data-layout=phone] .jr-checks li::before{top:11px}
.jr-cabin.is-live[data-layout=phone] .jr-checks li::after{top:16.5px}
.jr-cabin.is-live[data-layout=phone] .jr-prep{margin-top:8px;padding:8px 12px 9px;font-size:13px;line-height:1.55}
.jr-cabin.is-live[data-layout=phone] .jr-svcs a{min-height:40px;padding:6px 13px;font-size:13.5px}
.jr-cabin.is-live[data-layout=phone] .jr-ask summary{font-size:13.5px}
.jr-cabin.is-live[data-layout=phone] .jr-ask>p{font-size:13px}
.jr-cabin.is-live[data-layout=phone] .jr-ft{margin:auto -14px 0;padding:8px 14px 10px}
.jr-cabin.is-live[data-layout=phone] .jr-ft .jr-cta{min-height:44px;padding:0 16px;font-size:14px}

/* the deck: one row of 40px controls (the number rail is for the map, which phones do not have) */
.jr-cabin.is-live[data-layout=phone] .jr-deck{left:var(--jr-m);right:var(--jr-m);bottom:calc(env(safe-area-inset-bottom,0px) + 9px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"l n r";gap:8px}
.jr-cabin.is-live[data-layout=phone] .jr-nav{grid-area:n;justify-content:center;gap:10px}
.jr-cabin.is-live[data-layout=phone] .jr-tools.is-l{grid-area:l}
.jr-cabin.is-live[data-layout=phone] .jr-tools.is-r{grid-area:r;justify-self:end}
.jr-cabin.is-live[data-layout=phone] .jr-rail{display:none}
.jr-cabin.is-live[data-layout=phone] .jr-arrow{width:40px;height:40px;font-size:24px}
.jr-cabin.is-live[data-layout=phone] .jr-tool{width:40px;height:40px;padding:0;justify-content:center}

/* the services circle the planet: small chips, a flat ring, the far ones dimmed (positions come from journey.js) */
.jr-cabin.is-live[data-layout=phone] .jr-window::before{display:none}
.jr-cabin.is-live[data-layout=phone] .jr-moon{max-width:var(--mw,112px);gap:6px;padding:4px 10px 4px 8px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 46%,#ffffff1c);font-size:11px;line-height:1.25;box-shadow:0 5px 16px -8px #000}
.jr-cabin.is-live[data-layout=phone] .jr-moon span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.jr-cabin.is-live[data-layout=phone] .jr-moon::after{content:'';position:absolute;inset:-9px -2px} /* a touch target of 40px or more */
}
@media(max-width:599.98px) and (min-width:350px){
.jr-cabin.is-live[data-layout=phone] #jr-map{width:auto;padding:0 14px 0 12px}
.jr-cabin.is-live[data-layout=phone] #jr-map span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
@media(max-width:359.98px){
.jr-cabin.is-live[data-layout=phone] .jr-bar-txt b{font-size:13.5px}
}

/* ---------- motion preferences ---------- */
.jr-cabin.is-paused :is(.jr-lock i,.jr-orbfall .jr-orb::before,.jr-bar::after,.jr-bar-badge::before){animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.jr-lock i,.jr-orbfall .jr-orb::before,.jr-bar::after,.jr-bar-badge::before{animation:none}
.jr-lock,.jr-pins,.jr-moons,.jr-arrow,.jr-cabin.is-live .jr-body,.jr-cabin.is-live .jr-console,.jr-cabin.is-live .jr-scroll,.jr-size span,.jr-no,.jr-no::before,.jr-pin,.jr-pin::before,.jr-pick,.jr-pick-go,.jr-tab,.jr-ask,.jr-ask summary::after{transition:none!important}
.jr-cabin.is-live .jr-stage.is-current{animation:none}
.jr-svcs a:hover{transform:none}
}

/* Boarding: a ring of ten situation cards around the Earth (markup .c2 in scripts/pages/journey.mjs, behaviour in journey.js boot()).
   Boarding = the Earth in the middle, a thin dashed orbit and ten cards on it. The card in front is big, flat and easy to read; its neighbours are smaller; the far ones are a number and a label.
   Phones and tablets: the Earth on top with a tilted orbit and ten dots, one large card under it in a swipe-snap row.
   The cabin is pinned to the viewport, so the numbers JS puts in --c2-* (centre of the Earth, its radius, the ellipse of the orbit) are viewport pixels. */

/* ---------- boarding hides the old panel, deck, window furniture and the still of the scene ---------- */
.jr-cabin.is-live[data-intro=ring][data-state=intro]::after{display:none!important}
.jr-cabin.is-live[data-intro=ring][data-state=intro] :is(.jr-console,.jr-deck,.jr-window,.jr-moons,.jr-pins,.jr-lock,.jr-cap,.jr-orbfall){visibility:hidden!important;pointer-events:none!important}

.c2{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.jr-cabin.is-live[data-intro=ring][data-state=intro] .c2,.jr-cabin.is-live[data-intro=ring] .c2.is-leaving{display:block}
.c2 :is(button,a):focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- title ---------- */
.c2-head{position:absolute;left:0;right:0;top:calc(var(--hh) + 14px);z-index:2;padding:0 20px;text-align:center;pointer-events:none}
.c2-head::before{content:'';position:absolute;z-index:-1;inset:-20px -8% -26px;background:radial-gradient(ellipse 52% 50% at 50% 50%,#050b17cc,#050b1700 74%)}
.c2-kicker{display:inline-flex;align-items:center;gap:14px;margin:0;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent,#72eaff)}
.c2[data-mode=ring] .c2-kicker::before,.c2[data-mode=ring] .c2-kicker::after{content:'';width:46px;height:1px;background:linear-gradient(90deg,#0000,currentColor)}
.c2[data-mode=ring] .c2-kicker::after{transform:scaleX(-1)}
.c2-title{margin:10px 0 0;font-size:clamp(36px,min(4.6vw,6.8vh),66px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 26px #02050c,0 0 3px #02050ccc}
.c2-sub{margin:10px auto 0;max-width:660px;text-wrap:balance;font-size:clamp(17px,1.3vw,19px);line-height:1.4;color:#cfe0f2;text-shadow:0 1px 14px #02050c,0 0 3px #02050c99}

/* the Earth stand-in: until the 3D scene is up, and when there is no 3D at all */
.c2-sky{display:none}
.c2-earth{position:absolute;left:calc(var(--c2-cx,50%) - var(--c2-r,0px));top:calc(var(--c2-cy,50%) - var(--c2-r,0px));--os:calc(2*var(--c2-r,0px));--planet:#4aa3ff;z-index:0;box-shadow:0 0 0 1px #ffffff1c,0 0 90px #4aa3ff40;pointer-events:none;transition:opacity .7s}
.c2-earth::before{animation:jr-spin 140s linear infinite}
.jr-cabin.is-live.is-3d .c2-earth{opacity:0}

/* ---------- the orbit: a thin dashed ellipse; the back half goes behind the Earth ---------- */
.c2-stage{position:absolute;inset:0;pointer-events:auto;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.c2.is-drag .c2-stage{cursor:grabbing}
.c2-orbit{position:absolute;left:calc(var(--c2-cx,50%) - var(--c2-rx,0px));top:calc(var(--c2-cy,50%) - var(--c2-ry,0px));width:calc(2*var(--c2-rx,0px));height:calc(2*var(--c2-ry,0px));border:1.5px dashed #72eaff8a;border-radius:50%;pointer-events:none;z-index:1}
.c2-orbit.is-back{clip-path:inset(0 0 50% 0);-webkit-mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--c2-r,0px) - 1px),#000 var(--c2-r,0px));mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--c2-r,0px) - 1px),#000 var(--c2-r,0px))}
.c2-orbit.is-front{clip-path:inset(50% 0 0 0)}
.c2-dotsorbit{display:none}
/* desktop ring: the far half is a faint dashed line, the near half a fine solid line with a soft glow that fades out towards the sides; a thin atmosphere hugs the Earth and a pool of light lies under the card in front */
.c2[data-mode=ring] .c2-orbit{border-width:1px}
.c2[data-mode=ring] .c2-orbit.is-back{border-color:#72eaff85;-webkit-mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--c2-r,0px) - 1px),#000 var(--c2-r,0px)),linear-gradient(90deg,#0000,#000 18%,#000 82%,#0000);-webkit-mask-composite:source-in;mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--c2-r,0px) - 1px),#000 var(--c2-r,0px)),linear-gradient(90deg,#0000,#000 18%,#000 82%,#0000);mask-composite:intersect}
.c2[data-mode=ring] .c2-orbit.is-front{border-style:solid;border-color:#72eaffb0;box-shadow:0 0 26px #72eaff38,inset 0 0 26px #72eaff1c;-webkit-mask-image:linear-gradient(90deg,#0000,#000 16%,#000 84%,#0000);mask-image:linear-gradient(90deg,#0000,#000 16%,#000 84%,#0000)}
.c2[data-mode=ring] .c2-stage::before{content:'';position:absolute;z-index:0;pointer-events:none;left:calc(var(--c2-cx,50%) - var(--c2-r,0px)*1.6);top:calc(var(--c2-cy,50%) - var(--c2-r,0px)*1.6);width:calc(var(--c2-r,0px)*3.2);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,#0000 0 61.5%,#7cccff70 62.5%,#4aa3ff30 65%,#4aa3ff12 76%,#0000 100%)}
.c2[data-mode=ring] .c2-stage::after{content:'';position:absolute;z-index:0;pointer-events:none;left:calc(var(--c2-cx,50%) - 440px);top:calc(var(--c2-ctop,0px) + var(--c2-hf,0px) - 70px);width:880px;height:170px;background:radial-gradient(ellipse at 50% 50%,#4fd8f52e,#4fd8f50d 50%,#0000 72%)}

/* ---------- the cards ---------- */
.c2-cards{position:absolute;inset:0}
.c2-card{position:absolute;left:0;top:0;box-sizing:border-box;width:var(--c2-w,320px);display:flex;flex-direction:column;padding:18px 20px 20px;border:1px solid color-mix(in srgb,var(--planet,#72eaff) 46%,#ffffff14);border-radius:22px;background:radial-gradient(130% 100% at 0% 0%,color-mix(in srgb,var(--planet,#72eaff) 20%,#0000),#0000 62%),linear-gradient(165deg,#12233a,#09131f);box-shadow:0 22px 44px -18px #000e,inset 0 1px 0 #ffffff1f;color:#fff;font-family:inherit;text-align:left;cursor:pointer;transform-origin:50% 40px;will-change:transform,opacity;pointer-events:auto}
.c2-card[data-behind]{pointer-events:none;-webkit-mask-image:radial-gradient(circle at var(--mx,0px) var(--my,0px),#0000 calc(var(--mr,0px) - 1px),#000 var(--mr,0px));mask-image:radial-gradient(circle at var(--mx,0px) var(--my,0px),#0000 calc(var(--mr,0px) - 1px),#000 var(--mr,0px))}
.c2-top{display:flex;align-items:center;gap:14px;min-height:44px}
.c2-orb{--os:44px;flex:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--planet,#72eaff) 75%,#0000),0 0 22px color-mix(in srgb,var(--planet,#72eaff) 50%,#0000)}
.c2-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.c2-no{white-space:nowrap;font-size:12.5px;font-weight:650;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#a9bdd3;font-variant-numeric:tabular-nums}
.c2-of{font-weight:500;color:#7f95ac}
.c2-tag{font-style:normal;font-size:16px;font-weight:800;line-height:1.15;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--planet,#72eaff) 58%,#fff)}
.c2-text{margin:14px 0 0;font-size:23px;font-weight:650;line-height:1.34;color:#fff;overflow-wrap:break-word;text-wrap:pretty}
.c2-go{display:none}

/* the one in front: flat, opaque, easy to read, a big faint number in the corner and one big button */
.c2-card[data-st=front]{border-color:color-mix(in srgb,var(--planet,#72eaff) 88%,#0000);background:radial-gradient(130% 100% at 0% 0%,color-mix(in srgb,var(--planet,#72eaff) 30%,#0000),#0000 64%),linear-gradient(165deg,#15283f,#0a1522);box-shadow:0 0 0 1px color-mix(in srgb,var(--planet,#72eaff) 28%,#0000),0 0 64px -10px color-mix(in srgb,var(--planet,#72eaff) 55%,#0000),0 30px 56px -18px #000f,inset 0 1px 0 #ffffff2e;cursor:default}
.c2-card[data-st=front]::after{content:attr(data-no);position:absolute;right:20px;top:8px;font-size:62px;font-weight:800;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--planet,#72eaff) 34%,#0000);pointer-events:none}
.c2-card[data-st=front] .c2-orb::before{animation:jr-spin 90s linear infinite}
.c2-card[data-st=front] .c2-go{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;min-height:54px;margin-top:18px;padding:0 18px;border:0;border-radius:15px;background:linear-gradient(180deg,#8ef2ff,#52d9f6);box-shadow:0 10px 26px -8px #52d9f6aa,inset 0 1px 0 #ffffff80;color:#04101a;font-family:inherit;font-size:17px;font-weight:750;line-height:1;cursor:pointer;transition:box-shadow .2s,transform .2s,filter .2s}
.c2-card[data-st=front] .c2-go span{display:inline-block;transition:transform .2s}
.c2-card[data-st=front] .c2-go:hover{filter:brightness(1.07);box-shadow:0 12px 32px -6px #52d9f6dd,inset 0 1px 0 #ffffff80}
.c2-card[data-st=front] .c2-go:hover span{transform:translateX(3px)}
.c2-card[data-st=front] .c2-go:active{transform:scale(.985)}

/* its neighbours: number, label and the sentence in at most three lines (the card is drawn at 3/4 size, so 20px reads as 15px) */
.c2-card[data-st=near]{padding-bottom:16px}
.c2-card[data-st=near] .c2-w,.c2-card[data-st=near] .c2-of{display:none}
.c2-card[data-st=near] .c2-no{font-size:20px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
.c2-card[data-st=near] .c2-tag{font-size:16px}
.c2-card[data-st=near] .c2-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin-top:10px;font-size:20px;font-weight:500;line-height:1.35;color:#eef4fb}

/* the far ones: a round pill, a planet, its number and its label (drawn at 0.58 size, so 27px reads as 16px); the pill sits centred on the orbit, the rest of the card is see-through and cannot be clicked */
.c2-card[data-st=far]{align-items:center;padding:10px 0 0;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none}
.c2-card[data-st=far] .c2-top{box-sizing:border-box;gap:11px;min-height:60px;padding:0 24px 0 6px;border:1px solid color-mix(in srgb,var(--planet,#72eaff) 42%,#ffffff14);border-radius:999px;background:#0a1626ea;box-shadow:0 12px 26px -12px #000;pointer-events:auto}
.c2-card[data-behind] .c2-top{pointer-events:none}
.c2-card[data-st=far] .c2-orb{--os:48px;box-shadow:0 0 0 1px color-mix(in srgb,var(--planet,#72eaff) 70%,#0000)}
.c2-card[data-st=far] .c2-meta{flex-direction:row;align-items:baseline;gap:9px}
.c2-card[data-st=far] .c2-w,.c2-card[data-st=far] .c2-of,.c2-card[data-st=far] .c2-text{display:none}
.c2-card[data-st=far] .c2-no{font-size:calc(16px/var(--s,.58));letter-spacing:0;text-transform:none;color:#fff;font-weight:700}
.c2-card[data-st=far] .c2-tag{font-size:calc(15px/var(--s,.58));letter-spacing:.1em;white-space:nowrap}

/* low windows: journey.js sets data-dens (1, then 2) on .c2 while the Earth would come out too small; 1 = compact card in front and no kicker, 2 = also without the hint line under the cards, 3 = also without the sentence under the title */
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-kicker{display:none}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-title{margin-top:0;font-size:clamp(32px,min(4vw,6vh),54px)}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-sub{margin-top:6px;font-size:16px}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front]{padding:14px 18px 16px}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-top{min-height:40px}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-orb{--os:40px}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-text{margin-top:10px;font-size:21px;line-height:1.3}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-go{min-height:46px;margin-top:12px;font-size:16px}
.c2[data-mode=ring]:is([data-dens='1'],[data-dens='2'],[data-dens='3']) .c2-card[data-st=front]::after{font-size:46px;top:8px;right:18px}
.c2[data-mode=ring]:is([data-dens='2'],[data-dens='3']) .c2-hint{display:none}
.c2[data-mode=ring][data-dens='3'] .c2-sub{display:none}
.c2[data-mode=ring]:is([data-dens='2'],[data-dens='3']) .c2-title{font-size:clamp(30px,min(3.6vw,5.4vh),44px)}
.c2[data-mode=ring]:is([data-dens='2'],[data-dens='3']) .c2-sub{margin-top:4px;font-size:15px}
.c2[data-mode=ring]:is([data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-text{margin-top:8px;font-size:20px}
.c2[data-mode=ring]:is([data-dens='2'],[data-dens='3']) .c2-card[data-st=front] .c2-go{min-height:44px;margin-top:10px}

/* ---------- arrows, hint, number bar ---------- */
.c2-arrow{position:absolute;z-index:120;top:calc(var(--c2-ctop,0px) + var(--c2-hf,0px)/2 - 28px);display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid #72eaff73;border-radius:50%;background:#0a1828ee;color:#72eaff;box-shadow:0 12px 30px -10px #000,inset 0 1px 0 #ffffff1a;cursor:pointer;pointer-events:auto;transition:background .2s,color .2s,transform .2s,border-color .2s}
.c2-arrow.is-prev{left:calc(var(--c2-cx,50%) - var(--c2-w,320px)/2 - 76px)}
.c2-arrow.is-next{left:calc(var(--c2-cx,50%) + var(--c2-w,320px)/2 + 20px)}
.c2-arrow:hover{background:#72eaff;border-color:#72eaff;color:#04101a}
.c2-arrow:active{transform:scale(.94)}
.c2-foot{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:130;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.c2-hint{margin:0;padding:0 16px;font-size:15px;line-height:1.35;text-align:center;color:#c8d7e8;text-shadow:0 1px 12px #02050c,0 0 3px #02050c;transition:opacity .5s}
.c2-hint.is-gone{opacity:0}
.c2-nums{display:flex;gap:2px;max-width:calc(100vw - 20px);margin:0;padding:4px;overflow-x:auto;list-style:none;border:1px solid #72eaff3d;border-radius:999px;background:#07111ff0;box-shadow:0 10px 30px -12px #000;scrollbar-width:none;pointer-events:auto}
.c2-nums::-webkit-scrollbar{display:none}
.c2-nums li{flex:none;display:block}
.c2-nums button{display:block;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#d3e1f1;font-family:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,color .2s}
.c2-nums button:hover{background:#72eaff2a;color:#fff}
.c2-nums button[aria-current=true]{background:#72eaff;color:#04101a;font-weight:700;box-shadow:0 0 18px #72eaff99}

/* ---------- coming and going ---------- */
@keyframes c2-in{from{opacity:0;translate:0 26px}}
@keyframes c2-fade{from{opacity:0}}
@keyframes c2-out{to{opacity:0;translate:0 26px}}
@keyframes c2-out-fade{to{opacity:0}}
.c2.is-entering .c2-card{animation:c2-in .6s cubic-bezier(.2,.8,.2,1) calc(var(--c2-wait,.15s) + var(--c2-d,0s)) backwards}
.c2.is-entering :is(.c2-head,.c2-foot,.c2-arrow,.c2-orbit,.c2-dotsorbit){animation:c2-fade .6s ease var(--c2-wait,.15s) backwards}
.c2.is-leaving{pointer-events:none}
.c2.is-leaving .c2-card{animation:c2-out .36s cubic-bezier(.4,0,1,1) forwards}
.c2.is-leaving :is(.c2-head,.c2-foot,.c2-arrow,.c2-orbit,.c2-dotsorbit,.c2-earth){animation:c2-out-fade .3s ease forwards}

/* ---------- phones and tablets (and short landscape windows): the Earth on top, one large card in a swipe-snap row ---------- */
.jr-cabin.is-live[data-intro=ring][data-state=intro] .c2[data-mode=rail],.jr-cabin.is-live[data-intro=ring] .c2.is-leaving[data-mode=rail]{display:flex;flex-direction:column;padding:calc(var(--hh) + 6px) 0 calc(10px + env(safe-area-inset-bottom,0px))}
.c2[data-mode=rail]{--c2-cw:min(calc(100vw - 52px),520px)}
.c2[data-mode=rail] .c2-head{position:relative;top:auto;flex:none;padding:0 16px}
.c2[data-mode=rail] .c2-kicker{font-size:12px}
.c2[data-mode=rail] .c2-title{margin-top:4px;font-size:clamp(26px,8.4vw,52px)}
.c2[data-mode=rail] .c2-sub{margin-top:6px;max-width:34ch;font-size:16px;line-height:1.35}
.c2[data-mode=rail] .c2-sky{display:block;flex:1 1 0;min-height:92px}
.c2[data-mode=rail] .c2-stage{display:contents}
.c2[data-mode=rail] .c2-orbit{transform:rotate(var(--c2-tilt,0deg));transform-origin:50% 50%;border-width:1px;border-color:#72eaff52}
.c2[data-mode=rail] .c2-dotsorbit{display:block}
.c2[data-mode=rail] .c2-dotsorbit i{position:absolute;z-index:2;left:var(--x,0px);top:var(--y,0px);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#72eaff80;pointer-events:none;transition:width .3s,height .3s,margin .3s,background .3s,box-shadow .3s,opacity .3s}
.c2[data-mode=rail] .c2-dotsorbit i.is-lit{width:14px;height:14px;margin:-7px 0 0 -7px;background:#72eaff;box-shadow:0 0 0 3px #72eaff33,0 0 16px #72eaff}
.c2[data-mode=rail] .c2-dotsorbit i.is-hid{opacity:0}
.c2[data-mode=rail] .c2-arrow{display:none}
.c2[data-mode=rail] .c2-cards{position:relative;inset:auto;flex:none;display:flex;gap:10px;padding:4px calc((100vw - var(--c2-cw))/2) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;pointer-events:auto;cursor:default}
.c2[data-mode=rail] .c2-cards::-webkit-scrollbar{display:none}
.c2[data-mode=rail] .c2-card{position:relative;flex:none;width:var(--c2-cw);transform:none;scroll-snap-align:center;scroll-snap-stop:always;opacity:.55;cursor:pointer;transition:opacity .3s}
.c2[data-mode=rail] .c2-card.is-cur{opacity:1}
.c2[data-mode=rail] .c2-card{box-shadow:none}
.c2[data-mode=rail] .c2-card[data-st=front]{box-shadow:0 0 0 1px color-mix(in srgb,var(--planet,#72eaff) 36%,#0000)}
.c2[data-mode=rail] .c2-card[data-st=front] .c2-go{min-height:52px}
.c2[data-mode=rail] .c2-card[data-st=front]::after{font-size:44px;top:10px;right:16px}
.c2[data-mode=rail] .c2-text{font-size:20px}
.c2[data-mode=rail] .c2-foot{position:relative;inset:auto;flex:none;padding:0 10px;gap:4px;z-index:2}
.c2[data-mode=rail] .c2-hint{font-size:15px}
.c2[data-mode=rail] .c2-card:not(.is-cur) .c2-go{pointer-events:none}

/* tablets in portrait */
@media(min-width:600px){
.c2[data-mode=rail] .c2-title{font-size:clamp(40px,6.4vw,60px)}
.c2[data-mode=rail] .c2-sub{max-width:44ch;font-size:19px}
.c2[data-mode=rail] .c2-text{font-size:23px}
.c2[data-mode=rail] .c2-no{font-size:16px}
.c2[data-mode=rail] .c2-tag{font-size:14px}
}
/* short phones: the sub-line gives its room to the Earth */
@media(max-width:599.98px) and (max-height:700px){
.c2[data-mode=rail] .c2-sub{display:none}
}
@media(max-width:599.98px) and (max-height:600px){
.c2[data-mode=rail] .c2-kicker{display:none}
.c2[data-mode=rail] .c2-hint{display:none}
}

/* short landscape windows: the title and the Earth on the left, the cards on the right */
.jr-cabin.is-live[data-intro=ring][data-state=intro] .c2[data-mode=rail][data-land="1"],.jr-cabin.is-live[data-intro=ring] .c2.is-leaving[data-mode=rail][data-land="1"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,min(52%,560px));grid-template-rows:auto minmax(0,1fr) auto;padding-top:calc(var(--hh) + 2px);column-gap:8px}
.c2[data-mode=rail][data-land="1"]{--c2-cw:calc(min(52vw,560px) - 56px)}
.c2[data-mode=rail][data-land="1"] .c2-head{grid-column:1;grid-row:1;text-align:left;padding:0 8px 0 24px}
.c2[data-mode=rail][data-land="1"] .c2-title{font-size:clamp(26px,4.6vw,44px)}
.c2[data-mode=rail][data-land="1"] .c2-sub{margin-left:0;font-size:15px}
.c2[data-mode=rail][data-land="1"] .c2-sky{grid-column:1;grid-row:2/4}
.c2[data-mode=rail][data-land="1"] .c2-cards{grid-column:2;grid-row:1/3;align-self:center;padding-inline:28px}
.c2[data-mode=rail][data-land="1"] .c2-foot{grid-column:2;grid-row:3}
.c2[data-mode=rail][data-land="1"] .c2-text{font-size:18px}
.c2[data-mode=rail][data-land="1"] .c2-card{padding:12px 16px 14px;border-radius:18px}
.c2[data-mode=rail][data-land="1"] .c2-top{min-height:36px;gap:12px}
.c2[data-mode=rail][data-land="1"] .c2-orb{--os:36px}
.c2[data-mode=rail][data-land="1"] .c2-no{font-size:11.5px}
.c2[data-mode=rail][data-land="1"] .c2-tag{font-size:14px}
.c2[data-mode=rail][data-land="1"] .c2-text{margin-top:8px;font-size:17px;line-height:1.3}
.c2[data-mode=rail][data-land="1"] .c2-card[data-st=front] .c2-go{min-height:44px;margin-top:8px;font-size:16px}
.c2[data-mode=rail][data-land="1"] .c2-card[data-st=front]::after{font-size:34px;top:8px;right:14px}

@media(prefers-reduced-motion:reduce){
.c2 *,.c2 *::before{animation:none!important;transition:none!important}
}

/* ---------- desktop only (window 1000px wide and 520px tall or more, JS sets [data-chat=on]): the situation panel is a conversation on the ship's comms channel, the planet sits
   inside one even orbit ring and a click on a chip opens a basic explanation. Phones, tablets and short landscape windows keep the panel above. ---------- */
@keyframes chat-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes chat-led{50%{opacity:.45}}
@keyframes chat-dot{30%{transform:translateY(-4px);opacity:1}60%,100%{transform:none;opacity:.45}}

.jr-cabin[data-chat=on].is-live[data-layout=side]{
  /* ---------- the planet: one orbit ring, bigger chips, no reticle brackets ---------- */
  .jr-lock i{display:none}
  .jr-ring{position:absolute;left:0;top:0;width:calc(var(--orx,0px)*2);height:calc(var(--ory,0px)*2);border:1.5px dashed #e8f4ffb8;border-radius:50%;opacity:var(--ro,0);pointer-events:none;transform:translate(calc(var(--ocx,0px) - var(--orx,0px)),calc(var(--ocy,0px) - var(--ory,0px))) rotate(var(--otilt,0rad));transition:opacity .4s}
  .jr-ring.is-back{opacity:calc(var(--ro,0)*.4);clip-path:inset(0 0 50% 0);-webkit-mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--orad,0px) - 2px),#000 calc(var(--orad,0px) + 2px));mask-image:radial-gradient(circle at 50% 50%,#0000 calc(var(--orad,0px) - 2px),#000 calc(var(--orad,0px) + 2px))}
  .jr-ring.is-front{clip-path:inset(50% 0 0 0);filter:drop-shadow(0 1px 3px #000a) drop-shadow(0 0 8px color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000))}
}
.jr-cabin[data-chat=on].is-live[data-layout=side]{
  .jr-moon{gap:8px;padding:7px 15px 7px 11px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);background:#060f1cec;font-size:13px;font-weight:550;box-shadow:0 10px 24px -10px #000d}
  .jr-moon::before{width:8px;height:8px}
}

.jr-cabin[data-chat=on].is-live[data-layout=side]{
  --ind:38px;
  --ft:80px;
  --ai-bg:#0b1829;
  --ai-edge:#ffffff17;
  --me-bg:linear-gradient(160deg,color-mix(in srgb,var(--planet,var(--accent)) 38%,#0a1528),color-mix(in srgb,var(--planet,var(--accent)) 20%,#0a1528));
  --me-edge:color-mix(in srgb,var(--planet,var(--accent)) 58%,#0000);

  [hidden]{display:none!important}

  /* ---------- the console: an instrument panel with rivets, a comms header and a status light ---------- */
  .jr-console{border-radius:20px;border-color:color-mix(in srgb,var(--planet,var(--accent)) 32%,#ffffff12);background:linear-gradient(180deg,color-mix(in srgb,var(--planet,var(--accent)) 10%,#0000),#0000 20%),linear-gradient(180deg,#081321f6,#040a14f8);box-shadow:0 34px 80px -20px #000e,0 0 0 1px #0007,inset 0 0 0 1px #ffffff0a,inset 0 1px 0 #ffffff1c,0 0 70px -24px color-mix(in srgb,var(--planet,var(--accent)) 50%,#0000)}
  .jr-console::before{-webkit-mask-image:linear-gradient(#000,#0000 28%);mask-image:linear-gradient(#000,#0000 28%)}
  .jr-corner{width:7px;height:7px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4d4ea,#566b88 60%,#26364d);box-shadow:0 0 0 1px #0008;opacity:.9}
  .jr-corner.is-tl{left:8px;top:8px}
  .jr-corner.is-tr{left:auto;right:8px;top:8px}
  .jr-corner.is-bl{left:8px;top:auto;bottom:8px}
  .jr-corner.is-br{left:auto;right:8px;top:auto;bottom:8px}
  .jr-bar{height:70px;gap:14px;padding:0 22px 0 20px}
  .jr-bar::before{content:'';position:absolute;z-index:2;left:52px;top:46px;width:11px;height:11px;border:2px solid #0a1626;border-radius:50%;background:#3ddc97;box-shadow:0 0 9px #3ddc97;animation:chat-led 2.4s ease-in-out infinite}
  .jr-bar-badge{width:46px;height:46px;border:1.5px solid color-mix(in srgb,var(--planet,var(--accent)) 70%,#0000);background:radial-gradient(circle,#0b1a2e 52%,color-mix(in srgb,var(--planet,var(--accent)) 26%,#0000))}
  .jr-bar-badge .ico{display:none}
  .jr-bar-badge::after{content:'';position:absolute;inset:8px;background:url(/onmate-favicon.svg) center/contain no-repeat}
  .jr-bar-txt b{font-size:15px}
  [data-panel=open] .jr-head::after{left:20px;right:20px}

  /* ---------- the thread ---------- */
  .jr-back{padding:8px 16px 0}
  .jr-stage article{padding:4px 16px 0;gap:8px}
  .jr-stage-num{display:flex;flex-wrap:nowrap;order:1;align-self:flex-end;align-items:center;gap:7px;margin:8px 2px 0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--text-4);animation:chat-in .45s var(--ease) .05s both}
  .jr-stage-num .jr-badge{display:none}
  .jr-stage-k{flex-direction:row;gap:0;font-size:10.5px}
  .jr-stage-k span{margin-left:.5em}
  .jr-stage-k b{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--text-2)}
  .jr-stage-num em{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.14em;color:var(--planet,var(--accent))}
  .jr-stage-num em::before{content:'·';margin-right:7px;color:var(--text-4)}
  .jr-stage h2{order:2;align-self:flex-end;max-width:92%;margin:0;padding:12px 17px 13px;border:1px solid var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-size:16px;font-weight:650;line-height:1.42;letter-spacing:-.005em;color:#fff;box-shadow:0 12px 28px -14px color-mix(in srgb,var(--planet,var(--accent)) 80%,#0000);transform-origin:100% 100%;animation:chat-in .5s var(--ease) .12s both}

  /* ONMATE's side: an avatar on the first bubble of each turn, everything indented under it */
  .jr-lede,.jr-rel .jr-svcs,.jr-ask[open]>p:first-of-type,.jr-typing{position:relative}
  .jr-lede::before,.jr-rel .jr-svcs::before,.jr-ask[open]>p:first-of-type::before,.jr-typing::before{content:'';position:absolute;left:calc(var(--ind)*-1);top:0;width:30px;height:30px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000);border-radius:50%;background:#0a1626 url(/onmate-favicon.svg) center/18px no-repeat}
  .jr-lede{order:3;max-width:calc(100% - var(--ind));margin:6px 0 0 var(--ind);padding:11px 15px 12px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);font-size:14px;line-height:1.62;color:var(--text-2);transform-origin:0 100%;animation:chat-in .5s var(--ease) .6s both}

  .jr-part{display:none;margin:0}
  .jr-part:not(.is-said){display:none}
  .jr-part.is-said{display:grid;gap:7px;justify-items:start;animation:chat-in .45s var(--ease) both;transform-origin:0 0}
  .jr-look{order:5}
  .jr-look.is-said{animation-delay:1.1s}
  .jr-also.is-said{animation-delay:.2s}
  .jr-part>:not(h3,.jr-ask){justify-self:stretch;margin-left:var(--ind)}
  .jr-look>h3,.jr-also>h3{position:static;width:auto;height:auto;margin:4px 0 0 var(--ind);overflow:visible;clip-path:none;white-space:normal;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}
  .jr-part .jr-pn{display:none}

  .jr-checks{padding:5px 15px;border:1px solid var(--ai-edge);border-radius:17px;background:var(--ai-bg)}
  .jr-prep{margin-top:0;padding:11px 15px 12px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 38%,#0000);border-radius:17px;background:color-mix(in srgb,var(--planet,var(--accent)) 10%,#0a1424);font-size:13.5px;line-height:1.6}
  .jr-promise{margin-top:0;padding:0 6px;font-size:12.5px;line-height:1.6;color:var(--muted)}

  /* the services: chips inside one bubble, then the way to the whole group */
  .jr-svcs{display:flex;flex-wrap:wrap;gap:7px;padding:11px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg)}
  .jr-svcs li,.jr-svcs li:first-child{border:0}
  .jr-svcs a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 48%,#0000);border-radius:99px;background:color-mix(in srgb,var(--planet,var(--accent)) 10%,#0000);font-size:13px;font-weight:550;transition:background .2s,color .2s,border-color .2s}
  .jr-svcs a::after{content:'↗';margin-left:0;font-size:12px;color:var(--planet,var(--accent));opacity:.85}
  .jr-svcs a:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 22%,#0000);color:var(--text)}
  .jr-svcs a:hover::after{transform:none}
  .jr-all{min-height:44px;margin-top:0;padding:0 16px;border-color:var(--ai-edge);border-radius:99px;background:none;font-size:13.5px}

  /* the questions: quick replies on your side; the one you pick turns into your message and ONMATE answers under it */
  .jr-qa{justify-items:stretch}
  .jr-qa>.jr-ask{justify-self:stretch;margin:0}
  .jr-ask,.jr-ask:last-of-type,.jr-ask[open]{margin:0 0 4px;border:0;background:none}
  .jr-ask summary{width:fit-content;max-width:92%;min-height:0;margin-left:auto;padding:9px 15px 10px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 50%,#0000);border-radius:19px;background:color-mix(in srgb,var(--planet,var(--accent)) 8%,#0000);font-size:13.5px;font-weight:550;line-height:1.4;transition:background .2s,border-color .2s}
  .jr-ask summary::after{display:none}
  .jr-ask summary:hover{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#0000)}
  .jr-ask[open]>summary{border-color:var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-weight:650;color:#fff;animation:chat-in .35s var(--ease) both;transform-origin:100% 100%}
  .jr-ask>p{margin:8px 0 0 var(--ind);padding:0;font-size:13.5px;line-height:1.62}
  .jr-ask>p:not(.jr-ask-links){max-width:calc(100% - var(--ind));padding:11px 15px 12px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);animation:chat-in .4s var(--ease) both;transform-origin:0 0}
  .jr-ask>.jr-ask-links{margin-top:6px;padding:0}
  .jr-also{margin-top:2px}
  .jr-also-chip{min-height:36px;padding:4px 14px 4px 5px;border-color:var(--ai-edge);background:var(--ai-bg)}

  /* ONMATE types, then answers */
  .jr-say{align-self:flex-end;max-width:92%;margin:8px 0 0;padding:9px 16px 10px;border:1px solid var(--me-edge);border-radius:19px 19px 5px 19px;background:var(--me-bg);font-size:14px;font-weight:650;line-height:1.4;color:#fff;scroll-margin-top:12px;transform-origin:100% 100%;animation:chat-in .35s var(--ease) both}
  .jr-typing{align-self:flex-start;display:flex;gap:5px;margin:0 0 0 var(--ind);padding:14px 16px;border:1px solid var(--ai-edge);border-radius:5px 17px 17px 17px;background:var(--ai-bg);animation:chat-in .3s var(--ease) both}
  .jr-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-2);opacity:.45;animation:chat-dot 1s ease-in-out infinite}
  .jr-typing i:nth-child(2){animation-delay:.15s}
  .jr-typing i:nth-child(3){animation-delay:.3s}

  /* quick replies (the old tabs) ride above the composer; the one you use leaves the row */
  .jr-tabs{order:900;position:sticky;top:auto;bottom:var(--ft);z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin:auto -16px 0;padding:26px 16px 9px;background:linear-gradient(180deg,#0000,#050c18 26px)}
  .jr-tabs::before{display:none}
  .jr-tab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px 0 16px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 58%,#0000);border-radius:99px;background:#07111f;font-size:13.5px;font-weight:600;line-height:1.2;color:var(--text);transition:background .2s,border-color .2s,transform .2s}
  .jr-tab::after{content:'›';font-size:16px;line-height:1;color:var(--planet,var(--accent))}
  .jr-tab:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#07111f)}
  .jr-tab[aria-selected=true]{background:#07111f;box-shadow:none;color:var(--text)}
  .jr-tab:hover[aria-selected=true]{background:color-mix(in srgb,var(--planet,var(--accent)) 20%,#07111f)}
  .jr-tab.is-used,.jr-tab[data-tab=look],.jr-tabs.is-done{display:none}

  /* the composer: the one way to write to ONMATE */
  .jr-ft{order:1000;margin:0 -16px;padding:12px 16px 14px;border-top:1px solid var(--ai-edge);background:#050c18}
  .jr-tabs.is-done~.jr-ft{margin-top:auto}
  .jr-ft .jr-cta{min-height:52px;padding:0 8px 0 22px;border-radius:99px}
  .jr-ft .jr-cta span{width:36px;height:36px;border-radius:50%}
}

@media (prefers-reduced-motion:reduce){
  .jr-cabin[data-chat=on] :is(.jr-stage-num,.jr-stage h2,.jr-lede,.jr-part,.jr-ask summary,.jr-ask>p,.jr-say,.jr-typing,.jr-typing i,.jr-bar::before){animation:none!important}
}

/* ---------- a wider panel, and a clear gap between its foot and the window sill ---------- */
@media (min-width:1000px) and (min-height:520px){
  .jr-cabin[data-chat=on].is-live[data-layout=side]{
    --jr-ph:max(200px,calc(var(--jr-wh) - 98px - 24px));
    .jr-console{width:min(calc(100% - 2*var(--jr-m) - 28px),clamp(440px,35vw,510px))}
  }
}

/* ---------- a click on a chip around the planet opens the basic explanation of that service ---------- */
.jr-cabin[data-chat=on].is-live[data-layout=side]{
  .jr-moon{cursor:pointer}
  .jr-moons:has(.is-pick) .jr-moon:not(.is-pick){opacity:calc(var(--mo,0)*.45)}
  .jr-moon.is-pick{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 26%,#060f1c);box-shadow:0 0 0 3px color-mix(in srgb,var(--planet,var(--accent)) 28%,#0000),0 10px 24px -10px #000d}
  .jr-moon-card{position:absolute;left:0;top:0;z-index:6;box-sizing:border-box;width:var(--cw,300px);padding:15px 46px 16px 17px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--planet,var(--accent)) 14%,#0000),#0000 55%),#071322f7;box-shadow:0 24px 54px -18px #000f,0 0 44px -16px color-mix(in srgb,var(--planet,var(--accent)) 60%,#0000);translate:var(--cx,0px) var(--cy,0px);pointer-events:auto;animation:chat-in .28s var(--ease) both}
  .jr-moon-card b{display:block;font-size:15px;font-weight:650;line-height:1.3;color:var(--text)}
  .jr-moon-card p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
  .jr-moon-go{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin-top:12px;padding:0 15px;border:1px solid color-mix(in srgb,var(--planet,var(--accent)) 55%,#0000);border-radius:99px;background:color-mix(in srgb,var(--planet,var(--accent)) 16%,#07111f);font-size:13px;font-weight:600;color:var(--text);text-decoration:none;transition:background .2s,border-color .2s}
  .jr-moon-go:hover{border-color:var(--planet,var(--accent));background:color-mix(in srgb,var(--planet,var(--accent)) 30%,#07111f)}
  .jr-moon-x{position:absolute;right:10px;top:10px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#ffffff12;font-size:18px;line-height:1;color:var(--text-2);cursor:pointer}
  .jr-moon-x:hover{background:#ffffff26;color:var(--text)}
}
@media (prefers-reduced-motion:reduce){
  .jr-cabin[data-chat=on] .jr-moon-card{animation:none!important}
}