/* ============================================================
   ASI Pulse
   Built on the asibroadband.com design system.
   Navy #1E2D5F, mint #7ECBA1, Plus Jakarta Sans + DM Sans.

   Colour rule: brand mint sits on navy, where it clears contrast.
   Data marks on white use --mint-ink, a deeper step that clears
   3:1 against the page. Brand mint on light is decoration only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --mint: #7ECBA1;
  --mint-light: #a8ddbf;
  --mint-dark: #5db886;
  --mint-ink: #3d9970;          /* data + links on white, contrast safe */
  --navy: #1E2D5F;
  --navy-light: #2a3f7a;
  --navy-dark: #141f42;

  --white: #ffffff;
  --off-white: #f7f9fc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;

  --good: #2f8f63;
  --bad: #C4553D;
  --warn: #B07A12;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(30, 45, 95, 0.06);
  --shadow-md: 0 4px 20px rgba(30, 45, 95, 0.08);
  --shadow-lg: 0 10px 40px rgba(30, 45, 95, 0.12);
  --t: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; transition: var(--t); }

:focus-visible { outline: 3px solid var(--mint-ink); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Body-wide particle canvas floats above content, clicks pass through.
   Set as an inline style by pulse.js so nothing can override it. */
canvas#bodyParticles {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(30, 45, 95, 0.08);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.logo img { height: 38px; width: auto; display: block; }
.logo-word {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.logo-divider { width: 1px; height: 26px; background: var(--gray-200); }
.logo-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; flex-wrap: wrap; }
.nav-links a {
  display: block;
  padding: 9px 17px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  border-radius: 10px;
  white-space: nowrap;
}
.nav-links a:hover { background: rgba(126, 203, 161, 0.14); color: var(--mint-ink); }
.nav-links a.on { background: rgba(126, 203, 161, 0.16); color: var(--mint-ink); }

.header-right { display: flex; align-items: center; gap: 16px; }
.header-who {
  font-size: 0.84rem;
  color: var(--gray-500);
  white-space: nowrap;
}
.header-who strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  font-weight: 700;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  transition: var(--t);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--mint); color: var(--navy); }
.btn-primary:hover { background: var(--mint-dark); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(126, 203, 161, 0.4); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-light); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(30, 45, 95, 0.22); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--gray-200); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-ghost { background: var(--gray-100); color: var(--navy); border: 1px solid var(--gray-200); }
.btn-ghost:hover { background: var(--gray-200); }
.btn-danger { background: transparent; color: var(--bad); border: 1px solid rgba(196, 85, 61, 0.35); }
.btn-danger:hover { background: rgba(196, 85, 61, 0.08); border-color: var(--bad); }
.btn-sm { padding: 8px 17px; font-size: 0.8rem; }
.btn-lg { padding: 16px 36px; font-size: 0.96rem; }
.btn-block { width: 100%; }

/* On navy bands */
.band-navy .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }
.band-navy .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* ---------- Bands ---------- */

.band { padding: 72px 0; position: relative; }
.band-white { background: var(--white); }
.band-off { background: var(--off-white); }
.band-navy {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 45%, #263f7a 100%);
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  overflow: hidden;
}
.band-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 72% 40%, rgba(126, 203, 161, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 12% 90%, rgba(126, 203, 161, 0.08) 0%, transparent 62%);
  pointer-events: none;
}
.band-navy > .container { position: relative; z-index: 2; }
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy canvas.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.band-tight { padding: 52px 0; }

/* ---------- Section labels, used sparingly ---------- */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mint-ink);
  margin-bottom: 14px;
}
.section-label::before { content: ''; width: 26px; height: 2px; background: var(--mint); border-radius: 2px; }
.band-navy .section-label { color: var(--mint); }

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; }
.section-sub { font-size: 1.02rem; color: var(--gray-500); margin-top: 8px; max-width: 620px; }
.band-navy .section-sub { color: rgba(255, 255, 255, 0.62); }

/* ---------- Hero: the account and its headline number ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}

.hero-id { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.hero-av {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(126, 203, 161, 0.16);
  border: 1px solid rgba(126, 203, 161, 0.32);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 800; color: var(--mint);
  overflow: hidden; flex-shrink: 0;
}
.hero-av img { width: 100%; height: 100%; object-fit: cover; }
.hero-handle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hero-meta { font-size: 0.86rem; color: rgba(255, 255, 255, 0.5); }

.headline-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  font-weight: 800;
  color: var(--white);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 10px;
}
.headline-caption {
  display: flex;
  align-items: baseline;
  gap: 10px 18px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
}
.headline-caption .hc-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mint);
  letter-spacing: 0.01em;
}
/* Keep the change and the window it covers together as one phrase. */
.headline-caption .hc-change { display: inline-flex; align-items: baseline; gap: 8px; }

/* Hero trend plot, larger than the supporting sparklines */
.hero-plot {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  min-width: 280px;
}
.hero-plot-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 14px;
}
.hero-plot .spark { display: block; }
.hero-plot-foot {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 10px;
  gap: 16px;
}

/* ---------- Supporting metrics: a divided row, not a card grid ---------- */

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.metric {
  padding: 0 38px;
  border-left: 1px solid var(--gray-200);
}
.metric:first-child { padding-left: 0; border-left: none; }
.metric:last-child { padding-right: 0; }
.metric-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.metric-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.035em;
}
.metric-exact { font-size: 0.8rem; color: var(--gray-400); margin-top: 5px; }
.metric-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  min-height: 36px;
}
.metric-nospark { font-size: 0.76rem; color: var(--gray-400); align-self: center; }

/* ---------- Change indicator: arrow plus signed number, never colour alone ---------- */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}
.delta .d-glyph { font-size: 0.7rem; }
.delta-up { color: var(--good); }
.delta-down { color: var(--bad); }
.delta-flat { color: var(--gray-400); }
.band-navy .delta-up { color: var(--mint); }
.band-navy .delta-down { color: #F2A594; }
.band-navy .delta-flat { color: rgba(255, 255, 255, 0.45); }

.trend-note { font-size: 0.82rem; color: var(--gray-400); margin-top: 30px; }

/* ---------- Account switcher ---------- */

.acct-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.acct-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px 8px 9px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  transition: var(--t);
}
.acct-chip:hover { border-color: var(--mint); background: rgba(126, 203, 161, 0.12); }
.acct-chip.on { border-color: var(--mint); background: rgba(126, 203, 161, 0.18); }
.acct-chip .ac-av {
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(126, 203, 161, 0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.64rem; font-weight: 800; color: var(--mint);
  flex-shrink: 0; overflow: hidden;
}
.acct-chip .ac-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-chip .ac-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem; font-weight: 700; color: var(--white);
}
.acct-chip .ac-plat { font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); }

/* ---------- Customer voice cards ---------- */

.says { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.say {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}
.say::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint), var(--navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--t);
}
.say:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.say:hover::before { transform: scaleX(1); }
.say.feat { border-color: rgba(126, 203, 161, 0.55); background: linear-gradient(180deg, rgba(126,203,161,0.06), var(--white) 60%); }
.say.feat::before { transform: scaleX(1); }

.feat-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint-ink);
}
.say-quote { font-size: 1rem; color: var(--gray-700); line-height: 1.72; flex: 1; }
.say-by { display: flex; align-items: center; gap: 13px; }
.say-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem; font-weight: 800; color: var(--mint);
  flex-shrink: 0;
}
.say-who { min-width: 0; }
.say-handle {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem; font-weight: 700; color: var(--navy);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.say-meta { display: block; font-size: 0.78rem; color: var(--gray-400); line-height: 1.45; }
.say-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; color: var(--mint-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.say-link:hover { gap: 10px; }

/* ---------- Login ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 45%, #263f7a 100%);
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, rgba(126, 203, 161, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 82% 88%, rgba(126, 203, 161, 0.07) 0%, transparent 62%);
  pointer-events: none;
  z-index: 1;
}
.auth-page canvas.particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.auth-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.auth-card { width: 100%; max-width: 430px; text-align: center; }
.auth-logo { margin-bottom: 30px; }
/* The wordmark in the logo is navy, so it is knocked out to white on the
   navy sign in ground, the same treatment the footer uses. */
.auth-logo img { height: 54px; width: auto; filter: brightness(0) invert(1); }
.auth-logo .logo-word { color: var(--white); font-size: 1.8rem; }
.auth-rule {
  width: 58px; height: 3px;
  background: var(--mint);
  border-radius: 3px;
  margin: 0 auto 26px;
}
.auth-card h1 { color: var(--white); font-size: 1.85rem; letter-spacing: -0.025em; margin-bottom: 8px; }
.auth-tag { color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; margin-bottom: 34px; }
.auth-form {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  text-align: left;
}
.auth-foot { margin-top: 26px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.45); }
.auth-foot a { color: var(--mint); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-copy {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 24px 34px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.28);
}

/* ---------- Forms ---------- */

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.field .hint { font-size: 0.78rem; color: var(--gray-400); margin-top: 7px; line-height: 1.55; }
.field .opt { color: var(--gray-400); font-weight: 500; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 13px 17px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-100);
  color: var(--gray-700);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  transition: var(--t);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input:focus, select:focus, textarea:focus {
  border-color: var(--mint);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(126, 203, 161, 0.14);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
.pin-input { letter-spacing: 0.4em; font-size: 1.1rem; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--gray-600); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--mint-dark); cursor: pointer; }

/* Fields inside the glass sign in card invert. Declared after the base
   field rules above so it wins on source order, and matched on the same
   attribute selectors so specificity is never in question. */
.auth-form label { color: rgba(255, 255, 255, 0.82); }
.auth-form input[type=text],
.auth-form input[type=password],
.auth-form input[type=email] {
  background: rgba(8, 14, 30, 0.42);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--white);
}
.auth-form input[type=text]::placeholder,
.auth-form input[type=password]::placeholder,
.auth-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.34); }
.auth-form input[type=text]:focus,
.auth-form input[type=password]:focus,
.auth-form input[type=email]:focus {
  border-color: var(--mint);
  background: rgba(8, 14, 30, 0.58);
  box-shadow: 0 0 0 4px rgba(126, 203, 161, 0.22);
}
.auth-form .hint { color: rgba(255, 255, 255, 0.45); }

/* ---------- Alerts ---------- */

.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.89rem;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.6;
  border: 1px solid;
}
.alert .a-glyph { flex-shrink: 0; font-weight: 700; }
.alert-bad  { background: #FDF0EC; color: #8F3A26; border-color: #F0C9BE; }
.alert-good { background: #EDF8F2; color: #216B49; border-color: #BCE3CE; }
.alert-warn { background: #FDF6E6; color: #7A5308; border-color: #EEDCB0; }
.alert-info { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Alerts on glass */
.auth-form .alert-bad  { background: rgba(196, 85, 61, 0.16); color: #F5C4B7; border-color: rgba(196, 85, 61, 0.36); }
.auth-form .alert-good { background: rgba(126, 203, 161, 0.14); color: var(--mint-light); border-color: rgba(126, 203, 161, 0.36); }
.auth-form .alert-warn { background: rgba(240, 184, 73, 0.14); color: #F2CE86; border-color: rgba(240, 184, 73, 0.34); }
.auth-form .alert-info { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.16); }

/* ---------- Page head ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.page-head h1 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); letter-spacing: -0.025em; }
.page-head .ph-sub { font-size: 0.94rem; color: var(--gray-500); margin-top: 6px; }
.back-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--mint-ink);
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
}
.back-link:hover { gap: 11px; }

/* ---------- Panels ---------- */

.panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.panel-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.panel-head h2 { font-size: 1.12rem; }
.panel-head .ph-note { font-size: 0.83rem; color: var(--gray-500); margin-top: 4px; }
.panel-body { padding: 28px; }
.panel-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 16px;
}

/* ---------- Empty states ---------- */

.empty { text-align: center; padding: 58px 26px; }
.empty .e-mark {
  width: 56px; height: 56px; border-radius: 15px;
  background: rgba(126, 203, 161, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint-ink);
  margin: 0 auto 18px;
}
.empty .e-mark svg { width: 25px; height: 25px; }
.empty h3 { font-size: 1.08rem; margin-bottom: 8px; }
.empty p { font-size: 0.9rem; color: var(--gray-500); max-width: 440px; margin: 0 auto; }

/* ---------- Tables ---------- */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  padding: 14px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.tbl td { padding: 16px 28px; font-size: 0.91rem; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--off-white); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl .t-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--navy); }
.tbl a.t-name:hover { color: var(--mint-ink); }
.tbl .t-actions { text-align: right; white-space: nowrap; }
.tbl .t-actions a, .tbl .t-actions button { margin-left: 7px; }
.tbl .t-sub { font-size: 0.79rem; color: var(--gray-400); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 13px; border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  white-space: nowrap;
}
.pill-on   { background: rgba(126, 203, 161, 0.18); color: #216B49; }
.pill-off  { background: var(--gray-100); color: var(--gray-500); }
.pill-warn { background: #FDF6E6; color: #7A5308; }
.pill-bad  { background: #FDF0EC; color: #8F3A26; }

.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.85rem; }

/* ---------- Two column split ---------- */

.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.stack { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.55);
  padding: 44px 0 38px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.83rem;
}
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand .logo-word { color: var(--white); font-size: 1.05rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--mint); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  canvas.particles, canvas#bodyParticles { display: none; }
  .btn:hover, .say:hover { transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-plot { min-width: 0; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .metric-row { grid-template-columns: 1fr; }
  .metric {
    padding: 24px 0;
    border-left: none;
    border-top: 1px solid var(--gray-200);
  }
  .metric:first-child { padding-top: 0; border-top: none; }
  .metric-foot { margin-top: 14px; }
}

@media (max-width: 720px) {
  .header-inner { height: auto; padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .logo-divider, .logo-sub { display: none; }
  .nav-links { order: 3; width: 100%; gap: 4px; }
  .nav-links a { padding: 8px 13px; font-size: 0.83rem; }
  .header-right { gap: 12px; }
  .header-who { font-size: 0.8rem; }
  .container { padding: 0 20px; }
  .band { padding: 46px 0; }
  .band-tight { padding: 36px 0; }
  .headline-number { line-height: 0.95; }
  .hero-plot { padding: 18px 20px; }
  .panel-body { padding: 20px; }
  .panel-head { padding: 18px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .tbl th, .tbl td { padding: 13px 18px; }
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-scroll .tbl { min-width: 640px; }
  .say { padding: 24px; }
  .auth-form { padding: 28px 22px; }
  .footer-inner { justify-content: center; text-align: center; }
}