/* ==========================================================================
   /support.html — page-specific styles
   --------------------------------------------------------------------------
   Namespace: .su-*  (support).
   Reuses .page-hero / .lp-hero, .sec, .lp-shell, .sec__eyebrow / __h2 /
   __lede from sections.css. Severity pill palette is shared with the
   data-handling pills on /security.html in spirit but kept scoped here
   so the support page stays self-contained.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */

.su-hero .page-hero__h1 { margin-bottom: 16px; }
.su-hero .page-hero__lede { max-width: 820px; margin-bottom: 28px; }
.su-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Buttons (light bg) — used in hero. */
.su-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.su-btn--primary {
  background: var(--color-navy-800);
  color: white;
  border: 0.5px solid var(--color-navy-800);
}
.su-btn--primary:hover {
  background: var(--color-navy-700);
  border-color: var(--color-navy-700);
}
.su-btn--secondary {
  background: var(--color-bg);
  color: var(--color-navy-800);
  border: 0.5px solid var(--color-border);
}
.su-btn--secondary:hover { border-color: var(--color-navy-800); }

/* ---- Section 2: Standard vs extended ----------------------------------- */

.su-tiers__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.su-tier {
  position: relative;
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.su-tier--featured {
  border: 2px solid var(--color-teal-600);
  margin: -1.5px;
}
.su-tier__badge {
  position: absolute;
  top: -10px;
  left: 24px;
  padding: 4px 9px;
  background: var(--color-teal-600);
  color: white;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.su-tier__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.su-tier__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-navy-800);
}
.su-tier__sub {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.su-tier__divider {
  margin: 18px 0 18px;
  border-top: var(--border-thin);
}
.su-tier__group-eyebrow {
  margin: 8px 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.su-tier__group-eyebrow:not(:first-of-type) { margin-top: 18px; }
.su-tier__link {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
  align-self: flex-start;
}
.su-tier__link:hover { text-decoration: underline; }

/* Bulleted lists with check-icon (Included / Adds to standard) and
   muted-dot (Not included). The base.css ul reset zeroes list-style;
   we restore via flex+gap rather than disc bullets so the icon stays
   pixel-aligned across rows. */
.su-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-navy-800);
}
.su-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}
.su-list__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-600);
  margin-top: 2px;
}
.su-list__icon svg { width: 12px; height: 12px; }
.su-list--dot li { color: var(--color-text-tertiary); }
.su-list__dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-tertiary);
  margin-top: -2px;
}

/* ---- Section 3: Severity classification ------------------------------- */

.su-severity__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.su-sev-card {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.su-sev-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.su-sev-card__level {
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.su-sev-card__d {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Severity pills — four states. Smaller variant (--sm) used in the SLA
   matrix where horizontal density is tighter. */
.su-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.su-pill--blocker  { background: #FBEAF0; color: #4B1528; }
.su-pill--critical { background: #FAEEDA; color: #412402; }
.su-pill--major    { background: #E6F1FB; color: #0E3260; }
.su-pill--minor    { background: var(--color-teal-50); color: var(--color-teal-1000); }
.su-pill--sm {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---- Section 4: Response time SLA ------------------------------------- */

.su-sla__matrix {
  background: var(--color-bg-tint);
  border-radius: var(--radius-lg);
  padding: 8px 24px;
  margin: 24px 0 16px;
  overflow-x: auto;
}
.su-sla__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--color-border);
  align-items: center;
}
.su-sla__row:last-child { border-bottom: 0; }
.su-sla__row--head {
  padding: 14px 0 12px;
  align-items: end;
}
.su-sla__head {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.su-sla__channel {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.su-sla__cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
}
.su-sla__time {
  color: var(--color-text-secondary);
}
.su-sla__time--muted { color: var(--color-text-tertiary); }
.su-sla__qual {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.su-sla__qual--muted { color: var(--color-text-tertiary); }
/* Extended column reads "faster" — bold the time numbers and tighten
   the qualifier weight. The deliberate tonal contrast against the
   Standard column communicates "faster" before the reader parses
   the numbers themselves. */
.su-sla__cell--strong .su-sla__time {
  color: var(--color-navy-800);
  font-weight: 500;
}

/* ---- Section 5: How to reach us --------------------------------------- */

.su-channels__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.su-chan {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}
.su-chan__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.su-chan__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.su-chan__d {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  flex: 1;
}
.su-chan__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
  align-self: flex-start;
}
.su-chan__link:hover { text-decoration: underline; }
.su-chan__link--mono { font-family: var(--font-mono); }

/* ---- Section 6: Already a customer? ----------------------------------- */

.su-existing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.su-tile {
  background: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.su-tile__h {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy-800);
}
.su-tile__d {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  flex: 1;
}
.su-tile__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-teal-600);
  text-decoration: none;
  align-self: flex-start;
}
.su-tile__link:hover { text-decoration: underline; }

/* ---- Callouts --------------------------------------------------------- */

.su-callout {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--color-teal-50);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.su-callout strong {
  color: var(--color-teal-1000);
  font-weight: 500;
}

/* ---- Tinted-background full-width sections (severity + existing) ----- */

.su-tinted-section {
  background: var(--color-bg-tint);
  border-top: var(--border-thin);
}
.su-tinted-section__shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 48px;
}

/* ---- Dark-navy footer CTA -------------------------------------------- */

.su-dark-section {
  background: var(--color-navy-800);
}
.su-dark-section__shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 48px;
}
.su-cta__h {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: white;
}
.su-cta__lede {
  margin: 0 0 24px;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-on-navy-muted);
}
.su-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.su-dark-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.su-dark-btn--primary {
  background: white;
  color: var(--color-navy-800);
  border: 0.5px solid white;
}
.su-dark-btn--primary:hover { background: var(--color-bg-tint); }
.su-dark-btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: white;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}
.su-dark-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
}

/* ---- Section rhythm --------------------------------------------------- */

.su-tiers .sec__lede,
.su-severity .sec__lede,
.su-sla .sec__lede,
.su-channels .sec__lede,
.su-existing .sec__lede {
  max-width: 820px;
  margin: 12px 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

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

@media (max-width: 1000px) {
  .su-channels__grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .su-hero .page-hero__inner { padding-left: 24px; padding-right: 24px; }
  .su-hero__cta { flex-direction: column; align-items: stretch; }
  .su-btn { justify-content: center; }
  .su-tiers__grid,
  .su-severity__grid,
  .su-existing__grid { grid-template-columns: 1fr; }
  .su-tier { padding: 22px; }
  .su-sla__matrix { padding: 4px 16px; }
  .su-sla__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }
  .su-sla__row--head { display: none; }
  .su-tinted-section__shell { padding: 40px 20px; }
  .su-dark-section__shell { padding: 48px 20px; }
}