/* TASMU Offerings (pearl 03): the live wall (offerings.js, OFFERINGS-CONCEPTS.md).
   Black leads, lilac is the light. The intro film is blended in screen mode so its black disappears into the page;
   the panels are placed and moved by offerings.js (left / top / width / height). Header: the journey page's .j-head. */
.offerings { position: absolute; inset: 0; z-index: 4; visibility: hidden; pointer-events: none; }
.offerings.is-open { pointer-events: auto; }
.offerings .o-bg { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 55% at 60% 55%, rgba(140, 124, 255, 0.07), transparent 70%), linear-gradient(180deg, #060609, #030304); }
.offerings .o-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.offerings .o-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0; visibility: hidden; pointer-events: none;
  /* while the copy sits on the left (beat 2), the film fades out towards it: --mk is where the fade ends, in % */
  --mk: -40;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--mk) * 1%), #000 calc(var(--mk) * 1% + 24%));
  mask-image: linear-gradient(90deg, transparent calc(var(--mk) * 1%), #000 calc(var(--mk) * 1% + 24%)); }
.offerings .o-flash { position: absolute; left: 50%; top: 50%; width: calc(756 * var(--dpx)); height: calc(756 * var(--dpx)); margin: calc(-378 * var(--dpx)) 0 0 calc(-378 * var(--dpx)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(214, 208, 255, 0.55) 18%, rgba(166, 154, 255, 0.15) 45%, transparent 70%); opacity: 0; visibility: hidden; }

/* ---------- the intro's copy ---------- */
.o-beat { position: absolute; left: calc(var(--fx) + 115.2 * var(--dpx)); top: 50%; width: calc(680 * var(--dpx)); transform: translateY(-50%); opacity: 0; visibility: hidden; pointer-events: none; }
.o-kicker { margin: 0; display: flex; align-items: center; gap: calc(14 * var(--dpx)); font-size: calc(14 * var(--dpx)); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lilac-pale); }
.o-kicker::before { content: ""; width: calc(34 * var(--dpx)); height: 1px; background: rgba(214, 208, 255, 0.7); }
.o-kicker span { color: #9e98bd; font-weight: 500; }
.o-h { margin: calc(20 * var(--dpx)) 0 0; font-weight: 300; font-size: calc(84.48 * var(--dpx)); line-height: 1.03; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.o-sweep { background: linear-gradient(100deg, #ffffff 35%, #a69aff 48%, #ffffff 52%, #d6d0ff 62%, #ffffff 75%) 120% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.o-body { margin: calc(26 * var(--dpx)) 0 0; max-width: 32ch; font-size: calc(24.96 * var(--dpx)); line-height: 1.5; color: #d9d5ef; }
.o-impact { margin: calc(22 * var(--dpx)) 0 0; max-width: 34ch; font-size: calc(24.96 * var(--dpx)); line-height: 1.5; color: #bdb8d6; }
.o-impact b { font-weight: 500; color: #e9e6fb; }
.o-crumble { display: inline; }

/* the reveal line, which stays as the wall's title */
.o-b3 { position: absolute; left: calc(var(--fx) + 115.2 * var(--dpx)); top: calc(var(--fy) + 113.4 * var(--dpx)); width: calc(820 * var(--dpx)); opacity: 0; visibility: hidden; pointer-events: none; }
.o-b3 .o-h { margin: 0; font-size: calc(49.92 * var(--dpx)); max-width: 22ch; }
.o-b3 .o-h em { font-style: normal; background: linear-gradient(100deg, #ffffff 0%, #d6d0ff 45%, #a69aff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.o-b3 .o-body { margin: calc(12 * var(--dpx)) 0 0; max-width: 52ch; font-size: calc(20 * var(--dpx)); color: #cfcae6; }
.o-b3 .o-note { margin: calc(10 * var(--dpx)) 0 0; font-size: calc(13 * var(--dpx)); letter-spacing: 0.04em; color: #8f8aa8; }
.o-b3 .o-hint { margin-left: calc(14 * var(--dpx)); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #d6d0ff; animation: o-hint 2.4s ease-in-out infinite; }
@keyframes o-hint { 50% { color: #8f8aa8; } }

/* ---------- v0.14: the call to action under the wall, and the full-screen player it opens ---------- */
.o-cta { position: absolute; left: 50%; bottom: calc(var(--fy) + 40 * var(--dpx)); transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: calc(14 * var(--dpx)); min-height: calc(60 * var(--dpx)); padding: 0 calc(28 * var(--dpx)) 0 calc(12 * var(--dpx));
  border-radius: calc(999 * var(--dpx)); cursor: pointer; white-space: nowrap; opacity: 0; visibility: hidden;
  font: 500 calc(18 * var(--dpx)) var(--font); color: #fff; background: rgba(14, 14, 20, 0.82); border: 1px solid rgba(214, 208, 255, 0.55);
  box-shadow: 0 0 calc(30 * var(--dpx)) rgba(166, 154, 255, 0.3); transition: background 200ms, border-color 200ms, box-shadow 200ms; -webkit-tap-highlight-color: transparent; }
.o-cta:hover, .o-cta:focus-visible { background: rgba(60, 44, 140, 0.6); border-color: #fff; box-shadow: 0 0 calc(44 * var(--dpx)) rgba(166, 154, 255, 0.55); }
.o-cta:active { transform: translateX(-50%) scale(0.97); }
.o-cta-play { width: calc(40 * var(--dpx)); height: calc(40 * var(--dpx)); flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #d6d0ff, #a69aff); box-shadow: 0 0 calc(16 * var(--dpx)) rgba(166, 154, 255, 0.7); }
.o-cta-play svg { width: calc(18 * var(--dpx)); height: calc(18 * var(--dpx)); margin-left: calc(2 * var(--dpx)); fill: #07060d; }
.o-player { position: absolute; inset: 0; z-index: 50; display: none; background: #000; opacity: 0; visibility: hidden; }
.o-player.is-on { display: block; }
.o-player-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.o-player-ph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: none; text-align: center;
  font-size: calc(24 * var(--dpx)); font-weight: 300; color: var(--lilac-pale); padding: calc(18 * var(--dpx)) calc(30 * var(--dpx));
  border: 1px dashed rgba(214, 208, 255, 0.6); border-radius: calc(14 * var(--dpx)); }
.o-player.is-missing .o-player-ph { display: block; }
.o-player-x { position: absolute; top: calc(var(--fy) + 28 * var(--dpx)); right: calc(var(--fx) + 28 * var(--dpx)); z-index: 2;
  width: calc(64 * var(--dpx)); height: calc(64 * var(--dpx)); padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  color: #fff; background: rgba(14, 14, 20, 0.7); border: 1px solid rgba(214, 208, 255, 0.55); transition: background 200ms, border-color 200ms; }
.o-player-x:hover, .o-player-x:focus-visible { background: rgba(60, 44, 140, 0.7); border-color: #fff; }
.o-player-x svg { width: calc(26 * var(--dpx)); height: calc(26 * var(--dpx)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- the wall: six glass screens, every one playing ---------- */
.o-wall { position: absolute; inset: 0; pointer-events: none; }
.o-panel { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  opacity: 0; visibility: hidden; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.o-screen { position: absolute; inset: 0; border-radius: calc(14 * var(--dpx)); overflow: hidden; background: #0d0b18;
  box-shadow: 0 0 0 1px rgba(214, 208, 255, 0.55), 0 0 calc(34 * var(--dpx)) rgba(166, 154, 255, 0.45), 0 calc(20 * var(--dpx)) calc(50 * var(--dpx)) rgba(0, 0, 0, 0.6); transition: box-shadow 300ms; }
.o-panel.is-large .o-screen { border-radius: calc(18 * var(--dpx)); }
.o-screen video, .o-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.o-v-full { opacity: 0; visibility: hidden; }
/* the Cognitive AI Toolkit has no film: its prototype screenshot scrolls slowly, like a screen recording */
.o-shot { background-size: 100% auto; background-position: 50% 0; background-repeat: no-repeat; animation: o-scroll 26s ease-in-out infinite alternate; }
@keyframes o-scroll { to { background-position: 50% 100%; } }
/* the glass over each screen: a lilac edge light and a soft top-left highlight */
.o-glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 30%), linear-gradient(0deg, rgba(166, 154, 255, 0.16), transparent 35%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 0 calc(30 * var(--dpx)) rgba(166, 154, 255, 0.25); }
.o-panel:is(:hover, :focus-visible) .o-screen { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 calc(50 * var(--dpx)) rgba(186, 170, 255, 0.75), 0 calc(20 * var(--dpx)) calc(50 * var(--dpx)) rgba(0, 0, 0, 0.6); }
.o-panel:focus-visible { outline: none; }
/* the name and cue sit inside the glass, on a dark fade at its foot */
.o-label { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(48 * var(--dpx)) calc(16 * var(--dpx)) calc(13 * var(--dpx)); opacity: 0; visibility: hidden; pointer-events: none;
  border-radius: 0 0 calc(14 * var(--dpx)) calc(14 * var(--dpx)); background: linear-gradient(180deg, rgba(3, 3, 6, 0) 0%, rgba(3, 3, 6, 0.78) 45%, rgba(3, 3, 6, 0.92) 100%);
  text-shadow: 0 1px calc(6 * var(--dpx)) rgba(0, 0, 0, 0.8); }
.o-panel.is-large .o-label { padding: calc(64 * var(--dpx)) calc(22 * var(--dpx)) calc(18 * var(--dpx)); border-radius: 0 0 calc(18 * var(--dpx)) calc(18 * var(--dpx)); }
.o-label .o-no { display: block; font-size: calc(12 * var(--dpx)); font-weight: 600; letter-spacing: 0.22em; color: var(--lilac-pale); }
.o-label b { display: block; margin-top: calc(3 * var(--dpx)); font-size: calc(17 * var(--dpx)); font-weight: 500; color: #fff; line-height: 1.2; }
.o-panel.is-large .o-label b { font-size: calc(24 * var(--dpx)); }
.o-label .o-cue { display: block; margin-top: 2px; font-size: calc(13 * var(--dpx)); color: #cfcae6; line-height: 1.35; }
.o-panel.is-large .o-label .o-cue { font-size: calc(15 * var(--dpx)); }

/* ---------- focus: the story beside the open offering ---------- */
.o-focus { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; }
.o-story { position: absolute; left: calc(var(--fx) + 115.2 * var(--dpx)); top: calc(var(--fy) + 124.2 * var(--dpx)); bottom: calc(var(--fy) + 270 * var(--dpx)); width: calc(600 * var(--dpx)); justify-content: center; display: flex; flex-direction: column; pointer-events: auto;
  opacity: 0; visibility: hidden; }
.o-headline { margin: 0; font-weight: 300; font-size: calc(53.76 * var(--dpx)); line-height: 1.06; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.o-meaning { margin: calc(16 * var(--dpx)) 0 0; font-size: calc(17 * var(--dpx)); line-height: 1.5; color: #d9d5ef; }
/* ---------- previous and next, under the open offering (v0.7.3) ---------- */
.o-nav { position: absolute; left: calc(var(--fx) + 816 * var(--dpx)); width: calc(1017.6 * var(--dpx)); top: calc(var(--fy) + 741.96 * var(--dpx)); display: flex; align-items: center; justify-content: space-between;
  gap: calc(16 * var(--dpx)); opacity: 0; visibility: hidden; }
.o-nav button { display: inline-flex; align-items: center; gap: calc(12 * var(--dpx)); min-height: calc(52 * var(--dpx)); padding: 0 calc(22 * var(--dpx)); border-radius: calc(999 * var(--dpx)); cursor: pointer;
  font: 500 calc(16 * var(--dpx)) var(--font); color: #fff; background: rgba(14, 14, 20, 0.7); border: 1px solid rgba(214, 208, 255, 0.4); transition: background 200ms; }
.o-nav button:hover { background: rgba(166, 154, 255, 0.2); }
.o-nav button > span[aria-hidden] { font-size: calc(24 * var(--dpx)); line-height: 1; color: var(--lilac-pale); }
.o-dots { display: flex; gap: calc(10 * var(--dpx)); }
.o-dots i { width: calc(10 * var(--dpx)); height: calc(10 * var(--dpx)); border-radius: 50%; background: rgba(214, 208, 255, 0.3); cursor: pointer; transition: background 200ms, transform 200ms; }
.o-dots i.is-on { background: #fff; transform: scale(1.3); box-shadow: 0 0 calc(10 * var(--dpx)) rgba(214, 208, 255, 0.8); }


/* ---------- v0.9: the offerings prototype folded in ---------- */
.o-ico { width: calc(22 * var(--dpx)); height: calc(22 * var(--dpx)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* on the wall: each panel's line icon, top left of its glass */
.o-picon { position: absolute; left: calc(12 * var(--dpx)); top: calc(10 * var(--dpx)); width: calc(54 * var(--dpx)); height: auto; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 calc(10 * var(--dpx)) rgba(5, 4, 10, 0.95)) drop-shadow(0 0 calc(14 * var(--dpx)) rgba(166, 154, 255, 0.35)); }
.o-panel.is-large .o-picon { width: calc(78 * var(--dpx)); left: calc(16 * var(--dpx)); top: calc(14 * var(--dpx)); }
.o-panel.is-focus .o-picon { opacity: 0; transition: opacity 300ms; }
.o-panel.is-focus .o-screen video { object-fit: contain; background: #08070f; }

/* the story: icon, promise, definition, unlocks */
.o-oicon { width: calc(110 * var(--dpx)); height: auto; margin-left: calc(-6 * var(--dpx)); filter: drop-shadow(0 0 calc(20 * var(--dpx)) rgba(166, 154, 255, 0.35)); }
.o-story .o-headline { margin-top: calc(18 * var(--dpx)); font-size: calc(55.68 * var(--dpx)); }
.o-story .o-meaning { font-size: calc(19 * var(--dpx)); color: #cfcae6; max-width: 34ch; }
.o-unlocks { margin: calc(24 * var(--dpx)) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(12 * var(--dpx)); }
.o-unlocks li { display: flex; align-items: center; gap: calc(14 * var(--dpx)); font-size: calc(19 * var(--dpx)); color: #f2efff; }
.o-ui { width: calc(44 * var(--dpx)); height: calc(44 * var(--dpx)); border-radius: calc(14 * var(--dpx)); display: grid; place-items: center; color: var(--lilac-pale);
  background: rgba(166, 154, 255, 0.1); border: 1px solid rgba(214, 208, 255, 0.28); }

/* the viewer's tabs */
.o-modes { /* v0.11: solid glass, no backdrop blur (performance fix 3) */ position: absolute; left: 0; top: 0; z-index: 6; display: flex; gap: calc(4 * var(--dpx)); padding: calc(5 * var(--dpx)); border-radius: calc(999 * var(--dpx)); opacity: 0; visibility: hidden;
  background: rgba(5, 5, 9, 0.92); border: 1px solid rgba(214, 208, 255, 0.4); }
.o-modes button { min-height: calc(44 * var(--dpx)); padding: 0 calc(20 * var(--dpx)); border: 0; border-radius: calc(999 * var(--dpx)); cursor: pointer; background: none; font: 500 calc(16 * var(--dpx)) var(--font); color: #bdb8d6; transition: background 250ms, color 250ms; }
.o-modes button.is-on { background: #a69aff; color: #07060d; font-weight: 600; }

/* the panes over the screen */
.o-pane { position: absolute; z-index: 5; overflow: hidden; border-radius: calc(18 * var(--dpx)); opacity: 0; visibility: hidden; background: #08070f;
  box-shadow: 0 0 0 1px rgba(214, 208, 255, 0.55), 0 0 calc(34 * var(--dpx)) rgba(166, 154, 255, 0.35), 0 calc(20 * var(--dpx)) calc(50 * var(--dpx)) rgba(0, 0, 0, 0.6); }
.o-browser { border-radius: calc(14 * var(--dpx)); overflow: hidden; background: #0b0c16; box-shadow: 0 calc(24 * var(--dpx)) calc(60 * var(--dpx)) rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 192, 255, 0.25); }
.o-bar { height: calc(30 * var(--dpx)); display: flex; align-items: center; gap: calc(7 * var(--dpx)); padding: 0 calc(14 * var(--dpx)); background: #161830; }
.o-bar i { width: calc(10 * var(--dpx)); height: calc(10 * var(--dpx)); border-radius: 50%; background: #3a3c66; }
.o-bar span { margin-left: calc(12 * var(--dpx)); font-size: calc(12 * var(--dpx)); color: #8f90b8; letter-spacing: 0.04em; }
/* in action: the scenario's photo, its role, and the concept screen with numbered callouts */
.o-act { display: grid; grid-template-columns: 30% 1fr; }
.o-act-photo { background-size: cover; background-position: center; position: relative; }
.o-act-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #08070f); }
.o-act-story { padding: calc(84 * var(--dpx)) calc(30 * var(--dpx)) calc(22 * var(--dpx)) calc(22 * var(--dpx)); display: flex; flex-direction: column; min-width: 0; }
.o-act-who { margin: 0; font-size: calc(13 * var(--dpx)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lilac-pale); }
.o-act-role { margin: calc(8 * var(--dpx)) 0 0; font-size: calc(26 * var(--dpx)); font-weight: 400; color: #fff; }
.o-act .o-browser { margin-top: auto; }
.o-shotwrap { position: relative; }
.o-shotwrap img { display: block; width: 100%; max-height: calc(360 * var(--dpx)); object-fit: cover; object-position: center top; }
.o-co { position: absolute; display: flex; align-items: center; gap: calc(10 * var(--dpx)); transform: translate(calc(-14 * var(--dpx)), -50%); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.o-co.is-l { flex-direction: row-reverse; transform: translate(calc(-100% + calc(14 * var(--dpx))), -50%); }
.o-co.is-b { flex-direction: column; transform: translate(-50%, calc(-14 * var(--dpx))); }
.o-act.is-on .o-co { opacity: 1; }
.o-act.is-on .o-co:nth-child(2) { transition-delay: 0.6s; } .o-act.is-on .o-co:nth-child(3) { transition-delay: 0.95s; } .o-act.is-on .o-co:nth-child(4) { transition-delay: 1.3s; }
.o-pin { width: calc(28 * var(--dpx)); height: calc(28 * var(--dpx)); flex: none; border-radius: 50%; display: grid; place-items: center; background: #a69aff; color: #07060d; font-size: calc(14 * var(--dpx)); font-weight: 700;
  box-shadow: 0 0 0 calc(6 * var(--dpx)) rgba(166, 154, 255, 0.28), 0 0 calc(24 * var(--dpx)) rgba(166, 154, 255, 0.6); }
.o-lbl { padding: calc(6 * var(--dpx)) calc(11 * var(--dpx)); border-radius: calc(10 * var(--dpx)); background: rgba(5, 5, 9, 0.92); border: 1px solid rgba(214, 208, 255, 0.85); font-size: calc(14 * var(--dpx)); color: #fff; white-space: nowrap;
  box-shadow: 0 calc(10 * var(--dpx)) calc(28 * var(--dpx)) rgba(0, 0, 0, 0.5); }

/* the building blocks: cards on the offering's key art, each opening to its three components */
.o-rail { position: absolute; left: calc(var(--fx) + 115.2 * var(--dpx)); right: calc(var(--fx) + 86.4 * var(--dpx)); top: calc(var(--fy) + 826.2 * var(--dpx)); bottom: calc(var(--fy) + 37.8 * var(--dpx)); display: flex; flex-direction: column; opacity: 0; visibility: hidden; }
.o-rail-h { margin: 0 0 calc(10 * var(--dpx)); font-size: calc(13 * var(--dpx)); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lilac-pale); }
.o-rail-h span { margin-left: calc(14 * var(--dpx)); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: #8f8aa8; }
.o-tiles { flex: 1; min-height: 0; display: flex; gap: calc(14 * var(--dpx)); }
.o-tile { position: relative; flex: 1; min-width: 0; overflow: hidden; padding: calc(16 * var(--dpx)) calc(20 * var(--dpx)); border-radius: calc(20 * var(--dpx)); cursor: pointer; text-align: left; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; font: inherit; color: #fff; background-size: cover; background-position: var(--bgx) 35%;
  border: 1px solid rgba(214, 208, 255, 0.35); transition: flex 0.55s var(--ease-out), border-color 300ms; }
.o-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 4, 10, 0.1) 0%, rgba(5, 4, 10, 0.45) 40%, rgba(5, 4, 10, 0.94) 82%); transition: background 400ms; }
.o-tile.is-on { flex: 2.6; border-color: rgba(214, 208, 255, 0.9); box-shadow: 0 0 0 1px rgba(166, 154, 255, 0.3), 0 0 calc(30 * var(--dpx)) rgba(166, 154, 255, 0.25); }
.o-tile.is-on::before { background: linear-gradient(180deg, rgba(5, 4, 10, 0.55), rgba(5, 4, 10, 0.95) 55%); }
.o-tile-no { position: absolute; right: calc(18 * var(--dpx)); top: calc(14 * var(--dpx)); font-size: calc(12 * var(--dpx)); letter-spacing: 0.18em; color: var(--lilac-pale); }
.o-tile-h { display: flex; align-items: center; gap: calc(12 * var(--dpx)); padding-right: calc(34 * var(--dpx)); }
.o-ti { width: calc(44 * var(--dpx)); height: calc(44 * var(--dpx)); flex: none; border-radius: calc(13 * var(--dpx)); display: grid; place-items: center; color: var(--lilac-pale);
  background: rgba(166, 154, 255, 0.14); border: 1px solid rgba(214, 208, 255, 0.35); }
.o-tile-h b { font-size: calc(19 * var(--dpx)); font-weight: 500; line-height: 1.2; }
.o-tile-l { margin-top: calc(10 * var(--dpx)); font-size: calc(15 * var(--dpx)); line-height: 1.4; color: #cfcae6; }
.o-comps { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--dpx)); margin-top: calc(12 * var(--dpx)); }
.o-tile.is-on .o-comps { display: grid; }
.o-tile.is-on .o-tile-l { display: none; }
.o-comp { padding: calc(10 * var(--dpx)) calc(12 * var(--dpx)); border-radius: calc(12 * var(--dpx)); background: rgba(5, 5, 9, 0.6); border: 1px solid rgba(214, 208, 255, 0.2); font-size: calc(13 * var(--dpx)); line-height: 1.3; color: #bdb8d6; }
.o-comp b { display: block; margin-bottom: calc(3 * var(--dpx)); font-size: calc(15 * var(--dpx)); font-weight: 600; color: #fff; }