/* =========================================================
   RG Herd Help Center
   Clean stylesheet v1
   Purpose: preserve current layout while removing patch-stack CSS
   ========================================================= */

/* -------------------------
   1. Tokens
------------------------- */
:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-soft: #f5f1ea;
  --ink: #0f172a;
  --muted: #475569;
  --faint: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --black: #0f172a;
  --red: #b91c1c;
  --red-dark: #7f1d1d;
  --red-soft: #f6ded7;

  --rg-green: #138a43;
  --base-green: #00481d;
  --argus-blue: #7db7ff;
  --alerts-red: #d92d3a;
  --rgtv-violet: #8b5cf6;
  --utility-grey: #64748b;

  --radius: 0;
  --content-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--ink);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%),
    radial-gradient(circle at 10% 0%, rgba(185, 28, 28, 0.05), transparent 32%),
    radial-gradient(circle at 84% 6%, rgba(214, 191, 154, 0.18), transparent 24%);
}

a {
  color: inherit;
}

.wrap {
  width: min(var(--content-width), calc(100% - 32px));
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--black);
  color: #fff;
  border-radius: 10px;
}

.skip:focus {
  left: 12px;
}

/* -------------------------
   2. Typography
------------------------- */
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

h1 {
  margin-top: 20px;
  max-width: 880px;
  font-size: clamp(2.55rem, 7vw, 5.6rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
}

h3 {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: var(--muted);
}

code {
  padding: 2px 6px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 800;
}

/* -------------------------
   3. Header / nav
------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(10px);
}

.nav {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.brand-mark {
  display: none;
}

.brand-logo-img {
  display: block;
  width: auto;
  height: 38px;
  max-width: 176px;
  object-fit: contain;
}

.brand-page-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-left: 14px;
  border-left: 1px solid rgba(15, 23, 42, 0.16);
  color: #334155;
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  color: #334155;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 700;
}

nav a:hover,
nav a:focus {
  background: #fff;
  color: var(--red-dark);
  outline: 1px solid var(--line);
}

/* -------------------------
   4. Hero
------------------------- */
main {
  padding-bottom: 72px;
}

.hero {
  padding: 76px 0 30px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red-dark);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy {
  margin-top: 24px;
  max-width: 760px;
  color: #334155;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

/* -------------------------
   5. Buttons / actions
------------------------- */
.hero-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--black);
  text-decoration: none;
  font-weight: 850;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn.dark {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

/* -------------------------
   6. Sections / grids
------------------------- */
.section {
  padding: 44px 0;
}

.section-head {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 0.55fr);
  align-items: end;
  gap: 28px;
  margin-bottom: 28px;
  padding: 28px 46px 28px 30px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018) 72%, transparent);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.section-head::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: var(--rg-green);
  opacity: 0.85;
  pointer-events: none;
}

#projects .section-head::after {
  background: var(--argus-blue);
}

#security .section-head::after,
#troubleshooting .section-head::after {
  background: var(--utility-grey);
}

.section-head p {
  font-size: 1.02rem;
}

.section-head > * {
  max-width: calc(100% - 8px);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* -------------------------
   7. Cards / notes
------------------------- */
.card,
.note,
.support-box {
  box-sizing: border-box;
  padding: 26px 46px 26px 28px;
}

.card,
details,
.support-box {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.030));
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.card::after,
details::after,
.support-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: var(--topic-accent, var(--red));
  opacity: 0.9;
  pointer-events: none;
}

.card p,
details p,
li {
  color: var(--muted);
}

.card p,
.card h3,
.card .label,
.card .mini-link,
.details-body p,
.details-body h3,
.details-body .label,
.details-body .mini-link,
.note,
.support-box p,
li {
  overflow-wrap: anywhere;
  word-break: normal;
}

.label {
  display: block;
  margin-bottom: 10px;
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card h3 + p {
  margin-top: 10px;
}

.card .mini-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--topic-accent, var(--red-dark));
  font-weight: 850;
  text-decoration: none;
  white-space: normal;
}

.card .mini-link:hover {
  text-decoration: underline;
}

.note {
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,0.045);
  color: #334155;
  font-size: 0.95rem;
  backdrop-filter: blur(10px);
}

.placeholder {
  border-left: 3px solid rgba(185, 28, 28, 0.55);
  background: rgba(185, 28, 28, 0.055);
  color: #7f1d1d;
  font-weight: 750;
}

/* -------------------------
   8. Quick support
------------------------- */
#quick-support .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#quick-support .card {
  display: block;
  min-height: 205px;
  padding: 26px 48px 26px 28px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.030));
}

#quick-support .card:nth-child(1) { --topic-accent: var(--rg-green); }
#quick-support .card:nth-child(2) { --topic-accent: var(--utility-grey); }
#quick-support .card:nth-child(3) { --topic-accent: var(--argus-blue); }
#quick-support .card:nth-child(4) { --topic-accent: var(--rgtv-violet); }
#quick-support .card:nth-child(5) { --topic-accent: var(--alerts-red); }
#quick-support .card:nth-child(6) { --topic-accent: var(--utility-grey); }

#quick-support .card .label,
#quick-support .card .mini-link {
  color: var(--topic-accent);
}

/* -------------------------
   9. Details / collapsibles
------------------------- */
details {
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.022));
}

details + details {
  margin-top: 10px;
}

summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
  padding: 24px 64px 24px 28px;
  color: var(--ink);
  font-weight: 900;
  font-size: 1.14rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-right: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--topic-accent, var(--red-dark));
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 1.25rem;
}

details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,0.070);
}

details[open] summary::after {
  content: "–";
}

.details-body {
  box-sizing: border-box;
  padding: 30px 46px 32px 30px;
  border-top: 0;
}

.details-body > * + * {
  margin-top: 18px;
}

.details-body .grid.two,
.details-body .grid.three {
  gap: 26px;
  padding: 4px 0;
}

.details-body .card {
  min-height: 160px;
  padding: 18px 46px 18px 28px;
  border: 0;
  background: transparent;
}

ul.clean {
  padding-left: 20px;
  margin: 12px 0 0;
}

ul.clean li + li {
  margin-top: 8px;
}

/* -------------------------
   10. Project collapsibles
------------------------- */
#base   { --topic-accent: var(--base-green); }
#argus  { --topic-accent: var(--argus-blue); }
#rgtv   { --topic-accent: var(--rgtv-violet); }
#alerts { --topic-accent: var(--alerts-red); }

#base .label,
#base .mini-link,
#base summary::after {
  color: var(--base-green);
}

#argus .label,
#argus .mini-link,
#argus summary::after {
  color: var(--argus-blue);
}

#rgtv .label,
#rgtv .mini-link,
#rgtv summary::after {
  color: var(--rgtv-violet);
}

#alerts .label,
#alerts .mini-link,
#alerts summary::after {
  color: var(--alerts-red);
}

#base::after   { background: var(--base-green); }
#argus::after  { background: var(--argus-blue); }
#rgtv::after   { background: var(--rgtv-violet); }
#alerts::after { background: var(--alerts-red); }

#projects details > summary.project-summary {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 330px 32px;
  column-gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 18px 58px 18px 34px;
}

#projects details > summary.project-summary::after {
  grid-column: 4;
  justify-self: end;
  align-self: center;
  margin: 0;
}

#projects .project-logo-cell {
  grid-column: 1;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 46px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

#projects .project-logo-cell img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 190px;
  object-fit: contain;
}

#projects .project-summary-rgtv .project-logo-cell {
  width: 88px;
  height: 52px;
}

#projects .project-summary-rgtv .project-logo-cell img {
  max-width: 88px;
}

#projects .project-title-cell {
  grid-column: 3;
  justify-self: start;
  align-self: center;
  display: block;
  width: 330px;
  min-width: 330px;
  max-width: 330px;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  transform: none;
}

/* -------------------------
   11. Text color labels
------------------------- */
.project-text {
  font-weight: 900;
  white-space: nowrap;
}

.project-text.project-base { color: var(--base-green); }
.project-text.project-argus { color: var(--argus-blue); }
.project-text.project-rgtv { color: var(--rgtv-violet); }
.project-text.project-alerts { color: var(--alerts-red); }

/* -------------------------
   12. Security / common issues
------------------------- */
#security .card,
#security .note,
#troubleshooting details {
  --topic-accent: var(--utility-grey);
}

#security .card::after,
#troubleshooting details::after {
  background: var(--utility-grey);
}

#security .card .label,
#security .mini-link {
  color: var(--utility-grey);
}

#troubleshooting details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#troubleshooting .ci-summary-copy {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-spacing: normal;
  letter-spacing: normal;
}

#troubleshooting .ci-word {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 900;
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
  word-spacing: normal;
  letter-spacing: normal;
}

#troubleshooting .ci-word::before,
#troubleshooting .ci-word::after {
  content: none;
  display: none;
}

#troubleshooting .ci-argus { color: var(--argus-blue); }
#troubleshooting .ci-rgtv { color: var(--rgtv-violet); }
#troubleshooting .ci-alerts { color: var(--alerts-red); }

#troubleshooting details > summary::after {
  flex: 0 0 auto;
  margin-left: 16px;
}

/* -------------------------
   13. Support block
------------------------- */
.support-box {
  --topic-accent: var(--rg-green);
  border: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.68), rgba(15,23,42,0.50));
  color: #fff;
  box-shadow: none;
}

.support-box::after {
  background: var(--rg-green);
}

.support-box p {
  color: #cbd5e1;
}

.support-box .btn {
  box-shadow: none;
  border-color: rgba(255,255,255,0.18);
}

/* -------------------------
   14. Project buttons
------------------------- */
#base .btn:not(.primary) {
  border-color: color-mix(in srgb, var(--base-green) 34%, transparent);
  color: var(--base-green);
}

#argus .btn:not(.primary) {
  border-color: color-mix(in srgb, var(--argus-blue) 34%, transparent);
  color: var(--argus-blue);
}

#rgtv .btn:not(.primary) {
  border-color: color-mix(in srgb, var(--rgtv-violet) 34%, transparent);
  color: var(--rgtv-violet);
}

#alerts .btn:not(.primary) {
  border-color: color-mix(in srgb, var(--alerts-red) 34%, transparent);
  color: var(--alerts-red);
}

#base .btn.primary {
  background: var(--base-green);
  border-color: var(--base-green);
}

#argus .btn.primary {
  background: var(--argus-blue);
  border-color: var(--argus-blue);
  color: #07111f;
}

#rgtv .btn.primary {
  background: var(--rgtv-violet);
  border-color: var(--rgtv-violet);
}

#alerts .btn.primary {
  background: var(--alerts-red);
  border-color: var(--alerts-red);
}

/* -------------------------
   15. Footer
------------------------- */
.help-footer {
  margin-top: 20px;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(15,23,42,0.82), rgba(15,23,42,0.72));
  box-shadow:
    0 -18px 48px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px);
  color: #94a3b8;
}

.help-footer-inner {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}

.help-footer-signal {
  min-width: 0;
  max-width: 440px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  line-height: 1.45;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.help-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  font-size: 0.82rem;
  color: #64748b;
}

.help-footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

.help-footer-links a:hover,
.help-footer-links a:focus {
  color: #cbd5e1;
}

.help-footer-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 0;
}

.help-footer-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.76;
  transition: opacity 160ms ease, transform 160ms ease;
}

.help-footer-logos a:hover,
.help-footer-logos a:focus {
  opacity: 1;
  transform: translateY(-1px);
}

.help-footer-logos img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 112px;
  object-fit: contain;
}

.help-footer-logos .footer-rgtv-logo {
  height: 34px;
  max-width: 56px;
}

/* -------------------------
   16. ARGUS beta popup
------------------------- */
.argus-beta-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid rgba(125, 183, 255, 0.24);
  background:
    radial-gradient(circle at top right, rgba(125, 183, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(7, 10, 16, 0.96), rgba(4, 7, 11, 0.98));
  box-shadow: 0 20px 48px rgba(0,0,0,0.34);
  backdrop-filter: blur(10px);
  color: #e2e8f0;
}

.argus-beta-popup::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(125,183,255,0), rgba(125,183,255,.54), rgba(93,244,171,.20), rgba(125,183,255,0));
}

.argus-beta-popup-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.argus-beta-popup-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.argus-beta-popup-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.argus-beta-popup-kicker {
  color: var(--argus-blue);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.argus-beta-popup-title {
  margin-top: 6px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.2;
}

.argus-beta-popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 999px;
  background: rgba(15,23,42,.58);
  color: #cbd5e1;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.argus-beta-popup-close:hover,
.argus-beta-popup-close:focus {
  color: #fff;
  background: rgba(30,41,59,.9);
}

.argus-beta-popup-copy {
  margin-top: 16px;
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.58;
}

.argus-beta-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.argus-beta-popup-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #10b981;
  color: #020617;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 850;
}

.argus-beta-popup-actions a:hover,
.argus-beta-popup-actions a:focus {
  background: #34d399;
}

/* -------------------------
   17. Responsive
------------------------- */
@media (max-width: 980px) {
  #quick-support .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.two,
  .grid.three,
  .details-body .grid.two,
  .details-body .grid.three {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .brand-logo-img {
    height: 34px;
    max-width: 158px;
  }

  .brand-page-label {
    font-size: 0.78rem;
    padding-left: 10px;
  }

  .help-footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding: 26px 0;
    text-align: center;
  }

  .help-footer-signal {
    max-width: 560px;
  }

  .help-footer-logos {
    justify-content: center;
  }

  #projects details > summary.project-summary {
    grid-template-columns: 150px minmax(0, 1fr) 30px;
    column-gap: 14px;
    padding-left: 22px;
    padding-right: 50px;
  }

  #projects .project-title-cell {
    grid-column: 2;
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: normal;
    justify-self: start;
  }

  #projects details > summary.project-summary::after {
    grid-column: 3;
  }
}

@media (max-width: 820px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 0;
  }

  nav ul {
    gap: 4px;
  }

  .section-head,
  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .section-head {
    padding: 24px 40px 24px 24px;
  }

  .hero {
    padding-top: 48px;
  }
}

@media (max-width: 720px) {
  #quick-support .grid.three {
    grid-template-columns: 1fr;
  }

  #quick-support .card {
    min-height: auto;
  }

  .card,
  #quick-support .card,
  .details-body .card,
  .note,
  .support-box {
    padding: 24px 40px 24px 24px;
  }

  .details-body {
    padding: 26px 38px 28px 24px;
  }

  details summary {
    padding: 22px 58px 22px 24px;
  }
}

@media (max-width: 620px) {
  .argus-beta-popup {
    right: 16px;
    bottom: 16px;
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .brand-logo-link {
    width: 100%;
    justify-content: space-between;
  }

  .brand-page-label {
    border-left: 0;
    padding-left: 0;
  }

  .help-footer-logos {
    gap: 14px;
  }

  .help-footer-logos img {
    height: 22px;
    max-width: 96px;
  }

  .help-footer-logos .footer-rgtv-logo {
    height: 32px;
    max-width: 52px;
  }
}




/* argus-button-correction-v1: ARGUS landing-page button style + real base logo green */
#argus .btn.argus-login-action {
  color: #04120b;
  background: linear-gradient(180deg, #9bdcff, #58b8ff);
  border-color: rgba(155, 220, 255, 0.36);
  box-shadow: 0 20px 40px rgba(88, 184, 255, 0.26);
  text-shadow: none;
}

#argus .btn.argus-login-action:hover,
#argus .btn.argus-login-action:focus {
  background: linear-gradient(180deg, #b8e7ff, #6fc2ff);
  border-color: rgba(155, 220, 255, 0.58);
  box-shadow: 0 20px 44px rgba(88, 184, 255, 0.34);
}

#argus .btn.base-action {
  background: var(--base-green);
  border-color: var(--base-green);
  color: #fff;
}

#argus .btn.base-action:hover,
#argus .btn.base-action:focus {
  filter: brightness(1.08);
}

#argus .btn.rg-action {
  background: var(--rg-green);
  border-color: var(--rg-green);
  color: #fff;
}

#argus .btn.rg-action:hover,
#argus .btn.rg-action:focus {
  filter: brightness(1.08);
}

#argus .argus-info-note {
  background: rgba(88, 184, 255, 0.055);
  border-left: 3px solid rgba(88, 184, 255, 0.55);
}

#argus .argus-info-note strong {
  color: var(--argus-blue);
}

#argus .argus-release-note {
  background: rgba(19, 138, 67, 0.055);
  border-left: 3px solid rgba(19, 138, 67, 0.55);
}

#argus .argus-release-note strong {
  color: var(--rg-green);
}
/* end argus-button-correction-v1 */


/* argus-login-pill-v1: mimic ARGUS landing-page header Login pill */
#argus .btn.argus-login-action {
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(155, 220, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(88, 184, 255, 0.18), rgba(72, 150, 255, 0.10));
  color: #d8efff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 18px rgba(72, 150, 255, 0.16);
  text-shadow: 0 0 10px rgba(155, 220, 255, 0.24);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#argus .btn.argus-login-action:hover,
#argus .btn.argus-login-action:focus {
  border-color: rgba(155, 220, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(88, 184, 255, 0.24), rgba(72, 150, 255, 0.14));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 22px rgba(72, 150, 255, 0.24);
  color: #f4fbff;
}
/* end argus-login-pill-v1 */


/* argus-beta-pill-v1: keep ARGUS Beta styling, only round it into a pill */
#argus .actions a[href="/beta/"] {
  border-radius: 999px;
}
/* end argus-beta-pill-v1 */

/* Mobile/background safety: prevent white page or overscroll flash */
html,
body {
  background: #232830 !important;
  background-color: #232830 !important;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

/* Tablet/header safety: prevent light header fallback between phone and desktop */
@media (min-width: 761px) and (max-width: 1100px) {
  header {
    background: #232830 !important;
    background-color: #232830 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  }

  header .wrap,
  header .nav {
    background: transparent !important;
    background-color: transparent !important;
  }

  header nav,
  header nav ul {
    background: transparent !important;
    background-color: transparent !important;
  }

  header nav a,
  header .brand-page-label {
    color: #cbd5e1 !important;
  }

  header nav a:hover,
  header nav a:focus {
    background: rgba(255,255,255,.08) !important;
    color: #f8fafc !important;
  }
}

/* Header hard override: keep Help header grey across phone/tablet/desktop */
header {
  background: #232830 !important;
  background-color: #232830 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

header .wrap,
header .nav,
header nav,
header nav ul {
  background: transparent !important;
  background-color: transparent !important;
}

header nav a,
header .brand-page-label {
  color: #cbd5e1 !important;
}

header nav a:hover,
header nav a:focus {
  background: rgba(255,255,255,.08) !important;
  color: #f8fafc !important;
}

/* Text color hardening: prevent tablet/default link blue from taking over normal copy */
body {
  color: #e2e8f0 !important;
}

main,
section,
article,
.card,
.panel,
.topic,
details,
summary {
  color: #e2e8f0;
}

h1,
h2,
h3,
h4,
strong,
summary {
  color: #f8fafc !important;
}

p,
li,
dd,
dt {
  color: #cbd5e1;
}

/* Normal links should not fall back to browser blue */
main a:not(.btn):not(.mini-link):not(.project-text),
footer a:not(.btn):not(.mini-link):not(.project-text),
header a:not(.btn):not(.mini-link):not(.project-text) {
  color: inherit;
}

/* Keep normal body links readable without browser-blue styling */
main p a:not(.btn),
main li a:not(.btn) {
  color: #e2e8f0 !important;
  text-decoration-color: rgba(226,232,240,.45);
}

/* Preserve intentional project/status colors */
.project-text.project-base,
.ci-base {
  color: var(--base-green) !important;
}

.project-text.project-argus,
.ci-argus {
  color: var(--argus-blue) !important;
}

.project-text.project-rgtv,
.ci-rgtv {
  color: var(--rgtv-violet) !important;
}

.project-text.project-alerts,
.ci-alerts {
  color: var(--alerts-red) !important;
}

.mini-link {
  color: var(--topic-accent, #f59e0b) !important;
}

/* Help grey lift: soften support portal surface */
html,
body {
  background: #2b313a !important;
  background-color: #2b313a !important;
}

body {
  color: #e5e7eb !important;
}

header {
  background: #2b313a !important;
  background-color: #2b313a !important;
}

header .wrap,
header .nav,
header nav,
header nav ul {
  background: transparent !important;
  background-color: transparent !important;
}

.hero {
  background:
    linear-gradient(180deg, rgba(58,65,76,.96), rgba(43,49,58,.98)) !important;
}

.card,
.panel,
.topic,
details,
.help-request-panel {
  background:
    linear-gradient(180deg, rgba(62,70,82,.98), rgba(49,56,67,.98)) !important;
  border-color: rgba(255,255,255,.14) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(43,49,58,.88), rgba(37,43,52,.96)) !important;
}

/* Revert Help background depth, lift grey text readability */
html,
body {
  background: #232830 !important;
  background-color: #232830 !important;
}

header {
  background: #232830 !important;
  background-color: #232830 !important;
}

header .wrap,
header .nav,
header nav,
header nav ul {
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep surfaces darker again */
.hero {
  background:
    linear-gradient(180deg, rgba(46,52,61,.96), rgba(35,40,48,.98)) !important;
}

.card,
.panel,
.topic,
details,
.help-request-panel {
  background:
    linear-gradient(180deg, rgba(43,49,58,.98), rgba(32,37,45,.98)) !important;
  border-color: rgba(255,255,255,.13) !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(35,40,48,.88), rgba(29,34,42,.96)) !important;
}

/* Lift grey copy, not the whole background */
p,
li,
dd,
dt,
.card p,
.topic p,
.panel p {
  color: #d7dee8 !important;
}

.text-slate-300 {
  color: #d7dee8 !important;
}

.text-slate-400,
.label,
.eyebrow {
  color: #b8c2cf !important;
}

.text-slate-500 {
  color: #9eabb9 !important;
}

h1,
h2,
h3,
h4,
strong,
summary {
  color: #f8fafc !important;
}