/* =====================================================================
   GRX10 website: Aurora design system (Suite "Magenta Aurora", dark).
   Phase 1, Oct 2026. Single shared stylesheet, linked from every page
   AFTER the page's own <style> so the box/label/atmosphere rules win.

   Token contract: scratchpad/aurora/TOKENS.md (all agents use these names).
   Dark values live on :root. The light theme ("Lilac Mist") is added by
   aurora-light.css (Phase 2) and must redefine every token below, including
   the Phase-1 helpers at the end of the token block.

   Pages never hardcode colours: page CSS uses var(--token); the legacy page
   variables (--ink, --panel, --line, --gray, --mag ...) are aliases of these
   tokens (see scratchpad/aurora/mapping-report.md).

   Fonts are unchanged (Prem, Oct 2026): Archivo + JetBrains Mono, self-hosted
   by the build's perf transform.
   ===================================================================== */

/* ---------- Tokens (dark, default) ---------- */
:root{
  color-scheme:dark;
  /* surfaces */
  --background:#090A1A;
  --background-2:#0C0D20;          /* alt section band */
  --foreground:#F1EEFA;
  --foreground-2:#CFCADF;          /* body text */
  --muted-foreground:#9C97B8;
  --subtle-foreground:#8A85AB;     /* captions (5.1:1 on --card, AA) */
  --card:#15152A;
  --card-2:#1B1B33;                /* nested / raised */
  --popover:#1E1E38;
  --accent:#24243F;                /* hover / selected bg */
  --border:#26263D;
  --border-strong:#34345A;
  --input:#26263D;
  /* interaction (never data) */
  --primary:#E9258F;
  --primary-hover:#F0409F;
  --primary-foreground:#FFFFFF;
  --link:#FF6BB5;
  --ring:#F06BB0;
  /* semantic data colours */
  --success:#4ADE80; --success-bg:#12291C;
  --warning:#FBBF24; --warning-bg:#2E2512;
  --danger:#F87171;  --danger-bg:#33171E;
  --violet:#8B6FD6;                /* secondary brand */
  /* gradients, glass, elevation */
  --gradient-brand:linear-gradient(120deg,#E11B8C,#7C3AED);
  --gradient-edge:linear-gradient(120deg,#E11B8C,#7C3AED,#22D3EE);
  --glass-chrome:rgb(21 21 42 / .68);
  --glass-panel:rgb(21 21 42 / .84);
  --glass-border:rgb(255 255 255 / .12);
  --glass-highlight:inset 0 1px 0 rgb(255 255 255 / .18);
  --elev:inset 0 1px 0 rgb(255 255 255/.06), 0 1px 2px rgb(0 0 0/.4), 0 10px 28px -16px rgb(0 0 0/.65);
  --elev-overlay:0 16px 40px -16px rgb(0 0 0/.7);
  --aurora-1:rgb(233 30 140/.25);
  --aurora-2:rgb(124 58 237/.25);
  --aurora-3:rgb(34 211 238/.2);
  --aurora-opacity:.32;
  --product-converse:#E11B8C; --product-nudge:#8B6FD6; --product-crm:#4F3F80;
  --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:14px;
  /* fonts kept as before Aurora (Prem): same stacks the pages already use */
  --font-sans:'Archivo','Archivo Fallback','Helvetica Neue',Arial,system-ui,sans-serif;
  --font-mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;

  /* ---- helpers added by Phase 1 (Phase 2: give these light values too) ---- */
  /* Channel triplets for translucent tints: rgb(var(--x-rgb) / .12).
     --overlay-rgb is the "white wash" used for hairlines and hover tints on dark;
     in light mode it should become the ink colour (e.g. 28 20 48). */
  --overlay-rgb:255 255 255;
  --shadow-rgb:0 0 0;
  --background-rgb:9 10 26;
  --card-rgb:21 21 42;
  --primary-rgb:233 37 143;
  --link-rgb:255 107 181;
  --violet-rgb:124 58 237;          /* brand gradient violet (#7C3AED) for tints */
  --success-rgb:74 222 128;
  --warning-rgb:251 191 36;
  --danger-rgb:248 113 113;
  --info-rgb:96 165 250;
  /* bars / fills in mock product UI (data): stronger step of each semantic colour */
  --success-bar:#22C55E; --warning-bar:#F59E0B; --danger-bar:#EF4444; --neutral-bar:#3F4A5C;
  --info:#60A5FA; --info-bar:#3B82F6;  /* informational (not brand); Phase 3 may fold into neutral */
  --brand-pink:#E11B8C; --brand-violet:#7C3AED;   /* gradient stops only (logo-matched) */
  --violet-soft:#A78BFA;                          /* soft gradient stop / chart series */
  --gradient-soft:linear-gradient(120deg,var(--link),var(--violet-soft));
  --input-bg:#0F1024;                             /* form field fill */
  --scrim:rgb(5 6 16 / .74);                      /* modal backdrop */
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* filled primary buttons: white text needs >=4.5:1 (#E9258F gives 4.1:1) */
  --primary-button:#D81B80;         /* 4.8:1 with white */
  --primary-button-hover:#C9177A;   /* 5.4:1 with white */

  /* ---- box refinement (subtle; ported from boxes/box-refine.css onto the tokens) ---- */
  --bx-s1:var(--card);              /* card */
  --bx-s2:var(--card-2);            /* raised panel / window / hover */
  --bx-s3:var(--accent);            /* inner well / chat bubble */
  --bx-lit:linear-gradient(180deg,rgb(var(--overlay-rgb) / .028) 0%,rgb(var(--overlay-rgb) / 0) 55%);
  --bx-fill:var(--bx-lit),var(--bx-s1);
  --bx-fill-2:var(--bx-lit),var(--bx-s2);
  --bx-edge:var(--border);
  --bx-edge-hover:var(--border-strong);
  --bx-edge-inner:rgb(var(--overlay-rgb) / .05);
  --bx-hi:inset 0 1px 0 rgb(var(--overlay-rgb) / .055);
  --bx-ring:0 0 0 1px rgb(var(--shadow-rgb) / .35);
  --bx-sh-1:0 1px 1px rgb(var(--shadow-rgb) / .22),0 2px 4px rgb(var(--shadow-rgb) / .18),0 8px 16px -6px rgb(var(--shadow-rgb) / .28);
  --bx-sh-2:0 1px 1px rgb(var(--shadow-rgb) / .25),0 3px 6px rgb(var(--shadow-rgb) / .2),0 12px 24px -8px rgb(var(--shadow-rgb) / .35),0 32px 64px -24px rgb(var(--shadow-rgb) / .55);
  --bx-sh-3:0 2px 2px rgb(var(--shadow-rgb) / .25),0 6px 12px rgb(var(--shadow-rgb) / .22),0 20px 40px -12px rgb(var(--shadow-rgb) / .45),0 48px 96px -32px rgb(var(--shadow-rgb) / .7);
  --bx-r-xl:20px; --bx-r-lg:16px; --bx-r-md:12px; --bx-r-sm:9px; --bx-r-xs:6px;
  --bx-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
html{background:var(--background)}
body{background:var(--background);color:var(--foreground)}
::selection{background:var(--primary);color:var(--primary-foreground)}

/* ---------- Backgrounds: every band on a token ---------- */
.engine,.runby{background:var(--background-2)!important}
.site-footer{background:var(--background)!important;border-top:1px solid var(--border)!important}
.nav.scrolled{background:var(--glass-chrome)!important;border-bottom-color:var(--border)!important}
.mobile-menu{background:var(--background)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.cmodal-overlay{background:var(--scrim)!important}
/* decorative grid veil behind heroes: hairlines in the border token only */
.grid-veil{background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px)!important}

/* ---------- Atmosphere: ONE ambient Aurora per page ---------- */
/* Fixed, behind all in-flow content (z-index:-1 in the root stacking context). */
body::before{
  content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  opacity:var(--aurora-opacity);
  background:
    radial-gradient(35% 30% at 78% 18%,var(--aurora-1),transparent 70%),
    radial-gradient(32% 32% at 28% 88%,var(--aurora-2),transparent 70%),
    radial-gradient(28% 28% at 96% 88%,var(--aurora-3),transparent 70%);
  animation:aurora-drift 40s ease-in-out infinite alternate;
}
@keyframes aurora-drift{to{transform:translate(-6%,4%) rotate(8deg)}}
/* per-section glow orbs / blobs are retired */
.orb,.orb-1,.orb-2,.orb-c,.cta .orb-c,.prod-glow,.pglow,.wpglow,.bglow1,.bglow2,
.va-hero-glow-l,.va-hero-glow-r,.va-glow-pink,.va-glow-purple,.va-nativeglow{display:none!important}
.xloop-glow{animation:none!important;filter:none!important}

/* ---------- Gradient text: hero only ---------- */
.grad-text,.va-gradient-text,.gradient-text{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
h1 .grad-text,h1.grad-text,h1 .va-gradient-text,h1 .gradient-text,h1.va-gradient-text,.legal-doc.nf .big.grad-text{
  background:var(--gradient-brand)!important;background-size:100% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.seq .verb .word,.verb-active .word.g{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}

/* ---------- Section labels / kickers: sentence case, no tracking ---------- */
.kicker,.cm-kicker,.eyebrow,.j-kicker,.mb-pill,.p-mono,.peyebrow,.fx-toc-l,.foot-col h4,.foot-col .foot-h,.recog-k,.pm-tag,.mono,.legal-back{
  text-transform:none!important;letter-spacing:normal!important}
.kicker::before{background:currentColor!important;opacity:.55}
.eyebrow-row .kicker{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important}
.foot-col h4,.foot-col .foot-h{color:var(--muted-foreground)!important}

/* ---------- Buttons: keep the pill identity; flat, no glow, no lift ---------- */
.btn{transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out)!important}
.btn:hover,.btn:active{transform:none!important}
.btn-primary{background:var(--primary-button)!important;color:var(--primary-foreground)!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.14),0 1px 2px rgb(var(--shadow-rgb)/.4)!important;border-color:transparent!important}
.btn-primary:hover{background:var(--primary-button-hover)!important}
.btn-ghost{background:var(--card)!important;border-color:var(--border-strong)!important;color:var(--foreground)!important;box-shadow:var(--bx-hi)!important}
.btn-ghost:hover{background:var(--accent)!important}

/* =====================================================================
   Boxes: subtle refinement (port of boxes/box-refine.css to the tokens)
   ===================================================================== */
/* 1. Cards (objects on the page) */
.fcard,.plan,.prod,.op,.ind,.case,.xs,.bcard,.stat,.qa,
.faq-item,.faq,.fx-toc-box,.plainpanel,.entity-strip,.loopstrip,
.recog-card,.pnote,.step:has(.step-num){
  background:var(--bx-fill);
  border-color:var(--bx-edge);
  border-radius:var(--bx-r-lg);
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-1);
  transition:border-color .25s var(--bx-ease),background-color .25s var(--bx-ease),box-shadow .25s var(--bx-ease);
}
.ind,.case,.xs,.bcard,.faq-item,.faq,.qa,.fx-toc-box,.entity-strip,.loopstrip,.pnote{border-radius:var(--bx-r-md)}
.step::before{display:none}
/* Hover: no lift, no glow, no pink outline. Edge brightens, surface one step up. */
.fcard:hover,.plan:hover,.prod:hover,.op:hover,.ind:hover,.case:hover,.xs:hover,
.bcard:hover,.stat:hover,.recog-card:hover,a.recog-card:hover,.path:hover,.step:has(.step-num):hover,.step:hover{
  transform:none;
  border-color:var(--bx-edge-hover);
  background:var(--bx-fill-2);
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-2);
}
.faq-item[open],.faq[open],.qa[open]{background:var(--bx-fill-2);border-color:var(--bx-edge-hover)}

/* 2. Large panels: CTA paths, home device, call/latency cards */
.path,.device,.callcol,.latcard,.callcard,.sum{
  border-color:var(--bx-edge);
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-2);
}
.path,.device{
  border-radius:var(--bx-r-xl);
  background:linear-gradient(180deg,rgb(var(--overlay-rgb) / .035) 0%,rgb(var(--overlay-rgb) / 0) 45%),var(--bx-s1);
  transition:border-color .25s var(--bx-ease),background-color .25s var(--bx-ease),box-shadow .25s var(--bx-ease);
}
.path:hover{background:linear-gradient(180deg,rgb(var(--overlay-rgb) / .045) 0%,rgb(var(--overlay-rgb) / 0) 50%),var(--bx-s2)}
.callcol,.latcard,.callcard{border-radius:var(--bx-r-lg);background:var(--bx-fill-2)}
.sum{border-radius:var(--bx-r-md)}

/* 3. Mock app windows (structure untouched; Phase 3 rebuilds them as Suite shells) */
.app-chrome{
  border-color:var(--bx-edge);
  border-radius:var(--bx-r-xl);
  background:linear-gradient(180deg,var(--bx-s2),var(--bx-s1) 70%);
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-3);
}
.app-bar{background:rgb(var(--overlay-rgb) / .018);border-bottom-color:var(--bx-edge-inner)}
.app-bar .dot.r,.app-bar .dot.y,.app-bar .dot.g{background:rgb(var(--overlay-rgb) / .13)}
.app-bar .url,.app-head .csv{border-radius:var(--bx-r-xs);background:rgb(var(--overlay-rgb) / .03);border-color:var(--bx-edge-inner)}
.inv-row.rc-go{border-radius:0}
.inv-row.rc-go:hover{background:linear-gradient(90deg,rgb(var(--primary-rgb) / 0),rgb(var(--primary-rgb) / .07) 20%,rgb(var(--primary-rgb) / .07) 80%,rgb(var(--primary-rgb) / 0))}

/* 4. Nested boxes (inside cards/windows): recede, concentric radius */
.metric,.prod-mini,.tl-card,.convo .line,.fcard .fic,.prod-ch a{
  border-color:var(--bx-edge-inner);
  border-radius:var(--bx-r-sm);
  background:rgb(var(--overlay-rgb) / .022);
  box-shadow:inset 0 1px 0 rgb(var(--overlay-rgb) / .035);
}
.fcard .fic{border-radius:11px}
.prod-ch a:hover{transform:none;border-color:var(--bx-edge-hover);background:rgb(var(--overlay-rgb) / .04)}
.bubble.in{background:var(--bx-s3);border-color:var(--bx-edge-inner)}

/* tags / chips inside cards and product UI: soft rectangles; buttons and the live chip keep their pill */
.tags .t,.case .mix .t,.chips .t,.chip,.rmeta .m,.pendpill{
  border-radius:var(--bx-r-xs);
  border-color:var(--bx-edge-inner);
  background:rgb(var(--overlay-rgb) / .035);
}
.chip.hot{border-radius:100px}

/* 5. Tables */
.fx-tbl{
  border-color:var(--bx-edge)!important;
  border-radius:var(--bx-r-md)!important;
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-1);
  background:linear-gradient(to left,var(--bx-s1) 45%,rgb(var(--card-rgb) / 0)) right center/56px 100% no-repeat local,linear-gradient(to left,rgb(var(--primary-rgb) / .28),rgb(var(--primary-rgb) / 0)) right center/20px 100% no-repeat scroll,var(--bx-s1)!important;
}
.fx-tbl td:first-child{background:var(--bx-s1)}
.fx-tbl th.fx-g:first-child{background:linear-gradient(rgb(var(--primary-rgb) / .07),rgb(var(--primary-rgb) / .07)),var(--bx-s1)}

/* 6. Inline-styled boxes (case studies, about, resources) */
[style*="border:1px solid var(--line)"][style*="background:var(--panel)"]{
  background:var(--bx-fill)!important;
  border-color:var(--bx-edge)!important;
  box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-1);
}
/* "Outcome" boxes: a 3px side stripe on a rounded box bends round the corner.
   Replace with a straight 2px bar inset from the corners. */
[style*="border-left:3px solid"][style*="border-radius"]{
  border-left:1px solid var(--bx-edge)!important;
  background:linear-gradient(var(--primary),var(--primary)) left 0 top 20px/2px calc(100% - 40px) no-repeat,var(--bx-fill)!important;
}

/* 7. Floating layers (nav dropdown, contact modal) */
.drop-card{background:var(--popover);border-color:var(--glass-border);box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-3)}
.cmodal-card{background:var(--popover)!important;border-color:var(--glass-border);border-radius:var(--bx-r-xl);box-shadow:var(--bx-hi),var(--bx-ring),var(--bx-sh-3)}

/* 8. Continuous corners where supported (Chromium 139+); elsewhere plain radius */
@supports (corner-shape:superellipse(1.5)){
  .fcard,.plan,.prod,.op,.ind,.case,.xs,.bcard,.stat,.qa,.faq-item,.faq,.fx-toc-box,
  .plainpanel,.entity-strip,.loopstrip,.recog-card,.pnote,.step:has(.step-num),
  .path,.device,.callcol,.latcard,.callcard,.app-chrome,.metric,.prod-mini,.tl-card,
  .convo .line,.fcard .fic,.drop-card,.cmodal-card,.fx-tbl{corner-shape:superellipse(1.5)}
}

/* ---------- Logos ---------- */
.brand-logo{filter:none!important}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .fcard,.plan,.prod,.op,.ind,.case,.xs,.bcard,.stat,.path,.recog-card{transition:none}
}
@media (forced-colors:active){body::before{display:none}}

/* ---------- Pink is not data: numbers and metric bars ---------- */
.metric .v,.metric .v.g,.lattot .v{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--foreground)!important}
.inv-row.total .val,.va-clock .cnum,.rc-go:hover .val{color:var(--foreground)!important}
.mband2 .mb-rail span{background:var(--success-bar)!important}
.mband2 .mb-was{text-decoration-color:var(--subtle-foreground)!important}
.latfill{background:var(--success-bar)!important}