/* ════════════════════════════════════════════════════════════
   TYPO.CSS — Ecommerce Website Maintenance landing page
   Fonts, color tokens and fluid type scale for this page only.
════════════════════════════════════════════════════════════ */

:root {
  --ecm-navy: #0a1230;
  --ecm-navy-2: #10193f;
  --ecm-gold: #ffb916;
  --ecm-red: #aa2121;
  --ecm-red-2: #d64545;
  --ecm-step-blue: #4ea1e8;
  --ecm-step-purple: #9b7cf0;
  --ecm-dark: #111318;
  --ecm-body: #4a5063;
  --ecm-muted: #6b7288;
  --ecm-line: #e7e9f2;
  --ecm-bg-soft: #f6f7fb;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ecm-body);
}

/* Eyebrow label (12px -> 13px) */
.ecm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, calc(11.7px + 0.1vw), 13px);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ecm-gold);
  margin-bottom: 16px;
}

/* .ecm-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ecm-gold);
  display: inline-block;
} */

.ecm-eyebrow.is-dark,
.ecm-eyebrow-dark {
  color: var(--ecm-navy);
}

.ecm-eyebrow.is-dark::before,
.ecm-eyebrow-dark::before {
  background: var(--ecm-navy);
}

/* Hero H1 (30px -> 50px) */
.ecm-h1 {
  font-size: clamp(30px, calc(24.4px + 1.4vw), 50px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: #ffffff;
  margin: 0 0 20px;
}

/* Section heading (24px -> 40px) */
.ecm-h2 {
  font-size: clamp(24px, calc(19.8px + 1.05vw), 40px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ecm-dark);
  margin: 0 0 16px;
}

/* Lead / subhead paragraph (16px -> 19px) */
.ecm-lead {
  font-size: clamp(16px, calc(14.9px + 0.28vw), 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px;
}

.ecm-lead.is-dark {
  color: #000;
}

/* Body copy (14.5px -> 16px) */
.ecm-body-copy {
  font-size: clamp(14.5px, calc(14.1px + 0.1vw), 16px);
  line-height: 1.7;
  color: var(--ecm-body);
}

/* Card title (16px -> 18px) */
.ecm-card-title {
  font-size: clamp(16px, calc(15.5px + 0.13vw), 18px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ecm-dark);

}

/* Card description (13.5px -> 15px) */
.ecm-card-desc {
  font-size: clamp(13.5px, calc(13.14px + 0.1vw), 15px);
  line-height: 1.6;
  color: #000;
  margin: 0;
}

/* Pill / value label (14px -> 15px) */
.ecm-pill-text {
  font-size: clamp(14px, calc(13.7px + 0.08vw), 15px);
  font-weight: 600;
  color: var(--ecm-dark);
}

/* Hero platform badge — "Shopify • WooCommerce • Magento" pill on the dark hero */
.ecm-hero-badge {
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}

.ecm-hero-badge-dot {
  color: var(--ecm-red-2);
  font-weight: 800;
}