/* Scoped port of the Claude Design 'Ledger' export. All selectors are
   namespaced under .ovl to avoid colliding with global landing.css. Geist
   @font-face blocks dropped (loaded via Google Fonts). */

/* ============================================================
   OMNIVOO — Direction B · "LEDGER"
   Precision fintech · cool neutrals · enterprise-trustworthy
   ============================================================ */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

.ovl {
  --bg: #ffffff;
  --bg-2: #f4f6f9;
  --surface: #ffffff;
  --ink: #14161a;
  --ink-2: #3d424b;
  --ink-3: #767d88;
  --line: #e4e7ec;
  --line-2: #d3d8e0;

  --green: #00b966;
  --green-ink: #047a45;
  --green-soft: #e1f5ea;
  /* Omnivoo is a mono-accent brand: green only, no secondary accent.
     These aliases keep markup stable while removing the off-brand indigo. */
  --indigo: #00b966;
  --indigo-ink: #047a45;
  --indigo-soft: #e1f5ea;

  --ink-deep: #0d0f14; /* dark anchor */
  --ink-deep2: #15181f;

  --r: 10px;
  --r-sm: 7px;
  --r-lg: 16px;

  --sh-sm: 0 1px 2px rgba(16, 22, 38, 0.05);
  --sh-md: 0 2px 8px rgba(16, 22, 38, 0.06), 0 12px 28px rgba(16, 22, 38, 0.07);
  --sh-lg: 0 24px 70px rgba(16, 22, 38, 0.16);

  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --maxw: 1320px;
}

.ovl * {
  box-sizing: border-box;
}
.ovl {
  scroll-behavior: smooth;
}

/* announcement bar — Omnivoo light-green */
.ovl .announce {
  background: var(--green-soft);
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 9px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #bfe9d2;
}
.ovl .announce b {
  color: #053a23;
  font-weight: 600;
}
.ovl .announce .badge {
  background: var(--green);
  color: #053a23;
  padding: 3px 9px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ovl .announce > span:not(.badge) {
  white-space: nowrap;
}
.ovl .announce a {
  color: var(--green-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ovl .announce a:hover {
  color: #053a23;
}
@media (max-width: 560px) {
  .ovl .announce span:not(.badge) {
    display: none;
  }
  .ovl .announce::after {
    content: "First month 80% off";
    color: var(--green-ink);
  }
}
.ovl {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.ovl img {
  max-width: 100%;
  display: block;
}
.ovl a {
  color: inherit;
  text-decoration: none;
}
.ovl ::selection {
  background: var(--indigo);
  color: #fff;
}

.ovl h1,
.ovl h2,
.ovl h3,
.ovl h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
}
.ovl .display {
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.ovl .h2 {
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.ovl .h3 {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 600;
}
.ovl .lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ovl .mono {
  font-family: var(--mono);
}
.ovl .muted {
  color: var(--ink-3);
}
.ovl .kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.ovl .kicker .sq {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 2px;
}
.ovl .kicker .num {
  color: var(--indigo);
}

.ovl .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 36px;
}
.ovl section {
  padding: clamp(70px, 8.5vw, 120px) 0;
}
.ovl .sec-head {
  max-width: 780px;
  margin-bottom: 52px;
}
.ovl .sec-head .lead {
  margin-top: 18px;
}

/* buttons */
.ovl .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.18s ease;
  white-space: nowrap;
}
.ovl .btn .arr {
  transition: transform 0.18s;
}
.ovl .btn:hover .arr {
  transform: translateX(3px);
}
.ovl .btn-green {
  background: var(--green);
  color: #053a23;
}
.ovl .btn-green:hover {
  background: #00a85c;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 185, 102, 0.28);
}
.ovl .btn-dark {
  background: var(--ink);
  color: #fff;
}
.ovl .btn-dark:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.ovl .btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.ovl .btn-ghost:hover {
  border-color: var(--ink-3);
  background: var(--bg-2);
}
.ovl .btn-lg {
  padding: 15px 26px;
  font-size: 16px;
}

/* nav */
.ovl .nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.ovl .nav.scrolled {
  border-bottom-color: var(--line);
}
.ovl .nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ovl .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.04em;
}
.ovl .brand .mk {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.ovl .brand .mk i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--green);
  display: block;
}
.ovl .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.ovl .nav-links a:hover {
  color: var(--ink);
}
.ovl .nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ovl .nav-login {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .ovl .nav-links {
    display: none;
  }
}

/* hero */
.ovl .hero {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.ovl .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.ovl .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 7px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--sh-sm);
  margin-bottom: 28px;
  white-space: nowrap;
}
.ovl .hero-pill .tag {
  background: var(--indigo-soft);
  color: var(--indigo-ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
}
.ovl .hero h1 .g {
  color: var(--green-ink);
}
.ovl .hero .lead {
  margin-top: 24px;
  max-width: 500px;
}
.ovl .hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.ovl .hero-note {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 18px;
  letter-spacing: 0.01em;
}
@media (max-width: 880px) {
  .ovl .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ledger product panel */
/* hero flow rail */
.ovl .flow {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 30px 30px 18px;
}
.ovl .flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ovl .flow-top .t {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.ovl .flow .step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  position: relative;
  padding: 14px 0;
}
.ovl .flow .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(var(--green), var(--line));
}
.ovl .flow .step .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--green-soft);
  color: var(--green-ink);
  position: relative;
  z-index: 1;
}
.ovl .flow .step.pending .ic {
  background: var(--bg-2);
  color: var(--ink-3);
  border: 1px dashed var(--line-2);
}
.ovl .flow .step .lab b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}
.ovl .flow .step .lab span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.ovl .flow .step .chk {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.ovl .flow .step.pending .chk {
  background: var(--bg-2);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes flowpop {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }
    60% {
      transform: scale(1.12);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  .ovl .flow .step .chk {
    animation: flowpop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards;
  }
  .ovl .flow .step:nth-child(2) .chk {
    animation-delay: 0.15s;
  }
  .ovl .flow .step:nth-child(3) .chk {
    animation-delay: 0.45s;
  }
  .ovl .flow .step:nth-child(4) .chk {
    animation-delay: 0.75s;
  }
  .ovl .flow .step:nth-child(5) .chk {
    animation-delay: 1.05s;
  }
}

/* metric strip */
.ovl .metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 60px;
}
.ovl .metric {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
  background: var(--surface);
}
.ovl .metric .n {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ovl .metric .n .u {
  color: var(--indigo);
}
.ovl .metric .l {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .ovl .metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* trust */
.ovl .trust {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
  flex-wrap: wrap;
}
.ovl .trust .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ovl .trust .logos {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.ovl .brandlogo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ovl .brandlogo .bl-div {
  width: 1px;
  height: 17px;
  background: var(--line-2);
  display: inline-block;
}
.ovl .brandlogo .bl-sub {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.ovl .ms-grid {
  display: grid;
  grid-template-columns: repeat(2, 9px);
  grid-template-rows: repeat(2, 9px);
  gap: 2px;
}
.ovl .ms-grid i {
  display: block;
}
.ovl .ms-grid i:nth-child(1) {
  background: #f25022;
}
.ovl .ms-grid i:nth-child(2) {
  background: #7fba00;
}
.ovl .ms-grid i:nth-child(3) {
  background: #00a4ef;
}
.ovl .ms-grid i:nth-child(4) {
  background: #ffb900;
}
.ovl .ms-word {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ovl .g-word {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  display: inline-flex;
}
.ovl .g-word b {
  font-weight: 700;
}

/* products */
.ovl .prod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ovl .pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: 0.2s;
}
.ovl .pcard:hover {
  box-shadow: var(--sh-md);
  border-color: var(--line-2);
}
.ovl .pcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.ovl .pcard .tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}
.ovl .pcard.cm .tag {
  background: var(--green-soft);
  color: var(--green-ink);
}
.ovl .pcard.eor .tag {
  background: var(--indigo-soft);
  color: var(--indigo-ink);
}
.ovl .pcard .price {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.ovl .pcard h3 {
  font-size: 25px;
  margin-bottom: 10px;
}
.ovl .pcard .desc {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.ovl .pcard .rows {
  margin: 22px 0;
  border-top: 1px solid var(--line);
}
.ovl .pcard .rw {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.ovl .pcard .rw .ic {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}
.ovl .pcard.cm .rw .ic {
  background: var(--green-soft);
  color: var(--green-ink);
}
.ovl .pcard.eor .rw .ic {
  background: var(--indigo-soft);
  color: var(--indigo-ink);
}
.ovl .pcard .rw b {
  font-weight: 600;
  font-size: 14.5px;
  display: block;
}
.ovl .pcard .rw span {
  color: var(--ink-3);
  font-size: 13px;
}
.ovl .pcard .cta {
  margin-top: auto;
  align-self: flex-start;
}

/* coverage map */
.ovl .coverage {
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.ovl .coverage h2,
.ovl .coverage h3 {
  color: var(--ink);
}
.ovl .coverage .kicker {
  color: var(--ink-3);
}
.ovl .coverage .kicker .sq {
  background: var(--green);
}
.ovl .coverage .lead {
  color: var(--ink-2);
}
/* coverage: two-column intro + 3D globe */
.ovl .cov-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 36px;
}
.ovl .cov-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.ovl .cov-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 6px 11px;
  border-radius: 99px;
}
.ovl .cov-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-ink);
  text-decoration: none;
}
.ovl .cov-all-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ovl .cov-globe {
  position: relative;
  background: var(--ink-deep2);
  border: 1px solid #232834;
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.84;
  overflow: hidden;
}
.ovl .cov-globe-canvas {
  display: block;
  max-width: 540px;
  margin: 0 auto;
  /* Let vertical page scroll pass through; drag only spins on fine pointers. */
  touch-action: pan-y;
}
.ovl .map-legend {
  position: absolute;
  left: 20px;
  bottom: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: #8b93a3;
}
.ovl .map-legend .it {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ovl .map-legend .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.ovl .map-legend .sw-lg {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 185, 102, 0.7);
}
@media (max-width: 880px) {
  .ovl .cov-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ovl .cov-globe {
    aspect-ratio: 1;
    padding: 16px;
  }
  .ovl .cov-globe-canvas {
    max-width: 340px;
  }
}
/* coverage stats band */
.ovl .cov-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.ovl .cov-stat {
  background: var(--surface);
  padding: 22px 24px;
}
.ovl .cov-stat .n {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.ovl .cov-stat .n span {
  color: var(--green);
}
.ovl .cov-stat .l {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 8px;
}

/* corridor data table */
.ovl .cov-table {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.ovl .cov-trow {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 2fr 0.8fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.ovl .cov-trow:first-child {
  border-top: none;
}
.ovl .cov-thead {
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ovl .cov-trow:not(.cov-thead):hover {
  background: var(--bg-2);
}
.ovl .cov-co {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ovl .cov-cur {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
}
.ovl .cov-comp {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.ovl .cov-status {
  justify-self: start;
}
.ovl .cov-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green-ink);
  background: var(--green-soft);
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.ovl .cov-pill .cov-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.ovl .cov-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.ovl .cov-note a {
  color: var(--green-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 820px) {
  .ovl .cov-stats {
    grid-template-columns: 1fr 1fr;
  }
  .ovl .cov-stat .n {
    font-size: 28px;
  }
  /* Stack each corridor row into a readable card on mobile */
  .ovl .cov-trow {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .ovl .cov-thead {
    display: none;
  }
  .ovl .cov-co {
    grid-column: 1;
    grid-row: 1;
  }
  .ovl .cov-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .ovl .cov-cur {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ovl .cov-comp {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* doc generator */
.ovl .gen {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 34px;
  align-items: start;
}
.ovl .gen-controls {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ovl .gen-step .slab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ovl .gen-step .slab .n {
  color: var(--indigo);
}
.ovl .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ovl .chip {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
  transition: 0.15s;
  color: var(--ink-2);
}
.ovl .chip:hover {
  border-color: var(--ink-3);
}
.ovl .chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.ovl .doc-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.ovl .doc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ovl .doc-head .dt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.ovl .doc-head .badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--green-ink);
  background: var(--green-soft);
  padding: 3px 9px;
  border-radius: 5px;
}
.ovl .doc-paper {
  padding: 34px 40px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  min-height: 420px;
  transition: opacity 0.18s;
}
.ovl .doc-paper h4 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}
.ovl .doc-paper .dm {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}
.ovl .doc-paper .clause {
  margin-bottom: 15px;
}
.ovl .doc-paper .clause .cn {
  font-weight: 600;
  color: var(--ink);
}
.ovl .doc-paper .redact {
  display: inline-block;
  height: 10px;
  background: var(--bg-2);
  border-radius: 3px;
  vertical-align: middle;
}
.ovl .doc-paper .jx {
  display: inline-block;
  background: var(--indigo-soft);
  color: var(--indigo-ink);
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
}
@media (max-width: 860px) {
  .ovl .gen {
    grid-template-columns: 1fr;
  }
}

/* risk */
.ovl .risk {
  background: var(--bg-2);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.ovl .risk h2,
.ovl .risk h4 {
  color: var(--ink);
}
.ovl .risk .kicker {
  color: var(--ink-3);
}
.ovl .risk .kicker .sq {
  background: var(--green);
}
.ovl .risk .lead {
  color: var(--ink-2);
}
.ovl .case {
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: 30px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  margin-bottom: 34px;
  box-shadow: var(--sh-sm);
}
.ovl .case .big {
  font-size: clamp(46px, 6.5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--green-ink);
  line-height: 1;
}
.ovl .case .tagm {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.ovl .case p {
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 0;
}
.ovl .case p b {
  color: var(--ink);
}
.ovl .case a {
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 12px;
  display: inline-block;
}
.ovl .risk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.ovl .rk {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px;
  transition: 0.18s;
}
.ovl .rk:hover {
  background: var(--bg-2);
}
.ovl .rk .tg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green-ink);
}
.ovl .rk h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.ovl .rk p {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 900px) {
  .ovl .risk-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ovl .case {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ovl .risk-grid {
    grid-template-columns: 1fr;
  }
}

/* compare */
.ovl .compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ovl .col {
  padding: 30px;
}
.ovl .col.diy {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.ovl .col.omni {
  background: var(--surface);
}
.ovl .col .ch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.ovl .col .badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.ovl .col.diy .badge {
  background: #dfe3ea;
  color: var(--ink-3);
}
.ovl .col.omni .badge {
  background: var(--green);
  color: #053a23;
}
.ovl .col .csub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}
.ovl .cmp {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ovl .cmp:last-child {
  border-bottom: none;
}
.ovl .cmp b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 3px;
}
.ovl .cmp p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}
.ovl .col.diy .cmp b {
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .ovl .compare {
    grid-template-columns: 1fr;
  }
  .ovl .col.diy {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

/* audience */
/* how contractors get paid */
.ovl .payways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.ovl .payway {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ovl .payway-b {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
}
.ovl .payway-b.live {
  color: var(--green-ink);
  background: var(--green-soft);
}
.ovl .payway-b.soon {
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.ovl .payway-g {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.ovl .payway-n {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ovl .payway-n em {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px;
}
@media (max-width: 860px) {
  .ovl .payways {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px) {
  .ovl .payways {
    grid-template-columns: 1fr;
  }
}

/* testimonials */
.ovl .tst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.ovl .tst-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ovl .tst-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  flex: 1;
  margin: 0;
}
.ovl .tst-by {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.ovl .tst-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-ink);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ovl .tst-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ovl .tst-meta b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ovl .tst-meta .tst-role {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.ovl .tst-meta span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
@media (max-width: 900px) {
  .ovl .tst {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ovl .tst {
    grid-template-columns: 1fr;
  }
}

.ovl .aud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ovl .acard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.ovl .acard .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--indigo);
  font-weight: 600;
}
.ovl .acard h3 {
  font-size: 22px;
  margin: 12px 0 10px;
}
.ovl .acard p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ovl .acard ul {
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ovl .acard li {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  align-items: center;
  font-family: var(--mono);
}
.ovl .acard li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--green);
  flex: 0 0 auto;
  border-radius: 1px;
}
@media (max-width: 820px) {
  .ovl .aud {
    grid-template-columns: 1fr;
  }
}

/* pricing */
.ovl .pricing {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.ovl .plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.ovl .plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ovl .plan.pop {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.ovl .plan .poptag {
  position: absolute;
  top: -10px;
  left: 28px;
  background: var(--green);
  color: #053a23;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
.ovl .plan-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.ovl .plan-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.ovl .plan-scope::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ovl .plan-scope.cm {
  background: var(--green-soft);
  color: var(--green-ink);
}
.ovl .plan-scope.cm::before {
  background: var(--green);
}
.ovl .plan-scope.eor {
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.ovl .plan-scope.eor::before {
  background: var(--ink-2);
}
.ovl .plan h3 {
  font-size: 23px;
}
.ovl .plan .amt {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: right;
  line-height: 1;
}
.ovl .plan .amt small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 7px;
  max-width: 170px;
  margin-left: auto;
  line-height: 1.4;
}
.ovl .plan-fees {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 0;
}
.ovl .plan-fee {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
}
.ovl .plan p.pd {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 16px 0 20px;
  line-height: 1.5;
}
.ovl .plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ovl .plan li {
  font-size: 14.5px;
  display: flex;
  gap: 11px;
  color: var(--ink-2);
  align-items: center;
}
.ovl .plan li::before {
  content: "✓";
  color: var(--green-ink);
  font-weight: 700;
  font-size: 13px;
}
.ovl .plan .planbtn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

@media (max-width: 780px) {
  .ovl .plan-grid {
    /* minmax(0, 1fr) lets the column shrink to the container instead of
       blowing out to a child's min-content width (which overflowed the card
       ~20px past the screen edge on mobile). */
    grid-template-columns: minmax(0, 1fr);
  }
  .ovl .plan {
    min-width: 0;
  }
  /* Stack the header so the price meta isn't squeezed into a thin right
     column (where every word wrapped onto its own line). */
  .ovl .plan-top {
    flex-direction: column;
    gap: 16px;
  }
  .ovl .plan .amt {
    text-align: left;
  }
  .ovl .plan .amt small {
    max-width: none;
    margin-left: 0;
  }
}

.ovl .allplans {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.ovl .allplans span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ovl .allplans span::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 2px;
}

/* journey */
.ovl .journey-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
}
.ovl .jstep {
  padding: 26px 26px 0 0;
}
.ovl .jstep:not(:first-child) {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.ovl .jstep .rn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.ovl .jstep .tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--indigo-ink);
  background: var(--indigo-soft);
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-block;
  margin: 14px 0;
}
.ovl .jstep h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.ovl .jstep p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .ovl .journey-steps {
    grid-template-columns: 1fr;
  }
  .ovl .jstep {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--line);
  }
}

/* quote */
.ovl .quote {
  background: var(--green-soft);
  color: var(--ink);
  border-top: 1px solid #bfe9d2;
  border-bottom: 1px solid #bfe9d2;
}
.ovl .quote .q {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
  max-width: 1000px;
}
.ovl .quote .q .hl {
  color: var(--green-ink);
}
.ovl .quote .by {
  font-family: var(--mono);
  font-size: 12.5px;
  margin-top: 26px;
  color: var(--green-ink);
  letter-spacing: 0.03em;
}

/* faq */
.ovl .faq-grid {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 46px;
  align-items: start;
}
.ovl .faq-list {
  border-top: 1px solid var(--line);
}
.ovl .fq {
  border-bottom: 1px solid var(--line);
}
.ovl .fq button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  padding: 20px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ovl .fq .qn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--indigo);
  margin-right: 12px;
  font-weight: 500;
}
.ovl .fq .pm {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--ink-3);
  transition: 0.2s;
}
.ovl .fq.open .pm {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: rotate(45deg);
}
.ovl .fq .ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* Reveal the answer when the item is open. The max-height is a generous
   upper bound (answers wrap tallest on narrow mobile) so the transition
   still animates without clipping any answer. */
.ovl .fq.open .ans {
  max-height: 600px;
}
.ovl .fq .ans p {
  padding: 0 36px 22px 0;
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .ovl .faq-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* final */
.ovl .final {
  text-align: center;
}
.ovl .final .h2 {
  max-width: 840px;
  margin: 0 auto;
}
.ovl .final .cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.ovl .final .micro {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 20px;
}

/* footer */
.ovl .foot {
  background: var(--ink-deep);
  color: #9aa2b1;
  padding: 70px 0 36px;
}
.ovl .foot a {
  color: #9aa2b1;
}
.ovl .foot a:hover {
  color: #fff;
}
.ovl .foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid #20242e;
}
.ovl .foot .brand {
  color: #fff;
}
.ovl .foot .tag {
  margin: 18px 0 22px;
  font-size: 14px;
  color: #7b8393;
  max-width: 280px;
  line-height: 1.5;
}
.ovl .foot .ent {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #646c7c;
  line-height: 1.8;
}
.ovl .foot .ent b {
  color: #aab2c2;
}
.ovl .foot h5 {
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 16px;
}
.ovl .foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.ovl .foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  color: #646c7c;
  flex-wrap: wrap;
  gap: 14px;
}
.ovl .foot-bot .links {
  display: flex;
  gap: 20px;
}
@media (max-width: 820px) {
  .ovl .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

.ovl .reveal {
  opacity: 1;
  transform: none;
}
/* Smooth in-page scrolling + offset anchored sections below the fixed
   offer bar (40px) + nav so section headers aren't hidden on jump. */
html {
  scroll-behavior: smooth;
}
.ovl section[id],
.ovl #gen {
  /* Tracks the live header height; resolves to the previous 116px on desktop. */
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* The export omitted a mobile breakpoint for the product cards; collapse to
   a single column so they don't overflow on phones/tablets. */
@media (max-width: 820px) {
  .ovl .prod {
    grid-template-columns: 1fr;
  }
}

/* The export assumed a normal-flow nav; our nav + offer bar are fixed. Push the
   hero down by their MEASURED heights (--offer-bar-h + --nav-h, both set by JS)
   so the pill/headline always clear them — even when the nav grows taller on
   mobile or the offer bar wraps. */
.ovl .hero {
  padding-top: calc(var(--offer-bar-h, 40px) + var(--nav-h, 58px) + 40px);
}
@media (max-width: 760px) {
  .ovl .hero {
    padding-top: calc(var(--offer-bar-h, 40px) + var(--nav-h, 58px) + 24px);
  }
}

/* ── Hero layout fixes ──
   Neutralize leaks from global landing.css .hero (text-align:center + the old
   radial-glow ::before), widen containers to 1280, and centre text on mobile
   only when the hero stacks. */
.ovl {
  --maxw: 1320px;
}
.ovl .wrap {
  padding: 0 40px;
}
.ovl .hero {
  text-align: left;
}
.ovl .hero::before {
  content: none !important;
  background: none !important;
}
@media (max-width: 880px) {
  .ovl .hero,
  .ovl .hero-copy {
    text-align: center;
  }
  .ovl .hero-cta {
    justify-content: center;
  }
}

/* ============================================================
   HERO — Claude Design "Omnivoo Landing Redesign", option 3a
   Light aurora + rotating headline word + corridor marquee.
   Design tokens kept verbatim (#f7f6f2 warm off-white, #0d100e
   ink, #00B966 / #00934f green); copy corrected to 220+.
   ============================================================ */
.ovl .hero.ovh {
  position: relative;
  background: #f7f6f2;
  overflow: hidden;
  padding-bottom: 0;
  /* The base .hero caps at 1320px, which was invisible while the hero had no
     background. The aurora and the marquee have to run edge to edge, so drop
     the cap here and let the inner .wrap keep the content at 1320px. */
  max-width: none;
  width: 100%;
}

/* animated aurora background */
.ovl .ovh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ovl .ovh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  will-change: transform;
}
.ovl .ovh-blob-a {
  width: 640px;
  height: 640px;
  left: -140px;
  top: -220px;
  background: radial-gradient(circle, rgba(0, 185, 102, 0.28), transparent 62%);
  animation: ovh-blobA 14s ease-in-out infinite;
}
.ovl .ovh-blob-b {
  width: 520px;
  height: 520px;
  right: -110px;
  top: -40px;
  background: radial-gradient(circle, rgba(0, 150, 255, 0.16), transparent 62%);
  animation: ovh-blobB 18s ease-in-out infinite;
}
.ovl .ovh-blob-c {
  width: 440px;
  height: 440px;
  left: 40%;
  bottom: -240px;
  background: radial-gradient(circle, rgba(0, 185, 102, 0.2), transparent 62%);
  filter: blur(34px);
  animation: ovh-blobC 16s ease-in-out infinite;
}
@keyframes ovh-blobA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(90px, -50px) scale(1.18);
  }
}
@keyframes ovh-blobB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-80px, 60px) scale(1.12);
  }
}
@keyframes ovh-blobC {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, 60px) scale(1.2);
  }
}

/* keep hero content above the aurora. The base .hero is a centred flex column,
   so its children shrink-to-fit; stretch them so .wrap honours its 1320px cap
   (like every other section) and the marquee spans the full width instead of
   sizing to its own ticker track. */
.ovl .hero.ovh > .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: stretch;
}
.ovl .hero.ovh .hero-grid {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* eyebrow */
.ovl .ovh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00934f;
  margin-bottom: 26px;
  padding: 7px 14px;
  border: 1px solid rgba(0, 185, 102, 0.4);
  border-radius: 999px;
  background: rgba(0, 185, 102, 0.1);
}
.ovl .ovh-ping {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00b966;
  display: inline-block;
  flex: none;
  animation: ovh-pulse 2s ease-in-out infinite;
}
@keyframes ovh-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* headline with the rotating word */
.ovl .ovh-h1 {
  font-family: "Bricolage Grotesque", var(--sans), sans-serif;
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #0d100e;
  margin: 0 0 24px;
}
.ovl .ovh-rot {
  position: relative;
  display: block;
  height: 1.06em;
  color: #00934f;
}
.ovl .ovh-rot span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation: ovh-rw 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.ovl .ovh-rot span:nth-child(1) {
  animation-delay: 0s;
}
.ovl .ovh-rot span:nth-child(2) {
  animation-delay: 2s;
}
.ovl .ovh-rot span:nth-child(3) {
  animation-delay: 4s;
}
.ovl .ovh-rot span:nth-child(4) {
  animation-delay: 6s;
}
.ovl .ovh-h1-end {
  color: #0d100e;
}
@keyframes ovh-rw {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  5%,
  22% {
    opacity: 1;
    transform: translateY(0);
  }
  28%,
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}

.ovl .ovh-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(13, 16, 14, 0.64);
  margin: 0 0 32px;
  max-width: 500px;
  text-wrap: pretty;
}

/* CTAs */
.ovl .ovh-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ovl .ovh-cta,
.ovl .ovh-cta2 {
  font-family: var(--sans);
  padding: 15px 26px;
  border-radius: 11px;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.ovl .ovh-cta {
  background: #00b966;
  color: #04120a;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 26px -10px rgba(0, 185, 102, 0.7);
}
.ovl .ovh-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0, 185, 102, 0.8);
}
.ovl .ovh-cta2 {
  border: 1px solid rgba(13, 16, 14, 0.2);
  color: #0d100e;
  font-size: 16px;
  font-weight: 600;
}
.ovl .ovh-cta2:hover {
  border-color: #0d100e;
}

/* live engagement card */
.ovl .ovh-card {
  background: #fff;
  border: 1px solid rgba(13, 16, 14, 0.09);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 50px -30px rgba(13, 16, 14, 0.4);
}
.ovl .ovh-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(13, 16, 14, 0.5);
}
.ovl .ovh-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00934f;
}
.ovl .ovh-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ovl .ovh-row {
  display: flex;
  gap: 13px;
  align-items: center;
  background: #f4f2ec;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 14px 15px;
}
.ovl .ovh-row-live {
  background: rgba(0, 185, 102, 0.1);
  border-color: rgba(0, 185, 102, 0.35);
}
.ovl .ovh-n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #00934f;
}
.ovl .ovh-rt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ovl .ovh-rt b {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #0d100e;
}
.ovl .ovh-rt span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: rgba(13, 16, 14, 0.55);
}
.ovl .ovh-ok {
  color: #00934f;
  flex: none;
}
.ovl .ovh-ping-dot {
  animation: ovh-pulse 1.6s ease-in-out infinite;
}

/* corridor marquee */
.ovl .ovh-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: stretch;
  border-top: 1px solid rgba(13, 16, 14, 0.09);
  background: #f4f2ec;
  padding: 18px 0;
  overflow: hidden;
}
.ovl .ovh-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-left: 14px;
  animation: ovh-tickerX 26s linear infinite;
  will-change: transform;
}
.ovl .ovh-chip {
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(13, 16, 14, 0.1);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #0d100e;
  white-space: nowrap;
}
@keyframes ovh-tickerX {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* the metrics + trust rows sit on the warm hero backdrop now */
.ovl .hero.ovh .metrics,
.ovl .hero.ovh .trust {
  position: relative;
  z-index: 2;
}
.ovl .hero.ovh .trust {
  padding-bottom: 40px;
}

@media (max-width: 900px) {
  .ovl .hero.ovh .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }
  .ovl .ovh-lead {
    max-width: none;
  }
  .ovl .ovh-rot {
    height: 1.12em;
  }
  /* The legacy rule above centres .ovl .hero below 880px, which suited the old
     hero. 3a is left-aligned, and the rotating word is absolutely positioned at
     left:0 so it cannot follow text-align anyway: keep this hero left at every
     width, otherwise the copy centres while the word and CTAs stay left. */
  .ovl .hero.ovh,
  .ovl .hero.ovh .hero-copy {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ovl .ovh-blob,
  .ovl .ovh-track,
  .ovl .ovh-ping,
  .ovl .ovh-ping-dot {
    animation: none !important;
  }
  /* hold the first word instead of cycling */
  .ovl .ovh-rot span {
    animation: none !important;
    opacity: 0;
  }
  .ovl .ovh-rot span:nth-child(1) {
    opacity: 1;
  }
}

/* ============================================================
   MOBILE FIXES (phones)
   ============================================================ */
@media (max-width: 560px) {
  /* Page gutter. The landing kept 40px at every width, so a 390px screen gave
     up 80px before card padding even started. The rest of the site drops to
     20px on mobile; match it. */
  .ovl .wrap {
    padding: 0 20px;
  }

  /* Cards stacked another 28-32px inside that gutter, leaving card copy 73px
     from the screen edge (37% of a 390px screen lost to padding). Trim the
     horizontal padding only, so vertical rhythm is untouched. */
  .ovl .pcard,
  .ovl .plan,
  .ovl .acard {
    padding-left: 22px;
    padding-right: 22px;
  }
  .ovl .rk {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* The rotating headline word is absolutely positioned, so it can never wrap:
     the longest variant ("anyone, anywhere,") overflowed the viewport at the
     40px clamp floor. Scale the headline down until it fits the gutter. */
  .ovl .ovh-h1 {
    font-size: clamp(24px, calc(11.5vw - 5px), 40px);
  }

  /* Hero buttons were sized to their own text, so they stacked ragged
     (167px vs 182px). Match widths. */
  .ovl .ovh-ctas {
    gap: 12px;
  }
  .ovl .ovh-cta,
  .ovl .ovh-cta2 {
    flex: 1 1 100%;
    text-align: center;
  }
}