/* =========================================================
   Hey Audience — Landing Page styles
   Builds on colors_and_type.css (variables only).
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ha-bone);
  color: var(--ha-ink);
  font-family: var(--ha-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }

::selection { background: var(--ha-terracotta); color: var(--ha-bone); }

/* ---------- LAYOUT ---------- */
.section {
  padding: 96px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.section--paper {
  background: var(--ha-paper);
  max-width: none;
  padding-left: max(32px, calc((100vw - 1216px) / 2));
  padding-right: max(32px, calc((100vw - 1216px) / 2));
}
.section--bone-deep {
  background: #ECE6D5;
  max-width: none;
  padding-left: max(32px, calc((100vw - 1216px) / 2));
  padding-right: max(32px, calc((100vw - 1216px) / 2));
}
.section--ink {
  background: var(--ha-ink);
  color: var(--ha-bone);
  max-width: none;
  padding-left: max(32px, calc((100vw - 1216px) / 2));
  padding-right: max(32px, calc((100vw - 1216px) / 2));
}
.inverted { color: var(--ha-bone); }
.inverted-soft { color: rgba(244, 240, 232, 0.7); }

.section__head { max-width: 820px; margin: 0 auto 64px; text-align: center; }
.section__head--narrow { max-width: 720px; }
.section__head--inverted { color: var(--ha-bone); }
.section__head .tag { margin-bottom: 18px; }
.section__head h2 { margin: 0 0 16px; }
.section__lede { color: var(--ha-ink-3); margin: 0; }
.section__head--inverted .section__lede { color: rgba(244, 240, 232, 0.65); }

/* ---------- TAGS / PILLS / CHIPS ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 4px;
  border-radius: var(--ha-radius-xs);
  font-family: var(--ha-font-mono);
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ha-ink-3);
  background: rgba(31, 27, 22, 0.04);
  border: 1px solid var(--ha-line);
}
.tag--ink {
  background: var(--ha-ink);
  color: var(--ha-bone);
  border-color: var(--ha-ink);
}
.tag--bone {
  background: rgba(244, 240, 232, 0.1);
  color: var(--ha-bone);
  border-color: rgba(244, 240, 232, 0.2);
}
.tag--terra {
  background: var(--ha-terracotta);
  color: var(--ha-bone);
  border-color: var(--ha-terracotta);
}
.tag--paper {
  background: var(--ha-paper);
  border: 0;
  color: var(--ha-ink-3);
}

.chip {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: var(--ha-radius-pill);
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  font-size: 13px;
  color: var(--ha-ink-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--ha-radius-pill);
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  font-size: 13px;
  color: var(--ha-ink-2);
  cursor: pointer;
}
.pill--active {
  background: var(--ha-ink);
  color: var(--ha-bone);
  border-color: var(--ha-ink);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--ha-radius-md);
  font-family: var(--ha-font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1), transform 80ms;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn--primary {
  background: var(--ha-terracotta);
  color: var(--ha-bone);
}
.btn--primary:hover { background: var(--ha-terracotta-hover); }
.btn--secondary {
  background: var(--ha-card);
  border-color: var(--ha-line);
  color: var(--ha-ink);
}
.btn--secondary:hover { background: var(--ha-paper-soft); }
.btn--ghost {
  background: transparent;
  color: var(--ha-ink);
  border-color: var(--ha-line);
}
.btn--ghost:hover { background: var(--ha-paper-soft); }
.btn--xs { padding: 5px 10px; font-size: 12px; border-radius: var(--ha-radius-sm); }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn--lg { padding: 13px 22px; font-size: 16px; border-radius: var(--ha-radius-md); }
.btn--icon { padding: 10px 12px; }

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 32px;
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--ha-line-soft);
}
.nav__brand { display: flex; align-items: center; }
.nav__logo { height: 28px; width: auto; }
.nav__links {
  display: flex;
  gap: 22px;
  margin-left: 24px;
  flex: 1;
}
.nav__links a {
  font-size: 14px;
  color: var(--ha-ink-2);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--ha-terracotta); }
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__meta {
  font-family: var(--ha-font-mono);
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 110px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero__copy { max-width: 640px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.eyebrow__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ha-terracotta);
}
.eyebrow__txt {
  font-family: var(--ha-font-mono);
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}

.display {
  font-family: var(--ha-font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--ha-ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.display .muted { color: var(--ha-ink-4); }
.display--md { font-size: clamp(44px, 5vw, 72px); line-height: 1.02; }
.display--hero { font-size: clamp(52px, 6.2vw, 84px); line-height: 1; }

h1.display { margin-bottom: 24px; }

.hero__lede {
  font-family: var(--ha-font-sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ha-ink-2);
  margin: 0 0 36px;
  max-width: 540px;
  text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; }

.hero__trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--green { background: var(--ha-green); }
.dot--terra { background: var(--ha-terracotta); }
.dot--ink { background: var(--ha-ink); }

/* Hero product preview */
.hero__product {
  position: relative;
  align-self: stretch;
}

.prod-window {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-xl);
  box-shadow: var(--ha-shadow-3);
  overflow: hidden;
  transform: rotate(-0.4deg);
}
.prod-window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ha-line-soft);
  background: var(--ha-bone);
}
.prod-window__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ha-ink);
  font-weight: 500;
}
.prod-window__sep { color: var(--ha-ink-4); font-family: var(--ha-font-mono); }
.prod-window__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ha-green);
  letter-spacing: var(--ha-track-tag); text-transform: uppercase;
}
.prod-window__meta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ha-green); display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.prod-window__body {
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.prod-window__composer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ha-line-soft);
  background: var(--ha-bone);
}
.composer__placeholder { font-size: 13px; color: var(--ha-ink-4); }
.composer__send {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-terracotta); color: var(--ha-bone);
  border-radius: var(--ha-radius-sm);
}

/* Annotation badges around hero product */
.anno {
  position: absolute;
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-md);
  padding: 8px 12px;
  box-shadow: var(--ha-shadow-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.anno__label {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink);
  font-weight: 600;
}
.anno__sub {
  font-size: 10px;
  color: var(--ha-ink-3);
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
}
.anno--ampel {
  top: -22px;
  left: -36px;
  transform: rotate(-3deg);
}
.anno--ampel::after {
  content: "";
  position: absolute;
  right: -10px; bottom: -28px;
  width: 1px; height: 28px;
  background: var(--ha-ink-4);
}
.anno--source {
  bottom: 22%;
  right: -36px;
  transform: rotate(2deg);
}
.anno--source::before {
  content: "";
  position: absolute;
  left: -32px; top: 50%;
  width: 30px; height: 1px;
  background: var(--ha-ink-4);
}

/* =========================================================
   MESSAGES (used in hero + chat widgets)
   ========================================================= */
.msg {
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 13px;
  border-radius: 13px;
  max-width: 85%;
}
.msg--user {
  align-self: flex-end;
  background: var(--ha-ink);
  color: var(--ha-bone);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.msg--persona {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  color: var(--ha-ink);
  border-bottom-left-radius: 4px;
}
.msg--lg { font-size: 14px; padding: 11px 15px; }
.msg--sm { font-size: 13px; }

.msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  align-self: flex-start;
  max-width: 88%;
}
.msg-row--ghost { opacity: 0.6; align-items: center; }
.msg-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg-cite {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-left: 4px;
}

.ampel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--ha-radius-pill);
  font-family: var(--ha-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.ampel__dot { width: 7px; height: 7px; border-radius: 50%; }
.ampel--green { background: var(--ha-green-soft); color: #3a4f25; }
.ampel--green .ampel__dot { background: var(--ha-green); }
.ampel--amber { background: var(--ha-amber-soft); color: #6e5618; }
.ampel--amber .ampel__dot { background: var(--ha-amber); }
.ampel--red { background: var(--ha-red-soft); color: #722a18; }
.ampel--red .ampel__dot { background: var(--ha-red); }

.ampel-source { font-size: 11px; color: var(--ha-ink-3); }
.cite-link { font-size: 11px; color: var(--ha-terracotta); }
.cite-link:hover { text-decoration: underline; }

/* Avatars */
.avatar {
  display: inline-block;
  background-size: cover;
  background-position: center 25%;
  background-color: var(--ha-paper);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(31, 27, 22, 0.08);
  width: 40px; height: 40px;
}
.avatar--xs { width: 22px; height: 22px; }
.avatar--sm { width: 28px; height: 28px; }
.avatar--md { width: 44px; height: 44px; }

.dots-line { display: inline-flex; align-items: center; gap: 8px; color: var(--ha-ink-3); font-size: 12px; }
.dots { display: inline-flex; gap: 3px; }
.dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ha-ink-3);
  animation: dot 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* =========================================================
   PROBLEM (Versus)
   ========================================================= */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.versus__col {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.versus__col--us { border-color: var(--ha-terracotta-soft); }
.versus__role { display: flex; align-items: center; gap: 10px; }
.versus__n {
  font-size: 11px; letter-spacing: var(--ha-track-tag); text-transform: uppercase;
  color: var(--ha-ink-3);
}
.versus__title { margin: 0; }
.versus__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.versus__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; line-height: 1.4; color: var(--ha-ink-2);
}
.bullet {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ha-ink);
  margin-top: 8px; flex-shrink: 0;
}
.bullet--terra { background: var(--ha-terracotta); }

.versus__quote {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--ha-paper);
  border-left: 2px solid var(--ha-ink);
  font-size: 14px; line-height: 1.45;
  color: var(--ha-ink-2);
  font-style: italic;
  border-radius: 0 var(--ha-radius-sm) var(--ha-radius-sm) 0;
}
.versus__quote-src {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: var(--ha-track-tag); text-transform: uppercase;
  color: var(--ha-ink-3);
  font-style: normal;
}

.versus__signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.versus__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ha-ink-4);
}
.versus__arrow span {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
}

/* =========================================================
   GAP CARDS
   ========================================================= */
.gaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.gap-card {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gap-card__head { display: flex; align-items: center; gap: 12px; }
.gap-card__num {
  font-size: 11px; letter-spacing: var(--ha-track-tag);
  color: var(--ha-ink-4);
}
.gap-card__head h3 { margin: 0; }
.gap-card__verdict {
  margin-top: auto;
  font-family: var(--ha-font-mono);
  font-size: 11px;
  color: var(--ha-ink-4);
  padding-top: 16px;
  border-top: 1px dashed var(--ha-line);
}

/* =========================================================
   REVEAL section
   ========================================================= */
.reveal {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.reveal .tag { margin-bottom: 20px; }
.reveal__lede {
  max-width: 760px;
  margin: 24px auto 48px;
  color: var(--ha-ink-2);
  text-wrap: pretty;
}
.reveal__bullets {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--ha-line);
}
.reveal__bullet { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.reveal__num {
  font-size: 56px;
  font-weight: 500;
  color: var(--ha-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.reveal__lbl {
  font-size: 13px;
  color: var(--ha-ink-3);
}
.reveal__ref { color: var(--ha-terracotta); }
.reveal__ref:hover { text-decoration: underline; }

/* =========================================================
   WIDGETS (Im Produkt)
   ========================================================= */
.widget {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
  margin: 0 auto 88px;
  max-width: 1216px;
}
.widget--reverse { grid-template-columns: 1.15fr 0.85fr; }
.widget--reverse .widget__intro { order: 2; }
.widget--reverse .widget__device { order: 1; }

.widget__intro {
  max-width: 440px;
  position: sticky;
  top: 96px;
  align-self: start;
  padding-top: 8px;
}

/* =========================================================
   Scroll-reveal helpers
   ========================================================= */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0, 0, 1),
    transform 0.7s cubic-bezier(0.2, 0, 0, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.fade-in {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.2, 0, 0, 1);
}
.fade-in.is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.widget__num {
  display: inline-block;
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  color: var(--ha-ink-4);
  margin-bottom: 14px;
}
.widget__title { margin: 0 0 16px; }
.widget__desc { color: var(--ha-ink-2); margin: 0 0 18px; }
.widget__bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.widget__bullets li {
  font-size: 14px;
  color: var(--ha-ink-2);
  padding-left: 18px;
  position: relative;
}
.widget__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 1px;
  background: var(--ha-terracotta);
}

/* Device frame (used for all widget mockups) */
.device {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-xl);
  box-shadow: var(--ha-shadow-3);
  overflow: hidden;
}
.device__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ha-line-soft);
  background: var(--ha-bone);
}
.device__bar--mini { padding: 10px 14px; }
.device__crumbs {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--ha-ink);
}
.device__sep { color: var(--ha-ink-4); font-family: var(--ha-font-mono); }
.device__crumb { color: var(--ha-ink); }
.device__crumb-meta {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}
.device__bar-actions { display: flex; gap: 8px; align-items: center; }

.device__body { padding: 20px 22px; }

/* Filter rail */
.filter-rail {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px 18px;
  align-items: center;
  padding-bottom: 16px;
}
.filter-rail__row { display: contents; }
.filter-rail__lbl {
  font-family: var(--ha-font-mono);
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}
.filter-rail__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.result-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-top: 1px solid var(--ha-line-soft);
  border-bottom: 1px solid var(--ha-line-soft);
  margin-bottom: 14px;
}
.result-bar__count { display: flex; align-items: baseline; gap: 10px; }
.result-bar__big {
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ha-ink);
}
.result-bar__small { font-size: 13px; color: var(--ha-ink-3); }
.result-bar__actions { display: flex; align-items: center; gap: 8px; }
.result-bar__lbl {
  font-size: 10px; letter-spacing: var(--ha-track-tag);
  text-transform: uppercase; color: var(--ha-ink-3);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pcard {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pcard__head { display: flex; align-items: center; gap: 10px; }
.pcard__id { min-width: 0; }
.pcard__name { font-size: 14px; font-weight: 600; color: var(--ha-ink); }
.pcard__meta {
  font-size: 9px; letter-spacing: var(--ha-track-tag);
  color: var(--ha-ink-3); margin-top: 2px;
}
.pcard__quote {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ha-ink-2);
}
.pcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.pcard__tags .tag { font-size: 9px; padding: 3px 6px 2px; }
.pcard--more {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ha-paper);
  border-style: dashed;
  color: var(--ha-ink-3);
}
.pcard__more {
  font-size: 13px;
  color: var(--ha-ink-2);
  letter-spacing: 0;
}
.pcard__more-sub { font-size: 11px; color: var(--ha-ink-3); }

/* Chat device */
.device--chat .device__body--chat {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.banner {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ha-paper);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-md);
  color: var(--ha-ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.banner svg { flex-shrink: 0; margin-top: 1px; color: var(--ha-ink-3); }

.device__composer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 28px;
  border-top: 1px solid var(--ha-line-soft);
  background: var(--ha-bone);
}
.composer {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-md);
  padding: 10px 14px;
}
.composer__placeholder { font-size: 14px; color: var(--ha-ink-4); }
.composer__hint { font-size: 10px; color: var(--ha-ink-4); }
.device__foot {
  padding: 6px 28px 16px;
  font-size: 11px;
  color: var(--ha-ink-4);
  text-align: center;
  background: var(--ha-bone);
}

/* Mini devices: survey + panel chat */
.widget-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 0 auto 88px;
  max-width: 1216px;
}
.widget-mini { display: flex; flex-direction: column; gap: 22px; }
.widget-mini__intro { max-width: 560px; }
.widget-mini__intro .widget__title { margin: 0 0 12px; }
.device--mini { display: flex; flex-direction: column; }

.device__body--survey {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.survey__q {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ha-line-soft);
}
.survey__qlbl {
  font-size: 10px; letter-spacing: var(--ha-track-tag);
  text-transform: uppercase; color: var(--ha-ink-3);
}
.survey__qtxt {
  font-size: 16px; font-weight: 600;
  color: var(--ha-ink);
  line-height: 1.3;
}

.survey__bars { display: flex; flex-direction: column; gap: 14px; }
.bar { display: flex; flex-direction: column; gap: 6px; }
.bar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.bar__name { font-size: 14px; color: var(--ha-ink); font-weight: 500; }
.bar__pct { font-size: 14px; color: var(--ha-ink); font-weight: 500; }
.bar__track {
  height: 8px;
  background: var(--ha-paper);
  border-radius: var(--ha-radius-pill);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  border-radius: var(--ha-radius-pill);
  transition: width 1.1s cubic-bezier(0.2, 0, 0, 1);
}
.bar__meta {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}
.survey__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--ha-line-soft);
  font-size: 11px;
  color: var(--ha-ink-3);
}

/* Panel chat (clusters) */
.device__body--panelchat {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.cluster {
  background: var(--ha-bone);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cluster--muted { background: transparent; border-style: dashed; }
.cluster__head { display: flex; align-items: baseline; gap: 12px; }
.cluster__pct {
  font-size: 18px;
  font-weight: 500;
  color: var(--ha-terracotta);
  letter-spacing: -0.01em;
  min-width: 48px;
}
.cluster--muted .cluster__pct { color: var(--ha-ink-4); }
.cluster__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ha-ink);
  line-height: 1.35;
}
.cluster__quote {
  display: flex; align-items: flex-start; gap: 8px;
  padding-left: 60px;
  font-size: 13px;
  color: var(--ha-ink-2);
  font-style: italic;
  line-height: 1.4;
}

/* =========================================================
   QBLOCK (six questions)
   ========================================================= */
.qblock {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-xl);
  padding: 56px;
  max-width: 1216px;
  margin: 32px auto 0;
}
.qblock__head { max-width: 620px; margin-bottom: 32px; }
.qblock__head h3 { margin: 0 0 12px; }
.qblock__head p { margin: 0; color: var(--ha-ink-3); }
.qgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ha-line-soft);
  border-left: 1px solid var(--ha-line-soft);
}
.qcell {
  padding: 24px;
  border-right: 1px solid var(--ha-line-soft);
  border-bottom: 1px solid var(--ha-line-soft);
  display: flex; flex-direction: column; gap: 10px;
}
.qcell__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-paper);
  border-radius: var(--ha-radius-md);
  color: var(--ha-terracotta);
  margin-bottom: 4px;
}
.qcell__t {
  font-family: var(--ha-font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ha-ink);
  margin: 0;
}
.qcell__d {
  font-size: 14px;
  color: var(--ha-ink-2);
  line-height: 1.45;
  margin: 0;
}

/* =========================================================
   TECHNIK section (ink)
   ========================================================= */
.tech {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.tech__card {
  background: rgba(244, 240, 232, 0.04);
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: var(--ha-radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.tech__num {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  color: rgba(244, 240, 232, 0.45);
}
.tech__card h3 { margin: 0; }
.tech__tag {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-terracotta);
  padding-top: 12px;
  border-top: 1px dashed rgba(244, 240, 232, 0.12);
}

/* =========================================================
   STUDY card
   ========================================================= */
.study {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.study__copy h2 { margin: 16px 0 20px; }
.study__lede { color: var(--ha-ink-2); margin: 0 0 16px; }
.study__body { color: var(--ha-ink-2); margin: 0 0 16px; }
.study__bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--ha-ink-2);
}
.study__bullets li {
  padding-left: 18px;
  position: relative;
}
.study__bullets li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--ha-terracotta);
  font-weight: 600;
}
.stat-card {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-xl);
  padding: 36px 32px;
  text-align: left;
  box-shadow: var(--ha-shadow-2);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: var(--ha-terracotta-soft);
  border-radius: 50%;
  opacity: 0.4;
}
.stat-card__lbl {
  position: relative;
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-3);
}
.stat-card__num {
  position: relative;
  font-family: var(--ha-font-display);
  font-size: 144px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ha-terracotta);
  margin: 8px 0 12px;
}
.stat-card__unit {
  font-size: 56px;
  margin-left: 6px;
  letter-spacing: -0.02em;
}
.stat-card__body {
  position: relative;
  font-size: 14px;
  color: var(--ha-ink-2);
  line-height: 1.5;
  margin: 0 0 18px;
}
.stat-card__ref {
  position: relative;
  font-size: 11px;
  color: var(--ha-terracotta);
  text-decoration: none;
}
.stat-card__ref:hover { text-decoration: underline; }

/* =========================================================
   NOTS (what it isn't)
   ========================================================= */
.nots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.not-card {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.not-card h3 { margin: 0; }
.not-card p { margin: 0; }
.not-card__x {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-red-soft);
  color: var(--ha-red);
  border-radius: var(--ha-radius-sm);
}

/* =========================================================
   STEPS
   ========================================================= */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1216px;
  margin-left: auto;
  margin-right: auto;
}
.step {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.step__head { display: flex; align-items: center; gap: 12px; }
.step__num {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  color: var(--ha-terracotta);
  font-weight: 600;
}
.step h3 { margin: 0; }
.step p { margin: 0; }

.value {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 32px;
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius-lg);
}
.value__title { margin: 0 0 16px; }
.value__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.value__list li {
  display: flex; align-items: baseline; gap: 16px;
  font-size: 16px;
  color: var(--ha-ink-2);
  line-height: 1.4;
  padding-left: 0;
}
.value__num {
  font-size: 24px;
  color: var(--ha-terracotta);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 24px;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta-section {
  padding: 32px;
  max-width: 1280px;
  margin: 0 auto 80px;
}
.cta-card {
  background: var(--ha-ink);
  color: var(--ha-bone);
  border-radius: var(--ha-radius-xl);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-card .display { color: var(--ha-bone); }
.cta-card .tag--ink {
  background: rgba(244, 240, 232, 0.1);
  color: var(--ha-bone);
  border-color: rgba(244, 240, 232, 0.2);
  margin-bottom: 24px;
}
.cta-card__lede {
  color: rgba(244, 240, 232, 0.7);
  margin: 24px 0 32px;
  max-width: 540px;
  text-wrap: pretty;
}
.cta-card__actions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.cta-card .btn--ghost {
  background: transparent;
  border-color: rgba(244, 240, 232, 0.2);
  color: var(--ha-bone);
}
.cta-card .btn--ghost:hover { background: rgba(244, 240, 232, 0.08); }
.cta-card__small {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.5);
}

.cta-card__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.cta-stamp {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 22px 32px;
  border: 1px solid rgba(244, 240, 232, 0.2);
  border-radius: var(--ha-radius-md);
  background: rgba(244, 240, 232, 0.04);
}
.cta-stamp__l1, .cta-stamp__l2, .cta-stamp__l3 {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
  text-align: center;
  line-height: 1.4;
}
.cta-stamp__big {
  font-family: var(--ha-font-display);
  font-size: 88px;
  font-weight: 600;
  color: var(--ha-terracotta);
  line-height: 0.9;
  margin: 6px 0;
  letter-spacing: -0.03em;
}
.cta-personas {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 6px;
  justify-content: center;
}
.cta-personas .avatar {
  box-shadow: inset 0 0 0 2px var(--ha-ink);
}

/* =========================================================
   VOICE CALL OVERLAY (widget 2)
   ========================================================= */
.widget__device--stacked {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.voicecall {
  background: var(--ha-ink);
  color: var(--ha-bone);
  border-radius: var(--ha-radius-xl);
  padding: 22px 24px 20px;
  box-shadow: var(--ha-shadow-3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(244, 240, 232, 0.08);
}
.voicecall--standalone { padding: 28px 28px 24px; }

/* Call timeline */
.voicecall__timeline {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 240, 232, 0.1);
  display: flex; flex-direction: column; gap: 10px;
}
.voicecall__timeline-lbl {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.45);
}
.vct {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.vct__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(244, 240, 232, 0.04);
  border: 1px solid rgba(244, 240, 232, 0.06);
  border-radius: var(--ha-radius-sm);
  font-size: 13px;
  color: rgba(244, 240, 232, 0.7);
}
.vct__row--active {
  background: rgba(200, 85, 61, 0.12);
  border-color: rgba(200, 85, 61, 0.4);
  color: var(--ha-bone);
}
.vct__ts {
  font-size: 11px;
  color: rgba(244, 240, 232, 0.45);
  letter-spacing: 0;
}
.vct__row--active .vct__ts { color: var(--ha-terracotta); }
.vct__q { line-height: 1.35; }
.voicecall__head {
  display: flex; align-items: center; justify-content: space-between;
}
.voicecall__head-l { display: flex; align-items: center; gap: 8px; }
.voicecall__state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.7);
}
.voicecall__rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ha-terracotta);
  display: inline-block;
  animation: pulse 1.2s ease-in-out infinite;
}
.voicecall__timer {
  font-size: 14px;
  color: var(--ha-bone);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.voicecall__body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.voicecall__avatar-wrap {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.voicecall__avatar {
  width: 56px; height: 56px;
  border: 2px solid rgba(244, 240, 232, 0.15);
  box-shadow: inset 0 0 0 1px rgba(31, 27, 22, 0.5);
  position: relative;
  z-index: 2;
}
.voicecall__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--ha-terracotta);
  opacity: 0;
  animation: ring 1.8s ease-out infinite;
}
.voicecall__pulse--2 { animation-delay: 0.9s; }
@keyframes ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.voicecall__id { min-width: 0; flex: 1; }
.voicecall__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ha-bone);
  letter-spacing: -0.01em;
}
.voicecall__meta {
  font-size: 10px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.55);
  margin-top: 2px;
}
.voicecall__transcribe {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(244, 240, 232, 0.85);
  line-height: 1.45;
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--ha-terracotta);
}

.voicecall__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
}
.voicecall__wave span {
  display: block;
  width: 3px;
  background: rgba(244, 240, 232, 0.9);
  border-radius: 2px;
  animation: wave 1.1s ease-in-out infinite;
}
.voicecall__wave span:nth-child(odd)  { background: var(--ha-terracotta); }
.voicecall__wave span:nth-child(1) { animation-delay: -0.0s; height: 6px; }
.voicecall__wave span:nth-child(2) { animation-delay: -0.05s; height: 12px; }
.voicecall__wave span:nth-child(3) { animation-delay: -0.1s; height: 18px; }
.voicecall__wave span:nth-child(4) { animation-delay: -0.15s; height: 22px; }
.voicecall__wave span:nth-child(5) { animation-delay: -0.2s; height: 14px; }
.voicecall__wave span:nth-child(6) { animation-delay: -0.25s; height: 26px; }
.voicecall__wave span:nth-child(7) { animation-delay: -0.3s; height: 10px; }
.voicecall__wave span:nth-child(8) { animation-delay: -0.35s; height: 20px; }
.voicecall__wave span:nth-child(9) { animation-delay: -0.4s; height: 28px; }
.voicecall__wave span:nth-child(10){ animation-delay: -0.45s; height: 16px; }
.voicecall__wave span:nth-child(11){ animation-delay: -0.5s; height: 8px; }
.voicecall__wave span:nth-child(12){ animation-delay: -0.55s; height: 24px; }
.voicecall__wave span:nth-child(13){ animation-delay: -0.6s; height: 14px; }
.voicecall__wave span:nth-child(14){ animation-delay: -0.65s; height: 22px; }
.voicecall__wave span:nth-child(15){ animation-delay: -0.7s; height: 18px; }
.voicecall__wave span:nth-child(16){ animation-delay: -0.75s; height: 12px; }
.voicecall__wave span:nth-child(17){ animation-delay: -0.8s; height: 26px; }
.voicecall__wave span:nth-child(18){ animation-delay: -0.85s; height: 8px; }
.voicecall__wave span:nth-child(19){ animation-delay: -0.9s; height: 16px; }
.voicecall__wave span:nth-child(20){ animation-delay: -0.95s; height: 22px; }
.voicecall__wave span:nth-child(21){ animation-delay: -1.0s; height: 14px; }
.voicecall__wave span:nth-child(22){ animation-delay: -1.05s; height: 10px; }
.voicecall__wave span:nth-child(23){ animation-delay: -1.1s; height: 18px; }
.voicecall__wave span:nth-child(24){ animation-delay: -1.15s; height: 8px; }
.voicecall__wave span:nth-child(25){ animation-delay: -1.2s; height: 14px; }
.voicecall__wave span:nth-child(26){ animation-delay: -1.25s; height: 6px; }
.voicecall__wave span:nth-child(27){ animation-delay: -1.3s; height: 12px; }
.voicecall__wave span:nth-child(28){ animation-delay: -1.35s; height: 4px; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.voicecall__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 240, 232, 0.1);
}
.voicecall__controls { display: flex; gap: 8px; }
.vc-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(244, 240, 232, 0.08);
  border: 1px solid rgba(244, 240, 232, 0.12);
  color: var(--ha-bone);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms;
}
.vc-btn:hover { background: rgba(244, 240, 232, 0.15); }
.vc-btn--end {
  background: var(--ha-terracotta);
  border-color: var(--ha-terracotta);
}
.vc-btn--end:hover { background: var(--ha-terracotta-hover); }

/* =========================================================
   SLIM FOOTER
   ========================================================= */
.foot--slim {
  padding: 28px 32px;
  background: var(--ha-paper);
  border-top: 1px solid var(--ha-line);
}
.foot__inner {
  max-width: 1216px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.foot__brand { display: inline-flex; align-items: center; }
.foot__copy {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-4);
}
.foot__link {
  font-size: 11px;
  letter-spacing: var(--ha-track-tag);
  text-transform: uppercase;
  color: var(--ha-ink-2);
}
.foot__link:hover { color: var(--ha-terracotta); }

@media (max-width: 720px) {
  .voicecall { padding: 18px; }
  .voicecall--standalone { padding: 20px; }
  .voicecall__transcribe { display: none; }
  .vct__row { grid-template-columns: 40px 1fr auto; font-size: 12px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .widget, .widget--reverse { grid-template-columns: 1fr; gap: 32px; }
  .widget__intro { position: static; max-width: none; }
  .widget--reverse .widget__intro { order: 1; }
  .widget--reverse .widget__device { order: 2; }
  .widget-pair { grid-template-columns: 1fr; }
  .versus { grid-template-columns: 1fr; }
  .versus__arrow { transform: rotate(90deg); }
  .gaps, .nots, .tech { grid-template-columns: 1fr; }
  .study { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cta-card { grid-template-columns: 1fr; padding: 40px; }
  .persona-grid, .qgrid { grid-template-columns: repeat(2, 1fr); }
  .anno { display: none; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__meta { display: none; }
  .hero { padding: 48px 20px 64px; }
  .section { padding: 64px 20px; }
  .section--paper, .section--bone-deep, .section--ink {
    padding-left: 20px; padding-right: 20px;
  }
  .qblock { padding: 32px 20px; }
  .persona-grid, .qgrid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stat-card__num { font-size: 96px; }
  .stat-card__unit { font-size: 36px; }
}