/* ============================================================
 * style_landing.css — the front door
 * ============================================================
 *
 * This is the first thing anyone sees, and for a lot of people it will be the only
 * thing they judge the product on. The brief was a portal open to everyone, across
 * every border — so it is bright, weightless and calm rather than dark and technical.
 * A black screen full of neon says "engineering tool". An open window says "come in".
 *
 * WHAT IS ACTUALLY NEW HERE (not just "a nicer gradient")
 *
 *   - The background is a live WebGL shader (js/custom/ui/aurora.js), not an image.
 *     292 KB of JPEG became ~4 KB of maths that never repeats and is sharp at any size.
 *   - Real liquid glass: layered translucency, a *specular* rim that catches light on
 *     one edge only, an inner bloom, and a shadow that reads as depth rather than as a
 *     drop-shadow. Backdrop-filter does the refraction; the highlights do the physics.
 *   - `@property`-registered custom properties so gradients and glows can genuinely
 *     ANIMATE, instead of snapping between keyframes.
 *   - Container queries + dvh + safe-area insets, so it is correct on a notched phone
 *     in landscape, which is where most "responsive" designs quietly fall apart.
 *
 * ACCESSIBILITY IS PART OF THE DESIGN, NOT A RETROFIT
 *   - Every interactive element has a visible :focus-visible ring.
 *   - Nothing depends on colour alone.
 *   - prefers-reduced-motion stops the drift and all the ambient animation.
 *   - Touch targets are >= 44px everywhere.
 * ============================================================ */

@property --glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Glass is not one colour — it is a stack. These are the layers. */
  --g-tint:      oklch(100% 0 0 / 0.10);   /* the body of the pane            */
  --g-tint-2:    oklch(100% 0 0 / 0.18);   /* where light pools               */
  --g-rim:       oklch(100% 0 0 / 0.55);   /* the lit edge                    */
  --g-rim-dim:   oklch(100% 0 0 / 0.12);   /* the shaded edge                 */
  --g-shadow:    oklch(30% 0.06 260 / 0.28);

  --ink:         oklch(28% 0.03 260);      /* text ON glass, over a BRIGHT bg  */
  --ink-dim:     oklch(38% 0.02 260 / 0.72);
  --accent:      oklch(62% 0.17 235);
  --accent-warm: oklch(72% 0.15 40);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* the "settles into place" curve  */
}

/* ── The living background ──────────────────────────────────────────────────── */

#aurora-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2;
  /* The shader renders at half res; let the GPU smooth it. It is cloud — nobody
     can tell, and it costs a quarter of the fragment work. */
  image-rendering: auto;
}

/* Fallback when WebGL is unavailable. A real animated gradient — never a blank page.
   Also what everyone sees for the few ms before the first shader frame lands. */
html.aurora-fallback #aurora-bg { display: none; }

#join-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 25%, oklch(88% 0.09 220 / 0.9), transparent 55%),
    radial-gradient(circle at 78% 30%, oklch(86% 0.08 300 / 0.8), transparent 55%),
    radial-gradient(circle at 55% 80%, oklch(92% 0.07 60  / 0.8), transparent 55%),
    radial-gradient(circle at 15% 75%, oklch(90% 0.09 160 / 0.7), transparent 55%),
    oklch(94% 0.02 240);
  opacity: 1;
}
/* Once the shader is live, the CSS layer is only a base coat. */
html:not(.aurora-fallback) #join-page::before { opacity: 0; transition: opacity 0.8s var(--ease); }

@media (prefers-reduced-motion: no-preference) {
  html.aurora-fallback #join-page::before {
    background-size: 200% 200%;
    animation: drift 26s ease-in-out infinite alternate;
  }
}
@keyframes drift {
  0%   { background-position: 0% 0%,   100% 0%,   50% 100%,  0% 100%; }
  100% { background-position: 12% 8%,  88% 12%,   58% 88%,   8% 88%;  }
}

/* ── The landing container ──────────────────────────────────────────────────── */

.entry-container#join-page {
  /* Replaces the old absolutely-positioned, hex-PNG-backed box. */
  position: fixed;
  inset: 0;
  top: auto; left: auto;
  transform: none;
  width: 100%;
  height: 100dvh;
  background: none;              /* the hex-bg.png is gone */

  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));

  container-type: inline-size;
}

/* The card. This is the piece of glass. */
.landing-card {
  position: relative;
  isolation: isolate;

  width: min(440px, 100%);
  padding: 40px 32px 34px;
  border-radius: 28px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;

  /* LIQUID GLASS — the stack, in order:
     1. a translucent body,
     2. a *directional* sheen so light appears to come from one place,
     3. a heavy blur + saturation boost (saturation is what stops glass looking grey),
     4. an inner top highlight and an inner bottom shade — the two together are what
        make it read as a solid pane with thickness rather than a flat rectangle. */
  background:
    linear-gradient(160deg, var(--g-tint-2), var(--g-tint) 40%, var(--g-tint) 100%);
  backdrop-filter: blur(28px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.06);

  border: 1px solid var(--g-rim-dim);

  box-shadow:
    /* the lit rim, top-left */
    inset 1px 1px 0 var(--g-rim),
    /* the shaded rim, bottom-right */
    inset -1px -1px 0 oklch(60% 0.04 260 / 0.18),
    /* inner bloom — light caught inside the pane */
    inset 0 18px 40px -20px oklch(100% 0 0 / 0.7),
    /* the pane floating above the scene */
    0 24px 70px -20px var(--g-shadow),
    0 4px 14px -6px oklch(30% 0.06 260 / 0.18);
}

/* The moving specular streak. This is what separates "glass" from "a blurry box":
   real glass catches a highlight that MOVES. */
.landing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: conic-gradient(from var(--sheen),
    transparent 0deg,
    oklch(100% 0 0 / 0.16) 40deg,
    transparent 90deg,
    transparent 360deg);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .landing-card::before { animation: sheen 14s linear infinite; }
}
@keyframes sheen { to { --sheen: 360deg; } }

/* ── Wordmark ──────────────────────────────────────────────────────────────── */

.landing-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-glyph {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 8px oklch(60% 0.15 235 / 0.35));
}

.landing-title {
  font-size: clamp(24px, 6cqi, 30px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.landing-title strong { font-weight: 650; }

.landing-sub {
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
  max-width: 30ch;
  text-wrap: pretty;
}

/* ── Room input ────────────────────────────────────────────────────────────── */

.input-bar {
  /* Overrides the old fixed %-based bar, which broke on short landscape screens. */
  width: 100%;
  height: auto;
  min-height: 56px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 16px;

  background: oklch(100% 0 0 / 0.28);
  border: 1px solid oklch(100% 0 0 / 0.5);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.6),
    inset 0 -1px 2px oklch(50% 0.04 260 / 0.06),
    0 2px 10px -4px oklch(40% 0.05 260 / 0.14);

  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
}
.input-bar:focus-within {
  background: oklch(100% 0 0 / 0.4);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.7),
    0 0 0 4px oklch(62% 0.17 235 / 0.16),
    0 4px 16px -6px oklch(62% 0.17 235 / 0.3);
}
.input-bar .shadow-only { display: none; }   /* the old faux-shadow div */

.input-bar .input {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 52px;
  padding: 0;

  font-size: 17px;              /* >=16px, or iOS zooms the whole page on focus */
  font-weight: 500;
  font-style: normal;           /* the old italic read as a placeholder, not a value */
  letter-spacing: 0.01em;

  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  caret-color: var(--accent);
}
.room-input::placeholder {
  color: var(--ink-dim);
  font-weight: 400;
}

/* ── Join button ───────────────────────────────────────────────────────────── */

.create-new-room {
  /* Was a 70px PNG (did_eclipse.png) offset with magic numbers. Now a real control. */
  all: unset;
  box-sizing: border-box;

  position: relative;
  top: auto;
  left: auto;

  width: 100%;
  min-height: 56px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  user-select: none;

  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: oklch(99% 0 0);

  background:
    linear-gradient(180deg, oklch(70% 0.16 235), oklch(58% 0.17 240));
  border: 1px solid oklch(78% 0.14 235 / 0.8);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.45),
    0 8px 24px -8px oklch(58% 0.17 240 / 0.55),
    0 2px 6px -2px oklch(40% 0.1 250 / 0.3);

  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
              filter 0.2s var(--ease);
}
.create-new-room::after {
  content: 'Join room';
}
.create-new-room:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.5),
    0 14px 34px -10px oklch(58% 0.17 240 / 0.6),
    0 3px 8px -2px oklch(40% 0.1 250 / 0.35);
}
.create-new-room:active { transform: translateY(0) scale(0.99); }
.create-new-room:focus-visible {
  outline: 3px solid oklch(70% 0.16 235);
  outline-offset: 3px;
}

/* The old poster image is retired — the wordmark carries the identity now, and the
   73 KB PNG was the second-heaviest thing on the page. */
.video-poster { display: none; }
.room-name-submit-button, .mock-submit-button { display: none; }

/* ── Trust line ────────────────────────────────────────────────────────────── */

.landing-trust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-dim);
  text-align: center;
}
.landing-trust svg { flex: 0 0 auto; opacity: 0.8; }

/* ── Install button (bright theme, matches the card) ────────────────────────── */

.pwa-install-btn {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  right: max(18px, env(safe-area-inset-right));
  z-index: 900;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;

  color: var(--ink);
  background: oklch(100% 0 0 / 0.42);
  border: 1px solid oklch(100% 0 0 / 0.6);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.7),
    0 8px 24px -10px var(--g-shadow);

  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.pwa-install-btn:hover { transform: translateY(-2px); background: oklch(100% 0 0 / 0.55); }
.pwa-install-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pwa-install-btn[hidden] { display: none; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

/* Short + wide (phone in landscape) — the case that breaks most layouts. */
@media (max-height: 520px) and (orientation: landscape) {
  .landing-card {
    width: min(560px, 100%);
    padding: 22px 26px;
    gap: 14px;
    border-radius: 22px;
  }
  .landing-glyph { width: 34px; height: 34px; }
  .landing-title { font-size: 21px; }
  .landing-sub   { display: none; }         /* space is the scarcest resource here */
  .input-bar, .create-new-room { min-height: 48px; }
  .input-bar .input { min-height: 46px; font-size: 16px; }
}

@container (max-width: 380px) {
  .landing-card { padding: 30px 22px 26px; border-radius: 24px; }
  .landing-title { font-size: 22px; }
}

/* Backdrop-filter is the one thing that, if missing, makes glass look like fog.
   Where it is unsupported, go opaque rather than illegible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-card { background: oklch(97% 0.01 240 / 0.94); }
  .pwa-install-btn { background: oklch(97% 0.01 240 / 0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-card::before { animation: none; }
  .create-new-room, .input-bar, .pwa-install-btn { transition: none; }
  .create-new-room:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .landing-card {
    background: oklch(99% 0 0 / 0.96);
    border-color: var(--ink);
  }
  .landing-sub, .landing-trust { color: var(--ink); }
}

/* ── Typography ────────────────────────────────────────────────────────────────
   The page was falling back to the browser's default SERIF, which instantly makes
   anything look like a 2005 document. A modern system stack costs zero bytes (no
   webfont fetch, no FOUT, no third party learning who visited) and renders as the
   native UI face on every platform — San Francisco on Apple, Segoe on Windows,
   Roboto on Android. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
             'Helvetica Neue', Arial, sans-serif;
}
#join-page,
#join-page input,
#join-page button,
.landing-card,
.rec-consent-dialog,
.rt-dialog,
#rec-panel,
.pwa-install-btn,
.notif-settings-btn {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.landing-title {
  font-weight: 250;                 /* the contrast IS the identity */
  letter-spacing: -0.025em;
}
.landing-title strong { font-weight: 700; letter-spacing: -0.03em; }

.landing-glyph { width: 46px; height: 46px; }

/* ── Corner controls on the LANDING page ──────────────────────────────────────
   The bell and Install buttons were styled for the dark in-call UI, so on the bright
   landing they read as two black blobs stuck to a pale watercolour — which is exactly
   the mismatch that was called out.

   They are the same components, so rather than duplicating them, they adapt: bright
   glass on the landing, dark glass over video. :has() lets the buttons respond to
   whether the join page is visible, with no JS. */

html:has(#join-page:not([style*="display: none"])) .notif-settings-btn {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 14px;

  color: var(--ink);
  background: oklch(100% 0 0 / 0.42);
  border: 1px solid oklch(100% 0 0 / 0.6);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.7),
    0 8px 24px -10px var(--g-shadow);
}
html:has(#join-page:not([style*="display: none"])) .notif-settings-btn:hover {
  background: oklch(100% 0 0 / 0.58);
  transform: translateY(-1px);
}
html:has(#join-page:not([style*="display: none"])) .notif-settings-btn svg {
  width: 19px; height: 19px;
}

/* The dialogs also sit on the bright landing — give them the same glass, not the
   in-call charcoal. */
html:has(#join-page:not([style*="display: none"])) .rt-dialog .rec-consent-body,
html:has(#join-page:not([style*="display: none"])) .rec-consent-dialog .rec-consent-body {
  background: oklch(99% 0.005 240 / 0.72);
  border: 1px solid oklch(100% 0 0 / 0.7);
  backdrop-filter: blur(30px) saturate(1.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  box-shadow:
    inset 1px 1px 0 oklch(100% 0 0 / 0.8),
    0 30px 80px -24px var(--g-shadow);
  color: var(--ink);
}
html:has(#join-page:not([style*="display: none"])) .rec-consent-title { color: var(--ink); }
html:has(#join-page:not([style*="display: none"])) .rec-consent-text,
html:has(#join-page:not([style*="display: none"])) .rt-desc,
html:has(#join-page:not([style*="display: none"])) .rt-section-label,
html:has(#join-page:not([style*="display: none"])) .rt-rec-status { color: var(--ink-dim); }
html:has(#join-page:not([style*="display: none"])) .rt-name,
html:has(#join-page:not([style*="display: none"])) .rt-review-title { color: var(--ink); }
html:has(#join-page:not([style*="display: none"])) .rt-item {
  background: oklch(100% 0 0 / 0.45);
  border-color: oklch(100% 0 0 / 0.5);
}
html:has(#join-page:not([style*="display: none"])) .rt-item.is-selected {
  background: oklch(70% 0.14 235 / 0.18);
  border-color: var(--accent);
}
html:has(#join-page:not([style*="display: none"])) .rt-play,
html:has(#join-page:not([style*="display: none"])) .rt-choose,
html:has(#join-page:not([style*="display: none"])) .rt-add-btn,
html:has(#join-page:not([style*="display: none"])) .rt-close,
html:has(#join-page:not([style*="display: none"])) .rt-review-name {
  color: var(--ink);
  background: oklch(100% 0 0 / 0.55);
  border-color: oklch(60% 0.03 260 / 0.22);
}
html:has(#join-page:not([style*="display: none"])) .rec-consent-caveat {
  background: oklch(85% 0.06 85 / 0.28);
  color: var(--ink);
  border-left-color: oklch(72% 0.15 70);
}

/* ── iOS install: show, don't tell ────────────────────────────────────────────
   Apple provides no install API, so the only honest thing a web page can do is guide
   the user. But a paragraph of prose is a bad way to guide anyone.

   So instead: a little phone with the app icon already on its home screen — the
   OUTCOME, rendered — above three numbered steps with the real glyphs. You can see
   where you are going before you start. */

.pwa-hero {
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.pwa-phone {
  width: 92px;
  height: 132px;
  border-radius: 18px;
  padding: 7px;
  background: linear-gradient(160deg, oklch(45% 0.02 260), oklch(28% 0.02 260));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.25),
    0 14px 32px -12px oklch(30% 0.06 260 / 0.5);
  position: relative;
}
/* The notch. One tiny detail, but it is what makes the shape read as "iPhone"
   rather than "rounded rectangle". */
.pwa-phone::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  translate: -50% 0;
  width: 30px; height: 5px;
  border-radius: 0 0 6px 6px;
  background: oklch(20% 0.01 260);
  z-index: 2;
}

.pwa-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(170deg, oklch(88% 0.07 230), oklch(84% 0.09 280));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pwa-phone-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: oklch(18% 0.02 260);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -3px oklch(20% 0.05 260 / 0.5);
  /* Land on the home screen — the whole point of the dialog, animated once. */
  animation: pwa-land 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
.pwa-phone-icon svg { width: 30px; height: 30px; }

@keyframes pwa-land {
  from { transform: translateY(-16px) scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.pwa-phone-label {
  font-size: 7.5px;
  font-weight: 600;
  color: oklch(25% 0.02 260);
  letter-spacing: 0.01em;
}

.pwa-steps-v2 {
  list-style: none;
  margin: 4px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 13px;
  background: oklch(100% 0 0 / 0.4);
  border: 1px solid oklch(100% 0 0 / 0.5);
}

.pwa-step-n {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: oklch(99% 0 0);
  background: var(--accent, oklch(62% 0.17 235));
}

.pwa-step-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink, oklch(28% 0.03 260));
}
.pwa-step-body strong { font-weight: 650; }

.pwa-step-sub {
  display: block;
  font-size: 11.5px;
  color: var(--ink-dim, oklch(38% 0.02 260 / 0.72));
  margin-top: 2px;
}

.pwa-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim, oklch(38% 0.02 260 / 0.72));
  background: oklch(80% 0.09 160 / 0.22);
  border-left: 3px solid oklch(65% 0.14 160);
  border-radius: 0 9px 9px 0;
  padding: 10px 12px;
  margin: 0 0 16px;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-phone-icon { animation: none; }
}

/* The install dialog reuses .rec-btn-allow, which is the RECORDING red. On a
   "put this app on your phone" dialog, red reads as danger/stop — precisely the wrong
   signal for the friendliest action in the product. Recolour it to the brand blue.
   (Scoped to the install dialog so the recorder's consent Allow button, where red is
   correct and deliberate, is untouched.) */
.pwa-ios .rec-btn-allow {
  background: linear-gradient(180deg, oklch(70% 0.16 235), oklch(58% 0.17 240));
  border-color: oklch(78% 0.14 235 / 0.8);
  color: oklch(99% 0 0);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.45),
    0 8px 22px -8px oklch(58% 0.17 240 / 0.5);
}
.pwa-ios .rec-btn-allow:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, oklch(74% 0.16 235), oklch(62% 0.17 240));
}

/* And make the install dialog's glass properly bright, not battleship grey. */
.pwa-ios {
  background: oklch(98% 0.008 240 / 0.82);
  border: 1px solid oklch(100% 0 0 / 0.75);
  backdrop-filter: blur(32px) saturate(1.9);
  -webkit-backdrop-filter: blur(32px) saturate(1.9);
  box-shadow:
    inset 1px 1px 0 oklch(100% 0 0 / 0.9),
    0 30px 80px -24px oklch(30% 0.06 260 / 0.4);
}
.pwa-ios .rec-consent-title { color: oklch(24% 0.03 260); }
.pwa-ios .rec-consent-text  { color: oklch(38% 0.02 260 / 0.8); }