/* ============================================
   STIGG — Operational Intelligence for Modern Business
   Design tokens
   ============================================ */
:root {
  --navy-deep: #465872;
  --navy-darker: #2b3646;
  --navy-ink: #374559;
  --red: #1a6793;
  --red-bright: #0f77b3;
  --cyan: #4fb0e8;
  --amber: #3baff2;
  --off-white: #f9f9f9;
  --paper: #f3f2ee;
  --ink: #0a1730;
  --ink-soft: #4a5468;
  --line: rgba(70, 88, 114, 0.14);
  --line-dark: rgba(79, 176, 232, 0.22);

  /* Homepage-only accents — additive, layered on top of the brand palette
     above rather than replacing it, so dashboard pages (which reuse the
     tokens above) are unaffected. Recolored onto the same cool hue as the
     brand palette, at a punchier saturation, for a "pop" accent family. */
  --coral: #3cb8ff;
  --coral-deep: #2aa2e8;
  --coral-soft: #ccecff;
  --amber-glow: #48bcff;
  --cream: #ecf7fd;
  --cream-warm: #e0f1fb;

  --teal-deep: #013452;
  --teal-ink: #022438;
  --teal-mid: #5797bc;
  --teal-light: #77b2d4;
  --stone-gray: #a5abaf;

  --ink-black: #465872;
  --blush: #dcf2ff;
  --red-soft: #d7e9f4;

  /* A single warm accent, used sparingly (hero highlight word, hero CTA,
     and the "How We Work" dark band) — everything else stays in the cool
     blue family so this stands out instead of blending in. */
  --pop-warm: #e2872f;
  --pop-warm-bright: #f0993f;
  --pop-warm-soft: rgba(226, 135, 47, 0.16);

  /* Accent family for automation status marks. Only --automation-green is
     still referenced (the hero feed's live pulse); the rest are kept as a
     matched set for future status marks. Picked bright enough to read as
     stroke or text color against a dark canvas. */
  --automation-orange: #f0993f;
  --automation-blue: #4f8fe8;
  --automation-green: #34c281;
  --automation-red: #ef5b5b;
  --automation-silver: #e2e8f2;
  --automation-check: #34c281;

  /* Fixed-meaning status colors — deliberately NOT theme variables like
     --red/--pop-warm above. These carry real meaning (paid vs. overdue,
     flagged vs. clear) on client dashboard pages, including inside
     client-branded scopes like .meridian-theme, so they must never shift
     just because a brand palette changes. See internal-dashboard-content.php
     for the same principle applied to the internal ops dashboard. */
  --status-good: #1f8a5e;
  --status-warning: #8a5a00;
  --status-critical: #b91c3c;

  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --max-width: 1180px;
  --section-pad: clamp(48px, 7vw, 88px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pop-warm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--pop-warm);
  display: inline-block;
}

.eyebrow--light {
  color: var(--pop-warm-bright);
}

.eyebrow--light::before {
  background: var(--pop-warm-bright);
}

/* Homepage-only eyebrow variant — kept separate from .eyebrow above
   since that class is also used on the client dashboard pages. */
.hp-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pop-warm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.hp-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pop-warm);
  display: inline-block;
}

/* Compound selector (not just .hp-eyebrow--light) so this reliably outranks
   section-level "p" color rules like .hero__copy p / .contact__copy p,
   wherever this variant gets used. */
.hp-eyebrow.hp-eyebrow--light {
  color: var(--pop-warm-bright);
}

.hp-eyebrow.hp-eyebrow--light::before {
  background: var(--pop-warm-bright);
}

/* ============================================
   NAV
   ============================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #eef1f4;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 92px;
}

.site-nav__tenant {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-right: auto;
  white-space: nowrap;
}

.site-nav__logo img {
  height: 42px;
  width: auto;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.site-nav__links a:not(.site-nav__cta) {
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}

.site-nav__links a:not(.site-nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}

.site-nav__links a:not(.site-nav__cta):hover::after {
  width: 100%;
}

.site-nav__links li {
  display: flex;
  align-items: center;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__portal {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav__portal::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
}

.site-nav__portal:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.site-nav__utility {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--navy-deep);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav__utility:hover {
  color: var(--red);
  border-color: var(--red);
}

.site-nav__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--pop-warm);
  color: var(--off-white);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--pop-warm);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-nav__cta:hover {
  background: var(--pop-warm-bright);
  border-color: var(--pop-warm-bright);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
}

/* Mobile navigation: a hamburger button that opens the link list as a panel
   under the bar (added 2026-09-08; before this the links were simply hidden
   below 900px). Toggled by js/script.js via .site-nav.is-open. */
.site-nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.site-nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 24px 20px;
    background: #f9f9f9;
    z-index: 2;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(10, 23, 48, 0.4);
  }

  .site-nav.is-open .site-nav__links {
    display: flex;
  }

  .site-nav__links li {
    display: flex;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }

  .site-nav__links li:last-child {
    border-bottom: 0;
    padding-top: 18px;
  }

  .site-nav__links a:not(.site-nav__cta) {
    font-size: 15px;
  }

  .site-nav__cta {
    text-align: center;
    padding: 12px 22px;
  }
}
/* ============================================
   HERO (rebuilt 2026-09-08): dark gradient stage, two-beat headline, and an
   animated approval queue on the right that shows the actual product
   mechanism (routine work clears itself, one judgment call waits for a
   person). The old five-card workflow montage is gone.
   ============================================ */
.hero {
  position: relative;
  background: #0b1a2b;
  color: var(--off-white);
  padding: 156px 0 128px;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #0b1a2b 0%, #013452 48%, #0f77b3 100%);
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 62% 45%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 62% 45%, #000 25%, transparent 75%);
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
}

.hero__orb--a {
  width: 560px;
  height: 560px;
  right: -160px;
  top: -220px;
  background: radial-gradient(circle, rgba(79, 176, 232, 0.55), rgba(79, 176, 232, 0) 68%);
  animation: orb-drift 14s ease-in-out infinite alternate;
}

.hero__orb--b {
  width: 460px;
  height: 460px;
  left: 18%;
  bottom: -280px;
  background: radial-gradient(circle, rgba(240, 153, 63, 0.5), rgba(240, 153, 63, 0) 68%);
  animation: orb-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-44px, 32px, 0); }
}

.hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 1340px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 56px;
}

@keyframes copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
}

.hero__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--pop-warm);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #fff;
}

.hero__punch {
  display: block;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.06;
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
  animation-delay: 0.15s;
}

.hero__punch--2 {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-size: clamp(24px, 2.7vw, 36px);
  margin-top: 12px;
  animation-delay: 0.3s;
}

.hero h1 em {
  font-style: normal;
  color: var(--pop-warm-bright);
}

.hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 50ch;
  margin: 0 0 30px;
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
  animation-delay: 0.45s;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
  animation-delay: 0.6s;
}

/* Homepage-only warm button treatment, scoped to .hero so the shared .btn
   classes used on other pages (login, dashboards) are untouched. */
.hero .btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 14.5px;
}

.hero .btn--primary {
  background: var(--pop-warm);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(240, 153, 63, 0.9);
}

.hero .btn--primary:hover {
  background: var(--pop-warm-bright);
  transform: translateY(-2px);
}

.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.hero .btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(255, 255, 255, 0.04);
}

.hero__proof {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  opacity: 0;
  animation: copy-in 0.7s ease forwards;
  animation-delay: 0.75s;
}

.hero__proof li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__proof li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* --- Live approval feed --- */
.hero__visual {
  position: relative;
  opacity: 0;
  animation: copy-in 0.8s ease forwards;
  animation-delay: 0.35s;
}

.feed {
  --tilt: -1.5deg;
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotate(var(--tilt));
  animation: feed-float 7s ease-in-out infinite alternate;
}

@keyframes feed-float {
  from { transform: translateY(0) rotate(var(--tilt)); }
  to { transform: translateY(-10px) rotate(var(--tilt)); }
}

.feed__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--navy-darker);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.feed__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}

.feed__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--automation-green);
  box-shadow: 0 0 0 0 rgba(52, 194, 129, 0.6);
  animation: feed-pulse 1.8s ease-out infinite;
}

@keyframes feed-pulse {
  to { box-shadow: 0 0 0 9px rgba(52, 194, 129, 0); }
}

.feed__meta {
  color: rgba(255, 255, 255, 0.55);
}

.feed__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.feed__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease, opacity 0.35s ease;
}

.feed__row:last-child {
  border-bottom: 0;
}

.feed__ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--red);
  transition: background 0.3s ease, color 0.3s ease;
}

.feed__ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed__txt {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}

.feed__txt small {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.feed__act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feed__st {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  white-space: normal;
  max-width: 230px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.feed__btn {
  display: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  background: var(--pop-warm);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 8px 18px -8px rgba(226, 135, 47, 0.9);
}

.feed__row[data-state="queued"] {
  opacity: 0.5;
}

.feed__row[data-state="working"] .feed__st {
  background: var(--blush);
  color: var(--red);
}

.feed__row[data-state="working"] .feed__st::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--red);
  border-right-color: transparent;
  border-radius: 50%;
  animation: feed-spin 0.8s linear infinite;
}

@keyframes feed-spin {
  to { transform: rotate(360deg); }
}

.feed__row[data-state="done"] .feed__st,
.feed__row[data-state="approved"] .feed__st {
  background: rgba(52, 194, 129, 0.16);
  color: var(--status-good);
}

.feed__row[data-state="done"] .feed__st::before,
.feed__row[data-state="approved"] .feed__st::before {
  content: "✓";
  font-weight: 700;
}

.feed__row[data-state="review"] {
  background: rgba(226, 135, 47, 0.1);
}

.feed__row[data-state="review"] .feed__ic {
  background: var(--pop-warm-soft);
  color: var(--pop-warm);
}

.feed__row[data-state="review"] .feed__st {
  background: var(--pop-warm);
  color: #fff;
}

.feed__row[data-state="review"] .feed__btn {
  display: inline-block;
  animation: feed-nudge 1.2s ease-in-out infinite;
}

@keyframes feed-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.feed__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 18px 14px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

.feed__foot span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.feed__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.feed__dot--green { background: var(--status-good); }
.feed__dot--amber { background: var(--pop-warm); }
.feed__dot--red { background: var(--status-critical); }

.feed__row[data-state="error"] .feed__ic {
  background: rgba(185, 28, 60, 0.1);
  color: var(--status-critical);
}

.feed__row[data-state="error"] .feed__st {
  background: rgba(185, 28, 60, 0.12);
  color: var(--status-critical);
}

.feed__row[data-state="error"] .feed__st::before {
  content: "!";
  font-weight: 700;
}

@media (max-width: 960px) {
  .hero {
    padding: 128px 0 96px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .feed {
    --tilt: 0deg;
  }
}

@media (max-width: 560px) {
  .feed__row {
    grid-template-columns: 28px 1fr;
  }

  .feed__act {
    grid-column: 2;
  }
}
.btn {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn--primary {
  background: var(--red);
  color: var(--off-white);
  border: 1px solid var(--red);
}

.btn--primary:hover {
  background: var(--red-bright);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--off-white);
  border: 1px solid rgba(249, 249, 249, 0.3);
}

.btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}


/* ============================================
   SECTION shared
   ============================================ */
.section {
  padding: var(--section-pad) 0;
}

.section--paper {
  background: var(--paper);
}

/* ============================================
   DIAGONAL SECTION DIVIDERS (homepage)
   Each slanted section's top edge is cut on a
   consistent diagonal, then pulled up over the
   section above it so the two backgrounds meet
   at a seam instead of a flat horizontal line.
   ============================================ */
.slant-top {
  position: relative;
  clip-path: polygon(0 0, 100% 64px, 100% 100%, 0 100%);
  margin-top: -64px;
  padding-top: calc(var(--section-pad) + 32px);
}

.slant-top--reverse {
  position: relative;
  clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
  margin-top: -64px;
  padding-top: calc(var(--section-pad) + 32px);
}

.slant-top:first-of-type,
header.hero + .slant-top {
  margin-top: -64px;
}

@media (max-width: 700px) {
  .slant-top {
    clip-path: polygon(0 0, 100% 32px, 100% 100%, 0 100%);
    margin-top: -32px;
    padding-top: calc(var(--section-pad) + 16px);
  }

  .slant-top--reverse {
    clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
    margin-top: -32px;
    padding-top: calc(var(--section-pad) + 16px);
  }
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================
   WHAT YOU GET (replaces About / Process / Principles, 2026-09-08):
   one real screenshot from the demo suite plus the three-state mechanism
   it shows (auto / needs a person / error), then three standing facts.
   ============================================ */
.deliver {
  background: #ffffff;
}

.deliver__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.deliver__shot {
  margin: 0;
  min-width: 0;
}

.browser {
  border-radius: 14px;
  overflow: hidden;
  background: #eff2ed;
  box-shadow: 0 30px 60px -28px rgba(10, 23, 48, 0.45), 0 0 0 1px rgba(10, 23, 48, 0.08);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 10px 14px;
  background: #e8ecef;
  border-bottom: 1px solid rgba(10, 23, 48, 0.08);
}

.browser__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cfd6dc;
}

.browser__bar em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-left: 10px;
}


.browser img {
  display: block;
  width: 100%;
  height: auto;
}

.deliver__shot figcaption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 12px;
}

.deliver__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deliver__point {
  position: relative;
  padding: 18px 20px 18px 66px;
  border-radius: 16px;
  background: var(--off-white);
  border: 1px solid rgba(10, 23, 48, 0.08);
  border-left: 4px solid var(--p);
}

.deliver__point--green { --p: var(--status-good); }
.deliver__point--amber { --p: var(--pop-warm); }
.deliver__point--red { --p: var(--status-critical); }

.deliver__num {
  position: absolute;
  left: 18px;
  top: 19px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--p);
}

.deliver__point h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0 6px;
  color: var(--ink);
}

.deliver__point p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.deliver__facts {
  list-style: none;
  margin: 56px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid rgba(10, 23, 48, 0.1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.deliver__facts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deliver__facts b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.deliver__facts b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pop-warm);
  flex-shrink: 0;
}

.deliver__facts span {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ============================================
   HOW IT STARTS (dark band)
   ============================================ */
.starts {
  position: relative;
  background: var(--navy-darker);
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
}

.starts__head {
  max-width: 640px;
  margin: 0 0 48px;
}

.starts__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: #fff;
}

.starts__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Four steps are too narrow to read below ~1100px; drop to 2-up before the
   960px rule further down takes them to a single column. */
@media (max-width: 1100px) {
  .starts__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.starts__steps li {
  background: rgba(249, 249, 249, 0.05);
  border: 1px solid rgba(249, 249, 249, 0.14);
  border-radius: 18px;
  padding: 30px 28px 32px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.starts__steps li:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 135, 47, 0.45);
}

.starts__num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--pop-warm);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 14px;
}

.starts__steps h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff;
}

.starts__steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(249, 249, 249, 0.7);
}

.starts__cta {
  margin-top: 40px;
}

.starts .btn--primary {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 14.5px;
  background: var(--pop-warm);
  border-color: transparent;
  color: #fff;
}

.starts .btn--primary:hover {
  background: var(--pop-warm-bright);
  transform: translateY(-2px);
}

@media (max-width: 960px) {
  .deliver__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .deliver__facts {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .starts__steps {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  position: relative;
  background: #ffffff;
  color: var(--ink-black);
  overflow: hidden;
  isolation: isolate;
}

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

.contact__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--ink-black);
}

.contact__copy p {
  font-size: 18px;
  color: rgba(4, 29, 74, 0.72);
  margin: 0;
  max-width: 42ch;
}

.contact__card {
  background: var(--off-white);
  color: var(--ink-black);
  padding: 44px 40px;
  border-radius: 20px;
  border: 2px solid var(--red);
  box-shadow: 0 20px 50px rgba(185, 28, 60, 0.12);
}

.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(4, 29, 74, 0.1);
  font-size: 15px;
}

.contact__row:first-child {
  padding-top: 0;
}

.contact__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact__row dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

.contact__row dd {
  margin: 0;
  text-align: right;
}

.contact__row a {
  color: var(--ink-black);
  text-decoration: none;
}

.contact__row a:hover {
  color: var(--red-bright);
}

/* ============================================
   PORTAL LOGIN
   ============================================ */
.portal-body {
  background: var(--cream);
}

.portal {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  background: var(--cream);
  color: var(--ink-black);
  overflow: hidden;
  isolation: isolate;
}

.portal__wrap {
  display: flex;
  justify-content: center;
}

.portal__card {
  width: 100%;
  max-width: 440px;
  background: var(--off-white);
  border-radius: 20px;
  border: 2px solid var(--red);
  box-shadow: 0 20px 50px rgba(185, 28, 60, 0.12);
  padding: 30px 34px 28px;
}

.portal__card h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.portal__intro {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(4, 29, 74, 0.68);
  margin: 0 0 16px;
  max-width: 42ch;
}

.portal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.portal__field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.portal__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal__forgot {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(4, 29, 74, 0.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.portal__forgot:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.portal__field input[type="email"],
.portal__field input[type="password"] {
  /* Deliberately not var(--font-body): that pulls in the async-loaded
     IBM Plex Sans, which swaps in after first paint and makes typed/
     placeholder text visibly change font mid-interaction. These two
     fields stick to the system stack so they render consistently from
     the first frame. */
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--ink-black);
  background: rgba(4, 29, 74, 0.03);
  border: 1px solid rgba(4, 29, 74, 0.15);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.portal__field input[type="email"]::placeholder,
.portal__field input[type="password"]::placeholder {
  color: rgba(4, 29, 74, 0.35);
}

/* Browser autofill (e.g. Chrome filling a saved login on page load)
   renders with its own internal font/size/background until the field is
   focused, ignoring the plain "color"/"background" rules above — hence
   the visible font/size jump the moment you click in. -webkit-text-fill-color
   and the giant-transition trick are the only reliable way to force it to
   match our actual input styling from the first frame. */
.portal__field input[type="email"]:-webkit-autofill,
.portal__field input[type="password"]:-webkit-autofill,
.portal__field input[type="email"]:-webkit-autofill:hover,
.portal__field input[type="password"]:-webkit-autofill:hover,
.portal__field input[type="email"]:-webkit-autofill:focus,
.portal__field input[type="password"]:-webkit-autofill:focus {
  /* !important is required here — Chrome's autofill stylesheet wins the
     cascade on font-family/font-size even at equal specificity; color
     doesn't need it because -webkit-text-fill-color is a separate,
     non-competing property, but the font properties do. */
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: normal !important;
  -webkit-text-fill-color: var(--ink-black);
  -webkit-box-shadow: 0 0 0 1000px rgba(4, 29, 74, 0.03) inset;
  box-shadow: 0 0 0 1000px rgba(4, 29, 74, 0.03) inset;
  caret-color: var(--ink-black);
  transition: background-color 5000s ease-in-out 0s;
}

.portal__field input[type="email"]:focus,
.portal__field input[type="password"]:focus {
  border-color: var(--red);
  background: rgba(255, 255, 255, 0.9);
}

.portal__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(4, 29, 74, 0.72);
  cursor: pointer;
}

.portal__checkbox input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
}

.portal .btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 999px;
  padding: 13px 28px;
}

.portal .btn--primary {
  background: var(--red);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(60, 184, 255, 0.35);
}

.portal .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(60, 184, 255, 0.45);
}

.portal__submit {
  justify-content: center;
  margin-top: 4px;
  cursor: pointer;
  font-size: 14px;
}

.portal__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--red-bright);
  min-height: 16px;
}

.portal__note--error {
  color: var(--red-bright);
}

.portal__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(4, 29, 74, 0.45);
}

.portal__divider::before,
.portal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(4, 29, 74, 0.12);
}

.portal__helper {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(4, 29, 74, 0.65);
  margin: 0 0 8px;
}

.portal__contact-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--red-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 32, 42, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.portal__contact-link:hover {
  color: var(--ink-black);
  border-color: var(--ink-black);
}

@media (max-width: 560px) {
  .portal {
    padding: 120px 0 60px;
  }

  .portal__card {
    padding: 32px 24px 28px;
  }
}

.dash-demo-flag {
  margin: 0;
  background: var(--amber);
  color: var(--navy-darker);
}

.dash-demo-flag .wrap {
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ============================================
   DASHBOARD — upsell
   ============================================ */
.dash-upsell {
  background: var(--off-white);
  color: var(--ink);
  padding-top: 116px;
  padding-bottom: 100px;
}

.dash-upsell .section-head h2 {
  color: var(--navy-deep);
  max-width: 760px;
  font-size: clamp(28px, 3.6vw, 40px);
}

.dash-upsell .section-head h2 .brand-highlight {
  color: var(--pop-warm);
}

.upsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}

.upsell-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: 2px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upsell-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0a6ba3;
  border: 1px solid rgba(59, 175, 242, 0.5);
  padding: 4px 10px;
  border-radius: 2px;
}

.upsell-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--navy-deep);
}

.upsell-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}

.upsell-card__cta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 29, 74, 0.3);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.upsell-card__cta:hover {
  color: var(--red);
  border-color: var(--red);
}

.dash-upsell__note {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 70ch;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

/* ============================================
   WIDGET DASHBOARD — the "wow" client-overview template
   (first shipped on Meridian's page). A simpler hero, then any
   number of labeled widget groups made of these card types:
   a stat tile, a meter, a donut, a small bar chart, or a compact
   list. Chart marks (gauges/donut/bars) deliberately use a
   colorblind-validated chart palette, NOT the site's decorative
   brand tokens — this is meant to read as an analytics product,
   consistent from client to client, not a themed marketing page.
   Fixed-meaning colors (--status-good/warning/critical) still
   carry the same meaning here as everywhere else on the site.
   ============================================ */
:root {
  --chart-surface: #ffffff;
  --chart-blue: #2a78d6;
  --chart-orange: #eb6834;
  --chart-track: #e7e5e0;
  --chart-ink: #16181d;
  --chart-ink-soft: #63687a;
  --chart-muted: #9a9fae;
}

.dash-hero {
  background: var(--navy-darker);
  color: var(--off-white);
  padding: 44px 0 40px;
}

.dash-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dash-hero .eyebrow { margin-bottom: 10px; }

.dash-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  margin: 0 0 6px;
}

.dash-hero p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(249, 249, 249, 0.6);
  margin: 0;
}

.dash-hero__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-good);
  flex-shrink: 0;
  padding-top: 6px;
}

.dash-hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-good);
  box-shadow: 0 0 0 0 rgba(31, 138, 94, 0.55);
  animation: dash-pulse 2s ease-out infinite;
  flex-shrink: 0;
}

.widget-body {
  background: var(--paper);
  padding: 40px 0 80px;
}

.widget-group {
  margin-bottom: 44px;
}

.widget-group:last-child {
  margin-bottom: 0;
}

.widget-group__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-group__title::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--pop-warm);
  display: inline-block;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.widget-card {
  background: var(--chart-surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(11, 20, 40, 0.12);
}

.widget-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.widget-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--chart-ink);
  margin: 0;
}

.widget-card__expand {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--chart-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 1050px) {
  .col-span-3, .col-span-4, .col-span-5, .col-span-6, .col-span-7, .col-span-8 { grid-column: span 6; }
}
@media (max-width: 680px) {
  .col-span-3, .col-span-4, .col-span-5, .col-span-6, .col-span-7, .col-span-8, .col-span-12 { grid-column: span 12; }
}

/* Stat tile */
.stat-tile__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--chart-ink);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-tile__value--warning { color: var(--status-warning); }

.stat-tile__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--chart-ink-soft);
  margin-bottom: 14px;
}

.stat-tile__spark {
  width: 100%;
  height: 30px;
  margin-top: auto;
}

.stat-tile__spark polyline {
  fill: none;
  stroke: var(--chart-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Meter (radial gauge) — severity fill, per dataviz skill: the fill
   carries state (good/warning/critical), the track is a neutral gray. */
.meter {
  display: flex;
  align-items: center;
  gap: 18px;
}

.meter svg { flex-shrink: 0; }

.meter__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  fill: var(--chart-ink);
}

.meter__caption {
  font-size: 13px;
  color: var(--chart-ink-soft);
  line-height: 1.5;
}

.meter__caption strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.meter__caption strong.state--good { color: var(--status-good); }
.meter__caption strong.state--warning { color: var(--status-warning); }
.meter__caption strong.state--critical { color: var(--status-critical); }

/* Donut + legend */
.donut-widget { display: flex; align-items: center; gap: 20px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.donut-legend__row { display: flex; align-items: center; gap: 8px; color: var(--chart-ink-soft); }
.donut-legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.donut-legend__row strong { color: var(--chart-ink); font-family: var(--font-mono); }

/* Bar chart axis labels */
.bar-axis-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: var(--chart-muted);
}

/* Compact list widgets (e.g. Needs Review / Recent Activity previews) */
.widget-list { display: flex; flex-direction: column; gap: 10px; }
.widget-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.widget-list__row:last-child { border-bottom: none; padding-bottom: 0; }
.widget-list__row span:first-child { color: var(--chart-ink); font-weight: 500; }
.widget-list__reason { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--status-warning); }
.widget-list__status--overdue { color: var(--status-critical); }
.widget-list__more { font-family: var(--font-mono); font-size: 12px; color: var(--red); margin-top: 12px; }

/* Drill-down modal */
.drilldown-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.drilldown-backdrop.is-open { display: flex; }
.drilldown-modal {
  background: #fff;
  border-radius: 8px;
  max-width: 620px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 30px 32px;
}
.drilldown-modal__close {
  float: right;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--chart-muted);
}
.drilldown-modal h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--navy-deep);
}
.drilldown-modal p.modal-sub { color: var(--chart-ink-soft); font-size: 14px; margin: 0 0 20px; }
.drilldown-modal table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.drilldown-modal th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--chart-muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.drilldown-modal td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.drilldown-modal tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .meridian-logo {
    width: min(100%, 480px);
  }

  .upsell-grid {
    grid-template-columns: 1fr;
  }
}

.meridian-logo {
  width: clamp(420px, 46vw, 760px);
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  display: block;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--navy-darker);
  color: rgba(249, 249, 249, 0.55);
  padding: 48px 0;
}

/* Homepage-only: footer matches the light gray nav bar instead of
   staying dark navy. Scoped so dashboard pages (dark nav + dark
   footer) are unaffected. */
body:not(.meridian-theme) .site-footer {
  background: #eef1f4;
  color: var(--ink-soft);
}

.slant-footer {
  position: relative;
  clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: 56px;
}

@media (max-width: 700px) {
  .slant-footer {
    clip-path: polygon(0 0, 100% 24px, 100% 100%, 0 100%);
    margin-top: -24px;
    padding-top: 48px;
  }
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer img {
  height: 30px;
  opacity: 0.9;
}

.site-footer small {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .hero__sub {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .site-nav__tenant {
    display: none;
  }

  .contact__row dd {
    text-align: right;
  }
}

@media (max-width: 480px) {
  .site-nav__portal {
    font-size: 0;
  }

  .site-nav__portal::before {
    width: 9px;
    height: 9px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }

  .hero {
    padding: 150px 0 80px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }

  .contact__card {
    padding: 28px;
  }

  .contact__row {
    flex-direction: column;
    gap: 4px;
  }

  .contact__row dd {
    text-align: left;
  }
}

/* The footer logo became a link to your own portal home (2026-09-12). Without
   this it picks up the default link underline, and the inline-block stops the
   anchor adding a descender gap under the image. */
.site-footer__home { text-decoration: none; display: inline-block; line-height: 0; }