:root {
  --hs-red: #e8242c;
  --hs-red-dark: #c81d24;
  --hs-red-soft: #fef2f2;
  --hs-ink: #1a1f2e;
  --hs-text: #2d3340;
  --hs-muted: #6b7280;
  --hs-subtle: #9ca3af;
  --hs-border: #e5e7eb;
  --hs-line: #f1f3f5;
  --hs-bg: #ffffff;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Open Sans', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--hs-text);
  background: var(--hs-bg);
  font-weight: 400;
}

h1, h2, h3, h4 { color: var(--hs-ink); font-weight: 600; letter-spacing: -0.01em; }

.btn-primary {
  background-color: var(--hs-red);
  color: #fff;
  border-radius: 9999px;
  transition: background-color .15s ease, transform .1s ease;
}
.btn-primary:hover { background-color: var(--hs-red-dark); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--hs-ink);
  border: 1px solid var(--hs-border);
  border-radius: 9999px;
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--hs-red); color: var(--hs-red); }

.chat-pill {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: var(--hs-red);
  color: #fff;
  border-radius: 9999px;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 10px 25px rgba(232, 36, 44, 0.25);
  z-index: 50;
}
.chat-pill:hover { background-color: var(--hs-red-dark); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform .2s ease; }

/* Thin-line illustrated icon style */
.icon-line {
  stroke: var(--hs-red);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}