/* ============================================================================
   ROSPUEK ZONE DESIGN SYSTEM  ·  rospuek-zone.css
   ----------------------------------------------------------------------------
   ONE visual identity for every Rospuek tab and zone.

   Derived (not invented) from the two approved sources:
     1. THE MAIN CHAT      public/index.html  — the "OBSIDIAN · CHROME · RUNE"
                           block: obsidian ground, silver stroke, Cinzel display
                           over Spectral body, and the bare silver rune mark
                           (.mark/.rune/.ring) with two slow orbit rings.
     2. DIRECTION A        public/zew-deploy/shared.css — the approved
                           zachedwardsllc.com front door: same rune (.zrk), same
                           Cinzel/Spectral pairing, same obsidian + silver.

   HOW IT WORKS — read this before editing a zone page.
   This sheet is linked LAST in a zone's <head>, after that page's own <style>.
   It re-declares :root, so its tokens win. It deliberately aliases EVERY token
   name already used across the zones (--txt/--ink, --mut/--muted, --card/--panel,
   --good/--ok, --gold/--accent ...) onto the one obsidian palette. That means a
   page's existing rules — `background:var(--card)`, `color:var(--mut)` — recolour
   themselves with zero markup changes and zero edits to that page's own CSS.

   So: to bring a new zone onto the system, add ONE <link> to this file. Only add
   a per-page bridge block when that page hardcodes a colour instead of using a
   token (see the ZONE BRIDGES note at the bottom).

   PALETTE RECONCILIATION (chat vs Direction A) — the conflict and the ruling:
   the chat carries a blue accent (--glow #8ab4ff), Direction A carries none and
   leans cream/silver. Ruling: SILVER IS THE BRAND, BLUE IS A STATE. Silver
   (#cfd6df / #eef2f6) does all identity, headings, buttons and rules. Blue is
   allowed ONLY as a live/interactive signal — links, focus rings, "working now".
   Nothing decorative is blue. That keeps the chat feeling alive and keeps the
   zones matching Direction A's calm.

   STYLING ONLY. This file must never change layout, behaviour or markup.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* -- obsidian ground ---------------------------------------------------- */
  --rz-bg:        #06090b;   /* page ground — the chat's html background       */
  --rz-panel:     #0e1113;   /* raised surface (cards, sheets, rails)          */
  --rz-panel2:    #15181b;   /* inset surface (inputs, wells, tracks)          */
  --rz-line:      #262b30;   /* hairline rule                                  */
  --rz-line-soft: rgba(210,225,240,.12);

  /* -- silver stroke ------------------------------------------------------ */
  --rz-txt:       #dfe5eb;   /* body copy                                      */
  --rz-muted:     #7f8992;   /* secondary copy                                 */
  --rz-silver:    #cfd6df;   /* the brand accent — headings, marks, rules      */
  --rz-bright:    #f3f6f9;   /* highlight silver — hover, emphasis             */
  --rz-rune:      #e3e8ee;   /* the rune glyph itself                          */

  /* -- state (never decorative) ------------------------------------------- */
  --rz-glow:      #8ab4ff;   /* live / focus / interactive ONLY                */
  --rz-ok:        #8bd5b0;
  --rz-warn:      #e7c07a;
  --rz-bad:       #e08a84;

  /* -- type --------------------------------------------------------------- */
  --rz-display:  'Cinzel', Georgia, serif;
  --rz-body:     'Spectral', Georgia, 'Segoe UI', system-ui, serif;

  /* ======================================================================
     ALIASES — the zones' own token names, re-pointed at the palette above.
     This is what recolours the existing pages without touching their CSS.
     ====================================================================== */
  --bg:      var(--rz-bg);
  --panel:   var(--rz-panel);
  --panel2:  var(--rz-panel2);
  --card:    var(--rz-panel);
  --surface: var(--rz-panel);
  --line:    var(--rz-line);
  --border:  var(--rz-line);
  --bar:     var(--rz-panel2);

  --txt:     var(--rz-txt);
  --text:    var(--rz-txt);
  --ink:     var(--rz-txt);
  --fg:      var(--rz-txt);
  --muted:   var(--rz-muted);
  --mut:     var(--rz-muted);
  --dim:     var(--rz-muted);
  --sub:     var(--rz-muted);

  --accent:  var(--rz-silver);
  --accent2: var(--rz-bright);
  --bright:  var(--rz-bright);
  --gold:    var(--rz-silver);   /* the old gold/amber zones fold into silver  */
  --gold2:   var(--rz-bright);
  --brand:   var(--rz-silver);

  --glow:    var(--rz-glow);
  --ok:      var(--rz-ok);
  --good:    var(--rz-ok);
  --green:   var(--rz-ok);
  --warn:    var(--rz-warn);
  --bad:     var(--rz-bad);
  --err:     var(--rz-bad);

  /* second-tier names found across the zones (money, leadengine, playlists,
     economics, facetime). Colour tokens only — --font/--mono/--sans/--serif/
     --ease/--wrap are deliberately NOT aliased, they aren't colours. */
  --line2:    #313841;
  --hair:     var(--rz-line);
  --hair-2:   #313841;
  --chip:     var(--rz-panel2);
  --pill:     var(--rz-panel2);
  --glass:    rgba(20,23,26,.92);
  --glass-2:  rgba(12,14,16,.92);
  --btn:      var(--rz-panel2);
  --btn-on:   var(--rz-silver);
  --mut-2:    #6a737c;
  --bone:     var(--rz-txt);
  --gold-2:   var(--rz-bright);
  --gold-soft:rgba(207,214,223,.12);
  --gold-dim: #8d959e;
  --amber:    var(--rz-warn);
  --green2:   #6fc39c;
  --red:      var(--rz-bad);
  --pay:      var(--rz-ok);
  /* categorical hues keep their meaning but desaturate into the system */
  --blue:     var(--rz-glow);
  --violet:   #b0a8d0;
}

/* ------------------------------------------------------- 2. OBSIDIAN GROUND */
/* Applied via the token so pages that already say `background:var(--bg)` need
   nothing. `.rzground` is the opt-in for pages that hardcode a background. */
html{ background:var(--rz-bg); -webkit-text-size-adjust:100%; }

body.rzground,
.rzground{
  /* min-height keeps the ground painting to the fold on short pages — without it
     the gradient stops at the content box and leaves a visible seam. */
  min-height:100vh;
  background:
    radial-gradient(1100px 640px at 50% -14%, rgba(180,200,230,.055), transparent 62%),
    radial-gradient(820px 560px at 88% 118%, rgba(120,150,200,.05), transparent 60%),
    linear-gradient(180deg,#08090a,#050607);
  background-attachment:fixed;
}
/* the fine obsidian grain from the chat */
body.rzground::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12)        0 1px, transparent 1px 4px);
}

/* ------------------------------------------------------------- 3. TYPOGRAPHY */
body{
  font-family:var(--rz-body);
  color:var(--rz-txt);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.rzdisplay{
  font-family:var(--rz-display);
  font-weight:500;
  color:#e9edf2;
  text-shadow:0 1px 0 rgba(0,0,0,.7), 0 0 16px rgba(190,210,235,.14);
}
h1{ letter-spacing:.20em; text-transform:uppercase; }
h2{ letter-spacing:.16em; text-transform:uppercase; }
h3{ letter-spacing:.10em; }
h4,h5,h6{ font-family:var(--rz-display);font-weight:500;letter-spacing:.06em;color:#dbe1e8 }

/* the Direction A eyebrow — a rule then small caps */
.rzeyebrow{
  font:500 10px var(--rz-display);letter-spacing:.25em;text-transform:uppercase;color:#a9b4bf;
}
.rzeyebrow::before{
  content:'';display:inline-block;width:23px;border-top:1px solid #68737e;margin:0 10px 3px 0;
}

/* ------------------------------------------------------- 4. THE RUNE MARK */
/* The bare silver glyph + two slow orbit rings, exactly as the CHAT renders it
   (.mark/.rune/.ring). This is NOT the favicon — the favicon is the same glyph
   inside a dark rounded tile, and using it here was rejected once already.
   Markup:
     <span class="rk">
       <svg class="rkglyph" viewBox="0 0 40 56" fill="none" stroke="currentColor"
            stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
         <path d="M20 6V50"/><path d="M20 22 30 32 20 42 10 32Z"/>
         <path d="M13 44 20 51 27 44"/><path d="M15 9H25"/>
       </svg><i class="rkring"></i><i class="rkring rkoring"></i>
     </span>                                                                  */
/* Sized in em so the mark scales with whatever heading it sits in. The right
   margin has to clear the -7px outer orbit AND leave a real gap, or the ring
   crowds the first letter (it did, on the money masthead). */
.rk{
  position:relative;width:1.3em;height:1.3em;flex:0 0 1.3em;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 .52em 0 .27em;vertical-align:-.28em;
}
.rk .rkglyph{
  height:1.15em;width:auto;color:var(--rz-rune);
  filter:drop-shadow(0 0 6px rgba(210,224,240,.35));
  /* headings that paint gradient text set -webkit-text-fill-color:transparent,
     which would swallow the glyph — the mark always stays solid silver. */
  -webkit-text-fill-color:currentColor;
}
.rk .rkring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(205,214,224,.28);
  animation:rkspin 16s linear infinite;
}
.rk .rkring::after{
  content:'';position:absolute;top:-.07em;left:50%;width:.15em;height:.15em;margin-left:-.075em;
  border-radius:50%;background:#eaf0f6;box-shadow:0 0 6px #cdd6e0;
}
/* the outer orbit is inset in em too — at a 19px heading a fixed -7px made the
   ring swing out far enough to sit on the first letter. */
.rk .rkoring{
  inset:-.21em;border-color:rgba(205,214,224,.12);animation-duration:26s;
}
.rk .rkoring::after{
  width:.11em;height:.11em;margin-left:-.055em;top:-.055em;background:#c2ccd8;box-shadow:0 0 5px #aeb9c6;
}
@keyframes rkspin{ to{ transform:rotate(360deg) } }

/* the standard zone masthead: rune + zone name, with a hairline under it */
.rzbar{
  display:flex;align-items:center;gap:2px;
  padding:16px 0 14px;margin:0 0 22px;
  border-bottom:1px solid var(--rz-line);
}
.rzbar .rztitle{
  font-family:var(--rz-display);font-weight:500;font-size:15px;
  letter-spacing:.26em;text-transform:uppercase;color:#e9edf2;
  text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 16px rgba(190,210,235,.16);
}
.rzbar .rzspacer{ flex:1 }
.rzbar .rzback{
  font-family:var(--rz-body);font-size:12.5px;color:var(--rz-muted);
  text-decoration:none;border:1px solid var(--rz-line);border-radius:8px;padding:6px 12px;
  transition:border-color .18s, color .18s;
}
.rzbar .rzback:hover{ color:var(--rz-bright);border-color:#5b6573 }

/* --------------------------------------------------------- 5. CONTROLS */
/* Obsidian button with a silver hairline — the chat's select/button treatment. */
button, select, .rzbtn{
  font-family:var(--rz-body);
  background:linear-gradient(180deg,#141821,#0e1116);
  color:var(--rz-txt);
  border:1px solid #2a3036;
  letter-spacing:.02em;
  transition:border-color .18s, box-shadow .18s, filter .18s;
}
button:hover, select:hover, .rzbtn:hover{
  border-color:#5b6573;
  box-shadow:0 0 0 1px rgba(160,180,205,.22);
}
button:focus-visible, select:focus-visible, a:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:none;
  border-color:var(--rz-glow);
  box-shadow:0 0 0 2px rgba(138,180,255,.28);   /* blue = state, per the ruling */
}

/* the primary action — polished silver, Cinzel, uppercase (chat .send +
   Direction A .button are the same object; this is the reconciled form) */
.rzprimary, button.rzprimary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;
  background:linear-gradient(180deg,#f4f7fa,#bac4cf);
  color:#0b1015;
  border:1px solid #cdd6e0;border-radius:8px;
  font:500 11px var(--rz-display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px #fff;
  cursor:pointer;
}
.rzprimary:hover, button.rzprimary:hover{
  background:linear-gradient(180deg,#ffffff,#cfd8e2);
  filter:brightness(1.03);
  box-shadow:inset 0 1px #fff;
}
.rzghost{
  background:#0d1012;color:var(--rz-txt);border:1px solid var(--rz-line);box-shadow:none;
}

/* Loud legacy primaries — the green/amber gradient CTAs the zones grew
   independently — resolve to the one silver action. Same geometry, new finish. */
button.primary, button.act.primary, .btn.primary, .btn-primary,
button.cta, .act.go, button.save{
  background:linear-gradient(180deg,#f4f7fa,#bac4cf) !important;
  color:#0b1015 !important;
  border:1px solid #cdd6e0 !important;
  box-shadow:inset 0 1px #fff;
  font-family:var(--rz-display);font-weight:500;letter-spacing:.10em;text-transform:uppercase;
}
button.primary:hover, button.act.primary:hover, .btn.primary:hover, .btn-primary:hover,
button.cta:hover, .act.go:hover, button.save:hover{
  background:linear-gradient(180deg,#ffffff,#cfd8e2) !important;
  transform:none;
}

/* inputs */
input, textarea, select{
  font-family:var(--rz-body);
}
input, textarea{
  background:#0b0e11;color:var(--rz-txt);border:1px solid #262d33;
}
input:focus, textarea:focus{ border-color:#5b6573 }

/* Links — the one sanctioned blue. :visited has to be stated too: several zones
   only declare `a{color:inherit}`, which lets the browser's default purple show
   through on any link the owner has already opened (it did, on the Leads
   header). Silver/blue system, never purple.

   :where() is load-bearing here. `:link` and `:visited` are pseudo-CLASSES, so
   `a:link` scores (0,1,1) — the same as a zone's own `.gate a` — and being
   later it wins. That is exactly what turned the dark label on the Playlists
   sign-in button blue-on-silver (verified: computed colour was the glow blue
   while `.gate a` asked for #171208). Wrapping them in :where() drops the whole
   selector to (0,0,1), the same as plain `a`: still beats the UA default
   purple, still loses to anything the zone styled itself. */
a, a:where(:link), a:where(:visited){ color:var(--rz-glow) }
a:hover, a:where(:link, :visited):hover{ color:#aecbff }

/* --------------------------------------------------------- 6. SURFACES */
/* Cards keep whatever geometry the page gave them; only the finish changes. */
.rzcard{
  background:linear-gradient(180deg,rgba(20,23,26,.92),rgba(12,14,16,.92));
  border:1px solid var(--rz-line);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
}
.rzpill{
  font-size:12px;background:#0c0e10;border:1px solid #2a3036;border-radius:20px;
  padding:5px 12px;color:var(--rz-bright);letter-spacing:.04em;
}
hr{ border:0;border-top:1px solid var(--rz-line) }

/* ------------------------------------------------------ 7. ACCESSIBILITY */
@media (prefers-reduced-motion:reduce){
  .rk .rkring{ animation:none }
}

/* ============================================================================
   ZONE BRIDGES
   Per-page fixes for zones that hardcode a colour instead of using a token.
   Each is scoped by a body class so it can only ever affect that one zone.
   ========================================================================== */

/* how-i-work — hardcodes a navy radial on html,body */
body.rz-howiwork,
html:has(body.rz-howiwork){
  background:
    radial-gradient(1100px 640px at 50% -14%, rgba(180,200,230,.055), transparent 62%),
    linear-gradient(180deg,#08090a,#050607) !important;
  background-attachment:fixed !important;
}
body.rz-howiwork .n{
  background:rgba(207,214,223,.10);color:var(--rz-bright);
  border:1px solid rgba(207,214,223,.24);
  font-family:var(--rz-display);font-weight:500;
}
body.rz-howiwork .callout{
  background:rgba(138,180,255,.06);border:1px solid rgba(138,180,255,.20);
  border-left:3px solid var(--rz-glow);color:#cfdcec;
}
body.rz-howiwork .terms{ background:linear-gradient(180deg,#101315,#0b0e10) }
body.rz-howiwork .terms li::before{ background:var(--rz-silver) }
body.rz-howiwork .lead, body.rz-howiwork strong, body.rz-howiwork .terms li b{ color:var(--rz-bright) }
body.rz-howiwork p{ color:#c9d2dc }
body.rz-howiwork .intro{ color:#ccd5df }
body.rz-howiwork h1{ letter-spacing:.06em;text-transform:none }

/* previews / forge — navy panes and blue buttons */
body.rz-slate .pane,
body.rz-slate iframe + *,
body.rz-slate textarea{ background:#0b0e11 }
body.rz-slate .pane{ border-color:var(--rz-line) }
body.rz-slate button{ background:linear-gradient(180deg,#141821,#0e1116);border-color:#2a3036 }
body.rz-slate button:hover{ background:linear-gradient(180deg,#191e28,#111419);border-color:#5b6573 }
body.rz-slate .pick{ border-color:var(--rz-ok);color:var(--rz-ok) }
body.rz-slate a.open{ color:var(--rz-glow) }
body.rz-slate .pill.training{ color:#0b0e14;background:var(--rz-warn);border-color:var(--rz-warn) }
body.rz-slate .pill.live{ color:#0b0e14;background:var(--rz-ok);border-color:var(--rz-ok) }
body.rz-slate .pill.graduated,
body.rz-slate .pill.evaluating{ color:#0b0e14;background:var(--rz-silver);border-color:var(--rz-silver) }
body.rz-slate .r3{ border-bottom-color:var(--rz-line) }
body.rz-slate .top a{ border-color:var(--rz-line);color:var(--rz-muted);text-decoration:none }
body.rz-slate .top a:hover{ color:var(--rz-bright);border-color:#5b6573 }

/* forge — the Learning Curves charts are SVG built in JS with hardcoded hexes,
   so the token alias layer cannot reach them: the graphs kept the whole
   pre-rebrand palette (navy gridlines/labels, a hot #f5c451 gold projection
   line, a hot #39d98a data green) while the panels around them went obsidian.
   `stroke`/`fill` are PRESENTATION attributes, so a plain CSS rule outranks
   them with no !important and no markup change. Matching the exact literal
   means a selector that stops matching simply does nothing — it cannot break
   the chart. The two <b> readouts carry an inline style, so those alone need
   !important. No JS is touched. */
body.rz-slate svg [stroke="#222a3a"]{ stroke:var(--rz-line) }              /* gridlines   */
body.rz-slate svg [fill="#8a97ad"]{   fill:var(--rz-muted) }               /* axis labels */
body.rz-slate svg [stroke="#39507a"]{ stroke:#3d4652 }                     /* illustrative dash */
body.rz-slate svg [fill="#5b6b88"]{   fill:var(--rz-muted) }               /* its caption */
body.rz-slate svg [stroke="#39d98a"]{ stroke:var(--rz-ok) }                /* real series */
body.rz-slate svg [fill="#39d98a"]{   fill:var(--rz-ok) }                  /* its dots    */
body.rz-slate svg [stroke="#f5c451"]{ stroke:var(--rz-warn) }              /* projection  */
body.rz-slate b[style*="#39d98a"]{ color:var(--rz-ok)   !important }
body.rz-slate b[style*="#f5c451"]{ color:var(--rz-warn) !important }

/* money — the masthead paints gradient TEXT (white → amber). Same technique,
   silver ramp, so it still catches the light without going gold. */
body.rz-money .brand h1{
  background:linear-gradient(90deg,#ffffff,#9aa5b1 130%);
  -webkit-background-clip:text;background-clip:text;
  font-weight:500;letter-spacing:.16em;
}
body.rz-money .kicker{ color:var(--rz-silver);font-family:var(--rz-display);font-weight:500 }
body.rz-money button.act{ background:linear-gradient(180deg,#141821,#0e1116);border-color:#2a3036 }
body.rz-money button.act:hover{ border-color:#5b6573;color:var(--rz-bright);transform:none }
body.rz-money .tagm{ color:var(--rz-bright);border-color:#3a4149 }
body.rz-money .toast{ background:#0d1214;border-color:#2c4a3d;color:#cfe8dd }
body.rz-money .toast.err{ background:#141011;border-color:#4a2c30;color:#e8cfd2 }
body.rz-money .rev-form input:focus{ border-color:#5b6573 }
body.rz-money .spin{ border-top-color:var(--rz-silver) }

/* scripture globe — a bright cyan canon badge sat outside the palette */
body.rz-globe h1 > span[style*="8ad0ff"]{
  background:var(--rz-silver) !important;color:#0a0d12 !important;
}

/* aethon — the only zone built warm (amber/cream on brown) rather than obsidian.
   It is a public, client-facing landing page, so it gets a full pass: the amber
   ground, the cream gradient wordmark, the gold dot and the gold CTA all move to
   silver-on-obsidian. Nothing is restructured — only the finishes change.
   NOTE: this page has its own `.mark` class (its wordmark). That is why the
   design system's rune component is namespaced `.rk` — no collision. */
body.rz-aethon{ color:var(--rz-txt) }
body.rz-aethon .bgglow{
  background:
    radial-gradient(680px 420px at 50% -8%, rgba(180,200,230,.10), transparent 60%),
    radial-gradient(520px 520px at 108% 112%, rgba(120,150,200,.08), transparent 60%),
    linear-gradient(180deg,#08090a,#050607 70%);
}
body.rz-aethon .hero{
  background:linear-gradient(180deg,#f6f9fc,#b9c3ce);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.rz-aethon .mark{ font-family:var(--rz-display);color:var(--rz-silver) }
body.rz-aethon .mark .dot{ background:var(--rz-silver);box-shadow:0 0 10px rgba(207,214,223,.6) }
body.rz-aethon .card{
  background:linear-gradient(180deg,rgba(20,23,26,.92),rgba(12,14,16,.92));
  border-color:var(--rz-line);
}
body.rz-aethon .chip{ border-color:var(--rz-line);background:rgba(255,255,255,.02);color:var(--rz-muted) }
body.rz-aethon .btn{
  color:#0b1015;background:linear-gradient(180deg,#f4f7fa,#bac4cf);
  box-shadow:inset 0 1px #fff;
  font-family:var(--rz-display);letter-spacing:.12em;text-transform:uppercase;
}
body.rz-aethon .btn.ghost{
  color:var(--rz-txt);background:transparent;border:1px solid var(--rz-line);
  box-shadow:none;text-transform:none;letter-spacing:.02em;font-family:var(--rz-body);
}

/* economics — carries its own type pair (Fraunces display / Inter body) behind
   --serif and --sans. Those two names are NOT aliased globally (they're font
   tokens, and other zones use them for different roles), so they're re-pointed
   here, scoped to this zone only. Its .hero__title animates per letter, so the
   heading is left structurally alone — only the face changes. */
body.rz-econ{
  --serif: 'Cinzel', Georgia, serif;
  --sans:  'Spectral', Georgia, 'Segoe UI', system-ui, serif;
}
body.rz-econ .hero__title{ font-family:var(--rz-display);letter-spacing:.08em }
body.rz-econ .brand__word{ font-family:var(--rz-display) }
body.rz-econ .eyebrow .idx{ color:var(--rz-silver) }
/* The hero photograph is teal + gold marbling — the only strongly off-palette
   art left in the app. The asset is kept (it is the page's best feature and
   swapping it is not a styling change); it is pulled toward obsidian with a
   filter and a cooler veil instead. Drama intact, gold no longer fighting the
   silver everywhere else. */
body.rz-econ .hero__still,
body.rz-econ .hero__video{ filter:saturate(.55) contrast(1.06) brightness(.92) }

/* facetime — CONTRAST FIX, and a real regression this rebrand caused.
   The zone hard-codes `.startBtn{ color:#fff; background:var(--green) }`. Its
   own --green was #34c759 (iOS green); the alias layer re-points --green at
   --rz-ok (#8bd5b0), a LIGHT mint. That alias is right everywhere else — every
   other zone uses --ok/--good/--pay as status TEXT on a dark tint, or as a
   sub-10px dot — but here it becomes a large solid fill under white text, and
   white on #8bd5b0 measures 1.72:1. Unreadable, on the zone's primary CTA.
   Darkening --rz-ok globally would wreck the (correct) mint status text, so the
   ink is flipped dark here instead — the same treatment every other solid light
   fill in this system gets. Measured: 1.72:1 → 10.91:1. The green affordance stays,
   because this is a start-a-call button. Glow moved onto the palette mint too. */
body.rz-facetime .startBtn{
  color:#0b1410;
  box-shadow:0 10px 34px rgba(139,213,176,.30);
}
