/* ============================================================================
   Glass Lab — v3, aligned to the "Luminous Editorial" system in style.css.
   Loads after style.css and only adds Lab-specific components.
   ============================================================================ */

/* ---------- hero ---------- */
.lab-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,64px); align-items: center; padding: clamp(48px,6vw,84px) 0 clamp(32px,4vw,56px); }
.lab-status {
  display: inline-flex; align-items: center; gap: 9px; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line-2); padding: 7px 15px; border-radius: 999px; margin-bottom: 24px;
}
.lab-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.lab-status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lab-status.ok .dot { background: var(--ok); }
.lab-status.locked { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.lab-status.locked .dot { background: var(--warn); }
.lab-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 20px; }
.lab-lead { font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; margin-bottom: 32px; }

/* neural-network visual */
.nn-stage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 4 / 3; }
.nn-svg { width: 100%; height: 100%; overflow: visible; }
.nn-link { stroke: var(--line-2); stroke-width: 1.1; }
.nn-node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.4; }
.nn-core { fill: var(--accent); opacity: .85; animation: pulseDot 3.4s ease-in-out infinite; }
.nn-core:nth-child(even) { animation-delay: -1.7s; }
.nn-badge {
  position: absolute; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.nb-1 { top: 4%; right: 0; } .nb-2 { bottom: 6%; left: 0; }

/* ---------- public sections ---------- */
.lab-sec { position: relative; }
.lab-stats { grid-template-columns: repeat(6, 1fr); }

/* ingredient intelligence */
.ii { max-width: 740px; margin: 0 auto; }
.ii-search {
  width: 100%; padding: 15px 18px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.98rem; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ii-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ii-search::placeholder { color: var(--ink-3); }
.ii-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.ii-chip {
  font-family: inherit; font-size: 0.84rem; color: var(--ink-2); cursor: pointer; background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 15px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.ii-chip:hover { border-color: var(--ink); color: var(--ink); }
.ii-chip.on { background: var(--iris-deep); border-color: transparent; color: #fff; }
.ii-detail { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; min-height: 160px; background: var(--surface); }
.ii-empty { color: var(--ink-3); }
.ii-name { font-size: 1.4rem; margin-bottom: 16px; }
.ii-row { display: grid; grid-template-columns: 148px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.93rem; }
.ii-row > span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); padding-top: 3px; font-weight: 600; }
.ii-row.ok > span { color: var(--ok); } .ii-row.warn > span { color: var(--warn); } .ii-row.evi > span { color: var(--accent); }
.ii-row p { color: var(--ink-2); }
.ii-blur { filter: blur(4.5px); user-select: none; opacity: .6; }
.ii-unlock { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.ii-unlock:hover { text-decoration: underline; text-underline-offset: 3px; }

/* skin weather */
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wx-card { text-align: left; }
.wx-ico { font-size: 1.4rem; margin-bottom: 10px; }
.wx-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-3); font-weight: 600; }
.wx-val { font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; margin: 4px 0 14px; }
.wx-val span { font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--accent); margin-left: 7px; }
.wx-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wx-bar i { display: block; height: 100%; border-radius: 999px; background: var(--iris-deep); }

/* experimental preview cards */
.prev-card { position: relative; overflow: hidden; }
.prev-lock { position: absolute; top: 20px; right: 20px; font-size: 0.85rem; opacity: .4; }
.prev-teaser {
  display: block; margin-top: 0; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 0.86rem; color: var(--accent);
  transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.prev-card:hover .prev-teaser, .prev-card:focus-within .prev-teaser { max-height: 72px; opacity: 1; margin-top: 14px; }
@media (hover: none) { .prev-teaser { max-height: 72px; opacity: 1; margin-top: 14px; } }

/* ---------- premium gate ---------- */
.lab-premium { margin-top: 8px; }
.gate-banner { margin-bottom: 8px; }
.gate-locked, .gate-unlocked {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 20px; padding: 28px 30px; border-radius: var(--r-lg);
  background: linear-gradient(150deg, #2A1C33, #1A1224); color: #F6F1F8;
}
.gate-locked::before {
  content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; top: -60%; right: -6%;
  border-radius: 50%; background: radial-gradient(circle, var(--iris-1), transparent 66%);
  opacity: .3; filter: blur(46px);
}
.gate-unlocked { display: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
body.lab-unlocked .gate-locked { display: none; }
body.lab-unlocked .gate-unlocked { display: flex; }
.gate-key { font-size: 1.8rem; flex: none; }
.gate-banner h2 { font-size: 1.24rem; text-align: left; margin: 0 0 4px; color: inherit; }
.gate-banner p { color: rgba(246,241,248,0.74); font-size: 0.92rem; }
.gate-unlocked p { color: var(--ink-2); }
.gate-banner .btn { margin-left: auto; flex: none; }
.gate-locked .btn { background: var(--surface); color: var(--ink); border-color: transparent; }
.gate-locked .btn:hover { background: #fff; }

/* gated feature blur + lock badge */
.lab-feature { position: relative; }
.lab-feature .gated { transition: filter .5s ease; }
body:not(.lab-unlocked) .lab-feature .gated { filter: blur(6px); contain: paint; pointer-events: none; user-select: none; }
.lab-sec, .lab-feature { content-visibility: auto; contain-intrinsic-size: 1px 620px; }
.feat-lock {
  display: none; position: absolute; top: 20px; right: 20px; z-index: 6; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
}
body:not(.lab-unlocked) .feat-lock { display: inline-flex; }

/* AI Skin Coach */
.coach { max-width: 700px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.coach-log { padding: 22px; min-height: 210px; max-height: 370px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; }
.cb { max-width: 80%; padding: 12px 16px; border-radius: var(--r); font-size: 0.9rem; line-height: 1.55; }
.cb.ai { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); }
.cb.me { align-self: flex-end; background: var(--iris-deep); color: #fff; border-bottom-right-radius: 5px; }
.coach-qs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.coach-q {
  font-family: inherit; font-size: 0.82rem; color: var(--ink-2); cursor: pointer; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; transition: border-color .15s ease, color .15s ease;
}
.coach-q:hover { border-color: var(--ink); color: var(--ink); }

/* Future Skin Simulator */
.proto {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  padding: 3px 9px; border-radius: 999px; vertical-align: middle; margin-left: 8px; font-weight: 700;
}
.fs { max-width: 780px; margin: 0 auto; }
.fs-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap; }
.fs-tab {
  font-family: inherit; font-size: 0.86rem; color: var(--ink-2); cursor: pointer; background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 18px; transition: all .16s ease;
}
.fs-tab:hover { border-color: var(--ink); color: var(--ink); }
.fs-tab.active { background: var(--iris-deep); border-color: transparent; color: #fff; }
.fs-stage { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
.fs-gauge { margin: 0 auto; }
#fsRing { stroke: var(--accent); }
.fs-metrics { display: flex; flex-direction: column; gap: 14px; }
.fs-note { font-size: 0.86rem; color: var(--accent); margin-top: 6px; }

/* Skin Intelligence Timeline */
.lab-tl { position: relative; max-width: 700px; margin: 0 auto; padding-left: 56px; }
.lab-tl-svg { position: absolute; left: 16px; top: 8px; width: 24px; height: 0; overflow: visible; }
.lab-tl-svg path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lab-tl-track { stroke: var(--line); }
.lab-tl-draw { stroke: var(--accent); }
.lab-tl-step { position: relative; margin-bottom: 18px; }
.lab-tl-step:last-child { margin-bottom: 0; }
.lab-tl-node {
  position: absolute; left: -28px; top: 28px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-2); transform: translate(-50%,0); z-index: 3;
  transition: background .35s ease, border-color .35s ease;
}
.lab-tl-step.lit .lab-tl-node { background: var(--iris-deep); border-color: transparent; box-shadow: 0 0 0 5px var(--accent-soft); }
.lab-tl-step.lit .card { border-color: var(--line-2); }
.tl-no { position: absolute; top: 22px; right: 26px; font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; color: var(--ink-3); opacity: .4; }

/* Product Match Engine */
.pm { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px; max-width: 840px; margin: 0 auto; align-items: start; }
.pm-pick label { display: block; font-size: 0.72rem; color: var(--ink-3); margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.pm-select {
  width: 100%; padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.95rem; outline: none;
}
.pm-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pm-ing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pm-chip { font-size: 0.78rem; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
.pm-scores { display: flex; flex-direction: column; gap: 16px; }
.pm-row .pm-top { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 7px; }
.pm-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.pm-bar i.g-good { background: var(--ok); }
.pm-bar i.g-warn { background: var(--warn); }
.pm-bar i.g-grad { background: var(--iris-deep); }
.pm-verdict { font-size: 0.9rem; color: var(--ink-2); margin-top: 8px; }

/* Personal Research Reports */
.report-card { position: relative; }
.rep-trend { display: inline-block; font-size: 0.73rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.rep-trend.up { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.rep-trend.flat { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line-2); }

/* Skin Weather Intelligence */
.wxi { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.wxi-row {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); font-size: 0.92rem; color: var(--ink-2);
}
.wxi-row b { color: var(--ink); }
.wxi-ico { font-size: 1.2rem; flex: none; }

/* Experimental wing */
.exp-card { position: relative; }
.exp-tag {
  position: absolute; top: 20px; right: 20px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--line-2); padding: 4px 10px; border-radius: 999px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .lab-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 20px; }
  .nn-stage { max-width: 380px; }
  .lab-stats { grid-template-columns: repeat(3, 1fr); }
  .fs-stage, .pm { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .gate-locked, .gate-unlocked { flex-direction: column; text-align: center; }
  .gate-banner h2 { text-align: center; }
  .gate-banner .btn { margin-left: 0; width: 100%; }
  .wx-grid { grid-template-columns: 1fr; }
  .lab-tl { padding-left: 42px; }
  .lab-tl-svg { left: 11px; }
  .lab-tl-node { left: -22px; }
}
@media (max-width: 460px) { .lab-stats { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .lab-tl-node, .pm-bar i, #fsRing, .lab-tl-draw { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AIRLOCK — the transition played when you enter the live lab console.
   ---------------------------------------------------------------------------
   Two blades seal the viewport, a readout authenticates, then the browser
   navigates. lab-live.html replays it in reverse on arrival so the two pages
   read as one continuous move.

   Everything here animates ONLY transform and opacity, so the whole sequence
   runs on the compositor — no layout, no paint, no per-frame JavaScript. The
   blades are `position: fixed` and promoted once, on activation, rather than
   sitting on a permanent `will-change` layer that would cost memory on every
   page view.
   ═══════════════════════════════════════════════════════════════════════════ */
.airlock{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none; visibility:hidden;
  /* layout/paint/style but NOT size — `contain: strict` adds size containment,
     which makes the box size itself as if empty and can collapse a fixed
     overlay. The isolation benefit here comes from paint anyway. */
  contain:layout paint style;
}
.airlock.on{ visibility:visible; pointer-events:auto; }

/* --- the two blades --------------------------------------------------- */
.al-blade{
  position:absolute; left:-2vw; right:-2vw; height:51vh;
  background:
    radial-gradient(120% 140% at 50% var(--al-o,100%), color-mix(in oklab, var(--iris-1) 34%, transparent) 0%, transparent 62%),
    linear-gradient(var(--al-dir,180deg), var(--bg) 0%, var(--bg-2) 55%, color-mix(in oklab, var(--iris-deep) 22%, var(--bg-2)) 100%);
  transform:translate3d(0,var(--al-y,0),0);
  transition:transform .62s cubic-bezier(.66,0,.2,1);
}
.al-top{ top:0;    --al-y:-101%; --al-dir:180deg; --al-o:100%; }
.al-bot{ bottom:0; --al-y:101%;  --al-dir:0deg;   --al-o:0%;   }
/* the meeting edge catches the light */
.al-blade::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--iris-2),transparent);
  opacity:0; transition:opacity .3s ease .25s;
}
.al-top::after{ bottom:0; } .al-bot::after{ top:0; }

.airlock.seal .al-blade{ --al-y:0%; }
.airlock.seal .al-blade::after{ opacity:.9; }

/* --- centre readout ---------------------------------------------------- */
.al-core{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:1.15rem; text-align:center;
  opacity:0; transform:translate3d(0,10px,0) scale(.97);
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
.airlock.core .al-core{ opacity:1; transform:none; }

.al-ring{ width:76px; height:76px; display:block; }
.al-ring circle{ fill:none; stroke-width:1.6; }
.al-ring .al-track{ stroke:color-mix(in oklab, var(--ink) 12%, transparent); }
.al-ring .al-arc{
  stroke:url(#alGrad); stroke-linecap:round;
  stroke-dasharray:44 176; transform-origin:50% 50%;
}
.airlock.core .al-ring .al-arc{ animation:alSpin 1.05s linear infinite; }
@keyframes alSpin{ to{ transform:rotate(360deg); } }

.al-word{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(1.15rem,3.4vw,1.6rem);
  font-weight:600; letter-spacing:-.01em; color:var(--ink);
}
.al-sub{
  font-size:.735rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.al-bar{
  width:min(230px,54vw); height:2px; border-radius:2px; overflow:hidden;
  background:color-mix(in oklab, var(--ink) 10%, transparent);
}
.al-bar i{
  display:block; height:100%; width:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--iris-1),var(--iris-3));
  transform:scaleX(0); transform-origin:0 50%;
}
.airlock.core .al-bar i{ animation:alFill .78s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes alFill{ to{ transform:scaleX(1); } }

/* Retracting is just removing .seal — the blades fall back to their base
   --al-y (off-screen) and the same transition carries them out. */

@media (prefers-reduced-motion:reduce){
  /* No sealing sequence at all — lab-enter.js navigates immediately and the
     arrival overlay is never mounted. This rule is the belt-and-braces half. */
  .airlock{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS LAB — nav entry, in-page console, and the premium-leak fixes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the Glass Lab nav button ───────────────────────────────────────────────
   Its own pill rather than a plain text link, because the Lab is the premium
   surface and needs to read as a destination, not a menu item. */
.pill-lab{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:999px; text-decoration:none;
  font-size:.83rem; font-weight:650; letter-spacing:.01em;
  color:var(--ink); background:var(--surface);
  border:1px solid transparent; position:relative; isolation:isolate;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), color .18s;
}
/* Gradient ring drawn as a masked border so it can sit on any theme without
   a second background layer bleeding through the pill's rounded corners. */
.pill-lab::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(125deg,var(--iris-1),var(--iris-3) 55%,var(--warm));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.pill-lab:hover{ transform:translateY(-1px); box-shadow:var(--shadow-iris); }
.pill-lab .ico{ width:15px; height:15px; color:var(--iris-2); flex:none; }
.pill-lab .lab-dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:linear-gradient(120deg,var(--iris-1),var(--iris-3));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--iris-1) 18%, transparent);
}

/* ── premium members must never be shown an upsell ──────────────────────────
   These four surfaces were outside body.lab-unlocked entirely, so a paying
   member still saw "Locked instruments", "Unlock full analysis" and a closing
   "Unlock Glass Lab" banner. That was the bug. */
body.lab-unlocked #experimental,
body.lab-unlocked .lab-closing,
body.lab-unlocked .prev-lock,
body.lab-unlocked .feat-lock{ display:none !important; }
body.lab-unlocked .ii-blur{ filter:none; opacity:1; user-select:auto; }

/* Members get a different closing note in place of the sales banner. */
.lab-closing-member{ display:none; }
body.lab-unlocked .lab-closing-member{ display:block; }

/* ── console launcher (top of the Lab page) ─────────────────────────────────
   The console lives on THIS page. The launcher is what sits at the top; the
   console panel expands beneath it. */
.con-launch{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:24px 26px; border-radius:var(--r-lg); margin:0 0 10px;
  /* --con-* are flat COLOURS, deliberately. An earlier version fed --iris-deep
     into color-mix(), but --iris-deep is a linear-gradient() — color-mix only
     accepts colours, so both the background and the shadow were dropped as
     invalid and the launcher rendered as white text on nothing. */
  background:linear-gradient(135deg, var(--con-1) 0%, var(--con-2) 52%, var(--con-3) 100%);
  color:#F7F3FB; border:1px solid transparent;
  box-shadow:0 18px 44px -26px var(--con-shadow);
}
/* slow aurora bloom — one compositor-only keyframe, no JS */
.con-launch::before{
  content:''; position:absolute; z-index:-1; inset:-40%;
  background:
    radial-gradient(38% 46% at 22% 30%, color-mix(in oklab, var(--iris-3) 62%, transparent), transparent 68%),
    radial-gradient(34% 42% at 80% 68%, color-mix(in oklab, var(--warm) 46%, transparent), transparent 68%);
  opacity:.55; filter:blur(30px);
  animation:conDrift 18s ease-in-out infinite alternate;
}
@keyframes conDrift{ to{ transform:translate3d(6%,-5%,0) scale(1.12); } }

.con-launch .cl-ico{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-content:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff;
}
.con-launch .cl-ico .ico{ width:23px; height:23px; }
.cl-copy{ flex:1 1 240px; min-width:0; }
.cl-copy h2{ font-size:1.2rem; text-align:left; margin:0 0 4px; color:#fff; letter-spacing:-.015em; }
.cl-copy p{ font-size:.9rem; color:rgba(247,243,251,.78); margin:0; }
.con-launch .btn{ flex:none; margin-left:auto; background:#fff; color:#221833; border-color:transparent; font-weight:650; }
.con-launch .btn:hover{ background:#fff; filter:brightness(1.04); transform:translateY(-1px); }
.cl-stat{ font-variant-numeric:tabular-nums; font-weight:650; color:#fff; }

/* the console body, revealed in place */
.con-panel{ margin:0 0 34px; }
.con-panel[hidden]{ display:none !important; }
.con-collapse{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.2,.8,.25,1);
}
.con-collapse > div{ overflow:hidden; min-height:0; }
.con-open .con-collapse{ grid-template-rows:1fr; }
@media (prefers-reduced-motion:reduce){ .con-collapse{ transition:none; } }

@media (max-width:640px){
  .con-launch{ padding:20px; gap:14px; }
  .con-launch .btn{ margin-left:0; width:100%; }
}