.hv2 {
  --primary-green: #d4f776;
  --primary-green-hover: #c2e565;
  --bg-dark: #1a1a1a;
  --bg-light: #f8f9fa;
  /* Top and bottom padding of every content section, so the gap between any two sections is the same (2x this).
     Carousel sections subtract their track's bottom padding from the bottom value. */
  --section-y: 3.25rem;
  --text-main: #111111;
  --text-muted: #666666;
  --border-color: #e5e7eb;
  --card-radius: 12px;
  --money: #16a34a;
}

:where(.hv2) * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* --font-inter comes from next/font (home-v2/fonts.ts): Inter Latin + a metric-matched fallback. */
  font-family: var(--font-inter, 'Inter'), sans-serif;
}

/* Icons (PhIcon.tsx): the svg fills a 1em box, so the existing `i { font-size; color }` rules
   keep sizing and coloring them like the old Phosphor icon font did. */
.hv2 .ph-icon {
  display: inline-block;
  line-height: 1;
  font-style: normal;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.hv2 .ph-icon > svg {
  display: block;
  width: 1em;
  height: 1em;
}

.hv2 {
  background-color: #ffffff;
  color: var(--text-main);
  overflow-x: hidden;
}

:where(.hv2) a {
  text-decoration: none;
  color: inherit;
}

:where(.hv2) button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* The design relies on the browser's bold headings; Tailwind's base styles reset them. */
.hv2 h1,
.hv2 h2,
.hv2 h3,
.hv2 h4,
.hv2 h5,
.hv2 h6 {
  font-weight: bold;
}

.hv2 .section-title {
  /* Bold and larger; clamp keeps long titles from wrapping badly on phones. */
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  text-align: center;
  margin-bottom: 2.5rem;
  font-weight: 700;
}

/* --- Navbar --- */
.hv2 > nav {
  background-color: #1a1a1a;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 3rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.hv2 .logo {
  display: flex;
  align-items: center;
}
.hv2 .logo svg {
  width: 165px;
  height: 29px;
  fill: white;
}

.hv2 .nav-right-group {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.hv2 .nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: 0.95rem;
}

.hv2 .nav-links a {
  transition: opacity 0.2s;
}
.hv2 .nav-links a:hover {
  opacity: 0.7;
}

.hv2 .nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
}

.hv2 .nav-actions i {
  font-size: 1.5rem;
  cursor: pointer;
}