/* =============================================================
   www.mformercury.com — the site theme (Oct 2026).

   The design language of the redesigned homepage, for every page.
   Loaded after site.css (and tools.css), and scoped to body.hv, so
   a page takes the new look by carrying that class and nothing in
   its own markup or scripts has to change.

   Part 1 is the chrome every page shares: tokens, the header,
   buttons, the footer. Part 2 restyles the
   components site.css already defines. Homepage-only sections live
   in home.css.
   ============================================================= */

.hv {
  --hv-ink: #1A1A21;
  --hv-ink-2: #4A4A57;
  --hv-ink-3: #6B6B78;
  --hv-ink-4: #A3A3B1;
  --hv-line: #E7E6EC;
  --hv-line-2: #F0EFF4;
  --hv-blue: #2F6BF0;
  --hv-blue-hover: #2259D6;
  --hv-accent: #4B3BB5;
  --hv-accent-tint: #EFEDFD;
  --hv-accent-line: #DDD8F7;
  --hv-good: #1B7F5C;
  --hv-good-tint: #E8F6F0;
  --hv-warn: #9A6100;
  --hv-warn-tint: #FFF6E5;
  --hv-sunken: #F4F3F8;
  --hv-warm: #FBF0E8;
  --hv-ground: #FCFCFD;
  --hv-max: 1200px;
  background: #fff;
  overflow-x: clip;
}
.hv main [id] { scroll-margin-top: 88px; }
.hv-wrap { width: 100%; max-width: calc(var(--hv-max) + 48px); margin: 0 auto; padding: 0 24px; }
.hv h1, .hv h2, .hv h3 { font-weight: 600; }
.hv-dim { color: var(--hv-ink-3); }

/* ── Header ──────────────────────────────────────────────── */
.hv .hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: .8px solid var(--hv-line); }
.hv .hdr.scrolled { background: rgba(255, 255, 255, .82); }
.hv .hdr-in { max-width: 1248px; height: 71.2px; padding: 0 24px; gap: 24px; justify-content: flex-start; }
.hv .brand { min-height: 44px; }
.hv .brand img { height: 28px; width: auto; }
.hv .nav { gap: 2px; padding-left: 16px; }
.hv .nav > a, .hv .nav-link { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--hv-ink-2); line-height: normal; }
.hv .nav-link svg { width: 14px; height: 14px; stroke-width: 1.5; }
.hv .hdr-cta { margin-left: auto; gap: 8px; }
.hv .nav .hv-nav-signin { display: none; }
/* The old single Product menu, split across the three headings the design
   has: tiles and Platform under Product, the segments under Solutions. */
.hv .hv-menu-product { width: min(560px, calc(100vw - 48px)); }
.hv .hv-menu-product .menu-cols { grid-template-columns: minmax(0, 1fr); }
.hv .hv-menu-product .menu-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.hv .hv-menu-product .menu-col h6 { grid-column: 1 / -1; }
.hv .hv-menu-solutions { width: min(660px, calc(100vw - 48px)); left: -110px; }
.hv .hv-menu-solutions .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 14px; border: .8px solid transparent; font-size: 16px; font-weight: 500; line-height: normal; white-space: nowrap; cursor: pointer; }
.hv-btn-sm { height: 40px; font-size: 14px; }
.hv-btn-blue { background: var(--hv-blue); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hv-btn-blue:hover { background: var(--hv-blue-hover); color: #fff; }
.hv-btn-dark { background: var(--hv-ink); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hv-btn-dark:hover { background: #000; color: #fff; }
.hv-btn-white { background: #fff; color: var(--hv-ink); border-color: #E0E0E0; }
.hv-btn-white:hover { background: var(--hv-sunken); }
.hv-btn-glass { background: rgba(255, 255, 255, .55); color: var(--hv-ink); border-color: rgba(0, 0, 0, .12); }
.hv-btn-glass:hover { background: rgba(255, 255, 255, .85); }

/* ── Mascot and ornaments ────────────────────────────────── */
.hv-bob { animation: hv-bob 4s ease-in-out infinite, hv-tilt 4s ease-in-out infinite; }
@keyframes hv-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--bob, -18px); } }
@keyframes hv-tilt { 0%, 50%, 100% { rotate: 0deg; } 25% { rotate: -1.2deg; } 75% { rotate: 1.2deg; } }
.hv-orb { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 28%, #fff 0%, #F4F4F7 38%, #DCDCE3 74%, #C6C6CF 100%); box-shadow: 0 var(--sy, 20px) var(--sb, 25px) rgba(26, 26, 33, .3), inset -4px -7px 11px rgba(26, 26, 33, .06); }
/* Merc says hello over an FAQ: on the homepage and on every page with one. */
.hv-merc { position: absolute; right: 7px; top: -42px; display: flex; align-items: flex-start; pointer-events: none; }
.hv-merc span { margin: 59px -20px 0 0; max-width: 220px; padding: 12px 14px; border-radius: 18px 18px 4px 18px; background: #fff; border: .8px solid var(--hv-line); filter: drop-shadow(0 16px 6px rgba(26, 26, 33, .14)); font-size: 14px; line-height: 21px; color: var(--hv-ink); white-space: nowrap; }
.hv-merc img { width: 151px; height: 165px; --bob: -19px; }
/* Merc on every other page, drawn by the theme so no page has to carry
   him: beside each page's headline, peeking over the demo calendar and
   the checkout cards, and under the logo in the footer. */
.hv .page-hero > .wrap, .hv .tdir-hero > .wrap, .hv .legal, .hv .demo-grid, .hv .co-grid, .hv .done-card, .hv-ftr-grid > div:first-child { position: relative; }
.hv .demo-grid, .hv .co { isolation: isolate; }
.hv .page-hero > .wrap::after, .hv .tdir-hero > .wrap::after, .hv .legal::after, .hv .demo-grid::after, .hv .co-grid::after, .hv .done-card::after, .hv-ftr-grid > div:first-child::after { content: ''; position: absolute; width: 150px; height: 164px; pointer-events: none; background: url(/site/home/robot.webp) center / contain no-repeat; --bob: -16px; animation: hv-bob 4s ease-in-out infinite, hv-tilt 4s ease-in-out infinite; }
.hv .page-hero > .wrap::after, .hv .tdir-hero > .wrap::after { top: 0; right: 24px; }
.hv .legal::after { top: 72px; right: -210px; }
.hv .demo-grid::after, .hv .co-grid::after, .hv .done-card::after { z-index: -1; width: 96px; height: 105px; --bob: -8px; }
.hv .demo-grid::after { top: -70px; right: 48px; }
.hv .co-grid::after { top: -54px; right: 56px; width: 80px; height: 88px; }
.hv .done-card::after { top: -68px; right: 32px; }
.hv-ftr-grid > div:first-child::after { top: 76px; left: 4px; width: 112px; height: 123px; --bob: -10px; }

/* ── Section heads ───────────────────────────────────────── */
.hv-eyebrow { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; background: var(--hv-accent-tint); border: 1px solid var(--hv-accent-line); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--hv-accent); line-height: normal; white-space: nowrap; }
.hv-h2 { font-size: 52px; line-height: 56.16px; letter-spacing: -1.56px; color: var(--hv-ink); text-wrap: balance; }

/* ── Footer ──────────────────────────────────────────────── */
.hv-ftr { background: #111113; color: #D9D9DE; padding: 80px 80px 20px; overflow: hidden; }
.hv-ftr-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto repeat(6, minmax(0, 1fr)); gap: 32px 40px; }
.hv-ftr-brand { display: inline-flex; align-items: center; min-height: 44px; }
.hv-ftr-brand img { height: 28px; width: auto; }
.hv-ftr h5 { margin: 0 0 14px; font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #7C7C87; line-height: normal; }
.hv-ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; font-size: 16px; line-height: 20.925px; }
.hv-ftr li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hv-ftr li a { display: inline-flex; align-items: center; gap: 8px; color: #D9D9DE; transition: color .15s ease; }
.hv-ftr li a:hover { color: #fff; }
.hv-ftr li a.ext::after { content: '\2197'; font-size: 13px; color: #7C7C87; }
.hv-ftr li em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--hv-blue); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 15.525px; }
.hv-ftr-bottom { max-width: 1280px; margin: 40px auto 0; padding-top: 24px; border-top: .8px solid rgba(255, 255, 255, .08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: #7C7C87; }
.hv-ftr-bottom a { color: #D9D9DE; }
.hv-ftr-bottom a:hover { color: #fff; }
.hv-ftr-giant { margin-top: 37px; text-align: center; line-height: 0; user-select: none; }
.hv-ftr-giant span { display: inline-block; padding: 0 .07em; white-space: nowrap; font-size: clamp(40px, 15vw, 216px); font-weight: 700; line-height: .896; letter-spacing: -.0548em; color: transparent; background: linear-gradient(180deg, #C6BAB3, rgba(17, 17, 19, .3)); -webkit-background-clip: text; background-clip: text; }

/* ── Chrome, responsive ──────────────────────────────────── */
@media (max-width: 1320px) {
  .hv-ftr { padding: 64px 40px 20px; }
  .hv-ftr-grid { gap: 32px 24px; }
}
@media (max-width: 1100px) {
  .hv-ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hv-ftr-grid > div:first-child { grid-column: 1 / -1; }
  .hv-ftr-grid > div:first-child::after { top: -24px; left: auto; right: 0; width: 64px; height: 70px; }
}
@media (max-width: 860px) {
  .hv .hdr-in { height: 60px; }
  .hv .hdr-cta .hv-btn-white { display: none; }
  .hv .nav .hv-nav-signin { display: flex; }
  .hv .nav { padding-left: 0; }
  .hv .nav > a, .hv .nav-link { height: auto; padding: 10px 12px; }
  .hv .hv-menu-product, .hv .hv-menu-solutions { width: auto; left: auto; }
  .hv .hv-menu-product .menu-col, .hv .hv-menu-solutions .menu-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hv-wrap { padding: 0 16px; }
  .hv-ftr { padding: 48px 20px 16px; }
  .hv-ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-ftr ul, .hv-ftr h5 { font-size: 15px; }
}
@media (max-width: 1240px) {
  .hv .legal::after { display: none; }
}
@media (max-width: 1180px) {
  .hv .page-hero > .wrap::after, .hv .tdir-hero > .wrap::after { display: none; }
}
@media (max-width: 860px) {
  .hv-merc { display: none; }
  .hv .demo-grid::after, .hv .co-grid::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-bob, .hv .page-hero > .wrap::after, .hv .tdir-hero > .wrap::after, .hv .legal::after, .hv .demo-grid::after, .hv .co-grid::after, .hv .done-card::after, .hv-ftr-grid > div:first-child::after { animation: none; }
}

/* =============================================================
   Part 2 — the components site.css defines, in the new language.
   Selectors mirror site.css with a .hv in front, so a rule here
   always wins over the one it restyles and the markup is untouched.
   ============================================================= */

/* ── Canvas and type ─────────────────────────────────────── */
.hv { --max: 1248px; --radius: 20px; --radius-sm: 12px; }
.hv h4 { font-weight: 600; }
.hv .sec { padding: 80px 0; }
.hv .sec-alt { background: var(--hv-ground); border-color: var(--hv-line-2); }
.hv .sec h2 { font-size: 48px; line-height: 1.12; letter-spacing: -1.5px; margin-top: 16px; }
.hv .sec-lede { margin-top: 16px; font-size: 18px; line-height: 27.2px; color: var(--hv-ink-2); text-wrap: pretty; }
.hv .sec-head { max-width: 760px; }

/* The kicker is the landing page's eyebrow pill everywhere. */
.hv .kicker, .hv .page-hero .kicker { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 6px 12px; border-radius: 999px; background: var(--hv-accent-tint); border: 1px solid var(--hv-accent-line); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--hv-accent); line-height: normal; }
.hv .sec-head:not(.center) .kicker::before { display: none; }

/* ── Page heroes ─────────────────────────────────────────── */
.hv .page-hero { position: relative; padding: 96px 0 0; isolation: isolate; }
/* The dotted ground from under the homepage dashboard, fading out. */
.hv .page-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 420px; z-index: -1; pointer-events: none; background-image: radial-gradient(#DDDDD9 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.hv .page-hero h1 { font-size: 60px; line-height: 1.06; letter-spacing: -2.1px; margin-top: 18px; }
.hv .page-hero .sec-lede { max-width: 700px; }
.hv .hero-cta { margin-top: 30px; gap: 12px; }

/* ── Buttons ─────────────────────────────────────────────── */
.hv .btn { height: 44px; padding: 0 20px; border-radius: 12px; border-width: .8px; font-size: 15px; font-weight: 500; line-height: normal; }
.hv .btn-lg { height: 52px; padding: 0 24px; border-radius: 14px; font-size: 16px; }
.hv .hdr-cta .btn { height: 40px; padding: 0 20px; border-radius: 14px; font-size: 14px; }
.hv .btn-primary, .hv .band .btn-primary { background: var(--hv-ink); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hv .btn-primary:hover, .hv .band .btn-primary:hover { background: #000; border-color: rgba(255, 255, 255, .28); color: #fff; }
/* The plans door and the demo door. Alone, either is the blue primary;
   side by side the plans door leads and the demo door steps back to white,
   as on the closing call of the homepage. */
.hv .btn-green, .hv .band .btn-green, .hv .btn-blue, .hv .band .btn-blue, .hv .btn-accent { background: var(--hv-blue); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hv .btn-green:hover, .hv .band .btn-green:hover, .hv .btn-blue:hover, .hv .band .btn-blue:hover, .hv .btn-accent:hover { background: var(--hv-blue-hover); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hv .btn-green ~ .btn-blue, .hv .band .btn-green ~ .btn-blue { background: #fff; color: var(--hv-ink); border-color: #E0E0E0; }
.hv .btn-green ~ .btn-blue:hover, .hv .band .btn-green ~ .btn-blue:hover { background: var(--hv-sunken); color: var(--hv-ink); border-color: #E0E0E0; }
.hv .btn-ghost, .hv .band .btn-ghost { background: #fff; color: var(--hv-ink); border-color: #E0E0E0; }
.hv .btn-ghost:hover, .hv .band .btn-ghost:hover { background: var(--hv-sunken); border-color: #E0E0E0; }
.hv .btn-green ~ .btn-blue .ripple, .hv .btn-ghost .ripple { background: rgba(26, 26, 33, .14); }

/* ── Cards ───────────────────────────────────────────────── */
.hv .feat, .hv .how > div, .hv .who > div, .hv .result, .hv .term, .hv .apply { border-radius: 24px; border-color: var(--hv-line); padding: 26px; }
.hv .how h3, .hv .who h3, .hv .feat h3 { font-size: 20px; letter-spacing: -.4px; line-height: 26px; }
.hv .how p, .hv .who p, .hv .feat p, .hv .result p, .hv .term p { font-size: 15px; line-height: 23px; color: var(--hv-ink-2); }
.hv .num { border-radius: 10px; width: 32px; height: 32px; font-weight: 500; }
.hv .result strong, .hv .term strong { font-family: var(--mono); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -2.2px; }
.hv .result small, .hv .term small { font-size: 12px; font-weight: 500; color: var(--hv-ink-2); }
.hv .step-card { border-radius: 28px; border-color: var(--hv-line); padding: 8px 8px 24px; }
.hv .step-card h3 { margin: 22px 16px 0; font-size: 20px; letter-spacing: -.4px; }
.hv .step-card p { margin: 8px 16px 0; font-size: 15px; line-height: 23px; }
.hv .panel, .hv .pb, .hv .cal-card, .hv .matrix, .hv .addons, .hv .summary, .hv .done-card, .hv .calc { border-radius: 24px; border-color: var(--hv-line); }
.hv .pb, .hv .cal-card { box-shadow: 0 1px 3px rgba(26, 26, 33, .04), 0 16px 40px -12px rgba(26, 26, 33, .08); }
.hv .pb-row, .hv .limit, .hv .msg { border-radius: 12px; }
.hv .split { gap: 64px; }
.hv .split h3 { font-size: 36px; line-height: 1.12; letter-spacing: -1.1px; }
.hv .split p { font-size: 16px; line-height: 27.2px; }

/* The grounds the illustrations sit on: the violet dunes of the
   homepage in place of the five gradients. */
.hv .g-art { border-radius: 28px; background: #E9E7F2 url(/site/home/dunes.webp) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(26, 26, 33, .06); }
.hv .g-art::before { background: linear-gradient(132deg, rgba(75, 59, 181, .26) 0%, rgba(75, 59, 181, .06) 55%, rgba(52, 43, 111, .085) 66.25%, rgba(39, 35, 73, .11) 77.5%, rgba(26, 26, 33, .16) 100%); }
.hv .step-card .g-art { border-radius: 20px; }
.hv .g-art .card { border-radius: 14px; box-shadow: 0 2px 6px rgba(26, 26, 33, .08), 0 24px 48px -20px rgba(26, 26, 51, .35); }

/* ── Solutions pages: segment rows and the sticky bar ────── */
.hv .seg-bar { top: 72px; background: rgba(255, 255, 255, .86); }
.hv .seg-nav a { border-color: var(--hv-line); font-weight: 500; }
.hv .uc { gap: 72px; scroll-margin-top: 140px; border-top-color: var(--hv-line-2); }
.hv .uc-copy h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; margin-top: 16px; }
.hv .uc-copy > p { font-size: 18px; line-height: 27.2px; }
.hv .uc-copy li { font-size: 16px; line-height: 23.25px; }
.hv .uc-ico, .hv .feat .icon { border-radius: 14px; }
.hv .uc-tag > span:not(.uc-ico) { font-weight: 600; }
.hv .cert { border-radius: 24px; background: var(--hv-ink); }
.hv .roadmap { border-radius: 24px; }

/* ── Pricing ─────────────────────────────────────────────── */
.hv .plan { border-radius: 24px; border-color: var(--hv-line); padding: 26px; }
.hv .plan.hot { border-color: var(--hv-accent); box-shadow: 0 0 0 1px var(--hv-accent), 0 2px 4px rgba(26, 26, 33, .05), 0 24px 48px rgba(26, 26, 51, .1); }
.hv .plan.hot:hover { box-shadow: 0 0 0 1px var(--hv-accent), 0 2px 4px rgba(26, 26, 33, .05), 0 28px 56px rgba(26, 26, 51, .16); }
.hv .plan .tag { background: var(--hv-accent); font-family: var(--mono); font-weight: 500; letter-spacing: 1px; top: -12px; left: 24px; padding: 4px 10px; }
.hv .plan h3 { font-size: 20px; letter-spacing: -.4px; }
.hv .price strong { font-weight: 600; font-size: 40px; letter-spacing: -1.6px; }
.hv .total { border-radius: 12px; }
.hv .plan li svg, .hv .matrix td.yes svg { stroke: var(--hv-good); }
.hv .cycle button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(26, 26, 33, .12); }
.hv .matrix thead th { font-weight: 600; }
.hv .matrix td.hot, .hv .matrix thead th.hot { background: #FAF9FF; }
.hv .addons h4 { font-weight: 600; background: var(--hv-ground); }

/* ── FAQ: the rounded cards of the homepage ──────────────── */
.hv .faq { position: relative; max-width: 960px; border-top: 0; display: grid; gap: 12px; }
.hv .faq > .hv-merc { top: -168px; right: -24px; }
.hv .faq details { background: #fff; border: .8px solid var(--hv-line); border-radius: 20px; transition: border-color .2s ease; }
.hv .faq details[open] { border-color: #D4E2FD; }
.hv .faq summary { min-height: 64px; padding: 16px 20px 16px 24px; font-size: 16px; font-weight: 600; letter-spacing: -.165px; color: var(--hv-ink); border-radius: 20px; }
.hv .faq summary:hover { color: var(--hv-ink); }
.hv .faq summary::after { content: ''; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--hv-sunken) url(/site/home/icon-plus.svg) center / 12px no-repeat; transition: transform .25s ease, background-color .25s ease; }
.hv .faq details[open] summary::after { background-color: var(--hv-blue); background-image: url(/site/home/icon-close.svg); transform: rotate(45deg); }
.hv .faq details p { max-width: none; padding: 0 64px 22px 24px; font-size: 14px; line-height: 25.575px; color: var(--hv-ink-2); }

/* ── The closing call: the scene from the homepage ───────── */
.hv .band { position: relative; padding: 112px 0 300px; text-align: center; color: var(--hv-ink); background: #fff url(/site/home/cta-scene.webp) center bottom / cover no-repeat; isolation: isolate; overflow: hidden; }
.hv .band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .6) 100%), radial-gradient(50% 42% at 50% 36%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); }
.hv .band::after { content: ''; position: absolute; left: 50%; bottom: 44px; width: 459px; height: 230px; margin-left: -263px; z-index: -1; pointer-events: none; background: url(/site/home/cta-truck.webp) center / contain no-repeat; animation: hv-drive 2s ease-in-out infinite; }
@keyframes hv-drive { 0%, 50%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 4px -2.3px; rotate: -.11deg; } 75% { translate: -4px 2.3px; rotate: .11deg; } }
.hv .band .wrap { flex-direction: column; justify-content: center; gap: 30px; }
.hv .band h2 { max-width: 760px; margin: 0 auto; font-size: 52px; line-height: 1.08; letter-spacing: -1.8px; color: var(--hv-ink); text-wrap: balance; }
.hv .band p { max-width: 520px; margin: 18px auto 0; font-size: 18px; line-height: 27.2px; color: var(--hv-ink); }
.hv .band .hero-cta { justify-content: center; }
.hv .band .btn-green ~ .btn-blue, .hv .band .btn-ghost { background: rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .12); }
.hv .band .btn-green ~ .btn-blue:hover, .hv .band .btn-ghost:hover { background: rgba(255, 255, 255, .85); }

/* ── Forms: checkout, demo, the sandbox form ─────────────── */
.hv .co { padding: 64px 0 96px; }
.hv .done-card h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.9px; font-weight: 600; }
.hv .co h1 { font-size: 44px; line-height: 1.08; letter-spacing: -1.4px; font-weight: 600; }
.hv .co .lede { font-size: 16px; line-height: 25.6px; }
.hv .field input, .hv .field select { height: 46px; border-radius: 12px; border-color: var(--hv-line); }
.hv .field input:focus, .hv .field select:focus { border-color: var(--hv-blue); box-shadow: 0 0 0 3px rgba(47, 107, 240, .16); }
.hv .field.consent input[type="checkbox"] { height: 18px; accent-color: var(--hv-blue); }
.hv .field.consent a, .hv .sum-foot a, .hv .legal a, .hv .cal-fallback a, .hv .compare-link a { color: var(--hv-blue); }
.hv .stepper { border-radius: 12px; border-color: var(--hv-line); }
.hv .summary { top: 96px; }
.hv .summary h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; background: var(--hv-ground); }
.hv .sum-total strong { font-family: var(--mono); font-weight: 500; }
.hv .done-steps li { border-radius: 16px; }
.hv .done-steps li.active .n { background: var(--hv-blue); border-color: var(--hv-blue); }
.hv .demo-page h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.6px; font-weight: 600; }
.hv .demo-modal-panel { border-radius: 24px; }
.hv .demo-modal-panel h2 { font-weight: 600; }
.hv .mercury-zoho-form input.formsubmit { background: var(--hv-blue); border-color: var(--hv-blue); border-radius: 12px; }
.hv .mercury-zoho-form input.formsubmit:hover { background: var(--hv-blue-hover); border-color: var(--hv-blue-hover); }

/* ── Legal pages ─────────────────────────────────────────── */
.hv .legal { max-width: 800px; padding: 80px 24px 96px; }
.hv .legal h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.6px; font-weight: 600; }
.hv .legal h2 { font-size: 24px; letter-spacing: -.5px; margin-top: 44px; }
.hv .legal p, .hv .legal li { font-size: 16px; line-height: 27.2px; }
.hv .legal th { background: var(--hv-ground); }

/* ── Components, responsive ──────────────────────────────── */
@media (max-width: 1024px) {
  .hv .page-hero h1 { font-size: 48px; letter-spacing: -1.5px; }
  .hv .sec h2, .hv .band h2 { font-size: 40px; letter-spacing: -1.2px; }
  .hv .uc-copy h2 { font-size: 34px; line-height: 38px; }
}
@media (max-width: 860px) {
  .hv .sec { padding: 64px 0; }
  .hv .page-hero { padding-top: 64px; }
  .hv .page-hero h1 { font-size: 40px; letter-spacing: -1.2px; }
  .hv .sec h2, .hv .band h2 { font-size: 34px; letter-spacing: -1px; }
  .hv .split h3 { font-size: 28px; }
  .hv .seg-bar { top: 60px; }
  .hv .uc { gap: 32px; }
  .hv .band { padding: 80px 0 250px; }
  .hv .band::after { width: 340px; height: 170px; margin-left: -190px; bottom: 36px; }
  .hv .faq details p { padding-right: 24px; }
  .hv .legal h1, .hv .demo-page h1, .hv .co h1 { font-size: 38px; letter-spacing: -1.1px; }
}
@media (max-width: 560px) {
  .hv .page-hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hv .sec h2, .hv .band h2 { font-size: 28px; letter-spacing: -.8px; }
  .hv .uc-copy h2 { font-size: 28px; line-height: 32px; letter-spacing: -.8px; }
  .hv .sec-lede, .hv .uc-copy > p, .hv .band p { font-size: 16px; line-height: 25px; }
  .hv .feat, .hv .how > div, .hv .who > div, .hv .result, .hv .term, .hv .plan { padding: 22px; border-radius: 20px; }
  .hv .legal h1, .hv .demo-page h1, .hv .co h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv .band::after { animation: none; }
}

/* ── Product pages: the hero picture and the three-up spec ── */
.hv .hero-art { border-radius: 28px; }
.hv .spec > div, .hv .expert { border-radius: 20px; border-color: var(--hv-line); padding: 22px 24px; }
.hv .spec h4 { font-size: 18px; letter-spacing: -.3px; }
.hv .spec p { font-size: 15px; line-height: 23px; }
.hv .expert a { color: var(--hv-blue); }

/* ── Demo page ───────────────────────────────────────────── */
.hv .demo-page { padding-top: 72px; padding-bottom: 96px; }
.hv .demo-copy .sec-head h1 { font-size: 52px; line-height: 1.08; letter-spacing: -1.6px; font-weight: 600; margin-top: 18px; }
.hv .demo-copy h2 { font-size: 20px; letter-spacing: -.4px; }
.hv .demo-points li { font-size: 16px; line-height: 23.25px; }
.hv .demo-points li svg { stroke: var(--hv-good); }
.hv .demo-note a { color: var(--hv-blue); }
.hv .cal-head { background: var(--hv-ground); }

/* ── Tools directory (tools.css) ─────────────────────────── */
.hv .tdir-hero h1, .hv .tcat-hero h1 { font-size: 60px; line-height: 1.06; letter-spacing: -2.1px; font-weight: 600; }
.hv .tdir-layer-head h2, .hv .tdir-results-head h2, .hv .tcat-related h2, .hv .tpg-similar h2 { font-size: 36px; line-height: 1.12; letter-spacing: -1.1px; font-weight: 600; }
.hv .tdir-search input { height: 52px; border-radius: 14px; border-color: var(--hv-line); }
.hv .tdir-search input:focus { border-color: var(--hv-blue); box-shadow: 0 0 0 3px rgba(47, 107, 240, .16); }
.hv .tdir-cat, .hv .tdir-card, .hv .tpg-box { border-radius: 20px; border-color: var(--hv-line); }
.hv .tdir-chip, .hv .tpg-tag { border-radius: 999px; }
.hv .tpg-title h1 { font-size: 48px; line-height: 1.08; letter-spacing: -1.5px; font-weight: 600; }
.hv .tpg-main h2 { font-size: 24px; letter-spacing: -.5px; font-weight: 600; }
.hv .tpg-box-cta .btn { width: 100%; }
/* The closing call of a directory page is a banner, not the scene: these
   pages are reference, and the homepage trial banner is the right weight. */
.hv .tdir-cta-in { border-radius: 24px; background: var(--hv-accent-tint); border: 1px solid var(--hv-accent-line); }
.hv .tdir-cta-copy h2 { font-size: 24px; letter-spacing: -.5px; font-weight: 600; }
@media (max-width: 860px) {
  .hv .tdir-hero h1, .hv .tcat-hero h1, .hv .demo-copy .sec-head h1 { font-size: 40px; letter-spacing: -1.2px; }
  .hv .tpg-title h1 { font-size: 34px; letter-spacing: -1px; }
  .hv .tdir-layer-head h2, .hv .tdir-results-head h2, .hv .tcat-related h2, .hv .tpg-similar h2 { font-size: 28px; }
}
@media (max-width: 560px) {
  .hv .tdir-hero h1, .hv .tcat-hero h1, .hv .demo-copy .sec-head h1 { font-size: 34px; letter-spacing: -1px; }
}